Тема4. Введение в HTML5

Введение в HTML5
HTML — язык разметки гипертекстовых документов, определяющий логическую

структуру документов. Вид отображаемых документов при этом устанавливается
средствами таблиц стилей CSS. Событийная модель реализуется сценарием на языке
JavaScript. Язык HTML используется для создания самых разных гипертекстовых
документов с гиперссылками и элементами мультимедиа — веб-страниц, интерфейсов,
презентаций, электронных книг и учебных пособий. HTML-документ создается с
помощью HTML-редактора и сохраняется в виде текстового файла со стандартным
расширением .html или .htm. Для просмотра HTMLдокументов используются веб-
браузеры, интерпретирующие эти документы.
Язык HTML был разработан Тимом Бернерсом-Ли 1989 – 1990 годах в
стенах ЦЕРНа в Швейцарии. В настоящее время с 2014 года используется версия языка
— HTML5, которая поддерживается всеми браузерами. Разметка гипертекста средствами
HTML происходит путем вставки в текст специальных элементов, которые называют
тегами или дескрипторами. Простой HTML-документ.
Пример 1.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML-теги
HTML-теги представляют имена элементов в угловых скобках:
<tagname> содержимое </ tagname>
Первый тег в паре - это начальный тег, второй - конечный тег. Теги, могут быть
контейнерными (парными) и неконтейнерными (одинарными). Контейнерный тег состоит
из открывающего (старт-тега) и закрывающего (стоп-тега), между ними находится
форматируемый текст Закрывающий тег отличается от открывающего наличием косой
черты. По правилам XHTML, XML присутствие закрывающего тега обязательно,
например, в конце одинарного тега нужно поставить />. Контейнерные теги могут быть
вложенными. Теги могут использовать параметры – атрибуты
<tagname atribName=" value ">
Браузер использует теги для определения способа отображения документа:
Структура страницы HTML
 Объявление <!DOCTYPE> в верхней части страницы
представляет тип документа. Объявление <!DOCTYPE html> определяет
этот документ как HTML5
 Элемент <html> является корневым элементом HTML-страницы
 Элемент <head> содержит метаинформацию о документе
 Элемент <title> указывает заголовок документа
 Элемент <body> содержит видимое содержимое страницы
 Элемент <h1> определяет большой заголовок в тексте
 Элемент <p> определяет абзац
В браузере отображается только контент, находящийся внутри раздела <body> .
Пример веб-страницы HTML5
Семантическая вёрстка страницы
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример страницы на HTML5</title>
</head>
<body>
<header>
<hgroup>
<h1> Заголовок "h1" из hgroup </h1>
<h2> Заголовок "h2" из hgroup </h2>
</hgroup>
</header>
<nav>
<menu>
<li>
<a href="link1.html">
Первая ссылка из блока "nav"
</a>
</li>
<li>
<a href="link2.html">
Вторая ссылка из блока "nav"
</a>
</li>
</menu>
</nav>
<section>
<article>
<h1> Заголовок статьи из блока "article"</h1>
<p>Текст абзаца статьи из блока "article"</p>
<details>
<summary>
Блок "details", текст тега "summary"
</summary>
<p> Абзац из блока "details" </p>
</details>
</article>
</section>
<footer>
<time>Содержимое тега "time" блока "footer" </time>
<p> Содержимое абзаца из блока "footer" </p>
</footer>
</body>
</html>
Рассмотрим несколько примеров.

Пример 2. HTML-абзацы(параграфы)
HTML-абзацы определяются тегом <p> :
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Попробуй сам "
Пример 3. Ссылки на HTML

Ссылки HTML определяются с помощью тега <a> :
пример
<a href="https://www.w3schools.com">This is a link</a>
Пункт назначения ссылки указан в атрибуте href .
Атрибуты используются для предоставления дополнительной информации о эле-
ментах HTML.
Пример 4. Изображения HTML
Изображения HTML определяются тегом <img> .
Исходный файл ( src ), альтернативный текст ( alt ), width и height предоставляются
в качестве атрибутов:
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
Пример 5. HTML-кнопки
Кнопки HTML определяются тегом <button> :
<button>Click me</button>
Пример 6. Списки HTML

Списки HTML определяются с помощью <ul> (список неупорядоченных / марке-
ров) или <ol> (пронумерованный список), за которым следуют теги <li> (элементы
списка):
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Форматирование текста в HTML.

Документ HTML отображается браузером с некоторыми особенностями. Любое
количество пробелов, идущих подряд, отображается как один пробел. HTML не
поддерживает расстановку переносов в словах. Текст занимает всю ширину окна.
Короткие строки для выравнивания могут растягиваться за счет автоматического
добавления пробелов между словами. Длинная строка будет отформатирована, чтобы
текст поместился в окно. Переносы текста добавляются автоматически в местах пробела
или дефиса.
Одним из способов форматирования текста является использование абзаца
(параграфа). С помощью тегов <p>…</p> текст разбивается на абзацы (параграфы) — по
американским стандартам без красной строки и с увеличенным отступом между абзацами.
Это означает, что тег добавляет пустой отступ перед строкой.
Для выравнивания абзаца — по левому краю, по правому краю, по центру и по
ширине — используется атрибут дескриптора — align, принимающий значение left, right,
center и justify соответственно. В HTML5 для выравнивания текста используются
атрибуты style или теги style CSS.
Разрыв строки.
Тег <br> извещает браузер о разрыве строки и не добавляет пустой отступ перед
строкой. Атрибут тега clear позволяет при обтекании текстом изображения выполнить
обтекание слева (left), справа (right) или обеих (all) границ окна браузера. Например, если
рядом с текстом слева встречается рисунок, то можно использовать тег
для смещения текста ниже рисунка.
Предварительное форматирование. Как уже отмечалось, дополнительные
пробелы, символы табуляции и возврата каретки в тексте HTML-документа будут
проигнорированы браузером при интерпретации документа. HTML-документ может
включать такие элементы, если они помещены внутрь тегов <pre>и </pre>. Эти теги
используются, чтобы текст выглядел так, как был набран. К другим способам
форматирования текста относят использование символа неразрывного пробела &nbsr.
Неразрывные пробелы записываются вместо обычных и позволяют выводить текст в
одной строке независимо от ширины окна браузера.
Заголовок . Для выделения заголовков более крупным и жирным шрифтом в HTML
используются теги <hn>, где n — цифра от 1 до 6. Заголовок уровня 1 выводится самым
крупным шрифтом, заголовок уровня 6 — самым мелким. Заголовки и следующий за
ними текст всегда начинается с новой строки. Для форматирования заголовков
используется атрибут align, для которого предусмотрены три значения: left, right и center.
Теги заголовков, в отличие от <p>, обязательно нужно закрывать. Иначе весь текст до
конца страницы будет считаться заголовком. П р и м е р:
Заголовок первого уровня
Заголовок второго уровня
Заголовок третьего уровня
Заголовок четвертого уровня
Заголовок пятого уровня
Заголовок шестого уровня
Физическая и логическая разметка документа.
Все теги разметки можно условно разделить на две категории физические (табл. 4.2.) и
логические (табл. 4.3.), т. е. такие, которые определяют только внешний вид документа, и
такие, которые несут информацию о его логической структуре.
Физические теги Таблица 2.
Тег Характеристика тега
<i>...</i> Курсив (Italic)
<b>...</b> Жирное начертание шрифта (Вold)
<big>...</big> Увеличенный размер шрифта
<small>...</small> Уменьшенный размер шрифта
<sub>...</sub> Подстрочные символы
<sup>...</suр> Надстрочные символы
Пример:
<!Doctype html>

<html>
<head>
<title> Создание жирного текста</title>
</head>
<body>
<b><small>Текст маленький и жирный </small></b>
<br/> 
<p> Подстрочные <sub>символы </sub></p>
<p> Надстрочные <sup>символы</sup></p>
</body> </html>
Используемые ранее для форматирования текста теги <u>, <s>,<tt> являются
устаревшими и не рекомендуемыми к использованию.
Логически» теги Таблица 3.
Тег Характеристика тега

<ем>...</ем> Типографское усиление
<strong>...</strong> Усиление
<сode>...</сode> Примеры кода, например, коды программ
<sамр>...</sамр> Последовательность литералов
<квd>...</квd> Пример ввода символов с клавиатуры
<var>...</var> Переменная
<dfn>...</dfn> Определение
<q>...</q> Текст, заключенный в двойные кавычки
Благодаря логическим тегам упрощается анализ страницы поисковыми системами и

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

непосредственно через клавиатуру, называются специальными символами. Символы –
знак меньше <, знак больше >, амперсант & и двойные кавычки "" имеют специальное
значение внутри HTML и не могут быть использованы в тексте в обычном значении. Для
таких символов существует особое представление.
Специальные символы и их представления. Таблица 4.
Специальный символ Представление
< <
> >
& &
" "
Торговая марка ТМ ®
Copyright ©
Не разделяющий пробел
Линии. Тег <hr> проводит контурную горизонтальную линию (опция shade по

умолчанию). Например:
<hr noshade> – горизонтальная линия без тени;

Тег <hr> имеет атрибут align, который задает выравнивание по левому краю – left, центру
– center или по правому краю – right. Атрибут size устанавливает толщину линии в n
пикселей, где n – от 1 до 175 (по умолчанию n=2). Пример:
<!Doctype html>

<html>
<head><title>примеры горизонтальных линий </title></head>
<body>
<b> Стандартная линия, задаваемая тегом &lthr&gt : </b>
<hr>
<p>
<b> Линия, заданная тегом &lthr&gt с параметром noshade: </b>
<hr noshade>
<b> Линия шириной 50% и с выравниванием по левому краю: </b>
<hr width="50%" align="left"><p>
<b> Линия шириной 25% и с выравниванием по центру: </b>
<hr width="25%" align="center">
<p>
<b>Линия шириной 75% с выравниванием по правому краю:</b>
<hr width="75%" align="right">
</body> </html>
Графика.
Для размещения графических элементов на веб-странице используется следующая
технология: изображение сохраняется в отдельном файле, а в HTML-код вставляется
ссылающийся на него тег <img>. Имя файла, в котором находится изображение, и путь к
нему определяются атрибутом src.
<img src="fract.gif">
Задавая путь, нужно руководствоваться правилами, принятыми для записи URL.
Эти правила отличаются от правил записи пути к файлу в ОС Windows. В частности,
имена папок и файлов разделяются не обратными, а прямыми слешами. Строчные и
прописные буквы различаются. В именах файлов не рекомендуется использовать пробелы
и кириллицу. Пример: загрузка изображения из каталога уровнем выше:
<img src=../fract.gif>
Атрибутами тега img кроме src являются ширина и высота изображения width и
height, задаваемые в пикселях. Эти атрибуты можно использовать как для изменения
параметров изображения, так и для того, чтобы определить их заранее. Второй способ
применяется достаточно широко, так как позволяет сразу, не дожидаясь окончательной
загрузки изображений, разместить элементы веб-страницы.
<img src="fract.gif" width="240" height="260">
Изображения обычно снабжаются комментирующими надписями, указанными в
качестве значения параметра alt. Эти надписи появляются рядом с указателем мыши,
наведенным на изображение. Атрибут alt настоятельно рекомендуется использовать во
всех случаях:
<img src=”fract.gif” alt="Фрактал" width=”240” height=”260”>
Для определения способа обтекания графики текстом используется параметр align.
Этот параметр описывает выравнивание не только по горизонтали – по левому краю
(значение left) или по правому краю (значение right), – но и по вертикали относительно
той строки, в которой размещено изображение. Значение absbottom соответствует
выравниванию по нижним выступающим элементам букв в строке, baseline и bottom – по
нижнему краю строки, absmiddle и middle – по середине, texttop – по верхнему краю и top
– по верхним выступающим элементам. Для отмены обтекания изображения текстом
используется тег <br> с параметром clear, который принимает значения right (отмена
обтекания справа), left (отмена обтекания слева) и all (отмена всех обтеканий):
<img src=fract.gif alt="Фрактал" width="240" height="260" align="left">
Для отделения изображения от текста используются рамки и отступы. Атрибут
border определяет толщину рамки в пикселях. Цвет такой рамки всегда черный. Для
создания более сложных рамок следует использовать графический редактор.
Горизонтальный и вертикальный отступы между изображением и текстом задаются в
пикселях с помощью параметров hspace и vspace:
<img src=fract.gif alt="Фрактал" width="240" height="260" align="left" border="1px">
Изображения для Интернета обычно хранятся в файлах форматов JPEG и GIF. В
формате JPEG сохраняются полноцветные изображения, в частности качественные
фотографии. В формате GIF хранятся изображения с ограниченным количеством цветов,
анимированные и изображения с прозрачным фоном. Кроме того, в веб-дизайне широко
применяется GIF-изображение, представляющее собой 1 пиксель прозрачного «цвета». С
его помощью можно, в частности, регулировать расстояние между строками, а также
создавать отступы заданной величины.
Ключевое слово lowsrc позволяет сначала загрузить файл с низким разрешением,
затем больший файл с высоким разрешением:
<img src="highcar.gif" lowsrc="lowcar.gif">
В примере сначала загружается файл lowcar.gif, а затем highcar.gif.
HTML5 предлагает способ связать текст с элементом изображения с введением
элемента <figure>. При комбинировании с элементом <figcaption> можно семантически
связать надписи с их графическими аналогами:
<figure>
<img src="path/to/image" alt="About image" />
<figcaption>
<p>This is an interesting image</p>
</figcaption>
</figure>
Атрибуты элементов HTML

