III. Создание изображений и использование их в HTML-документах

Практическая работа № 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-документа вновь изученные теги.

Наши рекомендации