Приглашаем посетить
Толстой А.К. (tolstoy-a-k.lit-info.ru)

HTML

ОСНОВЫ HTML

HEAD, BODY, TITLE

Документы 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=, которому присваиваются аргументы:

<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>
  

Содержание | Вперед