Какие основные элементы web страницы. Основные элементы веб-страниц. Разработка информационного наполнения

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

Зачем?

Мы рассмотрим основные принципы создания сайтов (используемая литература: Якоб Нильсен, Михаил Круг).
Обычно основное внимание уделяют дизайну страницы. В браузерах мы видим только одну страницу за один раз. Сам сайт явно не представлен на экране.
Разработка архитектуры сайта сложная задача и имеет значение более важное, чем разработка дизайна страницы.
Обычно попадая на страницу, пользователь уже спустя короткое время понимает, что там можно сделать. Но перенести пользователя на нужную страницу не так просто.

Главная страница сайта

Главная страница это флагман сайта, и ее дизайн должен отличаться от дизайна всех остальных страниц. Конечно, первая и остальные страницы должны быть выдержаны в одном стиле, но есть и различия.
Например:

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

Первая непосредственная цель любой главной страницы ответить на вопросы: “Где я нахожусь?” и “Что делает этот сайт?”
Оба они требуют прямого указания полного имени. Лучше, если и по дизайну будет понятно, какой цели может служить этот сайт для нового пользователя. Для нового пользователя, вероятно, самая важная функция первой страницы это ответ на вопрос “Что же этот сайт делает?”, а для большинства остальных первая страница отправная точка для навигации по сайту.
Первая страница это также место для представления новостей или специальных предложений, которыми вы хотите привлечь внимание всех посетителей.
Возможность поиска необходима на первых страницах, так как многие пользователи не хотят бесконечно ходить по ссылкам, чтобы попасть туда, куда им нужно.
Итак, главная страница должна предоставлять три следующие возможности:

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

Если все это хорошо сделано, то каталог и новости помогут пользователю, пришедшему на сайт в первый раз, понять, о чем же, собственно говоря, этот сайт рассказывает. Всегда смотрите на главную страницу именно под таким углом: она должна отвечать на вопрос: “Что этот сайт может для меня сделать?”. И не забудьте о названии компании и логотипе.

Элементы web-страницы

Основные элементы web-страницы

Заголовок/Логотип (Шапка)
Поиск
Рекламный Баннер
Контент /Содержание (Текстовое поле)
Элементы навигации
Информация о разработчиках сайта
Счетчик посещаемости

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

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

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

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

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

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

Основную часть документа занимает так называемое Текстовое поле - участок, где и размещается смысловое наполнение страницы: содержательный информационный текст и иллюстрации.
Перечисленные элементы еще называют "Контент" (от англ, content - Содержание) .
Расположение текстового поля зависит в первую очередь от того, каким образом web-дизайнер разместит остальные элементы документа.

Следующей обязательной составляющей частью web-страницы являются Элементы навигации - гиперссылки, связывающие данный документ с другими разделами сайта. Элементы навигации могут быть выполнены в виде текстовых строк, графических объектов, то есть кнопок, либо активных компонентов, например Java-апплетов. Последние представляют собой те же кнопки, которые умеют реагировать на движения мыши, выполняя при наведении на них курсора какие-либо несложные действия (включение подсветки, создание эффекта "нажатия", изменение формы и т. д.). Располагать элементы навигации следует таким образом, чтобы они всегда были "на виду", то есть так, чтобы пользователю не приходилось "отматывать" страницу назад, если текстовое поле занимает по высоте несколько физических экранов, после чего подолгу искать ссылки на другие разделы.

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

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

Итак, мы разобрали все основные компоненты web-страницы. Пример компоновки сайта, содержащего набор описанных выше составляющих, показан на Рис. 1 и Рис. 2

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

Рис. 3
Пример компоновки web-страницы с верхним позиционированием элементов навигации

Рис. 4
Пример "смешанной" компоновки web-страницы

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

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

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

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

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

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

Логическая и физическая структура сайта

Каждый ресурс Интернета, от домашней странички до большого информационного портала, содержит несколько тематических рубрик, соединенных между собой гиперсвязями. Как правило, ссылки на все разделы сайта с краткими анонсами их содержимого приводится на первой, так называемой стартовой странице, которой присваивается имя index.htm (.html). Если тематические рубрики содержат собственные подразделы, каждая из них также имеет свою стартовую страницу, называющуюся index.htm.

ПРИМЕЧАНИЕ!

