Глава 4. Основы web-дизайна. Язык html

I. Основные понятия. Редакторы html

Web-дизайн - это процесс создания web-страниц, причем процесс творческий.

Любая web-страница является гипертекстом, т.е. текстом со встроенными ссылками на другие страницы. Наличие ссылок - важная функциональная особенность web-страниц, благодаря ей web-страницы Интернета связываются между собой и объединяются в единую гипертекстовую систему WWW.

Термин HTML (Hyper Text Markup Language) означает `язык маркировки гипертекстов`. Поэтому html-документ - это текстовый файл с расширением .html (.htm). В нём к текстовому содержанию web-страницы добавлены команды (теги) для вставки в web-страницу ссылок на др. документы, а также для вставки и оформления таблиц, рисунков и пр. элементов.

Что понадобится для освоения HTML и создания web-страниц?

1. Любой браузер, т.е. программа для просмотра web-страниц (html-файлов), например браузер Internet Explorer.

2. Редактор текстовых файлов. Если на компьютере установлена система Windows, можно использовать редактор Блокнот (Notepad). А ещё есть специальные редакторы HTML-файлов. Широко используются два их типа:

1) редакторы типа WISIWIG ("что видишь, то и получишь"), например, Macromedia Dreamweaver, Microsoft Front Page. Работая с ними, сразу при разработке сайта будете видеть на экране web-страничку в том виде, какой она получится (в `режиме дизайна`);

2) редакторы HTML-текстов - HotDog, Ken Nesbitt Web Editor и др. При работе с ними пользователь видит только html-код и может изменять его записью тегов вручную, или вызывая команды меню для вставки нужных тегов.

Мы будем использовать редакторы Блокнот и Macromedia Dream­weaver (он объединяет возможности 2^х типов HTML-редакторов: позволяет работать и в режиме дизайна web-страницы, и в режиме html-кода).

II. Структура html-кода страницы

В html-странице выделяют заголовок (head) и тело (body) документа. Укрупнённая структура html-кода страницы такова (см. левый столбец таблицы):

<html>	- корректно составленный html-код начинается с тега <html>
<head> </head>	- открывающийся тег <head> и закрывающий </head> формируют раздел заголовка. Между ними помещают теги названия документа и служебную информацию (описание документа)
<body> </body>	- основная часть html-файла – тело документа – находится между тегами <body>...</body> Между ними размещают те данные, что отображаются на web-странице в окне браузера
</html>	- заканчивается html-код страницы закрывающимся тегом </html>

Итак, в заголовке html-страницы располагают служебные сведения о самой странице, многие из них не влияют на отображение web-страницы. Зато все данные, помещенные в тело страницы, выводятся на экран.

III. Html-теги и атрибуты

ЗАДАНИЕ. Создадим простейшую web-страницу.

1. Запустите текстовый редактор Блокнот (Пуск /Программы /Стандартные /Блокнот) и введите следующий документ:

<html> <head> <title>Пример 1</title> </head> <body> <p>Привет! Моя 1 страничка </p> </body> </html>

2. Сохраните этот документ как web-страницу под именем 1.htm

Перед сохранением убедитесь, что сброшен флажок  Скрывать расширения для зарегистрированных типов файлов (Пуск /Настройка /Панель управления /Свойства папки /Вид). Иначе Блокнот может автоматически добавить в конец имени файла расширение .txt (а не .html).

4. Откройте этот файл из программы Проводник (или из Internet Explorer).

5. Посмотрите, как отображается этот простой html-документ (web-страница):

 Где отображается содержимое элемента <title>?  Где содержимое элемента </body>?

 Как отображаются фразы "Привет" и "Моя 1 страничка", введенные в 2х отдельных строках? Почему? (потому что html-язык игнорирует нажатие Enter, а также нескольких пробелов при вводе текста документа).

 Проверьте, что происходит при уменьшении ширины окна.

ВЫВОД: из примера видно - информация об оформлении документа задаётся метками, заключенными в знаки `<` и `>`. Такие метки называются тэги (англ. tag). Так, в примере выше тег <p>…</p> определяет отдельный абзац.

ЗАДАНИЕ. Использование тэгов с атрибутами.

1.Откройте в Блокноте файл 1.html. Добавим к тегам абзаца <p>..</p> атрибут align (задаёт тип выравнивания абзаца). Измените тело документа так:

<html> <head> <title> Пример 2</title> </head> <body> <p>Абзац можно выравнивать влево,</p> <p align=center>можно по центру</p> <p align=right>или по правому краю.</p> </body> </html>

2. Сохраните документ (Файл /Сохранить как) под именем выравнивание.htm

3. Запустите Internet Explorer и откройте там файл выравнивание.htm. Посмотрите – как расположены абзацы на странице?

ВЫВОД: многие тэги кроме имени могут содержать атрибуты, они уточняют действие тэга. В примере 2 для тэга <p> использован атрибут align. Причем рядом в кавычках задают значения атрибута (например, "center"); именно они определяют особенности выполнения тегов.

Правила указания атрибутов:

- значение атрибута указывается в кавычках;

- атрибуты указываются лишь в открывающем теге;

- в составе тега может присутствовать несколько атрибутов.

Правила указания тэгов:

• большинство тегов парные, т.е. на каждую открывающийся тэг вида <tag> есть закрывающийся тэг с тем же именем, но с добавлением "/", т.е. </tag>

• при создании html-кода используйте в именах тегов только маленькими буквами (согласно спецификации XHTML 1.0).

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

• придерживайтесь требуемой структуры HTML-документа. Задавайте основные теги в правильном порядке и строгой иерархии.