1
2
3
Я уже вам рассказывала, как вставить картинку в
html документ. Теперь я вам расскажу и покажу, как можно расположить текст
рядом с картинкой. Заходя в тэги , вы, наверное часто встречали атрибут align.
Этот тэг помогает выравнивать объекты. Он поможет нам выровнять текст и картинки.
Картинку можно поставить по правому краю: <img src="…." align="right">
тогда текст будет слева (пример 1).
Пример 1:
<html>
<head>
<title>Выравнивание объектов</title>
</head>
<body bgcolor="#ccffcc" text="#330099">
<img src="http://astchen2006.narod.ru/knfon/ris/fon/20.gif" align="right">
Картинка справа, тогда текст будет слева.
</body>
</html>
Посмотрим?
Если по левому краю картинка, то текст будет справа от картинки
<img src="…." align="left">(пример 2).
Пример 2:
<html>
<head>
<title>Выравнивание объектов</title>
</head>
<body bgcolor="#ccffcc" text="#330099">
<img src="http://astchen2006.narod.ru/knfon/ris/fon/20.gif" align="left">
Картинка слева, тогда текст будет с права.
</body>
</html>
Посмотрим?
Если пропишем атрибут: "bottom", то выравнивание будет по умолчанию: картинка
слева, текст справа от неё <img src="…." align="bottom"> (пример 3)
Пример 3:
<html>
<head>
<title>Выравнивание объектов</title>
</head>
<body bgcolor="#ccffcc" text="#330099">
<p align="bottom">
<img src="http://astchen2006.narod.ru/knfon/ris/fon/20.gif" align=" right">
Картинка по левому краю, а текст по умолчанию (внизу картинки). </p>
</body>
</html>
Посмотрим?
Посередине: <img src="…." align="middle"> (пример 4).
Пример 4:
<html>
<head>
<title>Выравнивание объектов</title>
</head>
<body bgcolor="#ccffcc" text="#330099">
<img src="http://astchen2006.narod.ru/knfon/ris/fon/20.gif" align="middle">
Картинка по левому краю, а текст посередине.
</body>
</html>
Посмотрим?
Сделаем так, чтоб текст располагался над картинкой: не будем задавать параметры
для картинки (тогда она будет по умолчанию слева), зададим их для текста:
<p align="top"> Картинка по левому краю (по умолчанию), а текст вверху
(над картинкой). </p>
(пример 5).
Пример 5:
<html>
<head>
<title>Выравнивание объектов</title>
</head>
<body bgcolor="#ccffcc" text="#330099">
<p align="top">
Картинка по левому краю (по умолчанию), а текст вверху (над картинкой).</p>
<img src="http://astchen2006.narod.ru/knfon/ris/fon/20.gif" >
</body>
</html>
Посмотрим?
Если захотите, то вы можете вставить ещё пару атрибутов.
Например: сделать рамку вокруг картинки при помощи атрибута border.
Вы можете изменить толщину рамки (в пикселях), задав здесь цифру,
например 3:
<img src="…." align=" right" border="3"> (пример 6).
Пример 6:
<html>
<head>
<title>Рамка вокруг картинки.</title>
</head>
<body bgcolor="#ccffcc" text="#330099">
<p align="top">
Картинка в рамке (3 пикселя), по левому краю, текст вверху (над картинкой).</p>
<img src="http://astchen2006.narod.ru/knfon/ris/fon/20.gif" align="right"
border="3"> </body></html>
Посмотрим?
А если вам надо убрать рамку, то поставьте вместо этой цифры 0. Вот так: border="0"
попробуйте сами.
Кроме рамки вы можете задать: высоту, ширину картинки (это вы знаете),
а также: расстояние от картинки до текста (по вертикали в пикселях):
<img src="…." align="left" vspace="50"> (пример 7),
Пример 7:
<html>
<head>
<title>Выравнивание объектов</title>
</head>
<body bgcolor="#ccffcc" text="#330099">
<p align="top">
Картинка в рамке, по левому краю, текст вверху, рамка вокруг картинки 3 пикселя,
расстоянеие от текста до картинки 50 пикселей по вертикали.</p>
<img src="http://astchen2006.narod.ru/knfon/ris/fon/20.gif" align="left"
border="3" vspace="50">
</body>
</html>
Посмотрим?
расстояние от картинки до текста (по горизонтали):
<img src="…." align="middle" hspace="50"> (пример 8).
Пример 8:
<html>
<head>
<title>Выравнивание объектов</title>
</head>
<body bgcolor="#ccffcc" text="#330099">
<img src="http://astchen2006.narod.ru/knfon/ris/fon/20.gif" align="left"
hspace="50">
Картинка по левому краю, текст справа, расстояние между текстом и картинкой
50 пикселей по горизонтали.
</body>
</html>
Посмотрим?
Можно сделать подсказку на картинку, которая будет появляться, если навести на
картинку курсор и немного подождать:
<img src="…." align="left" alt="Подсказка на картинку">.
Подсказку, я бы посоветовала ставить к картинке всегда. Вдруг рисунок, а тем
более кнопка не отобразится? А у вас будет стоять подсказка, и пользователь
узнает, что тут должна была быть за картинка (увидит её описание) или
будет иметь представление, куда он попадёт при нажатии на кнопку.
Не забывайте, что атрибуты можно прописывать один в другом!
<img src="…." align="right" border="3" vspace="5" hspace="3"
alt="Подсказка на картинку"> (пример 9).
Пример 9:
<html>
<head>
<title>Выравнивание объектов</title>
</head>
<body bgcolor="#ccffcc" text="#330099">
<img src="http://astchen2006.narod.ru/knfon/ris/fon/20.gif" align="right"
border="3" hspace="50" alt="Подсказка на картинку">
Картинка по правому краю, текст слева, расстояние между текстом
и картинкой 50 пикселей, рамка вокруг картинки 3 пикселя.
</body>
</html>
Посмотрим?
Ну, вот я вам и рассказала, как можно расположить текст относительно картинки.
Теперь расскажу вам, как сделать обтекание картинки текстом.
Как вы знаете есть такой тэг <br>, который не надо закрывать и который
переносит текст на другую строку. Он нам и поможет. Также поможет нам его
атрибут clear
(он указывает расположение следующей строки текста).
Возьмём текст и картинку, сделаем обтекание после трёх первых строк.
Вот так: <img src="…." align="left">….текст….текст…. текст….текст…. текст….
текст…. текст….текст…. текст….текст…. текст….текст…. текст….
текст…. текст….текст….
<br clear="left">
текст…. текст….текст…. текст….текст…. текст….текст…. текст….
текст…. текст….текст…. (пример 10)
Пример 10:
<html>
<head>
<title>Выравнивание объектов</title>
</head>
<body bgcolor="#ccffcc" text="#330099">
<img src="http://astchen2006.narod.ru/knfon/ris/fon/20.gif" align="left">
текст….текст…. текст….текст…. текст….
текст…. текст….текст…. текст….текст…. текст….текст…. текст….
текст…. текст….текст….текст….текст…. текст….текст…. текст….
текст…. текст….текст…. текст….текст…. текст….текст…. текст….
текст…. текст….текст….
<br clear="left">
текст…. текст….текст…. текст….текст…. текст….текст…. текст….
текст…. текст….текст….
</body>
</html>
Посмотрим?
В примере 10 значение clear="left", т.е. текст обтекает картинку выровненную по
левому краю. И наоборот, если clear="right" , т.е. текст обтекает картинку
выровненную по правому краю.
Атрибут clear имеет три значения:
1. all (завершить обтекание объекта текстом).
2. left (завершить обтекание текстом объекта,
выровненного по левому краю).
3. right (завершить обтекание текстом объекта,
выровненного по правому краю)
Вот так.
Теперь я вам расскажу о том, как убрать поля по краям документа. Я думаю у
многих такая проблема. Если вы не хотите их убирать, то вы можете их увеличить
или просто уменьшить.
И так. Если вы хотите их убрать, то прописывайте в <body> атрибуты:
topmargin="0" ширина верхнего поля документа,
leftmargin="0" ширина левого поля документа,
rightmargin="0" ширина правого поля документа и
bottommargin="0" ширина нижнего поля документа.
marginheight="0" ширина верхнего поля документа в другом броузаре
marginwidth="0" ширина левого поля документа в другом броузаре)
Вот так: <body bgcolor="#ccffcc" text="#330099"
topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginheight="0"
marginwidth="0" > (пример 11)
Пример 11:
<html>
<head>
<title>Убираем поля</title>
</head>
<body bgcolor="#ccffcc" text="#330099" topmargin="0"
leftmargin="0" rightmargin="0" bottommargin="0" marginheight="0" marginwidth="0"
> <img src="http://astchen2006.narod.ru/knfon/ris/fon/20.gif" >
</body>
</html>
Посмотрим?
Ну, а если хотите увеличить ширину поля, просто меняете 0 на другую цифру.
Вот так: <body bgcolor="#ccffcc" text="#330099" topmargin="15"
leftmargin="15" rightmargin="15"
bottommargin="15" marginheight="15"
marginwidth="15" > (пример 12)
Пример 12:
<html>
<head>
<title>Увеличиваем поля</title>
</head>
<body bgcolor="#ccffcc" text="#330099" topmargin="15" leftmargin="15" rightmargin="15"
bottommargin="15" marginheight="15" marginwidth="15">
<img src="http://astchen2006.narod.ru/knfon/ris/fon/20.gif" >
</body>
</html>
Посмотрим?
Вот и всё с полями.:)
Теперь я вам расскажу, как вставить видео и музыку на страницу сайта.
Это мы сделаем при помощи тэга <embed> и его атрибутов.
Вставим такой тэг в наш документ между <body>:
<embed src="…." width="100" height="60"
autostart="true" loop="true" play_loop="1" hidden="false"> </embed>
Где:
src="…."- это как вы знаете путь к медиа файлу,
width="100"- это ширина пульта управления,
height="60"- это высота пульта управления
autostart="true"- надо ли проигрывать видео ещё раз (true/false, да/нет)
loop="true"- проигрывать с самого начала (true/false, да/нет)
play_loop="1"- сколько раз, в нашем примере 1 раз.
hidden="true"- показать или спрятать пульт управления роликом (true/false, да/нет)
Цифры опять же можете менять как хотите.
Также вы можете указать тип объекта:
typpe="папка/jpg" . (пример 13)
Пример 13:
<html>
<head>
<title>Загружаем музыку</title>
</head>
<body bgcolor="#ccffcc" text="#330099">
<embed src="http://astchen2006.narod.ru/Musika/musik.wma"
width="100" height="60" autostart="true" loop="true" play_loop="1" hidden="false">
</embed>
</body>
</html>
Посмотрим?
В примере 13, я в src="…." указала путь к музыкальному файлу в формате wma
(который отлично подходит для narod.ru)
С видео дела обстоят почти так же:
Где width и height (высота, ширина видео файла)
src="…." адрес расположения видео
id="……" указываем плеер, у меня например Windows Media
type="application/…….." тип подгружаемого объекта (чтоб узнать тип вашего файла,
правой кнопкой щёлкаем на видео файле, из контекстного меню выбираем
Свойства и смотрим в закладке Общие: Тип файла: …………..). У меня например
video Windows Media (пример 14).
Пример 14:
<html>
<head>
<title>Внедрение видео файла</title>
</head>
<body bgcolor="#ccffcc" text="#330099">
<center>
Это моё видео
<br>
<br>
<br>
<br>
<embed width="160" height="180" id="Windows Media"
type="application/video Windows Media"
src="http://astchen2006.narod.ru/stroisait/primeri/3str/Kuza-dai.wmv"></embed>
</center>
</body>
</html>
Посмотрим?
Не поленитесь заглянуть в тэги и посмотреть, какие ещё значения и атрибуты можно
задать тегу <embed >. Например, как можно выровнять объект.
Продолжение следует... Смотрите в "Обновлениях" на Главной.
1
2
3
Copyright © 2006-2007 Astchen2006_ http://astchen2006.narod.ru
All rights reserved. Все права защищены. Всё, материалы этой статьи запрещенно копировать
и распространять (без разрешения администратора) они предназначены для ознакомительных целей.
|
|
