Тема: Графика в HTML.

Дата: 2025-06-14; Просмотры: 9

Оценка:

0.00 из 5.00 — оценок

Скачиваний: 0

Скачать

ПЛАН ЗАНЯТИЯ

Дисциплина: ОП.16 Основы web - технологий

Преподаватель: Машарова Р.В.

Курс: 2

Группа: 1ИСП-21

Специальность: Информационные системы и программирование

Дата: 20.02.2023

Время проведения: 09.50-11.20, 2 пара

Тема: Графика в HTML.

Цель занятия:

Дидактическая: познакомиться с графикой в HTML

Развивающая: развивать логическое и критическое мышление, умение обобщать и синтезировать знания

Вид занятия лекция

Литература:

1. Храмцов П.Б., Брик С.А.,. Русак А.М., Сурин А.И., Основы web-технологий. Курс лекций. -3- е изд., пер. и доп. – Интернет-Университет Информационных Технологий, 2017. – 512 с.

2. Гаврилов М.В., Информатика и информационные технологии. Учебник для прикладного бакалавриата /М.В.Гаврилов, В.А.Климов. -4-е изд., пер. и доп. – М.: Юрайт, 2017. – 383с.

3. Новожилов О.П. Информатика. Учебник для прикладного бакалавриата /О.П.Новожилов. -3-е изд., пер. и доп. – М.: Юрайт, 2018. – 619с.

4. Симонович С.В. «Основы Информатики. Базовый курс» СПб: Питер 2018 год – 640 с.

Тема: Графика в HTML.

1. Вставка графических файлов

2. Выравнивания текста относительно изображения

3. Плавающие изображения. Поля вокруг изображений

4. Определение ширины и высоты изображения

5. Обтекание изображений текстом

6. Карты изображений

Преимущества использования графики

ü Текст разделяется на небольшие фрагменты, что позволяет быстрее усвоить содержание страницы

ü Содержание страницы разбивается на темы, что предоставляет читателю возможность лучше ориентироваться в материале

ü С помощью графических изображений можно дать информацию, которую невозможно получить из текста (фотографии и т.д.)

ü С помощью изображений можно не только сделать страницу цветной, но и придать ей определенное настроение: лирическое, юмористическое и т.д.

1. Вставка графических файлов

Встроенные изображения – это графические изображения, которые всегда остаются на одном и том же месте на Web-странице.

Плавающие изображения – выравниваются относительно окружающего их текста. Встроенные изображения как бы продолжают строку текста (если в ней есть место), а плавающие обычно переходят на новую строку.

Чтобы вставить графический файл на Web-страницу, нужно включить гипертекстовую ссылку на него (так же, как при создании гиперссылки на другую страницу). Причем изображение, на которое вы ссылаетесь, может находиться как на том же сервере, на котором расположена ваша страница, так и в любом другом месте Internet.

Для размещения грфических элементов в HTML документах используются графические файлы 3 типов: *.JPG, *.GIF или *.PNG.

Тег <IMG>

Используется для создания URL изображения и имеет следующий синтаксис:

< IMG SRC = URL _изображения>/

SRC означает источник ( source ), т.е. место, где хранится изображение.

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

Например :

<IMG src=”file_name”>

2. Выравнивания текста относительно изображения

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

Атрибут ALIGN позволяет определить взаимное расположение текста и изображений на Web-странице. Для данного атрибута используется следующий синтаксис:

< IMG ALIGN =значение SRC = URL _изображения>

В таблице приведены некоторые значения атрибута ALIGN

По умолчанию в теге < IMG > атрибуту ALIGN присваивается значение BOTTOM.

3. Плавающие изображения. Поля вокруг изображений

С помощью значений LEFT и RIGHT атрибута ALIGN можно определить, вдоль какого поля должно "плавать" изображение.

