Оглавление:
Вступление 1
Заголовок HTML-документа 2
Навигационные карты 3
Фреймы 4
Скрипты 5
Тело документа 5
Текстовые блоки 6
Форматирование текста 7
Гиперссылки 8
Списки 8
Таблицы 9
Формы 10
Вступление
Этот учебник, самоучитель, помощник - называйте как хотите - предназначен для всех, кто хочет научиться создавать странички HTML, а в том случае, если вы уже умеете это делать, он послужит подсказчиком, напомнит забытый параметр, ведь невозможно помнить все?!
Ну а теперь давайте рассмотрим два основных понятия HTML:
ТЭГ - единица HTML кода, направляющая браузеру определенную команду. Тэги бывают начальными (открывающими) и конечными (закрывающими). Рассмотрим пример:
<html> - открывающий тэг, который можно закрыть с помощью тэга </html>. Существуют и тэги, которые не требуют закрытия, например <br>.
ЭЛЕМЕНТ - это все что находится между открывающим и закрывающим тэгами, например элементом будет называться все что находится между тегами <font></font>.
ПАРАМЕТР - "тэг в тэге". Например делать ссылку следует с помощью тега <а>, но нам следует указать адрес, на который она будет ссылаться. Это делается так: <а href="http://mik-on.narod.ru/">текст ссылки</а>. В данном случае href="http://mik-on.narod.ru/" - параметр, с помощью которого указывается адрес перехода, в данном случае - это адрес нашего сайта.
Создать первый html-документ нам поможет браузер, в большинстве случаев это InternetExplorer или NetscapeNavigator, и текстовый редактор, например обычный БЛОКНОТ.
Итак открываем блокнот, нажимаем кнопку файл>сохранить как...>во вкладке "тип файла" выбираем "все файлы", а во вкладке имя файла указываем <имя>.html (вместо <имя> указываем имя, например index). После того, как файл будет сохранен, не закрывая блокнот, открываем этот файл с помощью двойного клика (он должен открыться в вашем браузере). Далее будем изменять текст документа в Блокноте, нажимать кнопку "сохранить", а потом получать результат в браузере, нажав кнопку "обновить".
Итак, давайте создадим первый документ. Для этого проделайте все, что описано выше. Затем нам нужно вписать строку спецификации HTML какой-либо версии, обычно она выглядит так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//RU">
С помощью этой строки мы помогаем браузеру определить на какой версии языка html написан наш документ, в данном случае - это версия 3.2.
Вот и создан простейший html - документ.
Но мы с вами понимаем, что одной этой строчкой не обойтись.
О начале html-документа нам говорит тэг <html>, о конце - </html>. Впишем их. Теперь текст нашего документа будет выглядеть так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//RU">
<html>
</html>
Обо всем, что будет между тэгами <html> и </html> поговорим далее.
Заголовок html-документа
Итак в прошлой главе мы сделали самый простой документ, и теперь нам надо его "усложнить" с помощью заголовка и тела документа. Сделать это можно с помощью следующей схемы строения html-документа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//RU">
<html><!-- начало документа -->
<head><!-- это "шапка" документа. Между тэгами <head> и </head> указывается название документа и др. -->
</head>
<body><!-- это тело документа, т.е. то, что будет видно в браузере -->
</body>
</html><!-- конец документа -->
<!-- ... --> - это ремарки, на которые браузер не обращает внимания, зато нам удобнее - этими метки придуманы для удобства, они помогают нам разобраться в нашем документе, представьте, что документ состоит не из 5 строчек, а из множества...
Теперь возьмите и скопируйте красный текст к себе в Блокнот (ремарки можете не писать), и вы получите шаблон, по которому будет строиться любой html-документ.
Итак, приступим непосредственно к описанию, заголовку документа, т.е. тэга <head>.
Тэги <head> и </head> указывают на начало и конец заголовка документа.
Между ними можно написать еще несколько тэгов:
TITLE - определяет имя документа, которое будет отображаться в заголовке окна вашего браузера. Данный элемент обязателен и может быть указан один раз.
BASE - элемент не имеет конечного тэга. В нем можно указать следующие параметры: href - определяет базовый адрес (URL) документа, target - если вы используете фреймы, то указывает имя фрейма на который будут ссылаться все ссылки документа, полезен, если вы хотите открывать ссылки в новом окне.
STYLE - используется для создания "стиля" документа. Параметры: type - обязательный параметр. Определяет MIME-тип вставляемого блока стилей. Обычное значение этого параметра "text/css", title - определяет имя создаваемой таблицы стилей. Очень помогает при использовании нескольких элементов style в одном документе.
LINK - этот элемент показывает взаимосвязь данного документа со всеми документами на сайте. Параметры: href - определяет URL объекта; type - определяет MIME-тип объекта, указанного в параметре href; rel - определяет тип взаимосвязи с документом, указанном в параметре href, может принимать значения: stylesheet - указывает на то, что файл, указанный в параметре href содержит таблицу стилей (CSS), home - указывает на главную страницу вашего сайта, contents - указывает на файл, содержащий оглавление данного документа, index - указывает на файл, содержащий информацию для индексного поиска по текущему документу, glossary - указывает на файл, содержащий перечень терминов, относящихся к текущему документу, copyright - указывает на страницу сайта, в которой говорится о его создателях, авторских правах и т.п., up/parent - указывает на "родительскую" страницу (документ, стоящий на ступеньку выше в иерархической структуре вашего сайта), child - указывает на "дочернюю" страницу (документ, стоящий на ступеньку ниже в иерархической структуре вашего сайта), next - указывает на следующую страницу в последовательности документов (напр. следующую страницу электронного каталога, документации или словаря), previous - указывает на предыдущую страницу в последовательности документов, last/end - указывает на последнюю страницу в последовательности документов, first - указывает на первую страницу в последовательности документов, help - указывает на страницу с подсказкой (напр. по навигации по вашему сайту).
META - данный элемент используется для техописания документа, которое представляет собой метаданные в виде пары "имя-значение". С помощью этого элемента в заголовок документа внедряется дополнительная полезная информация, невидимая для пользователя, но порой просто незаменимая для правильной индексации вашей страницы роботами поисковых серверов. Элемент не имеет конечного тэга. Параметры: name - определяет имя мета-записи. Существует множество предопределенных имен, некоторые из которых вы можете увидеть в указанном ниже примере, http-equiv - определяет имя мета-записи. Практически аналогичен параметру NAME, но используется лишь в случае необходимости передачи дополнительной информации в HTTP-заголовке, content - присваивает значение мета-записи, определенной в параметре NAME (или HTTP-EQUIV).
Итак, мы узнали обо всех элементах, которые указываются в заголовке документа, давайте посмотрим на них в действии:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//RU">
<html>
<head>
<title>впишите свое название</title>
<!-- пусть браузер думает, что находится по данному адресу -->
<BASE HREF="http://www.mik-on.narod.ru/index.html">
<!-- Вставляем таблицу стилей --> <STYLE TYPE="text/css" TITLE="Cool table"> <!-- A {text-decoration : none;} P {color : blue; font-size : 12pt; font-family : Arial;} H1 {color : red; font-size : 18pt;} --> </STYLE> <!-- конец таблицы стилей -->
<LINK REL="HOME" TITLE="HTML-справочник" HREF="index.html"> <META HTTP-EQUIV="Expires" CONTENT="вт, 07 янв 2003 21:47:15 GMT"> <META NAME="GENERATOR" CONTENT="mik-on"> <META NAME="Publisher-Email" CONTENT="mik-on@narod.ru"> <META NAME="Publisher-URL" CONTENT="http://www.mik-on.narod.ru/"> <META NAME="Keywords" CONTENT="html, учебник, тэг, mik-on"> <META NAME="Description" CONTENT="Все что нужно вэб-дизайнеру.">
</head>
<body>
<!-- А теперь для того, чтобы понять зачем нужен base создадим относительную ссылку на документ http://www.mik-on.narod.ru/about.html --> <A HREF="../about.html">О нас</A>
</body>
</html>