Разработка сайта АлтГТУ имени И.И. Ползунова с использованием HTML и Java

Особенности программирования на языке HTML и JavaScript. Основные стили форматирования текста. Анализ основных приемов и методов создания страниц, рисунков, таблиц и гиперссылок. Основные цвета и их коды. Разработка собственного сайта и его презентация.

Рубрика Программирование, компьютеры и кибернетика
Вид курсовая работа
Язык русский
Дата добавления 29.01.2016
Размер файла 61,3 K

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.

Размещено на http://www.allbest.ru/

Министерство образования и науки Российской Федерации

Федеральное государственное бюджетное образовательное учреждение

высшего профессионального образования

«Алтайский государственный технический университет им. И. И. Ползунова»

Факультет информационных технологий

Кафедра информационных технологий

Курсовая работа

по дисциплине «Информатика»

на тему: Разработка сайта АлтГТУ имени И. И. Ползунова с использованием HTML и Java

Студент группы 9ПС-41 А.Е. Просов

Руководитель работы доцент, к.т.н. А.Г. Зрюмова

Барнаул 2015

Введение

Актуальность проблемы.

21 век пестрит разнообразием технологических новинок и различного рода разработок информационного характера. Человечество идет в ногу со временем и никого уже не удивить появлением большинства программных продуктов, облегчающих жизнь человека. Большинство людей уже не мыслят свою жизнь без интернета, социальных сетей, интернет-магазинов. Но любая страница интернета, любой сайт, это программный продукт, написанный в машинном коде, зная которые можно с легкостью написать свой собственный сайт. Целью данной курсовой работы является освоение языка HTML и JavaScript и написание с их помощью собственного сайта.

Для достижения поставленной цели необходимо решить следующие задачи:

- выполнить обзор методических материалов и литературы посвященных особенностям программирования на языке HTML и JavaScript;

- провести анализ основных приемов и методов создания страниц, в частности ввода текста, его форматирования, вставки таблиц, рисунков, гиперссылок, создание тестов;

- на основе проведенного анализа разработать сайт, посвященный моему обучению в АлтГТУ имени И. И. Ползунова, включающий в себя основную страницу с информацией о моей учебе, четыре страницы связанных гиперссылкой с основной станицей;

- исследовать правильность написания сайта и его безошибочную работу.

Практическая значимость работы заключена в освоении языка написания сайтов 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> имеет атрибуты, которые перечислены ниже:

bgcolor="..." - определяет цвет фона документа. Работа с цветами в HTML-документах будет рассмотрена ниже;

background="..." - указывает броузеру местоположение файла (*.gif или *.jpg), который необходимо использовать в качестве фонового рисунка. В кавычках указывается абсолютный или относительный путь к файлу. Окно полностью заполняется изображением, начиная с верхнего левого угла;

text="..." -устанавливает цвет текста;

alink=" .." - определяет цвет активной ссылки;

link="..." - определяет цвет не просмотренной ссылки;

vlink="..." - определяет цвет просмотренной ссылки;

topmargin="..." - устанавливает границу верхнего поля;

leftmargin="..." - граница левого поля;

bgproperties="fixed" - в случае установки данного параметра в значение fixed фоновое изображение не будет прокручиваться вместе с текстом;

onload="..." - определяет те действия броузера, которые должны произойти после загрузки документа из сети.

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

1.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

Имя

черный

#000000

black

серебряный

#C0C0C0

silver

темно-бордовый

#800000

maroon

красный

#FF0000

red

зеленый

#008000

green

известь

#00FF00

lime

оливковый

#808000

olive

желтый

#FFFF00

yellow

темно-синий

#000080

navy

синий

#0000FF

blue

фиолетовый

#800080

purple

фуксия

#FF00FF

fuchsia

чирок

#008080

teal

аква

#00FFFF

aqva

серый

#808080

gray

белый

#FFFFFF

white

1.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"

ackground="Stars.gif"

text="#ffffff"

alink="#DDOOOO"

link="#0000FF"

vlink="#FF00FF">

<br>

<br>

Добро пожаловать на мою домашнюю страничку!

