HTML II

Ссылочные элементы – a

Элемент a (anchor) является основой любого HTML документа. Он позволяет связать HTML документы и другие ресурсы сети друг с другом, образуя сеть всемирной паутины. Ссылки очень гибкий элемент и имеет много разновидностей.

<a
    href="http://home.web.cern.ch/"
    hreflang="en"
    target="_blank"
    title="Официальный сайт CERN">
    CERN
</a>

Например, ссылки могут вести на другой HTML документ в сети:

На файл для скачивания:

<a
    href="https://whatwg.org/pdf"
    download
    type="application/pdf">
    Спецификация HTML5
</a>

Или на электронную почту:

<a href="mailto:press.office@cern.ch">Написать нам письмо</a>

И даже на номер телефона:

<a href="tel:+41 (0)22 767 2757">Или позвонить</a>  
application/zip     # Архив zip
application/pdf     # PDF файл
audio/mpeg          # mp3 аудио файл
image/jpeg          # Картинка в jpeg формате
text/css            # Файл с CSS стилями
video/mp4           # mp4 видео файл

Любой URL состоит из двух частей: метод доступа к ресурсу https и адрес ресурса //yandex.ru/support/search, разделённые двоеточием :

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

DNS

Доменное имя или домен (Domain Name)– это уникальное виртуальное имя сервера в сети Интернет в рамках DNS (Domain Name System). DNS – компьютерная распределённая система для получения физического адреса сервера (IP-адреса) в сети Интернет по виртуальному и человеко-понятному адресу (доменному имени).

Таблицы соответствий IP-адреса домену хранятся на специальных DNS-серверах по всему миру. Условно они выглядят так:

yandex.ru       77.88.55.66
wikipedia.org   91.198.174.192

Элементы форм

Форма form представляет собой набор элементов для ввода информации и кнопок для различных действий с этой иноформацией, чаще всего для отправки её на сервер.

Form

<form action="/book/war-and-peace" method="POST">
    <!-- Поле для ввода заголовка книги -->
    <!-- Так как мы редактируем, 
		то заголовок уже предустановлен в поле -->
    <input name="title" value="Война и мир">

    <!-- Поле для ввода автора книги -->
    <input name="author" value="Толстой Л.Н.">

    <!-- Кнопка сохранения -->
    <!-- При нажатии на неё, браузер соберёт все данные 
		и отправит по адресу /book/war-and-peace -->
    <button type="submit">Сохранить</button>
<form>

demo

1. Браузер соберёт все введённые в поля данные в объект. Для этого из атрибута name он возьмёт название поля, а из value – значения:

{
    title: 'Война и мир',
    author: 'Толстой Л.Н.'
}

2. Затем он запакует в виде строки текста в формате <поле1>=<значение1>&<поле2>=<значение2> и специальным образом закодирует значения:

title=%D0%92%D0%BE%D0%B9%D0%BD%D0%B0%20%D0%B8%20%D0%BC%D0%B8%D1%80&author=%D0%A2%D0%BE%D0%BB%D1%81%D1%82%D0%BE%D0%B9%20%D0%9B.%D0%9D.

3. И на конец, отправит HTTP запрос c закодированными данными по адресу /book/war-and-peace, указанному в атрибуте 'action'.

У формы есть ещё один важный атрибут – method. В нём указан,

простыми словами - тип действия,

а сложными – метод HTTP протокола.

Метод Назначение
GET Прочитать ресурс
PUT Создать ресурс
POST Отредактировать ресурс
DELETE Удалить ресурс

атрибут enctype

Значение Описание
application/x-www-form-urlencoded Вместо пробелов ставится +, символы кодируются при помощи Percent-encoding.
multipart/form-data Данные не кодируются. Это значение применяется при отправке файлов.
ext/plain Пробелы заменяются знаком +, буквы и другие символы не кодируются.

Кодирование multipart/form-data необходимо, когда мы хотим передать в одном запросе несколько типов данных. Например, текстовые данные и файлы.

<form action="/book/war-and-peace" 
      method="POST" 
      enctype="multipart/form-data">
    <input name="title" value="Война и мир">
    <input name="author" value="Толстой Л.Н.">

    <!-- Добавили ещё одно поле – обложка для книги -->
    <!-- Поле типа `file` позволяет выбрать локальный файл -->
    <input name="picture" type="file" value="">

    <button type="submit">Сохранить</button>
<form>

demo

input и label

Основным кирпичиком форм является элемент input. Он позволяет добавить в форму поля различных типов. Мы уже видели два вида полей – текст и файл.

