Как вставить картинку в 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" - справа |
<body bgcolor="#000000" background= "uzeron_pc.jpg"></body> | 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 странички картинки, а так же применять к ним различные атрибуты.
В этой теме Вы можете задать вопрос о материале: Как вставить картинку в HTML страничку? .
Среда 27.11.2024, 06:38:15 
