Расположение текста относительно картинки
Четверг, 12 августа 2010 г.Рубрика: Уроки HTML -> Работа с текстом -> Картинки
Метки: пасположение текста относительно картинки
Просмотров: 1611
Подписаться на комментарии по RSS
Итак, мы задались вопросом как же сделать так, чтобы текст
располагался весь рядом с картинкой, а не только одна его строчка. Все
очень просто. Здесь поможет атрибут 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 - краткое описание картинки. Если навести курсором
мыши на рисунок, и так подержать его (курсор) несколько секунд, выскочит
описание картинки. В нашем случае это будет фраза - "моя фотография".
Если параметр alt не задавать, описания не будет. Но умные люди говорят,
что описание картинкам задавать следует (особенно, если это кнопки),
т.к. есть особенные люди, которые бродят по интернету с отключенной
графикой. Без alt им не будет видно на что нажимать (если картинка
является ссылкой или кнопкой в меню), т.к. картинка не отображается, а
при заданном alt, можно увидеть надпись, для чего картинка
предназначена.
(4) атрибут width - ширина самой картинки (в пикселях). Если ширину не
задавать специально, то по умолчанию она будет равна реальной ширине
картинки (а так вы можете ее сделать или уже, или шире).
(5) - атрибут height - высота самой картинки (тоже в пикселях). Так же
как в случае с width высоту (height) картинки можно и не задавать.
Правда, те же умные люди говорят, что размеры картинок следует задавать,
для тех же особенных людей с отключенной графикой...
(6) – атрибут border - рамка вокруг самой картинки (в пикселях). Можно
не задавать. Однако, по умолчанию, рамка вокруг картинки есть всегда. И
если вы хотите убрать ее, то выставляйте атрибут border равным нулю.
Вы также должны знать что, атрибуты для одного тэга могут употребляться
одновременно друг с другом, чтобы избежать путаницы продемонстрируем
наглядно на нашей странице. Введем следующие атрибуты для нашей
картинки:
<img src="pr1.png" align="left" hspace="30" vspace="5" alt="моя фотография">
Наша картинка будет прижата к левому краю экрана, текст будет обтекать
ее справа, расстояние до текста по горизонтали - 30 пикселей, по
вертикали - 5 пикселей (чтобы красиво все смотрелось), ну, и если
навести на картинку курсор, то выскочит надпись - "моя фотография".
<html> <head> <title>Мой первый сайт</title> </head> <body text="#336699" bgcolor="#000000"> <div align="center"> <H3>Это мой сайт</H3> <br> <font color="#CC0000"> Добро пожаловать!</font></div> <p align="justify"> <img src="myimg.jpg" align="left" HSPACE=30 VSPACE=5 alt="моя фотография">Ведь чем лучше распологается текст, тем удобнее его читать<br><br>С выравниванием лучше! </p> </body> </html>
Советуем вам прежде, чем двинуться дальше, поподставлять и другие
атрибуты и их значения в наш пример: задать разное значение в пикселях
для атрибутов и т.д. - это поможет вам лучше усвоить наш урок, ведь тема
большая и она лучше будет пониматься на практике.
Вот мы узнали о том, как расположить текст относительно картинки (+ еще
несколько нужных атрибутов), но мы не говорили, как расположить саму
картинку в центре экрана (справа, слева). Здесь все очень просто,
вспомните параграфы (<p></p>) или другие тэги для
выравнивания текста, о которых мы говорили, ведь они не только текст
выравнивают (см. наш пример, наша картинка заключена в параграф, как и
текст).
Также картинку можно сделать фоном страницы. Это прописывается в
открывающем тэге боди:
<body text="#336699" bgcolor="#000000" background="you_fon.jpg">
Атрибут background указывает на то, где лежит фоновая картинка, в нашем
примере он указывает на то, что наша фоновая картинка лежит в той же
директории (папке), что и наш документ.
Но зачем оставлять атрибут bgcolor, если есть background? А вдруг
фоновая картинка не загрузится (представьте, такое может быть), тогда
сами поймете зачем.
очень полезный урок. а то надоедает располагать текст то сверху, то под картинкой. к тому же сочетание на одном уровне текста и картинки очень радует глаз.