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

к оглавлению

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

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

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

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

Для создания Web-страниц используется язык разметки гипертекста HTML (Hyper Text Markup Language), созданный Тимом Бернерсом-Ли в 1989 г.

Код страницы набирается в любом текстовом редакторе (например, Блокнот) или специальной программе (например, Homepage Builder) и оформляется с помощью команд языка HTML. Тестируется html-файл с помощью любого браузера.

Web-страницы имеют формат * .htm или * .html.

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

Существует два типа тэгов:

непарные, например, <BR> — тэг перевода строки;
парные, например, <В>мама</В> — выделение слова «мама*> полужирным шрифтом.

Признаком окончания действия парного тэга служит слэш /.

Программы, написанные на языке HTML, имеют определенную стандартизированную структуру.

<html>

<head>

<title> Пробная страница</title>

</head>

<body>

</body>

</html>

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

<head>...</head> — определяет заголовок страницы, содержит справочную информацию о странице (название, используемая кодировка, ключевые слова и т.д.).

<title>...</title> — определяет название страницы, которое будет выведено в строке заголовка браузера.

<body>...</body> — определяет содержимое страницы, выводимое на экран монитора.

План создания

к оглавлению

Web-сайт будет включать следующее:

1. общие цели сайта;

2. структура сайта;

3. рекламная информация, предназначенная для повышения интереса к проекту и привлечения к нему сторонников;

4. презентация;

5. публикация;

6. дидактические материалы, разработанные с помощью Microsoft Word;

7. дидактические материалы, разработанные с помощью Microsoft Excel;

8. формы для проведения анкетирования;

9. ссылки на веб-сайты с аналогичной тематикой;

10. контактные данные: адрес личного сайта, адрес электронной почты и т. п.;

11. ссылки на использованные источники информации;

12. другое: _____________________________________

Критерии оценки веб-сайта

к оглавлению

Критерии оценивания

Фамилия____________________ Дата

	Максимальная оценка	Оценка ученика	Оценка учителя
Содержание
Соответствие цели работы	5
Правильная компоновка информации на странице	5
Полнота и подробность объяснения материала	20
Соответствие гиперссылок	5
Соответствие графики	5
Быстрая загрузка страницы	5
Грамотность научной лексики, наличие собственного словаря	15
Внешний вид
Ясность навигации	5
Внешний вид заголовков	5
Логичность ссылок	5
Насколько легко читается текст и качество графики	5
Комфортное сочетание цветовой гаммы	5
Соответствие определенному стилю	5
Грамотность
Орфография и синтаксис	10

Общая оценка	100
Качественная оценка

Подпись:

Алгоритмы

к оглавлению

1. Сохранение файла.

В окне приложения Блокнот ввести HTML-код Web-страницы. Сохранить файл под именем index.htm в папке сайта. Загрузить этот файл в окно браузера Internet Explorer для просмотра.

<html>

<head>

<title> Компьютер </title>

</head>

<body>

все о компьютере

</body>

</html>

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

Размер шрифта для имеющихся в тексте заголовков задается тэгами от <Н1> (самый крупный) до <Н6> (самый мелкий). Заголовок страницы целесообразно выделить самым крупным шрифтом:

<Н1>Все о компыотере</Н1>

Задать тип выравнивания заголовка для тэга заголовка позволяет атрибут ALIGN, которому требуется присвоить определенное значение. Выравнивание по правой границе окна реализуется с помощью записи ALIGN="right", а по центру — ALIGN="center":

<Н1 ALIGN="center">Bce о компыотере</Н1>

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

Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE="Arial"), атрибут SIZE — размер шрифта (например, SIZE=4), атрибут COLOR — цвет шрифта (например, COLOR="blue"). Значение атрибута COLOR можно задать либо названием цвета (например, "red", "green", "blue" и так далее), либо его шестнадцатеричным значением. Шестнадцатеричное представление цвета использует RGB-формат "IRRGGBB", где две первые щестнадцатеричные цифры задают интенсивность красного (red), две следующие — интенсивность зеленого (green) и две последние — интенсивность синего (blue) цветов. Минимальная интенсивность цвета задается шестнадцатеричным числом 00, а максимальная — FF. Легко догадаться, что синему цвету будет соответствовать значение "#OOOOFF".

Таким образом, задать синий цвет заголовка можно с помощью тэга FONT с атрибутом COLOR:

<Н1 ALIGN="center">Bce о компыотере</Н1>

</FONT>

Заголовок целесообразно отделить от остального содержания страницы горизонтальной линией с помощью одиночного тэга <HR>.

Разделение текста на абзацы производится с помощью контейнера <Р></Р>. При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания.

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

- В окне приложения Блокнот в контейнер <BODY> вставить последовательность тэгов и просмотреть результат в браузере:

<font color="blue">

<h1 align="center">

все о компьютере

</font>

<hr>

<p align="left">На этом сайте...</p>

<p align="right">Терминологический словарь...</p>

3. Вставка изображений.

На Web-страницах могут размещаться графические файлы трех форматов — GIF, JPG и PNG. Если рисунок сохранен в другом формате, то его необходимо предварительно преобразовать в один из вышеуказанных форматов с помощью графического редактора. Для этих целей можно использовать редактор Photo Editor, который входит в пакет Microsoft Office.

На титульной странице создаваемого сайта уместно разместить изображение того объекта, которому посвящен сайт.

