Здравствуйте, дорогие читатели! Меня зовут Анастасия и я составила для вас специальный справочник по HTML. Прочитав всего лишь 10 сообщений, вы вникнете во все области веб-программирования, а пройдя по окончании итоговый тест, закрепите свои знания и поймёте, что вы полностью готовы создавать свой первый блог.

Так что же означает эта странная аббревиатура — HTML? Давайте разбираться!

HTML (от англ. HyperText Markup Language — ‘язык гипертекстовой разметки’) — стандартизированный язык разметки документов во Всемирной паутине. Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.

Язык гипертекстовой разметки HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1986–1991 годах в стенах ЦЕРНа в Женеве в Швейцарии. HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки.

Язык разметки HTML получил широкую популярность. На данный момент это единственный язык, с помощью которого создается разметка сайта. Важно понять, что это именно разметка. Так называемый движок создается на другом языке программирования (например, PHP, JavaScript), который позволяет создавать интерактивные страницы; HTML это не позволяет.

Файлы, созданные на HTML, имеют расширения .html или .htm. Чтобы создать файл HTML, достаточно открыть блокнот и сохранить его с расширением .html.

Вместо заключения

Изучение языка HTML — интересное и одновременно лёгкое дело. Ведь чтобы говорить, например, на английском языке, не обязательно знать все слова. Так и здесь — необходимо усвоить лишь некоторые из основных тегов и научиться с ними работать. А дальше останется практиковаться и нарабатывать навык.

А для поднятия аппетита к изучению языка разметки HTML 😋 предлагаю вам посмотреть это видео с канала «Loftblog»:

Дорогие читатели! Мы приступаем к изучению языка разметки HTML. Вначале изучим синтаксис HTML, а затем, в следующем сообщении, разберём структуру веб-страницы и несколько основных тегов, с помощью которых вы сможете создать HTML-документ.

HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент в исходном документе обозначается начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением).

Начальный тег показывает, где начинается элемент, а конечный — где заканчивается. Открывающий тег состоит из имени тега, заключённого в угловые одиночные кавычки: <имя тега>*, а закрывающийся образуется путём добавления слеша / перед именем тега: </имя тега>. Внутри, то есть между этими тегами, находится сам текст элемента, то есть контент: <имя тега [параметры]>контент</имя тега>.

Одиночные теги не могут хранить в себе содержимого напрямую, поэтому оно прописывается как значение атрибута: <имя тега [параметры]>.

Теги могут вкладываться друг в друга: <имя тега-1><имя тега-2>контент</имя тега-2><имя тега-1>. Обратите внимание: закрываться теги должны по принципу матрёшки — в обратном порядке.

HTML-элементы могут иметь атрибуты (глобальные, применяемые для всех HTML-элементов, и собственные). Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя атрибута="значение". Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы. Значений может быть несколько, в таком случае они разделяются точкой с запятой ;.

Каждому элементу можно присвоить несколько значений class и только одно значение id. Множественные значения class записываются через пробел, например: <div class="nav top">. Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.

————
* Здесь и далее во всём тексте уроков на бежевом фоне будет показываться программный код языка HTML, а на сером — то, что будет выводиться на экран.

Дорогие читатели! В этом сообщении мы разберём подробно структуру страницы, размещённой во Всемирной паутине, и изучим несколько основных тегов, с помощью которых вы сможете создать HTML-документ.

Структура веб-страницы

Вообще структура любой страницы, размещённой в сети Интернет, выглядит следующим образом.

1. Объявление формата документа.
2. Корневой элемент HTML-страницы.
1. Техническая информация о документе:
• кодировка;
• заголовок документа;
• таблица стилей;
• сценарии.
2. Основная часть документа.

В виде кода эту структуру можно представить так.

<!DOCTYPE html> <!-- Формат документа -->
<html>
    <head> <!-- Техническая информация о документе -->
        <meta charset="UTF-8"> <!-- Кодировка символов документа -->
        <title>...</title> <!-- Заголовок документа -->
        <link rel="stylesheet" type="text/css" href="style.css"> <!-- Таблица стилей -->
        <script src="script.js"></script> <!-- Сценарии -->
    </head>
    <body> <!-- Основная часть документа -->
    </body>
