Основные элементы веб-страницы и их реализации.

• Логотип.

• Цитаты.

• Посты, их оформление.

• Заголовки, их оформление.

• Выделение другим цветом.

• Исправленные данные.

• Навигации

  • Основная

  • Вспомогательная

Реализация логотипа

Реализация логотипа, если он в формате - GIF, PNG8, JPG/JPEG, используем следующие варианты:

Вариант 1.

HTML:

<span class="logo">some logo text</span>

<strong class="logo">
    <a href="#">some logo text</a>
</strong>

<strong class="logo">some logo text</strong>

<h1 class="logo">some logo text</h1>

CSS:

.logo {
    width:110px;
    height:110px;
    background:url(../images/logo.gif);
    text-indent:-9999px;
    overflow:hidden;
    margin:0;
}
.logo a{
     display:block;
     height:100%;
}

Вариант 2.

HTML:

<h1>
    <a href="#" class="logo">some logo text</a>
</h1>

<h1 class="logo">some logo text</h1>

<strong class="logo">some logo text</strong>

CSS:

.logo {
     width:110px;
     height:110px;
     background:url(../images/logo.gif);
     text-indent:-9999px;
     overflow:hidden;
     margin:0;
 }

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

Вариант 1.

HTML:

<h1 class="logo">
    <a href="#">some logo text</a>
</h1>

<h1 class="logo">some logo text</h1>

<strong class="logo">some logo text</strong>

CSS:

.logo {
    width:110px;
    height:110px;
    background:url(../images/logo.png);
    text-indent:-9999px;
    overflow:hidden;
    margin:0;
}
.logo a{
    display:block;
    height:100%;
    position:relative;
}

Вариант 2.

HTML:

<h1>
    <a href="#" class="logo">some logo text</a>
</h1>

<h1 class="logo">some logo text</h1>

<strong class="logo">some logo text</strong>

CSS:

.logo{
    width:110px;
    height:110px;
    background:url(../images/logo.png);
    text-indent:-9999px;
    overflow:hidden;
    margin:0;
}
a.logo{
    cursor:pointer;
}

В случае отсутствия h1 в логотипе — margin:0; писать не нужно.

В случае, если вместо h1, используется strong — необходимо добавить display:block;.

ВАЖНО

1. В случае, если вы используете кликабельный PNG24 логотип со свойством position:absolute - используйте "Второй вариант" реализации, при этом position:absolute; необходимо задавать не на <a>, а на родительский элемент (strong или h1).

2. ВСЕГДА в html записывайте ВЕСЬ текст логотипа, изображенный на дизайне лого.

Вверх

Цитаты

• blockquote

• cite

• q

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

<blockquote cite="http://developer.mozilla.org">
    <p>This is a quotation taken from the Mozilla Developer Center.</p>
</blockquote>

HTML-элемент <cite> Представляет из себя ссылку на источник цитаты. Он должен включать в себя источник цитаты, название произведения или автора цитаты, или URL.

<p>More information can be found in <cite>[ISO-0000]</cite>.</p>

HTML-элемент <q> для выделения коротких цитат в предложениях. Текст внутри этого тега автоматически обрамляется кавычками.

<p>According to Mozilla's website,
  <q cite="https://www.mozilla.org/en-US/about/history/details/">
      Firefox 1.0  was released in 2004 and became a big success.
  </q>
</p>

Результат:

According to Mozilla's website, "Firefox 1.0 was released in 2004 and became a big success."

Тут атрибут cite - имеет URL, указывающий на исходный документ или сообщение, откуда была взята цитата. Этот атрибут предназначен для того, чтобы сослаться на информацию, объясняющую контекст, или ссылки, из которых была взята цитата. Глобальный атрибут - cite - может быть использован у blockquote и q.

Вверх

Посты, их оформление.

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

Записи важны для SEO. Поэтому их необходимо выделять смысловыми элементами/тегами. Нужно делать например так:

дата — это em.date

автор — это strong.author

тег — a.tag

Вверх

Заголовки, их оформление.

Если необходим div для форматирования заголовков используйте класс .heading:

<div class="heading">
     <h2>text</h2>
</div>

Допускаются и другие имена если класс .heading уже использован выше по дереву документа.

Подробнее тут.

Вверх.

Выделение другим цветом(mark или span)

Если в тексте или в текстовых блоках есть некоторые элементы, которые выделены другими цветами и эти элементы не ссылки, тогда можно использовать тег mark или span c подходящим классом :

<p><a href="#">Lorem</a> ipsum dolor <span class="mark">sit</span></p>

<p><a href="#">Lorem</a> ipsum dolor <mark class="mark mark-something">sit</mark></p>

Вверх

Исправленные данные

Чтобы показать иcправленные данные, например, измененные цены в магазинах, используются теги <del>(для старой версии) и <ins>(для новой).

Тег <del> используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны. Браузеры обычно помечают текст в контейнере <del> как перечеркнутый.

Тег <ins> предназначен для выделения текста, который был добавлен в новую версию документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны. Браузеры обычно помечают текст в контейнере <ins> как подчеркнутый.

Вверх.