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

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

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

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

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

В данном примере мы разметили текст тегом 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>.

Результат будет выглядеть так:

2. Минимальная веб-страница

Создание веб-страницы на 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> — конец таблицы

Текст без комментариев выглядит так:

Сама таблица будет выглядеть так:

 

5. Блоки, аудио и видео

До HTML5 использовалась табличная верстка. При этом вся веб-страница представляла собой  большую таблицу, а отдельные элементы размещались в ячейках.

В HTML5 рекомендуется так называемая блочная верстка. Для работы с ней используются два тега:

  • <div> — блочный элемент
  • <span> — строчный элемент.

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

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

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

 

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

Ролик на YouTube

6. Цвета

В HTML цвет можно указать как значение RGB, используя следующую формулу:

RGB (красный, зеленый, синий)

Каждый параметр определяет интенсивность цвета от 0 до 255.

Например:

  • rgb (255, 0, 0) — красный.
  • rgb (0, 0, 0) — черный.

Цветовые значения RGBA являются расширением цветовых значений RGB с альфа-каналом, который определяет непрозрачность для цвета.

Стандартные названия цветов: https://colorscheme.ru/html-colors.html

7. Формы

Формы используются для получения данных от пользователя. Тег 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, который исчезает, как только пользователь начинает ввод текста.

Пример формы с группировкой данных:

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

 

 

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

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

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

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.