: the anchor element
Содержание:
- Как вставить ссылку в картинку
- Гиперссылка в Excel — создание, изменение и удаление
- Ссылка html тег link
- Атрибут alt
- Числа
- Другие полезные атрибуты анкора
- Где уместен тег
- Метаданные
- URL
- Пример
- Значение атрибута начинается с определённого текста
- Атрибут mailto
- Другие ссылки
- Якоря
- Атрибуты¶
- Первое итоговое задание [1-4]
- Всплывающая подсказка
- Ссылка на веб-сайт
- Альтернативный текст
Как вставить ссылку в картинку
Я уже не раз упоминал ссылки в своих постах: помните темы перелинковки, продвижения сайтов? Но тогда мы говорили о них, как о чем-то общем и почти абстрактном, а сейчас конкретно рассмотрим процесс создания качественных ссылок, благодаря которым вы превратите «просто» страницу в вебстраницу и сможете рассчитывать на поднятие вашего ресурса в поисковой ленте. Поисковики «питаются» ссылками – помните это всегда.
Для создания текстовой ссылки воспользуйтесь тегом «А» и обязательным атрибутом Href. Коротко об атрибуте: он необходим, как указатель так называемого урла (пути), по которому должен идти пользователь, чтобы попасть на рекомендуемую вами страницу. И ваш потенциальный читатель (клиент) не должен долго блуждать в интернет-пространстве, попадая не на те статьи или темы, иначе бросит он вас.
Чтобы не случилось разлуки с посетителями (и рекламодателями), старайтесь создавать ссылки как можно качественнее. Изучите несколько коротких, но важных предложений, в которые я постарался уместить всю теорию: тег А в редакторе html всегда является парным. То есть имеет закрывающий элемент. Между этими двумя элементами ,открывающим и закрывающим (многие зовут их просто скобками), размещайте текст гиперссылки (анкор). В готовом виде все это будет выглядеть примерно так:
<a href=”http://vachsit.ru“>Анкор (для внутренней перелинковки в качестве анкора используйте ключевые слова, которыми вы собираетесь продвигать статью, на которую ведет эта ссылка)</a> |
При создании ссылки, учитывайте важнейший нюанс: поисковики анализируют не только ссылку, но и слова, которые размещены в непосредственной близости с ней. Что это значит? Если вы ссылаетесь на ресурс-партнер (равно, как и он на вас), следите, чтобы ссылка оказалась в окружении естественно подобранных фраз и словосочетаний и выглядела как можно натуральнее. Отлично, если часть предложения можно вынести за пределы анкора – это высший пилотаж создания ссылок.
<a href==”http://vachsit.ru“> Анкор </a> (ключевые слова в этом случае находятся не строго между скобками, а имеют продолжение и за ними, что никак не мешает поисковикам их «увидеть»). |
Как правильно «вшить» ссылку в картинку?
Как правило, вебмастера – люди творческие и просто обожают иллюстрировать свои ресурсы фото, схемами и таблицами. Если все это графическое добро собственного производства, то и проблем нет – загружайте себе с папок или напрямую с камеры, и радуйте посетителей обновлениями.
Ну, а если нет подходящего фотоматериала? Тут нужна картинка-ссылка, которую можно найти и на давних страницах своего сайта, и на других ресурсах.
Если быстро нашли – молодец, умеете оперативно работать с информацией! Но в нашем случае обычным копированием не обойтись – нужно ссылаться.
Стандартный для html-редактора тег для всех изображений <img> – не парный, закрывающего тега не требует. Выглядит так:
<img src=”имя изображения.формат”> |
Имя картинке задавайте в виде цифр или букв английского алфавита, формат выбирайте любой среди этих: gif, jpg, png, bmp – и не ошибитесь, прописывая его в коде.
Например, вы задали имя картинке «liza123», а формат ее gif, таким образом, ее код обретает уникальность и выглядит так:
<img src=”liza123.gif”> |
Но это при загрузке непосредственно на сайт, в корневую папку, а если вы хотите разместить картинку в отдельной папке, назовем ее примитивно для примера: «papka»,то и код придется несколько видоизменить:
<img src=”papka/liza123.gif”> |
Чтобы вставить картинку в текст, применяют схему обтекания, но в html-формате она выглядит совсем по-иному и требует использования тега align:
<img src=” liza123.gif ” align=”left”> – текст будет обтекать картинку слева
<img src=” liza123.gif ” align=”right”> – текст будет обтекать картинку справа |
Чтобы показать посетителю картинку, которая лежит на другом сайте, перед именем фото просто вставьте адрес этого ресурса, а чтобы создать максимальные удобства для просмотра, обозначьте еще и размеры картинки, используя атрибуты height=”высота” и width=”ширина”.
А чтобы уж совсем шокировать посетителей своим вниманием и гостеприимством, добавьте короткое описание картинки (атрибут alt), тогда во всплывающем окне гость сможет прочитать, что за фото ему предлагают. Надеюсь, что вы создали отличные ссылки, которые не пройдут мимо внимания поисковых систем, да и люди придираться к ним не будут
Надеюсь, что вы создали отличные ссылки, которые не пройдут мимо внимания поисковых систем, да и люди придираться к ним не будут.
Гиперссылка в Excel — создание, изменение и удаление
Гиперссылки автоматизируют рабочий лист Excel за счет добавления возможности в один щелчок мыши переходить на другой документ или рабочую книгу, вне зависимости находиться ли данный документ у вас на жестком диске или это интернет страница.
Существует четыре способа добавить гиперссылку в рабочую книгу Excel:
1) Напрямую в ячейку
2) C помощью объектов рабочего листа (фигур, диаграмм, WordArt…)
3) C помощью функции ГИПЕРССЫЛКА
4) Используя макросы
Добавление гиперссылки напрямую в ячейку
Чтобы добавить гиперссылку напрямую в ячейку, щелкните правой кнопкой мыши по ячейке, в которую вы хотите поместить гиперссылку, из раскрывающегося меню выберите Гиперссылка
Либо, аналогичную команду можно найти на ленте рабочей книги Вставка -> Ссылки -> Гиперссылка.
Привязка гиперссылок к объектам рабочего листа
Вы также можете добавить гиперссылку к некоторым объектам рабочей книги: картинкам, фигурам, надписям, объектам WordArt и диаграммам. Чтобы создать гиперссылку, щелкните правой кнопкой мыши по объекту, из выпадающего меню выберите Гиперссылка.
Либо, аналогичным способом, как добавлялась гиперссылка в ячейку, выделить объект и выбрать команду на ленте. Другой способ создания – сочетание клавиш Ctrl + K – открывает то же диалоговое окно.
Обратите внимание, щелчок правой кнопкой мыши на диаграмме не даст возможность выбора команды гиперссылки, поэтому выделите диаграмму и нажмите Ctrl + K
Добавление гиперссылок с помощью формулы ГИПЕРССЫЛКА
Гуперссылка может быть добавлена с помощью функции ГИПЕРССЫЛКА, которая имеет следующий синтаксис:
Адрес указывает на местоположение в документе, к примеру, на конкретную ячейку или именованный диапазон. Адрес может указывать на файл, находящийся на жестком диске, или на страницу в интернете.
Имя определяет текст, который будет отображаться в ячейке с гиперссылкой. Этот текст будет синего цвета и подчеркнут.
Например, если я введу в ячейку формулу =ГИПЕРССЫЛКА(Лист2!A1; «Продажи»). На листе выглядеть она будет следующим образом и отправит меня на ячейку A1 листа 2.
Чтобы перейти на страницу интернет, функция будет выглядеть следующим образом:
=ГИПЕРССЫЛКА(«http://exceltip.ru/»;»Перейти на Exceltip»)
Чтобы отправить письмо на указанный адрес, в функцию необходимо добавить ключевое слово mailto:
Ссылка html тег link
Этот тег относится к первому типу ссылок и устанавливает связь с внешним документом. К примеру это может быть файл стилей или файл со шрифтами. Тег должен размещаться внутри тега . Если есть необходимость можем использовать его неоднократно.
<head> <link rel="stylesheet" type="text/css" href="theme.css" /> </head>
Основные атрибуты
charset — Кодировка документа.href — Путь к файлу.media — Задает устройство, для которого применять стили.rel — Определяет отношения между документом и файлом, на который ведет ссылка.type — Тип данных файла который подключается.
Как сделать картинку ссылкой?Как убрать подчеркивание ссылки?Hover эффект ссылки с анимацией
Атрибут alt
Вы уже знаете, что изображения вставляются в Web-страницы с помощью одинарного тега <img>. Атрибут alt добавляется внутрь тera <img> и определяет для добавленноrо на WеЬ-страницу rpaфическоrо элемента альтернативный текст. Этот текст называется альтернативным, поскольку может отображаться на экране как альтернатива самому изображению.
В следующем примере вы увидите, как браузер работает с атрибутом alt, когда появляется «отсутствующее» изображение. Если рисунок не может быть найден или по какой-то причине не загружается, вместо него выводится значение атрибута alt. Поменяйте имя файла с изображением с orange.jpg на pencil.jpg. На самом деле такого файла не существует, поэтому вы получите «отсутствующее» изображение.
Числа
К числам относятся: положительные целые числа, содержащих одну или несколько цифр от 0 до 9; отрицательные числа; а также вещественные или дробные (например, 0.5).
Положительные целые числа
Активно применяются когда надо задать количество колонок, ограничить размер поля формы и количество вводимых символов, установить ширину и высоту рисунка и др. В примере 2 показано создание нумерованного списка, начинающегося с 11.
Пример 2. Использование целого числа
HTML5IECrOpSaFx
Отрицательные целые числа
Отрицательные целые числа применяются реже по сравнению с положительными по понятным причинам. С их помощью нельзя задать перечисление или ширину, хотя бы потому, что рисунков с отрицательной шириной не бывает. Так что в HTML такие числа применяются в основном в формах для ограничения ввода.
Для указания отрицательного числа перед ним ставится знак минус (-) без пробелов (например: -15). В примере 3 показано использование отрицательных значений.
Пример 3. Число со знаком минус
HTML5IECrOpSaFx
Браузер Firefox не поддерживает тип number и вместо него отображает обычное текстовое поле.
Вещественные числа
Сюда входят десятичные дроби, для разделения целой и дробной части используется точка. Число может быть и отрицательным, тогда перед ним ставится знак минус (-).
Примеры вещественных чисел: -0.84, 3.1415926, 1.717.
Есть и вторая форма записи вещественных чисел, когда после числа добавляется латинский символ e или E, а затем число означающее степень, причём оно может быть и со знаком минус. Это аналогично тому, что число перед E умножают на 10 в степени, указанной после символа E. Вот несколько примеров для наглядности.
3.1415926e5 = 3.1415926 × 105 = 3.1415926 × 100000 = 314159.26
5e-2 = 5 × 10-2 = 5 / 100 = 0.05
78e2 = 78 × 102 = 7800
Браузер Opera некорректно работает с вещественными числами, в которых есть заглавная буква E, так что вставляйте строчную букву e.
Другие полезные атрибуты анкора
Существуют дополнительные атрибуты, которые можно использовать при работе с анкорами гиперссылок.
Укажите язык целевого анкора: hreflang
Этот необязательный атрибут сообщает браузеру язык документа, на который ведет ссылка. Например, если нужно сообщить браузеру, что целевой источник написан на испанском, мы будем использовать в качестве значения hreflang соответствующий код языка в формате ISO 639-1.
Чтобы сообщить браузеру, что <a href="http://example.com" hreflang="es">ссылка</a> ведет на ресурс на другом языке, можно использовать атрибут <code> hreflang </ code>.
Атрибут rel
Атрибут rel используется для описания отношений между анкором и целевым источником. Например:
Эта статья была написана <a href="https://plus.google.com/+AuthorName" rel="author">Отличным автором</a>.
Существует несколько значений, которые принимает атрибут rel:
- rel=»nofollow»: используйте это значение, если ссылаетесь на ресурс, но не хотите передавать ему ссылочный вес своего сайта. Например, если ссылаетесь на спамовый сайт в качестве примера того, чего не нужно делать.
- rel=»alternate»: если сайт имеет больше одной версии, используйте это значение для идентификации связанного ресурса в качестве альтернативной версии текущей страницы.
- rel=»bookmark»: это значение используется для определения URL-адреса, который является постоянным и может использоваться для закладки.
- rel=»help»: идентифицирует связанный ресурс как файл справки для страницы с этим значением.
- rel=»license»: используйте этот атрибут для ссылки на лицензию авторских прав.
- rel=»next»: используйте это значение для ссылки на следующий документ из серии.
- rel=»prev»: используйте это значение для ссылки на предыдущий документ из серии.
- rel=»noreferrer»: если хотите разместить ссылку на внешний сайт, но не хотите, чтобы целевой источник знал, кто на него ссылается, используйте это значение.
Атрибут type
Необязательный атрибут type используется для идентификации типа интернет-носителя или MIME типа целевого документа. Например, при создании ссылки на сайт можно добавить атрибут type=»text/html», чтобы сообщить браузеру, что ссылка указывает на HTML-документ.
Сейчас этот атрибут не имеет большого значения. Но в будущем он будет сообщать пользователю сайта тип контента еще до нажатия на ссылку.
Значение type должно быть допустимым типом IANA. Некоторые из наиболее часто используемых значений: text/html, text/css, application/javascript и multipart/form-data.
Навигация
Одним из распространенных способов использования ссылок является создание меню навигации, с помощью которого определяется логическая иерархия структуры сайта.
Связанные элементы
Название элемента | Атрибуты | Примечания |
link | href rel media title type | Элемент <link> используется для определения отношения между HTML-документом и внешним ресурсом. Он чаще всего применяется для определения взаимосвязи между документом и внешними таблицами стилей CSS. |
anchor | hreflang download target title href name | Элемент <a> используется для создания гиперссылки на другую веб-страницу или другое место на той же веб-странице. |
base | target href | Элемент <base> используется для определения базового адреса, от которого можно создать все относительные URL, отображаемые на веб-странице. Если <base> имеет атрибут target, атрибут target, то он будет использоваться как атрибут по умолчанию для всех гиперссылок, отображаемых в документе. |
Данная публикация является переводом статьи «Anchors & Links: How They Work In HTML» , подготовленная редакцией проекта.
Где уместен тег
Тег <base> лучше всего использовать в случае, когда у вас есть полный контроль над всеми используемыми URL, то есть, если вы знаете, что у вас будет возможность переопределить умолчания так, как вам это нужно. Если вы разрабатываете шаблон для CMS, где есть много неизвестных переменных, то, вероятно, тегом <base>лучше не пользоваться.
Но если вы разрабатываете статичный HTML сайт, то тег <base>может быть очень полезен. И это еще более справедливо, если вы используете шаблонзатор вроде Jade или Handlebars, который позволит вам использовать вставки вроде <a href=»{url}#top»>Наверх</a>, так что если вам потребуется переопределить умолчания, то это будет несложно.
Если вы точно знаете, каким будет содержимое вашего проекта, и все ссылки и URL под вашим полным контролем, то тег <base> может сэкономить вам время.
Узнать больше о теге <base> можно в вики W3C и в спецификации HTML5:
- http://www.w3.org/wiki/HTML/Elements/base
Метаданные
Тег | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|---|
<head> | Содержит информацию о документе (сведения о документе, которые не отображаются пользователю). | Да | Да | Да | Да | Да | Да |
<meta> | Обеспечивает метаданные о HTML документе. Метаданные не отображаются на странице, но интерпретируются браузерами и поисковыми системами. | Да | Да | Да | Да | Да | Да |
<base> | Определяет базовый абсолютный URL для всех относительных URL-адресов, содержащихся в документе (помещается внутри контейнера <head>). | Да | Да | Да | Да | Да | Да |
<basefont> | Не поддерживается в HTML5. Определяет (по умолчанию) цвет, размер, шрифт для всего текста в документе. Используйте CSS вместо данного элемента. | Нет | Нет | Нет | Нет | Нет | Нет |
URL
URL — это адрес документа или файл. Содержит в себе несколько частей, не все из которых являются обязательными. Это протокол, имя хоста, порт, путь, строка запроса и хэш. В табл. 2 перечислены параметры URL с их описанием.
Параметр | Описание | Пример |
---|---|---|
протокол | Сетевой протокол. Для гипертекстовых документов это HTTP. | http:// https:// |
имя хоста | Адрес сайта. | htmlbook.ru www.google.com |
порт | Системный ресурс, выделяемый веб-серверу. По умолчанию имеет значение 80, его можно не указывать. | :80 |
путь | Путь к документу на сайте. | /open/doc.html |
строка запроса | Строка, в которой передаются параметры GET-запроса со значениями. Пишется после знака вопроса (?). | ?name=vasya |
хэш | Строка после знака решётки (#). | #top |
В зависимости от наличия тех или иных параметров различают абсолютные и относительные адреса. Абсолютный адрес содержит порт и имя хоста, относительный — путь к документу. Строка запроса и хэш допустимо добавлять к адресу любого типа. Если URL содержит только хэш, то в текущем документе произойдёт переход к элементу, у которого задано id=»имя_хэша». Решётка в атрибуте id в таком случае не пишется.
На URL влияет элемент <base> с атрибутом href, адрес документа с его учётом может оказаться другим, чем тот, что задан явно.
Пример
Атрибут href указывает назначение ссылки:
<a href=»https://html5css.ru»>Visit html5css</a>
Изображение-карта, с щелчком области:
<img src=»planets.gif»
width=»145″ height=»126″
alt=»Planets»
usemap=»#planetmap»>
<map
name=»planetmap»>
<area shape=»rect» coords=»0,0,82,126″ href=»sun.htm» alt=»Sun»>
<area shape=»circle» coords=»90,58,3″ href=»mercur.htm» alt=»Mercury»>
<area shape=»circle» coords=»124,58,8″ href=»venus.htm» alt=»Venus»>
</map>
Укажите базовый URL-адрес для всех относительных URL-адресов на странице:
<head>
<base href=»https://html5css.ru/images/»>
</head>
Значение атрибута начинается с определённого текста
Устанавливает стиль для элемента в том случае, если значение атрибута тега начинается с указанного
текста. Синтаксис применения следующий.
{ Описание правил стиля }
Селектор { Описание правил стиля }
В первом случае стиль применяется ко всем элементам, у которых значение атрибута начинаются с указанного текста. А во втором — только к определённым селекторам. Использование кавычек не обязательно, но только если значение содержит латинские буквы и без пробелов.
Предположим, что на сайте требуется разделить стиль обычных и внешних ссылок —
ссылки, которые ведут на другие сайты. Чтобы не вводить в тег <a> новый класс, воспользуемся селекторами атрибутов. Внешние ссылки характеризуются
добавлением к адресу протокола, например, для доступа к гипертекстовым документам
используется протокол HTTP. Поэтому внешние ссылки начинаются с ключевого слова http://, его и добавляем к селектору A,
как показано в примере 13.3.
Пример 13.3. Изменение стиля внешней ссылки
HTML5CSS 2.1IECrOpSaFx
Результат примера показан ниже (рис. 13.3).
Рис. 13.3. Изменение стиля для внешних ссылок
В данном примере внешние ссылки выделяются жирным начертанием. Также можно
воспользоваться показанным в примере 13.2 приёмом и добавлять к ссылке
небольшое изображение, которое будет сообщать, что ссылка ведёт на другой сайт.
Атрибут mailto
Использование атрибута «mailto» в HTML документе позволяет создать ссылку для отправки письма:
<a href = "mailto:smbd@some.com">Написать автору</a>
Для того, чтобы ссылки mailto корректно работали необходимо чтобы на компьютере или в браузере посетителя был настроен почтовый / веб клиент по умолчанию, иначе при клике на ссылку ничего не произойдет.
В значении атрибута можно сразу указать значения для заголовков (тема, копии, тело письма и т.п.). Пробелы и переносы строки нельзя вставить без кодирования:
<a href = "mailto:mail_1@some.com?subject=Тема%20моего%20письма&cc=mail2@some.com&body= Здравствуй%20уважаемый%20автор">Написать автору</a>
Где:
- subject—тема письма.
- cc—копия письма.
- bcc—скрытая копия письма.
- body—тело письма.
Допустимо указывать несколько адресов (либо не указывать вовсе):
<a href=" mailto:mail_1@some.com, mailto:mail_2@some.com ">Написать автору </a>
Другие ссылки
Мы рассмотрели ссылки на документы по протоколу HTTP или HTTPS, но кроме этого существуют и другие ссылки — на адрес электронной почты, номер телефона и др.
Ссылка на адрес электронной почты
Создание ссылки на адрес электронной почты делается почти также, как и ссылка на веб-страницу. Только вместо протокола http указывается mailto, после которого через двоеточие идёт сам адрес почты (пример 5).
Пример 5. Ссылка на адрес электронной почты
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Адрес электронной почты</title>
</head>
<body>
<p><a href=»mailto:vlad@webref.ru»>Задавайте вопросы по электронной почте</a></p>
</body>
</html>
В атрибуте href элемента <a> вначале пишется ключевое слово mailto, затем через двоеточие желаемый почтовый адрес. Подобная ссылка по своему виду ничем не отличается от ссылки на веб-страницу, но при щелчке по ней запускается почтовая программа, установленная по умолчанию. Поэтому в названии ссылки желательно указывать, что она имеет отношение к электронной почте, чтобы читатели понимали, к чему приведёт щелчок по ней.
Можно также автоматически добавить тему сообщения, присоединив к адресу электронной почты через символ вопроса (?) параметр subject с темой сообщения, как показано в примере 6.
Пример 6. Задание темы сообщения
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Тема письма</title>
</head>
<body>
<p><a href=»mailto:vlad@webref.ru?subject=Вопрос по HTML»>Задавайте
вопросы по электронной почте</a></p>
</body>
</html>
При запуске почтовой программы поле Тема (Subject) будет заполнено автоматически.
Ссылка на Skype
Для вызова программы Skype вы можете использовать протокол callto, после которого через двоеточие следует номер телефона или логин пользователя (пример 7).
Пример 7. Ссылка на Skype
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Skype</title>
</head>
<body>
<p><a href=»callto:vlad»>Мой Skype</a></p>
</body>
</html>
Не все браузеры поддерживают такой формат ссылок.
Ссылка на телефон
На мобильных устройствах вы можете использовать протокол tel, который позволяет использовать ссылку для набора номера и вызова абонента. Номер следует указывать в международном формате, допустимо вставлять в номер дефис или писать его слитно (пример 8).
Пример 8. Ссылка на телефон
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Номер телефона</title>
</head>
<body>
<p><a href=»tel:+1555-2368″>Звоните нам</a></p>
</body>
</html>
При щелчке по такой ссылке откроется приложение для телефона и начнётся вызов абонента.
Якоря
При использовании <base> вы можете столкнуться с проблемой ссылок на внутристраничные якоря.
Обычно ссылка вида <a href=»#top»>Наверх</a> оставит вас на текущей странице, но перенесет к элементу с id=»top», то есть она будет ссылаться на http://thisrocks.com/app/article.html#top.
Но если вы используете тег <base> с заданным атрибутом href, то вы будете перенаправлены на базовый URL с добавленным к адресу сегментом #top, то есть http://thisrocks.com/app/#top.
В этом случае также необходимо переопределить умолчания, заданные тегом <base>, указав страницу, к которой относится ваш якорь, то есть <a href=»article.html#top»>Наверх</a>
Атрибуты¶
Также для этого элемента доступны универсальные атрибуты.
download
Синтаксис
Значения
Если атрибут пишется без значения, то файл скачивается и сохраняется под своим исходным именем, как оно написано на сервере. В качестве значения можно указать рекомендуемое имя файла для сохранения на диск пользователя. При этом файл будет скачан и сохранён с именем, указанным в значении . Расширение файла при этом останется исходным.
Значение по умолчанию
По умолчанию этот атрибут выключен.
Синтаксис
Значение по умолчанию
Нет.
Атрибут (от англ. hypertext reference language — язык гипертекстовой ссылки) указывает язык документа, на который ведёт ссылка.
Синтаксис
Значения
Код языка
Значение по умолчанию
Нет.
Примечание
Атрибут можно использовать для стилизации ссылок, ведущих на иностранные ресурсы.
referrerpolicy
Синтаксис
Значения
- не отправляет заголовок .
- не отправляет заголовок ресурсу без (HTTPS). Это стандартное поведение браузера, если не указана иная политика.
- отправляет такую информацию о текущей странице, как адрес, протокол, хост и порт.
- отправляет другим ресурсам только протокол, хост и порт, а внутри ресурса также отправляет путь.
- отправляет только ресурс и адрес (но не пароли или никнеймы). Это значение небезопасно, так как могут утечь ресурс и адрес с TLS-защищённых ресурсов на небезопасные.
Значение по умолчанию
rel
Атрибут (от англ. relation — связь, отношение) определяет отношения между текущим документом и документом, на который ведёт ссылка, заданная атрибутом . Несмотря на то, что большинство браузеров не поддерживают атрибут , на сайтах часто можно встретить код , предназначенный для поисковых систем Google и Яндекс. Ссылки, помеченные таким образом, не передают PageRank и ТИЦ.
Синтаксис
Значения
Значение по умолчанию
Нет.
target
Синтаксис
Значения
В качестве значения используется имя фрейма, заданное атрибутом . Если установлено несуществующее имя, то будет открыта новая вкладка браузера. В качестве зарезервированных имен используются следующие.
- Загружает страницу в новую вкладку браузера.
- Загружает страницу в текущую вкладку.
- Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как .
- Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как .
Значение по умолчанию
type
Атрибут (от англ. type — тип) устанавливает MIME-тип документа, на который указывает ссылка. Этот атрибут носит рекомендательный характер и может использоваться для стилизации ссылок с заданным типом документа. Атрибут должен добавляться только при наличии атрибута .
Синтаксис
Значения
MIME-тип
Значение по умолчанию
Нет.
Первое итоговое задание [1-4]
Вы познакомились с тегами, необходимыми для создания простейшей HTML-страницы, а также с атрибутами и их значениями, которые очень важны для корректного отображения документа, оптимизации и продвижения в поисковиках.
Пришло время повторить изученное и выполнить несложные задания:
Всплывающая подсказка
- Задание
- Ответ
- Реши сам »
Сделайте всплывающую подсказку с текстом «Хороший сайт», который появляется когда вы наводите указатель мыши на абзац, как показано на рис. 1.
Рис. 1
- Задание
- Ответ
- Реши сам »
Измените размер изображения до 200 пикселей в ширину и 150 пикселей в высоту.
Ссылка на веб-сайт
- Задание
- Ответ
- Реши сам »
Измените нижеприведенный код так, чтобы при щелчке кнопкой мыши по тексту «Это ссылка на сайт», вы перешли на главную страницу сайта www.wm-school.ru.
Альтернативный текст
- Задание
- Ответ
- Реши сам »
Создайте для изображения альтернативный текст «Смайлик», который будет показан при наведении указателя мыши на картинку или если картинка не загрузится.
HTML Элементы
HTML Фоматирование