</html>

Основные теги

<!DOCTYPE html>
Инструкция DOCTYPE определяет версию HTML и DTD-файл.

<html>

Тег <html> является основообразующим, корневым элементом, предком для всех остальных элементов. Весь код HTML располагается внутри открывающегося и закрывающегося тегов <html>...</html>. Всё, что расположено за их пределами, не воспринимается браузером как код HTML и, следовательно, никак им не обрабатывается.

<head>
Внутри тегов <head>...</head> располагается информация о документе: заголовок, кодировку, служебные описания, например сценарии; причём тег заголовка <title> обязателен.
Текст, расположенный между тегами <title> и </title>, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов.

<meta>
С помощью одинарного тега <meta> можно задать описание содержимого веб-страницы, а также ключевые слова для поискового портала. Если текст между тегами <title> и </title> используется в качестве текста ссылки на эту страницу, то описание из тега <meta> будет отображено под ссылкой на веб-страницу.
Элемент <head> может содержать несколько элементов <meta>, потому что в зависимости от используемых атрибутов они несут различную информацию.

<style>
Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.
Внутрь этого элемента можно записывать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.
Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название.

<link>
Одиночный тег <link> устанавливает связь с внешним документом вроде файла со стилями или со шрифтами.

<script>
Элемент <script> позволяет присоединять к документу различные сценарии. Закрывающий тег обязателен, при этом текст сценария может располагаться либо внутри этого элемента, либо во внешнем файле. Если текст сценария расположен во внешнем файле, то он подключается с помощью атрибутов элемента.

<body>
Внутри этого элемента находится всё содержимое документа, которое нужно вывести на экран.

Дорогие читатели! Сегодня вы узнаете, как можно форматировать текст, чтобы придать ему более красивое оформление.

Тегов форматирования в языке разметки HTML не так много. Некоторые дублируют друг друга, выполняя при этом разную роль. Мы рассмотрим все теги форматирования для получения объективного представления о форматировании текста в HTML.

Теги собственно форматирования текста

Теги, выделяющие текст курсивом

Теги, выделяющие текст курсивом, следующие:

• <cite>...</cite>,
• <dfn>...</dfn>,
• <em>...</em>,
• <i>...</i>.

Как было сказано выше, каждый тег, в данном случае выделяя текст курсивом, играет определённую роль. Так, теги <cite>...</cite> используются для логического выделения названий книг, статей и цитат. Теги <dfn>...</dfn> используются для выделения определений. Тегами <em>...</em>, <i>...</i> выделяют важные фрагменты текста.

Например, следующий код:

Привет! Сегодня <i>чудесный</i> день, не правда ли!?

выведет на экран следующее:

Привет! Сегодня чудесный день, не правди ли!?

Теги, выделяющие текст полужирным шрифтом

Теги, выделяющие текст полужирным шрифтом, следующие:

• <strong>...</strong>,
• <b>...</b>.

Оба тега используются для выделения важных фрагментов текста.

Например:

<b>Яблоко</b> — сочный плод яблони, который употребляется в пищу в свежем виде, служит сырьём в кулинарии и для приготовления напитков.

На экране будет видно:

Яблоко — сочный плод яблони, который употребляется в пищу в свежем виде, служит сырьём в кулинарии и для приготовления напитков.

Теги, выделяющие текст подчеркиванием

Теги для подчёркивания текста следующие:

• <ins>...</ins>,
• <u>...</u>.

Оба тега используются для подчеркивания важных фрагментов текста.

Например:

    — Подчеркните, ребята, подлежащее в предложении «Мама мыла раму».

    — Хорошо, Марьиванна!

    — Кто уже готов?

    — Я! — на весь класс уверенно крикнула Настя.

    — Ну-ка покажи. <i>(Смотрит в Настину тетрадь.)</i>

«<u>Мама</u> мыла раму».

    — Молодец! Это заслуженная десятка, — сказала преподаватель, подходя к своему столу.

