Коваленко Григорий Федорович

HTML ДЛЯ НАЧИНАЮЩИХ

учебное пособие

Содержание:

HTML - язык представления информации в Интернет
Строение HTML документа
Обязательные и не очень метки
Оформление текста документа
Как вставить в документ рисунок
Списки (нумерованные и маркированные)
Как сделать таблицу
Как сделать ссылку
Фреймы - просто и эффективно
Секреты заголовков

HTML - язык представления информации в Интернет

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

Давайте выясним, что такое HTML? Ответ прост - способ представления информации в глобальной информационной сети согласно стандарта (своего рода язык для браузеров) Hyper Text Markup Language.

Чтобы было уж совсем просто, HTML документ это обычный текстовый файл, оформленный с учетом некоторых требований.


Для подготовки своей странички можно использовать два способа:
  1. Любой из визуальных редакторов, например Front Page Express, из комплекта Windows 98 (тогда, увы, то что написано ниже и читать не стоит)
  2. Редактор для подготовки HTML документов, то есть такой способ, когда думать будете Вы, а программа будет помогать делать эту работу быстрее. Когда нет вообще ничего, сойдет и простой Notepad - сохраняйте файлы с расширением *.htm и смотрите в "Обозревателе" или "Коммуникаторе", для большинства документов результат будет один и тот же.
Надеюсь, что информация описанная ниже позволит Вам быстро освоить все ньюансы при создании простых HTML документов
К содержанию

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

Любой HTML документ имеет определенную структуру или каркас. Посмотрите на "типовой" пример:
<HTML>
     <HEAD>
           <TITLE>
 Этот текст будет виден в заголовке окна браузера 
           </TITLE> 
     </HEAD>
<BODY>
     <Center><H1> ЗАГОЛОВОК ВАШЕЙ СТРАНИЦЫ БУДЕТ  РАСПОЛОЖЕН ПО ЦЕНТРУ</H1></Center>
<P>А здесь Вы размещаете текст ( информацию) и рисунки</P>
</BODY>
</HTML>

Хотите посмотреть как это работает - скопируйте выделенный фрагмент через буффер обмена в Notepad или HTML редактор и сохраните, как primer01.htm .

Для просмотра откройте браузер и в строке адрес введите путь к документу, например: C:\HTML\primer01.htm. Для тех, кто уже освоил Windows98 - в меню "Обозревателя" выберите "Переход" - "Мой компьютер", войдите в каталог, где Вы сохранили файл primer01.htm, откройте его.

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

Несколько коротких выводов:
К содержанию

Обязательные и не очень метки

Обязательные метки - такие, без которых просмотр HTML документа будет невозможен. К ним относятся:

Необязательными метками считаются такие, которые могут отсутствовать, и при этом документ будет исправно работать (показываться в браузере). Вот несколько примеров:
<Н1>....</H1> - описывает заголовок с уровнем 1. Таких уровней может быть 6:

<Н1>- самый БОЛЬШОЙ


<Н2> - чуть МЕНЬШЕ


<Н3> - это СРЕДНИЙ


<Н4> - теперь МАЛЕНЬКИЙ


<Н5> - меньше, ЧЕМ Н4

<Н6> - самый МАЛЕНЬКИЙ

А вот еще - <P>....</P> - метки абзаца, от слова Paragraf. Все что между ними, считается одним целым - абзацем.


<CENTER>....</CENTER> - располагает текст с выравниванием по центру.

Попробуем создать еще один HTML документ:
<HTML>
<HEAD>
<TITLE>
The home page Smirnof Alexander
</TITLE> 
</HEAD>
<BODY>
<Center><H1> The home page Smirnof Alexander </H1></Center>
<Center><H2>Добро пожаловать на персональную страницу Александра Смирнова</H2></Center>
<P>Здесь Вы узнаете как создать свою персональную страницу </P>
<P>Обратите внимание, что текст расположен по левому краю страницы.
Для того, чтобы выполнить просмотр - скопируйте выделенный фрагмент в свой 
HTML редактор и сохраните документ как prim02.htm и естественно
откройте документ в браузере.</P>
</BODY>
</HTML>
Надеюсь, что в результате просмотра Вы увидите следующее:

The home page Smirnof Alexander

Добро пожаловать на персональную страницу Александра Смирнова

Здесь Вы узнаете как создать свою персональную страницу

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

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

К содержанию

Оформление текста документа

