Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Страницы веб-сайтов - это документы или части веб-ресурсов, которые имеют уникальный адрес URL. Представляют собой , в котором имеются изображения, аудиофайлы, текст, видеоматериалы или анимация. Работа с и ее просмотр осуществляется с помощью браузеров.

Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA

Для чего нужна веб-страница

Главное предназначение - просмотр информации. На веб странице размещается текстовый, графический, аудио- и видеоконтент. Со страницы он считывается браузером и отображается для пользователей.

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

Как сохранить веб страницу

• Нажимаем на меню и выбираем пункт «Сохранить как», затем откроется диалоговое окно с аналогичным названием.
• В появившемся окне нам необходимо выбрать тип файла, имя страницы и место сохранения. Сегодня есть 4 формата, их разберем ниже.
• Жмем «Сохранить», теперь в любой момент можно просмотреть копию страницы.

4 формата сохранения страниц:

• Полностью. В данном формате выбранный элемент сохраняется полностью, со всеми изображениями и стилистическими решениями, оформлением. Также браузер создает отдельную папку, куда помещаются все размещенные на ресурсе материалы: картинки, фото, виджеты и прочее.
• HTML. Здесь уже нет возможности сохранить изображения и стилистические решения, сохраняется оригинал с той же структурой и текстом. Таким способом экономится место в памяти.
• Текст. Сохранившийся текст можно просмотреть с помощью любого редактора, текст сохраняется полностью, а не фрагментально.
• Файлы. Сохраняются все размещенные на странице файлы. Если есть необходимость, можно поменять расширение того или иного файла.

Что значит сообщение «веб-страница устарела»

Это довольно распространенная ошибка. Она означает, что локальная копия страницы устарела, в то время как пользователя запрашивает ее загрузку. Для решения проблемы необходимо перезагрузить страницу.

Что значит сообщение «веб-страница замедляет браузер»

Часто при просмотре сайтов возникает отображается текст «Веб-страница замедляет ваш браузер». Как правило, замедление происходит из-за того, что браузер автоматически загружает много ненужных скриптов на данной странице. Чтобы решить проблему, необходимо поменять настройки веб-обозревателя с целью быстрой загрузки скриптов. Для этого заходим в меню браузера, ищем «Инструменты», затем жмем пункт «Добавить». Ищем специализированный плагин «Shockwave Flash» и устанавливаем его. Затем в настройках плагина выбираем пункт «Спрашивать перед активацией» и ставим рядом с ним галочку. Обратите внимание, что наименование пунктов может меняться в зависимости от используемого браузера, главное – уловить смысл.

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

Веб страница не отвечает: что делать и как решить проблему

Здесь уже не все так просто, как вышеописанных случаях. Проблема может быть в чем угодно. Разберем, как решить данную проблему.

Сначала стоит обратить внимание на URL. Проверьте, чтобы в адресной строке был правильно указан адрес страницы. Далее проверьте, открывается ли ресурс на другом компьютере. Если на всех ПК страница не загружается, проверьте подключение к интернету. Если и тут все в порядке, возможно, проблема в сайте.

Второй способ - удалить файлы. Это специальные файлы, которые создаются для сохранения информации о созданном профиле. Иногда cookie файлы повреждаются. Это приводит к тому, что страницы не отображаются. Чтобы их удалить, открываем настройки браузера, выбираем пункт «Дополнительно» и затем «Личные данные». Открываем настройки контента и выбираем интересующие нас файлы. Удаляем «Все файлы cookie и данные сайтов».

Следующий способ - изменить прокси-сервер. Иногда подключение через прокси-сервер может приводить к медленной загрузке веб-страниц или ошибках в их отображении. Чтобы решить проблему, зайдите в настройки, затем откройте пункт «Сеть» и укажите наименование сети. Далее откройте настройки прокси сервера и введите необходимые параметры. Если вы не знаете эти параметры, обратите к администратору вашей сети. Дале интернет-соединение прервется. Переподключитесь к сети интернет и продолжите работу.

Веб страница перемещена: что делать

Часто можно столкнуться и с данным сообщением. Скорее всего рядом будет расположен новый адрес, и браузер предложит перейти по этой ссылке. Зайдите на новый вариант страницы и получите допуск к нужной информации.

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

