1. HTML-теги.
В предыдущем уроке мы с Вами выяснили, что каркас web-страницстроится с помощью языка разметки html. Для этого в нем существуют элементы, которые называются тегами.
В языке html имеется четко ограниченный и заранее составленный набор тегов. Придумывать какие-либо новые теги нельзя и попросту запрещено. Ознакомиться со всеми тегами, их атрибутами и другой информацией можно на странице спецификации Html5.
Поэтому изучение языка html сводится к изучению всех существующих тегов, их свойств и принципов взаимодействия одних тегов с другими.
Все теги пишутся в угловых скобках и имеют следующий вид: <имя_тега>
Например, <p>. Внутри угловых скобок пишется имя тега. В данном примере имя у тега - р.
Именем тега может быть либо одно слово (head, option, table) либо один или несколько символов (a, p, hr, h1).
Язык html является регистронезависимым, т.е. имена тегов можно писать как маленькими или большими буквами, так и в перемешку. Тем не менее, для соблюдения правил хорошего тона в написании кода имена тегов рекомендую писать в нижнем регистре, т.е. маленькими буквами.
2. Парные и одинарные теги.
Все теги можно разделить на 2 категории: парные и одинарные.
Большинство тегов – парные, т.е. если есть открывающий тег, значит обязательно должен быть закрывающий тег. Закрывающий тег отличается от открывающего наличием слеша (/) перед именем тега.
Вот примеры парных тегов:
- <p>Пример абзаца.</p>
- <a>Пример ссылки.</a>
Как вы видите, у открывающих тегов <p> и <a> есть пары в виде закрывающих тегов </p> и </a>.
Информация, которая содержится между парными тегами, называется контентом и отображается на веб-странице. А сами теги являются всего лишь инструментами разметки и на странице не отображаются.
Вторая разновидность тегов – одинарные. Как видно из названия, одинарные теги не имеют пары в виде закрывающего тега. Кроме того, одинарные теги не содержат контент в явном виде.
Примеры одинарных тегов: <br />, <hr />, <img />
Поскольку у одинарных тегов нет закрывающего тега, то слеш необходимо писать прямо в открывающем теге через пробел после его имени.
В стандарте HTML5 использование закрывающего слеша в одинарных тегах необязательно. Тем не менее, я Вам рекомендую всегда его ставить. Возможно, когда-нибудь Вам придется править чужой html-код предыдущих стандартов, требующих обязательное использование слешов в одинарных тегах. Привыкнув не ставить слеш в одинарных тегах, Вы можете на автомате написать код, который не пройдет валидацию.
3. Первая практика.
Теперь пришло время получить первый практический опыт.
Первое, что необходимо сделать, начиная работу над новым проектом – это создать папку, в которой будут хранится все файлы проекта. На начальном этапе у нас будет один файл для хранения тегов html, потом добавится файл таблицы стилей, затем файлы изображений, шрифтов и т.д.
Итак, на компьютере создаем папку. Где она будет хранится – абсолютно не важно. Я создам папку на рабочем столе.
Далее в редакторе кода создаем новый файл и сохраняем его под именем index и с разрешением html.
Теперь в нашем созданном файле index.html напишем любые три слова английскими буквами и из папки проекта откроем файл с помощью браузера Firefox. Почему сейчас необходимо написать текст именно английскими буквами я поясню позже.
Как видите, браузер прекрасно прочитал и вывел написанный нами текст. Однако, без тегов мы не можем с этим текстом ничего сделать. Мы не можем задать ему цвет, фон, размер, наклон, жирность и т.д.
Так вот для того, чтобы отображать контент (т.е. содержимое) сайта в необходимом нам виде, как раз и используются теги. При этом, одни теги являются универсальными и могут применяться для различных целей. А другие имеют абсолютно конкретное предназначение.
Например, парный тег <p> предназначен для отображения абзаца текста, парный тег a используется для создания ссылок, а одинарный тег img - для вставки на страницу изображений.
Давайте попробуем обернуть первое наше слово в тег strong, второе – в тег i, а третье – в тег sub.
Теперь после сохранения и обновления страницы в браузере Вы увидите, все слова выглядят совершенно по-разному. Первое слово выделено жирным шрифтом, второе – курсивом, а третье и вовсе смещено вниз относительно остальных.
Это и есть результат воздействия тегов на контент.
Теперь давайте добавим между тегами побольше пробелов.
Не забывая сохраниться в редакторе и обновив страницу браузера мы обнаружим, что абсолютно ничего не изменилось и между словами как был, так и остался всего 1 пробел.
Теперь нажмем на странице правой кнопкой мышки и из контекстного меню выберем пункт «Исходный код страницы».
В открывшейся закладке браузера мы увидим, что пробелы между тегами на самом деле никуда не делись. А не выводятся они потому, что любые отступы между элементами html либо игнорируются, либо склеиваются в один в зависимости от ситуации.
Ситуация не изменится, даже если мы к пробелам или вместо них сделаем табуляцию, перевод на новую строку или будем использовать другие символы табуляции.
В браузере итоговый вид останется прежним. Это свойство браузеров очень удобно для форматирования и приведения кода в удобочитаемый вид и в дальнейшем будет использоваться нами постоянно.
