Понятие тега :: Создание каркаса страницы. Урок 02. Код для каркаса (шаблона) простейшей странички. На нашей первой страничке html_page_template.html нет ни одного тега для вывода информации для пользователя в окно браузера. Есть только служебные теги и тег комментария, который служит для удобства программиста, а не пользователя.
© Перепечатка разрешается с установкой ссылки на ресурс http://koci.inumo.ru
Понятие тега :: Создание каркаса страницы
Код для каркаса (шаблона) простейшей странички представлен здесь:
Посмотреть, как это будет выглядеть можно здесь: html_page_template.html.
Код для каркаса (шаблона) простейшей странички пользователю будет виден как пустая страничка. И Остап открыл перед изумленными антилоповцами пустую папку...
Хотя изумляться тут нечему. На нашей первой страничке html_page_template.html нет ни одного тега для вывода информации для пользователя в окно браузера. Есть только служебные теги и тег комментария, который служит для удобства программиста, а не пользователя.
Отметим такой важный момент. В каждой папке (в терминах Windows) или директории (в терминах UNIX) может быть несколько файлов html или htm. Общий вызов html файла имеет такой формат:
Файлы с именами index.html, index.htm являются особыми, главными, дефолтными файлами.
Их можно вызывать двумя способами:
http://kocby.ru/post/webmaster/html/index.html
http://kocby.ru/post/webmaster/html/
Проведем разбор каждого тега.
<!DOCTYPE html> - тип документа, в нашем случае HTML 5. Необходим для того, чтобы браузер понимал в соответствии с каким стандартом следует отображать данную страничку.
<html dir="ltr" lang="ru-RU"> - указание браузеру, что начинается документ html, причем направление ltr (Left To Right, сЛева НаПраво), язык документа русский. Тег парный, т.е. должен иметь соответствующий закрывающий тег ниже. Тег html является контейнером. Весь контент странички должен находиться внутри этого контейнера.
<head> - указание браузеру, что начинается область head (голова). В этой области размещаются служебные теги.
<meta charset="UTF-8" /> - Тег meta есть многофунциональный тег. В данном случае он определяет charset(кодировку) как UTF-8. Теги meta обычно являются одинарными (самозакрывающимися).
<title> - Тег title (заголовок) дает указание браузеру, какой текст следует выводить в верхнюю левую область браузера, а также на вкладке.
</title> - указание браузеру, что Тег title (заголовок) заканчивается.
</head> - указание браузеру, что область head заканчивается.
<body> - указание браузеру, что начинается область body.
... область body ...
</body> - указание браузеру, что область body заканчивается.
</html> - указание браузеру, что документ html заканчивается.
Обратите внимание, что кодировка самой странички должна быть UTF-8 (без BOM).
Проверить, какая текущая кодировка у файла можно нажатием клавиш:
Кодировки →
И теперь убедиться, что текущей кодировкой является именно →
UTF-8 (без BOM)
... а не какая-либо другая!
Если кодировка отличается от UTF-8 (без BOM),
Например, ANSI...
то ее можно перевести в нужную кодировку путем нажатия клавиш:
Кодировки →
преобразовать в UTF-8 (без BOM) →
Сохранить (дискетка).
Файл должен преобразоваться в кодировку UTF-8 (без BOM).
Вообще, хорошей идеей будет настроить Notepad++ так, чтобы он новые файлы создавал в кодировке UTF-8 (без BOM).
Этого можно добиться нажатием клавиш:
Опции →
Настройки... →
Новый документ →
Поставить галку UTF-8 без метки BOM и нажать кнопку Закрыть.
<!DOCTYPE html> <html dir="ltr" lang="ru-RU"> <head> <meta charset="UTF-8" /> <title>Типовой шаблон странички</title> </head> <body> <!-- Между тегами <body> и </body> размещается контент странички. //--> </body> </html>
Хотя изумляться тут нечему. На нашей первой страничке html_page_template.html нет ни одного тега для вывода информации для пользователя в окно браузера. Есть только служебные теги и тег комментария, который служит для удобства программиста, а не пользователя.
Отметим такой важный момент. В каждой папке (в терминах Windows) или директории (в терминах UNIX) может быть несколько файлов html или htm. Общий вызов html файла имеет такой формат:
http://kocby.ru/post/webmaster/html/html_page_template.html 123456789012345678901234567890123456789012345678901234567890 000000000100000000020000000003000000000400000000050000000006 Позиции: 01-07 - протокол, в нашем случае http 08-16 - имя сайта, в нашем случае kocby.ru 17-36 - путь к нашему файлу, в нашем случае /post/webmaster/html/ 37-59 - имя файла с расширением, в нашем случае html_page_template.html
Их можно вызывать двумя способами:
http://kocby.ru/post/webmaster/html/index.html
http://kocby.ru/post/webmaster/html/
Проведем разбор каждого тега.
<!DOCTYPE html> - тип документа, в нашем случае HTML 5. Необходим для того, чтобы браузер понимал в соответствии с каким стандартом следует отображать данную страничку.
<html dir="ltr" lang="ru-RU"> - указание браузеру, что начинается документ html, причем направление ltr (Left To Right, сЛева НаПраво), язык документа русский. Тег парный, т.е. должен иметь соответствующий закрывающий тег ниже. Тег html является контейнером. Весь контент странички должен находиться внутри этого контейнера.
<head> - указание браузеру, что начинается область head (голова). В этой области размещаются служебные теги.
<meta charset="UTF-8" /> - Тег meta есть многофунциональный тег. В данном случае он определяет charset(кодировку) как UTF-8. Теги meta обычно являются одинарными (самозакрывающимися).
<title> - Тег title (заголовок) дает указание браузеру, какой текст следует выводить в верхнюю левую область браузера, а также на вкладке.
</title> - указание браузеру, что Тег title (заголовок) заканчивается.
</head> - указание браузеру, что область head заканчивается.
<body> - указание браузеру, что начинается область body.
... область body ...
</body> - указание браузеру, что область body заканчивается.
</html> - указание браузеру, что документ html заканчивается.
Обратите внимание, что кодировка самой странички должна быть UTF-8 (без BOM).
Проверить, какая текущая кодировка у файла можно нажатием клавиш:
Кодировки →
И теперь убедиться, что текущей кодировкой является именно →
UTF-8 (без BOM)
... а не какая-либо другая!
Если кодировка отличается от UTF-8 (без BOM),
Например, ANSI...
то ее можно перевести в нужную кодировку путем нажатия клавиш:
Кодировки →
преобразовать в UTF-8 (без BOM) →
Сохранить (дискетка).
Файл должен преобразоваться в кодировку UTF-8 (без BOM).
Вообще, хорошей идеей будет настроить Notepad++ так, чтобы он новые файлы создавал в кодировке UTF-8 (без BOM).
Этого можно добиться нажатием клавиш:
Опции →
Настройки... →
Новый документ →
Поставить галку UTF-8 без метки BOM и нажать кнопку Закрыть.
*** Машина-Функционал для передвижения по страничкам курса HTML ***
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Тропинка к данной страничке:
ГлавСтр :: Урок_00 :: Урок_01 :: Урок_01.4 :: Лаба_1 :: Урок_01.5 :: Урок_01.6 :: Урок 02
Следующие странички, рекомендуемые для посещения и изучения:
Урок 03
Страничка сделана на основе контента курса HTML сайта kocby.ru