УРОК 1. СТРУКТУРА HTML ДОКУМЕНТА
Перед началом работы создадим файл index.html, который будем редактировать в блокноте (Notepad++).
Задаем тип документа с помощью <doctype>
Строка <!DOCTYPE html> идет первой в файле HTML и перед ней не должно быть пробелов и пустых с трок.
<html>
Внутри элемента <html> помещается весь код
В теге html указываем атрибут lang, который определяет язык содержимого в документе
<head> — голова
Внутри тега определяются: заголовок страницы, кодировка символов, мета-теги, ссылки на внешние файлы, содержащие стили, сценарии и т.д.
Содержимое тега, за исключением заголовка, не отображается в браузере.
<body> — тело
<meta> — метатеги
Кодировка символов в теге head указывается следующим через метатэг <meta charset=»utf-8″>
В description и keywords указывается описание сайта (description) и ключевые слова (keywords)
<title> — заголовок страницы
Чрезвычайно важный тег.
Заголовок указывается в теге head:
<title>Разработка сайтов с помощью HTML5</title>
<link> — ссылка на style.css
Тэг используется для подключения к документу стилей, сценариев и т.д.
<link rel=»stylesheet» href=»style.css»>
В итоге код страницы будет выглядеть следующим образом:
Таблица стилей — это набор правил форматирования, позволяющий менять внешний вид документа, например размер и цвет текста. Без таких правил текст и другие элементы отображаются на экране с использованием стандартных стилей браузера. Стили представляют собой простые правила, занимающие обычно всего несколько строк кода, и их можно объявить в самом документе HTML. Загрузка стилей CSS из внешнего файла упрощает структуру основного документа, увеличивает скорость загрузки веб-сайта, а также позволяет воспользоваться преимуществами новых возможностей HTML5.[1]
В HTML5 не нужно указывать тип подключаемой таблицы стилей (атрибут type больше не используется). Достаточно двух атрибутов: rel и href. Название атрибута rel происходит от англ. relation (отношение), и его значение определяет, чем для нашего документа является подключаемый файл. В данном случае атрибуту rel присвоено значение stylesheet, то есть мы сообщаем браузеру, что styles.css — это CSS-файл со стилями.
[1] Гоше X. Д. HTML5. Для профессионалов. — СПб.: Питер, 2013. — 496 с