WebClub - Всероссийский Клуб Веб-разработчиков
WebClub.RU » Архив » Что можно сделать с рисунком в HTML

Что можно сделать с рисунком в HTML


Дата публикации: 16-03-2013

А с рисунком можно сделать многое: вставить его в HTML документ, сделать рамку, присвоить текст, установить гиперссылку, задать размеры, сделать расстояние от рисунком и ещё многое другое. И обо всем этом я Вам расскажу прямо сейчас.
Вставка рисунка в HTML документ

Минимальный тэг - это тэг рисунок и адрес его расположения

<IMG SRC="moirisunok.gif">

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

<IMG SRC="http://www.domain.ru/~mypage/Images/moirisunok.gif">

А если страница находится в одной директории, а рисунок находится в следующей, то надо просто написать:

<IMG SRC="SledDirektoriya/moirisunok.gif">

То есть, если у Вас страница, к примеру index.htm, с тэгом рисунка, например, находится на http://www.domain.ru/~mypage/index.htm , а Вы сложили все Ваши рисунки в одну директорию, к примеру Images, то в тэге Вы пишите <IMG SRC="Images/moirisunok.gif"> .

Делаем рамки к рисункам

Рамки приобретают основной цвет текста, а если рисунок заключен в тэг гиперссылок, то он приобретает цвет гиперссылок. Надо вставить в тэг рисунка атрибут BORDER="0|1|2|3|5|6...". 0|1|2|3|5|6... - это толщина рамки. Она может быть любая. Пример:

<IMG SRC="moirisunok.gif" BORDER="4">

Присваивание текста к рисунку

Текст в рисунке - это хорошо, потому что, во-первых, многие выключают автоматическую загрузку рисунков для более быстрого просматривания страниц, во-вторых, некоторые броузеры не могут показывать рисунки. Это атрибут ALT, вставляемый в тэг рисунка. Пример:

<IMG SRC="moirisunok.gif" ALT="Ваш текст к рисунку.">

Задаем размеры

Размеры нужны, потому что, если у Вас дизайн состоит в большой части из рисунков, то если рисунок не загрузится (некоторые пользователи отключают или не могут просматривать рисунки) он может нарушить Вам дизайн. Ну и можно также задавать размеры большие или меньшие, чем сам рисунок. Здесь нужны два атрибута HEIGHT и WIDTH . А значение "1|2|3|5|6..." - это значение в пикселях, а в процентах от окна - эти значения будут "1%|2%|3%|5%|6%...". Пример тэга рисунка с атрибутом размера в пикселях:

<IMG SRC="moirisunok.gif" HEIGHT="90" WIDTH="400">

Устанавливаем на рисунок гиперссылку (линк)

Также можно, как и на текст, поставить на рисунок гиперссылку. Если стоит на рисунок гиперссылка, а в тэге рисунка нет атрибута BORDER, то браузеры NN и IE делают автоматически рамку. Пример ссылки, установленной на рисунок, с тэгом BORDER.

<A HREF="http://www.domain.ru/~mypage/index.htm"> 
<IMG SRC="moirisunok.gif" BORDER="0"></A>

Делаем расстояние от рисунка
Можно легко сделать расстояние от рисунком, не увеличивая сам рисунок или прибегая к другим мерам. Это атрибут VSPACE (вниз и вверх) и HSPACE (вправо и влево) и значение у них "0|1|2|3|5|6...". Пример:

<IMG SRC="moirisunok.gif" HSPACE="15" VSPACE="10">

Определение расстояние относительно текста.

Это атрибут ALIGN. Значения:

    left - рисунок находится слева, а текст огибает его с правой стороны
    right - рисунок находится справа, а текст огибает его с левой стороны
    top - текст находится у самого верха изображения
    middle - базисная линия текста находится у середины изображения
    bottom - текст находится в самом низу изображения
    absmiddle - текст находится у середины изображения
    absbottom - похожее на bottom
    baseline - тоже самое, что и bottom
    texttop - подобно top


Пример:

<IMG SRC="moirisunok.gif" ALIGN="left">

Делаем его в качестве background на Вашей странице
Если Вы хотите сделать рисунок в качестве обоев своей страницы, то надо поставить атрибут BACKGROUND в тэге BODY:

<BODY BACKGROUND="VashRisunok.gif">

Делаем его в качестве background в рамке

Если Вы используете рамки на Вашей странице, то можно вставить в фон рамок какой-нибудь рисунок.
К примеру, если Вы хотите вставить рисунок во всю рамку (во все строки и отделения), то нужно вставить атрибут BACKGROUND в тэг  TABLE:

<TABLE BORDER COLS=2 WIDTH="100%" BACKGROUND="MoiRisunok.gif" >

А если хотите только в одну строку, то

<TR BACKGROUND="MoiRisunok.gif">

А ещё можно вставить рисунок в только одно отделение рамки:

<TD BACKGROUND="MoiRisunok.gif">

Популярное

Не так давно в сети появился новый сервис, под названием Dead Man Zero. Этот сервис сделал...
Рынок социальных площадок уже давно стал стабильным. Несмотря на то, что время от времени...
Artisteer 4 – единственный в своем роде продукт, позволяющий автоматизировать работу над созданием...
Март 2017 (1)
Февраль 2017 (3)
Январь 2017 (1)
Август 2016 (1)
Май 2016 (2)
Ноябрь 2015 (1)

Карта сайта: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41

Друзья сайта

Хотите продать свой сайт?
- Мы быстро и удобно для Вас сможем его купить:
  • Заявка на продажу сайта
  • Раcсматриваем цены на каждый сайт в индивидуальном порядке.

    Случайная цитата

    Yoggi Berra:

    "В теории, теория и практика неразделимы. На практике это не так."

    Опрос

    Какой аудио плеер Вы используете?

    Winamp
    Light Alloy
    foobar2000
    Apollo
    AIMP
    1by1
    iTunes
    jetAudio
    Другой...