Язык разметки HTML5

© IGP, январь 2025 г.


<div>Текст<br/>элемента div</div>
<div> - Тег
</div> - Закрытие тега
<br/> - Тег без тела (самозакрывающий)

<div style="color:red;">Кнопка</div>

Глобальные атрибуты

  • accesskey: определяет клавишу для быстрого доступа к элементу
  • class: задает класс CSS, который будет применяться к элементу
  • contenteditable: определяет, можно ли редактировать содержимое элемента
  • contextmenu: определяет контекстное меню для элемента, которое отображается при нажатии на элемент правой кнопкой мыши
  • dir: устанавливает направление текста в элементе
  • draggable: определяет, можно ли перетаскивать элемент
  • dropzone: определяет, можно ли копировать переносимые данные при переносе на элемент
  • hidden: скрывает элемент
  • id: уникальный идентификатор элемента. На веб-странице элементы не должны иметь повторяющихся идентификаторов
  • lang: определяет язык элемента
  • spellcheck указывает, будет ли для данного элемента использоваться проверка правописания
  • style: задает стиль элемента
  • tabindex: определяет порядок, в котором по элементам можно переключаться с помощью клавиши TAB
  • title: устанавливает дополнительное описание для элемента
  • translate: определяет, должно ли переводиться содержимое элемента

Часто используемые атрибуты

  • class: задает класс CSS, который будет применяться к элементу
  • id: уникальный идентификатор элемента. На веб-странице элементы не должны иметь повторяющихся идентификаторов
  • style: задает стиль элемента

Атрибуты определяемые пользователем

Разработчик или создатель веб-страницы сам может определить любой атрибут, предваряя его префиксом data-.

<input type="button" value="Нажать" data-color="red"/>

Одинарные или двойные кавычки

При определении значений атрибутов применяются как одинарные, так и двойные кавычки (последние предпочтительнее).

                        <input type='button' value='Нажать'>
                    
                        <input type="button" value="Нажать">
                    
                        <input type="button" value="Кнопка 'Привет мир'">

Шаблон документа


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Документ HTML5</title>
    </head>
    <body>
        <div>Содержание документа HTML5</div>
    </body>
</html>

Элементы в HTML5

  • head
  • title - заголовок
  • base - базовый адрес веб-страницы
  • meta - метаданные документа. 
    <meta charset="utf-8"/>

По умолчанию определены и используются поисковыми системами:

  • application name: название веб-приложения, частью которого является данный документ
  • author: автор документа
  • description: краткое описание документа. Его поисковые системы используют в качестве аннотации
  • generator: название программы, которая сгенерировала данный документ
  • keywords: ключевые слова документа

Записать в тетради, что означает каждая строка


                        <!DOCTYPE html>
                        <html>
                            <head>
                                <meta charset="utf-8"/>
                                <base href="content/"/>
                                <title>Элемент title</title>
                                <meta name="description" content="Первый документ"/>
                                <meta name="author" content="Bill Gates"/>
                            </head>
                            <body>
                                <a href="newpage.html">Содержание документа</a>
                            </body>
                        </html>

Элементы группировки. (<DIV>)

Div создает блок, который по умолчанию растягивается по всей ширине окна, а следующий после div элемент переносится на новую строку.

Создать страницу с 2 элементами DIV, содержащими произвольный текст (более 1 строки)

Элементы группировки. Параграфы (<p>)

Каждый новый параграф располагается на новой строке.

Дополнить страницу 2 параграфами, содержащими произвольный текст (более 1 строки). Сравнить с DIV

Элементы группировки. Предварительно отформатированный текст (<pre>)

Страницу дополнить 1 строфой стихотворения М.Ю. Лермонтова "Утес" 

                        Ночевала тучка золотая
                        На груди утеса-великана;
                        ...

Элементы группировки. Невидимая группировка (<span>)

Добавить на страницу текст (2-3 строки) зеленого цвета, используя span и атрибут style="color: green;"

Заголовки


                        <!DOCTYPE html>
                        <html>
                            <head>
                                <meta charset="utf-8"/>
                                <title>Заголовки в HTML5</title>
                            </head>
                            <body>
                                <h1>Заголовок первого уровня</h1>
                                <h2>Заголовок второго уровня</h2>
                                <h3>Заголовок третьего уровня</h3>
                                <h4>Заголовок четвертого уровня</h4>
                                <h5>Заголовок пятого уровня</h5>
                                <h6>Заголовок шестого уровня</h6>
                            </body>
                        </html>

