HTML начало
Как следует из предыдущей главы, HTML является языком разметки задача которого — просто «размечать» текстовый документ используя теги, которые, в свою очередь, говорят веб — браузеру, как именно нужно отобразить данный документ.
Создание HTML документов
Для того, чтобы создать HTML документ необходимо:
- Открыть любой текстовый редактор (например блокнот, Notepad++ и т.д.);
- Набрать произвольный текст и разметить его HTML тегами;
- Cохранить файл с расширением .htm или .html.
Базовый документ HTML
Ниже приведен в своей простейшей форме пример HTML-документа:
Пример HTML:
Это заголовок
Это параграф.
Теперь вы можете воспользоваться кнопкой Попробуй сам, которая расположена в правом верхнем углу окна кода, для того, чтобы проверить результат этого HTML — кода, или сохраните код в HTML — файл test.html с помощью любого текстового редактора. И, наконец, откройте его с помощью веб — браузера, например Internet Explorer, Google Chrome или Firefox и т.д. Браузер должен показать следующий результат:
HTML теги
Как говорилось ранее, HTML это язык разметки, который использует различные теги для форматирования содержимого документа. Эти теги заключены в угловые скобки . За исключением нескольких тегов, большинство тегов имеют соответствующие им закрывающие теги. Например имеет свой закрывающий тег , а тег в свою очередь, имеет свой закрывающий тег тег и т.д.
| Всегда закрывайте теги, так как отсуствие закрывающего тега может приводить к непредсказуемым ошибкам при отображении документа. |
Рассмотренный пример HTML-документа использует следующие теги:
| Название тега | Описание |
|---|---|
| Это инструкция для веб-браузера о том, на какой версии HTML написана страница. | |
| Этот тег является корневым элементом HTML страницы и заключает в себе весь HTML — документ | |
| Этот тег содержит мета-информацию о документе и может содержать другие теги, такие как , и т.д. | |
| Этот тег определяет заголовок веб-страницы, в браузере вы его видите вверху на текущей вкладке. | |
| Этот тег предназначен для предоставления структурированных метаданных о веб-странице. В нашем примере определяет кодировку документа. | |
| Элемент содержит видимое содержимое страницы, который включает в себя другие HTML-теги, например , , и т.д. | |
| Этот тег представляет собой заголовок. | |
| Этот тег представляет собой абзац. |
Теги могут быть написаны как в верхнем регистре так и в нижнем, но World Wide Web Consortium (W3C) — глобальный консорциум, который занимается поддержкой HTML-стандарта, рекомендует использовать нижний регистр (а в XHTML это требование является обязательным).
Структура HTML-страницы
Ниже приведена визуализация структуры HTML-страницы:
— — Заголовки различного уровная, используются для организации содержимого. Важно уметь правильно их использовать. используется на странице один раз и является заголовком всей страницы. Остальные являются подзаголовками. Также важно использовать в правильном порядке. должен быть подзаголовком , но никак не наоборот. Не используйте более низкие уровни заголовков для того чтобы снизить размер шрифта: для этого используется CSS.
Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.
Тег
Этот блочный элемент используется для группировки элементов и назначения стилей. Является самым часто используемым тегом.
Тег
Данный тег расставляет акценты в тексте путём выделения его фрагментов полужирным начертанием.
Как это выглядит в браузере:
Тег
Может показаться, что этот тег идентичен тегу , ведь на странице он отображается также:
Но различие все же есть: тег имеет семантическое значение (браузер придаст большее значение словам, которые выделены этим тегом), а тег просто придает жирность без придания важности
Тег
Этот тег выделят текст курсивом, придавая акцент:
Тег
Этот тег похож на предыдущий, но не придает акцента тексту.
Теги и
Тег придает подстрочное начертание символов:
А тег придает надстрочное начертание символов:
Тег
Прошу заметить, что когда мы используем обычные теги, то все переносы текста игнорируются, можете проверить это сами. А вот чтобы произвести вывод неформатированного текста с сохранением пробелов и особенностей переносов, используется тег .
Добавление аудиозаписей и видео на сайт
Для этого используется тег c атрибутом src , где указывается ссылка на аудиозапись.
Видео может вставить аналогичным способом, используя тег с атрибутом src. Также можно задать высоту и ширину, используя атрибуты height и width соответственно.
Это только некоторые из основных тегов HTML, существует множество других тегов для различных целей, таких как таблицы, формы, списки. Их мы изучим в отдельных главах. Важно понимать как эти теги используются и как они взаимодействуют друг с другом, чтобы можно было создавать и модифицировать веб-страницы качественно.
Задание
Создайте свой первый HTML-документ, и попробуйте задействовать все HTML-элементы описанные в главе.