Создание документов HTML
Лицей №23
Реферат
по информатике на тему:
«Создание документов HTML»
Выполнил: Стародворский С.А.
11 «Б» класс
Калининград 1999 г.
Содержание
1. Подготовка к созданию Web документа.
1. Цель и место размещения документа Web
2. Язык гипертекстовой разметки.
1. Структура текста Web документа
2. Гипертекстовые ссылки
3. Редакторы Web документов
3. Создание документов в стандарте HTML
1. Заголовки
2. Форматирование, изменение стилей
3. Списки
1.1. Цель и место размещения документа Web
Глобальная Сеть не только соединила пользователей всего мира, но и
утвердилась в виде новых технологий на наших персональных компьютерах.
Действительно, пользователь, который приобрел и установил на своей машине
Microsoft Office 97, становится обладателем Internet-технологии в готовом
виде, независимо от того, подключен его компьютер к Сети или нет.
Иными словами, средства, предназначенные для работы с Сетью, стали
использоваться и в других целях, с нею не связанных, а среди программного
обеспечения, устанавливаемого на большинство персональных компьютеров,
приложения для Internet заняли свое почетное место.
В результате работа многих пользователей стала иметь большее отношение
к Сети, чем они того сами, может быть желали. Так, одним из способов
самовыражения стало размещение личных страничек в Internet. Многие
коммерческие фирмы стали использовать Сеть для рекламы и сбыта своей
продукции. Людям, занятым поиском работы, стал доступен и такой сервис:
составить резюме в формате Web-страницы и разместить эту информацию в Сети.
Существует огромный список серверов, дающих пространство для размещения
вашей станицы в глобальной сети, однако при виртуальном подписании договора
между двумя сторонами, оговаривается тот факт, что Вы не имеете права
использовать ваш сайт в рекламных целях, а также вставлять в него чужую
рекламу (условия и услуги на всех серверах разные). Наиболее популярными
являются Geocities, Chat.ru, Fortunecity и другие.
Важную роль Internet стал играть для научных, учебных и общественных
организаций. Подтверждение этому легко найти, выйдя на просторы
киберпространства.
1.2. Сценарий и структура Web-документа.
Для того, чтобы понять структуру и сценарий Web-документа, мы должны
рассмотреть несколько Web-страниц и выявить общие элементы.
Любой Web-документ состоит из тегов( , причем обычно начальные теги
пишутся большими буквами, а конечные - маленькими.
Итак, рассмотрим основные теги, входящие в каждый Web-документ. Прежде
всего это <HTML></html>
Отличительный признак HTML-документа. Одним из принципов языка является
многоуровневое вложение элементов. HTML является самым внешним, так как
между его стартовым и конечным тегами должна находиться вся Web-страница.
Также основным тегом является <HEAD></head>
Область заголовка Web-страницы. Иными словами, ее первая часть. Так же
как и HTML, 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">Создание документов HTML</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">
</td></tr></table>
Этот элемент заключает в себе гипертекст, который определяет собственно
Web-страницу. Эта та часть документа, которую разрабатывает автор страницы
и которая отображается броузером. Соответственно, конечный тег этого
элемента надо искать в конце HTML-файла. Внутри BODY можно использовать все
элементы, предназначенные для дизайна Web-страницы. Внутри стартового тега
элемента BODY можно расположить ряд атрибутов, обеспечивающих установки для
всей страницы целиком.
Без этих тегов невозможно создать ни одну Web-cтраницу. Более подробно
эти и другие теги мы рассмотрим в параграфе 2.1.
2.1. Структура текста Web-документа
Если сравнить исходные тексты различных Web-страниц, можно легко
увидеть сходство их структур. Это объясняется тем, что документы создаются
по определенным правилам. В основу синтаксиса языка HTML лег стандарт ISO
8879:1986 «Information processing. Text and office systems. Standard
Generalized Markup Language (SGML)». Правда, существует большое различие
между стандартом официальным и стандартом фактическим.
Ниже приведен шаблон типичного Web-документа. На его примере мы
рассмотрим общие принципы построения HTML-страниц.
Для того чтобы понять структуру Web-страницы, нам необходимо подробно
рассмотреть все элементы, входящие в приведенный листинг.
<COMMENT> Комментарий к документу </comment>
<HTML>
<HEAD>
<title>Структура Web-страницы</title>
<STYLE> H2 {font-family: Arbat;}
CODE {font-family: Arbat;} </style>
<META
name=’’Author’’
content=’’Irina’’>
<META
name=’’Keywords’’
content=’’WWW, HTML, document, element’’>
</head>
<BODY bgcolor=#FFFFFF>
<A name=’’top’’></a>
Переход в <A href=’’#bottom’’/index.html#bottom’’> конец </a> документа <P>
Переход к <A href=’’#S001’’/index.html#S001’’><B> ссылке 1 </b></a><P>
<P>
<HR>
<H1>Заголовок1<h1>
<H2>Заголовок2<h2>
<H3>Заголовок3<h3>
<H4>Заголовок4<h4>
<H5>Заголовок5<h5>
<H6>Заголовок6<h6>
<HR>
Здесь расположена <B>ссылка 1</b><A name=’’S001’’></a>
<HR>
<P>Здесь должен располагаться оригинальный текст Web-страницы
<HR>
<A name=’’bottom’’></a><P>
Переход в <A gref=’’top’’> начало </a> документа
<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>"Структура Web-страницы"</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>
<COMMENT></comment>
Текст комментария. В любом языке программирования есть конструкции,
позволяющие создавать произвольные ремарки. HTML в этом смысле - не
исключение. Текст, помещенный внутри COMMENT, игнорируется броузером[1].
COMMENT может располагаться в любом месте кода Web-страницы. Без конечного
тега[2], здесь по-видимому не обойтись: комментарий должен быть отделен от
основного текста.
Существует, правда, одно ограничение: внутри комментария не должны
располагаться другие элементы[3]. Так должно быть, разумеется, только в том
случае когда необходимо, чтобы все содержимое элемента COMMENT не
отображалось на экране монитора. Если в комментарии будет присутствовать
другой элемент, то его содержимое будет выведено на экран,
отформатированное соответствующим образом. С этой проблемой связана другая,
похожая: обычный текст не может содержать фрагменты, имеющие вид тегов. Для
того чтобы включать в текст подобные конструкции, существует элемент
PLAINTEXT, о котором речь пойдет ниже.
Существует и другой способ обозначения комментария. Он заключается в
использовании восклицательного знака и обрамлении текста комментария
двойным тире. Например:
<!--Строка комментария-->
<!--Комментарий- -Не комментарий- -Снова комментарий-->
Внутри подобной конструкции можно помещать и теги: они не будут
восприниматься броузером.
<HTML></html>
Отличительный признак HTML-документа. Одним из принципов языка является
многоуровневое вложение элементов. HTML является самым внешним, так как
между его стартовым и конечным тегами должна находиться вся Web-страница. В
принципе, этот элемент можно рассматривать как формальность. Он имеет
атрибуты[4] version, lang и dir, которыми в данном случае мало кто
пользуется и допускает вложение элементов HEAD, BODY и PLAINTEXT,
определяющих общую структуру Web-страницы. Естественно, что конечным тегом
</html> заканчиваются все гипертекстовые документы.
<HEAD></head>
Область заголовка Web-страницы. Иными словами, ее первая часть. Так же
как и HTML, HEAD служит только для формирования общей структуры документа.
Этот элемент может иметь атрибуты lang и dir и допускается вложение
элементов TITLE, ISINDEX, BASE, META, LINK, NEXTID.
<TITLE>" --><title>Структура Web-страницы</title>
Элемент для размещения заголовка Web-страницы. Строка текста,
расположенная внутри, отображается не в документе, а в заголовке окна
броузера. Эта особенность часто используется для организации поиска в
WWW[5]. Поэтому авторы, создающие Web-страницы, должны позаботиться о том,
чтобы строка внутри TITLE, не будучи слишком длинной, достаточно отображала
назначение документа.
<STYLE></style>
Описание стиля некоторых элементов Web-страницы. В выше приведенном
примере назначены шрифты для элементов Н2 и CODE. Естественно, что для
каждого элемента существует стилевое оформление по умолчанию, поэтому
употребление STYLE не обязательно.
<META>
Этот элемент содержит служебную информацию, которая не отображается при
просмотре Web-страницы. Внутри него нет текста в обычном понимании, поэтому
нет и конечного тега. Каждый элемент META содержит два основных атрибута,
первый из которых определяет тип данных, а второй - содержание. Далее
приведены несколько примеров meta-данных.
Дата, обозначающая «срок годности»документа:
name=’’Expires’’ content=’’Дата’’
Адрес электронной почты:
name=’’Reply-to’’ content=’’Имя@Адрес’’
Указание приложения, в котором был создан Web-документ:
name=’’Generator’’ content=’’Название HTML-редактора’’
Атрибут name используется приложением-клиентом для получения
дополнительной информации о Web-страницах и их упорядочения. Этот атрибут
часто заменяют атрибутом http-equiv. Он используется сервером для создания
дополнительных полей при выполнении запроса.
Кроме этого, элемент МЕТА может содержать URL. Шаблон соответствующего
атрибута таков:
URL=’’http://адрес’’
<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">Структура Web-страницы</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>"Структура Web-страницы"</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>
Этот элемент заключает в себе гипертекст, который определяет собственно
Web-страницу. Эта та часть документа, которую разрабатывает автор страницы
и которая отображается броузером. Соответственно, конечный тег этого
элемента надо искать в конце HTML-файла. Внутри BODY можно использовать все
элементы, предназначенные для дизайна Web-страницы. Внутри стартового тега
элемента BODY можно расположить ряд атрибутов, обеспечивающих установки для
всей страницы целиком. Рассмотрим их по порядку.
Один из самых полезных для дизайна - атрибут, определяющий фон
страницы. Его появление можно уподобить маленькой революции в WWW, так как
одинаковые серые Web-страницы благодаря ему расцвели яркими цветными
узорами:
background=’’Путь к файлу фона’’
Более простое оформление фона сводиться к заданию его цвета:
bgcolor=’’#RRGGBB’’
Цвет фона задается тремя двухразрядными шестнадцатеричными числами,
которые определяют интенсивность красного, зеленого и синего цветов
соответственно.
Оба вышеперечисленных атрибута не являются альтернативными и часто
используются совместно.
Поскольку фон страницы может изменяться, необходимо иметь возможность
подбирать соответствующий цвет текста. Для этого имеется следующий атрибут:
text=’’#RRGGBB’’
Для задания цвета гиперссылок[6] используется атрибут:
link=’’RRGGBB’’
Также можно задать цвет для использованных гиперссылок:
vlink=’’RRGGBB’’
Гипертекст, расположенный внутри элемента BODY, может иметь
произвольную структуру. Ее определяют в первую очередь назначение Web-
страницы и фантазия разработчика.
<A></a>
HTML-документ может быть очень большим, и в этом случае пользователю
должна быть предоставлена возможность быстро перемещаться к нужному разделу
страницы. Для этого можно использовать механизм гиперссылок. Необходимо
также в нужных местах текста расставить соответствующие метки. Подробно
гиперссылки мы обсудим в параграфе 2.2., а здесь мы рассмотрим только
шаблон для создания меток:
<A name=’’Метка’’></a>
В этом случае для перехода внутри документа можно использовать
следующую конструкцию:
<P>Переход к <A href=’’#Метка’’/index.html#Метка’’>метке</a></p>
Несколько подобных строк могут образовать своеобразное оглавление Web-
страницы, которое можно разместить в начале и в конце документа.
<BASE>
Элемент для установки базового адреса (URL) для ссылок. Это позволяет
опускать их начальную часть. Для использования элемента необходима
следующая конструкция:
<!--BASE href=’’http://компьютер/путь1’’-->
Фрагмент путь1 не является обязательным. При форматировании полного
адреса он будет отброшен.
В том случае, когда надо задать базовый адрес для локального диска
(например D:), должна быть использована такая конструкция:
<!--BASE href=’’file://D:\путь\’’-->
Тогда при указании относительной ссылки можно задать не только имя
файла, но и имена папок, в которых он находиться. Иными словами, путь к
файлам может быть разбит на две части: абсолютную и относительную. Это
полезно в том случае, когда для файлов указанных в документе, есть общий
начальный фрагмент пути.
В выражении абсолютной ссылки можно также опустить указание на схему
доступа (file://). В этом случае будут учитываться только левая часть
абсолютной ссылки до первого левого символа «\», то есть имя локального
диска.
Другие конструкции мы рассмотрим ниже.
2.2. Гипертекстовые ссылки
Одним из самых важных элементов языка, обеспечивающий создание
гиперссылок является:
<A></a>
Чаще всего используется такой шаблон:
Произвольный текст <A href=’’Адрес ссылки’’>текст для щелчка</a>
Или такой:
<A href=’’Адрес ссылки’’> <IMG src=../../_/D_/путь/’’Ссылка/default. на рисунок’’></a>
Первый шаблон применяется в том случае, когда гиперссылка встречается в
тексте. Атрибут href может указывать на ресурс Internet, файл на локальном
диске или метку внутри текущей страницы. Текст, расположенный внутри
элемента А, представляет собой видимую часть гиперссылки. Именно на нем
должен щелкнуть пользователь, чтобы осуществить переход. Броузер выделяет
этот фрагмент цветом, а после использования гиперссылки меняет цвет, чтобы
обеспечить подсказку.
Второй шаблон предназначен для тех случаев, когда видимая часть
гиперссылки представляет собой рисунок. Если для последнего определена
рамка, то она тоже меняет цвет при использовании. Если ссылка указывает на
рисунок, который находиться на локальном диске, она обязательно должна
начинаться со слова «file», то есть содержать указание на схему доступа:
file://Диск:\Путь к файлу
или
file:///Диск:/Путь к файлу
Подобно многим другим элементам языка, элемент А требует использование
атрибутов. Атрибут гиперссылки мы уже знаем, шаблон его таков:
href=’’URL’’
или
href=’’Протокол://Адрес ссылки’’
Например:
href=’’http://www.netscape.com’’
Кодовое слово, стоящее вначале URL[7], обозначает так называемую схему
доступа. Она определяет тип сервера, доступный при помощи данной ссылки.
Для пользователя это представляется как доступ к одной из «разновидностей»
Internet. В этом смысле можно сказать, что Internet - это как бы несколько
сетей в одной. У каждой из них существуют свои правила доступа,
достоинства, недостатки, свои приверженцы и противники. Но все ее клиенты
используют одни и те же каналы связи. Похожая ситуация наблюдается и в
обычных телефонных сетях. Их можно использовать для связи голосом, передачи
факсов, межкомпьютерной связи и т. д.
WWW, как самая современная система, должна обеспечивать совместимость с
более ранними, поэтому от старых протоколов не отказываются, а стараются
приспособить их к современным нуждам (например, ftp). Существуют следующие
схемы доступа:
file - доступ к файлу на локальном диске;
ftp - доступ к архивам файлов при помощи протокола передачи файлов
(file transfer protocol);
gopher - доступ к системе Gopher;
http - доступ к WWW;
mailto - отправка сообщений по электронной почте;
news - доступ к новостям USENET;
nntp - доступ к новостям USENET с использованием протокола NNTP;
telnet - подключение по протоколу telnet;
wais - подключение к системе WAIS.
Когда гиперссылка используется для указания адреса электронной почты,
ее выбор обеспечивает не переход к новому документу, а запуск диалога для
отправки сообщения указанному адресату. Обычно такую ссылку размещают в
конце страницы для обеспечения связи с Web-мастером или автором страницы.
Для своей личной страницы я бы могла составить такую ссылку:
<A href=’’mailto:alexs@pccenter.ru’’></a>
В том случае, когда используются переходы внутри текущей страницы, на
ней должны быть расставлены метки:
<A name=’’Метка’’></a>
3. Редакторы Web документов.
Как только мировой компьютерной общественности стало ясно, что истема
Gopher не является последним этапом развития Internet и отныне придется
работать с гипертекстом, многие фирмы начали разработку специализированных
редакторов, позволяющих создавать HTML-документы. Эти программы сразу же
завоевали популярность, несмотря на то что гипертекстовую структуру можно
получить и в самом обычном редакторе, работающем с текстом в MS-DOS.
Редактор гипертекста необходим, в первую очередь, для начинающих
пользователей, так как позволяет обойтись (конечно, только на первых порах)
поверхностными знаниями о структуре гипертекстового документа и синтаксисе
HTML. Поскольку элементы гипертекста создаются в режиме диалога,
пользователь может изучать язык параллельно с созданием Web-страницы.
Вдобавок редакторы обладают способностью проверять правильность написания
кода HTML[8]. Бывают случаи, когда программа выдает сообщение об ошибке, но
не может указать разработчику, в чем именно она заключается. Просматривать
страницу броузером не имеет смысла: скорее всего, он отобразит ее, как
будто никаких проблем не существует. Но автор Web-страницы сможет понять,
что с разметкой не все ладно и не станет использовать спорный фрагмент
кода.
В этом параграфе мы рассмотрим основные редакторы Web-документов.
2.3.1. HoTMetaL PRO 3.0.
Редактор гипертекста HoTMetaL был одним из первых программных продуктов
подобного рода. Основная цель редактора заключалась в том, чтобы красиво
прорисовывать на экране изображение тегов. Здесь сказались преимущества
графического интерфейса Windows перед интерфейсом командной строки MS-DOS.
В среде Windows гипертекст в своем естественном виде лучше читается и
редактируется. Одновременно фирмы-разработчики развивали в своих программах
возможность анализа синтаксиса HTML, что помогало пользователю избежать
некоторых ошибок, таких, например, как неправильное вложение документов.
В 1997 году фирма SoftQuard разработала редактор HoTMetaL PRO версии
3.0. в рабочей области создана заготовка Web-страницы. Теги отмечены особым
образом и хорошо заметны. На панелях редактора размещено большое количество
кнопок. Следовательно, разработчики продукта предполагают, что пользователь
должен активно их использовать во время создания страниц. Останавливаться
на подробном обзоре кнопок мы не будем, так как они не представляют особой
сложности для изучения.
Кратко рассмотрим создание гипертекстового документа путем сравнения.
Возьмем, к примеру, популярный редактор Word. Все, кто с ним работал,
прекрасно знают о форматировании текста при помощи стилей. Если вы захотите
понять, что представляет собой тот или иной стиль, вам надо будет раскрыть
окно с описанием стиля. Параметров много: и тех, которые вы используете, и
тех, которые вам безразличны. В самом документе подобная информация скрыта
от пользователя. Все, кто работал с этим редактором знают о его
«своеволии»: часто программа сама, не спрашивая разрешения, проводит ряд
операций по форматированию текста, и пользователь не всегда может отследить
эти «правки» и понять причины их возникновения.
Гипертекстовый документ создается совершенно по иному принципу. Здесь
тоже можно использовать понятие стиля: это совместное использование
элементов форматирования FONT, B, I, BQ и им подобным. Существенное же
отличие от обычного Word-документа состоит как раз в том, что пользователь
может увидеть все параметры оформления и область их действия прямо в HTML-
документе. Изменить их может только он сам, путем редактирования текста
документа. Дает ли это какое-нибудь преимущество? Думаю, что в некоторых
случаях работать с файлом в формате гипертекста намного удобнее и легче,
чем с таким же файлом в формате традиционного редактора для Windows.
Отдельно следует упомянуть использование кириллицы в HoTMetaL. Если
пользователь выбирает для ввода не английский язык, то редактор
автоматически преобразует введенные буквы в спецсимволы. Разумеется,
разработчики редактора не предусматривали возможность использования
кириллицы. Просто русские буквы занимают в кодовой таблице место
«экзотических» букв из разных языков. В языке может использоваться
латинский алфавит и некоторые его «расширения». При вводе русского текста
символы прорисовываются обычным образом, но исходный код записывается по
особому: буква А обозначается как À буква Б - как Á и т. д.
Для броузеров с установленными русскими шрифтами это не имеет значения:
кириллица в любом случае будет воспроизведена верно. Если вы используете
HoTMetaL в работе, но создаете документы с кириллицей, набирайте русский
текст в другой программе, например, в режиме просмотра источника в
броузере.
2. HotDog Professional 3
Редактор гипертекста HotDog создан фирмой Sausage Software. От других
его выгодно отличает обилие инструментов, подпрограмм и сервисных
возможностей. Такой инструмент можно рекомендовать тем пользователям,
которые много и серьезно работают со своими Web-страницами. Версия 3
редактора разработана в 1996 году и предназначена для работы в среде
Windows 95.
Окно редактора разделены на две области. Слева расположена панель так
называемого «менеджера ресурсов» (resource manager). Он выполняет в
редакторе те же функции, что и Проводник в Windows 95, то есть организует
наглядный доступ к папкам и файлам. Вкладка Pages позволяет увидеть
документы, открытые в редакторе. Вкладка Files обеспечивает просмотр папок
на дискете. Пользователь может применять технологию Drag and Drop, то есть
перетаскивать файлы при помощи мыши. Вкладка Faves служит для просмотра
избранных источников информации. Вкладка WWW обеспечивает просмотр
сайтов[9] и наглядное представление их структуры. Если менеджер ресурсов
занимает слишком много места на экране, его можно отключить при помощи меню
View.
В правой части окна редактора размещаются окна с HTML-документами.
Каждое из них содержит несколько вкладок. Вкладка HTML позволяет вывести
документ в режиме исходного кода. Вкладка Rover обеспечивает просмотр
документа при помощи встроенного броузера.
Основное окно редактора содержит несколько вкладок. Каждая из них
позволяет выполнять определенный тип операций редактирования. Смена вкладки
означает только смену набора инструментов; окно документа при этом остается
неизменным. Многие кнопки присутствуют на нескольких вкладках.
Кнопки форматирования напоминают используемые в текстовых редакторах. И
те и другие имеют похожие значки и выполняют одни и те же по смыслу
операции. Но в данном случае механизм форматирования другой. Он заключается
в создании соответствующего элемента HTML и помещении выделенного фрагмента
страницы внутри этого элемента. Форматировать можно не только текст, но и
рисунки, гиперссылки и другие конструкции гипертекста.
2.3.3 Dream Weaver 2.0
Этот редактор, пожалуй, единственный на данное время, работающий со
слоями, подобно тому, как это происходит в Photoshop 5.0. Однако, если
после создания страницы с применением слоёв, Вам придётся добавить другим
редактором что-то новое, создать которое в этом редакторе при помощи
встроенных кнопочек не возможно, может произойти сбой в html – коде,
вызванный внутренним воздействием программы – редактора (многие редакторы
пытаются сопоставить содержимое www-cтраницы c тем, что данный редактор
умеет делать, а потом выдаёт обработанный им код страницы, вследствие чего
происходит изменение html-кода). Dream Weaver 2.0 оснащён многими сложными
функциям таким образом, что только опытный и профессиональный дизайнер
страниц способен понять и использовать его в своих целях. Сам редактор не
из ряда бесплатных версий, а скажем из самых дорогих и привилегированных.
Его стоимость достигает 270$, но для русского человека это не проблема, так
как через 2 месяца сразу после выхода программы выходит в свет crack,
способный взломать программу и бесплатно использовать её (сайтов с
подобными взламывающими средствами очень много, но их местоположение в
Internet постоянно меняется из-за преследования фирм производителей этих
программ). Редактор позволяет также создавать движущиеся объекты в разных
направлениях и траекториях. Поддержка редактором функций Macromedia Flash
3.0 является достоинством этой программы, ведь именно Macromedia Flash 3.0
создала такую мощную во всех отношениях программу, которая позволяет делать
двигающееся меню на вашей странице. Такое меню наиболее эффективное, так
как на уровне существующих с использованием PERL 5.0, CGI, Java скриптов,
апплетов и др., это меню или что-то вроде него обладает высокой скоростью
загрузки в сети Internet, так как обладает маленьким объёмом и выглядит
наиболее профессиональным изделием. Компания, выпустившая такое «чудо» на
свет обладает рядом других проектов. Я же, как один из ряда
профессиональных дизайнеров страниц, использую именно эту программу.
3.0 Cоздание документов в стандарте HTML.
В параграфе 2.1. мы рассмотрели на примере как создаются элементы
страницы (титул, параграфы), ссылки на другие документы, адреса. Но этих
знаний недостаточно, чтобы создать документ среднего уровня.
В этом параграфе мы рассмотрим создание заголовков, форматирование и
изменение стиля документа, а также списки на примере приведенном в 2.1.
1. Заголовки
В примере для заголовка используются теги <H1></h1>.
Существует шесть уровней заголовков, которые обозначаются Н1...Н6.
Заголовок уровня 1 самый крупный, а уровень 6 обеспечивает самый маленький
заголовок. Представление об относительных размерах заголовков в них дает
рис.3.1. Для заголовков можно использовать атрибут, задающий выравнивание
влево, по центру или вправо:
align=’’left’’
align=’’center’’
align=’’right’’
Заголовок1
Заголовок 2
Заголовок 3
Заголовок 4
Заголовок 5
Заголовок 6
Рис.3.1. Заголовки, создаваемые при помощи элементов Н1...Н2
Элемент FONT может с успехом заменять элементы заголовка Н1...Н6. Для
последних, например, не предусмотрена возможность указания цвета букв.
Чтобы заголовок, созданный на основе элемента FONT, хорошо смотрелся, этот
элемент необходимо комбинировать с другими: CENTER, B, I, P и т. д. (см.
3.2.)
3.2.Форматирование текста и изменение стилей.
Текст - единственный объект Web-страницы, который не требует
специального определения. Иными словами, произвольные символы
интерпретируются по умолчанию как текстовые данные. Но для форматирования
текста существует большое количество элементов.
<P></p>
Элемент абзаца (paragraph) - один из самых полезных. Он позволяет
использовать только начальный тег, так как следующий элемент Р обозначает
конец предыдущего и начало следующего абзаца. Конечный тег удобно
использовать в тех случаях, когда по смыслу необходимо обозначить конец
абзаца. Вместе с элементом Р можно использовать атрибут выравнивания align
(см.3.1.)
<BR>
Элемент, обеспечивающий принудительный переход на новую строку. Он
имеет только стартовый тег. В месте его размещения строка заканчивается, а
оставшийся текст печатается с новой строки.
<NOBR></nobr>
Этот элемент по своему действию является прямой противоположностью
предыдущему. Текст, заключенный между его тегами, будет выведен в одну
строку. Длинная строка не уместится на экране, и для ее просмотра придется
использовать горизонтальную полосу прокрутки.
<PRE>