С чего начинается web-страница?

Из каких этапов строится процесс создания Для того чтобы понять, что такое веб-страница, необходимо разобраться в том, как она формируется.

Дизайн

Начинается все с работы дизайнера. Он, в соответствии с требованиями и целями заказчика, разрабатывает макет будущего сайта. Этот макет создается для одной, двух или нескольких страниц. На этом этапе определяется расположение всех необходимых объектов, проводится подбор шрифтов, картинок, оформления в целом. То есть первоначально формируется внешний вид страниц, из которых затем будет собран полноценный сайт.

Верстка

Затем в работу включается верстальщик. На основе разработанного дизайнером макета он делает разметку страницы, оптимизируя ее под различные браузеры. Для этого создается обычный документ, например, в "Блокноте", который сохраняется с расширением.html. Именно на этом языке и пишется простая веб-страница. HTML расшифровывается как HyperText Markup Language и представляет собой набор тегов, служащих для реализации разнообразных задач. Этот язык достаточно прост, но функционален. С его помощью создается логическая структура страницы и происходит ее разделение на отдельные элементы - заголовки, списки, абзацы, таблицы и прочие объекты. Кроме того, теги определяют значение всего контента. Они дают браузеру информацию о том, что нужно выделить, подчеркнуть, где отступить, где вставить картинку, а что преобразовать в ссылку. В результате страница приобретает соответствующий вид. Однако чтобы она полностью соответствовала тому, что придумал дизайнер, необходимо также использовать CSS. Это каскадные таблицы стилей, которые задают внешний вид html-документа, его оформление. С помощью CSS-инструментов можно "покрасить" страничку в нужные цвета, применить тот или иной стиль шрифта, добавить другие элементы дизайна. Использование HTML и CSS дает нам готовую, красиво оформленную страницу. Но ей еще нужно придать динамичности, а это уже дело программиста.

Программирование

На данном этапе у вас уже сформировалось понимание того, что такое веб-страница и как она создается. Однако это еще не все. Страницы бывают нескольких видов - статические, динамические и интерактивные. Первые как раз относятся к тем, которые созданы только с использованием html и css. Для того чтобы сделать страницу динамичной, необходим движок - CMS (или Content Managment System). Это специальная программа, которая по запросам пользователей формирует страницу из данных, хранящихся в базе сервера. То есть страница создается в момент поступления запроса от пользователя. Для ее написания используются такие языки, как ASP, PHP и другие. Что касается интерактивных страниц, то они включают в себя так называемые формы, с помощью которых пользователь и сервер обмениваются данными. Они также пишутся на языках PHP, JavaScript и др. Программирование - более сложный процесс, чем верстка, он требует качественных специфических знаний хотя бы одного (а лучше нескольких) из перечисленных языков.

Как загружается web-страница?

Для того, чтобы страница стала доступна всем пользователям сети Интернет, ее (то есть документ, в котором она описана) помещают на веб-сервер. Это компьютер, непрерывно работающий в ожидании поступления запросов от браузеров. Когда он его получает, то находит требуемый ресурс (например, веб-страницу) и отправляет ее соответствующему браузеру. А тот, в свою очередь, на основе содержащейся в документе информации (сигналов) отображает веб-страницу.

Почему открыть web-страницу не получается?

Бывают ситуации, когда вы вводите запрос (указываете адрес, пишите слово в поисковую строку или кликаете по ссылке), но браузер не может отобразить нужную вам информацию и пишет, что веб-страница не найдена. В чем здесь причина и как решить подобную проблему?

Во-первых, следует проверить url-адрес - правильно ли он указан. Если в какой-то букве или знаке допущена ошибка, тогда сервер не сможет найти адекватную вашему запросу информацию, а браузер, соответственно, отобразить ее. Но если адрес правильный, то почему веб-страница недоступна? Причиной могут быть куки-файлы. Их создают веб-страницы, которые вы посещали ранее, для хранения каких-то настроек и прочего. Если такой файл поврежден, это может помешать нормальной загрузке страницы. Чтобы исправить ситуацию, его нужно удалить. Для этого в найдите раздел "Конфиденциальность", перейдите в настройки контента и в открывшемся окне выберите "Все cookie-файлы и данные сайтов". Нажмите "Удалить все".

