Выбранный для просмотра документ 2_вставка изображения на веб-страницу.pptx
Скачать материал "Презентация на тему "Вставка изображения на веб-страницу" (11 класс)"
Рабочие листы
к вашим урокам
Скачать
1 слайд
Урок 2: Вставка изображения на
веб-страницу.
2 слайд
УРОК 2
Вставка изображения в документ
<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=“…”
ALIGN= “…”- выравнивание:
Left – картинка будет прижата к левому краю, текст обтекает ее справа
Right – картинка прижата к правому краю, текст обтекает слева
Bottom – текст располагается внизу картинки
Middle – текст располагается посередине
Top – текст располагается вверху
VSPACE - задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях.
HSPACE - задает расстояние между текстом и рисунком по горизонтали. Расстояние задается в пикселях.
4 слайд
Атрибуты тега IMG SRC=“…”
ALT - краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд, выскочит описание картинки.
WIDTH - ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже, или шире).
HEIGHT - высота самой картинки (тоже в пикселях
BORDER - рамка вокруг самой картинки (в пикселях). Можно не задавать. Однако, по умолчанию, рамка вокруг картинки есть всегда. И если вы хотите убрать ее, то выставляйте атрибут border равным нулю.
<body text="#336699" background="ваш_фон.jpg"> - задает картинку фоном страницы
5 слайд
<body text="#336699" background="ваш_фон.jpg"> - задает картинку фоном страницы
Атрибуты тега IMG SRC=“…”
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ Практическая работа 2 вставка изображения.docx
"Работа с изображением на веб-странице"
1. Напишите в Блокноте следующий текст.
<html>
<head>
<title>Мой
первый шаг </title>
< /head>
<bodytext="#336699"
bgcolor="#000000">
<divalign="center">
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<fontcolor="#CC0000"> Добро пожаловать!</font>:) </div>
<palign="justify">
<imgsrc="primtocodephoto.gif"
align="left"
HSPACE=30
VSPACE=5
alt="моя
фотография"> Я совсем
недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции
тоже захотелось создать свою домашнюю страничку для моих новых виртуальных
друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне,
черкнуть пару строчек в мою гостевую книгу. <br><br> А может и просто случайный посетитель вдруг захочет
познакомится со мной, и у меня появится <b> еще один виртуальный друг? :)</b><br><br>На фотографии изображен(а) я. Качество картинки не очень
хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица
немного проблематично. Но в целом заметно, что я вполне ничего:) <br><br> Если ты так тоже думаешь, то давай как-нибудь
встретимcя, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы и в
реальной жизни станем друзьями:)
</p>
</body>
<
/html>
2. Сохраните данный документ в своей папке под именем index.html
В данной практической работе используются новый тег
<DIV=”…”>…</DIV> – выравнивание документа,
и новое значение атрибута align,
justify – выравнивание по обоим краям
Рабочие листы
к вашим урокам
Скачать
Рабочие листы
к вашим урокам
Скачать
6 655 350 материалов в базе
Настоящий материал опубликован пользователем Галдина Анна Валентиновна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс профессиональной переподготовки
500/1000 ч.
Курс повышения квалификации
72 ч. — 180 ч.
Курс повышения квалификации
36 ч. — 180 ч.
Курс повышения квалификации
36 ч. — 180 ч.
Мини-курс
3 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.