Тема 2. Проектирование Web-страниц

2.1. Основы html

1. Введение

2. Тэги и атрибуты

3. Структура HTML-страницы

4. Фон и фоновый рисунок

5. Форматирование текста

6. Оформление списков

7. Размещение графики

8. Ссылки и метки

9. Таблицы

10. Фреймы

2.2. Специализированные средства создания Web-страниц

2.3. Публикация Web-страниц

2.1. Основы HTML

2.1.1. Введение

В настоящее время особенно быстро развивается часть Интернета, называемая World Wide Web(WWW или просто Web), что можно перевести как «всемирная паутина». В WWW содержится информация, представленная в текстовом, графическом, видео- и аудиоформатах.

Публикации во «всемирной паутине» реализуются в форме Web-сайтов. Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвященную какой-либо теме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц.

Для того, чтобы публиковать информацию для повсеместного распространения, необходимо иметь язык, понятный всем компьютерам. Издательский язык, используемый на World Wide Web, называется HTML(от английского Hyper Text Markup Language - язык разметки гипертекста).

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

Замечание: HTML-документ является обычным текстовым файлом с расширениемhtmlилиhtm.

Для просмотра HTML-страниц в сети Интернет используются специальные программыбраузеры, илиобозреватели(от англ. browse - просмотр). Подавляющее большинство пользователей Интернета используют браузеры Microsoft Internet Explorer (входит в состав ОС семейства Windows) или Netscape Navigator.

2.1.2. Тэги и атрибуты

Команды языка HTML задаются между специальными символами < ... >, и называются тэгами (tag). Тэги позволяют управлять представлением информации на экране при отображении HTML-документов.

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

Таким образом, тэг – это инструкция браузеру, указывающая способ отображения текста.

Тэги могут быть двух видов:

1) одноэлементный тэг:<...>; его достаточно просто вставить в текст для того, чтобы совершить какое-либо действие;

Пример: <BR>

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

<...>– открывающийся тэг,</...>– закрывающийся тэг.

Пример: <B>…</B>

Атрибуты– параметры тэга. Атрибуты могут задавать цвет и размер шрифта, выравнивание текстового абзаца, размер рисунка и т. д. Наборы допустимых атрибутов индивидуальны для каждого тэга. Атрибуты указываются внутри начального тэга и отделяются друг от друга пробелами. Порядок следования атрибутов произволен.

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

Таким образом, парный тэг в общем виде имеет вид:

<тэг атрибут1="значение1" атрибут2="значение2" …>Текст </тэг>

Пример: <FONT face="Arial" size=3 color="blue">Текст</FONT >

Замечание: значения параметров иногда чувствительны к регистру.

Исключение из правил записи тэгов составляет тэг комментария с ограничителями <!-- … -->. Все что находится внутри этого тэга, считается комментарием и игнорируется браузером.

Пример: <!--это комментарий-->

Тэги могут содержать в себе другие вложенные тэги.

Пример: <B>Текст1<I>Текст2</I></B>

Следует быть внимательным при написании вложенных (комбинированных) тэгов, соблюдая верную последовательность открывающих/закрывающих тэгов.

Пример:

верно: <тэг1><тэг2><тэг3> … </тэг3></тэг2></тэг1>

неверно: <тэг1><тэг2><тэг3> … </тэг3></тэг1></тэг2>

2.1.3. Структура HTML-страницы

Структура HTML-страницы имеет вид:

<HTML>

<HEAD>

описание заголовка

</HEAD>

<BODY>

текст документа

</BODY>

</HTML>

Любой HTML-документ должен начинаться (и заканчиваться) тэгом <HTML> ... </HTML>. Этот тэг указывает на то, что данный документ содержит в себе HTML-текст.

Примечание: HTML не чувствителен к регистру, т. е. все равно какими буквами написаны тэги: прописными или строчными (например BODYэквивалентноbodyилиBody).

Web-документ разбивается на две логические части: заголовокисодержание.

Заголовок, помечаемый тэгом <HEAD> ... </HEAD>, содержит справочную информацию о странице, которая не отображается браузером, а также название документа. Основное содержание страницы помещается в тэг<BODY> ... </BODY>. Его также называют телом программы.

В головной части программы обычно пишется тэг TITLE, определяющийимя окна, содержащегоWeb-страницу, которое показывается в заголовке окна браузера (не более 64 символов).

Необязательный одноэлементный тэг METAуказывает тип документа и используемую кодовую страницу.

Пример:

<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=windows-1251">

<TITLE>Заголовок документа</TITLE>

</HEAD>

<BODY>

Текст документа

</BODY>

</HTML>

