- •Понятия и определения
- •Html - основа основ
- •Тэги html
- •Структура html-документа
- •Атрибуты тэгов
- •Гиперссылки и совершенствование внешнего вида текста
- •Картинки на страничке
- •Создание и оптимизация изображений для Web-сайта
- •Анимация изображений
- •Изображение и гиперссылки
- •Сложные таблицы
- •Изображения и таблицы
- •Стили и ссылки
- •Стили, классы, селекторы
- •Каскадные таблицы стилей
- •Группа параметров
- •Маркированные списки
- •Управление фреймами
- •Мета-тэги
- •Index - разрешена индексация индексных ( стартовых)страниц - обычно это - index.Html;
- •Заключение
Группа параметров
Параметр 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>
Это наглядный способ применения данного тэга. Этот тэг имеет следующие атрибуты:
CLASS-используется так же как и в стилях;
ID-уникальный идентификатор, аналогичный применяемому в стилях;
LANG-используемый язык ("en"-английский, "de"-немецкий, "ru"-русский и т.д.);
LANGUAGE-язык используемого скрипта (vbscript, vbs, javascript or jscript). Языки сскриптов будут рассмотрены в следующих разделах;
STYLE-встроенные стили;
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>
Что в броузере отобразиться как:
Зима
Весна
Лето
Осень
А что такое <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>, который как и многое фреймы, имеет следующие атрибуты:
rows - Задает разбиение окна на горизонтальные области;
cols - Задает разбиение окна на вертикальные области;
frameborder - Наличие (yes) или отсутствие (no) бордюров (окантовок) фрейма (ячейки);
border - Ширина окантовки в пикселях;
bordercolor - Цвет окантовки фрейма
Давайте рассмотрим несколько примеров задания фреймов:
<frameset cols=150,20%,*>
....
</frameset>
Здесь происходит разбиение на три колонки (слева направо). Первая шириной в 150 пикселей, вторая - 20% от действующего разрешения экрана по ширине. Знак * означает, что третья колонка занимает всю оставшуюся часть по ширине.
Следующий пример:
<frameset cols="250,*">
<frameset rows="150,*">
......
</frameset>
......
</frameset>
В данном случае страница разбивается на две (150 пикселей - верхняя и оставшеяся - нижняя) части по вертикали. По горизонтали разбиение происходит на две колонки: соответственно 250 пикселей - левая и правая - оставшеяся часть по ширине.
Управление загрузкой страниц в различные области осуществляется тэгом <frame>, атрибуты которого следующие:
name - уникальное имя области, по которому происходит обращение.
src - источник т.е. URL документа или имя HTML-файла, который будет загружен в данный фрейм.
marginwidth и marginheight - вертикальные и горизонтальне размеры границ фрейма в пикселах.
frameborder - признак отображения границ фрейма (yes или no).
scrolling - управляет полосами прокрутки областей фрейма. Принимает значения: yes - ползунки прокрутки будут присутствовать всегда, auto - ползунки прокрутки будут появляться при необходимости, no - прокрутка запрещена, даже в случае превышения размеров загружаемого документа над размерами фрейма.
noresize - запрещает изменение размеров фрейма, которые по умолчанию можно изменять путем перетаскивания границ мышкой.
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