Размещение изображения в html, ссылка на изображение

Цель урока: знакомство с возможностями размещения изображений в html

Содержание:

Размещение изображения в HTML

Размещение изображения в HTML

Форматы изображений для размещения на сайте: .gif, .png-8, .png-24, .png-32 и .jpg (jpg используется в случае необходимости размещения качественного фото)

Синтаксис:
<img src="имя_файла">
<img src="имя_файла">
img — строчный элемент с замещаемым контентом

файл изображения должен находиться в том же каталоге, что и веб-страница; иначе — для атрибута src необходимо указать путь к файлу

Пример: разместить на странице:

изображение prob.gif, файл которого располагается в папке со странницей,
изображение banner.gif, файл которого располагается в папке на уровень выше текущей страницы (необходимо выйти из папки),
изображение с сайта http://www.rambler.ru/ban.jpg

Выполнение:

<html> 
...
<body>
   <p><img src="prob.gif">
   <p><img src="../banner.gif">
   <p><img src="http://www.rambler.ru/ban.jpg">
</body></html>

Атрибуты тега img

alt — подпись

title — всплывающая подпись

Выравнивание по вертикали:

align="top"

align="middle"

align="bottom"

Выравнивание по горизонтали:

align="left"

align="right"

width — ширина (значение в пикселях)

height — высота (значение в пикселях)

border — рамка (значение 0 или 1)

Изображение как ссылка

Фоновое изображение страницы

Синтаксис:

Изображение будет растиражировано по всей странице.
Атрибут bgproperties со значением fixed позволит сделать задний фон статичным во время использования прокрутки страницы.

Лабораторная работа:

Скачайте архив с заданием

Откройте файл menu.html

Расположите файл logo.gif над заголовком Кафедра ИТ и МПИ и оформите его в виде гиперссылки, ведущей на сайт https://mmcs.sfedu.ru

Сделайте файл fon.gif фоном страницы

К оглавлению