Только проверенные методы заработка в сети

html памятка webmaster-а, теги и синтаксис

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

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

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

Содержание:
Ссылки и Якоря – синтаксис тега <a> и его атрибуты
Особенности создания таблиц в html
Вставляем картинки в контент своего сайта

Начнем с ссылок, Это тег <a> и его атрибуты

<a href=”URL”>…</a> – ссылка
<a name=”идентификатор”>…</a> – якорь

Атрибуты:
- target – имя окна или фрейма, куда браузер будет загружать документ. Может принимать следующие значения:
* _top — открытие документа в текущем окне;
* _blank — открытие документа в новом окне;
* _self — открытие документа в текущем фрейме;
* _parent — открытие документа в родительском фрейме.

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

- title – Добавляет всплывающую подсказку к тексту ссылки
- rel – Использую если необходимо запретить передачу веса с сайта – другому сайту, который указан в url ссылки, rel=”nofollow” (т.е этот атрибут указывает отношения между ссылаемым и текущим документами)
- href – собственно сама ссылка, т.е. адрес документа, на который следует перейти
- name – устанавливает имя якоря внутри документа, данный атрибут полезен, когда необходимо перейти на определенное место html странички, например, Вы хотите попасть в начало или конец документа, для этого просто пропишем в начало статьи такой якорь
<a name=”begin”></a>, а в конце <a name=”end”></a> – визуально эти инструкции не видны, Но теперь Вы можете ссылаться на эти места в ссылке, вот так:

<a href="#begin">Наверх</a>

или

<a href="url#end">Вниз</a>

Как видно из примеров, ссылка на закладку начинается символом #. С помощью этого атрибута можно перенаправлять не только на нужную страницу, но и на определенную ее часть.
Где это может быть полезно? Например, Вы сделали FAQ по какой-то теме, Все на одной странице с разными заголовками в момент публикации цепляете к каждому заголовку по закладке, так

<a name="header-first"></a>

итп, теперь вначале FAQа делаете содержание, в ссылках заголовков указываете закладки для каждого пункта – Все!

Немного о особенностях создания таблиц в html

Table – тег для создания таблицы. Строки и колонки в таблице задаются с помощью тегов tr и td соответственно.

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

Атрибуты:
- align – выравнивание таблицы.
- background, bgcolor – фоновый рисунок и цвет фона таблицы.
- border, bordercolor – толщина и цвет рамки таблицы.
- cellpadding – отступ от рамки до содержимого ячейки.
- cellspacing – расстояние между ячейками.

Синтаксис:

1
2
3
4
5
6
7
<table>
<tbody>
<tr>
<td>...</td>
</tr>
</tbody>
</table>

Рассмотрим примеры создания двух таблиц:

1ая – ячейка объединяет несколько строк

1 кол 2 кол 3 кол
Объединение 3х столбцов

Код:

8
9
10
11
12
13
14
15
16
17
<table width="0" border="1" cellspacing="0" cellpadding="5" align="center">
  <tr>
    <td>1 кол</td>
    <td>2 кол</td>
    <td>3 кол</td>
  </tr>
  <tr>
  <td colspan=3>Объединение 3х столбцов</td>
  </tr>
</table>

2ая – ячейка объединяет несколько столбцов

Объединение
2х строк
1 кол 2 кол
1 кол 2 кол
1 кол 2 кол 3 кол

Код:

18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<table width="0" border="1" cellspacing="0" cellpadding="5" align="center">
  <tr>
    <td rowspan="2">Объединение <br />2х строк</td>
    <td>1 кол</td>
	<td>2 кол</td>
  </tr>
  <tr>
    <td>1 кол</td>
    <td>2 кол</td>
  </tr>
    <tr>
	<td>1 кол</td>
    <td>2 кол</td>
    <td>3 кол</td>
  </tr>
</table>

Атрибуты для табличного тега <td> – rowspan и colspan
<td rowspan=2> – Ячейка, захватывающая две строки</td>
<td colspan=2> – Ячейка, захватывающая два столбца</td>

Пример создание шаблона для сайта с помощью табличной верстки:

Шапка сайта
Навигация и различные
меню сайта
Основной контент сайта
Копирайт сайта

Код:

34
35
36
37
38
39
40
41
42
43
44
45
<table width="0" border="1" cellspacing="0" cellpadding="5" align="center">
   <tr>
    <td colspan="2">Шапка сайта</td>
  </tr>
 <tr>
    <td width="30%">Навигация и различные<br /> меню сайта</td>
    <td>Основной контент сайта</td>
  </tr>
  <tr>
    <td colspan="2">Копирайт сайта</td>
  </tr>
</table>

Вставляем картинки в контент своего сайта

Для вставки изображений (gif, jpeg или png формата) в html страницы служит тег <img alt=”” />.

src – обязательный атрибут, для указания адреса рисунка.

Другие атрибуты:
- align – выравнивание рисунка и обтекание его в тексте.
- alt – название рисунка, как выше уже было сказано для seo или же если пользователь отключил в браузере картинки.
- border – толщина рамки изображения.
- hspace – отступ по горизонтали от контента.
- vspace – отступ по вертикали от контента.

Пример использования:

<img src="URL" alt="описание изображения, название рисунка" />

Помните, по стандарту xhtml все одиночные теги имеют в конце слеш. Пример: <br />, <img alt=”” />

P.S.>>
На этом пока все! Поделитесь с нами Вашими дополнениями к памятке в комментариях.

- Хороший сайт по всем элементам html языка – htmlbook.ru

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

ВК комментарии

Комментарии на статью: “Html – памятка для webmastera”

  1. Артёмка-SofT

    1 марта 2012

    Отличная статья, напиши еще что такое DIV контейнеры

    [Ответить]

  2. admin

    15 марта 2012

    Использование div блоков для верстки я подробно, с примерами, описал в статье: “Способы скругления углов у div-блоков” Здесь – http://pravdabiz.ru/2011/05/24/tri-metoda-skrugleniya-uglov-u-elementov-sajta/

    [Ответить]

Комментарий RSS · Обратная ссылка URI

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

Имя: (обязательно)

E-mail: (обязателен - не публикуется)

Сайт:

Комментарии:

*