В основе Интернета лежит язык разметки HTML. В этой статье мы рассмотрим основы HTML.
1. Что такое HTML?
Язык HTML (HyperText Markup Language — язык разметки гипертекста) — это язык для обозначения элементов веб-страницы. Это не язык программирования, поэтому любой может его освоить. Суть языка в том, что нужно исходный текст разметить специальными метками — тегами.
Например, тег параграфа выглядит так:
1 |
<p>Пример параграфа</p> |
В данном примере мы разметили текст тегом p. В начале стоит открывающий тег <p>, а в конце — закрывающий тег </p>.
Каждый тег обозначается некоторым кодом. Обычно тег начинается знаком «<код параметры>» и заканчивается знаком «</код>». Существуют теги без закрывающего знака.
Стандарт HTML: https://www.w3.org/TR/html52/
В тегах можно указывать параметры. Например, текст, выровненный влево, выглядит так:
<p align=»left»>Пример текста</p>
Пробелы в HTML сокращаются до одного пробела. Переводы строк игнорируются.
Чаще всего используются следующие теги:
<b> — полужирный текст
<i> — курсив
<br> — перевод строки
<hr> — горизонтальная линия
<a> — ссылка
<pre> — форматированный текст
<ins> — добавленный текст
<del> — удаленный текст
Существует шесть уровней заголовков: с <h1> по <h6>.
1 2 3 4 5 6 |
<h1>Заголовок уровня 1</h1> <h2>Заголовок уровня 2</h2> <h3>Заголовок уровня 3</h3> <h4>Заголовок уровня 4</h4> <h5>Заголовок уровня 5</h5> <h6>Заголовок уровня 6</h6> |
Результат будет выглядеть так:
2. Минимальная веб-страница
Создание веб-страницы на HTML называется версткой. А человек, который верстает страницы называется верстальщиком. Верстка имеет свои правила и сейчас мы начнем с ней знакомиться.
Чтобы создать минимальную веб-страницу достаточно в любом текстовом редакторе написать следующий текст:
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>без имени</title> </head> <body> </body> </html> |
Этот текст нужно сохранить с именем index.html.
Рекомендую использовать для этого редактор Geany. В этом редакторе есть шаблон для HTML5.
После этого веб-страницу можно открыть в любом браузере.
Строки минимальной веб-страницы означают следующее:
<!DOCTYPE html> — стандарт HTML5
<html lang=»ru»> — язык страницы русский
<head></head> — техническая информация о веб-странице
<meta charset=»utf-8″ > — кодировка UTF-8
<title>без имени</title> — Заголовок веб-страницы
<body> </body> — тело веб-страницы
</html> — завершение веб-страницы
3. Структура веб-страницы
Для указания на структуру используются теги:
- <header> — шапка документа
- <nav> — навигация по сайту
- <article> — статья
- <aside> — боковая панель
- <footer> — подвал
Эти теги позволяют поисковым системам более точно определять семантику сайта.
4. Таблицы
Таблица задается тегами:
- <table> — общий контейнер
- <tr> — строка
- <td> — ячейка
- <th> — заголовок столбца
- <caption> — название таблицы
Простая таблица выглядит так:
<table> — начало таблицы
<tr> — начало первой строки
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr> — конец первой строки
<tr> — начало второй строки
<td>Ячейка 4</td>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr> — конец второй строки
</table> — конец таблицы
Текст без комментариев выглядит так:
1 2 3 4 5 6 7 8 9 10 11 12 |
<table> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> <td>Ячейка 3</td> </tr> <tr> <td>Ячейка 4</td> <td>Ячейка 5</td> <td>Ячейка 6</td> </tr> </table> |
Сама таблица будет выглядеть так:
5. Блоки, аудио и видео
До HTML5 использовалась табличная верстка. При этом вся веб-страница представляла собой большую таблицу, а отдельные элементы размещались в ячейках.
В HTML5 рекомендуется так называемая блочная верстка. Для работы с ней используются два тега:
- <div> — блочный элемент
- <span> — строчный элемент.
По умолчанию блочные элементы начинаются с новой строки и заполняют весь контейнер, а строчные могут начинаться в любом месте строки и заканчиваются после контента.
Таблицы используются только для вывода табличных данных.
Размещение аудио.
1 |
<audio src="sound.mp3" controls></audio> |
Видео из файла.
1 |
<video src="car.mp4" width="400" height="300" controls></video> |
Ролик на YouTube
1 2 3 4 |
<iframe width="560" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe> |
6. Цвета
В HTML цвет можно указать как значение RGB, используя следующую формулу:
RGB (красный, зеленый, синий)
Каждый параметр определяет интенсивность цвета от 0 до 255.
Например:
- rgb (255, 0, 0) — красный.
- rgb (0, 0, 0) — черный.
Цветовые значения RGBA являются расширением цветовых значений RGB с альфа-каналом, который определяет непрозрачность для цвета.
Стандартные названия цветов: https://colorscheme.ru/html-colors.html
7. Формы
Формы используются для получения данных от пользователя. Тег form является контейнером для управляющих элементов.
Пример простой формы:
1 2 3 4 5 6 7 |
<form name="form1" action="getform1.php"> Имя:<br> <input type="text" name="firstname"><br> Фамилия:<br> <input type="text" name="lastname"><br> <input type="submit" value="Отправить"> </form> |
Для получения данных используется тег <input>:
- флажки <input type=»checkbox»>
- радиокнопки — <input type=»radio»>
- ввод текста — <input type=»text»>
- пароль — <input type=»password»>
- отправить форму — <input type=»submit»>
и многое другое.
Полный список здесь:
https://developer.mozilla.org/ru/docs/Web/HTML/Element/input
Поля формы можно разделять на логические блоки с помощью элемента <fieldset>. Каждому разделу можно присвоить название с помощью элемента <legend>.
Обязательные для заполнения поля обозначаются атрибутом required. В полях выбора можно сразу установить выбор атрибутом checked.
Для создания больших текстовых полей применяется элемент <textarea>. Размеры поля устанавливаются с помощью атрибутов cols и rows. В поле можно использовать замещающий текст placeholder, который исчезает, как только пользователь начинает ввод текста.
Пример формы с группировкой данных:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<form name="form2" action="getform2.php"> <fieldset> <legend>Личная информация:</legend> Имя:<br> <input type="text" name="firstname" required ><br> Фамилия:<br> <input type="text" name="lastname"><br><br> </fieldset> <fieldset> <legend>Ввод пароля:</legend> Введите пароль:<br> <input type="password" name="pass1"><br> Повторите пароль:<br> <input type="password" name="pass2"><br><br> </fieldset> <fieldset> <legend>Интересы:</legend> <p>Любимые музыкальные жанры</p> <ol> <li><input type="checkbox" name="musik" value="джаз" checked>Джаз</li> <li><input type="checkbox" name="musik" value="блюз" checked>Блюз</li> <li><input type="checkbox" name="musik" value="рок">Рок</li> <li><input type="checkbox" name="musik" value="кантри">Кантри</li> </ol> <p>Хобби</p> <select name="hobby" size="7" multiple> <option selected value="1">Спорт</option> <option value="2">Рыбалка</option> <option value="3">Игры</option> <option value="4">Животные</option> <option value="5">Путешествия</option> <option value="6">Танцы</option> <option value="7">Театр</option> </select> </fieldset> <input type="submit" value="Отправить"> </form> |
Когда пользователь заполнил форму и нажал “Отправить”, данные отправляются на сервер и обрабатываются (как правило, на языке PHP). После этого пользователю выдается веб-страница с результатами обработки. В минимальном варианте данные формы можно отправить на Email.
Также можете прочитать хорошую статью по HTML на английском:
Интересная статья, заставила освежить память о HTML. Доступно и просто все описано. но почему-то не пишу на нем?… Работаю на ВордПрессе, на Тильде, а можно бы им пользоваться.)
Чётко, красиво и даже не постеснялся — бы сказать изящно!
Я читала и другую литературу по этой теме. Но в этой статье очень структурировано, логично, последовательно изложено то, что надо для понимания. Спасибо.
когда начал вникать в HTML то появился вопрос а зачем тогда WORD? что можно сделать в HTML , можно сделать и в WORDE. или я неправ?
Word — это программа с очень широкими возможностями. В том числе Word позволяет сохранять документы и как веб-страницу. Выбор инструмента зависит от задачи.
Word — «это не программа», это текстовый процессор, предназначенный для создания, просмотра, редактирования и форматирования текстов статей, деловых бумаг, а также иных документов, с локальным применением простейших форм таблично-матричных алгоритмов.
Верно и микроскопом можно гвозди забивать:)