Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Практикум по МИР.doc
Скачиваний:
3
Добавлен:
08.05.2019
Размер:
401.41 Кб
Скачать

Порядок выполнения Начало работы

  1. Ознакомиться с общими сведениями о предмете лабораторной работы (см. выше в описании данной работы) и рекомендуемыми дополнительными материалами.

  2. Уяснить цель работы.

  3. Подготовить необходимые программные и технические средства (см. выше в описании данной работы).

  4. Приступить к выполнению работы:

Основы построения html-страниц

Цель этой части работы - усвоить основы построения HTML-страниц и научиться создавать простую HTML-страницу. Выполните нижеследующие задания:

  1. Используя notepad.exe (Блокнот), подготовьте следующий текст и сохраните его в текстовом файле с именем, например, MyHTMLPage.htm:

<html>

<head>

<title>Моя первая страница</title>

</head>

<body>

</body>

</html>

  1. Загрузите страницу в браузер и убедитесь, что Ваш заголовок появился в верхней части окна браузера.

  2. Поместите на страницу произвольный текст так, как показано в примере ниже:

<html>

<head>

<title>Моя первая страница</title>

</head>

<body>

<p>Мой текст первого абзаца.</p>

<p>Мой текст второго абзаца.</p>

</body>

</html>

  1. Загрузите страницу в браузер и убедитесь, что Ваш текст появился в окне браузера.

  2. Сделайте часть текста жирным шрифтом. Например, так:

<p>Мой текст <b>первого</b> абзаца.</p>

  1. Отцентрируйте абзац следующим образом:

<p align="center">Мой текст <b>первого</b> абзаца.</p>

  1. Измените цвет фона Вашей страницы на черный, а цвет текста – на белый:

<body bgcolor="#000000" text="#FFFFFF">

  1. Ваша страница должна принять следующий вид:

<html>

<head>

<title>Моя первая страница</title>

</head>

<body bgcolor="#000000" text="#FFFFFF">

<p align="center">Мой текст <b>первого</b> абзаца.</p>

<p>Мой текст второго абзаца.</p>

</body>

</html>

  1. Загрузите страницу в браузер и посмотрите, что получилось.

Использование графических изображений в html-страницах

Для размещения на HTML-странице изображения используется тэг img который имеет следующий вид:

<img src="imagepath">

где imagepath – полное имя к файлу изображения (путь и имя).

Цель этой части работы - научиться размещать графические изображения в HTML-странице. Выполните нижеследующие задания:

  1. Предположим, у Вас есть файл изображения mypicture.gif. Включите в HTML-страницу изображение:

<img src="mypicture.gif">

Заметим, что в этом случае файл mypicture.gif должен находиться в том же самом каталоге (папке), где находится Ваша страница MyHTMLPage.htm.

  1. Загрузите страницу в браузер и посмотрите, что получилось.

  2. Включите в HTML-страницу изображение, которая находится в специальном каталоге (папке) для файлов изображений. Обычно, такой каталог называется images и он является подкаталогом основного каталога, где находятся файлы страниц. Создайте такой каталог и включите в Вашу страницу следующий тэг:

<img src="images/mypicture.gif">

  1. Загрузите страницу в браузер и посмотрите, что получилось.

  2. Создайте каталог images2, который находится на том же уровне, что и каталог с Вашей страницей. Включите в Вашу страницу следующий тэг:

<img src="../images2/mypicture.gif">

  1. Загрузите страницу в браузер и посмотрите, что получилось.

  2. Измените размеры изображения, включенного в Вашу HTML-страницу:

<img src="mypicture.gif" width="x" height="y">,

где x – ширина изображения в пикселях, а y – высота изображения (также в пикселях).

  1. Сделайте рамку вокруг изображения:

<img src="mypicture.gif" width="x" height="y" border="2">

Заметьте, что значение атрибута border есть толщина рамки.

  1. Загрузите страницу в браузер и посмотрите, что получилось.

  2. Запомните типичные ошибки, которые совершаются при использовании изображений в HTML-страницах:

  • Неверное указание пути к файлу изображения

  • Отсутствие файла изображения в правильно заданном каталоге.

  • Использование имен в неправильном регистре (MyPicture.GIF вместо mypicture.gif).