Форматирование текста

Записать в тетради, что делает каждый тег форматирования


                        <!DOCTYPE html>
                        <html>
                            <head>
                                <meta charset="utf-8"/>
                                <title>Форматирование текста в HTML5</title>
                            </head>
                            <body>
                                <p>Форматирование в <mark>HTML5</mark></p>
                                <p>Это <b>выделенный</b> текст</p>
                                <p>Это <strong>важный</strong> текст</p>
                                <p>Это <del>зачеркнутый</del> текст</p>
                                <p>Это <s>недействительный</s> текст</p>
                                <p>Это <em>важный</em> текст</p>
                                <p>Это текст <i>курсивом</i> </p>
                                <p>Это <ins>добавленный</ins> текст</p>
                                <p>Это <u>подчеркнутый</u> текст</p>
                                <p>X<sub>i</sub> = Y<sup><small>2</small></sup> + Z<sup><small>2</small></sup></p>
                            </body>
                        </html>

Работа с изображениями (<img>)

  • src адрес файла картинки
  • alt текстовое описание изображения. Если картинка не может быть загружена, отображается этот текст

                        <img src="dubi.png" alt="Зимняя равнина" />

Работа с изображениями (<img>)


                        <div>
                            <img src="dubi.png" alt="Зимняя равнина" style="float:left; margin-right:10px;" />
                            <h1>Lorem Ipsum</h1>
                            <b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry. 
                                Lorem Ipsum has been the industry....
                        </div>

Картринки <img>

  • align Определяет как рисунок будет выравниваться по краю и способ обтекания текстом.
  • alt Альтернативный текст для изображения.
  • border Толщина рамки вокруг изображения.
  • height Высота изображения.

Картринки <img>

  • hspace Горизонтальный отступ от изображения до окружающего контента.
  • ismap Указывает браузеру, что картинка является серверной картой-изображением.
  • longdesc Указывает адрес документа, где содержится аннотация к картинке.
  • lowsrc Адрес изображения низкого качества.

Картринки <img>

  • src Путь к графическому файлу.
  • vspace Вертикальный отступ от изображения до окружающего контента.
  • width Ширина изображения.
  • usemap Ссылка на тег , содержащий координаты для клиентской карты-изображения.

Горизонтальная линия <hr>

  • align Определяет выравнивание линии.
  • color Цвет линии.
  • noshade Рисует линию без трехмерных эффектов.
  • size Толщина линии.
  • width Ширина линии.

Списки

<ol> нумерованный список
<ul> Маркированый список

<li> элементы списка любого типа

На странице создайте нумерованый список c марками отечественных автомобилей и маркированный список с названиями овощей

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

Изменение стиля номера list-style-type:

<ol style="list-style-type:TYPE;">
  • decimal - десятичные числа
  • decimal-leading-zero - десятичные числа, которые предваряются нулем
  • lower-roman - строчные римские цифры
  • upper-roman - заглавные римские цифры
  • lower-alpha - строчные римские буквы
  • upper-alpha - заглавные римские буквы

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

<ul style="list-style-type:TYPE;">
  • disc - черный диск
  • circle - пустой кружок
  • square - черный квадрат
<ul style="list-style-image:url(phone_touch.png);">

Элемент details

Позволяет создавать раскрываемый блок, который по умолчанию скрыт.


                        <details>
                            <summary>Флагманы 2015</summary>
                            <ul>
                                <li>iPhone 6S Plus</li>
                                <li>Nexus 6P</li>
                                <li>Galaxy S6 Edge</li>
                                <li>Lumia 950 XL</li>
                            </ul>
                        </details>

summary задаёт текст, отображаемый в свернутом режиме

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

Ссписок задается в формате определение (<dt>), значение (<dd>)


                        <dl>
                            <dt>Онтология</dt>
                            <dd>Раздел философии, изучающий фундаментальные принципы бытия</dd>
                            <dt>Гносеология</dt>
                            <dd>Философская дисциплина, занимающаяся исследованиями, критикой и теориями познания</dd>
                            <dt>Производственные отношения</dt>
                            <dd>Совокупность отношений между людьми, складывающихся в процессе общественного производства, 
                                обмена, распределения материальных благ и услуг.</dd>
                        </dl>