Таким образом, простейшая HTML-страница может быть описана как:

<HTML>

<HEAD>

<TITLE>Мой первый шаг</TITLE>

</HEAD>

<BODY>

Это моя первая HTML-страница.

</BODY>

</HTML>

2.1.4. Фон и фоновый рисунок

Значение цвета в атрибутах HTML-языка может задаваться несколькими способами:

1) названием, например "red";

2) кодом RGB, например "#FFFFFF";

3) в десятичном виде, например "255, 0, 0";

4) в процентах, например "30%, 40%, 30%".

Код RGB– это три шестнадцатеричных числа в диапазоне 00 - FF. 1-ое, 2-ое и 3-е число, соответственно, представляют собой количество красного, зеленого и синего тонов в цвете. Например, #000000 - это черный цвет (отсутствие цвета), #FF0000 - ярко-красный, #00FF00 - ярко-зеленый, #0000FF - ярко-синий, а #FFFFFF - белый (все цвета присутствуют полностью).

Цвет фона HTML-страницы задается при помощи атрибутаBGCOLOR тэга BODY.

Пример:

<HTML>

<HEAD>

<TITLE>Мой первый шаг</TITLE>

</HEAD>

<BODY BGCOLOR="yellow">

Это моя первая HTML-страница.

</BODY>

</HTML>

Фоном также можно сделать рисунок. Атрибут BACKGROUNDподключает этот рисунок в качестве фона и указывает на то, где лежит файл с изображением.

Замечание: Фоновым рисунком может служить любой файл с расширением GIF или JPG.

Пример:

<HTML>

<HEAD>

<TITLE>Мой первый шаг</TITLE>

</HEAD>

<BODY BACKGROUND ="picture1.jpg">

Это моя первая HTML-страница.

</BODY>

</HTML>

Для того чтобы фоновый рисунокне прокручивался вместе с текстом, необходимо добавить атрибутBGPROPERTIESсо значениемFIXED.

Пример: <BODY BACKGROUND ="picture1.jpg" BGPROPERTIES=FIXED>

2.1.5. Форматирование текста

Тэг перевода строки <BR>отделяет строку от последующего текста или графики.

Тэг абзаца <P>тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзац. Оба тэга являются одноэлементными.

Пример:

<HTML>

<HEAD>

<TITLE>Мой первый шаг</TITLE>

</HEAD>

<BODY>

Строка 1<BR>Строка 2<P>А теперь новый абзац

</BODY>

</HTML>

Тэги выделения фрагментов текста позволяют управлять отображением отдельных символов и слов:

1) I – задает курсив;

2) B – полужирный шрифт;

3) U – подчеркнутый шрифт;

4) SUP – верхний индекс;

5) SUB – нижний индекс.

Пример:

<HTML>

<HEAD>

<TITLE>Мой первый шаг</TITLE>

</HEAD>

<BODY>

Обычный текст<I>курсив</I><B>полужирный</B><U>подчеркнутый</U>

<BR>H<SUB>2</SUB>SO<SUB>4</SUB>

</BODY>

</HTML>

Указанные тэги можно комбинировать в произвольном порядке.

Пример: <I><B>Полужирный курсив</B></I>

Существует два способа управления размером текста:

1) использование стилей заголовка;

2) задание размера шрифта основного документа или размера текущего шрифта.

Для задания уровня заголовка используется тэг <Hx>, гдеx – цифра от 1 до 6.

Пример: <Hx> Заголовок x-го уровня </Hx>

Первый уровень заголовков (самый большой) обозначается цифрой 1, следующий – 2, и т. д. Большинство браузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Обычно браузер выделяет заголовки жирным шрифтом. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться браузером.

Пример:

<HTML>

<HEAD>

<TITLE>Мой первый шаг</TITLE>

</HEAD>

<BODY>

<H1>Заголовок уровня 1</H1><BR>

<H2>Заголовок уровня 2</H2><BR>

<H3>Заголовок уровня 3</H3><BR>

<H4>Заголовок уровня 4</H4><BR>

<H5>Заголовок уровня 5</H5><BR>

<H6>Заголовок уровня 6</H6><BR>

</BODY>

</HTML>

Атрибут SIZEвтэга BASEFONTзадает базовый (основной) размер шрифта Web-документа. Величина значения может лежать в пределах от 1 (самый маленький) до 7 (самый большой). По умолчанию используется величина 3.

Пример: <BASEFONT SIZE=4>

Тэг FONTпозволяет задавать размертекущегошрифта в отдельных места текста в диапазоне от 1 до 7, для этого также используется атрибутSIZE. Шрифты могут быть заданы относительно базового:SIZE=+число илиSIZE=-число.

