HTML (HyperText Makeup Language - язык создания гипертекстовых документов) - стандарный сервис сети Интернет, принятый WWW- консорциумом (W3C).На сегодняшний день последней является 4-я версия стандарта(подробнее - http://www.w3c.org/),переработанная и до полненая по сравнению с версией 3.2
Данный документ не является ни переводом какого-либо стандарта, ни сопутствующим комментарием, его цель - предоставление общих знаний о формате HTML и путях его создания.
2.1 Что такое HTML ?
На самом деле,если вы
откроете файл с расширением htm (или html) в любом текстовом редакторе, вы
увидите,что это не что иное, как... обычный текст, правда "испорченный"
какими-то словами в угловых скобках.Эти "ненужные" слова и представляют
собой средства разметки текста, которые понимает программа, работающая с
html-файлами(такую программу называют браузер).Похожий принцип построения
докуметов не нов, и встречается,например, в текстовом процессоре TeX.
То есть html - это обычный текст (информация) плюс управляющие элем
енты - тэги (удобное представление этой самой информации).
Одсюда
следует, что для того, чтобы создать гипертекст,нужно всего лишь знать
как, куда и в каком количестве "вносить" эти управляющие элементы.
2.2 Тэги.
Тэги - (от англ. tag) это средство,
позволяюшее браузеру предоста вить имеющуюся у вас информацию в виде,
удобном для восприятия, пои ска, чтения.Это в своем роде язык
программирования, определяющий,как будет выглядеть на экране следующая
строка, что нужно выделить, а что - наоборот - столь очевидно,что нет
необходимости это подчеркивать.
Тэгом считается определенное выражение,
помещенное в скобки вида . Весьма условно тэги можно разделить на
граничные и унарные.Унарные тэги представляют собой очевидные операции,
предписывающие браузеру совершить определенное действие по постижению
данного тэга при обра ботке html - документа.Пример - наиболее часто
употребляемый тэг
- переход на другую строку, весь следующий за
ним гипертекст браузер будет представлять, начиная с новой строки.Унарные
тэги не относятся к определенным участкам текста,а,скорее всего, к всей
последующей части документа.С граничными тегами сложнее, но надо
учитывать, что их много больше, нежели унарных.Граничные тэги определяют,
как будет выглядеть на экране пользователя часть текста,определеная этими
элементами, причем в начальном тэге можно указывать различные
параметры,опреде ленные данному тэгу, в конечном тэге эти параметры
присутствовать не должны(браузером они игнорируются).
- Здесь
- a - управляющее слово, показывающие, что текст вплоть до тега ,будет являться гипертекстовой ссылкой (то есть указнием браузеру просмотреть определенный html - документ при совершении управляющего действия (шелчка мыши) над "ограниченным" текстом)
- href="..." - параметр, определяющий,какой документ будет просмотрен (это может быть как файл на локальной или удаленной машинах,так и просто IP-адрес удаленной(с условием,что эта машина предоставляет http - сервис))
Некоторые параметры определены по умолчанию браузером, некоторые- пользователем браузера,но есть и такие,определять которые необходимо при создании страницы(пример - тотже параметр href тэга ).
Из всего вышесказанного следует, что,зная наиболее употребляемые тэги и их параметры, любой пользователь легко может редактировать и создавать гипертекст.При этом необходимо учитывать, что тэги могут включать в себя другие тэги, а так же необходимо иметь представление о структуре html - документов.
2.3 Структура HTML - документов. Структура гипертекстовых файлов черезвычайно проста.HTML-документ должен начинаться тэгом и заканчиваться .Информация вне этих тэгов игнорируется,либо выдается в нелицеприятном виде. Помимо этого все, огражденное тегами и делится на две части:
- заголовок
(меньшая часть)
Ограничивается тэгами и .Содежит, как правило мета-информацию,то есть дополнительные данные о странице, и заголовок страницы,выносимый как правило в заголовок окна браузера(в оконной графической системе).
Рассматривать представление мета-информации в данном тексте не имеет смысла,поскольку она не играет никакой роли при визуализации страницы.Заголовок определяется тэгами и ,эго присутствие необязательно,но желательно.Тэги и параметров не имеют.Эта часть документа может отсутствовать.
- основная часть документа
(тело)
Ограничивается тэгами и .Определяет то,что выводится в главном окне браузера.Здесь сосредотачивается вся несомая страницей информация.Так же может отсутствовать при использовании фреймов.- Тэг имеет следующие (необязательные) параметры:
- background="img.gif" - на задний план документа помещается изображение из файла img.gif
- bgcolor="RED" - цвет заднего плана, если преведущий параметр не определен(о представлении цвета в HTML смотрите следующую часть главы)
- text="BLACK" - цвет текста документа
- link="RED" - цвет гиперссылок документа
- vlink="WHITE" - цвет гиперссылок,уже посещенных пользователем
и другие.
Заголовок . . Тело документа. .
Области и не пересекаются.Любая информация вне них,но внутри -области инорируется, если не несет с собой управляющий характер(например, является java-скриптом).2.4 Представление цвета в HTML. Цвет в гипердокументах представляется в виде трех двухбайтных составляющих, записанных в шестнадцатиричной системе счисления.Каждая сотавляющаая определяет количество базисного цвета (по системе RGB) в данном.То есть вы можете в одном из параметров тэга вместо "WHITE" указать "#ffffff", где # указывает,что следующее число шестнадцатиричное, а каждая из световых компонент (напомню, здесь используется аддитивная модель цветопередачи) имеет значение ff, то есть участвует в формировании цвета полностью.Соответствено базисные цвета могут быть представлены: #ff0000 RED красный #00ff00 GREEN зеленй #0000ff BLUE синий Наиболее часто используемые сочетания трех компонент занесены в таблицу, имеющуюся в любом справочнике по HTML.Каждая из комбинаций имеет определенное название, распознаваемое браузером.Именно в таком виде определялись цвета в примере с тэгом .
2.5 Основные тэги HTML. В этой части главы будут кратко описаны наиболее часто встречаемые тэги гипертекстового языка.Более подробно они описаны в спецификации и разного рода справочной и учебной литературе.
- Тэги, оределяющие отображение текста
- размер шрифта - определяет следующий до закрывающего тэга текст как заголовок первого уровня (размер букв - максимально допустимый) - .. - .. размер букв изменяется пропорционально - .. в сторону допустимого минимума - .. - размер букв -минимально допустимый - максимально допустимый шрифт - минимально допустимый шрифт (Границы допустимости шрифтов задаются браузером, используя среднее значение, определяемое,как правило, пользователем)
- вид надписи - (italic
) наклонный шрифт
- (bold
) шрифт с выделением толщиной символов
- (underline
) подчеркнутый текст
- (teletype) a-la телетайпное сообщение
- мигающая надпись
Форматированный вывод текста (широко использует MS Word 8)
Кроме того существует тэг, определяющий тип шрифта, размер и цвет -- где
face - тип шрифта (не стоит увлекаться экзотическими шрифтами, поскольку они могут отсутствовать в системе клиента)
size - размер (варьируется от 1 до 6) в относительных единицах.Его также можно задавать относительно,например: size=+1 (увеличить текущее логическое значение на 1)
color - задает цвет шрифта. - форматирование текста (и других элементов) - выравнивание по центру - выравнивание по левой границе - выравнивание по правой границе
- Теги,отвечающие за формирование списков -
-
- - Эти два тэга определяют ограничиваемую область как
список с соответствующим отступом от левой границы
документа
-
- - определяет следующую информацию как новый элемент списка.
Выделяется различными фигурками (пунктами)
Списки могут быть вложенными, то есть элементом одного из списков может быть другой список. - Тэги общего характера
- -
Вставка в документ графической информации.(Злоупотребление этим
тэгом снижает посещаемость страницы!)
- Параметры:
- src="имя-файла" - указание, какой файл будет включен. Современные нетекстовые браузеры опрерируют изображениями в форматах GIF89, JPEG, animated GIF, реже - PNG и XPM.
- alt="текстовой-аналог" - применяется в случае, если у клиента отключена загрузка графических изображений.
- width - Ширина изображения в пикселах (может не соответствовать реальному).
- height - Высота изображения в пикселах.
- - разделяющая части документа линия.Параметр width определяет длину как в абсолютных(пикселах), так и в относительных единицах(процентах).
- тэг начала новой строки.- code>.
- - тэг гипертекстовых
ссылок.Может адресовать документы в:
- глобальной сети
Параметр href содержит полный (с адресои ЭВМ, содержащий данный файл) путь и имя файла. - файл на данной машине
(необязательно html-документ)
Параметр href содержит путь к файлу относительно текущего каталога и имя файла. - метку в текущем документе
Параметр href содержит символ # и имя метки.Например, для метки 001 ссылка выглядит как .Метки задаются тем же тэгом, но с другим параметром , где name - имя метки (# - не используется!).Примет для 001 -
- глобальной сети
- -
Вставка в документ графической информации.(Злоупотребление этим
тэгом снижает посещаемость страницы!)
2.6 Работа с таблицами в HTML. Таблицы в HTML - это один из мощных инструментов представления информа ции.Они описываются набором тегов, почти каждый из которых имеет свои параметры.Рассмотрим основные:
- объявление таблицы и определение некоторых параметров
bgcolor - цвет фона таблицы
width - ширина таблицы в абсолютных и относительных единицах
border - ширина рамки таблицы (в пикселах)
cellpadding - отступ от границ при визуализации табличного контента (в пикселах)
cellspacing - промежуток между ячейками таблицы (в пикселах)- - заголовок таблицы.Как правило, применяется после объявления таблицы
- - заголовок каждого столбца.
- объявление строковых элементов таблицы.Используется в паре с тэгом , определяющим вертикальныеразделяющие линии при визуализации таблицы.То есть область, ограничиваемая тэгом включает в себя одну или несколько областей, ограниченых тегом , определяющим, что будет находится в каждой ячейке на данной строке. Пример: HTML - решение: Нужно построить таблицу: 1 1 3 1 1 32 2 3 - Последние три тэга имеют ряд параметров:
- colspan=.. - "растянуть" данную ячейку в ширину на указанное целое число ячеек. (неприменимо к tr)
- rowspan=.. - аналогично, но действие происходит по вертикали.
- bgcolor=.. - задание цвета фона для каждой ячейки
2.7 Фрэймы. Фрэймы - это окна независимого просмотра различных html - документов. Иногда бывает очень удобно организовать навигацию по странице в виде меню в отдельном фрейме, и основного окна, где будет представлятся вся информация, определяемая действиями пользователя в области меню.Здесь окно нужно понимать как часть рабочей области браузера, а не как отде льное от нее окно в среде Windows или X11 (хотя при помощи JavaScripts возможно и такое).Поясню действие фреймов на примере:
Создадим 2 фрэйма: меню и информационное окно.
Основной html-файл будет выглядеть так:index.htm Ключевые слова|О нас|Название компании или сайта
Влад Мержевич
Метатеги используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.
Метатеги для поисковых механизмовСреди разработчиков сайтов существует мнение, что правильно написанные метатеги позволяют подняться к верхним строчкам поисковых серверов. На самом деле это не так, на одних метатегах высоко не поднимешься, но и неудачно выполненное содержимое метатегов может ухудшить рейтинг сайта.
Два метатега предназначены специально для поисковых серверов: description (описание) и keywords (ключевые слова). Некоторые вебмастера добавляли в раздел keywords ключевые слова, которые не имеют никакого отношения к теме сайта, но зато пользовались определенным успехом среди посетителей поисковиков. Однако, через некоторое время, поисковые системы научились бороться с таким явлением и проверяют содержимое веб-страницы на соответствие заявленным ключевым словам.
Некоторые принципы, относящиеся к метатегам:
- не включайте ключевые слова, которые не содержатся на ваших страницах;
- не повторяйте ключевые слова;
- используйте метатеги по их прямому назначению;
- делайте описание и список ключевых слов различными для каждой страницы сайта с учетом содержимого.
Большинство поисковых серверов отображают содержимое поля description (пример 1) при выводе результатов поиска. Если этого тега нет на странице, то поисковый движок просто перечислит первые встречающиеся слова на странице, которые, как правило, оказываются не очень-то и в тему.
Пример 1. Использование Description
description
keywordsЭтот метатег был предназначен для описания ключевых слов, встречающихся на странице (пример 2). Но в результате действия людей, желающих попасть в верхние строчки поисковых систем любыми средствами, теперь дискредитирован. Поэтому многие поисковики пропускают этот параметр.
Пример 2. Использование Keywords
keywords
Ключевые слова можно перечислять через пробел или запятую. Поисковые системы сами приведут запись к виду, который они используют.
Автозагрузка страницЧтобы автоматически загружать новый документ через определенный промежуток времени используется инструкция http-equiv="refresh" (пример 3).
- - определяет следующую информацию как новый элемент списка.
Выделяется различными фигурками (пунктами)