Азы по HTML
для тех, кто собирарается сделать свою первую страничку
HTML(HyperText Markup Language) - это язык гипертекстовой разметки. Он применяется для создания web -страничек (файлов типа htm, html, dhtml, shtml), для создания тех самых страничек, которые вы просматриваете в Интернете в своем браузере (Internet Explorer / Nestcape Navigator).
Язык гипертекстовой разметки появился и развивался вместе с появлением и развитием глобальной компьютерной сети Интернет, потому что он в первую очередь ориентировал на использование в Интернете.
Когда вы в своем браузере загружаете web-страничку, то браузер выполняет команды, записанные на языке HTML и, подчиняясь им, выводит на экран страничку. HTML - это язык тегов. Теги, окружающие некий текстовый (или графический) раздел, определяют, какие параметры имеет данный текст (или рисунок): большой или маленький размер, жирный текст или курсив, выравнивание слева или справа, какого он цвета и т.д. Кроме того, теги задают расположение объектов на странице.
HTML-документ (страничка) - документ, написанный на языке разметки гипертекста (HTML). Заключается между флагами <HTML> и </HTML>.
SHTML - это HTML документ, просматриваемый сервером перед отправкой на наличие SSI (Server-Side Includess - включения на стороне сервера, своеобразного макроязыка). С помощью SSI можно не только в зависимости от некоторых условий выводить определенные части документа, не только формировать документ из заранее определенных кусочков, но и вставлять результат работы некоторого CGI сценария или программы прямо в документ.
Web-сайт, Web-сервер - цепочка логически связанных документов, написанных на языке HTML.
Значения флагов разметки документа
Флаги разметки (тэги) - специальные команды для расположения на экране текста, графики, видео и аудио фрагментов, а также команды, служащие для связи с другими HTML-документами и рессурсами Интернет.
Все теги записываются в угловых скобках <>. Большинство тегов имеют открывающийся элемент <> и закрывающийся </>, между которыми находится содержимое, к которому применяется этот эффект.
Теги можно писать и строчными, и прописными буквами. Для броузера это безразлично. Это имеет значение лишь при написании Java-скриптов, VB-скриптов.
Комментарии - заключаются между <!-- и -->. Они могут находиться в любом месте web-странички. Все, что находится внутри этого тэга, будь то элемент или текст - будет проигнорировано браузером: не будет обрабатываться и выводиться на экран, браузер не будет тратить время на считывание. Однако комментарии влияют на размер файла странички.
Основные флаги разметки
<HEAD> и </HEAD>
Заголовок документа. Между этими флагами располагается информация о документе.
<TITLE> и </TITLE>
Эта конструкция должна находится внутри тегов <HEAD></HEAD>.
В этих флагах заключается название странички, которое будет выведено в рамке окна программы просмотра. Содержимое этого тега анализируется поисковыми машинами.
В заголовке документа (между тегами <HEAD> и </HEAD>) должно находится, помимо названия (TITLE), описание страницы (Description) и ключевые слова (Keywords). Содержимое этих полей нигде на вашей страничке не отображается, эта информация специально предназначена для правильного индексирования вашего сайта поисковыми машинами.
Вот пример, учитываемые поля выделены красным жирным шрифтом (замените их в соответствии с содержанием вашего сайта): <head>
<title> Здесь впишите название Вашей страницы </title>
<meta name="description" content="Краткое содержание (аннотация)">
<meta name="keywords" content="Ваши,ключевые,слова (через запятую)">
</head>
<BODY> и </BODY>
"Тело" документа (текст, графика и т.д.) располагается между этими двумя флагами.
Параметры флага <BODY> :
BgColor - цвет фона (<BODY BGCOLOR ="#FFFFFF">)
BackGround - "обои" или бэкграунд
BGProperties=fixed - фиксация фона (при прокрутки страницы текст будет двигаться, а фон - нет).
Text - цвет текста
link - цвет гипертекстовой связи (ссылки)
Vlink - цвет ссылки, уже посещенной в прошлом
Alink - цвет активной сылки Флаги, служащие для форматирования текста
<P> и </P>
Флаги, служащие для выделения абзадцев. Новый абзац всегда отделяется от предыдущего пустой строкой. Для оформления текста, как абзаца, необходимый текст помещается внутри <P> и </P>. Абзац можно выровнять, для этого используются следующие параметры:
Align=left - выравнивание по левому полю (используется по умолчанию)
Align=right - выравнивание по правому полю
Align=center - выравнивание по центру
Align=justify - выравнивание по обоим краям, старые браузеры, не поддерживающие этот параметр, будут выравнивать текст по левому краю.
<BR>
Флаг, служащий для переноса текста на другую строку. Может также служить для отделения графики от текста на интервал.
После того, как в браузерах появилась возможность обтекания изображения текстом (cм. параметр ALIGN элемента IMG), понадобился дополнительный параметр <CLEAR>, который - указывает на необходимость завершения обтекания изображения текстом.
Параметр <CLEAR> может принимать следующие значения:
all - завершить обтекание изображения текстом.
left - завершить обтекание текстом изображения, выровненного по левому краю.
right - завершить обтекание текстом изображения, выровненного по правому краю.
<HR>
Флаг, служащий для логического разделения текста горизонтальной линией.
Параметры флага <HR> :
Width - определяет длину линии в пикселах или процентах от ширины окна браузера.
Size - определяет толщину линии в пикселах (по умолчанию 1, а max=100).
Align - определяет выравнивание горизонтальной линии.
Параметр может принимать следующие значения:
Align=left - выравнивание по левому полю
Align=right - выравнивание по правому полю
Align=center - выравнивание по центру (используется по умолчанию)
NoShade - определяет способ закраски линии как сплошной. Параметр является флагом и не требует указания значения. Без данного параметра линия отображается объемной.
Color - определяет цвет линии. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых (именованных) цветов. Работает только в Internet Explorer, поэтому лучше его не использовать.
Например: <hr Size=2 Color=red Width=50%>
красная горизонтальная линия на полокна, толщиной в 2 пиксела расположенная по центру экрана.
<PRE> и </PRE>
Между этими флагами располагается предварительно отформатированный текст. На экран он выводится шрифтом типа "курьер".
<TT> и </TT>
Текст, размещенный между этими метками, будет написан шрифтом, имитирующим пишущую машинку, то есть имеющим фиксированную ширину символа.
Заголовки, служащие для выделения логических частей текста
<H1>Первый уровень. </H1>
<H2>Второй уровень. </H2>
<H3>Третий уровень. </H3>
<H4>Четвертый уровень.</H4>
<H5>Пятый уровень. </H5>
<H6>Шестой уровень. </H6>
Флаги для выделения текста и шрифта
<B> и </B> Флаги для выделения текста (слов, букв) жирным шрифтом.
<I> и </I> Флаги для выделения текста (слов, букв) курсивным шрифтом.
<U> и </U> Текст, расположенный между двумя этими флагами, будет подчеркнут.
<BLINK> и </BLINK>
<FONT SIZE=+n> и </FONT> Флаги для увеличения размера шрифта.
<FONT SIZE=-n> и </FONT> Флаги для уменьшения размера шрифта.
<FONT COLOR="#0000FF"> и </FONT> Флаги для изменения цвета шрифта.
<FONT FACE="..."> и </FONT> - с помощью этого параметра производится задание шрифта. Очень аккуратно обращайтесь с этим параметром, так как заданный шрифт должен присутствовать на компьютере пользователя - в противном случае броузер подставит шрифт, определенный по умолчанию. Применяйте шрифты, в наличии которых вы уверены, иначе пользователь увидит текст иначе, чем вы. К стандартным шрифтам, я думаю, можно отнести шрифты, поставляемые с Windows 95/98, MsPlus, MsOffice.
Например:
<font face="Times New Roman"> ABCDE abcde </font>
<font face="Courier"> ABCDE abcde </font>
<font face="Tahoma"> ABCDE abcde </font>
<font face="Arial"> ABCDE abcde </font>
Примечание: В теге <FONT> возможно использование сразу нескольких параметров.
Флаги для формирования списков
<OL> и </OL> Флаги, показывающие начало и конец нумерованного списка
<UL> и </UL> Флаги, показывающие начало и конец маркированного списка.
<LI> Элемент списка. Этот тег не имеет закрывающей парной метки.
<DL> и </DL> Флаги, показывающие начало и конец глоссария (объяснения термина). Этот вид списка несколько отличается от других видов списков. Вместо меток <LI> в списках определений используются метки <DT> (от английского definition term - определяемый термин) и <DD> (от английского definition definition - определение определения).
<DT> Термин глоссария, располагается без отступа от левого поля страницы.
<DD> Описание термина, располагается с отступом от левого поля страницы.
<BLOCKQUOTE> и </BLOCKQUOTE> - текст, заключенный между этими метками выводится браузером на экран с увеличенным левым полем.
Флаги-команды для вставки в текст объектов нетекстовой информации
<IMG SRC ="file.gif"> или <IMG SRC =" file.jpg"> - команда для вставки графического изображения
<IMG SRC ="file.wav"> - команда для вставки звукового фрагмента
<IMG SRC ="file.avi"> - команда для вставки видео фрагмента
Параметры графического изображения
WIDHT - ширина картинки в пикселях
HEIGHT- высота картинки в пикселях (просто необходимо при обтекании изображения текстом).
ALIGN - выравнивание
ALIGN=left - выравнивание по левому полю,
ALIGN=right - по правому полю,
ALIGN=top - по верхней границе,
ALIGN=bottom - по нижней границе,
ALIGN=middle или center - по центру
HSPACE - горизонтальный отступ от графического изображения в пикселях (просто необходим при обтекании изображения текстом).
VSPACE - вертикальный отступ в пикселях
ALT - это сообщение, которое выводится вместо картинки, если она не показывается (не найдена или пользователь настроил свой броузер так, что тот не показывает картинки). Кроме того, вы увидите этот текст в виде подсказки, когда курсор мыши находится над картинкой.
NAME="имя" - определяет имя изображения, уникальное для данного документа. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр. Имя необходимо, если вы планируете осуществлять доступ к изображению, например, из JavaScript-сценариев.
LOWSRC="меньшая копия" - адрес (URL) файла с альтернативным изображением более низкого качества (и, соответственно, меньшего объема), чем изображение, указанное в параметре SRC. Браузеры, поддерживающие данный параметр, сначала загрузят картинку из LOWSRC, а затем заменят ее картинкой из SRC.
Примечание: параметры align, hspace, vspace, name, lowsrc являются необязательными. Золотое правило web-мастера - всегда явно задавать размеры картинки в параметрах height и width, резервируя тем самым место в окне браузера еще до загрузки изображения. В противном случае документ будет заново перерисовываться. А на медленных машинах или при подключении к сети посредством модема это смотрится просто отвратительно. Параметр alt тоже хорошо бы указать, а то вдруг у человека не загрузилась картинка, он хоть будет знать про что она, к тому же это поле анализируется поисковыми машинами.
Команды, служащие для гиперсвязи с другими HTML-документами и рессурсами Интернет
Гиперссылки - это основа Internet'а, главный его принцип.
Ссылки могут вести на другую страничку, на картинку, на любой файл, на адрес электронной почты.
<A HREF="URL"> и </A> - гиперсвязь с адресом Интернет-ресурса
Для перехода на другую страничку используется конструкция: <a href="URL" target="Window" title="Hint">Text<:/A>
где
URL - (унифицированный локатор ресурсов) - адрес любого файла в Интернете. Может быть абсолютными, то есть указывается полный адрес странички (например, http://aclab2.chat.ru/index.html) и относительным, как видно из названия указывается файл относительно текущего (например, index.html).
target - определяет, в каком окне (фрейме) загрузить гиперссылку. Может иметь значения:
"filename.html" - конкретное имя окна (фрейма) в котором нужно загрузить гиперссылку.
_top - загружает гиперссылку на всем пространстве окна браузера (если до этого существовало разбиение на фреймы, то оно исчезнет).
_blank - загружает гиперссылку в новом окне браузера.
_self - загружает содержимое страницы, в окно, которое содержит эту ссылку (и так используется по умолчанию, так что если вам надо именно так загрузить ссылку, то параметр target вообще можно не использовать).
_parent - загружает содержимое страницы, заданной ссылкой, в окно, являющееся непосредственным владельцем набора фреймов.
title - текст подсказки, который будет появляться при наведении мышки на гиперссылку.
Text - текст самой ссылки, например "Полезности от AlexCompuLab"
Часто используют не текстовую ссылку, а картинку, щелкнув на которую вы перейдете в другое место. Для этого вместо текста ссылки или вместе с ней ("до" или "после" - как вам нравится), вставьте картинку (см.выше).
Например так: <center><A HREF="http://aclab2.chat.ru/index.html" target="_blank">
<IMG SRC="aclab.gif" alt="Полезности от Alex CompuLab."
BORDER=0 width=88 height=31></a></center>
Для создание ссылки на e-mail в качестве URL'a вставьте
"mailto:E-Mail", в этом случае параметр target не используется(!).
Например, aclab2@chat.ru.
Щелкнув на такую ссылку, вы откроете окно своей почтовой программы с уже записанным адресом. Останется только написать письмо и отправить.
Таблицы
Таблица - сетка для показа данных в строках и столбцах, а также средство для форматирования текста <TABLE> и </TABLE> Флаги для вставки таблицы в HTML документ
Параметры флага <TABLE>
BgColor - цвет фона
Border - ширина бордюра (рамки таблицы)
BorderColor - цвет бордюра
Widht - ширина таблицы
CellSpacing - устанавливает расстояние между рамками ячеек таблицы в пикселах (например, CELLSPACING=2).
CellPadding - устанавливает расстояние между рамкой ячейки и текстом в пикселах (например, CELLPADDING=10).
NoWrap - присутствие данного атрибута говорит о том, что данные в ячейке не могут логически разбиваться на несколько строк и должны быть представлены в одну строку.
Флаги разметки таблицы
<CAPTION> и </CAPTION> - этот тэг описывает название таблицы (подпись). Тэг <CAPTION> должен присутствовать внутри <TABLE> и </TABLE>, но снаружи описания какой-либо строки или ячейки. По умолчанию <CAPTION> имеет атрибут ALIGN=top (подпись вверху перед таблицей), но может быть явно установлен в ALIGN=bottom (подпись внизу после таблицы). ALIGN определяет, где - сверху или снизу таблицы - будет поставлена подпись. Подпись всегда центрирована в рамках ширины таблицы.
<TR> и </TR> Строчка таблицы.
Количество строк таблицы определяется количеством встречающихся пар тэгов <TR> и </TR>. Новая строка определяется тегом <TR>, а ее закрытие тегом </TR>.
Может иметь параметры:
BgColor - цвет фона внутри строки;
ALIGN=left, right, center - выравнивание внутри строки;
VALIGN=top, bottom, middle - вертикальное выравнивание внутри строки таблицы.
<TD> и </TD> Столбец таблицы.
Ячейка таблицы может быть описана только внутри строки таблицы (!), т.е. тег <TD> может быть только после тега <TR>. Если в строке отсутствует одна или несколько ячеек для некоторых колонок, то браузер отображает пустую ячейку. Расположение данных в ячейке по умолчанию определяется атрибутами ALIGN=left и VALIGN=middle. Данное расположение может быть исправлено как на уровне описания строки, так и на уровне описания ячейки.
BgColor - цвет фона под столбцом;
ALIGN=left, right, center - выравнивание внутри столбца;
VALIGN=top, bottom, middle - вертикальное выравнивание;
ColSpan - устанавливает "размах" ячейки по горизонтали, т.е. количество ячеек, которые будут объединены по горизонтали для указанной ячейки. По умолчанию это значение равно 1. Например, COLSPAN=3 означает, что ячейка простирается на три колонки.
RowSpan - Устанавливает "размах" ячейки по вертикали, т.е. количество ячеек, которые будут объединены по вертикали для указанной ячейки. По умолчанию это значение равно 1. Например, ROWSPAN=2 означает, что ячейка занимает две строки.
Теги <TH> и </TH> - определяют ячейку заголовка таблицы. Ячейка заголовка таблицы имеет ширину всей таблицы; по умолчанию текст в данной ячейке имеет атрибут BOLD и ALIGN=center.
Может иметь дополнительные параметры:
Widht - ширина названия.
BgColor - цвет фона под названием;
ALIGN=left, right, center - выравнивание;
VALIGN=top, bottom, middle - вертикальное выравнивание;
RowSpan - Устанавливает "размах" ячейки по вертикали, т.е. количество ячеек, которые будут объединены по вертикали для указанной ячейки. По умолчанию это значение равно 1. Например, ROWSPAN=2 означает, что ячейка занимает две строки.
Примечание: все параметры кроме <TABLE> и </TABLE>, <TD> и </TD>, <TR> и </TR> являются необязательными.
Рамки-фреймы
Рамки-фреймы - средство для разделения экрана на несколько областей, в каждой из которых отображается содержимое отдельной Web-странички или даже целого Web-сайта.
<FRAMESET> и </FRAMESET> Флаги для создания рамки
Параметры флага <FRAMESET>:
COLS - подразделяют экран на опредленное количество вертикальных колонок
ROWS - подразделяют экран на опредленное количество горизонтальных колонок
BORDCOLOR - цвет рамки
BORDER - ширина бордюра
FRAMEBORDER - граница рамки
FRAMEBORDER=yes - есть граница,
FRAMEBORDER=no - нет границы,
FRAMESPACING=n - ширина границы
<FRAME> Флаг для описания рамки (<FRAME SRC="file.htm">).
Параметры флага <FRAME>
SCROLING - параметр для регулировки полосы прокрутки:
SCROLING=yes - полоса прокрутки будет всегда
SCROLING=no - полосы прокрутки не будет
SCROLING=auto - полоса прокрутки появляется только в случае необходимости
MARGINWIDHT и MARGINHEIGHT - параметры, которые управляют отступом внутри рамок, служат для выравнивания графического изображения внутри рамки
NORESIZE - параметр, указвающий на то, что размер рамки-фрейма никогда не будет меняться.
<A HREF="file.htm" TARGET="frame2"> file.html </A> - Связь между фреймами
TARGET - атрибут связи между фреймами. Имеет несколько значений:
_blank загружает содержимое страницы, заданной ссылкой, в новое пустое окно.
_self содержимое страницы, заданной ссылкой, в окно, которое содержит ссылку.
_parent загружает содержимое страницы, заданной ссылкой, в окно, являющееся непосредственным владельцем набора фреймов.
_top содержимое страницы, заданной ссылкой, в окно, игнорируя используемые фреймы.
Обработка браузеров, не поддерживающих фреймы:
<FRAMESET>
...Здесь располагаются фреймы
</FRAMESET>
<NOFRAMES>
<BODY>
...Здесь располагается текст без фреймов
<BODY>
</NOFRAMES>
В секции, предназначенной для тех пользователей, которые "не видят" рамки, можно расположить какой-нибудь пояснительный текст.
Бегущая строка
<MARQUEE>ТЕКСТ</MARQUEE> - Флаг, создающий бегущую строку
<MARQUEE DIRECTION=left>TEKCT</MARQUEE> - Если бегущую строку нужно направить справа налево
<MARQUEE DIRECTION=right>TEKCT</MARQUEE> - движение слева направо.
scroll - стандартное движение от правого края к левому
slide - надпись один раз пробегает от правого края к левому, где и остается.
alternate - движение от правого края страницы к левому и обратно, бесконечный цикл.
<MARQUEE LOOP=n BEHAVIOR=scroll>TEKCT</MARQUEE> - Ограничение числа циклов. Значение n оператора LOOP указывает число повторений цикла.
<MARQUEE WIDHT=n>TEKCT</MARQUEE> - указать ширину участка, занимаемого бегущей строкой, где n - ширина той части страницы, на которой расположена бегущая строка. Значение n указывается как в пикселях, так и в процентах от общей ширины видимой части страницы.
<MARQUEE scrollamount=n>TEKCT</MARQUEE> - Регулировка движения надписи по экрану. Здесь n - число пикселей.
<MARQUEE scrolldelay=t>TEKCT</MARQUEE> В данном случае переменная величина - время t - измеряется в миллисекундах. Метод задания скорости состоит в указании времени, спустя которое текст будет перерисован на экране заново.
<FONTSIZE=n><MARQUEE>ТЕКСТ</MARQUEE></FONT> - возможность указывать величину шрифта текста в строке.
<MARQUEE BGCOLOR=n>ТЕКСТ</MARQUEE> - окрасить поверхность бегущей строки в какой-либо цвет, где n, как это бывало и раньше, можно указать в вид шестнадцатеричного числа либо написав его название
<MARQUEE HEIGHT=n>ТЕКСТ</MARQUEE> - указать высоту бегущей строки, задавая величину n в пикселях
|
