Главная » Создание сайтов » Верстка » Структура документа. Часть 2. Практика

Структура документа. Часть 2. Практика

Структура документа. Часть 2. Практика
В предыдущей статье я писал о основных тегах, которые обязательны на html странице. Сегодня мы закрепим эти знания на практике.

Все html документы начиются с одного и того же тега. И это, конечно, <html>.

<html>
</html>

То что мы объявили нашу страницу html страницей, не значит что все самое главное уже сделано. Нам еще предстоит много работы.

Сразу за тегом html следует head и body. Для начала разберемся с head. Так как html у нас тег-родитель, то head мы помещаем внутрь его. Вот, как это будет выглядеть:

<html><br />
<head><br />
</head><br />
</html>

Тег body мы так же помещаем внутрь тега-родителя. Но не забывайте, что head и body не могут быть родителями для этих тегов. Другими словами, внутрь body нельзя запихнуть head, а внутрь head нельзя запихнуть body. Поэтому получаем такую конструкцию:

<html><br />
<head><br />
</head><br />
<body><br />
</body><br />
</html>

Если вам все понятно, то вы молодец ; ). Если вам еще трудно понять, не растраивайтесь...

Ну, раз основной каркас сделан, стоит его наполнить.
Вот вам, в помощь, статья, в которой описаны все вспомогательные теги.

Разбираемся с тегом head. Прежде чем что-то делать, стоит объявить кодировку страницы, которую браузер будет выбирать для вашей страницы. В этом нам поможет тег meta

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> — Устанавливаем кодировку.
<meta name="author" content="WebMast (aka Жлобо Евгений)"> — Устанавливаем автора документа. Не обязательно.
Так же у параметра name есть аргументы description, keywords. Они предназначены в основном для SEO.

Теперь, нам нужно вставить на страницу тег meta, внутрь родителя. Однако это уже не html... Для тега meta, родителем является head. Вот, как все должно выглядеть:

<html><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
</head><br />
<body><br />
</body><br />
</html>

В документе, обязательно должен пристутствовать title. Внутрь него можно писать зоголовок страницы. Например так:
<title>Добро пожаловать на мою первую страницу</title>

Для этого тега, родителем является head, следовательно title (заголовок), слудет помещать внутрь head'a. Но после кодировки. Вот:
<html><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<title>Добро пожаловать на мою первую страницу</title><br />
</head><br />
<body><br />
</body><br />
</html>

Еще все понятно? Вы просто супер =). Конечно, тег head, может содержать внутри себя еще много разных тегов. Но то что я привел вам сегодня, вам хватит.

Теперь, нужно чтобы на странице был виден какой-либо текст. Body, в дословном переводе означает «тело». Поэтому, все содержимое будет оставлять внутри этого тега. Можем написать туда просто текст и он будет показан на станице.

<html><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<title>Добро пожаловать на мою первую страницу</title><br />
</head><br />
<body><br />
Привет всем! <br />
</body><br />
</html>

Сегодня мы научились применять самые главные теги в html странице. Узнали, увидели что-то новое.
Всем, кто читал эту статью, спасибо. Надеюсь вам стало хоть немного понятней. В любом случае попробуйте попрактиковаться сами. Вам в помощь справка в предыдущей статье и в этой. С уважением, Vasilenko Ivan!

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

  1. #1504 egoholic в 16:00, 8 июня 2009:

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

    если нечего писать — не надо писать!

  2. #1508 WebMast в 17:15, 8 июня 2009:

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

    egoholic, писать есть что. Если эта статья тебе не нужна, не читай.

  3. #1509 vanoID в 17:26, 8 июня 2009:

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

    если нечего писать — не надо писать!

    Женя мне кажется что такой примитывный топик не к месту...

  4. Ком что интересно. Все-таки может кто-то и не знает таких элементарных вещей.

  5. #2110 Denya в 12:21, 30 июня 2009:

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

    да вот я их не знал!!!

  6. #2115 Pavlik в 13:46, 30 июня 2009:

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

    нормальная статья...

  7. #3524 Moringotto в 10:53, 9 августа 2009:

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

    Кстати, большинство браузеров нормально существуют и отрисовывают страницы, в кодах которых нет ов, ов и . Только, без них валидатор будет ругаться :)

  8. #3526 WebMast в 13:06, 9 августа 2009:

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

    Не совсем понятно, что значит "ов, ов и . "?

  9. #3559 Moringotto в 10:39, 10 августа 2009:

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

    Хм, забыл посмотреть на надпись «Внимание, html код обрабатывается». Посмотрите коммент в редакторе, все поймете :)

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

имя:

e-mail:

сайт:

текст:

Subscribe without commenting