Html изображение лабораторная работа

Наберите в редакторе «блокнот» текст следующего HTML-документа:

Сохраните документ с именем пример2_5.htm, откройте в браузере.

4.1. Обтекание графики текстом в документе html

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

Этот атрибут допускает задание двух значений — left right.

Значение left заставляет браузер помещать изображение слева от текста, а right — справа от него. Если надо, чтобы форматированию подвергался только определенный фрагмент текста, следует применить тэг BR с атрибутом CLEAR, указывающими позицию в тексте, начиная с которой действие механизма обтекания графики текстом отменяется. Значения left, right, all атрибута CLEAR позволяют определить, с какой стороны — левой, правой, обеих — текст далее будет свободен от графики.

Следует заметить, что если атрибут ALIGN уже был применен вами для выравнивания текста относительно графики в пределах конкретной Вэб-страницы, установить параметр обтекания графики текстом вам не удастся.

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

Наберите в редакторе «блокнот» текст следующего HTML-документа:

Сохраните документ с именем пример2_6.htm, откройте в браузере.

Источник

Лабораторная работа №2. Вставка в HTML-документ рисунков. Создание закладок и гиперссылок

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

· Научиться создавать закладки и гиперссылки

1. Вставка рисунков в документ.

· Открыть в Блокноте документ 1_name.htm.

· Вставить рисунок 1 в начало документа. Для вставки использовать тег IMG с параметрами WIDTH и HEIGHT для установки размеров рисунка 50 пикселов по горизонтали и по вертикали.

· Просмотреть в браузере полученный результат.

· Ввести в тег рисунка параметр ALIGN для выравнивания рисунка по правому краю. Просмотреть результат в браузере.

· Вставить рисунок 2 в конец документа перед, подобрать тип выравнивания рисунка на свое усмотрение. Установить размер рисунка 100 пикселов по горизонтали и по вертикали. С помощью параметра ALT создать всплывающую подсказку «Рисунок 2» , появляющуюся при наведении курсора мыши на рисунок.

· Просмотреть в браузере полученный результат.

2. Создание гиперссылок и закладок.

3. Закрепить гиперссылки за графическими файлами:

· Отредактировать тег вставки рисунка Arrows1.wmf, ввести в тег атрибут ALT для отображения текста подсказки «Вернуться». Просмотреть в браузере как реагирует рисунок на наведение курсора мыши.

· Закрепить за рисунком Arrows1.wmf в документе 4_name.htm гиперссылку на документ 3_name.htm. Выполнить переход между документами.

4. Предъявить результат преподавателю.

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

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

Источник

Вставка изображений в HTML-страницы

Для встраивания изображения в документ используется тег IMG, имеющий единственный обязательный параметр src, который определяет адрес файла с картинкой.

Для указания адреса изображения можно задавать как абсолютный, так и относительный адрес.

Пример. Вставка изображения в документ

— это абсолютный адрес размещения изображения

— адрес размещения изображения относительно корня сайта

— адрес размещения изображения относительно текущего HTML-документа

Выравнивание изображений

Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается параметром align тега IMG. В таблице перечислены возможные значение этого параметра и результат его использования.

Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Выравнивание середины изображения по базовой линии текущей строки.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Выравнивание середины изображения по средине текущей строки.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Выравнивание изображения по базовой линии текущей строки.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Выравнивание нижней границы изображения по окружающему тексту..

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Выравнивает изображение по левому краю окна.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Выравнивает изображение по правому краю окна.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Наиболее популярные параметры – left и right, создающие обтекание текста вокруг изображения. Чтобы текст не прилегал плотно к рисунку, рекомендуется в теге IMG добавить параметр hspace и vspace, задающих расстояние до текста в пикселах.

Пример. Обтекание текста вокруг рисунка