<br>

<br>

<a href="http://www.aport.ru" target="_blank">

Поиск в интернете

</a>

</BODY>

</HTML>

В данном примере был использован еще один тэг <BR>, который позволяет задать принудительный перевод строки в пределах абзаца и является тегом прерывания строки. Для позиционирования различных элементов на Web-странице используют таблицы. С их помощью можно создавать обтекание рисунков, упорядочивать элементы форм, а также позиционировать другие элементы HTML-документа.

1.3 Создание таблиц

Таблицы очень часто используют для позиционирования различных элементов на Web-странице. Описание таблиц в HTML-документах осуществляется с помощью контейнера <TABLE>...</TABLE>. Таблица задается двумя контейнерами тегов: <TR>...</TR> - описание строки таблицы и <TD>...</TD> - описание ячейки таблицы. По умолчанию текст внутри таблицы выравнивается по левому краю, а ширина столбца таблицы определяется наиболее длинным элементом в этом столбце. Рассмотрим пример простейшей таблицы:

<HTML>

<HEAD>

<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%">

no левому краю

</TD>

</TR>

<TR>

<TD width="33%">

<P align="right">

no правому краю

</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>А это второй.

</BODY>

</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>

1.4 Выравнивание текста

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

align="left" - Выравнивание по левому краю.

align="right" - Выравнивание по правому краю.

align="center" - Выравнивание по центру.

Кроме того, для центрирования текста или графики можно использовать тег <CENTER>, который центрирует любые объекты. В данном примере проиллюстрированы способы выравнивания теста:

<HTML>

<HEAD>

<TITLE>Выравнивание текста</TITLE>

</HEAD>

<BODY>

<P align="left"> Данный текст выровнен по левому краю

<P align="right"> Данный текст выровнен по правому краю

<P align="center"> Данный текст выровнен по центру.

<BR>

<BR>

<CENTER>

Текст также центрирован, однако в данном случае был использован тег центрирования

</CENTER>

</BODY>

</HTML>

1.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 size=4>Paзмер шрифта равен 4.

</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 - увеличение шрифта на указанное количество единиц относительно базового размера;

-1...-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-страницы. Его действие распространяется до следующего тега этого типа. Он имеет следующие атрибуты:

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

size="..." - задает размер шрифта от 1 до 7. Базовый размер шрифта равен 3. Шрифты могут быть заданы относительно базового +1, -1, +2, -2, ...; +7, -7.

color="..." - задает цвет шрифта. Значения данного параметра рассматривались ранее. Следует отметить, что все рассмотренные атрибуты присущи и тегу <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 }

p{ font-family: Verdana;font-style : normal ;font-size : 10pt; font-weight :normal;text-align : left; text-indent : 1em;margin-left:10px}

.style1 {

color: #FFFFFF;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-weight: bold;

}

</style>

<script language="JavaScript" type="text/JavaScript">

<!--

function MM_reloadPage(init) { //reloads the window if Nav4 resized

if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}

else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

}

MM_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" class="style1"><font color="FF0000"><H2>Университет в котором я учусь</H2></font></div></td>

<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%">

<p align="right"><font face="Arial" size="2" color="#FFFFFF"><b>prosovalexey@mail.ru</b></font>&nbsp;&nbsp;&nbsp;</td>

</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="http://www.altstu.ru" target="_blank"><font color="00FFFF">АлтГТУ</font></a></td>

<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">&copy;

</td>

</tr>

</table>

<div style="font-size: 0.8em; text-align: center; margin-top: 1.0em; margin-bottom: 1.0em;">

<a href="http://web-mastery.info">Создание сайтов на заказ. У нас дешево и сердито!!!!</a>

</div>

</body>

</html>

Приложение Б

Страница перехода по гиперссылке «Тест»

<HTML><HEAD><TITLE>Тест</TITLE>

</HEAD>

<BODY bgcolor="silver">

<SCRIPT language=javaScript>

function prov()

