исследовать правильность написания сайта и его безошибочную работу.
Практическая значимость работы заключена в освоении языка написания сайтов HTML, приобретении навыков программирования и создания собственного сайта, презентации данного продукта, высокой оценки работы преподавателем, получения зачета, отсутствия хвоста и перехода на второй курс с улыбкой.
1. Структура HTML
страница рисунок таблица гиперссылка
Для разработки любого проекта, сначала создайте на диске папку, в которой будут храниться все файлы вашего будущего сайта. Стартовый файл должен иметь имя index.html.
Для редактирования файлов рекомендуется использовать простейший текстовый редактор, например "Блокнот" или "WordPad", но не в коем случае не используйте "WinWord". Это слишком умный редактор, который считает себя умнее вас и поэтому сам за вас решает, что и в каком виде он будет сохранять на диск. Поэтому используйте то, что попроще.
Наберем простейший код страницы
<HTML>
<HEAD>
<TITLE> Моя персональная страничка </TITLE>
</HEAD>
<BODY>
Всем привет
</BODY>
</HTML>
Сохраните ваш файл и запустите его через браузер, например "Internet Explorer".
Обратите внимание, что HTML страница содержит как обычный текст, так и команды разметки (tags или теги), заключенные в угловые скобки (< и >). Теги языка HTML задают правила, по которым браузер отображает документ на экране. Большинство тегов языка HTML, такие как <HTML>, <HEAD>, <TITLE> и другие, требуют соответствующую команду с символом </....> для ее закрытия, то есть тега конца команды. Рассмотрим теги нашего документа<HTML>Данный тег используется для открытия HTML-документа. Каждая Web-страница начинается тегом <HTML> и заканчивается закрывающим тегом </HTML>. <HEAD>Любой HTML-документ состоит как минимум из двух частей: заголовка и собственно документа. Данный тег определяет заголовок Web-страницы и должен иметь обязательный закрывающий тег</HEAD>. Также обязательным атрибутом этого тега является тег <TITLE>. <TITLE>Каждый HTML-документ имеет название, заключенное между тегами <TITLE> и </TITLE>. По названию документа HTML браузеры могут найти информацию, поэтому место для названия всегда определено - оно находится вверху и отдельно от содержимого HTML-документа. Отображается название в заголовке окна броузера, поэтому на него накладывается ограничение: максимальная длина названия - 40 символов. <BODY>Данный тег заключает в себе непосредственно документ. Также необходим закрывающий тег </BODY>. Атрибуты тега <BODY> Почти все теги в языке разметки Web-страниц имеют некоторые параметры, которые принято называть атрибутами. Они предназначены для модифицирования параметров документа, а их значения принято заключать в кавычки. Тег <BODY> имеет атрибуты, которые перечислены ниже:="..." - определяет цвет фона документа. Работа с цветами в HTML-документах будет рассмотрена ниже;="..." - указывает броузеру местоположение файла (*.gif или *.jpg), который необходимо использовать в качестве фонового рисунка. В кавычках указывается абсолютный или относительный путь к файлу. Окно полностью заполняется изображением, начиная с верхнего левого угла;="..." -устанавливает цвет текста;=" .." - определяет цвет активной ссылки;="..." - определяет цвет не просмотренной ссылки;="..." - определяет цвет просмотренной ссылки;="..." - устанавливает границу верхнего поля;="..." - граница левого поля;="fixed" - в случае установки данного параметра в значение fixed фоновое изображение не будет прокручиваться вместе с текстом;="..." - определяет те действия броузера, которые должны произойти после загрузки документа из сети.
Очень часто исходные коды программ сопровождаются комментариями. Они предназначены для сопровождения исходного кода программы пояснениями, которые, в свою очередь, облегчают понимание кода как самим разработчиком при его модифицировании, так и при чтении кода другими людьми. В спецификации HTML для комментариев определен специальный тег, который начинается символами <!-- и заканчивается символами -->. Текст, заключенный в теге комментария, не отображается в броузере.
.1 Цвета документа
Выбор цвета можно производить двумя способами: заданием имени или определением номера цвета по цветовой схеме RGB (Red, Green, Blue). Язык HTML поддерживает следующие имена Цветов: AQUA, BLACK, BLUE, FUCHSIA, GRAY, GREEN, LIME, MAROON, NAVY, OLIVE, PURPLE, RED, SILVER, TEAL, WHITE, YELLOW. Номер цвета RGB задается тремя двухзначными шестнадцатеричными числами, причем каждое число принадлежит интервалу от 00 до FF и определяет интенсивность соответствующего цвета. Например, номер цвета #FFOOOO соответствует красному цвету, так как имеет максимальную интенсивность для красного цвета, а зеленый и голубой имеют значения, равные нулю. Соответственно, номер #OOFFOO кодирует зеленый цвет, а номер #OOOOFF - синий. Белый цвет образуется в результате насыщения всех основных цветов, т.е. его кодом будет число #FFFFFF. В случае полного отсутствия всех трех цветов можно получить абсолютно черный цвет (код #000000). Очевидно, что, используя такую комбинацию шестнадцатеричных чисел, можно получить очень большое количество цветов. Для удобства, основные шестнадцать цветов, их коды и названия приведены в таблице
Основные цвета и их кодыЦветКод RGBИмяЦветКод RGBИмячерный#000000blackсеребряный#C0C0C0silverтемно-бордовый#800000maroonкрасный#FF0000redзеленый#008000greenизвесть#00FF00limeоливковый#808000oliveжелтый#FFFF00yellowтемно-синий#000080navyсиний#0000FFblueфиолетовый#800080purpleфуксия#FF00FFfuchsiaчирок#008080tealаква#00FFFFaqvaсерый#808080grayбелый#FFFFFFwhite
.2 Гиперссылки
Важнейшим понятием в HTML является гиперссылка, которая позволяет связать текст или какой-либо объект с другими гипертекстовыми документами. Текст, который является гиперссылкой, как правило, выделяется цветом и подчеркивается. Для определения ссылки используется тег <А>, структура которого имеет следующий вид: <А HREF="filename" target="_self">текст ссылки</A>.Атрибут HREF задает значение адреса документа, на который указывает ссылка, filename - имя файла или адрес Internet, на который необходимо сослаться, а текст_ссылки - текст гипертекстовой ссылки, который будет непосредственно показан в HTML-документе. Атрибут TARGET задает значение окна или фрейма, в котором будет открыт документ, на который указывает ссылка. Возможные значения атрибута:
_top - открытие документа в текущем окне
_blank - открытие документа в новом окне
_self - открытие документа в текущем фрейме
_parent - открытие документа в родительском фрейме
Значение по умолчанию: _self
Примеры:
<A href="photo/my_photo.html" target="_blank" >Moй фотоальбом</A> ссылается на файл my_photo.html, расположенный в каталоге photo, вложенном в текущую папку, и образует ссылку в виде текста "Мой фотоальбом". Документ откроется в новом окне.
<A href="aboutme.html" target=MainFrame >Немного обо мне</A> откроет страницу aboutme.html, расположенную в текщей папке, и образует ссылку в виде текста "Немного обо мне". Документ откроется во фрайме "MainFrame".
<A href="mailto:support@rol.ru">письмо в техподдержку</A> выполнят макрокоманду загрузки почтовой программы с автозаполнением адреса получателя.
Теперь попробуем применить наши новые знания на практике. Добавим в нашу страничку атрибуты тега <BODY> и ссылку на страничку в интернете. Изменим код странички:
<HTML>
<HEAD>
<TITLE>Моя домашняя страничка</TITLE>
</head>
<body bgcolor="#000000" ="Stars.gif" ="#ffffff" ="#DDOOOO"="#0000FF"="#FF00FF">
<br>
<br>
Добро пожаловать на мою домашнюю страничку!
<br>
<br>
<a href="#"justify">Поиск в интернете
</a>
</BODY>
</HTML>
В данном примере был использован еще один тэг <BR>, который позволяет задать принудительный перевод строки в пределах абзаца и является тегом прерывания строки. Для позиционирования различных элементов на Web-странице используют таблицы. С их помощью можно создавать обтекание рисунков, упорядочивать элементы форм, а также позиционировать другие элементы HTML-документа.
.3 Создание таблиц
Таблицы очень часто используют для позиционирования различных элементов на Web-странице. Описание таблиц в HTML-документах осуществляется с помощью контейнера <TABLE>...</TABLE>. Таблица задается двумя контейнерами тегов: <TR>...</TR> - описание строки таблицы и <TD>...</TD> - описание ячейки таблицы. По умолчанию текст внутри таблицы выравнивается по левому краю, а ширина столбца таблицы определяется наиболее длинным элементом в этом столбце. Рассмотрим пример простейшей таблицы:
<HTML>
<TITLE>Таблица</TITLE>
</HEAD>
<BODY>
<TABLE border="2"> <!-- Начало таблицы -->
<TR>
<TD colspan=2 align=center>
<B>Заголовок Таблицы.</В>
</TD>
</TR>
<TR>
<TD align="center">
Первая ячейка первой строки.
</TD>
<TD align="center">
Вторая ячейка первой строки.
</TD>
</TR>
<TR
<td align="center">
Первая ячейка второй строки.
</TD>
<TD align="center">
Вторая ячейка второй строки.
</TD>
</TR>
</TABLE> <!-- конец таблицы -->
</BODY>
</HTML>
Ширина таблицы задается атрибутом width="..." для тега <TABLE>, а значение ширины таблицы может задаваться в пикселях или в процентах от ширины экрана. Содержимое каждой ячейки может быть выровнено с помощью атрибутов align="..." (горизонтальное положение) и valign="..." (вертикальное положение) для тегов <TR> или <TD>. Атрибут valign="..." может принимать следующие значения: top - прижать вверх, bottom - прижать вниз и middle - разместить по центру, а атрибут align="..." принимает следующие значения: left - прижать влево, right - прижать вправо и center - разместить по центру. Атрибуты cellpadding="..." и cellspacing="..." определяют, соответственно, расстояние в пикселях между границей ячейки и ее содержимым, а также и между ячейками. Допускается добавлять к таблице, к строке или столбцу заголовок. Тег <CAPTION>, который располагается после тега <TABLE>, задает заголовок к таблице, центрируемый по умолчанию относительно таблицы. При помощи атрибутов align="..."или valign="..." заголовок можно разместить вверху (top) или внизу (bottom) и в левом (left) или правом (right) углу таблицы. Задание заголовка для строки или столбца таблицы осуществляется при помощи тега <TH> после тегов <TR> или <TD> соответственно. Атрибут border="..." тега <TABLE> рисует рамку вокруг таблицы и каждой ячейки, при этом ширина рамки задается в пикселях. Следует иметь в виду, что атрибуты colspan="..." и rowspan="..." тегов <TD> и <TR> позволяют объединять ячейки таблицы в группы, вокруг которых рисуется рамка.
Рассмотрим пример таблицы, занимающей по ширине весь экран броузера:
<TABLE border="1" width="100%">
<CAPTION>Пример таблицы</CAPTION>
<TR>
<TD width="66%" colspan="2">
<P align="center">
Две ячейки, объединенные по горизонтали
</TD>
</TR>
<TR>
<TD width="33%" rowspan="2" valign="middle">
Две ячейки, объединенные по вертикали
</TD>
<TD width="33%">левому краю
</TD>
</TR>
<TR>
<TD width="33%">
<P align="right">правому краю
</TD>
</TR>
</TABLE>
Вставка графических изображений В документах HTML кроме текста могут присутствовать графические изображения, для вставки которых используется тег <IMG> Допускается использование файлов в форматеGIF или JPG/JPEG, поскольку большинство броузеров имеют встроенные модули декодирования для воспроизведения данных форматов, а для систем, работающих под управлением операционных систем семейства Windows, допускается использование файлов формата BMP. Следующий пример демонстрирует вставку в документ JPG файла): <IMG src=foto.jpg width="542" height="407" alt="девушка твоей мечты"> Здесь атрибут src=" " определяет URL-адрес графического файла В приведенном примере файл будет размещен в области шириной 542 и высотой 407 пикселей соответственно. Если размеры, указанные атрибутами height=" " (высота) и width=" " (ширина), не совпадают с размерами графического файла, то последний масштабируется. Масштабирование может привести к резкому ухудшению качества графического файла, поэтому рекомендуется задавать размеры, соответствующие размерам графического файла, или не указывать их вообще. Но для больших графических файлов рекомендуется всегда задавать их размеры для ускорения работы броузера. Если размеры не заданы, то, встретив рисунок, броузер прекращает вывод текста и ждет загрузки всего рисунка для того, чтобы определить его размеры, а это задерживает загрузку страницы. Пример вставки рисунка:
<HTML>
<HEAD>
<TITLE>Картинки</TITLE>
</HEAD>
<BODY>
<IMG src="keyboard.jpg" width="560" height="373" alt="клавиатура">
</BODY>
</HTML>
Атрибут alt="..." указывает броузеру на то, какой именно текст следует подставить на место рисунка, если пользователь отключил загрузку графических файлов или из-за разрыва соединения файл не был загружен. Картинку можно так же использовать для указания на гиперссылку.
Например: <A HREF="index.html"><IMG SRC="snail.gif" border="0" alt="На главную страничку" height="84" width="92"></A> По умолчанию браузер рисует рамку вокруг рисунка, которая отмечена как гиперссылка. Для того чтобы убрать рамку используют атрибут border="..." в теге <IMG> с нулевым значением.
Создание абзацев В языке HTML имеется специальный тег, указывающий броузеру на то, что в данном месте текста (там, где находится этот тег) должен начинаться новый абзац. Этот тег обозначается следующим образом: <P>.
<HTML>
<HEAD>
<TITLE>Создание абзацев</TITLE>
</HEAD>
<BODY>
<P>Это первый абзац. Он очень маленький, но все же кое-какая информация в нем отображена.
<P>А это второй.
</HTML>
Если необходимо вставить в документ несколько пустых строк в документ необходимо использовать тег <BR>, поскольку броузер игнорирует все последующие теги <Р>, расположенные подряд и находящиеся после первого. Для тегов абзаца закрывающие теги </P> не являются обязательными, поскольку тег, указывающий на начало нового абзаца, одновременно указывает на конец предыдущего. Создание заголовков. Заголовки обозначают начала разделов документа. В языке HTML определено 6 уровней заголовков: от H1 до Н6. Текст, окруженный тегами <Н1>...</Н1>, получается большим - это основной заголовок. Если текст окружен тегами <Н2>...</Н2>, то он выглядит несколько меньше (подзаголовок); текст внутри <НЗ>...</НЗ> еще меньше и так далее до <Н6>...</Н6>. Наглядно примеры заголовков Вы можете посмотреть на этом примере.
<HTML>
<HEAD>
<TITLE>Создание заголовков</TITLE>
</HEAD>
<BODY>
<H1>Самый большой заголовок</H1>
<H2>Заголовок второго уровня</H2>
<H3>Заголовок третьего уровня</H3>
<H4>Заголовок четвертого уровня</H4>
<H5>Заголовок пятого уровня</H5>
<H6>Самый маленький заголовок</H6>
</BODY>
</HTML>
.4 Выравнивание текста
Для выравнивания текста в документе используется атрибут align, который позволяет выровнять текст по левому или правому краю и по центру.="left" - Выравнивание по левому краю.="right" - Выравнивание по правому краю.="center" - Выравнивание по центру.
Кроме того, для центрирования текста или графики можно использовать тег <CENTER>, который центрирует любые объекты. В данном примере проиллюстрированы способы выравнивания теста:
<HTML>
<HEAD>
<TITLE>Выравнивание текста</TITLE>
</HEAD>
<BODY>
<P align="left"> Данный текст выровнен по левому краю
<P align="right"> Данный текст выровнен по правому краю
<P align="center"> Данный текст выровнен по центру.
<BR>
<BR>
<CENTER>
Текст также центрирован, однако в данном случае был использован тег центрирования
</CENTER>
</BODY>
</HTML>
.5 Стили форматирования
Для выделения текста в HTML - документах могут быть использованы различные стили шрифтов. С помощью контейнера <В>...</В> можно установить жирный шрифт, теги <I>, </I> устанавливает наклонный шрифт, контейнер <U>...</U>задает подчеркнутое написание символов, а теги <TT>...</TT> - шрифт фиксированной ширины. Допускается также использование в тексте верхних и нижних индексов соответственно с помощью контейнеров <SUP>... </SUP> и <SUB>...</SUB>. Результатом форматирования будет уменьшенный и сдвинутый вверх или вниз текст. Контейнер тегов <STRIKE>...</STRIKE> перечеркивает текст горизонтальной линией. Контейнер тегов <BIG>...</BIG> позволяет вывести текст шрифтом большего размера. Контейнер тегов <SMALL>...</SMALL> позволяет вывести текст шрифтом меньшего размера. Использование различных стилей форматирования текста наглядно иллюстрирует следующий пример:
<HEAD>
<TITLE>Форматирование текста в HTML</TITLE>
</HEAD>
<BODY>
<B>Это полужирное начертание текста.</B>
<I>Это курсив.</I>
<TT>Моноширинный шрифт, или, как его еще называют, телетайп.
</TT>
Гориэонтальная линия получается при использовании тега <HR>
<HR>
Допускается также использование в тексте <SUP>вepxнux</SUP>
и <SUB>нижних</SUB> индексов соответственно.
<STRIKE>
Этот текст перечеркнут горизонтальной линией.
</STRIKE>
Этот текст напечатан шрифтом <BIG>большего размера.</BIG>
Этот текст выведен <SMALL>меньшего размера</SMALL>.
<U>А этот текст подчеркнут.</U>
</BODY>
</HTML>
Язык гипертекстовой разметки позволяет задавать размеры шрифта, которым будет отображаться текст документа. По умолчанию размер шрифта равен 3, однако, используя тег <FONT> с атрибутом size="...", его можно переопределить Используются как относительные размеры шрифтов, так и абсолютные. Следующий пример иллюстрирует установку размера шрифта:
<HTML>
<HEAD>
<TITLE>Изменение размера шрифта.</TITLE>
</HEAD>
<BODY>
<FONT size=7> Paзмер шрифта равен 7.
</FONT>
<BR>
<FONT size=6>Paзмер шрифта равен 6.
</FONT>
<BR>
<FONT size=5>Paзмер шрифта равен 5.
</FONT>
<BR>
</FONT>
<BR>
<FONT size=3>Paзмер шрифта равен 3.
</FONT>
<BR>
<FONT size=2>Paзмер шрифта равен 2.
</FONT>
<BR>
<FONT size=1>Paзмер шрифта равен 1.
</FONT>
</BODY>
</HTML>
Кроме абсолютных значений размеров шрифта в HTML можно использовать и относительные размеры. Если в теге <BASEFONT> установить параметр size равным какому-либо числу, то броузер будет использовать указанный размер как базовый. По умолчанию базовый размер равен трем. Относительно этого базового размера можно указывать размер шрифта текста, который заключен в контейнере тегов<FONT>. Для этого достаточно присвоить атрибуту size одно из следующих значений:
+1...+7 - увеличение шрифта на указанное количество единиц относительно базового размера;
...-7 - уменьшение шрифта на указанное количество единиц относительно базового размера.
Следующий пример демонстрирует управление относительным размером шрифта:
<HTML>
<HEAD>
<TITLE>Изменение относительного размера шрифта</TITLE>
</HEAD>
<BODY>
Обычный текст. Его абсолютный размер равен 3.
<BR>
<BASEFONT SIZE=5>
Установка базового размера 5.
<BR>
<FONT size=+7>Увеличение до абсолютного размера, равного 12.
</FONT>
<BR>
<FONT size=-2>Уменьшение до абсолютного размера, равного 3.
</FONT>
</BODY>
</HTML>
Тег <BASEFONT> предназначен для описания исходных параметров шрифта Web-страницы. Его действие распространяется до следующего тега этого типа. Он имеет следующие атрибуты:="..." - задает имя шрифта или несколько возможных шрифтов, которые броузер использует для отображения текста. Поскольку шрифт берется из набора установленных на компьютере клиента шрифтов, рекомендуется перечислять, через запятую, несколько близких по начертанию гарнитур, так как нет никакой гарантии, что выбранный шрифт будет присутствовать на компьютере пользователя. В противном случае броузер выберет установленный по умолчанию шрифт и, возможно, текст будет отображаться не так, как хотелось.="..." - задает размер шрифта от 1 до 7. Базовый размер шрифта равен 3. Шрифты могут быть заданы относительно базового +1, -1, +2, -2, ...; +7, -7.="..." - задает цвет шрифта. Значения данного параметра рассматривались ранее. Следует отметить, что все рассмотренные атрибуты присущи и тегу <FONT>.
Список использованных источников
1Памятка по написанию в HTML, разработанная А. Г. Зрюмовой
Приложение А
Основная страница сайта «Университет в котором я учусь»
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>АлтГТУ</title>
<style type="text/css">
#navigate a{font-family: Verdana;font-style : normal ;font-size : 10pt; font-weight :bold;text-decoration : none; color :#FFFFFF }
#navigate a:hover{font-family: Verdana;font-style : normal ;font-size : 10pt; font-weight :bold;text-decoration : none; color :#80FFFF }{ font-family: Verdana;font-style : normal ;font-size : 10pt; font-weight :normal;text-align : left; text-indent : 1em;margin-left:10px}
.style1 {: #FFFFFF;family: Verdana, Arial, Helvetica, sans-serif;weight: bold;
}
</style>
<script language="JavaScript" type="text/JavaScript">
<!--MM_reloadPage(init) { //reloads the window if Nav4 resized(init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}_reloadPage(true);
//-->
</script>
</head>
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginheight="0" marginwidth="0" bgcolor="#FFFFFF">
<p>
<table border="0" width="100%" bgcolor="#000000" cellspacing="0" cellpadding="0">
<tr>
<td width="33%"><img border="0" src="img/topleft.jpg" width="219" height="69"></td>
<td width="33%">
<div align="center">
<td width="34%">
<div align="right"><img border="0" src="img/topright.jpg" width="178" height="69"></div></td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0" background="img/blue.jpg">
<tr>
<td width="100%">
</tr>
</table>
<table border="0" width="900" cellspacing="0" cellpadding="0">
<tr>
<td width="99%" valign="top">
<table ID="navigate" width="90%" cellpadding="0" cellspacing="0" border="0">
<tr align="center" valign="middle">
<td STYLE="background-image : URL(img/botttompipe_left.jpg); background-repeat : no-repeat; width :140px;height:26px"><a href="#"justify"><td STYLE="background-image : URL(img/botttompipe_bg.jpg); background-repeat : no-repeat; width :260px;height:26px"><a href="авпв" target="_blank"><font color="00FFFF">Презентация</font></a></td>
<td STYLE="background-image : URL(img/botttompipe_bg.jpg); background-repeat : no-repeat; width :210px;height:26px"><a href="Тест.html" target="_top"><font color="00FFFF">Тест</font></a></td>
<td STYLE="background-image : URL(img/botttompipe_bg.jpg); background-repeat : no-repeat; width :210px;height:26px"><a href="Данные.html" target="_self"><font color="00FFFF">Мои данные</font></a></td>
<td STYLE="background-image : URL(img/botttompipe_right.jpg); background-repeat : no-repeat; width :170px;height:26px"><a href="P.S..html" target="_blank"><font color="00FFFF">P.S.</font></a></td>
</tr></table>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</td>
<td width="1%" valign="top">
<p align="right"><img border="0" src="img/mouse.jpg" width="200" height="190"></td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0" background="img/blue.jpg">
<tr>
<td width="100%"><p STYLE="font-family: Arial;font-style : normal ;font-size : 8pt; font-weight :bold;text-align : center; color :#FFFFFF">©
</td>
</tr>
</table>
<div style="font-size: 0.8em; text-align: center; margin-top: 1.0em; margin-bottom: 1.0em;">
<a href="#"justify"></div>
</body>
</html>
Приложение Б
Страница перехода по гиперссылке «Тест»
<HTML><HEAD><TITLE>Тест</TITLE>
</HEAD>
<BODY bgcolor="silver">
<SCRIPT language=javaScript>prov()
{sum = 0;(document.form1.elements[2].checked) sum=sum+1;(document.form1.elements[5].checked) sum=sum+1;(document.form1.elements[10].checked) sum=sum+1;(document.form1.elements[14].checked) sum=sum+1;(document.form1.elements[16].checked) sum=sum+1;
(sum==5){ alert("Вы набрали 5 балла из 5.");}(sum==4){ alert("Вы набрали 4 балла из 5.");}(sum==3){ alert("Вы набрали 3 балла из 5.");}(sum==2){ alert("Вы набрали 2 балла из 5.");}(sum==1){ alert("Вы набрали 1 балл из 5."); }(sum==0){ alert("Вы набрали 0 баллов из 5.");}=0;
};
</SCRIPT>
<form action="" method="post" name="form1" id="form1">
<font color = "#FF0000">
<H4> 1. Скажите как меня зовут? </H4>
</font>
<input name="radiobutton1" type="radio" value="radiobutton" />Гоги<br>
<input name="radiobutton1" type="radio" value="radiobutton" />Чингачгук<br>
<input name="radiobutton1" type="radio" value="radiobutton" />Алексей<br>
<input name="radiobutton1" type="radio" value="radiobutton" />Иван<br>
<font color = "#FF0000">
<H4> 2. Назовите как называется группа?</H4>
</font>
<input name="radiobutton2" type="radio" value="radiobutton" />Бездыри<br>
<input name="radiobutton2" type="radio" value="radiobutton" />9ПС-41<br>
<input name="radiobutton2" type="radio" value="radiobutton" />Студенты прохладной жизни<br>
<input name="radiobutton2" type="radio" value="radiobutton" />Так себе<br>
<font color = "#FF0000">
<H4> 3. Назовите на каком направлении я обучаюсь?</H4>
</font>
<input name="radiobutton3" type="radio" value="radiobutton" />Бездельничье<br>
<input name="radiobutton3" type="radio" value="radiobutton" />Вредительство<br>
<input name="radiobutton3" type="radio" value="radiobutton" />Автомотовелофото<br>
<font color = "#FF0000">
<H4> 4. Какие важными качествами обладают студенты группы 9ПС-41?</H4>
</font>
<input name="radiobutton4" type="radio" value="radiobutton" />Глупость<br>
<input name="radiobutton4" type="radio" value="radiobutton" />Некомпетентноть<br>
<input name="radiobutton4" type="radio" value="radiobutton" />Скромность<br>
<input name="radiobutton4" type="radio" value="radiobutton" />Безалаберность<br>
<font color = "#FF0000">
<H4> 5. Кто поднимал мне настроение при создании сайта?</H4>
</font>
<input name="radiobutton5" type="radio" value="radiobutton" />Черепашка Настя<br>
<input name="radiobutton5" type="radio" value="radiobutton" />Кенгуру Коля<br>
<input name="radiobutton5" type="radio" value="radiobutton" />Крокодил Гена<br>
<input name="radiobutton5" type="radio" value="radiobutton" />Поросенок Ниф-Ниф<br>
<input type="button" name="Button" value="Результат" onclick="prov()"/>
</form>
</BODY>
</HTML>
Приложение В
Страница перехода по гиперссылке «Мои данные»
<HTML>
<HEAD>
<TITLE>Данные</TITLE>
</head>
<body bgcolor="#000000"="img/781401580.jpg"="#000000" >
<TABLE border="0" width="100%">
<CAPTION>
<H1>Мои данные:</H1>
</CAPTION>
<TR>
<TD align="left">
<br>
<br>
<br>
<H3>
</H3>
<br>
<H3>
</H3>
<br>
<br>
<H3>
</H3)
<br>
<br>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>