Замечание: сумма базового размера шрифта и размера текущего шрифта должна быть не меньше 1 и не более 7. Например, для основного шрифта, равного 3, размер текущего шрифта может находиться в пределах от -2 до +4.

Примеры:

<FONT SIZE=3>Текст размером 3</FONT>

<FONT SIZE=+2>Текст размером больше базового на 2</FONT>

Тэг BIGвыводит текст шрифтом на один размер больше текущего.Тэг SMALLвыводит текст шрифтом на один размер меньше текущего.

Пример:

Следующее слово будет <BIG>больше</BIG>или<SMALL>меньше</SMALL>

За цвет всего текстаотвечает атрибутTEXTтэгаBODY.

Пример:

<HTML>

<HEAD>

<TITLE>Мой первый шаг</TITLE>

</HEAD>

<BODY TEXT="blue">

Весь текст синий

</BODY>

</HTML>

Изменить цвет текста только в конкретной части документа можно атрибутом COLORтэга FONT.

Пример: <FONT COLOR="#00FF00">этот текст будет зеленым</FONT>

С помощью атрибутаFACE тэга FONTможно менять стиль написания (гарнитуру) шрифта.

Пример: <FONT FACE="Times New Roman">Текст гарнитуры Times</FONT>

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

Пример: <FONT FACE="Comic Sans MS, Courier New, Courier">

Выравнивание текста по горизонтали производится при помощи специальных атрибутов тэга P:

1) LEFT– выравнивание слева;

2) RIGHT– выравнивание справа;

3) CENTER– выравнивание по центру.

Пример:

<HTML>

<HEAD>

<TITLE>Мой первый шаг</TITLE>

</HEAD>

<BODY>

<PALIGN=LEFT>Текст, выровненный слева

<PALIGN=RIGHT>Текст, выровненный справа

<PALIGN=CENTER>Текст, выровненный по центру

</BODY>

</HTML>

Тэг BLOCKQUOTEпредназначен для обозначения в документе цитаты из другого источника. Текст, обозначенный этим тегом, отступает от левого края документа на 8 пробелов.

Пример:

<HTML>

<HEAD>

<TITLE>Мой первый шаг</TITLE>

</HEAD>

<BODY>

Немного о жизни великого Диснея<P>

<BLOCKQUOTE>"Я не снимаю фильмы для того, чтобы делать деньги, я делаю деньги, чтобы снимать больше хороших фильмов."</BLOCKQUOTE>

</BODY>

</HTML>

2.1.6. Оформление списков

Часто для оформления текста используют списки. Списки бывают нумерованные и ненумерованные (маркированные).

Пронумерованный список задается тэгом OL.Тэг LIопределяет элементы списка.

Атрибуты тега OL:

1)TYPE- вид счетчика:

A - большие латинские буквы,

a - маленькие латинские буквы,

I - большие римские цифры,

i - маленькие римские цифры,

1- обычные цифры;

2)START=n- число, с которого начинается отсчет.

Пример:

<HTML>

<HEAD>

<TITLE>Мой первый шаг</TITLE>

</HEAD>

<BODY>

Далее следует нумерованный список

<OL TYPE=I>

<LI>Элемент 1</LI>

<LI>Элемент 2</LI>

<LI>Элемент 3</LI>

</OL>

</BODY>

</HTML>

Непронумерованный список задается тэгомUL, его элементы – тэгомLI. Для пометки элемента списка используются маркеры. АтрибутTYPEтэгаULопределяет внешний вид маркера: DISK, CIRCLE, SQUARE. По умолчанию используется маркер вида DISK.

Пример:

<HTML>

<HEAD>

<TITLE>Мой первый шаг</TITLE>

</HEAD>

<BODY>

Далее следует непронумерованный список

<UL>

<LI>Элемент 1</LI>

<LI>Элемент 2</LI>

<LI>Элемент 3</LI>

</UL>

</BODY>

</HTML>

2.1.7. Размещение графики

Одноэлементный тэг HRрисует горизонтальную линию. Его атрибутыSIZEиWIDTHпозволяют задать соответственно толщину и длину линии в пикселях. По умолчанию толщина линии 2 пикселя и длина, равная ширине окна. АтрибутомCOLORможно задать цвет линии.

Замечание: атрибут COLORдействует только в браузереInternet Explorer.

Пример:

<HTML>

<HEAD>

<TITLE>Мой первый шаг</TITLE>

</HEAD>

<BODY>

Далее следует горизонтальная линия толщиной 4 пикселя

<HR SIZE=3>

…текст продолжается

</BODY>

</HTML>

