Документы HTML состоят из двух частей: заголовка <HEAD> и
"тела"<BODY>. Каждый документ начинается с этих тегов. Необходимо
помнить, что практически у каждого открывающего тега есть закрывающий
тег, который дополняетс в скобках
лишь знаком слэш "/".
Между тегами <HEAD> и </HEAD> обязателен
<TITLE> со своим закрывающимся тегом. Здесь всегда указывается
название, которое вы хотите присвоить своему HTML-документу. При
просмотре в браузере это название обязательно появится в строке
заголовка.
<HTML>
<HEAD>
<TITLE>моя первая страничка</TITLE>
</HEAD>
<BODY>
<P>Обратите внимание на строку заголовка. В ней отображено название документа.
</BODY>
</HTML>
В литерартуре мы постоянно сталкиваемся с абзацами. Языку HTML
также присуще это понятие. При помощи тега <P> можно отделить
абзацы один от другого.
Тег <BR> отделяет сроку от последующего текста.
<HR> - горизонтальная линия.
Одним из способов оформления документа является использование
заголовков текста. Всего их насчитывается шесть (<H1> -
<H6>). При переходе от тега <H1> к тегу < H6>
постепенно уменьшается высота и толщина шрифта текста. Чаще всего
используют заголовки второго и третьего уровней.
<HTML>
<HEAD>
<TITLE>моя первая страничка</TITLE>
</HEAD>
<BODY>
<H1>заголовок первого уровня<H1>
<H2>заголовок второго уровня<H2>
<H3>заголовок третьего уровня<H3>
<H4>заголовок четвертого уровня<H4>
<H5>заголовок пятого уровня<H5>
<H6>заголовок шестого уровня<H6>
</BODY>
</HTML>
| Пример |
заголовок первого уровня
заголовок второго уровня
заголовок третьего уровня
заголовок четвертого уровня
заголовок пятого уровня
заголовок шестого уровня
|
Язык HTML различает и физические стили, которые можно свести в следующую таблицу:
| Стиль |
Тег |
Пример |
| BOLD |
<B> |
полужирный |
| ITALIC |
<I> |
курсив |
| UNDERLINE |
<U> |
подчеркнутый |
| TYPEWRTER |
<TT> |
пишущая машинка |
| STRIKETHROUGH |
<S> |
вычеркнутый |
| DECREASE FONT SIZE |
<SMALL> |
маленький |
| INCREASE FONT SIZE |
<BIG> |
большой |
| BLINK |
<BLINK> |
(работает только в Netscape Navigator) |
С помощью тегов HTML можно управлять горизонтальным и вертикальным
выравниванием текстаи графики. Для этих целей используется тег
<DIV> с атрибутом ALIGN=, которому присваиваются аргументы:
- LEFT - выравнивание по левому краю
- RIGHT - выравнивание по правому краю
- CENTER - выравнивание по центру
<HTML>
<HEAD>
<TITLE>моя первая страничка</TITLE>
</HEAD>
<BODY>
<DIV ALIGN=LEFT>выравнивание по левому краю</DIV>
<DIV ALIGN=RIGHT>выравнивание по правому краю</DIV>
<DIV ALIGN=CENTER>выравнивание по центру</DIV>
</BODY>
</HTML>
| Пример | |
выравнивание по левому краю
выравнивание по правому краю
выравнивание по центру
|
Выравнивание по вертикали применяют в таблицах и используют атрибут VALIGN=, которому присваиваются следующие аргументы:
- TOP - выравнивание по верху ячейки
- BOTTOM - выравнивание по низу ячейки
- MIDDLE - выравнивание по центру ячейки
О таблицах будет рассказано чуть позже, но привести пример необходимо
Размер шрифта задается с помощью тега <FONT>, в котором
указывается атрибут SIZE=, которому в свою очередь присваиваивается
значение от 1 до 7.
Спомощью знаков "+" или "-" можно управлять изменением размера шрифта относительно основного шрифта.
Для задания типа шрифта используют атрибут FACE=. Следует сказать, что в основном применяют Times New Roman и Arial.
По умолчанию браузер будет читать текст черным цветом. Однако
есть атрибут, с помощью которого можно регулировать не только цветом
текста, но и ссылками. Задайте в атрибуте COLOR="# " тот цвет, которым
вы хотите видеть свой текст, но помните, что цвет задается указанием в
шестнадцатиричном виде трех его составляющих: красного, зеленого и
синего (RGB).
<HTML>
<HEAD>
<TITLE>моя первая страничка</TITLE>
</HEAD>
<BODY>
<P><FONT FACE="Times New Roman" SIZE="6" COLOR="#003366">Шрифт Times New Roman</FONT>
<P><FONT FACE="Courier New" SIZE="3" COLOR="#003366">Шрифт Courier New</FONT>
<P><FONT FACE="Arial" SIZE="4" COLOR="#003366">Шрифт Arial</FONT>
<P><FONT FACE="Ms Sans Serif" SIZE="1" COLOR="#003366">Шрифт Arial</FONT>
</BODY>
</HTML>
| Пример | |
Шрифт Times New Roman
Шрифт Courier New
Шрифт Arial
Шрифт Arial
|
Вряд ли найдется хоть один сайт, в котором не было бы хотя бы одного
графического изображения. Для задания графики используется тег <IMG
SRC=" ">, внутри которого указывается высота (HEIGHT=) и ширина
(WIDTH=) изображения в пикселах или процентах. Чем меньше изображение,
тем быстрее загрузится сайт. Но это не означает, что графика должна
быть размерами 1х1 мм. Внутри атрибута SRC указывается имя и путь
графического файла, т.е. откуда он берется.
Т.к. зачастую HTML-документы долго загружаются, а графика,
содержащаяся в них еще дольше, то применяют атрибут <ALT=" ">,
который описывает изображение в процессе закачки.
Браузеры отображают обычные изображения без рамок, а
графические ссылки в рамках. Однако и в том и в другом случае можно
управлять толщиной рамки при помощи атрибута BORDER=""
<HTML>
<HEAD>
<TITLE>моя первая страничка</TITLE>
</HEAD>
<BODY>
<P><DIV ALIGN=CENTER> Открытка</DIV>
<P><DIV ALIGN=CENTER><IMG SRC="img/mini.gif"
WIDTH="120" HEIGHT="171" BORDER="1" ALT="Скучаю без
тебя"></DIV>
<BODY>
<HTML>
Обтекание графики текстом задается тегом <IMG ALIGN=>. Текст
обтекает графику, пока не достигнет нижнего края изображения.
Аргументами служат:
- LEFT - обтекание по левому краю
- RIGHT - обтекание по правому краю
- CENTER - обтекание по центру
Для отмены обтекания и перехода на новую строку служит тег <BR CLEAR=>. В качестве аргумента применяют:
- LEFT - начинают новую строку там, где свободно левое поле
- RIGHT - начинают новую строку там, где свободно правое поле
- ALL - начинают новую строку там, где свободны оба поля
<HTML>
<HEAD>
<TITLE>моя первая страничка</TITLE>
</HEAD>
<BODY>
<P><IMG SRC="img/mini.gif" WIDTH="60" HEIGHT="60" ALIGN=LEFT>
<P>Этот текст обтекает изображение и прерывается здесь.....
<BR CLEAR=LEFT>а здесь продолжается
</BODY>
</HTML>
В качестве ссылки может служить фрагмент из текста или графическое
изображение. Ссылки позволяют перейти от одного документа HTML к
другому.
Обычно текстовые ссылки выделяются другим цветом. Тегом ссылки
служит тег <A HREF=" ">, в котором указывается путь документа, к
которому следует перейти.
<HTML>
<HEAD>
<TITLE>моя первая страничка</TITLE>
</HEAD>
<BODY>
<P><A HREF="index.html">щелкни здесь</A>
</BODY>
</HTML>
В данном примере был рассмотрен случай использования ссылки в
пределах одного сайта. Если вам необходимо сделать ссылку на другой
сайт, то в этом случае в атрибуте HREF=" " укажите полный адрес того
документа, на который вы ссылаетесь. Например:
Любая информация на<A HREF="http://www.poisk.ru">POISK.RU</A>
Чтобы сделать графическую ссылку, следует набрать тот же код,
что и для текстовой ссылки, за исключением того, что вместо текста
указыватся графическое изображение.
<HTML>
<HEAD>
<TITLE>моя первая страничка</TITLE>
</HEAD>
<BODY>
<P><A HREF="index.html"><IMG SRC="img/mini.gif" WIDTH="88" HEIGHT="31"></A>
</BODY>
</HTML>
Текстовые и графические ссылки могут указывать и на другие
разделы в пределах одного документа. Такие ссылки требуют наличия двух
частей: якоря и самой ссылки. Якорь определяет место, к которому
происходит переход по ссылке. Ссылка использует имя якоря вместо имени
файла.
Ссылка: <A HREF="# "> </A>
Якорь: <A NAME=" "> </A>
<HTML>
<HEAD>
<TITLE>моя первая страничка</TITLE>
</HEAD>
<BODY>
<P><A HREF="#first.htm">в начало документа</A>
</BODY>
</HTML>
для проверки работы ссылки нажмите
сюда
Не забудьте указать и якорь, в данном примере он расположен в начале документа:
<A HREF="first.htm">ОСНОВЫ HTML</A>
Формат записи адреса, с которым вы хотитие связаться, использует URL-адрес и выглядит следующим образом:
<A HREF="mailto: olga@ic.ac.kharkov.ua">напишите мне</A>
чтобы проверить
напишите мне.
Цвет фона, текста и ссылок задается в самом начале документа - в
теге <BODY> атрибутами BGCOLOR="# " (цвет фона), TEXT="# " (цвет
текста), LINK="# " (цвет ссылки), VLINK="# " (цвет работающей ссылки),
ALINK="# " (цвет отработанной ссылки). Если вы указываете VLINK и
ALINK, то ссылка будет реагировать на любое действие курсора (подвод
курсора к ссылке, щелчок по ссылке).
<HTML>
<HEAD>
<TITLE>моя первая страничка</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#003366" LINK="#616161" VLINK="#616161" ALINK="#616161">
<P>Вы можете попробовать сами задать цвета для своей странички
</BODY>
</HTML>
Если вы желаете фон украсить не просто цветом, а каким-либо
графическим изображением, то вместо атрибута BGCOLOR задайте атрибут
BACKGROUND=" ", внутри которого укажите gif - или jpg-файл, а точнее
его месторасположение.
<HTML>
<HEAD>
<TITLE>моя первая страничка</TITLE>
</HEAD>
<BODY BACKGROUND="img/new.gif" TEXT="#006600" LINK="#616161" VLINK="#616161" ALINK="#616161">
<P>Вы можете попробовать сами задать цвета для своей странички
</BODY>
</HTML>
Источник: http://www.html.find-info.ru | 
