Язык  HTML

 Только с нашего сайта!!!

Покупая товар в ниже перечисленых   магазинах вы получите скидку  1% на все виды товара.

 

Картинки на HTML страницах

 
  1. Картинки HTML страницах

  2. Правила написания тега <img>

  3. Картинки - практическое упражнение.

  4. Картинки - код страницы с описанием.

  назад | оглавление | далее

"Картинки  HTML страницах"

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

Картинка:

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

 

"Правила написания тега <img>"

Прочитайте и постарайтесь запомнить эти простые правила и советы, относящиеся к написанию тега <IMG>, а затем мы попробуем самостоятельно вставить картинку в вашу первую HTML страничку.

Регистр букв в пути и имени картинки имеет значение
Обязательно соблюдайте регистр букв в названии картинки и пути к вашей картинке. Если вы ошибетесь хотя бы в одной букве, то картинка не будет отображаться.
Не используйте пробелы в названиях картинок и папок.
При создании вашего сайта не используйте символ пробела в названии файлов и папок. На большинстве систем это приведет к тому, что файлы не будут найдены.
Типы картинок используемых в Интернет.
В настоящее время получили распространение только два типа картинок. Это картинки GIF (имеют расширение .gif) и картинки JPEG (имеют расширение .jpg или .jpeg). Поэтому используйте только картинки этих двух типов в своих страницах. Картинки других типов не будут отображаться во всех броузерах.
Всегда используйте параметры WIDTH и HEIGHT.
Это ускорит загрузку ваших страниц и обеспечит правильное отображение картинок.
Правило искуственного уменьшения размеров картинок.
Не используйте параметры WIDTH и HEIGHT меньше реальных размеров картинки. Лучше сделайте саму картинку меньших размеров. Это ускорит загрузку страниц.
Правило искуственного увеличения размеров картинок.
При задании параметров WIDTH и HEIGHT больше реальных размеров картинки, используйте кратное увеличение (в 2 раза, в 3 раза и т.д.). Это сгладит искажение картинки при отображении. То же относится и к уменьшенным параметрам WIDTH и HEIGHT.
Всегда используйте параметр ALT.
Всегда используйте параметр ALT, для того, чтобы пользователи, которые не смогут увидет картинку, смогли прочитать комментарий к ней.
Использование абсолютных и относительных адресов.
Всегда используйте абсолютные адреса (путь и название файла) для файлов (картинок или ссылок), находящихся вне вашего сайта (на других сайтах). Всегда используйте относительные адреса для фалов и ссылок, находящихся на вашем сайте.

"Картинки - практическое упражнение."

Устали читать теоретический материал? Тогда давайте попробуем вставить собственную картинку на вашу страницу. Мы попробуем вставить 2 картинки. Первая картинка будет храниться на вашем компьютере и ее адрес будет задан относительно, а вторая будет лежать на нашем сервере и вы зададите ее адрес абсолютно.

Итак, открывайте Блокнот, или другой текстовый редактор. Откройте в нем сохраненный ранее файл myfirstpage.html (см. раздел Первая страница) или просто начните новый файл. На этой странице специально не представлен код HTML страницы с использованием тега <IMG> Код будет предоставлен и прокомментирован на следующей странице. А сейчас попробуйте самостоятельно сделать страницу, которая будет выглядет следующим образом(представьте что рамка в центре это окно броузера и ваша страница должна выглядеть так же в броузере):

 

Привет. Меня зовут Вася.
Напишите здесь любой текст о себе.
Замените Вася, на ваше имя.

IMAGE Подпись к картинке
 

 

 

Задание:

  • Ипсользуйте параметр тега <IMG> ALIGN так, чтобы текст прилегал к первой и второй картинкам, как показано на примере
  • •Используйте для первой картинки относительный адрес, сохранив первую картинку на ваш компьютер, а для второй абсолютный адрес, с нашего сервера. Для сохранения картинки, нажмите правой кнопкой мыши на картинке и выберите пункт всплывающего меню Save Picture As (Сохранить рисунок как). Вторая картинка лежит на нашем сервере http://inethelp.ru в папке /img (маленькими буквами) и называется image.gif (маленькими буквами)
  • •Первая картинка имеет размеры 80х100, а вторая 60х70. Используйте сначала реальные размеры картинок, а потом поэксперементируйте задавая различные размеры картинок, и посмторите как будут искажаться картинки в броузере.
  • •Если у вас есть сканированные фотографии или просто картинки на вашем компьютере, тогда вставьте их на свою страницу.
  • •Назовите страницу "Моя домашняя страница".
  • •Подсказка - используйте тег <BR> для переноса строки.

Давайте рассмотрим тег, отбражающий картинку на странице и его параметры на простом примере:
<IMG SRC="image.gif" WIDTH=60 HEIGHT=70 BORDER=0 ALT="IMAGE" ALIGN=left>
IMAGE  

Вот так будет выглядеть картинка на странице в том месте, в котором вы вставите тег <IMG> Как видите тег <IMG> не является парным, то есть не требует закрывающего тега. Единственным обязательным параметром тега <IMG> является параметр src. Без него графический элемент не будет отражаться на странице. Далее приводится подробное описание основных параметров тега <IMG> и их возможных значений.

SRC

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

Относительные и абсолютные пути:
Пути на компьютере задаются при помощи символа '/', который служит разделителем между названиями папок, в которых хранятся файлы. Например, если ваш файл хранится на диске компьютера C и при этом есть папка ALL в которой в свою очередь есть еще одна папка IMAGES и в этой папке хранится файл PHOTO.GIF, то абсолютный путь до файла PHOTO.GIF будет выглядеть как C:/ALL/IMAGES/PHOTO.GIF

