Типовая схема HTML документа

Дорогие посетители сайта GeoDum.ru! Уважаемые молодые вебмастера!

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

Создавая или корректируя отдельные страницы, даже если вы пользуетесь  при этом визуальными редакторами типа Dreamweaver, в принципе не требующими знания языка HTML, вы тем не менее все же должны хотя бы поверхностно представлять структуру построения кода страницы. При внесении в код небольших изменений тогда вам не обязательно обращаться к этим мощным программам, а открыть страницу в простом текстовом редакторе, например Notepad, или лучше в текстовом редакторе для программистов (например, Notepad++ или Sublime Text). При этом в окне редактора будет представлен исходный код редактируемой страницы, в котором нужно уметь хоть немного разбираться. Эта статья является кратким ключом к пониманию вопроса. Ссылки на более полные руководства вы найдете в упомянутой выше статье.

Итак, как построен в кратком виде HTML код страницы?

Сначала обычно мы видим часть DOCTYPE, которая говорит браузеру о том, какая версия HTML используется в коде. Она бывает нескольких типов.

Затем идет собственно код, заключенный в открывающий и закрывающий теги <html>. Внутри имеется две главных части: шапка <head> и тело страницы <body>. Таким образом, костяк кода выглядит таким образом:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
шапка
</head>
<body>
содержание страницы
</body>
</html>

В шапку обычно включается служебная информация - так называемые мета-теги по типу <meta name="Имя_тега" content="Значение">. Сюда относятся Заголовок страницы (title), кодировка (charset), описание (Description), ключевые слова (Keywords) и подключаемая таблица стилей  CSS (Stylesheet), скрипты и другие элементы.

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

В результате имеем что-то вроде этого примерного кода:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 <title>Заголовок страницы</title>
 <meta name="Description" content="Описание содержимого страницы">
 <meta name="Keywords" content="ключевые, слова, через, запятую">
<link href="/home/имя_файла_стилей.css" rel="stylesheet" type="text/css">
</head>
<body>
<table>
<tr>
<td>содержимое ячейки 1 таблицы </td>
<td>содержимое ячейки 2 таблицы </td>
</tr>
</table>
<div> содержимое слоя 1</div>
<div> содержимое слоя 2</div>
<div> содержимое слоя 3</div>
</body>
</html>

Конечно, в этой очень упрощенной схеме не отражены свойства CSS стилей, которые, как правило, присваиваются элементам таблиц, слоев, текстовым и графическим элементам. Но в этой краткой статье невозможно отразить все многообразие верстки.

Здесь я снова отсылаю вас к статье «Изучайте языки для создания Web-сайтов», где вы найдете ссылки на полные руководства по языкам, написанные мастерами своего дела.

И в заключение, как обычно, видео на тему о структуре кода страницы:



На этом на сегодня все. Удачи вам в разработке сайтов.

Чтобы не пропустить ничего из публикуемых материалов, вы можете подписаться на одну из RSS лент: Все новости сайта, Новости раздела «Сказки Старого Юзера» или Новости раздела «Мир Андроида».

Чтобы быть в курсе новинок сайта, рекомендую подписаться на периодическую почтовую рассылку «Сказки Старого Юзера» на портале Subscribe.ru.

Обсуждение этой статьи можно проводить в комментариях ниже и/или на Форуме сайта.


Поиск по сайту
Поиск от Яндекса
Рассылка

Информационный портал Subscribe.ru

Дорогие друзья!
Вы можете подписаться на рассылку материалов сайта GeoDum.ru через сервис рассылок информационного портала Subscribe.ru. Она называется, как и сайт, "Сказки старого юзера". В рассылке представляются анонсы наиболее интересных материалов из различных разделов. Обычная периодичность рассылки - раз в неделю (по вторникам).

ПОДРОБНЕЕ...

Заработок

Хотите заработать на своем сайте? Тогда зарегистрируйтесь на этих ресурсах по моим реферальским ссылкам:

  • Kwork - магазин услуг фрилансеров.
  • MegaIndex - бесплатный анализ сайта.
  • Advego - заработок написанием статей, уникальный контент для вебмастеров.
  • Miralinks - заработок на размещении статей.
  • Webartex - заработок на написании и размещении статей.
gototop