Форматирование текста и размещение графики

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-страницах

Довольно часто при размещении текста на Web-страницах удобно использовать списки в различных вариантах:

• нумерованные списки, когда элементы списка идентифицируются с помощью чисел;

• маркированные списки (в НТМL их принято называть ненумерованными), когда элементы списка идентифицируются с помощью специальных символов (маркеров);

• списки определений позволяют составлять перечни определений в так называемой словарной форме.

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

На странице «Программы» разместим' информациюобосновных типах программного обеспечения компьютера в форме вложенного списка.

Сначала создадим главный нумерованный список основных категорий программного обеспечения. Список располагается внутри контейнера <ОL></ОL>, а каждый элемент списка определяется тэгом <LI>. С помощью атрибута ТУРЕ тэга <ОL> можно задать тип нумерации: арабские цифры (по умолчанию), "I" (римские цифры), "а" (строчные буквы) и др.

9. Открыть в Блокноте файлsoftware.htm,ввести заголовок «Программное обеспечение»и добавить следующий НТМL-код, задающий список:

<OL>

<LI>Системные программы

<LI>Прикладные программы

<LI>Системы программирования

</ОL>

Создадим теперь вложенный ненумерованный список для одного из элементов основного списка. Список располагается внутри контейнера <UL>/<UL>, а каждый элемент списка определяется также тэгом <LI>. С помощью атрибута ТУРЕ тэга <UL> можно задать вид маркера списка: "disc" (диск), "square" (квадрат) или "с1гс1е" (окружность).

10. Добавить НТМL-код, задающий вложенный список для элемента

<LI> Прикладные программы:

<UL>

текстовые редакторы;

<LI> графические

редакторы;

<LI> электронные таблицы;

<LI> системы управления

базами данных.

</UL>

Страницу «Словарь» мы представим в виде словаря компьютерных терминов.

Для этого используем контейнер списка определений </DL>. Внутри него текст оформляется в виде термина, который выделяется непарным тэгом <DТ>, и определения, которое следует за тэгом <DD>.

Форматирование текста и размещение графики - student2.ru 11. Открыть в Блокноте файл glossary.HTM, ввести заголовок «Компьютерные термины» и добавить следующий НТМL-код, задающий список определений:

<DL>

<DT>Процессор

<DD>Центральное устройство компьютера, производящее обработку информации в двоичном коде.

<DT>Оперативная память

<DD>Устройство, в котором хранятся программы и

данные.

</DL>

Практическое задание

Разместить на Web-странице вложенный список, содержащий разные типы списков.

Формы на Web-страницах

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

Разместим на странице «Анкета» анкету для посетителей, чтобы выяснить, кто из наших посетителей, с какими целями и с помощью каких программ получает и использует информацию из сети Интернет, а также выясним, какую информацию они хотели бы видеть на нашем сайте.

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

Текстовые поля. Для получения этих данных разместим на форме два однострочных текстовых поля для ввода информации. Текстовые поля создаются с помощью тэга <INPUT> со значением атрибута ТУРЕ="text". Атрибут NАМЕ является обязательным и служит для идентификации полученной информации. Значением атрибута SIZE является число, задающее длину поля ввода в символах.

Для того чтобы анкета «читалась», необходимо разделить строки с помощью тэга перевода строки <ВR>.

12. Открыть в Блокноте файл аnketa.htm и добавить НТМL-код, создающий текстовые поля для ввода данных. Просмотреть страницу в браузере:

Форматирование текста и размещение графики - student2.ru <FORM>

Пожалуйста, введите ваше

имя: <ВR>

<INPUT TYPE="text"

NAME="name" SIZE=30> <ВR>

Е-mail: <ВR>

<INPUT TYPE="text"

NAME="е-mail" SIZE=30>

<BR>

</FORM>

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

Для этого необходимо создать группу переключателей («радиокнопок»). Создается такая группа с помощью тэга <INPUT> со значением атрибута ТУРЕ="гаdio". Все элементы в группе должны иметь одинаковые значения атрибута NAME. Например, NАМЕ="group".

Еще одним обязательным атрибутом является VALUE, которому присвоим значения "schoolboy", "student" и "teacher". Значение атрибута VALUE должно быть уникальным для каждой «радиокнопки», так как при ее выборе именно они передаются серверу.

Атрибут снескеD, который задает выбор кнопки по умолчанию, в данном случае не используется.

