HTML – это язык разметки гипертекста. Он сделал интернет таким, каким мы его знаем. Благодаря этому инструменту сайты выглядят современно и красиво. Также HTML обеспечивает удобство использования сайтов. Язык HTML позволяет компоновать элементы веб-страницы в варианте, удобном для пользователя. Работу данного языка разметки волне можно сравнить с тем, что делают текстовые редакторы вроде Open Office или MS Word. Эти редакторы превращают в документ безликую несвязанную массу букв. То же самое делает язык разметки гипертекста HTML.Разница заключается только в том, что документы этого языка отображаются в браузере. К тому же возможности HTML намного шине, чем у обычного текстового редактора. Для разметки применяются теги. Это специальные команды, которые описывают структуру веб-страницы. Теги заключаются в угловые скобки <>, чтобы браузер мог различить их в общей массе текста. Далее мы рассмотрим основы языка разметки HTML.
Визуальные редакторы
Новички, которые только начинают изучать язык HTML, часто начинают свою работу с программ, которые позволяют создавать сайты без наличия каких-либо специальных знаний. В таких программах, можно просто расположить элементы на экране таким образом, как они должны отображаться в окне браузера. На первый взгляд может показаться, что это именно то, что нужно. Данный способ позволяет избежать необходимости использовать услуги веб-разработчиков. Но на самом деле у визуальных редакторов имеется множество недостатков, которые делают их использование в серьезных проектах невозможным. Данные программы создают множество ненужных тегов, которые делают конечный вариант страницы неоптимальным и громоздким. В наш век скоростного интернета это имеет меньшее значение, чем раньше. Однако есть ряд причин, по которым грамотно написанный лаконичный сайт получается более практичным, чем его собрат, разработанный при помощи визуального редактора. Веб-страницы, выполненные в таких программах, будут плохо обрабатываться поисковыми роботами. Для них имеет значение каждый килобайт кода, а нелогичный громоздкий код с кучей ошибок вряд ли им придется по вкусу. Кроме того, визуальные редакторы довольно часто отстают от времени. Они быстро становятся неактуальными. Тратить ресурсы на их развитие нецелесообразно, поскольку ни один профессиональный разработчик не пользуется такими продуктами. По этой причине каждый, кто хочет работать в области создания интернет-сайтов, должен разбираться в основах HTML.
Теги
Как уже было упомянуто выше, теги используются для описания структуры веб-страницы в браузере. Большинство из них имеют открывающий и закрывающий тег, но не все. Так, например, <title>…</title>, вместо точек находится содержимое. Первый тег указывает на то, где начинается тег, а второй его закрывает. Внутри также могут находится и другие элементы разметки страницы. Они могут быть вложены друг в друга, как матрешки. Здесь важно вовремя закрывать теги, чтобы страница корректно отображалась. Также встречаются и одиночные теги. Их закрывать не нужно. Содержимое в них находится внутри, так же, как и атрибуты. Атрибут может прописываться для большинства тегов. Он задает свойства элемента. Атрибут обозначается в отрывающем теге. Выглядит он следующим образом: атрибут= «…». Вместо точек должно быть указано значение атрибута. Знание тегов является важным шагом на пути освоения языка разметки HTML. Знание основ этого искусства предполагает понимание структуры веб-страницы.
Структура документа
Любой HTML документ имеет соответствующее расширение, например, html или index. Таким образом браузер сможет понять, с чем ему придется иметь дело и в результате отобразит страницу правильно. Все страницы, которые используются для создания сайта, рекомендуется хранить в одной директории. Это в дальнейшем может существенно облегчить вам жизнь. Знание основ языка разметки гипертекста HTML предполагает понимание структуры документа. Она начинается с тега, который сообщает браузеру используемую версию HTML — <!doctype html>. На данный момент актуальной является пятая версия языка HTML. В данном случае ничего не нужно выдумывать, достаточно просто вставить приведенный выше тег в начало страницы. Потом следуют основные парные структуры, которые составляют скелет сайта. Первый тег — <html>… </html>, в него должны быть вложены все остальные. Все, что находится за пределами этого тега, не будет распознаваться браузером как веб-страница. Данный тег открывает документ и закрывает его. Для любого документа данный тег является обязательным. Также в нем содержатся еще несколько обязательных тегов. Ниже мы рассмотрим их.
Head
Внутри тега <head>…</head> расположена информация технического характера. На странице она отображаться не будет. Однако данный элемент является важной частью документа HTML. Именно здесь закладываются основы сайта. Тут выбирается кодировка и заносится название страницы. Оно должно обязательно содержаться внутри тега. Название будет отображено в верхней части браузера. Также здесь можно будет разместить небольшую иконку, которая характеризует содержимое страницы. Для корректного отображения документа желательно сразу указывать его кодировку. Это делает при помощи тега <metacharset=”UTF-8”/>. Обычно метатеги располагаются внутри head. Они предоставляют данные о структуре страницы.
Link
Знание основ языка разметки HTML предполагает применение каскадных стилей оформления. По-другому они называются css. Здесь задаются свойства элементов, которые будут отображаться на странице. В современном подходе предполагается вынесение таких характеристик, как высота, цвет и месторасположение элемента, во внешний файл. Для подключения файлаcss используется тег <link/>. Это будет выглядеть следующим образом <linkhref=”style.css” type=”text/css»/>. Здесь type указывает на тип файла, а href – на его местоположение.
Body
В этой части документа HTML создается видимая часть интернет-страницы. Все, что происходит внутри тела, будет отображено в окне браузера. В <body> используется большое количество html тегов. В основном они используются для форматирования текста и работы с ссылками. Также это могут быть простейшие документы, предназначенные для структурирования веб-страницы. Чтобы приступить к работе с языком разметки HTML, необходимо иметь представление об основных тегах и уметь пользоваться ими. Далее приведены некоторые наиболее популярные теги.
— <span> — используется для выделения подстроки, на которую будет действовать стиль, описанный в css;
— <a> — используется для создания ссылки на веб-странице. Для задания адреса перехода используется атрибут href;
— <div> — является одним из самых популярных тегов современности. Любой, кто желает изучить основы языка HTML, должен уделить этому тегу особое внимание. Он представляет собой блочный документ, на основе которого выполнена львиная доля всех современных веб-сайтов;
— <p> — данный тег используется для выделения абзаца из текста. Все содержимое абзаца располагается между открывающими и закрывающими тегами;
— <ol> — данный тег используется для создания нумерованного списка. Элементы списка заключаются в парный тег <li>;
— <ul> — используется для создания маркированного списка, в котором для обозначения элементов используется тег <li>;
— <h1> — <h6> — теги, предназначенные для создания заголовков документа. В данном случае цифра обозначает уровень заголовка. h1 означает главный заголовок. Все последующие являются подзаголовками. Следует отметить, что на странице может быть только один заголовок типа <h1>.
— <strong> — используется для создания жирного текста;
— <em> — используется для написания текста курсивом;
— <img /> — используется для вставки на интернет-страницу картинки;
— <video> — используется для вставки на веб-страницу видео;
— <audio> — используется для вставки в документ аудио-файла.
Здесь приведены далеко не все теги, которые необходимы для создания собственной веб-страницы. Однако перечисленных выше тегов будет вполне достаточно для того, чтобы заложить основы знания языка разметки HTML.