{

var sum = 0;

if (document.form1.elements[2].checked) sum=sum+1;

if (document.form1.elements[5].checked) sum=sum+1;

if (document.form1.elements[10].checked) sum=sum+1;

if (document.form1.elements[14].checked) sum=sum+1;

if (document.form1.elements[16].checked) sum=sum+1;

if (sum==5){ alert("Вы набрали 5 балла из 5.");}

if (sum==4){ alert("Вы набрали 4 балла из 5.");}

if (sum==3){ alert("Вы набрали 3 балла из 5.");}

if (sum==2){ alert("Вы набрали 2 балла из 5.");}

if (sum==1){ alert("Вы набрали 1 балл из 5."); }

if (sum==0){ alert("Вы набрали 0 баллов из 5.");}

sum=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>

<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"

background="img/781401580.jpg"

text="#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>

Размещено на Allbest.ur


Подобные документы

  • Работа с HTML-редактором Adobe Dreamweaver. Этапы и правила построения заглавной страницы сайта, форматирования HTML-страниц, создания гипертекстовых ссылок, создания и форматирования таблиц. Использование графических материалов при разработке сайта.

    методичка [1,9 M], добавлен 06.07.2011

  • Язык маркировки гипертекстов HTML, основа создания web-страниц. История спецификаций, каскадные таблицы стилей CSS. Способы определения таблиц стилей (стилевого шаблона). Язык подготовки сценариев JavaScript, его использование. Программный код web сайта.

    курсовая работа [26,9 K], добавлен 05.07.2009

  • Практическая значимость создания сайта. Язык программирования JavaScript. Основные области использования языка JavaScript при создании интерактивных HTML-страниц. Язык программирования PHP. Программная основа сайта. Создание оформления дизайна сайта.

    дипломная работа [1,1 M], добавлен 05.03.2013

  • История html. Гипертекст. Структура web-страницы. Переход внутри одного документа. Переход к другому документу. Правила синтаксиса. Кодирование символов. Использование символов. Управление цветом. Конструктор документов. Способы определения таблиц стилей.

    дипломная работа [911,3 K], добавлен 25.02.2005

  • Язык разметки гипертекстовых страниц HTML. Обеспечение доступности Web-страницы, представление текста и графики. Основные правила и этапы создания сайта, выбор структуры страницы. Оценка экономической целесообразности использования HTML-редакторов.

    дипломная работа [86,7 K], добавлен 25.03.2013

  • Технологии создания web-страниц. Появление Active Server Pages. Разработка динамического web-сайта на asp.net. Создание дизайна и каркаса сайта с использованием стандартных HTML таблиц. Проектирование базы данных на основе ado.net и подключение к ней.

    контрольная работа [2,4 M], добавлен 24.05.2019

  • Создание индивидуального сайта с использованием языка гипертекстовой разметки HTML и языка скриптов JavaScript. Программные средства, используемые при выполнении работы. Основные средства для создания сайта. Разработка CSS-файла (таблица стилей).

    лабораторная работа [31,0 K], добавлен 28.10.2010

  • Значение и обзор современных средств веб-программирования на основе языков четвертого поколения. Технологические особенности разработки структуры сайта Интернет-магазина средств связи. Способы форматирования контента, систем навигации и дизайна сайта.

    контрольная работа [3,2 M], добавлен 15.02.2011

  • Рассмотрение визуального HTML-редактор Dreamweaver. Определение структуры сайта ООО "Фаст Студия". Содержание страниц "Главная", "Портфолио", "Контакты". Теги форматирования текста и способы его оформления с использованием подключаемых таблиц CSS.

    курсовая работа [1,4 M], добавлен 18.08.2013

  • Характеристика принципов создания html-страниц и связывания их ссылками так, чтобы можно было произвольным образом переходить от одной страницы к другой. Применение тегов форматирования текста и заголовка окна. Этапы создания html-страницы с таблицей.

    контрольная работа [16,0 K], добавлен 19.06.2014

Работы в архивах красиво оформлены согласно требованиям ВУЗов и содержат рисунки, диаграммы, формулы и т.д.
PPT, PPTX и PDF-файлы представлены только в архивах.
Рекомендуем скачать работу.