Картинки в HTML


Поверьте, это совсем не сложно. Для вставки картинок используется непарный тэг <img> с атрибутом src. Выглядит это так <img src="my foto.jpg">. Где "my foto.jpg"> это ваша картинка. Для того чтобы было меньше путаницы, я рекомендую в каталоге, где расположена стартовая страница, создавать папки по назначению. Например, для картинок создайте папку image и складывайте туда все изображения, которые будут использоваться у вас на сайте. Тогда для того, чтобы вставить картинку на страницу, вы должны указать путь к этому изображению. Если у вас оно расположена в папке image то нужно прописать так: <img src="image/my foto.jpg">. Если папка расположена на уровень вверх, то путь к ней будет выглядеть следующим образом: <img src="../image/my foto.jpg">. Ну, а сейчас выведем изображение чайника.


<img src="image/2_buy.jpg">


изображения в html для новичков Тэг <img> также имеет атрибут выравнивания align со значениями left-слева, right-справа. Это означает, что при использовании значения left атрибута align картинка будет прижата к левому краю, а текст будет обтекать картинку справа и, наоборот, при использовании значения right.


Существует еще несколько атрибутов, которые располагают текст в определенную позицию относительно картинки.

  • bottom - располагает текст снизу картинки
  • middle - располагает текст посередине картинки
  • top - располагает текст вверху картинки

    • Одновременно с атрибутом align могут быть вставлены следующие атрибуты:

  • vspace="15" - задает расстояние между текстом и рисунком (по вертикали) в пикселах;
  • hspace="40" - задает расстояние между текстом и рисунком (по горизонтали) в пикселах;
  • alt="Продвинутый чайник" - краткое описание картинки. Если по какой-то причине пользователь отключит загрузку картинок, то при использовании этого атрибута на месте картинки будет выводиться ее краткое описание;
  • title="Продвинутый чайник" - описание картинки. То же самое, что и предыдущий пункт, но описание будет выводиться только при наведении курсора на картинку;
  • width="100" - ширина картинки в пикселах;
  • height="100" - высота картинки в пикселах. Если не задать высоту и ширину изображения, картинка будет выводиться с реальными размерами, что не всегда удобно;
  • border="3" - рамка вокруг картинки. Рамка присутствует всегда по умолчанию и если она не нужна, то необходимо значение этого атрибута определять как "0".
  • bordercolor="#xxxxxx" - цвет рамки вокруг картинки.

    • Теперь поэкспериментируем с картинками. Возьмем предыдущий пример или создадим новый. Если Вы будете создавать новый документ, не забудьте написать "шапку" из обязательных тэгов. Итак:

    ...
    <body bgcolor="#E6E6FA" text="Blue">
    <h1 align="center"><font color="#7FFF00">Проба пера</font></h1>
    <hr size=2 width=100% color="#9400D3">
    <img src="../../image/d0d6a385.jpg"><!--Здесь указываете путь к вашей картинке-->
    <p align="left"> <font face="arial" size="+4">Футбол</font> <font face="times new roman" size="+2"> - это коллективная игра с мячом, целью которой является забить на один мяч больше в ворота соперника любой частью тела, <font color="#000000">кроме рук</font>. Игра руками считается фолом и наказывается штрафным ударом, а преднамеренная игра рукой приводит и к наказанию <font color="#FFD700">желтой</font> или даже <font color="#FF3300">красной</font> карточкой.</p>
    ...


    <!--Если вы посмотрите на результат, то он вам может не понравиться, потому что текст прижат к рисунку, да и картинка может быть великовата.-->

    Теперь добавим в тэг <img> размеры картинки и расстояние от нее до текста.

    <p>&nbsp;</p>
    <img src="../../image/d0d6a385.jpg" width="100" height="105" hspace="30" vspace="5"<!--Синим цветом указаны изменения-->
    <p align="left"> <font face="arial" size="+4">Футбол</font> <font face="times new roman" size="+2"> - это коллективная игра с мячом, целью которой является забить на один мяч больше в ворота соперника любой частью тела, <font color="#000000">кроме рук</font>. Игра руками считается фолом и наказывается штрафным ударом, а преднамеренная игра рукой приводит и к наказанию <font color="#FFD700">желтой</font> или даже <font color="#FF3300">красной</font> карточкой.</p>


    У Вас должно получится так.


    Для того, чтобы расположить картинку в центре, используйте тэги выравнивания в тэге <p></p>, т.к. они действуют не только на текст, но и на изображения.


    Чтобы уяснить для себя параметры изображений, поиграйтесь с атрибутами картинки.


    Да, чуть не забыл. Картинку можно сделать фоном странички. Для этого используется атрибут background с указанием пути к картинке в тэге <body>. Выглядеть это будет так:

    <body background="image/fon.jpg">,

    где image/fon.jpg - путь к картинке.

    Наряду со вставкой картинки в виде фона используйте атрибут bgcolor="#хххххх" для задания цвета фона. Если не задавать цвет фона, то по умолчанию фон будет иметь белый цвет. И если Вы используете белый цвет шрифта, а картинку пользователь не захочет загружать, то он не увидит вашего текста. А так, если картинка не будет, по каким-либо причинам, загружена, то текст все равно будет виден.


    Ну, я думаю, с картинками мы разобрались. Не бойтесь экспериментировать, закрепляйте свои знания примерами и у Вас все получится.



    В следующей главе мы рассмотрим использование ссылок в HTML-документе.

    Реклама


    Hosted by uCoz