© IGP, январь 2025 г.
<div>Текст<br/>элемента div</div>
<div> - Тег<div style="color:red;">Кнопка</div>
Разработчик или создатель веб-страницы сам может определить любой атрибут, предваряя его префиксом 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>
<meta charset="utf-8"/>
По умолчанию определены и используются поисковыми системами:
<!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 элемент переносится на новую строку.
Создать страницу с 2 элементами DIV, содержащими произвольный текст (более 1 строки)
Каждый новый параграф располагается на новой строке.
Дополнить страницу 2 параграфами, содержащими произвольный текст (более 1 строки). Сравнить с DIV
Страницу дополнить 1 строфой стихотворения М.Ю. Лермонтова "Утес"
Ночевала тучка золотая На груди утеса-великана; ...
Добавить на страницу текст (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="dubi.png" alt="Зимняя равнина" />
<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>
<ol> нумерованный список
<ul> Маркированый список
<li> элементы списка любого типа
На странице создайте нумерованый список c марками отечественных автомобилей и маркированный список с названиями овощей
Изменение стиля номера list-style-type:
<ol style="list-style-type:TYPE;">
<ul style="list-style-type:TYPE;">
<ul style="list-style-image:url(phone_touch.png);">
Позволяет создавать раскрываемый блок, который по умолчанию скрыт.
<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 задаёт текст, отображаемый в свернутом режиме
Ссписок задается в формате определение (<dt>), значение (<dd>)
<dl>
<dt>Онтология</dt>
<dd>Раздел философии, изучающий фундаментальные принципы бытия</dd>
<dt>Гносеология</dt>
<dd>Философская дисциплина, занимающаяся исследованиями, критикой и теориями познания</dd>
<dt>Производственные отношения</dt>
<dd>Совокупность отношений между людьми, складывающихся в процессе общественного производства,
обмена, распределения материальных благ и услуг.</dd>
</dl>
<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>
Создать таблицу аналогичную представленной на картинке.
Задаются тегом <a> - обеспечивают навигацию между отдельными документами и их частями.
Адрес ссылки задается в абсолютном или относительном формате:
Абсолютная ссылка
<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 можно переопределить это действие.
<a href="file.html">
<img src="cover.jpg" alt="Гостиничный замок">
</a>
Фреймы позволяют встраивать на веб-страницу какую-нибудь другую веб-страницу.
<iframe src="http://wikipedia.com" width="400" height="200">
</iframe>