Разработка сайтов для СРО

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Создание и раскрутка сайтов в Интернете

Что нужно для SEO?

Текст & Всемирная Паутина

Инструмент веб-строителя

HTML - язык гипертекста

CSS - каскадные таблицы стилей

Поисковая оптимизация

Что такое раскрутка сайта?

Контекстная реклама

Что такое обмен ссылками?

Почтовые рассылки

Соблюдайте правила

Что препятствует рейтингу?

Что такое CMS?

Краткий словарь терминов

Полезные книги

Карта сайта

Этапы создания сайта

Десять важных шагов

Разработка семантического ядра

Обновление информации

Заголовки

Проверка ссылок

Проверка ошибок в коде

Шрифтовое оформление

Навигация по сайту

Метаданные

Выбор кодировки

Ключевые слова

 
Разработка сайтов под ключ

Ссылки по теме

Blogger: Создайте блог БЕСПЛАТНО

WordPress: Платформа для ведения блога

Online-переводчик :: Компания ПРОМТ

Поисковая оптимизация – все дело в написании текстов

Стратегия продвижения сайтов

Новые исследования поискового поведения пользователей

Орфографические словари

Словарь русских синонимов Абрамова

Орфографический словарь Лопатина

Современный словарь иностранных слов

Толковый словарь русского языка Ожегова

Архивы форума "Говорим по-русски"

FAR — программа управления файлами и архивами

FCKEditor - текстовый редактор для браузера

NotPad++ - текстовый редактор

PSPad — текстовый редактор

UltraEdit-32 - текстовый редактор

Nvu - HTML редактор

CoffeeCup - HTML редактор

 

Разработка сайтов в XHTML

Главная « Статьи « Разработка сайтов в XHTML

версия для печати

Oтделение структуры сайта от дизайна

Oтделение структуры сайта от дизайна…


внимание!

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

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

 
Создание кода с учетом логики, а не стиля

Создание кода с учетом логики, а не стиля…

Запомните: насколько это возможно, используйте CSS для разметки страницы. В мире Web-стандартов код XHTML используется не для оформления внешнего вида, а для формирования структуры документа.

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

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

Конечно, не любой сайт может отказаться от использования табличной HTML-разметки. Изобретатели CSS W3C не спешили переводить свой сайт на CSS-разметку до декабря 2002 года.

Кроме того, даже самые ярые приверженцы стандартов не всегда в состоянии отделить структуру от оформления, по крайней мере не в XHTML 1.

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

 
Ограниченная иерархией структура

Ограниченная иерархией структура…

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

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

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

Код:
<h1>Заголовок</h1>
<р>Введение</р>
<h2>Подзаголовок</h2>
<р>Текст</р>

Старайтесь избегать использования устаревших HTML-элементов, например тегов <font> или бессмысленных элементов <br />, для имитации логической структуры там, где ее нет.

Например, не пишите так:

Код:
<font size="5">Заголовок</font><br />
Введение <br /><br />
<font size="4">Подзаголовок</font><br />
Текст<br />
 
Используем элементы согласно их значению, а не внешнему виду

Используем элементы согласно их значению, а не внешнему виду…

Некоторые имеют обыкновение помечать текст тегом <h1>, когда хотят сделать его покрупнее, или используют тег <li>, когда хотят добавить перед текстом маркер. Мы привыкли, что <h1> означает крупный шрифт, <li> - маркер, a <blockguote> - отступ.

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

Код:
<h1>Это главный заголовок, вернее, он был бы таким, если бы я структурировал свой текст.</h1>

<h1>Это не главный заголовок, но я хотел, чтобы он был такого же размера, как и главный заголовок. Кроме того, я не умею работать с  CSS.</h1>

<h1>A это вообще не заголовок. Но я очень хотел, чтобы весь текст на странице был одного размера. Если бы я знал о CSS, я бы смог добиться этого без пожертвования структурой документа.</h1>

Игры кончились, пора начать использовать элементы по их назначению, а не по внешнему виду. На самом деле <h1> может выглядеть, как вы того захотите.

Например, в CSS тег <h1> может быть мелким, текст с тегом <р> может быть крупным и полужирным, <li> может не иметь маркера (или же может вместо него использовать изображение в формате PNG, GIF или JPEG) и так далее.

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

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

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

