Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
HTML.doc
Скачиваний:
5
Добавлен:
12.07.2019
Размер:
496.13 Кб
Скачать

Группа параметров

Параметр 1 Параметр 2 Параметр 3 Параметр 4

Интересно, не так ли. Что-то подобное можно организовать и с помощью таблиц, но данный тэг позволяет сделать это намного проще и нагляднее. Рассмотрим код:

<CENTER>

<FIELDSET STYLE="width:175">

<LEGEND ALIGN="left">Группа параметров</LEGEND>

<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0"

align=center>

<TR>

<TD><br>Параметр 1<br>

Параметр 2<br>

Параметр 3<br>

Параметр 4<br></TD>

</TR>

</TABLE>

</FIELDSET>

</CENTER>

Это наглядный способ применения данного тэга. Этот тэг имеет следующие атрибуты:

  1. CLASS-используется так же как и в стилях;

  2. ID-уникальный идентификатор, аналогичный применяемому в стилях;

  3. LANG-используемый язык ("en"-английский, "de"-немецкий, "ru"-русский и т.д.);

  4. LANGUAGE-язык используемого скрипта (vbscript, vbs, javascript or jscript). Языки сскриптов будут рассмотрены в следующих разделах;

  5. STYLE-встроенные стили;

  6. TITLE-всплывающая подсказка.

Применяется в неразрывности с тэгом <legend>, который кроме перечисленных выше атрибутов также использует ALIGN (left, center, right). Источник: web-brodilka.ru

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

Для тех, кто работал в MS Word известна очень полезная функция форматирования текста, - создание списков с маркерами. С помощью таких списков можно выделять наиболее важные части контекста статей.  И язык HTML также предоставляет такую возможность.

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

type

Тип маркера списка:

 A-заглавные буквы

 a-строчные буквы

 I-римские заглавные

 i-римские строчные (по умолчанию испольуются арабские цифры)

start

Начальное значение для нумерованных списков с арабскими цифрами

title

Всплывающая подсказка

А код выглядит так:

<OL type=A title="Времена года">

<LI>Зима

<LI>Весна

<LI>Лето

<LI>Осень

</OL>

Что в броузере отобразиться как:

  1. Зима

  2. Весна

  3. Лето

  4. Осень

А что такое <li>? Этот тэг означает (List Item) и служит для обозначения элемента маркированного списка. Закрывающий тэг для него не обязателен. 

А теперь рассмотрим ненумерованный маркированный список. Такой список задается тэгом <UL> (Unordered List). Такой список может задаваться в виде различных маркеров, задаваемых атрибутом type:

 

disk

Закрашенный кружок (по умолчанию)

circle

Незакрашенный кружок

square

Квадратик

 

<UL type=square title="Времена года">

<LI>Зима

<LI>Весна

<LI>Лето

<LI>Осень

</UL>

И в броузере:

  • Зима

  • Весна

  • Лето

  • Осень

 Как мы видим, все просто: для перехода от нумерованного списка к немаркированного нам достаточно было заменить <OL> на <UL> и присвоить соответствующее значение атрибуту type.

Есть еще один тип списков. Это - определения. Вот простой пример:

Имя существительное:

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

 

Для создания списка определений служит тэг <DL>(Definition List). Определения создаются с помощью тэга <DD> (Definition Description), закрывающий тэг для которого не обязателен. Для выделения определяемого слова, фразы используется тэг <DT>(Definition Term):

<DL title="Имя существительное">

<DT>Имя существительное:

<DD>это часть речи, обозначающая предмет

и отвечающая на вопросы "Кто?" и "Что?".

</DL>

Мы уже знаем стили и поэтому можем придать нашим спискам вполне солидный вид. Для этой страницы применены следующие стили:

<style>

LI {

color : Black;

font-family : Arial, Helvetica, sans-serif;

font-size : 9pt;

font-style : oblique;

}

DL {

border : thin ridge Olive;

background-color : Yellow;

font-size : 8pt;

text-decoration : underline;

font-family : Arial, Helvetica, sans-serif;

margin-left : 5px;

}

