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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что такое CMS?

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

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

Карта сайта

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

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

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

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

Заголовки

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

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

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

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

Метаданные

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Nvu - HTML редактор

CoffeeCup - HTML редактор

 

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

Главная « Статьи « Структура и метаструктура в XHTML

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

Структура сайта в строгой и смешанной разметке

Структура сайта в строгой и смешанной разметке…


внимание!

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

Я покажу, как писать логичный, компактный код, который может снизить трафик практически на 50%, таким образом ускорить загрузку сайта и снизить нагрузку на сервер.

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

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

Такие проблемы могут появиться и на сайтах, написанных вручную, и на созданных в визуальных редакторах вроде FrontPage, Dreamweaver и GoLive.

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

Мы также познакомимся с идентификатором id и покажем, как с его помощью писать ультракомпактные коды XHTML при создании смешанной или чистой CSS-разметки.

 
Должен ли каждый элемент быть структурным?

Должен ли каждый элемент быть структурным?

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

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

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

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

 
div, id и другие помощники

div, id и другие помощники…

В этой и последующих статьях данного цикла будет часто упоминаться элемент <div> и атрибут id. При правильном использовании <div> является незаменимым помощником при создании структурного кода, тогда как с помощью id вы сможете создавать удивительно компактный код, разумно применять CSS и придавать сайту любую динамику посредством управления объектной моделью документа (DOM).

W3C следующим образом определяет эти и другие элементы HTML/XHTML: Элементы <div> и <span> вместе с атрибутами id и class представляют собой механизм для формирования структуры документа. Элемент <span> указывает на то, что контент должен располагаться в строке, a <div> - в блоках, однако больше никаких ограничений на внешний вид не накладывается. Таким образом, дизайнеры могут использовать эти элементы совместно с таблицами стилей для изменения HTML-кода в соответствии со своими нуждами.


внимание!

Что такое div? «div» является сокращением от «division» (часть, раздел). Когда вы собираете несколько ссылок вместе, это становится одной частью документа. Контент выделяется в другую, заявление об авторских правах - в третью, а нижнее меню страницы станет отдельной частью.

 
Общий механизм для частных структур

Общий механизм для частных структур…

Все HTML-программисты знакомы с общими элементами, такими как тег абзаца <p> или заголовок текста <h1>, но некоторые могут быть не знакомы с <div>. Ключ к пониманию сущности <div> лежит в его определении W3C как «общий механизм для добавления структуры».

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

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

 
id против class

id против class…

Атрибут id не является новичком в XHTML, так же как class или элементы <div> и <span>. Все они происходят из HTML (язык гипертекстовой разметки). С помощью атрибута id можно присвоить элементу уникальное имя.

Каждое имя можно использовать в пределах одной страницы только один раз. (То есть, если на вашей странице есть <div> с «id="content"», она не может содержать другой <div> или элемент с таким же именем.) В свою очередь, атрибут class можно использовать в пределах одной страницы несколько раз. (Например, пять абзацев на странице могут относиться к классу «small».)

Приведенный ниже фрагмент кода поможет понять разницу между class и id:

Код:
<div id="menunav">
  Размещаем компоненты горизонтального меню навигации.
</div>

<div class="blog">
  Размещаем запись блога №1
</div>
<div class="blog">
  Размещаем запись блога №2
</div>
<div class="blog">
  Размещаем запись блога №3
</div>

В этих примерах <div> «id="menunav"» необходим для определения области страницы, содержащей горизонтальное меню навигации, тогда как <div> «class="blog"» можно использовать для определения области страницы под каждую запись блога.

Так как на странице, как правило, имеется только однo горизонтальное меню навигации, для него выбран атрибут id. Но блог может содержать несколько записей, поэтому для него используется атрибут class. Если блог может обойтись без использования элементов <div>, если возможно использовать обычную структуру заголовков и абзацев - так даже будет лучше.

 
Теория стикеров

