Что такое ХэТэМэЭл (HTML)?

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


Язык программирования HTML

По своему назначению HTML является языком программирования. Его аббревиатура так и расшифровывается: HyperText Markup Language. Т.е. «язык гипертекстовой разметки».

Рассмотрим на примере.

Допустим, Ваня Иванов затеял сделать интернет-страничку, на которой расскажет про себя. но сначала Ваня провёл подготовительную работу. Написал про себя небольшое эссе в текстовом редакторе и сделал приличную фотку в штанах и галстуке. Кроме того Ваня — талантливый веб-дизайнер. И он хочет разместить на странице ссылки с примерами своих работ. И совсем круто: Ваня снял небольшое приветственное видео, в котором обращается к посетителям своего сайта. Ролик «залил» на Ютуб.

Что имеет Ваня? Ворох разнородной информации. Эссе (текст), фотография, видео-ролик на ютубе, ссылки. Вся эта «каша» должна быть распределена по страничке равномерно и удобочитаемо. К тому же надо ещё как-то объяснить браузеру в каком месте страницы должна находится фотография, а в каком ссылки.

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

Готовый код страницы Ваня разместил на сервере в виде простого текстового документа. Любой пользователь может прочесть этот документ с помощью браузера.

Когда документ с HTML-кодом попадает в браузер с ним происходит вот что. Браузер считывает код и построчно выполняет все команды, которые встречает. Встретил команду «Написать заголовок такого-то цвета и такого-то размера» — Выведет заголовок на экран. Следующая команда — «отобразить такой-то текст». И браузер под заголовком старательно напишет то самое эссе, которое Ваня посвятил самому себе.

Далее появляется фотография.

Теперь стоит строка с кодом видео на ютубе. И браузер выводит на экран видеоплеер. Стандартное окошко, которое все встречали в интернете. Завершается HTML-код Списком активных ссылок, ведущих на сайты, которые Ваня сделал в качестве веб-мастера.

Таким образом каждый браузер формирует любую интернет-страницу из того HTML-кода, который он получает из интернета.

HTML-код является своего рода компьютерной программой, которую исполняет браузер. В результате исполнения программы мы видим на экране вэб-сайты. И можем интерактивно взаимодействовать с сайтами: скроллить, переходить по ссылкам и т.д

HTML-тэги


Команды языка HTML называется тэгами. Тэги записываются в треугольных скобках <>. Тэги бывают парными и непарными.

Например, тэг <p> — означает: «вывести на экран текст». Этот тэг парный и имеет закрывающий тэг </p>.

Записывается комбинация из этих тэгов вот так:

d185d182d0bcd0bb1

В результате выполнения этого нехитрого HTML-кода на экране компьютера появится приветственная надпись, заключённая между тэгами.

d185d182d0bcd0bb2

Всё, что заключено между парными тэгами относится к этому самому тэгу. Без закрывающего тэга надпись не появится.

Основная масса тэгов являются парными. Непарных тэгов меньшинство. Например, тэг <br> — означает «перевод строки». Он вставляет в текст пустую строчку

d185d182d0bcd0bb3

Код исполнится вот так

d185d182d0bcd0bb4

структура HTML-страницы


Мы рассмотрели крооошечный фрагмент HTML-кода. Но настоящие программы на HTML гораздо больше. Существует определённый стандарт написания HTML-кода для всей страницы.

Каждая страница начинается надписью, обозначающей язык программирования, на котором написана страница.

d185d182d0bcd0bb6

Общая схема построения HTML-страницы выглядит так:

d185d182d0bcd0bb5

два последних закрывающих тэга закрывают тэги, которые мы открывали вначале страницы. Если тэги не закрыть, то страница не будет работать.


Надо ли знать HTML наизусть


Существует, как минимум, полторы сотни HTML-тэгов. Для каждого тэга существуют атрибуты. Для каждого атрибута можно задавать несколько различных параметров. Итого, в совокупности язык HTML насчитывает несколько сотен команд. Знать их все наизусть не нужно. Для работы с этим языком программирования достаточно знать 20−30 самых употребимых тэгов. И ещё необходимо уметь ориентироваться в структуре страницы и в принципах работы с языком программирования. Значение незнакомых тэгов, или атрибутов к ним можно уточнить в справочнике HTML. Таких справочников в интернете — множество. Яндекс Вам в помощь.

Язык HTML очень простой и зубрить наизусть его не надо. По ходу работы что-то выучится само.


Оставить комментарий

Яндекс.Метрика