Третьей причиной может быть медленная работа браузера в связи с использованием прокси-сервера. Для исправления проблемы необходимо сменить настройки. Сделать это можно в разделе "Подключения к Интернету". Выберите используемую вами сеть, откройте параметры и найдите вкладку "Прокси-сервер". Задайте нужные настройки его использования. Теперь все должно заработать.

Заключение

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

Итак, что же такое Web-сайт и Web-страница? Чтобы разобраться в этом вопросе, давайте подумаем, а какая собственно информация может содержаться на Web-сайте? Ответ очевиден - практически любая. Сайт может содержать информацию о компьютерных играх, автомобилях, аквариумных рыбках, мифических существах, городах и странах мира и т.д. и т.п. Список можно продолжать бесконечно. На сайте даже можно разместить, к примеру, произведения великих русских классиков. Как вам например сайт "Война и мир"? Получается, что сайт это книга, но только не простая, а электронная? Да, Web-сайт, по своей сути, действительно является электронной книгой, журналом или учебником, который может содержать как полезную для вас информацию, так и ту, что вас на данный момент совсем не интересует.

Как и обычная книга, Web-сайт состоит из страниц, которые называются Web-страницами.

А как мы, собственно говоря, находим, в том же учебнике информатики, интересующую нас информацию? Мы открываем содержание, которое находиться в начале или конце учебника, ищем параграф в котором находиться необходимая информация, напротив параграфа смотрим номер страницы, открываем ее и изучаем материал. Все довольно просто и обыденно.

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

Но как добраться до нужной информации расположенной на Web-сайте, ведь мы не можем листать электронные страницы так же как обычные бумажные? Действительно, ведь мы, как правило пользуемся мышью.

На самом деле, перемещение между страницами сайта осуществляется даже более оперативно, чем перемещение между страницами при работе с обычным учебником. Для перемещения между страницами сайта используются элементы Web-страницы, при щелчке мышью на которых, можно переместиться на другую страницу сайта. Эти элементы страницы называются гиперссылками и присутствуют на всех страницах входящих в состав сайта.

В "классическом" случае, в качестве гиперссылок используют часть текста (слово или несколько слов) и графические изображения (рисунки и фотографии).

Поскольку в первом случае для создания гиперссылок используется текст, то такая гиперссылка называется текстовой. Весьма часто текстовая гиперссылка представляет собой подчеркнутый текст синего цвета. Увидев, например, на главной странице сайта надпись "Web-сайты и Web-страницы" оформленную подобным образом и щелкнув на ней левой клавишей мыши, вы должны оказаться именно на Web-странице посвященной этой теме. На странице "Web-сайты и Web-страницы" должна в свою очередь присутствовать, как минимум, одна гиперссылка, при помощи которой вы смогли бы вернуться к содержанию.

Если в качестве гиперссылки использовано графическое изображение, например фотография, то догадаться о том, что это гиперссылка будет сложно. Как же в таком случае определить, является изображение гиперссылкой или нет? На этот случай запомните следующее правило: "Если при подведении курсора мыши к элементу Web-страницы он принимает форму руки, то этот элемент является гиперссылкой".

Примечание: Из этого правила есть исключение, так например в случае с ролловерами, которые могут не являться гиперссылками, но при наведении курсора мыши на них, курсор тоже принимает форму руки. Кроме изменения вида курсора, при наведении на гиперссылку, должен также отобразиться URL (уникальный адрес ресурса), но об этом мы поговорим в уроке посвященном созданию гиперссылок средствами программы FrontPage.

Контрольные вопросы:

• Что такое Web-сайт?
• Что такое Web-страница?
• Что такое гиперссылка?
• Какие элементы Web-страницы могут быть использованы в качестве гиперссылок?
• Как определить, является ли элемент страницы гиперссылкой?
• Могут ли отдельные Web-страницы сайта не содержать ни одной гиперссылки?

Самостоятельная часть веб сайта; документ, снабженный уникальным адресом (URL). Веб страница может иметь статическое или динамическое построение. Обычно веб страницы организуется в виде гипертекста с включениями текста, графики, звука, видео или… … Финансовый словарь

- (англ. Web page) гипертекстовый ресурс Всемирной паутины, обычно написанный на языке ссылки для быстрого перехода на другие страницы, а также статические и динамические изображения. Программа, демонстрирующая веб страницу, называется веб браузер … Википедия

