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

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

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

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

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

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

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

 <!DOCTYPE html>
<html>
    <голова>
        <title>Название страницы</title>
    </голова>
    <тело>
        <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> (source), чтобы указать URL-адрес изображения:

 <img src="url to 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 ><видео></код>).

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

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

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

Заключение

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

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