- Предок. Предком называют элемент который содержит в себе другие. То есть, исходя из рисунка можно сказать что это предок для всех тегов, а является предком для , и . Аналогично это предок по отношению к и
.
- Потомок. Потомком называют элемент вложенный в другой. То есть — потомок , а потомок .
- Родительский элемент. Родительским элементом называют тег который связан с другими тегами более низкого уровня, и находится на дереве выше их. является родителем только для тегов и .
- Дочерний элемент. Дочерним называют тег который который вложен в тег более высокого уровня, то есть противоположность родительскому элементу. На рисунке тег является дочерним элементом тега .
- Сестринский элемент. Сестринским элементом называют тег имеющий один и тот же родительский тег. То есть, теги и на рисунке — сестринские элементы, так же как и теги с
.
Тут все довольно просто. Это нужно запомнить и знать. Теперь вы знаете основы HTML.
Расшифровка и перевод тегов
Когда я начинал изучать HTML, я задавался вопросом: как запомнить теги? Самым простым вариантом для меня стал перевод тегов. То есть, каждый HTML-тег это означает что-то на английском языке или это сокращение какого-то английского слова. Давайте разберемся с тегами которые уже нам известны.
| Тег | Значение | Перевод |
| Hyper Text Markup Language | Язык гипертекстовой разметки | |
| Head | Голова (документа) | |
| Body | Тело (документа) | |
| Title | Название, заголовок | |
| Heading 1…6 | Заголовок с 1 по 6 уровень | |
| Paragraph | Параграф | |
| Link | Ссылка | |
| Style | Стиль |
Как это работает?
Теперь у вас есть общее понимание о том, что такое HTML. Возникает вопрос, а как это вообще работает?
Работает это так. Мы пишем HTML-код и сохраняем его с расширением HTML. Наша операционная система (Windows или Linux) понимает что файл с таким расширением нужно открывать при помощи браузера.
Браузер открывает файл и читает (интерпретирует) наш код в виде дерева (DOM) в соответствии с определенными правилами.
После того как браузер «прочитал» и интерпретировал наш код он отображает его нам в привычном виде — в виде текста, таблиц, изображений, ссылок, списков и других элементов.
Элемент DOCTYPE
В конце об элементе DOCTYPE. Почему в конце, а не в начале? В самоучителе для начинающих я не придаю этому тегу особое значение, не не могу не упомянуть о нем.
DOCTYPE задает тип документа. Обычно это html. Указывать тип документа нужно в самом его начале.
Заголовок страницы в браузере
Любой тест, обычно это Hello World!
При помощи этого тега мы даем понять браузеру что мы используем именно HTML код. Возникает вопрос, а что, в HTML-документе может быть другой код? Вообще да, документ может быть XML, но пока об этом думать рано. Нужно знать следующее.
Тип документа зависит от того, какие теги в нем используются и есть три типа синтаксиса. Если вы используете все новые теги, то есть теги HTML5 (на момент написания статьи) то достаточно указать .
Для строгого типа указываем:
Более старые версии HTML сейчас практически не используются.
На этом все, теперь вы знаете основы HTML.
Обучаю HTML, CSS, PHP. Создаю и продвигаю сайты, скрипты и программы. Занимаюсь информационной безопасностью. Рассмотрю различные виды сотрудничества.
HTML начало
Как следует из предыдущей главы, HTML является языком разметки задача которого — просто «размечать» текстовый документ используя теги, которые, в свою очередь, говорят веб — браузеру, как именно нужно отобразить данный документ.
Создание HTML документов
Для того, чтобы создать HTML документ необходимо:
- Открыть любой текстовый редактор (например блокнот, Notepad++ и т.д.);
- Набрать произвольный текст и разметить его HTML тегами;
- Cохранить файл с расширением .htm или .html.
Базовый документ HTML
Ниже приведен в своей простейшей форме пример HTML-документа:
Пример HTML:
Это заголовок
Это параграф.
Теперь вы можете воспользоваться кнопкой Попробуй сам, которая расположена в правом верхнем углу окна кода, для того, чтобы проверить результат этого HTML — кода, или сохраните код в HTML — файл test.html с помощью любого текстового редактора. И, наконец, откройте его с помощью веб — браузера, например Internet Explorer, Google Chrome или Firefox и т.д. Браузер должен показать следующий результат:
HTML теги
Как говорилось ранее, HTML это язык разметки, который использует различные теги для форматирования содержимого документа. Эти теги заключены в угловые скобки . За исключением нескольких тегов, большинство тегов имеют соответствующие им закрывающие теги. Например имеет свой закрывающий тег , а тег в свою очередь, имеет свой закрывающий тег тег и т.д.
| Всегда закрывайте теги, так как отсуствие закрывающего тега может приводить к непредсказуемым ошибкам при отображении документа. |
Рассмотренный пример HTML-документа использует следующие теги:
| Название тега | Описание |
|---|---|
| Это инструкция для веб-браузера о том, на какой версии HTML написана страница. | |
| Этот тег является корневым элементом HTML страницы и заключает в себе весь HTML — документ | |
| Этот тег содержит мета-информацию о документе и может содержать другие теги, такие как , и т.д. | |
| Этот тег определяет заголовок веб-страницы, в браузере вы его видите вверху на текущей вкладке. | |
| Этот тег предназначен для предоставления структурированных метаданных о веб-странице. В нашем примере определяет кодировку документа. | |
| Элемент содержит видимое содержимое страницы, который включает в себя другие HTML-теги, например , , и т.д. | |
| Этот тег представляет собой заголовок. | |
| Этот тег представляет собой абзац. |
Теги могут быть написаны как в верхнем регистре так и в нижнем, но World Wide Web Consortium (W3C) — глобальный консорциум, который занимается поддержкой HTML-стандарта, рекомендует использовать нижний регистр (а в XHTML это требование является обязательным).
Структура HTML-страницы
Ниже приведена визуализация структуры HTML-страницы:
semyonnaumov / gist:b5a0631b2f34437f7928093c52fafa46
Данный конспект содержит основную информацию о языке разметки HTML: что такое HTML, зачем он нужен, как используется. Также кратко описана струтктура HTML-документа, список основных тегов с описанием их назначения, перечень параметров данных тегов.
HTML, он же HyperText Markup Languge — язык разметки гипертекста, используется для описания структуры содержимого веб-страниц, а именно, расположения элементов друг относительно друга, их внешнего представлния, их функций. Элементами веб-страницы могут быть заголовок, боковое меню, окошко поиска, странички с контентом, встроенное видео и т.д. HTML Определяет, как они будут отображаться (шрифт, размер, используемые стили), как они будут расположены на странице, как они будут взаимодействовать (ссылки, выпадающие списки, зависимые поля). Для красивого отображения элементов в HTML и страницы в целом обычно используеттся CSS (Cascading Style Sheets) — документ описания стилей. Также в веб-страницы можно встраивать динамические элементы, например, браузерные игры, перемещаемые пользовалелем окошки, кнопки со сложным поведением и т.д. Все это становится возможным благодаря использованию скриптов, написанных на JavaScript, которые также явно указываются в HTML-документе.
Окончательный облик страницы формируется браузером после парсинга HTML-документа, описывающего эту страницу. В зависимости от браузера разные стили могут отображаться по-разному, а определенные элементы могут не поддерживатся некоторыми (обычно старыми или Explorer) браузерами. Все это надо учитывать при формировании HTML-документа.
Обычно HTML-разметка страницы содержится в файле index.html .
HTML документ состоит из тегов. HTML не чувствителен к регистру в имени тегов!
Теги бывают с содержимым:
Содержимое и пустыми:. Теги можно вкладывать друг в друга:
html> head> Информация в head head> head> Внутри тега можно задавать параметры или, что то же самое, атрибуты:
Каждый HTML документ начинается с тега-декларации . Таким образом браузер понимает, что он читает именно HTML. Далее идет корневой тег , в который вложены все остальные теги — . В нем находятся два тега и . Первый нужен для хранения метаинформации, которая не отображается на странице: заголовка, скриптов, стилей и т.д.. Второй используется для описания видимых частей страницы.
> html> head> Информация в head head> body> Информация в body body> html>
| Тег | С содержимым | Описание |
|---|---|---|
| нет | Тег-декларация документа | |
| да | Корневой тег | |
| да | Тег для метаинформанции | |
| да | Определяет тело документа (видимую область) |
Тег используется для описания метаинформации о веб странице (информация об информации). Эта информация не видна пользователю, а используется браузерами и поисковыми движками.
Один из наиболее важных тегов, используемых в это незакрывающийся . С его помощью можно задать используемую кодировку, добавить описание страницы, ключевые слова для поисковиков, имя автора.
meta charset pl-s">UTF-8"> meta name pl-s">description" content pl-s">Free Web tutorials"> meta name pl-s">keywords" content pl-s">HTML,CSS,XML,JavaScript"> meta name pl-s">author" content pl-s">John Doe">
Для того, чтобы сделать веб-страницу адаптивной, т.е. чтобы она подстраивалась под разменры экрана устройства, нужно использовать viewport . Этот параметр обязательно надо добавлять для всех страниц (если конечно хотите сделать веб-страницу пригодной для использования в 2019+ году :-)).
meta name pl-s">viewport" content pl-s">width=device-width, initial-scale=1.0">
Внутри можно задавать внутрениие стили для документа:
style> header < text-allign: center; > style> link rel pl-s">stylesheet" href pl-s">mystyle.css">
Также внутри обычно указываются срипты:
script> function myFunction document.getElementById("demo").innerHTML = "Hello JavaScript!"; > script> Еще один тег — — используется для указания основного URL страницы, относительно которого разрешаются все остальные URL на странице:
base href pl-s">https://www.w3schools.com/images/" target pl-s">_blank">
HTML5 предоставляет набор тегов для удобной разметки стандартной структуры большинства страниц
body> header> nav> Navigation nav> header> section> main> article> Article article> article> Article article> main> aside> Aside element aside> section> footer> Footer footer> body> Текст в HTML обычно помещают в заголовках:
h1> Заголовок первого уровня h1> h6> Заголовок шестого уровня h6> p> Какая-нибудь статья p> pre> Какая-нибудь статья с сохранением переносов строк и пробелов pre> blockquote site pl-s">http://twitter.com"> "Самое трудное в жизни - засунуть одеяло в пододеяльник" - Джейсон Стетхем blockquote>
Для форматирования используется следующий набор тегов:
| Тег | Описание |
|---|---|
| Ссылка куда-нибудь — подчеркивание и другой цвет | |
| Bold | |
| Italics | |
| Italics with emphasis | |
| Bold with emphasis | |
| Bold with emphasis | |
| Переход на другую строку | |
| Кавычки |
table class pl-s">styled"> tr> th colspan pl-s">3">Spanning 3 Columnsth> tr> tr> td rowspan pl-s">3">Table Datatd> td>Table Datatd> td>Table Datatd> tr> tr> td>Table Datatd> td>Table Datatd> tr> tr> td>Table Datatd> td>Table Datatd> tr> table>
table class pl-s">styled"> colgroup> col style pl-s">background-color: blueviolet;"> colgroup> colgroup> col style pl-s">background-color: #f4e767;" span pl-s">2"> colgroup> thead> tr> th>First Nameth> th>Last Nameth> th>Emailth> tr> thead> tbody> tr> td>Johntd> td>Doetd> td>Johnny.doe@gmail.comtd> tr> tr> td>Janetd> td>Doetd> td>i_heart_johnny@gmail.comtd> tr> tbody> table>
Более детальное описание структуры HTML
| Тег | Самые важные атрибуты | Описание |
|---|---|---|
| — | ? | Заголовки разных уровней |
| style (CSS cстиль), title (заголовок параграфа) | Параграф | style (CSS cстиль), title (заголовок параграфа) | Аналог параграфа, сохраняет пробелы и переносы строк |
| href (куда ссылается) | Ссылка куда-нибудь | |
| src, alt (альтернатива картинке, напр. текстовое описание), width, heigth | Картинка | |
| ? | Кнопка | |
| ? | Unordered list | |
| ? | Ordered list | |
| ? | List item | |
| ? | Переход на другую строку | |
| ? | Horizontal row (разделитель текста) |