Теория стикеров…

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

Атрибут id схожим образом помечает определенную область кода, напоминая, что он требует какого-то особенного обращения. Для этого записывается одно или несколько правил в таблице стилей, относящихся к этому id. Например, файл таблицы стилей CSS может содержать особые правила, относящиеся только к элементам с атрибутом «id="menunav"».

Когда атрибут id используется в качестве метки для определенного набора правил CSS, он называется селектор CSS. Есть много способов создать селекторы, в частности использовать id, что очень удобно и гибко.

 
Мощь id

Мощь id…

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

  • в качестве селектора таблиц стилей, что позволяет создавать компактный XHTML-код;

  • в качестве якоря для гипертекстовых ссылок, заменив им устаревший атрибут «name»;

  • для ссылки на определенный элемент основанного на DOM скрипта;

  • в качестве имени объявленного элемента объекта;

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


внимание!

Значение id должно начинаться с буквы или подчеркивания, оно не может начинаться с цифры. Служба проверки кода W3C может и не заметит подобную ошибку, однако анализатор XML ее обнаружит. Также нежелательно использовать символы подчеркивания в именах class или id по причине старых ограничений в CSS и старых браузерах.


внимание!

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

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

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

Теперь, после того как мы обсудили элементы XHTML общего назначения (в частности, <div> и id), давайте попробуем создать меню навигации по сайту, с помощью элемента <div>, имеющего уникальную метаструктурную метку «menunav»:

Код:
<div id="menunav">
  Размещаем компоненты горизонтального меню навигации.
</div>

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

Так как же браузер понимает, где расположено меню навигации?

Давайте вспомним о рассмотренных ранее селекторах CSS - "menunav" как раз и является таким селектором. В правилах CSS указываем, что элемент "menunav" не имеет отступов и полей, - иными словами, он не окружен пустым пространством. Так как первый видимый элемент кода XHTML - это <div> «id="menunav"», совместимые с CSS браузеры поместят его в верхний левый угол страницы.

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

Ниже приведен фрагмент кода:

Код:
<div id="menunav">
   <ul>
      <li><a href="#">раздел №1</a></li>
      <li><a href="#">раздел №2</a></li>
      <li><a href="#">раздел №3</a></li>
      <li><a href="#">раздел №4</a></li>
      <li><a href="#">раздел №5</a></li>
      <li><a href="#">раздел №6</a></li>
      <li><a href="#">раздел №7</a></li>
   </ul>
</div>

А теперь сравните компактность и логичность предыдущего примера с обычным кодом подобной табличной разметки:

Код:
<table width="100%" cellspacing="0" cellpadding="0" border="0">
   <tr>
      <td class="menu">|</td>      
      <td valign="top" align="center"><a href="#" class="menu">раздел №1</a></td>
      <td class="menu">|</td>
      <td valign="top" align="center"><a href="#" class="menu">раздел №2</a></td>
      <td class="menu">|</td>
      <td valign="top" align="center"><a href="#" class="menu">раздел №3</a></td>
      <td class="menu">|</td>
      <td valign="top" align="center"><a href="#" class="menu">раздел №14/a></td>
      <td class="menu">|</td>
      <td valign="top" align="center"><a href="#" class="menu">раздел №5</a></td>
      <td class="menu">|</td>
      <td valign="top" align="center"><a href="#" class="menu">раздел №6</a></td>
      <td class="menu">|</td>
      <td valign="top" align="center"><a href="#" class="menu">раздел №7</a></td>
      <td class="menu">|</td>
   </tr>
</table>

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

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

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

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

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

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


внимание!

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

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

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

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

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

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

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

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

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

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

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

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

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

Оглавление

Должен ли каждый элемент быть структурным?

div, id и другие помощники…

Общий механизм для частных структур…

id против class…

Теория стикеров…

Мощь id…

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

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

 
Статьи на тему 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