13. Добавить НТМL-код, создающий группу переключателей для выбора одного варианта. Просмотреть страницу в браузере:

Укажите, к какой группе пользователей вы себя

относите: <ВR>

Форматирование текста и размещение графики - student2.ru <INPUT TYPE=" гаdio"

NАМЕ=" group" VALUE=

" schoolboy ">учащийся<ВR>

<INPUT TYPE=" гаdio"

NАМЕ=" group" VALUE=

" student" >студент<ВR>

<INPUT TYPE=" гаdio"

NАМЕ=" group" VALUE=

" teacher">учитель<ВR>

Флажки. Далее, мы хотим узнать, какими сервисами Интернета наш посетитель пользуется наиболее часто. Здесь из предложенного перечня он может выбрать одновременно несколько вариантов, пометив их флажками. Флажки создаются в тэге <INPUT> со значением атрибута ТУРЕ="сheckbox".

Флажки, объединенные в группу, могут иметь одинаковые значения атрибута NАМЕ. Например, NAME="group".

Еще одним обязательным атрибутом является VALUE, которому присвоим значения "www", "е-mail" и "ftp". Значение атрибута VALUE должно быть уникальным для каждого флажка, так как при его выборе именно они передаются серверу.

Атрибут СНЕСКЕD, который задает выбор кнопки по умолчанию, в данном случае не используется.

Форматирование текста и размещение графики - student2.ru 14. Добавить НТМL-код, создающий флажки для выбора нескольких вариантов. Просмотреть страницу в браузере:

Какие из сервисов Интернета вы

используете наиболее часто:

<ВR>

<INPUT TYPE="сheckbox"

NАМЕ=" group" VALUE="www">

WWW<ВR>

<INPUT TYPE="сheckbox"

NАМЕ=" group" VALUE="e-mail">

e-mail <ВR>

<INPUT TYPE="сheckbox"

NАМЕ=" group" VALUE="ftp">

FTP<ВR>

Поля списков. Теперь выясним, какой из браузеров предпочитает посетитель сайта. Перечень браузеров представим в виде раскрывающегося списка, из которого можно выбрать только один вариант. Для реализации такого списка используется контейнер <SELECT></SELЕСТ>, в котором каждый элемент списка определяется тэгом <ОРТION>. Выбираемый по умолчанию элемент задается с помощью атрибута SELECTED.

15. Добавить НТМL-код, создающий раскрывающийся список для выбора одного варианта. Просмотреть страницу в браузере:

Форматирование текста и размещение графики - student2.ru

<ОРТIОN SELECTED> Internet

Ехр1огег

Internet Ехр1огег

<ОРТIОN> Netscape Navigator

<ОРТIОN> Орега

<ОРТIОN> Neo Planet

</SELECT>

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

Создается такая область с помощью тэга <ТЕХТАRЕА> с обязательными атрибутами: NAME, задающим имя области, ROWS, определяющим число строк, и СОLS — число столбцов области.

16. Добавить НТМL-код, создающий текстовую область для ввода комментариев, просмотреть страницу в браузере:

Какую еще информацию вы хотели

бы видеть на нашемсайте?

Форматирование текста и размещение графики - student2.ru <BR>

<ТЕХТАRЕА NАМЕ="геsume"

ROWS=4 СОLS=30>

</ТЕХТАRЕА

<BR>

Отправка данных из формы. Отправка введенной в форму информации или очистка полей от уже введенной информации осуществляется с помощью кнопок. Кнопки создаются с помощью тэга <INPUT> . Для создания кнопки, которая отправляет информацию, атрибуту ТУРЕ необходимо присвоить значение "submit", а атрибуту VALUE, который задает надпись на кнопке, — значение "Отправить".

Для создания кнопки, которая производиточистку формы, атрибуту ТУРЕ необходимо присвоитьзначение "геset", а атрибуту VALUE— значение "Очистить".

17. Добавить НТМL-код, создающий кнопки, просмотреть страницу в браузере:

Форматирование текста и размещение графики - student2.ru <INPUT ТУРЕ="submit"

VALUE="Отправить">

<INPUT ТУРЕ="геset"

VALUE="Очистить">

Заполненная форма отправляется на сервер, где обрабатывается специальной программой СGI-скриптом, или по электронной почте автору сайта, где он уже самостоятельно обрабатывает полученные данные.

Для того чтобы при щелчке по кнопке «Отправить» данные из формы передавались на сервер и там обрабатывались, необходимо указать, куда их отправить и какая программа будет их обрабатывать. Эти параметры задаются с помощью атрибута астION контейнера <FORM>.