Все элементы HTML могут иметь атрибуты, которые размещаются в начальном
теге. Атрибуты тега модифицируют его действие.
Правила записи атрибутов и значений: атрибуты отделяют друг от друга
пробелами; порядок следования атрибутов произволен; значения атрибутов записывают
в одинарных или двойных кавычках после знака равенства. Спецификация HTML
позволяет опускать кавычки, если значение атрибута состоит из одного слова,
написанного латинскими буквами, и цифр, однако всегда рекомендуют использовать
значения атрибутов в двойных скобках:
<tagname atribName=" value ">
Атрибут src
Изображения HTML определяются тегом <img> . Имя файла источника
изображения указано в атрибуте src. Пример
<img src="img_girl.jpg">
Атрибуты ширины и высоты

Изображения в HTML имеют набор атрибутов размера, который определяет ши-
рину и высоту изображения. Пример
<img src="img_girl.jpg" width="500" height="600">
Размер изображения задается в пикселях: width = "500" означает ширину 500 пик-
селей.
Атрибут alt
Атрибут alt указывает альтернативный текст, который будет использоваться, когда
изображение невозможно отобразить. Атрибут alt полезен, если изображение не
существует: Пример
<img src="img_girl.jpg" alt="Girl with a jacket">
Атрибут lang
Язык документа может быть объявлен в <html> с атрибутом lang .
Объявление языка важно для приложений доступности (программы для чтения с
экрана) и поисковых систем:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
Первые две буквы указывают язык (en).
Атрибут title
Здесь атрибут title добавляется к элементу <p> . Значение атрибута title будет отоб-
ражаться в виде подсказки при наведении указателя мыши на абзац:
пример
<p title="I'm a tooltip">
This is a paragraph. </p>
Атрибут стиля HTML

Атрибут style HTML имеет следующий синтаксис :
<tagname style=" property : value; ">
Свойство property является свойством CSS. Значение - значением CSS.
Цвет фона HTML
Свойство background-color определяет цвет фона для элемента HTML.
В этом примере задается цвет фона для страницы:
пример
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Цвет текста HTML

Свойство color определяет цвет текста для элемента HTML:
пример
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Атрибут href
HTML-ссылки определяются тегом <a> . Адрес ссылки указан в атрибуте href :
пример
<a href="https://www.w3schools.com">This is a link</a>
Ссылки HTML - Гиперссылки

Ссылка не обязательно должна быть текстовой. Это может быть образ или любой
другой элемент HTML.
Ссылки HTML - Синтаксис
В HTML ссылки определяются с тегом <a> :
<a href=" url "> link text </a>
пример
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
Местные ссылки
В приведенном выше примере используется абсолютный URL (полный веб-адрес).
Локальная ссылка (ссылка на тот же веб-сайт) указана с относительным URL (без
http: // www ....).
пример
<a href="html_images.asp">HTML Images</a>
Цвета HTML-ссылок
По умолчанию будет отображаться ссылка (во всех браузерах):
 Неприкосновенная ссылка подчеркнута и синяя
 Посещенная ссылка подчеркнута и фиолетовая
 Активная ссылка подчеркнута и красная
Вы можете изменить цвета по умолчанию, используя тег <style>
и стили CSS:
пример
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: yellow;
text-decoration: underline;
}
</style>
Ссылки HTML - целевой атрибут

Атрибут target указывает, где можно открыть связанный документ.
Атрибут target может иметь одно из следующих значений:
 _blank - открывает связанный документ в новом окне или вкладке
 _self - открывает связанный документ в том же окне / вкладке, когда
он был нажат (это по умолчанию)
 _parent - открывает связанный документ в родительском кадре
 _top - открывает связанный документ во всей полноте окна
 framename - открывает связанный документ в именованном фрейме
В этом примере откроется связанный документ в новом окне / вкладке браузера:
пример
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Совет. Если ваша веб-страница заблокирована в кадре, вы можете использо-
вать target="_top" для выхода из кадра:
пример
<a href="https://www.w3schools.com/html/" target="_top">HTML5 tutorial!</a>
Ссылки HTML - изображение как ссылка

Обычно изображения используются как ссылки:
пример
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
Ссылки HTML - Создать закладку

HTML-закладки используются, чтобы позволить читателям перейти к определен-
ным частям веб-страницы. Закладки полезны, если веб-страница очень длинная.
Чтобы сделать закладку, вы должны сначала создать закладку, а затем добавить к
ней ссылку.
При щелчке по ссылке страница будет прокручиваться до местоположения с за-
кладкой.
пример
Сначала создайте закладку с атрибутом id :
<h2 id="C4">Chapter 4</h2>
Затем добавьте ссылку на закладку («Перейти к главе 4»), с той же страницы:
<a href="#C4">Jump to Chapter 4</a>
Или добавьте ссылку на закладку («Перейти к главе 4»), с другой страницы:
пример
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Внешние пути
На внешние страницы можно ссылаться с полным URL-адресом или с указанием
пути к текущей веб-странице.
В этом примере для ссылки на веб-страницу используется полный URL-адрес:
пример
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
В этом примере ссылка на страницу, расположенную в папке html на текущем веб-
сайте:
пример
<a href="/html/default.asp">HTML tutorial</a>
Этот пример ссылается на страницу, расположенную в той же папке, что и на те-
кущей странице:
пример
<a href="default.asp">HTML tutorial</a>
Анимированные изображения
HTML позволяет анимированные GIF-файлы:
пример
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Изображение как ссылка

Чтобы использовать изображение в качестве ссылки, поместите <img> внутри
тега <a> :
пример
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
Изображение плавающее
Используйте свойство float CSS, чтобы изображение плавало вправо или влево от
текста:
пример
<p><img src="smiley.gif" alt="Smiley
face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">

