Советы и рекомендации начинающему Web-мастеру.

Основы языка HTML
(часть 1)

Рассмотрим HTML на уровне, который позволит вам создать простейшую страничку и познакомиться с основами HTML.

Все теги записываются в угловых скобках <>. Большинство тегов имеют открывающийся элемент <> и закрывающийся </>, между которыми находится содержимое, к которому применяется этот эффект. Документ должен начинаться тегом <HTML> и заканчиваться закрывающим тегом </HTML>. Эти теги показывают, что это документ в формате HTML. Он должен содержать две части: заголовок (HEAD) и собственно документ (BODY). То есть между строчками <HTML> и </HTML> должны находится теги <HEAD></HEAD> и <BODY></BODY>. В заголовке определяется кодировка страницы (как правило KOI8-r или Windows-1251), название странички (то, которое показывается в заголовке окна) и некоторая другая информация. Для определения кодировки странички вставьте между тегами <HEAD> и </HEAD> одну из следующих строчек:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
- для Windows-1251 кодировки (в этой кодировке вы можете писать код странички в "Блокноте", используя, как русский, так и английский язык; эта кодировка наиболее предпочтительна).

<meta http-equiv="Content-Type" content="text/html; charset=koi8-r">
- для KOI8-r кодировки (как правило, эта кодировка используется визуальными HTML-редакторами, открыв документ этой кодировки в "Блокноте", вы увидите лишь какие-то какарули, однако некоторые серверы работают лишь с этой кодировкой, например сервер Chat.ru, тогда вам придется использовать специальные перекодировщики).

Для задания названия странички используются теги <TITLE></TITLE>. Между ними помещается текст названия странички.

Таким образом страничка имеет вид:

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<TITLE> Страничка Петра Петрова </TITLE>
</HEAD>
<BODY>
Содержимое странички (то, что вы должны заполнять своими тегами)
</BODY>
</HTML>

(Кстати, теги можно писать и строчными, и прописными буквами. Для браузера это безразлично. Это имеет значение лишь внутри Java-скриптов).

Рассмотрим основные теги, которые понадобятся вам для создания любой странички.
Начнем с текста. Большинство документов имеют заголовок. Для его создания используют теги <hx></hx>, где x – число от 1 до 6. Заключив текст между этими тегами, вы получите заголовок.

<h1>Заголовок</h1>

<h2>Заголовок</h2>

<h3>Заголовок</h3>

<h4>Заголовок</h4>

<h5>Заголовок</h5>

<h6>Заголовок</h6>

Для создания нового абзаца - используется тег <p>, затем идет текст абзаца и в конце </p>. Если вы хотите просто перейти на новую строчку без создания абзаца используйте тег <br> (таким образом, тег <br> не имеет закрывающегося тега).
Рассмотрим форматирование символов. Для придания тексту жирного начертания поместите его между тегами <b></b>, курсивного - <i></i>, подчеркнутого - <u></u>.

пример тегов	отображаемый текст
<b>жирный текст</b>	жирный текст
<i>курсив</i>	курсив
<u>подчеркнутый</u>	подчеркнутый

Некоторые теги могут применяться с атрибутами (параметрами), которые указываются в открывающемся элементе тега (можно сразу указывать несколько атрибутов в одном теге). Некоторые теги вообще не имеет смысла применять без атрибутов. К таким тегам можно отнести тег <FONT></FONT> - он может иметь несколько атрибутов (например, SIZE, FACE, COLOR), которые мы рассмотрим ниже.

Для задания размера текста используется атрибут SIZE тега <FONT>. Он позволяет задавать размер текста (по умолчанию размер текста принят равным 3). Поместив текст между тегами <FONT SIZE="x"></FONT>, где x - целое число, вы придадите ему нужный вам размер.

<font size="1">Поместив </font>
<font size="3">текст </font>
<font size="5">между </font>
<font size="6">тегами...</font>

Результат:
Поместив текст между тегами...

Задание шрифта производится с помощью атрибута FACE тега <FONT>, где FACE="Стандартный True Type шрифт". Очень аккуратно используйте этот атрибут, так как заданный шрифт должен присутствовать на компьютере пользователя - в противном случае браузер подставит шрифт, определенный по умолчанию (как правило, это Times New Roman). Применяйте шрифты, в наличии которых вы уверены, иначе пользователь увидит текст иначе, чем вы. К стандартным шрифтам, я думаю, можно отнести шрифты, поставляемые с Windows 95/98, Ms Plus, Ms Office.

Пример:
<font face="Times New Roman">ABC</font>
<font face="System">DEF</font>
<font face="Arial">GHI</font>
<font face="Courier">XYZ</font>

Результат:
ABC DEF GHI XYZ

В заключении первой части следует также сказать о возможности комментировать html-код. Комментарий помещается между . Ваш комментарий может находиться в любом месте html-кода. Не бойтесь писать подробные комментарии, так как браузер пропускает их (то есть не тратит время на их загрузку). Я рекомендую вам использовать эту возможность, особенно на первых этапах изучения языка HTML.

Пример:

Основы языка HTML
(часть 2)

Начнем вторую часть с добавления цветов на нашу web-страничку. Для задания цвета фона документа, цвета текста, ссылок, просмотренных (посещенных) ссылок, активных ссылок (т.е. в момент нажатия на них кнопкой мыши) используются атрибуты тега <BODY> (того самого, с которого начинается описание самой странички): BGCOLOR, TEXT, LINK, VLINK, ALINK соответственно. Для указания (определения) цвета используются именованные цвета (вынесены отдельным пунктом в разделе "HTML") или коды цветов (для этого ставится символ "#", а за ним без пробела шесть шестнадцатеричных чисел, определяющих цвет в кодировке RGB).

