Ссылки. Виды ссылок.Якоря.Всплывающие подсказки.

                 Что такое ссылка?

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

Ссылки создаются с помощью очень простого и короткого тега <a>. Например, вот так:

<a href=" http://abcinblog.blogspot.ru/">Простые советы</a>

Задаём адрес ссылки

Тег <a> без адреса бесполезен, так как он описывает ссылку, которая никуда не ведёт. Поэтому при добавлении простого тега текст никак не изменятся.

Адрес ссылки задаётся с помощью атрибута href:

<a href=" http://abcinblog.blogspot.ru/">Простые советы</a>

У ссылки в примере задан адрес http://abcinblog.blogspot.ru/

Значением атрибута является URL, который обычно называют просто адрес. Адреса бывают разные: абсолютные, относительные, указывающие на страницу, на файл, изображение, содержащие якорь и так далее. А значит и ссылка может указывать на любой объект в интернете.

Абсолютные адреса

Поговорим поподробнее об адресах. Они могут быть абсолютными и относительными.

Абсолютные адреса содержат в себе протокол, имя сервера и путь. 
Например, в адресе http://abcinblog.blogspot.ru/ structura-html-documenta.html

http://       — это протокол

abcinblog.blogspot.ru — имя сервера, также называется домен или хост

/ structura-html-documenta.html     — путь

Абсолютный адрес хорош тем, что однозначно указывает расположение документа. Браузер просто запрашивает по указанному протоколу с указанного сервера документ с указанным путём.

Иногда абсолютные адреса записываются в укороченном виде, например вот так: / structura-html-documenta.html     .

В этом случае, браузер подставляет протокол и сервер текущей страницы. 
Например, если на сайте  http://abcinblog.blogspot.ru есть ссылка с адресом / structura-html-documenta.html     то браузер для запроса преобразует её в такую: http://abcinblog.blogspot.ru/ structura-html-documenta.html

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

Относительные адреса

В относительных адресах нет ни протокола, ни имени сервера, а путь не начинается со слэша /. Вот примеры относительных адресов:

courses/1

./courses

../../run/1

В относительных адресах могут использоваться специальные символы, аналогичные символам в путях файловых систем: . и ...

Если браузер видит, что у ссылки задан относительный адрес, то он должен преобразовать этот адрес в абсолютный, чтобы знать, куда ведёт ссылка. Для этого браузер использует текущий адрес страницы. Например, так преобразуются адреса разных ссылок на одной и той же странице:

Текущий адрес     Адрес в ссылке     Преобразуется в

http://site.ru/news/1       2      http://site.ru/news/2

http://site.ru/news/1       ..      http://site.ru/

http://site.ru/users/profile/1   ../../contacts    http://site.ru/contacts

Использовать относительные адреса для навигации по сайту не рекомендуется. Однако относительные адреса бывают полезны, например, во внешних CSS-файлах.

Ссылка на файл

Ссылка может указывать на любую веб-страницу, на любой файл. Если щёлкнуть по ссылке, ведущей на файл, то браузер предложит его скачать.

Однако, если браузер умеет обрабатывать файлы этого типа, то содержимое файла откроется прямо в браузере. Чаще всего так происходит с изображениями. В последнее время браузеры научились открывать .pdf файлы и многие другие.

Ссылка с якорем

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

Ссылка с якорем содержит символ #, после которого идёт идентификатор. Идентификатор создаётся с помощью атрибута id, который может быть задан у любого тега.

Можно задать адрес, состоящий из одного якоря, например:

<a href="#glava1">Глава 1</a>

При щелчке на такую ссылку браузер найдёт на странице элемент с атрибутом id со значением glava1 и прокрутит окно страницы к нему. То есть перезагрузки страницы не произойдёт.

Якорь можно использовать и в абсолютных адресах, тогда после перехода на нужную страницу произойдёт прокрутка к заданной части этой страницы

Я могу вам посоветовать очень простое использование якоря вот таким образом. В нужном месте документа ставим вот такой код:

<a name="top"></a>

Я, обычно, ставлю сразу после нужного текста.

Здесь top- можно заменить на любое из наименований.
А для ссылки на этот якорь в нужном месте документа (обычно внизу) можно прописать:

<p><a href="#top">Наверх</a></p>

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


<span style="font-family: &quot;times new roman&quot; , &quot;serif&quot;; font-size: 18.0pt;">Самый простой способ выравнивания фото для блогспота <a href="http://abcinblog.blogspot.com/2016/03/blog-post.html#vfoto" target="_blank">здесь!</a><br />
 Узнать больше о якорях можно здесь: htmlbook.ru

Всплывающая подсказка

Для того, чтобы добавить ссылке всплывающую подсказку, надо использовать атрибут title. Например:

<a title="Подсказка" href="#">

Подсказка появится, когда курсор задержится над ссылкой некоторое время.

