Метки добавляют к выделенному ими тексту со всех четырех сторон поля (сверху и снизу - по пустой строке, слева и справа - шириной в 5 знаков). Пример - этот абзац.
Еще один способ форматирования текста - использование меток
..
(prefomatted text - предварительно форматированный текст). Обычно браузеры игнорируют множественные пробелы и символы конца строки. Однако с использованием тега
текст выводится в окне браузера точно в том виде, как он есть в исходном HTML-документе.
Пример. В тексте:
Чтобы стихотворение красиво
смотрелось в окне браузера,
вовсе необязательно использовать
тэг <BR>!
В окне браузера:
Чтобы стихотворение красиво
смотрелось в окне браузера,
вовсе необязательно использовать
тэг !
Урок 4
Тема: ссылки.
Ссылки - инструмент, позволяющий связывать между собой различные документы. Браузер обычно выделяет ссылку цветом и/или подчеркиванием. Описывается ссылка следующим образом:
Может содержать аттрибут TITLE, описывающий ссылку. Если пользователь наведет указатель мыши на ссылку, то появится ее описание - содержимое этого аттрибута.
Различают относительные и абсолютные ссылки. Примеры относительной ссылки:
В абсолютной ссылке указывается полный путь к файлу:
Относительные ссылки удобнее. Они не привязаны к конкретной структуре каталогов, т.е. вы можете создать свой сайт на компьютере, тестировать и исправлять ошибки не подключаясь к Интернет. И лишь после полной готовности перенести его на сервер, он будет работать так же.
Можно делать ссылки внутри документа. Это удобно для перехода к разным главам одной большой статьи. Для этого необходимо создать некую опорную точку - анкер (anchor - якорь,англ.), на которую и будет происходить переход. Разберем это на примере. Допустим, нам надо перейти на начало этого урока. Для чего создадим такой анкер:
Можете нажать - пример работает! К этому анкеру можно перейти и из другого файла (например, чтобы сделать ссылку к конкретному уроку 4, а не урокам HTML вообще). Тогда ссылка будет выглядеть так:
До сих пор мы рассматривали ссылки на HTML-документы. Однако возможны ссылки и на другие виды ресурсов:
Такая ссылка запустит протокол передачи файлов и произведет выгрузку файла "file.ext" из директории "directory" сервера "servername" на жесткий диск пользователя (download).
Еще один вид ссылки - ссылка на почтовый ящик. Выглядит в тексте:
Внимание! Браузеры чувствительны к регистру ссылок. Если вы вместо "http://webs.web.com" наберете "http://webs.Web.com", то получите нерабочую ссылку. Та же ситуация и с расширениями: если у вас ссылка на файл "index.htm", а там находится "index.html", то результат тот же - нерабочая ссылка.
Тема: рисунки.
В свою страничку можно вставить рисунок. Для этого нужен сам рисунок - обычно используют изображения в формате GIF (файлы с расширениями .gif) и JPEG (файлы с расширениями .jpg и .jpeg) и строчка HTML-тексте, указывающая браузеру, где этот рисунок находится:
- рисунок "picture.gif" находится в том же каталоге, что и текущий документ;
- перейти в подкаталог "images" текущего каталога и взять файл оттуда;
- подняться вверх на один шаг, перейти в каталог "images" и взять рисунок оттуда;
- указание полного пути к файлу. Обычно применяется, если рисунок находится на другом сервере, или используется картинка с другого сайта.
У данного тэга могут быть следующие аттрибуты:
ALT="какой-то текст" - альтернативный текст. Текст, который появляется вместо картинок при просмотре странички браузером с отключенной автоматической загрузкой изображений (отключают многие - для экономии времени на медленных линиях связи).
BORDER="n" - рамка вокруг рисунка, где n - ее толщина в пикселах. При n="0" рамка не рисуется.
WIDTH="n" - задается ширина изображения в пикселах или в процентах от ширины экрана браузера (тогда после n следует знак %).
HEIGHT="n" - высота изображения в пикселах или в процентах от высоты экрана.
HSPACE="n" - отступ слева и справа от картинки шириной в n пикселов (т.е. свободное пространство между рисунком и текстом или чем-то иным).
VSPACE="n" - вертикальный отступ от картинки в пикселах.
ALIGN=CENTER - по умолчанию сопровождающий текст выравнивается по нижнему краю рисунка. Применяя аттрибут ALIGN можно выравнивать текст по верхнему краю (TOP) или по центру рисунка ( CENTER или MIDDLE). Чтобы текст обтекал рисунок, используется значение аттрибута LEFT или RIGHT, рисунок прижимается соответственно к левому или правому краю экрана.
Значения n перечисленных выше аттрибутов по умолчанию равны нулю.
Рисунок может быть ссылкой. Для этого разместите между тэгами и . Вокруг рисунка появится рамка, показывающая, что он является ссылкой. Если рамка портит внешний вид документа, то укажите в аттрибутах рисунка BORDER="0".
Урок 6
Тема: цвет фона и текста, шрифты.
Цвет фона определяется значением аттрибута BGCOLOR - шестнадцатиричным числом вида #hhhhhh, где первая пара символов является значением насыщенности для красного цвета, вторая - для зеленого, и третья пара - для синего цвета. #00 - минимальная насыщенность, #FF - максимальная насыщенность цвета. Можно использовать текстовое определение цвета: BLUE, RED, FUCHSIA и т.п - одно из шестнадцати допустимых значений.
BLACK #000000 GREEN #008000
SILVER #C0C0C0 LIME #00FF00
GRAY #808080 OLIVE #808000
WHITE #FFFFFF YELLOW #FFFF00
MAROON #800000 NAVY #000080
RED #FF0000 BLUE #0000FF
PURPLE #800080 TEAL #008080
FUCHSIA #FF00FF AQUA #00FFFF
Например, чтобы сделать цвет фона страницы фиолетовым, можно написать
, а можно и так:
.
Строго говоря, текстовых значений цвета значительно больше (SCARLET, VIOLET, BROWN и т.д. и т.п.), но не все браузеры их "знают". Применимы также значения LIGHTGREEN (светлозеленый), LIGHTYELLOW (светложелтый) и LIGHTBLUE (светлосиний).
Фоном может служить и какое-то изображение. При этом заданная область заполняется множественными копиями этого изображения (как кафельной плиткой). Для этого используется аттрибут BACKGROUND с указанием пути к рисунку. Например
Аттрибуты BGCOLOR и BACKGROUND могут находиться внутри метки , тогда цвет фона устанавливается для всей страницы, либо в метках ,
и
- устанавливается цвет фона во всей таблице, ее строке и ее ячейке соответсвенно (таблицы - тема следующего урока).
Для изменения цвета и размера шрифта используется метка . Ее аттрибуты:
COLOR="#hhhhhh" - цвет текста;
SIZE="n" - размер шрифта;
FACE="имя_шрифта" - смена шрифта, где имя_шрифта может быть arial, verdana, helvetica, sans-serif и другие.
Пример использования метки :
Крупный шрифт красного цвета без засечек
В окне браузера увидите Крупный шрифт красного цвета без засечек
Для размещения текста в верхнем или нижнем регистре используются соответственно метки .. (superscript) и .. (subscript). Пример их использования:
в тексте: в окне браузера:
E=mc2 E=mc2
2x+2=64 2x+2=64
H2O H2O
Тэг BODY может содержать аттрибут TEXT, который определяет цвет шрифта для всей страницы. Значение аттрибута - шестнадцатиричное значение цвета или текстовое. устанавливает цвет шрифта на странице темно-синим.
Также в тэге BODY можно определить каким цветом на вашей странице будут выделяться ссылки. Это аттрибуты:
LINK="#hhhhhh" - определяет цвет ссылки, по умолчанию голубой;
ALINK="#hhhhhh" - определяет цвет ссылки на документ, просмотренный ранее, по умолчанию фиолетовый;
VLINK="#hhhhhh" - опрделяет цвет активизированной ссылки, т.е. когда на нее наведен курсор и нажата кнопка мыши, по умолчанию красный.
Урок 7
Тема: таблицы.
Для чего нужны таблицы? Ответ на этот вопрос очевиден: для представления данных в табличном виде. Но не только.
До сих пор мы имели дело с документами, в которых существовал только один поток текста. На практике же порой хочется расположить текст в несколько колонок. В этом нам может помочь таблица.
В таблице может размещаться не только текст... ...но и
или картинки Таблицы позволяют достаточно точно контролировать расположение элементов на странице!
Чтобы разобраться в устройстве таблицы, расмотрим простой пример:
Таблица 1. Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4
Такая табличка реализуется следующим кодом:
Таблица 1.
Ячейка 1
Ячейка 2
Ячейка 3
Ячейка 4
Таблица начинается с метки и заканчивается . Метка может включать следующие аттрибуты:
WIDTH="n" - определяет ширину таблицы в пикселах или процентах, по умолчанию ширина таблицы определяется содержимым ячеек;
ALIGN=LEFT - определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения аттрибута: LEFT (слева), CENTER (по центру страницы) и RIGHT (справа);
BORDER="n" - устанавливает толщину рамки. По умолчанию n=0 - таблица рисуется без рамки;
BORDERCOLOR="#hhhhhh" - устанавливает цвет рамки, где #hhhhhh - шестнадцатиричное значение цвета;
CELLSPACING="n" - определяет расстояние между рамками ячеек таблицы в пикселах;
CELL">BGCOLOR="#hhhhhh" - устанавливает цвет фона для всей таблицы, где #hhhhhh - шестнадцатиричное число.
BACKGROUND="picture.gif" - заполняет фон таблицы изображением;
FRAME="значение" - управляет внешней рамкой таблицы, может принимать следующие значения:
А теперь где-нибудь в заголовке страницы (т.е. в секции HEAD) разместим тэг
Можете набрать этот пример в каком-либо текстовом редакторе и сохранить затем с расширением htm или html (хорошая практика!), а можете сразу посмотреть этот пример в действии.
Теперь разберем этот пример подробнее. Аттрибут TYPE="text/css" и информация в комментарии (между "") как раз и определяют стиль нашей страницы. Метки комментария здесь используются для совместимости со старыми версиями браузеров - они просто проигнорируют незнакомый тэг
Color - изменение цвета текста, линий, рамок. Скажем, в предыдущем примере мы сделали так, что ссылки на странице не подчеркиваются. Чтобы они не выделялись еще и цветом, сделаем одинаковым цвет ссылок и текста (для краткости здесь и далее метки STYLE TYPE...будут опускаться):
body {color: black}
a:link {color: black; text-decoration: none}
a:visited {color: black; text-decoration: none}
Т.е. цвет текста на странице - черный (1-я строчка), ссылки (обычно голубого цвета) - неподчеркнутые черного цвета (2-я строчка), посещенные ссылки (обычно фиолетовые) - также черного цвета и неподчеркнутые (3-я строчка).
Background-color - определяет цвет фона для какого-либо элемента. Например:
strong {background-color: yellow}
Текст между метками и будет показан на желтом фоне.
Background-image - позволяет сделать фон в виде рисунка. Пример:
) будет размещен на фоне рисунка "million.jpg". Примером служит данный абзац.
Text-align - выравнивание текста. Применяется только в абзацах, заголовках и списках. А также для выравнивания картинок на страничке (несмотря на слово "text"). Например:
IMG {text-align: center}
Text-indent - позволяет делать отступ в первой строке абзаца (красная строка - как мы привыкли видеть в книгах). Ширина отступа измеряется в пикселах (px) или точках (pt). Может быть также величиной отрицательной, тогда первая строка будет выступать влево от остального текста. Пример (он же и применен к этому абзацу):
p {"">
"">
body {; "">В результате текст на странице будет отступать слева на 10 точек от края страницы, справа - на 15 точек. Также возможны варианты: ">
Рамки. Каждый элемент может заключен в рамку. Рамка может иметь следующие свойства:
border-width - ширина рамки. Значение числовое (в пикселах или точках) или одно из зарезервированных слов - thin (тонкая), medium (средняя), thick (толстая).;
border-color - цвет рамки. Числовое или текстовое значение цвета. Также может принимать значение transparent (прозрачная);
border-style - стиль рамки. Может иметь следующие значения: Значение Описание Вид рамки (в вашем браузере!)
dashed пунктирная - в виде черточек dashed
dotted пунктирная - в виде точек dotted
double двойная линия double
inset с эффектом вдавленности inset
outset с эффектом выпуклости outset
ridge выпуклая рамка ridge
groove врезанная рамка groove
solid непрерывная линия solid
Можно определить каждую сторону рамки отдельно. Для ширины рамки это выглядит так: border-top-width (ширина верхней стороны), border-right-width (правая сторона), border-bottom-width (нижняя сторона) и border-left-width (левая сторона). Для определения цвета и стиля достаточно просто перечислить свойства в таком порядке: верх-право-низ-лево. Пример:
blockquote {border-top-width: 3px; border-right-width: 5px; border-bottom-width: 3px; border-left-width: 5px; border-color: red green navy green; border-style: double double solid double }
Здесь определена рамка со следующими границами: верхняя - красная двойная в 3 пиксела шириной, правая и левая - зеленые двойные в 5 пикселов шириной, нижняя - синяя сплошная шириной в 3 пиксела.
А что, если захочется изменить стиль только одного абзаца? Или каждому абзацу определить свой стиль? Можно! В таком случае надо использовать аттрибут STYLE с необходимыми свойствами. Например:
или
border-color: #F0F0F0; text-align: center">
Теперь представим такую ситуацию: у вас на странице 25 абзацев, из них 15 вы хотите выдержать в каком-то определенном стиле. Чтобы не писать аттрибут STYLE каждый раз, можно поступить следующим образом: определить в заголовке документа в тэге STYLE необходимый стиль и дать ему название, например:
Точку перед названием надо ставить обязательно! В примере я назвал стиль "krasota", вы же, естественно, можете обозвать его как угодно, хоть "vasja" или "MySuperStyle". Теперь в тексте достаточно указать название своего стиля (уже без точки), и он будет применен:
И напоследок. Можно определить стиль для всего сайта! Для этого создается текстовый документ, где перечисляются все стили, используемые на страницах сайта (заголовки и т.п. не требуются) и сохраняется с расширением .css (например, "stili.css"). Потом достаточно с каждой страницы сайта, где используются эти стили, сделать ссылку на этот файл. Ссылка размещается в заголовке страницы (в секции HEAD) и имеет такой вид:
Теперь достаточно сделать изменения в одном файле - в "stili.css" (или как вы там его назовете) - чтобы изменился стиль всего сайта, пусть даже он состоит из 200 или 300 страниц!
Если на какой-то странице сайта определены свои стили, которые перекрывают стили, описанные в .css файле, то на ней будут применены ее стили (т.е. определенные в заголовке этой страницы). В свою очередь, если на странице в заголовке определены какие-то стили, и существует стиль, указанный в тэге (например,
), то к данному тэгу будет применяться второй стиль.
Урок 12
Тема: вкратце о CSS.
Что такое CSS и для чего это нужно? CSS - Cascading Style Sheets, что означает дословно "каскадные таблицы стилей". Смысл - описывается стиль всего документа или сайта в целом, либо отдельных его элементов. Т.е. вы можете один раз определить, что, например, на всех страницах вашего сайта все заголовки будут красного цвета, абзацы выровнены по центру, а ссылки останутся неподчеркнутыми (то-то посетители помучаются, пока найдут их!). И к тому же вы сможете изменить стиль вашей страницы или даже всего сайта, подправив в тексте лишь пару строк!
Чтобы сразу объяснить суть таблиц стилей, рассмотрим пример. Допустим, у вас есть такая страница:
А теперь где-нибудь в заголовке страницы (т.е. в секции HEAD) разместим тэг
Можете набрать этот пример в каком-либо текстовом редакторе и сохранить затем с расширением htm или html (хорошая практика!), а можете сразу посмотреть этот пример в действии.
Теперь разберем этот пример подробнее. Аттрибут TYPE="text/css" и информация в комментарии (между "") как раз и определяют стиль нашей страницы. Метки комментария здесь используются для совместимости со старыми версиями браузеров - они просто проигнорируют незнакомый тэг
Color - изменение цвета текста, линий, рамок. Скажем, в предыдущем примере мы сделали так, что ссылки на странице не подчеркиваются. Чтобы они не выделялись еще и цветом, сделаем одинаковым цвет ссылок и текста (для краткости здесь и далее метки STYLE TYPE...будут опускаться):
body {color: black}
a:link {color: black; text-decoration: none}
a:visited {color: black; text-decoration: none}
Т.е. цвет текста на странице - черный (1-я строчка), ссылки (обычно голубого цвета) - неподчеркнутые черного цвета (2-я строчка), посещенные ссылки (обычно фиолетовые) - также черного цвета и неподчеркнутые (3-я строчка).
Background-color - определяет цвет фона для какого-либо элемента. Например:
strong {background-color: yellow}
Текст между метками и будет показан на желтом фоне.
Background-image - позволяет сделать фон в виде рисунка. Пример:
) будет размещен на фоне рисунка "million.jpg". Примером служит данный абзац.
Text-align - выравнивание текста. Применяется только в абзацах, заголовках и списках. А также для выравнивания картинок на страничке (несмотря на слово "text"). Например:
IMG {text-align: center}
Text-indent - позволяет делать отступ в первой строке абзаца (красная строка - как мы привыкли видеть в книгах). Ширина отступа измеряется в пикселах (px) или точках (pt). Может быть также величиной отрицательной, тогда первая строка будет выступать влево от остального текста. Пример (он же и применен к этому абзацу):
p {"">
"">
body {; "">В результате текст на странице будет отступать слева на 10 точек от края страницы, справа - на 15 точек. Также возможны варианты: ">
Рамки. Каждый элемент может заключен в рамку. Рамка может иметь следующие свойства:
border-width - ширина рамки. Значение числовое (в пикселах или точках) или одно из зарезервированных слов - thin (тонкая), medium (средняя), thick (толстая).;
border-color - цвет рамки. Числовое или текстовое значение цвета. Также может принимать значение transparent (прозрачная);
border-style - стиль рамки. Может иметь следующие значения: Значение Описание Вид рамки (в вашем браузере!)
dashed пунктирная - в виде черточек dashed
dotted пунктирная - в виде точек dotted
double двойная линия double
inset с эффектом вдавленности inset
outset с эффектом выпуклости outset
ridge выпуклая рамка ridge
groove врезанная рамка groove
solid непрерывная линия solid
Можно определить каждую сторону рамки отдельно. Для ширины рамки это выглядит так: border-top-width (ширина верхней стороны), border-right-width (правая сторона), border-bottom-width (нижняя сторона) и border-left-width (левая сторона). Для определения цвета и стиля достаточно просто перечислить свойства в таком порядке: верх-право-низ-лево. Пример:
blockquote {border-top-width: 3px; border-right-width: 5px; border-bottom-width: 3px; border-left-width: 5px; border-color: red green navy green; border-style: double double solid double }
Здесь определена рамка со следующими границами: верхняя - красная двойная в 3 пиксела шириной, правая и левая - зеленые двойные в 5 пикселов шириной, нижняя - синяя сплошная шириной в 3 пиксела.
А что, если захочется изменить стиль только одного абзаца? Или каждому абзацу определить свой стиль? Можно! В таком случае надо использовать аттрибут STYLE с необходимыми свойствами. Например:
или
border-color: #F0F0F0; text-align: center">
Теперь представим такую ситуацию: у вас на странице 25 абзацев, из них 15 вы хотите выдержать в каком-то определенном стиле. Чтобы не писать аттрибут STYLE каждый раз, можно поступить следующим образом: определить в заголовке документа в тэге STYLE необходимый стиль и дать ему название, например:
Точку перед названием надо ставить обязательно! В примере я назвал стиль "krasota", вы же, естественно, можете обозвать его как угодно, хоть "vasja" или "MySuperStyle". Теперь в тексте достаточно указать название своего стиля (уже без точки), и он будет применен:
И напоследок. Можно определить стиль для всего сайта! Для этого создается текстовый документ, где перечисляются все стили, используемые на страницах сайта (заголовки и т.п. не требуются) и сохраняется с расширением .css (например, "stili.css"). Потом достаточно с каждой страницы сайта, где используются эти стили, сделать ссылку на этот файл. Ссылка размещается в заголовке страницы (в секции HEAD) и имеет такой вид:
Теперь достаточно сделать изменения в одном файле - в "stili.css" (или как вы там его назовете) - чтобы изменился стиль всего сайта, пусть даже он состоит из 200 или 300 страниц!
Если на какой-то странице сайта определены свои стили, которые перекрывают стили, описанные в .css файле, то на ней будут применены ее стили (т.е. определенные в заголовке этой страницы). В свою очередь, если на странице в заголовке определены какие-то стили, и существует стиль, указанный в тэге (например,
), то к данному тэгу будет применяться второй стиль.
Урок 12
Тема: фреймы.
Объяснить, что такое фреймы и для чего они нужны, лучше всего на примере. Страница, которую вы сейчас читаете, состоит из двух фреймов: левого, в нем перечислены все уроки, и правого с собственно самими уроками. Вы можете прокручивать содержимое правого фрейма, в то время как левый остается неподвижным. Это позволяет вам в любой момент легко перейти на любой урок, не разыскивая ссылку внизу или вверху страницы. Словом, разумное использование фреймов позволяет существенно упростить навигацию по сайту и улучшить его дизайн.
Суть фреймов в принципе проста: страница делится на несколько окон, в каждое из которых загружается своя страничка (или картинка), со своим собственным адресом. К примеру, в левом окне - "vasja.html", а в правом - "pupkin.html" (которая физически может находиться где-нибудь на другом сервере). Как и любые страницы в Интернете, они могут ссылаться на другие страницы и друг на друга. Кроме этих двух страниц вы должны написать третью, в которой и будут определяться размеры и свойства этих окон. Для этого используются только два тега -
Во-первых, создадим два файла - vasja.html и pupkin.html:
Вот его-то мы и рассмотрим подробнее. Во-первых, в нем отсутствуют теги и . Можно сказать, их роль выполняет тег
Три фрейма разной ширины.
25%
75%
Фреймы можно расположить рядами так же легко, как и столбцами. Просто меняем аттрибут cols на rows:
Значения аттрибутов cols и rows могут выражаться не только в процентах. cols="150,*,100" - страница разделена на три столбца, где ширина левого 150 пикселов, правого - 100 пикселов, а средний столбец - это все оставшееся между ними место (знак *). Если вы будете размеры фреймов устанавливать в пикселах, то желательно ширину (или высоту) одного из них определить значком *. Можно, например, написать cols="150,550,100", и все будет выглядеть отлично на вашем мониторе с разрешением 600*800. Но стоит только изменить разрешение, и картина полностью изменится. Потому-то и рекомендуется использовать "звездочку". 200 * 100
Пример:
150 * 2*
Можно устанавливать пропорции для окон. В этом примере левый фрейм будет шириной в 150 пикселов, а остальную часть страницы поделят между собой 2-й и 3-й фреймы, причем третий фрейм будет в 2 раза шире первого.
*
15%
3*
То же, но для рядов: 2-й фрейм занимает 15% от высоты окна, а 1-й и 3-й - все остальное в пропорции 1:3.
Фреймы могут быть вложенными друг в друга. Это позволяет создавать более сложные конструкции страниц. Рассмотрим несколько примеров: 40% 60%
*
В этом примере окно разбито на два фрейма: верхний занимает 25% высоты, нижний - все остальное. В свою очередь верхний фрейм разбит еще на два, где левый фрейм занимает 40% от ширины окна, а правый - 60 процентов.
Еще один пример. Предположим, мы хотим сделать такую страницу: окно, состоящее из левого фрейма шириной 200 пикселов, содержащего меню, и правого с каким-то текстом. Причем в левом фрейме вверху должен быть логотип высотой в 150 пикселов, размещенный в отдельном фрейме, а в правом внизу - баннер, который при скроллинге правого окна все время будет оставаться на месте. Должно получиться следующее: Logo Text
Menu
Banner
Рассмотриматтрибутытегови . Первый из них,
cols и rows - применение и возможные значения этих аттрибутов были рассмотрены выше. Внимание! Не рекомендуется одновременное использование аттрибутов cols и rows, т.е. в некоторых браузерах конструкция
border="x" - толщина рамок фреймов в пикселах;
frameborder="no|yes" или "0|1" - определяет отсутствие (no или 0) или наличие (yes или 1) рамок в определенном фреймсете. Например, таким образом в предыдущем примере можно было бы убрать только рамки между баннером и текстом и между логотипом и меню, а между левым и правым фреймами оставить;
bordercolor="#hhhhhh" - цвет рамок. Значением может быть шестнадцатиричное число или зарезервированное слово (red, blue, teal, olive и т.д.);
Тег может включать следующие аттрибуты:
src="имя" - указывает браузеру, что и откуда надо загружать в данный фрейм;
name="имя" - присваивает имя фрейму. Позволяет управлять данным фреймом из других. Например, клик по ссылке в одном фрейме будет вызывать загрузку страницы в другом фрейме (подробнее в следующем абзаце);
">">scrolling="yes" - определяет наличие полос прокрутки у данного фрейма. Возможные значения аттрибута:
yes - полосы прокрутки присутствуют обязательно;
no - полосы прокрутки отсутствуют всегда - независимо от того, вмещается ли документ в фрейм целиком или нет;
auto - автоматический режим (значение по умолчанию): полосы прокрутки появляются при необходимости, т.е. если документ не вмещается в фрейм;
noresize - наличие этого аттрибута запрещает изменение размеров фрейма пользователем (обычно любую границу фрейма можно с легкостью переместить мышкой).
Как указывалось выше, аттрибут name тега позволяет присвоить каждому фрейму свое имя, что позволяет управлять содержимым одного фрейма из другого (т.е. как в этих уроках - вы кликаете по ссылке в левом фрейме, а меняется содержимое правого). Как это сделать, рассмотрим на примере: Меню Урок 1
В левом фрейме у нас меню, а в правом - урок первый:
Правому фрейму мы присвоили имя "content" (можно любое другое). Теперь создадим файл menu.html, это будет меню для левого фрейма:
menu
Урок 1
Урок 2
Урок 3
Урок 4
Теперь клик по ссылке "Урок 2" вызовет загрузку страницы "urok2.html" в фрейме с именем "content" (т.е. в правом фрейме). При отсутствии аттрибута target (перводится с английского как "цель") загрузка произошла бы в левом фрейме, где находится сама ссылка. Этот аттрибут в данном примере можно указать только один раз - как аттрибут тега , т.е. все ссылки по умолчанию будут загружаться в фрейме с именем "content". В таком случае текст будет выглядеть так:
menu
Урок 1
Урок 2
Урок 3
Урок 4
Кроме имени фрейма значением аттрибута target может быть одно из следующих зарезервированных слов:
_blank - браузер должен открыть новое окно и загрузить в него документ (на который была ссылка) - обычно используется для того, чтобы посетитель не уходил по ссылке с вашего сайта;
_top - браузер должен загрузить документ в этом же окне, предварительно очистив его от всех фреймов - аттрибут с этим значением надо указывать обязательно, если вы делаете ссылку на другой сайт из фрейма. В противном случае этот сайт будет загружен в фрейме;
_self - документ загружается в том же фрейме, где находится сама ссылка. Может потребоваться в случае, если в тексте есть строка ;
_parent - документ загружается в родительский фреймсет текущего фрейма.
Все вышеперечисленные значения должны начинаться с символа подчеркивания и набираться только прописными буквами.
Используя на своем сайте фреймы, нельзя забывать о том, что некоторые браузеры могут не поддерживать фреймы - старые браузеры, речевые и др. Специально для них существует тег noframes, в котором можно сделать "нефреймовую" версию сайта, или хотя бы просто перечислить ссылки на страницы сайта. Пример:
</SPAN></FONT><FONT SIZE=1 STYLE="font-size: 8pt">Уроки</FONT><FONT SIZE=1 STYLE="font-size: 8pt"><SPAN > HTML
В результате браузер, поддерживающий просмотр фреймов, отобразит на эране только фреймы с их содержимым и проигнорирует все, что находится между и . Остальные браузеры не обратят никакого внимания на содержимое контейнера
- рисунок "picture.gif" находится в том же каталоге, что и текущий документ;
- перейти в подкаталог "images" текущего каталога и взять файл оттуда;
- подняться вверх на один шаг, перейти в каталог "images" и взять рисунок оттуда;
- указание полного пути к файлу. Обычно применяется, если рисунок находится на другом сервере, или используется картинка с другого сайта.