Доп.образование гр. 214 ГД на 21.04.22

Высылаем на эл.адрес [email protected] до 22 апреля включительно

Задание: Изучите и запишите лекционный материал в тетрадь.

Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.

HTML-документ — это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот), так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.). HTML-документ имеет расширение .html.

HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент обозначается в исходном документе начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением).

Начальный тег показывает, где начинается элемент, конечный — где заканчивается. Закрывающий тег образуется путем добавления слэша / перед именем элемента: …. Между начальным и закрывающим тегами находится содержимое элемента — контент.

Элементы, представленные одиночными тегами, не могут хранить в себе содержимого напрямую, оно прописывается как значение атрибута, например, элемент  создаст кнопку с текстом Кнопка внутри.

Элементы могут вкладываться друг в друга, например, 

Текст

Текст

HTML-элементы могут иметь атрибуты (глобальные, применяемые для всех HTML-элементов, и собственные). Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя атрибута="значение". Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы.

Каждому элементу можно присвоить несколько значений class и только одно значение id. Множественные значения class записываются через пробел, . Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.

Браузер просматривает (интерпретирует) HTML-документ, выстраивая его структуру (DOM) и отображая ее в соответствии с инструкциями, включенными в этот файл (таблицы стилей, скрипты). Если разметка правильная, то в окне браузера будет отображена HTML-страница, содержащая HTML-элементы — заголовки, таблицы, изображения и т.д.

HTML-документ состоит из двух разделов — заголовка — содержимое элемента  и содержательной части — содержимое .

1. Структура HTML-документа

Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD). DTD представляет собой XML-документ, определяющий, какие элементы, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.

DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.

Элементы, находящиеся внутри элемента , образуют дерево документа, так называемую объектную модель документа, DOM (document object model). При этом элемент  является корневым элементом.

Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения» между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.

• Предок — элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является . В то же время элемент  является предком для всех содержащихся в нем элементов: , 

  , ,  и т.д.

• Потомок — элемент, расположенный внутри одного или более типов элементов. Например,  является потомком , а элемент 

   является потомком одновременно для  и .

• Родительский элемент — элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1  является родительским только для  и . Элемент 

   является родительским только для .

• Дочерний элемент — элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы , , 

   и  являются дочерними по отношению к .

• Сестринский элемент — элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1  и  — элементы одного уровня, так же как и элементы ,  и 

   являются между собой сестринскими.

Является корневым элементом документа. Все остальные элементы содержатся внутри .... Все, что находится за пределами элемента, не воспринимается браузером как HTML-код и никак им не обрабатывается.

Раздел ... содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.

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

Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.

Необязательным элементом раздела  является элемент . С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных.

Элемент  может содержать несколько элементов , потому что в зависимости от используемых атрибутов они несут различную информацию.

С помощью элемента  можно запретить или разрешить индексацию веб-страницы поисковыми машинами.

Индексация и переход по ссылкам разрешены:

Индексация разрешена, переход по ссылкам запрещен:

Индексация и переход по ссылкам запрещены:

Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:

Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:

Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.

Элемент может содержать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.

.paper {

width: 200px;

height: 300px;

background-color: #ef4444;

color: #666666;

}

Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:

...

CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style, например:

Задать стили для документа можно также при помощи другого способа — записать их в отдельный файл с расширением .css, например, style.css.

Подключить файл со стилями к веб-странице можно двумя способами:

• через директиву @import url

• с использованием элемента . Данный способ является предпочтительным.

@import url(style.css);

Элемент  определяет отношение между текущей страницей и другими документами. Таких элементов на странице может быть несколько.

Элемент  позволяет присоединять к документу различные сценарии. Текст сценария может располагаться либо внутри этого элемента, либо во внешнем файле. Если текст сценария расположен во внешнем файле, то он подключается с помощью атрибутов элемента.

В разделе  располагается все содержимое документа.