Для определения расстояния между текстом и плавающими изображениями, а также между краем окна и изображениями используются атрибуты VSPACE и HSPACE. Атрибут VSPACE служит для определения пустого пространства над и под плавающим изображением, а атрибут HSPACE – для определения пустого пространства справа и слева от плавающего изображения.

4. Определение ширины и высоты изображения

В HTML высоту и ширину изображения в пикселях можно определить с помощью атрибутов HEIGHT и WIDTH тега < IMG >.

Во время загрузки Web-страниц сначала загружаются все встроенные изображения и только потом – окружающий их текст. Но с помощью вышеприведенных атрибутов можно решить эту проблему.

Если сообщить браузеру размер в пикселях изображений, содержащихся на вашей Web-странице, то браузер сможет подготовить макет страницы и разместить текст до того, как будет окончена загрузка всех изображений.

Например :

<IMG SRC="file.gif" HEIGHT=400 ALIGN=LEFT>

5. Обтекание изображений текстом

Для определения способа обтекания текста вокруг изображения используются тег < BR > и атрибут CLEAR.

Для того чтобы удалить текст, находящийся справа от изображения, и поместить его под изображением, воспользуйтесь следующей записью:

< BR CLEAR = LEFT >.

Для удаления текста, находящегося слева от изображения, и его размещения под изображением, воспользуйтесь следующей записью:

< BR CLEAR = RIGHT >.

Чтобы удалить весь текст, расположенный слева и справа от изображения, и разместить его внизу, воспользуйтесь следующей записью:

< BR CLEAR = ALL >

Изображение-ссылка – это изображение на Web-странице, щелкнув на котором, можно открыть новую Web-страницу или службу Internet.

Типичный HTML-код изображения-ссылки выглядит примерно так:

< A HREF =" URL ">< IMG SRC ="имя_файла_изображения"></ A >

Здесь "URL" – это просто гиперссылка.

В качестве ссылки можно использовать и текст, и изображение, как показано в следующем примере:

< A HREF = Moreinfo . html > < IMG SRC ="имя файла изображения"> текст </ A >

Еще один полезный атрибут тега IMG, особенно для изображений-ссылок, - это BORDER. По умолчанию изображения-ссылки заключаются в раму шириной два пикселя. Если увеличить рамку, то станет более очевидно, что изображение является ссылкой. Если присвоить данному атрибуту значение "0", то рамка вокруг изображения будет удалена.

Альтернативы изображениям-ссылкам

Атрибут ALT позволяет определить текстовую строку, которая служит альтернативой для браузеров, не поддерживающих графику, или для пользователей, отключивших функцию загрузки изображений. Обычно такой текст отображается в рамке, отделяющей его от остального текста.

< IMG SRC =" file . gif " ALT ="Описание рисунка">

6. Карты изображений

Для распределения ссылок по картинке, например, для создания графического меню из одной большой картинки, используются карты изображений. Для применения карты изображений к графическому элементу необходимо:

• Указать имя карты изображений для графического элемента.

Например :

<IMG src="menu.gif" usemap="file_name#map_name">

• Создать карту изображений с именем map_name и поместить ее в файл с именем file_name. Если URL не указан, то поиск карты изображений map_name ведется в текущем документе.

T эг <AREA>

Код карты изображений записывается в следующем виде:

<MAP NAME="map_name">

<AREA [shape="default|rect|circle|poly"] coords="x,y,..." [href=" reference"] [nohref]>

</MAP>

Здесь тэг <AREA> определяет область на картинке. Дополнительные параметры тега <AREA> приведены в таблице.

Например :

<MAP NAME="mymap">

<AREA shape="rect" coords="0,0,50, 20" href="news.htm"><AREA shape="circle" coords="100,25,25" href="contacts.htm">

</MAP>

Карта изображений задающая 2 активных области на картинке.

Контрольные вопросы.

1. Вставка графического объекта в документ.

2. Какие графические файлы используются для вставки в документ?

3. Для чего используется графическая карта?

4. Код для вставки карты в документ.