Здравствуйте, уважаемые читатели сайта Uspei.com. На прошлом уроке мы установили программу Notepad++. Теперь давайте создадим нашу первую веб-страницу и изучим основные теги HTML. В каждом HTML-документе имеются обязательные атрибуты, которые должны присутствовать в каждом таком документе. Это так называемый “каркас”. Прописывать вручную мы его не будем, а скопируем тут: karkas. Вставляем в новый документ, созданный в программе Notepad++ при ее открытии, и сейчас разберем каркас, основу которого составляют html теги для текста.
Сохраняем его для начала. Для этого создайте отдельную папку и назовите ее, например, HTML. Тогда можно будет все файлы сохранять в эту папку. Все будет в одном месте и так будет удобнее.
При сохранении необходимо указать имя файла. Запомните, что главная страница сайта всегда носит название index.html. Это имя и пропишем файлу. Тип файла выберем html.
Теперь давайте разберем все строки данного каркаса. Первая строка указывает браузеру на тип нашего документа. DOCTYPE можно так и перевести – «тип документа». И здесь мы указываем браузеру, что наш документ создан на языке html и его версию.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Эта строка указывается один раз и ее даже можно не запоминать.
Дальше начинается самое интересное, а именно html теги. Что такое тег? Теги HTML – это команды, которые указывают браузеру, что нужно делать. Какие-то теги говорят браузеру, что нужно отобразить абзац, другие, что нужно сделать отступ или таблицу. С помощью тегов мы общаемся с браузером на его языке и программируем его действия.
Тег <HTML>
Первый тег – это тег HTML. Обратите внимание на то, как тег создается. Сначала идет открывающая скобка, потом название тега и закрывающая скобка.
<html>
При этом обратите внимание также, что в самом низу также идет тег HTML, но уже со слешем.
</html>
Т.е. это уже закрытие тега. И здесь нам важно понимать, что есть парные теги, которые подлежат закрытию, а есть одинарные, которые закрывать не нужно. Одинарные используются намного реже чем парные.
В данном случае у нас классический пример парного тега. В данном случае тег HTML является просто контейнером, который содержит все остальные HTML теги. Он особо никакой роли не играет, поэтому здесь надо запомнить, что любой html код должен быть внутри этого контейнера.
Тег <head> и <body>
Следующий у нас идет тег head. Он также парный. И он содержит два других тега. Почему head? Если мы переведем head с английского это будет голова. А ниже вы увидите тег body. Body – это тело.
Любой html документ содержит как форматирующие теги, так и специальные. Что такое форматирующие теги? Форматирующие теги – это теги, отвечающие за абзацы, заголовки, картинки, ссылки, и т.д. Они по сути создают видимую часть страницы, все, что видит пользователь.
Но на самом деле для работы страницы нужны еще и специальные теги, которые например будут говорить браузеру, в какой кодировке сделана страница, какой у нее заголовок должен выводиться, какие таблицы стилей должны подключаться, какие скрипты должны подключаться.
Область head как раз отвечает за все вспомогательные теги, область body необходима для всех форматирующих тегов. Скорее всего область head была специально так названа, т.к. организует всю работу. Данная область указывает браузеру, какие скрипты будут подключаться, какая кодировка, какое название у страницы.
А вот в области body идет все форматирование и вся та часть страницы, которая видна пользователю.
Давайте подробнее рассмотрим контейнер head.
Тег <meta>
И начнем мы с тега META, который отвечает за кодировку.
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
Вообще тег meta – многогранный. Он может отвечать не только за кодировку, как в данном случае, но и за многие другие вещи. Но здесь данный тег говорит о кодировке.
Есть такая запись charset=utf-8, которая говорит браузеру о том, что данный документ создан в кодировке utf-8. Для чего вообще нужна кодировка? У нас в мире говорят и пишут на разных языках. И если мы здесь создаем страницу на русском языке, то в Германии, например, будут уже создавать страницу на немецком языке. Для того, чтобы браузер понимал язык, на котором создан сайт, была создана специальная кодировка, получившая название utf-8.
С того момента, как она вошла в обиход, она стала стандартом. Таким образом, пропала необходимость указывать кодировку для конкретного языка. Теперь достаточно указывать кодировку utf-8 и у вас сайт будет отображаться нормально во всех браузерах и при этом упрощается работа еще и с базой данных.
Но здесь есть один подвох: чтобы все правильно все работало, чтобы браузер правильно отображал страницу, в этой кодировке должен быть и сам документ. Здесь notepad++ очень нам поможет. У него есть такой пункт меню «Кодировки» и в нём, если у вас не выбран пункт «Кодировать в UTF-8 (без BOM)», то спуститесь ниже и щелкните по пункту «Преобразовать в UTF-8 (без BOM)».
Тег <title>
С кодировкой мы разобрались. Следующий служебный тег – это TITLE. Title в переводе с английского – это заголовок.
<title>Документ без названия</title>
Между открывающим и закрывающим тегом Title обычно указывается заголовок страницы, который будет отображаться во вкладке браузера, когда мы заходим на эту страницу. Более подробно о title именно с точки зрения SEO читайте эту статью.
Давайте наш документ назовем «Первая HTML страница», сохраним наш документ и посмотрим, как это выглядит в браузере. Нажимаем пункт меню запуск и далее «Launch in Firefox» (браузер можете выбрать любой).
И вот нам браузер пишет в заголовке вкладки «Первая HTML страница».
При этом содержимое сайта пустое, т.к. в контейнере body у нас ничего нет.
На этом данный урок закончим. Мы с вами разобрали, что такое тег-контейнер html , тег-контейнер body, тег-контейнер title, тег-контейнер head, который хранит все наши служебные теги. А также разобрали тег title, который выводит заголовок, тег meta, отвечающий за кодировку.
