Вернуться   Форум ChatPlanet.ru > Сервис «Мой чат» aka «Август» > Уроки

Важная информация

Ответ
 
Опции темы Опции просмотра
Старый 11.03.2009, 14:43   #1
 
Регистрация: 06.05.2007
Сообщений: 939
Вы сказали Спасибо: 271
Поблагодарили 2,651 раз
Репутация: 2546
Отправить сообщение для Mickeleangelo с помощью ICQ
Mickeleangelo вне форума
По умолчанию Изучаем HTML. Часть 4 — Добавляем картинки

В предыдущих уроках мы изучали основы html, работали с текстом и узнали, что у тегов есть атрибуты.

На этот раз мы из простых web-страничек, на которых есть только текст сделаем странички с картинками.

Для вставки картинки на страничку используется одиночный тег:
<IMG> — добавление картинки на страничку.

У этого тега есть много атрибутов. Давайте о них по порядку. Начнем с главного:
SRC обязательный атрибут. Указывает адрес (URL) файла с изображением.
Причем адрес можно указывать как абсолютный и относительный. Пример абсолютного адреса: http://chatplanet.ru/forum/blackstream/blackstream_base/logo.gif. Пример относительного адреса: blackstream/blackstream_base/logo.gif.

Если указан абсолютный адрес, то картинка просто берется по этому адресу. Если же указан относительный, то адрес картинки получается прибавлением адреса сайта к относительному адресу картинки. В данном примере адрес сайта: http://chatplanet.ru/forum/ + blackstream/blackstream_base/logo.gif = http://chatplanet.ru/forum/blackstream/blackstream_base/logo.gif — тоже самое, что мы указали как абсолютный адрес.
Получатся теги:
С абсолютным адресом картинки:
Код HTML:
<img src="http://chatplanet.ru/forum/blackstream/blackstream_base/logo.gif" />
С относительным адресом картинки:
Код HTML:
 <img src="blackstream/blackstream_base/logo.gif" />
Подробнее о абсолютных и относительных адресах читайте в следующем уроке.

Следующие 2 важных атрибута:
HEIGHT и WIDTH — определяют ширину и высоту изображения соответственно. Если указанные значения не совпадают с реальным размером изображения, изображение масштабируется (порой с заметной потерей качества). Их можно не указывать. Тогда браузеры сами определят, сколько места надо отвести под картинку. Но я очень настоятельно рекомендую пользоваться этими атрибутами вот по каким причинам: Во-первых, как грузятся странички — сначала загружается весь текст, а потом начинают подгружаться картинки. Если у Вас быстрый интернет, то это не заметно. Но если инет достаточно медленный, то этот процесс заметен. Если заранее не указать размеры изображения, то в самом начале на страничке ему отведется небольшое место. Затем, после загрузки, становятся известны размеры и браузер начинает «двигать» всю страничку, чтобы поместить загруженную картинку. В итоге, если картинок много — вся страничка начинает «скакать» при их загрузке. Но если заранее указать ширину и высоту места под картинку, то браузеры заранее отведут для нее достаточное место и страничка не будет скакать при дозагрузке картинки. Во-вторых, если по каким-то причинам картинка не загрузилась (проблемы на сервере или просто отключен показ картинок), то дизайн странички не изменится при указанных размерах картинок. А при неизвестных размерах незагруженных картинок весь дизайн странички может «поехать».

Еще 2 атрибута:
HSPACE и VSPACE — определяют отступ картинки (в пикселях) по горизонтали и вертикали от других объектов документа. Просто необходимо при обтекании изображения текстом.

Уже знакомый по предыдущим урокам атрибут:
ALIGN — указывает способ выравнивания изображения в документе. Может принимать следующие значения:
  • left — выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа.
  • right — выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева.
  • top и texttop — выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.
  • middle — выравнивает базовую линию текущей текстовой строки с центром изображения.
  • absmiddle — выравнивает центр текущей текстовой строки с центром изображения.
  • bottom и baseline — выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки.
  • absbottom — выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.
Атрибут для идентификации изображения:
NAME — определяет имя изображения, уникальное для данного документа. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр. Имя необходимо, если вы планируете осуществлять доступ к изображению, например, из JavaScript сценариев.

Часто используемый атрибут:
ALT — определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен в текстовый режим. В качестве значения задается текст с описанием изображения.

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

Атрибут для модемщиков:
LOWSRC — указывает адрес (URL) файла с альтернативным изображением более низкого качества (и, соответственно, меньшего объема), чем изображение, указанное в атрибуте SRC. Браузеры Netscape, поддерживающие данный атрибут, сначала загрузят картинку из LOWSRC, a затем заменят ее картинкой из SRC.

Из любой картинки можно сделать т.н. «карту».
Что это такое? Можно сделать так, чтобы при нажатии на разные части изображения пользователя перенаправляло на разные странички. Не смотря на то, что это очень эффектный метод, я не рекомендую его использовать. Если отображение картинок отключено, то вместо карты пользователь увидит только надпись, которая определяется тегом ALT. И догадаться, куда надо нажать, чтобы попасть в нужное место — просто никак.
Но все же атрибуты надо описать:

