- •Дополнительные задания Разработка веб-страниц
- •Формирование абзацев и заголовков
- •Устройство пк
- •Пеппи Длинный чулок
- •Работа со шрифтами
- •Создание списков
- •Вставка графики и мультимедиа
- •Гиперссылки Создание гиперссылок
- •Фреймы Создание фреймов
- •Создание гиперссылок с учетом фреймов
- •Создание таблиц
- •Создание сложных таблиц
- •Оформление таблиц
- •Формы Создание форм
Фреймы Создание фреймов
• Задание 2
Создайте базовую страницу BazaG.html, на которой будут отображаться горизонтальные фреймы.
<HTML> <HEAD>
<Тitle>Фреймы</Тitle>
</HEAD>
<FRAMESET rows="40%, *">
<FRAME src="A.html">
<FRAME src="B.html">
</FRAMESET>
</HTML>
• Задание 3
Самостоятельно создайте базовую страницу BazaB1.html, на которой будут отображаться как горизонтальные, так и вертикальные фреймы одновременно.
• Задание 4
Создайте базовую страницу BazaCol.html, на которой будет отображена фреймовая структура с вложенными фреймами.
Первый вариант создания такой структуры – два HTML-документа:
Документ BasaCol.html |
Документ Basa1.html |
<HTML> <HEAD> <Тitle>Фреймы</TITLE> </HEAD> <FRAMESET rows="20%,*"> <FRAME src="A.html"> <FRAME src="Bazal.html"> </FRAMESET> </HTML> |
<HTML> <FRAMESET cols="30%,*"> <FRAME src="C.html"> <FRAME src="D.html"> </FRAMESET> </HTML> |
Второй вариант создания такой структуры – один HTML-документ:
<html> <head>
< Тitle >Фреймы</title>
</head>
<frameset rows="20%,*">
<frame src="a.html">
<frameset cols="3 0 %,*">
<frame src="C.html">
<frame src="D.html">
</frameset>
</frameset>
</html>
Создание гиперссылок с учетом фреймов
• Задание 2
Используя странички, созданные на предыдущих занятиях (zoo1.html, Z002. html, zоо3.html, start.htm), создайте следующий мини-сайт.
1) Создайте вспомогательную страничку с именем start1.htm, на которой разместите заглавие «Стихи Агнии Барто» и установите нужный фон.
2) Создайте исходную страничку с именем index.htm.
<HTML>
<HEAD> <TITLE>Мини-сайт</TITLE> </HEAD>
<FRAMESET cols="40%, 60%">
<FRAME src="start.htm" name="a">
<FRAME src="startl.htm" name="b">
</FRAMESET>
</HTML>
3) Внесите изменения в документы zoo1.html, Z002.html, Z003.html таким образом, чтобы при гиперссылке страничка открывалась во фрейме с именем b.
<А href="Z001.HTML" target="b">
ТАБЛИЦЫ
Создание таблиц
• Задание 2
Создайте HTML-документ по предложенному образцу. Таблица должна содержать строку с заглавиями, строку с текстом и строку с картинками.
<HTML>
<НЕАD><ТIТLЕ>Таблица</TITLE></НЕАD>
<BODY>
<FONT color="red" size="+5" face="Arial">
<H2 aling="сепСег"><I>Незнайкины стихи</I></Н2>
</FONT>
<TABLE border="5" width="100%>
<TR>
<TH bgcolor="pink">Знайка</ТН>
<TH bgcolor="green">
<FONT color="white">Торопыжка</FONT>
</TH>
<TH bgcolor="gold">Авоська</ТН> </TR>
<TR><TD>Знайка шел гулять на речку,<BR>
Перепрыгнул через овечку.</TD>
<ТD>Торопыжка был голодный – <BR>
Проглотил утюг холодный.</TD>
<ТD>У Авоськи под подушкой <BR>
Лежит сладкая ватрушка.</TD>
</TR>
<TR><TD><IMG src="e1.gif "></TD>
<TD><IMG src="e2.gif "></TD>
<TD><IMG src="e3.gif "></TD>
</TR></TABLE>
</BODY>
</HTML>
• Задание 3
Создайте HTML-документ по предложенному образцу. Таблица прижата к правому краю, столбцы занимают 20 % и 30 % экрана соответственно.
• Задание 4
Создайте HTML-документ по предложенному образцу (рис. 58).