<input name="author" value="Толстой Л.Н.">
<input name="picture" type="file" value="">

Атрибут name задаёт название поля, value его текущее значение, а type – тип. Тип text (простое текстовое поле) является типом по умолчанию, и его можно не указывать.

Для каждого поля можно вывести подпись при помощи элемента label. Чтобы связать их у элемента label в атрибуте for должно быть то же значение, что у элемента input в атрибуте id. При клике на label браузер переводит фокус (выделяет и устанавливает курсор) на связанное поле.

<label for="author">Автор</label>
<input id="author" name="author" value="Толстой Л.Н.">

Если подпись необходима, но места для неё нет. Можно использовать атрибут placeholder у самого элемента input. Тогда подпись будет прямо в поле ввода. Атрибут может быть использован, конечно, только в подходящих для этого типах полей.

<input placeholder="Автор" name="author" value="">

demo

Примеры типов полей:

В html5 добавили ещё много новых типов:

demo

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

  • required – обнозначает поле как обязательное. Если значение не будет введено, то форма не отправится, а напротив этого поля возникнет подсказка с ошибкой.
  • pattern="" – ограничивает ввод регулярным выражением. Если введённое значение не будет ему удовлетворять, то форма не отправится, а напротив этого поля возникнет подсказка с ошибкой. 
<form>
    <input name="author" value="" required>
    <button type="submit">Отправить</button>
</form>
  <label for="index">Почтовый индекс</label>
  <input id="index" name="index" pattern="[0-9]{6}" 
         placeholder="XXXXXX" maxlength="6">

readonly – обозначает поле как «только для чтения»

<form>
    <input name="author" value="Толстой Л.Н." readonly>
    <button type="submit">Отправить</button>
</form>

disabled – обозначает поле как «отключенное». В отличии от readonly значение этого поля не будет отправлено совсем.

<form>
  <input name="author" value="Толстой Л.Н." disabled>
  <button type="submit">Отправить</button>
</form>

button

Для отправки данных нам безусловно нужна кнопка button

<form>
  <input name="author" value="">

  <!-- Кнопка типа reset очищает все поля формы -->
  <button type="reset">Очистить поля</button>

  <!-- Кнопка типа submit отправляет поля формы на сервер -->
  <button type="submit">Отправить</button>
</form>

Если мы хотим, чтобы после загрузки формы фокус был сразу на кнопке можно указать атрибут autofocus

Перерыв

Семантическая разметка

"Дивная" верстка

<div>
    <div>CERN is a European research organization that operates
    the largest particle physics laboratory in the world.</div>

    <div>CERN's main function is to provide the particle accelerators
    and other infrastructure needed for high-energy physics research</div>

    <div>Last modified: 2015-09-22</div>
    <div>Author: ivan@example.com</div>
</div>

Семантичная верстка

Хорошая разметка должна не только определять структуру, но и делать это осмысленно – закрепляя за элементами определённый смысл: вот здесь у нас навигация, а здесь адрес. Такая разметка называется семанитической (Semantic Markup).

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

  • <abbr> – для аббревиатур и определений
  • <address> - для обозначения адреса
  • <dfn> – для терминов и определений
  • <code> – для кода программ
  • <nav> – для навигации
  • ...
<div>
    <div>CERN is a European research organization that operates
    the largest particle physics laboratory in the world.</div>

    <div>CERN's main function is to provide the particle accelerators
    and other infrastructure needed for high-energy physics research</div>

    <div>Last modified: 2015-09-22</div>
    <div>Author: ivan@example.com</div>
</div>
<!-- Обозначаем статью -->
<article>
    <!-- Аббревиатура -->
    <p><abbr title="Conseil Européen pour la ...">CERN</abbr>
    is ... </p>
    <p>CERN's main function is to provide the particle
    accelerators and ... </p>
</article>
<!-- Информацию в подвале -->
<footer>
    <!-- Время -->
    <p>Last modified: <time>2001-04-23</time></p>
    <!-- И контактную информацию -->
    <address>Author: fred@example.com</address>
</footer>

section – определяет тематическую группу элементов: блок комментариев к посту в блоге, главы в статье или список постов

article – обозначает законченную самодостаточную часть документа: пост на форуме или в блоге, новостная статья или виджет

<nav> - Предназначен для создания блока навигации веб-страницы или всего веб-сайта, при этом не обязательно должен находиться внутри <header>. На странице может быть несколько элементов <nav>.

Ссылки

HTML II

By Techno School

Made with Slides.com

HTML II

  • 47

More from Techno School