3. Гиперссылки и Формы

Гиперссылки

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

Типы

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

Пример создания якорной ссылки

<a href="#section1">Перейти к разделу 1</a>
...
<div id="section1">
  <!-- Содержание раздела 1 -->
</div>

Перейти к разделу 1

В этом примере, при нажатии на ссылку “Перейти к разделу 1”, браузер автоматически прокрутит страницу до элемента с идентификатором “section1”. Это позволяет пользователям легко перемещаться по длинным страницам или документам, не прибегая к использованию полосы прокрутки.

    
Содержание раздела 1

Безъякорные ссылки — это обычные ссылки, которые не содержат ключевых слов. Они могут выглядеть как обычные ссылки на сайт, например: https://1163.ru. Либо могут быть спрятаны под указательными словами: «тут», «здесь», «подробнее по ссылке» и т.п.

Пример создания безъякорной ссылки

<a href="https://1163.ru">Посетите наш сайт</a>

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

Атрибуты

Тег <a> в HTML имеет следующие атрибуты:

  1. href - указывает URL страницы или ресурса, на который ведет ссылка. Пример: <a href="https://www.example.com">Ссылка</a>.
  2. target - указывает, где открыть страницу или ресурс, на который дана ссылка. Возможные значения: _blank (в новом окне), _self (в том же окне), _parent (в родительском фрейме), _top (в самом верхнем фрейме). Пример: <a href="https://www.example.com" target="_blank">Ссылка</a>.
  3. download - указывает, что цель будет загружена, когда пользователь нажмет на гиперссылку. Пример: <a href="file.pdf" download>Скачать PDF</a>.
  4. rel - указывает связь между связанным и текущим документом. Возможные значения: stylesheet (для таблиц стилей), alternate (для альтернативных ресурсов), icon (для иконки), next (для следующей страницы) и другие. Пример: <a href="page.html" rel="next">Следующая страница</a>.
  5. hreflang - указывает язык связанного документа. Пример: <a href="page.html" hreflang="ru">Страница на русском</a>.
  6. type - указывает тип медиафайла связанного документа. Пример: <a href="video.mp4" type="video/mp4">Видеофайл</a>.
  7. referrerpolicy - управляет тем, как браузер должен отправлять информацию об источнике перехода (referrer) при переходе по ссылке. Возможные значения: no-referrer (не отправлять реферер), no-referrer-when-downgrade (не отправлять реферер при переходе на небезопасный сайт), origin (отправлять реферер только с источником), origin-when-cross-origin (отправлять реферер только при переходе между разными источниками) и другие. Пример: <a href="page.html" referrerpolicy="origin">Ссылка</a>.

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

Формы

Формы HTML представляют собой раздел документа, который позволяет пользователям вводить информацию для последующей обработки системой. Они задаются с помощью элемента <form> и содержат разметку для элементов управления (например, текстовые поля, радиокнопки, кнопки), надписей и других элементов.

Формы играют ключевую роль в веб-разработке, позволяя собирать данные от пользователей, такие как имена, адреса электронной почты, номера телефонов, предпочтения и т.д. Эти данные затем могут быть отправлены на сервер для дальнейшей обработки, например, для регистрации пользователя, оформления заказа, отправки сообщений и многого другого.

Типы

Элемент <input> в HTML имеет множество атрибутов, каждый из которых предназначен для настройки его поведения и внешнего вида. Вот некоторые из наиболее часто используемых атрибутов:

  1. id - уникальный идентификатор элемента, который может использоваться для связи с элементом через скрипты JavaScript. Пример: <input type="text" id="username">.
  2. name - имя элемента, которое используется при отправке данных формы, используется для получения значений на стороне сервера. Пример: <input type="text" name="username">.
  3. value - значение элемента по умолчанию. Пример: <input type="text" value="Да">.
  4. placeholder - текст-подсказка, отображаемый в пустом поле. Пример: <input type="text" placeholder="Введите ваше имя">.
  5. required - указывает, что поле обязательно для заполнения. Пример: <input type="text" required>.
  6. readonly - делает поле доступным для просмотра, но не для редактирования. Пример: <input type="text" readonly value="Только для чтения">.
  7. disabled - отключает элемент, делая его недоступным для взаимодействия. Пример: <input type="text" disabled value="Отключено">.
  8. maxlength - ограничивает максимальное количество символов, которые можно ввести в текстовое поле. Пример: <input type="text" maxlength="10">.
  9. min и max - устанавливают минимальное и максимальное допустимое значение для числовых и датированных полей. Пример: <input type="number" min="1" max="10">.
  10. step - определяет шаг изменения значения для числовых полей, например, при указании цены. Пример: <input type="number" step="0.01">.
  11. pattern - устанавливает шаблон для проверки вводимых данных, например, формулы или номера телефона. Пример: <input type="text" pattern="[A-Za-z]{3,}">.

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

