Сайт о правильных сайтах







Введение

HTML — язык разметки гипертекста. Гипертекст — информационная структура, позволяющая устанавливать смысловые связи между элементами текста на экране компьютера таким образом, чтобы можно было легко осуществлять переходы от одного элемента к другому. На практике в гипертексте некоторые слова выделяют путем подчеркивания или окрашивания в другой цвет (гиперссылки). Выделение слова говорит о наличии связи этого слова с некоторым документом, в котором тема, связанная с выделенным словом рассматривается более подробно.

Такие страницы как правило имеют расширение htm или html. Отдельный документ, выполненный в формате HTML, называется:

HTML-документом;

Web-документом;

Web-страницей.

Гиперссылка — фрагмент текста, который является указателем на другой файл или объект. Гиперссылки необходимы для того, чтобы обеспечить возможность перехода от одного документа к другому.

Группа Web-страниц, принадлежащих одному автору или одному издателю и взаимосвязанных общими гиперссылками, образует структуру, которая называется Web-узлом или Web-сайтом. Каждая HTML-страница имеет свой уникальный URL-адрес в Интернете.

Структура HTML-доукмента

Элемент — конструкция языка HTML. Это контейнер, содержащий данные и позволяющий отформатировать их определенным образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста возможность вложения элементов.

Тег — начальный или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой. Например: элемент, содержащий некоторый текст, ограничен начальным тегом (маркером) <p> и конечным тегом (маркером) </p>. Т.е. текст помещен между тегами как в контейнер. Здесь же можно увидеть, как осуществляется возможность вложения элементов. Тег <font> вложен внутрь тега <p>, поэтому конечный тег </font> стоит перед </p>. В данном примере тег <p> указывает на то, что текст является отдельным абзацем, а тег <font> задает, например, формат шрифта.

<p> <font color="green">Этот текст будет расположен в отдельном абзаце и выполнен зеленым цветом шрифта.</font> </p>

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

Атрибут — параметр или свойство элемента. Это, по сути, переменная, которая имеет стандартное имя и которой может присваиваться определенный набор значений: стандартный или произвольный. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами.

<p align="center"> Этот текст будет выровнен по центру экрана </p>. В данном примере атрибут align (выравнивание) расположен внутри тега <p>, следовательно он задает выравнивание этого абзаца. Значение атрибута равно "center", т.е. выравнивание абзаца будет по центру экрана.

Ниже приведена структура типичного Web-документа.


<HTML> Этот тег указывает на начало HTML-документа
<HEAD> Этот тег указывает на начало области заголовка Web-страницы. Служит для формирования общей структуры документа.
<TITLE>Название Web-страницы</title> Элемент для размещения заголовка Web-страницы. Строка отображается в заголовке окна браузера.
<META http-equiv="Content-Type" content="text/html; charset=windows-1251"> Этот тег несет служебную информацию и не отображается на экране браузера. В данном случае идет речь о кодировке Web-страницы. Вам достаточно лишь каждый раз вставлять этот тег в таком виде на свою страничку. Тогда ваша страничка будет использовать кодировку windows-1251, наиболее распространенную на сегодняшний день.
<META name="Author" content="Ivanov Ivan"> Имя автора Web-страницы.
<META name="Keywords" content="WWW, HTML, docoment, страничка, структура"> Набор ключевых слов для поиска. Раньше этими словами пользовались поисковые машины, для отбора сайтов по тематике запроса. Сегодня эти слова поисковыми машинами практически не используются, однако полезно вставить этот тег на свою страничку и указать в нем ключевые слова, отражающие содержание вашего сайта.
</head> Конец области заголовка Web-страницы.
<BODY bgcolor="blue"> Начало собственно содержимого Web-страницы. Тег <BODY> включает в себя атрибут bgcolor, который задает цвет вашей страницы. В данном случае голубой. Если не использовать этот атрибут, то по умолчанию цвет страницы будет белым.
<H2> Здесь расположен заголовок вашей странички </h2> <H2> </h2> Элемент заголовка
<P> Здесь расположен текст первого абзаца вашей странички</p> <P> </p> Элемент абзаца.
<P> Здесь расположен текст второго абзаца вашей странички</p>
</body> Конец содержимого Web-страницы.
</html> Конец HTML-документа.

Теги можно записывать как строчными, так и заглавными латинскими символами.

Правила синтаксиса

1. Взаимное расположение элементов HTML, HEAD, TITLE, BODY должно быть стандартным на любой странице.


<HTML>

<HEAD>

<TITLE>.....</title>

</head>

<BODY>

..................

</body>

</html>


2. Необходимо всегда использовать конечные теги (не забывать </p>, </h1>, </table> и др.).

3. Не нарушать правила вложения тегов. Правильно: <H1>Заголовок крупный <H2> Заголовок поменьше </h2> </h1>. Не правильно: <H1>Заголовок крупный <H2> Заголовок поменьше </h1> </h2>

4. Любая полезная информация должна находится между начальным и конечным тегами, указывающими ее формат.

5. Все атрибуты располагаются в начальном теге.

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

Элемент

Тег

Атрибуты

Пример

Абзац <P> </p>

<P align="left"> </p> — выравнивание текста по левому краю экрана.

<P align="center> </p> — выравнивание текста по центру экрана.

