10 Ноябрь, 2020

ОСНОВЫ HTML

Что такое HTML?

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

ОСНОВЫ HTML, изображение №1


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

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

Пример тэга:

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

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

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

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

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

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

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

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

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

ОСНОВЫ HTML, изображение №3



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

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

ОСНОВЫ HTML, изображение №4



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

Предок - заключает в себе другие элементы. На рисунке для всех элементов предком будет являться <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 и т.д.

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

Резюмируем

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

Блог