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

Абсолютные ссылки содержат всю информацию, необходимую браузеру для нахождения файла. Абсолютный путь содержит следующие компоненты:
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>

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

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

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

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

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

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

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

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

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

• ⇐ Назад
• 1
• 234
• 5
• Далее ⇒