Всем привет! Формат сегодняшней статьи - обучающий. В ней мы на примере покажем и расскажем вам, что такое html. Именно с изучения этого языка гипертекстовой разметки начинает свой путь каждый веб-разработчик.
В принципе, эта информация есть в открытом доступе и найти ее не проблема, но мы постарались в рамках одной статьи собрать все самое главное - основы html.
Можно ознакомиться, а дальше уже проходить бесплатные уроки, например, на сайте школы программирования Hexlet и закреплять свои знания. Эта площадка одна из лучших для этих целей с массой бесплатных уроков и дополнительных материалов.
Что такое 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>.
Результат будет выглядеть так:
Пример минимальной веб-страницы
Создание веб-страницы на HTML называется версткой. А человек, который верстает страницы, называется верстальщиком. Верстка имеет свои правила, и сейчас мы начнем с ней знакомиться.
Чтобы создать минимальную веб-страницу, достаточно в любом текстовом редакторе написать следующий текст:
Этот текст нужно сохранить с именем index.html.
Рекомендуем использовать для этого редактор Geany. В этом редакторе есть шаблон для HTML5.
После этого веб-страницу можно открыть в любом браузере.
Строки минимальной веб-страницы означают следующее:
<!DOCTYPE html> — стандарт HTML5
<html lang=»ru»> — язык страницы русский
<head></head> — техническая информация о веб-странице
<meta charset=»utf-8″ > — кодировка UTF-8
<title>без имени</title> — Заголовок веб-страницы
<body> </body> — тело веб-страницы
</html> — завершение веб-страницы
Структура веб-страницы
Для указания на структуру используются теги:
- <header> — шапка документа
- <nav> — навигация по сайту
- <article> — статья
- <aside> — боковая панель
- <footer> — подвал
Эти теги позволяют поисковым системам более точно определять семантику сайта.
Таблицы
Таблица задается тегами:
- <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> — конец таблицы
Текст без комментариев выглядит так:
Сама таблица будет выглядеть так:
Блоки, аудио и видео
До HTML5 использовалась табличная верстка. При этом вся веб-страница представляла собой большую таблицу, а отдельные элементы размещались в ячейках.
В HTML5 рекомендуется так называемая блочная верстка. Для работы с ней используются два тега:
- <div> — блочный элемент
- <span> — строчный элемент.
По умолчанию блочные элементы начинаются с новой строки и заполняют весь контейнер, а строчные могут начинаться в любом месте строки и заканчиваются после контента.
Таблицы используются только для вывода табличных данных.
Размещение аудио.
Видео из файла.
Ролик на YouTube.
Цвета
В HTML цвет можно указать как значение RGB, используя следующую формулу:
RGB (красный, зеленый, синий)
Каждый параметр определяет интенсивность цвета от 0 до 255.
Например:
- rgb (255, 0, 0) — красный.
- rgb (0, 0, 0) — черный.
Цветовые значения RGBA являются расширением цветовых значений RGB с альфа-каналом, который определяет непрозрачность для цвета.
Стандартные названия цветов: https://colorscheme.ru/html-colors.html
Формы в html
Формы используются для получения данных от пользователя. Тег form является контейнером для управляющих элементов.
Пример простой формы:
Для получения данных используется тег <input>:
- флажки <input type=»checkbox»>
- радиокнопки — <input type=»radio»>
- ввод текста — <input type=»text»>
- пароль — <input type=»password»>
- отправить форму — <input type=»submit»>
и многое другое.
Поля формы можно разделять на логические блоки с помощью элемента <fieldset>. Каждому разделу можно присвоить название с помощью элемента <legend>.
Обязательные для заполнения поля обозначаются атрибутом required. В полях выбора можно сразу установить выбор атрибутом checked.
Для создания больших текстовых полей применяется элемент <textarea>. Размеры поля устанавливаются с помощью атрибутов cols и rows. В поле можно использовать замещающий текст placeholder, который исчезает, как только пользователь начинает ввод текста.
Пример формы с группировкой данных:
Когда пользователь заполнил форму и нажал “Отправить”, данные отправляются на сервер и обрабатываются (как правило, на языке PHP). После этого пользователю выдается веб-страница с результатами обработки. В минимальном варианте данные формы можно отправить на Email.
Как стать веб-разработчиком
Хотите большего? В последнее время на рынке IT произошли существенные изменения. Из-за текущего кризиса многие специалисты уехали из страны. Но потребность в них никуда не делась, так как многие компании продолжают активно развивать это направление, и им в любом случае нужны новые кадры.
И если вы давно присматривались к профессии веб-разработчика, но пока не решались ее изучать, то сейчас самое время. Тем более что и так небольшая конкуренция в этой отрасли сейчас стала гораздо меньше.
Хотите получить профессию, которая котируется во всем мире и хорошо оплачивается? Самый быстрый способ, это окончить курсы в одной из онлайн-школ. Вот несколько достойных вариантов:
- Htmlacademy — лучший и самый дешевый из вариантов, если нужно изучать фронтенд. Есть много бесплатных тренажёров и прочих полезных штук.
- Расширенный 2-годичный курс от Нетологии. Полная альтернатива вузовскому обучению.
Ну или есть более долгий путь. Нужно окончить ВУЗ по специальностям «Прикладная математика и информатика» или «Информационные системы и технологии».
Одним из самых главных преимуществ профессии является то, что разработчик может работать удаленно из любой страны. Это особенно важно в современном нестабильном и постоянно меняющемся мире.
Подписывайтесь на наш телеграмм, в котором мы публикуем анонсы новых курсов, новости, акции и скидки на обучении более чем 50 российских онлайн-школ и вы всегда будете в курсе того, что происходит на российском рынке онлайн-образования!
Реклама. Информация о рекламодателе доступна по ссылкам в статье.
