Учебник HTML

Структура HTML-страницы













   HTML-страница, как и любой документ, имеет свою структуру. Глядя на текст страницы документа, сразу видна структура: вот шапка, вот название, далее сам текст, "тело" документа, и завершение - подписи, например. Также и структура HTML-страницы позволяет выделить в ней HEAD - голову и BODY - тело. А для того, чтобы было ясно, что это именно html страница , всё это предваряется меткой <HTML> и заключается меткой </HTML>. Все эти выделения и метки нужны не ради красоты. Именно они подсказывают браузеру, как именно интерпретировать текст и служебные слова и символы, которые он встретит на странице HTML документа. Код html страницы содержит в себе и другие элементы, определяющие форматирование текста, рисунки, списки, таблицы и т.д. И в конечном итоге от этого зависит, что именно мы увидим на экране.

   HTML страница это обычный текстовый документ, и её можно изготовить, работая даже в обычном блокноте Windows. Однако сейчас существуют многочисленные HTML редакторы, помогающие избавиться от рутины. Самостоятельно выписывать "скелет" HTML страницы уже нет необходимости, однако знать и разбираться в нём всё равно совершенно необходимо. Тем более, что это совсем несложно.

   Итак, нажимая в HTML редакторе кнопочку New, мы получаем страницу вот с таким текстом:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">


<html>

<head>
  <title></title>
</head>




(стиль и цвет текста соответствуют стилю и цвету текста моего HTML редактора)

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

   http://www.w3.org/TR/html4/loose.dtd

   Стандарт предполагает наличие такого описания, однако оно совсем необязятельно, и его можно, по крайней мере, в настоящее время, совершенно безболезненно опустить.

   Далее идёт метка (так называемый тег) <html>. Встречая на странице этот тег, дальнейшее содержимое браузер начинает рассматривать именно как страницу HTML. И заканчивает соответствующим парным тегом - </html> (очень многие теги имеют завершающую пару, предваряемую слешем - символом " / "). Таким образом, тег </html> должен быть последним на HTML странице.

   За тегом <html> следует "голова" HTML документа, заключающаяся между тегами <head> и </head>. Здесь описывается название, тема HTML документа, и те правила, которые относятся ко всему документу, например, стили отображения тех или иных элементов страницы. Как минимум, здесь должен содержаться один из важнейших элементов с точки зрения пользователя (а раз так, то и поисковых машин) - парный тег <title> - </title>. Текст, расположенный между ними, рассматривается как название страницы. Он не появляется непосредственно в тексте страницы, но выносится браузером в свой заголовок:

Содержимое страницы Отображение в браузере
<html>

<head>
  <title>
   Структура HTML-страницы
  </title>
</head>


   Именно содержимое тегов <title></title> выводится поисковой системой на страницы результатов поиска по запросу пользователя. Поэтому подбору и наиболее точному соответствию заголовка содержанию страницы нужно уделять большое внимание.

   Понятие о теме страницы даётся дополнительными тегами, содержащими атрибуты со значениями keywords и description, а ссылки на правила и вспомогательные функции содержатся в тегах <script> и <link>. Но сейчас речь не о них.

   Продолжаем разговор. Вслед за тегами <head></head> идут теги, внутри которых размещается основное содержимое HTML страницы:

   На основе этих тегов можно рассмотреть такое понятие, как атрибуты тегов. Атрибуты тегов придают дополнительные нюансы интерпретации тегов. Например, тег <body> имеет среди прочих такие атрибуты как bgcolor и background, позволяющие задать фоновый цвет или фоновое изображение для всей HTML страницы. Вот как это выглядит:

  <body bgcolor="violet">

или

  <body background="jpg/title.jpg">


   Конечно, нет необходимости помнить все атрибуты тегов, как и их значения. Достаточно поставить курсор внутрь тега, и HTML редактор подскажет, какой набор атрибутов имеет тот или иной тег, и поможет выбрать значения для тех из них, которые окажутся нужны вам для описания HTML страницы. Поэтому теперь нужно установить какой-либо HTML редактор. У всех свои предпочтения. Мой выбор - Blumentals WeBuilder 2010. Это один из лучших универсальных редакторов HTML, CSS, PHP, JavaScript, теперь и на русском! Я, правда, до сих пор пользуюсь версией 2008, и не нарадуюсь.

   Конечно, существуют программы, выполняющие вообще всю работу по созданию HTML страницы, и даже сайта целиком. Однако, если мы хотим научиться языку HTML, подобная "услужливость" не входит в наши интересы. К тому же, если вы для создания сайтов будуте уметь только нажимать на кнопки, ни одна фирма вас на работу не возьмёт!


В начало урока          Следующий урок  

На Главную

Вопросы и комментарии (5)

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

Имя  

Текст комментария