Основные элементы управления, используемые в формах HTML, включают:

  • Текстовые поля (<input type="text" value=" ЗНАЧЕНИЕ ">) для ввода текста.
  • Радиокнопки (<input type="radio" value=" ЗНАЧЕНИЕ ">) для выбора одного варианта из нескольких.
  • Чекбоксы (<input type="checkbox" value=" ЗНАЧЕНИЕ ">) для выбора нескольких вариантов из списка.
  • Кнопки отправки (<input type="submit" value=" ЗНАЧЕНИЕ ">) для отправки формы.
  • Кнопки очистки (<input type="reset" value=" ЗНАЧЕНИЕ ">) для очистки всех полей формы.
  • Скрытое поле (<input type="hidden" value=" ЗНАЧЕНИЕ ">) для значений, которые не отображаются у пользователя, но должны передаваться на сервер
  • Поисковое поле (<input type="search">) для ввода текста.

Отправка формы может осуществляться двумя методами: GET и POST. Метод GET рекомендуется использовать в случаях, когда обработка формы не предполагает побочных действий на стороне сервера, например, при поиске. В остальных случаях, когда предполагается модификация данных на сервере (например, регистрация пользователя, оформление заказа), следует использовать метод POST.

Пример создания формы GET

<form method="GET"> <!-- POST или GET -->
    <input type="hidden" name="surname" value="Куприн"> <!-- Скрытое поле -->
    <input type="search" name="search"> <!-- Поисковое поле -->
</form>

Результат данной формы, вы можете увидеть в URL-ссылки вашего Веб-обозревателя, примерно так

https://edu.tpc/index.php?surname="Куприн"&search=" Ваш поисковой запрос "
/* Символ "?" - начало запроса типа GET, а символ "&" - And (И), добавление новых переменных запросов.
Пример: ?type="beta"&server="gamma"&port="5000", где type - изначальная переменная запроса, а server и port - добавочные */

Задание

Создайте многостраничный сайт в специально отведённой директории по следующим темам

Темы задания - на выбор

  • Банковские услуги
  • Хостинговая компания
  • Рекламное агентство
  • Сфера продаж

Решение должно содержать: Навигационный блок (<nav>), Блок контента (Контейнер), и Нижнюю сноску (<footer>). Один навигационный блок должен находится в Верхней сноске (<header>)

Пример навигации

<html>
<head> <!-- Содержимое HEAD --> </head>
<body>
    <header> <!-- Навигационный блок правильно использовать только в header и footer -->
        <nav>
            <ul>
                <li><a href="/index.php">Главная</a></li>
                <li><a href="/index.php">Остальные</a></li>
            <ul>
        </nav>
    </header>
    <!-- Содержимое BODY -->
</body>

Пример директории для сайта

/
├─  pages/ /* Папка со страницами */
│    └─ billing.html /* Страница счетов */
│    └─ media.html /* Медиастраница - фоточки/видосики */
├─  styles/ /* Папка для №4 */
│    └─ stylesheets.css /* Файл CSS для практической №4 */
└─  index.html /* Главная страница */
<a href="/pages/billing.html">Мои счета</a> <!-- Пример ссылки на страницу счетов -->

Вот пример структуры сайта

  1. Главная страница (index.html). Краткое описание услуг и ссылки на основные разделы сайта.
  2. О компании (about.html). Информация о компании и контактная информация.
  3. Услуги (services.html). Подробное описание услуг и преимущества работы с банком.
  4. Блог (blog.html). Статьи и новости о банке, советы и рекомендации.
  5. FAQ (faq.html). Ответы на часто задаваемые вопросы о банке.
  6. Форма заявки (order.html). Форма для оформления дебетовой карты.