The image will float to the left of the text.</p>
Карты изображений
Тег <map> определяет карту изображения. Карта изображения - это изображение с
интерактивными областями.
На изображении ниже щелкните компьютер, телефон или чашку кофе:
пример
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
Атрибут name <map> связан с атрибутом usemap <img> и создает связь между
изображением и картой.
Элемент <map> содержит несколько тегов <area> , которые определяют кликируе-
мые области на карте изображения.
Изображение на заднем плане

Чтобы добавить фоновое изображение в элемент HTML, используйте свой-
ство background-image CSS:
пример
Чтобы добавить фоновое изображение на веб-страницу, укажите свойство
background-image элемента BODY:
<body style="background-image:url('clouds.jpg')">
<h2>Background Image</h2>
</body>
пример
Чтобы добавить фоновое изображение в абзаце, укажите свойство background-
image на элементе P:
<body>
<p style="background-image:url('clouds.jpg')">
...
</p>
</body>
Чтобы узнать больше о фоновых изображениях, изучите наше учебное пособие по
CSS .
Элемент <picture>
HTML5 представил элемент <picture> чтобы добавить большую гибкость при ука-
зании ресурсов изображения.
Элемент <picture> содержит несколько элементов <source>, каждый из которых
ссылается на разные источники изображений. Таким образом, браузер может выбрать
изображение, которое наилучшим образом соответствует текущему виду и / или устрой-
ству.
Каждый элемент <source> имеет атрибуты, описывающие, когда их изображение
является наиболее подходящим.
Браузер будет использовать первый элемент <source> с соответствующими значе-
ниями атрибутов и игнорировать следующие элементы <source> .
пример
Покажите одно изображение, если окно браузера (viewport) имеет минимум 650
пикселей, а другое изображение - нет, но больше 465 пикселей.
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Примечание. Всегда указывайте элемент <img> в качестве последнего дочернего
элемента элемента <picture> . Элемент <img> используется браузерами, которые не под-
держивают элемент <picture> , или если ни один из тегов <source> сопоставлен.
Таблицы HTML
Пример таблицы HTML

Company Contact
Alfreds Futterkiste Maria Anders
Centro comercial Moctezuma Francisco Chang
Ernst Handel Roland Mendel
Island Trading Helen Bennett
Laughing Bacchus Winecellars Yoshi Tannamuri
Magazzini Alimentari Riuniti Giovanni Rovelli

Определение таблицы HTML
Таблица HTML определяется тегом <table> …</table> .
Каждая строка таблицы определяется тегом <tr> . Заголовок таблицы (столбцы)
определяется тегом <th> . По умолчанию заголовки таблицы выделены жирным шрифтом
и центрированы. Табличные данные / ячейка определяются тегом <td> .
Элементы <td> являются контейнерами данных таблицы. Они могут содержать
всевозможные элементы HTML; текст, изображения, списки, другие таблицы и т. д.
пример
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Пример. Добавление границы к таблице

Если вы не укажете границу для таблицы, она будет отображаться без границ.
Граница устанавливается с использованием свойства border :
пример
table, th, td {
border: 1px solid black;
}
Пример. Таблица HTML - Свернутые границы

Если вы хотите, чтобы границы обрушились на одну границу, добавьте свойство
CSS border-collapse :
пример
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Пример. Таблица HTML - Добавление заполнения ячеек

Заполнение ячеек определяет пространство между содержимым ячейки и ее грани-
цами.
Если вы не укажете прописку, ячейки таблицы будут отображаться без заполнения.
Чтобы установить дополнение, используйте свойство padding CSS:
th, td {
padding: 15px;
}
Пример. Таблица HTML - заголовки с левым выравниванием

По умолчанию заголовки таблицы выделены жирным шрифтом и центрированы.
Чтобы выровнять по горизонтали заголовки таблицы, используйте свойство text-
align CSS:
th {
text-align: left;
}
Пример. Таблица HTML - Добавление интервала между границами

Межграничный интервал определяет пространство между ячейками.
Чтобы установить интервал между таблицами для таблицы, используйте свой-
ство border-spacing CSS:
пример
table {
border-spacing: 5px;
}
Пример. Таблица HTML - ячейки, которые охватывают множество столбцов

Чтобы сделать ячейку более одного столбца, используйте атрибут colspan :
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
Пример. Таблица HTML - ячейки, которые охватывают множество строк

Чтобы сделать диапазон ячеек более одной строки, используйте атрибут rowspan :
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
Пример. Таблица HTML - Добавление заголовка

Чтобы добавить подпись к таблице, используйте <caption> :
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Пример. Специальный стиль для одной таблицы

Чтобы определить специальный стиль для специальной таблицы, добавьте в таб-
лицу атрибут id :
пример
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Теперь вы можете определить особый стиль для этой таблицы:
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
И добавьте больше стилей:
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}
 Используйте атрибут rowspan чтобы сделать диапазон ячеек несколь-

кими строками
 Используйте атрибут id чтобы однозначно определить одну таблицу
Мы собрали множество упражнений HTML (с ответами) для каждой главы HTML.

Упражнения в HTML-таблице »
Теги таблицы HTML

Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> e
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
Списки
Списки HTML
Неупорядоченный список:
 Пункт
 Пункт
 Пункт
 Пункт
Упорядоченный список:
1. Первый пункт
2. Второй пункт
3. Третий пункт
4. Четвертый пункт
Неупорядоченный список HTML

Неупорядоченный список начинается с <ul> . Каждый элемент списка начинается
с <li> . Элементы списка будут отмечены марками (маленькие черные круги) по умолча-
нию:
пример
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Свойство типа list-style-type используется для определения стиля маркера элемента

списка:
Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked

Пример - диск
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Пример - Круг
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Пример - Квадрат
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Пример - Нет
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Упорядоченный HTML-список
Упорядоченный список начинается с <ol> . Каждый элемент списка начинается
с <li> .
Элементы списка будут отмечены цифрами по умолчанию:
пример
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Упорядоченный HTML-список - Атрибут типа

Атрибут type <ol> определяет тип маркера элемента списка:
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
Числа:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Заглавные буквы:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Строчные буквы:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Верхние римские номера:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Строчные римские номера:
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Списки описания HTML

HTML также поддерживает списки описаний.
Список описаний - это список терминов с описанием каждого термина.
Тег <dl> определяет список описаний, <dt> определяет термин (имя),
а <dd> описывает каждый термин:
пример
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Вложенные HTML-списки
Список может быть вложен (списки внутри списков):
пример
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Подсчет контрольных списков

По умолчанию упорядоченный список начнет отсчет с 1. Если вы хотите начать
подсчет с указанного номера, вы можете использовать атрибут start :
пример
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Горизонтальный список с CSS

HTML-списки могут быть разными способами с CSS.
Одним из популярных способов является стиль списка по горизонтали, чтобы со-
здать меню навигации:
пример
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
 Используйте свойство CSS float:left или display:inline для отображе-
ния списка по горизонтали
Испытайте себя с помощью упражнений!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5
» Упражнение 6»
Блок HTML и встроенные элементы

Элемент уровня блока всегда начинается с новой строки и занимает всю доступную
ширину (растягивается влево и вправо, насколько это возможно). Элемент <div> является
элементом уровня блока. пример
<div>Hello</div>
<div>World</div>
Элемент <div> часто используется в качестве контейнера для других элементов
HTML.
Элемент <div> не имеет обязательных атрибутов, но style , class и id являются об-
щими.
пример
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
Встроенные элементы
Встроенный элемент не запускается на новой строке и занимает как можно больше
ширины.
Это встроенный элемент <span> внутри абзаца. пример
<span>Hello</span>
<span>World</span>
Элемент <span> часто используется как контейнер для некоторого текста.

Элемент <span> не имеет обязательных атрибутов, но style , class и id являются об-
щими.
При использовании вместе с CSS элемент <span> может использоваться для стили-
зации частей текста:
пример
<h1>My <span style="color:red">Important</span> Heading</h1>
HTML- фреймы
IFrame используется для отображения веб-страницы на веб-странице.
Синтаксис iframe
HTML iframe определяется тегом <iframe> :
<iframe src=" URL "></iframe>
Атрибут src указывает URL-адрес (веб-адрес) страницы встроенного фрейма.
Iframe - установить высоту и ширину

Используйте атрибуты height и width чтобы указать размер iframe.
Значения атрибутов указаны в пикселях по умолчанию, но они также могут быть в
процентах (например, «80%»).
пример
<iframe src="demo_iframe.htm" height="200" width="300"></iframe>
Или вы можете использовать CSS для установки высоты и ширины iframe:
пример
<iframe src="demo_iframe.htm" style="height:200px;width:300px;"></iframe>
Чтобы удалить границу, добавьте атрибут style и используйте свойство border :
пример
<iframe src="demo_iframe.htm" style="border:none;"></iframe>
С помощью CSS вы также можете изменить размер, стиль и цвет границы iframe:
пример
<iframe src="demo_iframe.htm" style="border:2px solid red;"></iframe>
Iframe - Цель для ссылки

IFrame может использоваться как целевой кадр для ссылки.
Атрибут target ссылки должен ссылаться на атрибут name iframe:
пример
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4»
Элементы макета HTML5

HTML5 предлагает новые семантические элементы, которые определяют разные
части веб-страницы:
<header> - определяет заголовок для документа или раздела

<nav> - определяет контейнер для навигационных ссылок
<section> - Определяет раздел в документе
<article> - Определяет независимую автономную статью
<aside> - определяет контент, кроме содержимого (например, боковой панели)
<footer> - определяет нижний колонтитул для документа или раздела
<details> - определяет дополнительные сведения
<summary> - определяет заголовок для элемента <details
Методы компоновки HTML

Существует четыре разных способа создания многоколоночных макетов. Каждый
путь имеет свои плюсы и минусы:
 HTML-таблицы (не рекомендуется)
 Свойство CSS float
 CSS flexbox
 Структура CSS
Шаблоны CSS
Если вы хотите быстро создать свой макет, вы можете использовать фреймворк,
например W3.CSS или Bootstrap .
Поплавки CSS
Обычно используется целая веб-макета с использованием свойства float CSS. Float
легко учится - вам просто нужно запомнить, как работают float и clear
properties. Недостатки: плавающие элементы привязаны к потоку документа, что может
нанести вред гибкости. Подробнее о float читайте в главе « Поплавок CSS» и «Очистить» .
CSS Flexbox
Flexbox - это новый режим компоновки в CSS3.
Использование flexbox гарантирует, что элементы ведут себя предсказуемо, когда
макет страницы должен учитывать различные размеры экрана и различные устройства
отображения. Подробнее о flexbox читайте в главе CSS Flexbox .
Пример Flexbox
Cities
 London
 Paris
 Tokyo
London
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its
history going back to its founding by the Romans, who named it Londinium.
Footer
HTML- адаптивный веб-дизайн

Что такое отзывчивый веб-дизайн?
это использование HTML и CSS для автоматического изменения размера, скрыть,
сжать или увеличить веб-сайт, чтобы он выглядел хорошо на всех устройствах
(настольных компьютерах, планшетах и телефонах):
Примечание. Веб-страница должна хорошо выглядеть на любом устройстве !
Настройка просмотра
При создании интерактивных веб-страниц добавьте следующий элемент <meta> на
всех ваших веб-страницах:
пример
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Это установит окно просмотра вашей страницы, которое даст инструкции браузера
о том, как управлять размерами страницы и масштабированием.
Ниже приведен пример веб-страницы без метатега viewport и той же веб-стра-
ницы с метатегом viewport:
Без метатега viewport:
В метатеге viewport:
Отзывчивые образы
Отзывчивые изображения - это изображения, которые хорошо масштабируются для
любого размера браузера.
Использование свойства width
Если для свойства width CSS установлено значение 100%, изображение будет реа-
гировать и масштабироваться вверх и вниз:
пример
<img src="img_girl.jpg" style="width:100%;" >
Обратите внимание, что в приведенном выше примере изображение может быть
увеличено до размера оригинала. Лучшим решением, во многих случаях, будет использо-
вание свойства max-width .
Использование свойства max-width
Если для свойства max-width установлено значение 100%, изображение будет
уменьшаться, если оно есть, но никогда не увеличится до размера, превышающего его
первоначальный размер:
пример
<img src="img_girl.jpg" style=" max-width:100%; height:auto;">
Показать разные изображения в зависимости от ширины браузера

Элемент HTML <picture> позволяет вам определять разные изображения для раз-
ных размеров окна браузера.
Измените размер окна браузера, чтобы увидеть, как изменяется изображение ниже
в зависимости от ширины:
пример
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
<source srcset="flowers.jpg">
<img src="img_smallflower.jpg" alt="Flowers">
</picture>
Отзывчивый размер текста

Размер текста можно установить с помощью блока «vw», что означает «ширина ви-
дового экрана».
Таким образом, размер текста будет соответствовать размеру окна браузера:
Привет мир
Измените размер окна браузера, чтобы узнать, как размер текста масштабируется.
пример
<h1 style=" font-size:10vw ">Hello World</h1>
Viewport - размер окна браузера. 1vw = 1% ширины окна просмотра. Если видовой
экран шириной 50 см, 1vw - 0,5 см.
Запросы мультимедиа
В дополнение к изменению размера текста и изображений, также часто использу-
ется мультимедийный запрос на быстродействующих веб-страницах.
С помощью медиа-запросов вы можете определить совершенно разные стили для
разных размеров браузера.
Пример: измените размер окна браузера, чтобы увидеть, что три элемента div ниже
будут отображаться горизонтально на больших экранах и располагаться вертикально на
маленьких экранах:
Левое меню
Основное содержание
Правильный контент
пример
<style>
.left, .right {
float: left;
width: 20%; /* The width is 20%, by default */
}
.main {
float: left;
width: 60%; /* The width is 60%, by default */
}
/* Use a media query to add a breakpoint at 800px: */

@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
</style>
Отзывчивая веб-страница - полный пример

Отзывчивая веб-страница должна хорошо выглядеть на больших экранах рабочего
стола и небольших мобильных телефонах.
Отзывчивый веб-дизайн - Рамки

Существует много существующих CSS-структур, которые предлагают Отзывчивый
дизайн.
Они бесплатны и просты в использовании.
Использование W3.CSS
Отличный способ создать отзывчивый дизайн - использовать гибкую таб-
лицу стилей, такую как W3.CSS
W3.CSS упрощает разработку сайтов, которые выглядят красиво в любом раз-
мере; рабочий стол, ноутбук, планшет или телефон:
W3.CSS Демо-версия
Измените размер страницы, чтобы увидеть отзывчивость!
Лондон
Лондон - столица Англии.
Это самый густонаселенный город в Соединенном Королевстве, столичный район
которого насчитывает более 13 миллионов жителей.
Париж
Париж - столица Франции.
Парижская область является одним из крупнейших населенных пунктов в Европе с
населением более 12 миллионов человек.
Токио
Токио - столица Японии.
Это центр Большого Токийского района и самый густонаселенный мегаполис в
мире.
Пример
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container w3-green">

<h1>W3Schools Demo</h1>
<p>Resize this responsive page!</p>
</div>
<div class="w3-row-padding">
<div class="w3-third">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.</p>
</div>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</div>
</body>
</html>
Чтобы узнать больше о W3.CSS, прочтите наш учебник W3.CSS .
начальная загрузка
Другой популярной структурой является Bootstrap, она использует HTML, CSS и
jQuery для создания интерактивных веб-страниц.
пример
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.c
ss">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My First Bootstrap Page</h1>
</div>
<div class="row">
<div class="col-sm-4">
...
</div>
...
</div>
...
</div>
</div>
</div>
</body>
</html>
Чтобы узнать больше о Bootstrap, перейдите в наш учебник по Bootstrap .
HTML- формы
Пример формы HTML

