HTML: создайте веб-страницу с нуля
Каждый сайт построен на HTML. Вы пишете код и сразу видите результат прямо здесь, в живом окне браузера. От анатомии тега до создания целой страницы.
Какой тег даёт этот результат?
Добро пожаловать! HTML (HyperText Markup Language) — это язык веб-страниц. Он сообщает браузеру, что находится на странице: заголовок, текст, изображение, кнопка. В этом курсе вы увидите каждое понятие своими глазами и попробуете сами. Начнём.
Что такое HTML?
Как работает веб-страница
Вы пишете HTML-код, браузер его читает и отрисовывает на экране в виде страницы. То есть HTML — это ваши инструкции, а браузер — их исполнитель. Ниже слева код, справа результат в браузере. Измените код и посмотрите, как правая часть сразу обновляется.
Что такое тег
HTML состоит из тегов, заключённых в угловые скобки < >. Каждый тег сообщает браузеру, «чем является эта часть». Чаще всего теги парные: «открывающий» тег начинает, «закрывающий» тег завершает, а между ними находится «содержимое» (текст).
<h1> создаёт большой заголовокНо не все теги парные. Некоторые бывают «одиночными»: они не закрываются, потому что внутри нет содержимого. Умение различать эти два вида — одна из важнейших основ HTML:
Открывающий и закрывающий тег вместе. Между ними есть содержимое. Например: <h1>, <p>, <div>.
Идёт один, закрывающего нет. Внутри пусто. Например: <br>, <hr>, <img>.
Теперь попробуйте сами. В редакторе ниже оберните текст в теги <h1> или <p> и посмотрите на результат:
<h1> создаёт самый большой заголовок, а <p> — обычный абзац (параграф).Первая практика
Теперь создайте небольшую страницу сами. В редакторе должны быть один заголовок и один абзац. Когда задание выполнено, отметка ниже станет зелёной.
<h1>). Ниже добавьте свой абзац (<p>...</p>). В обоих должен быть текст.Упражнения: закрепление
Выполните следующие небольшие задания одно за другим. В каждом пишите код и сразу смотрите результат рядом. Когда все три упражнения выполнены верно, раздел завершается.
Тест модуля
Скелет страницы
Полный скелет страницы
Настоящая HTML-страница начинается не с отдельных тегов, а со стандартного «скелета». Этот скелет говорит браузеру, как читать страницу. Почти каждая страница состоит из следующих частей:
<html> оборачивает всю страницу; внутри находятся <head> (невидимый) и <body> (видимый)Задача каждой части:
<!DOCTYPE html>: говорит браузеру «это HTML5» (стоит в первой строке).<html lang="uz">: оборачивает всю страницу;lang="uz"указывает, что язык страницы узбекский (важно для поисковых систем и переводчиков).<meta charset="utf-8">: задаёт кодировку символов. Без него узбекские или другие буквы могут отображаться некорректно. Должен стоять первым внутри<head>. Это одиночный тег (не закрывается).<head>: невидимая информация (настройки, имя страницы).<body>: видимая часть (заголовок, текст, изображение).<title>: имя страницы; отображается во вкладке браузера.
Ниже полный скелет. Измените его и посмотрите на результат:
<meta name="viewport"> (для адаптации под экран телефона); это мы увидим в модуле про медиа.Разница между head и body
<head> и <body> — это две основные части страницы. То, что внутри <head>, на экране не видно (это лишь информация о странице). А то, что внутри <body>, отображается на экране.
<title> из <head> отображается во вкладке браузера; а <body> виден на страницеПопробуйте: <title> из <head> в результате не виден, виден только текст из <body>:
<title> отображается в заголовке вкладки браузера, а не внутри страницы.Практика: дайте странице имя
Ниже есть полный скелет, но имя страницы пустое. Внутри тега <title> напишите имя своей страницы.
<title> и </title> напишите имя своей страницы (например, ваше имя или название сайта).Упражнения: закрепление
Выполните следующие небольшие задания одно за другим. В каждом пишите код и сразу смотрите результат рядом. Когда все три упражнения выполнены верно, раздел завершается.
Тест модуля
Текст и заголовки
Заголовки: от h1 до h6
Для заголовков есть 6 уровней: <h1> самый большой, <h6> самый маленький. Они разбивают текст на разделы. На странице обычно один <h1> (главный заголовок), а остальные используются для подразделов.
<h1> самый большой, <h6> самый маленькийВ редакторе измените номер заголовка (от 1 до 6) и посмотрите, как меняется размер:
Абзацы: p, br и пробел
Обычный текст пишется внутри <p> (paragraph, абзац). Каждый <p> — это отдельный блок, оставляющий пустое место сверху и снизу. Важное правило: лишние пробелы и переносы строк в HTML-коде превращаются в браузере в один пробел. То есть даже если вы поставите в коде 10 пробелов, на экране будет один.
Чтобы намеренно начать текст с новой строки, используется <br> (одиночный тег), а для разделительной черты между разделами — <hr>. Попробуйте ниже: в первом абзаце лишние пробелы сжимаются, во втором <br> даёт перенос строки:
<br>, а для нового абзаца — новый <p>.Styles: атрибут style
Чтобы изменить внешний вид элемента (цвет, размер, фон), ему задаётся атрибут style. Внутри него CSS-свойства пишутся в виде свойство: значение и разделяются ;. Это называется «внутренним стилем» (inline CSS).
свойство: значение разделяются ;Наиболее часто используемые свойства:
color: цвет текста (напримерredили#e34f26)background-color: цвет фонаfont-size: размер текста (например20px)text-align: выравнивание (left,center,right)font-family: тип шрифта (напримерGeorgia)padding: внутренний отступ (например10px)
Попробуйте вживую ниже: измените значения и посмотрите, как меняется вид:
style быстрый и простой, но его нужно писать отдельно для каждого элемента. Чтобы много элементов выглядели одинаково, позже используется отдельный CSS (с классами) — об этом упоминается в модуле 7.Теги форматирования текста
Обычный текст пишется внутри <p> (абзац). Чтобы выделить некоторые слова внутри него, есть множество тегов. Сначала одно важное понятие: по строению теги делятся на два вида.
Открывающий и закрывающий тег идут вместе, между ними находится содержимое (текст). Большинство тегов таковы.
Идёт один, закрывающей части нет. Внутри содержимого не бывает. Например: <br>, <hr>, <img>.
Ниже основные теги форматирования: код, готовый результат, назначение и вид. В столбце «Результат» наблюдайте реальный вид:
| Тег | Результат | Назначение | Вид |
|---|---|---|---|
<strong> | текст | Важный текст (жирный + смысл) | парный |
<b> | текст | Жирный (только вид) | парный |
<em> | текст | Выделенный текст (курсив + смысл) | парный |
<i> | текст | Курсив (только вид) | парный |
<mark> | текст | Выделенный (цветной фон) | парный |
<ins> | текст | Добавленный текст (подчёркивание) | парный |
<u> | текст | Подчёркивание (только вид) | парный |
<del> | Удалённый текст | парный | |
<s> | Устаревшее (зачёркнутое) | парный | |
<sub> | H2O | Нижний индекс | парный |
<sup> | x2 | Верхний индекс (степень) | парный |
<code> | a = 5 | Код (моноширинный шрифт) | парный |
<q> | привет | Короткая цитата (добавляет кавычки) | парный |
<marquee> | Двигает текст (устаревшее) | парный | |
<br> | строка 1 строка 2 | Начинает с новой строки | одиночный |
<hr> | Разделительная черта между разделами | одиночный |
<marquee> (движущийся текст) — устаревший тег. Браузеры пока его показывают, но на современных сайтах вместо него используется CSS-анимация.<b> и <strong> оба показывают жирным, но <strong> несёт смысл «это важно» (поисковая система и программа чтения с экрана это понимают). То же самое <i> и <em>. По возможности выбирайте осмысленный вариант (<strong>, <em>).Теперь попробуйте сами. Оберните слова разными тегами и наблюдайте результат:
Comments: комментарии
Комментарий (comment) — это заметка, которую вы пишете в коде для себя. Браузер её не читает и не показывает на экране. Комментарий начинается с <!-- и заканчивается на -->; всё между ними остаётся скрытым. Комментарий нужен для двух вещей: (1) пояснить код, (2) временно «отключить» какую-то часть (скрыть, не удаляя).
<!-- ... -->, в браузере не видноПопробуйте ниже: комментарий и заключённый в комментарий абзац в результате не появляются:
<!-- и -->. Потом, когда понадобится, уберёте знаки комментария и вернёте.Практика: небольшая статья
На странице есть заголовок и абзац. Теперь сделайте какое-нибудь слово в абзаце жирным с помощью тега <b>.
<h1>-<h6>) и абзац (<p>), а также хотя бы одно слово, выделенное жирным с помощью <b>.Упражнения: закрепление
Выполните следующие небольшие задания одно за другим. В каждом пишите код и сразу смотрите результат рядом. Когда все три упражнения выполнены верно, раздел завершается.
Тест модуля
Списки и ссылки
Списки: ul, ol и li
Список состоит из трёх тегов. Внешний тег оборачивает весь список: <ul> (маркированный, неупорядоченный) или <ol> (нумерованный, упорядоченный). А внутри каждый пункт пишется в отдельном теге <li> (list item). То есть текст вы помещаете не напрямую, а всегда между <li>...</li>, а затем все <li> размещаете внутри <ul> или <ol>.
<li> (в коде нет ни точек, ни цифр). Различается только внешний тег: <ul> рисует маркер (•), <ol> — номер (1.)В редакторе добавьте в список ещё один <li> или замените <ul> на <ol> и посмотрите результат:
Вид маркера или номера вы выбираете атрибутом type. Он пишется в открывающем теге, например <ul type="square">. Ниже все значения и готовый результат:
| Код | Результат | Пояснение |
|---|---|---|
<ul type="disc"> |
| Закрашенный круг (по умолчанию) |
<ul type="circle"> |
| Пустой круг |
<ul type="square"> |
| Закрашенный квадрат |
<ol type="1"> |
| Цифры (по умолчанию) |
<ol type="A"> |
| Заглавные буквы: A, B, C |
<ol type="a"> |
| Строчные буквы: a, b, c |
<ol type="I"> |
| Заглавные римские: I, II, III |
<ol type="i"> |
| Строчные римские: i, ii, iii |
<ul>, когда порядок не важен (список покупок), и <ol>, когда порядок важен (шаги рецепта). У <ol> есть ещё атрибуты start="5" (начать с 5) и reversed (обратный отсчёт).Ссылки и атрибуты
Ссылка (link) при нажатии ведёт на другую страницу. Она создаётся тегом <a>. Но <a> должен знать, куда вести, и это мы сообщаем через атрибут.
Атрибут — это дополнительная информация внутри тега. Он пишется в виде имя="значение" внутри открывающего тега. Для ссылки этот атрибут называется href (адрес):
href задаёт, куда вести, а текст внутри тега — что будет видноВ редакторе измените текст или адрес ссылки и нажмите на ссылку в результате:
target="_blank", ссылка откроется в новой вкладке: <a href="..." target="_blank">.Практика: создайте меню
Создайте небольшое меню: пусть в нём будут один список и одна ссылка.
<ul> или <ol>, внутри <li>) и одна ссылка (<a href="...">).Упражнения: закрепление
Выполните следующие небольшие задания одно за другим. В каждом пишите код и сразу смотрите результат рядом. Когда все три упражнения выполнены верно, раздел завершается.
Тест модуля
Изображения и медиа
Вставка изображения: img
Чтобы вставить изображение на страницу, используется тег <img>. Это одиночный тег, то есть он не закрывается. Само изображение в коде не находится, тег лишь указывает, где оно расположено. Для этого есть два важных атрибута: src (адрес изображения) и alt (текст на случай, если изображение не отобразится, или для пользователя с ограниченными возможностями зрения).
src — адрес изображения (имя файла или ссылка), а alt — описывающий его текстВ редакторе измените текст alt или значение width (ширина) и посмотрите результат:
alt; программа чтения с экрана озвучит его; поисковая система по нему понимает, что на изображении. Поэтому всегда пишите осмысленный alt.Размер и другие медиа
Размер изображения задаётся в пикселях атрибутами width (ширина) и height (высота). Часто пишут только один (например width), а второй меняется пропорционально.
width задаёт ширину, height — высоту в пикселяхВ редакторе измените значение width и посмотрите, как изображение уменьшается и увеличивается:
Кроме изображений можно вставлять видео и аудио. Они являются парными тегами и с атрибутом controls показывают кнопки воспроизведения:
<img>: показывает изображение (src,alt). Одиночный тег.<video controls>: воспроизводит видео (play, пауза, звук). Парный тег.<audio controls>: воспроизводит аудио. Парный тег.
Ниже живой пример: атрибут controls выводит кнопки воспроизведения. Понажимайте плееры видео и аудио и попробуйте:
width.Вставка видео с YouTube
Чтобы вставить видео с другого сайта (например YouTube) на свою страницу, используется <iframe> («внутренняя рамка»). Откройте видео на YouTube, нажмите «Share» (Поделиться), затем «Embed» (Встроить код), скопируйте предложенный код <iframe> и вставьте на страницу. В src находится адрес видео, а в width/height — его размер:
<iframe width="420" height="236" src="https://www.youtube.com/embed/tgbNymZ7vqY" title="YouTube video"></iframe>
Код выше вставляет на страницу именно следующее видео (нажмите, чтобы воспроизвести):
<iframe>. ID видео (часть после embed/) у каждого видео своё.Практика: задайте alt изображению
У изображения ниже нет alt. Добавьте ему осмысленный текст alt.
<img> непустой атрибут alt="..." (напишите, что показывает изображение).Упражнения: закрепление
Выполните следующие небольшие задания одно за другим. В каждом пишите код и сразу смотрите результат рядом. Когда все три упражнения выполнены верно, раздел завершается.
Тест модуля
Таблицы и формы
Таблица: table, tr, th, td
Чтобы разместить данные по строкам и столбцам, используется таблица: <table> — вся таблица, <tr> — одна строка (table row), <th> — ячейка заголовка (жирная, по центру), <td> — обычная ячейка (table data). Чтобы отобразить границу, тегу <table> задаём атрибут border="1" (это HTML-атрибут), а cellpadding="6" добавляет внутри ячеек пустое место.
<table> — таблица, <tr> — строка, <th> — ячейка заголовка, <td> — обычная ячейкаНиже таблица из двух столбцов. Измените текст ячеек (<td>) или добавьте новую строку (<tr>):
<table> идёт <tr>, а внутри <tr> — <th> или <td>. Желательно, чтобы число столбцов в каждой строке было одинаковым.Объединение ячеек: colspan, rowspan
Иногда одна ячейка должна занимать несколько столбцов или строк. colspan="2" объединяет ячейку по горизонтали (шириной в 2 столбца). rowspan="2" объединяет ячейку по вертикали (высотой в 2 строки). Когда ячейка объединена, вместо неё в следующей строке или столбце лишний <td> не пишется.
colspan растягивает ячейку на несколько столбцов, rowspan — на несколько строкНиже colspan (верхний заголовок на 2 столбца) и rowspan («Язык» на 2 строки) использованы вместе. Попробуйте изменить числа:
colspan = по столбцам (горизонтально), rowspan = по строкам (вертикально). Сколько мест занимает объединённая ячейка, на столько <td> меньше пишется в этих строках.Форма и типы input
Чтобы получить данные от пользователя, используется форма. Форма находится внутри <form>: <label> — имя поля (метка), <input> — поле ввода, <button> — кнопка. Атрибут type у <input> задаёт тип поля. Ниже приведены основные типы (нажмите на каждый и попробуйте):
| type | Вид | Описание |
|---|---|---|
text | Обычный однострочный текст | |
password | Скрытый пароль (точки) | |
email | Email (проверяет знак @) | |
number | Только число (со стрелками) | |
tel | Номер телефона | |
url | Адрес ссылки (URL) | |
search | Поле поиска | |
date | Выбор даты (календарь) | |
time | Выбор времени | |
datetime-local | Дата и время вместе | |
month | Месяц и год | |
week | Год и неделя | |
color | Выбор цвета | |
range | Ползунок (диапазон) | |
checkbox | Флажок (множественный выбор) | |
radio | Переключатель (выбор одного) | |
file | Загрузка файла | |
submit | Кнопка отправки формы | |
reset | Кнопка очистки полей | |
button | Обычная кнопка | |
hidden | не видно | Скрытое поле (для данных) |
Два важных атрибута: placeholder показывает внутри поля подсказку, пока оно пустое; а required делает заполнение поля обязательным (если пусто, форма не отправляется). Ниже живая форма:
placeholder="Ваше имя" — серый текст подсказки; required — атрибут без значения, если он есть, поле нельзя оставить пустым. <input> — одиночный тег, не закрывается.textarea, radio, checkbox, select
Кроме <input> есть ещё несколько типов полей:
<textarea>: многострочный текст (комментарий, сообщение). Парный тег. Атрибутrowsзадаёт высоту.<input type="radio">: из вариантов выбирается только один. Чтобы они были одной группой, их атрибутnameдолжен быть одинаковым.<input type="checkbox">: можно отметить несколько вариантов сразу.<select>и<option>внутри него: выпадающий список (dropdown).
radio — переключатель (выбор одного), checkbox — флажок (несколько)Ниже всё вживую. Понажимайте radio, checkbox и выпадающий список:
name (например обоим name="jins"). Только тогда они образуют одну группу, и выбирается только один.Практика: добавьте в форму поле комментария
В форме ниже есть поле имени и кнопка. Добавьте <textarea>, чтобы можно было написать комментарий.
<textarea></textarea> (поле комментария).Упражнения: закрепление
Выполните следующие небольшие задания одно за другим. В каждом пишите код и сразу смотрите результат рядом. Когда все три упражнения выполнены верно, раздел завершается.
Тест модуля
Структура: div, span, class, id
div: группировка элементов
На большой странице элементы нужно разбивать на группы: верхняя часть, основная часть, нижняя часть. Для этого используется тег <div>. Сам <div> не даёт никакого внешнего вида, он просто помещает несколько элементов в один контейнер. Этот контейнер позже оформляется с помощью CSS или для него задаётся положение.
<div> объединяет несколько элементов в один невидимый контейнерНиже внутрь <div> помещены заголовок и текст. Граница (border) показывает контейнер:
span и block/inline элементы
Элементы HTML делятся на два основных вида: block и inline. Block-элемент всегда начинается с новой строки и занимает всю ширину (слева направо): <div>, <p>, <h1>-<h6>, <ul>, <li>, <table>, <form>. А inline-элемент не открывает новую строку; занимает место только по размеру своего содержимого и располагается в тексте рядом с другими: <span>, <a>, <b>, <img>, <input>. Поэтому <div> — это block-контейнер (группирует более крупные части), а <span> — inline-контейнер (выделяет небольшой фрагмент внутри текста).
Ниже видна разница: два <div> (block) начинаются с новой строки и во всю ширину; а <span> (inline) располагается внутри предложения рядом с текстом. Цвет фона показывает ширину контейнеров:
<div>.class и id: присвоение метки
Элементам можно давать метку (ярлык). Есть два вида меток: class и id. class — это групповая метка: её можно дать нескольким элементам (например всем карточкам class="karta"). А id — уникальная метка: она даётся только одному элементу на странице (например основному блоку id="asosiy"). Эти метки позже помогают находить нужный элемент для CSS и JavaScript.
class задаётся нескольким элементам (повторяется); оранжевый id — только одному (уникальный)В коде ниже внутри <style> оформлены .karta (class) и #asosiy (id). Оба div имеют class karta, но только один имеет id asosiy:
class повторяется (много элементов), id не повторяется (один, уникальный элемент). У одного элемента могут быть оба. В CSS . обозначает class, а # — id.Практика: создайте карточку
Ниже уже готов стиль .mahsulot с зелёной границей. Теперь напишите сами <div> с этим классом и поместите внутрь какой-нибудь текст.
<div class="mahsulot">...</div> с текстом внутри (должна появиться зелёная рамка).Упражнения: закрепление
Выполните следующие небольшие задания одно за другим. В каждом пишите код и сразу смотрите результат рядом. Когда все три упражнения выполнены верно, раздел завершается.
Тест модуля
Семантический HTML и итоговый проект
Семантические теги: header, nav, main, footer
До сих пор для группировки мы использовали <div>. Но <div> не сообщает, «что это такое». HTML5 даёт семантические (осмысленные) теги: они группируют так же, как <div>, но при этом ещё указывают назначение части. Основные: <header> — верхняя часть (логотип, заголовок), <nav> — меню (ссылки), <main> — основной контент (один на странице), <footer> — нижняя часть (авторство, контакты).
header, nav, main, footerПопробуйте вживую ниже (цвета разделяют части, они располагаются сверху вниз как обычные блоки):
<div>, но смысл точный.section, article, aside и структура страницы
Внутри основного контента (<main>) есть ещё осмысленные теги: <section> — тематический раздел (например «Последние новости»), <article> — самостоятельный, отдельно стоящий контент (одна статья или пост блога), <aside> — боковая панель (дополнительные ссылки, реклама). Полная страница обычно строится так: вверху header и nav, в середине main (внутри article и aside), внизу footer.
<main> располагаются основной <article> и боковой <aside>Ниже <article> и <aside> внутри <main> (расположение рядом задано с помощью CSS):
<section> — тематический раздел, а <article> самостоятелен (даже если перенести его на другой сайт, смысл останется понятным, например новость или отзыв).Хорошие практики (Best Practices)
Профессиональный HTML следует нескольким простым правилам. Они делают код чистым, правильным и удобным для всех:
- Пишите теги строчными буквами:
<p>, а не<P>. - Заключайте значения атрибутов в кавычки:
class="box". - Каждому
<img>задавайте осмысленныйalt. - Используйте на странице только один
<h1>. - В начале страницы должны быть
<!DOCTYPE html>,<html lang="uz">,<meta charset="utf-8">. - Вместо
<div>по возможности используйте семантические теги. - Пишите код аккуратно, с отступами (indentation) по вложенности.
- Всегда закрывайте теги и правильно располагайте их (в порядке вложенности).
Два кода дают одинаковый результат, но разница в качестве большая:
Заглавные буквы, нет alt, нет кавычек, использован div.
Строчные буквы, есть alt, есть кавычки, семантический тег.
Итоговый проект: личная страница
Теперь объединим всё, что вы изучили, и построим целую страницу. Заполните следующий скелет: добавьте в меню ссылки, а в основную часть — список.
<header>+<h1>, <nav>+хотя бы одна ссылка (<a href>), <main>+список (<ul>/<li>) и <footer>.Итоговый практический проект
Поздравляем, вы завершили все темы модулей курса! Теперь самый важный шаг — итоговый проект. Нажмите кнопку ниже, откроется полноэкранная студия кода: слева вы пишете код, а справа будут вкладки «Образец» (готовая страница, которую нужно воспроизвести) и «Результат» (ваш живой результат). Когда студия открыта, остальная часть курса не видна, и вы сосредотачиваетесь только на проекте.
Эта кнопка активируется после того, как вы завершите все темы уроков.
Тест модуля
Итоговый тест из 50 вопросов
Итоговый тест
50 вопросов по всем 8 модулям. Чтобы получить сертификат, дайте минимум 40/50 правильных ответов.