Использование рисунков позволяет сделать HTML-страницы более интересными. Графика может быть представлена графическими файлами форматовGIF,JPEG. Дополнительно некоторыми браузерами может поддерживаться форматPNGи другие форматы.

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

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

1. SRC– имя файла изображения, обязательный атрибут;

2. WIDTH– ширина изображения. Задается либо в пикселах, либо в процентах относительно высоты;

3. HEIGHT- высота изображения. По умолчанию используется оригинальная высота рисунка;

4. ALT– альтернативный текст, который помещается вместо изображения, если браузер не может его отобразить. Также позволяет задать краткое описание, которое выскочит, если навести курсором мыши на изображение, и так подержать его (курсор) несколько секунд;

5. BORDER– задает толщину рамки вокруг изображения в пикселях. По умолчанию рамка не рисуется;

6. ALIGN – выравнивание относительно текста. Можно расположить изображение слева (LEFT), по центру (CENTER), справа (RIGHT)относительно текста, также можно выровнять изображение: по верхнему краю (TOP), посередине (MIDDLE), по нижнему краю (BOTTOM) текста;

7. HSPACEиVSPACE– расстояние от изображения до текста (по горизонтали и вертикали) в пикселях.

8. LOWSRC – имя графического файла с альтернативным изображением более низкого качества (и, соответственно, меньшего объема), чем изображение, указанное в параметре SRC. Обозреватели, поддерживающие данный параметр, сначала загрузят картинку из LOWSRC, а затем заменят ее картинкой из SRC. Необязательный атрибут.

Пример 1:

<HTML>

<HEAD>

<TITLE>Мой первый шаг</TITLE>

</HEAD>

<BODY>

<H3>Немного о жизни великого Диснея.</H3>

<P><IMG SRC="disney.gif">

"Я не снимаю фильмы для того, чтобы делать деньги, я делаю деньги, чтобы снимать больше хороших фильмов"

</BODY>

</HTML>

Пример 2:

<HTML>

<HEAD>

<TITLE>Мой первый шаг</TITLE>

</HEAD>

<BODY>

<H3>Немного о жизни великого Диснея.</H3>

<P><IMG SRC="disney.gif" BORDER=1 ALIGN="RIGHT">

"Я не снимаю фильмы для того, чтобы делать деньги, я делаю деньги, чтобы снимать больше хороших фильмов"

</BODY>

</HTML>

2.1.8. Ссылки и метки

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

Браузер выделяет (обычно цветом и/или подчеркиванием) слова, являющиеся ссылками. Цвет выделения ссылок устанавливается специальными атрибутами тэга BODY:

1. LINK– устанавливает цвет выделения ссылок;

2. VLINK – устанавливает цвет выделения ссылок на которых уже побывали;

3. ALINK - устанавливает цвет активной ссылки.

Возможны ссылки:

• на удаленный HTML-файл;

• на некоторую точку в этом же документе (метку);

• на любой файл, не являющийся HTML-документом.

Тэг <A> ... </A>создает гиперссылку. Его атрибуты:

1. HREF– имя документа (URL-адрес), к которому осуществляется переход.

2. TITLEзадает текст, который выскочит, если задержать курсор мыши на указателе;

3. TARGETуказывает, куда должна загружаться вызываемая страничка. Если указатьTARGET=_blank, то браузер загрузит вызываемую страницу в новое окно. Если этот атрибут опустить, то новая страничка загрузится в текущее окно.

Ссылка на другой документ описывается следующим образом:

<A HREF="имя файла">Текст ссылки</A>

URL-адрес может быть абсолютным и относительным.

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

HREF="file://D:\IVANOVA\Ivanova.htm"

Абсолютный адрес документа, находящегося на удаленном компьютере в Интернете, будет включать имя сервера, путь файла и имя файла, например:

HREF="http://omsu.omskreg.ru"

Относительный URL-адресфайла указывает на местонахождение документа относительно того документа, в котором находится ссылка. Например, если файл вызываемого документа находится в том же каталоге, что и файл из которого он вызывается, то можно указывать только имя файла:

HREF="Ivanova.htm"

Пример:

<HTML>

<HEAD>

<TITLE>Мой первый шаг</TITLE>

</HEAD>

<BODY>

Следующая ссылка открывает файл

<A HREF="info.htm">info.htm</A>.

</BODY>

</HTML>

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

Пример:

<HTML>

<HEAD>

<TITLE>Мой первый шаг</TITLE>

</HEAD>

<BODY>

Этот рисунок

<A HREF="http://www.disney.com">

<IMG SRC="disney.gif" BORDER=1 ALIGN="MIDDLE">

</A> является ссылкой на сайтwww.disney.com

