Адрес
Синонимом адреса выступает URL (Universal Resource Locator, универсальный указатель ресурсов), различают абсолютные и относительные адреса.
Абсолютные адреса
Пример 6.4. Использование абсолютного адреса в ссылке
В данном примере текстовая ссылка ведет на сайт htmlbook.ru и указывает на веб-страницу с именем body.html, которая располагается в каталоге html.
Абсолютные адреса применяются в первую очередь для указания на другой сетевой ресурс и достаточно редко используются в рамках одного сайта.
Относительные адреса
Относительные адреса указываются от корня сайта или текущего документа. Например, код 
означает загрузить графический файл с именем pic.gif, который располагается в той же папке, что и сама веб-страница. Далее рассмотрим несколько примеров таких адресов.
/
Адрес указывает обычно на файл index.html, который находится в корне сайта. Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном каталоге. Имя файла не обязательно должно быть index.html, этот параметр меняется через настройки веб-сервера — так называется программа, которая анализирует приходящие от браузера запросы и передает ему документы, показываемые пользователю.
/images/pic.gif
Слэш (символ /) перед адресом говорит о том, что адресация начинается от корня сайта. Ссылка ведет на рисунок pic.gif, который находится в папке images. А та в свою очередь размещена в корне сайта.
../help/me.html
Две точки перед именем указывают браузеру перейти на уровень выше в списке каталогов сайта и там «поискать» в папке help файл me.html.
manual/info.html
Если перед именем папки нет никаких дополнительных символов, вроде точек или слэша, то папка размещена внутри текущего каталога, а уже в ней располагается файл info.html.
Адреса относительно корня сайта вроде /demo/ работают только под управлением веб-сервера и на локальном компьютере не применимы.
В примере 6.5 приведены ссылки, в которых используются относительные адреса.
Подписано, упаковано, доставлено: как использовать тег address в HTML 5.2
Дата публикации: 2016-12-08
От автора: знающие разработчики очень часто окружают контактную информацию на своих бизнес или личных сайтах в тег address. До недавнего времени это было некорректно с технической точки зрения: тег address был создан для разметки контактной информации о человеке, ответственном за сайт.
Вчера Стив Фолкнер рассказал мне, что W3C изменили спецификацию HTML 5.2, чтобы она отражала общее понимание элемента. Тем не менее, чтобы правильно использовать элемент, нужно знать о нем пару вещей:
Основные адреса
Базовое применение тега address:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Тег address — один из случаев, за исключением стихов, когда я советую использовать тег br для форматирования текста. В остальных случаях его лучше избегать.
Тег address делает текст читаемым для человека и браузера, однако Google не совсем ясно, какой именно адрес вы используете: адрес организации или чего-то еще? Где в адресе улица, а где страна или область?
В некоторых случаях поисковики могут угадать правильную информацию на веб-странице, но я также дополнительно делаю две вещи, чтобы поисковику стало ясно:
Если вы имеете в виду физический адрес организации, зарегистрируйте ее на Google My Business.
Если речь идет о других адресах, комбинируйте микроданные и tel ссылки в разметке:
HTML-теги и атрибуты, о которых вы, возможно, не знали
Эта статья — шпаргалка по HTML-тегам. Поэтому не будем разглагольствовать, сразу к делу.
address
Тег address определяет контактную информацию об авторе или владельце документа или статьи. Контактная информацию может включать в себя адрес электронной почты, адрес сайта, физический адрес, номер телефона, ссылки на аккаунты в социальных сетях и т.д.
audio
Тег audio используется для встраивания аудио-контента (музыка и др.) в веб-страницу.
video
Тег video используется для встраивания видео-контента (видеоклип и др.) в веб-страницу.
Тег base определяет основной путь ( URL ) и/или цель ( target ) для всех относительных путей в документе. Он должен размещаться в теге head и иметь хотя бы один из следующих атрибутов:
blockquote и cite
Тег cite определяет название какой-либо работы (книги, стихотворения, песни, фильма, картины, скульптуры и т.д.). Он также может представлять из себя ссылку на источник цитаты.
Тег code используется для определения части компьютерного кода:
Для форматирования блока кода code часто используется совместно с тегом pre :
datalist
Тег datalist определяет список возможных вариантов для заполнения поля для ввода текста. Он позволяет реализовать «автозавершение» для элемента input : при установке фокуса на такое поле пользователь видит выпадающий список.
Свойство options объекта Datalist возвращает коллекцию всех элементов списка.
Внутри dd могут размещаться параграфы, изображения, ссылки, списки и т.д.
details
По умолчанию details находится в закрытом состоянии.
Внутри details могут размещаться любые теги.
Индикатором открытого состояния details является атрибут open (этот атрибут может использоваться в качестве CSS-селектора — details[open] или JavaScript-селектора — document.querySelector(‘[open]’) ).
dialog
Тег dialog определяет диалоговое окно. Он используется для создания «попапов» и модальных окон.
По умолчанию dialog находится в неактивном состоянии.
figure
Тег figure определяет обособленный (автономный) контент, такой как иллюстрации, диаграммы, фотографии, примеры кода и т.д.
Несмотря на то, что контент элемента figure формально относится к основному потоку (main flow), его позиция (местонахождение) не зависит от этого потока. Поэтому удаление элемента figure не должно влиять на поток документа.
meter
Тег meter определяет скалярное значение в пределах известного диапазона или дробного значения. Другими словами, meter определяет меру чего-либо (gauge).
Этот тег не должен использоваться в качестве индикатора прогресса.
Так можно записать уровень заряда батареи вашего устройства в значение meter :
progress
Тег progress определяет процесс выполнения задачи.
Этот тег не должен использоваться для определения меры чего-либо.
Так можно реализовать десятисекундный таймер:
output
Тег output используется для представления результата вычислений.
picture
Тег picture предоставляет возможность использования нескольких источников для изображения (нескольких изображений).
Этот тег позволяет использовать разные изображения в зависимости от ширины области просмотра (viewport width) вместо масштабирования одного изображения.
template
Тег template используется в качестве контейнера для разметки, которая не отображается при загрузке страницы.
Этот тег предназначен для хранения разметки, которая используется часто, но в определенных случаях (по запросу).
Тег time определяет конкретное время (или дату и время).
Атрибут datetime используется для представления времени в машиночитаемом формате.
noscript
Другие теги в форме шпаргалок
Семантическое «секционирование» страницы
Стилизация текста
Форма
Поля для ввода данных
Пример валидации адреса электронной почты и пароля:
Таблица
Теги colgroup и col могут использоваться для стилизации определенных колонок таблицы целиком вместо стилизации каждой ячейки и строки по отдельности.
Послесловие
Наши виртуалки можно использовать для разработки веб-сайтов.
Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!
Урок 4. Ссылки в html
Что такое ссылка html?
Для обозначения ссылки использует тег a. Для обозначения адреса, по которому направляет ссылка, используется атрибут href.
Рассмотри пример конструкции ссылки:
В результате получаем
Перейти на Яндекс
Как Вы видите ссылка состоит из Слов (Перейти на Яндекс), которые вставлены между открывающим и закрывающим тегами a и Адреса ( http://www.yandex.ru ), который прописывается в атрибуте href в кавычках.
Тег a обозначает ссылку. У него обязательно должна быть закрывающая часть. У тега a есть несколько атрибутов.
Атрибут href и адреса ссылок
| Адрес ссылки бывает абсолютный и относительный. |
В абсолютном прописывается полный URL адрес, например http://tradebenefit.ru/index.html (используется при ссылке на другой сайт или файл другого сайта).
Для понимания вышесказанного рассмотрим пример кода
С первой ссылкой я думаю всё понятно, дан адрес целиком.
Во втором случае прописывается укороченный адрес, так как файлы находятся на одной машине (сервере). Если файл будет находиться на папку глубже, допустим у нас есть файл index.html и папка data, в которой есть файл info.html, то ссылка будет выглядеть так
Если файл, на который ссылаемся, находится наоборот, на папку выше, то делаем так
Атрибут target
При использовании атрибута target чаще всего используются три значения: _self, _new, _blank.
_self страница по ссылке открывается в этом же окне (также происходит по умолчанию, если атрибут не использован).
_new страница по ссылке откроется в новом окне. Данное значение не всегда отрабатывается как надо, поэтому в некоторых браузерах может открыть новое окно
_blank страница по ссылке открывается в новой вкладке. Чаще всего атрибут target используют именно с этим значением.
Теперь рассмотрим пример кода
Пример ссылки, открывающейся в новой вкладке. Данный вид ссылок очень полезен тем, что пользователь переходя на другой сайт, не закрывает Ваш.
Атрибут title
Атрибут title служит для того, чтобы при наведении на ссылку выплывала подсказка. В атрибуте title соответственно прописывается текст подсказки или пояснения
При наведении на ссылку высветится сообщение ‘Ссылка на Яндекс’.
Атрибут charset
Атрибут charset служит для того, чтобы браузеру отправлялась информация о том, что сайт по ссылке создан в другой кодировке. Данное действие позволит избежать некорректного отображения символов при переходе.
Ссылки. Тег
Ссылки являются основой гипертекстовых документов и позволяют переходить с одной Web-страницы на другую, а также на определенное место внутри Web-страницы. Особенность их состоит в том, что сама ссылка может вести не только на HTML-файлы, но и на файл любого типа, причем этот файл может размещаться совсем на другом сайте. Главное, чтобы к файлу, на который делается ссылка, был доступ.
Пара тегов . обрамляет текст ссылки или картинку, которая служит ссылкой.
Атрибуты тега Адреса ссылок
Для навигации по страницам и сайта нам потребуется уметь задавать адреса ссылок. Адреса ссылок могут быть абсолютными или относительными.
Абсолютный адрес ссылки
Абсолютный адрес состоит из трех частей:
Пример
Абсолютная ссылки на страницу другого сайта:
Относительный адрес ссылки
Относительный адрес состоит из полного имени файла целевого документа (включая папки) относительно корня сайта или относительно файла исходного документа.
Если адрес указывается относительно корня сайта, то его полное имя начинается с косой черты.
Если вместо имени файла задать имя папки, то будет отображен индексный файл. Это может быть index.html, index.htm или index.php из этой папки.
Примеры
1. Относительная ссылка на целевой документ в той же папке, что и исходный документ:
 |
2. Относительная ссылка на документ в папке, которая находится на одном уровне с исходным документом:
 |
3. Относительная ссылка на документ, который находится на уровень выше исходного документа:
 |
4. Относительная ссылка на документ, который находится в корне сайта:
 |
Ссылка на конкретное место Web-страницы
Для создания ссылки на определенное место Web-страницы надо сначала поставить закладку-метку в соответствующее место и дать ей имя:
В адресе ссылки на метку в текущем документе перед именем метки ставится знак «решетка» ( # ):
В адресе ссылки на метку в другом документе указывается ее адрес и в конце добавляется знак «решетка» ( # ) и имя метки:
Данные в адресной строке браузера, которые идут после знака «решетка» ( # ), называют hash-данными (хэш-данными) или просто hash (хэш).
Отправка e-mail
Ссылка на адрес электронной почты (E-Mail):
Связь с FTP
FTP (File Transfer Protocol, протокол передачи файлов) позволяет пользователям копировать файлы с других компьютеров (FTP-сайтов). Таким методом компании часто распространяют свои новые программные продукты. Если не указывать имя файла, браузер выведет перечень всех файлов в каталоге. Это особенно удобно, если вы хотите, чтобы читатель получил доступ к нескольким файлам сразу, например, в случае больших файлов, разбитых на части для удобства передачи.
Звонок и СМС с браузера мобильного телефона
Позвонить по номеру с браузера мобильного телефона:
Отправить СМС с браузера мобильного телефона:
