Что такое HTML?
HTML (Hypertext Markup Language) - это язык разметки, который используется для создания веб-страниц. Он позволяет описывать структуру и содержание веб-страницы, такие как заголовки, абзацы, списки, картинки и ссылки.
HTML состоит из тегов, которые обозначают различные элементы на странице и их связи друг с другом. Когда веб-страница с HTML-кодом загружается в браузер, браузер читает и отображает ее согласно описанной структуре и содержанию, давая пользователю возможность интерактивно взаимодействовать со страницей.
HTML - это язык без которого не может существовать веб-сайт. Это основа всех веб-страниц, которые мы видим в интернете. Без HTML не будет структуры и содержания для веб-страницы, так же как без фундамента не будет здания.
Синтаксис
HTML синтаксис состоит из тегов, которые обозначают элементы на странице и их связи друг с другом. Тег может обладать открывающим и закрывающим тегом, в котором описывается содержимое элемента, а может иметь только открывающих тег. Например, тег <p> обозначает абзац текста, и внутри него может быть написан текст:
Открывающий тег может иметь атрибуты, которые используются для описания дополнительной информации о элементе. Например, тег <img> используется для вставки изображения и имеет атрибут src, который указывает на местоположение изображения и атрибут alt, который позволяет отображать указанный текст в случае если картинка не загрузится:
Структура HTML-документа
Структура HTML документа обычно состоит из следующих частей:
- Декларация документа: это строка, которая обозначает тип документа и версию HTML, например: <!DOCTYPE html>
- Тег <html> : он открывает и закрывает документ HTML и содержит все остальные элементы документа.
- Тег <head> : содержит метаданные о документе, такие как заголовок, ключевые слова и стили, которые не отображаются на странице.
- Тег <body> : содержит видимое содержимое документа, такое как текст, изображения и ссылки. Это где основная часть содержимого сайта находится.
Это стандартная структура HTML документа, которая может модифицироваться в зависимости от нужд и задач, но основные элементы должны присутствовать в каждом документе HTML. Важно понимать и использовать стандартные структуры и правила синтаксиса HTML, чтобы обеспечить соответствие стандартам и совместимость с различными браузерами.
Основные теги
Теги <h1> - <h6>
<h1> - <h6> - Заголовки различного уровная, используются для организации содержимого. Важно уметь правильно их использовать. <h1> используется на странице один раз и является заголовком всей страницы. Остальные являются подзаголовками. Также важно использовать в правильном порядке. <h3> должен быть подзаголовком <h2>, но никак не наоборот. Не используйте более низкие уровни заголовков для того чтобы снизить размер шрифта: для этого используется CSS.
Пример кода:
Как это отображается в браузере:
Тег <a>
Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.
Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.
Синтаксис:
Тег <div>
Этот блочный элемент используется для группировки элементов и назначения стилей. Является самым часто используемым тегом.
Тег <strong>
Данный тег расставляет акценты в тексте путём выделения его фрагментов полужирным начертанием.
Пример кода:
Как это выглядит в браузере:
Тег <b>
Может показаться, что этот тег идентичен тегу <strong>, ведь на странице он отображается также:
Но различие все же есть: тег <strong> имеет семантическое значение (браузер придаст большее значение словам, которые выделены этим тегом), а тег <b> просто придает жирность без придания важности
Тег <em>
Этот тег выделят текст курсивом, придавая акцент:
Тег <i>
Этот тег похож на предыдущий, но не придает акцента тексту.
Теги <sub> и <sup>
Тег <sub> придает подстрочное начертание символов:
А тег <sup> придает надстрочное начертание символов:
Тег <pre>
Прошу заметить, что когда мы используем обычные теги, то все переносы текста игнорируются, можете проверить это сами. А вот чтобы произвести вывод неформатированного текста с сохранением пробелов и особенностей переносов, используется тег <pre>.
Добавление аудиозаписей и видео на сайт
Для этого используется тег <audio> c атрибутом src, где указывается ссылка на аудиозапись.
Видео может вставить аналогичным способом, используя тег <video> с атрибутом src. Также можно задать высоту и ширину, используя атрибуты height и width соответственно.
Это только некоторые из основных тегов HTML, существует множество других тегов для различных целей, таких как таблицы, формы, списки. Их мы изучим в отдельных главах. Важно понимать как эти теги используются и как они взаимодействуют друг с другом, чтобы можно было создавать и модифицировать веб-страницы качественно.
Задание
Создайте свой первый HTML-документ, и попробуйте задействовать все HTML-элементы описанные в главе.