<P align="right"> </p> — выравнивание текста по правому краю экрана.

<P align="justify"> </p> — выравнивание текста по ширине страницы.

<P align="center"> Текст этого абзаца выровнен по центру экрана </p>

Посмотреть

Принудительный переход на новую строку <br>  

Уронили мишку на пол. <BR> Оторвали мишке лапу. <BR> Все равно его не брошу, <BR> Потому что он хороший.

Посмотреть

 

 

Выделение текста полужирным шрифтом <B> </b>  

Этот текст имеет обычное начертание, <B> а этот выделен полужирным шрифтом </b>.

Посмотреть

Выделение текста курсивом <I> </i>  

Этот текст имеет обычное начертание, <I> а этот выделен курсивом</i>.

Посмотреть

Определение типа, размера и цвета шрифта. <FONT> </font>

<FONT size=3> </font> - абсолютный размер шрифта (возможные значения от 1 до 7).

<FONT color="blue"> </font> — цвет шрифта

<FONT face="arial"> </font> — определение названия шрифта.

<FONT size=3 color="blue" face="arial"> </font> — все атрибуты могут быть использованы совместно внутри данного тега.

<FONT size=1> Это шрифт 1 </font>

<FONT size=2> Это шрифт 2 </font>

<FONT size=3> Это шрифт 3 </font>

<FONT size=4> Это шрифт 4 </font>

<FONT size=5> Это шрифт 5 </font>

<FONT size=6> Это шрифт 6 </font>

<FONT size=7> Это шрифт 7 </font>

<FONT color="blue"> Это шрифт синего цвета </font>

<FONT face="arial" size=3 color="blue" > Это шрифт arial размером 3, цвет синий. </font>

Посмотреть

Цитата <BLOCKQUOTE> </blockquote>  

Это обычный текст абзаца. <BLOCKQUOTE> А это текст цитаты. </blockquote> А это снова обычный текст.

Посмотреть

Маркированный список

<UL>

 <LI>

 <LI>

 <LI>

</ul>

Имеет атрибут type, задающий вид маркера в списке: “disc”, “square”, “circle” (по умолчанию “disc”). А каждый элемент списка определяется тегом <LI>

<UL>

 <LI> Первый пункт списка;

 <LI> Второй пункт списка;

 <LI> Третий пункт списка.

</ul>

Посмотреть

Нумерованный список

<OL>

 <LI>

 <LI>

 <LI>

</ol>

Имеет атрибут type, задающий тип нумерации: арабские цифры, римские цифры, буквы (по умолчанию арабские цифры). Каждый элемент списка определяется тегом <LI>

<OL>

 <LI> Первый пункт списка;

 <LI> Второй пункт списка;

 <LI> Третий пункт списка.

</ol>

Посмотреть

Управление цветом

Кодирование цвета используется для раскрашивания шрифтов, горизонтальных линий, фона и других элементов страницы. Цвета обозначаются английскими названиями или числовыми шестнадцатеричными кодами.

Стандартные цвета

Аквамарин  
aqua
#00FFFF
Белый  
white
#FFFFFF
Желтый  
yellow
#FFFF00
Зеленый  
green
#008000
Золотистый  
gold
#FFD700
Индиго  
indigo
#4B0080
Каштановый  
maroon
#800000
Красный  
red
#FF0000
Оливковый  
oliv
#808000
Пурпурный  
purple
#800080
Светло-зеленый  
lime
#00FF00
Серебристый  
silver
#C0C0C0
Серый  
gray
#808080
Сизый  
teal
#008080
Синий  
blue
#0000FF
Ультрамарин  
navy
#000080
Фиолетовый  
violet
#EE80EE
Фуксиновый  
fuchsia
#FF00FF
Черный  
black
#000000

Градации красного

Код Цвет Код Цвет
#010000   #800000  
#100000   #900000  
#200000   #A00000  
#300000   #B00000  
#400000   #C00000  
#500000   #D00000  
#600000   #E00000  
#700000   #FF0000  

Градации зеленого

Код Цвет Код Цвет
#000100   #008000  
#001000   #009000  
#002000   #00A000  
#003000   #00B000  
#004000   #00C000  
#005000   #00D000  
#006000   #00E000  
#007000   #00FF00  

Градации синего

Код Цвет Код Цвет
#000001   #000080  
#000010   #000090  
#000020   #0000A0  
#000030   #0000B0  
#000040   #0000C0  
#000050   #0000D0  
#000060   #0000E0  
#000070   #0000FF  

Градации оранжевого

Код Цвет
#FFB000 1
#FFA800 2
#FFA000 3
#FF9800 4
#FF9000 5
#FF8800 6
#FF8000 7
#FF7800 8
#FF7000 9
#FF6800 10
#FF6000 11
#FF5800 12

Компьютерная радуга:

К
О
Ж
З
Г
С
Ф

Использование цвета при офoрмлении страницы

Цвет шрифта можно задать с помощью атрибута color в теге <FONT>, например:

<FONT color="FF5800"> Это цветной текст 1 </font>   

<FONT color="blue"> Это цветной текст 2 </font>


Посмотреть


Чтобы задать цвет фона страницы используется атрибут color внутри тега <BODY>, например:

<BODY color=" red">


Посмотреть


Списки

