HTML. Урок 1 (структура документа, заголовки)



п.1. Минимальный документ, соответствующий правилам HTML выглядит так:

<html>

</html>

То, что внутри скобок, называется тег. Открывающий тег без слэша, закрывающий - со слэшем. Тег "html" указывает, что все что внутри него следует понимать как документ. 

 

 п.2. Язык html был нескольких версий (3-5), поэтому разные браузеры слегка по-разному отображают некоторые теги. Чтобы добиться нужного вида отображения, нужно четко указать, какой язык использован при написании страницы. Иногда приходится поиграться, т.к. в одном браузере функционал работает, а в другом - нет. Конкретную страницу иногда приходится делать с языком, отличным от основной массы сайта. Указание типа языка происходит в самом начале, до первого тега:

<!DOCTYPE html>

<html>

</html>

Если не подходит данный вид языка, иногда можно указать тип 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

 

или

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 

Но надо стараться создавать все документы с одним типом документа.

Данный тег - один из немногих, которые не имеют закрывающего тега.

 

п.3. Весь документ состоит из двух основных блоков: служебных заголовков в "голове" и сам текст/картинки страницы в "теле" документа. "Голова" обозначается интуитивно понятным тегом "<head>", а "тело" -соответственно, тегом "<body>". 

Получается документ вида:

 

<!DOCTYPE html>

<html>

 

<head>

Содержимое головы

</head>

 

<body>

содержимое тела

</body>

 

 

</html>

 

п.4. В "голове" хранится очень малое количество информации. Для начала нам надо указать, какая кодировка используется в этом файле. Для того, чтобы не иметь море проблем с перекодировками, все файлы всегда делать в кодировке уникод. О чем честно сообщаем браузеру с помощью тегов <meta charset="utf-8">  и <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />. Теги "meta" тоже не имеют закрывающей части. Название страницы, которое будет отображаться браузером в заголовке вкладки выводится внутри тега <title>....</title>. Иногда нужно, чтобы страница периодически сама перезагружалась, обновляя информацию внутри. В этом случае используем тег рефреш, где ХХХ - количество секунд до следующей перезагрузки: "<META HTTP-EQUIV="REFRESH" CONTENT="ХХХХ">". Если же надо, чтобы отобразилась одна страница, но после перезагрузки открылась другая, то в теге рефреша нужно указать адрес следующей страницы: "<META HTTP-EQUIV="REFRESH" CONTENT="XXXX;URL=http://YYYYYYY/">". Для того, чтобы поисковики понимали, о чем сайт, очень сжато нужно описать в специальном теге вместо ХХХ: "<meta name="description" content="ХХХХХХХ ХХХХХХХХХХ ХХХХХХХХХ>". По каким ключевым словам вы хотите, чтобы в первую очеред искали ваш сайт? Укажите это в теге: "<meta name="Keywords" content="АААААА, БББББ, ВВВВВ, ГГГГ">". Кроме этого, в "голове" подключаются файлы скриптов JavaScript и файлы стилей CSS, но это вам пока рано. Итого получаем документ:

<!DOCTYPE html>

<html>

 

<head>

<title>Наш первый сайт</title>

<meta charset="utf-8">

<meta http-equiv="Content-Typecontent="text/html; charset=UTF-8" />

<meta name="description" content="Сайт с уроками по HTML, ModX, MySQL, PHP">

<meta name="Keywords" content="web, уроки, HTML, ModX, MySQL, PHP">

</head>

 

<body>

содержимое тела

</body>

 

 </html>

Этот документ пока ничего не содержит, поэтому при просмотре мы увидим лишь белый лист.