|
Технология оформления Web-страницы
1. Тема. Составление Web-страницы с помощью языка разметки гипертекста HTML (HyperText Markup Language).
2. Постановка задачи. Написать Web-страницу в редакторе Блокнот с использованием графики и гипертекста.
3. Краткая справка по WWW (World Wide Web – “Всемирная паутина”).
3.1. Информационная служба WWW на сегодняшний день является самой молодой (основана в 1992 году) и самой перспективной, так как это единственная мультимедийная информационная служба Интернета.
Основу Web составляют взаимосвязанные электронные страницы информации, называемые Web-страницами, на компьютерах (Web–серверах), постоянно подключенных к сети Интернет.
Web-страница - это мультимедийный гипертекстовый документ, состоящий из текстовой, графической, аудио-, видеоинформации.
Гипертекстом называют электронный документ, содержащий гиперссылки на другие документы.
Под гиперссылкой понимается установленная связь между элементом текста или графическим объектом и другой Web-страницей через закодированный адрес. Это не что иное, как электронный указатель на другой ресурс. Гиперссылки делают документ интерактивным.
Группу связанных страниц на одном компьютере, имеющем определенное имя, называют "сайт" (Site - узел).
Web-страница - это обычный файл в ASCII-кодировке с произвольным именем и расширением htm (html). Расширение html (иногда последний символ l опускают) указывает на то, что этот файл написан на языке разметки гипертекста (Hyper Text Markup Language). Возможны другие расширения файлов: ASP, PHP и др.
Пользователь может "посещать" Web-страницы только при установлении связи с поставщиком услуг Интернета с помощью специального клиентского программного обеспечения. Сегодня на рынке программных продуктов Интернета лидирующие позиции занимают две программы: Microsoft Internet Explorer фирмы Microsoft и Netscape Navigator фирмы Netscape Communication. В наш быт эти программы вошли под названием "броузеры Интернет" или "Интернет навигаторы".
Фактически все броузеры выполняют одну задачу: соединение с ресурсом по указанному адресу в Интернет и копирование этого ресурса (в данном случае Web-страницы) на компьютер пользователя.
Написание Web-страниц осуществляется по определенным правилам. Эти правила определяются языком разметки гипертекста HTML.
Средствами HTML задаются синтаксис и размещение специальных встроенных указаний, в соответствии с которыми программа навигации по Интернету отображает содержимое документа: текст, изображение, гиперссылки и данные других типов.
Для написания Web-страницы прежде всего необходим Web-редактор. На сегодняшний день таких программ достаточно много: от самых простых (таких, как встроенный редактор в Norton Commander, Блокнот в Windows и других программ, создающих файлы в кодировке ASCII), до мощных систем визуального написания Web-документов (таких, как Microsoft Front Page, Home site, Netscape Gold).
На практических занятиях используется простейший редактор Kenn Nesbitt's WebEdit 2.0, где вся программа набирается вручную.
3.2. Структура и синтаксис написания HTML-документа.
HTML-документ состоит из:
-текста, который представляет собой содержимое документа,
-тегов (tags), которые определяют структуры и внешний вид документа при его отображении броузером.
Тег - это зарезервированное слово, заключенное в угловые скобки ”< >”. Теги помещаются перед и после текстовых блоков и сообщают броузеру о том, каким элементом является данный текстовый блок.
Тег состоит из имени, за которым может следовать необязательный список атрибутов тега и их параметров. Атрибуты уточняют тег и отделяются от имени тега и между собой пробелами. Атрибуты в теге могут быть записаны в любом порядке. Параметр атрибута, если таковой имеется, следует за знаком равенства и определяется в кавычки. Если значение атрибута состоит из одного слова или числа, кавычки можно опускать.
Схематически тег выглядит так:
<имя_тега атрибут тега=”параметр_атрибута”>
|
По расположению в текстовом блоке различают начальные и конечные теги. Атрибуты имеет только начальный тег. Перед конечным тегом всегда ставится слэш, и конечный тег никогда не имеет атрибутов. Например, текст всего Web-документа заключается в теги <html> . . . </html>.
Некоторые HTML-теги не имеют конечного компонента, поскольку они являются автономными элементами, например:
<img> - вставка графического изображения,
<br> - разрыв строки,
<hr> - горизонтальная линейка.
В некоторых случаях конечные теги в документе можно опускать. Самый распространенный тег такого типа - тег абзаца <р>. Поскольку он используется в документе очень часто, то его обычно ставят только в начале (или только в конце) каждого абзаца.
Текст Web-документа состоит из двух разделов: заголовка и тела, которые выделяются соответственно тегами <head> . . . </head> и <body> . . . </body>.
В заголовке указывается служебная информация для программ–броузеров (Текст, заключенный в теги <title> . . . </title>, будет отображаться в строке заголовка броузера).
Тело - это та часть, в которую помещается собственно содержимое HTML-документа: текст, ссылки на файлы, содержащие дополнительные файлы (графику, звук), и обозначаются точки привязки (гиперссылки).
Вложенные теги нужно закрывать, начиная с самого последнего и двигаясь к первому.
Структурно Web–страницу можно представить следующим образом:
<html>
<head>
…
</head>
<body>
…
</body>
</html>
Обратите внимание: для тегов <head> и <body> сделан отступ, а конечные теги по вертикали размещены строго напротив начальных. На работу программы это не влияет, делается это только для удобочитаемости.
3.3. Наиболее распространенные теги и их атрибуты. Примечание. Три точки между тегами означают вложенность текстовых фрагментов или других тегов.
3.3.1. <html> . . . </html> - начальный и конечный теги всего HTML-документа.
3.3.2. <head> . . . </head> - начальный и конечный теги заголовка документа.
3.3.3. <title> . . . </title> - начальный и конечный теги названия HTML-документа.
3.3.4. <body . . .> . . . </body> - начальный и конечный теги тела документа.
Атрибуты:
Background="url" – указывается URL фонового изображения Web–страницы.
Если фоновое изображение находится на другом компьютере в Интернете (предположим в Австралии), то указывается полный URL: <body background=”http://www.bit.net.au/~asg/tile1.GIF”>, если фоновое изображение находится на текущем компьютере, например, в соподчиненном каталоге Images, то применяется сокращенная запись URL: <body background=”Images/Graytex.gif”>.
Bgcolor= "цвет" – задается цвет фона Web–страницы. Параметр “цвет” можно указывать как шестиразрядное шестнадцатеричное число, с помощью которого задается соотношение красной, зеленой и синей составляющих цвета (Red–Green–Blue) и интенсивность каждой из них. Первые две цифры соответствуют красной составляющей, следующие две — зеленой, последние две — синей. Значение 00 означает, что составляющая полностью исключена, а значение FF (в десятеричной системе счисления – 255) — что максимально присутствует. Таким образом, код ярко-красного цвета — FF0000, код ярко-зеленого — 00FF00, код ярко-синего — 0000FF. Остальные основные цвета образованы смешением этих трех составляющих, например FFFF00 (желтый), FF00FF (малиновый), 00FFFF (бирюзовый). Коды белого (FFFFFF) и черного (000000) цветов тоже очень легко вычислить.
В теге цвет задается путем указания соответствующей RGB-триады, перед которой ставится знак #. Например, чтобы определить малиновый цвет фона Web–страницы, необходимо указать следующий тег: <BODY Bgcolor="#FF00FF">.
Link= "цвет" – установка цвета "непосещенных" гипертекстовых ссылок в документе.
Vlink= "цвет" – установка цвета "посещенных" ссылок в документе.
Tехt="цвет" – установка цвета обычного текста в документе.
Рассмотрим пример написания тега <Body> при создании Web-страницы с синим фоном, шрифт на странице – желтый, цвет посещенных гиперссылок – красный: <Body BgColor=”#0000FF” Vlink=”#FF0000” Text=”#FFFF00”>.
3.3.5. <а. . .> . . . </а> - в документе создается гиперссылка.
Атрибуты:
href="url" – указывается URL-адрес целевого документа гиперссылки. Например, чтобы определить ссылку на Web–страницу Российского государственного университета физической культуры, спорта и туризма, необходимо указать следующую запись: <a HREF="http://www. *****/">РГУФК</a>. Можно указать команду, которая бы по щелчку мыши открывала автоматически окно электронной почты </a>.
3.3.6. <font . . .> . . . </font> - установка размера, цвета или гарнитуры заключенного в теги текста.
Атрибуты:
Со1оr="цвет" – установка цвета заключенного в теги текста.
Face= "список" – установка гарнитуры заключенного в теги текста.
Size= "значение" – размер шрифта устанавливается равным заданному абсолютному значению от 1 до 7.
3.3.7. <р . . .> - новый абзац.
Атрибуты:
Аlign="позиция" – задается способ выравнивания текста в абзаце: по левому краю (left), центру (center) или правому краю (right).
3.3.8. <center> . . . </center> - размещение заключенного в теги текста по центру.
3.3.9. <br> - разрыв текущего текстового потока и возобновление его с начала следующей строки.
3.3.10. <sup> . . . </sup> - заключенный в теги текст будет смещен вверх (верхний индекс).
3.3.11. <b> . . . </b> - заключенный в теги текст будет отображаться полужирным шрифтом.
3.3.12. <i> . . . </i> - заключенный в теги текст будет отображаться в курсивном начертании.
3.3.13. <hr . . .> - разрыв текущего текстового потока. В месте разрыва будет вставлена горизонтальная линейка.
Атрибуты:
Аlign="позиция" – задается способ выравнивания линейки: по левому краю (left), центру (center, по умолчанию) или правому краю (right).
Size="n" – установка толщины линейки, равной целому числу пикселей (минимальная видимая точка на экране).
Width="n" – установка ширины линейки либо равной целому числу пикселей (например: Width=”150”), либо в процентах от ширины страницы (например: Width=”90%”).
3.3.14. <marquee . . .> . . . </marquee> - создается бегущая строка текста.
Атрибуты:
Аlign= "позиция" – задается размещение бегущей строки по вертикали относительно текста, в котором она расположена: вверху (top), по середине (middle) или внизу (bottom).
Bgсо1оr="цвет" – установка цвета фона бегущей строки.
height="n" – задается высота (в пикселях) зоны бегущей строки.
Width="n" – задается ширина зоны бегущей строки в пикселях.
Hspace="n" – задается размещение слева и справа от бегущей строки областей свободного пространства заданной ширины (в пикселях).
Vspace="n" – задается размещение над бегущей строкой и под ней областей свободного пространства заданной высоты (в пикселях).
3.3.15. <img . . .> - в текущий текстовый поток вставляется изображение.
Атрибуты:
Src="url"– указывается исходный URL-адрес изображения, подлежащего воспроизведению. Этот атрибут является необходимым.
Border="n" – указывается толщина в пикселях обрамления изображения.
Hspace="n" – задается размещение слева и справа от изображения областей свободного пространства шириной по п пикселей.
Vspace="n" – задается размещение над и под изображением областей свободного пространства высотой по п пикселей.
Height=”n" – задается высота изображения в пикселях.
Width="n" – указывается ширина изображения в пикселях.
3.3.16. <table . . .> . . . </table> - начальный и конечный теги таблицы.
Атрибуты:
Align="позиция" – задается способ выравнивания таблицы относительно текстового потока, в котором она находится: left (по левому краю), center (в центре), right (по правому краю).
Background="url" – указывается URL фонового изображения таблицы.
Bgcolor="цвет" – задается цвет фона всей таблицы (если указано фоновое изображение, цвет фона не задается).
Border=”n” – будет создано обрамление, образованное линиями толщиной п пикселей.
Bodercolor="цвет" – задается цвет обрамления всей таблицы.
Cellpadding="п" – между границами ячейки и ее содержимым поместить область свободного пространства шириной п пикселей.
Cellspacing="n" – задается интервал между ячейками таблицы размером в n пикселей.
Hspace="n" – задается размещение слева и справа от таблицы областей свободного пространства заданной ширины (в пикселях).
Vspace="n" – задается размещение над таблицей и под ней областей свободного пространства заданной высоты (в пикселях).
Width="n" – установка ширины таблицы в пикселях или в процентах от ширины окна.
3.3.17. <tr . . .> . . . </tr> - начальный и конечный теги строки ячеек в таблице.
Атрибуты:
Аlign="позиция" – задается способ выравнивания содержимого ячеек в данной строке: по левому краю (left), по центру (center) или по правому краю (right).
Bgcolor= "цвет" – задается цвет фона данной строки (приоритетно по отношению к фону таблицы).
Border="n" – создается обрамление, образованное линиями толщиной п пикселей.
Valign="позиция" – задается размещение содержимого ячеек в данной строке по вертикали: вверху (top), по центру (center), внизу (bottom).
3.3.18. <td . . .> . . . </td> – начальный и конечный теги ячейки данных таблицы.
Атрибуты:
Aliqn="позиция" – задается способ выравнивания содержимого ячейки: по левому краю (left), по центру (center) или по правому краю (right).
Bgcolor="цвem" – задается цвет фона ячейки (приоритетно по отношению к цвету фона строки).
Сolspan="n" – данная ячейка охватывает п соседних столбцов.
Rowspan="n" – данная ячейка охватывает п соседних строк.
Width="n" – задается ширина данной ячейки в пикселях или в процентах от ширины таблицы.
4. Общие замечания по написанию Web-страницы.
При написании Web-страницы обязательно указываются сначала начальный и конечный теги HTML-документа (<html>...</html>), внутри них теги заголовка (<head>...</head>) со служебной информацией (если таковая имеется) и только затем уже теги собственно тела документа (<body>...</body>), внутри которых вставляются теги, определяющие форму и содержание Web-страницы.
Если в теле документа возникает необходимость позиционировать графику и текст рядом на одной строке (а не последовательно по документу, как это происходит при стандартной компоновке), то необходимо вставить теги таблицы (<table>...</table>). Причем далее следует указать, сколько будет строк (<tr>...</tr>) и ячеек (<td>...</td>) в каждой строке, а затем по ячейкам распределить информацию в нужном соотношении. При необходимости можно сделать обрамляющие линии невидимыми, для этого указывается атрибут border="0" в начальном теге <table>.
Все графические изображения Web-документов (том числе и аудио и видео) – это отдельные файлы. С практической точки зрения их необходимо поместить в один каталог, соподчиненный каталогу, в котором находится HTML-файл и назвать его, например, Images.
|