Тэги списков

Существует три основных вида списков в HTML-документе:

Вы можете создавать вложенные списки, используя различные тэги списков или повторяя одни внутри других. Для этого просто необходимо разместить одну пару тэгов (стартовый и завершающий) внутри другой. Будут ли элементы вложенного списка иметь те же маркеры, обозначающие элемент списка — зависит от браузера. Более подробно смотри в разделе "Вложенные списки".

Пронумерованные списки

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

Пронумерованный список начинается стартовым тэгом <OL> и завершается тэгом </OL>. Каждый элемент списка начинается с тэга <LI> и заканчивается тегом </LI>. Например:

<OL>

 <LI>Программирование

 <LI>Алгоритмизация

 <LI>Проектирование

</OL>


Посмотреть


Тэг <OL> может иметь параметры:

<OL TYPE=A|a|I|i|1 START=n> где: TYPE - вид счетчика:


START=n - число, с которого начинается отсчет. Например:

<OL TYPE=I START=15>

 <LI> Программирование

 <LI> Алгоритмизация

 <LI> Проектирование

</OL>


Посмотреть


Непронумерованные списки.

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

Cписок начинается стартовым тэгом <UL> и завершается тэгом </UL>. Каждый элемент списка начинается с тэга <LI>. Например:

<UL>

 <LI>Программирование

 <LI>Алгоритмизация

 <LI>Проектирование

</UL>


Посмотреть


Тэг <UL> может иметь параметр: TYPE=disc|circle|square>. Тип тэга <UL> определяет внешний вид маркера — по умолчанию (disc), круглый (circle) или квадратный (square). Например:

<UL TYPE=square>

 <LI>Программирование

 <LI>Алгоритмизация

 <LI>Проектирование

</UL>


Посмотреть


Вложенные списки

Дадим пример вложенных списков:

<HTML>

 <HEAD>

  <TITLE> Список сотрудников </TITLE>

 </HEAD>

 <BODY>

   <H2> Список сотрудников нашей фирмы </H2>

   <H3> Составлено : 30 июля 2006 года </H3>

<p>Данный список содержит фамилии, имена и отчества всех сотрудников нашей компании. <P>

<p>Список может быть использован только в служебных целях. <P>

  <OL>

   <LI> Дирекция

    <UL>

     <LI> Иванов И.И.

     <LI> Петров К.В.

    </UL>

   </LI>

   <LI> Отдел маркетинга

    <UL>

     <LI> Варшавская Е.Л.

     <LI> Самсонов Д.М.

    </UL>

   </LI>

  </OL>

 </BODY>

</HTML>


Посмотреть


Элемент списка <LI>

Тэг <UL> может иметь параметры: TYPE=disc|circle|squade> или <OL TYPE=A|a|I|i|1 VALUE=n>, в зависимости от того, в списке какого вида находится данный элемент.

Таким образом атрибут TYPE определяет вид маркера (см. <UL>) или счетчика (см.OL), а VALUE=n — значение для элемента пронумерованного списка (его номер). Все дальнейшие номера элементов списка будут отсчитываться от этого номера, а каждый элемент списка задаётся тегом <LI>. Например:

<OL TYPE=I START=15>

 <LI> Программирование

 <LI TYPE=i VALUE=25> Алгоритмизация

 <LI> Проектирование

</OL>


  1. Программирование
  2. Алгоритмизация
  3. Проектирование

Список определений

Список определений начинается с тэга <DL> и завершается тэгом </DL>. Данный список служит для создание списков типа "термин"-"описание". Каждый термин начинается тэгом <DT> , а описание — тэгом <DD>. Например:

<DL>

 <DT> <B> Отдел маркетинга </B>

  <DD> Данный отдел занимается продвижением продуктов и услуг

 <DT> <B> Финансовый отдел </B>

  <DD> Данный отдел занимается всеми финансовыми операциями

 <DT> <B> Отдел кадров </B>

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

</DL>


Посмотреть


Рисунки на WEB-страничке

<IMG> — элемент для создания ссылки на графический файл (image). Он не содержит конечного тега — вся необходимая информация задается при помощи атрибутов. Этот элемент является универсальным: с его помощью можно использовать изображения в гиперссылках, вставлять картинки в таблицы, просто размещать рисунки на Web-странице, решать задачи дизайна и т.д.

Необходимым атрибутом является src — указатель на файл графики:

src="Ссылка на файл". Например: <IMG src="cat5-web.jpg> — обычный рисунок, <IMG src="1c5.gif"> — анимированный рисунок.


Посмотреть


Очень полезным и обязательным атрибутом является атрибут alt. Он позволяет выводить текст в тех местах, где должны располагаться рисунки. Страница может загружаться достаточно долго, и пока графические файлы на подходе, пользователь должен видеть, какие изображения он сможет получить.

Например: <IMG src="cat5-web.jpg alt="Фотография маленького котенка" >. <IMG src="1c5.gif" alt="Большая черная кошка, которая гуляет сама по себе">


Посмотреть


Высоту и ширину области, в которой демонстрируется рисунок, задают при помощь атрибутов height — высота и width — ширина.

Например: <IMG src="bos2.gif" width="76" height="121">

