Авторизация на сайте

Последнее из портфолио

Как с нами связаться

  • 8 953 242 0439
  • +7 953 242 0439
  • ws-aprel@ya.ru
  • *******
  • Россия, г. Горячий Ключ
» » Урок 5. Вставка графики и мультимедиа

Урок 5. Вставка графики и мультимедиа

dorofeeva 6-11-2012, 23:11 4 386 Уроки по HTML

Вставка изображений

Иллюстрации в тексте делают документ более привлекательным. Однако графические изображения довольно медленно загружаются. Поэтому использовать графику на Web-страницах нужно в разумных пределах.

 

 

Браузеры «понимают» три графических формата

Формат   GIF
Формат   JPG
Формат   PNG
GIF (Graphics Interchange Format)
Картинки в этом формате поддерживают 28=256 цветов. Некоторые GIF-файлы содержат не одну картинку, а небольшой мультик.

JPG (Joint Photographic Experts Group)
Этот формат специально разработан для передачи фотографий. Он поддерживает 224=16777216 цветов и позволяет получать изображения высокого качества.

PNG (Portable Network Graphics)
Этот формат поддерживает 248 цветов. Обладает высокой степенью сжатия и обладает всеми возможностями формата GIF.

 

Для вставки рисунка используется непарный тег <IMG />, который не имеет закрывающего тега, но имеет много атрибутов!

Атрибут    src = имя файла         (URL-адрес изображения).
Атрибут  alt = "текст надписи”  (задает надпись, которая появляется на экране, если картинка не найдена).
Атрибут  title   (задает подсказку, всплывающую при наведении указателя мыши на изображение).
Атрибуты   width = n, height = m (задают ширину и высоту рисунка в пикселях или в процентах от исходного рисунка).
Атрибут   border = n   (задает рамку вокруг картинки толщиной n пикселей).
Атрибут  hspace = n   (задает ширину в пикселях пустого поля справа и слева от изображения).
Атрибут  vspace = n   (задает ширину в пикселях пустого поля сверху и снизу от изображения).
Атрибут   align    (определяет положение картинки по отношению к соседним элементам документа)
align = top  выравнивание по верхнему краю;
align = middle выравнивание по центру;
align = bottom  по нижнему краю;
align = left  слева от текста и других объектов;
align = right  справа от текста и других объектов.

Вот пример:

Три тега IMG.

Вставляем одну и ту же картинку.

Первый раз просто так.

Второй - задаем границу.

Третий - увеличиваем картинку, задав размер по ширине, несколько больше,чем исходный.

Для пропорционального увеличения, высоту задавать не обязательно.

Урок 5. Вставка графики и мультимедиа

А это результат выполнения кода. Урок 5. Вставка графики и мультимедиа


 

Похожие новости

  • Урок 3. Горизонтальные линии и бегущая строка
  • Урок 2. Заголовки, абзацы, работа со шрифтами
  • Что такое Internet? Зачем нужен язык разметки?
  • Урок 1. Создаем HTML-документ
  • Что такое DLE?

  • Добавить комментарий

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent
    Кликните на изображение чтобы обновить код, если он неразборчив