Конкурс Дизайнеров. Технический раздел.

Основа World Wide Web - язык программирования HiperText Markup Language (HTML). Язык HTML использует тэги, вводимые в текстовые документы, которые указывают, каким образом информация должна выводится на экран. Документы HTML - текстовые документы. Браузеры считывают документы HTML и определяют, каким образом выводить содержащуюся в них информацию.

HTML - язык разметки гипертекста. Это стандарт, в соответствии с которым документы Web отображаются браузерами. HTML - это метод разметки стандартного текста таким образом, чтобы браузер интерпретировал определенные тэги и отображал информацию в нужном формате. Содержащиеся в тексте тэги могут изменять шрифты, стили, создавать сециальные эффекты. Это позволяет обеспечить интересный графический интерфейс приотображении стандартного текстового файла.
Кроме изменения стиля текста, HTML также сообщает браузеру, когда некий текст на странице должен считаться гипертекстовой ссылкой, в каком месте вставить графические и специальные элементы.

Поскольку HTML документы чисто текстовые, для создания Web-страницы можно использовать практически любые текстовые редакторы. Лучше всего для этой цели подойдет обычный Блокнот (Notepad) входяший в комплект Windows. Однако можно использовать и специальные програмы редактирования HTML файлов. Условно их можно разделить на два типа: 1. текстовые редакторы содержащие набор тэгов и ускоряющих работу с документом; 2. WYSIWYG (What You See Is What You Get) редакторы позволяющие визуализировать процесс создания документа. Для использования первого типа редакторов знание HTML тэгов является обязательным, а для второго типа формально нет. К первому типу следует отнести такие популярные редакторы как HomeSite, HotDog и пр. Ко втророму безусловно FrontPage - начиная с версии Express и заканчивая 2000, Netscape Composer (аналогична FP Express), DreamWeaver (на мой взгляд самый интересный и качественный HTML редактор). И хотя формально при использовании WYSIWYG редакторов знание тэгов не обязательно, для создания полноценных веб-страниц полезно знать основы HTML.

<HTML>
<HTML></HTML>
Теги <HTML> и </HTML> сообщает браузеру, что текст между ними следует интерпретировать как текст HTML. Тэг <HTML> находится в самом начале файла. </HTML> - в самом конце. Между ними находится весь остальной текст файла. Большинство HTML тэгов парные, открывающий и закрывающий, они охватывают помечаемый ими текст. Закрывающий в паре всегда начинается с прямой косой черты.

<HEAD>
<HEAD></HEAD>
Отмечают служебную информацию файла: название, кодировка, различные мета-тэги, стили.

<BODY>
<BODY></BODY>
Текст между этими тэгами является основной частью документа. Сюда войдут большая часть текста и иная информация, составляющие основу документа. В данном тэге можно задать различные параметры - цвет фона (или фоновое изображение), цвет текста, цвет ссылок и т.п. : <BODY BGCOLOR="black" TEXT="red">
16 основных цветов можно указывать вводя их названия (black, red, gray, green и т.п.). Однако эти цвета не всегда удовлетворяют изготовителя веб-страничек. Для большего разнообразия цветов пользуются 6-значным шеснадцатеричным кодом - цифры от 0 до 9 и буквы от A до F. Каждый цвет (из трех основных - красный [R], зеленый [G], синий [B]) обозначают два знака из шести шеснадцатиричных: <BODY BGCOLOR=#215E21>.

<TITLE>
<TITLE></TITLE>
Между этими тэгами вводится название страницы, которое отображается в строке заголовка окна браузера. Тэги размещаются в файле в части обозначенной тэгами <HEAD></HEAD>.

<H1>
<H1></H1> <H2, 3...6></H2, 3...6>
Тэги заголовков. Заголовки отображаются крупнее и жирнее стандартного текста. Размеры заголовков от 1 (<H1> - самый крупный) до 6 (<H6> - самый мелкий).

<P>
<P></P>
Тэг нового абзаца. Можно использовать без закрывающего тега.

<BR>
Тэг перевода строки. Аналогичен тэгу нового абзаца, но не вводит пустую строку после отделяемого текста. После этого тэга текст продолжает отображаться с начала следующей строки.
Пример1:

<HTML>
<HEAD>
<TITLE>Изучаем основные HTML тэги</TITLE>
</HEAD>
<BODY>
<H1>Пример1</H1>
После тэга заголовка всегда идет пустая строка.<P>
Тэг перевода строки<BR>
Дальнейший текст начинается с начала следующей строки.
</BODY>
</HTML>

Пример1

Тэг перевода строки
Дальнейший текст начинается с начала следующей строки.

