29 Июня 2018
Справочник по HTML
Оглавление.
- Введение.
- Основы HTML.
- Структура HTML документа.
- Форматирование текста.
- Основные теги
- Ссылки на интернет ресурсы и справочники.
Введение
HTML (HyperText Markup Language) - язык гипертекстовой разметки, предназначен для структурирования сайта (построение каркаса сайта). В данный момент актуальная версия HTML 5.2
Основы HTML
Любая страница состоит из двух обязательных частей - данные разметки и контента. Данные разметки заключены в угловые скобки и называются тегами.
Теги бывают бывают двух типов - открывающий тег <>
и закрывающий тег </>
.
Есть еще один вид тегов - декларация <!-- Комментарий -->
этот тег не обрабатывается браузером.
Также, теги делятся на три группы:
- Теги верхнего уровня - html, head, body.
- Блочные тэги (block elements) - используются для структурного оформления, занимают всю ширину страницы. При создании тега он переносится но новую строчку
- Строчные тэги (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 свойства. Блочный тип.
Ссылки на интернет ресурсы и справочники.
- Официальный справочник - https://www.w3.org/
- Один и лучших справочников - htmlbook.ru
- Обучающий справочник HTML - http://theory.phphtml.net/books/css/?yclid=3797099727148044131
- Текстовый редактор Notepade++ - https://notepad-plus-plus.org/
- Текстовый редактор Sublimetext - http://www.sublimetext.com/
- Текстовый редактор Adobe Brackets - http://brackets.io/
- Текстовый редактор PHPStorm - https://jetbrains.ru/products/phpstorm/
- Файловый менеджер Filezilla - https://filezilla-project.org/
- Файловый менеджер ForkLift - https://www.binarynights.com/