close

Вход

Забыли?

вход по аккаунту

?

kursach(51)

код для вставкиСкачать
"Санкт-Петербургский государственный университет
аэрокосмического приборостроения"
Кафедра № 2
Отчет
Защищен с оценкой
Преподователь
доц., к.т.н. 01.06.2012 Н.В. Макарчук
должность, уч.степень ,звание подпись,дата инициалы,фамилия
Курсовая работа
По теме: Создание Web-сайтов средствами языка HTML
По курсу: Прикладная информатика
Работу выполнил
Студент гр.2220 01.06.2012 Д.В. Швецов
подпись,дата инициалы,фамилия Санкт-Петербург
2013
Оглавление.
1. Цель работы.
2. Создание простейших Web-сайтов .
2.1 Цель работы.
2.2 Задание.
2.3 Математические расчеты.
2.4 Программный код.
2.5 Полученные результаты.
2.6 Вывод.
3. Создание Web-сайта с таблицами и аргументами.
3.1 Цель работы.
3.2 Задание.
3.3 Математические расчеты.
3.4 Программный код.
3.5 Полученные результаты.
3.6 Вывод.
4. Создание Web-сайта с плавающими и связанными фреймами.
4.1 Цель работы.
4.2 Задание.
4.3 Математические расчеты.
4.4 Программный код.
4.5 Полученные результаты.
4.6 Вывод.
5. Создание Web-сайта с навигацией по карте-меню.
5.1 Цель работы.
5.2 Задание.
5.3 Математические расчеты.
5.4 Программный код.
5.5 Полученные результаты.
5.6 Вывод.
6. Вывод.
7. Список литературы:
1. Цель работы: Научиться создавать простейшие Web-сайты средствами языка HTML
2. Создание простейших Web-сайтов .
2.1 Цель работы: Закрепление знаний по структуре, форматированию, созданию списков и внедрению изображений в HTML-документы, а также приобретение практических навыков создания Web-сайтов.
2.2 Задание: С использованием языка HTML разработать Web-сайт, состоящий из трех взаимосвязанных HTML-страниц.
2.3 Математические расчеты: а. 1+8mod3=3 - выравнивание гипертекста - по правому краю
б. 1+8mod2=1 - текст на 2 HTML странице должен быть пронумерован
в. +8mod20=8 - размер шрифта
г. 248mod256=248 красная составляюшая цвета фона
253mod256=253 зелёная составляющая цвета фона
258mod256=2 синяя составляющая цвета фона
в итоге получаем цвет фона: f8fd02
д. 253mod256=253 красная составляющая цвета шрифта
258mod256=2 зеленая составляющая цвета шрифта
248mod256=248 синяя составляющая цвета шрифта
в итоге получаем цвет шрифта: fd02f8
2.4 Программный код:
а. a.html
<HTML>
<BODY bgcolor="f8fd02" text="fd02f8">
<p align="left">
<font size="+8">
<br /> Автобиография
<br /> Швецов Денис Васильевич.Родился 17 дек. 1993 года в деревне Заплюсье. В 7 лет пошел учиться в школу. В 2012 году закончил 11 класс, и в этом же году поступил в СПб ГУАП.
</p>
<br /><p align="left"><a href="b.html">Список родственников</a></p>
<br /><p align="left"><a href="c.html">Картинка</a></p>
</font>
</BODY>
</HTML>
б. b.html
<HTML>
<BODY bgcolor="F6FB00" text="FB00F6">
<font size="+8"><ol>
<p align="left">
<li> Швецов Василий Николаевич
<li> Швецова Галина Евгеньевна
<li> Дмитриев Леонид
<li> Дмитриев Павел
<li> Дмитриева Екатерина
<li> Рожкова Ольга
</ol></p>
<br /><p align="left"><a href="a.html">Автобиография</a></p>
<br /><p align="left"><a href="c.html">Картинка</a></p>
</font>
</BODY>
</HTML>
в. c.html
<HTML>
<BODY bgcolor="f8fd02" text="fd02f8">
<font size="+8">
<p align="left">
<img src="kartin.jpg" height="500" width="500" align="left"></p>
<br>
<br><p align="left"><a href="b.html">Список родственников</a></p>
<br><p align="left"><a href="a.html">Автобиография</a></p>
</font>
</BODY>
</HTML>
2.5 Полученные результаты: рис.1. a.html
рис.2. b.html
рис.3. c.html
2.6 Вывод: Закрепили знания по структуре, форматированию, созданию списков и внедрению изображений в HTML-документы, а также приобретение практических навыков создания Web-сайтов.
3. Создание Web-сайта с таблицами и аргументами
3.1 Цель работы: Приобретение знаний и навыков описания простых и сложных таблиц, а также создания простых фреймов в Web-страницах средствами языка HTML.
3.2 Задание: Разработать Web-сайт с одним управляющим и тремя демонстрационными фреймами . 3.3 Математические расчеты: а. 1+8mod3=3 - цвет первой кнопки - синея
1+9mod3=1 - цвет второй кнопки - красная б. 1+8mod3=3 -цвет фона демонстрационных фреймов -синий
1+9mod3=1 - цвет фона демонстрационных фреймов-красный
1+10mod3=2 - цвет фона демонстрационных фреймов - зелёный
в. с=3+8mod3=5 - количество столбцов
r=3+9mod3=3 - количество строк
г. i=[1+8mod3]=3 , j=[1+10mod4]=3 - координаты ячейки у которой должна быть удалена правая граница.
i=[1+9mod2]=2 , j=[1+11mod5]=2 - координаты ячейки у которой должна быть удалена нижняя граница.
д. 60+10*(8mod4)=60% - ширина фрейма.
3.4 Программный код:
tab1.html
<HTML>
<body bgcolor=#800000>
<h3>простая таблица</h3>
<TABLE BORDER="1"bgcolor=008000>
<TR>
<TD>(1.1)</TD>
<TD>(2.1)</TD>
<TD>(3.1)</TD>
</TR>
<TR>
<TD>(1.2)</TD>
<TD>(2.2)</TD>
<TD>(3.2)</TD>
</TR>
<TR>
<TD>(1.3)</TD>
<TD>(2.3)</TD>
<TD>(3.3)</TD>
</TR>
</TABLE>
</BODY>
</HTML>
ver.html
<html>
<frameset cols="*,*,*">
<frame src="tab1.html">
<frame src="tab2.html">
<frame src="tab3.html">
</frameset>
</html>
control.html
<html>
<body bgcolor="white">
<a href="gor.html"target="demo">
<p align="center"><input type="button" name="press" value="кнопка1">
<a/><br>
<body bgcolor="white">
<a href="ver.html"target="demo">
<p align="center"><input type="button" name="press" value="кнопка2">
<a/>
</body>
</html>
rab.html
<html>
<frameset cols="85%,*">
<frame src="ver.html"name="demo">
<frame src="control.html">
</frameset>
</html>
3.5 Полученные результаты:
рис.4. tab1.html
рис.5. rab.html при вертикальном делении.
рис.5. rab.html при горизонтальном делении.
3.6 Вывод: Приобрели знания и навыки описания простых и сложных таблиц, а также создания простых фреймов в Web-страницах средствами языка HTML.
4. Создание Web-сайта с плавающими и связанными фреймами.
4.1 Цель работы: Приобретение знаний и навыков разработки с использованием языка HTML Web-сайтов с плавающими и перекрестно-связанными фреймами.
4.2 Задание: Разработать Web-сайт с одним управляющим и одним демонстрационным фреймом с вложенным в него плавающем фреймом.
4.3 Математические расчеты: а. 1+8mod4=1-примыкать к границе экрана-нижняя.
б. 1+8mod3=3-цвет фона управляющего фрейма-синий.
в. 1+(8+1)mod3=1-цвет фона дем. фрейма-красный.
г. 30+10*8mod4=30%-горизонтальный размер плавающего фрейма.
д. 20+10*(8+2)mod4=40%-вертикальный размер плавающего фрейма
е. 1+8mod2=1-по левому краю-выравнивание плавающего фрейма.
з. 1+8mod3=3-к нижней границе-выравнивание плавающего фрейма.
4.4 Програмный код: txt.html.html
<html>
<body bgcolor="red">
Разpаботать Web-сайт с одним упpавляющим и одним демонстpа-
ционным фpеймом с вложенным в него плавающим фpеймом.
Упpавляющий фpейм должен занимать до 15% площади экpана и в
зависимости от номеpа N автоpа в учебном жуpнале пpимыкать к гpанице экpана, опpеделяемой выpажением [ 1 + ( N ) mod 4 ],
где pезультат имеет следующий смысл: 1-нижняя, 2-пpавая, 3-
веpхняя и 4-левая гpаницы экpана.
Цвет фона упpавляющего фpейма задается выpажением
[ 1 + ( N ) mod 3 ], где pезультат тpактуется как: 1-кpасный,
2-зеленый, 3-синий цвет.
В упpавляющий фpейм должен быть выведен HTML-документ с фа-
милией, инициалами и номеpом гpуппы автоpа, а также двумя кноп-
ками-гипеpссылками для вывода двух pазных pисунков в плавающий
фpейм.
Демонстpационный фpейм должен занимать оставшуюся часть эк-
pана, в нем должен быть сфоpмиpован плавающий фpейм, а в осталь-
ную часть этого фpейма должен быть выведен HTML-документ с текс-
том настоящего задания и цветом фона [ 1 + ( N + 1 ) mod 3 ] с указанной выше интеpпpетацией значения.
Гоpизонтальный pазмеp плавающего фpейма опpеделяется выpаже-
нием [ 30 + 10 * ( N mod 4 ) ] % , а веpтикальный pазмеp выpа- жением - [ 20 + 10 * (( N + 2 ) mod 4 ) ] % соответствующего
pазмеpа экpана.
Паpаметp выpавнивания плавающего фpейма по гоpизонтали задает-
ся выpажением [ 1 + ( N ) mod 2 ] , где pезультат означает: 1-по левому кpаю, 2-по пpавому кpаю.
Веpтикальное выpавнивание плавающего фpейма опpеделяется выpа-
жением [ 1 + ( N ) mod 3 ] , где pезультат означает: 1-к веpх-
ней гpанице, 2-к сеpедине, 3-к нижней гpанице демонстpационного
фpейма. Гpафические файлы для вывода в плавающий фpейм автоp подбиpа- ет из имеющихся в компьютеpе, по своему усмотpению.
<iframe style="color:green" width="30%" height="40%" align="left" name="frame1" hspase="5"></iframe>
</body></html>
ctrl.html
<html>
<body bgcolor="blue">
<table align="center" border="0">
<center><b>Швецов Д.В. гр 2220</b></center>
<tr><td width="100"><a href="aaa.jpg" target="frame1"><img src="knop1.jpg"></a></td>
<td width="100"><a href="bbb.jpg" target="frame1"><img src="knop2.jpg"></a></td></tr>
</body></html>
demo.html
<html>
<frameset rows ="85%,*">
<frame src="text.html.html">
<frame src="ctrl.html">
<NOFRAMES>
<P>Для просмотра этой страницы нужен браузер, поддерживающий фреймы!</p>
<P>Вы можете посмотреть страницу <a href="без_фреймов.htm"> без фреймов</a></p>
</noframes>
</frameset>
</html>
4.5 Полученные результаты: text.html.html
ctrl.html
demo.html
4.6 Вывод: Приобрел знания и навыки разработки с использованием языка HTML Web-сайтов с плавающими и перекрестно-связанными фреймами.
5 Создание Web-сайта с навигацией по карте-меню.
5.1 Цель работы: Приобретение знаний и навыков описания с помощью языка HTML Web-страниц с бегущими строками и гиперсвязями по карте-меню. 5.2 Задание: Разработать Web-сайт с управляющим и демонстрационным фреймами, занимающими по 50% площади экрана.
5.3 Математические расчеты: а. 1+8mod2=1-вертикальная ориетация фрейма.
б. 1+8mod5=4-шестиугольник.
г. 20+8mod20=28-размер шрифта в пикселях.
д. 1+8mod3=3-синий-цвет фона.
е. 1+(8+1)mod3=1-красный-цвет шрифта.
з. 1+8mod2=1-слева-направо-движение текста.
ж. 1+(8+1)mod2=2-бесконечное количество повторов.
к. 1+(8+2)mod3=2-40 пикселей- интервал прорисовки текста.
5.4 Программный код:
doc1.html
<html>
<body bgcolor=blue text=red>
<style>
h1 {font-size:28px;}
</style>
<h1>
<marquee behavior=scroll direction=right loop=inf>
гр.2220 <br>
Швецов <br>
Денис <br>
Васильевич
</marquee>
</h1>
</font>
</body>
</html>
doc2.html
<html>
<body bgcolor=blue text=red>
<style>
h1 {font-size:28px;}
</style>
<h1>
<marquee behavior=scroll direction=left loop=inf>
гр.2220 <br>
Швецов <br>
Денис <br>
Васильевич
</marquee>
</h1>
</font>
</body>
</html>
mapmenu.html
<html>
<body bgcolor="blue">
<img src=aaa.jpg width=300 height=300 usemap=#map1>
<map name=map1>
<area shape="poly" coords="135,120,165,120,190,150,165,180,135,180,105,150" href="doc1.html" target="demo">
<area shape="default" href="doc2.html" target="demo">
</map>
</body>
</html>
glavn.html
<html>
<frameset rows=*,*>
<frame src=mapmenu.html>
<frame src=doc1.html name=demo>
</frameset>
</html>
5.5 Полученные результаты: doc1.html и doc2.html
mapmenu.html
glavn.html
5.6 Вывод: Приобрел знания и навыки описания с помощью языка HTML Web-страниц с бегущими строками и гиперсвязями по карте-меню.
6. Вывод: Научились создавать простейшие Web-сайты средствами языка HTML.
7. Список литературы:
7.1 HTML и CSS в примерах. Создание Web-страниц.
7.2 http://htmlbook.ru/
7.3 html.manual.ru
7.4 info-comp.ru
7.5 weblabla.ru
Документ
Категория
Без категории
Просмотров
182
Размер файла
2 348 Кб
Теги
kursach
1/--страниц
Пожаловаться на содержимое документа