Локальная сеть Подключение кабелей Волоконнооптические кабели Кабели для локальных сетей Адаптеры Ethernet Скорость передачи данных Информационные технологии

Лабораторные работы по курсу Информационные технологии. Технологии защиты информации

Лабораторная работа №9 Установка параметров Web-документа

1. Цель работы: Изучение основ языка HTML.

2. Постановка задачи: Доработать Web-страницу, созданную на одном из предыдущих занятиях (лабораторная работа №8), дополнив ее различными параметрами оформления по заданию преподавателя.

3. Установка параметров Web-документа

 1) Автоматическое обновление странички (пишется в индексном файле indxLr09.html): <meta http-equiv=refresh content=15>: http – гипертекстовый протокол передачи данных; meta – обновление. По истечении 15 сек экран должен моргнуть (произойдет автоматическое обновление странички):

 <html>

<head>

<title> Построение фреймов </title>

<meta http-equiv=refresh content=15>

<frameset cols = "*, 2* ">

<frame src= "LeftFrame.html" name="f0" >

<frame src= "RightFrame.html" name="f1" >

</frameset>

</head>

<body>

&nbsp;

</body>

</html>

2) Дескрипторы оформления:

а) Подчеркивание (дескриптор hr): сделаем на примере файла purpose.html. Строка, представленная ниже, пишется перед дескриптором </body>:

Фрагмент кодировки:

<div class=Section1>

<p style='text-indent:35.4pt'><b><i>Цель работы:</i></b> </p>

<p >Ознакомиться с построением фреймов.</p>

</div>

<hr width=80% align=left>

</body>

</html>

где, width=80% - линия будет длиной 80% от длины окна; align=left – выравнивание влево.

б) Центрирование с маркером, цвет фона и вставка рисунка:

Центрирование:

<p align=center> - по центру

<p align=left> - c левой стороны

<p align=right> - с правой стороны

Установка маркера:

<li> nbsp; где nbsp; - установка пробела

Цвет фона:

<body bgcolor=red> (lime, navy, gray, olive, yellow)

Полужирный шрифт:

<b> …… </b>

Вставка рисунка как фон странички:

Для начала необходимо нужный рисунок вставить в новый пустой документ редактора MS Word (при необходимости можно изменить яркость рисунка, чтобы он был блеклым и в дальнейшем на нем хорошо был виден текст). Далее этот документ необходимо сохранить как Web-страницу (расширение html). При сохранении, редактор MS Word поместит рисунок в отдельную папку (имя папки=имени файла с расширением html). Рисунок будет иметь название imege002.gif (или другие цифры).

Далее рисунок необходимо скопировать в каталог, где находится Web-страница (если этого не сделать, то придется задавать полный путь к рисунку), и тогда, для того, чтобы сделать рисунок фоном Web-страницы нужно написать:

<body background = imege002.gif> или

<body background ="Img/image002.gif">

Вставка в Web-страницу рисунка в виде файла:

В Web-страницу можно поместить любой рисунок с расширением *.gif или *.jpg. Эти рисунки или копируются в каталог, где находится Web-страница, или к ним пишется полный путь.

<img src="Img/image001.jpg" width=300 hieght=150 > или

<img src=image001.jpg width=300 hieght=150 >

где, width=300 hieght=150 – длина и ширина рисунка в пикселях.

Для того, чтобы в случае не обнаружения рисунка появилось сообщение, необходимо написать следующее:

<img src=image001.jpg width=300 hieght=150 alt= «Рисунок не найден!!!!!» border=1>

3) В файле, отвечающем за цель работы (purpose.html) сделаем следующее:

- название отцентрируем по середине;

- перед названием поставим маркер;

- цвет фона странички сделаем желтым.

Фрагмент кодировки:

<p style='text-indent:35.4pt'><b><li><p align=center>Цель работы:</b> </p>

<p >Ознакомиться с построением фреймов.</p>

<hr width=80% align=left>

<body bgcolor=yellow>

</div>

</body>

</html>

Все дескрипторы пишутся перед дескриптором </div>.

В результате этого должно получиться следующее (рисунок 1.)

Рисунок 1 – Вид окна браузера

4) В файле, отвечающем за постановку задачи (post.html) сделаем следующее:

- вставим фоновый рисунок;

- вставим рисунок в виде файла;

- вставим псевдорисунок (чтобы появилось сообщение).

Фрагмент кодировки:

<body background ="Img/image002.gif">

<img src="Img/image004.jpg" width=350 hieght=250 >

<img src=image001.jpg width=200 hieght=100 alt= "Рисунок не найден!!!!!" border=1>

</div>

</body>

</html>

Все дескрипторы пишутся перед дескриптором </div>.

В результате этого должно получиться следующее (рисунок 2.)

Рисунок 2 - Вид окна браузера

Для того, чтобы просмотреть полученную Web-страницу, необходимо запустить индексный файл indxLr09.html.

4. Содержание отчета:

- 1. Цель работы - краткая формулировка поставленной цели.

2. Постановка задачи – формулирование задачи в соответствии с индивидуальным заданием.

- 3. Порядок выполнения - определяются действия, необходимые для выполнения данной работы.

- 4. Описание разработанного документа:

-  название файла (файлов), его размер (-ы),

- отразить кодировку и синтаксис всех используемых дескрипторов

- 5 Результат работы:

структура (внешний вид) документа полученного в результате работы;

анализ полученных результатов.

Выводы – краткая характеристика работы и полученных результатов (отвечают на поставленную цель). В выводах отметить результаты работы.


На главную