<img src="bos2.gif" width="176">. Обратите внимание, что во втором случае изменен размер рисунка (мы изменили ширину, высота будет изменена автоматически). При этом происходит потеря качества изображения, поэтому желательно задавать эти атрибуты в соответствии с реальными размерами рисунка.


Посмотреть


Атрибут border задает размер рамки вокруг объекта, например, border="4" ширина рамки задается в пикселях и в нашем примере равна 4.

<IMG src="cat5-web.jpg" alt="Фото котёнка в рамке" width="176" style="border: 4px solid #9A2EEB;">. Размер рамки и её цвет зададим, например, с помощью стилей.


Посмотреть


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

<IMG src="bos2.gif" width="76" height="121" alt="Портрет маленьгого джентельмена">

Если вы хотите использовать рисунок в качестве обоев странички, то в теге <BODY> используем атрибут background с указанием адреса рисунка обоев.

Например: <BODY background="wood.jpg">


Посмотреть


Гиперссылки

<A> </a> — один из самых важных элементов языка, обеспечивающий создание гиперссылок. Чаще всего используется такой шаблон:

Произвольный текст <A href="адрес ссылки">Текст для щелчка </a>

Например, так выглядит гиперссылка в тексте: Если вы хотите вернуться к материалам урока "Гиперссылки", то вам <a href="index.html#zakl2">сюда</a>, при этом надо предварительно поставить имя закладки перед тем местом в документе, на которое происходит переход. Закладка в документе задаётся в следующем виде: <a name="имя закладки"></a>. В наше случае это имя zakl2.


Посмотреть


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

<A href="Адрес ссылки"> <IMG src="Ссылка на рисунок"> </a>

Например: Чтобы вернуться к уроку "Гиперссылки" нажмите на кнопку <A href="index.html#zakl2"><IMG src="knopka.gif" width="30" height="20"></a>


Посмотреть


Внутри тега <BODY> используются атрибуты link — задает цвет ссылок на всей Web-странице, vlink — задает цвет посещенных ссылок, alink — задает цвет активных ссылок (цвет появляется при нажатии мыши).

Пример: <BODY link="0000FF" vlink="CC0066" alink="FF0000">

По умолчанию используется ссылка на файлы текущей папки (той, где расположен файл Web-страницы). В этом случае просто указывается имя файла, например: page2.htm, photo35.gif и т.д.

Часто используются относительные ссылки на папки: это позволяет легко менять местопложение комплекса страниц на диске. Если в текущей папке есть другая, в которой размещены необходимые файлы, ссылка строиться по такому шаблону:

href="./Папка/файл.тип". Здесь на структуру вложенных папок указывает точка перед наклонной чертой. Если необходимо указать папку, которая находится на том же уровне вложенности, что и текущая, добавляют еще одну точку: href="../Папка/файл.тип".

Если ссылка указывает на какой-либо Web-ресурс, то она выглядит следующим образом, например: href="http://www.netscape.com".

Когда гиперссылка используется для указания адреса электронной почты, ее выбор обеспечивает не переход к новому документу, а запуск почтовой программы на компьютере для отправки сообщения указанному адресату. Обычно такую ссылку размещают в конце страницы для обеспечения связи с Web-мастером или автором страницы, например:

<A href="mailto:goncharov@online.ru>Алексей Гончаров</a>

Таблицы

Таблицы являются очень удобным средством форматирования данных на Web-станице. Они позволяют решать чисто дизайнерские задачи: выравнивать части страницы друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением и т.д.

При создании таблиц используется принцип вложения: внутри основного элемента таблицы <TABLE> создается ряд элементов, определяющих строки <TR>, а внутри этих элементов размещаются элеметы для описания каждой ячейки в с строке <TD>.

<TABLE> </table> — внешний элемент таблицы.

<TR> </tr> — элемент, задающий строку таблицы. Конечный тег можно не использовать, т.к. строка заканчивается там, где начинается следующая строка.

<TD> </td> — элемент, задающий ячеку таблицы. Конечный тег также можно не использовать.

Для примера опишем таблицу, которая будет состоять из двух строк и двух столбцов:


<TABLE> Начало таблицы
<TR> Начало первой строки
<TD> Первая ячейка первой строки</td> Первая ячейка первой строки
<TD> Вторая ячейка первой строки</td> Вторая ячейка первой строки
</tr> Конец первой строки
<TR> Начало второй строки
<TD>Первая ячейка второй строки</td> Первая ячейка второй строки
<TD>Вторая ячейка второй строки</td> Вторая ячейка второй строки
</tr> Конец второй строки
</table> Конец таблицы

Ширину таблицы можно задавать точно в пикселах или в процентном отношении к ширине страницы в окне браузера.

Например, если нам нужно создать таблицу определенного размера, то мы укажем:

<TABLE width="500">

 <TR>

  <TD> Ширина этой таблицы 500 пикселей и она состоит из одной строки и одного столбца.</td>

 </tr>

</table>


Посмотреть


Если мы хотим получить таблицу на всю ширину экрана, не заботясь при этом, какое разрешение монитора (800х600, 1024 х 768, 1280 х 1024) у того, кто будет просматривать нашу Web-страницу, то мы зададим ширину страницы как 100%.

<TABLE width="100%">

 <TR>

  <TD> Ширина этой таблицы 100%.</td>

  <TD> и она состоит из одной строки и двух столбцов </td>

 </tr>

