Технология создания сайтов

1.

ГБУ ДО ДД(Ю)Т Московского района Санкт-Петербурга
Дополнительная общеобразовательная общеразвивающая
программа
«Технология создания сайтов»
Тема: Вставка изображения на веб-страницу

Вставка изображения в документ <img src="my.jpg">
Вместо my.jpg мы можем подставить имя любой картинки (me.gif, main.png). Самое главное
понять, что все расположенное между кавычками - ссылка (путь к картинке).
Наш пример говорит о том, что картинка лежит в том же каталоге (директории, папке), в
которой лежит и наш документ. Если картинка лежит в поддиректории (в папке, которая
лежит в вашей основной папке), то ссылка на неё будет выглядеть так: <img
src="my/my.jpg">
Если картинка лежит на уровень выше, а документ находится в поддиректории, то ссылка
на неё будет такой: <img src="../my.jpg"> Если картинка лежит на другом сайте, то путь
прописывается полностью: <img src="http://www.homepage.ru/my/my.jpg">

3.

Атрибуты тега IMG SRC=“…”
Выравнивание:
Left – картинка будет прижата к левому краю, текст обтекает ее справа
Right – картинка прижата к правому краю, текст обтекает слева Bottom – текст располагается
внизу картинки
Middle – текст располагается посередине
Top – текст располагается вверху
VSPACE - задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в
пикселях.
HSPACE - задает расстояние между текстом и рисунком по горизонтали. Расстояние задается в
пикселях.

4.

Атрибуты тега IMG SRC=“…”
ALT - краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать
его (курсор) несколько секунд, выскочит описание картинки.
WIDTH - ширина самой картинки (в пикселях). Если ширину не задавать специально, то по
умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или
уже, или шире). HEIGHT - высота самой картинки (тоже в пикселях
BORDER - рамка вокруг самой картинки (в пикселях). Можно не задавать. Однако, по
умолчанию, рамка вокруг картинки есть всегда. И если вы хотите убрать ее, то выставляйте
атрибут border равным нулю.
<body text="#336699" background="ваш_фон.jpg"> - задает картинку фоном страницы

5.

Атрибуты тега IMG SRC=“…”
<body text="#336699"
background="ваш_фон.jpg"> - задает
картинку фоном страницы

6.

ПРАКТИЧЕСКАЯ РАБОТА
1. Напишите в Блокноте следующий текст:
<html>
<head>
<title>Мой первый шаг title>
< /head>
<bodytext="#336699" bgcolor="#000000">
<divalign="center">Rambler's Top100
<H3>Здравствуйте, это моя первая страница.H3>
<br>
<fontcolor="#CC0000"> Добро пожаловать!font>:) div>
<palign="justify">
<imgsrc="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография">
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою
домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии,
почитать обо мне, оставить отзыв в моей гостевой книге.
< /html>
2. Сохраните данный документ в своей папке под именем index.html

English Русский Правила