Основные понятия HTML. Ссылки. Формирование путей к файлам. Урок 2.

Понятие открывающий тэг, закрывающий тэг, элемент.

В этом уроке, давайте вкратце рассмотрим с вами, что же такое стили? Но прежде чем говорить об этом, мне хотелось бы рассказать о некоторых понятиях, которые мы впоследствии будем использовать. Вы уже знакомы с таким понятием как тэг, - он говорит браузеру как должен быть оформлен текст, который он обрамляет. Открывающий тэг обычно обозначается так - <h2>, закрывающий тэг пишется вот так - </h2>. Зачем всё это нужно, догадаться нетрудно, - браузер должен знать, где начинать оформление и где его заканчивать. Внутри открывающего и закрывающего тэга мы пишем какой-то текст. А вся эта конструкция вместе, – открывающий тэг + текст + закрывающий тэг, - называется элементом.

Теперь давайте попробуем придать нашей страничке какое-то оформление. Для того, чтобы это сделать, нужно написать парочку стилей; как один из вариантов, мы можем в блоке head прописать открывающий и закрывающий тэг style. Обычно у этого элемента также прописывают атрибут type="text/css". Атрибуты как правило несут дополнительную информацию об элементе. В самом коде это будет выглядеть следующим образом:

<style type="text/css">
</style>

А теперь давайте посмотрим с вами, чего же на самом деле можно добиться с помощью таблиц стилей.

Для этого добавим внутрь элемента style следующие строчки:

body {
  background-color: #e2e2e2;
  border: 1px solid gray;
  font-family: Verdana;
  padding: 10px;
}

h2 {
  text-align: center;
}

Хочу на всякий случай напомнить о том, что мы всё ещё работаем над тем файлом, который я создал в первом уроке. Итак, сохраните изменения в файле, и обновите страничку в браузере. Обратите внимание на те изменения, которые произошли с нашей страничкой.

Теперь давайте изучим CSS код более пристально. Перед фигурными скобками стоит тэг body – который здесь выступает элементом, к которому будут применяться правила. То что написано внутри фигурных скобок, - это и есть те самые правила, которые будут применяться к элементу с названием body. С h2 всё ровным счётом аналогично.

Итак, взглянем, какие правила у нас есть и за что они отвечают:

background-color: #e2e2e2; - очевидно что это свойство, судя по названию, отвечает за фон элемента, а #e2e2e2 – это его значение, в данном случае цвет. Согласен, это не совсем похоже на название цвета; всё дело в том, что все цвета в браузере имеют шестнадцатеричное представление. Позже мы ещё поговорим об этом.

border: 1px solid gray; - сокращенный вид записи придания элементу рамки. 1px – это ширина, solid –стиль сплошной линии, gray – цвет рамки.

font-family: Verdana; - название шрифта, которым будет отображаться текст на странице.

padding: 10px; - отступ по краям внутри элемента.

А следующий элемент, правила для которого мы указали – h2. В нём мы задали выравнивание текста по центру.

Ну вот, мы с вами вкратце и коснулись стилей. Чуть забежали вперёд конечно, но ничего страшного.

Итак, мы создали страничку, и даже придали ей необходимые стили – вполне неплохо. Но как мы знаем, сайты не ограничиваются лишь одной страничкой. Обычно они состоят из десятка, сотни, а даже и тысячи страничек – и это не предел. Давайте и мы расширим наш небольшой сайт, добавив ещё две странички, с которыми и будем работать. Сделаем это в той же папке, в которой хранится наш основной файл – index.html.

Я создам два файла и назову первый, допустим – otchet.html, а второй - concert.html. На будущее: когда будете создавать новые html-файлы, не забывайте, что некоторый код внутри них, в частности обязательный набор тэгов, - может повторяться. Поэтому, чтобы не писать один и тот же код дважды, можно просто взять файл index.html и сохранить его как otchet.html, - для этого нужно выбрать команду Сохранить как в вашем текстовом редакторе и ввести новое имя для файла. Далее просто удаляем из страницы лишние элементы, - то что находится внутри тэга style и body.

Ок, страницы мы с вами создали. Теперь осталось связать их, - иначе как пользователь найдёт другую страницу, если в index.html о ней нету никакой информации. Для этого и придумали такое понятие как...

Ссылки

