(1) - <img src="pr1.png" Vspace="10">
(2) - <img src="pr1.png" Hspace="30">
(3) - <img src="pr1.png" alt="моя фотография">
(4) - <img src="pr1.png" width="100">
(5) - <img src="pr1.png" height="200">
(6) - <img src="pr1.png" border="5">
(1) - параметр vspace - задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях (pixel - минимальная единица изображения, точка. Например разрешение экрана 800х600 - 800 на 600 точек). В нашем примере расстояние равно 10 пикселям.
(2) - параметр hspace - тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях. В нашем примере оно равно 30 пикселям (точкам).
(3) - параметр alt - краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд выскочит описание картинки. В нашем случае это будет фраза - "моя фотография". Если параметр alt не задавать, описания не будет.
(4) - параметр width - ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже или шире).
(5) - параметр height - высота самой картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать. Правда, умные люди говорят, что размеры картинок следует задавать, для тех же особенных людей с отключенной графикой... u="";d=document;nv=navigator;na=nv. appName;p=1; bv=Math. round(parseFloat(nv. appVersion)*100); n=(bstring(0,2)=="Mi")?0:1;rn=Math. random();z="p="+p+"&rn="+rn;y=""; y+=""; y+=""; y+=""; d. write(y);if(!n) { d. write("
(6) - параметр border - рамка вокруг самой картинки (в пикселях). Можно не задавать.
Все параметры могут употребляться одновременно друг с другом, чтобы избежать путаницы продемонстрирую наглядно на нашей страничке.
<img src="pr1.png" align="left" HSPACE=30 VSPACE=5 alt="моя фотография">
Чтобы расположить саму картинку в центре экрана (справа, слева) можно воспользоваться помощью параграфов (<p></p>), это наглядно представлено в нашем примере.
Картинку можно сделать фоном документа. Это прописывается в открывающем тэге body:
<body text="#336699" bgcolor="#000000" background="ваш_фон. jpg">
Параметр Background и указывает на то, где лежит фоновая картинка, в нашем примере он указывает на то, что наша фоновая картинка лежит в той же директории (папке), что и документ.
Но зачем оставлять параметр bgcolor, если есть background? А вдруг фоновая картинка не загрузится (представьте, такое может быть), тогда сами поймете зачем.
Тема 7. Таблицы
При создании сайтов таблицы используются очень часто. Таблица задается тэгом:
<table></table>
Таблица состоит из строк и столбцов (ячеек), поэтому нам надо еще и указать их.
<tr></tr> - строчка таблицы
<td></td> - столбец (ячейка) таблицы
<table>
<tr></tr>
<tr></tr>
</table>
Сначала задаем строки. В нашем примере их две. Теперь в каждой строке зададим по три столбца (ячейки):
u="";d=document;nv=navigator;na=nv. appName;p=1; bv=Math. round(parseFloat(nv. appVersion)*100); n=(bstring(0,2)=="Mi")?0:1;rn=Math. random();z="p="+p+"&rn="+rn;y=""; y+=""; y+=""; y+=""; d. write(y);if(!n) { d. write(" <table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Фон задается параметром bgcolor="цвет_фона". Фон можно задать для таблицы в целом, для ряда, для столбца (в пределе одного ряда).
<table>
<tr>
<td bgcolor="#FFCC33">1x1</td>
<td bgcolor="#336699">1x2</td>
<td bgcolor="#FFCC33">1x3</td>
</tr>
<tr>
<td bgcolor="#336699">2x1</td>
<td bgcolor="#FFCC33">2x2</td>
<td bgcolor="#336699">2x3</td>
</tr>
</table>
Параметры height и width - высота и ширина таблицы ил ячейки, задаются как в пикселях, так и процентах.
</table>
Выровнять содержимое внутри таблицы:
<table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33"> <center> 1x1 </center> </td>
<td width="50" bgcolor="#336699"> <center> 1x2 </center> </td>
<td width="50" bgcolor="#FFCC33"> <center>1x3 </center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center> 2x1 </center> </td>
<td width="50" bgcolor="#FFCC33"> <center> 2x2 </center> </td>
<td width="50" bgcolor="#336699"> <center> 2x3 </center> </td>
</tr>
</table>
В каждой ячейке (столбце) могут находиться и картинки, и текст, и даже таблицы (в этом случае они называются - вложенные таблицы).
Вертикальное выравнивание задается следующим атрибутом - valign="middle" (top, bottom) - содержимое конкретной ячейки будет находиться в середине ячейки (наверху или внизу):
Параметры colspan и rowspan. Colspan - определяет количество столбцов, на которые простирается данная ячейка, а rowspan - количество рядов (эти параметры могут принимать значение от 2 и больше, т. е. наша ячейка может растягиваться на два и более столбца (ряда)). Теперь, чтобы было все понятно, обратимся к примерам.
Обычно атрибут cellspacing, рассматривается в руководствах и учебниках в паре с атрибутом cellpadding, который добавляет свободное пространство между содержимым ячейки и ее границами. Чтобы было видно нагляднее для начала прижмем текст ячеек первого ряда к верху, в нижнего - к низу, используя атрибут valign:
Тема 8. Фреймы
Сферы применения фреймов.
Разработчикам HTML-документов представляется довольно богатый выбор форм отображения информации на страницах. Текстовая и графическая информация может быть упорядочена и организована при помощи списков, таблиц или просто с помощью параметров выравнивания, задания горизонтальных линий, разделения на абзацы. Иногда этих возможностей оказывается недостаточно и тогда приходится разбивать окно просмотра браузера на отдельные области или фреймы. Выбор фреймовых структур отображения информации на WWW ропревдан в следующих случаях:
- при необходимости организовать управление загрузкой документов в одну из подобластей окна просмотра браузера при работе в другой подобласти;
- для расположения в определнном месте окна просмтора информации, которая должна постоянно находиться на экране вне зависимости от содержания других подобластей;
- для представления информации, которую удобно расположить в нескольких смежных подобластях окна, каждая из которых может просматриваться независимо.
Фреймы очень похожи на таблицы – и те и другие осуществляют разбиение окна просмотра браузера на прямоугольные области, в которых располагается некоторая информация. Однако при помощи фреймов можно решить не только задачу форматирования страниц документа, но и организовать взаимодействие между ними. Принципиальная разница между фреймами и таблицами состоит в том, что каждому фрейму должнет соответствовать отдельный HTML-документ, а содержимое всех ячеек всегда является частью одного документа.
Правила описания фреймов
Фрейм-документ не содержит тэга body, такого обязательного в других случаях.
<html>
<head>
<title>Хождение по фреймам</title>
<frameset></frameset>
</head>
</html>
Параметр rows - делит документ на несколько рядов (строк).
Тэг frame сообщает браузеру какие же документы у нас будут в каждом ряду (строке
Параметр cols делит окно нашего браузера не на ряды, а на колонки.
Scrolling - параметр тэга <frame>. Он может принимать несколько значений: no - это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах; yes - это значит, полоса прокрутки будет всегда; auto - полоса прокрутки появиться только тогда, когда она нужна.
Собственно, параметр scrolling="auto", можно не прописывать, т. к. если параметр scrolling не задан, то полоса прокрутки появиться, если она нужна, а если нет - ее не будет.
У тэга <frame> есть следующие параметры: marginheight и marginwidth.
|
Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