</BODY>

</HTML>

Можно создать ссылку на адрес электронной почты.

Пример: <A HREF="mailto:lenin@zeos.net">Послать по e-mail</A>

Почтовая гиперссылка имеет несколько параметров (не обязательных):

1. ?subject– тема письма;

2. &Body– текст сообщения;

3. &cc– копии письма через запятую;

4. &bcc– скрытые копии письма через запятую;

Пример:

<A HREF="mailto:lenin@zeos.net ?subject=Поздравление &Body=... текст письма ... &cc=copy@mail.ua.net &bcc=hidden_copy@mail.ua.net" TITLE="Пример почтовой гиперссылки">Послать поe-mail</A>

Щелкнув на такую ссылку, откроется окно почтовой программы пользователя с уже заполненными полями. Останется только написать письмо и отправить.

Иногда возникает необходимость сделать ссылку на определенное место в том же или в другом документе. В этом используется механизм меток (иначе называемых закладками).

При ссылке на определенную метку перед именем метки ставится символ #. Ссылка на метку в том же документе имеет следующий вид:

<A HREF="#Имя метки">Текст ссылки</A>

Ссылка на метку в другом документе:

<A HREF="Имя документа#Имя метки">Текст ссылки</A>

Сама метка описывается при помощи атрибута NAMEтэгаA:

<A NAME="Имя метки">Текст метки</A>

Пример:

<HTML>

<HEAD>

<TITLE>Мой первый шаг</TITLE>

</HEAD>

<BODY>

<P ALIGN="CENTER"><FONT SIZE=5>Оглавление</FONT></P><UL>

<A HREF="#m1"><LI>Раздел 1</A></LI>

<A HREF="#m2"><LI>Раздел 2</A></LI>

<A HREF="#m3"><LI>Раздел 3</A></LI>

</UL><BR>

<P><A NAME="m1">РАЗДЕЛ 1</A></P>Текст раздела 1……………

<P><A NAME="m2">РАЗДЕЛ 2</A></P>Текст раздела 2……………

<P><A NAME="m3">РАЗДЕЛ 3</A></P>Текст раздела 3……………

</BODY>

</HTML>

2.1.9. Таблицы

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

Таблица объявляется при помощи тэга <TABLE>...</TABLE>. Все элементы таблицы должны находиться внутри этого тэга. Тэг<TR>...</TR>задает строки таблицы. Строки содержат в себе ячейки данных, которые задаютсятэгом <TD>...</TD>.

Пример:

<HTML>

<HEAD>

<TITLE>Мой первый шаг</TITLE>

</HEAD>

<BODY>

Далее следует таблица

<TABLE>

<TR><TD>A</TD><TD>B</TD></TR>

<TR><TD>C</TD><TD>D</TD></TR>

</TABLE>

</BODY>

</HTML>

По умолчанию таблица не имеет обрамления. Обрамление добавляется атрибутом BORDERтэгаTABLE. BORDERможет принимать числовое значение, определяющее ширину границы в пикселях.

Пример:

<HTML>

<HEAD>

<TITLE>Мой первый шаг</TITLE>

</HEAD>

<BODY>

Далее следует таблица

<TABLE BORDER=3>

<TR><TD>A</TD><TD>B</TD></TR>

<TR><TD>C</TD><TD>D</TD></TR>

</TABLE>

</BODY>

</HTML>

Замечание: вокруг пустой ячейки рамка не рисуется; если рамка нужна, то в ячейку можно ввести символьный объект&nbsp(non-breaking space — неразрывающий пробел).

Фон задается атрибутом BGCOLOR. Фон может задаваться для таблицы в целом, для отдельной строки, и даже для отдельной ячейки.

Пример 1:

<HTML>

<HEAD>

<TITLE>Мой первый шаг</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=3 BGCOLOR="#00FFFF">

<TR><TD>A</TD><TD>B</TD></TR>

<TR><TD>C</TD><TD>D</TD></TR>

</TABLE>

</BODY>

</HTML>

Пример 2:

<HTML>

<HEAD>

<TITLE>Мой первый шаг</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=3>

<TR><TD BGCOLOR="#00FF00">A</TD><TD>B</TD></TR>

<TR><TD>C</TD><TD BGCOLOR="#FFFF00">D</TD></TR>

</TABLE>

</BODY>

</HTML>

Атрибут CELLSPACINGтэгаTABLE задает расстояние между ячейками в пикселях, другой атрибутCELLPADDING– расстояние от рамки до содержимого ячейки в пикселях.

Пример:

<HTML>

<HEAD>