</table>


Посмотреть


Для всей таблицы может быть задан цвет фона: bgcolor="Цвет" или bgcolor="#RRGGBB", например:

 

<TABLE width="100%" bgcolor="#00CC99">

 <TR>

  <TD> Ширина этой таблицы 50%.</td>

 </tr>

 <TR>

  <TD> и она состоит из двух строк и одного столбца </td>

 </tr>

</table>


Посмотреть


Можно задавать отдельно цвет ячеек таблицы.

<table width="600" border="1" cellspacing="0" cellpadding="5" align="center">

 <tr>

  <td bgcolor="#00FFFF"></td>

  <td bgcolor="#CCFF00"></td>

  <td bgcolor="#FF6633"></td>

 </tr>

 <tr>

  <td bgcolor="#0000FF"></td>

  <td bgcolor="#33FF66"></td>

  <td bgcolor="#FF00FF"></td>

 </tr>

 <tr>

  <td bgcolor="#CCCCCC"></td>

  <td bgcolor="#9933FF"></td>

  <td bgcolor="#FFFFCC"></td>

 </tr>

</table>


Посмотреть


Шириной боковой грани управляет атрибут border. Можно задать ширину боковой грани таблицы в пикселах.


<TABLE width="100%" bgcolor="#00CC99" border="3" >

 <TR>

  <TD> </td>

  <TD> Ширина этой таблицы 300 пикселей</td>

  <TD> </td>

 </tr>

 <TR>

  <TD> и она состоит из двух строк и трех столбцов</td>

  <TD> </td>

  <TD></td>

 </tr>

</table>


Посмотреть


Можно сделать грани таблицы невидимыми, для этого ширину бордюра таблицы нужно задать равной 0:

 

<TABLE width="100%" bgcolor="#00CC99" border="0" >

 <TR>

  <TD> </td>

  <TD> Ширина этой таблицы 300 пикселов</td>

  <TD> </td>

 </tr>

 <TR>

  <TD> и она состоит из двух строк и трех столбцов</td>

  <TD> </td>

  <TD></td>

 </tr>

</table>


Посмотреть



Существует набор атрибутов, предназначенных для выравнивания данных в ячейках таблиц. Атрибут align позволяет выравнивать данные в ячейках по горизонтали. Он принимает следующие значения:

left — выравнивание влево;

right — выравнивание вправо;

center — центрирование.


Атрибут valign позволяет выравнивать текст по вертикали. Значения могут быть такие:

top — выравнивание по верхнему краю ячейки

center — выравнивание по центру

baseline — выравнивание по первой строке.


<table width="100%" border="1" cellspacing="0" cellpadding="5" align="center">

 <tr> <td width="257">Выравнивание по горизонтали</td>

  <td width="233" align="center"> По центру </td>

  <td width="217" align="left">По левому краю </td>

  <td width="246" align="right"> По правому краю </td>

 </tr>

 <tr>

  <td width="257" height="112">Выравнивание по вертикали</td>

  <td width="233" height="112" valign="top">По верхнему краю</td>

  <td width="217" height="112" valign="middle">По центру</td>

  <td width="246" height="112" valign="baseline">По нижнему краю</td>

 </tr>

</table>

Посмотреть

Разметка Web-страницы с использованием таблицы

Разметку Web-странцы удобно производить с использованием таблицы. Возможны различные варианты разметки. Рассмотрим некоторые из них.

1 вариант

Разметка страницы производится с использованием таблицы шириной на весь экран, независимо от того, каково разрешение экрана (width=100%). В данном случае удобно создать таблицу, состоящую из двух строк и двух столбцов. Верхняя строка будет отведена под заголовок странички, левый столбец будет отведен под меню Web-сайта.


Посмотреть


2 вариант

Разметка страницы производится с использованием таблицы шириной 760 пикселей, выравненной по центру экрана. В данном случае удобно создать таблицу, состоящую из трех строк и одного столбца. Верхняя строка будет отведена под заголовок странички, вторая строка будет отведена под меню Web-сайта, а третья строка отведена непосредственно под содержание сайта.


Посмотреть


Если необходимо разместить внутри текста странички какие-либо иллюстрации, фотографии и пр., то в этом случае также могут использоваться таблицы. В приведенном ниже примере во вторую ячейку второй строки вставлена таблица, состоящая из из двух строк и трех столбцов. В первую и в третью ячейки первой строки вставлены рисунки, а во вторую ячейку первой строки — название страницы. Во все ячейки второй строки введен текст странички.


Посмотреть

Фреймы

Используя фрэймы, позволяющие разбивать Web-страницы на множественные скроллируемые подокна, Вы можете значительно улучшить внешний вид и функциональность информационных систем и Web-приложений. Каждое подокно, или фрэйм, может иметь следующие свойства:


Данные свойства фрэймов позволяют создавать продвинутые интерфейсные решения, такие как:

Синтаксис фрэймов

Формат документа, использующего фрэймы, внешне очень напоминает формат обычного документа, только вместо тэга BODY используется контейнер FRAMESET, содержащий описание внутренних HTML-документов, т. е. собственно информацию, размещаемую во фрэймах.


<HTML>

<HEAD>...</HEAD>

<FRAMESET>...</FRAMESET>