При оформлении текста документа будут использоваться следующие понятия:
Физические стили - привычные нам термины "Bold(жирный)", "Italik(курсив)", "Underline (подчеркнутый)" или их сочетания.
Логические стили - такие как "Акцент", "Сильный Акцент", "Мигающий", "Текст пишущей машинки" и некоторые другие.
Как это будет выглядеть на примере: 
<HTML>
<HEAD>
<TITLE>
Оформление текста HTML страницы
</TITLE> 
</HEAD>
<BODY>
<P>Внешний вид текста странички можно изменить. Используйте метки:</p>
<B>Полужирный</B>,
<I>Курсив</I>,
<B><I>Полужирный курсив</I></B>,
<P>Или стили оформления:</P>
<EM>Акцент</EM>, <Strong>или Сильный Акцент</Strong>,<BLINK>Мигающий</BLINK>,
а также<TT>И ТЕКСТ ПОДОБНЫЙ ПИЩУЩЕЙ МАШИНКЕ</TT>
</BODY>
</HTML>
Для просмотра результата действий меток и стилей Вы можете набрать текст вручную или скопировать его в свой HTML редактор через буфер обмена, не забудьте перед просмотром сохранить работу - назовите файл formtext.htm.
Увы с оригиналом не совпадает, и выглядит примерно так:

Внешний вид текста странички можно изменить. Используйте метки:

Полужирный, Курсив, Полужирный курсив,

Или стили оформления:

Акцент, или Сильный Акцент, Мигающий,а также ТЕКСТ ПОДОБНЫЙ ПИЩУЩЕЙ МАШИНКЕ

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

Для случая принудительного перехода на новую строку (в том числе и внутри абзаца) будем использовать непарную метку <BR> сокращение от команды Break (прервать). Такая метка ставится в конце строки.

Попробуем на примере:
<HTML>
<HEAD>
<TITLE>
Оформление текста HTML страницы
</TITLE> 
</HEAD>
<BODY>
<P>Принудительное прерывание строки в тексте 
HTML документа</p>
Это первая строка без прерывания,
а это вторая строка, в окне браузера они будут показываться слитно<BR>

А теперь тоже самое (первая), но с меткой <BR>

и конечно следущая строчка текста.
</BODY>
</HTML>
Давайте посмотрим как это выглядит в окне браузера:

Принудительное прерывание строки в тексте HTML документа

Это первая строка без прерывания, а это вторая строка, в окне браузера они будут показываться слитно
А теперь тоже самое (первая), но с меткой <BR>
и конечно следущая строчка текста.

При приведениии примеров исходных текстов я применял сплошные линии с помощью метки <HR>. Используя дополнительные настройки (читай - параметры) можно изменять как длину линии, так и ее высоту. Проверьте следующий пример:

<HTML>
<HEAD>
<TITLE>
Оформление текста HTML страницы
</TITLE> 
</HEAD>
<BODY>
<H3>Использование горизонтальных линий </H3>
Вот несколько примеров:<BR> 

линия на всю ширину экрана<BR> 

<HR>

линия на 80% экрана<BR>

<HR WIDTH=80%><BR>

С помощью параметра 
"WIDTH=30%" выбирается 
"процент" занимаемой части экрана,
а параметр "SIZE=10",
помогает настроить высоту, естественно в пикселях например<BR>

<HR  SIZE=10 WIDTH=30%><BR>

Попробуйте изменять эти параметры и Вы "построите"
нужную горизонтальную линию в любой момент.

Параметр "NOSHADE" позволит сделать сплошную линию.Такую как здесь:<BR>

<HR  SIZE=5 WIDTH=70% NOSHADE><BR>

</BODY>
</HTML>
Проверка примера приведена ниже:

Использование горизонтальных линий

Вот несколько примеров:
линия на всю ширину экрана

линия на 80% экрана

С помощью параметра "WIDTH=30% " выбирается "процент" занимаемой части экрана, а параметр "SIZE=10", помогает настроить высоту, естественно в пикселях например:

Попробуйте изменять эти параметры и Вы "построите" нужную горизонтальную линию в любой момент.
Параметр "NOSHADE" позволит сделать сплошную линию.Такую как здесь:

И еще несколько меток, которые будем применять при создании HTML документов.

