 Самое увлекательное в сайто строительстве - это работа с графикой. Ведь красоту веб страничке придает удачно подобранное изображение. Но когда вы работаете с графикой, надо быть осторожным, что бы не "переборьщить". Сайты чрезмерно перегруженные графикой выглядят довольно неуклюже и очень долго загружаются. Поэтому надо вовсем меру соблюдать.
Итак, для подключения изображения на веб страничку служит тэг: < IMG SRC=".......">
Параметры этого тэга:
SCR - Задает путь к месту расположения изображения.
ALT - Выводит строку текста пока изображения грузится или когда отключена поддержка изображений.
ALIGN - Задает положение текста относительно изображения.
top - по верхнему краю
middle- по середине
bottom- по нижнему краю
left - по левому краю
right - по правому краю
WIDTH - Ширина картинки в пикселях.
HEIGHT - Высота картинки в пикселях.
Если ширина и/или высота не указаны, картинка отображается в своем истенном размере.
HSPACE - Задает размер пустого пространсва по горизонтали от изображения.
VSPACE - Задает размер пустого пространсва по вертикале от изображения.
BORDER - Задает ширину рамки вокруг изображения.
Давайте перейдем к примерам и посмотрим как это выглядит на самом деле. У нас в корневом каталоге лежит изображение: 7014.png. Давайте будем использовать его в наших примерах.
< img src="7014.png">
Теперь попробуем включить параметры, увеличим размер в два раза (истинный размер 128Х128), добавим бордюр 2 пикселя, поместим с правой стороны экрана и добавим ALT-подпись:
< img src="7014.png" width="256" height="256" border="2" align="right" alt="Наш человечик">
А как нам быть если понравившийся нам рисунок находится на другом сайте? Я немного забегаю вперед, но ничего страшного, нам нужно будет делать ссылку на картинку этого сайта. Для примера я использовал изображение с сайта MAIL.RU. И вот, что получилось:
Кстати, что бы выровнять картинку по центру мне пришлось использовать тэг < p> (параграф):
< p align="center">< img src="http://img.imgsmail.ru/mail/ru/images/logon.gif" border="1" alt="Это изображение находится на сайте mail.ru">< /p>
Таким образом мы можем использовать любые изображения находящиеся на нашем сайте, или в любом другом месте Интернета. Вот как это может выглядеть в этом примере: (для выравнивания рисунка по центру я использовал тэг < center>... < /center>
< img src="../7014.png" width="100" height="100" align="left" alt="Картинка с нашего сайта">
< img src="http://rs.mail.ru/b8460990.jpg" align="right" alt="Картинка с сайта mail.ru">
< center>< img src="http://click.hotlog.ru/images/hotlog.gif" alt="Картинка с сайта hotlog.ru">< /center>
Ну, чтож вот и закончился очередной урок. Попробуйте скомбинировать графику и текст, посмотрите как у Вас получится. Следующее занятие мы посвятим таблицам. Без таблиц не обходится ни один мало мальский сайт (если он не чисто текстовый). Но о том какие возможности открывают нам таблици мы поговорим в следующем разделе.
|
