Собственно, появление html и ознаменовало появление интернета в том виде, в котором мы его знаем сейчас, приведя к началу бурного роста сети и количества сайтов в ней. HTML - это сокращение от англ. "HyperText Markup Language", что в переводе на русский означает "язык гипертекстовой разметки". HTML - это стандартный язык, который и по сей день используется для создания веб-страниц, размещаемых в интернете.

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

Первоначальный HTML был очень простым. Помимо возможностей для вставления ссылок в нём существовали средства лишь для простого форматирования текста. Зайдя на сайт lib.ru, крупнейшей библиотеки Рунета, дизайн которого почти не менялся ещё с середины 90-х, вы можете составить примерное представление о том, как выглядели первые сайты. Однако стандартные возможности HTML скоро перестали устраивать пользователей сети, и сейчас язык HTML, в сочетании со своими расширениями предоставляет очень большие возможности для красивого и функционального оформления сайтов.

Основным элементом языка HTML являются теги. Тег - это, как правило, парная конструкция, предназначенная для задания свойств текста или другой информации, расположенной внутри него. Например, если в html-документе мы напишем:

"На территории Германии был найден неизвестный науке вид ракоскорпионов - <em> Jaekelopterus rhenaniae </em>",

то это будет указанием для программы-браузера, отвечающей за правильное отображение страницы, вывести название вида ракоскорпионов "Jaekelopterus rhenaniae" курсивом, т. е. весь текст при отображении в браузере будет выглядеть так:

На территории Германии был найден неизвестный науке вид ракоскорпионов - Jaekelopterus rhenaniae

Помимо тега <em>, отвечающего за отображение наклонного текста, в языке HTML существует ещё очень большое количество тегов, предназначенных для самых различных целей. Используя эти теги, мы можем вручную, с помощью простого текстового редактора, такого, как, например, встроенный в Windows "Блокнот", создать веб-страничку, пригодную для размещения в интернете и просмотра в браузере. Однако в настоящее время существуют специальные программы - визуальные редакторы веб-страниц, с помощью которых создавать отдельные страницы и целые сайты значительно быстрее и удобнее. Наиболее известной программой из спектра визуальных редакторов веб-страниц является Dreamweaver фирмы Adobe (см. также свежий обзор визуальных html-редакторов). Всё же, хотя с помощью визуального редактора редактировать веб-страницу значительно проще, для настоящего веб-мастера знание языка HTML является необходимым - даже лучшие визуальные реадкторы не всегда правильно или оптимально вставляют теги в html-код, и, в таких случаях, без ручного его исправления не обойтись.

Важным дополнением к языку HTML являются стандарты CSS (каскадных таблиц стилей), которые были разработаны в конце 90-х. Что такое CSS? В стандартном языке HTML можно с помощью тегов задавать различное оформление текста, например, цвет, размер, тип шрифта и т. д. Если данных параметров много, и они часто используются на странице, то нам каждый раз для каждого фрагмента текста придётся вновь и вновь задавать эти параметры. Ещё хуже обстоит дело, если у нас сайт состоит из многих страниц, и одни и те же варианты оформления текста используются много раз в разных местах. Для того, чтобы сделать оформление страниц более удобным, было введено понятие стиля, под которым стали понимать сочетание различных параметров оформления текста (или других элементов на веб-странице). Для каждого стиля набор параметров задаётся однократно, при этом описание стиля может храниться в отдельном файле (с расширением css), а везде, где данный стиль нужно использовать, ставится лишь один тег с указанием, что для оформления блока текста или других элементов веб-страницы нужно использовать такой-то стиль. Например, если мы хотим использовать крупный жирный текст, выделенный красным цветом, вместо того, чтобы каждый раз писать в тексте веб-страницы нужный для этого набор html-тегов:

<font color="red" size="+1"><strong>Внимание!</strong></font>

мы можем сделать следующее - описать специальный стиль "redstyle":

.redstyle {
font-size: larger;
font-weight: bold;
color: red;
}

и затем в нужном месте указать всего один тег, в атрибутах которого пропишем нужный нам стиль, например:

<span class="redstyle">Внимание!</span>

Результат будет один и то же:

Внимание!

но, во втором случае, нам будет проще многократно применять одно и то же оформление и, что немаловажно, если мы вдруг захотим изменить затем это уже сделанное оформление, поменяв, например, цвет текста, то для этого нам достаточно будет изменить описание стиля всего в одном месте, а не редактировать множество тегов по всем пространству одной (а, тем более, нескольких) страниц. Ну и, наконец, в дополнение к удобству, средства CSS предоставляют расширенные возможности для оформления страниц по сравнению с обычными html-тегами.

Зачастую, как уже писалось в предыдущей обзорной статье по веб-дизайну, создание сайта начинается не в визуальном редакторе веб-страниц (ну или с ручного написания html-кода), а с создания дизайна для этого сайта. В этом случае создание html-страницы и размещение на ней блоков текста и элементов графического оформления - рисунков, анимации и т. д. (подобный процесс называется вёрсткой) будет уже вторым этапом. Вёрстка сайта, имеющего сложный дизайн, может быть довольно непростым и утомительным процессом. Задач обеспечить правильное красивое расположение на странице блоков текста и графики осложняется необходимостью учитывать возможность того, что эта страница будет просматриваться пользователи на разных мониторах с разным разрешением экрана и в разных браузерах, которые имеют свои особенности отображения содержимого веб-страниц. В целом к построению (более-менее сложных) веб-страниц существуют два различных подхода - это вёрстка с помощью таблиц, в ячейки которых помещается содержимое, и вёрстка с помощью тегов <div>, который позволяет указывать в своих атрибутах произвольное расположение и размер блока, в котором будет помещаться его содержимое. Каждый из этих подходов имеет свои плюсы и минусы, и между сторонниками того или иного метода неизбежно возникают споры о том, какой из них более удобный и более правильный. В целом, вёрстка с помощью таблиц является исторически более ранним методом построения сайтов и более удобна в тех случаях, когда требуется обеспечить "резиновость" дизайна и сделать так, чтобы размеры блоков на странице автоматически подстраивались под их содержимое и размеры экрана, вёрстка с помощью тегов <div> получила распространение относительно позже и оптимально подходит тогда, когда сайт имеет фиксированный дизайн.

Следующая обзорная статья (о веб-программировании)

Все материалы по основам HTML и вёрстке сайтов