<FONT COLOR="FF0000">этот текст красный </FONT> устанавливается цвет текста документа. Где COLOR="значение" является параметром. Любой цвет на экране браузера отображается в виде комбинации (смешивания трех цветов - красного,зеленого и синего в диапазоне от 00 (ноль) до 255 (FF)). Например для текста выше FF - красный максимум (255), зеленый и синий ноль, в результате получаем красный цвет текста
Можно также изменять и размер шрифта с помощью параметра SIZE=6, например как здесь:
РАЗМЕР шрифта SIZE=6. Таких размеров всего 7, от 1 (крошечный) до 7 (громадный).
Можно выбирать и сам шрифт используя параметр FACE="Имя шрифта", например шрифт BetinaCTT. Если на компьютере установлен такой, Вы увидите, что начертание шрифта использовано в слове "BetinaCTT".
<BODY BACKGROUND="FFF000" TEXT="#800000" LINK="#0000FF"> позволят установить цвет фона, текста и ссылок (линков). Причем эта метка заменяет открывающую метку<BODY>.

Для отображения текста в окне браузера в точном соответствии с набором в редакторе применяется метка <PRE>.....</PRE> сокращение от английского "preformated" - предварительно подготовленный (форматированный). Текст, расположенный между этими метками выводится на экран "как есть", включая пробелы и символы конца строки, знаки табуляции

Для некоторых текстов требуется установка отступов от левого и правого края страницы. Используйте метку <BLOCKQUOTE>.....</BLOCKQUOTE> и решите такую задачу без особого труда. Пример для этой метки находится непосредственно в этом обзаце.

Напомню и метку самого абзаца <P>.....</P> с помощью которой текст расположенный внутри метки представляет одно целое - абзац.
Для вставки в текст документа комментариев используйте следующее сочетание:
<!-- не забыть рассказать о комментариях -->
Браузер, встретив текст заключенный в такие метки игнорирует его ( то есть не показывает на экране).
И в заключении этой главы информация о "специальных символах". Как вы уже знаете, любая метка начинается со знака "<", а заканчивается ">". Встречая такой знак в тексте HTML документа браузер автоматически "распознает" этот символ как начало (окончание) метки. А что делать, если Вам нужно на экране показать "специальные символы"? Используйте:
Причем обратите внимание, что все специальные символы написаны строчными буквами и заканчиваются знаком";".
К содержанию

Как вставить в документ рисунок

То что графика (рисунки) существенно оживляют любой документ, в том числе и WWW страничку, доказывать не стоит. Современные устройства передачи данных и цифровые линии связи позволяют даже проигрывать живое видео и звук в сети Интернет. Но "качественные" провайдеры и модемы есть далеко не у всех, а скорость передачи картинки с Вашей страницы на браузер другого пользователя изначально будет зависеть от трех китов:

И чем больше эти три параметра, тем больше времени потребуется для передачи графики.
Помните об этом и старайтесь оптимизировать изображения при использовании фотографии или рисунка для своей странички. Маленький совет - посмотрите картинки (графические файлы) на других сайтах и сделайте соответствующие выводы самостоятельно

Ну а теперь собственно о том "как вставить картинку" в HTML документ. Используйте: <IMG SRC="ПУТЬ И ИМЯ ФАЙЛА">.
Где "путь" обычно отсутствует, так как файлы Вашей странички хранятся на сервере провайдера в одном определенном каталоге. Вместо "Имя файла" Вы указываете полное имя файла, обычно в формате *.jpg, *.gif или *.avi (если рисунок - маленький видеофильм), например: email.gif.
Обращаю внимание на то, что на большинстве компьютеров провайдеров ( то есть на серверах обрабатывающих информацию и обеспечивающих доступ к Сети) установлена ОС UNIX или подобная, а это значит, что существует "ОГРОМНАЯ" разница в написании имен - Email.GIF и email.gif это совершенно разные для UNIX системы файлы.
Пришло время попробовать вставку рисунка в текст документа на примере. Рисунок для эксперимента перепишите с помощью этой ссылки.
<HTML>
<HEAD>
<TITLE>Вставка рисунков</TITLE> 
</HEAD>
<BODY>
<Center><H1>Вставка рисунков</H1></Center>
<IMG SRC="sHarm.jpg">
</BODY>
</HTML>
На экране вы увидете примерно следующее:

Вставка рисунков