На экране увидим следующее:

    — Подчеркните, ребята, подлежащее в предложении «Мама мыла раму».

    — Хорошо, Марьиванна!

    — Кто уже готов?

    — Я! — на весь класс уверенно крикнула Настя.

    — Давай-ка посмотрю. (Смотрит в Настину тетрадь.)

«Мама мыла раму».

    — Молодец, Настя! Это заслуженная десятка, — сказала преподаватель, подходя к своему столу.

Теги, выводящие текст моноширинным шрифтом

Это теги:

• <code>...</code>,
• <kbd>...</kbd>,
• <samp>...</samp>,
• <tt>...</tt>.

Каждый из этих тегов выводит текст шрифтом с одинаковой шириной каждого символа. Моноширинные шрифты используются, например, в средах программирования: так легче воспринимать код. Для выделения именно программного кода используется тег <code>...</code>.

Рассмотрим пример:

Площадь квартиры — <code>25 квадратных метров</code>.

На экране мы увидим:

Площадь квартиры — 25 квадратных метров.

Теги, выводящие текст в верхнем и нижнем индексах

Тег, выводящий текст в верхнем индексе:

• <sup>...</sup>,

и тег, выводящий текст в нижнем индексе:

• <sub>...</sub>.

Эти теги очень полезны при составлении, например, формул.

Рассмотрим пример:

Ускорение автомобиля — 5 м/с<sup>2</sup>.
Молекула воды — H<sub>2</sub>O.

На экране мы получим привычные глазу виды:

Ускорение автомобиля — 5 м/с².
Молекула воды — H₂O.

Теги, перечёркивающие текст

Это теги

• <s>...</s>,
• <strike>...</strike>,
• <del>...</del>.

Они используются для выделения удаляемого из документа содержимого.

Например:

<s>Ценок</s> Конец.

На экране имеем:

Ценок Конец.

Теги заголовков

Теги заголовков представляют из себя шесть однотипных тегов:

• <h1>...</h1>,
• <h2>...</h2>,
• <h3>...</h3>,
• <h4>...</h4>,
• <h5>...</h5>,
• <h6>...</h6>.

Заголовки являются важными элементами веб-страницы, они упорядочивают текст, формируя его визуальную структуру. При использовании заголовков необходимо учитывать их иерархию, т. е. за <h1> должен следовать <h2> и т. д. Не допускается вложение других тегов в теги по типу <h1>...<h6>. Заголовок самого верхнего уровня — <h1> — на странице рекомендуется использовать только один раз, по возможности частично дублируя заглавие страницы.

Теги абзаца и переноса текста

Тег <p>

Этот тег разбивает текст на отдельные абзацы, отделяя друг от друга пустой строкой. Браузер автоматически добавляет верхний и нижний отступы, равный 1 em.

Тег <br>

Он переносит текст на следующую строку, создавая разрыв строки.

Тег <hr>

Используется для разделения контента на веб-странице. Отображается в виде горизонтальной линии.

Дорогие читатели! Сегодняшний урок посвящён простой, но очень важной теме: вы научитесь создавать таблицы в HTML-документах.

В ячейках таблицы могут находиться абсолютно любые элементы — так же, как и за её пределами.

Создание таблицы

Для создания таблицы используется парный тег <table>...</table>. Сама таблица находится внутри него. Каждая строка таблицы создаётся с помощью тега <tr>...</tr>. Ячейка заголовка создаётся тегом <th>...</th>, а ячейка содержимого — с помощью тега <td>...</td>. Также можно добавить подпись к таблице — вносится она внутрь тега <caption>...</caption>, который, в свою очередь, должен располагаться после открывающего тега создания таблицы, но до объявления первой строки.

Общая структура таблицы выглядит следующим образом:

<table>
    <caption>Подпись к таблице</caption>
    <tr> <!-- Тег строки -->
        <th>Заголовок 1</th> <!-- Тег ячейки в строке -->
        <th>Заголовок 2</th>
    </tr>
    <tr>
        <td>Содержимое 1</td>
        <td>Содержимое 2</td>
    </tr>
</table>

Ячейки строк или колонок можно логически группировать при помощи тега <colgroup>...</colgroup>. Он группирует один или более столбцов для единого форматирования, позволяя применить стили к столбцам, вместо того чтобы повторять стили для каждой ячейки и для каждой строки. Добавляется непосредственно после тегов <table> и <caption>...</caption>.

