Знание 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С Битрикс

Пользовательский тип свойств инфоблока в 1С Битрикс

В дополнение к статье о создании собственного типа пользовательских полей хочу рассказать как делать аналогичные свойства для информационных блоков, т.к. эти свойства относятся к другому модулю, а именно «информационные блоки» (iblock).

Условные операторы в PHP

Условные операторы в PHP

Добрались до логики выполнения программы. И так условные операторы (по другому операторы ветвления) позволяют нам организовать определённое поведение программы в зависимости от входных параметров (данных вводимых пользователем, результатом работы вспомогательных функций). Вся логика в языках программирования основана на Алгебре Буля. 

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

Самые читаемые

Тонкая настройка SEO для результатов фильтрации каталога битрикс

Тонкая настройка SEO для результатов фильтрации каталога битрикс

Одним из преимуществ интернет-магазинов на 1С Битрикс на мой взгляд является наличие не так давно до...

Основы SEO оптимизации сайта

Основы SEO оптимизации сайта

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

Собственный тип пользовательских полей в 1С Битрикс

Собственный тип пользовательских полей в 1С Битрикс

Для решения некоторых задач порой не хватает стандартного набора пользовательских полей поставляемых...