Язык HTML – язык разметки гипертекста. HTML состоит из тегов. Теги описывают структуру HTML-документа(веб-страницы). Тэг - это специальное слово заключенное оформленное в угловые скобки <имя тега>, между которыми прописывается имя тега. Теги HTML-документа предназначены для управления конструкциями разметки: заголовками, абзацами, списками, таблицами и картинками.
Проще говоря HTML - это обычный текстовый документ с расширением html.
Пример тэга:
<a>Дорога в IT. Frontend-разработка</a>
Тэги в себе содержат в себе атрибуты - уточняющие параметры того или иного тега.
Пример использования атрибута:
<a href="contacts.html”>Дорога в IT. Frontend-разработка</a>
HTML-документ содержит в себе 3 обязательные элемента:
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 и т.д.
Также понадобится браузер, выбирайте наиболее удобный для вас.
В этой части рассмотрели основы понятия в гипертекстовом документе HTML. В следующей части расскажу подробнее о том, какие бывают теги и за что они отвечают, какие используются атрибуты в них, а также составим свой первый мини-сайт.