www.ABC-Color.com
Онлайн раскраски на разные темы
Справка

Самоучитель HTML5

Создание веб страницы.
Статья написана практично коротко, не отвлекаясь на разные специфики и историю.

Ссылка в HTML

Ссылка основной элемент серфинга в интернете.

Синтаксис.

<A> </A> - тег указывающий, что содержимое является ссылкою.

Содержимым может быть разные объекты, в основном это текст или изображения.

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

Что бы тег заработал, как ссылка, нужно прописать атрибут, указывающий на тип ссылки.

Ссылка на внешний документ.

href - атрибут указывающий адрес документа, для перехода по ссылке.

URL - сокращенная запись, указывающая, что в этом месте вставляем нужный вам адрес в интернете. Аббревиатура служит стандартизированным способом записи адреса ресурса в сети Интернет.

a href="URL"

URL отображается в окне поиска, и при наведении мыши в серой полосе в левом угле окна.

Ссылка в HTML abc-color.com/spravka/html-link.shtml Ссылка с этой интернет страницы на раздел справки. abc-color.com/spravka/index.shtml.

Наведя курсор мыши на URL адрес в окне поиска или на ссылку в интернет странице, вы можете скопировать, а потом вставить URL адрес. Для этого наведя курсор мыши на ссылку, нажмите клавиши "Ctrl" + "С" или кликнув правою клавишею мыши и в открывшемся меню кликните на пункт "Копировать". Что бы вставить адрес кликните на место вставке в вашем текстовом редакторе и нажмите клавиши "Ctrl" + "V" или кликнув правой клавишею мыши, кликните на пункт в открывшемся меню "Вставить".

Абсолютная ссылка.

Используют полный интернет адрес файла. Этот адрес называют URL файла. Нам известен он как адрес в всемирной паутине www.
Он не зависит от места расположения файла на котором написана ссылка.

Наведу примеры записи адреса сайта на котором вы находитесь.

A. Полная запись ссылки.
<a href="http:⁄⁄abc-color.com/index.shtml">Мой сайт</a>
http:⁄⁄abc-color.com⁄index.shtml

Б. Файл "index" открывается по умолчанию, его можно не записывать в конце ссылки.
Рекомендуется всегда в папках и подпапках, создавать файл с названием "index", что-бы при удалении части ссылки, сайт все-равно открылся.

<a href="http:⁄⁄abc-color.com⁄">Мой сайт</a>
http:⁄⁄abc-color.com⁄

В. Можно и без последней косой черточки
<a href="http:⁄⁄abc-color.com⁄">Мой сайт</a>
http:⁄⁄abc-color.com

Г. http - информирует, как текст интернет страницы нужно прислать до вас.
Можно не указывать, браузер сам доставить нужный протокол передачи веб страницы.
<a href="⁄⁄abc-color.com">Мой сайт</a>
⁄⁄abc-color.com

Если файл находится в папке на сайте, добавляем название папки через косую черточку.
<a href="http:⁄⁄abc-color.com/spravka/html-link.shtml">Это адрес страницы на которой вы находитесь.</a>

Когда в адресе в начале стоит одна черточка, сервер автоматически добавляет адрес корня сайта, по этому вариант с одной черточкою будет работать только с файлов расположенных на компьютере.
<a href="http:⁄⁄abc-color.com">Мой сайт</a>
⁄www.abc-color.com

Относительная ссылка.

Относительно файла с ссылкою.

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

Что бы написать адрес ссылки, нужно указать браузеру куда идти от файла на котором прописана ссылка:

Если ссылаемся на объект, в той же папке на диску, что и файл со ссылкою.

<a href="name-file.html">Следующая страница.</a>

Если ссылаться на объект, находящийся рядом в папке. (Папку для примера назовем папку "img" а файл картинку "image.png")

<a href="img/image.png">Смотрите картинку.</a>

Если ссылаться на объект, находящийся рядом в папке на глубине нескольких папок.

<a href="img/My/summer/image.jpeg">Моя летняя фотография.</a>

Если ссылаться на объект, находящийся в папке на несколько уровней ввыше.

<a href=".../.../index.html">Главная страница</a>
Относительно корня сайта.

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

<a href="">Мой сайт</a>
Мой сайт

<a href="⁄index.shtml">Мой сайт</a>
Мой сайт

<a href="⁄spravka">Справка</a>
Справка

<a href="⁄spravka/sayt.shtml">Про сайт</a>
Про сайт

Ссылка на внутреннее содержимое страницы. Якорь.

id - Идентификатор наддающий элементу уникальное имя, для наделения его определенными свойствами.

Якорь - это закладка внутри страницы, которую можно указать в качестве цели для ссылки.

Пример кода:

<!DOCTYPE HTML><html lang="ru"><meta charset="utf-8"><title>Списки</title>
<p>Это содержание нашей страницы. Кликните по ссылке в меню и страница преставиться на место где стоит текст раздела. В других вариантах может быть изображение, музыка, видео и т.д.</p>
<figure>
<ul>
<li><a href="#r1">Синтаксис.</a></li>
</ul>
<figure>
<ul>
<li><a href="#r2">Ссылка на внешний документ.</a></li>
</ul>
<figure>
<ul>
<li><a href="#r3">Абсолютная ссылка.</a></li>
<li><a href="#r4">Относительная ссылка.</a></li>
</ul>
</figure>
<ul>
<li><a href="#r5">Ссылка на внутреннее содержание страницы. Якорь.</a></li>
<li><a href="#r6">Содержимое ссылки.</a></li>
</ul>
</figure>
</figure>
...
<a id="r1"></a>
<h2>Синтаксис.</h2>
...
<a id="r2"></a>
<h3>Ссылка на внешний документ.</h3>
...
<a id="r3"></a>
<h4>Абсолютная ссылка.</h4>
...
<a id="r4"></a>
<h4>Относительная ссылка.</h4>
...
<a id="r5"></a>
<h3>Ссылка на внутреннее содержание страницы. Якорь.</h3>
...
<a id="r6"></a>
<h3>Содержимое ссылки.</h3>
...

Пример:

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

Содержимое ссылки

До ссылки можно добавить всплывающею подсказку.

<a href="⁄spravka"title="Содержание всех разделов справки">Справка</a>
Справка

Ссылка file: ///D:/... Краткая информация, размещена в разделе справка. Содержание всех разделов справки

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

<a href="URL" rel="Имя атрибута">Текст ссылки</a>

rel="nofollow" - Коммерческая ссылка. Указывая этот атрибут, просим поисковик не связывать нашу интернет страницу и весь сайт, с этой ссылкой. А так-же не подымать рейтинг сайта на который ссылается эта ссылка. Часто атрибут ставят на ссылки в комментариях посетителей сайта, что-бы уменьшить спам в ссылках и не потерять рейтинг страницы.

rel="author" - используется для ссылки на страницу с информацией об авторе. Например: его страница в социальной сети, контактные данные или Email адрес.

rel="license" - ссылается на авторскими права, согласно которым предоставляется текущие содержание документа.

Ссылкою может быть изображение.
Для этого вставляем адрес изображения или его код в место текста. Как вставить картинку рассмотрим в следующем разделе.