Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.

HTML-документ - это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот) , так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.) . HTML-документ имеет расширение.html .

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

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

Одиночные теги не могут хранить в себе содержимого напрямую, оно прописывается как значение атрибута, например, тег создаст кнопку с текстом Кнопка внутри.

Теги могут вкладываться друг в друга, например,

Текст

. При вложении следует соблюдать порядок их закрытия (принцип «матрёшки») , например, следующая запись будет неверной:

Текст

.

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

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

Браузер просматривает (интерпретирует) HTML-документ, выстраивая его структуру (DOM) и отображая ее в соответствии с инструкциями, включенными в этот файл (таблицы стилей, скрипты). Если разметка правильная, то в окне браузера будет отображена HTML-страница, содержащая HTML-элементы - заголовки, таблицы, изображения и т.д.

Процесс интерпретации (парсинг) начинается прежде, чем веб-страница полностью загружена в браузер. Браузеры обрабатывают HTML-документы последовательно, с самого начала, при этом обрабатывая CSS и соотнося таблицы стилей с элементами страницы.

HTML-документ состоит из двух разделов - заголовка — между тегами … и содержательной части — между тегами … .

Структура веб-страницы 1. Структура HTML-документа

Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD) . DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.

DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.

...

Элементы, находящиеся внутри тега , образуют дерево документа, так называемую объектную модель документа, DOM (document object model) . При этом элемент является корневым элементом.


Рис. 1. Простейшая структура веб-страницы

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

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

, , и т.д.

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

Является потомком одновременно для и .

Родительский элемент - элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 и . Тег

Является родительским только для .

Дочерний элемент - элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы , ,

И являются дочерними по отношению к .

Сестринский элемент - элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 и — элементы одного уровня, так же как и элементы , и

Являются между собой сестринскими.

1.1. Элемент 1.2. Элемент

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

1.2.1. Элемент

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

1.2.2. Элемент

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

Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском:

С помощью тега можно запретить или разрешить индексацию веб-страницы поисковыми машинами:

Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:

Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:

Таблица 2. Атрибуты тега Атрибут
charset Указывает кодировку символов для текущего HTML-документа:
content Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name , в зависимости от их значения.
http-equiv Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте:
default-style указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента , который ссылается на таблицу стилей CSS, или идентификатор элемента , содержащего таблицу стилей.
refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы" .
Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:

Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url:
name Ассоциируется со значением, содержащемся в атрибуте content . Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv , charset или itemprop .
application-name указывает название веб-приложения, используемого на странице.
author указывает имя автора документа в свободном формате.
description определяет краткое описание к содержимому страницы, например:

generator указывает один из пакетов программного обеспечения, используемого для создания документа, например:
.
keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например:
.
Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator , googlebot , publisher , robots , slurp , viewport , хотя ни одно из них еще не было официально принято.
1.2.3. Элемент

Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.

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

