Язык разметки HTML

В основе Интернета лежит язык разметки HTML. В этой статье мы рассмотрим основы HTML.

1. Что такое HTML?

Язык HTML (HyperText Markup Language — язык разметки гипертекста) — это язык для обозначения элементов веб-страницы. Это не язык программирования, поэтому любой может его освоить. Суть языка в том, что нужно исходный текст разметить специальными метками — тегами.

Например, тег параграфа выглядит так:

<p>Пример параграфа</p>

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>.

<h1>Заголовок уровня 1</h1>
<h2>Заголовок уровня 2</h2>
<h3>Заголовок уровня 3</h3>
<h4>Заголовок уровня 4</h4>
<h5>Заголовок уровня 5</h5>
<h6>Заголовок уровня 6</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>

<!DOCTYPE html>

<head>

<title>без имени</title>

</head>

<body>

</body>

</html>

Этот текст нужно сохранить с именем index.html.

Рекомендую использовать для этого редактор Geany. В этом редакторе есть шаблон для HTML5.

После этого веб-страницу можно открыть в любом браузере.

Строки минимальной веб-страницы означают следующее:

<!DOCTYPE html> — стандарт HTML5

<html lang=»ru»> — язык страницы русский

<head></head> — техническая информация о веб-странице

<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>

<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> — строчный элемент.

По умолчанию блочные элементы начинаются с новой строки и заполняют весь контейнер, а строчные могут начинаться в любом месте строки и заканчиваются после контента.

Таблицы используются только для вывода табличных данных.

Размещение аудио.

<audio src="sound.mp3" controls></audio>

1	<audio src="sound.mp3" controls></audio>

Видео из файла.

<video src="car.mp4" width="400" height="300" controls></video>

1	<video src="car.mp4" width="400" height="300" controls></video>

Ролик на YouTube

<iframe width="560" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY" frameborder="0" 
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>&nbsp;

</iframe>

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 является контейнером для управляющих элементов.

Пример простой формы:

<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>

Имя:<br>

Фамилия:<br>

</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>

<legend>Личная информация:</legend>

Имя:<br>

Фамилия:<br>

</fieldset>

<legend>Ввод пароля:</legend>

Введите пароль:<br>

Повторите пароль:<br>

</fieldset>

<legend>Интересы:</legend>

<p>Любимые музыкальные жанры</p>

<ol>

<li><input type="checkbox" name="musik" value="кантри">Кантри</li>

</ol>

<p>Хобби</p>

<option selected value="1">Спорт</option>

<option value="2">Рыбалка</option>

<option value="4">Животные</option>

<option value="5">Путешествия</option>

<option value="6">Танцы</option>

<option value="7">Театр</option>

</select>

</fieldset>

</form>

Когда пользователь заполнил форму и нажал “Отправить”, данные отправляются на сервер и обрабатываются (как правило, на языке PHP). После этого пользователю выдается веб-страница с результатами обработки. В минимальном варианте данные формы можно отправить на Email.

Также можете прочитать хорошую статью по HTML на английском:

Learn HTML Free in [2022] – Basic HTML Codes for Beginners

Комментарии 6

Вик

21.10.2020 в 06:09

Интересная статья, заставила освежить память о HTML. Доступно и просто все описано. но почему-то не пишу на нем?… Работаю на ВордПрессе, на Тильде, а можно бы им пользоваться.)

Ответить
Валерий

21.10.2020 в 14:11

Чётко, красиво и даже не постеснялся — бы сказать изящно!

Ответить
Виктория

21.10.2020 в 15:10

Я читала и другую литературу по этой теме. Но в этой статье очень структурировано, логично, последовательно изложено то, что надо для понимания. Спасибо.

Ответить
Чернов Николай

21.10.2020 в 18:06

когда начал вникать в HTML то появился вопрос а зачем тогда WORD? что можно сделать в HTML , можно сделать и в WORDE. или я неправ?

Ответить
- Константин Шереметьев
  
  22.10.2020 в 18:27
  
  Word — это программа с очень широкими возможностями. В том числе Word позволяет сохранять документы и как веб-страницу. Выбор инструмента зависит от задачи.
  
  Ответить
Vitaliy Sharafan

23.10.2020 в 18:43

Word — «это не программа», это текстовый процессор, предназначенный для создания, просмотра, редактирования и форматирования текстов статей, деловых бумаг, а также иных документов, с локальным применением простейших форм таблично-матричных алгоритмов.
Верно и микроскопом можно гвозди забивать:)

Ответить