Рассылка сайта
RSS ленты

feed-iconПодпишитесь на любую из RSS-лент и всегда будете в курсе новостей:

Все новости сайта
Сказки Старого Юзера
Мир Андроида

Хотите получать обновления по почте?
Введите ваш e-mail:

Типовая схема 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.

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


Комментарии:

Поиск
Сайт в соцсетях
vk_logofacebook_logotwitter_logogoogle_plus
 
Переводчик
Комментарии
  • GeoD 01.07.2014 20:57
    А пользоваться поиском Google или помощью по Facebook умеете? Если нет, то вот вам ссылка, как ...

    Подробнее...

  • Павел 01.07.2014 20:41
    Но как мне удалить свой аккаунт, если я не помню пароль от него, помню только номер, к которому ...

    Подробнее...

  • Amazonka 25.06.2014 16:01
    а если поставить счетчик Яндекс.Метрики на http://www.home-engineer.ru ? проблем не будет? а то ...

    Подробнее...

  • GeoD 30.05.2014 19:23
    Мурат, а вы обратили внимание на дату создания этой статьи? Поэтому здесь приведены возможно уже ...

    Подробнее...

  • Мурат Токонович 30.05.2014 18:21
    Мне больше понравился http://colorschemedesigner.com/

    Подробнее...

  • Мурат Токонович 30.05.2014 18:07
    Комментарий к фаейрволлу Agnitum... Я, как старый инженер, а ныне юрист, рекомендую. Если Вы чайник и ...

    Подробнее...

  • Роман 12.05.2014 09:52
    А если при прошлом удалении рута не работают гугл сервисы.

    Подробнее...

  • TED 11.05.2014 09:52
    вот тут все подробно описано как получить рут при KNOX http://youtu.be/2G9zwTBrFIE

    Подробнее...

Рассылка новостей

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

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

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

Связаться с автором? Просто

Если вам нужно связаться с автором сайта по вопросам, не вмещающимся в рамки комментариев, пожалуйста, пишите на email, пользуясь Формой письма на странице Контактов >> Форма обратной связи.

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

Заработок на сайте

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

  • Profit-Partner - хороший заработок на контекстной рекламе от Яндекса;
  • TrustLink - биржа ссылок, дает неплохой доход для вебмастеров;
  • Sape - еще одна биржа покупных ссылок;
  • MegaIndex - бесплатный анализ сайта;
  • Advego - заработок написанием статей, уникальный контент для вебмастеров.
  • Miralinks - заработок на размещении статей.
Cloudim - онлайн консультант для сайта бесплатно.
Полезное
   
RSSTranslator.Net
gototop