Программирование HTML для начинающих

Язык программирования HTML, или язык гипертекстовой разметки, отвечает за структуру страницы сайта. Изначально он создавался для обмена научной и технической информацией. HTML задумывался для создания и форматирования структуры документа. Информация должна была одинаково отображаться в различных браузерах, поэтому в Консорциуме Всемирной паутины W3C разработали единый стандарт языка HTML, куда входит описание допустимых тегов и особенности их использования. Текущая версия стандарта – HTML5.1. Все современные браузеры стремятся к поддержке актуальных стандартов.

Из чего состоит язык HTML

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

Каждая веб-страница наполняется контентом – текстами, изображениями и интерактивными элементами. Текст на странице должен легко читаться пользователем, поэтому нужна структура: выделение заголовков, разделение на абзацы, цитаты, расстановка акцентов на смысловых частях, наличие списков для удобства восприятия информации. Язык программирования HTML оформляет эти элементы при помощи специальных меток – тегов. Эти метки могут быть одиночными или парными.

Способ написания тегов

Каждый тег состоит из открывающей и закрывающей треугольной скобки, между которыми находится его буквенное значение. Например, для задания адреса ссылки используется тег <a>. Названием тега чаще всего становится сокращение от названия его функции на английском языке. Всего их около 100. Программирование HTML для начинающих не включает в себя обязательного требования знать все. Наиболее часто в разметке используется не более 20% всех существующих тегов.

Парные теги

Веб-страница состоит из информации, которая должна быть представлена в удобном для пользователя виде. При HTML-программировании с нуля важно это учитывать. Специальные теги для разметки и структурирования текста облегчают визуальное восприятие большого объема информации. С их помощью выделяют смысловые разделы, расставляют акценты и упрощают понимание текста. Например, парный тег <p> выделяет параграф или абзац. Он состоит из открывающей и закрывающей части. Первая часть располагается в начале выделяемого элемента, а вторая – в конце. В закрывающем теге перед буквенной частью ставится знак «/». Правильное написание тега параграфа выглядит так: <p>абзац</p>. Контент, заключенный в тег <p>, выделяется отступами. Для выделения длинных цитат применяется парный тег <blockquote>. У него есть свое визуальное оформление – вокруг элемента создаются отступы, сам текст заключается в кавычки. Важный участок контента, на котором делается акцент, выделяют при помощи тега <strong>.

Одиночные теги и комментарии

Парные теги используются для выделения участков текста, а при помощи одиночных добавляются декоративные объекты, например, картинки. У одиночных тегов нет закрывающей части. До появления нового стандарта HTML5 после букв ставился знак «/». Но теперь использование слэша стало необязательным. Одиночные теги применяются для элементов оформления. Например, тег <hr> - одиночный, применяется для разрыва строки и переноса элемента на новую строку. Тег <hr> встречается при разметке стихов и песен. При программировании сайта HTML, используют специальный тег, который помогает скрыть часть кода – комментарий. Закомментированный код не отображается браузером, что удобно использовать для проверки работоспособности того или иного участка разметки. Комментарий записывается так: <!-- текст -->.

Особенности разметки заголовков

Для выделения в тексте заголовков различного уровня в HTML-программировании применяются парные теги от <h1> до <h6>. Тегом <h1> размечают заголовок первого уровня – самый крупный и чаще всего единственный на странице. Он определяет смысл сайта. Остальные теги используют для разметки подзаголовков. Чем больше цифра в теге, тем меньше будет размер заключенного в нем текста. Раньше присутствие нескольких тегов <h1> в документе считалось недопустимым, но с появлением новых стандартов это уже не критическая ошибка. Единственное замечание: тег <h1> не стоит использовать для увеличения шрифта простого текста. Для изменения размеров шрифта применяется CSS. Язык CSS состоит из селекторов и свойств. Селектор выбирает элемент на странице, а свойство описывает эффект, который к нему применяется. Подзаголовки выделяются тегами <h2>.

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

Иногда браузеру необходимо сообщить дополнительную информацию о содержимом тега или задать ему дополнительные свойства. Например, для того, чтобы изображение появилось на странице, нужно указать ссылку на него. Для этой цели используются атрибуты тегов. Они задаются в открывающем теге через пробел и состоят из двух частей: названия и значения, и никак не выделяются на странице. Значение атрибута записывается после символа «=» в двойных кавычках. Например, для тега цитаты используется два: class и cite, а для ссылок – href.

Атрибуты class и id

Атрибут class – универсальный и очень часто применяется в верстке. Он может задаваться всем существующим тегам в языке HTML. Классы используются для описания свойств элементов при помощи CSS. Атрибут cite используется только для тега <blockquote>. Его значение - источник цитаты. Cite сообщает поисковым системам, кто автор изречения. Другой распространенный атрибут – id или идентификатор, который также используется при оформлении элементов при помощи CSS. Они также универсальны и применяются к любым тегам, но создание селекторов по id считается плохим тоном в верстке. Идентификатор может быть на странице только один, поэтому в коде ему будет присваиваться наибольшая специфичность. Атрибуты class и id похожи по описанию и действию, но служат для абсолютно разных целей. Id помогает задать тегу уникальное имя, на которое затем можно ссылаться. Атрибут Class - один из самых важных для языков программирования HTML и CSS. С его помощью в CSS применяются стили. Классов у тега может быть несколько, они задаются через пробел и помогают управлять внешним видом элемента.

Атрибуты для ссылок и изображений

Ссылка задается парным тегом <a> с атрибутом href, в котором прописывается адрес, куда она должна вести. На странице можно разместить ссылку со значением атрибута href, в котором будет прописан id элемента. Значение указывается через знак #: <a href=”#значение_id”>Название ссылки</a>. Такие ссылки называются якорными. С их помощью можно переместиться в определенную область внутри одной страницы. Для одиночного тега вставки изображений <img> обязательными атрибутами являются src и alt. Первый задает путь к картинке, а второй – ее описание, которое отображается браузером, если она не загрузилась.

Простейшая структура HTML-страницы

Каждая страница, написанная на языке программирования HTML, начинается с декларации типа документа или «доктайпа». Она используется браузером для определения версии HTML. В новой спецификации «доктайп» выглядит так: <!DOCTYPE html>. Ранее использовалась более сложная запись. Далее на странице располагаются как минимум три основных тега:

• <html> - контейнер для содержимого страницы;
• <head> - хранилище информации, которая облегчает браузеру работу с данными;
• <body> - хранилище контента страницы.

В теге <head> находится <title> - заголовок страницы, отображающийся во вкладках браузера, и семейство тегов <meta> с различными атрибутами, в которых записывается имя кодировки, описание ключевых слов и содержимого страницы. Вся эта информация необходима браузеру и помогает поисковым системам находить нужные страницы, соответствующие запросам пользователей.