</HTML>


Однако, фрэйм-документ является специфичным видом HTML-документа, поскольку не содержит элемента BODY и какой-либо информационной нагрузки соответственно. Он описывает только фрэймы, которые будут содержать информацию (кроме случая двойного документа, который мы рассмотрим позже).


Представим общий синтаксис фрэймов:


<FRAMESET COLS="value" | ROWS="value">

<FRAME SRC="url1">
<FRAME ...>
...

</FRAMESET>


Общий контэйнер FRAMESET описывает все фрэймы, на которые делится экран. Вы можете разделить экран на несколько вертикальных или несколько горизонтальных фрэймов. Тэг FRAME описывает каждый фрэйм в отдельности. Рассмотрим более детально каждый компонент.


FRAMESET


<FRAMESET [COLS="value" | ROWS="value"]>

Тэг <FRAMESET> имеет завершающий тэг </FRAMESET>. Все, что может находиться между этими двумя тэгами, это тэг <FRAME>, вложенные тэги <FRAMESET> и </FRAMESET>, а также контейнер из тэгов <NOFRAME> и </NOFRAME>, который позволяет строить двойные документы для броузеров, поддерживающих фрэймы и не поддерживающих фрэймы.

Данный тэг имеет два взаимоисключающих параметра: ROWS и COLS.


ROWS="список-определений-горизонтальных-подокон". Данный атрибут содержит описания некоторого количества подокон, разделенных запятыми. Каждое описание представляет собой числовое значение размера подокна в пикселах, процентах от всего размера окна или связанное масштабное значение. Количество подокон определяется количеством значений в списке. Общая сумма высот подокон должна составлять высоту всего окна (в любых измеряемых величинах). Отсутствие атрибута ROWS определяет один фрэйм, величиной во все окно броузера.

Синтаксис используемых видов описания величин подокон:


value — простое числовое значение определяет фиксированную высоту подокна в пикселах. Это далеко не самый лучший способ описания высоты подокна, поскольку различные браузеры имеют различный размер рабочего поля, не говоря уже о различных экранных разрешениях у пользователя. Если Вы, все же, используете данный способ описания размера, то настоятельно рекомендуется сочетать его с каким-либо другим, чтобы в результате Вы точно получили 100%-ное заполнение окна броузера вашего пользователя.

value% — значение величины подокна в процентах от 1 до 100. Если общая сумма процентов описываемых подокон превышает 100, то размеры всех фрэймов пропорционально уменьшаются до суммы 100%. Если, соответственно, сумма меньше 100, то размеры пропорционально учеличиваются.

value* — вообще говоря, значение value в данном описании является необязательным. Символ "*" указывает на то, что все оставшееся место будет принадлежать данному фрэйму. Если указывается два или более фрэйма с описанием "*" (например "*,*"), то оставшееся пространство делится поровну между этими фрэймами. Если перед звездочкой стоит цифра, то она указывает пропорцию для данного фрэйма (во сколько раз одно будет больше аналогично описанного чистой звездочкой). Например, описание "3*,*,*", говорит, что будет создано три фрэйма с размерами 3/5 свободного пространства для первого фрэйма и по 1/5 для двух других.


COLS="список-определений-горизонтальных-подокон". То же самое, что и ROWS, но делит окно по вертикали, а не по горизонтали. Внимание! Совместное использование данных параметров может привести к непредствазуемым результатам. Например, строка: <FRAMESET ROWS="50%,50%" COLS "50%,50%"> может привести к ошибочной ситуации.


Примеры:


<FRAMESET COLS="50,*,50"> — описывает три фрэйма, два по 50 точек справа и слева, и один внутри этих полосок.

<FRAMESET ROWS="20%,3*,*"> — описывает три фрэйма, первый из которых занимает 20% площади сверху экрана, второй 3/4 оставшегося от первого фрэйма места (т.е. 60% всей площади окна), а последний 1/4 (т.е. 20% всей площади окна).

<FRAMESET ROWS="*,60%,*"> — аналогично предыдущему примеру.

Тэги <FRAMESET> могут быть вложенными, т.е. например:

<FRAMESET ROWS="50%,50%">

<FRAMESET COLS="*,*"

</FRAMESET>

</FRAMESET>

Результат данного примера мы рассмотрим позже.


FRAME

<FRAME SRC="url" [NAME="frame_name"] [MARGINWIDTH="nw"] [MARGINHEIGHT="nh"]

[SCROLLING=yes|no|auto] [NORESIZE]>. Данный тэг определяет фрэйм внутри контейнера FRAMESET.

SRC="url" описывает URL документа, который будет отображен внутри данного фрэйма. Если он отсутствует, то будет отображен пустой фрэйм.

NAME="frame_name". Данный атрибут описывает имя фрэйма. Имя фрэйма может быть использовано для определения действия с данным фрэймом из другого HTML-документа или фрэйма (как правило, из соседнего фрэйма этого же документа). Имя обязательно должно начинаться с символа. Содержимое поименованных фрэймов может быть задействовано из других документов при помощи специального атрибута TARGET, описываемого ниже.

MARGINWIDTH="value". Этот атрибут может быть использован, если автор документа хочет указать величину разделительных полос между фрэймами сбоку. Значение value указывается в пикселах и не может быть меньше единицы. По умолчанию данное значение зависит от реализации поддержки фрэймов используемым клиентом браузером.

