Атрибут Alt позволяет вставлять текст вместо картинки при невозможности ее просмотреть

Лабораторная работа №4 по HTML

Тема: Работа с графическим изображением.

Вставка графического изображения

 

Тег <IMG SRC=”?”> - вместо знака ? запишите название и путь к графическому файлу (кавычки можно не прописывать)

Примечание:

Для вашего удобства кладите картинку в ту же директорию, что и документ-HTML, тогда путаницы будет меньше.

Названия каталогов (папок) не должно включать пробелы!


Например:

1) <img src=my.jpg> - картинка лежит в том же каталоге (директории, папке), в которой лежит и наш HTML - документ. Вместо my.jpg мы можем подставить имя любой картинки с расширением .gif, .jpeg и .png.

3) <img src=my/my.jpg> - картинка лежит в поддиректории MY

 

4) <img src=../my.jpg> - картинка лежит на уровень выше, а документ - HTML находится в поддиректории

 

5) <img src=http://www.homepage.ru/my/my.jpg> - картинка лежит на другом сайте

2) <p><br><center><img src=my.jpg></center> -в центре по горизонтали, на новой строке


Атрибут Alt позволяет вставлять текст вместо картинки при невозможности ее просмотреть.

 

Например:

<img src =images/ежик.jpgAlt =Здесь изображен ежик обыкновенный>


ЗАДАНИЕ 1:

1. Создайте на своем диске папки S:\Html\Images

2. Занесите в папку IMAGES любой понравившийся вам файл картинки

3. Скопируйте текст в рамке в Блокнот и сохраните как lab4.html в папке Html


<html>

<head>

<title> Мои странички </title>

</head>

<body text=green bgcolor=#aaaaaa>

 

<center>

<H3>Здравствуйте, это моя вторая страница.</H3>

<br>

<font color=#CC0000> Добро пожаловать!</font></center>

<p align=justify>

<img src =? Alt =?>Я совсем недавно начал знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появится <b> еще один виртуальный друг? </b>

<br><br> На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего. <br><br> Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке? Кто знает, может быть мы и в реальной жизни станем друзьями.

</p>

</body>

</html>

 

4. Вместо знаков ? запишите путь к картинке и ее название (см. примеры выше)

5. Снабдите картинку поясняющим текстом, если ее невозможно будет считать.

6. Посмотрите, что у вас получилось.