Не пропусти свежие посты, подпишись:

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

Что такое HTML?

HTML (HyperText Markup Language) — язык гипертекстовой разметки. По сути это инструмент при помощи которого на заре интернета и компьютерных сетей, когда не было таких программ как WORD и EXCEL, люди оформляли электронные документы в одной из лабораторий ядерной физики в США. Придумал его Тим Бернерс-Ли в начале 90-х годов. Позже, когда стал зарождаться интернет в том виде, в каком мы его сейчас знаем, язык HTML пришёлся как нельзя кстати, т.к. был простой, удобный и легкий в освоении, даже для людей ничего не смыслящих в IT.

Как устроена HTML страница

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

Что из себя представляет тег?

Большая часть тегов имеет открывающий и закрывающий тег. При этом контент находящийся внутри тега будет как-то интерпретирован браузером (например изменится шрифт).

Структура тега

Обратите внимание на косую черту — так обозначают закрывающий тег, если тег не закрыть, браузер попытается сделать это самостоятельно, но как показывает практика, это приводит к ошибкам и кривой вёрстке. Внимательно следите за закрывающими тегами! Пример простого тега:


<b>жирный текст</b> <!-- браузер отобразит текст внутри тега полужирным шрифтом -->

Атрибуты HTML-тегов

Большая часть доступных в HTML тегов, могут иметь атрибуты. Атрибут это свойство так или иначе влияющее на отображение или поведение тега при взаимодействии с пользователем.

Атрибуты тега

Приведём пример:


<!-- Тег a - ссылка, с атрибутом href значением которого является адрес сайта yandex.ru -->
<a href="yandex.ru">Перейти на сайт yandex.ru</a>


<!-- Тег a - ссылка, с атрибутом href значением которого является указатель на блок в рамках текущей страницы -->
<a href="#element">Перейти к разделу страницы element</a>

Как видите, один и тот же тег, в зависимости от атрибутов и из значений, может вести себя по разному. В первом случае при клике на ссылку, вы перейдёте на сайт yandex.ru, во втором случае, браузер промотает экран до элемента с идентификатором равным element.

Про HTML 5

Как и любой широко распространённый язык, HTML имеет свои стандарты, это нужно для того, чтобы в веб-разработке не воцарился хаос, а все браузеры в мире (которых на данный момент, только популярных уже больше десятка) однообразно интерпретировали код написанный для HTML страницы. Стандарт языка HTML 5 был введён несколько лет назад и одной из ключевых его фишек было введение дополнительных, так называемых семантически-значимых тегов.

Раньше такими тегами были только заголовки h1-h6, однако в HTML 5 добавили следующий ряд тегов, при помощи которых мы можем лучше структурировать нашу HTML страницу и помочь поисковым системам правильно распознать элементы на ней.

  • <header>…</hrader> — область шапки страницы или заголовка
  • <nav>…</nav> — навигационное меню
  • <article>…</article> — основной текстовый материал, статья
  • <section>…</section> — раздел статей или раздел внутри статьи
  • <aside>…</aside> — блок в стороне от контента, содержит ссылки на рубрики, облако меток и т.п.
  • <footer>…</footer> — подвал сайта, обычно дублирует важное меню, телефоны, контакты

Мы рассмотрим детальнее использование этих тегов в последующих статьях.

Не пропусти свежие посты, подпишись:
Полезная статья?
(Голосов: 1, Рейтинг: 3.3)
Курсы от партнёров
Хотите освоить востребованную профессию? Воспользуйтесь предложениями от наших партнёров. Пройдите учебный курс по одному из популярных IT направлений.

Все курсы партёнров
Вам также могут понравиться
Кем можно работать в сфере веб-разработки

Кем можно работать в сфере веб-разработки

Хотите начать работать в сфере веб-разработки, но не знаете с чего можно начать? Читайте описание самых популярных веб-профессий, с их описанием, обязанностями и ориентировочными зарплатами.

CSS курсоры

CSS курсоры

В статье рассмотрены возможности изменения курсоров пользователя при помощи CSS

Работа с регистром строк в php

Работа с регистром строк в php

В статье рассмотрены примеры работы с регистром строк в языке PHP, проверка регистра, изменение, инверсия


Комментарии
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке