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 (разделитель текста) |
21. Язык гипертекстовой разметки html
HyperText Markup Language(HTML) – язык разметки гипертекста – предназначен для написания гипертекстовых документов, публикуемых в World Wide Web.
Гипертекстовый документ– это текстовый файл, имеющий специальные метки, называемые тегами, которые впоследствии опознаются браузером и используются им для отображения содержимого файла на экране компьютера. С помощью этих меток можно выделять заголовки документа, изменять цвет, размер и начертание букв, вставлять графические изображения и таблицы. Но основным преимуществом гипертекста перед обычным текстом является возможность добавления к содержимому документагиперссылок– специальных конструкций языка HTML, которые позволяют щелчком мыши перейти к просмотру другого документа.
Существует два способа создания гипертекстовых документов. Можно воспользоваться одним из WYSIWYG HTML-редакторов (например, Microsoft FrontPage, или др.), для работы с которыми не требуется специальных знаний о внутренней структуре создаваемого документа. Этот способ позволяет создавать документы для WWW без знания языка HTML. HTML-редакторы автоматизируют создание гипертекстовых документов, избавляют от рутинной работы. Однако их возможности ограничены, они сильно увеличивают размер получаемого файла и не всегда полученный с их помощью результат соответствует ожиданиям разработчика. Но, безусловно, этот способ незаменим для новичков в деле подготовки гипертекстовых документов.
Альтернативой служит создание и разметка документа при помощи обычного редактора текста (NotePad). При этом способе в текст вручную вставляются команды языка HTML. Создавая документы таким способом, вы точно знаете, что делаете.
Как уже отмечалось, HTML-документ содержит символьную информацию. Одна ее часть — собственно текст, т. е. данные, составляющие содержимое документа. Другая – теги(markup tags), называемые такжефлагами разметки, – специальные конструкции языка HTML, используемые для разметки документа и управляющие его отображением. Именно теги языка HTML определяют, в каком виде будет представлен текст, какие его компоненты будут исполнять роль гипертекстовых ссылок, какие графические или мультимедийные объекты должны быть включены в документ. Графическая и звуковая информация, включаемая в HTML-документ, хранится в отдельных файлах. Программы просмотра HTML-документов (браузеры) интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом. Для файлов, содержащие HTML-документы, приняты расширения .htm или .html.
Прописные и строчные буквы при записи тегов не различаются.В большинстве случаев теги используются парами. Пара состоит из открывающего (start tag) и закрывающего (end tag) тегов. Синтаксис открывающего тега:
Прямые скобки, используемые в описании синтаксиса, означают, что данный элемент может отсутствовать. Имя закрывающего тега отличается от имени открывающего лишь тем, что перед ним ставится наклонная черта:
Атрибуты тега записываются в следующем формате:
Кавычки при задании значения аргумента не обязательны и могут быть опущены. Для некоторых атрибутов значение может не указываться. У закрывающего тега атрибутов не бывает.
Действие любого парного тега начинается с того места, где встретился открывающий тег и заканчивается при встрече соответствующего закрывающего тега. Часто пару, состоящую из открывающего и закрывающего тегов, называют контейнером, а часть текста, окаймленную открывающим и закрывающим тегом, –элементом.
Последовательность символов, составляющая текст, может состоять из пробелов, табуляций, символов перехода на новую строку, символов возврата каретки, букв, знаков препинания, цифр, и специальных символов (например, +, #, $, @), за исключениемследующих четырех символов, имеющих в HTML специальный смысл: < (меньше), >(больше), & (амперсенд) и » (двойная кавычка). Если необходимо включить в текст какой-либо из этих символов, то следует закодировать его особой последовательностью символов.
Структура HTML-документа
Самым главным из тегов HTML является одноименный тег – . Он должен всегда открывать ваш документ, так же, как тег должен непременно стоять в последней его строке. Эти теги обозначают, что находящиеся между ними строки представляют единый гипертекстовый документ. Без этих тегов браузер или другая программа просмотра не в состоянии идентифицировать формат документа и правильно его интерпретировать.
Закрывающий тег так же важен, как и открывающий. Если, например, документ включен в электронное письмо, тег