6566 подписчиков

Как работает веб-сайт #6: Основы HTML

22 декабря 202022 дек 2020

381

7 мин

Предыдущие части: Виртуальные хосты, IP-адреса и DNS, Ставим Apache, Порты и сокеты, Введение

Наш веб-сервер готов к разработке. Пора сделать несколько страниц сайта, но для этого нужно немного изучить язык гипертекстовой разметки HTML.

Почему "немного"? Потому что, во-первых, это достаточно простой язык, и мы сейчас изучим его основные принципы, что покроет 90% всех нужд. Всё остальное вы сможете получить, просто открыв справочник по HTML. Это не язык программирования, а язык разметки (вёрстки), поэтому сложности и глубины в нём нет.

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

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

То есть, мы запросили с сервера один HTML-документ. Это текст. Мы его читаем. Но в тексте есть ссылка на другой документ. Например, мы просматриваем файл index.html, а в нём содержится ссылка на файл news.html. Мы могли бы получить news.html с сервера, набрав имя файла в адресной строке браузера:

http://test/news.html

Собственно говоря, ссылка и содержит этот адрес. Просто его не надо вписывать руками, а достаточно кликнуть по ссылке, и тогда браузер сам запросит этот файл.

Вот это маленькое изобретение позволило связать вместе много документов. И переходить от документа к документу, нажимая на ссылки. Вместо отдельных документов получился как бы один большой документ, у которого все части связаны друг с другом через ссылки. Ссылки можно делать не только на страницы своего сайта, но и на страницы других сайтов. Именно поэтому такой текст получил название "гипертекст" – это больше, чем просто текст.

Всё остальное является лишь украшательством.

Как индексируют сайты

Вы, наверное, слышали про роботов, которые индексируют сайты. Это скрипты, которые делают запросы на сайты с целью сбора информации о них. Первоначально робот не знает, какие документы лежат на сайте, поэтому он делает запрос без имени файла. Сайт отдаёт ему содержимое index.html или другого файла, который у него настроен как главный. Получив этот файл, робот просматривает его и ищет ссылки на другие документы. Обнаружив ссылку, он делает запрос по ней, получает ещё один файл, ищет ссылки в нём, и т.д. Таким образом робот обходит все доступные на сайте ссылки и получает список всех его страниц для индексирования в поисковых системах.

Отметим, что если на сайте лежит документ, но на него ниоткуда нет ссылки, этот документ роботы не увидят. К нему можно получить доступ только вручную, заранее зная имя файла.

Сайты, которые хотят, чтобы их получше индексировали, имеют специально для этой цели страницу – карту сайта. Она содержит ссылки на все страницы сайта.

Как же выглядит ссылка в HTML?

Язык HTML это подвид языка XML, где используются т.н. "тэги" (элементы разметки). Тэг – это специальное слово, которое трактуется браузером как команда что-то сделать или нарисовать. Чтобы тэги можно было отличить от обычного текста, их записывают в угловых скобках. Например, тэг <a> это ссылка,  это жирный шрифт, <img> это изображение, и т.д.

Область действия тэгов

Тэги имеют область действия. Весь текст, который записан после тэга, попадает в его область действия. Чтобы прекратить область действия тэга, нужно его закрыть. Для этого пишется такое же имя тэга, только с косой чертой: </a>, .

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

нежирный жирный

А браузер покажет это так:

нежирный жирный

Объединение тэгов

Если внутри области действия одного тэга добавить ещё один тэг, то они оба начнут оказывать эффект на текст. А если ещё один, то все три, и т.д.

Например,  это жирный,  это курсив,  это подчёркнутый. Чтобы получить жирный подчёркнутый курсив, я использую все три тэга:

жирный подчёркнутый курсив

Браузер показывает это так (Дзен не позволяет, поэтому картинкой):

Вложенность тэгов

Обратите внимание, что тэги открываются в таком порядке:

А закрываются в таком:

Они вложены друг друга как матрёшки: в область тэга  вложен тэг , а в область тэга  вложен тэг . Так как  открывался последним, то закрыться он должен первым. Думаю, что это правило интуитивно понятно. Всё, что попадает в область тэга , будет жирным, всё, что попадает в область тэга , будет курсивом, и всё, что попадает в область тэга , будет подчёркнутым.