.paper { width: 200px; height: 300px; background-color: #ef4444; color: #666666; }

Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:

...

CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style , например:

1.2.4. Элемент

Задать стили для документа можно также при помощи другого способа - записать их в отдельный файл с расширением.css , например, style.css .

Подключить файл со стилями к веб-странице можно двумя способами:
через директиву @import url

@import url(style.css);

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

Таблица 4. Атрибуты тега Атрибут Описание, принимаемое значение
crossorigin Указывает, должен ли использоваться CORS (технология браузеров, которая позволяет предоставить веб-странице доступ к ресурсам другого домена) при извлечении изображения с сайта.
anonymous — в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, содержащий имя домена, с которого осуществлён запрос. Если сервер не ответит CORS-заголовком Access-Control-Allow-Origin: * (или имя домена вместо звёздочки), то загрузка изображения будет заблокирована.
use-credentials — если сервер не предоставляет учётные данные с помощью Access-Control-Allow-Credentials: true , то загрузка изображения будет заблокирована.
href Основной атрибут тега, в качестве значения выступает путь к файлу со стилями.
hreflang Определяет язык текста в документе, на который идет ссылка.
media Определяет тип устройства, к которым должен быть применен ресурс ссылки.
nonce Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста.
rel Атрибут определяет отношения между текущим документом и документом, на который идет ссылка.
alternate — ссылка на тот же документ, но в другом формате (например, страницы для печати, перевод, зеркало, лента в формате RSS или Atom),
.


archives — указывает на то, что документ по ссылке представляет исторический интерес. Ссылка может указывать на коллекцию записей, документов и других материалов.
author ссылка на страницу об авторе документа или на страницу с контактными данными автора.
bookmark ссылка на ближайшего предка статьи, являющегося связующим звеном, или на раздел статьи, наиболее тесно связанных с элементом, если нет предка.
external используется для указания того, что страница на которую ведет ссылка не являются частью данного сайта.
first указывает ссылку, ведущую на первый документ из последовательности документов.
help ссылка на документ со справкой.
icon определяет путь к иконке, которая будет использована для текущего документа.
last указывает ссылку, ведущую на последний документ в последовательности документов.
license ссылка на сведения об авторских правах для документа.
next указывает, что этот документ является частью серии, и что ссылка ведет на следующий документ в этой серии.

nofollow указывает на то, что ссылка не одобрена автором страницы или что ссылка носит коммерческий характер.
noreferrer указывает на то, что заголовок запроса клиента, содержащий url источника запроса, не должен передаваться при переходе по ссылке.
pingback указывает адрес пингбэк-сервера, что дает возможность для блога автоматически оповещать сайты, ссылающиеся на него.
prefetch указывает, что следует заранее кэшировать файл, на который ведет ссылка.
prev указывает, что этот документ является частью серии, и что ссылка ведет на предыдущий документ в этой серии.

search указывает, что ссылаемый документ содержит интерфейс поиска и связанных с ним ресурсов.
sidebar указывает, что ссылаемый документ, если это возможно, будет показан в дополнительном контексте браузера, и некоторые браузеры при щелчке по гиперссылке открывают окно для добавления ссылки в панель закладок.
stylesheet ссылка на внешний файл, который будет использоваться в качестве таблицы стилей для данного документа.
tag указывает на то, что метка, на которую ведет гиперссылка, относится к данному документу.
up указывает, что страница является частью иерархической структуры, и что гиперссылка ведет на более высокий уровень ресурса в структуре.
sizes Указывает размер иконок для визуального отображения. Атрибут sizes используется только совместно с rel="icon" , и может принимать следующий значения:
ширинах высота - определяет список размеров, разделенных пробелами, каждый размер должен быть в формате - ширинах высота (размеры иконки задаются в пикселях), например:
;
any - иконка может масштабироваться до любого размера.
title Определяет заголовок ссылки или название набора альтернативных таблиц стилей. Значение атрибута — текст.
type Определяет MIME-тип документа, на который идет ссылка. В данном случае он принимает значение "text/css" .
1.2.5. Элемент Таблица 5. Атрибуты тега Атрибут Описание, принимаемое значение
async Атрибут указывает на то, что сценарий будет выполняться асинхронно с остальной частью страницы (сценарий начнет выполняться одновременно с загрузкой страницы).
charset Определяет кодировку символов
crossorigin Определяет, будет ли использоваться CORS при загрузке внешних скриптов (с использованием атрибута src).
anonymous — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, при этом не передаются параметры доступа (cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Origin: имя домена, скрипт не будет загружен.
use-credentials — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin с указанием параметров доступа (cookie, SSL-сертификат или пары логин/пароль). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Credentials: true , скрипт не будет загружен.
defer Интерпретация сценариев откладывается до окончания отображения документа на устройстве пользователя.
nonce Обеспечивает безопасность, защищая от атак с внедрением межсайтового скриптинга (XSS, cross site scripting). Устанавливает правила использования встроенных скриптов с помощью nonce-значений и хэшей. Во время рендеринга страницы браузер для каждого инлайн-скрипта вычисляет хэши и сравнивает с перечисленными в CSP. Загрузка с ресурсов, не входящих в «белый список», блокируется.
src Указывает на месторасположение файла со сценарием, значение атрибута - это url файла, содержащего JavaScript-программу.
type Используются для объявления языка сценария, использованного при составлении содержимого тега.
1.3. Элемент

В этом разделе располагается все содержимое документа. Для элемента доступны .

Таблица 5. Атрибуты тега Атрибут Описание, принимаемое значение
onafterprint Событие, срабатывающее после отправки страницы на печать или после закрытия окна печати.
onbeforeprint Событие, срабатывающее перед отправкой страницы на печать.
onbeforeunload Событие срабатывает, когда посетитель инициировал переход на другую страницу или нажал «закрыть окно». Позволяет отображать сообщение в диалоговом окне подтверждения, чтобы сообщить пользователю, хочет ли он остаться или покинуть текущую страницу.
onhashchange Событие срабатывает, когда меняется hash-часть URL, например, когда пользователь перейдет с адреса example.domain/test.aspx#page1 на example.domain/test.aspx#page2 .
onmessage Событие происходит, когда сообщение получено через источник события.
onoffline Событие вызывается браузером в том случае, когда браузер определит, что соединение с интернет пропало.
ononline Событие вызывается браузером в том случае, когда соединение с интернет возобновилось.
onpagehide Событие происходит, когда пользователь покидает страницу посредством навигации, например, нажав на ссылку, обновив страницу, заполнив форму и т.д.
onpageshow Событие происходит, когда пользователь переходит на веб-страницу, после события onload.
onunload Событие срабатывает если страница не загрузилась по каким-либо причинам, либо при закрытии окна браузера.

В основном веб-страницы создаются с помощью языка гипертекстовой разметки (HTML - Hyper Text Markup language ). HTML - это простой язык программирования, ос­новная задача которого заключается в форматировании страницы при отображении в веб-браузере, например в Microsoft Internet Explorer . В данной главе представлен минимум ин­формации, который необходимо знать для создания веб-страниц и их объединения в рабо­тающий сайт.

HTML состоит из элементов. Например, абзац текста или изображение это элементы. Элементы, в свою очередь, состоят из тегов, атрибутов и содержимого (последнее не всегда обязательно). Ниже приведена более подробная информация по каждому виду элементов.

1.Теги. Это простые дескрипторы, которые указывают веб-браузеру на расположение элементов на странице и их форматирование.

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

Закрывающий тег. Конец элемента в HTML обозначается закрывающим тегом. Он точно такой же, как открывающий, только перед именем элемента ставится обратная косая черта. Следовательно, - закрывающий тег абзаца. У неко­торых элементов, например у IMG . закрывающих тегов нет

2.Атрибуты. С помощью атрибутов определяют параметры элементов. Добавляя со­ответствующие атрибуты к тегу, задают высоту и ширину изображений, как, напри­мер, в следующем фрагменте программного кода

3.Содержимое. Содержимое располагается между закрывающим и открывающим те­гами, как. например, в следующем фрагменте программного кода:

Здесьрасположено содержимое этого абзаца.

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

Существует две разновидности структур веб-страниц: стандартная и фреймовая. Стан­дартная веб-страница представляет собой отдельную структуру.

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

Веб-страницы состоят из эле­ментов. Базовая структура типовой веб-страницы содержит три элемента: HTML , HEAD и BODY . В состав элемента-контейнера HTML входят элементы HEAD и BODY .

На самом деле технически возможно реализовать веб-страницу без исполь­зования тегов HTML , HEAD и BODY (стандарт HTML позволяет это сделать), однако удачным решением это не назовешь. Исключив эти теги, разработчик ничего не добьется, а их использование позволяет упорядочить другие эле­менты страницы.

Все видимые на странице элементы расположены внутри тега BODY . Элемент HEAD содержит информацию типа заголовка страницы, который записывается между тегами и , как, например, в следующем фрагменте программного кода.

Это заголовок страницы.

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

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

Структура веб-сайта

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

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

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

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

Структура страницы веб-сайта

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

Структурно дизайн поделён на три части:

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

основная рабочая область - work area . Рабочая область страницы, в которой размещаются собственно информационные материалы веб-сайта. В качестве Основной рабочей области может подключаться как физический файл, так и создаваемый системой на основе комплексных компонентов динамический код.

Если в качестве Основной рабочей области подключается физический файл, то такая страница называется статической. Если подключается динамический код, то такая страница называется динамической.

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

Эти три части могут занимать разную площадь, иметь разную форму. Неизменно одно: их порядок.

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

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

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

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

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

Содержание:

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


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

§ 1. Виды структур сайтов

1. Линейная - это структура, построенная по типу слайд - шоу. Пользователи просматривают web-ресурс страница за страницей.

Линейная структура сайта

2. Древовидная структура - самая популярная структура, которая подходит для всех видов сайта. Главное, что нужно помнить при построении «сайта-дерева» с многочисленными ветвями в виде страниц и «под - страниц», чтобы ресурс «рос» и развивался не только вширь, но и в глубь.

Древовидная структура сайта

3.Гибридная структура сайта - наиболее используемый вариант построение веб ресурсов. Представляет собой смешанный вариант линейной и древовидной.

Гибридная структура сайта

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

Решетчатая структура сайта

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

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

Внешняя структура

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

Наиболее популярные mind map или Visio.

Создание сайта и его разделов - кропотливая и ответственная работа.

§ 2. Правильная структура сайта

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

Cделайте HTML карту сайта , на которой будут ссылки на все страницы сайта.

Cтруктура сайта должна быть упорядочена и понятна.

Пример чистой структуры URL:

  • mysite.ru/Category1/Product1
  • mysite.ru/Category1/Product2
  • mysite.ru/Category2/Product3

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

На сайте не должно быть «битых ссылок» которые ведут на несуществующие страницы отдающие код 404. Такие ссылки могут привести к тому что поисковой робот уйдет с вашего сайта, а посетитель не найдет то чего хотел.

В URL используйте ЧПУ, например:

  • правильно — site.ru/razdel/chto-takoe-chpu/
  • неправильно — site.ru/category_id=2/?page_id=12/

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

На всех страницах сайта используйте навигационные цепочки (хлебные крошки) это поможет пользователям и поисковым системам легко ориентироваться на сайте.

§ 3. Число страниц сайта


Размер страниц сайта должен быть столько, сколько потребуется по содержанию. Для одной страницы сайта достаточно 1000 знаков. Страницы сайта не должны быть перенасыщены текстом. Чтобы найти необходимую информацию на странице перенасыщенной текстом пользователю потребуется слишком много сил и временных затрат. Большинство пользователей считают, что поиск информации в огромном объеме текста не стоит затраченного на это времени. Поэтому следует придерживатьсяоптимального размера текста на странице.

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

СКОЛЬКО ДОЛЖНО БЫТЬ ВНУТРЕННИХ ССЫЛОК СО СТРАНИЦЫ САЙТА?

Определение количества ссылок на странице должно подчиняться следующим закономерностям:

  • Если вы хотите продвинуть страницу в ТОП выдачи, то облегчить это попадание позволит перераспределение ссылок в пользу нужных страниц.
  • Если вам нужно увеличить число ссылок на конкретную страницу можно, к примеру, проставив ссылку в сайдбаре или футере или еще какой-то подобной части - мы тем самым создадим «сквозную ссылку» и передадим на ту страницу, на которую ведет эта ссылка, часть веса со всех страниц ресурса (сайдбар ведь будет отображаться на всех страницах).
  • Если же нужно увеличить вес каждой внутренней ссылки , то необходимо уменьшить их количество, например, убрать лишние виджеты (блок «Лучшие статьи», облако тэгов, самые популярные статьи и т.д.) и т.д.

Какой размер статьи на сайте должен быть для эффективного продвижения?

  • Примерный размер статьи для эффективного продвижения должен быть 2500-3000 символов без пробелов. При этом текст статьи сайта должен быть разбавлен картинками, причём картинки нужно вставлять в текст статьи, а не за её пределами.
  • Чем больше страниц на вашем сайте проиндексировано поисковыми системами, тем больше трафика ваш сайт может получать с поиска.

Почему полезно и нужно ежемесячно увеличивать количество страниц на сайте?

Публикуя на своём сайте уникальную, актуальную и интересную для целевой аудитории информацию о своей деятельности Вы:

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

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

Навигационные компоненты включают в себя:

1. Глобальная навигация;

2. Локальная навигация;

3. Вспомогательная навигация;

4. Фильтры категорий, ценовых границ и т. п.;

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

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

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

Главная страница→ Раздел→ Подраздел→ Текущая страница.

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

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

виды навигации

Виды навигации можно выделять исходя из двух критериев: функционального и визуального.


По функциям система навигации делится на следующие виды:

  • Языковая - навигация, отвечающая за языковой интерфейс и отображение контента на выбранном пользователем языке.
  • Основная - это наиболее важные разделы сайта, как правило меню.
  • Глобальная - это те ссылки, которые должны быть видны с любой страницы сайта, например ссылка на главную.
  • Рекламная - ссылки для привлечения посетителей на рекламные страницы сайта с расположением товаров и услуг.
  • Тематическая - навигация по страницам сайта одной определенной тематики (рубрики).
  • Текстовая - гиперссылки из текста на странице. С точки зрения юзабилити, они нужны для направления пользователя к упомянутому в тексте материалу. С точки зрения оптимизации - это грамотная перелинковка сайта.
  • Указательная - по-другому, справочная. Гиперссылка указывает, в какой области сайта сейчас находится посетитель.
  • Географическая - используется на сайтах, где имеются разделы, посвященные разным странам.

По визуальному оформлениювыделяют следующие виды навигации:

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

Не забывайте написать ваш комментарий, понравилась ли статья. От вас пару слов, а мне - признание поисковых систем, что пишу нормальные человеческий статьи. Заранее спасибо вам!

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

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

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

Схема навигации по сайту

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

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

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

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

Панели ссылок

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

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

Макетирование веб страницы

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

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

Браузеры

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

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

Ограничения, связанные с аппаратными средствами

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

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

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