Причем рисунок расположился "по умолчанию" по левому краю страницы и выглядит так, как есть, то есть в натуральную величину 162х90 пикселей.
Для получения всплывающей надписи при наведении указателя мыши на рисунок в окне браузера добавьте параметр ALT="AUlogo" в строку <IMG SRC="sHarm.jpg" ALT="AUlogo">. Проверим:
AUlogo
Чтобы сделать рисунок кнопкой подробно в главе Как сделать ссылку, а сейчас пример - нажатие на рисунок вернет Вас к содержанию данного учебного пособия.
к содержанию
Теперь несколько дополнительных параметров для рисунков. WIDTH=ХХ и HEIGHT=XX, обозначают ширину и высоту рисунка, причем "ХХ" число в пикселях. Поэкспериментируем с нашим рисунком - установим ширину в 324, а высоту в 180 пикселей, то есть "увеличим" рисунок вдвое <IMG SRC="sHarm.jpg" WIDTH=324 HEIGHT=180>. Вот результат:
Я специально разместил рядом уменьшенную вдвое копию рисунка. Попробуйте это сделать самостоятельно.
Еще одно хорошее предложение - использовать два вида рисунков:
Маленькие и не очень качественные, размером с "иконку", для тех, кто не собирается смотреть на Вашу "огромную" по понятиям WWW фотографию в 65 кбайт.
И естественно сам "оригинал" - рисунок в 65 кбайт, для посетителей странички, кого такая информация заинтересовала. Организовываете переход, используя "значок" в качестве кнопки. Пример для этого случая смотри в Как сделать ссылку.
А теперь - использование изображения в качестве фона Вашей страницы. Для этого в открывающей метке <BODY> вместо цвета фона вставьте имя рисунка "bg.jpg" - BACKGROUND="bg.jpg"
Вот пример исходного текста для страницы с фоновым рисунком:
<HTML>
<HEAD>
<TITLE>
Пример страницы с фоновым рисунком
</TITLE> 
</HEAD>
<BODY BACKGROUND="bg.jpg">
<P>Для применения рисунка в качестве фона страницы измените начальную метку 
BACKGROUND="код цвета" на  BACKGROUND="имя файла рисунка"</P>
</BODY>
</HTML>
К содержанию

Списки (нумерованные и маркированные)

Необходимость в расположении величин (веществ, товаров и прочего) в определенном порядке, например, списка индигриентов для создания элексира молодости или перечисления Ваших любимых блюд (увлечений и прочего) возможно организовать и в HTML документе. Существует два вида списков:
Нумерованный
список
  1. молоко
  2. мед
  3. порошок №17
Ненумерованый
список
  • молоко
  • мед
  • порошок №17
Для "изготовления" ненумерованного списка потребуются метки <UL> .....</UL>, внутри которых элементы списка перечисляются через <LI>. Вот пример:
<HTML>
<HEAD>
<TITLE>
Пример ненумерованного списка
</TITLE> 
</HEAD>
<BODY>
<H2>На нашем сервере доступны:</H2>
<UL>
<LI> рефераты и дипломы
<LI> энциклопедия Кирила и Мефодия 98
<LI> ресурсы Интернет
</UL> 
</BODY>
</HTML>
А теперь метки для "нумерованного" списка: <OL> .....</OL>, внутри которых элементы списка точно также перечисляются через <LI>. Проверьте на следующем примере:
<HTML>
<HEAD>
<TITLE>
Пример нумерованного списка
</TITLE> 
</HEAD>
<BODY>
<H2>Мои увлечения:</H2>
<OL>
<LI> баскетбол
<LI> велосипед
<LI> занятия в кружке "Компьютерные технологии"
</OL> 
</BODY>
</HTML>
Особняком стоят редко описываемые в литературе списки определений. Такой список заключается в метки <DL>...<DL>, где термину предшествует метка <DT>, а определение оформляется с помощью <DD>, проверяем на примере:
<HTML>
<HEAD>
<TITLE>
Пример списка определений
</TITLE> 
</HEAD>
<BODY>
<H2>Словарь терминов</H2>
<DL>
<DT> HTML
<DD> Язык (стандарт) описывающий форму представления
информации, публикуемой в Интернет.
<DT> Браузер (кое-кто называет броузер)
<DD> Программа для просмотра HTML документов и
работы в сети Интернет
</DL> 
</BODY>
</HTML>
На экране "обозревателя" или "коммуникатора" Вы увидете следующее:

Словарь терминов

HTML
Язык (стандарт) описывающий форму представления информации, публикуемой в Интернет.
Браузер (кое-кто называет броузер)
Программа для просмотра HTML документов и работы в сети Интернет

В заключении главы обращаю внимание, что метки <LI>, <DT> и <DD> являются непарными, то есть не имеют закрывающихся меток.