Подсказки помогают разъяснить назначение непонятных ссылок, а также ссылок-изображений.

Добавим изображение

Чтобы добавить на страницу изображение, нужно использовать одиночный тег <img> с атрибутом src, в котором указан адрес картинки. Например:

<img src="logo.png">

Кстати, самыми распространёнными форматами изображений в сети являются JPEG и PNG.

https://ru.wikipedia.org/wiki/JPEG

Размеры изображения

Чтобы управлять шириной или высотой изображения, нужно использовать атрибуты width и height. Пример:

<img width="100" src="...">

В примере изображению задана ширина 100px. Обратите внимание, что в атрибуте width после цифры нет px. Если вы задаёте размер картинки в пикселях, то используйте просто цифры. Добавлять px не нужно, таков стандарт.

Во втором примере изображению задана относительная ширина, 50 процентов:

<img width="50%" src="...">

Высоту в процентах обычно не задают.

А теперь маленькая фишка к посту «Как выравнивать изображения в блогспоте»

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

Если же задать и ширину, и высоту для картинки:

<img width="100" height="100" src="...">

то браузер может нарушить пропорции исходного изображения.

Альтернативный текст

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

Альтернативный текст изображения задаётся с помощью атрибута alt. Пример:

<img src="cat.png" alt="Кот в полном расцвете сил">

Изображение-ссылка

Ссылки можно делать не только с помощью текста, но и с помощью изображений. Для этого нужно обернуть тег <img> в тег <a>. Например:

<a href="http://keksby.ru">

  <img src="cat.png" alt="Кекс">

</a>

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

А здесь вы сможете узнать о том, как сделать много ссылок с одной картинки.
                                                                                                                                           

HTML-разметка тела документа.

       Ранее я рассказал вам о некоторых тегах необходимых для создания самой простой HTMLстраницы и тегах, которые не отображаются в браузере в посте - структура HTMLдокумента.. Теперь пришла пора поговорить о тегах, для логической разметки текста, которые используются только внутри тега <body>

Тег <p>- размечают абзацы. Он начинается с новой строчки и высотой отступа в нем можно управлять с помощью стилей.

Заголовки и подзаголовки.

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

В  HTML это теги <h>  их может быть шесть.<h1>-<h6>  Заголовок самый верхний 1 , нижний 6.

На практике редко встречаются тексты, в которых встречаются подзаголовки ниже третьего уровня. Поэтому самыми часто используемыми тегами заголовков являются: <h1>, <h2> и <h3>.
Стоит отметить, что поисковые системы придают особое значение заголовкам, поэтому необходимо учиться правильно их использовать.

Неупорядоченный список.

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

В HTML существует семейство тегов для создания списков: неупорядоченных, упорядоченных и списков определений.

Неупорядоченные (или маркированные) списки создаются с помощью тега <ul>, который может содержать внутри себя теги <li>, обозначающие «элемент списка».

Упорядоченный список создаётся с помощью тега <ol>, который может содержать внутри себя теги <li>.

Если элементы неупорядоченного списка по умолчанию отмечаются маркерами, то элементы упорядоченного списка — нумеруются.

Для упорядоченного списка можно задать атрибут start, который изменяет начало нумерации. Например, код:

<ol start="3">

  <li>раз</li>

  <li>два</li>

</ol>

Приведёт к такому результату:

3.   раз

4.   два

5.   »

Многоуровневый список

Создать многоуровневый список достаточно просто.

Сначала нужно создать список первого уровня, а затем внутрь любого элемента этого списка, между тегами <li> и </li>, добавить список второго уровня. При этом необходимо аккуратно закрывать все теги.

Пример правильного кода:

<ul>

3.     <li>1

4.       <ul>

5.         <li>1.1</li>

6.         <li>1.2</li>

7.       </ul>

8.     </li>

9.     <li>2</li>

10.    </ul>

Пример кода с ошибкой:

11.    <ul>

12.      <li>1</li>

13.      <ul>

14.        <li>1.1</li>

15.        <li>1.2</li>

16.      </ul>

17.      <li>2</li>

18.    </ul>

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

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

Список определений

Список определений создаётся с помощью трёх тегов:

1.   <dl> обозначает сам список определений;

2.   <dt> обозначает термин;

3.   <dd> обозначает определение термина.

Теги <dt> и <dd> пишутся парами внутри <dl>.

Например:

<dl>

  <dt>Термин</dt>

  <dd>Определение</dd>

  <dt>Второй термин</dt>

  <dd>И его определение</dd>

  <dt>Кошка</dt>

  <dd>Шерстяное изделие развлекательного характера</dd>

</dl>

Важность Теги strong и b

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

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

Первые два тега предназначены, чтобы указать на важность слова или фразы.

Тег <strong> определяет важность отмеченного текста.

Тег <b> предназначен для выделения текста без придания ему особой важности.

