Что такое HTML?

Анимашки Линии



Урок6. Графика и звук в документах HTML.


  • Вставка графических изображений.
  • Для вставки графического изображения применяется тэг <IMG>


    Атрибуты тэга <IMG>:
    src="URL"URL-адрес файла изображения.
    alt="text"Текст, который будет отображаться вместо изображения, при невозможности его вывода.
    alignВыравнивание изображения. Может принимать значения:
    • left -выравнивание изображения по левой границе экрана браузера;
    • right -выравнивание изображения по правой границе экрана браузера;
    • top -выравнивание текста по верхней границе изображения;
    • middle -выравнивание текста по центру изображения;
    • bottom -выравнивание текста по нижней границе изображения;
    • texttop -выравнивание текста по верхний границе изображения, относительно самых высоких символов;
    • absmiddle -выравнивание середины строки относительно середины изображения;
    • baseline -выравнивание нижней рамки изображения относительно базовой линии текстовой строки;
    • absbottom -выравнивание нижней границы изображения относительно нижней границы текущей строки.
    heightВысота картинки в пикселях.
    widthШирина картинки в пикселях.
    borderШирина рамки вокруг картинки в пикселях (только NN).
    hspaceШирина свободного пространства в пикселах, которое должно отделять изображение от текста по горизонтали.
    vspaceШирина свободного пространства в пикселах, которое должно отделять изображение от текста по вертикали.
    usemapURL-адрес файла карты изображения.
    ismapУказывает, что данное изображение является картой..

    Примеры выравнивания изображения:
    leftleft left left
    left left left
    rightright right right
    right right right
    toptop top top
    top top top
    middlemiddle middle middle
    middle middle middle
    bottombottom bottom bottom
    bottom bottom bottom
    texttoptexttop texttop texttop
    texttop texttop texttop
    absmiddleabsmiddle absmiddle absmiddle
    absmiddle absmiddle absmiddle
    baselinebaseline baseline baseline
    baseline baseline baseline
    absbottomabsbottom absbottom absbottom
    absbottom absbottom absbottom

  • Графическое изображение - ссылка.

  • Если вставить картинку между тэгами <A></A> то получится ссылка в виде картинки. В этом случае браузер обведет картинку рамкой, убрать которую можно указав значение атрибута border="0" тэга <IMG>.

    Пример:
    Картинка-ссылка с рамкой:
    <a href="www.microsoft.com"><IMG src="../pics/office.gif" align="absmiddle"></a> www.microsoft.com
    www.microsoft.com
    Картинка-ссылка без рамки:
    <a href="www.microsoft.com"><IMG src="../pics/office.gif" border="0" align="absmiddle"></a>www.microsoft.com
    www.microsoft.com

  • Создание карты изображений.
  • Карты изображений (image maps) очень удобны для создания различного рода графических меню. Попробуем создать простейшее изображение, содержащее карту.
    Для этого нарисуем, например, что-нибудь типа этого:

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

    Карта задается тэгами<map></map>, внутри которых тэгами <area> задаются чувствительные области карты.

    Атрибуты тэга <area>:
    shapeЗадает форму чувствительной области. Может принимать значения:
    • rect -прямоугольник. Параметр COORDS задает координаты верхнего левого и правого нижнего углов области;
    • circ -окружность. Через параметр COORDS передаются три значения: координата центра окружности по оси X, координата центра окружности по оси Y, и радиус окружности;
    • poly -многоугольник. Параметр COORDS задает координаты вершин многоугольника в виде пар значений;
    hrefURL объекта, который должен быть загружен после щелчка левой клавишей мыши по чувствительной области.
    nohrefзадание областей, нечувствительных к нажатию мышью.
    Итак, для нашего случая:

    <MAP NAME="mymap">
    <area shape="circ" coords="75,105,53" href="circle.htm">
    <area shape="rect" coords="164,52,273,151" href="rectange.htm">
    <area shape="rect" coords="0,0,297,224" nohref>
    </MAP>

    Следует обратить внимание, что последним тэгом <AREA> мы описываем все изображение, как нечувствительное к щелчкам мыши. В случае перекрывающихся областей браузер использует первое встреченное им в карте описание. Следовательно, в нашем случае браузер исключит из нечувствительной области заданный вначале круг и прямоугольник.
    Затем вставим с помощью тэга <img> карту изображения в документ.
    <img src="../pics/map.gif" border=0 usemap="#mymap">

    Вот что получилось:

    Карту изображения можно задать в отдельном файле. В этом случае следует указать этот файл в параметре атрибута usemap.
    Например, если карта изображения задана в файле imgmap.htm:
    <img src="../pics/map.gif" border=0 usemap="imgmap.htm#mymap">

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

  • Рисунок в качестве фона.
  • Сделать фон страницы можно с помощью атрибута background тэга <body>, например:
    <body background="bgr.gif">

  • Вставка видео в документ HTML.
  • С помощью тэга <IMG> можно вставить в документ видеофрагмент в формате *.avi*.

    Атрибуты тэга <IMG>,для вставки *.avi*-файла:
    dynsrc="URL"путь к avi-файлу.
    src="URL"путь к графическому изображению, которое появится в случае неспособности браузера проигрывать видеофрагменты.
    startМомент начала проигрывания. Может принимать значения:
    • fileopen -начать проигрывание сразу же после загрузки;
    • mousemove -начать проигрывание после того, как пользователь поместит курсор на окно, предназначенное для проигрывания видеофрагмента.
    controlsотображать элементы управления процессом проигрывания.
    loopколичество проигрываний видеофрагмента. Если loop равно -1 или INFINITE, проигрывание будет выполняться бесконечно.
    loopdelayЗадержка между проигрываниями в миллисекундах.

    Например:
    <img dynsrc="../pics/search.avi" start="mousemove" controls>

    Видеофайл можно вставить в документ с помощью обычной ссылки, например:
    <a href="../pics/search.avi">просмотр ролика</a>
    В этом случае при нажатии на ссылку браузер загрузит плагин для воспоизведения видио и запустит ролик.

  • Вставка звука в документ HTML.
  • Чтобы вставить звуковой файл в документ, применяются следующие тэги:
    Для MSIE - <bgsound> с атрибутами:

  • balance -управление стереобалансом. Допустимые значения от -10000 до 10000.
  • volume -управление громкостью звучания. Допустимые значения от -10000 до 0 (максимальная громкость).
  • loop -сколько раз проигрывать файл. Если loop-"infinite" или "-1", проигрывание будет выполняться бесконечно.
  • src -путь к файлу.

  • Для NN - <embed> с атрибутами:
  • loop -повторять с начала (true - да, false - нет).
  • play_loop="число" -если повторять с начала то сколько раз.
  • src -путь к *.mid*, *.wav* или *.avi* файлу.

  • autostart -проигрывать сразу после загрузки (true - да, false - нет).

  • hidden -спрятать пульт управления (true - да, false - нет).

  • width -ширина пульта управления.

  • height -высота пульта управления.

  • Вообще, <embed> предназначен для вставки объектов, используя технологию OLE, которая используется в Windows-системах. Так что в других ОС этот тэг работать не будет.
    Так каким-же тэгом пользоваться? Пользуйтесь сразу обеими. Какой-нибудь да распознается.
    <embed src="bgmusic.mid" autostart="true" hidden="true" loop="0">
    <bgsound src="bgmusic.mid" loop="infinite">



    Анимашки Линии

    Назад |  Наверх







    TV onlain
     |  Просвещение  |  Россия-К  |  ТВ ЦЕНТР  |  Россия 1  |  Первый Канал (ОРТ)  |  ОТР  | 
    EuroNews Russia  |  Russia Today  |  Телеканал НТВ  |  Пятый канал TV  |  Москва 24 TV  |  360 TV  |  РЕН TV  |  РБК  | 
    Крым 24  |  Первый крымский  |  Россия 24  |  ИТВ (КРЫМ)  |  Юнион (Донецк)  |  Новороссия ТВ  |  Луганск 24  |  МИР 24  |  Известия ТВ  | 
    Министерство Идей  |  Телеканал Твтур.ТВ  |  Телеканал Царьград  |  Калейдоскоп ТВ  |  Телеканал ТРО Союза  |  Телеканал «Союз»  |  Телеканал «СПАС»  | 
    Релакс ТВ  |  МУЗ ТВ  |  Страна FM  |  НАШЕ ТВ  |  Шансон ТВ  |  Первый HD  |  Открытый HD  |  JUCE TV  |  Fresh TV  | 
    Полезная Информация
     |  Календарь  |  Мировая пресса  |  Вебкамера на МКС  |  Мировая статистика  |  Сейсмический монитор  |  Население Земли  |  Онлайн полеты самолётов  |  Конвертер валют Мира  |  Поздравления  |  Нетрадиционная медицина  |  Погода в городах Мира.  |  Иллюзии  |  Выживание  |  Омоложение  |  Блог Артема Драгунова  |  Анимация, картинки  |  Улыбнись  |  Лунный календарь  |  Заговоры  |  Астрология, гороскопы  |  100 лучших фильмов  |  Игры  |  Очищение  |  Фильмы онлайн  | 











    На главную Сделать стартовой Добавить в избранное Написать письмо