Ссылки

Тег a (anchor, якорь) — с помощью него создаются гиперссылки на другие страницы, а также переходы внутри страницы. У тега a есть два параметра: href (hypertext reference, гипертекстовая ссылка) и target (цель).

href — обязательный параметр, target — не обязательный.

В параметре href могут указываться относительные и абсолютные пути.

Абсолютная ссылка — полный путь до файла с указанием доменного имени: http://webpanels.spb.ru/apache_php_ustanovka.php

Относительная ссылка — путь относительно файла в котором расположена ссылка: /files/images/picture.png

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

Target указывает куда загрузить страницу по ссылке и может принимать следующие значения:

• _blank — в новое окно,
• _parent — в родительский фрейм,
• _self — в текущее окно,
• _top — отменяет все фреймы и загружает в то же окно,
• framename — во фрейм с указанным именем.

В HTML5 target может использоваться с тегом iframe.

В итоге ссылка выглядит так:

<a href=”/link.html” target=”_blank”>Текст ссылки</a>

Текст ссылок следует делать осмысленным, то есть никаких “Здесь”, “Кликнуть сюда”, “Перейти”. По ссылкам ходят не только люди, но и роботы поисковиков и если люди в состоянии понять из контекста куда ведёт ссылка, то роботы не всегда на это способны. Вы делаете сайт для людей, но и учитываете особенности поисковых роботов.

Также тег a позволяет создавать ссылки на ящики электронной почты и переходы внутри страницы.

Ссылка на почту создаётся с помощью параметра mailto:

<a href="mailto:[email protected]?subject=Hello%20again">Send Mail</a>

В данном случае мы указываем адрес электронной почты и значение поля “Тема”, где во избежание трудностей пробелы заменяем на %20.

Ссылки внутри страницы могут быть использованы для создания блока навигации по странице или для ссылки “наверх”:

<a id="top">Заголовок страницы</a>
<a href=”#top”>Наверх</a>

Для создания ссылки никуда не ведущей, что может использоваться при разработке сайта, используется в качестве якоря символ решётки “#”.

<a href=”#”>Будущая ссылка</a>

Изображения

Для вставки изображений используется тег img (image) со следующими возможными параметрами:

• src (source) — ссылка на файл изображения,
• alt (alternate text) — отображается в случае если картинка не загрузилась,
• height — высота изображения,
• width — ширина изображения.

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

Src, alt — обязательные параметры.

Указатель на изображение выглядит так:

<img src=”/image.png” alt=”Картинка, например.” height=”100” width=”100”>

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

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

Также можно делать ссылки в виде изображений просто заключив тег img в тег a:

<a href=”/link.html”>
 <img src=”/image.png” alt=”Картинка, например.” height=”100” width=”100”>
</a>

Списки

Списки бывают:

• маркированные (ul, unordered list),

1. нумерованные (ol, ordered list).

При создании списка задаётся его тип и затем перечисляются элементы списка (li, list item).

Тег ol также может принимать следующие параметры:

• reversed — определяет направление нумерации,
• start — определяет стартовое значение нумерованного списка,
• type — задает тип списка: 1, A, a, I, i.

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

Пример маркированного списка:

<ul>
 <li>Первый пункт списка</li>
 <li>Второй пункт списка</li>
</ul>

Также существует возможность создавать вложенные списки причём типы списков можно совмещать:

<ul>
 <li>Coffee</li>
 <li>Tea
  <ol>
  <li>Black tea</li>
  <li>Green tea</li>
  </ol>
 </li>
</ul>