Создание простейших 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>
3.5 Полученные результаты:
демонстрация.html при вертикальном делении.
рис.5. демонстрация.html при горизонтальном делении.
3.6 Вывод: Приобрели знания и навыки описания простых и сложных таблиц, а также создания простых фреймов в Web-страницах средствами языка HTML.