10 Ноябрь, 2020

ОСНОВЫ HTML

Что такое HTML?

Язык HTML – язык разметки гипертекста. HTML состоит из тегов. Теги описывают структуру HTML-документа(веб-страницы). Тэг - это специальное слово заключенное оформленное в угловые скобки <имя тега>, между которыми прописывается имя тега. Теги HTML-документа предназначены для управления конструкциями разметки: заголовками, абзацами, списками, таблицами и картинками.

Проще говоря HTML - это обычный текстовый документ с расширением html.

*пример отображения гипертекста в браузере*

Пример тэга:

<a>Дорога в IT. Frontend-разработка</a>

Тэги в себе содержат в себе атрибуты - уточняющие параметры того или иного тега.

Пример использования атрибута:

<a href="contacts.html”>Дорога в IT. Frontend-разработка</a>

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

HTML-документ содержит в себе 3 обязательные элемента:

Тип документа. Пример: <!DOCTYPE html>. Элемент не является тегом. Это инструкция для веб-браузера о том, какая версия HTML используется.

2. <head></head> - раздел с технической информацией о документе. Содержит в себе метаданные HTML - это данные о HTML-документе. Метаданные не отображаются.

3. <body></body> - раздел определяющий тело документа. Содержит в себе все отображаемые элементы документа. К примеру это могут быть заголовки, текст, картинки, ссылки, списки и т.д.

Что такое дерево документа?

Элементы, которые располагаются внутри тега <html>, составляют дерево документа. Иначе говоря объектную модель документа DOM (document object model).

Во взаимодействии элементов дерева необходимо понимать так называемые “родственные связи” между ними. Отношения между вложенными элементами подразделяются на родительские, дочерние и сестринские.

Предок - заключает в себе другие элементы. На рисунке для всех элементов предком будет являться <html>. Так же как и <body> или <nav> будут являться предками для содержащихся в себе элементам.

Потомок - элемент, находящийся внутри другого/других элемента(ов), к примеру <ul> будет являться потомком для <nav> и <body>.

Родительский элемент - элемент, связанный с элементами более низкого уровня и находящийся выше их. Так <html> будет являться родительским элементом только для <body> и <head>.

Дочерний элемент - непосредственно подчинен другому элементу более высокого уровня. Так a, <span> и <ul> будут являться дочерними по отношению к <div>.

Сестринский элемент - имеет общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. Так <h1>, <p>, <h2>, <nav>, <div> будут являться сестринскими.

Где можно работать с форматом такого документа?

Чтобы создавать веб-страницы, нужно использовать специальный инструмент - текстовый редактор кода. Существует множество различных ректоров, к примеру VS Code, Sublime Text, Notepad++, Atom, Brackets и т.д.

Также понадобится браузер, выбирайте наиболее удобный для вас.

Резюмируем