|
||||||||||||
Меню сайта
Реклама на сайте:
|
Изображения в HTMLУрок №9 Изображения в HTML давно завоевали заслуженную популярность среди создателей сайтов. Они активно используются в дизайне сайтов, для наглядного дополнения текстовой информации, значков, рисунков, фотографий и карт изображений. Изображения на web-страницах могут использоваться двумя способами: в качестве фона и в качестве самостоятельного изображения.Важным составляющим любого изображения является его размер в килобайтах, ведь чем он больше, тем дольше будет загружаться HTML-страница. Поэтому в интернете существует три самых распространенных формата, которые содержат оптимальное соотношение размер—качество изображения — это GIF, JPG и PNG. Для вывода изображений в html существует единственный тег <img>, данный тег является одиночным и не требует закрывающего тега </img>. Атрибут src (от англ. source — источник) позволяет указать путь к изображению, которое должно быть отображено в HTML-документе. URL — обязательный параметр, который указывает браузеру, где находится изображение. Атрибут alt="описание" - не является обязательным, но лучше сразу себя приучить к тому, чтобы прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем.
Пример вставки изображений в HTML-страницуПример. Вставки изображений:
Как это будет выглядеть на странице: ... (!) Если отключить в своем браузере показ изображений, то увидите альтернативный текст атрибута alt. Выравнивание изображенийСвойство align="параметр" — определяет выравнивание рисунка. Это значение так же влияет на то, как текст будет обтекать рисунок. Может принимать следующее параметры:
Пример:
Как это будет выглядеть на странице: Рамка вокруг изображенияАтрибут border тега <img> позволяет заключить изображение в рамку, цвет которой совпадает с цветом текста на странице, а толщина задается в пикселях. По умолчанию рамка отсутствует. Пример:
Как это будет выглядеть на странице: Размер изображенияРазмеры графического изображения желательно всегда указывать явно с помощью атрибутов height и width, задающих соответственно высоту и ширину изображения. При загрузке изображения браузер будет автоматически масштабировать вашу картинку к заданным параметрам ширины и высоты. Только имейте в виду, что неаккуратное задание параметров, может привести к изменению пропорций рисунка, а следовательно, к его искажению. Пример:
Как это будет выглядеть на странице: Любое изображение имеет размер, заданный в пикселах. При встраивании изображения на страницу, возможно вам понадобиться уменьшить размер исходной картинки. Отступы от изображенияОтступы от изображения (или поля вокруг изображения) до других элементов страницы задаются с помощью атрибутов hspace и vspace - отступы по горизонтали и вертикали соответственно. Пример:
Как это будет выглядеть на странице:
(!) Отступы задаются в пикселях. Как скруглить углы у картинкиЧтобы сделать картинку более эффектной рекомендуется в некоторых случаях применять свойство border-radius Пример:
Как это будет выглядеть на странице: С помощью border-radius можно сделать не только кружок, но и эллипс, а также эллиптическое скругление у блока. Для этого надо написать не одно значение, а два через слэш. Запись 20px/10px означает, что по горизонтали радиус скругления будет 20 пикселов, а по вертикали 10 пикселов.
Читайте также:
|