Абсолютные и относительные ссылки

Абсолютные ссылки содержат всю информацию, необходимую браузеру для нахождения файла. Абсолютный путь содержит следующие компоненты:
1) протокол (например, http)
2) домен (доменное имя или IP-адрес компьютера)
3) папка (имя папки, указывающей путь к файлу)
4) файл (имя файла)

Относительные ссылки описывают путь к указанному документу относительно текущего. Путь определяется с учётом местоположения веб-страницы, на которой находится ссылка. Относительные ссылки используются при создании ссылок на другие документы на одном и том же сайте. Когда браузер не находит в ссылке протокол http://, он выполняет поиск указанного документа на том же сервере.

Относительный путь содержит следующие компоненты:
1) папка (имя папки, указывающей путь к файлу)
2) файл (имя файла)

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

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

Якоря

Якоря, или внутренние ссылки, создают переходы на различные разделы текущей веб-страницы, позволяя быстро перемещаться между разделами. Это оказывается очень удобным в случае, когда на странице слишком много текста. Внутренние ссылки также создаются при помощи тега <a> с разницей в том, что атрибут href содержит имя указателя — так называемый якорь, а не URl-адрес. Перед именем указателя всегда ставится знак #.

Следующая разметка создаст оглавление с быстрыми переходами на соответствующие разделы:

<h1>Времена года</h1>

<h2>Оглавление</h2>

<a href="#p1">Лето</a> <!--создаём якорь, указав #id элемента-->

<a href="#p2">Осень</a>

<a href="#p3">Зима</a>

<a href="#p4">Весна</a>

<p id="p1">...</p> <!--добавляем соответствующий id элементу-->

<p id="p2">...</p>

<p id="p3">...</p>

<p id="p4">...</p>

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

<th id="about-color">color</th>

<a href="http://html5book.ru/css-shrifty/#about-color" class="site" target="_blank">color</a>

Как сделать ссылку на телефонный номер, скайп или адрес электронной почты

ссылка на телефонный номер	<a href="tel:+74951234567">+7 (495) 123-45-67</a>
ссылка на адрес электронной почты	<a href="mailto:[email protected]">[email protected]</a>
ссылка на скайп (позвонить)	<a href="skype:имя-пользователя?call">Skype</a>
ссылка на скайп (добавить в список контактов)	<a href="skype:имя-пользователя?add">Skype</a>
ссылка на скайп (отправить файл)	<a href="skype:имя-пользователя?sendfile">Skype</a>

HTML изображения

HTML изображения добавляются на веб-страницы с помощью тега <img>.

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

С помощью HTML-тегов <map> и <area> можно делать карты-изображения с активными областями.

Изображения добавляются на веб-страницы при помощи одинарного тега <img>, закрывающий тег не нужен. Так как элемент <img> является строчным, то рекомендуется располагать его внутри блочного элемента, например, <p> или<div>.

Тег <img> имеет обязательный атрибут src, значением которого является адрес встраиваемого изображения, и рекомендуемый атрибут alt, например:

<img src="image.png" alt="Пример кода">

Для тега <img> доступны следующие атрибуты:

alt	Атрибут alt обозначает альтернативный текст для изображения. Выводится на месте появления изображения до его загрузки или при отключенной графике, а также выводится всплывающей подсказкой при наведении курсора мыши на изображение. Принимаемые значения: текст.
crossorigin	Атрибут crossorigin позволяет загружать изображения с ресурсов другого домена с помощью CORS-запросов. Изображения, загруженные в холст с помощью CORS-запросов, могут быть использованы повторно. Допускаемые значения: anonymous — Cross-origin запрос выполняется с помощью HTTP-заголовка, при этом учетные данные не передаются. Если сервер не дает учетные данные серверу, с которого запрашивается контент, то изображение будет испорчено и его использование будет ограничено. use-credentials — Cross-origin запрос выполняется с передачей учетных данных.
height	Атрибут height задает высоту изображения. Принимаемые значения: px/%.
ismap	Атрибутismap означает, что картинка является частью изображения-карты, расположенного на сервере (изображение-карта — изображение с интерактивными областями). При нажатии на изображение-карту координаты передаются на сервер в виде строки запроса URL-адреса. Атрибут ismap допускается только в случае, если элемент <img> является потомком элемента <a> с действительным атрибутом href. Принимаемые значения: ismap.
src	Атрибут src задает URL-адрес изображения. Принимаемые значения: url-адрес.
usemap	Атрибут usemap определяет изображение в качестве карты-изображения. Значение обязательно должно начинаться с символа#. Значение ассоциируется со значением атрибута name или idтега <map> и создает связь между элементами <img> и <map>. Вы не можете использовать этот атрибут, если элемент <map>является потомком элемента <a> или <button>. Принимаемые значения: часть url-адреса.
width	Атрибут width задает ширину изображения. Принимаемые значения: px/%.