Видео-уроки HTML. Часть 9. Ссылки и картинки

Информация о материале: Родительская категория: Программирование; Категория: HTML

Вступление

В этом видео рассказывается про то, как вставлять в HTML-документ картинки и ссылки. Для того, чтобы полностью понять излагаемый материал понадобятся знания из 7-го видео «Абсолютный и относительный путь к файлу». В этом видео рассмотрен конкретный пример с реальными ссылками и картинкой, который поможет понять то, как же устроены сайты в интернете с перекрёстными ссылками из одних документов на другие с этого сайта. А также ссылками на внешние сайты.

Обучающее видео HTML. Часть 9. Ссылки и картинки.

Мы привыкли видеть в интернете картинки, читать тексты и конечно переходить по ссылкам!

Создание ссылок в HTML

Ссылки являются основой гипертекстовых документов и позволяют переходить с одной веб-страницы на другую. Особенность их состоит в том, что сама ссылка может вести не только на HTML-файлы, но и на файл любого типа, причем этот файл может размещаться совсем на другом сайте. Главное, чтобы документ, на который делается ссылка, существовал.

Для добавления ссылки в HTML-документ служит тег <a>.

Для указания того, на какой ресурс ссылается ссылка атрибуту href нужно присвоить значение указателя на этот ресурс.

<a href="/URL ссылки">текст ссылки</a>

Тэг <a> парный и требует закрывающего тега </a>.

Между открывающим и закрывающим тегом вставляется текст, который будет отображён в браузере и по которому можно будет кликнув, перейти по указанному атрибуте href URL.

(англ. Uniform Resource Locator, URL /ˌjuː ɑːr ˈel/)
href = hyper reference - гиперсвязь

Вставка картинок в HTML-документ

Для добавления картинки в HTML-документ служит тег <img> (Image).

Тег <img> одинарный и у него НЕТ закрывающего тега.

<img src="/URL картинки" alt="альтернативный текст">

Для указания того, где лежит картинка атрибуту src нужно присвоить значение указателя на файл этой картинки.

Атрибут alt используется для замены картинки текстом, указанным в этом атрибуте, если картинка не может быть загружена или, например, на устройствах Брайля для слабовидящих и незрячих.

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

Создание HTML-документа с абсолютными ссылками и картинками, расположенными на сторонних сайтах

Перейдём к практике.

Разместим в HTML-документе две ссылки на Яндекс и на Google. Сделаем это в виде немаркированного списка, в качестве элементов этого списка (тег <li>) разместим наши ссылки с полным адресом на главные страницы поисковых систем.

Ниже поместим два логотипа этих поисковых машин в виде картинок, вставив их с помощью тега <img>.

<html>
 <head>
  <title>Абсолютные URL</title>
 </head>

 <body>
  <h1>Абсолютные URL</h1>
  <h2>Ссылки</h2>
  <ul>
    <li><a href="https://www.yandex.ru/">Яндекс</a></li>
    <li><a href="https://www.google.ru/">Google</a></li>
  </ul>
  <h2>Картинки</h2>
  <img src="https://goo.gl/wJTHuN" alt=“Яндекс">
  <img src="https://goo.gl/EoyPPi" alt=“Google">
 </body>
</html>

Если URL картинок указан неправильно, картинка не может загрузиться. И в место картинки в браузере отображается содержимое атрибута alt.

Сохраним этот HTML-документ в файл с названием absolut.html. Он нам ещё понадобится.

Создание первого HTML-документа с относительными ссылками и картинками, расположенными локально

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

В нашем примере будет использована следующая схема расположения файлов по папкам:

В корне лежит файл moonbase.html.

Также в корне лежат две папки: папка docs (с HTML-документами) и папка imgs (с картинкой.)

На этой схеме рассмотрим, как работать с относительными путями к файлам при прописывании URL ссылкам и картинке.

Сверстаем HTML-документ moonbase.html со ссылками на оба документа в папке docs и вставим в него картинку из папки imgs.

<html>
 <head>
  <title>Относительные URL</title>
 </head>

 <body>
  <h1>Файл moonbase.html</h1>
  <h2>Ракета</h2>
  <img src="/imgs/MoonBase.svg" alt="Ракета">
  <h2>Ссылки</h2>
  <a href="/docs/absolut.html">Абсолютные URL</a><br>
  <a href="/docs/relative.html">Относительные URL</a>
 </body>
</html>

Как видно на примере, для того, чтобы правильно написать ссылки на картинку, лежащую в папке imgs и на документы, лежащие в папке docs, нужно указать сначала имя папки, поставить слеш /, а затем имя файла с его расширением.

Для картинки это будет: imgs/MoonBase.svg

Для документов соответственно: docs/absolut.html и docs/relative.html

Сохранив получившийся HTML-документ, откроем его в браузере.

Если картинка существует по указанному URL, то она отобразится.

Также у нас уже есть готовый HTML-документ absolut.html, а значит, кликнув по ссылке «Абсолютные URL» мы сможем его открыть.

Создание второго HTML-документа с относительными ссылками и картинками, расположенными локально

Теперь создадим документ relative.html для иллюстрации того, как использовать относительные пути к файлам.

relative.html лежит в папке docs вместе с файлом absolut.html

Файл moonbase.html лежит уровнем выше, а картинка в соседней папке.

Сверстаем документ relative.html:

<html>
 <head>
  <title>Относительные URL</title>
 </head>

 <body>
  <h1>Файл docs/relative.html</h1>
  <h2>Ракета</h2>
  <img src="/../imgs/MoonBase.svg" alt="Ракета">
  <h2>Ссылки</h2>
  <a href="/absolut.html">Абсолютные URL</a><br>
  <a href="/../moonbase.html">MoonBase</a>
 </body>
</html>

Для того, чтобы указать правильный путь к картинке нам нужно подняться на уровень выше .., поставить /, опуститься в соседнюю папку imgs, снова поставить / и указать имя файла с картинкой MoonBase.svg

Ссылка на файл absolut.html состоит только из одного имени этого файла, т.к. он лежит в той же папке, что и документ из которого мы на него ставим ссылку.

Для того, чтобы поставить ссылку на файл moonbase.html нужно подняться на уровень выше .., поставить / и указать имя файла.

Сохраняем файл и открываем его в браузере.

Если все URL были прописаны правильно, то отобразится картинка, а при клике на обе ссылки, можно будет открыть соответствующие документы.

Заключение

В этой статье рассмотрено, как вставлять картинки и ссылки в HTML-документ.

Если вдруг что-то не получается или непонятно, просмотрите ещё раз 7-е видео «Абсолютный и относительный путь к файлу».

Если всё ясно, то для закрепления материала, создайте HTML-документы с примерами из этого видео с относительными и абсолютными ссылками, а также с картинками.

И как обычно, ссылка на архив с примерами, которые рассмотрены в это статье.

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)