
- •Структура html документа
- •Параметры фона
- •Параметры текста
- •Параметры гиперссылок
- •Создание простейших html-таблиц
- •Выравнивание Параметр align Горизонтальное выравнивание
- •Параметры valign Вертикальное выравнивание
- •Параметр border
- •Параметр bordercolor
- •Параметры bordercolordark и bordercolorlight
- •Частичное отображение рамок
- •Размеры таблицы Параметры width и height
- •Внутренние отступы
- •Параметр cellspacing
- •Параметр cellpadding
- •Фон таблицы и ячеек
- •Заголовок таблицы
- •Колонтитулы таблицы
- •Параметры выравнивания содержимого ячеек — align и valign
- •Параметры bgcolor и background
- •Параметры width и height
- •Параметр nowrap
- •Слияние ячеек. Параметры colspan и rowspan
- •Заголовки строк и столбцов
- •Группировка данных
- •Отображение пустых ячеек в таблицах
- •Вложенные таблицы
- •Свойства текста
- •Свойства шрифта
- •Внедрения индивидуальных шрифтов.
- •Свойства цвета и фона
- •Блочная модель верстки
- •Позиционирование
Структура html документа
Итак, для представления текста в браузере необходимо создать файл с расширением HTML, в который будет записан этот текст, как, например обычный текстовый документ, хранящийся в ТХТ-файле, и определенный набор слов – тегов. Каждый HTML- документ содержит три основных обязательных раздела: HTML, HEAD и BODY. Эти разделы задаются парами тегов: <HTML> и </HTML> , <HEAD> и </HEAD>, <BODY> и </BODY> .
<HTML> декларация HTML
|
|
<HEAD> заголовок
</HEAD>
|
|
<BODY> тело документа
</BODY>
|
|
</HTML> |
<HTML> </HTML>
Данный элемент является самым внешним, между его начальным и конечным тегами должна находиться вся Web-страница. Раздел HTML определяет специфику документа, содержание которого будет интерпретироваться браузером, дает браузеру информацию о том, что документ разработан с помощью языка разметки HTML. Чаще всего тэг <HTML> используется без параметров. Большинство современных браузеров могут опознать документ и не содержащий тэгов <HTML> </HTML>, все же их употребление крайне желательно.
<HEAD></HEAD>
Область заголовка Web-страницы. Не является обязательным тэгом. Задачей заголовка является представление необходимой информации для программы, интерпретирующей документ. Тэги, находящиеся внутри раздела HEAD (кроме тэга <TITLE>), не отображаются на экране.
<TITLE></TITLE>
Предназначен для указания имени созданному электронному документу. Следует помнить, что под именем документа в данном случае имеется в виду не файловое наименование, а название, отображаемое в заголовке окна браузера.
Название может иметь неограниченную длину и содержать любые символы -кроме некоторых зарезервированных. (желательно не более 60 символов).
По умолчанию этот текст используется при создании закладки (bookmark) для документа. Избегайте безликих названий (Home Page, Index и т. д.).
<LINK>
Указывает на связь документа, содержащего данный тэг и другого документа или объекта. Он состоит из URL-адреса и параметров, конкретизирующих отношения документов. Заголовок документа может содержать любое количество тэгов <LINK>.
<LINK HREF="styles/main.сss" TYPE="text/css" REL="stylesheet">
Возможные параметры тега <LINK>
Параметр |
Назначение |
HREF |
Указание ссылки на внешний документ |
TYPE |
Тип внешнего документа |
REL |
Отношение между текущим и внешним документом (bookmark, copyright, glossary, help, home, index, toс, next, previous, contents и др.) |
REV |
Отношение между внешним и текущим документом (отношение, обратное REL) (author, editor, publisher, owner, made и др.) |
<LINK REL="contents" HREF ="../toc.html">
- связь с файлом оглавления документа (toc.html — table of contents) с прямым отношением contents.
<LINK HREF="mailto:info@mall.ifmo.ru" REV="made">
- связь с URL-адресом автора документа (с обратным отношением made).
<МЕТА> - Мета - определения
Необязательный тег. Предназначен для описания внутренних свойств HTML-файла, не отражающихся при просмотре Web-страницы.
Каждый элемент МЕТА содержит два основных параметра, первый из которых определяет тип данных (NAME, HTTP-EQUIV), а второй — содержание (CONTENT). Также иногда используется и дополнительный параметр URL.
Параметр |
Назначение |
HTTP-EQUIV |
Определяет свойство для тэга |
NAME |
Обеспечивает дополнительное описание тэга. Если этот параметр считается эквивалентным параметру HTTP-EQUIV |
URL |
Определяет адрес документа для свойства |
CONTENT |
Определяет возвращаемое значение для свойства |
Параметры типа мета-определений HTTP-EQUIV
Параметр |
Функция |
Подпараметры |
Примеры |
expires
|
определяет возможность запрета кэширования HTML-страниц за счет указания даты устаревания документа (актуальна для Интернет -ресурсов с динамически изменяющимся содержанием). По истечении срока, браузер будет перенаправлен к источнику для обновления информации. |
День недели (Mon, и т.д), число (01, 02, и т.д.), месяц (Jan, и т.д.), год, время (ч., мин., сек.) часовой пояс (GMT) |
<МЕТА HTTP-EQUIV="expires" CONTENT="Sat, 25 Jan 2003 15:30:00 GMT"> |
refresh
|
Перезагрузка/переадресация через заданный промежуток времени (в сек.). Полезно, если данные на странице часто обновляются. |
URL |
<МЕТА HTTP-EQUIV="refresh" CONTENT="10; URL= http://www.site.ru">
|
Content-Type |
Определение типа и кодировки документа Наиболее употребляемые кодировки Windows-1251, KOI8-R |
charset |
<МЕТА HTTP-EQUIV ="Content-Type" CONTENT= "text/html; charset=Windows-1251"> |
Content-Language |
Указание языка документа |
- |
|
Cache-Control |
Контроль кэширования документа |
- |
|
Window-target |
Определение места загрузки документа (используется для фреймовых структур) |
- |
|
Pragma
|
Управление кэшированием документа по протоколу НТТР/1.0 |
- |
|
Set-Cookie
|
Настройка чтения данных Cookies (данных пользовательского компьютера) |
Name, expires, domain, path, secure |
|
Ext-cache
|
Управление альтернативным кэшем документа |
name instructions |
|
Location
|
Указание места расположения документа в Интернете (полный адрес) |
- |
|
Теперь рассмотрим основные конструкции мета-определений второго типа — NAME.
Параметр |
Функция |
Пример |
keywords |
задает набор ключевых слов документа, предназначенных для индексирования поисковыми системами (добавления информации о документе в базы данных). Слова указываются через запятую. |
<МЕТА NAME="keywords" CONTENT="HTML, Web, WWW, Web-страница, Интернет">
|
description |
Указание краткого описания документа, также необходимого для поисковых систем (при поиске информации описание выводится рядом со ссылкой на найденный Интернет - ресурс) |
<МЕТА NAME="description" CONTENT="HTML. Язык гипертекстовой разметки HTML"> |
author |
Информация об авторе (авторах) документа
|
<МЕТА NAME="Author" CONTENT="Попов"> |
robots
|
Составление правил для индексирования документа поисковыми системами (роботами) Подпараметры: ALL, NONE, INDEX, NOINDEX, FOLLOW, NOFOLLOW По умолчанию ALL |
<МЕТА NAME="robots" CONTENT="ALL">
|
rating |
Установление возрастной категории содержания документа |
|
document-state |
Определение частоты индексирования документа |
|
revisit |
Определение промежутка времени, через которое должно производиться повторное индексирование документа |
|
distribution |
Категория распространения документа — (массовое или ограниченное) |
|
URL |
Указание основного адреса документа для индексирования (в случае существования "зеркальных" копий) |
|
copyright |
Установление авторского права и перечисление условий распространения документа |
<META name= "Copyright" content="BHV, All Right Reserved"> |
generator |
Информация о программном обеспечении, с помощью которого создавался документ |
<meta name=Generator content="Microsoft Word 10"> |
ALL - разрешение индексирования документа со всеми присутствующими в нем гиперсвязями (ссылками);
NONE запрет индексирования документа со всеми присутствующими в нем гиперсвязями;
INDEX разрешение индексирования документа;
NOINDEX запрет индексирования документа;
FOLLOW разрешение индексирования присутствующих в документе гиперсвязей;
NOFOLLOW запрет индексирования присутствующих в документе гиперсвязей.
Следует помнить о том, что использование абсолютно всех мета-определений не нужно. В зависимости от типа документа, его содержания и прочих факторов, надо выбрать только самые необходимые теги мета-данных. Наиболее важными являются данные для поисковых систем и указание кодировки документа.
<STYLE></STYLE>
Необязательный тег. Описание стиля некоторых элементов Web-страницы. Желательно переносить описания в отдельные файлы *.css «таблицы описания стилей».
<STYLE> H2 {font-family: Arial;}</style>
Позднее мы рассмотрим его более подробно.
<BODY> </BODY>
Один из самых важных компонентов любого HTML-документа, в нем располагается содержательная часть, которая выводится браузером на экран монитора пользователя. Внутри элемента BODY можно использовать все элементы, предназначенные для дизайна Web-страницы.
Тег имеет ряд параметров, которые условно можно разделить на четыре основные группы (параметры фона, границ документа, текста и гиперссылок). Если эти параметры не указывать, то соответствующие свойства страницы — отступы, цвета и др. — будут такими, какие заданы по умолчанию.