	Sign In Sign-Up

Компоновка Web-страниц - одна из важнейших деталей дизайна. Рассмотрим, какие методы имеет HTML для задания выравниваний и отступов.

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

По умолчанию текст выравнивается по левому краю и не выравнивается по правому, т.е. начало строк находится на одном уровне, а концы - на разных. Т.к. этот тип выравнивания задается автоматически, то атрибут ALIGN=LEFT можно опустить.

При задании выравнивания по правому краю концы строк находятся на одном уровне, а начало на разных. Это часто используется при написании эпиграфов или просто для оригинальности дизайна. Для такого типа выравнивания используйте атрибут ALIGN=RIGHT в тегах, например в теге <p> (тег создания абзаца). Учтите, что при задании атрибутов выравнивания с тегом <P> нужно использовать закрывающий тег </P>.

Для центрирования текста и графики в HTML 3.0 используется тег <ALIGN=CENTER>. Однако этот тег применим не для всех объектов, поэтому Netscape добавил тег <CENTER>, который центрирует любые объекты и поддерживается броузерами Netscape Navigator, Intornet Explorer и некоторыми другими.

С помощью атрибута ALIGN= вы можете "обернуть" текст вокруг графического объекта. Для этого поместите тег <IMG SRC="/путь/имя файла"> в том месте, где должен быть графический объект, и добавить атрибут ALIGN=LEFT, ALIGN=RIGHT или ALIGN=CENTER. Кроме того, с помощью атрибутов HSPACE= и VSPACE= задается ширина горизонтальных и вертикальных полей, отделяющих изображение от текста. Можно также создать рамку вокруг картинки или обрамление таблицы текстом.

Этот атрибут задается в теге <BR> и используется для того, чтобы остановить в определенном месте обтекание текстом объекта и продолжить текст ниже объекта. Продолжающийся за объектом текст выравнивается в соответствии со значиниями LEFT, RIGHT или ALL атрибута CLEAR=.
При теге <BR CLEAR=LEFT> текст будет продолжен, начиная с ближайшего пустого поля. <BR CLEAR=RIGHT> - начиная с ближайшего пустого правого поля. <BR CLEAR=ALL> - будет продолжен, когда и левое, и правое поля будут пустыми.

Если вы хотите, чтобы определенный текст (к примеру заголовок) ни при каких обстоятельствах не был разбит на несколько строк, поместите его между тегами <NOBR>. Если этот текст не поместится на экране, то броузер добавит в нижней части окна горизонтальную полосу прокрутки. Если вы хотите оборвать строку в определенном месте, поставьте тег <BR>. Вы можете задавать места, в которых разрешается переносить текст в случае необходимости. Просто поставьте там тег <WBR>.

С помощью атрибута BORDER=n , где n - ширина рамки в пикселях, в теге <IMG> можно задать рамку вокруг изображения. Учтите, Internet Explorer показывает рамку вокруг изображения только, если это изображение является ссылкой. Цвет рамки будет соответствовать цвету ссылки.

Для наилучшего усвоения информации рекамендуется писать не сплошным текстом. Используйте выделение важных мест, отступы и т.д. Это сделает ваши страницы не только легко читаемыми, но и красивыми. Существует несколько методов:

        Для задания отступа перед новам абзацем используется тег <TAB INDENT=n>, где n - число так называемых en-пробелов. Один En-пробел равен ширине буквы n в том шрифте, который вы используете.
       Вообще с пробелами в HTML есть некоторая проблема. Язык HTML всегда уменьшает количество подряд расположенных пробелов до одного, независимо от того, сколько пробелов было в исходном тексте. Для задания необходимого количества подряд расположенных пробелов следует воспользоваться специальным символом пробела -  

        Это ещё один способ выделить определенный текст.
        Существуют три типа списков - ненумерованные, нумерованные и списки-определения.
        У списка может быть заголовок. Введите тег <LH>, и текст после него превратится в красивый заголовок с отступом слева. Закрывающий тег не нужен.
