GVMproject.info-бесплатные программы, скрипты, шаблоны
Руководство по html

Как вставить картинку

Сядем, отдохнем, поговорим о планах на будущее: как рисовать, как пользоваться графическими редакторами я вас учить не буду, я только посоветую вам Adobe Photoshop и Image Styler 1.0, т.к. именно этими двумя я в основном и пользуюсь.

Пока мы все еще сидим, я себе позволю немного почитать тебе мой спутник нравоучения. Запомни, страница (сайт) не должна представлять из себя супер графического изыска, который весит сотни килобайт, т.к. это жестоко, ни одна живая душа не выдержит подобной пытки (грузить долго). Вот, например, эта страница, содержание которой ты тщательно изучаешь) весит в картинках не более 6 килобайт (это общий вес всех картинок, а не вес каждой).

Также я посоветую не изощряться с анимированными картинками (они отвлекают внимание от содержания странички, а анимированная картинка не к месту смотрится как золотое колье на немытой шее - нелепо).

Теперь я с чистой совестью поведаю, как вставлять картинки в документ:

< img src="my.jpg" >

Вместо my.jpg мы можем подставить имя любой картинки (me.gif, main.png). Самое главное понять, что все расположенное между кавычками - ссылка (путь к картинке). Наш пример говорит о том, что картинка лежит в том же каталоге (директории, папке), в которой лежит и наш документ. Если картинка лежит в поддиректории то ссылка на неё будет выглядеть так:

< img src="/my/my.jpg" >

Если картинка лежит на уровень выше, а документ находится в поддиректории, то ссылка на неё будет такой:

< img src="../my.jpg" >

Если картинка лежит на другом сайте, то путь прописывается полностью:

< img src="http://www.homepage.ru/my/my.jpg" >

Для вашего удобства кладите картинку в ту же директорию, что и документ, тогда путаницы будет меньше:)

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

< html >
< head >
< title > Мой первый шаг < /title >
< /head >
< body text="#336699" bgcolor="#000000" >
< center >
< H3 > Здравствуйте, это моя первая страница. < /H3 >
< br >
< font color="#CC0000" > Добро пожаловать! < /font > :) < /center >
< p align="justify" >
< img src="primtocodephoto.gif" > Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится < b > еще один виртуальный друг? :) < /b >
< /p >
< /body >
< /html >

Посмотрите, что у нас получилось. Не очень симпатишно, не так ли? Было бы лучше, если бы текст аккуратно располагался сбоку от картинки. Идем дальше, чтобы узнать, как это сделать.

Итак, мы задались вопросом как же сделать так, чтобы текст располагался весь рядом с картинкой, а не только одна его строчка. Все очень просто. У некоторых тэгов есть параметры (атрибуты), параметр может задаваться один, а может их быть несколько. Например у тэга < p > - < p align="justify" > . Параметр align есть и у картинок:

< img src="pr1.png" align="left" >

Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы сделать наооборот (картинка справа, текст слева) надо прописать right:

< img src="pr1.png" align="right" >

Но это не все: текст может располагаться внизу картинки (это по умолчанию) - (1), посередине - (2), и вверху - (3):

(1) - < img src="pr1.png" align="bottom" >
(2) - < img src="pr1.png" align="middle" >
(3) - < img src="pr1.png" align="top" >

Кроме параметра align существует еще несколько параметров:

(1) - < img src="pr1.png" Vspace="10" >
(2) - < img src="pr1.png" Hspace="30" >
(3) - < img src="pr1.png" alt="моя фотография" >
(4) - < img src="pr1.png" width="100" >
(5) - < img src="pr1.png" height="200" >
(6) - < img src="pr1.png" border="5" >

Теперь последуют обяснения по пунктам.

(1) - параметр vspace - задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях (pixel - минимальная единица изображения, точка. Например разрешение экрана 800х600 - 800 на 600 точек). В нашем примере расстояние равно 10 пикселям.

(2) - параметр hspace - тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях. В нашем примере оно равно 30 пикселям (точкам).

