- Сэр Тимоти Джон «Тим» Бернерс-Ли — изобретатель Всемирной паутины и руководитель Консорциума всемирной паутины (W3C).
- Консорциум всемирной паутины (W3C) — разрабатывает стандарты или «рекомендации» по технологиям разработки веб-страниц.
- HTML — язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML. Язык HTML интерпретируется браузерами, результат отображается на экране монитора компьютера или мобильного устройства. Спецификацию разрабатывает W3C.
HTML документ размечается специальными ключевыми словами — тегами.
- Символ <
- Название тега
- Символ >
Пример:
<название_тега>Парные (открывающий и закрывающий):
<название_тега>Содержимое тега</название_тега>Непарные (одинарные):
<название_тега>или
<название_тега />обва варианта эквивалентны. Второй считается более строгий.
С помощью тегов формируются элементы.
Существует набор стандартных тегов. Полные списки:
- htmlbook.ru (не содержит информацию об устаревших тегах)
- w3schools.com (en)
- html5doctor.com (en)
Но допускается использование нестандартных тегов.
Атрибуты указывают дополнительное значение для тега (может влиять и не влиять на визуальное отображение элемента). Пишутся только в открывающем теге.
Правильно:
<название_тега атрибут="значение"> </название_тега>
<название_тега атрибут="значение" />
<название_тега атрибут="значение">Неправильно:
<название_тега атрибут="значение"> </название_тега атрибут="значение">Атрибуты без значения
<название_тега атрибут> </название_тега>
<название_тега атрибут />
<название_тега атрибут>Нужны для того, чтобы комментировать фрагменты коды, когда необходимо пояснение
<!-- Комментарий, не виден на сайте, но виден в коде --><h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
…
<h6>Заголовок шестого уровня</h6>Всего существует 6 уровней заголовков. Только заголовки бывают разного уровня, остальные теги не нумеруются.
<p>Первый абзац</p>
<p>Второй абзац</p><hr /><br /><div>
… … … … … …
… … … … … …
… … … … … …
</div><em>выделенный текст</em>
<strong>сильно выделенный текст</strong>
<span>сгруппированный текст</span>
<br />О <strong> и <em> — читаем HTML5 Doctor
<p>Donec sed odio dui. <strong>Nulla vitae</strong> elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue <em>laoreet</em> rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p><section>
<h1>Hello world!</h1>
<div>
<p>Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</div>
</section>Любые использованые в коде переносы строк, табы, несколько пробелов подряд и другие пробельные символы в браузере отображаются как один пробел.
Donec sed odio dui. Nulla vitae elit libero,
a pharetra augue. Donec id elit non mi porta gravida at eget metus.Результат: Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.
Англ. HTML entities
&- название или
#и номер (десятичный) или#xи номер (шестнадцатиричный)
;
¢— ¢¢— ¢¢— ¢
Полезные ссылки:
<!doctype html>
<html>
<head>
<title>First web page</title>
</head>
<body>
<h1>Hello world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
</body>
</html>Пояснение:
<!doctype html>— декларация HTML-документа, пишется в самом начале документа<html>— корневой элемент, объединяющий элементы<head>и<body><head>— заголовочная часть HTML-документа, предназначена для технической информации адресованной браузеру и другим сервисам<body>— основная часть HTML-документа, предназначена для информации отображаемой на сайте<title>— заголовок документа, отображается в табе или закладках
Кодировку HTML указывают внутри элемента <head> (info):
<meta charset="utf-8" />— HTML5<meta http-equiv="content-type" content="text/html; charset=UTF-8">— HTML4
Ссылки:
Сам файл должен быть закодирован в UTF-8 формат (Atom это делает по-умолчанию).
- h1 … h6 — блочные элементы, заголовки;
- p — блочный элемент, абзац;
- div — простой блочный элемент, (часто используется для структурирования элементов);
- hr — блочный элемент, горизонтальная линия;
- a — строчный элемент, ссылка;
- b, strong — строчные элементы, жирный и сильно выделенный элемент (см. HTML5 Doctor);
- i, em — строчные элементы, курсивный и выделенный элемент (см. HTML5 Doctor);
- span — простой строчный элемент.
<header>— «шапка», заголовочная часть сайта, блока, раздела и т. п.<footer>— «подвал», заключительная часть сайта, блока, раздела и т. п.<section>— некий раздел в документе, например, тематически сгрупперованная информация, часто с заголовком.<nav>— блок с навигацией.<main>— главная часть сайта, с уникальным для данной страницы содержимым (можен использоваться в документе один раз).<article>— содержание, например, статья в блоге, журнале, газете, комментарий, пост на форуме и т. д. Все что может рассматриваться как самостоятельный блок информации.<aside>— дополнительный, связанный с основной информацией контент, но который может быть свободно исключен из страницы<figure>— самостоятельный контент (может содержать<figcaption>), должен быть связан с основным содержимым, но его расположение может быть независимым от основного контента. Часто используется для изображений, иллюстраций, диаграм и т. п.<figcaption>— заголовок к<figure>
- нумерованные
ol - маркированные
ul
Нумерованные
<ol>
<li>текст</li>
<li>текст</li>
<li>текст</li>
…
</ol>Маркерованные
<ol>
<li>текст</li>
<li>текст</li>
<li>текст</li>
…
</ol>Простая структура
<table>
<tr>
<th>текст</th>
<th>текст</th>
<th>текст</th>
</tr>
<tr>
<td>текст</td>
<td>текст</td>
<td>текст</td>
</tr>
</table>Полная структура
<table>
<thead>
<tr>
<th>текст</th>
<th>текст</th>
<th>текст</th>
</tr>
</thead>
<tbody>
<tr>
<td>текст</td>
<td>текст</td>
<td>текст</td>
</tr>
</tbody>
</table>