Ссылки, изображения и кнопки - Основы веб-разработки - ADivC

Зачем нужны ссылки

Посмотрите на хедер сайта ADC. Видите текст «Наша история»? Это ссылка. Без ссылок интернет был бы набором изолированных страниц. Как книги в библиотеке без каталога. Нашли одну книгу, прочитали, но не знаете, где искать следующую.

Ссылки — это тропинки между страницами. Они превращают разрозненные документы в единую сеть. Именно поэтому интернет называют Всемирной паутиной. Страницы связаны между собой ссылками, как нити в паутине.

HTML

<header>
  <a href="history.html">Наша история</a>
</header>

Давайте посмотрим внимательнее на любую страницу. В хедере есть ссылка, давайте сделаем её кликабельной:

HTML

<a href="history.html">Наша история</a>

Тег <a> — это ссылка. Атрибут href указывает, куда ведёт ссылка. Это как адрес на конверте. Текст между <a> и </a> — это то, что видит пользователь. Кликабельный текст.

Сохраните файл. Откройте в браузере. Видите синий подчёркнутый текст «Наша история»? Это браузер показал ссылку. Наведите курсор. Курсор превратился в руку с указательным пальцем. Это значит, элемент кликабельный. Кликните. Браузер попытается открыть ссылку на одину из наших страниц.

Если файла нет, увидите ошибку. Это нормально. Важно понять: атрибут href указывает путь. Если файл лежит в той же папке, пишете просто имя файла, если в другой папке, указываете путь: pages/about.html. Если это внешний сайт, пишете полный адрес: https://example.com. Чтобы у нас заработала ссылка на историю, давайте создадим еще один html файл рядом с первым и назовем history.html. Сохраним, обновим страницу в браузере. Видите? Ссылка заработала.

Внешние ссылки

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

HTML

<main>
  <!-- Весь наш предыдущий код -->

  <h3>Системный дизайн и дизайн-системы</h3>
  <p>Системный подход, методологии, паттерны дизайн-проектирования</p>

  <a href="https://creativemap.hse.ru/timetable/1200">
    <div>
      <p>Полная программа</p>
      <img src="arrow.svg" alt="Ссылка на полную программу">
    </div>
  </a>

  <h2>Записаться на мероприятие</h2>

  <h2>Контакты</h2>

  <p>
    По общим вопросам и вопросам поступления, а также ссылки на официальные сайты
  </p>

  <p>По вопросам поступления</p>
  <p>+7 499 444-02-84</p>
  <p>design@hse.ru</p>

  <p>По общим вопросам</p>
  <p>+7 495 621-87-11</p>

  <p>Дополнительное образование</p>
  <p>dop-design@hse.ru</p>

  <p>Адрес</p>
  <p>129110, г. Москва, ул. Пантелеевская, д. 53.</p>

  <a href="https://design.hse.ru/">
    <div>
      <p>Сайт Школы дизайна</p>
      <img src="arrow.svg" alt="Ссылка на сайт Школы дизайна">
    </div>
  </a>

  <a href="https://www.hse.ru/">
    <div>
      <p>Сайт НИУ ВШЭ</p>
      <img src="arrow.svg" alt="Ссылка на сайт НИУ ВШЭ">
    </div>
  </a>
</main>

Для чего мы создали такую странную структуру? Она нам нужна чтобы чуть дальше добавить изображение стрелки. <div> нам нужен для «обёртки» текста и картинки. Так мы говорим, что они вместе являются ссылкой.

Тег <img> для изображений

Перейдём к картинкам. Чтобы добавить их на страницу используется тег <img>. Изображение. Но здесь есть особенность. У этого тега нет закрывающей части. Пишется так:

HTML

<img src="meetup.jpg" alt="Встреча сообщества ADC">

Атрибут src — это путь к файлу с картинкой. Атрибут alt — это альтернативный текст. Он показывается, если картинка не загрузилась. Или озвучивается программами чтения с экрана для людей с плохим зрением.

Добавляем изображения на страницу

Добавим все картинки к нам на страницу. Предварительно скачайте все изображения, создайте внутри основной папки еще одну и назовите images, поместите туда все картинки.

HTML