Ссылки – это можно сказать основа интернета, то благодаря чему документы могут быть связаны друг с другом, образуя между собой некую паутину. Отсюда и пошло такое понятие как World Wide Web (www). Мы конечно привыкли к ним, и относимся как к чему-то само собой разумеющемуся. Но если так вдуматься, то это гениальное изобретение. Я как-то размышлял на тему того, как всё было, если бы не было такого полезного элемента. Но если бы не было ссылок, то наверное и не было и Интернета. А если бы Интернета был, но ссылок не было, то очевидно, что тогда их бы следовало придумать. Представим себе, хоть на минуточку, что Интернета нету, - очевидно, что тогда люди стали бы читали больше книг. Может это и само по себе неплохо конечно. Но так ли уж удобно. Допустим, мы читаем какую-то книгу и натыкаемся в ней на какое-то упоминание об одном историческом факте, который нас сильно заинтересовал и о котором мы хотим получить более детальную информацию. Что бы мы обычно делали, не будь у нас интернета? Скорее всего, просто бы пошли в какую-то библиотеку и искали с час нужную нам книгу. И это хорошо ещё, если библиотека находится где-то неподалеку, а если на поиск нужной книги уходит много времени? То ли дело Интернет, где можно просто указать ссылку на какую-то более подробную статью, разжевывающую определённый…и вот мы уже находимся в клике от необходимой нам информации.

Что-то я отвлёкся. Давайте попробуем осуществить связку посредством таких ссылок, на практике. Тут-то нам и пригодятся, созданные только что нами, веб-страницы. Собственно, для начала мы должны сообщить о таких страничках, добавив необходимую информацию в файл index.html.

Внутри тэга body я просто создам новый абзац и помещу в него текст:

<p>Также предлагаю вашему вниманию более подробный <a href="otchet.html">отчёт.</a> Информацию о других концертах, а также о городах, в которых они будут проводиться вы можете посмотреть <a href="concert.html">здесь</a></p>

Давайте проанализируем то, что мы сделали. Во-первых, мы решили сделать ссылкой слово отчёт. Сам текст, обернутый тэгом <a> ещё также принято называть анкором. Во-вторых, атрибуту тэга a, который называется href, мы присвоили значение названия документа, на который мы будем ссылаться. В данном случае, я создал две ссылки: одна из которых будет ссылаться на страничку otchet.html, если мы кликнем по слову отчёт; другая будет вести на страницу concert.html, если кликнуть по слову здесь.

Также браузер, встретив элемент a, сделал его подчеркнутым и синего цвета; таким образом, дав понять, что перед нами ссылка, по которой мы можем щёлкнуть и перейти на другую страницу.

Внутри ссылки может быть также помещено изображение. Вообще, мы не всё можем поместить внутри тэга a, - только либо текст, либо графику. Почему так, будет рассказано позже.

Обратите также внимание на то, как мы ссылаемся на сами файлы в атрибуте href. В данном случае, я просто указал concert.html, потому что он находится в той же папке, что и index.html. Давайте же усложним задачу и переместим этот файл в папку concert, которую тут же и создадим, она будет расположена на одном уровне с index.html. В эту папку переместим файл concert.html. Теперь откроем наш файл index.html и кликнем по ссылке с анкором "здесь". Мы увидим, что страничка наша недоступна. В чём дело? Как вы наверное, уже догадались, браузер не может найти документ, ведь его нету на прежнем месте. Как быть? Очевидно, что в атрибуте href будет необходимо прописать новый путь к файлу, а именно – href="concert/concert.html", что будет означать - перейти в папку concert, и уже только потом найти необходимый документ. Теперь всё встало на свои места.

А теперь попробуем усложнить задачу ещё больше. Сделаем на страничке concert.html ссылку на страницу index.html c анкором "Венруться назад". Трудность здесь состоит в том, что страница index.html находится уровнем выше. Мы научились ссылаться на нижестоящие папки, двигаясь вглубь. А как же двигаться вверх? А очень просто. Чтобы указать браузеру, что нужно перейти на уровень вверх, служит "..". То есть, в атрибуте href мы пропишем вот такое значение "../index.html". Полный текст фрагмента кода на страничке concert.html будет такой:

<a href="../index.html">Вернуться назад</a>

Если бы нам потребовалось подняться на две папки выше, то мы бы указали "../../index.html".

Можно конечно было бы не запариваться и сложить кучу файлов в одну папку. Но это был бы не истинный путь, так как рано или поздно, это кучка файлов стала бы разрастаться и в конце концов, потеряться в ней, не стоило бы ровным счётом ничего. Поэтому я бы порекомендовал вам подходить к этому делу более организованно и постоянно следить за тем, чтобы всё лежало на своих полочках. Тем самым вы организуете порядок не только в структуре своего сайта, но и у себя в голове.

На этом, пожалуй, всё! Увидимся в следующих уроках.