<TITLE>Мой первый шаг</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=3 BGCOLOR="#FFFF00" CELLSPACING=10 CELLPADDING=5>

<TR><TD>A</TD><TD>B</TD></TR>

<TR><TD>C</TD><TD>D</TD></TR>

</TABLE>

</BODY>

</HTML>

Атрибуты WIDTH и HEIGHTзадают ширину и высоту соответственно как всей таблицы, так и конкретной ячейки (столбца). Ширина и высота могут задаваться как в пикселях, так и процентах.

Последующий пример демонстрирует работу описанных атрибутов. В данном случае задается ширина для всей таблицы (в процентах относительно ширины окна) и высота в пикселях второй строки.

Пример:

<HTML>

<HEAD>

<TITLE>Мой первый шаг</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=3 WIDTH=50%>

<TR><TD>A</TD><TD>B</TD></TR>

<TR HEIGHT=60><TD>C</TD><TD>D</TD></TR>

</TABLE>

</BODY>

</HTML>

Атрибут ALIGNтэгаTABLE определяет горизонтальное размещение таблицы. Может принимать значения LEFT (слева), RIGHT (справа) или CENTER (по центру).

Пример:

<HTML>

<HEAD>

<TITLE>Мой первый шаг</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=3 WIDTH=50% ALIGN="CENTER">

<TR><TD>A</TD><TD>B</TD></TR>

<TR><TD>C</TD><TD>D</TD></TR>

</TABLE>

</BODY>

</HTML>

Атрибут ALIGNтэгаTDопределяет горизонтальное размещение данных в ячейках.

Может также принимать значения LEFT (слева), RIGHT (справа) или CENTER (по центру).

Пример:

<HTML>

<HEAD>

<TITLE>Мой первый шаг</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=3 WIDTH=50%>

<TR><TD ALIGN="RIGHT">A</TD><TD>B</TD></TR>

<TR><TD>C</TD><TD ALIGN="RIGHT">D</TD></TR>

</TABLE>

</BODY>

</HTML>

Атрибут VALIGNтэгаTDопределяет вертикальное размещение данных в ячейках.

Может принимать значения TOP(по верхнему краю),BOTTOM(по нижнему краю) илиMIDDLE(посередине).

Пример:

<HTML>

<HEAD>

<TITLE>Мой первый шаг</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=3 WIDTH=50%>

<TR HEIGHT=50><TD VALIGN="TOP">A</TD><TD>B</TD></TR>

<TR HEIGHT=50><TD>C</TD><TD VALIGN="BOTTOM">D</TD></TR>

</TABLE>

</BODY>

</HTML>

С помощью таблицы можно расположить текст в несколько колонок. Для этого достаточно обнулить атрибут BORDERи установитьCELLSPACINGравным желаемому просвету между ячейками.BORDER=0 можно не писать – таблица по умолчанию обрамления не имеет.

Пример:

<HTML>

<HEAD>

<TITLE>Мой первый шаг</TITLE>

</HEAD>

<BODY>

<TABLE WIDTH=50% CELLSPACING=20>

<TR><TD>Текст первой колонки</TD>

<TD>Текст второй колонки</TD></TR>

</TABLE>

</BODY>

</HTML>

Таблицы допускают объединение столбцов и/или строк при помощи атрибутов COLSPAN иROWSPAN тэгаTD. Значения этих атрибутов указывают, на сколько столбцов вправо или строк вниз соответственно распространяется данная ячейка.

Пример 1:

<HTML>

<HEAD>

<TITLE>Мой первый шаг</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=3 WIDTH=50%>

<TR HEIGHT=50><TD COLSPAN=2>A</TD></TR>

<TR HEIGHT=50><TD>C</TD><TD>D</TD></TR>

</TABLE>

</BODY>

</HTML>

Пример 2:

<HTML>

<HEAD>

<TITLE>Мой первый шаг</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=3 WIDTH=50%>

<TR><TD ROWSPAN=2>A</TD><TD>B</TD></TR>

<TR><TD>D</TD></TR>

</TABLE>

</BODY>

</HTML>

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

Пример:

<HTML>

<HEAD>

<TITLE>Мой первый шаг</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=3 WIDTH=50% ALIGN="CENTER">

<TR><TD><TABLE BORDER=3 WIDTH=100%>

<TR><TD>A1.1</TD><TD>A1.2</TD> </TR>

<TR><TD>A2.1</TD><TD>A2.2</TD> </TR></TABLE>

</TD><TD>B</TD></TR>

<TR><TD>C</TD><TD>D</TD></TR>

</TABLE>

</BODY>

</HTML>

2.1.10. Фреймы

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

Фрейм– подокно, в которое загружается отдельнаяWeb-страница.