Логическая группировка строк и столбцов

Элемент <col> формирует группы столбцов, которые делят таблицу на разделы, не относящиеся к общей структуре, т. е. не содержащие информацию одного типа. Позволяет задавать свойства столбцов для каждого столбца в пределах элемента <colgroup>.

Также в стандарте языка HTML была заложена группировка разделов таблицы на заголовки, содержимое и итоги; однако из-за устаревания этой группировки мы её пропустим.

Объединение ячеек таблицы

Для объединения ячеек таблицы используются атрибуты colspan и rowspan. Первый задаёт количество ячеек, объединённых по горизонтали, а второй — по вертикали. Они используются внутри тегов строки или столбца, например код <td colspan="3">Содержимое</td> объединит три ячейки по горизонтали в одну.

Дорогие читатели! Сегодня ещё одна простая тема — HTML-списки. Вы узнаете, как группировать связанные между собой фрагменты информации с помощью неупорядоченных, упорядоченных, многоуровневых и смешанных списков.

Маркированный список

Маркированный список представляет собой неупорядоченный список.

В качестве метки в таком списке выступает метка, например закрашенный круг. Создаётся список с помощью парного тега <ul>...</ul>, а каждый элемент списка — с помощью тега <li>...</li>.

Пример маркированного списка:

<strong>Список продуктов</strong>

<ul>

    <li>яблоки — 8 шт.,</li>

    <li>груши — 5 шт.,</li>

    <li>бананы — 2 ветки,</li>

    <li>апельсины — 4 шт.,</li>

    <li>картофель — 2 кг,</li>

    <li>лук — 6 головок.</li>

</ul>

На экране увидим следующее:

Список продуктов

• яблоки — 8 шт.,
• груши — 5 шт.,
• бананы — 2 ветки,
• апельсины — 4 шт.,
• картофель — 2 кг,
• лук — 6 головок.

Нумерованный список

Нумерованный список представляет собой упорядоченный список. Основное, первостепенное должно располагаться в начале, сверху, а малозначимое, второстепенное — в конце, снизу.

В качестве метки используются цифры, причём строго в порядке их следования, и буквы, причём строго в том порядке, в котором они определены в алфавите. Создаётся список с помощью парного тега <ol>...</ol>, элемент создаётся с помощью <li>...</li>.

Рассмотрим пример:

<strong>Распорядок дня</strong>

<ol>

    <li>07:00 — подъём.</li>

    <li>07:00–07:30 — проветривание комнаты, утренний туалет.</li>

    <li>07:30–04:45 — зарядка.</li>

    <li>07:45–08:15 — завтрак.</li>

    <li>08:30–16:15 — уроки по расписанию.</li>

    <li>16:25–17:10 — факультативные занятия.</li>

    <li>17:40–19:40 — выполнение домашнего задания.</li>

    <li>20:00–20:30 — ужин.</li>

    <li>20:30–21:00 — проветривание комнаты, вечерний туалет.</li>

    <li>21:00 — отход ко сну.</li>

</ol>

На экране мы увидим следующее:

Распорядок дня

1. 07:00 — подъём.
2. 07:00–07:30 — проветривание комнаты, утренний туалет.
3. 07:30–04:45 — зарядка.
4. 07:45–08:15 — завтрак.
5. 08:30–16:15 — уроки по расписанию.
6. 16:25–17:10 — факультативные занятия.
7. 17:40–19:40 — выполнение домашнего задания.
8. 20:00–20:30 — ужин.
9. 20:30–21:00 — проветривание комнаты, вечерний туалет.
10. 21:00 — отход ко сну.

Список определений

Списки определений создаются с помощью тега <dl>...</dl>. Для добавления термина применяется тег <dt>...</dt>, а для вставки определения — тег <dd>...</dd>.

Например:

<dl>

    <dt>HTML</dt>

        <dd>Стандартизированный язык разметки документов во Всемирной паутине.</dd>

    <dt>Язык программирования</dt>

        <dd>Компьютер</dd>

</dl>

На экран выведется:

HTML

        Стандартизированный язык разметки документов во Всемирной паутине.

Язык программирования

        Формальный язык, предназначенный для записи компьютерных программ.

Многоуровневый список. Смешанный список

Списки можно вкладывать друг в друга. Это может быть очень полезно, например, при составлении оглавления. Также каждый отдельно взятый список в многоуровневом может отличаться — быть маркированным или нумерованным.

Посмотрим на пример:

<strong>Оглавление</strong>

<ol>

    <li>Введение</li>

    <li>Основные термины

        <ul>

            <li>HTML</li>

            <li>Язык программирования</li>

        </ul>

    </li>

    <li>Заключение</li>

    <li>Список источников</li>

</ol>

Вот какой список получится в итоге:

Оглавление

1. Введение
2. Основные термины
• HTML
• Язык программирования
3. Заключение
4. Список источников

Дорогие читатели! В этом уроке мы рассмотрим способы добавления в HTML-документ различные объекты — от ссылок до изображений и видео.

Ссылки

Ссылки устанавливают связь между каким-либо сервисом и текущим документом. Для этого используются парные теги <a>...</a>, <area>...</area> и <link>...</link>.

Тег <a>

В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.

Для создания ссылки необходимо сообщить браузеру, что́ является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL); для атрибута name значением является идентификатор.

Синтаксис тега выглядит следующим образом:

• <a href="URL">...</a>,
• <a name="идентификатор">...</a>.

Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.

Чтобы сделать кликабельное изображение, необходимо поместить элемент <img> внутрь тега <a>...</a>. Чтобы ссылка открывалась в другом окне, нужно добавить атрибут target="_blank" для ссылки:

<a href="https://ru.wikipedia.org/wiki/Латвия" target="_blank"><img src="https://www.latvia.travel/sites/default/files/editor/Riga/rozdestvenskie-rynki-riga-latvia-travel.jpg" alt="Латвия"></a>

Вот что получится:

Изображения

Изображения добавляются на веб-страницы с помощью тега <img>. Использование графики делает веб-страницы визуально привлекательнее. Изображения помогают лучше передать суть и содержание веб-документа.

С помощью HTML-тегов <map> и <area> можно создавать карты-изображения с активными областями.

Тег <img> предназначен для отображения на веб-странице изображений в графическом формате .gif, .jpeg или .png. Адрес файла с картинкой задаётся через атрибут src. Также можно задать резервный контент, который добавляется с помощью атрибута alt.

Синтаксис тега выглядит так:

<img src="URL" [alt="альтернативный текст"]>.

Например:

<img src="https://newdohod.ru/images/WEB/html/html.jpg" alt="HTML">

Без задания размеров изображения рисунок отображается на странице в реальном размере. Отредактировать размеры изображения можно с помощью атрибутов width и height. Если будет задан только один из атрибутов, то второй будет вычисляться автоматически для сохранения пропорций рисунка.

Видеофайлы

С помощью тега <video>...</video> в документ можно добавить видеофайлы.

Синтаксис выглядит следующим образом:

<video controls>
    <source src="URL">
</video>

Элемент <source> используется для добавления нескольких медиа-ресурсов для <video>. Указывает на альтернативные видеофайлы, которые браузер может выбрать из предложенных на основании поддерживаемого им типа носителя или кодека. Элемент <track> используется в качестве дочернего элемента и <video>. Добавляет текстовую дорожку для субтитров, заголовков медиафайлов или другой текстовой информации, которая должна быть видна во время воспроизведения медиа-ресурса.

Аудиофайлы

Точно так же добавляются на веб-страницу аудиофайлы. Для этого используется парный тег <audio>...</audio>.

<audio controls>
    <source src="URL">
</audio>

Элемент <source> используется для добавления нескольких медиа-ресурсов для <audio>. Указывает на альтернативные видеофайлы, которые браузер может выбрать из предложенных на основании поддерживаемого им типа носителя или кодека. Элемент <track> используется в качестве дочернего элемента и <audio>. Добавляет текстовую дорожку для субтитров, заголовков медиафайлов или другой текстовой информации, которая должна быть видна во время воспроизведения медиа-ресурса.