Самостоятельная часть веб сайта; документ, снабженный уникальным адресом (URL). Веб страница может иметь статическое или динамическое построение. Обычно веб страницы организуется в виде гипертекста с включениями текста, графики, звука, видео или… … Словарь бизнес-терминов

веб-страница - Компонент веб сайта, файл, расположенный на сервере [ГОСТ Р 52872 2007] веб страница HTML документ, доступный через Web. Тематики информационные технологии в целом EN web pageweb page … Справочник технического переводчика

- (англ. web паутина, сеть), самостоятельная часть веб сайта (см. ВЕБ САЙТ), отдельный документ в Интернете (см. ИНТЕРНЕТ), снабженный уникальным адресом (URL), который может содержать текст, графические, звуковые, видеофайлы, анимацию. Пишется на… … Энциклопедический словарь

Сущ., кол во синонимов: 4 гейтвей (1) дорвей (2) интернет страница (1) … Словарь синонимов

веб-страница - веб страни/ца, веб страни/цы … Слитно. Раздельно. Через дефис.

веб-страница - в еб стран ица, ы, твор. п. ей … Русский орфографический словарь

Динамическая страница веб страница, сгенерированная программно в отличие от статичной страницы, которые являются файлами, лежащими на сервере. Сервер генерирует (X)HTML код для обработки браузером или другим агентом пользователя. Описание… … Википедия

Запрос «сайт» перенаправляется сюда. Cм. также другие значения. Веб сайт (от англ. Website: web паутина и site «место») в компьютерной сети объединённая под одним доменным именем или IP адресом) совокупность документов частного лица или… … Википедия

Книги

• , Новиков Е., Петроченков А.. Посадочная страница (landing page) - так в Интернете называют те страницы сайта, на которые чаще всего попадают посетители, открывающие сайт из поисковиков. Важность посадочных страниц сложно…
• Идеальный Landing Page. Создаем продающие веб-страницы , Петроченков, А.С. , Новиков, Е.. Посадочная страница (landing page) - так в Интернете называют те страницы сайта, на которые чаще всего попадают посетители, открывающие сайт из поисковиков. Важность посадочных страниц сложно…

2016-11-06

Создаем веб-страницу и размещаем ее на локальном веб-сервере

Здравствуйте уважаемый посетитель!

Эта статья о том, как создать веб-страницу и разместить ее на виртуальном хосте локального веб-сервера.

А, понадобится нам для этого, как показано на картинке: локальный веб-сервер, текстовый редактор, язык описания структуры веб-страниц HTML и язык стилей CSS.

• Создание виртуального хоста на локальном веб-сервере
• Создание файла веб-страницы с проверкой работы локального веб-сервера
• Составление каркаса HTML-страницы
• Исходные файлы сайта

Создание виртуального хоста на локальном веб-сервере

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

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

