25.12.2012 в 10:46:50 | Добавил:rayven | Просмотров:1558 | 0 ответов
Как вставить картинку в HTML страничку? Как
разместить в HTML картинку слева, справа, по центру? Текст по отношению к
картинке и картинка - фон HTML странички.
Автор: Сергей Сукманюк
Дата создния: 2010-01-11
1. Как вставить (установить) картинку в HTML страничку?
2.
Как с помощью HTML разместить картинку слева, справа, по центру
странички? Как расположить текст по отношению к картинке? Как сделать
картинку фоном HTML странички?
На этом уроке мы начинаем
изучение тегов, которые используются в HTML для вставки картинок на
странички сайтов. Эти уроки будут лёгкими в том случае, если Вы не
будете забывать применять полученные знания на практике, то есть
вставлять картинки на Ваши HTML странички.
Совет!!!
В работе с картинками и фотографиями (для создания с нуля или
редактирования), Вам обязательно понадобятся знания графических
редакторов, таких, как Photoshop (растровая графика) или Coral Draw
(векторная графика). Один из очень хороших Photoshop-сайтов, уроками
которого я пользуюсь сам - www.photoshop-master.ru.
Программой Coral Draw на данный момент мне еще не приходилось
пользоваться в сайтостроении. Если же Вам она понадобится, то её
видео-уроков Вы сможете найти, набрав в поисковике её название.
С помощью Photoshop Вы сможете создавать несложные анимационные картинки, такие, например, как на главной страничке сайта uzeron.com
Итак, давайте приступим к первому вопросу нашей статьи...
1. Как вставить (установить) картинку в HTML страничку?
Рекомендация!!! Не
старайтесь странички украшать большим количеством картинок, так как на
данный момент у большинства пользователей, скорость Интернета очень
маленькая. Следовательно, чем больше картинок, тем больший объём
занимает страничка, и на её загрузку уходит много времени, а это
раздражает.
Для того, что бы вставить картинку, нужно использовать очень простой тег, не требующий закрытия: <img src="...">
Вместо трёх точек в кавычках ("..."), Вам
необходимо подставить путь к картинке. Расширения картинки можете
использовать любые ( *.gif, *.png, *.jpg)
Давайте рассмотрим на примере. Моя
картинка называется uzeron_pc.jpg. В таблице показано правильное
написание размещения картинки по отношению к страничке, на которой она
будет выводиться (в той же директории, выше или ниже):
В одной директории
картинка в нижней директории
картинка в верхней директории
картинка в интернете
если страничка (index.php) и картинка (uzeron_pc.jpg) лежат в одной папке, например D:\Уроки HTML
если страничка (index.php) лежит в папке D:\Уроки HTML, а картинка (uzeron_pc.jpg) лежит в папке D:\Уроки HTML\img
если страничка (index.php) лежит в папке D:\Уроки HTML, а картинка (uzeron_pc.jpg) лежит в папке выше, например на диске D:\
Картинка по адресу http://адрес сайта/ uzeron_pc.jpg
<img src=" uzeron_pc.jpg">
<img src="img/ uzeron_pc.jpg">
<img src="../ uzeron_pc.jpg">
<img src= "http://.../ uzeron_pc.jpg">
Для удобства, я рекомендую Вам размещать все картинки в отдельной папке или в нескольких папках в нижней директории.
Давайте рассмотрим на примере. Я создал в папке D:\Уроки HTML папку img,
и вставил в неё картинку с расширением .jpg. В примере, я убрал лишний
текст с тегами, более или менее постарался красиво разместить код
странички, и разместил картинку перед словом "Добро". Вот так будет
выглядеть код размещения картинки:
Так же не забывайте учитывать регистр (Uzeron_pc.jpg, uzeron_PC.jpg, UZERON_PC.JPG - совсем разные файлы)!!!
Теперь обновляем браузер, и вот такой получился результат:
Результат: мы научились выводить картинку на страничку HTML.
2.
Как с помощью HTML разместить картинку слева, справа, по центру
странички? Как расположить текст по отношению к картинке? Как сделать
картинку фоном HTML странички?
А сейчас давайте займёмся
размещением картинки на страничке по отношению к Вашему тексту.
Выровнять картинку можно, прописав для этого специальный атрибуты в тег
<img src="..." атрибут>.
Ниже я перечислю атрибуты, и что они обозначают:
<img src="uzeron_pc.jpg">
Без атрибутов - текст по умолчанию находится снизу картинки
<img src="uzeron_pc.jpg" align="right">
align="right" - картинка справа, текст слева
<img src="uzeron_pc.jpg" align="left">
align="left" - картинка слева, текст обтекает справа
<img src="uzeron_pc.jpg" align="bottom">
align="bottom" - как и по умолчанию, текст внизу картинки
<img src="uzeron_pc.jpg" align="middle">
align="middle" - текст посередине картинки
<img src="uzeron_pc.jpg" align="top">
align="top" - текст вверху картинки
<img src="uzeron_pc.jpg" vspace="10">
vspace
- задаёт расстояние между текстом и рисунком (по вертикали). Расстояние
задается в пикселях. Pixel - самая маленькая единица изображения
(точка). Например, если экран Вашего монитора 800х600, это значит, что
он имеет 800 на 600 пикселей (точек). В примере расстояние равно 10
пикселям (точкам).
<img src="uzeron_pc.jpg" hspace="20">
hspace
- задаёт горизонтальное расстояние между текстом и рисунком.
Расстояние задаётся в пикселях. В примере отступ текста от картинки
равен 20 пикселям (точкам)
<img src="uzeron_pc.jpg" alt="Сайт для сайтостроителей">
alt -
задаёт название (описание) картинки (действует не во всех браузерах. В
Internet Explorer – работает!). Работает, если ваш посетитель наведёт
мышку на картинку и подержит несколько секунд. В этом конкретном примере
появится надпись "Сайт для сайтостроителей". Я рекомендую Вам задавать
атрибут alt, особенно тогда, если Ваша картинка является ссылкой
(кнопкой).
<img src="uzeron_pc.jpg" width="150">
width
- задаёт ширину картинки в пикселях. Если же Вы не поставите этот
атрибут, то картинка будет иметь реальный размер по ширине. (Рекомендую
всегда задавать размеры!!!)
<img src="uzeron_pc.jpg" height="150">
height -
задаёт высоту картинки в пикселях. Если же Вы не поставите этот
атрибут, то картинка будет иметь реальный размер по высоте. (Рекомендую
всегда задавать размеры!!!)
<img src="uzeron_pc.jpg" border="0">
border - задаёт рамку вокруг картинки. По умолчанию рамка всегда есть. Если вы хотите убрать рамку, то задайте border=0.
<p align="center"><img src="uzeron_pc.jpg"> </p>
<p></p> - размещает саму картинку туда, куда нам необходимо. Размещение зависит от атрибута align. Есть, например:
align="left" - слева
align="center" - в центре
align="right" - справа
background="Ваш_фон.jpg"- Ваша картинка будет фоном HTML странички. В атрибуте background="Ваш_фон.jpg"
нужно прописывать путь к Вашей картинке так же, как и в размещении
обычной картинки. Я рекомендую оставлять bgcolor для того случая, если
не загрузится Ваша картинка.
Напомню Вам, что мы можем применять к одному тегу несколько атрибутов.
Сейчас давайте зададим нашей картинке такие атрибуты:
<img src="img/uzeron_pc.jpg" align="left" vspace="10" border="3" alt="Сайт для сайтостроителей uzeron.com">
- текст будет обтекать справа, отступ по ширине 10 пикселей, название картинки "Сайт для сайтостроителей uzeron.com"
Вот как это выглядит в нашем примере:
Теперь обновляем браузер и смотрим результат:
Результат: Вы научились размещать на ваши HTML странички картинки, а так же применять к ним различные атрибуты.
Статьи
iT заметки
HTML&CSS 
обсудить на форуме 
