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

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

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

<img src="imagepath">

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

Предположим, у Вас есть файл изображения mypicture.gif, который является, например, Вашей фотографией.

1. Включите в HTML-страницу изображение:

<img src="mypicture.gif">

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

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

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

включите в Вашу страницу следующий тэг: <img src="images/mypicture.gif">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Задание 4. Оформление текстовой информации

Цель работы: Получить основные навыки использования различных шрифтов на HTML-странице.

Здесь мы рассмотрим использование тэга FONT, предложим некоторые способы для выбора шрифтов, покажем, как поступать, если компьютер, на котором Вы работаете, не имеет нужного шрифта, а также дадим ряд других советов.

Тэг FONT говорит браузеру, какой шрифт следует использовать для показа текста, включая цвет текста и размер шрифта. Базисный синтаксис тэга FONT следующий:

<font size="size" face="typeface" color="text colour">

После этого тэга помещается текст, к которому должны быть применены характеристики шрифта. Текст должен завершиться закрывающим тэгом </font>.

Атрибут size имеет значение в диапазоне от 1 до 7 (значение по умолчанию - 3).

Атрибут face дает возможность специфицировать название шрифта, например "Times New Roman" или "Helvetica". Вы можете специфицировать здесь альтернативные шрифты, разделяя их запятыми. Это делается для случая, когда некоторые шрифты отсутствуют на компьютере. Вы также можете предложить браузеру использовать шрифты типа serif (такой, как Times) или типа nonserif (такой, как Arial), в случае, если невозможно использовать ни один из специфицированных Вами шрифтов. Для этого используются ключевые слова serif и nonserif.

Атрибут color позволяет установить цвет текста. Например, color="0000FF" определяет синий цвет текста.

Поместите на HTML-страницу следующий код:

font size="3" face="Times, Palatino, serif"

color="#FF0000">Это пример № 1</font>

<br>

<font size="2" face="Arial, Helvetica, nonserif"

color="#008000">Это пример № 1</font>

<br>

<font size="5" face="Verdana, Arial, Courier, Times"

color="#FF8000">Это пример № 1</font>

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

3. Как правило, шрифты типа serif используются для текстов, а шрифты типа nonserif используются для заголовков. Однако, если размер шрифта небольшой тексты serif могут оказаться неразборчивыми.

Поэтому старайтесь не использовать минимальные размеры шрифтов. Для упражнения поместите на страницу текст с разными размерами шрифта serif и оцените возможность их легкого прочтения.

4. Иногда для заглавных букв используют размер шрифта, отличный от размера шрифта для остального текста. Поместите на страницу следующую конструкцию и посмотрите в браузере, что получилось:

<font size="5">Д</font>обро пожаловать на мою страницу!

5. Для заголовков часто используют специальные тэги заголовков: <h1>, <h2>, …<h6>. Используйте следующие примеры для отображения

заголовков:

<h1>Заголовок 1</h1>

<h2> Заголовок 2</h2>

<h6> Заголовок 6</h6>