Базовые понятия

HTML-страница – это, по сути, текстовый файл, который можно создать с помощью обычного Блокнота. Помимо текста, который будет выводиться браузером при просмотре такой странички, этот файл содержит невидимый для программы навигации по Сети и пользователя код. Вот этот код и есть язык гипертекстовой разметки – HTML. Чтобы начать знакомство с этим языком, нужно открыть Блокнот и создать в нем текстовый файл с содержимым, приведенным в листинге 11.1.

Листинг 11.1.

Пример простейшей веб-страницы

Пример веб-страницы

Это простейшая web-страничка, созданная в стандартном Блокноте

и отображенная в браузере Microsoft Internet Explorer.

Созданный файл следует сохранить на диске под именем 1.htm.

Необходимо запустить файл, дважды щелкнув кнопкой мыши на его имени, – откроется окно, в котором будет что-то похожее на рис. 11.1.

Рис. 11.1.Пример простейшей веб-страницы в окне браузера Internet Explorer

Таким образом, вы создали свою первую веб-страницу. Конечно, она не несет большой смысловой нагрузки и для ее создания использовался текст из рассмативаемого примера, а не писался самостоятельный HTML-код, однако создание этой странички очень важно для понимания принципов создания веб-страниц вообще. Разберемся подробнее в значении присутствующих в рассмотренном примере команд языка HTML, которые, кстати, называются HTML-тегами.

Прежде всего стоит определить расположение тегов. Дело в том, что теги в большинстве своем состоят из двух частей – открывающего (он же – содержащий параметры) и закрывающего, то есть конца тега. Закрывающий выглядит так же, как и открывающий, но начинается со знака /. Заданные в теге параметры действуют только между его началом и концом, то есть только внутри тега. В приведенном примере слово Блокноте заключено между тегами и . Значение этого тега становится понятным, если взглянуть на результат обработки HTML-кода браузером. Как видно на рисунке, это слово написано курсивом, из чего можно заключить, что тег позволяет выделять фрагменты текста наклонным шрифтом – курсивом.

Определим значения остальных тегов, присутствующих в примере.

• – весь HTML-код страницы заключен в этот тег (открывающий и закрывающий

•

•

• После закрытия тега

•

– данный тег обозначает заголовок первого уровня, встречаются также теги

,

и т. д. Как видно из рисунка, заголовок отличается от остального текста.

•

– служит для обозначения абзаца основного текста, в такой тег заключается каждый новый абзац.

• и – теги для определения начертания шрифтов, которые означают соответственно курсив и полужирный шрифт.

Как видите, ничего сложного нет. Главное – уяснить, что существуют обязательные теги, которые встречаются на всех веб-страницах, а также то, что теги, как правило, парные, то есть присутствуют открывающий и закрывающий теги. Впрочем, существуют и непарные, то есть такие, где открывающий тег присутствует, а закрывающего нет. Среди таких тегов следует назвать тег
, означающий перенос строки без начала нового абзаца, а также тег

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

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

Работа со шрифтами

Рассмотрим подробнее, как можно видоизменять отображение шрифта с помощью не только тегов и , но и других.

Для определения параметров шрифта, которым будет выводиться текст, служит парный тег . Этот тег имеет дополнительные параметры, с помощью которых можно управлять внешним видом шрифта. Один из таких параметров – SIZE – задает размер шрифта. Создадим еще один файл – 2.htm и впишем в него содержимое листинга 11.2.

текст размера 1

текст размера 2

текст размера 3

текст размера 4

текст размера 5

текст размера 6

текст размера 7

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

Если нужно задать несколько параметров, то они отделяются друг от друга пробелом. Если первую строку после тега

В рассмотренном примере использовался шрифт Comic Sans MS, однако на практике при создании веб-страниц чаще всего применяются следующие шрифты: Arial, Courier New, Comic Sans MS, Times New Roman и Verdana. Эти шрифты установлены на абсолютном большинстве компьютеров, поэтому их применение гарантирует, что конечный пользователь будет видеть созданную веб-страничку в том же виде, что и ее автор.