После установки Денвера в директории "WebServers/home/" уже имеются сконфигурированные виртуальные хосты, такие как, "localhost", "test1.ru", "custom". Создадим для нашего сайта новый хост и назовем его, к примеру, "newsite.local", подразумевая под этим именем то, что это новый сайт и размещен он на локальном сервере (не стоит из-за возможной путаницы в дальнейшем, присваивать именам хоста реальные доменной зоны, такие как "ru", "com" и т.п.

В этой папке "newsite.local" создадим новую папку "www", в которой и будем размещать файлы сайта, а также, скопируем сюда же из существующих хостов, вспомогательные папки "subdomain" и "cgi".

После проделанных операций, необходимо перезапустить сервер для того, чтобы он внес в свою работу соответствующие изменения. Это можно сделать через ярлык "Restart Denwer", который может быть создан при установке Денвера, либо (если его не оказалось) через специальный файл Restart.exe в папке "denwer".

Создание файла веб-страницы с проверкой работы локального веб-сервера

Ну, а теперь перейдем к созданию веб-страницы. Для этого, в первую очередь, с помощью текстового редактора Notepad++ создадим файл "index.html", в котором будет находиться код нашей главной страницы. О том, как установить текстовый редактор показано в статье Устанавливаем текстовый редактор nodepad++ .

Следует отметить, что при открытии сайта с адресом, в котором указано доменное имя, без каких-либо других директорий, браузеры всегда открывают файл, находящийся в корневом каталоге под именем "index". Поэтому, мы и начнем создавать страницы нашего сайта с этого файла. В данном случае он будет иметь расширение "html", так как его код будет основан на HTML.

Но, перед этим, для того, чтобы избежать в дальнейшем лишних недоразумений с отображением HTML-страниц, желательно, в самом начале проверить кодировку, которая установлена в редакторе Notepad++ при открытии новых документов.

Это можно сделать следующим образом: через меню "Опции" открыть окно "Настройки" и в параметрах "Новый документ" проверить, чтобы была установлена универсальная кодировка "UTF-8 без метки BOM", как показано ниже.

Теперь создадим новый файл через меню "Файл", нажав на кнопку "Новый". В открывшейся новой вкладке для проверки работы веб-сервера и правильности установок кодировки, напишем какую-нибудь фразу, к примеру, "Проверка" (такая проверка не является необходимой при создании HTML-страницы и приводится здесь только лишь для лучшего понимания выполняемых действий).

Теперь сохраним этот файл в папке "www" вновь созданного хоста "newsite.local". Для этого, через меню "Файл" выберем "Сохранить как", введем имя файла "index.html", укажем нужную папку и нажмем "Сохранить".

Далее, проверим, как отображается наша страница. Для этого, обновим браузер, введя в его адресное поле имя нашего хоста "newsite.local". Если все сделано правильно, на экране должна появиться надпись с какими-то иероглифами, как показано на скриншоте (еще раз отмечу, что такие подробности здесь рассматриваются только для тех, кто это делает в первый раз, чтобы наглядно показать, что обычно получается при неправильном соответствии кодировок. А вообще, эту проверку можно пропустить и сразу перейти к следующему шагу).

Такие непонятные знаки появились из-за несоответствия кодировок браузера и отображаемой страницы. Для того, чтобы впредь такого не происходило, необходимо в дополнительном конфигурационном файле ".htaccess" веб-сервера указать нужную кодировку.

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

Для того, чтобы это сделать, надо аналогичным образом, как и с "index.html", в редакторе Notepad++ создать новый файл и сохранить его в той же папке под именем ".htaccess". При этом в самом файле необходимо написать следующую строку "AddDefaultCharset UTF-8", как показано на скриншоте.

Ну, а теперь, если снова обновить браузер с адресом нашего хоста "newsite.local", то можно убедиться в появлении на странице того текста, который изначально был написан нами в файле "index.html".

Это означает, что наша страница, размещенная на созданном хосте веб-сервера при открытии браузером отображается корректно, что подтверждает правильную работу веб-сервера и правильную установку кодировок.

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

Составление каркаса HTML-страницы

После того, как мы убедились в работоспособности локального веб-сервера и в правильном отображении нашей веб-страницы, перейдем к наполнению ее кодом HTML.

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

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

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

Это в полной мере относится к написанию HTML-страниц, ведь не будешь по каждому, а тем более не значительному вопросу, прокручивать видеозапись в поисках нужной информации.

Поэтому, при создании веб-страниц удобно пользоваться справочниками. Какими справочниками лучше пользоваться? Очень сложно однозначно ответить на этот вопрос, наверное, у каждого имеются свои предпочтения, тем более, что в сети интернет их имеется большое множество.

От себя, могу посоветовать такой информационный ресурс, как онлайн справочник "http://www.puzzleweb.ru/html/all_tags.php" . Особенность его в том, что он дает не только достаточно подробную справочную информацию по основным языкам, используемых в сайтостроении, таким, как HTML, CSS, JavaScript, PHP, но в нем имеются разделы самоучителя, в которых очень сжато, но в то же время довольно познавательно объясняются основы этих языков с приведением наглядных примеров.

Также, можно отметить справочный интернет-ресурс "https://webref.ru/" , в котором имеется довольно полная информация по современным версиям HTML5 и CSS3, куда также включены учебные курсы по веб-технологиям. К этому, можно добавить справочник "http://htmlbook.ru/html/" , из которого тоже можно подчерпнуть немало полезной информации и он также может быть полезен при написании веб-страниц.

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

А теперь, перейдем к составлению каркаса HTML-страницы, т.е. к формированию ее основных блоков. Ниже, показано, как будет выглядеть наш каркас, построенный на основе дизайн-макета сайта, созданного ранее в статье Создаем дизайн-макет веб-страницы .

2. "utf-8" />

   "Description" content ="Краткое описание содержания страницы" >

4. "wrapper" >

   Шапка

   Ротатор

   Основное содержание

   Сайдбар

Для того, чтобы записать HTML-код каркаса в файл "index.html", его нужно открыть в текстовом редакторе Notepad++ и набрать код, пользуясь приведенным примером, либо его туда скопировать.

Кроме того, в конце каждой статьи, начиная с этой, будет прилагаться архив исходных файлов папки "www", создаваемого сайта на текущее состояние. Поэтому, можно просто воспользоваться этими дополнительными материалами и скачать файл "index.html" по ссылке, приведенной в конце этой статьи.

Вот так должен выглядеть HTML-код файла "index.html" в текстовом редакторе Notepad++, составленный в соответствии с приведенным примером.

Рассмотрим, более подробно то, что изображено на рисунке.

Первая строка является очень важной, так как указывает браузеру тип документа, для того, чтобы он мог правильно ее понимать. Необходимость этой записи обусловлено тем, что HTML существует в нескольких версиях, которые различаются не только наличием, или отсутствием каких-либо элементов, но и синтаксисом языка.

Поэтому, если не будет такого указания, то браузер, попросту "запутается" при обработке страницы. В данной строке, в частности указано, что документ создан на языке html версии 5.

Более подробно об элементе можно посмотреть в справочнике htmlbook.ru по ссылке "http://htmlbook.ru/html/!doctype" .

Далее, идут элементы, называемые "тегами" - символы, заключенные в угловые скобки. Эти элементы, в своем роде являются конструкцией языка, указывающей браузеру, что нужно делать, и по существу, являются основой языка HTML.

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

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

Кроме того, теги подразделяются на одинарные и парные. Парные теги всегда состоят из двух частей, в первой части они открываются, во второй, обозначенной символом слэш "/", закрываются (открывающийся и закрывающийся теги). То, что находиться между ними и будет обрабатываться в соответствии с правилами использования этого элемента.

Таким образом, во 2-ой и 17-ой строках указан тег "html", который, по существу представляет контейнер со всем содержимом страницы. Этот тег всегда указывается в таком порядке, что любой HTML-код должен быть внутри этого контейнера.

Следующая часть каркаса представляет собой область "head", в который размещаются все специальные теги. Эта область охватывает строки с 3 по 7. Содержащаяся в этой области информация является вспомогательной, и не отображается браузером, за исключением заголовка "title", который показывается на вкладке браузера.

В качестве таких специальных тегов в строке 4 размещен метатег с атрибутом "charset", указывающий на кодировку "utf-8", в строке 5 - тег "title", определяющий заголовок документа, а в 6-ой строке - метатег с атрибутами "name" и "content", предназначенный для краткого описания содержания страницы.

В дальнейшем, по мере выполнения верстки, область "head" будет дополнена и другими специальными элементами.

Следующая область "body", охватывающая строки с 8 по 16, предназначена для размещения форматирующих элементов, отвечающих за создание видимой части веб-страниц.

В соответствии с дизайн-макетом, в нашем случае, область "body" состоит из пяти основных блоков: "Шапка", "Ротатор", "Основное содержание", "Сайдбар" и "Подвал", где:

• в 10-ой строке содержится блок "Шапка" (элемент "header");
• в 11-ой строке - блок "Ротатор" (эл-т "section");
• в 12-ой строке - блок "Основное содержание" (эл-т "main");
• в 13-ой строке - блок "Сайдбар" (эл-т "aside");
• в 14-ой строке - блок "Подвал" (эл-т "footer");

При этом, размещенные здесь блоки показаны в очень укрупненном виде. Например, "header" и "footer" будут включать в себя также (в соответствии с дизан-макетом) навигационное меню, а "main", в свою очередь, будет разбиваться на блоки, содержащие статьи и комментарии. И такое деление на более мелкие блоки будет продолжаться до тех пор, пока полностью не будет выполнена вся разметка HTML-страницы.

Что касается парного тега