1.4.2. Редакторы графики

При выборе графического редактора альтернатив долгое время практически не было – это Adobe Photoshop. Однако в последние годы популярность набирает редактор GIMP. Небольшие несложные рисунки можно подготовить даже в Paint – стандартном графическом редакторе Windows. В последней версии – Windows XP – Paint умеет сохранять графические файлы в форматах GIF и JPEG.

1.4.3. Браузеры

Как пользователь сети Интернет Вы можете предпочитать любой браузер. Но как создателю сайтов (пусть даже небольших) вам придётся установить на свой компьютер, как минимум, наиболее распространённые (Internet Explorer, Mozilla Firefox и Opera) и тестировать в них созданные веб-страницы. Ведь посетители вашего сайта могут использовать различные браузеры, и ваша задача – сделать так, чтобы сайт был доступен им всем. Весьма желательно также, чтобы он выглядел практически одинаково при просмотре в любом из этих браузеров. Заметим также, что разные версии одного и того же браузера также в некоторых случаях могут вести себя несколько по-разному, поэтому для тестирования веб-страниц желательно иметь все распространённые версии каждого из браузеров, перечисленные в п. 1.2.

1.4.4. Вспомогательные программы

При разработке веб-страниц могут применяться также некоторые вспомогательные виды программного обеспечения. К ним относятся: CSS-редакторы – программы для создания каскадных таблиц стилей (таблицы стилей будут рассмотрены в п. 2.5); FTP-клиенты – программы для передачи файлов на сервер и приёма файлов с сервера по протоколу FTP; валидаторы – программы для проверки соответствия HTML-кода стандартам. Эти программы являются необязательными компонентами рабочего места веб-мастера и далее не рассматриваются.

2. Непосредственная работа с html-кодом

2.1. Структура html-документа

Гипертекстовый документ, предназначенный для публикации в сети Интернет (веб-страница) представляет собой текстовый файл с внедрёнными в него тэгами (англ. tag – метка) – специальными последовательностями символов, задающими логическую структуру документа (заголовки, абзацы) и форматирование символов (жирный шрифт, курсив и т.д.)

HTML-тэги представляют собой последовательности символов, заключённых в угловые скобки <…>. Они бывают одиночные и контейнерные. Большинство HTML-тэгов – контейнерные, они состоят из пары открывающего и закрывающего тэгов. Действие контейнерного тэга распространяется на данные (текст и вложенные тэги), расположенные между ними. Перед именем закрывающего тэга ставится косая черта «/». Например, </h1> – закрывающий тэг для <h1>. Одиночные тэги состоят только из открывающего тэга и не требуют закрывающего.

Упражнение. Создайте пример простейшей веб-страницы. Используйте любой текстовый редактор для набора следующего текста, например стандартный редактор «Блокнот» (Notepad) для Windows:

<html>

<head>

<title>Моя первая веб-страница</title>

</head>

<body>

<h1>Добро пожаловать!</h1>

<p>Это моя первая веб-страница. </p>

</body>

</html>

Не забудьте при сохранении файла присвоить ему расширение .htm или .html вместо предлагаемого по умолчанию .txt. Откройте полученный файл в браузере. Вы увидите в рабочей области окна браузера два абзаца текста: «Добро пожаловать» и «Это моя первая веб-страница». При этом первый из них, заключённый внутри тэга <h1>, выводится жирным и более крупным шрифтом, чем второй, заключённый внутри тэга <p>. Это происходит потому, что тэг <h1> задаёт заголовок первого уровня. Текст «Моя первая веб-страница», заключённый внутри тэга <title>, выводится в заголовке окна браузера. Обратите внимание на очерёдность закрытия вложенных контейнерных тэгов. Тэг, открытый первым, закрывается последним.

Исправьте в редакторе тэг <h1> следующим образом: <h1 align = "center">. Этим Вы добавляете к тэгу атрибут – некоторую уточняющую информацию о том, как в браузере отображается содержимое тэга. Сохраните файл и обновите его отображение в браузере. Заголовок будет выровнен по центру.

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

<имя_тэга имя_атрибута_1 = "значение_атрибута_1" имя_атрибута_2 =

"значение_атрибута_2" ... имя_атрибута_N = "значение_атрибута_N">

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

Сводная таблица основных HTML-тэгов помещена в приложении 1, а подробное описание каждого из них приводится в следующем параграфе.