ЛР № 8 Вставка в HTML-документ рисунков. Вставка в htmlдокумент рисунков

Название	Вставка в htmlдокумент рисунков
Анкор	ЛР № 8 Вставка в HTML-документ рисунков
Дата	31.03.2023
Размер	484.81 Kb.
Формат файла
Имя файла	ЛР № 8 Вставка в HTML-документ рисунков.docx
Тип	Лабораторная работа #1028435

Лабораторная работа № 8

Тема: Вставка в HTML-документ рисунков.

Цель: Научиться выполнять вставку рисунков в HTML-документ.

Оборудование: ПК, инструкция.
Ход работы

1. Правила ТБ.

2. Методические указания.

Графика в HTML документах.

Тег - служит для внедрения графики на страницы.

Атрибуты

src - обязательный атрибут, указывающий URL рисунка

align - выравнивает изображение к одной из сторон документа

left	Выравнивание по левому краю
right	Выравнивание по правому краю
center	Выравнивание по центру
bottom	Выравнивание по нижнему краю
top	Выравнивание по верхнему краю
middle	Выравнивание по середине

alt - выводит текст в картинки. Полезно, если браузер не отображает графику на странице

border - устанавливает толщину рамки вокруг изображения в пикселях. По умолчанию рамки не используется. При использовании изображения в качестве гиперссылки рекомендуется установить BORDER = 0, чтобы подавить цветовую окантовку, что появится вокруг изображения

ismap - сообщает, что изображение является картой-изображением на сервере

he ight - высота картинки в пикселях или процентах. Всегда желательно явно устанавливать этот параметр для ускорения загрузки страницы браузером

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

usemap - сообщает, что изображение является картой-изображением на стороне клиента

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

width - ширина картинки в пикселях или процентах. Всегда желательно явно устанавливать этот параметр для ускорения загрузки страницы браузером

vspace = 10>

Тег и обязательный закрывающий - заставляет текст прокручиваться, или перемещаться из стороны в сторону

Атрибуты

BEHAVIOR = ALTERNATE | SCROLL | SLIDE - определяет вид скроллинга

ALTERNATE

Колебательные движения влево и вправо

SCROLL

Перемещение текста в направлении, указанном в DIRECTION. Достигнув края экрана, надпись появляется снова с противоположной стороны

SLIDE

Похоже с SCROLL, но текст перемещается только один раз и останавливается

DIRECTION = DOWN | LEFT | RIGHT | UP – определяет направление скроллинга

DOWN

Движение вниз

LEFT

Движение справа налево. По умолчанию

RIGHT

Движение слева направо

UP

Движение вверх

ваш текст
Основные теги вставки рисунков, закладок и гиперссылок

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

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

Пример:

WIDTH=”550”

HEIGHT=”240”

ALIGN=” right”

ALT=”Графический файл”>

Выравнивание картинки относительно текста

Вывод текста всплывающей подсказки при наведении курсора мыши на рисунок

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

Основы Web-технологий. Лабораторная работа __. Иванов Иван Петрович.

Цвет букв, шрифт и центрирование на ваше усмотрение.

3. Задание на выполнение.

Сохраните файл одного из заданий для выполнения лабораторной работы 9.

Рисунки и текст могут быть любыми.

Задание 1.

Вставить изображение в текст:

выравнивание текста по верхнему краю рисунка

выравнивание текста по центру рисунка

выравнивание текста по нижнему краю рисунка

Задание 2.

Использовать рамки вокруг рисунка:

рисунок без рамки

рамка 2 пикселя

рамка 5 пикселей

рамка 10 пикселей

Задание 3.

Создать плавающие рисунки с обтекающим текстом вокруг них:

Задание 4.

Изменить размеры изображения:

Без изменения размера

Параметр height=60

Параметр width=55

Не пропорциональное изменения размера: height=40 width=80

Задание 5.

Создание плавающих рисунков с обтеканием текста вокруг них и отступом в 10 и 20 пикселей вокруг них

4. Оформить отчет.
5. Контрольные вопросы:

Графика в HTML документах

Специальные символы