Работа 4. Вставка изображений.

1.. Запустить текстовый редактор Блокнот командой [Пуск - Программы - Стандартные - Блокнот].

2. Открыть файл index. htm

3. Вставка изображений. Для размещения на Web-страницах используются графические файлы форматов GIF, JPEG и PNG.

Изображения помещаются на Web-страницу тэгом IMG с атрибутом SRC, сообщающим браузеру имя и местоположение графического файла.

<IMG SRC="image_name">

Если рядом с изображением не должно быть текста, его размещают внутри отдельного абзаца. Выравнивание рисунка по горизонтали в этом случае задают в тэге <P>. Размеры изображения (в пикселах) можно задать с помощью атрибутов WIDTH и HEIGHT.К изображению атрибутом ALT можно добавить название, которое появляется на экран или вместо иллюстрации (если по какой - либо причине графика не выводится в окне браузера), или в качестве всплывающий строки, при указании на рисунок мышью.

         Открыть

        Вставить в начале страницы картинку.

< P ALIGN =" center ">< IMG SRC =" c:\Мои документы\bscap0.jpg" WIDTH ="515" HEIGHT ="240" ALT ="Просто картинка"></ P >

Атрибут ALIGN выравнивает текст по верхнему краю, середине или нижнему краю изображения, справа или слева от него с помощью значений: top, bottom, middle, left или right.

4. Форматирование текста. Для выделения фрагментов текста используется тэг <FONT>. Атрибут FACE определяет гарнитуру шрифта, атрибут COLOR – цвет и атрибут SIZE - размер символов.

Выравнивание текста по горизонтали задает атрибут ALIGN. Его возможные значения: left - выравнивание по левому краю center – по центру и right - по правому краю.

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

       Введем заголовки различных уровней.

<H1 ALIGN="center"><FONT COLOR="#FF6600">А это - заголовок нашей странички.</FONT></H1>

<H2 ALIGN="center"><FONT COLOR="#FF6622">А это - подзаголовок нашей странички.</FONT></H2> (Сохранить файл и Обновить страничку)

         Выделим часть текста более крупным шрифтом и цветом и определим выравнивание

< P ALIGN =" left ">< FONT SIZE ="6" COLOR ="# FF 0066" FACE =" Arial " > Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по левому краю.</FONT></P>

< P ALIGN =" right ">< FONT SIZE ="5" COLOR ="# FF 0000" FACE =" Times New Roman " > Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по правому краю.</FONT></P>

 < P ALIGN =" center ">< FONT SIZE ="4" COLOR ="# FF 0011" FACE =" Arial "> Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по центру.</ FONT ></ P > (Сохранить файл и Обновить страничку)

Работа 5. Оформление гиперссылок.

1.. Запустить текстовый редактор Блокнот командой [Пуск - Программы - Стандартные - Блокнот].

2. Открыть файл index. htm

3. Различные виды гиперссылок. Связать Web-страницу с другими документами можно с помощью универсального тэга <A>, и его атрибута HREF, указывающим в каком файле хранится вызываемый ресурс.

<A HREF="file_name">Указатель ссылки</A>

file_name – путь к файлу или его URL-адрес в Интернете. Если вызываемый документ размещается в той же папке, что и Web-страница, то можно указывать только имя файла.

Указатель ссылки в окне браузера выделяется подчеркиванием и особым цветом. При указании на него мышью, ее курсор превращается в значок «рука». Щелчок мыши по указателю, вызывает переход на документ, указанный в гиперссылке.

Используем различные значения атрибута HREF для реализации различных реакций браузера:

< A HREF =" index 1. htm ">Моя вторая страничка</ A > (Сохранить файл и Обновить страничку)

А теперь с оформлением выравнивания и шрифтов Исправляем предыдущую запись.

< A HREF =" index 1. htm ">< P ALIGN =" center ">< FONT SIZE ="4" COLOR ="# FFaa 11" FACE =" Arial "> Моя вторая страничка</ FONT ></ P ></ A > (Сохранить файл и Обновить страничку)

4. Создадим вторую страничку. Для этого откроем Блокнот еще раз. И наберем в нем следующий текст.

<HTML>

<HEAD>

< TITLE >Моя втораЯ страница</ TITLE >

</HEAD>

<BODY>

<BODY BGCOLOR="#FF00CC" BACKGROUND="fon.png" TEXT="#993300" LINK="#00FF00" ALINK="#FF0000" VLINK="#00FF00">

< А HREF="index.htm"><P ALIGN="center"><FONT SIZE="4" COLOR="#FFaa11" FACE="Arial"> Моя первая страничка </A>

</BODY>

</HTML>

5. Сохраним файл под именем index 1. htm.

6. Запустить первый файл index. htm. З апустим гиперссылку Моя втораЯ страница.

В качестве указателя ссылки можно использовать не только текст, но и изображение. В этом случае указатель ссылки задается с помощью тэга <IMG>.

 Пусть в нашем проекте при щелчке мышью по маленькому рисунку, вызывается ее крупная фотография. Такой прием часто используют, для снижения времени загрузки страницы. Посетитель увидит уменьшенные копии рисунков, а при желании, сможет загрузить полномасштабное изображение. Дополним нашу страничку, введем текст в пустую строку в файл index 1. htm.  . < A HREF="carsk.jpg"><IMG SRC="carsk.gif" HEIGHT="75"></A>