Вот, вы уже знаете почти всё про HTML. Осталось немного.

Атрибуты тэгов

Рассмотренные выше тэги не имеют атрибутов. Например, тэг  просто делает текст жирным, и ничего другого от него ждать нельзя.

А вот наконец-то тэг <a>, который ссылка. Всё, что находится между <a> и </a>, браузер будет отображать как ссылку. То есть: текст станет синеньким, и может быть подчёркнутым (на деле зависит от дизайна сайта).

Ну ладно, текст стал синеньким, а где сама ссылка-то? На какой адрес она ведёт? Здесь и требуется добавить атрибут тэга:

В открывающий тэг дописан атрибут, который называется href (hyperlink reference). И этому атрибуту присвоено значение "http://test/news.html". Вот теперь ссылка имеет собственно ссылку на другую страницу сайта. А слово News станет синеньким и будет кликабельно, так как находится в области действия тэга <a>. Кликнув по слову News, мы перейдём по ссылке на адрес "http://test/news.html".

В тэге можно записать множество атрибутов, например:

Все они так или иначе модифицируют тэг и используются браузером при рендеринге страницы.

У каждого тэга есть свой набор атрибутов. Всё это легко находится в справочнике.

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

Необходимые тэги

Чтобы HTML-документ был законным HTML-документом, весь его текст должен содержаться внутри тэга <html>. То есть документ начинается с тэга <html> и заканчивается закрывающим тэгом </html>.

Далее, внутри тэга <html> нужны ещё два обязательных тэга: <head> и <body>. В тэге <head> содержится служебная информация (которую покажу ниже на примере), а в тэге <body> – собственно сам документ, его тело. То есть, минимальный HTML-документ выглядит так:

Тут есть новые странные слова, но ничего страшного. Разберём:

<!DOCTYPE html> – это вообще не тэг. Это указание браузеру, что данный HTML-документ нужно отображать в стандарте HTML5 (актуальный на сегодня, более старые уже безнадёжно устарели). Просто вставьте это в начало документа и забудьте.

<html lang="en"> – начало HTML-текста. Атрибут lang="en" говорит о том, что страница будет на английском языке (это нужно для онлайн-переводчиков, поисковых систем и т.п.). Можно написать lang="ru" и т.д.

В секции <head>:

<meta charset="utf-8"> – тэг <meta> для мета-информациии, атрибут charset="utf-8" указывает, что кодировка документа UTF-8 (для правильного отображения русских и других не-латинских символов). Кодировку, конечно, тоже можно указать другую, например, Windows-1251, но UTF-8 на данный момент – стандарт.

<title> – Содержимое элемента <title> это название страницы. Оно показывается на вкладке браузера.

Ну а дальше закрывается тэг <head> и начинается тэг <body>, в котором мы можем написать Hello world. После чего закрывается тэг <body>, а за ним закрывается тэг <html>.

Обращаю внимание на 2 момента:

Область действия тэга <meta> открыта, но не закрыта, то есть отсутствует закрывающий тэг </meta>. Это потому, что у некоторых тэгов просто нет области действия (к ним относятся  , <hr>, <img>). К сожалению, это немного нарушает стройную логику HTML. В других стандартах такие одиночные тэги записывались так: <meta/>, то есть как бы сразу и открывались, и закрывались. В HTML5 от этого ушли, и теперь там просто есть тэги-исключения, которые надо знать. Это, с моей точки зрения, идиотизм, но что поделать.
Для боевой эксплуатации сайт сдают максимально валидным, но чисто для себя, для проб, мы можем обойтись и более короткими HTML-документами, которые состоят ТОЛЬКО из <html><body>...</body></html>. Да, прямо вот так, ничего лишнего вообще. Браузер всё равно отобразит документ.

Вот пока всё, что нужно. Вы можете побаловаться с созданием документа: возьмите любой текст, вставьте в шаблон минимального HTML-документа и обработайте его следующими тэгами (можно комбинировать, не забывая о порядке вложенности):