Лучше всего отличия этих тегов будут заметны людям, которые используют специальные настройки ОС, в частности, слепым и слабовидящим. Когда они включают функцию чтения текста, то «говорилка» будет интонацией выделять слова с тегом <strong>. То же самое касается и тегов <em> и <i>. Тег <em> «говорилка» будет выделять интонацией.

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

Отметим, что новый смысл тегу <b> придали в HTML5. Раньше это был тег, который просто делает текст полужирным. То есть он был предназначен только для визуального форматирования.

Акцентируем внимание. Теги em и i

Следующие два тега предназначены для акцентирования внимания на слово или фразу.

Тег <em> определяет текст, на который сделан особый акцент, меняющий смысл предложения.

Например, если мы хотим подчеркнуть, что Кот не любит питаться укропом (он больше за тунца), а любит только гонять его по полу, то разметим текст так:

Инструктор Кот любит <em>играть</em> с укропом.

Тег <i> обозначает текст, который отличается от окружающего текста, но не является более важным.

 Обычно так выделяют названия, термины, иностранные слова.

Например, если мы хотим указать, что инспектор — это какой-то специальный термин, то разметим текст так:

Обычно Кот пользовался <i>инспектором</i> браузера для поиска ошибок.

Визуально оба тега одинаковы, они выделяют текст курсивом.

Новый смысл тегу <i> придали в HTML5. Раньше это был просто тег для выделения текста курсивом.

Переносы и разделители. Теги br и hr

Иногда возникает необходимость вставить в текст перенос строки, не создавая при этом абзац. Например, при разметке стихов или текстов песен.

Для этого в HTML предусмотрен одиночный тег <br>.

Иногда этот тег используется для разбиения текста на «как бы абзацы», что является плохим подходом. Используйте для разметки абзацев тег <p>.

Одиночный тег <hr> используется для того, чтобы создать горизонтальную линию-разделитель. На внешний вид этой линии можно влиять с помощью атрибутов, но правильней делать это с помощью CSS (к этому вернемся позже)

В HTML существует несколько тегов для обозначения цитат:

        <blockquote> предназначен для выделения длинных цитат, которые могут состоять из нескольких абзацев. Тег выделяет цитату как отдельный блок текста с отступами.

        <q> предназначен для выделения коротких цитат в тексте предложения. Текст внутри этого тега автоматически обрамляется кавычками.

        <cite> используется для того, чтобы выделить источник цитаты, название произведения или автора цитаты.

Верхние и нижние индексы

Следующие два тега обычно используются не для выделения слов, а для выделения отдельных символов. Их используют для указания единиц измерения или для написания простых формул.

Например: 20м², H₂O, X³+X₂=1

Тег <sup> отображает текст в виде верхнего индекса.

Тег <sub> отображает текст в виде нижнего индекса.

Стоит отметить, что эти теги являются чисто презентационными и не имеют собственной семантики.

Эти теги можно использовать внутри друг друга для создания более сложных формул.

Если вам нужно вставить очень сложную формулу в HTML-документ, лучше воспользоваться специальным языком разметки  MathML.

https://ru.wikipedia.org/wiki/MathML

Помечаем изменения. Теги del и ins

Любой документ на протяжении своей «жизни» может изменяться. С распространением динамических веб-приложений вносить изменения в HTML-документы стало проще простого.

Иногда возникает вопрос: а что же именно было изменено в документе, что было добавлено, а что удалено?

Как раз для описания изменений предназначены теги <del> и <ins>.

<del> выделяет текст, который был удалён в новой версии документа.

<ins> выделяет текст, который был добавлен в новой версии документа.

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

Простейшим примером применения этих тегов может служить список ошибок. Когда ошибка исправлена, её помечают тегом <del>, если найдена новая ошибка, то её добавляют в список и помечают тегом <ins>.

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

Преформатированный текст

Наверное, вы уже заметили, как отличается отображение кода в HTML-редакторе и в мини-браузере.

Вы можете ставить сколько угодно пробелов в HTML-коде, но браузер отобразит их как один. Вы также можете ставить сколько угодно переносов строки в HTML-коде, а в браузере переноса не будет, если только не использовать специальные теги, например <p> или <br>.

Изменить это поведение браузера можно с помощью тега <pre>, который обозначает «предварительно отформатированный текст». Браузер сохраняет и отображает все пробелы и переносы, которые есть внутри тега <pre>.

Наиболее часто этот тег используется при отображении примеров кода.

Просто выделенный текст

В HTML5 появился новый тег <mark>, который обозначает выделенный текст.

Иногда при работе с объёмными текстами мы используем маркер, чтобы выделять ключевые слова, идеи или что-то другое на что стоит обратить внимание. Такое же назначение и у тега <mark>.

В современных браузерах текст внутри <mark> подсвечивается жёлтым фоном.
Остается вспомнить одну из самых сложных тем -

HTML-Таблица.

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

HTML-Академия