 |
Упражнение 2 – создание списка
|
|
|
|
1. Добавьте в редактируемый файл-источник следующий текст:
<p align="center"><b>Мои увлечения:</b></p>
<ul>
<li><b>Компьютер</b></li>
<li><b>Интернет</b></li>
<li><b>Веб-дизайн</b></li>
</ul>
2. Поэкспериментируйте с цветом.
Упражнение 3 - вставка рисунка
1. В директорию img (см. Задание 1) поместить рисунок в формате jpg, переименовать ее в ris1.jpg.
2. В редактируемый файл-источник дописать строку (до тега </body>):
<p>А это мое любимое фото</p>
<p><img src="img/ris1.jpg" width="100" height="60" vspace="20" hspace="20" alt="Смотрите и любуйтесь"></p>
3. Сохраните этот файл под названием ind2.htm в директории site
Упражнение 4 – гиперссылки
1. Наберите в текстовом редакторе (блокнот) следующее:
<html>
<head>
<title>design-web</title>
</head><body bgcolor="#FFFFFF" text="#333333" link="#669900" vlink="#666666" alink="#000000">
<h4 align="center"><font color="#990000">Посмотрим что такое ссылка</font></h4>
<div align="center">
<ul>
<li>
<div align="left"><a href="ind1.htm">Ссылочка 1</a></div>
</li>
<li>
<div align="left"><a href="ind2.htm">Ссылочка 2</a></div>
</li>
</ul>
</div>
</body>
</html>
3.Сохраните этот файл под названием ind3.htm в директории site.
Упражнение 5 – создание модульной сетки с помощью таблицы
1. Наберите в текстовом редакторе (блокнот) следующее:
<html>
<head>
<title>заготовка страницы</title>
</head>
<body text=blue>
<table align=center border=1 bordercolor=blue width=760 height=600>
<thead bgcolor=aqua>
<tr> <th colspan=3 height=100>заголовок</tr>
</thead>
<tbody>
<tr>
<td rowspan=3 width=150> меню</td>
<td colspan=2 height=100>модуль1</td>
</tr>
<tr>
<td width=150>модуль2</td>
|
|
|
<td width=400>модуль3</td>
</tr>
<tr>
<td colspan=2 height=100>модуль4</td>
</tr>
</tbody>
<tfoot bgcolor=aqua>
<tr> <th colspan=3 height=100>заключение</tr>
</table>
</body>
</html>
Лабораторная работа № 2
Создание home page средствами Notepad
(папка web)
Основные требования:
1. табличная структура (меню, контент, заголовок);
2. сайт содержит 4 страницы:
Главная – index.htm
Обо мне – str1.htm
Мои друзья - str1.htm
Мои увлечения - str1.htm
3. Используются иллюстрации (в отдельной папке img).
| заголовок | |
| Обо мне Мои друзья Мои увлечения На главную | контент |
Последовательность выполнения работы
1. Определите контент вашей домашней странички.
2. Определите внешний вид (расположение меню, заголовков, контента)
3. Напишите главную страничку index.htm, на которой с самого начала предусмотрено наличие ссылок на страницы str1.htm, str2. htm, str3.htm
<html>
<head>
<title>my home page</title>
</head>
<body>
<table width="100%" height="100%" border="1" cellpadding="5" cellspacing="5" bordercolor="#000000" bgcolor="#000000">
<tr bordercolor="#FFFFFF">
<td height="50" colspan="2" >Моя домашняя страничка</td>
</tr>
<tr>
<td width="30%" valign="top">
<p> <a href="str1.htm">Обо мне </a></p>
<p> <a href="str2.htm">Мои друзья</a></p>
<p> <a href="str3.htm">Мои увлечения</a></p>
<p> </p>
<p> </p>
<p> </p>
<p> на главную </p>
</td>
<td width="70%" height="100" valign="top">
<p>Добро поажаловать на мою домашнюю страничку! </p>
<p>Вы находитесь на ее главной страничке </p>
</td>
</tr>
</table>
</body>
</html>
4. Для сохранения единого стиля сохраните файл index под именами: str1.htm, str2. htm, str3.htm.
Структура сатй готова.
5. Последовательно, начиная с файла index, заполните контент (2, 3 предложения на страницу).
Лабораторная работа № 3
Упражнение 1. Создание гостевой книги:
|
|
|
Напишите страничку вашей гостевой книги gk.htm вида:
Сведения о пользователе
Начало формы
Ваше имя:
Сколько Вам лет? менее 20 20-30 30-40
Ваш пол: Мужской Женский
Ваши интересы:
Компьютеры Наука Спорт
Конец формы
<html>
<head>
<title>Сведения о пользователе</title>
</head>
<body>
<div align=center><b>Сведения о пользователе</b>
<form action=mailto:e-mail method=post>
<label for name=imya>Ваше имя: </label>
<input type =text name=imya value=ФИО size=30>
<p>
<label for=age>Сколько Вам лет? </label>
<select name=age size=1>
<option value=10> менее 20
<option value=20> 20-30
<option value=30> 30-40
</select>
<p>
<label for=pol>Ваш пол:</label>
<input type=radio name=pol value=M> Мужской
<input type=radio name=pol value=W > Женский
<p>
<label for="intrests">Ваши интересы:</label>
<br>
<input type=checkbox name=intrests1 value=comp checked> Компьютеры
<input type=checkbox name=intrests1 value=science> Наука
<input type=checkbox name=intrests1 value=sport> Спорт
<p>
<input type=submit value="отправить">
<input type=reset value="очистить форму">
</form>
</body>
</html>
Упражнение 2. Использование таблиц стилей
Простой пример использования каскадных таблиц стилей включает в себя html и css файлы, текст которых указан ниже:
Содержимое файла example.html:
<html>
<head>
<link rel=stylesheet type="text/css" href="style.css">
<title>пример использования каскадных таблиц стилей</title>
</head>
<body>
<div class=first>каскадные таблицы стилей -</div>
<div class=second>это</div>
<div class=third>удобно!</div>
</body>
</html>
Содержимое файла style.css:
body {font-family: Arial, sans-serif; text-align: center}
.first {color: brown; margin-top: 60px; font-size: 40px;}
.second {color: green; margin-top: -50px; font-size: 100px;}
.third {color: black; margin-top: -80px; font-size: 120px; font-weight: bold}
Лабораторная работа № 4 Создание домашней странички
(папка web)
Основные требования:
- табличная структура (меню, контент, заголовок); сайт содержит 4 страницы; используются иллюстрации (в отдельной папке img).
1.Тема сайта - home page.
2. Опредилить структуру сайта (расположение меню, заголовков, контента)
Пример:
| заголовок | |
| Обо мне Мои увлечения Гостевая книга На главную | контент |
3. При работе использовать файлы контрольной работы № 1.
4. Написать файл стилей.
Пример: файл style.css
.zag{background-color:#ff0000; text-align:center; color:#000000}
.content{background-color:#00ff00; color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif}
|
|
|
.menu{background-color:#0000ff; color:#000000}
A {text-decoration:none}
A:vizited{color:#000000}
A:hover{color:#000000; text-decoration:underline}
5. Написать первую страницу index.htm, со ссылкой на файл стилей
Например:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>my home page</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="100%" height="100%" border="1" cellpadding="5" cellspacing="5" bordercolor="#000000" bgcolor="#000000">
<tr bordercolor="#FFFFFF">
<td height="50" colspan="2" class="zag">Заголовок</p></td>
</tr>
<tr>
<td width="30%" valign="top" class="menu">
<p> Обо мне </p>
<p> Мои увлечения </p>
<p> Гостевая книга </p>
<p> </p>
<p> </p>
<p> </p>
<p> на главную </p>
</td>
<td width="70%" height="100" valign="top" class="content">
обо мне - главная
</td>
</tr>
</table>
</body>
6. Используя команду «сохранить как», создать остальные файлы:
str1.htm, str2.htm. Третья страница str3.htm – гостевая книга.
7. Прописать все ссылки
8. Заполнить контент
9. Составить отчет о лабораторной работе.
|
|
|
