Путь к файлу

Итак, допустим Вы пишете сайт о себе любимом и хотите вставить в него свою фотографию, чтобы люди зашедшие на страничку смогли не только читать Ваши рукописи, но и вдоволь полюбоваться Вашим портретом.

Есть у Вас значит фотография, которая где-то лежит на Вашем жёстком диске.. копируем ёе и вставляем в ту папку (директорию) где уже лежит заготовка будущей страницы, ну то есть туда же, куда сохраняете блокнотом html документ. Так, вот для того чтобы теперь вставить её в нашу страничку к ней нужно указать путь.

делается это так:

< img src=" foto.jpg" >

Где foto.jpg это название Вашей фотографии в данном случае, так как фото лежит рядом с html документом, путь к ней мы не указываем.

Да, помните, тег < img> не требует закрывающего тега!

Теперь приведу ряд примеров где путь указывается:

< img src=" myfoto/foto.jpg" > - Такая запись подразумевает, что в директории где расположен наш html документ есть папка myfoto в которой расположен файл foto.jpg
< img src=" myfoto/graphics/foto.jpg" > - Значит рядом с документом расположена папка myfoto, в ней еще одна папка с названием graphics, и уже в ней нужная нам фотография foto.jpg которую нужно выложить для всеобщего обозрения.
< img src="../foto.jpg" > - А это значит, что фото размещено на уровень выше от документа
< img src="../../foto.jpg" > - Так соответственно на два уровня выше, сколько поставите../ настолько и поднимитесь.

Так же можно указывая место фотографии, ссылаться на тот или иной интернет ресурс
< img src=" https://www.site.ru/foto/foto.jpg" >

Ну что, давайте попробуем выложить фото.

Вот мой пример:

< html>
< head>
< title> Моя первая страничка с фото< /title>
< /head>
< body text=" #484800" bgcolor=" #e8e8e8" >
< center>
< h2> < font color=" #008000" > Привет мир!!! < /font> < /h2>
< /center>
< p align=" justify" >
< font size=" +1" >
< img src=" graphics/foto.jpg" >
Меня зовут Карлсон! Я в меру упитанный мужчина - это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю < font size=" +2" color=" #ff0000" > вареньё!!! < /font> С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!
< /font>
< /p>
< /body>
< /html>

Как видно из этого примера фотография появилась, но вместе со своим появлением сдвинула текст, а не хотелось бы..

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

Поговорим о расположении изображений относительно текста.

Как и другие теги < img> тоже имеет свои атрибуты.. уже знакомый нам атрибут align " выравнивание" применим и к данному тегу

< img src=" foto.jpg" align=" left" > - фото слева от текста
< img src=" foto.jpg" align=" right" > - фото справа от текста
< img src=" foto.jpg" align=" top" > - текст выше фото
< img src=" foto.jpg" align=" bottom" > - текст ниже фото
< img src=" foto.jpg" align=" middle" > - ну и соответственно текст посередине

Помимо align тег < img> имеет еще ряд атрибутов, но сначала расскажу немного о пикселях. Пиксель (точка), наверное Вы не раз слышали это слово и думаю основная масса народа которая держала мышку в руках знает что это такое, но всё же.. Пиксель -это элементарная неделимая единица изображения. Каждый пиксель имеет свои координаты, например, самый верхний левый пиксель на мониторе имеет координаты x=1, y=1, а самый нижний правый в зависимости от разрешения монитора.. x=800, y=600 - будет соответственно при разрешении 800 на 600 точек. Впрочем, эта информация пригодится нам потом, а сейчас нужно усвоить, что все расстояния в графических изображениях меряются пикселями.. так картинка длинной 800 пикселей и шириной в 600 пикселей при указанном разрешении заполнит весь экран.

Теперь продолжим..

< img src=" foto.jpg" vspace=" 15" > - Атрибут vspace задаёт расстояние по вертикали от рисунка до текста, в данном случае мы задали расстояние в 15 пикселей
< img src=" foto.jpg" hspace=" 25" > - Расстояние по горизонтали соответственно
< img src=" foto.jpg" width=" 180" > - Ширина непосредственно самого изображения
< img src=" foto.jpg" height=" 240" > - Высота изображения. Если атрибуты width и height не использовать, то ширина и высота изображения по умолчанию будет равна реальным её размерам, без каких либо искажений.
< img src=" foto.jpg" border=" 5" > - Бордюр, рамка вокруг изображения и её толщина в пикселях.
< img src=" foto.jpg" border=" 5" bordercolor=" #008000 " > - bordercolor - это цвет рамки.
< img src=" foto.jpg" alt=" Это моя фотка!!! " > -Атрибут alt - это описание изображения. Если навести курсор на наше фото и подержать его там несколько секунд, выскочит надпись -Это моя фотка!!!
< img src=" foto.jpg" title=" Это моя фотка!!! " > - альтернатива alt в данном случае.

А еще изображение можно сделать фоном страницы.. для этого используем атрибут background " фон" открывающего тега < body>

Вот так:

< body background=" foto.jpg" >