<main>
  <h1>ADC Community</h1>

  <img src="main.png" alt="Митап в Школе дизайна">

  <p>
    Добро пожаловать в ADC — уникальное пространство Школы дизайна НИУ ВШЭ,
    расположенное в историческом здании на Пантелеевской, 53. Это место, где
    встречаются разработчики с бизнесом, авторы со зрителями, профессионалы
    креативной экономики с широкой аудиторией.
  </p>

  <p>
    Все началось с создания Лаборатории дизайна — подразделения Школы дизайна,
    которое сочетало функции дизайн-бюро и исследовательской лаборатории.
    Лаборатория предлагала решения в области коммуникационного и цифрового
    дизайна, но ей не хватало специализированной платформы для объединения
    студентов и профессионалов в области веб-разработки.
  </p>

  <h2>Наш ADC</h2>

  <img src="students.png" alt="Студенты Школы дизайна">

  <h3>Наша история</h3>

  <p>
    История создания и развития ADC — как идея объединения дизайна 
    и программирования переросла в активное комьюнити. От первых митапов 
    до здания на Пантелеевской
  </p>

  <h2>Что изучают студенты ADC</h2>

  <h3>Веб-вёрстка и веб-программирование</h3>
  <p>HTML, CSS, JavaScript, создание многостраничных сайтов</p>

  <h3>UX/UI дизайн и прототипирование</h3>
  <p>Figma, FigJam, интерактивные прототипы</p>

  <h3>Креативное программирование, генеративная графика</h3>
  <p>Статичные и динамические веб-плакаты</p>

  <h3>Системный дизайн и дизайн-системы</h3>
  <p>Системный подход, методологии, паттерны дизайн-проектирования</p>

  <a href="https://creativemap.hse.ru/timetable/1200">
    <div>
      <p>Полная программа</p>
    </div>
  </a>

  <img src="hub.png" alt="Creative Hub">

  <h2>Записаться на мероприятие</h2>

  <!-- Весь наш последующий код -->
</main>

Видите чёрный круглый логотип ADC в левом углу экрана? Это тоже изображение. Давайте добавим и его, а также логотип Telegram.

HTML

<header>
  <img src="logo.png" alt="Логотип ADC">

  <a href="history.html">Наша история</a>

  <img src="telegram.png" alt="Telegram ADC">
</header>

<main>
  <!-- Весь наш предыдущий код -->
</main>

<footer>
  <a href="history.html">Наша история</a>

  <img src="telegram.png" alt="Telegram ADC">

  <p>© ADC Hub</p>
</footer>

Кликабельные изображения

Теперь самое интересное. Можете сделать изображение кликабельным. Обернуть <img> в <a>. Получится ссылка-картинка. Как баннер, на который кликаете и переходите на другую страницу.

HTML

<header>
  <a href="/">
    <img src="logo.png" alt="Логотип ADC">
  </a>

  <a href="history.html">Наша история</a>

  <a href="https://t.me/artdesigncoding">
    <img src="telegram.png" alt="Telegram ADC">
  </a>
</header>

<main>
  <!-- Весь наш предыдущий код -->
</main>

<footer>
  <a href="history.html">Наша история</a>

  <a href="https://t.me/artdesigncoding">
    <img src="telegram.png" alt="Telegram ADC">
  </a>

  <p>© ADC Hub</p>
</footer>

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

Не забудем и про изображения стрелок. Помните, когда мы разбирали странную структуру ссылки?

HTML

<main>
  <!-- Весь наш предыдущий код -->

  <h3>Системный дизайн и дизайн-системы</h3>
  <p>Системный подход, методологии, паттерны дизайн-проектирования</p>

  <a href="https://creativemap.hse.ru/timetable/1200">
    <div>
      <p>Полная программа</p>
      <img src="arrow.svg" alt="Ссылка на полную программу">
    </div>
  </a>

  <h2>Записаться на мероприятие</h2>

  <h2>Контакты</h2>

  <p>
    По общим вопросам и вопросам поступления, а также ссылки на официальные сайты
  </p>

  <p>По вопросам поступления</p>
  <p>+7 499 444-02-84</p>
  <p>design@hse.ru</p>

  <p>По общим вопросам</p>
  <p>+7 495 621-87-11</p>

  <p>Дополнительное образование</p>
  <p>dop-design@hse.ru</p>

  <p>Адрес</p>
  <p>129110, г. Москва, ул. Пантелеевская, д. 53.</p>

  <a href="https://design.hse.ru/">
    <div>
      <p>Сайт Школы дизайна</p>
      <img src="arrow.svg" alt="Ссылка на сайт Школы дизайна">
    </div>
  </a>

  <a href="https://www.hse.ru/">
    <div>
      <p>Сайт НИУ ВШЭ</p>
      <img src="arrow.svg" alt="Ссылка на сайт НИУ ВШЭ">
    </div>
  </a>
</main>

Формат SVG для графики

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

Кнопки

Перейдём к последней теме этого урока, кнопки. На нашем сайте есть две кнопки: «Посмотреть» и «Отправить». Последняя находится в форме, её мы будем делать в следующем уроке. Давайте добавим кнопку.

HTML

<h3>Наша история</h3>

<p>
  История создания и развития ADC — как идея объединения дизайна
  и программирования переросла в активное комьюнити. От первых митапов до здания
  на Пантелеевской
</p>

<button>Посмотреть</button>