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 (разделитель текста) |
2. Язык разметки html.
HTML – документ может быть создан с помощью любого текстового редактора, чаще всего блокнота, при сохранении его с расширением .htm(.html). В имени файла желательно не использовать кириллицу, пробелы и ряд других символов. Следует помнить, что большинство серверных программ (в частности, Apache) различают строчный и заглавный регистр символов, поэтому все имена файлов и их расширения и папок, предназначенных для работы в сети, следует писать только строчными латинскими буквами и цифрами длиной не более 8 символов без пробела.
Стартовая страница – страница, которая предназначена для загрузки в первую очередь при открытии сетевого ресурса, ее рекомендуемое имя index.htm (html).
HTMLявляется описательным языком разметки документов.
Разметка документа – описание различных фрагментов документа и их взаимного расположения. Разметка выполняется с помощью определенных символов ASCII.
Tag (тег) – указатель, метка, код, заключенный в угловые скобки <>, идентифицирующий определенный элемент документа, напр. абзац p>, заголовок h3>, таблицу table> и т.д.
Теговая модель описывает документ как совокупность контейнеров, каждый из которых начинается и заканчивается тегами, то есть документ НТМL представляет собой не что иное, как обычный АSСII-файл, с добавленными в него управляющими НТМL-кодами (тегами).
Теги НТМL-документов в большинстве своем просты и понятны, ибо они образованы с помощью общеупотребительных слов английского языка, понятных сокращений и обозначений. НТМL-тег состоит из имени, за которым может следовать необязательный список атрибутов тега. Текст тега заключается в угловые скобки («»). Простейший вариант тега — имя, заключенное в угловые скобки, например или . Для ряда тегов характерно наличие атрибутов, которые могут иметь конкретные значения, устанавливаемые автором для изменения функции тега.
Атрибут тега – дополнительный компонент тега, отвечающий за свойства объекта, содержащегося в теге, напр. P align=”center”>.
Атрибуты тега следуют за именем и отделяются друг от друга одним или несколькими знаками табуляции, пробелами или символами возврата к началу строки. Порядок записи атрибутов в теге значения не имеет. Значение атрибута, если таковое имеется, следует за знаком равенства, стоящим после имени атрибута и заключается в одинарные или двойные кавычки. Длина значения атрибута ограничена 1024 символами.
Чаще всего элементы разметки HTML или HTML-контейнеры состоят из начального и конечного компонентов, между которыми размещаются текст и другие элементы документа. Имя конечного тега идентично имени начального, но перед именем конечного тега ставится косая черта (/) (например, для тега стиля шрифта — курсив закрывающий представляет собой , для тега заголовка ). Конечные теги никогда не содержат атрибутов.
При использовании вложенных элементов разметки в документе следует соблюдать особую аккуратность. Вложенные теги нужно закрывать, начиная с последнего. Некоторые элементы разметки не имеют конечного компонента, поскольку являются автономными элементами. Например, тег изображения , который служит для вставки в документ графического изображения, конечного компонента не требует. К автономным элементам разметки также относятся разрыв строки (
), горизонтальная линейка (
) и теги, содержащие такую информацию о документе, которая не влияет на его отображаемое содержимое, например теги и .
Вместо термина «элемент разметки» применяют термин «контейнер». Структура контейнера:
Структура HTML-документа позволяет задействовать вложенные друг в друга контейнеры. Собственно, сам документ — это один большой контейнер, который начинается с тега и заканчивается тегом .
Кроме тегов, элементами HTML являются Escape последовательности или CER (Character Entity Reference), они предназначены для представления специальных символов в документе HTML, которые могут быть неверно обработаны браузером. Таблица наиболее часто используемых CER и соответствующие им числовые коды приведена в Приложении 4 .
— — Заголовки различного уровная, используются для организации содержимого. Важно уметь правильно их использовать. используется на странице один раз и является заголовком всей страницы. Остальные являются подзаголовками. Также важно использовать в правильном порядке. должен быть подзаголовком , но никак не наоборот. Не используйте более низкие уровни заголовков для того чтобы снизить размер шрифта: для этого используется CSS.
Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.
Тег
Этот блочный элемент используется для группировки элементов и назначения стилей. Является самым часто используемым тегом.
Тег
Данный тег расставляет акценты в тексте путём выделения его фрагментов полужирным начертанием.
Как это выглядит в браузере:
Тег
Может показаться, что этот тег идентичен тегу , ведь на странице он отображается также:
Но различие все же есть: тег имеет семантическое значение (браузер придаст большее значение словам, которые выделены этим тегом), а тег просто придает жирность без придания важности
Тег
Этот тег выделят текст курсивом, придавая акцент:
Тег
Этот тег похож на предыдущий, но не придает акцента тексту.
Теги и
Тег придает подстрочное начертание символов:
А тег придает надстрочное начертание символов:
Тег
Прошу заметить, что когда мы используем обычные теги, то все переносы текста игнорируются, можете проверить это сами. А вот чтобы произвести вывод неформатированного текста с сохранением пробелов и особенностей переносов, используется тег .
Добавление аудиозаписей и видео на сайт
Для этого используется тег c атрибутом src , где указывается ссылка на аудиозапись.
Видео может вставить аналогичным способом, используя тег с атрибутом src. Также можно задать высоту и ширину, используя атрибуты height и width соответственно.
Это только некоторые из основных тегов HTML, существует множество других тегов для различных целей, таких как таблицы, формы, списки. Их мы изучим в отдельных главах. Важно понимать как эти теги используются и как они взаимодействуют друг с другом, чтобы можно было создавать и модифицировать веб-страницы качественно.
Задание
Создайте свой первый HTML-документ, и попробуйте задействовать все HTML-элементы описанные в главе.