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

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

< img src=" my.jpg" >

Вместо my.jpg мы можем подставить имя любой картинки (me.gif, main.png). Самое главное понять, что все расположенное между кавычками - ссылка (путь к картинке). Наш пример говорит о том, что картинка лежит в том же каталоге (директории, папке), в которой лежит и наш документ. Если картинка лежит в поддиректории (в папке, которая лежит в вашей основной папке), то ссылка на неё будет выглядеть так:

< img src=" my/my.jpg" >

Если картинка лежит на уровень выше, а документ находится в поддиректории, то ссылка на неё будет такой:

< img src="../my.jpg" >

Если картинка лежит на другом сайте, то путь прописывается полностью:

< img src=" https://www.homepage.ru/my/my.jpg" >

Для вашего удобства кладите картинку в ту же папку, что и документ Также я хочу обратить ваше внимание на то, что MY.jpg, my.JPG, my.jpg и MY.JPG – это разные имена файлов. Никогда не забывайте, что регистр нужно учитывать.

Расположите на своей страничке любую картинку.

Задание 2:

Атрибуте align отвечает за выравнивание. Атрибут align есть и у картинок:

< img src=" pr1.png" align=" left" >

Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы сделать наоборот (картинка справа, текст слева) надо прописать right:

< img src=" pr1.png" align=" right" >

Но это не все: текст может располагаться внизу картинки (это по умолчанию) - (1), посередине - (2), и вверху - (3):

(1) - < img src=" pr1.png" align=" bottom" >

(2) - < img src=" pr1.png" align=" middle" >

(3) - < img src=" pr1.png" align=" top" >

Примените все тэги на своей странице.

Кроме атрибута align для тэга < img> можно ввести еще несколько атрибутов:

(1) - < img src=" pr1.png" vspace=" 10" >

(2) - < img src=" pr1.png" hspace=" 30" >

(3) - < img src=" pr1.png" alt=" моя фотография" >

(4) - < img src=" pr1.png" width=" 100" >

(5) - < img src=" pr1.png" height=" 200" >

(6) - < img src=" pr1.png" border=" 5" >

(1)- атрибут vspace - задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях. Pixel - минимальная единица изображения, точка. Например, разрешение экрана 800х600 - 800 на 600 точек. В нашем примере расстояние равно 10 пикселям.

(2) - атрибут hspace - тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях. В нашем примере оно равно 30 пикселям (точкам).

(3) - атрибут alt - краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд, выскочит описание картинки. В вашем случае это будет фраза - " моя фотография".

(4) атрибут width - ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже, или шире).

(5) - атрибут height - высота самой картинки (тоже в пикселях).

(6) – атрибут border - рамка вокруг самой картинки (в пикселях). Можно не задавать. Однако, по умолчанию, рамка вокруг картинки есть всегда. И если вы хотите убрать ее, то выставляйте атрибут border равным нулю.

Атрибуты для одного тэга могут употребляться одновременно друг с другом

< img src=" pr1.png" align=" left" hspace=" 30" vspace=" 5" alt=" моя фотография" >

Примените все атрибуты для своей страницы.

Чтобы расположить картинку в центре экрана (справа, слева), вспомните параграфы (< p> < /p>) или другие тэги для выравнивания текста, они не только текст выравнивают.

Расположите картинку в центре экрана.

Картинку можно сделать фоном документа:

< body text=" #336699" bgcolor=" #000000" background=" ваш_фон.jpg" >

Атрибут background указывает на то, где лежит фоновая картинка.

Атрибут bgcolor нужно указывать на тот случай, если фоновая картинка не загрузится.

Сделайте фотографию фоновой картинкой.