Важной частью ненумерованного списка является маркер - небольшой значок перед строкой списка. Можно задать любой тип маркера в произвольном месте списка. Для этого используется атрибут TYPE=.

        Если вы хотите создать ненумерованный список без маркеров, то воспользуйтесь атрибутом <PLAIN>. Можно, конечно, воспользоваться списком-определением, но, если вы хотите использовать в этом списке несколько маркеров, то <PLAIN> - именно то, что вам нужно.
       Если вам мало стандартных маркеров, то вы можете создавать собственные, используя атрибут SRC=картинка с изображением маркера. Этот атрибут можно задавать в теге <UL>, определив сразу все маркеры списка, а можно использовать разные gif для разных пунктов списка, помещая атрибут SRC= в каждом теге <LI>. Учтите, для использования этого атрибута нужно задать атрибут PLAIN=.
        Для создания нумерованного списка используется тег <OL TYPE=x>, где х - 1, если требуется создать список с нумерацией в формате 1,2,3,4...; А - создает список вида А,В,С,D...; а - а,b,c,d...; I - I, II, III, IV.., i - i, ii, iii, ...

        Для смены порядка нумерации используются атрибуты SKIP=, START= и VALUE= в теге <LI> или <OL>.
      Атрибут SKIP= пропускает заданное число пунктов нумерации.
      START= используется для указания места, с которого в заданном типе нумерации (числа, буквы, римские цифры) начать нумеровать список.
     Атрибут VALUE= присваивает определенный номер данному пункту нумерованного списка. После задания этого атрибута последующие пункты будут нумероваться, начиная с заданного в этом атрибуте номера.

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

      Шрифт - очень важная часть дизайна web-страниц. Он позволяет придавать тексту определенную выразительность, эмоциональность. Строгие шрифты показывают важность текста, его официальность. Рукописные шрифты придают тексту некоторую красоту, поэтичность и т.д. Существует огромное множество шрифтов, но существует проблема. HTML сейчас только начинает развиваться в области использования шрифтов. В классическом HTML 3.0 эта проблема решена единственным образом - доступны шрифты, установленные в системе пользователя с помощью атрибута FACE=. Сейчас появляются все новые технологии. Например загрузка шрифтов из Интернета или встраивание шрифтов непосредственно в документ. Ещё одной новаторской идеей в этой области является использование графических литеров с определенным начертанием вместо текста. После загрузки 2-3 листов, написанных таким методом, почти все буквы оказываются загруженными в кеш броузера и открытие последующих страниц происходит очень быстро.
        Используйте шрифты! Наберитесь смелости и предположите, что в большинстве систем установлены шрифты, поставляемые с Windows95, MsOffice, MsPluse и т.д. Если вы не уверены в наличии какого-либо шрифта - используйте список шрифтов. Рассмотрим, что предлагают стандарты HTML для использования шрифтов.
       Для задания размера шрифта используется атрибут SIZE= в теге FONT=. Можно задавать базовый размер шрифта тегом <BASEFONT SIZE=x> для использования на всей странице, а в нужных участках текста использовать атрибут SIZE= для задания размера определенного участка. По умолчанию используется тег <BASEFONT SIZE=3>. Заголовок <H1> имеет размер 6. Чтобы сделать шрифт больше, чем <H1> используйте размер шрифта равный 7. Основное отличие тега <FONT> от <Hx> заключается в том, что он не разбивает строку.
       Для задания размера текста существуют и другие теги. Это теги <BIG></BIG> и <SMALL></SMALL>. Заключенный между ними текст будет соответственно больше или меньше окружающего текста.
       Вы можете использовать все буйство красок на своей странице, применяя тег COLOR= (подробнее смотрите этот раздел на страничке HTML с нуля).
       Использование шрифтов я уже рассматривал на страничке "HTML с нуля". В HTML можно использовать вышеуказанный список шрифтов в теге <FONT>. Вы можете перечислить в этом списке несколько шрифтов, из которых броузер выберет первый установленный в системе и использует его для отображения текста. Например <FONT FACE="ARIAL, COMIC SANS MS, Tahoma, AG_Cooper">Ваш текст</FONT>.

В HTML используется набор 8-разрядных однобайтовых символов ISO 8859/1, который также известен как Латинский алфавит N 1 (Latin-1). Это набор из 256 символов, который содержит много графических элементов и символов с диакритическими знаками, необходимых для текстов на большинстве европейских языков, в том числе и на английском. Младшие 128 кодов символов ISO 8859/1 практически те же, что и в ASCII, и этот поднабор иногда называют International Reference Version, или ISO-646. На практике из-за ограниченного набора символов клавиатуры и в целях переносимости на другие процессоры и платформы большинство документов HTML содержат знаки только из первой половины кодовой таблицы ASCII. Но в издательской деятельности часто необходимы многие иные символы, например с диакритическими знаками или преобразованные другим способом, значки валют, торговой марки и копирайта, не входящие в набор ASCII. Кроме того, в языке HTML символы <> используется как символы, открывающие и закрывающие тег, поэтому они не могут использоваться в тексте (например для отображения математических выражений). Таже проблема и с символами "(кавычка) и &(амперсанд). Для отображения таких символов используются так называемые "escape-последовательности", которые могут использоваться для кодирования символов, не входящих в таблицу ASCII и входящих в команды HTML. В спецификациях HTML эти escape-последовательности называются символьными объектами (character entities).

Полный список escape-последовательностей вы можите найти по адресу http://info.cern.ch

Для создания линий используется тег <HR> с атрибутами SIZE=, WIDTH=, ALIGN=, задающими соответственно высоты в пикселях, ширины в пикселах или в процентах от размера окна и выравнивание. И атрибут NOSHADE - создает линию без рельефности. С помощью этих атрибутов можно создавать очень разнообразные и, порой, странные вещи. Например тег <HR NOSHADE SIZE=30 WIDTH="30%" ALIGN=LEFT> SIZE=20 WIDTH="40%"

        Тег <META> работает в заголовке страницы между тегами <HEAD></HEAD>. Тег <META> содержит определенную информацию о страничке, на каторой он находится. В нем может содержаться информация, предписывающая броузеру просматривать эту web-страницу в той или иной кодировке или загружать через определенное время другую страницу, информация об авторе, о программе, создавшей эту страницу. Кроме того, тег <META> помогает в навигации в Интернете, т.к. большинство поисковых систем обрабатывают информацию, специально вставленную в этот тег. Поэтому я рекомендую использовать этот тег для увеличения посещаемости вашей странички. Как видите, этот тег имеет очень широкую область применения. Рассмотрим три наиболее важных аспекта его применения.
                     1. Задание отображения страницы.
     Немного углубимся в проблему кодовых страниц (если вам о них все известно, то просто пропустите этот абзац). Компьютер все "понимает" только в виде чисел. А как написать буквы? Как сопоставить буквы числам? Для этого используются кодовые страницы. Это таблица, в которой по вертикали и горизонтали записаны цифры, а в - ячейках буквы. Компьютер получает цифры, подставляет их в эту таблицу и ... о чудо ... получает буквы. Но проблема в том, что таких таблиц существует множество (особенно много их в многострадальной России). Наиболее популярными считаются КОИ-8 и Windows-1251(эта страничка написана именно в этой кодировке). Если web-страничка написана в одной кодировке, а броузер читает ее в другой, то получается полная ЕПСМДЮ (слово "ерунда" в кодировке КОИ-8).
        Перед публикацией страниц в Интернете уточние, какие кодовые страницы поддерживает тот сервер, куда вы собираетесь положить свое произведение искусства (например, уточните у своего провайдера, если вы размещаете свою страницу на его сервере). Если вы создали страницу например в Windows-1251, а вам нужно КОИ-8, то воспользуйтесь каким-либо редактором (например, FrontPage) и сохраните страницу в нужной вам кодировке или используйте специальные перекодировочные программы. Например, эту.
        Для того, чтобы броузер показывал страницу именно в той кодировке, которая нужна, используйте тег <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=windows-1251"> или charset=KOI-8.
                      2. Автозагрузка страниц.
      Здесь существуют два метода. Первый перезагружает страницу через определенное время. Второй вызывает другую страницу через определенный интервал. Первый метод часто используется для страниц с автоматически обновляемой информацией (например, виртуальные камеры). Второй - для демонстрации страниц как слайдов, в презентации.
      Для реализации первого метода используйте тег <META HTTP-EQUIV="refresh" CONTENT=x>, где x - количество секунд, по прошествии которых страница будет перезагружена. Не забывайте, что этот тег должен использоваться только в заголовке страницы (тег <HEAD></HEAD>). Второго - тег <META HTTP-EQUIV="refresh" CONTENT="x url=адрес">, где x - время в секундах, по истечению которого будет загружена страница, расположеная по адресу (например http://www.vrn.ru). Можно на странице, указанной в атрибуте url разместить такой же тег, указывающий на другую страницу и т.д. Так вы проведете пользователя по всем страницам вашей презентации. Только не злоупотребляйте. Лучше дайте знать о таком путешествии пользователю, ибо он будет слишком сильно удивлен. И не забывайте на последней странице не ставить этот тег, а то его укачает в Интернете :-).
                  3. Сделайте так, чтобы о вашей странице знал весь мир.
       Для этого используйте два тега <META> со следующими параметрами:
<META NAME="description" CONTENT="Описание странички. Это то описание, которое получает пользователь при поиске. Основная информация о вашей страничке">
<META NAME="keywords" CONTENT="Ключевые слова через запятую. Если они совпадут с ключевыми словами, по которым пользователь делает запрос в поисковой системе, то он найдет вашу страницу">
       Я советую вам прочитать статью Антона Носика "МЕТА: вместо предисловия". В ней он отлично описывает именно этот аспект применения тега <META>.

Теги, заставляющие вашу страницу плясать :-)

        1. Бегущая строка.