В совместимых с CSS браузерах при желании можно сделать, чтобы заголовки всех шести уровней (<h1>-<h6>) выглядели одинаково:

Код:
h1, h2, h3, h5, h6 {
  font-size: 12px;
  font-family: Tahoma, Verdana, arial, geneva, Helvetica, sans-serif;
  font-weight: normal;
  color: #e16516;
}

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

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

 
Предпочтение структурных элементов бессмысленному коду

Предпочтение структурных элементов бессмысленному коду…

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

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

Код:
Пункт списка<br />
Еще один пункт<br />
Следующий пункт<br />

Вместо этого можно использовать такой код:

Код:
<ul>
   <li>Пункт списка</li>
   <li>Еще один пункт</li>
   <li>Следующий пункт</li>
</ul>

«Но <li> добавляет маркер, а мне он не нужен!» - можете возразить вы. Ответ на такое возражение очень прост: CSS отображает структурные элементы так, как вы скажете ему.

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

Поэтому используйте элемент <li> для создания списков. Также предпочитайте <strong> тегу <b>, <em> тегу <i> и так далее.

По умолчанию большинство браузеров отобразит <strong> как <b>, a <em> как <i>, что создаст желаемый визуальный эффект без ущерба для структуры документа.

Пока еще мне не попадался браузер, отображающей <strong> иначе, чем полужирным (конечно, если сам дизайнер не захочет этого). Если же вы волнуетесь, что вдруг попадется какой-нибудь странный браузер, отображающий <strong> по-своему, можно использовать следующее правило CSS:
Код:
strong {
   font-weight: bold;
   font-style: normal;
}

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

 
Визуальные элементы и структура

Визуальные элементы и структура…

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

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

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

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

  • Ответ на второй вопрос - визуальные элементы вроде навигационного меню не обязательно следует структурировать в смешанной, переходной разметке. Если разметка имеет четкую структуру, корректный код XHTML и CSS, обеспечена доступность - то вы достигли всех переходных стандартов совместимости и вам нечего будет стыдиться.

 
Анонс следующей статьи

Анонс следующей статьи…


внимание!

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

 
Дата: 20.06.2007 | Автор: Коровенков Юрий

Обсудить на форуме…

 
Valid XHTML 1.0! Valid CSS!
Как устроены поисковые системы?

Облик поисковиков

Поисковые системы

Индекс поисковой системы

Полнотекстовый поиск

Учет морфологии

Релевантность

Методы регистрации

Индекс цитирования

 
Заголовки разделов текущей страницы…

Оглавление

Создание кода с учетом логики, а не стиля…

Ограниченная иерархией структура…

Используем элементы согласно их значению, а не внешнему виду…

Предпочтение структурных элементов бессмысленному коду…

Визуальные элементы и структура…

Анонс следующей статьи…

 

Статьи на тему SEO

Статьи на тему SEO

Как управлять индексированием?

Разработка хорошей навигации на Web-сайте

Правильное использование элементов фраз

В защиту подчеркивания ссылок!

Два подхода в создании макетов web-страницы

Как повысить эффективность баннеров?

Оформляем сайт с учетом интересов пользователя

Поисковые машины и метаданные

Структура и метаструктура в XHTML

Смешанная разметка и компактный код в XHTML

Макеты Web-страниц на основе табличной HTML-разметки

Раскрутка сайтов в Интернете

Раскрутка сайта начинающего Web-мастера

Как правильно оформлять текст на сайте?

Десять причин перехода на XHTML

Фундаментальный принцип юзабилити

Применение XHTML-списков для навигации

Технологии маркетинга поисковых машин

Контентная оптимизация под поисковые машины

Разработка семантического ядра поисковых запросов

Теория оптимизационной структурной HTML-разметки

Честные технологии поисковой оптимизации сайтов

SEO-текст — поплавок для сайта

Как составить файл robots.txt?

Навигация и структура информации на сайте

Правильный подход к созданию корпоративного сайта

Что такое веб-дизайн?

Реклама и PR в Интернете

Аналитика посещаемости сайтов в Интернете

Как привлечь целевых посетителей на сайт?

Как бесплатно разместить пресс-релиз компании?

 

NotPad++ - текстовый редактор…

 

наверх

 
Контактная информация

Пишите:
Звоните: + 7 (916) 597-36-78

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Copyright (©) 2004— by Yuriy Korovenkov