First name:
Mickey
Last name:
Mouse
Отправить
Элемент <form>
Элемент HTML <form> определяет форму, которая используется для сбора пользо-
вательского ввода:
<form>
.
form elements
.
</form>
HTML-форма содержит элементы формы .
Элементы формы - это разные типы элементов ввода, такие как текстовые поля,
флажки, переключатели, кнопки отправки и т. Д.
Элемент <input>
Элемент <input> является наиболее важным элементом формы.
Элемент <input> может отображаться несколькими способами, в зависимости от
атрибута type .
Вот некоторые примеры:
Тип Описание
<input type = "text"> Определяет однострочное поле ввода текста
<input type = "radio"> Определяет переключатель (для выбора одного из м
<input type = "submit"> Определяет кнопку отправки (для отправки формы)

В этом уроке вы узнаете гораздо больше о типах ввода.
Ввод текста
<input type="text"> определяет однострочное поле ввода для ввода текста :
пример
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
Так будет выглядеть в браузере:
Имя:
Фамилия:
Примечание. Сама форма не отображается. Также обратите внимание, что ширина

по умолчанию для текстового поля составляет 20 символов.
<input type="radio"> определяет переключатель .

Кнопки радио позволяют пользователю выбрать один из ограниченного числа ва-
риантов: пример
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
Вот как HTML-код выше будет отображаться в браузере:
мужчина
женский
Другие
Кнопка отправки
<input type="submit"> определяет кнопку для отправки данных формы в обработ-
чик формы .
Обработчик формы обычно представляет собой страницу сервера со сценарием для
обработки входных данных.
Обработчик формы указан в атрибуте действия формы:
пример
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
Имя:
Mickey
Фамилия:
Mouse
Отправить
Атрибут действия
Атрибут action определяет действие, которое должно выполняться при отправке
формы.
Обычно данные формы отправляются на веб-страницу на сервере, когда пользова-
тель нажимает кнопку отправки.
В приведенном выше примере данные формы отправляются на страницу на сервере
под названием «/action_page.php». Эта страница содержит серверный скрипт, который об-
рабатывает данные формы:
<form action="/action_page.php ">
Если атрибут action опущен, действие устанавливается на текущую страницу.
Атрибут цели
Атрибут target указывает, будет ли представленный результат открываться на но-
вой вкладке браузера, кадре или в текущем окне.
Значение по умолчанию - « _self », что означает, что форма будет отправлена в те-
кущем окне.
Чтобы сделать результат формы открытым на новой вкладке браузера, используйте
значение « _blank »:
пример
<form action="/action_page.php" target="_blank" >
Другие правовые значения: « _parent », « _top » или имя, обозначающее имя iframe.
Атрибут метода
Атрибут method определяет метод HTTP ( GET или POST ), который будет ис-
пользоваться при отправке данных формы:
пример
<form action="/action_page.php" method="get" >
или:
пример
<form action="/action_page.php" method="post" >
Когда использовать GET?

Метод по умолчанию при отправке данных формы - GET.
Однако, когда GET используется, представленные данные формы будут видны в
поле адреса страницы :
/action_page.php?firstname=Mickey&lastname=Mouse
Примечания по GET:
 Добавляет данные формы в URL-адрес в парах имя / значение
 Длина URL-адреса ограничена (около 3000 символов)
 Никогда не используйте GET для отправки конфиденциальных дан-
ных! (будет отображаться в URL-адресе)
 Полезно для представлений форм, в которых пользователь хочет
закрепить результат
 GET лучше для небезопасных данных, таких как строки запросов в
Google
Когда использовать POST?

Всегда используйте POST, если данные формы содержат конфиденциальную или
личную информацию. Метод POST не отображает представленные данные формы в поле
адреса страницы. POST не имеет ограничений по размеру и может использоваться для от-
правки больших объемов данных.
 Невозможно добавить закладки с POST
Атрибут имени
Каждое поле ввода должно иметь атрибут name должен быть отправлен.
Если атрибут name опущен, данные этого поля ввода вообще не будут отправ-
ляться.
В этом примере будет введено только поле ввода «Фамилия»:
пример
First name:<br>
<input type="text" value="Mickey"><br>
Last name:<br>
</form>
Группирование данных формы с помощью <fieldset>

Элемент <fieldset> используется для группировки связанных данных в форме.
Элемент <legend> определяет заголовок для элемента <fieldset> .
пример
<fieldset>
<legend>Personal information:</legend>
First name:<br>
Last name:<br>
</fieldset>
</form>
Личная информация:Имя:
Mickey
Фамилия:
Mouse
Отправить

Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4»
Вот список атрибутов <form> :

Атрибут Описание
Accept-ко- Указывает кодировку, используемую в представленной форме (по умо

дировок
действие Указывает адрес (url), куда следует отправить форму (по умолчанию:
автозаполнения Указывает, должен ли браузер автозаполнять форму (по умолчанию: в
ENCTYPE Указывает кодировку представленных данных (по умолчанию: закоди
метод Указывает метод HTTP, используемый при отправке формы (по умолч
имя Указывает имя, используемое для идентификации формы (для исполь

document.forms.name).
NOVALIDATE Указывает, что браузер не должен проверять форму.
цель Задает цель адреса в атрибуте действия (по умолчанию: _self).
Элементы формы HTML

❮ ПредыдущаяСледующая ❯
В этой главе описываются все элементы HTML-формы.
Элемент <input>
Наиболее важным элементом формы является элемент <input> .
Элемент <input> может отображаться несколькими способами, в зависимости от
атрибута type .
пример
<input name="firstname" type="text">
Если атрибут type опущен, поле ввода получает тип по умолчанию: «текст».
Все различные типы ввода описаны в следующей главе.
Элемент <select>
Элемент <select> определяет раскрывающийся список :
пример
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Элементы <option> определяют параметр, который можно выбрать.
По умолчанию выбирается первый элемент в раскрывающемся списке.
Чтобы определить предварительно выбранную опцию, добавьте selected атрибут в
параметр:
пример
<option value="fiat" selected>Fiat</option>
Видимые значения:
Используйте атрибут size чтобы указать количество видимых значений:
пример
<select name="cars" size="3" >
</select>
Разрешить множественный выбор:
Используйте multiple атрибут, чтобы пользователь мог выбрать более одного зна-
чения:
пример
<select name="cars" size="4" multiple >
</select>
Элемент <textarea>
Элемент <textarea> определяет многострочное поле ввода ( текстовая область ):
пример
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
Атрибут rows указывает видимое количество строк в текстовой области.
Атрибут cols определяет видимую ширину текстовой области.
Вы также можете определить размер текстовой области с помощью CSS:
пример
<textarea name="message" style="width:200px; height:600px">
The cat was playing in the garden.
</textarea>
Элемент <button>
Элемент <button> определяет кнопку clickable:
пример
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
Нажми на меня!
Примечание. Всегда указывайте атрибут типа для элемента кнопки. Различные
браузеры могут использовать разные типы по умолчанию для элемента кнопки.
Элементы формы HTML5

HTML5 добавил следующие элементы формы:
 <datalist>
 <output>
Примечание. Браузеры не отображают неизвестные элементы. Новые элементы,
которые не поддерживаются в старых браузерах, не будут «уничтожать» вашу веб-стра-
ницу.
Элемент HTML5 <datalist>

Элемент <datalist> указывает список предварительно определенных параметров для
элемента <input> .
Пользователи будут видеть раскрывающийся список предварительно определен-
ных параметров по мере ввода данных.
Атрибут list элемента <input> должен ссылаться на атрибут id элемента <datalist> .
пример
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
HTML5 <output> Элемент

Элемент <output> представляет результат вычисления (например, выполненный
скриптом).
пример
Выполните вычисление и покажите результат в элементе <output> :
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>

Упражнение 1 » Упражнение 2» Упражнение 3 »
= new в HTML5.
Типы ввода HTML
❮ ПредыдущаяСледующая ❯
В этой главе описываются различные типы ввода для элемента <input>.
Текст типа ввода

<input type="text"> определяет однострочное текстовое поле ввода :
пример
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
Имя:
Фамилия:
Пароль ввода Тип

<input type="password"> определяет поле пароля :
пример
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>
Имя пользователя:
Пользовательский пароль:
Символы в поле пароля маскируются (отображаются звездочками или кругами).
Тип ввода Отправить

<input type="submit"> определяет кнопку для отправки данных формы обработ-
чику формы .
Обработчик формы обычно представляет собой страницу сервера со сценарием для
обработки входных данных.
Обработчик формы указан в атрибуте action формы:
пример
First name:<br>
Last name:<br>
</form>
Имя:
Mickey
Фамилия:
Mouse
Отправить
Если вы опустите атрибут значения кнопки отправки, кнопка получит текст по

умолчанию:
пример
First name:<br>
Last name:<br>
<input type="submit">
</form>
Сброс типа ввода
<input type="reset"> определяет кнопку сброса, которая сбросит все значения форм
до их значений по умолчанию:
пример
First name:<br>
Last name:<br>
<input type="reset">
</form>
Имя:
Mickey
Фамилия:
Mouse
Отправить Reset
Если вы измените входные значения и затем нажмите кнопку «Сброс», данные

формы будут сброшены до значений по умолчанию.
Тип входного радиосигнала

<input type="radio"> определяет переключатель .
Кнопки радио позволяют пользователю выбрать ТОЛЬКО ОДИН из ограниченного
числа вариантов:
пример
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
мужчина
женский
Другие
Поле ввода
<input type="checkbox"> определяет флажок .
Флажки позволяют пользователю выбирать опции ZERO или MORE ограниченного
количества вариантов.
пример
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>
у меня есть байк
у меня есть машина
Кнопка ввода типа

<input type="button"> определяет кнопку :
пример
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
Типы входных данных HTML5

В HTML5 добавлено несколько новых типов ввода:
 цвет
 Дата
 Дата и время-местный
 Эл. адрес
 месяц
 номер
 ассортимент
 поиск
 телефон
 время
 URL
 неделю
Новые типы ввода, которые не поддерживаются старыми веб-браузерами, будут ве-
сти себя как <input type="text"> .
Цвет входного сигнала

<input type="color"> используется для полей ввода, которые должны содержать
цвет.
В зависимости от поддержки браузера в поле ввода отображается значок выбора
цвета.
пример
<form>
Select your favorite color:
<input type="color" name="favcolor">
</form>
Дата ввода Тип

<input type="date"> используется для полей ввода, которые должны содержать дату.
В зависимости от поддержки браузера в поле ввода может отображаться средство
выбора даты.
пример
<form>
Birthday:
<input type="date" name="bday">
</form>
Вы также можете использовать атрибуты min и max для добавления ограничений
на даты:
пример
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form>
Тип ввода Datetime-local

<input type="datetime-local"> указывает поле ввода даты и времени без часового по-
яса.
пример
<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>
Введите тип электронной почты

<input type="email"> используется для полей ввода, которые должны содержать ад-
рес электронной почты.
В зависимости от поддержки браузера адрес электронной почты может быть авто-
матически проверен при отправке.
Некоторые смартфоны распознают тип электронной почты и добавляют «.com» к
клавиатуре, чтобы соответствовать вводу электронной почты.
пример
<form>
E-mail:
<input type="email" name="email">
</form>
Файл типа ввода

<input type="file"> определяет поле выбора файла и кнопку "Обзор" для загрузки
файлов.
пример
<form>
Select a file: <input type="file" name="myFile">
</form>
Тип месяца ввода

<input type="month"> позволяет пользователю выбирать месяц и год.
пример
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>
Номер типа ввода

<input type="number"> определяет числовое поле ввода.
Вы также можете установить ограничения на то, какие числа принимаются.
В следующем примере показано числовое поле ввода, в котором вы можете ввести
значение от 1 до 5:
пример
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>
Ограничения на вход
Вот список некоторых общих ограничений ввода (некоторые из них новы в
HTML5):
Attribute Description
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field

Вы узнаете больше о ограничениях ввода в следующей главе.
В следующем примере показано числовое поле ввода, в котором вы можете ввести
значение от 0 до 100 с шагом 10. Значение по умолчанию - 30:
пример
<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form>
Тип входного диапазона

<input type="range"> определяет элемент управления для ввода числа, точное зна-
чение которого не имеет значения (например, управление ползунком). Диапазон по умол-
чанию - от 0 до 100. Однако вы можете установить ограничения на то, какие числа прини-
маются с атрибутами min , max и step :
пример
<form>
<input type="range" name="points" min="0" max="10">
</form>
Поиск типа ввода

<input type="search"> используется для полей поиска (поле поиска ведет себя как
обычное текстовое поле).
пример
<form>
Search Google:
<input type="search" name="googlesearch">
</form>
Тип входа Tel

<input type="tel"> используется для полей ввода, которые должны содержать номер
телефона.
Примечание. Тип tel в настоящее время поддерживается только в Safari 8.
пример
<form>
Telephone:
<input type="tel" name="usrtel">
</form>
Время ввода Тип

<input type="time"> позволяет пользователю выбирать время (без часового пояса).
В зависимости от поддержки браузера в поле ввода может отображаться таймер.
пример
<form>
Select a time:
<input type="time" name="usr_time">
</form>
Тип ввода URL
<input type="url"> используется для полей ввода, которые должны содержать URL-
адрес.
В зависимости от поддержки браузера поле url может быть автоматически прове-
рено при отправке.
Некоторые смартфоны распознают тип url и добавляют «.com» к клавиатуре, чтобы
соответствовать вводу url.
пример
<form>
Add your homepage:
<input type="url" name="homepage">
</form>
Неделя ввода
<input type="week"> позволяет пользователю выбирать неделю и год.
пример
<form>
Select a week:
<input type="week" name="week_year">
</form>

Тема4. Введение в HTML5

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Тема4. Введение в HTML5

Загружено:

Авторское право:

Доступные форматы

Введение в HTML5

HTML — язык разметки гипертекстовых документов, определяющий логическую

HTML-теги представляют имена элементов в угловых скобках:

<tagname> содержимое </ tagname>

Пример веб-страницы HTML5

Семантическая вёрстка страницы

Рассмотрим несколько примеров.

Пример 3. Ссылки на HTML

Пример 6. Списки HTML

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

Физическая и логическая разметка документа.

Физические теги Таблица 2.

Тег Характеристика тега

<i>...</i> Курсив (Italic)

<b>...</b> Жирное начертание шрифта (Вold)

<big>...</big> Увеличенный размер шрифта

<small>...</small> Уменьшенный размер шрифта

<sub>...</sub> Подстрочные символы

<sup>...</suр> Надстрочные символы

Тег Характеристика тега

<сode>...</сode> Примеры кода, например, коды программ

<sамр>...</sамр> Последовательность литералов

<квd>...</квd> Пример ввода символов с клавиатуры

<q>...</q> Текст, заключенный в двойные кавычки

Благодаря логическим тегам упрощается анализ страницы поисковыми системами и

Специальные символы. Символы, которые не могут быть введены в текст документа

Специальные символы и их представления. Таблица 4.

Специальный символ Представление

Торговая марка ТМ &reg;

Не разделяющий пробел &nbsp;

Линии. Тег <hr> проводит контурную горизонтальную линию (опция shade по

<hr noshade> – горизонтальная линия без тени;

Атрибуты элементов HTML

<tagname atribName=" value ">

Атрибуты ширины и высоты

<img src="img_girl.jpg" alt="Girl with a jacket">

Попробуй сам "

Атрибут стиля HTML

Цвет текста HTML

Ссылки HTML - Гиперссылки

Ссылки HTML - целевой атрибут

Ссылки HTML - изображение как ссылка

Ссылки HTML - Создать закладку

Изображение как ссылка

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">

Изображение на заднем плане

Пример таблицы HTML

Alfreds Futterkiste Maria Anders

Centro comercial Moctezuma Francisco Chang

Ernst Handel Roland Mendel

Island Trading Helen Bennett

Laughing Bacchus Winecellars Yoshi Tannamuri

Magazzini Alimentari Riuniti Giovanni Rovelli

Пример. Добавление границы к таблице

Пример. Таблица HTML - Свернутые границы

Пример. Таблица HTML - Добавление заполнения ячеек

Пример. Таблица HTML - заголовки с левым выравниванием

Пример. Таблица HTML - Добавление интервала между границами

Пример. Таблица HTML - ячейки, которые охватывают множество столбцов

Пример. Таблица HTML - ячейки, которые охватывают множество строк

Пример. Таблица HTML - Добавление заголовка

Пример. Специальный стиль для одной таблицы

 Используйте атрибут rowspan чтобы сделать диапазон ячеек несколь-

Торговая марка ТМ ®

Не разделяющий пробел