Документы 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 | ||
ITALIC | ||
UNDERLINE | ||
TYPEWRTER | ||
STRIKETHROUGH | ||
DECREASE FONT SIZE | ||
INCREASE FONT SIZE | ||
BLINK | (работает только в Netscape Navigator) |
С помощью тегов HTML можно управлять горизонтальным и вертикальным выравниванием текстаи графики. Для этих целей используется тег <DIV> с атрибутом ALIGN=, которому присваиваются аргументы:
<HTML>
<HEAD>
<TITLE>моя первая страничка</TITLE>
</HEAD>
<BODY>
<DIV ALIGN=LEFT>выравнивание по левому краю</DIV>
<DIV ALIGN=RIGHT>выравнивание по правому краю</DIV>
<DIV ALIGN=CENTER>выравнивание по центру</DIV>
</BODY>
</HTML>
Пример |
выравнивание по левому краю
выравнивание по правому краю
выравнивание по центру
|
Выравнивание по вертикали применяют в таблицах и используют атрибут VALIGN=, которому присваиваются следующие аргументы:
О таблицах будет рассказано чуть позже, но привести пример необходимо
Размер шрифта задается с помощью тега <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=>. Текст обтекает графику, пока не достигнет нижнего края изображения. Аргументами служат:
Для отмены обтекания и перехода на новую строку служит тег <BR CLEAR=>. В качестве аргумента применяют:
<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>