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

Понедельник, Июнь 8, 2009 9:31 WebMast
Рубрики: html c нуля

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

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

<html>
</html>

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

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

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

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

<html>
<head>
</head>
<body>
</body>
</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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
</body>
</html>

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

<title>Добро пожаловать на мою первую страницу</title>

Для этого тега, родителем является head, следовательно title (заголовок), слудет помещать внутрь head'a. Но после кодировки. Вот:

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

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

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

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

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

Вы можете оставить ответ, или trackback с Вашего собственного сайта.

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

  1. egoholic сообщил:

    Июнь 8th, 2009 16:00

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


  2. WebMast сообщил:

    Июнь 8th, 2009 17:15

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


  3. vanoID сообщил:

    Июнь 8th, 2009 17:26

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

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


  4. сережа сообщил:

    Июнь 10th, 2009 9:03

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


  5. Denya сообщил:

    Июнь 30th, 2009 12:21

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


  6. Pavlik сообщил:

    Июнь 30th, 2009 13:46

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


  7. Moringotto сообщил:

    Август 9th, 2009 10:53

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


  8. WebMast сообщил:

    Август 9th, 2009 13:06

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


  9. Moringotto сообщил:

    Август 10th, 2009 10:39

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


Оставить комментарий

Я не робот!