Создание простейших 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.
Популярное: Как вы ведете себя при стрессе?: Вы можете самостоятельно управлять стрессом! Каждый из нас имеет право и возможность уменьшить его воздействие на нас... Почему люди поддаются рекламе?: Только не надо искать ответы в качестве или количестве рекламы... Генезис конфликтологии как науки в древней Греции: Для уяснения предыстории конфликтологии существенное значение имеет обращение к античной... Как построить свою речь (словесное оформление):
При подготовке публичного выступления перед оратором возникает вопрос, как лучше словесно оформить свою... ©2015-2024 megaobuchalka.ru Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. (409)
|
Почему 1285321 студент выбрали МегаОбучалку... Система поиска информации Мобильная версия сайта Удобная навигация Нет шокирующей рекламы |