К содержанию

Как сделать таблицу

Метки, ипользуемые для обозначения таблицы в HTML документе:
<TABLE>....</TABLE> - обозначают начало и окончание таблицы
Метка <TABLE> может включать следующие параметры:
WIDTH Ширина таблицы в пикселях или в процентах от ширины страницы, например: WIDTH=70%
BORDER ширина внешней рамки в пикселях, если BORDER=0 граница таблицы не показывается на экране браузера
<TR>.....</TR> - начало и окончание строки
<TD>содержимое ячейки</TD> - так обозначается ячейка
Допустимые параметры для обьектов внутри строки (ячейки), или таблицы:
WIDTH Ширина ячейки в пикселях или в процентах от ширины таблицы, например: WIDTH=30%
ALIGN=LEFT для выравнивания по левому краю
ALIGN=RIGHT для выравнивания по правому краю
ALIGN=CENTER по центру
VALIGN=TOP для вертикального выравнивания вверх
ALIGN=MIDDLE для выравнивания по середине
ALIGN=BOTTOM по нижнему краю
Имеются и другие дополнительные настройки:
COLSPAN размах ячейки по горизонтали
ROWSPAN тоже по вертикали
NOWRAP показывать содержимое ячейки в одну строку
Процесс создания таблицы изучим на следующем примере:
<HTML>
<HEAD>
<TITLE>
Пример таблицы две строки - две ячейки 
</TITLE> 
</HEAD>
<BODY>
<H2>Пример таблицы две строки - две ячейки</H2>
<TABLE WIDTH=80% BORDER=3 ALIGN=CENTER>
<!-- Начало таблицы ширина 80%, рамка=3  таблица выравнена по
 центру страницы-->
<TR><!-- Начало строки1-->
<TD ALIGN=CENTER><!-- Начало ячейки 1-->
текст этой ячейки выравнен по центру
</TD><!-- Конец ячейки 1-->
<TD ALIGN=RIGHT><!-- Начало ячейки 2-->
<FONT  COLOR="#008000">выравнивание содержимого
 вправо,текст внутри - зеленый</FONT>
</TD><!-- Конец ячейки 2-->
</TR><!-- Конец строки 1-->
<TR><!-- Начало строки2-->
<TD ALIGN=RIGHT><!-- Начало 
ячейки 1-2-->
первая ячейка второй строки, вправо
</TD><!-- Конец ячейки 1-2-->
<TD ALIGN=LEFT><!-- Начало ячейки 2-2-->
вторая ячейка второй строки, влево
</TD><!-- Конец ячейки 2-2-->
</TR><!-- Конец строки 2-->
</TABLE><!-- Конец таблицы-->
</BODY>
</HTML>

Применение таблицы позволяет загружать "большой" рисунок по частям: разбейте картинку на более мелкие квадраты и загружайте их внутрь ячеек таблицы.


К содержанию

Как сделать ссылку

С помощью ссылок (LINK) возможен переход к различным ресурсам и объектам, а также активизация некоторых программ.

Какие бывают ссылки:
Как сделать ссылку:
К содержанию

Фреймы - просто и эффективно

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

Разберем на примере (сохраните этот файл как index.htm):
<HTML>
<HEAD>
<TITLE>Пример мастер страницы
</TITLE>
</HEAD>
<!-- Метки BODY 
в мастер странице нет-->
<!--Разбиваем экран на две горизонтальные
(ROWS) строки, верхняя 100 пикселей, нижняя
- все остальное-->
<FRAMESET ROWS="100,*">
<!--Внутрь верхней части загружаем документ
3.htm-->
         <FRAME SRC="3.htm">
<!--Нижнюю часть экрана делим на две колонки:
левую, шириной 180 пикселей и правую-
все остальное пространство-->
<FRAMESET COLS="180,*">
<!--В левую колонку вставляем
файл 1.htm-->
        <FRAME SRC="1.htm">     
<!--В правую колонку загружаем
файл 2.htm-->
        <FRAME SRC="2.htm">     
<!--Закрывающая метка для разбиения
по горизонтали-->
     </FRAMESET>