Такое имя файла рекомендуется присваивать всем стартовым документам сайта, поскольку в противном случае при обращении к какому-либо разделу посредством сокращенного URL без указания названия стартовой страницы (например, http://www.mysite.ru/photos/ вместо http://www.mysite.ru/photos/startpage.html) браузер отобразит не саму web-страницу, а перечень хранящихся в данной папке файлов или ошибку.
Подобный набор тематических рубрик с распределенными по соответствующим разделам документами и заранее спроектированными гиперсвязями между всеми страницами ресурса и называется Логической структурой сайта .

Физическая структура подразумевает алгоритм размещения физических файлов по поддиректориям папки, в которой опубликован ваш сайт.
Пример сравнения логической и физической структур одного и того же ресурса Интернета показан на рис. 5

Рис. 5
Сравнение логической и физической структуры сайта

Очевидно, что логическая и физическая структуры могут не совпадать, поскольку в общем случае физическая структура ресурса разрабатывается, исходя из удобства размещения файлов. Однако более или менее точное сохранение порядка следования логических разделов в физической структуре сайта позволит вам избежать путаницы при последующем дополнении и обновлении материалов.
СОВЕТ!
Рекомендуется размещать все графические изображения, являющиеся элементами проекта, в отдельной папке с названием "Images", “img” или “pic”, расположенной в корневой директории сайта. Такой подход позволит обновлять хранящиеся в других тематических разделах документы HTML без переноса графики, использовать одни и те же графические файлы во всех разделах сайта и при необходимости удалять целые директории.
Для того чтобы все гиперссылки на вашей домашней страничке или web-сайте работали корректно, все документы открывались правильно и браузер не выдавал ошибок при обращении к каким-либо разделам ресурса, при создании его физической структуры следует соблюдать несколько простых правил.

Назначайте имена директорий, имена и расширения документов HTML и графических файлов с использованием символов только латинского алфавита и только в строчном регистре .
Старайтесь, чтобы имена созданных вами файлов и директорий не превышали по длине восьми символов .
При присвоении имен файлов документам HTML старайтесь следить за тем, чтобы эти имена были "смысловыми" : впоследствии вы легко можете забыть содержимое и назначение какой-либо web-страницы, если имена файлов будут выглядеть, например, как 1.htm, 2.htm, 3.htm и т. д.

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

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

Названия страниц

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

Во многих из перечисленных ситуаций названия web-страниц рассматриваются в отрыве от основного контекста. Таким образом, необходимо, чтобы названия страниц были достаточно информативными и позволяли правильно судить о характере содержащихся на этих страницах материалов. С другой стороны, слишком длинные названия также неудобны.
Название страницы также можно отнести к разряду информационного наполнения web-пространства. Каждое название должно представлять собой образец четкости формулировки. Автор должен объяснить потенциальному посетителю, какую информацию можно найти на соответствующей странице.
Каждая из страниц должна иметь уникальное название. Представьте себе ситуацию, когда вы посетили, скажем, семь страниц с одинаковыми названиями, а затем пытаетесь вернуться к одной из них, используя список посещенных страниц. Кроме того, серьезные неудобства возникают при создании закладок на несколько различных страниц подобного узла, поскольку при этом меню закладок (избранных страниц) будет содержать несколько идентичных элементов.
И наконец, названия должны быть приспособлены для беглого ознакомления. С этой целью следует помещать наиболее информативные фразы в начало названия, причем предпочтительнее всего начинать название со слова, которое с наибольшей вероятностью будет отражать потребности потенциального посетителя. Весьма часто встречается, когда в качестве названия используются такие фразы, как “Добро пожаловать на узел XXX”. Гораздо лучшим вариантом было бы использование в качестве названия просто “XXX”. Названия не обязательно должны представлять собой законченные грамматические структуры, скорее они должны быть выдержаны в духе рекламных слоганов.
При создании заголовков в Интернете необходимо руководствоваться приводимыми ниже принципами:

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

Каждая страница должна иметь название и в дизайне

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

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

Обратите внимание на пример страницы сотовой компании ЕТК. Вы без труда определите, в каком разделе сайта вы находитесь, название страницы.

Удобочитаемость

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

Фон и текст страницы должны быть оформлены контрастными цветами. Наилучшая разборчивость обеспечивается при использовании черных символов на белом фоне (так называемого позитивного текста). Также хорошо воспринимается белый текст на черном фоне (негативный текст). Несмотря на то, что уровень контрастности в последнем случае аналогичен позитивному тексту, негативная цветовая схема способствует некоторому рассеянию внимания читателя и очень замедляет чтение. Разборчивость еще больше страдает, если цвет текста несколько светлее черного, в особенности, если при этом фоновый цвет несколько темнее белого. Наиболее неудобны для чтения такие цветовые схемы, как розовый цвет на зеленом фоне: эта схема характеризуется слишком низкой контрастностью и, кроме того, не позволяет читать текст пользователям, страдающим нарушением восприятия красного и зеленого цветов.
В качестве фона страницы следует использовать либо однотонный цвет, либо узор, имеющий минимальную контрастность. Фоновые изображения затрудняют распознавание текста глазом человека.
Текст должен быть набран достаточно крупным шрифтом, чтобы его могли читать даже пользователи с ослабленным зрением.
Текст должен быть статичным. Движущийся, мерцающий или изменяющийся в размерах текст воспринимается значительно хуже, нежели статичный.
В большинстве случаев текст должен быть выровнен по левому краю или по ширине. Если начало всех строк находится на одном уровне по горизонтали, чтение текста значительно ускоряется в сравнении с текстом, выровненным по центру или по правому краю. Конечно, выравнивание по правому краю или по центру отдельных небольших фрагментов текста вполне допустимо, однако основной текст должен быть выровнен по левому краю или по ширине.
Аналогично, восприятие списков значительно облегчается при выравнивании первого слова каждого из элементов списка по левому краю вдоль одной линии.
Поскольку современные мониторы имеют сравнительно низкую разрешающую способность, текст, набранный мелким шрифтом, воспринимается значительно лучше при оформлении его с использованием рубленых шрифтов, таких как Verdana. Для четкого отображения засечек шрифта размером 10 пунктов попросту не хватает пикселов. В то же время, большинство людей предпочитает читать текст, набранный шрифтами с засечками, таким образом, мы оказываемся перед лицом своего рода парадокса. Разборчивость должна быть определяющим критерием в случае очень мелких шрифтов (9 пунктов и менее). Такой текст должен набираться с использованием рубленого шрифта.
Не следует набирать текст ПРОПИСНЫМИ БУКВАМИ. Чтение такого текста выполняется примерно на 10% медленнее, чем текста, набранного с использованием строчных букв, поскольку восприятие символов, имеющих одинаковую высоту, затруднено. Этого следует избегать.

Разработка информационного наполнения

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

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

Исследования показали, что чтение текста с экрана монитора происходит приблизительно на 25% медленнее, чем чтение печатного текста. Даже те пользователи, которые не знакомы с результатами подобных исследований, отмечают, что они испытывают некоторые неудобства при чтении информации, представленной в электронном виде. В результате этого люди избегают чтения больших объемов текста с экрана монитора. Таким образом, объем текста следует снижать на 50% (снижение объема на 25% оказывается недостаточным), поскольку в данном случае значение имеет не только скорость чтения, но и удобство восприятия информации. Также известно, что пользователи не любят прибегать к прокрутке, что является еще одной причиной для сокращения объема страниц.

Рисунки и фотографии

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

Уменьшение размера изображения

Традиционным способом создания небольших версий изображений является уменьшение исходного изображения в графическом редакторе. К сожалению, при изменении масштаба изображения уменьшаются настолько, что становятся абсолютно неразборчивыми. Применение кадрирования (обрезки краев изображения) позволяет сохранить детализацию на исходном уровне, однако при этом утрачивается определенная часть содержащейся в изображении информации. Оптимальным выходом в данной ситуации может стать совместное использование обоих указанных методов. Например, для получения уменьшенного образца, размер которого составляет 10% от размера исходного изображения, вначале следует обрезать изображение до 32% относительно исходного текста, расположенного в центре страницы, если в верхнем углу помещен переливающийся логотип.
Анимированные изображения имеют право на существование в web-дизайне, однако в общем случае использование анимации лучше всего ограничивать. Задайте себе вопрос: можно ли достичь той же цели без применения анимации? Если ответ на этот вопрос окажется положительным, избавляйтесь от анимации без малейшего сожаления.
Кроме того, нельзя допускать воспроизведения анимации в бесконечном цикле достаточно, чтобы она воспроизводилась всего несколько раз. Отдельные пользователи полагают, что анимированные изображения выглядят эффектно и являются показателем труда, вложенного в разработку сайта. Тем не менее, большинство пользователей отмечает, что анимация раздражает их. В частности, практически все не переносят движущийся текст и бегущие строки.
Применение анимации имеет семь целей:

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

Описания ссылок

Структурные ссылки или ссылки на элементы навигации. Эти ссылки задают структуру информационного пространства, и по ним пользователь переходит к другим разделам сайта. Типичный пример кнопка возврата на начальную страницу и ссылки на подчиненные страницы.
Ассоциативные ссылки внутри страницы. Чаще всего это подчеркнутые слова в тексте (хотя это могут быть и изображения), указывающие на страницы, где можно найти подробную информацию о слове, играющем роль ссылки.
Списки типа “смотрите также”. Эти ссылки нужны для того чтобы помочь пользователю найти то, что он хочет, но чего нет на данной странице. Учитывая сложность навигации в Интернете, хорошо составленные списки “смотрите также” могут сильно облегчить жизнь пользователю.

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

Заголовки ссылок

Начиная с броузера Internet Explorer 4.0 поддерживается возможность выводить всплывающие подсказки с описанием ссылки. Это помогает узнать, куда приведет ссылка, и улучшает возможности навигации.
Описание ссылки называется заголовком ссылки и его очень легко закодировать.
Если вы поместите указатель мыши в вашем браузере над этой ссылкой, то примерно через секунду появится всплывающая подсказка.
Цель заголовков помочь пользователям предугадать, что произойдет, если они перейдут по ссылке. В качестве заголовка для ссылки можно включать следующую информацию:

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

Заголовки ссылок должны быть меньше 80 символов, но они редко превышают даже 60 символов. Чем короче заголовок, тем лучше.
Кроме того, вы не должны придумывать заголовки для всех ссылок. Если из текста ссылки и контекста понятно, куда она ведет, то ее заголовок только уменьшит удобство использования сайта, так как это будет лишний элемент, на который должен будет посмотреть пользователь. Излишне просто повторять текст ссылки в заголовке.
Не думайте, что заголовок ссылки будет выглядеть одинаково для всех пользователей. На самом деле браузеры с голосовым интерфейсом прочитают заголовок ссылки вслух, а не отобразят ее на экране.
И наконец, имейте в виду, что использование заголовков ссылок не заменяет сами ссылки. Текст ссылки и контекст, в котором она приводится, должны быть понятны, даже если пользователь и не посмотрит на ее заголовок.

Сделайте ссылки цветными

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

Ожидание от перехода по ссылке

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

Структура сайта

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

Сайт из 10 страниц ("визитная карточка" базовый вариант)

Такой сайт может включать в себя до 25 страниц текста формата А-4 и до 50 фотографий (рисунков), выполненных с предпросмотром.
Здесь:

1 - Главная (домашняя) страница;
2 - Прайс-лист;
3 - Фото (каталог) товаров;
4 - Справочная информация;
5 - О фирме;
6 - Офис;
7 - Партнёры;
8 - Вакансии;
9 - Потребности;
10 - Сервисы.

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

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

На каждой веб-странице существует 5 элементов, в которых следует размещать ключевые слова:

Заголовок страницы (тег title)
Ключевые слова страницы (Meta-тег keywords)
Описание страницы (Meta-тег description)
Альтернативный текст для картинок (Alt-тег)
Содержимое веб-страницы (тег body)

Из всех вышеперечисленных элементов веб-страницы самым важным из всех является содержимое страницы (пункт 5). Более подробно об этом далее.

А пока что давайте разберём этот список по порядку.

Элемент №1. Заголовок страницы (тег title)

Сперва рассмотрим заголовок страницы (тег title). Этот элемент самый первый и наиболее важный из всех прочих элементов в блоке head любой веб-страницы.

Заголовок веб-страницы Вы можете наблюдать в самой верхней строке Интернет браузера. Чтобы убедиться в этом, запустите любой браузер, к примеру, Internet Explorer, Opera или Mozilla Firefox, зайдите на любой сайт и сравните содержимое тега title с самой верхней строкой в этих браузерах. Поисковые машины используют этот тег в своих целях – для сбора информации о сайте и определения его тематики, а также используют в результатах поисковой выдачи (SERP) в качестве названия веб-страницы.

Запомните! Заголовок веб-страницы — это её краткое описание.

Помимо вышеперечисленного содержимое тега title используется в качестве названия веб-страницы при добавлении её в Избранное Интернет браузера.

Элемент №2. Ключевые слова страницы (Meta-тег keywords)

Теперь поговорим о Meta-тегах keywords и description. Некоторое время назад Meta-тег keywords использовался при добавлении сайта в индекс поисковых машин. Но эти времена прошли. Теперь поисковые машины просто-напросто игнорируют этот тег, т.к. часты случаи его использования в «грязных» целях. Некоторые поисковые машины обращают внимание на этот тег для определения тематики сайта.

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

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

Элемент №3. Описание страницы (Meta-тег description)

Meta-тег description — ещё один элемент сайта, в котором следует размещать ключевые слова. Поисковые машины просматривают данный тег на предмет наличия в нём ключевых слов, а также сравнивают его содержимое с содержимым самого сайта (содержимым тега body). Очень важным обстоятельством является и то, что поисковые машины используют содержимое тега description в качестве описания веб-страницы в результатах поисковой выдачи (SERP).

Данный тег должен содержать краткое описание веб-страницы, но не более 50 слов.

Элемент №4. Альтернативный текст для картинок (Alt-тег)

Alt-теги представляют собой текстовое описание содержимого картинки, т.е. если по каким-то причинам картинка не грузится, а у этой картинки есть alt-текст, то вместо картинки будет отображаться этот текст.

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

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

Элемент №5. Содержимое веб-страницы (тег body)

Итак, наконец-таки мы добрались до самого основного элемента сайта – тега body, элемента, содержимое которого больше всего интересует Интернет-пользователей. Основные поисковые машины больше не дадут Вам 1 строчку в результатах поисковой выдачи (SERP) только из-за наличия нескольких повторений ключевого слова на странице Вашего веб-сайта. Там сможет оказаться только наиболее релевантная конкретному поисковому запросу веб-страница.

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

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

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

Элементы web-страницы

Первым элементом web-страницы, который нам предстоит рассмотреть, является ее заголовок. Он может быть выполнен как в текстовом, так и в графическом варианте, однако и в том и в другом случае он должен располагаться в верхней части документа. Иногда с заголовком совмещают меню выбора кодировки кириллицы и кнопки для перехода с русскоязычной на англоязычную версию сай- та, если данный web-ресурс представлен на двух языках. Непосредственно подзаголовком документа, как правило, располагается пространство, отведенное для размещения рекламного баннера. Включение баннера именно в верхнюю часть web-страницы в большинстве случаев является обязательным условием регистрации сайта в службах баннерного обмена - системах, рекламирующих созданный вами ресурс в обмен на показ на страницах вашего сайта рекламы других участников баннерообменной сети. Стандартный размер баннеров, публикуемых под заголовком документа, составляет обычно 468x60 точек. Если вы используете статический принцип компоновки страницы, ширина заголовка вашего документа будет составлять приблизительно 640 пикселов: это значение обусловлено, прежде всего, необходимостью обеспечить корректное отображение документа на мониторах с экранным разрешением 640x480 точек и избежать появления горизонтально полосы прокрутки, затрудняющей его просмотр. Очевидно, что ширина баннера в этом случае будет значительно меньше ширины заголовка, благодаря чему в той части страницы, где вы планируете отвести место под рекламу, образуется незанятое пространство, которое можно заполнить логотипом компании-владельца данного сайта или ссылкой на сервер, осуществляющий web-хостинг. Разумеется, логотип необходим далеко не всегда: как правило, он включается в состав web-страницы лишь в случае, если сайт имеет коммерческую направленность.

Основную часть документа занимает так называемое текстовое поле - участок, где и размещается смысловое наполнение страницы: содержательный информационный текст и иллюстрации. Перечисленные элементы еще называют кон-тент (от англ, content - содержание). Расположение текстового поля зависит в первую очередь от того, каким образом web-дизайнер разместит остальные элементы документа.

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

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

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

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

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

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

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

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

ОСНОВЫ WEB-ДИЗАЙНА

Основы Web-дизайна

История развития Интернета. Появление интернета в Беларуси. WEB – дизайна. История возникновения. Требования к дизайну сайта в соответствии со стандартами W3C. Основные браузеры. Структура сайта, дискрипты и тэги.

Internet (англ. Internet, Interconnected Networks - соединённые сети ) – гигантская компьютерная сеть, состоящая из множества соединенных друг с другом меньших по размеру сетей и покрывающая весь земной шар.

История Интернета началась в середине прошлого века: в 1957 году в США было создано Агентство Перспективных Разработок (ARPA), которое занималось военными разработками.

В 1989 году Тим Бернерс-Ли создал язык HTML.

В 1961 году Управление перспективных исследований и разработок Министерства обороны США (DARPA - Defence Advanced Research Agensy) по заданию министерства обороны США приступило к проекту по созданию экспериментальной сети передачи пакетов. Эта сеть, названная ARPANET , предназначалась первоначально для изучения методов обеспечения надежной связи между компьютерами различных типов.

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

В 1973 году через Arpanet впервые «пообщались» компьютеры разных стран. Сеть стала международной.

Развитие сети шло быстрыми темпами. В 1987 году число хостов превысило 10000. В 1988 году к NSFNET подключились Канада, Исландия, Дания, Норвегия, Франция Финляндия и Швеция. В 1989 году число хостов превысило 100000. К сети подключились Великобритания, Япония, Германия, Австрия, Израиль, Италия, Мексика, Новая Зеландия, Нидерланды. Россия подключилась к СЕТИ в 1990 году. Беларусь также в начале 90-х.

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

WEB – дизайна. История возникновения.

Веб-дизайн (от англ. web design) - это визуальное оформление веб-страниц. Он играет такую же роль для сайта, как полиграфический дизайн и вёрстка для бумажного издания. Часто «веб-дизайном» называют веб-разработку: проектирование интерфейса (графическое и текстовое содержание сайта), проектирование структуры, навигации и движка сайта (выделенная часть программного кода для реализации конкретной прикладной задачи).

В настоящее время под термином «веб-дизайн» понимают именно проектирование структуры, идейной целостности Интернет-ресурса, обеспечение удобства пользования Интернет-ресурсом для пользователей. Важной частью проектирование веб-сайтов, является их соответствие стандартам W3C (англ. World Wide Web Consortium, Консорциум Всемирной паутины - организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины), что обеспечивает доступность содержания сайтов для людей с ограниченными физическими возможностями, а также для пользователей портативных устройств.

Также с непосредственно дизайном сайтов смежны маркетинг в Интернете (Интернет-маркетинг), то есть, продвижение и реклама созданного ресурса, поисковая оптимизация

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

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

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

Юзабилити (англ. usability - дословно «удобство пользования», «применимость») - применительно к компьютерной технике термином юзабилити называют концепцию разработки пользовательских интерфейсов программного обеспечения, ориентированную на максимальное психологическое и эстетическое удобство для пользователя.

Требования к дизайну сайта в соответствии со стандартами W3C

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

На сайте должны быть обеспечены удобство и полнота навигационных элементов.

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

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

Приветствуется наличие красивых графических объектов, использование небольших, но стильных графических элементов (пиктограмм, «визуалов») в оформлении страниц сайта.

Приветствуется небольшое включение элементов анимации.

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

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

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

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

Ве́б-обозрева́тель, или бра́узер.

В настоящее время каждый пользователь выбирает для себя «свой» браузер. Наиболее популярными являются Opera и Firefox. За ними идет Internet Explorer (IE).

Ве́б-обозрева́тель, или бра́узер (от англ. Web browser) - это программное обеспечение для поиска, просмотра веб-сайтов, то есть для запроса веб-страниц (преимущественно из Сети), для их обработки, вывода и перехода от одной страницы к другой.

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

Internet Explorer (версия 5.5 и выше):

Opera (версия 7.0 и выше);

Mozilla Firefox (версия 1.0 и выше).

Основной цветовой режим мониторов, на которых должен корректно просматриваться сайт, - 15 разрядов цветов и выше (число цветов 65536 и выше).

Разработка структуры web-проекта

Согласно общей концепции проекта, поставленным целям и задачам определяется структура web-проекта, а именно:

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

§ определение уровня автоматизации обработки данных, разработка структуры управления данными;

§ проводится спецификация форм и порядок их появления;

§ структура пользовательского интерфейса: пункты меню и элементы навигации, необходимые уровни вложенности;

§ разработка эскизов дизайна проекта (количество вариантов утверждается заранее).

Разработка.

§ дизайн: художественное и техническое решение. Создание оригинального стиля сайта: цветовое решение, изготовление элементов оформления, баннеров, графических элементов;

§ программирование: создание программных элементов;

§ pеализация навигации в рамках утвержденной модели проекта;

§ базовое информационное наполнение;

Язык разметки гипертекста HTML

(от англ. Hypertext Markup Language - «язык разметки гипертекста») - это стандартный язык разметки документов во Всемирной паутине. Все веб-страницы создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, удобном для человека.
Вместе с XML, HTML обычно причисляют к «языкам разметки текста». На самом деле роль этих двух языков, как и самого формата под названием «просто текст» («plain text»), выходит далеко за рамки обработки текстовой информации.
Изучение любого компьютерного языка начинается со знакомства с его основными строительными блоками - операторами, выражениями, переменными. С этой точки Зрения язык HTML крайне прост, чтобы не сказать - примитивен: кроме обычного текста, HTML-файл содержит лишь один тип управляющих конструкций, так называемые теги (tags) .

Слова заключенные в угловые скобки “<” и “>” называются HTML - дескрипторами или HTML – тегами.

Основные компоненты Web-страницы

Основная навигационная панель сайта (меню). Альтернативное меню и дублирующее основного меню. Ссылки, виды ссылок и их выполнение. Основные элементы дизайна сайта. Компоновка страницы сайта. Цветовое решение сайта. Оптимизация графики Web, подготовка изображений для Web-страницы. Принципы работы с картинками.

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

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

Несколько основных пунктов меню можно продублировать в альтернативном меню. Если основное горизонтальное – то в вертикальном, или наоборот.

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

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

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

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

Приветствуется наличиедублирующего основного меню внизу страницы.

Основные элементы дизайна сайта.

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

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

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

Главная задача Web-дизайна является создание комфортной атмосферы для усвоения информации на страницах Интернет-сайта.

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

Компоновка Web-страниц сайта;

Графика.

Компоновка страницы сайта.

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

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

Цветовое решение сайта.

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

Для создания эффективного дизайна необходимо учитывать ряд требований налагаемых на выбор цветового решения:

Яркость, тон и насыщенность цвета должны соответствовать фирменному стилю сайта;

Подбор цвета делается с учетом ориентировки на аудиторию этого ресурса;

Количество используемых основных цветов по возможности не должно превышать трех;

Цвета, используемые на сайте должны взаимодействовать и гармонировать между собой;

Употребление цвета должно отвечать элементарным правилам логики;

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

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

Оптимизация графики Web, подготовка изображений для Web-страницы. Принципы работы с картинками.

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

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

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

Среднее время загрузки страниц не должно превышать 30 секунд при скорости соединения 28.8 Кбит/сек. Допускается увеличение времени загрузки отдельных страниц до 35 секунд, но не более чем 30% общего числа страниц сайта. Главная страница должна иметь время загрузки не более 40 секунд

На WEB странице можно использовать графические файлы форматов JPG, GIF и PNG. GIF -специальный сетевой формат: имеет малый размер файла, возможность плавного проявления и анимации, а также эффект прозрачности, позволяющие использовать картинку как "обои" на странице или в таблицах. Но т.к. gif содержит 256 цветную палитру, он неэффективен для хранения фотографий. JPG напротив не имеет ограничений по глубине цвета, но также и возможности анимации. Новый формат файлов поддерживающий и глубину и прозрачность -PNG, имеет недостаток в том, что старые браузеры его не видят. Поэтому, если не брать во внимание пользователей устаревшими программами, пинги вполне можно включать в свои страницы. Чтобы включить в страницу рисунок, надо описать ссылку на него:

где SRC (от s ourc e -источник)= Image -файл в формате gif, jpg или png , содержащий рисунок.
Вы можете задавать взаимное расположение рисунка и текста включением атрибута align = " ":

Возможны следующие типы выравнивания:
align = "middle" - относительно центра строки
align = "left" -текст обтекает картинку справа
align = "right"- то же слева

При использовании выравнивания left или right можно включить в тег img дополнительный параметр отступа вокруг изображения, чтоб картинка не прижималась вплотную к Вашему тексту. Параметр VSPACE="n" - создает отступ по вертикали, а HSPACE="n" - по горизонтали на n пиксел. Таким образом, правильно написанный тег картинки с обтекающим справа текстом будет выглядеть так:

Text.

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

Похожая информация.

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

Что представляет собой Web-страница?

«Перечислите основные элементы Web-страницы» - говорит нам экзаменатор на уроке информатики. Что мы сможем сказать ему в ответ? Прежде всего повествуем о том, что собой представляет веб-страница в принципе.

Согласно общепринятому в среде IT-специалистов определению, это документ, который предназначен для открытия в специализированной программе — браузере, и который содержит данные для отображения на экране компьютера с помощью соответствующего типа ПО различного полезного контента — текстов, ссылок, графики, видео, музыки и т. д. Web-страница — это текстовый документ. Соответствующие данные для браузера представляют собой буквы, цифры и специальные символы, используемые как элементы языка разметки — HTML. Именно с помощью него создатель веб-страницы «объясняет» браузеру, каким образом отображать на экране тот или иной контент.

Место и роль веб-страниц в структуре сайтов

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

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

Принцип задействования гипертекста

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

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

Структура языка HTML: теги

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

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

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

Атрибуты

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

Содержимое

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

Элементы веб-страниц

«Так перечислите основные элементы Web-страницы, наконец!» - повторяет преподаватель. "С удовольствием," — отвечаем мы ему. Что же входит в структуру рассматриваемого типа документов? Условимся, что будем рассматривать данный аспект в именно контексте HTML-элементов веб-страницы. То есть их отображение в браузере — то, что пользователь видит на экране - нас будет интересовать в меньшей степени. Дело в том, что соответствующие HTML-алгоритмы, на основе которых программа отображает контент одинаково, могут быть разными. И в этом особенность языка HTML: нужное изображение на Web-странице можно вывести разными способами. При этом они могут быть как равнозначными с точки зрения трудозатрат создателя веб-страницы способами, так и предполагать разный объем усилий и времени на их осуществление.

Элементы веб-страниц: заголовок

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

Какова специфика заголовка? Располагается он в самой верхней части веб-страницы. В HTML-коде, который формирует заголовок, как правило, предполагается «шифрование» только текста, но при необходимости в соответствующем элементе можно также размещать небольшие графические вставки. И это, собственно, все, что можно сказать о заголовке. Казалось бы, его роль в структуре соответствующего документа незначительна. Но это не так. Заголовки веб-страниц очень значимы с точки зрения индексации сайтов в поисковых системах — Яндексе, Google. Данный элемент должен быть полностью релевантен содержанию веб-страницы, а также тематической специфике сайта.

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

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

Основная часть веб-страницы

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

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

Рассмотрим то, какова специфика некоторых часто используемых HTML-тегов. Собственно, они же и формируют основные элементы веб-страницы.

Базовые HTML-теги

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

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

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

Тег IMG отвечает за обработку браузером картинок. В нем также можно размещать различные атрибуты, регулирующие размер картинки, ее положение на странице.

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

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

Рассказ о ключевых элементах веб-страниц и последующее повествование о средствах их форматирования с помощью языка HTML - примерно таким будет алгоритм нашего ответа на вопрос, который нам задал экзаменатор. Если он обратился к нам, сказав «перечислите основные элементы Web-страницы», то мы, используя соответствующую методологию, будем иметь все шансы раскрыть тему. То есть под термином «элементы» мы можем понимать ключевые компоненты структуры веб-документа, либо типы содержимого — текст, картинки, таблицы, фреймы, ссылки, которые веб-мастер формирует с помощью такого инструмента, как язык HTML.

Специфика инструментов веб-разработки

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

Полезно будет добавить, что веб-разработчик может задействовать в своей работе полноценные языки программирования, такие как, например, Perl, PHP, Java, Python, с помощью которых возможности работы с гипертекстовыми документами становятся еще шире. Необходимость в этом может быть связана с тем, что области применения веб-технологий сегодня — самые разные. Задачи, которые стоят перед современными разработчиками, могут быть достаточно сложными. Например, иногда требуется осуществить перевод Web-страниц, написанных на русском языке, на английский. В этом случае инструментарий разработчика будет самым разнообразным.

Главная » Безопасность » Какие основные элементы web страницы. Основные элементы веб-страниц. Разработка информационного наполнения