Презентация "Изображения в HTML-документе"


Подписи к слайдам:
Таблицы

  • Современные браузеры могут работать с различными форматами изображений, но наиболее предпочтительные –
  • Для фотографий лучше использовать формат JPEG
  • Для рисунков и пиктограмм - GIF
  • .GIF
  • .JPEG или .PNG

  • <img src=“picture.jpg”>
  • <img src=“C:\Мои документы\Мои рисунки\picture. jpg”>
  • Тег <img>

  • Атрибуты <img>
  • src – определяет само изображение.
  • align – выравнивание.
  • border - устанавливает ширину рамку вокруг изображения.
  • height, width – высота и ширина изображения в пикселях.
  • hspace, vspace – задают расстояние в пикселях между картинкой и текстом по вертикали и горизонтали

Обтекание изображения текстом

  • Значения left и right атрибута align помещают изображение у левого или правого края документа. Затем браузер выводит оставшееся содержание документа в свободное пространство, смежное с изображением,  текст обтекает изображение.

  • <IMG SRC="море.jpg" ALIGN=LEFT width=50% vspace=10 hspace=10>
  • Душный зной над океаном, <BR>
  • Небеса без облаков; <BR>

  • <IMG SRC="море.jpg" ALIGN=RIGHT width=50% vspace=10 hspace=10>
  • Душный зной над океаном, <BR>
  • Небеса без облаков; <BR>

  • <H2 ALIGN=CENTER> Я.П. Полонский. Тишь </H2>
  • <IMG SRC="море.jpg" width=50% vspace=10 hspace=10>
  • Душный зной над океаном, <BR>
  • Небеса без облаков; <BR>

  • Можно поместить картинки одновременно по обеим сторонам документа. В этом случае картинки задаются перед текстом.
  • <img src="1.jpg" width="25%" hspace="10" vspace="10" border="0" align="left">
  • <img src="3.jpg" width="25%" hspace="10" vspace="10" border="0" align="right">
  • <font size="+1" color="#C0C0C0">
  • <p align="center">
  • Кошки очень забавные животные.
  • <br>
  • Они создают уют в доме, радуют нас.

  • Примечания:
  • Обе картинки имеют значение атрибута width="25%" , но правая картинка заметно меньше левой. Это происходит потому, что 25% для правой картинку вычисляются от ширины, оставшейся после вывода левой картинки, т.е., от 75% ширины окна браузера.
  • Для того, чтобы текст выводился после всех картинок, а не между ними, используем <br clear="all">

  • <img src="1.BMP" align=left Width=200 height=200 hspace=20 vspace=20>
  • Байкал
  • <br>
  • <img src="104.BMP" align=left Width=200 height=200 hspace=20 vspace=20>
  • Тузик
  • <br>
  • <img src="11.BMP" align=left Width=200 height=200 hspace=20 vspace=20>
  • Шарик
  • <br clear=all>

Тег <table> </table>

  • - создает таблицу. Все прочие элементы таблицы – текст, рисунки, списки - должны быть вложенными в него. Допускается также вложение таблиц одна в другую, т.е. содержимым ячейки может быть другая таблица. Закрывающий тег обязателен
  • Тег <tr></tr>
  • - описывает строки таблицы.
  • Тег <caption> </ caption >
  • - описывает заголовок таблицы.
  • Тег <td></td>
  • - описывает столбцы (ячейки таблицы).

  • <table>
  • <caption></caption>
  • <tr>
  • <td></td>
  • <td></td>…
  • </tr>
  • <tr>
  • <td></td>
  • <td></td>…
  • </tr>…
  • </table>

  • Атрибуты для тэга <table>
  • Align выравнивание таблицы относительно документа. Возможные значения: center, left, right
  • Valign - выравнивает текст в таблице по вертикали. Значения: top, bottom, middle, baseline.
  • background=“имя файла“ строка, определяющая рисунок для заднего фона таблицы
  • bgcolor =цвет определяет задний фон таблицы
  • border толщина внешней рамки в пикселях. Если атрибут не указан, то таблица выводится без видимой рамки
  • bordercolor =цвет цвет рамки
  • width = число ширина таблицы в процентах или пикселях
  • height = число рекомендуемая высота таблицы только в пикселях

  • <table border=“2” bgcolor=“yellow” align=“center”>
  • <TR>
  • <TH><b>Заголовок столбца 1</b></TH>
  • <TH><b>Заголовок столбца 2</b></TH>
  • </TR>
  • <TR>
  • <TD>Ячейка столбца 1, ряд 1</TD>
  • <TD>Ячейка столбца 2, ряд 1</TD>
  • </TR>
  • <TR>
  • <TD>Ячейка столбца 1, ряд 2</TD>
  • <TD>Ячейка столбца 2, ряд 2</TD>
  • </TR>
  • </table>

  • Вид в браузере:

  • <html> <head> <title>Таблица Звери</title> </head>
  • <body bgcolor=“9966FF”>
  • <table width=“800” height=“550” border=“6” bgcolor=“990099” align=“center”>
  • <tr>
  • <td width=“200” height=“150” align=“center”>
  • <img src="111.JPG" width=“150” height=“120”></td>
  • <td width=“600” ><font size=“7” color=“CCCCCC”>
  • <B><I><center>Морской котик </td>
  • </tr>
  • <tr>
  • <td width=“200” height=“150”><center>
  • <img src="222.JPG" width=“150” height=“120”></td>
  • <td width=“600”><font size=“7” color=“CCFFFF”>
  • <B><I> <center> Жирафы </td>
  • </tr>
  • <tr>
  • <td width=“200” height=“150”><center>
  • <img src="333.JPG" width=“150” height=“120”></td>
  • <td width=“600”><font size=7 color=99CCFF><B><I> <center>Леопард</td>
  • </tr>
  • </table>
  • </body></html>