школа по созданию сайтов


Урок 2. Изображения в html

Вставить изображение в html на свою страничку очень просто. Для этого используется тег «src img=""». У этого тега есть основные атрибуты ширины изображения «width» и высоты изображения «height». По-умолчанию, изображение будет всегда помещаться в верхнем левом углу полосы заверстки. Пример помещения изображения можно посмотреть на листинге где показан html код изображения:

html код изображения

Да, если Ваше изображение находится в той же папке, что и html-страница, то путь к нему можно не указывать. Например: «img src="Izo1.PNG" width="60" height="50" border=0». Вместо «Кавычек-ёлочек» для тегов мы указываем, как Вы помните, угловые скобки. На листинге указан путь к изображению находящемуся во вложенных папках корневой директории (папки), в которой находится наш html-документ. Рекомендую для начала вставлять изображения в формате: PNG(png) или JPG(jpeg), или можете попробовать картинку в формате gif. В этих случаях Вы гарантированно увидите Ваше изображение в браузере.

Как видно из листинга, в теге вставки может присутствовать также знакомый нам атрибут «title=""», но куда более ценно использовать вместе с ним атрибут «alt=""». Очень важно правильно их применять. Дело в том, что поисковая система может индексировать не только текст, но и по атрибуту «alt=""» изображение! Это стоит использовать, чтобы Вашу страничку можно было найти и при поиске среди изображений. В атрибуте «title=""» Вы указываете имя изображения, а атрибут «alt=""» должен описывать это изображение словами. Так, если браузер не сможет отыскать путь к изображению, в случае, если этот путь указан не верно, или изображение отсутствует или не совпадает его формат, то на месте изображения в рамке будет отображено то, что записано в «alt=""».

Пустая рамка иначе называется фреймом, этот элемент используется в вёрстке. И Вы с ним обязательно столкнётесь. Да, с помощью атрибута «border=...» Вы можете задать визуальную рамку для Вашего изображения. Цифра за равенством указывает на толщину рамки. Но чаще лучше использовать наложенную рамку, которую Вы можете дорисовать или наложить на изображение в любом графическом редакторе, так как стандартная рамка не всегда хорошо сочетается с картинкой, - по этому лучше выставлять значение «border=0».

вставка изображения в HTML

Как и в случае с текстом, Вы можете выравнивать изображение на страничке или в полосе (колонке). Для этого используется те же теги, что и для выравнивания текста. Просто, добавьте в код вставки изображения атрибут «align=""» и укажите образ выравнивания. Или, например, Вы можете задать выравнивание изображения вместе с текстом с помощью тега абзаца:
«p align="center"»текст-изображение-текст «/p».

Естественно, с помощью тега «src img=""» Вы можете помещать как «картинки», так и фотографии и отсканированные или нарисованные в графической программе изображения. Но важно учитывать один важный момент. Ваше изображение не должно много «весить» (не должно иметь большой размер), так как от этого сильно зависит скорость загрузки Вашей страницы. О том, как привести изображение к оптимальному виду, а также о видах графических файлов и правильном их использовании читайте дальше, на страничке форматирование изображения.




по созданию сайтов


© www.1artsite.com | Все права защищены.
© Создание сайта Сергей Меркоев, 2010-2014 гг.