DT {

background : Yellow;

font-family : Verdana, Geneva, Arial,

Helvetica, sans-serif;

font-size : 12pt;

font-weight : bold;

text-decoration : none;

}

</style>

которые конечно же можно поместить в *.css-файл. Источник: web-brodilka.ru

Фреймы

Начиная разговор о фреймах (от англ. слова frame - кадр, окно), следует отметить, что многие разработчики сайтов предпочитают не использовать их, так как HTML-документ, содержащий фреймы плохо индексируется поисковыми системами. С другой стороны сайт, организованный на фреймах позволяет разделить HTML-страницу на несколько рабочих областей требуемых размеров, в каждый из которых можно загружать отдельный, самостоятельный HTML-файл. Последнее обеспечивает гибкость и планирование загрузки в различные ячейки разбитой на фреймы страницы, а также связь между ячейками. Кроме того использование фреймов позволяет исключить многократную загрузку повторяющейся части страницы (например: меню, значек, эмблема), увеличив тем самым мобильность загрузки. Сайт Вашего покорного слуги - http://mrharut.narod.ru - построен на фреймах.

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

Основной файл, являющийся каркасом, где и производится разбиение на ячейки, вместо тэга <body> содержит тэг <frameset>, который как и многое фреймы, имеет следующие атрибуты:

  1. rows - Задает разбиение окна на горизонтальные области;

  2. cols - Задает разбиение окна на вертикальные области;

  3. frameborder - Наличие (yes) или отсутствие (no) бордюров (окантовок) фрейма (ячейки);

  4. border - Ширина окантовки в пикселях;

  5. bordercolor - Цвет окантовки фрейма

Давайте рассмотрим несколько примеров задания фреймов:

<frameset cols=150,20%,*>

....

</frameset>

Здесь происходит разбиение на три колонки (слева направо). Первая шириной в 150 пикселей, вторая - 20% от действующего разрешения экрана по ширине. Знак * означает, что третья колонка занимает всю оставшуюся часть по ширине.

Следующий пример:

<frameset cols="250,*">

<frameset rows="150,*">

......

</frameset>

......

</frameset>

В данном случае страница разбивается на две (150 пикселей - верхняя и оставшеяся - нижняя) части по вертикали. По горизонтали разбиение происходит на две колонки: соответственно 250 пикселей - левая и правая - оставшеяся часть по ширине.

Управление загрузкой страниц в различные области осуществляется тэгом <frame>, атрибуты которого следующие:

  1. name - уникальное имя области, по которому происходит обращение.

  2. src - источник т.е. URL документа или имя HTML-файла, который будет загружен в данный фрейм.

  3. marginwidth и marginheight - вертикальные и горизонтальне размеры границ фрейма в пикселах.

  4. frameborder - признак отображения границ фрейма (yes или no).

  5. scrolling - управляет полосами прокрутки областей фрейма. Принимает значения: yes - ползунки прокрутки будут присутствовать всегда, auto - ползунки прокрутки будут появляться при необходимости, no - прокрутка запрещена, даже в случае превышения размеров загружаемого документа над размерами фрейма.

  6. noresize - запрещает изменение размеров фрейма, которые по умолчанию можно изменять путем перетаскивания границ мышкой.

  7. bordercolor - задает цвет окантовки фрейма.

Не все броузеры поддерживают фреймы. Для универсальности имеется тэг <noframes>. А теперь рассмотрим полный и работоспособный пример:

<html>

<frameset col=120,* border=0>

<frame name="left" src="menu.html" noresize

scrolling=no>

<frame name="right" src="maininfo.html"

scrolling=auto>

</frameset>

<noframes>

<p>Ваш броузер не поддерживает фреймы

</noframes>

</html>

Разумеется, для полной работоспособности должны иметься файлы menu.html и maininfo.html, содержимое которых полностью соответсвует назначению. Источник: web-brodilka.ru

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]