Пример:
<BODY BGCOLOR="#FFFF88" TEXT="#0000FF" LINK="#FF0000" VLINK="#CF2CD4" ALINK="#C033FF">

Для определеня цвета конкретного фрагмента текста в документе используется атрибут COLOR тега <FONT>. Для этого также используются именованные цвета или в цвета, определяемые кодировкой RGB.

Пример:
<font color="#FF0000">Поместив </font>
<font color="#CF2CD4">текст </font>
<font color="#0000FF">между </font>
<font color="orange">тегами </font>
<font color="green">...</font>

Результат:
Поместив текст между тегами...

Для создания графического фона используется текстура - небольшая картинка (графический файл) в формате gif или jpg (jpeg). Браузер автоматически заполняет ими весь экран. Картинка должна формировать однородный фон, а с помощью небольшой полоски с плавным переходом цвета можно создавать интересные градиентные фоны. Экспериментируйте! Желательно, чтобы размер файла текстуры был небольшой. Для задания фона используется атрибут BACKGROUND тега <BODY>. В этом атрибуте вы должны указать имя файла текстуры, а при необходимости и путь, если файл текстуры не находится в той же директории, что и html-файл.

А теперь рассмотрим, как вставить картинку в любое место web-странички. Для этого используются форматы gif и jpg (jpeg). Первый популярен из-за возможности использования анимации (нескольких последовательно сменяющихся кадров) и прозрачного цвета, недостаток: максимальное количество цветов 256, а формат jpg (jpeg) позволяет использовоть 24 миллионов цветов, что необходимо для фотографий, имеет хороший алгоритм сжатия, а вследствии этого небольшой размер файла.

Для вставки картинки используется тег <IMG>. Его синтаксис следующий:

<IMG SRC="имя файла" ALT="текст" ALIGN="расположение" WIDTH="ширина" HEIGHT="высота" >, где

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

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

расположение - место расположния изображения. Может иметь следующие значения:
TOP - последующий текст располагается в верхней части изображения;
BOTTOM - последующий текст располагается в нижней части изображения;
LEFT - изображение находится в левой части листа, текст обтекает изображение справа;
MIDDLE - изображение находится в центре листа,
RIGHT - изображение находится в правой части листа, текст обтекает изображение слева.

ширина - ширина изображения в пикселях.

высота- высота изображения в пикселях.

Замечание: атрибуты alt, align, width, height являются необязательными.

Например:
<img src="arow.gif" alt="Стрелка" width="40" height="30">

   А теперь рассмотрим последнюю и, пожалуй, самую важную часть web-странички - гиперссылки. Гиперссылки - это основа Internet'а, главный его принцип. И, соответственно, важнейшая часть web-страниц.
   Гиперссылки (иногда говорят, просто ссылки) могут вести на другую страничку или сайт, на картинку (удобно не показывать большую картинку, а показать её уменьшенную копию, щелкнув на которую можно увидеть большое изображение в высоком качестве), на любой файл, на адрес электронной почты и адреса других служб WWW.

   Для перехода на другую страничку используется конструкция:

<a href="URL">Название ссылки</A>, где

URL (унифицированный локатор ресурсов) - адрес любого файла в Интернете, может быть абсолютными, то есть указывается полный адрес странички (например: http://web.holm.ru/avtor.htm) или относительным, как видно из названия указывается файл относительно текущего (например avtor.htm).

Название ссылки - текст, которые будет отображаться в виде гиперссылки, например "Web.holm.ru - MEGA сайт".

   Для создание ссылки на e-mail в качестве URL'a вставте "mailto:адрес электронной почты". Например, mailto:webmaster@web.holm.ru Щелкнув на такую ссылку вы откроете окно своей почтовой программы с уже записанным адресом. Останется толко написать письмо и отправить.

   Часто используют не текстовую ссылку, а картинку, щелкнув на которую вы перейдете в другое место. Для этого используется следующая конструкция:

Как вы могли заметить, поскольку это гиперссылка в виде картинки, здесь появился еще один параметр: border. Он определяет толщину в пикселах обводки (окантовки). Окантовка будет выполнена тем же цветом, который определен для других гиперссылок на web-страничке. Но это не всегда смотрится красиво, поэтому зачастую значение этого параметра устанавливают в "0". Следует также сказать, что именно вышеприведенная конструкция используется при так называемом "дружеском" обмене кнопочками (баннеры размера 88x31 пиксела).

Пример:
<a href="http://www.surgut.wsnet.ru">http://www.surgut.wsnet.ru - новости, пресса...</a>
<a href="mailto:surgut@wsnet.ru">Напишите письмо Web-мастеру</a>
<a href="http://www.surgut.wsnet.ru"><img src="arow.gif" alt="Стрелка" border="0" width="40" height="30"></a>

Результат:
http://www.surgut.wsnet.ru - новости, пресса...
Напишите письмо Web-мастеру

Замечание: изменение цвета ссылок при наведнии курсора мыши у вас происходить не будет, для этого необходимо воспользоваться еще одним инструментом HTML, более подробно о котором в разделе "DHTML, CSS, SSI")

Заканчивая вторую часть "Основ языка HTML", заметим, что вы уже имеете базовые знания по HTML. С помощью этих немногих тегов вы уже можете творить, поэтому обдумывайте проект вашего сайта (или странички) во всемирной паутине (WWW), написанный на HTML! И удачных проектов!