Знание 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> — подвал сайта, обычно дублирует важное меню, телефоны, контакты

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

Полезная статья?
(Нет голосов)
Вам также могут понравиться
Авторизация на сайте при помощи Вконтакте

Авторизация на сайте при помощи Вконтакте

Большинство социальных сетей позволяют использовать свои API для авторизации пользователей на сайте имеющих аккаунт в данной социальной сети. В статье рассмотрен способ авторизации при помощи API вконтакте.ру.

Исключения в PHP, что это и как ими пользоваться

Исключения в PHP, что это и как ими пользоваться

В этой статье вы узнаете что такое исключения в PHP и как их использовать для обработки ошибок. Начиная с PHP версии 5.0 стала доступна новая модель обработки ошибок, так называемые исключения. Она позволяет более гибко и информативно для пользователя обрабатывать не стандартные ситуации в работе вашего приложения. 

Загрузка файлов на сервер средствами PHP

Загрузка файлов на сервер средствами PHP

На данный момент загрузка файлов является одной из необходимых функций любого сайта, будь то загрузка изображения в профиль пользователя, отправка документов при регистрации, размещение прайс листов, создание галереи и т.д. В статье пойдёт речь о реализации загрузки различных файлов на сервер средствами PHP.


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