Сегментирование рынка
РОССИЙСКИЙ ГОСУДАРСТВЕННЫЙ ОТКРЫТЫЙ
ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ ПУТЕЙ СООБЩЕНИЯ
КУРСОВАЯ РАБОТА
по дисциплине
"ВМ, сети и системы коммуникаций"
на тему:
"Создание страниц WWW"
выполнил
принял
факультет Управление и экономика на транспорте
специальность Информационные системы в экономике
курс 4
шифр
адрес
1999 год
Содержание :
1. Введение.
стр. 3
2. Команды HTML и основные принципы построения
страниц WWW.
стр. 4-11
3. Литература. стр.
12
Бродя по паутине, частенько натыкаешься на незатейливые (а иногда и
сверхзатейливые) страницы, созданные самыми обычными людьми -
пользователями Internet. Сотни тысяч человек стремятся рассказать о себе.
И зачастую информация, находящаяся на этих страницах бывает очень
интересной и важной.
Поговорим о том, что нужно знать, чтобы в Сети появилась своя
собственная страница.
Страницы WWW (Word Wide Web) храняться в виде самых обычных текстовых
файлов. Все графические вставки, видео- и звуковые данные записаны в
отдельные файлы с использованием соответствующего формата (например, GIF
или JPEG). Всё многообразие стилевого и шрифтового оформления страниц WWW
достигается с помощью управляющих команд, которые вставляются в
соответствующие места текста.
Набор управляющих команд и правил их использования определяется языком
разметки гипертекста HTML (Hyper Markup Language), который произошёл от
ранее разработанного мощного языка разметки текста SGML (Standart
Generalized Markup Language). Следует учесть, что HTML не является языком
программирования, а входит в группу языков, которые занимаются
классификацией частей документа в соответствии с их назначением. Одни
команды определяют положение конкретной части документа на странице, другие
- размер и тип шрифта, третьи - связана ли с этой частью какая-либо ссылка
на другой документ и так далее.
HTML совершенно не зависит от компьютерных платформ. Неважно, что у
тебя за машина: Macintosh или PC, стоит ли Windows 95, MacOs или Linux -
правильное отображение документа в окне броузера гарантированно.
Современные средства создания страниц WWW работают в режиме WYSIWYG. Ты
редактируешь документ и сразу видишь, как он будет выглядеть при его
размещении на сервере WWW. Для создания html-документов достаточно самого
примитивного текстового редактора, способного сохранять текст без символов
форматирования. Например, Notepad, встроенный в любую версию Windows, или
же для более комфортной работы Microsoft Internet Assistant for Microsoft
Word.
В своём наиболее общем виде структура документа HTML выглядит следующим
образом :
<HTML>
<HEAD>
<title> заголовок </title>
</HEAD>
<body><table width="780" border="0" bordercolor="#FFFFFF" align="center" cellpadding="5" cellspacing="0">
<tr>
<td bgcolor="ead292"><font face="Verdana, Arial, Helvetica, sans-serif" color="aa4332"> заголовок </font></td>
</tr>
</table>
<table width="780" height="2" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td></td>
</tr>
</table>
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><table width="749" height="136" border="0" align="right" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td rowspan="6"> <img src="/images/2devochki-template_01.gif" width="45" height="136" alt=""></td>
<td rowspan="2"> <img src="/images/2devochki-template_02.gif" width="51" height="53" alt="Даша"></td>
<td rowspan="2"> <img src="/images/2devochki-template_03.gif" width="49" height="53" alt="Оля"></td>
<td> <img src="/images/2devochki-template_04.gif" width="196" height="26" alt=""></td>
<td rowspan="6"> <img src="/images/2devochki-template_05.gif" width="12" height="136" alt=""></td>
<td colspan="2"> <img src="/images/2devochki-template_06.gif" width="395" height="26" alt=""></td>
<td> <img src="/images/spacer.gif" width="1" height="26" alt=""></td>
</tr>
<tr>
<td rowspan="2"> <a href="http://www.2devochki.ru"><img src="/images/2devochki-template_07.gif" alt="Две девочки - 40000 рефератов" width="196" height="42" border="0"></a></td>
<td rowspan="3" background="/images/2devochki-template_08.gif"> <div align="center">
<!-- CLX 343x60 -->
block
<!-- CLX 343x60 -->
</div></td>
<td rowspan="3"> <img src="/images/2devochki-template_09.gif" width="52" height="60" alt=""></td>
<td> <img src="/images/spacer.gif" width="1" height="27" alt=""></td>
</tr>
<tr>
<td rowspan="4"> <img src="/images/2devochki-template_10.gif" width="51" height="83" alt=""></td>
<td rowspan="4"> <img src="/images/2devochki-template_11.gif" width="49" height="83" alt=""></td>
<td> <img src="images/spacer.gif" width="1" height="15" alt=""></td>
</tr>
<tr>
<td rowspan="2"> <img src="/images/2devochki-template_12.gif" width="196" height="37" alt=""></td>
<td> <img src="/images/spacer.gif" width="1" height="18" alt=""></td>
</tr>
<tr>
<td rowspan="2"> <img src="/images/2devochki-template_13.gif" width="343" height="50" alt=""></td>
<td rowspan="2"> <img src="/images/2devochki-template_14.gif" width="52" height="50" alt=""></td>
<td> <img src="images/spacer.gif" width="1" height="19" alt=""></td>
</tr>
<tr>
<td> <img src="/images/2devochki-template_15.gif" width="196" height="31" alt=""></td>
<td> <img src="/images/spacer.gif" width="1" height="31" alt=""></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="6" background="/images/tbl-left-top.gif"></td>
<td height="6" background="/images/tbl-top.gif"></td>
<td width="6" background="/images/tbl-right-top.gif"></td>
</tr>
<tr>
<td width="6" background="/images/tbl-left.gif"></td>
<td bgcolor="ead292" align="center">
<!-- CLX 468x60 -->
<script>//<!--
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>
<!-- CLX 468x60 -->
</td>
<td width="6" background="/images/tbl-right.gif"></td>
</tr>
<tr>
<td width="6" height="6" background="/images/tbl-left-bottom.gif"></td>
<td height="6" background="/images/tbl-bottom.gif"></td>
<td width="6" height="6" background="/images/tbl-right-bottom.gif"></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="6" background="/images/tbl-left-top.gif"></td>
<td height="6" background="/images/tbl-top.gif"></td>
<td width="6" background="/images/tbl-right-top.gif"></td>
</tr>
<tr>
<td width="6" background="/images/tbl-left.gif"></td>
<td bgcolor="ead292">
<br>
<table width="500" border="0" align="center" cellpadding="5" cellspacing="0">
<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>
<td width="6" background="/images/tbl-right.gif"></td>
</tr>
<tr>
<td width="6" height="6" background="/images/tbl-left-bottom.gif"></td>
<td height="6" background="/images/tbl-bottom.gif"></td>
<td width="6" height="6" background="/images/tbl-right-bottom.gif"></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="6" background="/images/tbl-left-top.gif"></td>
<td height="6" background="/images/tbl-top.gif"></td>
<td width="6" background="/images/tbl-right-top.gif"></td>
</tr>
<tr>
<td width="6" background="/images/tbl-left.gif"></td>
<td align="center" bgcolor="ead292">
<!-- CLX 468x60 rotator-->
<script>//<!--
document.write('<script language=JavaScript src=http://s.clx.ru/rot.php?num=12237&c='+Math.round(Math.random() * 100000)+'></script>');
// --></script>
<!-- CLX 468x60 rotator-->
</td>
<td width="6" background="/images/tbl-right.gif"></td>
</tr>
<tr>
<td width="6" height="6" background="/images/tbl-left-bottom.gif"></td>
<td height="6" background="/images/tbl-bottom.gif"></td>
<td width="6" height="6" background="/images/tbl-right-bottom.gif"></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2"> </td>
</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>
<td width="597"><div align="right">
<!--LiveInternet counter--><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><!--/LiveInternet-->
<a href="http://www.yandex.ru/cy?base=0&host=www.2devochki.ru">
<img src="http://www.yandex.ru/cycounter?www.2devochki.ru" width=88 height=31 alt="Яндекс цитирования" border=0>
</a>
<!-- HotLog -->
<script language="javascript">
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>
<script language="javascript1.2">
hotlog_js="1.2";
hotlog_r+="&wh="+screen.width+'x'+screen.height+"&px="+
(((navigator.appName.substring(0,3)=="Mic"))?
screen.colorDepth:screen.pixelDepth)</script>
<script language="javascript1.3">hotlog_js="1.3"</script>
<script language="javascript">hotlog_r+="&js="+hotlog_js;
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>
<noscript><a href=http://click.hotlog.ru/?277385 target=_top><img
src="http://hit20.hotlog.ru/cgi-bin/hotlog/count?s=277385&im=112" border=0
width="88" height="31" alt="HotLog"></a></noscript>
<!-- /HotLog -->
<!-- SpyLOG f:0211 -->
<script language="javascript"><!--
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 href="http://u6592.46.spylog.com/cnt?cid=659246&f=3&p=0" target="_blank">
<img src="http://u6592.46.spylog.com/cnt?cid=659246&p=0" alt='SpyLOG' border='0' width=88 height=31 >
</a></noscript>
<!-- SpyLOG -->
</div></td>
</tr>
</table>
<br>
</body>
</HTML>
Профессионалы называют их тэгами. Тэги - некий значимый набор символов
HTML, единицы разметки, каждая из которых даёт конкретное указание броузеру
по поводу той или иной части документа.
Изображённые в примере команды обязательны для любого html -документа.
Почти все команды парные. Первая часть пары - тэг начальный, открывающий
действие эффекта, который будет интерпретирован броузером в графическом
виде. Вторая часть - тэг конечный. Он определяет границу в теле документа,
после которой эффект начального тэга уже не имеет силы. Конечный тэг всегда
можно опознать по символу "/" - "слэш", стоящему перед ключевым словом.
Теперь рассмотрим, что обозначают эти и другие команды написания html -
страниц.
Команды <HTML></HTML> открывают и завершают любую html -cтраничку.
Команды <HEAD></HEAD> определяют заголовочную, служебную часть. Команды
<TITLE>" --><title> заголовок </title> вложены внутрь тэгов <HEAD></HEAD> и представляют заголовок
страницы, который будет отображён наверху окна броузера, а также даст имя
закладке на память (bookmark), если, конечно,страничка будт настолько
интересной, что убедит зашедшего на неё поставить эту закладку. Команды
<body><table width="780" border="0" bordercolor="#FFFFFF" align="center" cellpadding="5" cellspacing="0">
<tr>
<td bgcolor="ead292"><font face="Verdana, Arial, Helvetica, sans-serif" color="aa4332"> заголовок </font></td>
</tr>
</table>
<table width="780" height="2" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td></td>
</tr>
</table>
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><table width="749" height="136" border="0" align="right" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td rowspan="6"> <img src="/images/2devochki-template_01.gif" width="45" height="136" alt=""></td>
<td rowspan="2"> <img src="/images/2devochki-template_02.gif" width="51" height="53" alt="Даша"></td>
<td rowspan="2"> <img src="/images/2devochki-template_03.gif" width="49" height="53" alt="Оля"></td>
<td> <img src="/images/2devochki-template_04.gif" width="196" height="26" alt=""></td>
<td rowspan="6"> <img src="/images/2devochki-template_05.gif" width="12" height="136" alt=""></td>
<td colspan="2"> <img src="/images/2devochki-template_06.gif" width="395" height="26" alt=""></td>
<td> <img src="/images/spacer.gif" width="1" height="26" alt=""></td>
</tr>
<tr>
<td rowspan="2"> <a href="http://www.2devochki.ru"><img src="/images/2devochki-template_07.gif" alt="Две девочки - 40000 рефератов" width="196" height="42" border="0"></a></td>
<td rowspan="3" background="/images/2devochki-template_08.gif"> <div align="center">
<!-- CLX 343x60 -->
block
<!-- CLX 343x60 -->
</div></td>
<td rowspan="3"> <img src="/images/2devochki-template_09.gif" width="52" height="60" alt=""></td>
<td> <img src="/images/spacer.gif" width="1" height="27" alt=""></td>
</tr>
<tr>
<td rowspan="4"> <img src="/images/2devochki-template_10.gif" width="51" height="83" alt=""></td>
<td rowspan="4"> <img src="/images/2devochki-template_11.gif" width="49" height="83" alt=""></td>
<td> <img src="images/spacer.gif" width="1" height="15" alt=""></td>
</tr>
<tr>
<td rowspan="2"> <img src="/images/2devochki-template_12.gif" width="196" height="37" alt=""></td>
<td> <img src="/images/spacer.gif" width="1" height="18" alt=""></td>
</tr>
<tr>
<td rowspan="2"> <img src="/images/2devochki-template_13.gif" width="343" height="50" alt=""></td>
<td rowspan="2"> <img src="/images/2devochki-template_14.gif" width="52" height="50" alt=""></td>
<td> <img src="images/spacer.gif" width="1" height="19" alt=""></td>
</tr>
<tr>
<td> <img src="/images/2devochki-template_15.gif" width="196" height="31" alt=""></td>
<td> <img src="/images/spacer.gif" width="1" height="31" alt=""></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="6" background="/images/tbl-left-top.gif"></td>
<td height="6" background="/images/tbl-top.gif"></td>
<td width="6" background="/images/tbl-right-top.gif"></td>
</tr>
<tr>
<td width="6" background="/images/tbl-left.gif"></td>
<td bgcolor="ead292" align="center">
<!-- CLX 468x60 -->
<script>//<!--
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>
<!-- CLX 468x60 -->
</td>
<td width="6" background="/images/tbl-right.gif"></td>
</tr>
<tr>
<td width="6" height="6" background="/images/tbl-left-bottom.gif"></td>
<td height="6" background="/images/tbl-bottom.gif"></td>
<td width="6" height="6" background="/images/tbl-right-bottom.gif"></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="6" background="/images/tbl-left-top.gif"></td>
<td height="6" background="/images/tbl-top.gif"></td>
<td width="6" background="/images/tbl-right-top.gif"></td>
</tr>
<tr>
<td width="6" background="/images/tbl-left.gif"></td>
<td bgcolor="ead292">
<br>
<table width="500" border="0" align="center" cellpadding="5" cellspacing="0">
<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>
<td width="6" background="/images/tbl-right.gif"></td>
</tr>
<tr>
<td width="6" height="6" background="/images/tbl-left-bottom.gif"></td>
<td height="6" background="/images/tbl-bottom.gif"></td>
<td width="6" height="6" background="/images/tbl-right-bottom.gif"></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="6" background="/images/tbl-left-top.gif"></td>
<td height="6" background="/images/tbl-top.gif"></td>
<td width="6" background="/images/tbl-right-top.gif"></td>
</tr>
<tr>
<td width="6" background="/images/tbl-left.gif"></td>
<td align="center" bgcolor="ead292">
<!-- CLX 468x60 rotator-->
<script>//<!--
document.write('<script language=JavaScript src=http://s.clx.ru/rot.php?num=12237&c='+Math.round(Math.random() * 100000)+'></script>');
// --></script>
<!-- CLX 468x60 rotator-->
</td>
<td width="6" background="/images/tbl-right.gif"></td>
</tr>
<tr>
<td width="6" height="6" background="/images/tbl-left-bottom.gif"></td>
<td height="6" background="/images/tbl-bottom.gif"></td>
<td width="6" height="6" background="/images/tbl-right-bottom.gif"></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2"> </td>
</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>
<td width="597"><div align="right">
<!--LiveInternet counter--><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><!--/LiveInternet-->
<a href="http://www.yandex.ru/cy?base=0&host=www.2devochki.ru">
<img src="http://www.yandex.ru/cycounter?www.2devochki.ru" width=88 height=31 alt="Яндекс цитирования" border=0>
</a>
<!-- HotLog -->
<script language="javascript">
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>
<script language="javascript1.2">
hotlog_js="1.2";
hotlog_r+="&wh="+screen.width+'x'+screen.height+"&px="+
(((navigator.appName.substring(0,3)=="Mic"))?
screen.colorDepth:screen.pixelDepth)</script>
<script language="javascript1.3">hotlog_js="1.3"</script>
<script language="javascript">hotlog_r+="&js="+hotlog_js;
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>
<noscript><a href=http://click.hotlog.ru/?277385 target=_top><img
src="http://hit20.hotlog.ru/cgi-bin/hotlog/count?s=277385&im=112" border=0
width="88" height="31" alt="HotLog"></a></noscript>
<!-- /HotLog -->
<!-- SpyLOG f:0211 -->
<script language="javascript"><!--
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 href="http://u6592.46.spylog.com/cnt?cid=659246&f=3&p=0" target="_blank">
<img src="http://u6592.46.spylog.com/cnt?cid=659246&p=0" alt='SpyLOG' border='0' width=88 height=31 >
</a></noscript>
<!-- SpyLOG -->
</div></td>
</tr>
</table>
<br>
</body> ограничивают содержимое страницы. Информация, которую нужно
поместить на страницу, должна находиться между этими двумя командами.
Команда <META> предназначена для встаки в документ дополнительной
информации о самом документе. Например, информация о программе, с помощью
которой был создан документ:
<META NAME="GENERATOR" CONTENT="Internet Assistant for Microsoft Word">
Команда <P> позиционирует обзац. Впрочем, достаточно часто она
используется для вставки в страницу пробела, равного по высоте одной
строке.
Команды <FONT></FONT> предназначены для определения шрифта, который
следует использовать при отображении текстовой ссылки Normal text:
<FONT FACE="Times New Roman">Normal text</FONT>
Дополнительно эта команда позволяет указать другие атрибуты шрифтового
форматировния, например высоту букв.
Простейшие текстовые редакторы, такие, как Notepad, Norton Editor или
Лексикон для Dos, предполагают, что текст состоит из отдельных строк,
каждая из которых завершается специальным символом - символом конца строки.
Такой подход вызывает много неудобств при форматировании документа, так как
для установки расстояния между параграфами текста нужно вставлять пустые
строки, а отступ первой строки и выравнивание столбцов в таблицах
приходится делать с помощью символов пробела и табуляции. Современные
текстовые процессоры пользуются символом строки по-другому. Вместо того
чтобы вставлять этот символ в конец каждой строки текста, они отмечают
указанным символом конец параграфа. Таким образом, в текстовых процессорах
используется понятие параграфа как текста, состоящего, возможно, из
нескольких строк, в конце которого расположен специальный символ.
Удобство такого подхода заключается в том, что при редактировании
документа можно легко изменять такие параметры параграфа, как отступы от
левой и правой границы листа, отступ для первой строки, расстояние между
строками и между параграфами, не заботясь о том, как при этом будут
располагаться слова, из которых состоит параграф.
Бывают случаи, когда необходимо сделать переход к другой строке,
оставаясь при этом в рамках текущего параграфа. Такой принудительный
переход к другой строке можно сделать с помощью команды <BR>:
<P>
Минимальным процессором для недорогих систем является: <BR> Pentiun 166
MMX.
При отображении этот текст будет выглядеть следующим образом:
Минимальным процессором для недорогих систем является:
Pentium 166 MMX
По умолчанию текст в параграфе выравнивается по левой границе окна
просмотра. Используя команды HTML, можно выполнить центрирование текста.
Центрирование текста выполняется командами <CENTER></CENTER>, которые
ограничивают с двух сторон центрируемый текст.
При форматировании страниц WWW часто используется такой приём, как
разделение параграфов горизонтальной линией. Она задаётся тэгом <HR>, у
которого есть атрибуты, позволяющие регулировать её длину и ширину. Ширина
линии задаётся в пикселах, длина - в процентах к размеру окна броузера по
ширине. Тэг, выводящий на экран горизонтальную линию шириной в 10 пикселов
и длиной 90 % от ширины окна броузера, выглядит так :
<HR SIZE="10" WIDTH="90%">
Любой современный текстовый процессор предоставляет пользователю
возможность шрифтового оформления символов. Как правило, можно выбрать для
символов любой шрифт, установленный в системе, выбрать высоту символов,
выделить символы жирным шрифтом, курсивом или подчёркиванием.
Все команды форматирования символов, определённые в языке HTML, можно
разделить на команды логического форматирования и команды физического
форматирования.
Команды логического форматирования определяют не конкретный способ
оформления, а указывают навигатору тип информации, подлежащий выделению.
Ниже приведён список команд логического форматирования символов с
кратким описанием.
| Команды | Описание |
|<CITE>,</CITE> |Цитата |
|<EM>,</EM> |Текст, имеющий особое значение |
|<STRONG>,</STRONG> |Сильное выделение текста |
|<KBD>,</KBD> |Текст, введённый пользователем |
|<CODE>,</CODE> |Листинг программы |
|<SAMP>,</SAMP> |Последовательность литералов |
|<VAR>,</VAR> |Имя переменной |
|<!-- ...--> |Комментарий |
По возможности следует использовать логическое форматирование символов,
так как такое форматирование позволяет самостоятельно выбирать способ
оформления указанных логических составляющих текста в состветствии со своим
вкусом.
Команды физического форматирования указывают явным образом, как следует
оформить символы текста :
| Команда | Описание |
|<B>,</B> |Выделение жирным шрифтом |
|<I>,</I> |Выделение курсивом |
|<TT>,</TT> |Оформление шрифтом с фиксированной шириной букв |
|>U>,</U> |Выделение подчёркиванием |
|<STRIKE>,</STRIKE> |Выделение перечёркиванием |
|<BIG>,</BIG> |Текст с крупным размером букв |
|<SMALL>,</SMALL> |Текст с мелким размером букв |
|<BLINK>,</BLINK> |Мигающий текст |
|<SUB>,</SUB> |Подстрочный текст |
|<UP>,</UP> |Надстрочный текст |
Ещё одна возможность форматирования символов с помощью команды <FONT>,
которая задаёт параметры шрифта. Команда <FONT> с параметром <SIZE>
определяет размер шрифта. По умолчанию размер шрифта равен трём, что
соответствует высоте букв, равной 12 пикселам.
Формат этой команды приведён ниже :
<FONT SIZE=X>
Если нужно изменить базовое значение букв, это можно сделать командой
<BASEFONT>, например :
<BASEFONT SIZE=2>
Другой параметр оператора <FONT> - параметр COLOR позволяет задать цвет
символов. Формат этого параметра приведн ниже :
<FONT COLOR="#RRGGBB">
Здесь вместо RR, GG и BB следует указать шестнадцатеричные значения
соответственно для красной, зелёной и голубой компонентов цвета.
Продолжая аналогию с оформлением обычного текста при помощи текстовых
процессоров, рассмотрим так называемое стилевое оформление параграфов.
Стилевым оформлением параграфа, или стилем параграфа, будем называть
совокуность параметров оформления, определяющих внешний вид и расположение
параграфа. Это такие параметры, как тип и размер шрифта, отступы от левого
и правого края документа, тип выравнивания текста в параграфе, межстрочное
расстояние и т.д.
В языке HTML определены 6 стилей для оформления заголовков различного
уровня. Первы и главный определяется командами <H>,</H1>, последний -
командами <H6>,</H6>. Чем выше уровень заголовка, тем более крупный шрифт
используется броузером для его отображения.
Ниже приведён список команд стилевого оформления с кратким их
описанием.
| Команда | Описание |
|<BLOCKQUOTE>,</BLOCKQUOTE> |Используется для цитирования |
|<DL COMPACT>,</DL> |Используется для формирования списка |
| |терминов и их описания |
|<DT> |Используется вместе с командами <DL> и |
| |<DD> для выделения определяемого |
| |термина |
|<DIR>,</DIR> |Используется для формироания списка |
|<TT>,</TT> |Текст, оформленный с использованием |
| |этой команды, будет отображаться на |
| |экране шрифтом с фиксированной шириной |
| |символов |
|<DFN>,</DFN> |Используется для оформления впервые |
| |упоминающегося термина |
|<ADDRESS>,</ADDRESS> |Применяется для оформления авторской |
| |подписи под страницей, адресов и т.п. |
Рано или поздно придётся размещать на странице WWW табличны данные.
Самый простой, но далеко не самый хороший способ создания таблиц известен
со времён текстового редактора Лексикон: оформляется таблица шрифтом с
фиксированной шириной букв, а для выравнивания колонок используются
символы пробела или табуляции.
Аналогичным образом можно поступить и при размещении таблиц на странице
WWW, однако лучше сделать это средствами языка HTML.
Воспользовавшись редактором Microsofe Internet Assistant for Microsoft
Word с помощью мыши можно легко создать таблицу, а затем с помощью
клавиатуры заполнить ячейки этой таблицы.
В документе таблица определяется между командами <TABLE>,</TABLE>.
Каждая строка таблицы ограничена командами <TR> и</TR>. Столбцы ограничены
командами <TD> и </TD>, причём у команды <TD> есть параметр - ширина
столбца. При необходимости можно создать таблицу с видимой рамкой,
разделяющей строки и столбцы. Для этого в команде <TABLE> необходимо
указать параметр BORDER, определяющий ширину рамки:
<TABLE BORDER ="1">
При необходимости можно задать цвет рамки, указав параметр BORDERCOLOR,
как это показано ниже:
<TABLE BORDER="4" BORDERCOLOR="#0000FF">
В языке HTML определено 4 специальных символа, предназначенных для
служебных целей (например, для вставки команд или символьных объектов). Это
символы <, >, & и ". При необходимости можно вставить в документ HTML байт
с произвольным шестнадцатиричным кодом. Для этого надо включить в текст
последовательность символов вида &#XX, где ХХ - шестнадцатиричное число в
диапазоне от 0 до FF.
Серверы WWW получили широкое распространение не в последнюю очередь за
счёт возможности размещения на страницах WWW графических изображений.
Размещать на странице графическое изображение следует небольшого размера, и
лучше сделать ссылку, применяя которую пользователь при необходимости
сможет просмотреть полноформатное изображение.
Для вставки графического изображения в документ HTML можно
воспользоваться командой <IMG>, как это показано ниже:
<IMG SRG="serg.jpg" ALT="Mouse">
Параметр SRG задаёт источник изображения,то есть путь к месту, где
находится графический файл с рисунком.Параметр ALT задаёт текст, который
отображается вместо графического изображения, если возможность вывода
графики отсутствует или отключена, если файл изображения ещё не успел
загрузиться на локальный диск пользователя.
Для использования сегментированной графики используются параметры
USEMAP и ISMAP. Сегментированное графическое изображение - это специальным
образом подготвленное битовое изображение, в котором при помощи специальных
программ определены "чувствительные точки". Обычно сегментированную графику
используют для создания графический инструментальных линеек с кнопками.
Наиболее впечатляющая возможность технологии WWW - возможность
размещения на страницах мультимедийной информации, и в частности
видеофрагментов со звуковым сопровождением или "немого кино".
Для того чтобы разместить видеофрагмент на странице WWW, неоходимо
подготовить файл в формате Microsoft Video for Windows (файл AVI),
содержащий видеофрагмент.
Для вставки видеофрагмента можно использовать описанную выше команду
<IMG> с параметрами DYBSRC, START, CONTROLS и несколько других:
<IMG DYNSRC="video.avi" START="FILEOPEN" CONTROLS>
В данном случае при загрузке страницы автоматически начинается
проигрывание файла video.avi, причём окно снабжается органами управления в
виде кнопки запуска/остановки проигрывания и движкового регулятора,
позволяющего перемещаться в произвольное место видеофрагмента.Ниже приведён
список параметров, которые используются для встаки видеофрагментов с
кратким описанием:
| Параметр | Описание |
|DYNSRC |Этот параметр определяет путь к файлу, содержащему |
| |видеофрагмент. |
|START |Параметр определяет момент, когда нужно начинать |
| |проигрование видеофрагмента, Если этот параметр имеет |
| |значение FILEOPEN, проигрывание начинается сразу, как |
| |только файл был загружен. |
|CONTROLS |Если указан этот параметр, под окном с видеофрагментом |
| |отображаются органы управления. |
|LOOP |Определяет, сколько раз будет проигрываться видеофрагмент.|
|LOOPDELAY |С помощью этого параметра можно задать задержку в |
| |милисекундах перед началом очередной операции проигрывания|
| |видеофрагмента. |
При оформлении фона страниц WWW часто используют небольшое графическое
изображение, которое будет заполнять собой фон страницы. Для того, чтобы
указать путь к файлу, содержащему фон страницы, к команде <body><table width="780" border="0" bordercolor="#FFFFFF" align="center" cellpadding="5" cellspacing="0">
<tr>
<td bgcolor="ead292"><font face="Verdana, Arial, Helvetica, sans-serif" color="aa4332"> заголовок </font></td>
</tr>
</table>
<table width="780" height="2" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td></td>
</tr>
</table>
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><table width="749" height="136" border="0" align="right" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td rowspan="6"> <img src="/images/2devochki-template_01.gif" width="45" height="136" alt=""></td>
<td rowspan="2"> <img src="/images/2devochki-template_02.gif" width="51" height="53" alt="Даша"></td>
<td rowspan="2"> <img src="/images/2devochki-template_03.gif" width="49" height="53" alt="Оля"></td>
<td> <img src="/images/2devochki-template_04.gif" width="196" height="26" alt=""></td>
<td rowspan="6"> <img src="/images/2devochki-template_05.gif" width="12" height="136" alt=""></td>
<td colspan="2"> <img src="/images/2devochki-template_06.gif" width="395" height="26" alt=""></td>
<td> <img src="/images/spacer.gif" width="1" height="26" alt=""></td>
</tr>
<tr>
<td rowspan="2"> <a href="http://www.2devochki.ru"><img src="/images/2devochki-template_07.gif" alt="Две девочки - 40000 рефератов" width="196" height="42" border="0"></a></td>
<td rowspan="3" background="/images/2devochki-template_08.gif"> <div align="center">
<!-- CLX 343x60 -->
block
<!-- CLX 343x60 -->
</div></td>
<td rowspan="3"> <img src="/images/2devochki-template_09.gif" width="52" height="60" alt=""></td>
<td> <img src="/images/spacer.gif" width="1" height="27" alt=""></td>
</tr>
<tr>
<td rowspan="4"> <img src="/images/2devochki-template_10.gif" width="51" height="83" alt=""></td>
<td rowspan="4"> <img src="/images/2devochki-template_11.gif" width="49" height="83" alt=""></td>
<td> <img src="images/spacer.gif" width="1" height="15" alt=""></td>
</tr>
<tr>
<td rowspan="2"> <img src="/images/2devochki-template_12.gif" width="196" height="37" alt=""></td>
<td> <img src="/images/spacer.gif" width="1" height="18" alt=""></td>
</tr>
<tr>
<td rowspan="2"> <img src="/images/2devochki-template_13.gif" width="343" height="50" alt=""></td>
<td rowspan="2"> <img src="/images/2devochki-template_14.gif" width="52" height="50" alt=""></td>
<td> <img src="images/spacer.gif" width="1" height="19" alt=""></td>
</tr>
<tr>
<td> <img src="/images/2devochki-template_15.gif" width="196" height="31" alt=""></td>
<td> <img src="/images/spacer.gif" width="1" height="31" alt=""></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="6" background="/images/tbl-left-top.gif"></td>
<td height="6" background="/images/tbl-top.gif"></td>
<td width="6" background="/images/tbl-right-top.gif"></td>
</tr>
<tr>
<td width="6" background="/images/tbl-left.gif"></td>
<td bgcolor="ead292" align="center">
<!-- CLX 468x60 -->
<script>//<!--
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>
<!-- CLX 468x60 -->
</td>
<td width="6" background="/images/tbl-right.gif"></td>
</tr>
<tr>
<td width="6" height="6" background="/images/tbl-left-bottom.gif"></td>
<td height="6" background="/images/tbl-bottom.gif"></td>
<td width="6" height="6" background="/images/tbl-right-bottom.gif"></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="6" background="/images/tbl-left-top.gif"></td>
<td height="6" background="/images/tbl-top.gif"></td>
<td width="6" background="/images/tbl-right-top.gif"></td>
</tr>
<tr>
<td width="6" background="/images/tbl-left.gif"></td>
<td bgcolor="ead292">
добавить
параметр BACKGROUND, как это показано ниже:
<BODY BACKGROUND="Bkg.jpg">
Для команды <body><table width="780" border="0" bordercolor="#FFFFFF" align="center" cellpadding="5" cellspacing="0">
<tr>
<td bgcolor="ead292"><font face="Verdana, Arial, Helvetica, sans-serif" color="aa4332"> заголовок </font></td>
</tr>
</table>
<table width="780" height="2" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td></td>
</tr>
</table>
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><table width="749" height="136" border="0" align="right" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td rowspan="6"> <img src="/images/2devochki-template_01.gif" width="45" height="136" alt=""></td>
<td rowspan="2"> <img src="/images/2devochki-template_02.gif" width="51" height="53" alt="Даша"></td>
<td rowspan="2"> <img src="/images/2devochki-template_03.gif" width="49" height="53" alt="Оля"></td>
<td> <img src="/images/2devochki-template_04.gif" width="196" height="26" alt=""></td>
<td rowspan="6"> <img src="/images/2devochki-template_05.gif" width="12" height="136" alt=""></td>
<td colspan="2"> <img src="/images/2devochki-template_06.gif" width="395" height="26" alt=""></td>
<td> <img src="/images/spacer.gif" width="1" height="26" alt=""></td>
</tr>
<tr>
<td rowspan="2"> <a href="http://www.2devochki.ru"><img src="/images/2devochki-template_07.gif" alt="Две девочки - 40000 рефератов" width="196" height="42" border="0"></a></td>
<td rowspan="3" background="/images/2devochki-template_08.gif"> <div align="center">
<!-- CLX 343x60 -->
block
<!-- CLX 343x60 -->
</div></td>
<td rowspan="3"> <img src="/images/2devochki-template_09.gif" width="52" height="60" alt=""></td>
<td> <img src="/images/spacer.gif" width="1" height="27" alt=""></td>
</tr>
<tr>
<td rowspan="4"> <img src="/images/2devochki-template_10.gif" width="51" height="83" alt=""></td>
<td rowspan="4"> <img src="/images/2devochki-template_11.gif" width="49" height="83" alt=""></td>
<td> <img src="images/spacer.gif" width="1" height="15" alt=""></td>
</tr>
<tr>
<td rowspan="2"> <img src="/images/2devochki-template_12.gif" width="196" height="37" alt=""></td>
<td> <img src="/images/spacer.gif" width="1" height="18" alt=""></td>
</tr>
<tr>
<td rowspan="2"> <img src="/images/2devochki-template_13.gif" width="343" height="50" alt=""></td>
<td rowspan="2"> <img src="/images/2devochki-template_14.gif" width="52" height="50" alt=""></td>
<td> <img src="images/spacer.gif" width="1" height="19" alt=""></td>
</tr>
<tr>
<td> <img src="/images/2devochki-template_15.gif" width="196" height="31" alt=""></td>
<td> <img src="/images/spacer.gif" width="1" height="31" alt=""></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="6" background="/images/tbl-left-top.gif"></td>
<td height="6" background="/images/tbl-top.gif"></td>
<td width="6" background="/images/tbl-right-top.gif"></td>
</tr>
<tr>
<td width="6" background="/images/tbl-left.gif"></td>
<td bgcolor="ead292" align="center">
<!-- CLX 468x60 -->
<script>//<!--
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>
<!-- CLX 468x60 -->
</td>
<td width="6" background="/images/tbl-right.gif"></td>
</tr>
<tr>
<td width="6" height="6" background="/images/tbl-left-bottom.gif"></td>
<td height="6" background="/images/tbl-bottom.gif"></td>
<td width="6" height="6" background="/images/tbl-right-bottom.gif"></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="6" background="/images/tbl-left-top.gif"></td>
<td height="6" background="/images/tbl-top.gif"></td>
<td width="6" background="/images/tbl-right-top.gif"></td>
</tr>
<tr>
<td width="6" background="/images/tbl-left.gif"></td>
<td bgcolor="ead292">
можно указать и другие параметры, некоторые из них
приведены ниже:
| Параметр | Описание |
|BGCOLOR |Задаёт цвет фона страницы. |
|TEXT |Задаёт цвет основного текста. |
|LINK |Задаёт цвет текста ссылки на другую станицу. |
|VLINK |Задаёт цвет текста ссылки на страницу, которую вы уже |
| |посетили. |
|ALINK |Задаёт цвет текста активных ссылок. |
Возможность вставки гипертекстовых ссылок обеспечивают переход от
просмотра одной страницы WWW к просмотру другой страницы или другого места
той же самой страницы.
Ссылка создаётся с помощью пары команд <A> и </A>. Между этими
командами располагается текст ссылки, который отображается в окне просмотра
и выделяется подчёркиванием, а также изменением цвета. Пример
гипертекстовой ссылки приведён ниже:
<A HREF="http://www.altavista.com/html/Mouse.HTM">Альтавист</A>
Если подвести курсор мышки к слову "Альтавист", этот адрес появиться в
информационной строке внизу экрана.
Для того чтобы вставить в документ закладку, можно воспользоваться
парой команд <A>,</A>, указав в команде <A> параметр NAME - имя закладки:
<A NAME="#BOOKMARK">BM</A>
Документы HTML могут содержать также ссылки на такие ресурсы сети
Internet, как электронные почтовые адреса, серверы FTP, электронные
конференции и т.п.
В заключении.
Всё шире в сети Internet распространяется наиболее современная
технология виртуальной реальности.Используя специальный язык виртуальной
реальности VRML и специальные инструментальные средства, можно создавать,
например, виртуальные здания, состоящие из многих этажей и комнат.
Развитие сети Internet и технологии WWW в настоящее время находятся на
стадии взрыва, поэтому каждый месяц появляются всё новые средства
разработки приложений Internet вообще и страниц WWW в частности. Помимо
этого, постоянно развивается язык разметки страниц HTML, поэтому к
настоящему моменту нет никакого стандартного описания для этого языка.
Используемая литература:
1. А.В. Фролов, Г.В. Фролов "Глобальные компьютерные сети"; М."Диалог-
Мифи", 1996 г.
2. Журналы HARD'&'SOFT.