Это интересный тег, позволяющий выводить информацию в виде бегущей строки. Тег <MARQUEE>. К сожалению он работает только в Internet Explorer. Если вы просмотрите этот тег в другом броузере, то увидите просто статичную строчку текста. Для создания бегущей строки просто поместите ваш текст между тегами <MARQUEE></MARQUEE> и он "побежит". Существует несколько атрибутов этого тега. Это:
   ALIGN=, размещающий текст в верхней (TOP), средней (MIDDLE) и нижней (BOTTOM) части бегущей строки;
   BEHAVIOR=, управляющий движением текста. Если его нет, то текст пробегает справа налево. Если задать BEHAVIOR=SCROLL, то текст будет просто пробегать по экрану. Это значение по умолчанию. Если указать BEHAVIOR=SLIDE, то текст выползает на экран и останавливается. Если использовать параметр ALTERNATE, то текст будет сначала выползать на экран, а потом, отскакивая от боковых стенок, прыгать;
   BGCOLOR= ,задает цвет фона бегущей строки. Используются значения в шестнадцатиричном формате или именованные цвета (подробнее о последних смотрите на страничке "HTML с нуля");
   DIRECTION=, указывает направление движения текста (LEFT или RIGHT);
   HEIGHT= и WIDTH= задают толщину и ширину бегущей строки в пикселях или процентах от размера окна;
   HSPACE= и VSPACE= задают горизонтальные и вертикальные поля вокруг бегущей строки;
   LOOP= задает количество "пробегов" текста. Если вы хотите заставить бедный текст бегать вечно, то не используйте этот атрибут или задайте LOOP=INFINITE;
   SCROLLAMOUNT= определяет скорость "пробегания". Задается числами. 1 примерно равен скорости улитки, ползущей по минитору в то время, когда вы играете в сетевой тетрис (просто улитка постоянно ругается при этом), 3000 - как тетрис, написанный в 1987 году запущенный вами на PentiumII, а при SCROLLAMOUNT=8000 - хм, вы просто ничего не увидите;
  для правильного задания скорости бегущей строки используйте вместе с предыдущем атрибутом атрибут SCROLLDELAY=, задающий скорость прорисовки текста в миллисекундах.
        2. Мигающий текст.
   Применяя теги <BLINK></BLINK>, вы можете заставить текст, расположенный между ними, мигать. Этим не нужно злоупотреблять. Используйте его для выделения новой информации. Учтите, он работает только в NN.
        3. Фоновая музыка.
   Вы можете сделать так, что бы на вашей страничке играла музыка. Используйте для этого тег <BGSOUND SRC="имя файла в формате wav, av, mid" LOOP=x>, где x - число повторений или напишите LOOP=INFINITE, если хотите, чтобы ваш файл повторялся вечно.
        4. Java, Javascript, ActivX.

       Таблицы - это не просто ячейки, в которых находятся цифры и слова. На данном этапе развития методов форматирования web-страниц таблицы являются мощнейшим средством компоновки страниц. Края таблицы могут быть невидимыми и тогда пользователь даже не узнает, что вы используете таблицы.
       Для создания таблицы используется тег <TABLE></TABLE>. Между этими тегами располагаются теги <TR></TR>. Они окружают каждую строку таблицы. Если вы хотите создать несколько строк в таблице, используйте столько же тегов <TR></TR>. В каждой строке таблицы обычно отображаются ячейки. Каждая ячейка должна быть окружена тегами <TD></TD>. Количество этих тегов в строке определяет количество ячеек. Число ячеек в строках не обязательно должно быть равно.
        Следующее, что нужно создать, - это заголовки столбцов и строк. Для их создания, вместо простой строки, создайте заголовок, разместите текст между тегами <TH></TH>. Этот текст будет отображет жирным шрифтом и отцентрирован.
        Рассмотрим некоторые атрибуты.
        Атрибут NOWRAP. Он используется в тегах <TH></TH> или <TD></TD> для того, что бы ваш текст помещался в одной строке (ячейка при этом расширяется).
       Атрибут COLSPAN=x. Если вы хотите сделать какую-нибудь ячейку шире выше или ниже стоящих, то используйте этот тег. X - количество ячеек, на которые растягивается ваша ячейка.
       Атрибут ROWSPAN=x. Этот атрибут аналогичен предыдущему, только он растягивает ячейку на x строк.
      Атрибут WIDTH=x. Этот атрибут определяет ширину таблицы, если он задан в теге <TABLE>, группы ячеек или ячейки, если указан в теге <TR></TR> или <TH></TH>. X - ширина в пикселях или в процентах. Оптимальным значением является WIDTH=50%.
      Атрибут UNIT=. Он применяется в теге <TABLE> для определения единицы измерения размеров в таблице. Атрибут принимает следующие значения:
          UNIT=EN - в en-пробелах,
          UNIT=RELATIVE - относительные значения в процентах от общей ширины таблицы,
          UNIT=PIXELS - в пикселях, например <TABLE UNIT=PIXELS WIDTH=200> создает таблицу шириной в 200 пикселей.
      Атрибут COLSPEC=. Используется с атрибутом UNIT=. Он задает, сколько места занимает каждый столбец таблицы и тип выравнивания данных. Применяется только в теге <TABLE>. В атрибуте COLSPEC= перечисляются все столбцы и для каждого задаются выравнивания (один из пяти типов: L - по левому краю, С - по центру, R - по правому краю, J - по правому и левому краю, D - по десятичной запятой) и размер (в пикселях). Например тег <TABLE UNIT=PIXELS COLSPEC="L10 C20 R10"> определяет таблицу, в которой первая ячейка шириной в 10 пикселей и выравниванием по левому краю, вторая - 20 пекселей и выравниванием по центру, третья - 10 пикселей, выравнивание по правому краю.
      Атрибут DP=. Определяет символ, используемый для отделения целой части десятичной дроби. По умолчанию используется тег DP=".", определяющий в качестве разделителя точку. Атрибут DP="," задает запятую.
      Атрибут CELLPADDING=x. Определяет поле вокруг содержимого ячейки. X - число пикселей.
      Атрибут ALIGN=. Используется в тегах <TR>, <TD>, <TH>. Он определяет выравнивание содержимого по горизонтали. Значения атрибута могут быть следующими:
            ALIGN=LEFT - выравнивает содержимое ячейки по левому краю,
            ALIGN=CENTER - по центру,
            ALIGN=RIGHT - по правому краю,
            ALIGN=BLEEDLEFT - предыдущие значения учитывали отступ, заданный атрибутом CELLPADDING. При задании этого атрибута содержимое ячейки прижимается вплотную к левому краю.
       Атрибут VALIGN=. Сходен с предыдущим, но задает выравнивание по вертикали. Значения:
           VALIGN=TOP - выравнивание содержимого по верхней границе,
           VALIGN=MIDDLE - центрирует по вертикали,
           VALIGN=BOTTOM - выравнивает по нижней границе.
       Для создания заголовков таблицы существует тег <CAPTION>. Заголовок может быть над таблицей (<CAPTION ALIGN=TOP>), или под таблицей (<CAPTION ALIGN=BOTTOM>). Заголовком может быть текст или графика. Этот тег хорош для создания подписей под рисунками, заключенными в таблицу без границ.
       Основной частью таблицы являются границы ячеек. Для управления толщиной границ используется атрибут BORDER=x. Вы можете сделать таблицу вообще без границ, задав атрибут в теге <TABLE BORDER=0>. Читатель вашей страницы даже не будет знать, как вы добились такой точной компоновки содержимого. Напротив, использовав толстые границы, вы привлекаете внимание к таблице. Можете задать красивую толстую рамку вокруг картинки, и это будет похоже на настоящию рамку.
        Для задания толщины промежутков между ячейками используется атрибут CELLSPACING=x. По умолчанию x=2 пикселям. Этот атрибут хорошо использовать вместе с атрибутом BORDER= для задания красивых рамок вокруг изображений.
       С помощью таблиц можно сделать красивые выпуклые панельки с графикой или текстом.

