В этой статье мы рассмотрим из чего состоит часть HTML-документа,
называемая "заголовок". Как я уже говорил в статье "Знакомство с
языком", заголовок содержит служебную информацию для браузера и данные,
заключенные внутри тега-контейнера <HEAD></HEAD>, не
выводятся на экран в окне браузера. Единственное, что Вы увидите - это
данные внутри тега <TITLE></TITLE>. Этот тег выводит
название HTML-документа и браузер показывает его в заголовке окна. То
есть, если в Вашем документе присутствует, например, такая запись:
<TITLE>ЗАГОЛОВОК</TITLE>, браузер IE5.5 покажет ее так: .
Тэг title является единственным обязательным элементом заголовка документа. Его длина не должна превышать 256 знаков.
Кроме рассмотренного тэга в заголовке может содержаться большое
количество информации, позволяющее управлять показом документа в окне
браузера, содержащее данные для поисковых машин и т. д. Мы рассмотрим
только несколько элементов МЕТА, которые необходимы для того, чтобы
Вашу страничку можно было найти в дебрях интернета.
Элемент <META> не имеет закрывающей части и задает пару
свойство/значение. Атрибут NAME="" тега МЕТА определяет свойство, а
атрибут CONTENT="" определяет значение.
Например, такая строчка в заголовке:
<META NAME="Author" CONTENT="SERGEI CHERVONYASHCHY"> говорит
о том, что автор документа, содержащего эту строчку - Сергей
Червонящий. Кроме свойства "Author", нас интересуют свойства "Keywords"
и "Description". В теге МЕТА со свойством "Keywords" перечисляются
ключевые слова, характеризующие Ваш сайт, а в теге со свойством
"Description" - помещается краткое описание сайта или странички. Длина
описания ограничена 1024 знаками, включая разделы и знаки препинания.
Это ограничение касается любого поля CONTENT="", т. е. в любом теге
МЕТА между кавычками в атрибуте CONTENT="" не должно быть более 1024
знаков. Для примера Вы можете посмотреть, как выглядит заголовок
документа, который Вы сейчас читаете:
Как я предполагаю, у Вас уже готов материал, или как выражаются
профи - контент, который Вы собираетесь поместить на свою страницу, Вы
уже сейчас можете выделить слова точнее всего характеризующие Ваш сайт,
а также придумать краткое описание сайта. Нужно сказать, что для
многостраничных сайтов специалисты советуют составлять описание и набор
ключевых слов для каждой страницы отдельно. Объясняется это
особенностями работы поисковых машин.
Еще один тег, который желательно включать для удобства посетителей
сайта - <META HTTP-EQUIV="Content-Type" CONTENT="text/html;
Charset=Windows-1251"> - указывает кодировку, в которой написана
страница. При его отсутствии в заголовке, браузеры, у которых включено
автоматическое определение кодировки, могут вместо русских букв
показывать на Вашей страничке всяческие кракозябры.
Теги со свойствами "автор" и "генератор" включаются по желанию
автора. Правда, почти все HTML-редакторы вставляют тег "генератор" со
своим именем автоматически.
Если Вы работаете с редактором Visual HTML Workshop, то для
включения всех этих тегов в заголовок Вам необходимо лишь заполнить
соответствующие поля (на рисунке отмечены птичками) при создании нового
проекта или добавлении документа к проекту:, а все остальное редактор сделает сам.
Теперь настало время переходить поближе к телу (в смысле, к телу
документа, которое обозначается тегом <BODY>.) Но перед этим я
расскажу подробнее, как работать с редактором Visual HTML Workshop. Об
этом пойдет речь в следующей статье.
Работа с редактором Visual HTML Workshop
Работа с редактором Visual HTML Workshop очень проста и напоминает
работу со многими текстовыми редакторами. На рисунке Вы видите внешний
вид главного окна.
Главное
окно имеет меню в верхней части и комбинированную панель кнопок,
дублирующих большинство пунктов меню. Если поднести указатель мышки к
интересующей вас кнопке, то появится всплывающая подсказка.
На первом этапе нас интересуют четыре кнопки:
Создать новый проект.
Создать страницу проекта.
Сохранить весь проект.
Посмотреть в браузере
При нажатии на кнопку "Создать новый проект" появляется окно "Новый проект - директории": Выбираем
в соответствующих окошках каталог, где будут располагаться файлы
проекта, и название проекта. Каталог можно задать, выбрав нужный в
левом окошке, или прописав его вручную. Оставляем в силе галочки
"Хранить ссылку на корневой каталог" и "Использовать директорию для
графических файлов" (с двоичными файлами пока не связываемся) и
нажимаем кнопку "далее".
Появляется следующее окно "Оформление страниц":
Здесь вообще все ясно расписано. Опять же выбирать цвета можно
или прописав коды вручную, или нажав на кнопку "определить", выбрать
то, что Вам нравится. При изменении кодов в окошках "цвет" в правом
окошке "вид" показывается, как будет выглядеть Ваша будущая страница.
Оставляем пока в покое "Использование таблиц стилей" и, после того, как
определились с цветами, жмем "далее".
Следующее окно:JavaScript
мы пока не используем, заполняем графы "ключевые слова" и "описание
документа". Должен сразу сказать, что все занесенное в эти графы будет
автоматически вставляться в теги МЕТА в заголовки всех
страниц проекта. Поэтому, если Вы решили использовать для каждой
страницы Вашего сайта отдельное описание и набор ключевых слов, то эти
окошки следует оставить пустыми, поставив только флажки. В принципе,
особой роли это не играет, т. к. эти теги можно вставить в документ или
исправить, добавить и т. д. вручную в любое время, даже после
завершения работы над проектом.
Не забудьте поставить флажок "Указывать Charset в МЕТА". Для чего, я уже говорил.
"Дополнительные вставки в документ"... Если Вы поставите
соответствующий флажок и нажмете кнопку "редактировать", откроется
окошко, куда Вы сможете ставить HTML-код, который будет повторяться во
всех документах. Например, можно в заголовок вставить тег МЕТА со
свойством "Author", а в тело - Ваше лого, или перечисление
навигационных сносок, которые в противном случае придется прописывать
на каждую страницу вручную.
Пропускаем скрипты и нажимаем кнопку далее. Появляется последнее окно из серии "Новый проект - фреймы:С фреймами мы пока решили не связываться, поэтому сразу жмем "готово".
Теперь уже появляется главное окно редактора с довольно приличным куском HTML-кода первой страницы Вашего сайта:
Редактор автоматически дает название файлу, в котором будет храниться
эта страница - index.html, как того требуют большинство серверов. Если
на сервере, куда Вы поместите свой сайт, будут другие требования, Вы
всегда сможете изменить это имя. К этому могу добавить, что в названиях
файлов, которые Вы будете давать следующим страницам, стоит употреблять
только прописные буквы латинского алфавита. Это объясняется
особенностями операционной системы UNIX, под которой работают
большинство серверов.
Теперь Вы можете, нажав на одну из кнопок 4 (в зависимости от того,
какой браузер Вы предпочитаете), посмотреть, что у Вас получилось.
Документ, изображенный на последнем рисунке, будет выглядеть в окне
браузера вот так. Можете считать, что первая Ваша страница создана. В следующей статье мы начнем наполнять ее содержанием.