Атрибут АСТION определяет URL-адрес программы, расположенной на Web-сервере, которая обрабатывает полученные данные из формы. Пусть программой, которая заносит данные из формы в базу данных, будет программа Ьd.ехе. Обычно такие программы хранятся в каталоге cgi-bin. Тогда атрибут АСТION будет выглядеть следующим образом:

АСТION="http: /www.mycompany.гu/сgi-bin/Ьd.ехе"

Практическое задание

Разместите на своем сайте анкету для посетителей, использующую все известные вам элементы форм.

Основные тэги HTML

Назначение	Формат	Значения аргументов
Структура Web-страницы
Начало и конец страницы	<HTML></HTML>
Описание страницы, в том числе её имя	<HEAD></HEAD>
Имя страницы	<TITLE></TITLE>
Содержание страницы	<BODY></BODY>
Форматирование текста
Заголовок (уровни от 1 до 6)	<H?></H?>
Заголовок с выравниванием	<H? ALIGN=”*”></H?>	left center right
Абзац	<P></P>
Абзац с выравниванием	<P ALIGN=”*”></P>	left center right
Перевод строки	<BR>
Горизонтальный разделитель	<HR>
Выравнивание по центру	<CENTER></CENTER>
Адрес автора	<ADDRESS></ADDRESS>
Форматирование шрифта
Жирный	<B></B>
Курсив	<I></I>
Верхний индекс	<SUB></SUB>
Нижний индекс	<SUP></SUP>
Размер шрифта (от 1до 7)	<FONT SIZE=?></FONT>
Цвет шрифта (задается названием цвета или его 16-тиричным кодом)	<FONT COLOR=”#RRGGBB”> </FONT>	red blue #FFFFFF и др.
Гарнитура шрифта	<FONT FACE=”*”></FONT>	Arial, Tahoma, Times и др.
Вставка изображений
Вставка изображения	<IMG SRC=”URL”>
Выравнивание текста около изображения	<IMG SRC=”URL” ALIGN=”*”>	top bottom middle left right
Вывод текста вместо изображения	<IMG SRC=”URL” ALT=”*”>	текст
Цвет фона, текста и ссылок
Фоновое изображение	<BODY BACKGROUND=”URL”>
Цвет фона	<BODY BGCOLOR=”#RRGGBB”>	red blue #FFFFFF и др.
Цвет текста	<BODY TEXT=”#RRGGBB”>
Цвет ссылки	<BODY LINK=”#RRGGBB”>
Цвет пройденной ссылки	<BODY VLINK=”#RRGGBB”>
Цвет активной ссылки	<BODY ALINK=”#RRGGBB”>
Вставка гиперссылок
Ссылка на другую страницу	<A HREF=”URL”>указатель ссылки</A>
Ссылка на закладку в другом документе	<A HREF=”URL#*”>указатель ссылки</A>
Ссылка на закладку в том же документе	<A HREF=”#*”>указатель ссылки</A>
Определение закладки	<A NAME=”*”></A>
Списки
Ненумерованный	<UL><LI></UL>
Тип метки	<UL TYPE=”*”>	disk circle square
Нумерованный	<OL><LI></OL>
Тип нумерации	<OL TYPE=”*”>	A,a,I,i,1
Первый номер списка	<OL START=?>	1,2,...
Список определений <DT>термин <DD>определение	<DL> <DT> <DD> </DL>
Меню	<MENU><LI></MENU>
Каталог	<DIR><LI></DIR>
	Формы
Форма	<FORM></FORM>
Текстовое поле	<INPUT TYPE=”text” NAME=”name” SIZE=?>	1,2,...
Группа переключателей	<INPUT TYPE=”radio” NAME=”group” VALUE=”*”>	rad1 rad2 rad3
Группа флажков	<INPUT TYPE=”checkbox” NAME=”group” VALUE=”*”>	ch1 ch2 ch3
Раскрывающийся список	<SELECT NAME=”list”> <OPTION>Первый <OPTION>Второй </SELECT>
Текстовая область	<TEXTAREA NAME=”resume” ROWS=? COLS=?></TEXTAREA>	1,2,...
Кнопка Отправить	<INPUT TYPE=”submit” VALUE=”Отправить”>
Кнопка Очистить	<INPUT TYPE=”reset” VALUE=”Отправить”>