Собственно, появление html и ознаменовало появление интернета в том виде, в котором мы его знаем сейчас, приведя к началу бурного роста сети и количества сайтов в ней. HTML — это сокращение от англ. «HyperText Markup Language», что в переводе на русский означает «язык гипертекстовой разметки». HTML — это стандартный язык, который и по сей день используется для создания веб-страниц, размещаемых в интернете.
Первоначально в основе HTML лежала одна простая идея. Эта идея состояла в том, чтобы внести в обычные текстовые документы, которые люди читали на экране монитора, просто прокручивая или перелистывая страницы, как в книжке, возможность добавления ссылок, переходя по которым, человек мог сразу перескочить на другую страницу или в другое место текста, если данная ссылка его заинтересовала. Возможность добавления в своём тексте ссылок на другие страницы, в сочетании с появившимся к тому времени механизмом задания адреса для любой страницы, выложенной в сети (который известен как URL) и привела к тому, что начала формироваться взаимосвязанная сеть сайтов, воплотившаяся в тот интернет, который мы имеем сейчас.Первоначальный HTML был очень простым. Помимо возможностей для вставления ссылок в нём существовали средства лишь для простого форматирования текста. Зайдя на сайт lib.ru, крупнейшей библиотеки Рунета, дизайн которого почти не менялся ещё с середины 90-х, вы можете составить примерное представление о том, как выглядели первые сайты. Однако стандартные возможности HTML скоро перестали устраивать пользователей сети, и сейчас язык HTML, в сочетании со своими расширениями предоставляет очень большие возможности для красивого и функционального оформления сайтов.
Основным элементом языка HTML являются теги. Тег — это, как правило, парная конструкция, предназначенная для задания свойств текста или другой информации, расположенной внутри него. Например, если в html-документе мы напишем:
«На территории Германии был найден неизвестный науке вид ракоскорпионов — Jaekelopterus rhenaniae «,
то это будет указанием для программы-браузера, отвечающей за правильное отображение страницы, вывести название вида ракоскорпионов «Jaekelopterus rhenaniae» курсивом, т. е. весь текст при отображении в браузере будет выглядеть так:
На территории Германии был найден неизвестный науке вид ракоскорпионов — Jaekelopterus rhenaniae
Помимо тега , отвечающего за отображение наклонного текста, в языке HTML существует ещё очень большое количество тегов, предназначенных для самых различных целей. Используя эти теги, мы можем вручную, с помощью простого текстового редактора, такого, как, например, встроенный в Windows «Блокнот», создать веб-страничку, пригодную для размещения в интернете и просмотра в браузере. Однако в настоящее время существуют специальные программы — визуальные редакторы веб-страниц, с помощью которых создавать отдельные страницы и целые сайты значительно быстрее и удобнее. Наиболее известной программой из спектра визуальных редакторов веб-страниц является Dreamweaver фирмы Adobe (см. также свежий обзор визуальных html-редакторов). Всё же, хотя с помощью визуального редактора редактировать веб-страницу значительно проще, для настоящего веб-мастера знание языка HTML является необходимым — даже лучшие визуальные реадкторы не всегда правильно или оптимально вставляют теги в html-код, и, в таких случаях, без ручного его исправления не обойтись.
Важным дополнением к языку HTML являются стандарты CSS (каскадных таблиц стилей), которые были разработаны в конце 90-х. Что такое CSS? В стандартном языке HTML можно с помощью тегов задавать различное оформление текста, например, цвет, размер, тип шрифта и т. д. Если данных параметров много, и они часто используются на странице, то нам каждый раз для каждого фрагмента текста придётся вновь и вновь задавать эти параметры. Ещё хуже обстоит дело, если у нас сайт состоит из многих страниц, и одни и те же варианты оформления текста используются много раз в разных местах. Для того, чтобы сделать оформление страниц более удобным, было введено понятие стиля, под которым стали понимать сочетание различных параметров оформления текста (или других элементов на веб-странице). Для каждого стиля набор параметров задаётся однократно, при этом описание стиля может храниться в отдельном файле (с расширением css), а везде, где данный стиль нужно использовать, ставится лишь один тег с указанием, что для оформления блока текста или других элементов веб-страницы нужно использовать такой-то стиль. Например, если мы хотим использовать крупный жирный текст, выделенный красным цветом, вместо того, чтобы каждый раз писать в тексте веб-страницы нужный для этого набор html-тегов:
Внимание!
мы можем сделать следующее — описать специальный стиль «redstyle»:
.redstyle {
font-size: larger;
font-weight: bold;
color: red;
}
и затем в нужном месте указать всего один тег, в атрибутах которого пропишем нужный нам стиль, например:
Внимание!
Результат будет один и то же:
Внимание!
но, во втором случае, нам будет проще многократно применять одно и то же оформление и, что немаловажно, если мы вдруг захотим изменить затем это уже сделанное оформление, поменяв, например, цвет текста, то для этого нам достаточно будет изменить описание стиля всего в одном месте, а не редактировать множество тегов по всем пространству одной (а, тем более, нескольких) страниц. Ну и, наконец, в дополнение к удобству, средства CSS предоставляют расширенные возможности для оформления страниц по сравнению с обычными html-тегами.
Зачастую, как уже писалось в предыдущей обзорной статье по веб-дизайну, создание сайта начинается не в визуальном редакторе веб-страниц (ну или с ручного написания html-кода), а с создания дизайна для этого сайта. В этом случае создание html-страницы и размещение на ней блоков текста и элементов графического оформления — рисунков, анимации и т. д. (подобный процесс называется вёрсткой) будет уже вторым этапом. Вёрстка сайта, имеющего сложный дизайн, может быть довольно непростым и утомительным процессом. Задач обеспечить правильное красивое расположение на странице блоков текста и графики осложняется необходимостью учитывать возможность того, что эта страница будет просматриваться пользователи на разных мониторах с разным разрешением экрана и в разных браузерах, которые имеют свои особенности отображения содержимого веб-страниц. В целом к построению (более-менее сложных) веб-страниц существуют два различных подхода — это вёрстка с помощью таблиц, в ячейки которых помещается содержимое, и вёрстка с помощью тегов