Таблицы <table>


                        <table>
                            <caption><b>Заголовок</b></caption>
                            <thead>
                                <tr>
                                    <th>Заголовок столбца 1</th>
                                    <th>Заголовок столбца 2</th>
                                    <th>Заголовок столбца 3</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Ячейка строка 1</td>
                                    <td>Ячейка строка 1</td>
                                    <td>Ячейка строка 1</td>
                                <tr>
                                <tr>
                                    <td>Ячейка строка 2</td>
                                    <td>Ячейка строка 2</td>
                                    <td>Ячейка строка 2</td>
                                <tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th colspan="3">подвал таблицы</th>
                                </tr>
                            </tfoot>
                        </table>

Аттрибуты таблиц

align
Определяет выравнивание таблицы.
background
Задает фоновый рисунок в таблице.
bgcolor
Цвет фона таблицы.
border
Толщина рамки в пикселах.
bordercolor
Цвет рамки.
cellpadding
Отступ от рамки до содержимого ячейки.
cellspacing
Расстояние между ячейками.
cols
Число колонок в таблице.
frame
Сообщает браузеру, как отображать границы вокруг таблицы.
height
Высота таблицы.
rules
Сообщает браузеру, где отображать границы между ячейками.
summary
Краткое описание таблицы.
width
Ширина таблицы.

Заголовок таблицы <thead>

  • align Определяет выравнивание текста в строке.
  • char Выравнивание содержимого ячеек относительно заданного символа.
  • charoff Смещение содержимого ячеек относительно указанного символа.
  • bgcolor Цвет фона ячеек.
  • valign Выравнивание содержимого ячеек по вертикали.

Тело таблицы <tbody>

  • align Определяет выравнивание текста в строке.
  • char Выравнивание содержимого ячеек относительно заданного символа.
  • charoff Смещение содержимого ячеек относительно указанного символа.
  • bgcolor Цвет фона ячеек, которые расположены внутри контейнера <tbody>.
  • valign Выравнивание содержимого ячеек по вертикали.

Подвал таблицы <tfoot>

  • align Определяет выравнивание текста в строке.
  • bgcolor Цвет фона ячеек, которые расположены внутри контейнера .
  • char Выравнивание содержимого ячеек относительно заданного символа.
  • charoff Смещение содержимого ячеек относительно указанного символа.
  • valign Выравнивание содержимого ячеек по вертикали.

Заголовок таблицы <th>

  • abbr Краткое описание содержимого ячейки.
  • align Определяет выравнивание содержимого ячейки по горизонтали.
  • axis Группирует ячейки связанные между собой похожей информацией.
  • background Задает фоновый рисунок в ячейке.
  • bgcolor Цвет фона ячейки.

Заголовок таблицы <th>

  • bordercolor Цвет рамки.
  • char Выравнивает содержимое ячейки по заданному символу.
  • charoff Смещает содержимое ячейки относительно заданного символа.
  • colspan Объединяет горизонтальные ячейки.
  • headers Позволяет связать ячейки таблицы с заголовками в речевых браузерах.

Заголовок таблицы <th>

  • height Высота ячейки.
  • nowrap Запрещает перенос строк.
  • rowspan Объединяет вертикальные ячейки.
  • scope Позволяет связать ячейки простой таблицы с заголовками в речевых браузерах.
  • valign Выравнивание содержимого ячейки по вертикали.
  • width Ширина ячейки.

Строки таблицы <tr>

  • align Определяет выравнивание содержимого ячеек по горизонтали.
  • bgcolor Цвет фона ячеек.
  • bordercolor Цвет рамки.
  • char Выравнивание содержимого ячеек относительно заданного символа.
  • charoff Смещение содержимого ячеек относительно указанного символа.
  • valign Выравнивание содержимого ячеек по вертикали.

Ячейки таблицы <td>

  • abbr Краткое описание содержимого ячейки.
  • align Определяет выравнивание содержимого ячейки по горизонтали.
  • axis Группирует ячейки связанные между собой похожей информацией.
  • background Задает фоновый рисунок в ячейке.
  • bgcolor Цвет фона ячейки.

Ячейки таблицы <td>

  • bordercolor Цвет рамки.
  • char Выравнивает содержимое ячейки по заданному символу.
  • charoff Смещает содержимое ячейки относительно заданного символа.
  • colspan Объединяет горизонтальные ячейки.
  • headers Позволяет связать ячейки с заголовком.

