Главная » Создание сайтов » Верстка » Html c нуля: Структура документа

Html c нуля: Структура документа

html-structura-doc

Сегодня мы начнем изучение html. Тема этого поста — «Структура документа».

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>).

Пример:
<head>

<title>Структура документа</title>

</head>
Параметров нет.

<meta> ... </meta>

Служит для размещения дополнительной информации о Web-странице: предоставление информации о документе, его авторе, дате создания, списки ключевых слов для поисковых машин и т.п.

Параметры

content — Устанавливает значение параметра, заданного с помощью name или http-equiv.

http-equiv — Предназначен для конвертирования метатега в заголовок HTTP.

name — Имя метатега, также косвенно устанавливает его предназначение.

CONTENT

Параметр content может содержать более одного аргумента, в этом случае аргументы разделяются запятыми или точкой с запятой.

Пример:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
HTTP-EQUIV

Браузеры преобразовывают значение параметра http-equiv, заданное с помощью content, в формат заголовка ответа HTTP и обрабатывают их, как будто они прибыли непосредственно от сервера.

Аргументы

Content-Type — Тип кодировки документа.

expires — Устанавливает дату и время, после которой информация в документе будет считаться устаревшей.

pragma — Способ кэширования документа.

refresh — Загрузить другой документ в текущее окно браузера.

Пример:
<meta http-equiv="expires" content="Sun, 01 Jan 2006 07:01:00 GMT"
NAME

Устанавливает идентификатор метатега для пары «имя=значение». Одновременно использовать параметры name и http-equiv не допускается.

Аргументы

author — Имя автора документа.

description — Описание текущего документа.

keywords — Список ключевых слов, встречающихся на странице.

Пример:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<meta name="keywords" content="HTML, META, метатег, тег, поисковая система">
Все примеры:
<meta http-equiv="Content-Language" content="ru">

<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">
Мы закончили с этим тегом ура... У вас будет время освоить это все, не волнуйтесь!

Устанавливает связь с внешним документом вроде файла со стилями или со шрифтами.

Параметры

href — Путь к связываемому файлу.

rel — Определяет отношения между текущим документом и файлом, на который делается ссылка.

type — MIME-тип данных подключаемого файла.

HREF

Путь к файлу, на который делается ссылка (URL).

Пример:
<link href="http://bitby.net/wp-content/themes/vibrant/style.css">
MEDIA

Определяет устройство, для которого следует применять стилевое оформление. Это позволяет сделать разный стиль для отображения документа на экране монитора и при его печати. Допускается писать несколько аргументов через запятую.

Аргументы

all — Все устройства .

screen — Экран монитора. (Значение по умолчанию)

print — Печатающее устройство вроде принтера.

projection — Проектор.

braille — Устройства, основанные на системе Брайля, которые предназначены для слепых людей.

speech — Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
<link media="all | screen | print | projection | braille | speech ">
REL

Параметр rel определяет отношения между текущим документом и файлом, на который делается ссылка. Это необходимо, чтобы браузер знал, как использовать подключаемый документ.

Аргументы

stylesheet — Определяет, что подключаемый файл хранит таблицу стилей (CSS).

application/rss+xml — Файл в формате XML для описания ленты новостей, анонсов статей.

Пример:
<link rel="stylesheet" type="text/css" href="hb.css">
TYPE

Сообщает браузеру, какой MIME-тип данных используется для внешнего документа. Как правило, применяется для того, чтобы указать, что подключаемый файл содержит CSS.

Аргументы

Имя MIME-типа в любом регистре. Для подключаемых таблиц связанных стилей применяется тип text/css.

Пример:
<link rel="stylesheet" type="text/css" href="/styles/htmlbook.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 пока ничего ; ). С ним мы разберемся в следующий раз.

Вот как все это будет выглядеть:
<html title="Вы остановили курсор здесь">

<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. Узнали их параметры и как их применять.

Спасибо, за то что были со мной.

Статья написана при поддержки htmlbook

С уважением, Vasilenko Ivan!
16 февраля 2009 в 18:207 комментариев Верстка

Комментарии — 7 комментариев

  1. #427 Сергей М. в 19:34, 16 февраля 2009: (подписался)

    Ответить | Цитировать

    Content-Type должен всегда идти до title, чтобы не вызывать проблем у ослика и хрома.

    link rel для RSS — alternate

    Перечислять не семантические аргументы (типа bgcolor) вообще бы не стоило. Они в HTML4 объявлены deprecated

  2. #428 WebMast в 20:47, 16 февраля 2009:

    Ответить | Цитировать

    Перечислять не семантические аргументы (типа bgcolor) вообще бы не стоило. Они в HTML4 объявлены deprecated

    Рано еще говорить о css. Пока подойдут и эти параметры, а о том что HTML 4 не рекомендует их использовать, я пометил =).

  3. #2086 Evfrosin в 21:57, 29 июня 2009:

    Ответить | Цитировать

    Спасибо, буду следить за Вашими уроками основы Html правда знаю но стоит пойти немного дальше как уже проблемы.

  4. #9578 Dj Vkontakte в 22:53, 2 апреля 2010: (подписался)

    Ответить | Цитировать

    Спасибо, было полезно почитать.

    Интересно, конструкция ... может как-то повлиять на СЕО?

  5. #9579 Dj Vkontakte в 22:57, 2 апреля 2010: (подписался)

    Ответить | Цитировать

    Блин, html вырезался, дублирую без тегов:

    html title="Вы остановили курсор здесь"

  6. #9581 WebMast в 13:16, 3 апреля 2010:

    Ответить | Цитировать

    Именно «Вы остановили курсор здесь» — нет. Но сюда можно вставить более подходящее описание. Тогда, думаю оно повлияет.

  7. [...] предыдущей статье я писал о основных тегах, которые обязательны на html [...]

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Подписаться, не комментируя