Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы,
которые не меняются от вида и направленности сайта. В примере 4.1 показан
код простого документа, содержащего основные теги.
Пример 4.1. Исходный код веб-страницы
Пример веб-страницы
Заголовок
Первый абзац.
Второй абзац.
Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под
именем example41.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть
файл (Ctrl+O)
. В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница, показанная на рис. 4.1.
Рис. 4.1. Результат выполнения примера
Элемент
предназначен для указания типа текущего документа -
DTD (document type definition, описание типа документа). Это необходимо, чтобы
браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML
существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText
Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но
различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал,
согласно какому стандарту отображать веб-страницу и необходимо в первой строке
кода задавать
.
Существует несколько видов
, они различаются в зависимости
от версии HTML, на которую ориентированы. В табл. 4.1. приведены основные
типы документов с их описанием.
Табл. 4.1. Допустимые DTD
| DOCTYPE
|
Описание
|
|---|
| HTML 4.01
|
|
|
Строгий синтаксис HTML.
|
|
|
Переходный синтаксис HTML.
|
|
|
В HTML-документе применяются фреймы.
|
| HTML 5
|
|
|
В этой версии HTML только один доктайп.
|
| XHTML 1.0
|
|
|
Строгий синтаксис XHTML.
|
|
|
Переходный синтаксис XHTML.
|
|
|
Документ написан на XHTML и содержит фреймы.
|
| XHTML 1.1
|
|
|
Разработчики XHTML 1.1 предполагают,
что он постепенно вытеснит HTML. Как видите, никакого деления на виды
это определение не имеет, поскольку синтаксис один и подчиняется четким
правилам.
|
Разница между строгим и переходным описанием документа состоит в различном
подходе к написанию кода документа. Строгий HTML требует жесткого соблюдения
спецификации HTML и не прощает ошибок. Переходный HTML более «спокойно» относится
к некоторым огрехам кода, поэтому этот тип в определенных случаях использовать
предпочтительнее.
Например, в строгом HTML и XHTML непременно требуется наличие тега
,
а в переходном HTML его можно опустить и не указывать. При этом помним, что
браузер в любом случае покажет документ, независимо от того, соответствует
он синтаксису или нет. Подобная проверка осуществляется при помощи валидатора
и предназначена в первую очередь для разработчиков, чтобы отслеживать ошибки
в документе.</p>
<p>В дальнейшем будем применять преимущественно строгий <!DOCTYPE>
, кроме
случаев, когда это оговаривается особо. Это позволит нам избегать типичных
ошибок и приучит к написанию синтаксически правильного кода.</p>
<p>Часто можно встретить код HTML вообще без использования <!DOCTYPE>
,
веб-страница в <a href="/mts/splashtop-2-remote-desktop-android-polnaya-versiya-bezopasno-li-takaya.html">подобном случае</a> все равно будет показана. Тем не менее, может
получиться, что один и тот же документ отображается в браузере по-разному при
использовании <!DOCTYPE>
и без него. Кроме того,
браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется»,
т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы
не произошло <a href="/tele2/pochemu-gruzitsya-no-ne-vklyuchaetsya-planshet-razreshit-podobnye.html">подобных ситуаций</a>, всегда добавляйте <!DOCTYPE>
в начало документа.</p><p>Тег <html>
определяет начало HTML-файла, внутри него хранится заголовок
(<head>
) и тело документа (<body>
).</p><p>Заголовок документа, как еще называют блок <head>
, может содержать текст
и теги, но содержимое этого раздела не показывается напрямую на странице, за
исключением контейнера <title>
.</p><p>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</p><p>Тег <meta>
является универсальным и добавляет целый класс возможностей,
в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять
кодировку страницы, добавлять <a href="/payments/yandeks-chastota-zaprosov-slov-poisk-klyuchevyh-slov-v-yandekse.html">ключевые слова</a>, описание документа и многое другое.
Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.</p><p>
<title>Пример веб-страницы
Тег
определяет заголовок веб-страницы, это один из <a href="/megaphone/sistemnaya-shina---vazhneishii-element-kompyutera-kompyuternaya.html">важных элементов</a>
предназначенный для решения множества задач. В операционной <a href="/mts/vosstanovlenie-sistemy-windows-vosstanovlenie-sistemy-windows-ochen-dolgo-idet.html">системе Windows</a>
текст заголовка отображается в левом <a href="/yota/kak-sdelat-v-vorde-numeraciyu-stranic-elementy-upravleniya-na-stranice.html">верхнем углу</a> окна браузера (рис. 4.2).</p>
<p><img src='https://i1.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy></p>
<p>Рис. 4.2. Вид заголовка в браузере</p>
<p>Тег <title>
является обязательным и должен непременно присутствовать
в коде документа.</p><p>Обязательно следует добавлять закрывающий тег </head>
, чтобы показать,
что блок заголовка документа завершен.</p><p>Тело документа <body>
предназначено для размещения тегов и содержательной
части веб-страницы.</p><p>
<h1>Заголовок</h1>
</p><p>HTML предлагает шесть текстовых заголовков <a href="/beeline/perevod-aktivnoi-moshchnosti-v-polnuyu-moshchnosti-raznogo-urovnya-otlichie-kva-ot.html">разного уровня</a>, которые показывают
относительную важность секции, расположенной после заголовка. Так, тег <h1>
представляет
собой наиболее важный заголовок первого уровня, а тег <h6>
служит
для обозначения заголовка шестого уровня и является наименее значительным.
По умолчанию, заголовок первого уровня отображается самым <a href="/rostelecom/good-phones-with-large-font-and-buttons-the-best-phone-for-pensioners.html">крупным шрифтом</a>
жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h1>...<h6>
относятся
к <a href="/services/blochnye-i-strochnye-elementy-blochnye-i-vstroennye-elementy.html">блочным элементам</a>, они всегда начинаются с <a href="/supertrip/kak-v-iks-el-dobavit-stroku-dobavlenie-novoi-stroki-v.html">новой строки</a>, а после них другие
элементы отображаются на <a href="/internet/kak-v-dokumente-vord-sdelat-krasnuyu-stroku-chtoby-sdelat.html">следующей строке</a>. Кроме того, перед заголовком и
после него добавляется пустое пространство.</p><p>
<!-- Комментарий -->
</p><p>Некоторый текст можно спрятать от показа в браузере, сделав его комментарием.
Хотя такой текст пользователь не увидит, он все равно будет передаваться
в документе, так что, посмотрев <a href="/rooms/interesnye-prilozheniya-dlya-android-s-otkrytym-ishodnym-kodom-kak.html">исходный код</a>, можно обнаружить скрытые заметки.</p>
<p>Приветствую вас, <a href="/tele2/kakoi-zhestkii-disk-podoidet-ob-m-zhestkogo-diska-dobryi-den.html">уважаемые читатели</a> 🙂</p><p>В одной из первых статей мы познакомились с существующими , и я вам пообещал в дальнейших публикациях рассмотреть каждый из них более подробно.</p><p>Я уже начал готовить статьи из этого цикла, но достаточно быстро понял, что в каждой из них будет присутствовать общий блок информации о <b>структуре страницы сайта
</b>.</p><p>Поэтому я решил посвятить <a href="/yota/sushchestvuyut-li-razlichiya-mezhdu-dannymi-i-informaciei-razlichiya-mezhdu.html">данному вопросу</a> отдельную статью, чтобы в дальнейшем не возникало вопросов по рассматриваемым сегодня нюансам.</p><i>
</i><h2>Структура страницы сайта — терминология</h2><p>Для начала, как и при рассмотре , давайте разберёмся с терминами.</p><p><b>Структура веб-ресурса
</b> представляет собой его план. В свою очередь, она разделяется на внутреннюю и внешнюю.</p><p>Внутренняя структура сайта определяет, из каких страниц будет состоять веб-проект и порядок их вложенности (категория-подкатегория-сущность).</p><p>В то время как внешняя структура сайта предусматривает вид <a href="/rooms/wordpress-otdelnyi-shablon-stranicy-chem-stranicy-ne-yavlyayutsya-i.html">отдельных страниц</a> в зависимости от размещаемой на них информации. То есть внешняя структура – это как раз и есть структура страницы сайта.</p><p>Она, как правило, однородна для всего ресурса (за исключением некоторых страниц на усмотрение разработчиков). Именно поэтому я и решил рассмотреть её в этой статье, дабы избежать будущих повторений.</p><p>Остальные статьи <a href="/rostelecom/besstrastnyi-form-php-php-i-formy-ii-vvod-dannyh-cherez-cikl.html">данного цикла</a> будут, как Вы понимаете, посвящены внутренней структуре сайтов <a href="/mts/chto-takoe-dvi-d-na-monitore-razlichnye-tipy-dvi-razemov-i-ih-sovmestimost.html">различных типов</a>.</p><p>Перед тем, как мы приступим к обзору, следует также отметить, что понятие структуры и дизайна страницы сайта неразрывно связаны, а точнее, если верить Wikipedia, — это одно и то же 🙂 Потому как веб-дизайнеры как раз и занимаются проектированием <a href="/supertrip/ubrat-kvadratik-na-yarlyke-chernye-kvadraty-na-yarlykah-algoritm-izmeneniya.html">внешнего вида</a> элементов интерфейса, а также их расположением на страницах сайта.</p><p>Даже если вы решили заказать сайт и читаете эти строки только в целях самообразования — ваше время не будет потрачено зря 😉</p><p>Рассмотренные примеры структуры страницы сайта можно успешно применять при формировании инструкций и пожеланий разработчикам вашего продукта.</p><p>А это кстати, немаловажно, т.к. благодаря чёткой постановке задачи можно сэкономить не только на времени, но и на стоимости дизайна страницы сайта, которая колеблется в пределах от 50 до 500$.</p><h2>Необходимость разработки структуры страницы сайта</h2><p>Перед тем, как мы перейдём к обзору устройства страницы сайта, я хотел бы поговорить с вами о необходимости данных знаний. Чтобы придать вам мотивацию для чтения всего материала целиком 🙂</p><p>Дело в том, что чёткое представление структуры страницы сайта является необходимым для всех людей, которые занимаются веб-строительством.</p><p>Причём, при этом совершенно неважно, к какому способу создания сайта вы решили прибегнуть.</p><p>Даже при наличии каркаса в виде готового сайта в случае и конструкторов, <a href="/rates/kompyuter-vklyuchaetsya-no-ne-zapuskaetsya-operacionnaya.html">базовые решения</a> далеки от совершенства.</p><p>Также в них может банально чего-то не хватать, а имеющиеся элементы, напротив, могут быть избыточными. Но если вы являетесь новичком в сайтостроении, вы можете этого банально не заметить.</p><p>Про необходимость понимания принципов создания страницы сайта в случае проектировки ресурса «с нуля» или на основе фрэймворка говорить излишне, т.к. всё придётся делать с <a href="/supertrip/udalit-chistyi-list-v-word-kak-udalit-pustuyu-stranicu-v-vorde.html">чистого листа</a>, без какой-либо готовой основы.</p><p>Одним словом, знания о построении структуры страницы сайта должны присутствовать абсолютно у всех веб-строителей.</p><p>А для того, чтобы понимать, какие элементы на странице сайта являются необходимыми, а без которых можно обойтись, мы с вами и рассмотрим принципы разработки структуры страницы сайта, причём на реальных примерах.</p><h2>Структура страницы сайта – это что?</h2><p>Что касается требований к внешней структуре сайтов, то, как уже говорилось ранее, она должна быть едина. Т.е. все <a href="/rates/nth-child-kazhdyi-chetvertyi-kak-vybrat-v-css-pervyi-element-roditelya.html">структурные элементы</a> должны соответствовать единому шаблону.</p><p>Не должно возникать ситуации, когда пользователь просматривает один ресурс, а у него складывается впечатление, что он попал на другой… Настолько отличается структура страниц сайта.</p><p>В качестве <a href="/rooms/tehnika-raboty-s-holodnymi-zvonkami-kak-vesti-sebya-v-sluchae.html">наглядного примера</a> мы возьмём OZON.ru , крупнейший сетевой торговый ресурс России, сайт которого является <a href="/rostelecom/skolko-est-socialnyh-setei-krupneishie-socialnye-seti.html">ярким представителем</a> семейства Интернет-магазинов.</p><p>Структура страницы сайта у OZON.ru соответствует критерию единости. Именно поэтому мы не будем рассматривать каждую из них отдельно.</p><p>Возьмём для образца первое, что видит пользователь при переходе на любой ресурс – структуру главной страницы сайта. С дизайном <a href="/megaphone/kak-sdelat-vnutrennyuyu-stranicu-kak-sozdat-vnutrennyuyu-stranicu.html">внутренних страниц</a> сайта мы познакомимся при обзоре внутренней структуры страниц сайтов различных типов в будущих публикациях.</p><p>На OZON.ru она имеет <a href="/payments/kak-poluchit-stikery-anime-v-vk-kak-poluchit-raznye-vidy-platnyh.html">разный вид</a> (различный контент) в зависимости от того, произведён ли вход пользователя на сайт или нет. Поэтому для просмотра полного содержимого настоятельно рекомендую зарегистрироваться.</p><p>Тем более, я уверен, что Вы хоть раз в жизни да слышали об этом магазине и планировали воспользоваться его услугами, а, может быть, уже и совершали покупки.</p><p>Поэтому <a href="/beeline/kak-perenesti-dannye-s-aifon-na-android-podrobnyi-algoritm-deistvii-vypolnyaem.html">данное действие</a> не будет для вас лишним, ведь после регистрации у Вас появится возможность получать на свою <a href="/payments/chto-takoe-elektronnaya-pochta-i-kak-chto-takoe-adres-elektronnoi.html">электронную почту</a> информацию о скидках и акционных предложениях на более чем 2 млн. товаров различного ассортимента, позволяя экономить на покупках.</p><p>Прошу прощения за маленькое <a href="/megaphone/okruglit-ugly-v-fotoshope-kak-zakruglit-ugly-izobrazheniya-na-css-bez.html">лирическое отступление</a> 🙂</p><p>Итак, рассмотрим выбранный нами пример более детально, чтобы вы могли использовать <a href="/internet/kak-otdelnyi-element-dizaina-ili-v-kakie-byvayut-elementy-dizaina.html">отдельные элементы</a> интерфейса и их расположение при проектировании страницы сайта для своего ресурса.</p><p>Условно её можно разделить на следующие блоки.</p><p><b>1. Шапка или хедер (область вверху)
</b></p><p><img src='https://i2.wp.com/cccp-blog.com/wp-content/uploads/2015/10/struktura-stranicy-sajta-header.jpg' width="100%" loading=lazy></p><p>В нём, как правило, содержится логотип магазина, блога, социальной сети… Одним словом, проекта 🙂 со ссылкой на главную страницу.</p><p>Обязательно должна присутствовать контактная информация (телефоны, email) и данные пользователя, под которым вы прошли процедуру авторизации (логин/имя и меню пользователя, состоящее из различных элементов в зависимости от типа сайта).</p><p>Также широко распространён вариант шапки с главным меню ресурса, хотя на некоторых ресурсах оно может располагаться у правого или левого края зоны контента. На OZON.ru ссылка на главное меню размещена в хедере, но, при открытии, оно располагается в левой колонке зоны контента, что является <a href="/yota/metod-deikstry-tag-archives-algoritm-deikstry-no-eto-zhe-slozhnee-i.html">оригинальным решением</a> данного вопроса.</p><p>Помимо всего перечисленного здесь также размещается поиск по сайту.</p><p>Стоит сказать, что <a href="/services/relyacionnaya-algebra-operacii-relyacionnoi-algebry-modeli.html">данная модель</a> хедера является достаточно информативной и функциональной, поэтому можете смело использовать её разработке дизайна страниц сайта.</p><p><b>2. Подвал или футер (область внизу)
</b></p><p><img src='https://i2.wp.com/cccp-blog.com/wp-content/uploads/2015/10/struktura-stranicy-sajta-footer.jpg' width="100%" loading=lazy></p><p>Данный элемент структуры страницы сайта содержит, как правило, <a href="/rates/chto-znachit-plei-market-ostanovlen-obshchaya-informaciya-ob-oshibke-prilozhenie.html">общую информацию</a> о ресурсе и перечень ссылок на различные его страницы.</p> <p>На OZON.ru разработчики решили разместить в футере ещё и ссылки на сообщества в социальных сетях, которые в обязательном порядке должны присутствовать для привлечения новых посетителей.</p><p>Располагать их так же лучше в фиксированном месте. Именно поэтому на большинстве ресурсов они расположены в футере или хедере.</p><p>Помимо этого здесь также часто расположены ссылки на сайты партнёров, информация о годе основания ресурса с контактами его разработчиков и баннеры статистики (например, LiveInternet, HotLog, Яндекс.Метрика и др.)</p><p><b>3. Зона контента (информация, расположенная между хедером и футером)
</b></p><p><img src='https://i2.wp.com/cccp-blog.com/wp-content/uploads/2015/10/struktura-stranicy-sajta-content.jpg' width="100%" loading=lazy></p><p>Данный блок в большинстве случаев имеет правую и левую боковые колонки (сайдбары), в которых содержится различного рода служебная информация или элементы управления.</p><p>К ним относятся списки подкатегорий, рубрик, параметры фильтров и сортировки (характерны для Интернет-магазинов). Также в них может быть поиск по сайту, сводки погоды и другие элементы управления.</p><p>На большинстве ресурсов сайдбары расположены строго по бокам зоны контента. Таким образом, содержимое страницы выглядит как картина в рамке:-), ограниченная сверху и снизу хедером и футером, а по бокам сайдбарами.</p><p>Разработчики OZON.ru вновь продемонстрировали оригинальный подход при разработке дизайна данного блока сайта.</p><p>Он заключается в размещении левого сайдбара, блока с промо-акциями и правого сайдбара в лестничном порядке.</p><p>Дизайн главной страницы сайта в нашем примере предусматривает наличие в боковых колонках контента различных акционных предложений, действующих на данном торговом ресурсе либо на партнёрских проектах.</p><p>На многих ресурсах можно найти различные <a href="/tele2/kak-izbavitsya-ot-reklamnyh-bannerov-v-brauzere-ubiraem.html">рекламные баннеры</a> сторонних рекламодателей, что позволяет владельцам данных сайтов иметь дополнительный доход.</p><p>Правда, в таком случае, к выбору материала для размещения нужно подходить очень осторожно, чтобы не завести себе армию конкурентов и не привести к уходу пользователей от Вас на ресурс рекламодателя 🙂</p><p>Учитывая критерий однородности структуры страниц сайта, хедер, футер и сайдбары присутствуют на всех страницах, содержимое зоны контента различно.</p><p>Кстати, такой вариант дизайна страниц сайта является проверенным временем и универсальным.</p><p>Большинство ресурсов различных типов сегодня успешно её применяют в явном или модернизированном виде (может отсутствовать хедер, футер и один либо оба сайбара).</p><p>Иногда создатели веб-ресурсов наполняют сайдбары различным контентом, в зависимости от содержимого. Ярким подтверждением тому являются Интернет-магазины и, в частности, OZON.ru.</p><p>На странице со смартфонами в левом сайдбаре (рисунок вверху) выводятся параметры, характерные для этой категории (версия <a href="/mts/vybor-operacionnoi-sistemy-operacionnye-sistemy.html">операционной системы</a>, количество SIM-карт, типы <a href="/beeline/netu-besprovodnogo-podklyucheniya-besprovodnaya-set-net-podklyucheniya.html">беспроводных подключений</a> и т.д.)</p><p><img src='https://i2.wp.com/cccp-blog.com/wp-content/uploads/2015/10/struktura-stranicy-sajta-filter-phones.jpg' width="100%" loading=lazy></p><p>На следующем изображении с каталогом книг сайдбар уже выглядит по-другому, т.к. характеристики смартфонов неприменимы к <a href="/rooms/pochemu-dannyi-vid-svyazi-nedostupen-dlya-abonenta-mts-chto.html">данному виду</a> продукции. Тут уже присутствуют свои характеристики: автор, издательство, для какого возраста рассчитаны и т.д.</p><p><img src='https://i2.wp.com/cccp-blog.com/wp-content/uploads/2015/10/struktura-stranicy-sajta-filter-books.jpg' width="100%" loading=lazy></p><p>Несмотря на различие контента, <a href="/rostelecom/servisy-amazon-god-oblachnogo-hostinga-ot-amazon-besplatno-effektivnye-podhody.html">данный подход</a> всё равно удовлетворяет критерию единства структуры страницы сайта ввиду наличия одинакового набора информационных блоков на <a href="/internet/pochemu-ne-otkryt-startovuyu-stranicu-yandeksa-ustanovka.html">различных страницах</a> (в <a href="/yota/nastroit-zdorove-na-iphone-4s-sozdanie-medkarty-dlya.html">данном случае</a>, левый сайдбар).</p><p>На этом наша статья, в которой нами была рассмотрена <b>структура страницы сайта
</b>, объявляется закрытой 🙂</p><p>По ходу изучения материала у вас уже должен был сформироваться проект страницы сайта, который осталось только воплотить в жизнь 🙂</p><p>Надеюсь, что информация была вам полезной, и помогла узнать что-то новое. Если это так, то мы охотно примем от вас в виде благодарности за наш труд репост данной записи в <a href="/tele2/populyarnye-vse-socialnye-seti-spiski-socialnyh-setei-spisok-russkoyazychnyh.html">социальные сети</a> с помощью кнопок под статьёй или в качестве подписки на обновления .</p><p>В следующих статьях, как я и обещал, будут рассмотрены особенности внутренней структуры страниц сайтов различной тематики, чтобы изучить тонкости создания сайта, с идеей и типом которого, я надеюсь, Вы уже определились.</p><p>Если же это не так, предлагаю Вам ознакомиться с другими статьями моего блога, посвящёнными данному вопросу.</p><p>Также, если в процессе чтения данного поста вы поняли, что вам нужно внести правки в структуру сайта, то рекомендую прочитать материал о том, как можно самостоятельно.</p><p>Обещаю, что ваше мнение не останется незамеченным.</p> <p>Следите за обновлениями! До встречи 🙂</p><blockquote><p><b>P.S.
</b>: если вам нужен сайт либо необходимо внести правки на существующий, но для этого нет времени и желания, могу предложить свои услуги.</p><p><b>Более 5 лет опыта
</b> профессиональной разработки сайтов. Работа с <b>PHP
</b>, <b>OpenCart
</b>, <b>WordPress
</b>, <b>Laravel
</b>, <b>Yii
</b>,</p></blockquote>
<h2>Структура веб-сайта</h2><p>Структура сайта - это его основа. Еще на этапе создания сайта необходимо позаботиться об удобном структурировании всей информации. Специалисты по <a href="/supertrip/tehnicheskaya-podderzhka-aifon-oficialnaya-sluzhba-tehnicheskoi-podderzhki-apple-pay-v.html">технической поддержке</a> сайта могут предложить несколько типов структур, каждая, из которых имеет свои достоинства и недостатки.</p>
<p>Самая <a href="/rostelecom/struktura-prostoi-programmy-struktura-programm-na-yazyke-si.html">простая структура</a> - <i>линейная
</i>. На сайте с таким типом структурирования все страницы идут по очереди. Это значительно затрудняет посетителю поиск интересующей его информации, ведь прежде чем найти <a href="/mts/kontakt-dobro-pozhalovat-vhod-na-stranicu-kak-voiti-bez-parolya-na-moyu.html">нужную страницу</a> необходимо пролистать все стоящие до нее. Конечно, далеко не у каждого есть столько терпения и времени, по этому, часто, сайты с такой структурой остаются без посетителей. Линейная структура сайта очень примитивна, и, не смотря на свою ценовую доступность, не пользуется спросом у заказчиков. Применение такого типа структурирования оправданно лишь в том случае, когда <a href="/supertrip/pochemu-printer-kenon-pechataet-zelenym-cvetom-pochemu-moi-printer-pechataet-s.html">речь идет</a> о сайте-визитке с парой страниц.</p>
<p>Для структурирования информации на небольших сайтах, часто применяют модифицированную линейную структуру. От классической структуры она отличается тем, что с <a href="/internet/keshirovannye-stranicy-yandeks-chto-takoe-kesh-stranicy-i-dlya-chego-on.html">определенной страницы</a> имеет несколько ответвлений. Это позволяет посетителям быстрее попасть на интересующую их страницу. И хотя на первый взгляд недостатки такого типа структуры очевидны: ответвлений мало, свобода посетителей ограниченна. Тем не менее, <a href="/beeline/kak-vosstanovit-parol-ot-mail-cherez-telefon-drugoi-sposob.html">данный способ</a> структурирования имеет неоспоримое достоинство, а именно, дает <a href="/payments/problemy-v-chtenii-karty-sd-windows-phone-problemy-v-chtenii-karty-sd-windows-phone-oppo.html">уникальную возможность</a> контролировать поведение пользователей. Например, в интернет-магазине, можно направить посетителя на страничку с рекламным описанием товара, потом дать информацию о бонусах, различных скидках, и только после этого разрешить доступ к страничке с ценами.</p>
<p>Самыми удобными считаются древовидная и решетчатая структуры. Древовидная структура сайта имеет, как бы ствол, стержень сайта от которого расходятся ветви-странички. Такая структура позволяет быстро найти информацию и не заблудиться на сайте. Иногда для структурирования сайта выбирают <a href="/rates/vneshnie-otseki-3-5-korpusa-harakteristiki-tipy-vidy-reshetchataya.html">решетчатый тип</a> расположения информации. На сайте с такой структурой найти <a href="/services/tvitter-naiti-cheloveka-bez-registracii-poiskovye-filtry-dlya-nuzhnoi.html">нужную информацию</a> можно мгновенно и с любой странички, однако существует <a href="/beeline/kak-zarabotat-1000-pryamo-seichas-kak-vybirat-tovary-dlya-pereprodazhi.html">реальная возможность</a> заблудиться. По этому, выбирая такую структуру, нужно обязательно добавлять <a href="/supertrip/kak-otvyazat-kartu-ot-aliexpress-bystro-i-ponyatno-poryadok-zameny-karty.html">понятную карту</a> сайта.</p>
<h2>Структура страницы веб-сайта</h2>
<p>Формирование страницы веб-сайта производится динамически на основе используемого шаблона страницы, данных выводимых компонентами и статической информации, размещенной на странице. Создание шаблонов сайта и размещение на них компонентов осуществляется разработчиками сайтов. Тем не менее, необходимо иметь основное представление о том, как устроена страница сайта. Для всех страниц веб-сайта обычно используется один и тот же внешний шаблон.</p>
<p>Структурно дизайн поделён на три части:</p>
<p>верхняя - <i>header
</i>. Включает в себя, как правило, верхнюю и <a href="/megaphone/ne-rabotaet-levaya-chast-klaviatury-chto-delat-esli-ne-vklyuchaetsya.html">левую часть</a> дизайна со статической информацией (логотипом, лозунгом и так далее), верхним горизонтальным меню и левым меню (если они есть в дизайне). Может включать в себя информационные динамические материалы.</p>
<p>основная рабочая область - <i>work area
</i>. Рабочая область страницы, в которой размещаются собственно <a href="/beeline/what-is-electronic-service-issuance-of-permission-for-their-official-publication-of-educational-materials-is-carried-out-by-the-commission-on-information-support-of-the-official-internet-server-of-the-administration-of-the-arkhangelsk-region.html">информационные материалы</a> веб-сайта. В качестве Основной <a href="/tele2/bazovye-pri-my-obrabotki-fotografii-v-adobe-photoshop-udalenie-shuma.html">рабочей области</a> может подключаться как физический файл, так и <a href="/mts/vosstanovlenie-sistemy-windows-10-s-tochki-vosstanovleniya-kak-vosstanovit.html">создаваемый системой</a> на основе комплексных компонентов динамический код.</p>
<p>Если в качестве Основной рабочей области подключается физический файл, то такая страница называется статической. Если подключается динамический код, то такая страница называется динамической.</p>
<p>нижняя - <i>footer
</i>. Включает в себя, как правило, статическую информацию (контактная информация, сведения об авторе и владельце веб-сайта и так далее), нижнее <a href="/rates/verhnee-menyu-css-gorizontalno-centrirovannoe-menyu-s-ispolzovaniem.html">горизонтальное меню</a> и <a href="/rostelecom/gde-na-pk-raspolagaetsya-kontekstnoe-menyu-kak-izmenit-menyu-pravoi-knopki.html">правое меню</a> (если они есть в дизайне). Может включать в себя информационные материалы.</p>
<p>Эти три части могут занимать разную площадь, иметь <a href="/supertrip/sataninskii-obratnaya-svyaz-otoslat-kopiyu-kak-poprosit-ob-obratnoi-svyazi-na.html">разную форму</a>. Неизменно одно: их порядок.</p>
<p><b>Верхняя
</b>и <b>нижняя
</b>части дизайна формируются на основе шаблона дизайна веб-сайта, т.е. информация, отображаемая в данных областях, определяется параметрами шаблона веб-сайта.</p>
<p>Когда речь заходит о редактировании страниц веб-сайта, в большинстве своем имеется в виду изменение содержимого <b>Основной рабочей области
</b>. Здесь можно разместить любую информацию: текст, список новостей, каталог товаров, форму голосования и т.д.</p>
<p>Так же в шаблоне веб-сайта могут быть предусмотрены дополнительные <b>включаемые области
</b>, в которых также может быть размещена любая информация. Включаемые области могут размещаться как в верхней, так и в <a href="/megaphone/kak-v-fotoshope-sohranit-dlya-web-umenshaem-razmer-izobrazheniya---image-size-servisnye-parametry-nizh.html">нижней частях</a> страницы.</p>
<p>Благодаря правильной компоновке блоков на странице в дальнейшем облегчается сопровождение сайта для его разработчиков. При грамотном распределении информации на странице упрощается перемещение по сайту и поиск интересующей информации для посетителей сайта.</p>
<p><b>Тип урока:
</b> урок усвоения новых знаний</p>
<p><b>Цели:
</b></p>
<ul><li>Познакомиться с понятием Веб 2.0, а также со структурой веб-сайтов, рассмотреть основные этапы создания сайта на хостинге</li>
<li>Вырабатывать навыки по регистрации на хостинге и разработке структуры сайта, используя возможности бесплатного хостинга</li>
<li>Формировать ответственное отношение к представляемой на сайте информации, её достоверности, актуальности, оригинальности.</li>
</ul><p><b>Дидактические материалы
</b>: инструкционные листы с заданиями</p>
<p><b>Программное обеспечение
</b>: браузер, пакет «Denver», СМS «Kandidat»</p>
<p><b>Структура урока
</b></p>
<p>I. <a href="/yota/dannye-v-ms-excel-mozhno-vvodit-operacii-s-knigami-organizacionnyi-moment-uroka.html">Организационный момент</a><br> II. Актуализация опорных знаний<br> <br> V. Закрепление материала учащимися<br> VI. Подведение итогов<br>VII. Домашнее задание</p>
<h3>Ход урока</h3>
<p>I. Организационный момент<br> II. Актуализация.</p>
<ol><li>Что представляет собой сайт и каково его назначение?</li>
<li>Какая служба в Интернет отвечает за веб-сайты?</li>
<li>Что означает <a href="/rates/kak-podobrat-domennoe-imya-domennoe-imya-kak-vybrat-pravilnyi.html">доменное имя</a> сайта?</li>
<li>С чего начать создание собственного сайта и какие технологии использовать?</li>
</ol><p>III. Сообщение темы и целей урока<br> IV. Изучение теоретического материала</p>
<h2>Структура веб-сайтов</h2>
<p><b>Структура веб-сайта
</b> – это его каркас, определяющий порядок навигации.</p>
<p>Базовые структуры веб-сайтов можно разделить на три группы: линейная, древовидная, решетчатая.</p>
<p><b>Линейная структура
</b> представляет собой последовательность веб-страниц, доступ к которым возможен только с предыдущей и последующей. Такая структура может быть применена для имиджевых сайтов, сайтов-презентаций, онлайновых учебных пособи<b>й.
</b></p>
<p><b>Древовидная структура
</b>является иерархической, где <a href="/megaphone/yandeks-glavnaya-stranica-uragan-yandeks-nastroika-glavnoi-stranicy.html">главная страница</a> является первым, самым <a href="/beeline/chto-takoe-domen-verhnego-urovnya-registraciya-besplatnyh-domenov-pervogo.html">верхним уровнем</a>, страницы категорий – более низким, вторым уровнем, а конечные страницы, соответственно – третьим. В ряде случаев уровней может быть больше, если категории содержат подкатегории, но <a href="/payments/gugl-adsens-vhod-vsya-zhestkaya-pravda-o-zarabotke-na-google-adsense-eto-trebuet.html">большое количество</a> уровней негативно сказывается на индексации страниц сайта. <a href="/yota/struktury-dannyh-obshchee-ponyatie-realizaciya-prosteishie.html">Данная структура</a> подходит практически для любого сайта. Это может быть тематический сайт, портал, интернет-магазин.</p>
<p><b>Решетчатая структура
</b>сайта позволяет осуществлять переходы, как по вертикали, так и по горизонтали между ветвями в разных уровнях. Эта структура применяется, как правило в сайтах-каталогах.</p>
<h2>Разновидности веб-страниц</h2>
<p>Веб-сайты различных структур в основном включают в себя четыре типа страниц:</p>
<ul><li>главная страница,</li>
<li>страницы категорий,</li>
<li>конечные страницы,</li>
<li>служебные страницы.</li>
</ul><p><b>Главная страница
</b> должна давать обобщенные сведения о сайте в целом и указывать направления по основным категориям.</p>
<p><b>Конечные страницы
</b> содержат в себе основные материалы сайта – статьи, изображения, видео. Именно эти страницы представляют наибольший интерес для пользователя.</p>
<p><b>Служебные страницы
</b> предназначены для размещения карты сайта, <a href="/payments/sozdanie-lending-gde-i-kak-ispolzuyutsya-landing-page-logotip-nazvanie-firmy-i.html">контактной информации</a>, <a href="/rostelecom/chto-znachit-gruppa-zablokirovana-narushenie-reglamenta-odnoklassniki.html">лицензионного соглашения</a> и других служебных данных.</p>
<h2>Выбор хостинга и доменного имени</h2>
<p><b>Хо?стинг
</b> - это услуга по предоставлению вычислительных мощностей для физического размещения сайта на сервере, постоянно подключенном к <a href="/internet/kompyuternye-seti-klassifikaciya-kompyuternyh-setei-otchet-po-praktike.html">компьютерной сети</a> (в данном случае Интернет).</p>
<p><b>Хостинговая компания
</b> (<i>хостинг-провайдер
</i>) - организация, предоставлением услуг размещения оборудования, данных и web-сайтов на своих серверах.</p>
<p>Для создания и размещения сайта требуется выбрать хостинг (они бывают платные и бесплатные), а также доменное имя, которое чаще всего можно приобрести через хостинг-провайдера. Доменное имя покупается на год (цена в зависимости от <a href="/services/vse-domennye-zony-mira-tematicheskie-domennye-zony-domennaya-zona-v.html">доменной зоны</a>), но ряд <a href="/tele2/hosting-s-avtomaticheskoi-ustanovkoi-wordpress-besplatnye-i.html">бесплатных хостингов</a> предоставляют бесплатные доменные имена третьего уровня. Для небольшого сайта вполне подойдет бесплатный хостинг, где можно будет отработать основные навыки работы с веб-сайтом. Следует учесть что бесплатный хостинг и домен накладывают определенные ограничения на возможности <a href="/rostelecom/osnovnye-terminy-android-4-pda-chto-luchshe-smartfon-ili-android-ne-sovsem.html">создаваемого проекта</a>. Когда выбор хостинга сделан, требуется зарегистрироваться на нём и начать работу по созданию сайта.</p>
<h2>Создание сайта с помощью СМС</h2>
<p>В настоящее время сайты, как правило, создаются с помощью <a href="/beeline/programma-dlya-izmeneniya-golosa-pri-zvonke-programma-dlya.html">специальных программ</a>, именуемых системами управления сайтом (СМS). Часто используется термин «Конструктор сайтов», который по сути является также CMS. Система управления сайтом предназначена для <a href="/megaphone/skachat-programmu-dlya-sozdaniya-3d-modelei-sistema-avtomatizirovannogo.html">автоматизированного создания</a> сайта, а также для управления контентом (содержимым). Другими словами, СМС позволяет на основе шаблона <a href="/beeline/urovni-i-tipy-modelei-bd-opredelennyi-nabor-otnoshenii-obladaet-luchshimi.html">определенного типа</a> создать сайт, задать его структуру и наполнить информацией даже человеку, слабо владеющему HTML. Ряд хостингов имеют встроенные CMS: в частности, популярный ucoz.ru.</p>
<p>Несмотря на многообразие CMS, принципы их работы одинаковы. Для отработки приемов работы с ней целесообразно на свой локальный компьютер установить пакет программ «Denver», который позволяет смоделировать работу сервера. С помощью <a href="/payments/pochemu-voznikaet-sintaksicheskaya-oshibka-sintaksicheskaya-oshibka-pri.html">данного пакета</a> можно использовать разнообразные СМС, создавая сайты непосредственно на <a href="/payments/kak-sozdat-lokalnyi-server-na-kompyutere-ustanavlivaem.html">локальном компьютере</a>. Овладев основными приемами работы с сайтом, можно уверенно приступать к регистрации на сервере хостинг-провайдера.</p>
<h2>Технология Веб 2.0</h2>
<p>Следует упомянуть <a href="/mts/neirokompyutery-istoriya-vozniknoveniya-i-perspektivy-razvitiya-o.html">современное направление</a> в принципах web-разработок, называемое web 2.0</p>
<p><b>Веб 2.0
</b>является методикой проектирования сайтов, которые путём взаимодействия с пользователями становятся тем совершеннее, чем <a href="/supertrip/kak-naiti-skrytye-papki-i-faily-na-kompyutere-kak-obnaruzhit-i-udalit.html">больше людей</a> ими пользуются. Эта методика подразумевает участие пользователей в развитии web-проекта (примером является «Википедия»), а если точнее, в наполнении информацией. Хотя Веб 2.0 именуется технологией, далеко не все специалисты с этим согласны, поскольку речь не идет о каком-то особом методе web-дизайна.</p>
<p>V. <span>Закрепление материала учащимися (Создание сайта на локальном сервере)
</p>
<ol><li>Запустить на выполнение программу «Start Denver»</li>
<li>В <a href="/yota/skrytye-fotki-v-kontakte-rabotaem-s-adresnoi-strokoi.html">адресную строку</a> браузера ввести доменное имя, указанное в инструкционной карте (например, http://school24.ua). Ознакомиться с шаблоном сайта, предложенного по умолчанию.</li>
<li>Открыть <a href="/megaphone/admin-panel-administrativnaya-panel-upravleniya-wordpress-kak-zaiti.html">административную панель</a> сайта: http://school24.ua/admin</li>
<li>Указать логин и пароль (admin, admin)</li>
<li> <b>Настройки
</b>, задать название сайта, выбрать шаблон, соответствующий теме сайта</li>
<li>В разделе “Навигация” выбрать пункт <b>Начало
</b>. Создать нужное количество категорий (Ссылка «Добавить категорию»–Указать название категории–Установить переключатель <b>Включить ссылку страницы в меню
</b>в положение «<b>Да
</b>»–Кнопка <b>Добавить категорию
</b>)</li>
<li>При необходимости откорректировать меню сайта (В разделе “Навигация” выбрать пункт «Редакция меню»)</li>
<li>Проверить созданный сайт (Ссылка «Перейти на сайт»)</li>
</ol><p>VI. Подведение итогов.</p>
<ol><li>Домашнее задание: зарегистрироваться на одном из бесплатных хостингов со встроенной CMS, получить доменное имя сайта, создать сайт (без наполнения контентом).</li>
</ol>
<p><b>Веб-страница - гипермедиа документ
</b></p>
<p><b>Тема 8. Создание Web-страниц (в формате HTML).
</b></p>
<p>WWW состоит из множества взаимосвязанных документов - веб-страниц. Связь осуществляется при помощи гиперссылок (или короче - ссылок). При наведении курсора мыши на ссылку, он принимает вид “выбор ссылки” (указующий перст) и в строке состояния <a href="/payments/ustanovka-activex-v-internet-explorer-css3-resheniya-dlya-internet-explorer.html">Internet Explorer</a> отображается URL документа, к которому будет произведен переход. Щелчок мыши по ссылке активизирует ее, то есть происходит переход по этому адресу.</p>
<p><b><u>Веб-страницы
</u>
</b> представляют собой файлы, которые создаются с использованием <a href="/tele2/yazyk-gipertekstovoi-razmetki-html-yazyk-razmetki-gipertekstovyh.html">языка HTML</a> (<a href="/internet/sredstva-gipertekstovoi-razmetki-osnovy-html-yazyk-razmetki.html">Hyper Text</a> Markup Language -язык гипертекстовой разметки документов) и имеют одноименный формат - HTML. Документ <a href="/beeline/kak-vstavit-izobrazhenie-kak-vstavit-kartinku-v-html-redaktirovanie.html">формата HTML</a> может содержать помимо текста, графики и ссылок еще и мультимедийные объекты: анимацию, видео, звук, то есть он строится на основе технологии гипермедиа.</p>
<p>Набор веб-страниц, являющихся собственностью какой-либо компании или частного лица, называют <b><u>веб-сайтом
</u>
</b> (от англ. site - местоположение) или просто сайтом. Как правило, все страницы сайта тесно связаны между собой общей темой.</p>
<p><a href="/payments/poisk-failov-v-windows-10-ne-rabotaet-ispolzovanie-sohran-nnogo-poiska-v-kachestve.html">Отправной точкой</a> любого сайта является главная или, как говорят, <b><u>домашняя страница сайта
</u>
</b>. В большинстве случаев она содержит ссылки на другие страницы. Как правило, все другие страницы сайта содержат кнопки, позволяющие вернуться на <a href="/tele2/naidi-mne-yandeks-sdelat-stranicei-po-umolchaniyu-kak-ustanovit.html">домашнюю страницу</a> сайта.</p>
<p><b>Гипертекст
</b><i> - это способ структурирования документов путем размещения ссылок внутри одного документа или между документами.
</i></p>
<p><i>В виде гипертекста построена Библия, гипертекст используется во всех энциклопедиях, на основе гипертекста строятся <a href="/yota/obzor-help-manual---programmy-dlya-sozdaniya-failov-spravochnoi-sistemy.html">справочные системы</a> компьютерных программ.
</i></p>
<p>Для создания веб-страниц используется гипертекстовый язык описания документов - HTML (Hyper Text Markup Language).</p>
<p>Это язык программирования, имеющий свой набор команд.</p>
<p>Каждый веб-документ представляет собой программу, написанную на этом языке (HTML-код).</p>
<p><a href="/payments/kakie-komandy-soderzhit-yazyk-programmirovaniya-html-chto-da-t.html">Команды HTML</a> называются <b>тегами
</b>(от англ. tag - ярлык, метка). Чтобы отличить теги от текста документа их заключают в угловые скобки. Например, тег <br> означает команду “начало новой строки”. Теги могут быть как одиночными, так и парными. Одинарные задают действие на один раз. Парные теги указывают начало <b>и
</b>окончание действия команды. Тег, указывающий на окончание, помечается символом слеш (/).</p>
<p>Структура веб-страницы задается следующими парными тегами:</p>
<p>· <b>Пара <html> и </html>
</b> указывает формат страницы и отмечает его границы</p><br><p>· <b>Пара <head> и </head>
</b> указывает на начало и конец заголовка. Включают описание документа, ключевые слова (keywords) для поиска, название документа <b>и
</b>другую информацию идентифицирующую страницу.</p>
<p>· <b>Пара <title> и
указывает имя страницы.
· Пара и
указывает на начало и конец “тела” страницы. Тело - это последовательность команд, обеспечивающая вывод в окно браузера форматированного текста, ссылок и других элементов веб-страницы.
Создавать веб-страницы можно как в HTML-редакторах (FrontPage), так и в текстовых редакторах разного уровня (Word, Блокнот).
Рисунки и другие объекты веб-страницы хранятся отдельно от HTML-кода.
HTML-код веб-страницы содержит команды, которые сообщают браузеру, где хранится объект и в какой области окна он должен быть отображен.
Таким образом, веб-страница, как правило, хранится в виде файла формата.html и папки с объектами.