код HTML

отображаемый текст

<CENTER>
<TABLE CELLPADDING=10 CELLSPACING=0 BORDER=16>
<TR>
<TD ALIGN=CENTER BGCOLOR="#C0C0C0"> <H1>...выпуклые...</H1>
</TD>
</TR>
</TABLE>
</CENTER>

...выпуклые...

Можно задать цвет фона каждой ячейки с помощью атрибута BGCOLOR=код цвета.

код HTML

отображаемый текст

<CENTER>
<TABLE CELLPADDING=10 CELLSPACING=0 BORDER=16>
<TR>
<TD ALIGN=CENTER BGCOLOR="red"> <H1>...выпуклые...</H1>
</TD>
</TR>
</TABLE>
</CENTER>

...выпуклые...

        Для раскраски линий таблицы используется атрибут BORDERCOLOR=код цвета. Так же можно задать цвета светлых и темных границ таблицы (обычно используются светло-темный и темно-темный цвета для придания таблице эффекта объемности) с помощью атрибутов BORDERCOLORDARK=код цвета и BORDERCOLORLIGHT=код цвета.
       Это отличные способы задания цвета таблиц, но они работают только в IE. Для задания цвета таблиц в Netscape Navigator приходится использовать некоторый трюк. Если на вашей страничке используется картинка в качестве фона (если нет, можете использовать просто маленькую полоску нужного вам цвета) то вы можете задать второй фон определенного цвета (задав его в теге <BODY>, например <BODY BACKGROUND="bkgrd.gif" BGCOLOR="#FF0000">, не задавайте именованные цвета, т.к. вы оптимизируете страницу для отображения в NN). Дополнительный фон красного цвета в нашем примере будет просвечиваться через все границы таблиц и горизонтальные линии.
     Вот и все относительно таблиц. Не бойтесь экспериментировать с ними, и вы добьетесь потрясающих эффектов. Кроме того, помните: таблицы без границ (BORDER=0), к сожалению, основное средство компановки страниц на данный момент развития HTML. (правда уже появился HTML4.0, так называемый динамический HTML. Посмотрим, что предоставит он нам нового. Когда-нибудь я расскажу и о нем на страницах моего сайта).

       Большинство современных броузеров могут показывать в одном окне несколько отдельных страниц. Достигается это применением кадров. В каждом кадре выводится по страничке. Управляя кадрами можно создать очень приятный интерфейс. Например, можно слева вывести узкий кадр с оглавлением страницы, справа вверху показать фирменную эмблему и кнопки для упрощения навигации, а справа внизу саму страничку.
      Для использования кадров создают страничку, в которой описывается вся кадровая структура. При просмотре этой странички выводятся другие страницы в определенных кадрах. Весь этот танец с кадрами описывается именно в кадровой структуре. Для задания кадров используется тег <FRAMESET>. Ну что, приступим, как говорят наши доктора.
      В странице с кадровой структурой нет тега <BODY>. После тега </HEAD>, закрывающего описание "шапки" этой страницы напишем тег
