Primer lesson: язык гипертекстовой разметки

Язык разметки гипертекста ( HTML )

HTML означает Hypertext Markup Language (язык гипертекстовой разметки). Это стандартный язык разметки документов, предназначенных для отображения в веб-браузере. HTML может поддерживаться такими технологиями, как каскадные таблицы стилей ( CSS ) и языками сценариев, такими как JavaScript.

Основы Интернета

По своей сути Интернет — это огромная сеть компьютеров, соединенных по всему миру. Основной способ взаимодействия с этой сетью — через Всемирную паутину ( WWW ), систему взаимосвязанных гипертекстовых документов, доступ к которым осуществляется через Интернет. В основе WWW лежат веб-страницы, представляющие собой документы, написанные на HTML . HTML обеспечивает базовую структуру сайтов, которая затем улучшается и модифицируется другими технологиями, такими как CSS и JavaScript.

Структура HTML -документов

HTML-документ структурирован в соответствии с набором вложенных тегов, которые являются элементами, заключенными в угловые скобки. Эти теги сообщают веб-браузеру, как отображать содержимое. Пример простой структуры HTML документа:

 <!DOCTYPE html>
<html>
    <голова>
        <title>Заголовок страницы</title>
    </head>
    <тело>
        <h1>Это заголовок</h1>
        <p>Это абзац.</p>
    </тело>
</html>

Этот код определяет базовую веб-страницу с заголовком, заголовком и абзацем текста.

HTML -элементы и теги

HTML-документы состоят из HTML-элементов. Каждый элемент представлен начальным тегом, некоторым содержимым и конечным тегом. Начальный и конечный теги элемента идентичны, за исключением того, что конечный тег включает косую черту перед именем элемента.

Например, тег <code><p></code> охватывает абзац текста и имеет следующую структуру:

 <p>Это пример абзаца.</p>

Разные элементы служат разным целям. Например:

Теги <code><h1>...</h1></code> – <code><h6>...</h6></code> используются для заголовков.
Тег <code><a></code> определяет гиперссылку.
Тег <code><img></code> встраивает изображение в документ.

Атрибуты

Элементы HTML могут иметь атрибуты, которые предоставляют дополнительную информацию об элементах. Атрибуты размещаются в начальном теге элемента и часто задаются в парах имя/значение, например <code>name="value"</code>.

Например, чтобы встроить изображение, мы используем тег <code><img></code> с атрибутом <code>src</code> (источник), чтобы указать URL-адрес изображения:

 <img src="url к image.jpg" alt="Описание изображения">

Атрибут <code>alt</code> предоставляет альтернативный текст для изображения, если его невозможно отобразить.

Ссылки и навигация

Использование тега <code><a></code> создает гиперссылки, которые являются основой взаимосвязанности Интернета. Гиперссылка может ссылаться на другую веб-страницу, другой раздел на той же странице или даже на загружаемый файл. Например:

 <a href="https://example.com">Посетите Example.com</a>

Это создает ссылку на <code>https://example.com</code>.

Списки

HTML предоставляет элементы для создания списков. Существует два основных типа списков:

Неупорядоченные списки (<code><ul></code>), где порядок элементов не имеет значения. Элементы в неупорядоченном списке помечены маркерами.
Упорядоченные списки (<code><ol></code>), где порядок элементов имеет значение. Элементы в упорядоченном списке пронумерованы.

Каждый элемент списка заключен в тег <code><li></code> (элемент списка).

HTML5

HTML5 — это последняя эволюция стандарта, представляющая множество новых функций, которые отражают современные потребности в мультимедийных и интерактивных документах. К ним относятся новые структурные элементы (<code><header></code>, <code><footer></code>, <code><article></code>, <code><section></code>), графические элементы (<code><canvas></code> для рисования, <code><svg></code> для масштабируемой векторной графики) и элементы мультимедиа (<code><audio></code> и <code><video></code>).

Семантический HTML

Семантический HTML относится к использованию разметки HTML для усиления семантики или смысла информации на веб-страницах. Вместо того, чтобы просто определять, как элементы выглядят или ведут себя (это работа для CSS и JavaScript), семантический HTML точно описывает структуру и тип контента. Например, тег <code><article></code> указывает, что контент внутри является статьей, тогда как тег <code><nav></code> обозначает навигационное меню.

Использование семантического HTML улучшает доступность и удобство поиска веб-контента, делая его более удобным для использования и обнаружения.

Заключение

HTML — краеугольный камень технологии Всемирной паутины, обеспечивающий базовую структуру веб-страниц. Благодаря использованию тегов, атрибутов и элементов HTML позволяет создавать структурированные документы. Понимая и применяя HTML , можно создавать широкий спектр контента, доступного в Интернете, от простых текстовых документов до сложных интерактивных мультимедийных впечатлений. Как основа для веб-разработки, владение HTML необходимо для тех, кто хочет заниматься дизайном или разработкой для Интернета.

язык гипертекстовой разметки