Установка параметров Web-документа
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РЕСПУБЛИКИ КАЗАХСТАН МЕЖДУНАРОДНАЯ АКАДЕМИЯ БИЗНЕСА КАФЕДРА «ИНФОРМАЦИОННЫЕ ТЕХНОЛОГИИ»
ИНФОРМАТИКА
Лабораторная работа №9 Установка параметров Web-документа
Алматы, 2012 1.Цель работы: Изучение основ языка HTML.
2. Постановка задачи: Доработать Web-страницу, созданную на одном из предыдущих занятиях (лабораторная работа №8), дополнив ее различными параметрами оформления по заданию преподавателя.
Установка параметров 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>; </body>; </html>;
2) Дескрипторы оформления: а) Подчеркивание (дескриптор hr): сделаем на примере файла purpose.html. Строка, представленная ниже, пишется перед дескриптором < /body>;: Фрагмент кодировки: <div class=Section1>; <p class=MsoNormal style='text-indent:35.4pt'><b><i>Цель работы:</i></b> </p>; <p class=MsoNormal>Ознакомиться с построением фреймов.</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 class=MsoNormal style='text-indent:35.4pt'><b> <li><p align=center>Цель работы:</b> </p>; <p class=MsoNormal>Ознакомиться с построением фреймов.</p>; <hr width=80% align=left>; <body bgcolor=yellow> </div>; </body>; </html>; Все дескрипторы пишутся перед дескриптором </div>;. В результате этого должно получиться следующее (рисунок 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.)
Для того, чтобы просмотреть полученную Web-страницу, необходимо запустить индексный файл indxLr09.html.
4. Содержание отчета: - 1. Цель работы - краткая формулировка поставленной цели. - 2. Постановка задачи – формулирование задачи в соответствии с индивидуальным заданием. - 3. Порядок выполнения - определяются действия, необходимые для выполнения данной работы. - 4. Описание разработанного документа: - название файла (файлов), его размер (-ы), - отразить кодировку и синтаксис всех используемых дескрипторов - 5 Результат работы: - структура (внешний вид) документа полученного в результате работы; - анализ полученных результатов. Выводы – краткая характеристика работы и полученных результатов (отвечают на поставленную цель). В выводах отметить результаты работы.
|
