В основе Интернета лежит язык разметки HTML. В этой статье мы рассмотрим основы HTML.
1. Что такое HTML?
Язык HTML (HyperText Markup Language — язык разметки гипертекста) — это язык для обозначения элементов веб-страницы. Это не язык программирования, поэтому любой может его освоить. Суть языка в том, что нужно исходный текст разметить специальными метками — тегами.
Например, тег параграфа выглядит так:
<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>.
<h1>Заголовок уровня 1</h1>
<h2>Заголовок уровня 2</h2>
<h3>Заголовок уровня 3</h3>
<h4>Заголовок уровня 4</h4>
<h5>Заголовок уровня 5</h5>
<h6>Заголовок уровня 6</h6>
Результат будет выглядеть так:
2. Минимальная веб-страница
Создание веб-страницы на HTML называется версткой. А человек, который верстает страницы называется верстальщиком. Верстка имеет свои правила и сейчас мы начнем с ней знакомиться.
Чтобы создать минимальную веб-страницу достаточно в любом текстовом редакторе написать следующий текст:
<!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> — конец таблицы
Текст без комментариев выглядит так:
<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>
6. Цвета
В HTML цвет можно указать как значение RGB, используя следующую формулу:
RGB (красный, зеленый, синий)
Каждый параметр определяет интенсивность цвета от 0 до 255.
Например:
- rgb (255, 0, 0) — красный.
- rgb (0, 0, 0) — черный.
Цветовые значения RGBA являются расширением цветовых значений RGB с альфа-каналом, который определяет непрозрачность для цвета.
Стандартные названия цветов: https://colorscheme.ru/html-colors.html
7. Формы
Формы используются для получения данных от пользователя. Тег form является контейнером для управляющих элементов.
Пример простой формы:
<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, который исчезает, как только пользователь начинает ввод текста.
Пример формы с группировкой данных:
<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.