HTML Урок 3. Вставка изображения

Цель урока: знакомство с возможностями размещения изображений в html

Размещение изображения в HTML

Форматы изображений для размещения на сайте: .gif, .png-8, .png-24, .png-32 и .jpg (в случае необходимости размещения качественного фото)

Синтаксис:

<img src=«имя_файла»>

img — строчный элемент с замещаемым контентом

Пример: разместить на странице:

  • изображение prob.gif, файл которого располагается в папке со странницей,
  • изображение banner.gif, файл которого располагается в папке на уровень выше текущей страницы (необходимо выйти из папки),
  • изображение с сайта http://www.rambler.ru/ban.jpg


Выполнение:

<html> 
...
<body>
   <p><img src="prob.gif">
   <p><img src="../banner.gif">
   <p><img src="http://www.rambler.ru/ban.jpg">
</body></html>

Атрибуты тега img

  • alt — подпись
  • title — всплывающая подпись
  • Выравнивание по вертикали:

  • align="top"
  • align="middle"
  • align="bottom"
  • Выравнивание по горизонтали:

     
  • align="left"
  • align="right"
  • width — ширина (значение в пикселях)
  • height — высота (значение в пикселях)
  • border — рамка (значение 0 или 1)
  • атрибуты img

    Изображение как ссылка

    Изображение как ссылка

    Фоновое изображение страницы

    Синтаксис:

    <body background="fon.gif">


    Изображение будет растиражировано по всей странице.
    Атрибут bgproperties со значением fixed позволит сделать задний фон статичным во время использования прокрутки страницы.
    html задний фон

    Лабораторная работа:

  • Скачайте архив с заданием
  • Откройте файл menu.html
  • Расположите файл logo.gif над заголовком Кафедра ИТ и МПИ и оформите его в виде гиперссылки, ведущей на сайт http://kafitimpi.sfedu.ru
  • Сделайте файл fon.gif фоном страницы
  • Поделитесь уроком с коллегами и друзьями:

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

    Ваш e-mail не будет опубликован. Обязательные поля помечены *

    *
    *

    Вставить формулу как
    Блок
    Строка
    Дополнительные настройки
    Цвет формулы
    Цвет текста
    #333333
    Используйте LaTeX для набора формулы
    Предпросмотр
    \({}\)
    Формула не набрана
    Вставить