«Санкт-Петербургский государственный университет
аэрокосмического приборостроения»
Кафедра № 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 Математические расчеты:
Цвет фона:
240+1mod256=241 – red
245+1mod256=246 – green
250+1mod256=251 – blue
В итоге получаем цвет : F1F6FB
Цвет текста:
245+1mod256=246 – red
250+1mod256=251 – green
240+1mod256=241 – blue
В итоге получаем цвет :F6FBF1
Размер шрифта:
1mod20=1
Расположение:
1+1mod3=2 по центру
2.4 Программный код:
а. <HTML>
<BODY bgcolor="f1fffb" text="F6FBF1">
<p align="center">
<font size="+2">
<br /> Автобиография
<br />Я Артебякин Александр родился в поселке Заветы Ильича,окончил школу №471 ,поступил В СПбГУАП
</p>
<img src="d.jpg" height="403" width="550" align="left"></p>
<br /><p align="left"><a href="b.html">Список родственников</a></p>
<br /><p align="left"><a href="c.html">Картинка</a></p>
</font>
</BODY>
</HTML>
б. <HTML>
<BODY bgcolor="f1fffb" text="F6FBF1">
<font size="+1"><ol>
<p align="center">
<ul>
<li> Артебякина Ольга Александровна
<li> Артебякина Эльвира Геннадьевна
<li> Артебякин Александр Владимирович
<li> Валах Александр Николаевич
<li> Сталин Иосиф
<li> Асламов Магамед Зурабович
<li> Мирзаян Грач Гуренович
</ul>
</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>
в. <HTML>
<BODY bgcolor="f1fffb" text="F6FBF1">
<font size="+1">
<p align="center">
<img src="d.jpg" height="403" width="550" 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+1mod3=2 - синий
1+2mod3=3 - зеленый
1+3mod3=1 - красный
[ 60 + 10 * ( 1 mod 4 ) ]%=70% ширина фрейма
Удаление нижней границы:
I= [1+ (1) mod5] =2
J= [1+ (1+2) mod4] =4
Удаление правой границы:
I=1+(1mod5)=2
J=1+(3mod3)=1
Число строк:
R=3+(1+1)mod3=5
Число столбцов:
C=3+(1)mod3=4
3.4 Программный код:
tab1.html
<html>
<body text="white" bgcolor="008000">
<h3>Простая таблица</h3>
<table border="1" bgcolor="000080">
<tr><td>(1.1)</td><td>(1.2)</td><td>(1.3)</td><td>(1.4)</td></tr>
<tr><td>(2.1)</td><td>(2.2)</td><td>(2.3)</td><td>(2.4)</td></tr>
<tr><td>(3.1)</td><td>(3.2)</td><td>(3.3)</td><td>(3.4)</td></tr>
<tr><td>(4.1)</td><td>(4.2)</td><td>(4.3)</td><td>(4.4)</td></tr>
<tr><td>(5.1)</td><td>(5.2)</td><td>(5.3)</td><td>(5.4)</td></tr>
</table
</body>
ver.html
<html>
<frameset cols="*,*,*">
<frame src="tab1.html">
<frame src="tab2.html">
<frame src="tab3.html">
</frameset>
</html>
демонстрация.html
<HTML>
<FRAMESET frameborder=1 framespacing=5 cols="*, 15%">
<FRAME src="2.html" name="info01" noresize>
<FRAME src="1.html" name="menu01" noresize>
<NOFRAMES>
<P>Для просмотра этой страницы нужен браузер, поддерживающий фреймы!</p>
<P>Вы можете посмотреть страницу <a href="без_фреймов.htm"> без фреймов</a></p>
</noframes>
</frameset>
</html>
tab2.html
<html>
<body text="white" bgcolor="000080">
<h3>Обьединение ячеек таблицы</h3>
<table border="1" bgcolor="800000">
<tr><td>(1.1)</td><td>(1.2)</td><td>(1.3)</td><td>(1.4)</td></tr>
<tr><td colspan="2" align="center">(2.1)</td><td>(2.3)</td><td rowspan="2" align="center">(2.4)</td></tr>
<tr><td>(3.1)</td><td>(3.2)</td><td>(3.3)</td></tr>
<tr><td>(4.1)</td><td>(4.2)</td><td>(4.3)</td><td>(4.4)</td></tr>
<tr><td>(5.1)</td><td>(5.2)</td><td>(5.3)</td><td>(5.4)</td></tr>
</table>
</body>
tab3.html
<html>
<body text="white" bgcolor="800000">
<h3>Упpавление pазмеpами таблицы</h3>
<table border="1" bgcolor="008000" width="70%">
<tr><td>(1.1)</td><td>(1.2)</td><td>(1.3)</td><td>(1.4)</td></tr>
<tr><td>(2.1)</td><td>(2.2)</td><td>(2.3)</td><td>(2.4)</td></tr>
<tr><td>(3.1)</td><td>(3.2)</td><td>(3.3)</td><td>(3.4)</td></tr>
<tr><td>(4.1)</td><td>(4.2)</td><td>(4.3)</td><td>(4.4)</td></tr>
<tr><td>(5.1)</td><td>(5.2)</td><td>(5.3)</td><td>(5.4)</td></tr>
</table>
</body>
1.html
<HEAD>
<TITLE>Правый Фрейм</title>
</head>
<BODY text="black" bgcolor="white" link=" green" vlink="purple" alink="red">
<h3>Меню</h3>
<HR>
<style type="text/css">
.b1 {
background: green;
color: white;
}
.b2 {
background: blue;
color: white;
}
</style>
<a target="info01" href="2.html">
<input name="button" type="button" class="b1" value="Вертикально"></a>
<a target="info01" href="3.html">
<input name="button" type="button" class="b2" value="Горизонтально"></a>
<p>Артебякин А.А. группа 2220</p>
</body>
</html>
2.html
<HTML>
<HEAD>
<TITLE>Правый фрейм</title>
</head>
<FRAMESET frameborder=1 framespacing=5 cols="*,*,*">
<FRAME src="tab1.html" name="info01" >
<FRAME src="tab2.html" name="info01" >
<FRAME src="tab3.html" name="info01" >
</html>
3.html
<HTML>
<HEAD>
<TITLE>Правый фрейм</title>
</head>
<FRAMESET frameborder=1 framespacing=5 rows="*,*,*">
<FRAME src="tab1.html" name="info01" >
<FRAME src="tab2.html" name="info01" >
<FRAME src="tab3.html" name="info01" >
</html>