Web-сайты и Web-страницы
Публикации во Всемирной паутине реализуются в форме Web-сайтов. Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвященную какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц.
Сайт является интерактивным средством представления информации. Интерактивность сайта обеспечивают различные формы, с помощью которых посетитель сайта может зарегистрироваться на сайте, заполнить анкету и так далее.
Обычно сайт имеет титульную страницу (страницу с оглавлением), на которой имеются гиперссылки на его основные разделы (Web-страницы). Гиперссылки также имеются на других Web-страницах сайта, что обеспечивает возможность пользователю свободно перемещаться по сайту.
Web-сайты обычно являются мультимедийными, так как кроме текста могут содержать иллюстрации, анимацию, звуковую- и видеоинформацию.
Web-страницы сайта могут содержать динамические объекты (исполнимые модули), созданные с использованием сценариев на языках JavaScript и VBScript или элементов управления ActiveX. Расположенные на сайте управляющие элементы (например, кнопки) позволяют пользователю запускать те или иные динамические объекты.
Создание Web-сайтов реализуется с использованием языка разметки гипертекстовых документов HTML. Технология НТМL состоит в том, что в обычный текстовый документ вставляются управляющие символы (тэги) и в результате мы получаем Web-страницу. Браузер при загрузке Web-страницы представляет ее на экране в том виде, который задается тэгами.
Основными достоинствами НТМL-документов являются:
• малый информационный объем;
• возможность просмотра на персональных компьютерах, оснащенных различными операционными системами.
Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста. В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот.
Рассмотрим, как создаются Web-сайты, на примере разработки тематического сайта «Компьютер». Сначала необходимо разработать проект сайта, то есть определить, сколько Web-страниц будет входить в сайт, какова будет их тематика и как они будут связаны между собой.
Пусть наш сайт кроме титульной страницы «Компьютер» будет содержать:
• страницу «Программы», содержащую классификацию программного обеспечения;
• страницу «Словарь», содержащую словарь компьютерных терминов;
• страницу «Комплектующие» с ценами на устройства компьютера;
• страницу «Анкета», содержащую анкету для посетителей сайта.
Форматирование текста и размещение графики
Создание структуры Web-страницы. Приступим к созданию титульной Web-страницы сайта. Для этого используем привычный и достаточно удобный для этих целей текстовый редактор блокнот.
Создание Web-сайта «Компьютер»
1. Открыть окно текстового редактора блокнот.
Вид Web-страницы задается тэгами, которые заключаются в угловые скобки. Тэги могут быть одиночными или парными, для которых обязательно наличие открывающего и закрывающего тегов (такая пара тэгов называется контейнером). Закрывающий тэг содержит прямой слэш (/) перед обозначением. Тэги могут записываться как прописными, так и строчными буквами.
НТМL-код страницы помещается внутрь контейнера <HTML></НТМL>. Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать. Web-страница разделяется на две логические части: заголовок и содержание.
Заголовок Web-страницы заключается в контейнер <HEAD></HEAD> и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для ее правильного отображения.
Название Web-страницы содержится в контейнере <ТIТLE></ТIТLE> и отображается в строке заголовка браузера при просмотре страницы. Назовем нашу Web-страницу «Компьютер»:
<НЕАD>
<ТIТLЕ>Компыотер</ТIТLЕ>
</НЕАD>
Основное содержание страницы помещается в контейнер <BODY></BODY> и может включать текст, таблицы, бегущие строки, ссылки на графические изображения и звуковые файлы и так далее. Поместим для начала на страницу текст «Все о компьютере»:
<ВОDY>
Все о компьютере
</ВОDY>
Созданную Web-страницу необходимо сохранить в виде файла. Принято сохранять титульный файл сайта, то есть тот, который первый загружается в браузер, под именем index.htm. В качестве расширения файла Web-страницы можно также использовать html.
Рекомендуется создать для размещения сайта специальную папку и сохранять все файлы разрабатываемого сайта в этой папке.
Необходимо различать имя файла index.htm, то есть имя, под которым Web-страница хранится в файловой системе, и собственно имя Web-страницы «Компьютер», которая высвечивается в верхней строке окна браузера и в первую очередь анализируется поисковыми системами. Имя Web-страницы должно в максимальной степени соответствовать ее содержанию.
2. В окне приложения блокнот ввести НТМL-код Web-страницы. Сохранить файл под именем index.htm в папке сайта. Загрузить этот файл в окно браузера для просмотра.
<HTML>
<НЕАD>
<ТIТLE>Компьютер</ТIТLЕ>
</НЕАD>
<ВODY>
Все о компьютере
</ВODY>
</HTML>
Форматирование текста. Пока страница выглядит не слишком привлекательно. Мелкий шрифт и черный текст на белом фоне почти не обращают на себя внимания. С помощью НТМL-тэгов можно задать различные параметры форматирования текста.
Размер шрифта для имеющихся в тексте заголовков задается тэгами от <Н1> (самый крупный) до <Н6> (самый мелкий). Заголовок страницы целесообразно выделить самым крупным шрифтом:
<Н1>Все о компыотере</Н1>
Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения. Так, заголовок по умолчанию выровнен по левому краю страницы, однако принято заголовок размещать по центру. Задать тип выравнивания заголовка для тэга заголовка по зволяет атрибут ALIGN, которому требуется присвоить определенное значение. Выравнивание по правой границе окна реализуется с помощью записи ALIGN ="right", а по центру — ALIGN ="center":
<Н1 ALIGN ="center">Все о компыотере</Н1>
С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта любого фрагмента текста. Атрибут FАСЕ позволяет задать гарнитуру шрифта (например, FАСЕ="Arial"), атрибут SIZE — размер шрифта (например, SIZE=4), атрибут СОLОR — цвет шрифта (например, СОLОR="blue").
Значение атрибута СОLОR можно задать либо названием цвета (например, "rеd", "green", "blue" и так далее), либо его шестнадцатеричным значением. Шестнадцатеричное представление цвета использует RGB-формат "#RRGGBB", где две первые щестнадцатеричные цифры задают интенсивность красного (red), две следующие — интенсивность зеленого (green) и две последние — интенсивность синего (blue) цветов. Минимальная интенсивность цвета задается шестнадцатеричным числом 00, а максимальная — FF. Легко догадаться, что синему цвету будет соответствовать значение "#ООООFF".
Таким образом, задать синий цвет заголовка можно с помощью тэга FONT с атрибутом СОLОR:
<FONT СОLОR="blue">
<Н1 ALIGN ="center">Все о компыотере</Н1>
</FONT>
Заголовок целесообразно отделить от остального содержания страницы горизонтальной линией с помощью одиночного тэга <НR>.
Разделение текста на абзацы производится с помощью контейнера <Р></Р>. При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания.
На титульной странице обычно размещается текст, кратко описывающий содержание сайта. Поместим на титульную страницу текст, разбитый на абзацы с различным выравниванием:
<Р ALIGN ="left">На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.</Р>
<Р ALIGN ="right">Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.</Р>
Таким образом, если вставить в текст определенную последовательность тэгов, то мы получим Web -страницу, содержащую отцентрированный заголовок синего цвета, выводимый крупным шрифтом и отделенный горизонтальной линией от остального текста.
3. В окне приложения блокнот в контейнер <ВОDY> вставить последовательность тэгов и просмотреть результат в браузере:
<FONT СОLОR="blue">
<Н1 ALIGN ="center">
Все о компьютере
</Н1>
</FONT>
<НR>
<Р ALIGN ="left">На этом сайте...</Р>
<Р ALIGN ="right">
Терминологический
словарь...</Р>
Вставка изображений. На Web-страницы обычно помещают изображения, чтобы сделать их визуально более привлекательными. На Web-страницах могут размещаться графические файлы трех форматов — GIF, JPG и PNG. Если рисунок сохранен в другом формате, то его необходимо предварительно преобразовать в один из вышеуказанных форматов с помощью графического редактора. Для этих целей можно использовать редактор Photo Editor, который входит в пакет Microsoft Office.
На титульной странице создаваемого сайта уместно разместить изображение того объекта, которому посвящен сайт (в нашем случае — компьютера). Многочисленные фотографии компьютеров можно найти, например, на сайтах производителей и продавцов компьютерной техники.
4. «Скачать» изображение компьютера из Интернета и сохранить его в файле с именем computer.gif в каталоге сайта.
Для вставки изображения используется тэг <IMG> с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в том же каталоге, что и файл Web-страницы, то в качестве значения атрибута SRC достаточно указать только имя файла:
<IМG SRC="computer.gif ">
Если файл находится в другом каталоге на данном локальном компьютере, то значением атрибута должно быть полное имя файла. Например:
<IМG SRC ="С: \computer\computer.gif ">
Если файл находится на удаленном сервере в Интернете, то должен быть указан URL-адрес этого файла. Например:
<IМG SRC ="http: //www.server.ru/computer.gif ">
Иллюстрации на Web-страницах стали неотъемлемым элементом дизайна. Однако пользователи иногда в целях экономии времени отключают в браузере загрузку графических изображений и читают только тексты. Поэтому, чтобы не терялся смысл и функциональность страницы, вместо рисунка должен выводиться поясняющий текст.
Поясняющий текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:
<IМG SRC="computer.gif " ALT="Компьютер">
Расположить рисунок относительно текста различными способами позволяет атрибут ALIGN тэга <IMG>, который может принимать пять различных значений: ТОР (верх), MIDDLE (середина), ВОТТОМ (низ), LEFT (слева) и RIGHT (справа).
Для того чтобы рисунок располагался по правому краю текста, тэг вставки изображения должен принять следующий вид:
< IМG SRC="computer.gif " ALT="Компьютер" ALIGN="right">
5. В окне приложения Блокнот в контейнер <ВОDY> вставить перед абзацами текста тэг вставки изображения, просмотреть результат в браузере.
< IМG SRC="computer.gif " ALT="Компьютер" ALIGN="right">
Практические задания
Создать титульную страницу вашего сайта. Поэкспериментируйте с форматированием текста и размещением графики. Задайте для страницы фон.