<FRAMESET COL="20%, 80%"> - здесь описывается количество кадров, их размер в пикселях или процентах от размера окна и расположение окон (по горизонтали или вертикали). В данном случае мы создаем два кадра: один слева шириной 20%, другой, правый, занимает оставшиеся 80% окна.
<FRAME SRC="имя1"> - это описание первого кадра.(имя - это имя странички, которая будет показываться в этом кадре. Если нужно, в имени может фигурировать и путь к этой страничке. Например, вместо имя напишите http://ic.vrn.ru/~ppvasia/rightframe.htm или просто rightframe.htm, если этот файл находится в текущей директории)
<FRAME SRC="имя2" NAME="main"> - это описание второго кадра. Как видите, здесь, кроме указания странички, задается имя кадра для использования в дальнейшем. Это нам понадобится потом для указания, в каком кадре открывать ссылку. В первом кадре мы ничего открывать не будем, кроме странички с оглавлением.
</FRAMESET> - закрытие тега <FRAMESET>
<NOFRAMES> - между этим тегом и закрывающим тегом </NOFRAMES> находится информация, которую увидит пользователь, броузер которого не поддерживает кадры.
Вы смотрите эту страницу броузером, не поддерживающим кадры. Я рекомендую вам установить обновленную версию вашего броузера для просмотра моего и других сайтов. Вы можите загрузить новые версии из Интернета по адресам:
http://www.microsoft.com/ie/ - Internet Explorer 3.0 или выше
http://www.netscape.com - Netscape
</NOFRAMES> - это закрывающий тег
Не забудьте дописать закрывающий тег </HTML>
       Затем создайте соответствующие страницы. Это обыкновенные страницы. Единственная особенность этих страниц в том, что им отводится меньше, чем обычно, места. В ссылки страницы с оглавлением следут добавить атрибут TARGET="main" для того, чтобы они открывались не в текущем кадре, а в основном кадре с именем main (помните, мы задавали его в описании второго кадра?).
       Как видите, кадры очень просты в использовании. Теперь давайте узнаем о них побольше, чтобы они стали не только простым, но и эфективным инструментом в web-дизайне.
       Теги <FRAMESET>. Они содержат информацию о количестве будущих кадров, их размерах и ориентации. Здесь могут быть только два атрибута: ROWS=, задающий количество и размер кадров по горизонтали, и COLS=, задающий число и размер кадров по вертикали.
       Тег <FRAME>. Он определяет внешний вид кадров и их поведение. Он может иметь следующие атрибуты:
               NAME=. Этот атрибут задает именя кадра для использования этой информации в ссылках при открытии их именно в этом кадре.
              MARGINWIDTH=. Этот атрибут задает горизонтальный отступ между содержимым кадра и его границами. Наименьшее значение 1. По умолчанию отступ равен 6.
              MARGINHEIGHT=. То же, что и предыдущий, но задает поля в верхней и нижней части кадра.
              SCROLLING=. Управляет прокруткой. Варианты этого тега: SCROLLING=YES - создает полосы прокрутки, даже если это не требуется; SCROLLING=NO - полос прокрутки не будет никогда; SCROLLING=AUTO - вывод полос прокрутки автоматически, если это нужно, задается по умолчанию.
             NORESIZE - делает невозможным изменение размера кадра, используя мышь.
             SRC=. Это обязательный атрибут, задающий страницу, показываемую в этом кадре.
             TARGET=name. Этот атрибут используется в ссылке для открытия ссылки в кадре с именем name. Используйте этот атрибут внимательно, т.к. если вы зададите в ссылке несуществующее имя кадра, то могут произойти непредсказуемые вещи (в частности появление новых окон просмотра).
      Кроме обыкновенных кадров существуют так называемые "волшебные кадры". Их имена начинаются с символа "_". Никакие другие кадры не могут так называться. Посмотрим, какое тут может быть волшебство.
     Кадр "_blank". Если атрибут TARGET= ссылается на кадр с таким именем, то ссылка откроется в новом пустом окне.
    Кадр "_self". Ссылка, открытая в кадре с таким именем, откроется в текущем кадре. Даже если вы до этого применили атрибут BASE= (например, <BASE TARGET=" main">), предписывающий открываться этому документу по умолчанию в определенном кадре.
    Кадр "_parent". Ссылка открывается в родительской кадровой структуре. Это очень глючный кадр. Лучше избегать его, если только он вам обязательно не нужен.
    Кадр "_top". Ссылка, открывающаяся в этом кадре, будет показывать соответствующую страницу в новом окне.

Существуют еще так называемые плавающие окна. Выглядит это, как окно на страничке, в котором показывается другая страничка. Создается с помощью тега <IFRAME NAME=" content_frame " width=" x " height=" y " SRC="имя.htm "> Комментарий, который будет выводиться вместо окна в броузере, не поддерживащем плавающие окна</IFRAME>. Здесь x - ширина окна в пикселях, y - высота в пикселях, имя - имя страницы, отображаемой в окне. К сожалению этот тег работает только в IE 3.0 и выше.

Дополнение к сказанному в "HTML с нуля" о ссылках.

         К сказанному в "HTML с нуля" я хочу добавить о метках. Под меткой подразумевается определенное место в страничке, к которому можно перейти по ссылке.
         Для создания метки следуте записать <A NAME="#имя метки"></A> в том месте, куда нужно перейти. А в месте, откуда будет произведен переход, записать <A HREF=имя метки>Название ссылки</A>. Вот и все. Так просто. Этот отличный метод организации оглавления.
         Если вам нужно перейти на метку, находящуюся в другом документе, используйте ссылку <A HREF="имя файла#имя метки">Название ссылки</A>. Например, <A HREF="index.htmимя файла#имя метки">Название ссылки</A>

Об изображениях, а точнее, об активных изображениях.

         Активное изображение - это изображение, на котором находятся несколько активных областей (hot spots). Каждая из этих активных областей ссылается на определенную страницу. Активные изображения - это отличный метод создания красивых и удобных меню.
         Различают два типа активных изображений: активные изображения, работающие на сервере, и активные изображения, работающие на стороне клиента. Первый тип для своей работы использует cgi-сценарий. Это программа, работающая на сервере. Такие программы выполняют многие процессы на страничках. Например, большинство гостевых книг работают на основе таких программ. Пишутся cgi-скрипты чаще всего на языке Perl. Эти скрипты практически отживают свою жизнь, т.к. в настоящее время существуют более совершенные технологии. Например Java. Проблема cgi-скриптов заключается в том, что они выполняются на сервере. Это серьезная угроза для безопасности сервера. Кроме того, они требуют определенных ресурсов системы. Большинство системных администраторов не разрешают пользоваться директорией cgi-bin, в которой запускаются эти программы. Выходом из такой проблемы являются многочисленные бесплатные сервисы, предоставляющие возможность использовать наиболее распространенные cgi-скрипты на страницах просто вставляя куски HTML-кода.Смотрите списки таких сервисов и многое другое на странице "Ссылки для web-мастера". Понятно, что такой метод не очень удобен и доступен немногим, но его поддерживают почти все броузеры. Второй метод не требует использования сервера вообще, но он работает только в броузерах, поддерживающих HTML3.0 (Internet Explorer, Netscape Navigator 2.0, Mosaic 2.0 и более современные). Я думаю, что следует использовать второй метод, хотя, если некоторые из выших клеентов работают со старыми броузерами, то придется использовать первый метод или сразу оба метода (мне кажется, лучше просто попросить человека со старым броузером загрузить более современную версию).
         Создание активных изображений вручную - довольно трудоемкий процесс, т.к. требуется задавать много активных областей в координатах. Лучше всего использовать программы, созданные специально для задания активных областей и простого формирования всего активного изображения. Кроме того, такую функцию поддерживают большинство HTML редакторов, например FrontPage, от Microsoft. Если вы не используете его, попробуйте MapEdit..
         Посмотрим, как создаются активные изображения вручную. Возмем например кртинку img.gif размером 100x20 (например, с надписью "Гостевая книга": ДОБАВИТЬ - ПРОСМОТРЕТЬ) и создадим две активные области прямоугольной формы. Одна будет ссылаться на страницу sign.htm, другая - view.htm. Делается это с помощью следующего кода:

код HTML

отображаемый текст

Атрибут SHAP= может принимать значения: RECT, CIRCLE, POLYGON. В атрибуте COORDS= задаются координаты вершин. Для прямоугольной активной области координаты задаются абсциссой и ординатой вернего левого угла и координатами правого нижного угла. Для задания круглой активной области используются три координаты: координаты центра окружности и радиус. Активная область полигональной формы задается координатами каждой точки. Общий вид атрибута - COORDS="x,y,...".

Ну, вроде бы все. Если у вас есть какие-нибудь предложения, дополнения, изменения, желания прочесть ещё о чем-либо, напишите мне.
Теперь, посмотрите как можно дабавить волшебства в ваши web-страницы. Такие вещи как Javascript, Java, ActivX, cgi-bin и другие могут поднять ваши страницы на совершенно новый уровень развития. И это без непосредственного програмирования. Просто вставьте кусок кода в вашу страницу и маленькое чудо засверкает и на вашей страничке. Кроме того, смотрите ссылки на ресурсы для Web-мастера.