<!--Закрывающая метка верт -->
</FRAMESET>
</HTML>
Если Вы проверите этот пример, то увы - ничего не увидите. Обьясню причину: нет документов, которые Вы "загружали" в получившиеся части экрана. Двайте их создадим:
Для начала заголовок - документ загружаемый в верхнюю часть экрана
<HEAD>
<TITLE>
Личная страница Иванова И.
</TITLE> 
</HEAD>
<BODY>
<H2>The HOME PAGE Ivanov Ivan</H2>
</BODY>
</HTML>
Сохраните его как 3.htm и создайте еще два: 2.htm и 1.htm. Исходные тексты здесь:
<HEAD>
<TITLE>
Личная страница Иванова И.
</TITLE> 
</HEAD>
<BODY>
Список ресурсов (ссылки)
</BODY>
</HTML>
Сохраните как 2.htm и создайте 1.htm:
<HEAD>
<TITLE>
Личная страница Иванова И.
</TITLE> 
</HEAD>
<BODY>
Документ находится в стадии разработки
</BODY>
</HTML>
Попробуйте мастер (index.htm) страницу еще раз. Как не странно все прекрасно работает. Обращаю внимание, что метка <FRAME> непарная
Кроме страниц мы можем помещать во фреймы и рисунки (изображения), замените в предидущем примере <FRAME SRC="2.htm"> на <FRAME SRC="sHarm.jpg"> и вместо странички будет показываться рисунок поисковой системы "АУ". Всегда старайтесь определить размер рисунка немного меньше, чем размер фрейма с помощью параметров WIDTH=ххх и HEIGHT=ххх так как здесь: <FRAME SRC="sHarm.jpg" WIDTH=81 HEIGHT=45> .
Теперь попробуем использовать несколько дополнительных параметров при работе с фреймами, начнем с изменения мастер-страницы:
<HTML>
<HEAD>
<TITLE>Пример2 мастер-страницы
</TITLE>
</HEAD>
<!-- выключим рамку фрейма
для всех FRAMESET-->
<FRAMESET ROWS="100,*"
FRAMEBORDER=NO>
         <FRAME SRC="3.htm">
<FRAMESET COLS="180,*" 
FRAMEBORDER=NO>>
        <FRAME SRC="1.htm">     
        <FRAME SRC="2.htm">     
     </FRAMESET>
</FRAMESET>
</HTML>
Обязательно сохраните изменения и просмотрите index.htm в браузере (кнопка "обновить") - рамки исчезнут благодаря FRAMEBORDER=NO>.
Мы можем загружать страницы в определенное окно (фрейм), для этого сначала обозначим (назовем) фрейм, в который загружался файл 1.htm - замените строку FRAME SRC="1.htm" на FRAME SRC="1.htm" NAME="OKNO-1" данным мы сказали браузеру этот фрейм (окно) - "OKNO-1", по умолчанию поместить туда файл 1.htm. А теперь изменим наш файл со ссылками - 2.htm, введем ссылку для загрузки рисунка в окно "OKNO-1":
<HEAD>
<TITLE>
Личная страница Иванова И.
</TITLE> 
</HEAD>
<BODY>
Список ресурсов (ссылки)<BR>
<A HREF="sHarm.jpg" TARGET="OKNO-1">рисунок1</A>
</BODY>
</HTML>
Сохраните изменения в файле 2.htm и обновите мастер страницу. В окне появилась ссылка, при нажатии на которую рисунок загружается в определенную нами часть экрана. Думаю такой "эффект" Вы частенько встречаете при просмотре самых разных сайтов. Замените ссылку на рисунок адресом WWW сервера и его страничка тоже "попадет" в ваше "OKNO-1".
Для загрузки обьекта в "новое" окно браузера применяйте TARGET="_blank"
Для загрузки обьекта в "полное" окно браузера применяйте TARGET="_top"
В заключении главы обращаю внимание, на то, что "_top" и "_blank" вводятся строчными буквами.
К содержанию

Секреты заголовков

Вставив в служебный раздел , то есть между метками <HEAD>......</HEAD> инструкции для определения "содержимого" страницы, например:
<META NAME="description" CONTENT="игра в шахматы,HOME PAGE">
<META NAME="keywords" CONTENT="chess, хобби, шахматы">
Вы позволите поисковым машинам занести Вашу страницу в каталоги ресурсов и "обеспечить" доступ к своей информациии других пользователй сети Интернет.
К содержанию

P.S.

Автор не стремился к созданию справочника по языку HTML. Мною опущены описания кодовых страниц и некоторые другие подробности, так как преследовалась главная цель - разбудить интерес к дальнейшему творчеству в области WEB дизайна. Я надеюсь что первые шаги в этом Вы успешно сделали используя данное учебное пособие.
Коваленко Г.Ф.kgfdin@mail.ru