- Создайте тематический набор из 6 связанных web-страниц
- Используйте следующие HTML-элементы:
- заголовки разных уровней
<h1>,<h2>, ... - параграфы
<p> - форматирование текста тегами
<b>,<i>,<u> - рисунки
<img src="image.jpg"> - таблицы
<table> - выделение фрагмента текста, подобно выделению маркером на бумаге
- заголовки разных уровней
- Проверьте ваши страницы в валидаторе
- Текстовые редакторы: Notepad++, VSCode, Brackets, SublimeText, WebStorm
- Онлайн-сервисы:
HTML-документ состоит из текста, который представляет собой информационное содержимое (контент), и специальных средств языка HTML - тегов разметки, которые определяют структуру и внешний вид документа при его отображении браузером.
Текст документа заключается в тег <html>. Текст документа состоит из заголовка и тела, которые выделяются соответственно тегами <head> и <body>.
В заголовке (<head>) указывают название HTML-документа и другие параметры, которые браузер будет использовать при отображении документа.
Тело документа (<body>) — это та часть, в которую помещается собственно содержимое HTML-документа. Тело включает предназначенный для отображения текст и управляющую разметку документа (теги), которые используются браузером.
Секция doctype указывает браузеру тип документа и версию использованного языка разметки. Стандарт требует, чтобы секция doctype присутствовала в документе, т.к. это позволяет ускорить и улучшить обработку гипертекста.
<!doctype html>
<html lang="ru"> <!-- начало страницы -->
<head> <!-- описание страницы, заголовка -->
<title> название </title> <!-- имя страницы -->
</head> <!-- закрывающий тэг описания заголовка -->
<body> <!-- содержание страницы -->
контент
</body> <!-- закрывающий тэг описания страницы -->
</html> <!-- конец страницы -->В теге <html> указывается аттрибут lang, который задаёт язык, на котором написан весь документ или отдельные его блоки.
В контейнере <head> помимо названия веб-страницы может размещаться различная техническая информация о документе (метаинформация), которая предназначена в основном для браузеров и поисковых систем и не видна пользователю на сайте. Метаинформация указывается тегами <meta>. Рекомендуется заполнять мета теги charset, viewport для корректного отображения веб-страницы в браузере.
Аттрибут charset задает кодировку документа:
<meta charset="utf-8">Мета тег viewport задает некоторые параметры окна просмотра в браузере. Атрибут width указывает ширину окна просмотра (вьюпорта), initial-scale - коэффициент масштабирования при первом открытии страницы. Для адаптивного сайта: указывается, что ширина вьюпорта подгоняется под размеры устройства:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Помимо этого есть теги, которые сообщают определенную информацию поисковой системе (описание, ключевые слова и т.д.):
<meta name="description" content="Краткое описание страницы">
<meta name="keywords" content="ключевое слово 1, ключевое слово 2, ключевое слово 3">Тег - управляющая символьная последовательность, которая задает способ отображения гипертекстовой информации.
HTML-тег состоит из имени, которое заключается в угловые скобки <>:
<тег></тег> - открывающий и закрывающий теги
Большинство тегов - двойные (имеют и открывающий и закрывающий тег), между которыми и помещается информация. Но есть и одиночные, например, <img>, <br> - у них нет закрывающего тега.
Теги могут быть вложенными, но не могут пересекаться.
Например, вложенные теги: <u><i>текст</i></u>. Пересекающиеся: <u><i>текст</u></i> (ошибка, недопутимо!).
<тег [аттрибуты]></тег> - тег с аттрибутами.
Аттрибуты представляют собой пары вида:
свойство = "значение"
Несколько аттрибутов разделяются через пробел. Например,
<тег свойство1 = "значение" свойство2 = "значение"></тег>
Есть аттрибуты обязательные и необязательные.
Например, для тега <img> аттрибут src - обязательный, а alt - необязательный.
При создании html-документов можно глобально задавать цвет самого фона страницы. Эта команда может задаваться только в начале HTML файла и не может быть изменена в дальнейшем. Ее параметры: bgcolor - определяет цвет фона документа, text - задает цвет текста для всей страницы. Цвет также задается с помощью его названия (red, green, blue);
Например, <body bgcolor = "blue" text = "red"> - задаёт фон голубого цвета, а цвет шрифта - красный
Заголовок текста задается с помощью тегов, где размер шрифта заголовка устанавливается с помощью Н1 (самый крупный) и до Н6 (самый мелкий). Главный заголовок целесообразно выделить самым крупным шрифтом: <h1>Главный заголовок</h1>. Заголовок <h6>Мелкий заголовок</h6> - в данном случае заголовок будет записан самым мелким шрифтом. Если необходимо выровнять этот заголовок по правому краю, то это записывается следующим образом: <h1 align = "right">Главный заголовок</h1>
- <align = "right"> - выравнивание текста по правому краю
- <align = "center"> - выравнивание текста по центру
- <align = "left"> - выравнивание текста по левому краю
Для задания параметров форматирования используется контейнер <font>...</font>, при этом используя различные атрибуты:
- Атрибут face позволяет задать гарнитуру шрифта;
- Атрибут size – размер шрифта (может принимать иметь значение в диапазоне от 1 до 7);
- Атрибут color – цвет шрифта (можно задавать названием цвета (например, red, green, blue и так далее));
Также можно задавать начертание текста или фрагмента текста:
- <b> текст </b> - полужирный шрифт;
- <i> текст </i> - курсив;
- <u> текст </u> - подчёркивание;
Есть два вида списков: нумерованные и ненумерованные. Ненумерованный список располагается внутри контейнера <ul>...</ul>, а нумерованный - <ol>...</ol>. Каждый элемент списка определяется тэгом <li>.
С помощью атрибута type тэга <ul> можно задать вид маркера списка: disc (диск), square (квадрат), circle (окружность).
Для обозначения параграфа используется тег <p></p>
Для разрыва строки используется тег <br>. Тег является одиночным.
Тег <img> позволяет вставить изображение на Web-страницу. Оно появится в том месте документа, где находится этот тег. Тег <img> является одиночным. Например, для вставки изображения image.jpg используется код <img src="image.jpg">. у тега <img> есть следующие аттрибуты:
- alt - Задает текст, заменяющий изображение в том случае, если браузер не воспринимает изображение.
- border - Задает толщину рамки. Измеряется в пикселях.
- align - Задает выравнивание изображения текста (возможные значения: top, bottom, middle).
- height - Задает вертикальный размер изображения внутри окна браузера.
- width - Задает горизонтальный размер изображения внутри окна браузера.
- vspace - Задает добавление верхнего и нижнего пустых полей.
- hspace - Задает добавление левого и правого пустых полей.
Гиперссылка создаётся следующим тегом: <a href="index.html">Текст ссылки</a>.
В качестве ссылки можно использовать любой текст или графику. Возможные ссылки: - на удаленный HTML-файл (в сети Интернет); - на некоторую точку в текущем HTML-документе (якорь); - на любой файл, не являющийся HTML-документом.
Таблица в Web-документе заполняется по строкам (слева направо по строке, затем переход на новую строку). Каждая ячейка таблицы должна быть заполнена (хотя бы пробелом, которые используются для создания пустых ячеек).
Следующий код создаст таблицу 2х2 с заголовком и серым цветом фона:
<table border="1" width="100%" bgcolor="#cccccc">
<tr><th>Столбец 1</th><th>Столбец 2</th></tr>
<tr><td>Ячейка (1, 1)</td><td>Ячейка (1, 2)</td></tr>
<tr><td>Ячейка (2, 1)</td><td>Ячейка (2, 2)</td></tr>
</table>Аттрибуты таблицы:
border="1"- добавляет рамку толщиной 1 пиксельcellspacing="0"- убирает двойную рамку у ячеек
К ячейкам таблицы можно применять аттрибут align для выравнивания текста в ячейке.