Html c нуля: Структура документа
Понедельник, Февраль 16, 2009 18:20 
Сегодня мы начнем изучение html. Тема этого поста — «Структура документа».
— (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Все веб-страницы создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме. Подробнее можно узнать перейдя по ссылке.
<html> ... </html>
Первый тег который мы изучим, это <html></html>.Он заключает в себя весь текст html. Другими словами, все содержимое веб-страницы.
Параметры
title — Добавляет поясняющий текст на веб-страницу в виде всплывающей подсказки, которая отображается, когда курсор мыши задерживается в окне веб-страницы.
Пример:
<html title="Вы остановили курсор здесь"> ... </html>
Не злоупотребляйте этим параметром.
<head> ... </head>
Тег <head> предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными.
Внутри контейнера <head> допускается размещать следующие элементы: <base>, <link>, <meta>, <script>, <style>, <title>. Это лишь те, которые мы с вами будем разбирать.
Параметров нет.
<title> ... </title>
Определяет заголовок Web-страницы. Может применяться только в HTML-заголовке (внутри тега <head>).
Пример:
<title>Структура документа</title>
</head>
Параметров нет.
<meta> ... </meta>
Служит для размещения дополнительной информации о Web-странице: предоставление информации о документе, его авторе, дате создания, списки ключевых слов для поисковых машин и т.п.
Параметры
content — Устанавливает значение параметра, заданного с помощью name или http-equiv.
http-equiv — Предназначен для конвертирования метатега в заголовок HTTP.
name — Имя метатега, также косвенно устанавливает его предназначение.
CONTENT
Параметр content может содержать более одного аргумента, в этом случае аргументы разделяются запятыми или точкой с запятой.
Пример:
HTTP-EQUIV
Браузеры преобразовывают значение параметра http-equiv, заданное с помощью content, в формат заголовка ответа HTTP и обрабатывают их, как будто они прибыли непосредственно от сервера.
Аргументы
Content-Type — Тип кодировки документа.
expires — Устанавливает дату и время, после которой информация в документе будет считаться устаревшей.
pragma — Способ кэширования документа.
refresh — Загрузить другой документ в текущее окно браузера.
Пример:
NAME
Устанавливает идентификатор метатега для пары «имя=значение». Одновременно использовать параметры name и http-equiv не допускается.
Аргументы
author — Имя автора документа.
description — Описание текущего документа.
keywords — Список ключевых слов, встречающихся на странице.
Пример:
<meta name="keywords" content="HTML, META, метатег, тег, поисковая система">
Все примеры:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
Мы закончили с этим тегом ура... У вас будет время освоить это все, не волнуйтесь!
<link> ... </link>
Устанавливает связь с внешним документом вроде файла со стилями или со шрифтами.
Параметры
href — Путь к связываемому файлу.
rel — Определяет отношения между текущим документом и файлом, на который делается ссылка.
type — MIME-тип данных подключаемого файла.
HREF
Путь к файлу, на который делается ссылка (URL).
Пример:
MEDIA
Определяет устройство, для которого следует применять стилевое оформление. Это позволяет сделать разный стиль для отображения документа на экране монитора и при его печати. Допускается писать несколько аргументов через запятую.
Аргументы
all — Все устройства .
screen — Экран монитора. (Значение по умолчанию)
print — Печатающее устройство вроде принтера.
projection — Проектор.
braille — Устройства, основанные на системе Брайля, которые предназначены для слепых людей.
speech — Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
REL
Параметр rel определяет отношения между текущим документом и файлом, на который делается ссылка. Это необходимо, чтобы браузер знал, как использовать подключаемый документ.
Аргументы
stylesheet — Определяет, что подключаемый файл хранит таблицу стилей (CSS).
application/rss+xml — Файл в формате XML для описания ленты новостей, анонсов статей.
Пример:
TYPE
Сообщает браузеру, какой MIME-тип данных используется для внешнего документа. Как правило, применяется для того, чтобы указать, что подключаемый файл содержит CSS.
Аргументы
Имя MIME-типа в любом регистре. Для подключаемых таблиц связанных стилей применяется тип text/css.
Пример:
<body> ... </body>
Вот мы и подошли к последнему, на сегодня, тегу. Это самы нужный и обязательный тег.
Элемент <body> предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера body. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.
Параметры
alink — Устанавливает цвет активной ссылки.
background — Задает фоновый рисунок на веб-странице.
bgcolor — Цвет фона веб-страницы.
bgproperties — Определяет, прокручивать фон совместно с текстом или нет. (Существует только одно значение fixed, которое фиксирует фон. Если требуется, чтобы фон не фиксировался, удалите параметр bgproperties у тега <body> или установите у него пустое значение.)
bottommargin — Отступ от нижнего края окна браузера до контента.
leftmargin — Отступ по горизонтали от края окна браузера до контента.
link — Цвет ссылок на веб-странице.
scroll — Устанавливает, отображать полосы прокрутки или нет. (<body scroll="yes | no">...</body>. Yes — отображает полосы прокрутки. no — запрещает показ полос прокрутки в окне. Yes — значение по умолчанию. )
text — Цвет текста в документе.
topmargin — Отступ от верхнего края окна браузера до контента.
vlink — Цвет посещенных ссылок.
Если что-то не понятно с тегом body, обращайтесь, ибо мне ничего больше не приходит в голову.
Теперь мы разберем, как компоновать эти теги...
Тег html идет всегда первым. Дальше в него помещаем head и body. В head ставим link, meta и др. В body пока ничего ; ). С ним мы разберемся в следующий раз.
Вот как все это будет выглядеть:
<head>
<title>Структура документа</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
Вы на моей странице!
</body>
</html>
Сегодня мы научились создавать свою структуру. Она везде одинакова =). Разве что отличаются внутренности head. Познакомились с 6 тегами. Это html, head, meta, link, title, body. Узнали их параметры и как их применять.
Спасибо, за то что были со мной.
Статья написана при поддержки
Loading ...
Сергей М. сообщил:
Февраль 16th, 2009 19:34
Content-Type должен всегда идти до title, чтобы не вызывать проблем у ослика и хрома.
link rel для RSS — alternate
Перечислять не семантические аргументы (типа bgcolor) вообще бы не стоило. Они в HTML4 объявлены deprecated
WebMast сообщил:
Февраль 16th, 2009 20:47
Рано еще говорить о css. Пока подойдут и эти параметры, а о том что HTML 4 не рекомендует их использовать, я пометил =).
Evfrosin сообщил:
Июнь 29th, 2009 21:57
Спасибо, буду следить за Вашими уроками основы Html правда знаю но стоит пойти немного дальше как уже проблемы.