| Меню сайта |
|
 |
| Реклама |
 |
|
|
 | |  |
|
Изображения на странице
|
|
Изображения на странице
В этом уроке мы поговорим о том, как можно добавить картинку или анимацию к себе на страничку. Для этого нам необходимо взять любое изображение, желательно небольших размеров, в формате jpg - обычная картинка или gif - анимационная картинка. Имя файла обязательно должно быть на английском языке и без всяких скобок, точек, запятых... Так как при содержании таких знаков, url картики может не отобразится браузером!
Для тех, кто по еще не обзавелся собственным сайтом, воспользуйтесь адресом моей картики.
Ну вот. Теперь нам осталось только загрузить нашу картинку в корень сайта. Для этого заходим через панель управления в файловый менеджер и создаем там папку kartinki - открыв ее, нам необходимо осуществить загрузку. Находим в компьютере,то, что нам нужно и подтверждаем свое действие. Вот и все! У нас теперь есть ссылка на этот файл. Давайте попробуем вставить изображение на web-страницу.
Тег <img>(сокращение английского слова images) - отвечающий за вставку изображения в html-страницу. Так-же он является одинарным тегом и нет никакой необходимости его закрывать. Сам по себе тег <img> ничего не значит. К нему необходимо добавить соответствующие атрибуты. Первый, самый главный атрибут - это атрибут src - сокращение английского слова source - источник. Он указывает на место расположения самого файла изображения. Так как наша картанка лежит в той же папке, нам достаточно указать имя изображения. Если бы файл картинки находился в другом месте, нам пришлось бы писать полный путь к нему.
Атрибуты тега <img>
align............... Выравнивание рисунка по краю и способ обтекания текстом.
alt..................Альтернативный текст для изображения.
border.............Толщина рамки вокруг изображения.
height.............Высота изображения.
hspace............Горизонтальный отступ от изображения до окружающего контента.
ismap..............Говорит браузеру, что картинка является серверной картой-изображением.
longdesc.........Указывает адрес документа, где содержится аннотация к картинке.
src.................Путь к графическому файлу.
vspace...........Вертикальный отступ от изображения до окружающего контента.
width............Ширина изображения.
usemap.........Ссылка на тег , содержащий координаты для клиентской карты-изображения.
Иногда, для более корректного отображения картинки, просто необходимо указать ширину и высоту данного изображения. Эти размеры мы увидим при наведении курсора мыши на файл. Так-же, в большинстве случаев, указывают отступы по горизонтали и по вертикали. Такое поведение картинки дает плавно обтекать ее текстом, а так-же быть в четко указанном месте. Добавляя к тегу <img> атрибуты с соответствующими значениями, мы получим строку примерно такого вида:
<img src="/image.jrg" width="127" height="155">
Если нам необходимо чтобы картинка выравнивалась по левому краю, а текст обтекал ее справа: то тогда нужно сначало поместить код картики, а потом уже текст:
<img src="url" align="left" hspace="20">
Погляди, что получилось
или так:
<img src="/image.jpg" width="127" height="155" align="left" hspace="20" vspace"10">
Тут текст обтекает слева, а изображение размещено справа:
<img src="url" align="right" hspace="20">
Картинка размещена по центру:
<center><img src="url"></center>
Изображение - ссылка
Существует, достаточно огромное количество разнообразых гиперссылок. Без них любые Web-сайты просто не могут обойтись! Представьте себе на минутку, что все ссылки изчезли.... , что будет тогда? Ответ прост - ничего! Любая гиперссыла - это в своем роде навигация по сайту. Но чтоб она не была скучной, состоящей только из текста, ее можно сделать графической, анимационной, бегущей строкой итд.
Давайте рассмотрим первый и самый простой вариант. Нам понадобится картинка среднего размера, (не более 500×700px) формата jpg. Так как при больших размерах изображение долго грузится или не умещаясь на странице, приходится задавать параметры width и height. Дальше необходимо загрузить ее в корневую папку, как уже писалось в "kartinki". Сейчас надо сразу вписать код html и вставить ссылку на изображение, которая у нас уже имеется. У кого еще нет сайта, воспользуйтесь моей ссылкой. Вот, что у нас получилось!
<img srс="http://samouchka-html.ucoz.ru/kartinki/ptica.png">
Теперь осталось только прикрепить к данному изображению ссылку, чтобы при щелчке по нему, было перенаправление на другую страницу этого-же сайта или абсолютно другой ресурс.
<a href="ссылка"><img srс="http://samouchka-html.ucoz.ru/kartinki/ptica.png"></a>
Как мы видим из примера, картинка размещена внутри тега <a>, точнее между открывающим и закрывающим тегом <a>. Распологается наше изображение на этом сайте в папке "kartinki" под названием "ptica". Трудного ничего нет. Вот такие графические гиперссылки, иногда разбавляют количество обычных. За счет этого сайт выглядит намного привлекательнее. Но не стоит злоупотреблять. Так как излишнее мерцание, негативно сказывается на посетителях, что тот может покинуть сайт и не вернуться!!!!
|
|
|
|
|
| |
 | |  |
|
| Заработай сейчас! |
 |
|
| Навигация по сайту |
|
|
| Поиск по сайту |
|
|
|
