Структура web-документа - Создание сайта

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML <!DOCTYPE...>, которая обычно выглядит примерно так:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

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

В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 4.01. Не пытайтесь запомнить эту строчку наизусть, главное - вы должны знать, что она необходима. Ведь именно она помогает сделать сайт, который будет одинаково смотреться во всех браузерах (обычно это три основных Internet Explorer, Opera, Firefox).

Далее обозначается начало и конец документа тегами <html> и </html> соответственно. Внутри этих тегов должны находиться теги головы (<head></head>) и тела документа(<body></body>).

Обычно основой головы документа является элемент TITLE - заголовок документа. Также там содержится вся техническая информация, различные таблицы стилей и. т. п. А основное содержимое: текст, таблицы, картинки, - находится в теле документа.

На этой смешной картинке схематически изображена структура:

Как вы видите голова находится над телом, поэтому никогда не размещайте голову документа в теле документа (или наоборот). Сначала закрываем голову документа </HEAD>, и лишь затем открываем тело <BODY>. И еще, у документа одна голова и одно тело, и не стоит пытаться создавать их большее количество.

Включение в документ заголовочной части не является обязательным. Задачей заголовка является представление необходимой информации для браузера и сервера HTTP. Информация, размещенная внутри заголовка документа, обычно не выводится на экран (кроме названия документа).

Заголовок документа открывается тегом <HЕAD>, который обычно следует сразу же за тегом <HTML>. Закрывающий тег </HEAD> показывает конец этого раздела, между ними располагаются остальные теги заголовка документа.

Чаще всего в заголовок документа включают парный тег <TITLE>... </TITLE>, определяющий Название документа. Так же, между тегами <HЕAD>... </HЕAD> вписываются различные Java - скрипты, которые отображаются непосредственно для всей Html-странички (JavaScript - язык, созданный (разработчик - фирма Netscape.) для организации выполнения в HTML - документе некоторой последовательности операций - сценария (скрипта) - на компьютере пользователя. Все, что стоит между тэгами <script> и </script>, интерпретируется как код на языке JavaScript.).

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

Тег <BODY> не только обозначает начало содержимого документа, но и задает его основные свойства: цвет фона, текста и многое другое. Эти свойства определяются с помощью атрибутов.

Очень полезным при создании сайтов является вставка комментария. Почему? да потому, что через месяц после создания, вам будет трудновато разобраться, что к чему, ведь кода будет очень много. А если вы будете комментировать свои действия - тогда разобраться будет значительно легче!

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

В начале комментарий нужно открыть тегом <!-- затем вписать текст, и закрыть тегом -->

Например:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

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

<html>

<head>

<title>

Сайт о фирме ООО "ДИНАС"

</title>

</head>

<!-- начнем работать с телом документа -->

<body>

<!--пишем контактные данные о фирме, вставляем таблицу с ценами-->

</body>

<!--закончили с телом документа-->

</html>

Создаем Свою Первую Страничку для фирмы ООО "ДИНАС".

Шаг 1. Создайте свою личную папку (Ф. И.)и сохраните ее на SERVERЛичные папки. В ней создайте новую папку с названием "Сайт для ООО "ДИНАС".

Шаг 2. Создадим текстовый файл. Пуск - Программы - Стандартные - Блокнот.

Для написания сайта желательно разбираться в тегах. Основные будем запоминать.

Итак, начинаем написание с фразы:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

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

Далее вставляем тег, обозначающий начало документа (<html>),

Тег головы(<head>), Тела (<body>)

<html>

<head>

<title> Составляем сайт для ООО "ДИНАС"

</title>

</head>

<body>

Далее напишите следующий текст:

Вас приветствует общество с ограниченной ответственностью "ДИНАС"

Наши контактные данные: Адрес: 600000, г. Владимир, ул. Большая Московская, дом № 28б телефон 43-52-89

Сохраните файл с расширением HTML, выбрав в окне сохранения тип файла - все файлы. Имя оставьте ООО ДИНАС.

Можете открыть сохраненный файл. Вот что у вас должно получиться:

Как вы заметили, текст идет слитно, без разделений на абзацы, также ничего не выделено заголовком, короче форматирование отсутствует! Т. е. чтобы Браузер правильно отображал текст, необходимо задать его форматирование.

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

Для начала нового абзаца служит тег (тэг) <P>... </P>

После открытия страницы в окне Веб-браузера все абзацы ее текста, помеченные тегом (тэгом) <P>, разделяются пустыми строками, что улучшает ее компоновку и внешний вид.

По умолчанию браузер обычно форматирует абзац с выравниванием по левому полю. Для принудительного выравнивания служит атрибут align. С его помощью абзацы могут быть выровнены влево, вправо, по центру и по ширине.

Для перехода к новой строке используется тег (тэг) <BR>.

Он сообщает браузеру, что следует прекратить размещение текста и других элементов страницы в пределах текущей строки и перейти к новой строке. Этот тег (тэг) не имеет своего двойника с косой чертой, так называемого закрывающего тега (тэг).

Основное использование этого тега (тэга) - для принудительного размещения встроенных элементов в определенном месте страницы. Он удобен, также, в тех случаях, когда необходимо увеличить пустые области между отдельными элементами страницы.

Похожие статьи




Структура web-документа - Создание сайта

Предыдущая | Следующая