УРОК 1. СТРУКТУРА HTML ДОКУМЕНТА

Перед началом работы создадим файл index.html, который будем редактировать в блокноте (Notepad++). 

 

Задаем тип документа с помощью <doctype>

Строка  <!DOCTYPE html> идет первой в файле 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»> 

В итоге код страницы будет выглядеть следующим образом:

структура тэга head

Таблица стилей — это набор правил форматирования, по­зволяющий менять внешний вид документа, например размер и цвет текста. Без таких правил текст и другие элементы отображаются на экране с использованием стандартных стилей браузера. Стили представляют собой простые правила, занимающие обычно всего несколько строк кода, и их можно объявить в самом документе HTML. Загрузка стилей CSS из внешнего файла упрощает структуру основного документа, увеличивает скорость загрузки веб-сайта, а также позволя­ет воспользоваться преимуществами новых возможностей HTML5.[1]

В HTML5 не нужно указывать тип подключаемой таблицы стилей (атрибут type больше не используется). Достаточно двух атрибутов: rel и href. Название атрибута rel происходит от англ. relation (отно­шение), и его значение определяет, чем для нашего документа является подключаемый файл. В данном случае атрибуту rel присвоено значение stylesheet, то есть мы сообщаем браузеру, что styles.css — это CSS-файл со стилями.

[1] Гоше X. Д. HTML5. Для профессионалов. — СПб.: Питер, 2013. — 496 с

Добавить комментарий