Для подготовки к данной работе использовать "Введение в вычислительные сети", главы 9, 10, 11.
ЛАБОРАТОРНАЯ РАБОТА № 4.
C оздание ресурсов WWW. Разработка Web – страниц средствами языка HTML. Работа с текстом
1.Начинаем разработку HTML – документа в программе ”Блокнот”.
Структура HTML-документа имеет вид:
<HTML>
<HEAD> Служебные дескрипторы </HEAD>
<BODY>
текст и прочие дескрипторы
</BODY>
</HTML>
!!!!Приступая к разработке документов, придумайте тему Вашего будущего сайта и делайте отдельные страницы на эту тему.
2.Включите в документ текст, используя теги заголовков <h1>…</h1>, теги создания нового параграфа <p>…</p> по примеру, приведённому ниже.
<html>
<head> <title> Главный заголовок. Пример 1. </title> </head>
<body>
<h1 align=”center”>
Приветствуем Вас с экрана броузера!
</h1>
<p>
Это самое начало изучения HTML.
</p>
Этот документ разрабатывается в блокноте. Чтобы сохранить этот документ, надо выбрать ФАЙЛ-СОХРАНИТЬ и явно задать расширение .html.
<br>
</body>
</html>
Сохраняем этот документ, выбирая ФАЙЛ-СОХРАНИТЬ КАК и явно задаём расширение .html или .htm. Затем просматриваем его в броузере, щёлкнув по нему мышью. Вид документа в броузере:
!!!Все разработанные документы и используемые рисунки и др. объекты для Вашего сайта должны лежать в одной, специально для этого созданной папке.
3. Дополните созданный документ текстом, отформатированным с помощью тега <font>…</font>. Задайте отличающиеся от предыдущего цвет текста, тип и размер шрифта.
4.Примените в начальном теге <body> атрибуты, задающие цвет текста для всей страницы, цвет фона, используя для задания цвета разные способы, например, bgcolor=#227785 или bgcolor=”green”.
5.Включите в текст нумерованный список по приведённому ниже примеру.
<html>
<head> <title> Пример создания нумерованных списков </title> </head>
<body>
<h1> В экономическом университете работают спортивные секции:
</h1>
<OL type=1>
<LI>аэробики
<LI>волейбольная
<LI>баскетбольная и др.
</OL>
<BR>
Приходите! Кроме этих, Вас ждут и в других:
<OL type=1 start=4>
<LI>настольного тенниса,
<LI>бадминтона,
<LI>лыжной.
</OL>
</body>
</html>
Обратите внимание на прерывание списка и продолжение списка с применением атрибута start .
4.Примените к некоторым частям текста теги <i>, <b>, <EM>, позволяющие выделить текст курсивом, жирным, выделить фразу отличающимся шрифтом. Сохраните файл на флэшке с расширением .html(.htm).
ЛАБОРАТОРНАЯ РАБОТА № 5.
C оздание ресурсов WWW. Разработка Web – страниц средствами языка HTML. Работа с г иперссылками, изображениями, таблицами.
1.Создайте в своём документе гиперссылки следующего вида:
< A href =”1. html ”>Переход на другой документ</ A >
Это ссылка на документ, находящийся в вашей папке. Чтобы быстро сделать такой документ, можно изменить цвет фона страницы, созданной в предыдущей работе, и сохранить её в новый файл 1.html.
< A href =”http://lenta.ru”>Посмотрим новости</ A >
Эта гиперссылка ссылается на ресурс, расположенный на Web – сервере в Internet. В этом случае обязательно пишется протокол передачи гипертекста http.
2.Подготовьте несколько рисунков и вставьте их в свой документ, используя
тег <img>, по примеру:
< img src =” ris . jpg ”>,
где ris.jpg – имя рисунка из Вашей папки. Используйте атрибуты горизонтального выравнивания рисунка относительно границ экрана align и атрибуты, резервирующие ширину и высоту рисунка на странице – width или height. Рекомендуется указывать один из этих атрибутов (ширину или высоту) для сохранения пропорциональности размеров по ширине и высоте.
Примените для своей Web – страницы рисунок фона, записав в начальном теге <body> атрибут background =” ris 2. jpg ”. Файл ris2.gif должен быть заранее подготовлен в Вашей папке.
Сделайте рисунок гиперссылкой, применив следующий приём:
<A href=”1.html”><img src=”ris1.jpg”></A>
В данном случае щелчок по рисунку ris1.jpg приведёт к загрузке cтраницы 1.html.
3.Создайте в своём документе таблицу по нижеприведённому примеру. Наполните её другим содержанием, увеличьте количество строк.
Сначала определяем структуру таблицы:
СВЕДЕНИЯ О МИКРОПРОЦЕССОРАХ
|
МИКРОПРОЦЕСССОРЫ | |
| Pentim 3 | Pentium 4 |
| 750 МГц | 3 ГГц |
| 3,5 нм | 0,45 нм |
HTML – код, соответствующий таблице:
<table align="center" bgcolor="yellow" border=2 bordercolor="red">
<caption align="center"><font size=4 color="blue"> СВЕДЕНИЯ О МИКРОПРОЦЕССОРАХ </FONT></CAPTION>
<tr>
<th colspan=2> МИКРОПРОЦЕССОРЫ
<TR><th>Pentium 3<th>Pentium 4
<tr><td>750 МГц <td>3 ГГц
<tr><td>3,5 нм <td>0,45 нм
</table>
В начальный тег <table> вставлены атрибуты, задающие размер таблицы, выравнивание по центру экрана, цвет фона,ширину и цвет рамки. Вид таблицы, включенной в Web – страницу, на экране броузера:
Сохраните файлы в своей папке.