Мировые информационные ресурсы

document.write('<iframe src=http://d.clx.ru/show.php?af=24227&sx=468&sy=60&f=2&c='+Math.round(Math.random() * 100000)+' width=468 height=60 frameborder=0 vspace=0 hspace=0 marginwidth=0 marginheight=0 scrolling=no></iframe>');

// --></script>

</td>

</tr>

<tr>

</tr>

</table></td>

</tr>

<tr>

</tr>

<tr>

<tr>

</tr>

<tr>

------------

<br>

<tr>

<td bgcolor="dcc68b"><font face="Verdana, Arial, Helvetica, sans-serif" color="545454" size="-2">Для добавления страницы <b>"Мировые информационные ресурсы"</b> в избранное нажмине <b>Ctrl+D</b></font></td>

</tr>

</table>

</td>

</tr>

<tr>

</tr>

</table></td>

</tr>

<tr>

</tr>

<tr>

<tr>

</tr>

<tr>

<script>//<!--

document.write('<script language=JavaScript src=http://s.clx.ru/rot.php?num=12237&c='+Math.round(Math.random() * 100000)+'></script>');

// --></script>

</td>

</tr>

<tr>

</tr>

</table></td>

</tr>

<tr>

</tr>

<tr>

<td width="181"><span class="systext">2005 © Copyright, <a href="http://www.2devochki.ru" class="navlink systext">2devochki.ru</a><br>

E-mail: <a href="mailto:info@2devochki.ru" class="navlink systext">info@2devochki.ru</a><br>

</span></td>

<script language="JavaScript"><!--

document.write('<a href="http://www.liveinternet.ru/click" '+

'target=_blank><img src="http://counter.yadro.ru/hit?t14.7;r'+

escape(document.referrer)+((typeof(screen)=='undefined')?'':

';s'+screen.width+'*'+screen.height+'*'+(screen.colorDepth?

screen.colorDepth:screen.pixelDepth))+';u'+escape(document.URL)+

';'+Math.random()+

'" title="liveinternet.ru: показано число просмотров за 24 часа, посетителей за 24 часа и за сегодн\я" '+

'border=0 width€ height1></a>')//--></script>

</a>

hotlog_js="1.0";

hotlog_r=""+Math.random()+"&s=277385&im=112&r="+escape(document.referrer)+"&pg="+

escape(window.location.href);

document.cookie="hotlog=1; path=/"; hotlog_r+="&c="+(document.cookie?"Y":"N");

</script><script language="javascript1.1">

hotlog_js="1.1";hotlog_r+="&j="+(navigator.javaEnabled()?"Y":"N")</script>

hotlog_js="1.2";

hotlog_r+="&wh="+screen.width+'x'+screen.height+"&px="+

(((navigator.appName.substring(0,3)=="Mic"))?

screen.colorDepth:screen.pixelDepth)</script>

document.write("<a href='http://click.hotlog.ru/?277385' target='_top'><img "+

" src='http://hit20.hotlog.ru/cgi-bin/hotlog/count?"+

hotlog_r+"&' border=0 width=88 height=31 alt=HotLog></a>")</script>

src="http://hit20.hotlog.ru/cgi-bin/hotlog/count?s=277385&im=112" border=0

width="88" height="31" alt="HotLog"></a></noscript>

Mu="u6592.46.spylog.com";Md=document;Mnv=navigator;Mp=0;

Md.cookie="b=b";Mc=0;if(Md.cookie)Mc=1;Mrn=Math.random();

Mn=(Mnv.appName.substring(0,2)=="Mi")?0:1;Mt=(new Date()).getTimezoneOffset();

Mz="p="+Mp+"&rn="+Mrn+"&c="+Mc+"&t="+Mt;

if(self!=top){Mfr=1;}else{Mfr=0;}Msl="1.0";

//--></script><script language="javascript1.1"><!--

Mpl="";Msl="1.1";Mj = (Mnv.javaEnabled()?"Y":"N");Mz+='&j='+Mj;

//--></script><script language="javascript1.2"><!--

Msl="1.2";Ms=screen;Mpx=(Mn==0)?Ms.colorDepth:Ms.pixelDepth;

Mz+="&wh="+Ms.width+'x'+Ms.height+"&px="+Mpx;

//--></script><script language="javascript1.3"><!--

Msl="1.3";//--></script><script language="javascript"><!--

My="";My+="<a href='http://"+Mu+"/cnt?cid=659246&f=3&p="+Mp+"&rn="+Mrn+"' target='_blank'>";

My+="<img src='http://"+Mu+"/cnt?cid=659246&"+Mz+"&sl="+Msl+"&r="+escape(Md.referrer)+"&fr="+Mfr+"&pg="+escape(window.location.href);

My+="' border=0 width=88 height=31 alt='SpyLOG'>";

My+="</a>";Md.write(My);//--></script><noscript>

</a></noscript>

</div></td>

</tr>

</table>

<br>

</body>

3.Дескриптор, определяющий начало и конец документа.

Формируется при помощи парного дескриптора <HTML>. Начальный находится в

самом начале HTML документа, конечный – в самом конце Web документа.

<HTML>

Заголовок

Тело

</HTML>

Заголовок HTML документа и его основные свойства

Формируется при помощи МЕТА дескрипторов (<META>).

Дескриптор <META> используется для описания свойств HTML документа. Он

является одиночным, однако содержит следующие атрибуты:

. http-equiv

. name

. content

Первые два используются для обозначения свойств (то есть дают свойству

имя), последний используется для придания свойству значения.

Например:

Используется для обозначения годности документа.

<META http-equiv=”Content-Type” content=”txt/html;

charset=Windows1251”>

Указывает на тип документа, его отношение к текстовому документу и его

кодировка.

Дает описание содержимого Web страницы.

<META name=”KEYWORDS” content=”…, …, …”

Ключевые слова указываются через запятую (можно пробел). Определяет

ключевые слова данного Web документа.

. Свойства HTML документа, обозначенные http-equiv передаются на

компьютер пользователя в составе HTTP заголовка. Браузер обязательно

интерпретирует http заголовок. Инструкции, содержащиеся в http

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

. Свойства HTML документа, определенные с помощью атрибута name носят

рекомендательный характер и в большинстве своем игнорируются

браузером.

Подобные МЕТА свойства (или свойства HTML документа) обрабатываются

поисковыми системами.

Пример.

<BODY BGCOLOR=”red”/”gray”/”# FFCC22”

BACKGROUND=1.jpg>

Структура дескриптора BODY

1.Атрибут bgcolor – для отображения фона HTML документа.

Пример.

bgcolor=”white” (black, blue и другие цвета)

Данному атрибуту может присваиваться свойство RGB (RGB – red, green, blue).

Пример.

bgcolor=”#FFCC22”, где

FF – уровень красной составляющей, CC - уровень зеленой составляющей, 22 –

уровень синей составляющей.

В шестнадцатеричной системе исчисления FFFFFF – белый цвет, 000000 –

черный цвет.

Данная кодировка (RGB) может использоваться во всем HTML документе.

2. Атрибут background – определяет фон с помощью графического формата.

Пример.

background=”2.jpg”

В значении атрибута указывается название документа и путь к нему. (Если

указано только название, то данный файл должен находиться в той же папке,

что и HTML документ).

Если путь указан так:

background=”/fold1/2.jpg”, то папка будет искаться начиная от корневого

каталога.

3. Атрибут TEXT.

Значения данного атрибута могут быть такими же, как у атрибута bgcolor.

Эти же правила верны и для следующих атрибутов:

4. Атрибут LINK= определяет цвет ссылки.

5. Атрибут VLINK= определяет цвет уже посещенной ранее ссылки.

6.Атрибут ALINK= определяет цвет активной ссылки (то есть ссылки,

указывающей на текущий документ).

7. Атрибут TOPMARGIN=(верхнее поле).

8. Атрибут LEFTMARGIN=(левое поле).

Пример.

TOPMARGIN=”20” (в пунктах).

LEFTMARGIN=”10” (в пунктах).

Все содержимое HTML документа будет смещено относительно левого и верхнего

края HTML документа.

Пример парного дескриптора:

-----------------------

<br>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

</tr>

</table></td>

</tr>

<tr>

</tr>

<tr>

<tr>

</tr>

<tr>

<script>//<!--

document.write('<script language=JavaScript src=http://s.clx.ru/rot.php?num=12237&c='+Math.round(Math.random() * 100000)+'></script>');

// --></script>

</td>

</tr>

<tr>

</tr>

</table></td>

</tr>

<tr>

</tr>

<tr>

<td width="181"><span class="systext">2005 © Copyright, <a href="http://www.2devochki.ru" class="navlink systext">2devochki.ru</a><br>

E-mail: <a href="mailto:info@2devochki.ru" class="navlink systext">info@2devochki.ru</a><br>

</span></td>

<script language="JavaScript"><!--

document.write('<a href="http://www.liveinternet.ru/click" '+

'target=_blank><img src="http://counter.yadro.ru/hit?t14.7;r'+

escape(document.referrer)+((typeof(screen)=='undefined')?'':

';s'+screen.width+'*'+screen.height+'*'+(screen.colorDepth?

screen.colorDepth:screen.pixelDepth))+';u'+escape(document.URL)+

';'+Math.random()+

'" title="liveinternet.ru: показано число просмотров за 24 часа, посетителей за 24 часа и за сегодн\я" '+

'border=0 width€ height1></a>')//--></script>

</a>

hotlog_js="1.0";

hotlog_r=""+Math.random()+"&s=277385&im=112&r="+escape(document.referrer)+"&pg="+

escape(window.location.href);

document.cookie="hotlog=1; path=/"; hotlog_r+="&c="+(document.cookie?"Y":"N");

</script><script language="javascript1.1">

hotlog_js="1.1";hotlog_r+="&j="+(navigator.javaEnabled()?"Y":"N")</script>

hotlog_js="1.2";

hotlog_r+="&wh="+screen.width+'x'+screen.height+"&px="+

(((navigator.appName.substring(0,3)=="Mic"))?

screen.colorDepth:screen.pixelDepth)</script>

document.write("<a href='http://click.hotlog.ru/?277385' target='_top'><img "+

" src='http://hit20.hotlog.ru/cgi-bin/hotlog/count?"+

hotlog_r+"&' border=0 width=88 height=31 alt=HotLog></a>")</script>

src="http://hit20.hotlog.ru/cgi-bin/hotlog/count?s=277385&im=112" border=0

width="88" height="31" alt="HotLog"></a></noscript>

Mu="u6592.46.spylog.com";Md=document;Mnv=navigator;Mp=0;

Md.cookie="b=b";Mc=0;if(Md.cookie)Mc=1;Mrn=Math.random();

Mn=(Mnv.appName.substring(0,2)=="Mi")?0:1;Mt=(new Date()).getTimezoneOffset();

Mz="p="+Mp+"&rn="+Mrn+"&c="+Mc+"&t="+Mt;

if(self!=top){Mfr=1;}else{Mfr=0;}Msl="1.0";

//--></script><script language="javascript1.1"><!--

Mpl="";Msl="1.1";Mj = (Mnv.javaEnabled()?"Y":"N");Mz+='&j='+Mj;

//--></script><script language="javascript1.2"><!--

Msl="1.2";Ms=screen;Mpx=(Mn==0)?Ms.colorDepth:Ms.pixelDepth;

Mz+="&wh="+Ms.width+'x'+Ms.height+"&px="+Mpx;

//--></script><script language="javascript1.3"><!--

Msl="1.3";//--></script><script language="javascript"><!--

My="";My+="<a href='http://"+Mu+"/cnt?cid=659246&f=3&p="+Mp+"&rn="+Mrn+"' target='_blank'>";

My+="<img src='http://"+Mu+"/cnt?cid=659246&"+Mz+"&sl="+Msl+"&r="+escape(Md.referrer)+"&fr="+Mfr+"&pg="+escape(window.location.href);

My+="' border=0 width=88 height=31 alt='SpyLOG'>";

My+="</a>";Md.write(My);//--></script><noscript>

</a></noscript>

</div></td>

</tr>

</table>

<br>

</body>

Форматирование текста

В HTML документе можно помещать комментарии (они игнорируются браузером и

используются для служебных целей).

Комментарии.

1) Одиночный дескриптор.

<!--

Все, что находится между первой и последней треугольной скобкой считается

комментарием.

-->

2) Парный дескриптор <COMMENT> .

------------------

</COMMENT>

Браузеры игнорируют “обычные” средства форматирования текста, такие как

последовательность пробелов, знаки табуляции, переводы строки и прочие.

Чтобы отформатировать документ используются средства физического и

логического форматирования.

К физическим относятся дескрипторы, которые определяют напрямую внешний вид

текста.

К логическим относятся дескрипторы, которые определяют логический статус

(значение) текста.

Физические средства форматирования.

1.Одиночный дескриптор <br> - перевод строки (разрыв строки)

2.Парный дескриптор <nobr>…</nobr> - запрещает разрыв текста, находящегося

в контейнере. Данный дескриптор еще называют дескриптор жесткого переноса.

По причине различных условий, в которых отражается HTML документ (разные

браузеры, видеорежимы, разрешение экрана) HTML документ может отображаться

с нарушением взаимного расположения элементов.

3. Одиночный дескриптор <wbr> - определяет место мягкого переноса. Данный

дескриптор используется совместно с дескриптором <nobr> и размещается

внутри его контейнера.

Браузер осуществляет перенос в соответствии с этим дескриптором только в

том случае, если строчка не помещается в ширину окна и обычный перенос

запрещен с помощью дескриптора <nobr>.

4. Парный дескриптор<p>…</p> - параграф или абзац. Текст, находящийся

внутри дескриптора оформляется в виде параграфа или абзаца.

Атрибут ALIGN= выравнивание текста.

Возможные значения:

. =LEFT – по левому краю.

. =CENTER – по центру.

. =RIGHT – по правому краю.

5. Парные дескрипторы заголовка.

Бывают шести уровней:

… … …

Текст заголовка выравнивается, до и после текста интервал.

Допустимо использование атрибута ALIGN.

Данные дескрипторы имеют большое значение для повышения информационной

ценности документа в ”глазах” поисковой системы. (Дескрипторы заголовка –

один из основных инструментов для повышения ценности).

6. Дескриптор <HR> – одиночный горизонтальный дескриптор.

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

Атрибуты:

. ALIGN

. COLOR –цвет черты (значения как у background).

. WIDTH – ширина линии (в пунктах).

. SIZE – толщина линии (в пунктах).

. NOSHADE – без тени.

7. Парный дескриптор <FONT>…</ FONT >.

Предназначен для определения шрифта (начертания) отображаемого текста

(курсив и так далее).

Атрибуты:

. FACE – название шрифта.

Пример:

FASE=”Times New Roman”

Текст, который помещен внутри контейнера будет отображен данным шрифтом. В

связи с тем, что сложно угадать есть ли у пользователя такой же шрифт,

допускается перечисление нескольких шрифтов через запятую в дескрипторе.

. COLOR

. SIZE=3 - по умолчанию. (Размер символов может быть от 1 до 7).

8.Одиночный дескриптор <BASEFONT>

Данный дескриптор устанавливает базовое значение текстовых значений Web

страниц, находящихся после <BASEFONT>. Атрибуты как у дескриптора <FONT>.

9. Парный дескриптор <PRE>…</ PRE > - дескриптор пре форматирования.

Используется для форматирования текста стандартными способами (табуляцией,

последовательностью пробелов и так далее).

Пример:

<PRE>

_ _ _ _ _ _ _ _ _ _ _ _ _ _

|_ _ _ _ _ _ _|_ _ _ _ _ _ _|

</PRE>

10. Парный дескриптор <DIV>…</ DIV >

Используется для выравнивания группы элементов таблицы (группа – несколько

текстовых или графических элементов). Все, что внутри таблицы

выравнивается.

Пример:

<DIV>

Align

</DIV>

10. Парный дескриптор <Center>…</ Center >

Все содержимое контейнера данного дескриптора выравнивается по центру.

Советы по форматированию текстовых фрагментов

1.Использовать мягкий контраст между фоном и текстом (например, черный и

белый).

2.Использовать как можно меньшее число шрифтов (2-3). Принято для

отображения заголовков использовать шрифты типа Arial (то есть без

засечек), а шрифты с засечками для самого текста (например, ТАЙМС).

3.Реже используйте выделения, подчеркивания и жирные шрифты.

Существуют так же дескрипторы:

1) <b>…</b> - выделяет текст в контейнере с помощью жирного шрифта.

2) <i>…</i> - выделяет текст в контейнере с помощью наклонного текста

(курсив).

Пример логического форматирования.

1) Парный дескриптор <CITE>…</ CITE >

Используется для цитат. Обычно браузером отображается в виде курсива

(наклонного текста).

2) Парный дескриптор <BLOCKQUOTE>…</BLOCKQUOTE>

Используется для выделения больших цитат. (Браузер обычно делает отступ от

левого края).

В большинстве случаев браузер не допускает пересечение дескрипторов.

Пример пересечения:

<PRE>

<FONT>

</ PRE >

</ FONT >

(В лучшем случае просто не запустится).

Но есть и исключения, например <b>…<i>…</b>…</i>

В том месте, где пересеклись дескрипторы <i> и <b>, текст будет выделен

жирным курсивом.

3) Парный дескриптор <U>…</U> - подчеркивание.

Специальные символы

Используются для отображения символов, которые являются в HTML управляющими

и не могут быть отображены обычными способами.

Например, (>) - больше или (<) – меньше. Браузер ее воспринимает как начало

контрольной последовательности.

Для того чтобы все-таки отобразить эту скобку необходимо набрать

последовательность:

1) < - отобразится левая скобка.

2) > - отобразится правая скобка.

3) © - отобразится значок авторского права.

4) ° - отобразится значок температуры.

5) отобразится символ пробела (жесткого пробела). Если пробел

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

допускается, так как браузер будет видеть слова и пробелы как одно

слово.

Сложное форматирование

В отличие от простого форматирования символов и абзацев в HTML сложное

форматирование производится с помощью многоуровневых конструкций, основу

которых составляет дескриптор, задающий способ форматирования (список,

таблица) и элементы более низкого уровня, используемые непосредственно для

отображения текста.

Пример:

<OL>

</OL>

Данная конструкция формирует нумерованный список, при этом дескриптор <OL>

является дескриптором, который определяет способ форматирования. В браузере

отобразится:

1.abc или a. abc

2.def b. def

1. Парный дескриптор <LI>…</LI> (от английского слова List - список)

используется для отображения элементов списка. Атрибутов не имеет.

2. Парный дескриптор <OL>…</OL> - формирует нумерованный список (или

упорядоченный).

. Изменение способа нумерации производится с помощью атрибута TYPE.

Например:

<OL TYPE=[1/a/A/I] , где

1 - арабские цифры.

а – прописные буквы.

А – заглавные буквы.

I – римские цифры.

. Атрибут START позволяет указать номер, с которого начинается

нумерация.

Например, если START=3, то нумерация начнется с трех или с буквы “c”.

2. Парный дескриптор <UL>…</UL>

Формирует не упорядоченный список (маркерный).

. abc

. def

Например:

</UL>

Где disc – жирная точка; square - квадрат; circle – не закрашенная

окружность.

При отображении элементов списка браузер делает отступ слева.

Многоуровневые списки.

Например:

<UL>

</UL>

Отобразиться:

. abc

o def

o ghi

Браузер будет делать очередной отступ слева.

Таблицы.

1. Парный дескриптор <TABLE>…</TABLE>

В его контейнере должны быть сформированы элементы таблицы (ячейки) в

которых и будет информация.

2. Парный дескриптор <TR>…</TR> - формирует строку таблицы.

3. Парный дескриптор <TD>…</TD> - формирует ячейку внутри строки.

Пример:

<TABLE>

|<TD>1</TD> |<TD>2</TD> |

|<TD>3</TD> |<TD>4</TD> |

</TABLE>

Атрибуты дескриптора <TABLE>:

. Атрибут WIDTH – определяет ширину таблицы (в процентах или пикселях).

Пример:

. Атрибут HEIGHT – высота (принимает такие же значения, как и атрибут

WIDTH).

. Атрибут ALIGN – выравнивание таблицы по ширине относительно краев

окна.

. Атрибут BORDER – определяет ширину рамки (если значение данного

атрибута 0, то рамки отсутствуют).

. Атрибут bgcolor – для формирования фона таблицы с помощью цвета.

. Атрибут background - для формирования фона таблицы с помощью картинки.

. Атрибут cellpadding – для указания отступов от краев ячейки (в

пикселях).

. Атрибут cellspacing – расстояние между ячейками.

Обычная таблица

| | |

. Атрибут bordercolor – цвет границ ячеек (рамки).

Атрибуты дескриптора <TR>:

1) Атрибут ALIGN – выравнивание текста в ячейках.

2) Атрибут VALIGN – определяет вертикальное выравнивание текста в

ячейках.

Возможные значения атрибута VALIGN:

. =TOP – по верху.

. =MIDDLE – по центру.

. =BOTTOM – по нижнему краю ячейки.

3)Атрибут bgcolor – для указания фона строки.

Атрибуты дескриптора <TD>:

. Атрибут ALIGN.

. Атрибут VALIGN.

. Атрибут bgcolor.

Вышеперечисленные атрибуты действуют так же, как для дескриптора <TR>.

Дополнительно атрибуты:

. Атрибут COLSPAN – объединение ячеек, находящихся в одной строке.

Значение атрибута равно количеству близлежащих ячеек находящихся в

одной строке, которые будут объединены.

Пример:

<TABLE>

|<TD COLSPAN=2>1</TD> |

|<TD>3</TD> |<TD>4</TD> |

</TABLE>

. Атрибут ROWSPAN – объединение ячеек, находящихся в одном столбце.

Значение атрибута указывает количество близлежащих ячеек находящихся в

одном столбце, которые будут объединены.

Пример:

<TABLE>

|<TD ROWSPAN=2>1</TD> |<TD>2</TD> |

| |<TD>4</TD> |

</TABLE>

Форматирование текстовых фрагментов HTML документа

Кроме ширины и высоты таблицы в целом можно регулировать ширину и высоту

ячеек (то есть использовать такие же атрибуты в дескрипторе <TD>, в

пикселях и в процентах).

Если они не указаны, то браузер выравнивает размер ячейки по ширине текста.

Таблица является наиболее часто употребляемым инструментом в Web дизайне,

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

Подобно спискам, таблицы могут быть вложены в другие таблицы.

Пример:

| | |

Чтобы добавить такую таблицу в контейнере дескриптора ячейки пишут

следующее:

<TD>

<TABLE>

</TABLE>

<TD>

Фон отдельных ячеек могут отображать не все браузеры.

Размещение графических изображений в HTML документе

Для размещения изображений используются в основном два графических формата:

. JPG

. GIF

1.Формат JPG.

Плюсы - Графическое изображение, сохраненное в данном формате, имеют

наименьший объем.

Минусы – при сохранении происходит довольно сильное сжатие картинки, а при

сжатии изображение теряет качество и наблюдается эффект пикселизации.

Пример:

Картинка сжалась в девять раз.

| | | |

| |

Девять пикселей заменяются одним пикселем среднего цвета.

Изображение сохраняется в формате .jpg в том случае, если необходимо

сохранить максимальное количество оттенков.

2.Формат GIF.

При сохранении картинок в этом формате также происходит сжатие, но

пикселизации не происходит.

Минусы – изображение сохраняется с помощью ограниченного количества цветов

(обычно 256 цветов) => изображение будет не очень красочным.

С помощью формата .gif сохраняются навигационные кнопки, навигационные

графические элементы и фоновые изображения.

Для внедрения изображения используется одиночный дескриптор <IMG>.

. Атрибут SRC – основной атрибут. Он указывает путь и имя файла, в

котором содержится графический элемент.

Пример:

. Атрибут WIDTH – ширина внедряемого изображения (в пикселях).

. Атрибут HEIGHT - высота внедряемого изображения (в пикселях).

. Атрибуты VSPACE, HSPACE – устанавливают отступ текста от внедряемого в

HTML документ изображения.

. Атрибут BORDER – задает толщину рамки вокруг изображения.

. Атрибут ALT – задает альтернативный текст, который появляется в том

месте, где должны быть картинки.

Пример:

ALT=”Здесь была картинка”.

Обычно атрибут используют при размещении навигационных изображений

(ссылок), а так же при размещении изображений, о которых надо дать знать

поисковой системе.

. Атрибут ALIGN – выравнивание.

Возможные значения:

=LEFT, CENTER, RIGHT.

Добавляются значения: =TOP, MIDDLE, BOTTOM.

. Если не используются атрибуты WIDTH, HEIGHT, то изображение внедряется

оригинального размера.

Если используется только один атрибут, например HEIGHT, то браузер уменьшит

или увеличит ширину пропорционально изображению.

Использование гипрессылок

Гипрессылка – это URL адрес того документа, который привязан к одному из

элементов Web страницы (текстовому или графическому).

Для внедрения ссылок в HTML документ применяется парный дескриптор

<A>…</A>.

Пример:

Все, что находится внутри контейнера, называется элемент привязки

(текстовый фрагмент или графический элемент).

</A>

В результате на экране отображается подчеркнутый выделенный текст.

Пример привязки к изображению:

<A>

</A>

Изображение, к которому привязывается ссылка, называется навигационной

картинкой (изображением).

В случае привязки к картинке ссылки вокруг картинки формируется рамка (чаще

всего синего цвета). Чтобы ее убрать, необходимо указать:

Значением атрибута HREF может быть абсолютный адрес (URL адрес) или

относительный адрес (имя файла, в котором хранится HTML документ,

указываемый с помощью ссылки). Например, HREF=”1.htm”. Браузер будет искать

данный документ в текущей папке, то есть в той, в которой находится

активный документ.

Исключение составляет дескриптор <BASE>

В случае использования данного дескриптора в заголовке HTML документа (то

есть контейнера HEAD)относительные адреса (указанные в виде значений HREF)

будут восприниматься браузером не относительно текущей папки, а

относительно URL адреса, указанного в значении атрибута URL.

Использование дескриптора <A>…</A>

для указания отдельных элементов HTML документов.

1. Атрибут NAME используется для указания места, до которого необходимо

пролистать

HTML документ.

Пример:

</A>

В этом случае внутри дескриптора <A> находится якорь – это элемент HTML

документа, который может быть адресован с помощью гиперссылки. Якорь не

выделяется браузером.

Для того чтобы с помощью ссылки адресоваться к якорю надо после URL адреса

добавить # и указать имя якоря.

Пример:

Название якоря может формироваться без указания URL адреса HTML документа.

Пример:

Данный якорь будет искаться в текущей папке.

При использовании абсолютного адреса необходимо использовать аббревиатуру

http (например, http://www.kirov.ru).

HTML форма

Форма (в документе HTML) – это средство, позволяющее организовать диалог

пользователя и Web сайта.

Основные виды HTML форм:

1) Кнопки.

2) Списки.

3) Текстовые поля.

4) Переключатели (флажки).

5) Радиокнопки.

Элементы управления HTML форм позволяют пользователю вводить информацию с

помощью браузера и отправлять её на обработку Web сайту.

Для обработки форм, заполненных пользователем, на Web сайте используется

программа-обработчик. В ответ на данную форму эта программа формирует HTML

код.

Группа дескрипторов, формирующих HTML форму.

1. Парный дескриптор 3.Радиокнопка.

(Выглядит как жирная точка).

Достигается с помощью двух дескрипторов <INPUT>, имеющих одинаковое имя.

Например, NAME=”1”.

[pic]

4.Текстовое поле типа пароль.

Данный дескриптор формирует текстовое поле типа пароль. Работает также как

и однострочное текстовое поле, но значение отображается в виде звездочек.

[pic]

5.Кнопка.

. <INPUT TYPE=”BUTTON”>

Используется для вызова клиентских скриптов (сценариев).

Выглядит так:

[pic]

. Кнопка созданная с помощью:<INPUT TYPE=”SUBMIT” VALYE=”Пуск”>

предназначена для отправки формы на обработку в Web сайт.

Выглядит так:

[pic]

. Кнопка сброса формы.

Предназначена для установления первоначального значения формы.

Выглядит так:

[pic]

6.Списки выбора (меню) – это многоуровневая конструкция.

Парный дескриптор < SELECT >…</ SELECT > (дескриптор первого уровня)

формирует свойства меню.

Атрибуты:

. Атрибут NAME.

. Атрибут SIZE.

o Если данный атрибут равен единице, меньше единицы или не указан,

то формируется выпадающее меню.

Выглядит так:

[pic]

o Если SIZE больше единицы, то формируется прокручиваемый список.

Выглядит так:

[pic]

Внутри контейнера дескриптора<SELECT> находятся элементы меню, которые

формирует одиночный дескриптор <OPTION> (дескриптор второго уровня).

Пример:

<OPTION>Файл

<OPTION>Печать

</SELECT>

Ширина меню определяется максимальным значением элемента меню.

. Атрибут MULTIPLE – для выбора нескольких разных опций.

Советы преподавателя:

1) Размещать каждый дескриптор с новой строки.

2) Перед большими конструкциями делать интервал.

HTML форма отсылается на обработку Web сайту в виде записей, которые

выглядят следующим образом:

Имя элемента формы(Name) = значение(Value).

Для списков, переключателей, кнопок, радиокнопок обязательно задавать

значение атрибута Value. В остальных случаях значение задает пользователь

(во время ввода). В случае если при формировании элементов формы типа

переключатель (флажок) атрибут Value не используется, в качестве значения

будет формироваться предлог On.

Для списков таковым значением по умолчанию будет назначаться текст,

расположенный сразу после дескриптора <OPTION>.

Если вы используете элемент Web формы для передачи информации Web сайту,

при передаче формы на обработку должна появиться запись:

Имя элемента формы = его значение.

История создания Internet

Толчком к созданию сети Internet послужила холодная война.

Первые разработки по созданию глобальных компьютерных сетей были

осуществлены американским агентством по созданию военных разработок DARPA

(агентство было создано в 1957 году).

В 1965 году состоялся первый сеанс удаленной связи между компьютерами. Был

выделен специальный проект по созданию сети ARPANET (прообраз сети

Internet).

В 1969 году были созданы первые маршрутизаторы, благодаря этому в этом же

году было создано четыре узла маршрутизации, которые позволили в полной

мере реализовать ту модель ГВС, которая была изначально принята за основу

при создании сети ARPANET.

В 1972 году был запущен стандарт, регламентирующий основу транспортного

протокола TCP.

В этом же году появились первые сервисы:

. TELNET (1972).

. FTP (1973).

С помощью этих сервисов пользователь получает удаленный доступ к командной

строке сервера. Для передачи сообщений использовали командную строку. Для

передачи электронной почты использовался протокол FTP.

В 1977 году появился стандарт на сервис электронной почты SMTP.

В 1983 году произошло официальное внедрение протокола TCP/IP.

В результате расширения сети было принято решение о передаче координации

проекта ARPANET из обороны науке. И проект был переименован в NSFNET.

В середине 80-х к NSFNET подключились британская сеть, затем канадская,

финская и другие.

В 1993 году к Internet присоединилась Россия, и был образован домен .ru

В 1991 году был создан сервис Gopher – прообраз Web сервиса.

Основные организационные структуры,

координирующие работу Internet

После выхода Internet за национальные рамки основная роль по управлению

сетью была передана Всемирной общественной организации по назначению имен и

чисел – ICANN.

Инженерная организация по развитию Internet – IETF.

Основная задача: Развитие старых и создание новых сетевых стандартов.

Развитием Web стандартов занимается W3C.

IOSC – интернет сообщество. Основная задача – развитие содержательной

части, правовые вопросы.

РСИЦ – региональный сетевой информационный центр (в России). Этот центр

занимается разработками, опираясь на стандарты четырех вышеперечисленных

организаций.

В каждой стране есть такой центр.

Листы каскадных стилей или CSS

CSS – это набор правил для оформления и форматирования различных элементов

HTML документов.

Правила подключения стиля к конкретному HTML документу:

1) С помощью одиночного дескриптора <LINK>.

MEDIA – среда, в которой будут работать стили.

При задании значения атрибуту MEDIA правила будут действовать только при

выводе страниц на:

MEDIA=”PRINT” – печать.

MEDIA=”SCREEN” – экран.

2) При помощи парного дескриптора <STYLE>…<STYLE>.

<STYLE TYPE=”text/css” [MEDIA=”…”]>…</STYLE>.

В контейнере дескриптора Правила описания стилей

Правила описания стилей - это команды, определяющие свойства HTML

документов (цвет, выравнивание). Набор свойств, доступный через CSS гораздо

больше, чем стандартный HTML набор.

Синтаксис:

P {text-align:right; color:red}, где

P – класс HTML документов, которые будут подвергаться форматированию (то

есть к которым будет применяться стиль).

Набор таких правил у нас может храниться в отдельном файле, могут

находиться в контейнере дескриптора находиться в контейнере дескриптора <STYLE>.

Например,

P.krass{color:red} – все параграфы класса krass будут красного цвета.

P:first-letter {color:red; font-size:300%; float:left}, где first-letter –

имя псевдонима. (Здесь первая буква).

P.krass:first-letter

A:visited {color:red; font-size:300%; float:left}

A:active

first-line

Псевдокласс – это множество HTML элементов, описываемых непосредственно

спецификацией CSS.

#111{color:red} ,где #111 –идентификатор элемента.

Атрибут ID служит для присваивания идентификатора элементу.

Пример:

Так можно накладывать элементы друг на друга:

#111{top:10; left:100; width:100; height:200; width:100; height:200; z-

index:2}

Координата z определяет место (порядок) элемента.

Каскадный приоритет – это порядок, в котором правила, определяющие

конкретные стили будут применяться.

1) На первом месте правила, определенные атрибутом STYLE.

2) Правила, определяемые с помощью стилей.

Например, P.1{…}.

3) Правила, определяющие стили для дескрипторов определенного типа.

Например, P {text-align:right; color:red}

Подключение стилей с помощью дескриптора Чтобы придать акцент (приоритет) определенному правилу используется

important.

Пример:

P {text-align:right !important}- искусственное изменение приоритета.

4) На последнем месте каскадного приоритета (то есть наименьшие по

важности) правила определения стилей указываемых пользователем с помощью

браузера.

P, H1, DIV {…} – эта конструкция используется для одновременного присвоения

свойств сразу нескольким классам.

XML - расширяемый язык разметки

Расширяемый язык разметки XML предназначен для описания внутренней

логической структуры документа.

<ТЕМА>информация</ТЕМА>

В качестве команд языка HML используются элементы. Элемент начинается так

же, как и дескриптор:

<название элемента>содержимое элемента</название элемента>

!Элемент всегда заканчивается закрывающимся тэгом. Одиночных элементов (как

в HTML) не бывает.

При указании элементов могут использоваться атрибуты (свойства) элемента. В

отличие от атрибута HTML, значения атрибутов обязательно должны заключаться

в кавычки.

Иерархическая структура документов.

Все элементы XML документа должны располагаться в строгой иерархической

последовательности. Обязательно должен быть один корневой элемент, от

которого иерархическое дерево растет и изветвляется.

Пример:

<?XML version=”1.0” encoding=”windows-1251”?>

<PREDMET_LIST>

<PREPOD>Выдрин А.Л.</ PREPOD >

<TEMY_LIST>

<TEMA>Информация</TEMA>

< TEMA >Структура Интернета</ TEMA >

… … …

</ TEMY_LIST >

</ PREDMET >

</ PREDMET_LIST >

Основное свойство HML – его расширяемость. Создатель документа может

использовать для обозначения элементов любые названия, определяющие смысл

элемента одинаково для него и пользователя.

Для определения смысла отдельных элементов HML документа используются

специальные конструкции DTD – определители типа документов, которые

определяют не только логический смысл элемента (дают комментарии по поводу

описания использования элемента), но и жестко определяют структуру

элемента.

Синтаксис данных определителей типа документов достаточно сложен и

напоминает отдельный язык разметки (или язык программирования).

! Синтаксис достаточно строг. Нельзя делать ошибки.

DTD используются так же, как эталоны для проверки правильности XML

документов.

Для задания внешнего представления XML документа используются стили.

Основная нагрузка XML документа – содержание.

<?xml-stylesheet type=”text/css” ref=”1.css”?>

Классификация Web ресурсов

|Навигационные |

|сайты |

|Конечные (или функциональные) |

|сайты |

|Информационные |

|(тематические) |

|сайты |

|Корпоративные|

| |

|сайты |

|Каталоги|

|Поисковые|

| |

|системы |

|Сайты |

|электронно|

|й |

|коммерции |

|Сайты, |

|являющиеся |

|Web интерфейсами|

| |

|сетей Internet |

|Порталы|

Навигационные сайты – перенаправляют пользователей к конечным сайтам

(указующая и направляющая роль). Например, порталы Яндекс, Кирилл и Мифодий

и прочие.

Портал – это Web сайт, сочетающий в себе функции навигационного сайта и

информационного ресурса по различным темам.

Конечный (функциональный) сайт – это сайты или ресурсы, которые содержат

информацию или документы, ради которых пользователи приходят в глобальные

сети (Internet).

Информационные сайты - обеспечивают доступ пользователей к документам

определенной тематики.

Корпоративные сайты, а так же сайты электронной коммерции – дают доступ к

коммерческой информации (информации о товарах, услугах, производителях), а

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

Web интерфейс – это сайты, которые через стандартные HTML страницы (Web

страницы) предоставляют доступ к сервисам Internet (электронной почты,

телеконференций и другим).

Роль последней группы сайтов очень велика.

Семинарские занятия

1) Знакомство с Internet (чтение учебника). Подключится к серверу.

2) Создание учетных записей. Создание оригинального сообщения.

3) Получить ваше сообщение. Создать правила для сообщений почты в отношении

названных вами сообщений.

4) Получить ваше сообщение, создать ответ и отправить сообщение.

Перенаправить ваше сообщение вам и еще кому-нибудь, присоединив к нему

файл.

5) Подписаться на группу новостей.

6) Создание запросов. Найти в документах данные вами слова и фразы.

7) Создать HTML документ. В заголовке использовать дескрипторы 7) Создать HTML документ. В заголовке использовать дескрипторы <title>,

атрибутов bgcolor, background, text, link, vlink, alink, topmargin,

leftmargin.

8) Форматирование текста. Создать HTML документ. Скопировать текст.

Попробовать действие дескрипторов <!>,<comment>, <br>, <nobr>, <wbr>, <p>

(с атрибутом align), заголовка от <h1> до <h6> (с тем же атрибутом), <hr>

(с атрибутами align, color, width, size, noshade),< font> (атрибут face,

color, size),< basefont> (атрибуты как у font),

Страницы: 1, 2