презентация Microsoft PowerPoint.

Download Report

Transcript презентация Microsoft PowerPoint. 

Современные браузеры могут работать с
различными форматами изображений, но
наиболее предпочтительные –
.JPEG
.GIF
Для фотографий лучше использовать формат JPEG
для рисунков и пиктограмм – GIF.
Тег <IMG> вставка изображений
Атрибуты:
1. Src - обязательный, значение- адрес изображения
<img src = “dog.gif”>
Обычно файлы с картинками помещают в ту же папку, что
и сама страница или в отдельную папку:
<img src = “pict/dog.gif”>
2. alt – определяет альтернативный текст, который
появляется на месте картинки в окне браузера, если вывод
картинки невозможен или заблокирован пользователем.
Значение alt – строка текста, длиной до 1024 символа.
Кавычки обязательны.
Alt= “Собака“ Этот текст также появиться в виде
всплывающей подсказки, когда указатель мыши направлен
на картинку.
3. align – выравнивание. Положение изображения
лучше всегда указывать явно.
Значения:
left, right – по левому или по правому краю.
top – верхняя граница изображения устанавливается на
уровне верхнего края самого высокого элемента в
строке.
middle – середина изображения выравнивается с
серединой строки.
bottom – (по умолчанию) нижний край изображения
выравнивается с базовой линией текста.
4. border - устанавливает или убирает (для гиперссылок)
рамку вокруг изображения
border= толщина рамки в пикселях
border=0 – убрать рамку
5. height, width – высота и ширина изображения в пикселях.
Размеры могут быть больше или меньше реальных размеров
изображения. Браузер автоматически масштабирует его.
Значения можно указывать в % по отношению к окну.
width = “100%” height= 20 – полоса на все окно шириной 20
пикселей.
Если указать только width = “30%”, то высоту браузер
подберет сам пропорционально рисунку. Если картинка не
загрузилась, то на экране остается пустая область с
заданными атрибутами height, width.
6. hspace, vspace – задают расстояние в пикселях между
картинкой и текстом по вертикали и горизонтали.
Центрирование изображения
Выровнять изображение по центру можно, только выделив
его из текста тегами абзацев, раздела <p> или новой
строки.
1 способ:
Текст
<br>
<center>
<img src = “dog.gif”>
</center>
Текст
2 способ:
Текст
<p align = center>
<img src = “dog.gif”>
</p>
Текст
Обтекание изображения текстом
Значения left и right
атрибута align помещают
изображение у левого или правого края документа. Затем
браузер выводит оставшееся содержание документа в
свободное пространство, смежное с изображением,
 текст обтекает изображение.
<IMG SRC="море.jpg" ALIGN=LEFT width=50% vspace=10 hspace=10>
Можно поместить картинки одновременно по обеим
сторонам документа. В этом случае картинки задаются
перед текстом.
<body bgcolor="#008080">
<p>
<hr width="50%" size="5">
<p>
<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>
Они создают уют в доме, радуют нас.
<br clear="all">
Особенно приятно смотреть на маленьких котят.
<p>
<hr width="50%" size="5">
<p>
</font>
</body>
</html>
Тег <table>… </table>
-создает таблицу.
Все прочие элементы таблицы – текст, рисунки, списки должны быть вложенными в него. Допускается также
вложение таблиц одна в другую, т.е. содержимым ячейки
может быть другая таблица.
Теги <tr>…</tr> и <td>…</td>
- описывают строки и столбцы (ячейки таблицы).
Тег <th> …</th>
- описывает заголовки в первой строке таблицы.
Тег <caption>… </ caption >
- описывает заголовок таблицы.
Атрибуты для тега <table>… </table>
Align выравнивание таблицы относительно документа.
Возможные значения: center, left, right
Valign - выравнивает текст в таблице по вертикали.
Значения: top, bottom, middle, baseline.
background=“имя файла“ - строка, определяющая рисунок
для заднего фона таблицы
bgcolor =“цвет” - определяет задний фон таблицы
border - толщина внешней рамки в пикселях. Если атрибут
не указан, то таблица выводится без видимой рамки
bordercolor =“цвет” - цвет рамки
bordercolorlight =“цвет” - цвет рамки слева и сверху
bordercolordark =“цвет” - цвет рамки справа и снизу
Атрибуты для тега <table>… </table>
title =“Текст“ - всплывающая подсказка
width = число - ширина таблицы в процентах или пикселях
height = число - рекомендуемая высота таблицы только в
пикселях
cellspacing = число - расстояние
между ячейками
cellpadding = число - расстояние
между содержимым и рамкой
colls = число - заранее сообщает
браузеру количество столбцов в
таблице.
border
cellspacing
cellpadding
<body bgcolor="#008080">
<table border="3" bordercolor="#ff00ff“ cellpadding="10"
cellspacing="10">
<tr>
<td background="4.jpg"> A </td>
<td bgcolor="#C0C0C0"> <img src="6.jpg" > </td>
</tr>
</table>
</body>
border
cellspacing
cellpadding
Тег <tr>…</tr> - строка таблицы
В этом теге можно использовать почти все атрибуты, что и
в теге таблицы. Но действуют они только в этой строке.
<th> - ячейки таблицы с заголовками столбцов
<td>- ячейки таблицы с данными
В этих тегах тоже можно применять почти все атрибуты
таблицы.
Для оформления текста можно использовать все теги
форматирования.
Таблица строится по строкам. Сначала прописываются все
ячейки в первой строке, затем – во второй, и т.д.
<table border=2 cols=2 bgcolor=yellow align=center>
<TR>
<TH>Заголовок столбца 1</TH>
<TH>Заголовок столбца 2</TH>
</TR>
<TR>
<TD>Ячейка столбца 1, ряд 1</TD>
<TD>Ячейка столбца 2, ряд 1</TD>
</TR>
<TR>
<TD>Ячейка столбца 1, ряд 2</TD>
<TD>Ячейка столбца 2, ряд 2</TD>
</TR>
</table>
COLSPAN - Указывает, какое количество ячеек будет
объединено по горизонтали для указанной ячейки.
ROWSPAN - Указывает, какое количество ячеек будет
объединено по вертикали для указанной ячейки.
Темы проектов на выбор:
1. Новости компьютерного мира
2. Поколения ЭВМ
3. Компьютерные сети
4. Занимательная алгебра
5. Открытия в астрономии
6. Тонкости экономики
7. Самый классный класс