Картинки и другие нетекстовые компоненты НЕ ВСТАВЛЯЮТСЯ в документ непосредственно и хранятся отдельно. Вместо этого в текст вставляется ссылка, указывающая программе просмотра имя файла, содержащего картинку. Стандартно поддерживаются только графические форматы файлов GIF и JPEG.
Для создания страничек совершенно необязательно иметь доступ к сети. Все известные программы просмотра (Netscape, Internet Explorer и т.д.) могут открыть файл с документом, находящийся на вашем жестком диске.
2.6. Структура HTML-файла
Минимальный (пустой) документ имеет вид: <HTML>
<HEAD>
<TITLE> здесь заголовок ОКНА Netscape </TITLE>
</HEAD>
<BODY bgcolor="white">
здесь собственно будет документ, а bgcolor=white определяет цвет фона (белый)
</BODY>
</HTML>
Многие тэги – парные (наподобие открывающих и закрывающих скобок), закрывающий тэг предваряется символом «/». Действие тэга распространяется на то, что находится между открывающим и закрывающим тэгами. Например, если Вы хотите выделить слова жирным шрифтом, Вы пишете <B> слово и еще слова </B>. Здесь <B> и </B> – флажки, указывающие программе просмотра, с какого и до какого места выводить текст жирным шрифтом:
какой-то текст сначала слово и еще слова какой-то текст потом
Большие и маленькие буквы не различаются, например <BR>, <Br> и <br> совершенно равноправны и одинаково вызывают принудительный перевод строки в тексте.
Программа просмотра (браузер) заменяет все последовательно идущие символы пробелов, табуляции и перевода строки на единственный пробел. То есть, если создатель web-страницы попытается сделать отступ в несколько пробелов или перейти на новую строку, не используя специальных тэгов, отступ будет сокращен до одного пробела и все будет воспринято как одна строка.
Просмотреть документ, загруженный в браузер, в его изначальном HTMLвиде можно с помощью меню View/Document Source (Netscape) или Вид/В виде HTML (Internet Explorer). Любой документ можно использовать как базу для создания своего собственного документа или как справочный материал по реализации того или иного приема разметки, встретившегося в документе.
Наиболее часто используемые тэги
<B></B> – Bold (жирный).
<I></I> – Italic (курсив).
16
<P> – Paragraph (абзац) – вызывает принудительный перевод строки и отступ в одну пустую строку.
<BR> – принудительный перевод строки.
<H1> </H1>, <H2> </H2>, ... <H6> </H6>– заголовки разных размеров, 1 –
самый крупный. Заголовок представляет собой жирный текст с отступами снизу и сверху. Заголовок по умолчанию не центруется.
<CENTER> </CENTER> – размещение по центру.
<PRE> </PRE> – Preformatted, текст внутри этого тэга выводится в строгом соответствии с тем, как он напечатан в HTML-файле, т.е. выводятся все пробелы, табуляции, отступы и переводы строк. При этом текст выводится шрифтом с фиксированной шириной символов (типа Courier).
<FONT COLOR="green" SIZE=5> </FONT> – установка цвета и размера букв текста. Оба параметра (цвет и размер) должны присутствовать одновременно.
<IMG SRC="filename.gif"> – вставить изображение из файла filename.gif.
Поддерживаются форматы gif и jpg.
<A HREF="http://www.openweb.ru"> мастерская </A> – сделать слово
«мастерская» гипертекстовой ссылкой на сервер www.openweb.ru. Слово будет выделено цветом и подчеркнуто. Ссылкой могут служить не только элементы текста, но и изображения. Для этого внутри тэга <A ...> надо поместить тэг <IMG ... >. Ссылаться можно не только на другие серверы, но и на файлы, расположенные на Вашем локальном диске, для этого в параметр HREF нужно просто поместить имя файла и, если нужно, путь по каталогам, считая от текущего каталога или корневого каталога сервера (где лежит начальный файл). Например:
<A HREF="../bio/biography.html"> <IMG SRC="my_portrait.jpg"> </A>
Изображение из файла my_portrait.jpg является ссылкой на файл biography.html, который находится в подкаталоге bio родительского («верхнего») каталога относительно текущего. Если же верхний каталог в данном случае является для сервера корневым (корневой каталог определяется в конфигурации сервера), то эта же ссылка может выглядеть:
<A HREF="/bio/biography.html"> <IMG SRC="my_portrait.jpg"> </A>
Тэги <FONT>, <IMG>, <A> иллюстрируют важный факт: кроме своего имени, тэги могут содержать (и часто содержат) один или больше параметров. Например, чтобы вставить в документ картинку, нужно не просто указать тэг <IMG>, а еще снабдить его параметром SRC="имя_файла" (без которого тэг <IMG> особого смысла не имеет). Часто параметры необязательны и служат для уточнения внешнего вида элемента:
<HR> изображается как горизонтальная канавка; <HR NOSHADE> – горизонтальная полоска;
<HR WIDTH=50%> – горизонтальная канавка шириной в половину экрана.
Дополнительные параметры тэга <IMG>:
<IMG SRC="filename" WIDTH=200 HEIGHT=100 BORDER=0 ALT="портрет">
WIDTH определяет ширину изображения в пикселях, HEIGHT – высоту, что позволяет растягивать или сжимать исходную картинку при ее отображении на экране. BORDER определяет толщину линии обрамления (0 – нет обрамле-
17
ния). ALT определяет надпись, выводимую вместо изображения в том случае, когда браузер не поддерживает графику либо загрузка изображений отключена в установках браузера (например, в случае плохой связи).
Таблицы
Таблица – это структура HTML, определяющая расположение частей документа на экране относительно друг друга. Таблица состоит из рядов, каждый из которых состоит из элементов. Элемент таблицы может содержать текст, рисунок, другую таблицу и т.п., то есть все то, что может содержать сам документ. В простейшем случае таблица – это традиционно понимаемая под этим словом таблица из текстовых ячеек.
Следующие тэги создают таблицу:
<TABLE WIDTH=100% BORDER=0> </TABLE> – начало и конец таблицы. Параметр WIDTH определяет ширину таблицы в процентах от ширины окна браузера либо в пикселях, если не указан знак %. Параметр BORDER определяет толщину линий обрамления ячеек таблицы, нулевое значение – нет обрамления. Любой из параметров может отсутствовать. Приведены значения параметров по умолчанию.
<TR> </TR> – начало и конец ряда таблицы, должен находиться внутри тэга <TABLE></TABLE>.
<TD WIDTH=20% ALIGN=left VALIGN=middle BGCOLOR="blue"> </TD> – определяет ячейку таблицы, должен находиться внутри тэга <TR></TR>. Параметр WIDTH определяет ширину ячейки в процентах от ширины таблицы или пикселях, если не указан знак % (по умолчанию устанавливается равная ширина ячеек). ALIGN и VALIGN определяют выравнивание содержимого внутри ячейки по горизонтали и вертикали соответственно, значения ALIGN: left, center, right, значения VALIGN: top, middle, bottom. BGCOLOR определяет цвет фона ячейки. Любой из параметров может отсутствовать.
Пример 1. Раскладка документа
Здесь какой-то текст
подпись
– записывается как однорядная таблица в полширины экрана с двумя ячейками (изображение находится в файле picture.gif):
<center>
<table width=50%> <tr>
<td align=center>
<img src="picture.gif"><br>подпись </td>
<td>Здесь какой-то текст</td> </tr>
</table>
</center>
18
Пример 2. Раскладка документа
Мир
Труд
Май
– записывается как трехрядная таблица, в каждом ряду по три ячейки, некоторые из них – пустые:
<center>
<table width=60%> <tr align=center>
<td width=33%><b><i>Мир</b></i></td> <td width=34%></td>
<td width=33%><img SRC="flag.gif"></td> </TR>
<tr align=center>
<td width=33%></td>
<td width=34%><b><i>Труд</b></i></td> <td width=33%></td>
</TR>
<tr align=center>
<td width=33%><img SRC="flag.gif"></td> <td width=34%></td>
<td width=33%><b><i>Май</b></i></td> </TR>
</TABLE>
</CENTER>
Создание гипертекстового документа можно разделить на следующие этапы:
•Вы создаете минимальный документ;
•вставляете внутрь флажков <BODY></BODY> Ваш текст;
•размечаете текст (параграфы, заголовки и т.д.);
•вставляете ссылки на картинки;
•вставляете гипертекстовые связи – ссылки на другие документы (серверы);
•создаете табличную раскладку документа, если это необходимо;
•загружаете готовый документ в программу просмотра и проверяете, так ли он выглядит, как Вы предполагали;
•проверяете работоспособность ссылок.
Если Ваша web-страница состоит из нескольких HTML-файлов, делайте ссылки на них локальными (т.е. без указания полного url, см. пример к тэгу <A>), это позволит странице быть работоспособной независимо от места ее размещения, также Вы сможете тестировать ее в процессе написания. Однако в каждом HTML-файле рекомендуется сделать хотя бы одну полную ссылку, например, на заглавный файл Вашей страницы.
Регистрация страницы
Если Вы создали web-страницу, ее необходимо разместить на каком-либо сервере, чтобы она была доступна через Интернет. Существует ряд серверов, на которых это можно сделать бесплатно (как русско-, так и англоязычные).
19