Разбиение окна браузера на фреймы реализуется следующим образом:

• создаются отдельные HTMLстраницы для каждого фрейма.

Пример: создадим файлы name.htm, menu.htm, content.htm.

name.htm:

<HTML>

<HEAD>

</HEAD>

<BODY BGCOLOR="red">

Name

</BODY>

</HTML>

menu.htm:

<HTML>

<HEAD>

</HEAD>

<BODY BGCOLOR="cyan">

Menu

</BODY>

</HTML>

content.htm:

<HTML>

<HEAD>

</HEAD>

<BODY BGCOLOR="green">

Content

</BODY>

</HTML>

• создается главный HTML-файл (обычно это первая страница сервера по имени index.htm).

В данном файле отсутствует тэг BODY, а вместо него используется тэг FRAMESET, содержащий описание внутренних фреймов. Указывается сколько документов откроется одновременно в окне браузера, сколько места будет занимать каждый, каким образом они будут располагаться: можно разделить экран на несколько вертикальных или несколько горизонтальных фреймов (рис.2.1).

Рис. 2.1. Примеры расположения фреймов на Web-странице

Атрибуты тэга FRAMESET:

1.COLS– подразделяет экран на определенное количество вертикальных колонок.

2. ROWS– подразделяет экран на определенное количество горизонтальных колонок.

Размеры колонок перечисляются через запятую (сколько колонок, столько и размеров) и могут быть выражены:

– в пикселах,

– в процентах относительно размера окна,

– в ( *) долях между собой(символ*указывает на то, что все оставшееся место будет принадлежать данному фрейму; если указывается два или более фрейма с описанием*(например COLS=*, 30%, *), то оставшееся пространство делится поровну между этими фреймами).

Тэг FRAME содержит описание отдельного фрейма. Его атрибутSRC описывает адрес документа, который будет отображен внутри данного фрейма. Если этот атрибут отсутствует, то отображается пустой фрейм.

Пример 1 (соответствует рис. 2.1а):

<HTML>

<HEAD> <TITLE>Страница с фреймами</TITLE></HEAD><FRAMESET ROWS="25%,*,25%"><FRAME SRC="name.htm"><FRAME SRC="menu.htm"> <FRAME SRC="content.htm"> </FRAMESET>

</HTML>

Пример 2 (соответствует рис. 2.1б):

<HTML>

<HEAD> <TITLE>Страница с фреймами</TITLE> </HEAD> <FRAMESET COLS="100,*,50%"> <FRAME SRC="name.htm"> <FRAME SRC="menu.htm"> <FRAME SRC="content.htm"> </FRAMESET>

</HTML>

Пример 3 (соответствует рис. 2.1в):

<HTML>

<HEAD> <TITLE>Страница с фреймами</TITLE> </HEAD> <FRAMESET COLS="*,50%">

<FRAMESET ROWS="100,*"> <FRAME SRC="name.htm"> <FRAME SRC="menu.htm">

</FRAMESET> <FRAME SRC="content.htm"> </FRAMESET>

</HTML>

Атрибут NAMEтегаFRAMEзадает имя данного фрейма.

Имя необходимо для того, чтобы в последствии указать к какому фрейму использовать ссылку. Например, если необходимо, чтобы при нажатии на ссылку в одном фрейме содержимое файла ссылки показывалось в другом фрейме, используется атрибут TARGET тэгаA.

Пример:

<A HREF="имя_файла" TARGET="имя_фрейма">текст ссылки</A>

2.2. Специализированные средства создания Web-страниц

Популярность службы WWW во многом определяется тем, что пользователи могут не только просматривать сайты, но и создавать собственные. Процесс создания и функционирования Web-сайта иллюстрируется схемой, изображенной на рис. 2.2. У каждого сайта есть разработчик, который на своем компьютере готовит исходные материалы: графику, медиаданные (звук, анимация), используя соответствующие редакторы, и непосредственно разрабатывает сайт, применяя тот или иной HTML-редактор. Обычно сайт разрабатывается на локальном компьютере, тестируется, а затем переносится на Web-сервер при помощи FTP-протокола. После опубликования материал становится доступен для всех посетителей. Если пользователи имеют право только на просмотр сайта, то разработчики имеют возможность обновлять и изменять содержимое своего сайта.

Создать HTML-документ можно с использованием обычного текстового редактора. Например, с помощью входящей в Windows программы Notepad. В данном случае разработчик пишет HTML-код «с нуля», не используя ни шаблонов, ни подсказок. Несмотря на то что текстовый редактор не предоставляет никаких вспомогательных средств, многие профессионалы утверждают, что используют в качестве HTML-редактора именно Notepad.