MARGINHEIGHT="value". То же самое, что и MARGINWIDTH, но для верхних и нижних величин разделительных полос.

SCROLLING="yes | no | auto". Этот атрибут позволяет задавать наличие полос прокрутки у фрэйма. Параметр yes указывает, что полосы прокрутки будут в любом случае присутствовать у фрэйма, параметр no наоборот, что полос прокрутки не будет. Auto определяет наличие полос прокрутки только при их необходимости (значение по умолчанию).

NORESIZE. Данный атрибут позволяет создавать фрэймы без возможности изменения размеров. По умолчанию, размер фрэйма можно изменить при помощи мыши так же просто, как и размер окна Windows. NORESIZE отменяет данную возможность. Если у одного фрэйма установлен атрибут NORESIZE, то у соседних фрэймов тоже не может быть изменен размер со стороны данного.

NOFRAMES данный атрибут используется в случае, если Вы создаёте документ, который может просматриваться как браузерами, поддерживающими фрэймы, так и браузерами, их не поддерживающими. Данный тэг помещяется внутри контейнера FRAMESET, а все, что находится внутри тэгов <NOFRAMES> и </NOFRAMES> игнорируется браузерами, поддерживающими фрэймы.


Примеры

Рассмотрим реализацию фрэймов для подобного разбиения окна:

+---------------------------+
|                 |         |
|                 |         |
|     Link1       |  Link2  |
|                 |         |
|                 |         |
+---------------------------+
|       |           |       |
|       |           |       |
| Link3 |   Link4   | Link5 |
|       |           |       |
|       |           |       |
+---------------------------+
    

<FRAMESET ROWS="*,*" <NOFRAMES> <H1>Ваша версия WEB-браузера не поддерживает фрэймы!</H1> </NOFRAMES>

 <FRAMESET COLS="65%,35%">

  <FRAME SRC="link1.html">

  <FRAME SRC="link2.html">

 </FRAMESET>

 <FRAMESET COLS="*,40%,*">

  <FRAME SRC="link3.html">

  <FRAME SRC="link4.html">

  <FRAME SRC="link5.html">

 </FRAMESET>

</FRAMESET>

 

Планирование фрэймов и взаимодействия между фрэймами

С появлением фрэймов сразу возникает вопрос: "А как сделать так, чтобы нажимая на ссылку в одном фрэйме инициировать появление информации в другом?"

Ответом на данный вопрос является планирование взаимодействия фрэймов (далее — планирование). Каждый фрэйм может иметь собственное имя, определяемое параметром NAME при описании данного фрэйма. Существует, также, специальный атрибут — TARGET, позволяющий определять, к какому фрэйму относится та или иная операция. Формат данного атрибута следующий:


TARGET="windows_name"

Данный атрибут может встречаться внутри различных тэгов: TARGET в тэге <A> — это самое прямое использование TARGET. Обычно, при активизации пользователем ссылки соответствующий документ появляется в том же окне (или фрэйме), что и исходный, в котором была на него сделана ссылка. Добавление атрибута TARGET позволяет произвести вывод документа в другой фрэйм. Например: <A HREF="mydoc.html" TARGET="Frame1"> Переход в фрэйм № 1 </A>


Размещение TARGET в тэге BASE позволит Вам не указывать при описании каждой ссылки фрэйм — приемник документов, вызываемых по ссылкам. Это очень удобно, если в одном фрэйме у Вас находится меню, а в другой — выводится информация. Например:


Документ № 1.

<FRAMESET ROWS="20,*">

 <FRAME SRC="doc2.htm" NAME="Frame1">

 <FRAME SRC="doc3.htm" NAME="Frame2">

</FRAMESET>

Документ № 2 (doc2.htm).

<HTML>

 <HEAD>

 <BASE TARGET="Frame2">

 </HEAD>

<BODY>

  <A HREF="url1"> Первая часть</A>

  <A HREF="url2"> Вторая часть</A>

</BODY>

</HTML>


Таже можно включать параметр TARGET в описание ссылки при создании карты изображения в теге <AREA>. Например:

<AREA SHAPE="circle" COORDS="100,100,50" HREF="http://www.softexpress.com" TARGET="Frame1">

То же относится и к определению формы. В данном случае, после обработки переданных параметров формы результирующий документ появится в указанном фрэйме.

<FORM ACTION="url" TARGET="window_name">. Внимание! Имя окна (фрэйма) в параметре TARGET должно начинаться с латинской буквы или цифры. Также необходимо помнить, что существуют зарезервированные имена для разрешения специальных ситуаций.


Зарезервированные имена фрэймов

Зарезервированные имена фрэймов служат для разрешения специальных ситуаций. Все они начинаются со знака подчёркивания. Любые другие имена фрэймов, начинающиеся с подчеркивания будут игнорироваться браузером.

TARGET="_blank" — данное значение определяет, что документ, полученный по ссылке будет отображаться в новом окне броузера.

TARGET="_self" — данное значение определяет, что документ, полученный по ссылке будет отображаться в том же фрэйме, в котором находится ссылка. Это имя удобно для переопределения окна назначения, указанного ранее в тэге BASE.