Ячейки таблицы <td>

  • height Высота ячейки.
  • nowrap Запрещает перенос строк.
  • rowspan Объединяет вертикальные ячейки.
  • scope Позволяет связать ячейки простой таблицы с заголовками в речевых браузерах.
  • valign Выравнивание содержимого ячейки по вертикали.
  • width Ширина ячейки.

Практическое задание

Создать таблицу аналогичную представленной на картинке.

Ссылки

Задаются тегом <a> - обеспечивают навигацию между отдельными документами и их частями.

Атрибуты
  • accesskey Активация ссылки с помощью комбинации клавиш.
  • coords Устанавливает координаты активной области.
  • download Предлагает скачать указанный по ссылке файл.
  • href Задает адрес документа, на который следует перейти.

Ссылки

  • hreflang Идентифицирует язык текста по ссылке.
  • name Устанавливает имя якоря внутри документа.
  • rel Отношения между ссылаемым и текущим документами.
  • rev Отношения между текущим и ссылаемым документами.

Ссылки

  • shape Задает форму активной области ссылки для изображений.
  • tabindex Определяет последовательность перехода между ссылками при нажатии на кнопку Tab.
  • target Имя окна или фрейма, куда браузер будет загружать документ.
  • title Добавляет всплывающую подсказку к тексту ссылки.
  • type Указывает MIME-тип документа, на который ведёт ссылка.

Ссылки

Адрес ссылки задается в абсолютном или относительном формате:

Абсолютная ссылка

<a href="https://yandex.ru">Поисковик</a>

Относительная ссылка

<a href="file.html">Другой документ</a>

Навигация внутри документа

Можно задать внутренние ссылки, которые будут переходить к определенным блокам внутри страницы.


                        <a href="#paragraph1">Параграф 1</a> 
                        | <a href="#paragraph2">Параграф 2</a> 
                        | <a href="#paragraph3">Параграф 3</a>
                        <h2 id="paragraph1">Параграф 1</h2>
                        <p>Содержание параграфа 1</p>
                        <h2 id="paragraph2">Параграф 2</h2>
                        <p>Содержание параграфа 2</p>
                        <h2 id="paragraph3">Параграф 3</h2>
                        <p>Содержание параграфа 3</p>

Атрибут target

Ресурсы, открываются в том же окне. С помощью атрибута target можно переопределить это действие.

  • _blank открытие в новом окне или вкладке
  • _self открытие в том же фрейме (или окне)
  • _parent открытие в родительском фрейме
  • _top открытие на все окно обозревателя
  • framename открытие во фрейме framename

Ссылка-картинка


                        <a href="file.html">
                            <img src="cover.jpg" alt="Гостиничный замок">
                        </a>
Гостиничный замок

Фреймы

Фреймы позволяют встраивать на веб-страницу какую-нибудь другую веб-страницу.


                        <iframe src="http://wikipedia.com" width="400" height="200">
                        </iframe>

Атрибуты <iframe>

  • align Определяет как фрейм будет выравниваться по краю, а также способ обтекания его текстом.
  • allowtransparency Устанавливает прозрачный фон фрейма, через который виден фон страницы.
  • frameborder Устанавливает, отображать границу вокруг фрейма или нет.
  • height Высота фрейма.
  • hspace Горизонтальный отступ от фрейма до окружающего контента.

    Атрибуты <iframe>

  • marginheight Отступ сверху и снизу от содержания до границы фрейма.
  • marginwidth Отступ слева и справа от содержания до границы фрейма.
  • name Имя фрейма.
  • sandbox Позволяет задать ряд ограничений на контент загружаемый во фрейме.
  • scrolling Способ отображения полосы прокрутки во фрейме.

Атрибуты <iframe>

  • seamless Определяет, что содержимое фрейма должно отображаться так, словно оно является частью документа.
  • src Путь к файлу, содержимое которого будет загружаться во фрейм.
  • srcdoc Хранит содержимое фрейма непосредственно в атрибуте.
  • vspace Вертикальный отступ от фрейма до окружающего контента.
  • width Ширина фрейма.

Задание

  1. Создайте страницу на которой будет таблица оценок за прошедшую сессию.
  2. Добавьте ссылки на страницы wikipedia, соответствующие названиям предметов в таблице
  3. Сделайте так, чтобы ссылки открывались в фрейме под таблицей