<FONT>
<FONT SIZE="" COLOR="" FACE=""></FONT>
Позволяет управлять стилем, цветом, размером и видом шрифта.
Ключевое слово SIZE позволяет управлять размером шрифта: <FONT SIZE=4> (по умолчанию размер шрифта равен 3). Есть семь размеров, от 1 до 7. Можно задавать также относительные размеры шрифта. Для этого используется знаки "+" и "-": <FONT SIZE=+2> или <FONT SIZE=-1>.
Ключевое слово COLOR позволяет задавать определенный цвет тексту: <FONT COLOR="GRAY"> Можно также задать цвет для всего текста на странице. Это делается в тэге <BODY>: <BODY TEXT="red">.
Ключевое слово FACE задает гарнитуру шрифта: <FONT FACE="Arial">(советую аккуратно пользоваться этим тэгом поскольку необходимо осознавать, что не у всех посетителей вашего сайта могут быть установлены те же шрифты что и у вас).
Пример2:

<HTML>
<HEAD>
<TITLE>Изучаем основные HTML тэги</TITLE>
</HEAD>
<BODY>
<FONT SIZE=4 COLOR="green" FACE="Arial">Пример использования тэга FONT</FONT>
</BODY>
</HTML>

<B>
<B></B>
Задает полужирное начертание шрифта: <FONT FACE="Arial"><B>Текст</B></FONT>

<I>
<I></I>
Выделяет текст курсивом: <FONT FACE="Arial"><I>Текст</I></FONT>

<U>
<U></U>
Подчеркивает шрифт: <FONT FACE="Arial"><U>Текст</U></FONT>

<CENTER>
<CENTER></CENTER>
Выравнивает объект по центру

<TABLE>
<TABLE></TABLE>
Тэги таблицы. Охватывают ее целиком. В тэге можно указать наличие рамки, ее ширину и цвет, цвет фона, размер таблицы, выравнивание, заполнение текста.

<TD>
<TD></TD>
Определяет ячейки таблицы. Также можно указать размер, цвет, выравнивание текста.
Пример 3:

<TABLE BORDER=1 WIDTH=250 >
<TR>
<TD>Ячейка №1</TD>
<TD>Ячейка №2</TD>
</TR>
<TR>
<TD BGCOLOR=#FFFF80>Ячейка№3 </TD>
<TD BGCOLOR=#FFFF80>Ячейка №4 </TD>
</TR>
</TABLE>

Ключевое слово ROWSPAN используется для заполнения одной ячейкой сразу нескольких строк. Слово COLSPAN объединяет несколько столбцов в одну ячейку. CELLPADDING задает величину отступов текста от края таблицы, CELLSPACING - расстояние между ячейками.
Пример4:

Таблицы - один из самых удобных, на сегодняшний момент, способов верстки веб-страниц.

<IMG>
<IMG SRC=>
Размещает изображения на страничке: <IMG SRC=new.gif>. Следите за тем чтобы графический файл и файл HTML находились в одной директории (папке). В противном случае следует указать путь к файлу: <IMG SRC=images/new.gif>.
Ключевое слово ALT задает альтернативный текст: <IMG SRC=new.gif ALT="Новинка!">.
Выравнивание изображений происходит с помощью ключевого слова ALIGN и следующих ключевых слов:
LEFT - выравнивание по левому краю
RIGHT - выравнивает по правому краю
TOP - выравнивает по самому высокому элементу
TEXTOP - выравнивает по самому высокому элементу текста в строке
MIDDLE - выравнивает посередине нижнюю границу текста
ABSMIDDLE - выравнивает посередине середину текста
BOTTOM - выравнивает по нижней границе текста
<IMG SRC=new.gif ALT="Новинка!" ALIGN=RIGHT>
Ключевые слова HEIGHT (высота) и WIDTH (ширина) задают размеры изображения: <IMG SRC=new.gif ALT="Новинка!" ALIGN=RIGHT WIDTH=40 HEIGHT=13>

<A>
<A HREF=></A>
Открывающий (якорный) тэг дает возможность вставлять в документ ссылки: <A HREF=http://www.design-konkurs.newmail.ru>Ссылка на Конкурс Дизайнеров-Любителей</A>. Если файл на который вы хотите сослаться находится в той же директории (папке) что и текущий, в строке адреса можно указать только название этого файла: <A HREF=index.htm>Главная</A>. Внимание! Если вы ссылаетесь на внешний ресурс то интернет протокол надо указывать обязательно!
Цвет ссылок можно изменять. Для этого в тэг <BODY> нужно установить следующие ключевые слова:
LINK - задает цвет ссылки: <BODY LINK="gray">
VLINK - цвет уже посещенных ссылок: <BODY LINK="gray" VLINK="silver">
ALINK - цвет активной ссылки: <BODY LINK="gray" VLINK="silver" ALINK="yellow">
Вместо текста можно использовать в качестве ссылок изображения: <A HREF=index.htm><IMG SRC=arrow2.gif ALT="На главную"></A>

<HR>
Создает горизонтальную линию. Можно задать размер, цвет, использование или неиспользование тени: <HR NOSHADE WIDHT=300 COLOR="red">

Это лишь малая часть тэгов HTML языка, но зная их можно уже создавать простые страницы пользуясь только Блокнотом или другим текстовым редактором. И знание основных тэгов поможет вам в работе над веб-страничкой даже если вы пользуетесь WYSIWYG редакторами.