Для вставки изображения используется тэг <IMG> с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в том же каталоге, что и файл Web-страницы, то в качестве значения атрибута SRC достаточно указать только имя файла:

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

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

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

Расположить рисунок относительно текста различными способами позволяет атрибут ALIGN тэга <IMG>, который может принимать пять различных значений: ТОР (верх), MIDDLE (середина), BOTTOM (низ), LEFT (слева) и RIGHT (справа).

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

В окне приложения Блокнот в контейнер <BODY> вставить перед абзацами текста тэг вставки изображения, просмотреть результат в браузере.

<IMG SRC="computer.gif" ALT="Компьютер" ALIGN="right">, предварительно сохранив рисунок компьютера под этим именем в папке, содержащей web-страницу.

4. Гиперссылки на Web-страницах

Для создания гиперсвязей между титульной страницей и другими страницами сайта необходимо, прежде всего, создать заготовки Web-страниц. Такие «пустые» страницы должны иметь заголовок, но могут пока не иметь содержания. Все создаваемые страницы необходимо сохранить в виде файлов в папке сайта.

Каждая страница будет содержать следующий HTML-код:

<HTML>

<HEAD>

<Т1ТLЕ>Заголовок страницы</Т1ТLЕ>

</HEAD>

<BODY>

</BODY> </HTML>

Создать пустые страницы «Программы», «Словарь», «Комплектующие» и «Анкета» и сохранить их в файлах с именами software.htm, glossary.htm, hardware.htm и anke-ta.htm в каталоге сайта.

Гиперссылка состоит из двух частей: указателя ссылки и адресной части ссылки. Указатель ссылки — это то, что мы видим на Web-странице (текст или рисунок), обычно выделенный синим цветом и подчеркиванием. Активизация гиперссылки вызывает переход на другую страницу.

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

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

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

Создадим панель навигации. Панель навигации будет представлять собой абзац, выровненный по центру, в котором указатели гиперссылок разделены пробелами (&nbsp). Для определения адреса перехода используется контейнер гиперссылки <А></А> с атрибутом HREF, значением которого является URL-адрес документа на локальном компьютере или в Интернете. Контейнер должен содержать указатель гиперссылки:

<Р ALIGN="center">

[<A HREF="software .htm">npoгpaммы</A>] &nbsp [<A HREF="glossary .htm">Cловарь</A>] &nbsp [<A HREF="hardware .htm ">Комплектующие</А>] &nbsp [<A HREF="anketa.htm">Aнкета</A>]

</p>

5. Списки на Web-страницах

Список располагается внутри контейнера <OL></OL>, а каждый элемент списка определяется тэгом <L1>. С помощью атрибута TYPE тэга <OL> можно задать тип нумерации: арабские цифры (по умолчанию), "I" (римские цифры), "а" (строчные буквы) и т.д.

Создание списка.

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

<OL>

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

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

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

</OL>

Создание вложенного списка.

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

Добавить HTML-код, задающий вложенный список для элемента < L1> Прикладные программы:

<UL>

<L1 TYPE="square"> текстовые редакторы;

<L1> графические редакторы;

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

<L1> системы управления базами данных.

</UL>

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

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

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

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

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

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

<FORM>

Пожалуйста, введите ваше имя: <BR>

<INPUT TYPE="text" NAME="name" S1ZE=30>

E-mail: <BR>

<INPUT TYPE="text"

NAME="e-mail" SIZE=30>

<BR>

</FORM>

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

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

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

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

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

<INPUT TYPE="radio" NAME=" group" VALUE="schoolboy">учащийся<ВR>

<INPUT TYPE="radio" NAME="group" VALUE=

"student">Cтудент<BR>

<INPUT TYPE="radio" NAME="group" VALUE=

"teacher">yчитeль<BR>

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

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

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

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

Какие из сервисов Интернета вы используете наиболее часто: <BR>

<INPUT TYPE="checkbox" NAME="group" VALUE="www"> WWW<BR>

<INPUT TYPE="checkbox" NAME="group" VALUE= "e-mail"> e-mail<BR>

<INPUT TYPE="checkbox" NAME="group" VALUE="ftp"> FTP<BR>

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

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

<SELECT NAME="browsers">

<OPTION SELECTED> Internet Explorer

Internet Explorer

<OPTION>

Netscape Navigator

<OPTION> Opera

<OPTION> Neo Planet

</SELECT>

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

Создается такая область с помощью тэга <TEXTAREA> с обязательными атрибутами: NAME, задающим имя области, ROWS, определяющим число строк, и COLS — число столбцов области.

Добавить HTML-код, создающий текстовую область для ввода комментариев, просмотреть страницу в браузере:

Какую еще информацию вы хотели бы видеть на нашем сайте?

<BR>

<TEXTAREA NAME="resume" ROWS=4 COLS=30>

</TEXTAREA>

<BR>

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

Для создания кнопки, которая производит очистку формы, атрибуту TYPE необходимо присвоить значение "reset", а атрибуту VALUE — значение "Очистить".

Добавить HTML-код, создающий кнопки, просмотреть страницу в браузере:

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

Задание

к оглавлению

Создать web-сайт по теме проекта, используя представленную выше информацию и алгоритмы.

к оглавлению

на главную

Сайт управляется системой uCoz

Фамилия__________________________________________ Дата ______________________

Содержание

Внешний вид

Грамотность

Общая оценка

Качественная оценка

Фамилия____________________ Дата