|
|
Интересные статьи
|
|
|
|
|
Основы HTML, добавление изображений 
Изображения придают сайту уникальный вид, делают его более выразительным и привлекательным. Для встраивания изображения в документ используется тег IMG, имеющий единственный обязательный параметр src, который определяет адрес файла с картинкой.
Широкое распространение для веб-графики получили два формата графических файлов — GIF и JPEG. В основном за счет их многофункциональности, универсальности и небольшого объема исходных файлов.
Выше я разместил изображение всем известной Шарлиз Терон. Что мне потребовалось для этого простого действия? Да просто написать следующее:
<p align="center"><img src="Charlize Theron.jpg" width="225" height="260" border="0"></p>
Файл изображения (в примере - Charlize Theron.jpg) должен находиться в одной папке с шаблоном сайта. Это обязательное условие для написанного выше кода.
Такие параметры тэга "img", как "width" и "height" задают соответственно ширину и высоту изображения в пикселях. В моем примере они соответствуют реальному размеру изображения. Ширину и высоту рисунка можно указать произвольно, и браузер подгонит изображение под указанный размер.
Рамка вокруг изображения. Сразу хочу сказать, что изображение можно сделать ссылкой. Для этого оно помещается между тэгами <a></a>. В этом случае вокруг рисунка браузер автоматически устанавливает рамку, цвет которой совпадает с цветом ссылок. Но рамку можно добавить самостоятельно, воспользовавшись параметром border тега IMG.
Пишем <img src="Charlize Theron.jpg" width="225" height="260" border="4" style="border-color: yellow">
Толщина рамки всегда устанавливается в пикселах, поэтому в примере параметру border присваивается число 4 без указания единиц измерения. Чтобы убрать рамку, следует задать нулевое значение у параметра border.
Также в примере с помощью стилей мы задали цвет рамки желтым.
Фоновый рисунок. В качестве фона можно использовать любое подходящее для этого изображение в формате GIF, JPEG или PNG. Если вы хотите добавить фоновый рисунок на веб-страницу, следует воспользоваться параметром background тега BODY. В качестве аргумента параметра background принимается путь к графическому файлу. Если изображение меньше размера экрана монитора, оно будет размножено по горизонтали и вертикали.
<html> <head> <title>Название сайта</title> </head> <body bgcolor="white" text="black" background="Charlize Theron.jpg"> <p>Текст</p> </body> </html>
По умолчанию фоновое изображение заполняет собой всю рабочую область веб-страницы. Изменить эту особенность можно только с помощью стилей. Атрибут "background" позволяет задать одновременно цвет фона, фоновое изображение, устанавливает положение рисунка, указывает, фиксировать фон или нет, а также определяет, как будет повторяться изображение.
<html> <head> <title>Название сайта</title> <style type="text/css"> (используем стили) BODY {background: (фон под текстом) white; (Цвет фона) url(Charlize Theron.jpg); (Путь к файлу с рисунком фона) right top (Положение в правом верхнем углу) no-repeat (Не повторять рисунок) fixed } (Зафиксировать фон) </style> </head> <body> <p>...</p> </body> </html>
Зафиксировать фон – это значит, что при любой прокрутке вэб-страницы вниз, изображение остается в окне браузера. Если эта функция вам не нужна, вместо fixed укажите scroll.
Вместо no-repeat можно указать repeat — повторяемость по вертикали и горизонтали, repeat-x — только по горизонтали, repeat-y — только по вертикали.
При указании положения фонового изображения в окне браузера помимо right и top можно также использовать параметры center, left, bottom (основание). Источник: http://www.greenlight5.com
|
|
|
|