Относительный путь задается с помошью определения относительного пути от исходной папки в которой лежит ваш HTML документ до указываемого файла. Например, если ваш HTML документ лежит на диске C в корневой директории (C:/FILE.HTML), то относительный путь до файла PHOTO.GIF будет /ALL/IMAGES/PHOTO.GIF. Но если ваш файл FILE.HTML лежит в папке HTML, которая в свою очередь находится в папке ALL на диске C, то вам нужно использовать следующую запись: ../IMAGES/PHOTO.GIF Запись '..' означает переход в структуре папок компьютера на один уровень вверх. То есть это означает в нашем примере перейти из папки C:/ALL/HTML в папку C:/ALL, а затем уже идет переход в папку IMAGES и далее название файла PHOTO.GIF Если вам потребуется перейти на несколько уровней вверх в структуре папок, то просто используйте запись ../ столько раз на сколько уровней вверх вам необходимо подняться.

Абсолютный путь в Интернет задается точно так же как на вашем компьютере, за исключением то, что он начинается не с названия диска вашего компьютера, а с записи http://название_сайта Здесь название_сайта - это начальный адрес вашего сайта в Интернет. Например если ваш сайт расположен по адресу http://members.tripod.com/~yourname, то при такой же структуре папок, как в примере приведенном выше, абсолютный путь до картинки PHOTO.GIF будет http://members.tripod.com/~yourname/ALL/IMAGES/PHOTO.GIF

При создании страниц в Интернет лучше всего использовать относительные пути. Так как вы сможете в дальнейшем просто скопировать все папки и файлы, сохранив структуру сайта и все картинки будут отображаться нормально. Если же вы будете использовать абсолютные пути, то при изменении адреса вашего сайта, вам придется исправлять все пути картинок на всех ваших страницах. Обычно абсолютные пути используют только для отображения картинок, расположенных на других сайта.

WIDTH

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

HEIGHT

Высота графического элемента в пикселах. Если вы хотите изменить реальные размеры картинки, растянуть или сжать ее, то вам достаточно просто задать нужные вам параметры ширины и высоты картинки. При этом размеры картинки будут изменены, хотя картинка будет отражаться с искажением. Значения параметров WIDTH и HEIGHT могут принимать любое целое числовое значение от 1 до бесконечности.

BORDER

Размер поля вокруг графического элемента в пикселах. Значение этого параметра может принимать любое целое число от 0 до бесконечности. Обычно этот параметр применяется для задания нулевого поля вокруг картинки в сочетании с тегом <A>(см. следующий раздел ссылки) Цвет поля вокруг картинки будет тем же, что и цвет текста в данной области HTML страницы.

ALT

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

ALIGN

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

absbottom text absbottomabsbottom text absbottom text absbottom text absbottom text absbottom text absbottom text

absmiddle text absmiddleabsmiddle text absmiddle text absmiddle text absmiddle text absmiddle text absmiddle text absmiddle

baseline text baselinebaseline text baseline text baseline text baseline text baseline text baseline text baseline text baseline text

bottom text bottombottom text bottom text bottom text bottom text bottom text bottom text bottom

left text leftleft text left text left text left text left text left text left left text left text left text left text left text left left text left text left text left text left text left left text left text left text left text left text left left text left text left text left text left text left

middle text middlemiddle text middle text middle text middle text middle text middle text middle text middle text

right text rightright text right text right text right text right text right text right right text right text right text right text right text right right text right text right text right text right text right right text right text right text right text right text right right text right text right text right text

texttop text texttoptexttop text texttop text texttop text texttop text texttop text texttop text texttop text texttop text

top text toptop text top text top text top text top text top text top text top text top text top text top text top text

"Картинки - код страницы с описанием."

Итак, вы уже потренировались вставлять картинки в свою страницу? Если у вас все получилось, можете смело пропустить эту страницу, нажав кнопку "Вперед". Ниже приводится код страницы с описанием наиболее важных моментов, касающихся размещения картинок. Комментарии, не относящиеся к коду как всегда написаны мелкими черными буквами.
<HTML>

<HEAD>
<TITLE>Моя домашняя страница!</TITLE>
<HEAD>

<BODY BGCOLOR=white>

<IMG SRC=photo.gif WIDTH=80 HEIGHT=100 ALIGN=left>
Тег <IMG> вставляет картинку photo.gif(источник SRC указан в виде относительного пути - искать photo.gif в той же папке, где находится HTML страница). Значение параметра ALIGN задано left - означает огибание текстом картинки начиная от верхнего края.

Привет. Меня зовут <B><FONT COLOR=red>Вася</FONT></B>.<BR>
Вы должны были написать здесь любой текст о себе.<br>
<BR CLEAR=all>
Параметр CLEAR тега <BR> обсуждается в главе "Форматирование отдельных элементов текста"

<BR>
<IMG SRC="http://inethelp.ru/img/image.gif" WIDTH=60 HEIGHT=70 ALT="IMAGE" ALIGN=absmiddle>
Тег <IMG> вставляет картинку image.gif(источник SRC указан в виде абсолютного пути - искать image.gif на сайте http://inethelp.ru в папке /img). Значение параметра ALIGN задано absmiddle - означает написание строки текста центральная ось которого совпадает с центром картинки.

Подпись к картинке


</BODY>

</HTML>

 

  назад | оглавление | далее

 

Заработай на чтение писем!!!

 

  

Работа в Интернет, спонсоры, раскрутка сайта.

три изобретения

Место для вашего банера взамен на наш 88x31 E-mail

| Главная | Язык HTML | CSS | JavaScript | Что такое Cookies | PHP4 |
| Медтехника | Работа | Спонсоры | Раскрутка сайта

© 2002  WebMaster E-mail  

X