Разработка сайта АлтГТУ имени И. И. Ползунова с использованием HTML и Java
Для выделения текста в HTML — документах могут быть использованы различные стили шрифтов. С помощью контейнера <�В>… можно установить жирный шрифт, теги, устанавливает наклонный шрифт, контейнер… задает подчеркнутое написание символов, а теги … — шрифт фиксированной ширины. Допускается также использование в тексте верхних и нижних индексов соответственно с помощью контейнеров … и… Читать ещё >
Разработка сайта АлтГТУ имени И. И. Ползунова с использованием HTML и Java (реферат, курсовая, диплом, контрольная)
Министерство образования и науки Российской Федерации Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования
«Алтайский государственный технический университет им. И. И. Ползунова»
Факультет информационных технологий Кафедра информационных технологий Курсовая работа по дисциплине «Информатика»
на тему: Разработка сайта АлтГТУ имени И. И. Ползунова с использованием HTML и Java
Студент группы 9ПС-41 А. Е. Просов Руководитель работы доцент, к.т.н. А. Г. Зрюмова Барнаул 2015
Введение
Актуальность проблемы.
21 век пестрит разнообразием технологических новинок и различного рода разработок информационного характера. Человечество идет в ногу со временем и никого уже не удивить появлением большинства программных продуктов, облегчающих жизнь человека. Большинство людей уже не мыслят свою жизнь без интернета, социальных сетей, интернет-магазинов. Но любая страница интернета, любой сайт, это программный продукт, написанный в машинном коде, зная которые можно с легкостью написать свой собственный сайт. Целью данной курсовой работы является освоение языка HTML и JavaScript и написание с их помощью собственного сайта.
Для достижения поставленной цели необходимо решить следующие задачи:
— выполнить обзор методических материалов и литературы посвященных особенностям программирования на языке HTML и JavaScript;
— провести анализ основных приемов и методов создания страниц, в частности ввода текста, его форматирования, вставки таблиц, рисунков, гиперссылок, создание тестов;
— на основе проведенного анализа разработать сайт, посвященный моему обучению в АлтГТУ имени И. И. Ползунова, включающий в себя основную страницу с информацией о моей учебе, четыре страницы связанных гиперссылкой с основной станицей;
— исследовать правильность написания сайта и его безошибочную работу.
Практическая значимость работы заключена в освоении языка написания сайтов HTML, приобретении навыков программирования и создания собственного сайта, презентации данного продукта, высокой оценки работы преподавателем, получения зачета, отсутствия хвоста и перехода на второй курс с улыбкой.
1. Структура HTML
страница рисунок таблица гиперссылка
Для разработки любого проекта, сначала создайте на диске папку, в которой будут храниться все файлы вашего будущего сайта. Стартовый файл должен иметь имя index.html.
Для редактирования файлов рекомендуется использовать простейший текстовый редактор, например «Блокнот» или «WordPad», но не в коем случае не используйте «WinWord». Это слишком умный редактор, который считает себя умнее вас и поэтому сам за вас решает, что и в каком виде он будет сохранять на диск. Поэтому используйте то, что попроще.
Наберем простейший код страницы
Всем привет
Сохраните ваш файл и запустите его через браузер, например «Internet Explorer» .
Обратите внимание, что HTML страница содержит как обычный текст, так и команды разметки (tags или теги), заключенные в угловые скобки (< и >). Теги языка HTML задают правила, по которым браузер отображает документ на экране. Большинство тегов языка HTML, такие как ,
,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. В случае полного отсутствия всех трех цветов можно получить абсолютно черный цвет (код #0). Очевидно, что, используя такую комбинацию шестнадцатеричных чисел, можно получить очень большое количество цветов. Для удобства, основные шестнадцать цветов, их коды и названия приведены в таблице
Основные цвета и их коды | ||||||
Цвет | Код RGB | Имя | Цвет | Код RGB | Имя | |
черный | #0 | black | серебряный | #C0C0C0 | silver | |
темно-бордовый | #800 000 | maroon | красный | #FF0000 | red | |
зеленый | #8 000 | green | известь | #00FF00 | lime | |
оливковый | #808 000 | olive | желтый | #FFFF00 | yellow | |
темно-синий | #80 | navy | синий | #0000FF | blue | |
фиолетовый | #800 080 | purple | фуксия | #FF00FF | fuchsia | |
чирок | #8 080 | teal | аква | #00FFFF | aqva | |
серый | #808 080 | gray | белый | #FFFFFF | white | |
1.2 Гиперссылки
Важнейшим понятием в HTML является гиперссылка, которая позволяет связать текст или какой-либо объект с другими гипертекстовыми документами. Текст, который является гиперссылкой, как правило, выделяется цветом и подчеркивается. Для определения ссылки используется тег <�А>, структура которого имеет следующий вид: <�А HREF="filename" target="_self" >текст ссылки. Атрибут HREF задает значение адреса документа, на который указывает ссылка, filename — имя файла или адрес Internet, на который необходимо сослаться, а текст_ссылки — текст гипертекстовой ссылки, который будет непосредственно показан в HTML-документе. Атрибут TARGET задает значение окна или фрейма, в котором будет открыт документ, на который указывает ссылка. Возможные значения атрибута:
_top — открытие документа в текущем окне
_blank — открытие документа в новом окне
_self — открытие документа в текущем фрейме
_parent — открытие документа в родительском фрейме
Значение по умолчанию: _self
Примеры:
Moй фотоальбом ссылается на файл my_photo.html, расположенный в каталоге photo, вложенном в текущую папку, и образует ссылку в виде текста «Мой фотоальбом». Документ откроется в новом окне.
Немного обо мне откроет страницу aboutme. html, расположенную в текщей папке, и образует ссылку в виде текста «Немного обо мне». Документ откроется во фрайме «MainFrame» .
письмо в техподдержку выполнят макрокоманду загрузки почтовой программы с автозаполнением адреса получателя.
Теперь попробуем применить наши новые знания на практике. Добавим в нашу страничку атрибуты тега
и ссылку на страничку в интернете. Изменим код странички:ackground="Stars.gif"
text="#ffffff"
alink="#DDOOOO"
link="#0000FF"
vlink="#FF00FF" >
Добро пожаловать на мою домашнюю страничку!
Поиск в интернете
В данном примере был использован еще один тэг
, который позволяет задать принудительный перевод строки в пределах абзаца и является тегом прерывания строки. Для позиционирования различных элементов на Web-странице используют таблицы. С их помощью можно создавать обтекание рисунков, упорядочивать элементы форм, а также позиционировать другие элементы HTML-документа.
1.3 Создание таблиц
Таблицы очень часто используют для позиционирования различных элементов на Web-странице. Описание таблиц в HTML-документах осуществляется с помощью контейнера
… Таблица задается двумя контейнерами тегов:Заголовок Таблицы.</В> | |
Первая ячейка первой строки. | Вторая ячейка первой строки. |
Первая ячейка второй строки. | Вторая ячейка второй строки. |
Ширина таблицы задается атрибутом width="…" для тега
, а значение ширины таблицы может задаваться в пикселях или в процентах от ширины экрана. Содержимое каждой ячейки может быть выровнено с помощью атрибутов align="…" (горизонтальное положение) и valign="…" (вертикальное положение) для тегов или, который располагается после тега, задает заголовок к таблице, центрируемый по умолчанию относительно таблицы. При помощи атрибутов align="…" или valign="…" заголовок можно разместить вверху (top) или внизу (bottom) и в левом (left) или правом (right) углу таблицы. Задание заголовка для строки или столбца таблицы осуществляется при помощи тега или| . Атрибут valign="…" может принимать следующие значения: top — прижать вверх, bottom — прижать вниз и middle — разместить по центру, а атрибут align="…" принимает следующие значения: left — прижать влево, right — прижать вправо и center — разместить по центру. Атрибуты cellpadding="…" и cellspacing="…" определяют, соответственно, расстояние в пикселях между границей ячейки и ее содержимым, а также и между ячейками. Допускается добавлять к таблице, к строке или столбцу заголовок. Тег | после тегов | |||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| соответственно. Атрибут border="…" тега рисует рамку вокруг таблицы и каждой ячейки, при этом ширина рамки задается в пикселях. Следует иметь в виду, что атрибуты colspan="…" и rowspan="…" тегов позволяют объединять ячейки таблицы в группы, вокруг которых рисуется рамка. Рассмотрим пример таблицы, занимающей по ширине весь экран броузера: Пример таблицы
Вставка графических изображений В документах HTML кроме текста могут присутствовать графические изображения, для вставки которых используется тег
Атрибут alt="…" указывает броузеру на то, какой именно текст следует подставить на место рисунка, если пользователь отключил загрузку графических файлов или из-за разрыва соединения файл не был загружен. Картинку можно так же использовать для указания на гиперссылку. Например: Создание абзацев В языке HTML имеется специальный тег, указывающий броузеру на то, что в данном месте текста (там, где находится этот тег) должен начинаться новый абзац. Этот тег обозначается следующим образом: . Это первый абзац. Он очень маленький, но все же кое-какая информация в нем отображена. А это второй. Если необходимо вставить в документ несколько пустых строк в документ необходимо использовать тег , поскольку броузер игнорирует все последующие теги <�Р>, расположенные подряд и находящиеся после первого. Для тегов абзаца закрывающие теги не являются обязательными, поскольку тег, указывающий на начало нового абзаца, одновременно указывает на конец предыдущего. Создание заголовков. Заголовки обозначают начала разделов документа. В языке HTML определено 6 уровней заголовков: от H1 до Н6. Текст, окруженный тегами <�Н1>…</Н1>, получается большим — это основной заголовок. Если текст окружен тегами <�Н2>…</Н2>, то он выглядит несколько меньше (подзаголовок); текст внутри <�НЗ>…</НЗ> еще меньше и так далее до <�Н6>…</Н6>. Наглядно примеры заголовков Вы можете посмотреть на этом примере. Самый большой заголовокЗаголовок второго уровня Заголовок третьего уровня Заголовок четвертого уровня Заголовок пятого уровня Самый маленький заголовок 1.4 Выравнивание текста Для выравнивания текста в документе используется атрибут align, который позволяет выровнять текст по левому или правому краю и по центру. align="left" - Выравнивание по левому краю. align="right" - Выравнивание по правому краю. align="center" - Выравнивание по центру. Кроме того, для центрирования текста или графики можно использовать тег , который центрирует любые объекты. В данном примере проиллюстрированы способы выравнивания теста: Данный текст выровнен по левому краю Данный текст выровнен по правому краю Данный текст выровнен по центру. Текст также центрирован, однако в данном случае был использован тег центрирования 1.5 Стили форматирования Для выделения текста в HTML — документах могут быть использованы различные стили шрифтов. С помощью контейнера <�В>…</В> можно установить жирный шрифт, теги , устанавливает наклонный шрифт, контейнер …задает подчеркнутое написание символов, а теги … — шрифт фиксированной ширины. Допускается также использование в тексте верхних и нижних индексов соответственно с помощью контейнеров … и …. Результатом форматирования будет уменьшенный и сдвинутый вверх или вниз текст. Контейнер тегов … перечеркивает текст горизонтальной линией. Контейнер тегов … позволяет вывести текст шрифтом большего размера. Контейнер тегов … позволяет вывести текст шрифтом меньшего размера. Использование различных стилей форматирования текста наглядно иллюстрирует следующий пример: Это полужирное начертание текста. Это курсив. Моноширинный шрифт, или, как его еще называют, телетайп. Гориэонтальная линия получается при использовании тега Допускается также использование в тексте вepxнux и нижних индексов соответственно. Этот текст перечеркнут горизонтальной линией.Этот текст напечатан шрифтом большего размера. Этот текст выведен меньшего размера. А этот текст подчеркнут.Язык гипертекстовой разметки позволяет задавать размеры шрифта, которым будет отображаться текст документа. По умолчанию размер шрифта равен 3, однако, используя тег с атрибутом size="…", его можно переопределить Используются как относительные размеры шрифтов, так и абсолютные. Следующий пример иллюстрирует установку размера шрифта: Paзмер шрифта равен 7. Paзмер шрифта равен 6. Paзмер шрифта равен 5. Paзмер шрифта равен 4. Paзмер шрифта равен 3. Paзмер шрифта равен 2. Paзмер шрифта равен 1. Кроме абсолютных значений размеров шрифта в HTML можно использовать и относительные размеры. Если в теге +1…+7 — увеличение шрифта на указанное количество единиц относительно базового размера; — 1…-7 — уменьшение шрифта на указанное количество единиц относительно базового размера. Следующий пример демонстрирует управление относительным размером шрифта: Обычный текст. Его абсолютный размер равен 3. Установка базового размера 5. Увеличение до абсолютного размера, равного 12. Уменьшение до абсолютного размера, равного 3. Тег face="…" - задает имя шрифта или несколько возможных шрифтов, которые броузер использует для отображения текста. Поскольку шрифт берется из набора установленных на компьютере клиента шрифтов, рекомендуется перечислять, через запятую, несколько близких по начертанию гарнитур, так как нет никакой гарантии, что выбранный шрифт будет присутствовать на компьютере пользователя. В противном случае броузер выберет установленный по умолчанию шрифт и, возможно, текст будет отображаться не так, как хотелось. size="…" - задает размер шрифта от 1 до 7. Базовый размер шрифта равен 3. Шрифты могут быть заданы относительно базового +1, -1, +2, -2, …; +7, -7. color="…" - задает цвет шрифта. Значения данного параметра рассматривались ранее. Следует отметить, что все рассмотренные атрибуты присущи и тегу . Список использованных источников 1 Памятка по написанию в HTML, разработанная А. Г. Зрюмовой Приложение, А Основная страница сайта «Университет в котором я учусь» #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; } 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); //—>
Создание сайтов на заказ. У нас дешево и сердито!!!! Приложение Б Страница перехода по гиперссылке «Тест» 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; }; Приложение В Страница перехода по гиперссылке «Мои данные» background="img/781 401 580.jpg" text="#0″ > .ur | ||||||||||||||||||||
Здесь атрибут src=" «определяет URL-адрес графического файла В приведенном примере файл будет размещен в области шириной 542 и высотой 407 пикселей соответственно. Если размеры, указанные атрибутами height=» «(высота) и width=» «(ширина), не совпадают с размерами графического файла, то последний масштабируется. Масштабирование может привести к резкому ухудшению качества графического файла, поэтому рекомендуется задавать размеры, соответствующие размерам графического файла, или не указывать их вообще. Но для больших графических файлов рекомендуется всегда задавать их размеры для ускорения работы броузера. Если размеры не заданы, то, встретив рисунок, броузер прекращает вывод текста и ждет загрузки всего рисунка для того, чтобы определить его размеры, а это задерживает загрузку страницы. Пример вставки рисунка:
