Справочник по HTML
29 Июня 2018

Справочник по HTML

Оглавление.

  1. Введение.
  2. Основы HTML.
  3. Структура HTML документа.
  4. Форматирование текста.
  5. Основные теги
  6. Ссылки на интернет ресурсы и справочники.

Введение

HTML (HyperText Markup Language) - язык гипертекстовой разметки, предназначен для структурирования сайта (построение каркаса сайта). В данный момент актуальная версия HTML 5.2

Основы HTML

Любая страница состоит из двух обязательных частей - данные разметки и контента. Данные разметки заключены в угловые скобки и называются тегами.
Теги бывают бывают двух типов - открывающий тег <> и закрывающий тег </>.
Есть еще один вид тегов - декларация <!-- Комментарий --> этот тег не обрабатывается браузером.

Также, теги делятся на три группы:

  1. Теги верхнего уровня - html, head, body.
  2. Блочные тэги (block elements) - используются для структурного оформления, занимают всю ширину страницы. При создании тега он переносится но новую строчку
  3. Строчные тэги (inline elements) - используются для оформления строк, занимают ширину заключенного в него текста. Могут включать в себя другие строчные теги и не могут блочные. 

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

Все названия тегов, заранее определены. Они все описаны на сайте www.w3.org

Первым делом должно идти объявление типа документа, далее декларативный заголовок и тело документа.

<!DOCTYPE HTML> <!-- Определение типа документа-->
<HTML> <!-- Начало документа-->
  <head> <!-- Начало заголовка-->
   <!-- Тут размещается службная информация. Пользователь ее не видит-->
    <title>Главная страница</title> <!-- Заголовок в шапку браузера-->
  </head> <!-- Конец заголовка-->
  <body> <!-- Начало тела документа -->
   <!-- Тут размещается содержание докуманта. Это видит пользователь-->
  </body><!-- Конец тела документа -->
</HTML> <!-- Конец документа--> 

Форматирование текста.

Теги для физического выделения текста:
  • b (bolt) - жирный.
  • i (italic) - курсивный.
  • u (underlined) - подчеркнутый.
  • s (strikethrough) - зачеркнутый.
  • H1-H6 - заголовки. 1 - самый большой, 6 - самый маленький. Блочный тег.
  • sub - переводит конкретную букву в нижний индекс (H2O)
  • sup - переводит конкретную букву в верхний индекс (E=MC2)
  • span - предназначен для выделения часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца (тега <p>) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег <span> и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.
Теги для логического выделения текста (используются для поисковых машин):
  • strong - выделение особо важных фрагментов жирным.
  • ем - выделение важных фрагментов курсивным.
  • ins - выделение фрагментов подчеркиванием.
  • del - выделение фрагментов перечеркиванием.
  • cute - выделение цитат курсивом.
  • code - отображение программного кода моноширинным шрифтом.
  • kbd - текст, вводимый с клавиатуры: отображается моноширинным шрифтом.
  • var - название переменной: отображается курсивом.
  • samp - выделение нескольких символов моноширинным шрифтом.
  • dfn - определение вложенного термина курсивом.
  • abbr title="Какое-то слово" - аббревиатура.
  • acronym title="Какое-то слово" - акроним (вид аббревиатуры).

Основные теги

  • p (paragraph)- разделяет текст на параграфы. Блочный тип.
  • br (brake)- переносить текст на новую строку.
  • pre - предформатирование, выводит текст без изменений, учитывая пробелы, табы и т.д. Блочный тип.
  • span - предназначен для выделения часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца (тега <p>) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег <span> и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.
  • div - Тег div служит контейнером для других тегов. Сам по себе он ничего не делает, однако в него можно положить много разных тегов, например, абзацев и заголовков, а затем для всех них одновременно применить различные CSS свойства. Блочный тип.

Ссылки на интернет ресурсы и справочники.

  1. Официальный справочник - https://www.w3.org/
  2. Один и лучших справочников - htmlbook.ru
  3. Обучающий справочник HTML - http://theory.phphtml.net/books/css/?yclid=3797099727148044131
  4. Текстовый редактор Notepade++ - https://notepad-plus-plus.org/
  5. Текстовый редактор Sublimetext - http://www.sublimetext.com/
  6. Текстовый редактор Adobe Brackets - http://brackets.io/
  7. Текстовый редактор PHPStorm - https://jetbrains.ru/products/phpstorm/
  8. Файловый менеджер Filezilla - https://filezilla-project.org/
  9. Файловый менеджер ForkLift - https://www.binarynights.com/