Структура документа. Часть 2. Практика
Понедельник, Июнь 8, 2009 9:31 
В предыдущей статье я писал о основных тегах, которые обязательны на html странице. Сегодня мы закрепим эти знания на практике.
Все html документы начиются с одного и того же тега. И это, конечно, <html>.
</html>
То что мы объявили нашу страницу html страницей, не значит что все самое главное уже сделано. Нам еще предстоит много работы...
Сразу за тегом html следует head и body. Для начала разберемся с head. Так как у нас тег-родитель, то head мы помещаем внутрь его. Вот, как это будет выглядеть:
<head>
</head>
</html>
Тег body мы так же помещаем внутрь тега-родителя. Но не забывайте, что head и body не могут быть родителями для этих тегов. Другими словами, внутрь body нельзя запихнуть head, а внутрь head нельзя запихнуть body. Поэтому получаем такую конструкцию:
<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. Вот, как все должно выглядеть:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
</body>
</html>
В документе, обязательно должен пристутствовать title. Внутрь него можно писать зоголовок страницы. Например так:
Для этого тега, родителем является head, следовательно title (заголовок), слудет помещать внутрь head'a. Но после кодировки. Вот:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Добро пожаловать на мою первую страницу</title>
</head>
<body>
</body>
</html>
Еще все понятно? Вы просто супер =). Конечно, тег head, может содержать внутри себя еще много разных тегов. Но то что я привел вам сегодня, вам хватит.
Теперь, нужно чтобы на странице был виден какой-либо текст. Body, в дословном переводе означает «тело». Поэтому, все содержимое будет оставлять внутри этого тега. Можем написать туда просто текст и он будет показан на станице.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Добро пожаловать на мою первую страницу</title>
</head>
<body>
Привет всем!
</body>
</html>
Сегодня мы научились применять самые главные теги в html странице. Узнали, увидели что-то новое.
Всем, кто читал эту статью, спасибо. Надеюсь вам стало хоть немного понятней. В любом случае попробуйте попрактиковаться сами. Вам в помощь справка в предыдущей статье и в этой.
egoholic сообщил:
Июнь 8th, 2009 16:00
если нечего писать — не надо писать!
WebMast сообщил:
Июнь 8th, 2009 17:15
egoholic, писать есть что. Если эта статья тебе не нужна, не читай.
vanoID сообщил:
Июнь 8th, 2009 17:26
если нечего писать — не надо писать!
Женя мне кажется что такой примитывный топик не к месту...
сережа сообщил:
Июнь 10th, 2009 9:03
Ком что интересно. Все-таки может кто-то и не знает таких элементарных вещей.
Denya сообщил:
Июнь 30th, 2009 12:21
да вот я их не знал!!!
Pavlik сообщил:
Июнь 30th, 2009 13:46
нормальная статья...
Moringotto сообщил:
Август 9th, 2009 10:53
Кстати, большинство браузеров нормально существуют и отрисовывают страницы, в кодах которых нет ов, ов и . Только, без них валидатор будет ругаться
WebMast сообщил:
Август 9th, 2009 13:06
Не совсем понятно, что значит «ов, ов и .»?
Moringotto сообщил:
Август 10th, 2009 10:39
Хм, забыл посмотреть на надпись «Внимание, html код обрабатывается». Посмотрите коммент в редакторе, все поймете