TARGET="_parent" — данное значение определяет, что документ, полученный по ссылке будет отображаться в родительском окне, вне зависимости от параметров FRAMESET. Если родительского окна нет, то данное имя аналогично "_self".

TARGET="_top" — Данное значение определяет, что документ, полученный по ссылке будет отображаться на всей поверхности окна, вне зависимости от наличия фрэймов. Использование данного параметра удобно в случае вложенных фрэймов.

Формы

Некоторые WWW-браузеры позволяют пользователю, заполнив специальную форму, возвращающую полученное значение, выполнять некоторые действия на Вашем WWW-сервере. Когда форма интерпретируется WEB-браузером, создается специальные экранные элементы GUI, такие, как поля ввода, checkboxes, radiobuttons, выпадающие меню, скроллируемые списки, кнопки и т.д. Когда пользователь заполняет форму и нажимает кнопку "Подтверждение" (SUBMIT - специальный тип кнопки, который задается при описании документа), информация, введённая пользователем в форму, посылается HTTP-серверу для обработки и передаче другим программам, работающим под сервером, в соответствии с CGI (Common Gateway Interface) интерфейсом.

Когда Вы описываете форму, каждый элемент ввода данных имеет тэг <INPUT>. Пользователь, помещает данные в элемент формы, и инфоромация размещается в разделе VALUE данного элемента.

Синтаксис

Все формы начинаются тэгом <FORM> и звершаются тэгом </FORM>.


Обший вид:

<FORM METHOD="get|post" ACTION="URL"> Элементы_формы_и_другие_элементы_HTML </FORM>

В зависимости от используемого метода посылки сообщения с данными из формы, Вы можете посылать результаты ввода данных в форму двумя путями:


ACTION описывает URL, который будет вызываться для обработки формы. Данный URL почти всегда указывает на CGI-программу, обрабатывающую данную форму.

Тэги Формы

Тэг <TEXTAREA> используется для того, чтобы позволить пользователю вводить более одной строки информации (свободный текст). Вот пример использовани тэга <TEXTAREA>:

<TEXTAREA NAME="address" ROWS=10 COLS=50> Москва, Дмитровкое шоссе, д.9Б, офис 448 </TEXTAREA>

Атрибуты, используемые внутри тэга <TEXTAREA> описывают внешний вид и имя вводимого значения. Тэг </TEXTAREA> необходим даже тогда, когда поле ввода изначально пустое. Описание атрибутов:

Если вы хотите, чтобы в поле ввода по умолчанию выдавался какой-либо текст, то необходимо вставить его внутри тэгов <TEXTAREA> и </TEXTAREA>.


Посмотреть


Тэг <INPUT> используется для ввода одной строки текста или одного слова. Атрибуты тэга:


Под меню выбора в формах понимают такой элемент интерфейса, как LISTBOX. Существует три типа тэгов меню выбора для форм:

Тэг SELECT позволяет пользователю выбрать значение из фиксированного списка значений. Обычно это представлено выпадающим меню.

Тэг SELECT имеет один или более параметров между стартовым тэгом <SELECT> и завершающим </SELECT>. По умолчанию, первый элемент отображается в строке выбора. Вот пример тэга <SELECT>:


<<FORM>

<SELECT NAME=group>

<OPTION> AT 386

<OPTION> AT 486

<OPTION> AT 586

</SELECT>

</FORM>


Посмотреть


Тэг SELECT SINGLE — это то же самое, что и SELECT, но на экране пользователь видит одновременно несколько элементов выбора (три по умолчанию). Если их больше, то предоставляется автоматический вертикальный скроллинг. Количество одновременно отображаемых элементов определяется атрибутом SIZE. Пример:


<FORM>

<SELECT SINGLE NAME=group SIZE=4>

<OPTION> AT 386

<OPTION> AT 486

<OPTION> AT 586

<OPTION> Pentium PRO

</SELECT>

</FORM>


Посмотреть


Тэг SELECT MULTIPLE похож на тэг SELECT SINGLE, но пользователь может одновременно выбрать более чем один элемент списка. Атрибут SIZE определяет количество одновременно видимых на экране элементов, атрибут MULTIPLE - максимальное количество одновременно выбранных элементов. Пример:


<<FORM>

<SELECT SINGLE NAME=group SIZE=4 MULTIPLE=2>

<OPTION> AT 386

<OPTION> AT 486

<OPTION> AT 586

<OPTION> Pentium PRO

</SELECT>

</FORM>


Если выбрано одновременно несколько значений, то серверу передаются соответствующее выбранному количество параметров NAME=VALUE с одинаковыми значениями NAME, но разными VALUE.


Посмотреть

Отправление файлов при помощи форм

Формы можно использовать для отправки не только небольших информационных сообщений ввиде параметров, а также и для отправки файлов. Внимание! Поскольку данная возможность требует поддержки получения файлов WEB-сервером, то, соответственно, необходимо, чтобы сервер поддерживал получение файлов!


Например:

<FORM ENCTYPE="multipart/form-data" ACTION="url" METHOD=POST>

<INPUT TYPE="submit" VALUE="Отправить файл">

</FORM>


Посмотреть


Ниже приводится пример использования свойств CSS для изменения внешнего вида элементов интерфейса веб- формы:


Посмотреть




Обновить страницу