Особо следует отметить офисные приложения. Как уже говорилось, все приложения Microsoft Office позволяют сохранить результат работы в HTML-формате. Многие домашние пользователи выбирают Microsoft Word или Microsoft Publisher в качестве средства разработки простых Web-страниц. Правда, HTML-код в этом случае не будет оптимальным.

Рис. 2.2. Схема разработки и просмотра Web-сайта

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

В целях уменьшения размера Web-страницы, в Word 2003 можно сохранять данные в специальном фильтрованном формате (filtered HTML), в этом случае лишние тэги будут удалены.

Однако, если открыть Web-страницу, сохраненную в режиме filtered HTML в программе Word, вероятно, некоторые возможности редактирования этого документа будут утрачены. Поэтому следует использовать режим filtered HTML только на финальной стадии, перед непосредственным переводом в HTML.

Несмотря на то, что простые Web-страницы можно создавать, не прибегая к помощи специализированных HTML-редакторов, заниматься разработкой и поддержкой более-менее солидных сайтов без них невозможно.

Все имеющиеся на рынке HTML-редакторы можно разделить на две большие группы:

• программы, имеющие в своем составе визуальные редакторы (design-based editors) - средства, которые автоматически формируют необходимый HTML-код, позволяя разрабатывать Web-страницы в режиме WYSIWYG (What You See Is What You Get – «что вижу, то и получаю»);

• программы-редакторы, которые предоставляют редактор и вспомогательные средства для автоматизации написания кода (code-based editors).

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

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

Существуют и компромиссные решения: например Microsoft FrontPage и Macromedia Dreamveawer имеют не только визуальные средства, но и весьма развитые редакторы кода. В последней версии FrontPage 2003 реализован даже сдвоенный режим, в котором пользователь может наблюдать, как действия визуального редактора приводят к изменению кода.

При этом очевидно, что чем выше профессионализм пользователя, тем меньше готовых шаблонов, макетов и подсказок ему требуется.

2.3. ПубликацияWeb-страниц

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

Компьютер-сервер, выступающий в роли своеобразного «хозяина» (host) Web-страниц называетсяWeb-хостом. Компании, которые управляют такимиWeb-хостами, называются поставщиками услугWeb-хостинга, илихостинг-провайдерами.

Хостинг-провайдеры могут быть разделены на два класса:

• поставщики бесплатного хостинга;

• коммерческие поставщики хостинга.

Поставщики первой категории предоставляют бесплатные услуги по размещению Web-сайтов, однако при таком размещении почти всегда существуют некоторые ограничения, которые относятся к объему данных, которые можно сохранить, так и к типу этих данных (запрет на рекламу, например). Возможно также от пользователя потребуют, чтобы на странице был размещен баннер с рекламой поставщика услуг хостинга.

При выборе поставщика услуг второй категории пользователь обычно вносит плату за открытие учетной записи, а затем вносит ежемесячную плату.

Основные параметры Web-хостов:

• дисковое пространство

Предоставляемый пользователю объем дискового пространства сервера, предназначенный для хранения файлов Web-сайтов. Как правило, чем больше плата за хост, тем больше доступный объем дискового пространства.

• пропускная способность

Объем данных, поставляемый сервером в сеть. Большинство хостов задают предел пропускной способности, который чаще всего равен нескольким мегабайтам или гигабайтам в месяц. Как правило, чем больше плата за хост, тем больше его пропускная способность.

• доступное время

Время в процентном выражении, когда сервер включен в работу. Не бывает стопроцентного доступного времени, потому что все серверы рано или поздно нуждаются в ремонте и модернизации. На лучших хостах доступное время составляет более 99 %.

• доменное имя

Общий адрес сервера, например: mcfedries.ru, whitehouse.gov. Простые имена легче запомнить чем запутанные адреса.

После оформления учетной записи, Web-администратор, управляющий работой хоста, создает для пользователя папку, предназначенную для хранения своих файлов. Эта папка обычно имеет вид:

/имя_пользователя/

/usr/имя_пользователя/

/usr/имя_пользователя/www-dosc/

В данном случае имя_пользователя– зарегистрированное имя пользователя (логин). Как правило, пользователь имеет право:

• добавлять файлы в папку;

• добавлять вложенные папки;

• перемещать или копировать файлы из одной папки в другую;

• переименовывать файлы или папки;

• удалять файлы из папки.

Обычно Web-адрес пользователя имеет вид, близкий к одному из приведенных:

http://provider/имя_пользователя/

http:/ имя_пользователя.provider/

http://www. имя_пользователя/

где provider – имя хоста провайдера.