USEMAP — применяет к изображению навигационную карту (image map), заданную элементом MAP. В качестве значения задается имя карты с предшествующей ему решеткой. Например, если имя карты «map1», то ссылка на нее будет выглядеть как «#map1». Обратите внимание: прописные и строчные буквы в данном атрибуте трактуются браузером как разные.
ISMAP — определяет изображение как навигационную карту (image map), обрабатываемую сервером. Имеет смысл использовать только тогда, когда изображение является гиперссылкой. После клика мышкой на изображении серверу отправляются x,y-координаты нажатия. В зависимости от полученных координат, сервер (при наличии на нем соответствующего программного обеспечения) может показать вам тот или иной документ. Данный атрибут является флагом и не требует присвоения значения.

На этом про картинки все. Экспериментируйте, пишите что у Вас получилось, а что нет. Ждите следующего урока про гиперссылки!

© Mickeleangelo
__________________

Html, css, js, php, mysql. Быстро, качественно, дешево — выберите два.
Report Post
Ответить с цитированием
Эти 5 пользователя(ей) сказали Спасибо Mickeleangelo за это полезное сообщение:
Dzi (12.10.2009), Evgeny aKa СгУщЕнКa (02.08.2010), Heartbeat (07.08.2012), Mistik (19.03.2009), Star (19.03.2009)
Старый 19.03.2009, 21:24   #2
 
Регистрация: 18.11.2007
Адрес: Твоя мечта
Сообщений: 559
Вы сказали Спасибо: 1,461
Поблагодарили 2,070 раз
Репутация: 2217
Отправить сообщение для Star с помощью ICQ Отправить сообщение для Star с помощью MSN
Star вне форума
По умолчанию

как задать расстояние между картинками (кнопками) в одной строке (без переноса)?
__________________

Report Post
Ответить с цитированием
Старый 19.03.2009, 22:10   #3
 
Регистрация: 06.05.2007
Сообщений: 939
Вы сказали Спасибо: 271
Поблагодарили 2,651 раз
Репутация: 2546
Отправить сообщение для Mickeleangelo с помощью ICQ
Mickeleangelo вне форума
По умолчанию

Если я правильно понимаю, то у тебя идет код наподобие:
Код HTML:
<input type="image" src="/images/imgbutton1.gif" /><input type="image" src="/images/imgbutton2.gif" /><input type="image" src="/images/imgbutton3.gif" />
В этом случае можно добавить в стили:
Код HTML:
.button {margin-right: 20px;}
А в сам код:
Код HTML:
<input type="image" src="/images/imgbutton1.gif" class="button"/><input type="image" src="/images/imgbutton2.gif" class="button" /><input type="image" src="/images/imgbutton3.gif" class="button" />
__________________

Html, css, js, php, mysql. Быстро, качественно, дешево — выберите два.
Report Post
Ответить с цитированием
Эти 2 пользователя(ей) сказали Спасибо Mickeleangelo за это полезное сообщение:
Mistik (19.03.2009), Star (19.03.2009)
Старый 04.06.2011, 03:01   #4
 
Регистрация: 26.08.2009
Сообщений: 20
Вы сказали Спасибо: 1
Поблагодарили 11 раз
Репутация: 21
DiZ4oK вне форума
По умолчанию

по части сео(раскрутки чата) атрибут ALT .... прошло то время когда этот атрибут использовался для тех кто отключал графику в браузере для экономии трафика ...у всех шас безлимит .. но этот атрибут не потерял актуальность .поисковый машины ( поисковики) не умеют распознавать рисунок и текст на картинке... и в помощь поисковикам приходит этот атрибут..он влияет непосредственно на ранжирование страницы...многие наверно заметили что яша ввел новый сервис поиск по картинкам ..как же он распознает что за картинка ???....alt.. прописывайте ключевые слова .. что при грамотном использовании увеличит ваше посещаемость )
__________________
ICQ 764660 ICQ 816999 ICQ 372787
Report Post
Ответить с цитированием
Старый 04.06.2011, 03:06   #5
 
Регистрация: 26.08.2009
Сообщений: 20
Вы сказали Спасибо: 1
Поблагодарили 11 раз
Репутация: 21
DiZ4oK вне форума
По умолчанию

<img src="http://besedochka4u.ru/forchat/photo_prosto.gif" width="55" height="55" border="0" id="photo" alt="">
хотел вас показать в пример а нет ))) хотя верстка предусматривала это ))
__________________
ICQ 764660 ICQ 816999 ICQ 372787
Report Post
Ответить с цитированием
Ответ

Опции темы
Опции просмотра

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изучаем HTML. Часть 7 — Таблицы Mickeleangelo Уроки 4 21.02.2010 12:41
Изучаем HTML. Часть 8 — Что такое CSS Mickeleangelo Уроки 6 31.10.2009 13:15
Изучаем HTML. Часть 6 — Списки Mickeleangelo Уроки 0 20.03.2009 00:19
Изучаем HTML. Часть 5 — Ссылки Mickeleangelo Уроки 0 14.03.2009 16:57
Изучаем HTML. Часть 1 — Основы Mickeleangelo Уроки 0 06.03.2009 12:56


Текущее время: 05:17. Часовой пояс GMT +4.


Рейтинг Chat Planet Top
Посетителей всего
Просмотров сегодня
Посетителей сегодня
Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd. Перевод: zCarot
При перепечатке материалов форума обязательна активная ссылка на тему — источник информации.