Практическая работа № 14.
Тема: Форматирование Web-документа. Элементы списка. Стили. Графические элементы.
Цель: Научиться форматировать Web-документ, применять элементы списка, оформление стилем и графикой Web-документ.
Последовательность выполнения работы:
I. Создание упорядоченного и маркированного списков HTML-документа.
1. Запустите текстовый редактор «Блокнот» (Пуск à Программы à Стандартные à Блокнот).
2. Наберите следующий текст:
<HTML>
<HEAD>
<TITLE>Roll</TITLE>
</HEAD>
<BODY bgcolor=" #00ffff">
<center><h3>В ХКБАД обучаются по следующим специальностям:</h3><br/> </center>
<ol>
<li>архитектор</li><br />
<li>дизайнер</li><br />
<li>строитель</li><br />
<li>теплотехник</li><br />
<li>бухгалтер</li>
</ol>
<br />
<center><h3>Обучение производится:</h3> </center>
<ul>
<li>на бюджете</li>
<li>на контракте</li>
</ul
<br />
<center><h3>Существуют формы обучения:</h3> </center>
<ul type="circle"><li>дневная</li></ul>
<ul type="disk"><li>заочная</li></ul>
<ul type="square"><li>ленивая</li></ul>
<br />
</BODY>
</HTML>
3. Сохраните файл с именем Roll.html на диск D:\ в папку Учебная.
4. Откройте файл Roll.html, запустив его двойным щелчком. Он откроется в браузере Internet Explorer.
5. Изучите, как упорядоченный и маркированный списки отображаются в программе Internet Explorer?
II. Приемы форматирования HTML-документа при помощи стиля.
6. Вновь откройте HTML-код документа Roll.
Весь последующий текст будет набираться в тегах <BODY> и </BODY>.
7. Введите тег, изменяющий цвет и размер базового шрифта:
<BASEFONT size=”5” color=” #0000ff”>
8. Сохраните код, затем перейдите в браузер и обновите документ. Что изменилось?
9. К первому заголовку добавьте тег:
<h3><strong><span style="color:red;">
В ХКБАД обучаются по следующим специальностям:
</span> </strong></h3><br />
10. Ко второму заголовку добавьте тег:
<h3><I>Обучение производится:</I></h3>
11. К третьему заголовку добавьте тег:
<h3><S>Существуют формы обучения:</S></h3>
12. Сохраните код, затем перейдите в браузер и обновите документ. Что изменилось?
13. Добавьте абзац текста, выполненный в определенном стиле:
<h2 style="text-align:center; color:lime;">World Wide Web и HTML</h2>
<p>
<span style="color: #ff00ff; letter-spacing: 0.5em;">
Современный этан развития Интернета начался в начале 90-х годов с появлением нового протокола обмена информацией. Этот протокол называется HTTP (HyperText Transfer Protocol - протокол передачи гипертекста).
</span>
Вместе с этим протоколом появилась и служба World Wide Web (часто также называемая WWW ИЛИ просто Web), которая представляет собой обширную сеть серверов HTTP, передающих файлы через Интернет.
<span style="color: red; letter-spacing: 0.5em; text-align:center; "><br />
ВАЖНО - ПРОЧИТАЙТЕ ВНИМАТЕЛЬНО!<br />
За хорошую работу получаются хорошие оценки!!!
</span>
</p>
14. Нажмите комбинацию клавиш CTRL+S; перейдите комбинацией клавиш ALT+TAB в окно браузера и обновите его содержимое, нажав кнопку «Обновить» или клавишу F5. Посмотрите, как теперь выглядит документ. Обратите внимание, как теги стиля влияют на внешний вид документа в браузере.
III. Создание изображений и использование их в HTML-документах.
15. Откройте файл Roll.html, вызовите контекстное меню и выберите команду Просмотр HTML-кода.
16. Обратите внимание на папку Img, находящуюся по адресу D:\Учебная\Img, в которой есть специально подобранные картинки с различными расширениями (.jpg,.gif,.png,.bmp).
17. Установите курсор в начало текста сразу же после тега <body bgcolor="#00ffff"> и введите следующий тег
<center><img src="./img/6.jpg" /></center><br />
18. В нумерованный список добавьте следующие изображения
<ol>
<img src="./img/ARH.WMF" />
<li>архитектор</li><br />
<img src="./img/DIZ.WMF" />
<li>дизайнер</li><br />
<img src="./img/BUD.WMF" />
<li>строитель</li><br />
<img src="./img/TT.WMF" />
<li>теплотехник</li><br />
<img src="./img/BUH.WMF" />
<li>бухгалтер</li>
</ol>
19. Сохраните код, затем перейдите в браузер и обновите документ. Посмотрите, как разместились изображения на странице. Обратите внимание на тег, ставящий объект по центру (center, right, left).
20. Измените теги:
<body bgcolor="#00ffff"> на тег <body style="background-image: url(./img/BG.jpg);">
<BASEFONT size=”5” color=”#0000ff”> на тег <BASEFONT size=”5” color=”#ffffff”>
21. Сохраните код, затем перейдите в браузер и обновите документ. Вместо цвета страницы мы поставили фоновое изображение. Фоновый рисунок достаточно темный, поэтому мы изменили цвет базового шрифта на белый.
22. Выполнив задание, покажите его преподавателю.
23. Примените в оформлении личного Web-документа вновь изученные теги.