(3) - параметр alt - краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд выскочит описание картинки. В нашем случае это будет фраза - "моя фотография". Если параметр alt не задавать, описания не будет. Но умные люди говорят, что описание картинкам задавать следует (особенно, если это кнопки), т.к. есть особенные люди, которые бродят по интернету с отключенной графикой. Без alt им не будет видно на что жать, т.к. картинка не отображается, а при заданном alt, можно увидеть надпись, для чего она (картинка) предназначалась.

(4) - параметр width - ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже или шире).

(5) - параметр height - высота самой картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать. Правда, умные люди говорят, что размеры картинок следует задавать, для тех же особенных людей с отключенной графикой...

(6) - параметр border - рамка вокруг самой картинки (в пикселях). Можно не задавать.

Все параметры могут употребляться одновременно друг с другом, чтобы избежать путаницы продемонстрирую наглядно на нашей страничке. Введем следущие параметры для нашей картинки:

< img src="pr1.png" align="left" HSPACE=30 VSPACE=5 alt="моя фотография" >

Наша картинка будет прижата к левому краю экрана, текст будет обтекать ее справа, расстояние до текста по горизонтали - 30 пикселей, по вертикали - 5 пикселей (чтобы красиво все смотрелось), ну, и если вы наведете на картинку курсор, то выскочит надпись - "моя фотография".

< html >
< head >
< title > Мой первый шаг < /title >
< /head >
< body text="#336699" bgcolor="#000000" >
< center >
< H3 > Здравствуйте, это моя первая страница. < /H3 >
< br >
< font color="#CC0000" > Добро пожаловать! < /font > :) < /center >
< p align="justify" >
< img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография" > Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. < br > < br > А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится < b > еще один виртуальный друг? :) < /b > < br > < br > На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) < br > < br > Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы и в реальной жизни станем друзьями:)
< /p >
< /body >
< /html >

Советую вам прежде, чем двинуться дальше, поподставлять и другие параметры в наш пример, задавать разное значение в пикселях и так далее - это вам поможет лучше усвоить, все-таки тема большая и уже не такая простая:)

Вот мы узнали о том, как расположить текст относительно картинки (+ еще несколько нужных параметров), но мы не говорили как расположить саму картинку в центре экрана (справа, слева). Здесь все очень просто, картинки как и текст можно расположить при помощи параграфов ( < p > < /p > ), это наглядно представлено в нашем примере.

Да, чуть не забыла сказать о том, что картинку можно сделать фоном документа. Это безобразие прописывается в открывающем тэге боди:

< body text="#336699" bgcolor="#000000" background="ваш_фон.jpg" >

Параметр Background и указывет на то, где лежит фоновая картинка, в нашем примере он указывает на то, что наша фоновая картинка лежит в той же директории (папке), что и документ.

Но зачем оставлять параметр bgcolor, если есть background? А вдруг фоновая картинка не загрузится (представьте, такое может быть), тогда сами поймете зачем.

Если вы достаточно поигрались с параметрами картинок, то продолжим наше обучение.

----------------------------------


Страниц : # « 4 5 6 7 8 9 10 11 12 » #
TEXT +   TEXT -   Печать Опубликовано : 20.12.09 | Просмотров : 49959 | Ваша оценка

Введите слово для поиска :
Популярные файлы
- скрипт форума phpBB2
- Скрипт MLM пирамиды
- Nvu 1.0 визуальный редактор
- Java скрипты
- auto URL submit программа для регистрации сайта в каталогах
- PHP скрипт обменного пункта
 
Популярные статьи
- учебник вебмастеру
- Руководство по html
- Cascading Style Sheets (Таблицы Каскадных Стилей)
- Дорвеи и поисковые системы.
- Клоакинг
 
Реклама

##
##
##
 
Услуги
 
статистика
Поздравления с Новым годом

Яндекс.Метрика
 
RSS

 
В начало страницы © 2018 www.gvmproject.info CMS Danneo (некоммерческий продукт) - это бесплатная, c открытым исходным кодом система управления сайтами. Разработана на языке программирования PHP и может работать почти на любой платформе(хостинг площадке), используя в качестве базы данных MySQL. Поддерживает SEO-frendly, RSS 2.0 - каналы и Yandex-news, Google SiteMap, экспорт контента с помощью JavaScript и многое другое. А базовая комплектация позволяет построить сайт почти любой сложности и дизайна и эффективно им управлять.Распространяется в соответствии с GNU General Public 2