Учебник по Html для начинающих. Простейшее.
Варианты применения картинок.
Мы задались вопросом как же сделать так, чтобы текст располагался весь рядом с картинкой, а не только одна его строчка. Давайте вспомним об атрибуте align, отвечающем за выравнивание. Атрибут align применяется также и ктегу <img src="ххх.ххх">:
<img src="pr1.png" align="left">
Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа.
Чтобы сделать наоборот (картинка справа, текст слева)в атрибуте align надо прописать right:
<img src="pr1.png" align="right">
Текст также может располагаться:
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">
атрибут vspace - задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях. Pixel - минимальная единица изображения, точка. Например, разрешение экрана 800х600 - 800 на 600 точек. В нашем примере расстояние равно 10 пикселям;
2. <img src="pr1.png" hspace="30">
атрибут hspace - тоже задает расстояние между текстом и рисунком по горизонтали. Расстояние задается в пикселях. В нашем примере оно равно 30 пикселям (точкам)
3.<img src="pr1.png" alt="моя фотография">
атрибут alt - краткое описание картинки. Если навести курсором мыши на рисунок, выскочит описание картинки. В нашем случае это будет фраза - "моя фотография". Если параметр alt не задавать, описания не будет. Но описание картинкам задавать необходимо (особенно, если это графические кнопки), т.к. многие пользователи с тарифицируемым траффиком, для его экономии, серфят (бродят) по интернету с отключенной графикой в настройках браузера. Без alt им не будет видно на что нажимать (если картинка является ссылкой или кнопкой в меню), т.к. картинка не отображается, а при заданном alt, можно увидеть надпись, для чего она предназначена. Также пользователь может открыть картинку если его заинтересует ее название, что будет для него очень удобно;
4. <img src="pr1.png" width="100">
атрибут width - ширина самой картинки (в пикселях). Если ширину не задавать то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже, или шире)
5. <img src="pr1.png" height="200">
атрибут height - высота самой картинки (в пикселях). Так же как в случае с width высоту (height) картинки можно не задавать;
6. <img src="pr1.png" border="5">
атрибут 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="resaltphoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"> Я совсем недавно начал (а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> А может и просто случайный посетитель вдруг захочет познакомиться со мной, и у меня появится <b> еще один виртуальный друг? :) </b><br><br> На фотографии изображен (а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) <br><br> Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы и в реальной жизни станем друзьями:)
</p>
</body>
</html> (посмотреть резултат)
Попробуйте поподставлять и другие атрибуты и их значения в наш пример: задать разное значение в пикселях для атрибутов и т.д. - это поможет вам лучше усвоить наш урок.
Вот мы узнали о том, как расположить текст относительно картинки (+ еще несколько нужных атрибутов), но мы не говорили, как расположить саму картинку в центре экрана (справа, слева). Здесь все очень просто, вспомните параграфы <p></p> или другие тэги для выравнивания текста, о которых мы говорили, они ведь выравнивают и другие объекты (см. наш пример, наша картинка заключена в параграф, как и текст).
И еще: картинку можно сделать фоном страницы. Это прописывается в открывающемся тэге <body>:
<body text="#336699" bgcolor="#000000" background="ваш_фон.jpg">
Атрибут background указывает на месторасположение фоновой картинка, в нашем примере он указывает на то, что наша она лежит в той же директории (папке), что и документ.
Но зачем оставлять атрибут bgcolor (фоновый цвет всей страницы), если есть background? А вдруг фоновая картинка не загрузится, тогда Ваш дизайн пересестанет существовать для пользователя.
<<< Страница 9 :Назад | Далее: Страница 11 >>>
