Доброго всем времени суток, мои дорогие друзья и читатели. Я надеюсь, что вы решили все таки решили принять участие в моем конкурсе и уже пишите про свой блогерский путь. Ну а я хотел бы продолжить наше изучение языка html и сегодня я вам хотел бы рассказать про одну из важнейших составляющих, а именно гиперссылках.
Да, без таких гиперссылок интернет был бы не таким удобным. Нет, вру. Он был бы вообще не удобным в плане навигации. Вы можете представить интернет без них? Я лично нет.
И сегодня мы с вами узнаем, как вставить гиперссылку в html. Но сначала я хотел бы вас спросить: Знаете ли вы, что такое вообще гиперссылка и чем она отличается от обычной ссылки? Тут на самом деле всё просто: ссылка — это простое написание информации ссылающееся на какой-нибудь документ. При этом нажать вы на этот текст не можете (ничего не будет), но зато вы знаете, где искать информацию.
Пример: О том как выделять волосы в фотошопе вы можете узнать по адресу //сайт/adobe-photoshop/kak-vydelit-volosy/
Гиперссылка — это такой же текст, только суть его заключается в том, что на этот текст можно нажать и попасть на желаемую страницу, сайт или любой другой объект. Причем сам текст может быть любой, тем временем как адрес прописывается уже внутри отдельно и может быть совершенно другим. Но как бы то не было, все равно в разговорной речи их называют просто ссылками. Вот пример гиперссылки:
О том, как правильно выделять волосы в фотошопе вы можете прочитать в одной из моих .
Ну да ладно. Хорош теории. Теперь перейдем к практике и посмотрим какие и отвечают за все эти дела.
За гиперссылку отвечает парный тег , но сам по себе он ничего из себя не представляет. Он всегда идет в связке с атрибутом. И в данном случае нам нужно постоянно прописывать этот самый href. В значении атрибута мы ставим саму ссылку на желаемый ресурс. А в самом содержимом мы пишем сам текст, который должен стать кликабельным (работать по нажатии). Посмотрите пример и думаю, что вы всё поймете.
Поисковая система Яндекс
Как вы поняли, в этом примере я написал, что при нажатии на кусок текста «Поисковая система Яндекс», человек направится по адресу, написанному в значении атрибута href .
Я думаю, что многие из вас знают, что существуют внутренние и внешние ссылки. Внутренние осуществляются внутри одного каталога, то бишь сайта, а внешние ссылки ведут на какой-то сторонний ресурс. И сейчас я покажу как делать и те, и другие.
Файл в той же папке
Но такой переход будет работать при условии, если файл, на который вы ссылаетесь будет находится в той же папке, что и файл, в котором вы ставите ссылку. Для других вариантов все немножко по другому.
Файл в другой папке
- Откройте в Notepad++ файл pushkin.html
- Теперь найдите слово фото и заключите его в теги<a href> .
- А теперь внимание! В значении атрибута прописываем путь относительно редактируемого файла, то есть самого pushkin.html. У вас должно будет получиться так:
Что мы сейчас сделали? А сделали мы следующее: так как путь к фотографии лежит в отдельной папке img, которая находится в одной папке с файлом pushkin.html, то в значении атрибута нам приходится сначала написать название папки, а потом через слеш (/) полное название документа (в нашем случае фотографии).
А вот теперь сохраните и запустите файл pushkin.html в браузере. Вы увидите, что слово «Фото» стало выделено синим цветом и стало кликабельным, а это значит, что нажав на эту ссылку мы попадем на файл fofo.jpg, который находится в папке img.
Ну как? Всё понятно? Вы в случае чего спрашивайте, не стесняйтесь.
Внешние переходы
Ну и конечно же нельзя не упомянуть о внешних ссылках, после нажатия на которые мы попадем на совершенно другой сайт. Но тут ничего сложного нет. Вся суть состоит в том, что вы в значение href кидаете полный адрес сайта или веб-страницы. Пример с яндексом я показывал выше. Но вот вам еще один пример:
Я буду учиться на мастера социальных проектов .
Здесь мы попадаем на конкретную страницу конкретного сайта.
Открытие в новом окне
По умолчанию при нажатии на ссылку документ открывается в том же окне, что и ваша страница, т.е. ваша страница захлопнется. А это не есть хорошо. В частности для продвигаемых контентных проектов или блогов рекомендуется делать так, чтобы при нажатие на ссылку, документ открывался в новом окне или вкладке, не закрывая вашу страницу.
В этом нам поможет атрибут target со значением «_blank» . Тут сложного ничего нет. Вам просто надо будет вставить это внутри открывающего тега после значения атрибута href . Давайте возьмем тот отрывок из файла lukomorye.html, где мы делали ссылку на страницу pushkin.html, только теперь пропишем этот самый атрибут. Выглядеть это должно так:
Из поэмы Руслан и Людмила (Автор - А.С. Пушкин)
Ну тут всё понятно. Теперь при нажатии на содержимое нужная страница откроется в новом окне. Эта вещь очень нужная, так как если ее не прописать, то пользователь просто напросто уйдет с вашей страницы. А так он в любом случае останется на ней, только если сам специально не закроет ее. Попробуйте проделать всё сами, только делайте всё своими ручками прекрасными. Не надо копировать и вставлять.
Ну вот как-то так. Вроде всё самое важное рассказал, но если вы хотите двигаться в этом направлении и изучить HTML и CSS для создания профессиональных сайтов, блогов и даже интернет-магазинов, то обязательно посмотрите отличный видеокурс на эту тему. Уроки действительно превосходные и рассказывается действительно для людей, которые с сайтостроением еще мало знакомы или незнакомы вовсе.
Ну а на этом наш сегодняшний урок закончен. Я надеюсь, что вам моя статья понравилась и буду рад, если вы станете моим постоянным читателем. Поэтому не забудьте подписаться на обновления моего блога, дабы не пропустить чего-то интересного. Ну а вам я желаю успехов во всем ваших начинаниях. Пока-пока!
С уважением, Дмитрий Костин.
Ссылки можно поделить на две категории:
ссылки на внешние ресурсы
— создаются с помощью тега и используются для расширения возможностей текущего документа при обработке браузером;
гиперссылки
— ссылки на другие ресурсы, которые пользователь может посетить или загрузить.
Как сделать гиперссылки на сайте
1. Структура ссылки
Гиперссылки создаются с помощью парного тега . Внутрь тега помещается текст, который будет отображаться на веб-странице. Текст ссылки отображается в браузере с подчёркиванием, цвет шрифта — синий, при наведении на ссылку курсор мыши меняет вид.
Обязательным параметром тега является атрибут href , который задает URl-адрес веб-страницы.
указатель ссылкиСсылка состоит из двух частей — указателя и адресной части . Указатель ссылки представляет собой фрагмент текста или изображение, видимые для пользователя. Адресная часть ссылки пользователю не видна, она представляет собой адрес ресурса, к которому необходимо перейти.
Адресная часть ссылки состоит из URl. URl (Uniform Resource Locator) — унифицированный адрес ресурса. При создании адресов для разделения слов между собой рекомендуется использовать дефис, а не символ подчёркивания. В общем виде URl имеющий следующий формат:
Метод доступа://имя сервера:порт/путь
Метод доступа , или протокол, осуществляет обмен данными между рабочими станциями в разных сетях. Наиболее распространенные протоколы передачи данных:
file обеспечивает чтение файла с локального диска:
File:/gallery/pictures/summer.html
http предоставляет доступ к веб-странице по протоколу HTTP:
Http://site.ru/
https - специальная реализация протокола HTTP, использующая шифрование (как правило, SSL или TLS)
Https://site.ru/
ftp осуществляет запрос к FTP-серверу на получение файла:
Ftp://pgu/directory/library
mailto запускает сеанс почтовой связи с указанным адресатом и хостом:
Mailto: [email protected]
Имя сервера описывает полное имя машины в сети, например, site.ru . Если имя сервера не указано, то ссылка считается локальной, т.е. она относится к той же машине, на которой находится HTML-документ, содержащий ссылку.
Номер порта ТСР
, на котором функционирует веб-сервер. Представляет собой число, которое необходимо указывать, если метод требует номер порта (отдельные сервера могут иметь свой отличительный номер порта). Если порт не указан, по умолчанию используется порт 80. Стандартными портами являются:
21 — FTP
23 — Telnet
70 — Gopher
80 — HTTP
Путь содержит имя папки, в которой находится файл.
2. Абсолютный и относительный путь
Когда в ссылке указывается только имя файла, браузер предполагает, что файл находится в той же папке, что и документ, содержащий гиперссылку. На практике веб-сайты содержат сотни документов, которые размещают в отдельные папки, чтобы ими было легче управлять. Чтобы создать ссылку на файл, находящийся вне папки, содержащей текущий документ, необходимо указать расположение файла или путь. HTML поддерживает два вида пути: абсолютный и относительный.
Рис. 1. Пример структуры папок
2.1. Абсолютный путь
Абсолютный путь
указывает точное местоположение файла в пределах всей структуры папок на компьютере (сервере). Абсолютный путь к файлу даёт доступ к файлу со сторонних ресурсов и содержит следующие компоненты:
1) протокол, например, http (опционально);
2) домен (доменное имя или IP-адрес компьютера);
3) папка (имя папки, указывающей путь к файлу);
4) файл (имя файла).
Существует два вида записи абсолютного пути — с указанием протокола и без него:
Http://site.ru/pages/tips/tips1.html //site.ru/pages/tips/tips1.html
Если файл находится в корневой папке, то путь к файлу будет следующим:
Http://site.ru/index.html
При отсутствии имени файла будет загружаться веб-страница, которая задана по умолчанию в настройках веб-сервера (так называемый индексный файл).
Http://site.ru/
Обычно в качестве индексного файла выступает документ с именем index.html . Наличие завершающего слеша / означает, что обращение идет к папке, если его нет — напрямую к файлу.
2.2. Относительный путь
Относительный путь описывает путь к указанному документу относительно текущего. Путь определяется с учётом местоположения веб-страницы, на которой находится ссылка. Относительные ссылки используются при создании ссылок на другие документы на одном и том же сайте. Когда браузер не находит в ссылке протокол http:// , он выполняет поиск указанного документа на том же сервере.
Относительный путь содержит следующие компоненты:
1) папка (имя папки, указывающей путь к файлу);
2) файл (имя файла).
Путь для относительных ссылок имеет три специальных обозначения:
/ указывает на корневую директорию и говорит о том, что нужно начать путь от корневого каталога документов и идти вниз до следующей папки
./ указывает на текущую папку
../ подняться на одну папку (директорию) выше
Главное отличие относительного пути от абсолютного в том, что относительный путь не содержит имени корневой папки и родительских папок, что делает адрес короче, и в случае переезда с одного домена на другой не нужно прописывать новый абсолютный адрес. Но если сторонний ресурс будет ссылаться например, на ваши изображения с относительными адресами, то они не будут отображаться на другом сайте.
3. Якоря
Якоря , или внутренние ссылки, создают переходы на различные разделы текущей веб-страницы, позволяя быстро перемещаться между разделами. Это оказывается очень удобным в случае, когда на странице слишком много текста. Внутренние ссылки также создаются при помощи тега с разницей в том, что атрибут href содержит имя указателя — так называемый якорь , а не URl-адрес. Перед именем указателя всегда ставится знак # .
Здравствуйте, уважаемые читатели блога сайт. Сегодня я хочу поподробнее поговорить про то, что такое гиперссылка в языке Html, как можно размещать их в тексте на сайте, как сделать ссылкой картинку, как правильно использовать тег «A» и его атрибуты «Href» и «Target blank» (открыть в новом окне).
Вообще, гиперссылка является ключевым элементом . Кроме того, ссылки сейчас являются одним из трех основных факторов, влияющих на успешное продвижение сайта. Правильное их применение и понимание того, например, как влияет на их учет поисковыми системами, может существенно повлиять на посещаемость вашего ресурса.
Что такое гиперссылка и якорь (anchor)
Итак, мы с вами уже успели познакомились с устаревшими и не рекомендуемыми для повседневного использования тэгами . Продолжим дальнейшее знакомство.
Для того, чтобы сделать гиперссылку в Html коде, нам тоже понадобится использовать тег A. Для него можно будет использовать различные атрибуты, задающие, например, URL адрес цели перемещения по этой ссылке (href) или же предписывающий открывать ее в новом окне (target=_blank). Но давайте поговорим обо все по порядку.
Как мы уже упомянули чуть выше, гиперссылки являются ключевым элементом языка Html и они позволяют ссылаться как на внутренние страницы своего же сайта, так и на другие ресурсы интернета. Скажу банальность — переход по ссылке осуществляется посредством щелчка мыши по ней (а вы как думали?).
Кроме того, что они могут подразделяться на внутренние или внешние, они еще могут быть служебными и использоваться исключительно только для нужд браузера, с помощью которого будут открываться страницы вашего сайта.
В этом случае они не будут видны на странице, т.к. прописываются в области Head исходного кода документа, содержимое которой на странице не отображается (про структуру кода языка гипертекстовой разметки я упоминал в статье про ).
Служебные гиперссылки создаются не с помощью тега «A» (как обычные), а с помощью тега «Link» . Задач, ими выполняемых, довольно много, например, с помощью них к Html документу подключаются внешние файлы с таблицами каскадных стилей CSS или, например, .
Но сегодня рассматривать то, как можно их создавать, мы не будем (до них еще дойдет время), а остановимся подробно на видимых ссылках , которые можно создать внутри области Body и, соответственно, они будут отображаться на web-странице.
Но, тем не менее, у всех гиперссылок (и видимых, и служебных) есть одно общее — все они имеют в своем составе обязательный атрибут Href . В нем, в качестве его значения, прописывается определенное место в документе (если оно было заранее помечено якорем) или же адрес самого документа в интернете (в Href прописывается или, другими словами, путь до страницы или же какого-либо другого файла).
Гиперссылки являются элементами навигации, которые призваны вас переносить на другие документы в сети, либо осуществлять перемещение по содержимому уже просматриваемой вами web-страницы с помощью заранее сделанных в теле документа меток, которые называются еще Html якорями (anchor).
Тут может возникнуть некоторая путаница, т.к. в SEO под словом , но в языке Html под «anchor» подразумевают именно якорь (перевод слова anchor) или же метку в тексте, на которую потом можно будет сослаться.
Зачем в Html используются якоря (anchor)? Это довольно удобно при создании навигации по довольно длинной web-странице. Наверное, вы встречали в сети, когда на открытой вами страничке сразу под ее заголовком приведены названия разделов статьи, опубликованной на этой странице.
Таким образом читатель сможет сразу перейти к тому месту на странице, где находится интересная ему информация, а не заморачиваться с прокруткой текста и визуальным поиском нужного места. Удобно и повышает .
Как создаются якоря и хеш ссылки
Итак, наша задача в этом случае будет заключаться в установке в нужных местах страницы (документа) якорей, которые в общем случае будут выглядеть так:
Т.е. для того, чтобы сделать anchor, нужно в пустой тег гиперссылки «А» прописать единственный атрибут «Name», в качестве значения которого использовать уникальную метку, которая не должна содержать пробелов и в которой можно использовать символы латиницы, цифры, дефис и подчеркивание (в полной аналогии с правилами, по которым можно создавать Урлы — ,,,[_],[-]).
При этом, якорь не будет виден на самой странице, т.к. внутри элементов «A» мы не прописали никакого текста. Однако, созданные таким вот образом anchor будут загрязнять Html код, и поэтому сейчас гораздо чаще чем якоря используют другой способ создания метки .
В этом случае не нужно создавать пустой тег «А», а можно использовать любой из уже имеющихся в нужном месте текста элемент. Например, это могут быть .
Т.е. для создания аналога якоря достаточно прописать к любому тегу универсальный атрибут ID (его можно будет использовать для всех тегов, и на его основе, кстати, работают ), например, так:
Текст заголовка
Так, теперь вместо создания нужного количества anchor, загрязняющих код и являвшихся на данный момент не валидными (не рекомендуемыми консорциумом W3C, который и разрабатывает язык Html), мы просто добавляет Id.
Оказывается, что для этого нужно будет, как обычно, внутри гиперссылки «А» вставить обязательный атрибут «Href», но значение которого будет формироваться из имени нужной метки (якоря) с предваряющим его знаком решетки «#» , которая еще имеет название хеш (отсюда, кстати, и растут ноги у часто используемого названия: хеш ссылки):
перекинет на место страницы, помеченной якорем
Обратите внимание, что при переходе по такой гиперссылке, открытия нового документа не произойдет. Браузер прокрутит уже открытую страницу до такого положения, чтобы место в тексте, куда вы вставили anchor, заняло позицию в самом верху экрана. Логично было бы предположить, что значения всех меток (якорей) на одной странице должно быть уникальным во избежании непоняток для браузера.
Если вы делаете якорь с помощью атрибута ID в удобно расположенном для этого теге, то нужно учитывать, что кроме ограничения по типу используемых символов (,,,[_],[-]), значение ID обязательно должно начинаться с символа латинской буквы .
Потом могут располагаться все допустимые символы в любом количестве, но первым символом метки якоря в значении атрибута ID обязательно должна быть буква (латинская, естественно). В противном случае такой якорь, вставленный в Html код, работать не будет (в большинстве браузеров).
Если вы не пропишите после символа решетки «#» никакого названия метки якоря (href="#"), то такая гиперссылка прокрутит страницу к началу . Именно так можно будет создать простейшую кнопку «Наверх», сделав ссылку с картинки (поговорим об этом чуть ниже) и вставив ее в шаблоне своего сайта, например, так:
Href — обязательный атрибут тега любой гиперссылки
Теперь давайте перейдем от навигации внутри документа (с помощью якорей) к навигации внешней, т.е. нам нужно будет сделать ссылки, ведущие на другие документы нашего или же другого сайта. Теперь в атрибуте Href нам нужно прописывать уже не метки якорей, а путь до открываемого файла (страница по своему замыслу является файлом, подгружаемым в браузер для последующего отображения).
анкор
Тут дальше речь должна пойти об , но я о них уже более чем подробно писал в упомянутом материале, поэтому повторяться, наверное, не имеет смысла. Но знать, как можно задать путь до файла в атрибуте Href сделанной вами гиперссылки, нужно обязательно. Поэтому не примените ознакомиться с приведенным материалом.
Однако, напомню, при создании Урлов предпочтительнее использовать только следующие символы : (,,,[_],[-]) и не использовать пробелы. Если мы рассматриваем содержимое атрибута Href для абсолютных ссылок, то схематично это можно будет представить так:
Если отбросить то, что вы редко будете использовать, то можно представить все то же самое в несколько упрощенном виде:
Протокол(обычно http)://доменное_имя (например, сайт)/путь_до_файла (web страницы)
Кроме простого протокола http на просторах интернета вы можете встретить ссылки с протоколом https, который отличается тем, что в нем применяется шифрование. Последний применяется на сайтах, где есть необходимость защитить канал обмена данными между сервером и браузером клиента. Например, он используется на сервисах электронных денег Веб Мани.
В интернете вы можете встретить различные варианты содержимого Href, например, такой:
Https://сайт/videokursy
Или такой (с расширением для файла):
Https://сайт/seo/kak-raskrutit-sajt.html
Сути это не меняет, а вот если в конце содержимого атрибута Href внутри гиперссылки будет стоять слэш, то это значит, что обращение идет уже не к файлу, а к папке, в которой будет искаться соответствующий индексный объект (подробнее об этом читайте в статье по url адресам упомянутой выше).
Скачать что-то по ссылке
Как видите, данная гиперссылка ничем не отличается от обычной, просто браузер понимает, что файл с расширение zip ему нужно именно скачать, а не пытаться открыть для просмотра, как, например, файлы документа с расширением html. Хотя, вы все это можете настроить сугубо индивидуально в своем браузере под свои личные нужды.
Скачать с Ftp сервера
Можно еще, например, создать (почтовый), добавив в Href соответствующий Url:
Написать письмо
При переходе по такой ссылке у вас на компьютере откроется используемая вами по умолчанию почтовая программа (в браузере можно настроить, чтобы линки с mailto в Href открывались в Gmail, в и др.) и появится диалог создания нового письма, в котором в поле «Кому» будет вставлен приведенный в Href почтовый адрес.
На самом деле, можно сделать довольно сложные почтовые ссылки, с помощью которых будут заполняться и другие поля в диалоге отправки письма, но используется это довольно редко.
Да и вообще, вебмастера последнее время практически перестали использовать гиперссылки с mailto в Href из-за того, что их парсят спамеры со всеми вытекающими последствиями. Лучше создать на сайте , хотя у меня по-прежнему все представлено в классическом виде на странице с контактами. Надо бы поменять на досуге (или не надо... подумаю).
Как открыть ссылку в новом окне (target blank)
При создании ссылок в Html коде перед нами часто встает вопрос — в каком окне браузера открывать тот документ, на который она ведет? По умолчанию он будет открываться в уже имеющемся окне, перекрывая собой ту страницу, с которой была проставлена данная гиперссылка.
Лично я большой сторонник атрибута Target со значением blank , который позволяет открывать страницу в новом окне, оставляя открытой и тот документ, где была проставлена данная ссылка. Не знаю, как это влияет на юзабилити моего блога, но мне этот вариант нравится больше и я его использую практически во всех случаях.
В поисковиках мне тоже нравится настраивать открывание ссылок в новом окне , чтобы выдача всегда была под рукой и всегда можно было бы в нее вернуться. Для этих целей, как уже упомянул, в Html используется специальный атрибут Target, который по умолчанию имеет значение Self:
Откроет документ в этом же окне
Хотя, конечно же, target="_self" в теге «A» никто не прописывает, ибо это значение используется по умолчанию, а вот если нужно открыть страницу в новом окне, то нужно будет прописать target="_blank":
Откроется в новом окне
Обратите внимание, что значения атрибута Target пишутся со знаком подчеркивания вначале (_blank), ибо так оговорено в валидаторе Wc3, содержащем норы языка гипертекстовой разметки. Что примечательно, в Html предусмотрена возможность изменить вариант открытия ссылки принятый по умолчанию.
Например, если вы захотите, чтобы все гиперссылки вашего сайта открывались в новом окне, то нужно будет в области Head, используемого вами шаблона, прописать тег Base с атрибутом target="_blank":
И теперь, если какую-то из ссылок вы захотите открывать в этом же окне, то в ее тег «A» вам уже нужно будет добавить target="_self", ибо по умолчанию сейчас у вас теперь используется _blank. О, как.
Кстати, элемент Base я использовал описанным выше способом, но и заключал в него область кода с несколькими гиперссылками, которые нужно было открыть в новом окне. Т.е. я использовал еще и закрывающий тег Base внутри области Body, и все работало. Хотя такой код, конечно же, получается не валидным.
Цвета гиперссылок при наведении и переходе — как их поменять
В языке Html было так задумано, чтобы пользователю легко было ориентироваться в том, какую ссылку он уже открывал, а какая еще осталась нетронутой.
Для этой цели используется цвет, который будет изменяться в том случае, когда пользователь щелкнет по гиперссылке и подвешенный на нее документ успешно откроется. Вернувшись обратно на исходную страницу пользователь обнаружит, что посещенная им ссылка поменяла цвет. Такой фокус умеют проделывать все браузеры.
По умолчанию, в чистом Html (без использования свойств CSS) ссылки выделяются подчеркиванием и могут иметь три варианта цвета :
- Синий — цвет для неотработанных ссылок, по которым пользователь еще не кликал
- Красный — его принимает гиперссылка сразу после щелчка по ней и до тех пор, пока запрошенный документ не будет загружен в браузер пользователя по сети (в современных условиях уловить этот момент бывает совсем не просто и всему виной повсеместно )
- Пурпурный — цвет для отработанных линков, по которым уже прошелся пользователь
В Html 4.01 эти цвета для ссылок приняты по умолчанию, но их можно изменить при помощи специальных атрибутов, которые прописываются в тег Body, который вы сможете найти в одном из файлов используемого вами шаблона. Для изменения всех трех цветов используются, соответственно, три атрибута:
- Link — задается цвет не посещенной ссылки
- Alink — цвет активной в данный момент, которая отрабатывается браузером
- Vlink — цвет уже посещенной пользователем гиперссылки
Помните, я уже писал о том, как задаются . В соответствии с этим упомянутые атрибуты могут выглядеть так:
Естественно, что здесь имелся в виду вариант чистого Html, когда по каким-либо причинам не удобно или не возможно использовать стилевое оформление, в противном случае все эти цвета можно будет легко задать и поменять с помощью .
Как сделать картинку ссылкой — два способа
Ну, тут совсем все просто. Т.к. является строчным элементом, то по большому счету любое изображение можно считать просто буквой, разве что только большего размера.
В случае чистого Html вокруг картинки, которую вы сделали ссылкой, у вас появится рамочка шириной в три пикселя . Причем цвет этой рамочки будет полностью соответствовать цветам ссылок принятым для вашего сайта (о них мы говорили чуть выше по тексту).
Чтобы удалить добавление рамочки к картинке, которую вы сделали гиперссылкой, вам нужно добавить атрибут Border со значением ноль в тег Img:
Это очень простой способ сделать картинку ссылкой, но есть и более сложный вариант, называемый картой изображений . В этом случае, благодаря использованию довольно-таки большого числа Html тегов и атрибутов, можно сделать из одной картинки целую карту ссылок с активными областями (кликабельными и имеющими различные формы — прямоугольник, окружность, многоугольник).
Например, вы можете разместить большое фото у себя на странице и сделать так, чтобы при щелчке по разным его частям открывались бы различные страницы по различным гиперссылкам. На самом деле, описывать карту изображений довольно долго, да и вряд ли кто-то в будет ее использовать, поэтому я этого делать не буду, ибо «овчинка выделки не стоит».
Удачи вам! До скорых встреч на страницах блога сайт
посмотреть еще ролики можно перейдя на");">
Вам может быть интересно
Select, Option, Textarea, Label, Fieldset, Legend - теги Html формы выпадающих списков и текстового поля
Как вставить в HTML ссылку и картинку (фото) - теги IMG и A
Iframe и Frame - что это такое и как лучше использовать фреймы в Html
Пробельные символы и форматирование ими кода в Html, а так же спецсимволы неразрывного пробела и другие мнемоники
Как задаются цвета в Html и CSS коде, подбор RGB оттенков в таблицах, выдаче Яндекса и других программах
The border-radius property does not apply to table elements when have shared or separate borders."> border-collapse is collapse .
Note: As with any shorthand property, individual sub-properties cannot inherit, such as in border-radius:0 0 inherit inherit , which would partially override existing definitions. Instead, the individual longhand properties have to be used.
Syntax
/* The syntax of the first radius allows one to four values */ /* Radius is set for all 4 sides */ border-radius: 10px; /* top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10px 5%; /* top-left | top-right-and-bottom-left | bottom-right */ border-radius: 2px 4px 2px; /* top-left | top-right | bottom-right | bottom-left */ border-radius: 1px 0 3px 4px; /* The syntax of the second radius allows one to four values */ /* (first radius values) / radius */ border-radius: 10px 5% / 20px; /* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10px 5% / 20px 30px; /* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */ border-radius: 10px 5px 2em / 20px 25px 30%; /* (first radius values) / top-left | top-right | bottom-right | bottom-left */ border-radius: 10px 5% / 20px 25em 30px 35em; /* Global values */ border-radius: inherit; border-radius: initial; border-radius: unset;The border-radius property is specified as:
- one, two, three, or four CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow.">
or CSS data type represents a percentage value. It is often used to define a size as relative to an element" s parent object. numerous properties can use percentages such as width height margin padding and font-size.> values. This is used to set a single radius for the corners. - followed optionally by "/" and one, two, three, or four
or Values. This is used to set an additional radius, so you can have elliptical corners.
Values
| radius | Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> |
|
| top-left-and-bottom-right | Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> |
|
| top-right-and-bottom-left | Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> |
|
| top-left | Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> |
|
| top-right | Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> |
|
| bottom-right | Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> |
|
| bottom-left | Is a CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow."> |
Border-radius: 1em/5em; /* ... is equivalent to: */ border-top-left-radius: 1em 5em; border-top-right-radius: 1em 5em; border-bottom-right-radius: 1em 5em; border-bottom-left-radius: 1em 5em; border-radius: 4px 3px 6px / 2px 4px; /* ... is equivalent to: */ border-top-left-radius: 4px 2px; border-top-right-radius: 3px 4px; border-bottom-right-radius: 6px 2px; border-bottom-left-radius: 3px 4px;
Formal syntax
1,4 / 1,4where The compatibility table in this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. Update compatibility data on GitHub Notes
Notes
Prefixed
Notes
Notes
Prefixed
Notes
Notes
Notes
Notes
Prefixed
Prefixed
Prefixed
Notes
Notes
Prefixed
Notes
Notes
Notes
Notes
Notes
Notes
CSS3-рамка
дополняет возможности форматирования границ элементов с помощью свойств, позволяющих закруглить углы
элемента, а также использовать изображения
для оформления границ элемента. IE:
9.0 Свойство позволяет закруглить углы строчных и блочных элементов. Кривая для каждого угла определяется с помощью одного или двух радиусов, определяющих его форму — круга
или эллипса
. Радиус распространяется на весь фон, даже если элемент не имеет границ, точное положение секущей определяется с помощью свойства background-clip . Свойство border-radius позволяет закруглить все углы одновременно, а с помощью свойств border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius можно закруглить каждый угол отдельно. Если задать два значения для свойства border-radius , то первое значение закруглит верхний левый
и нижний правый угол
, а второе — верхний правый
и нижний левый
. Значения, заданные через / , определяют горизонтальные
и вертикальные радиусы
. Свойство не наследуется. Варианты
Div {width: 100px; height: 100px; border: 5px solid;}
.r1 {border-radius: 0 0 20px 20px;}
.r2 {border-radius: 0 10px 20px;}
.r3 {border-radius: 10px 20px;}
.r4 {border-radius: 10px/20px;}
.r5 {border-radius: 5px 10px 15px 30px/30px 15px 10px 5px;}
.r6 {border-radius: 10px 20px 30px 40px/30px;}
.r7 {border-radius: 50%;}
.r8 {border-top: none; border-bottom: none; border-radius: 30px/90px;}
.r9 {border-bottom-left-radius: 100px;}
.r10 {border-radius: 0 100%;}
.r11 {border-radius: 0 50% 50% 50%;}
.r12 {border-top-left-radius: 100% 20px; border-bottom-right-radius: 100% 20px;}
IE:
11.0 Свойство позволяет устанавливать изображение в качестве рамки элемента. Основное требование, предъявляемое к изображению — оно должно быть симметричным. Свойство включает в себя следующие значения: {border-image: width source slice repeat outset;} . При помощи такого простого изображения можно получить вот такие рамки для элемента.
/* Пример 1 */
div {
width: 260px; height: 100px;
border-style: solid;
border-image-width: 15px;
border-image-source: url(border_round.png);
border-image-slice: 30;
border-image-repeat: stretch;
}
/* Пример 2 */
div {
width: 260px; height: 100px;
border-style: solid;
border-image-width: 15px;
border-image-source: url(border_round.png);
border-image-slice: 30;
border-image-repeat: round;
}
Cрезы A — B — C — D образуют углы рамки, а часть рисунка, расположенная между ними, заполняет оставшееся пространство рамки в соответствии с заданным значением свойства border-image-repeat . Размер угловой части (в данном примере это число 30), задается с помощью значения свойства border-image-slice . Свойство задаёт ширину изображения для границы элемента. Если ширина не задана, то по умолчанию она равна 1 . Синтаксис
Div {border-image-width: 30px;}
Рис. 3. Пример задания ширины рамки-изображения с помощью различных типов значений
Свойство задаёт путь к изображению, которое будет использоваться для оформления границ блока. Синтаксис
Div {border-image-source: url(border.png);}
Свойство определяет размер частей изображения, используемых для оформления границ элемента и делит изображение на девять частей: четыре угла, четыре края между углами и центральную часть. Синтаксис
Div {border-image-slice: 50 20;}
Свойство управляет заполнением фоновым изображением пространства между углами рамки. Можно задавать как с помощью одного значения, так и с помощью пары значений. Синтаксис
Div {border-image-repeat: repeat;}
Рис. 5. Пример повтора центральной части рамки-изображения с помощью различных типов значений
Свойство позволяет переместить изображение-рамку за пределы границ элемента на указанную длину. Может задаваться как с помощью одного, так и четырёх значений. Синтаксис
Div {border-image-outset: 10px;}
Свойство задаёт расстояние между границей элемента border и внешней границей, созданной с помощью свойства outline . Значением border-image может выступать не только изображение, но и градиентная заливка. В качестве одного из цветов выступает transparent . Таким способом можно задавать границы сразу для всех сторон элемента или по отдельности для каждой стороны. Толщина рамки регулируется свойством border-width .
Examples
border: solid 10px;
/* the border will curve into a "D" */
border-radius: 10px 40px 40px 10px;
border: groove 1em red;
border-radius: 2em;
background: gold;
border: ridge gold;
border-radius: 13em/3em;
border: none;
border-radius: 40px 10px;
border: none;
border-radius: 50%;
border: dotted;
border-width: 10px 4px;
border-radius: 10px 40px;
border: dashed;
border-width: 2px 4px;
border-radius: 40px;
Live Samples
Specifications
Specification
Status
Comment
CSS Backgrounds and Borders Module Level 3
The definition of "border-radius" in that specification.
Candidate Recommendation
Initial definition
Initial value
Applies to
all elements; but User Agents are not required to apply to table and inline-table elements when have shared or separate borders."> border-collapse is collapse . The behavior on internal table elements is undefined for the moment.. It also applies to ::first-letter .
Inherited
no
Percentages
refer to the corresponding dimension of the border box
Media
visual
Computed value
as each of the properties of the shorthand:
Animation type
as each of the properties of the shorthand:
Canonical order
the unique non-ambiguous order defined by the formal grammar
Browser compatibility
Desktop
Mobile
Chrome
Edge
Firefox
Internet Explorer
Opera
Safari
Android webview
Chrome for Android
Edge Mobile
Firefox for Android
Opera for Android
Safari on iOS
Samsung Internet
border-radius
Chrome
Full support
4 Edge
Full support
12 Full support
12
Full support
12 Firefox
Full support
4 IE
Full support
9
Opera
Full support
10.5 Safari
Full support
5 WebView Android
Full support
2 Edge Mobile
Full support
Yes Full support
Yes
Full support
Yes Firefox Android
Full support
4 Opera Android
Full support
Safari iOS
Full support
Yes
Elliptical borders
Chrome
Full support
Yes Edge
Full support
12
Firefox
Full support
3.5
IE
Full support
Yes
Opera
Full support
Yes
Safari
Full support
Yes WebView Android
?
Chrome Android
Full support
Yes
Firefox Android
Full support
4
Safari iOS
?
Samsung Internet Android
Full support
Yes
4 values for 4 corners
Chrome
Full support
4
Edge
Full support
12
Firefox
Full support
Yes
IE
Full support
Yes
Opera
Full support
Yes
Safari
Full support
5
WebView Android
?
Chrome Android
Full support
Yes
Edge Mobile
Full support
Yes
Firefox Android
Full support
Yes
Opera Android
No support
No
Safari iOS
?
Samsung Internet Android
Full support
Yes
Percentages
Chrome
Full support
Yes Edge
Full support
12
Firefox
Legend
Full support
Full support
No support
No support
Compatibility unknown
Compatibility unknown See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
See also
Закруглённые углы и рамки-изображения
1. Закругление углов с помощью border-radius
Поддержка браузерами
Firefox:
4.0
Chrome:
4.0
Safari:
5.0, 3.1 -webkit-
Opera:
10.5
iOS Safari:
7.1
Opera Mini:
—
Android Browser:
4.1
Chrome for Android:
44
Рис. 1. Примеры различных вариантов закругления углов блока
2. Рамки-изображения border-image
Поддержка браузерами
Firefox:
15.0, 3.5 -moz-
Chrome:
16.0, 7.0 -webkit-
Safari:
6.0, 3.0 -webkit-
Opera:
15.0, 11.0 -o-
iOS Safari:
7.1
Opera Mini:
8 -o-
Android Browser:
4.4, 4.1 -webkit-
Chrome for Android:
42
Рис. 2. Пример оформления границ блока с помощью изображения
2.1. Ширина рамки-изображения border-image-width
border-image-width
Значения:
длина
Устанавливает ширину рамки в единицах длины — px / em . Можно задавать от одной до четырех значений одновременно. Если задано одно значение, то ширина всех сторон рамки одинакова, два значения задают ширину верхней-нижней и правой-левой и т.д.
число
Числовое значение, на которое умножается значение border-width .
%
Ширина рамки элемента вычисляется относительно размера изображения. Горизонтальные относительно ширины, вертикальные - относительно высоты.
auto
Соответствует значению border-image-slice .
initial
inherit
2.2. Ресурс рамки-изображения border-image-source
2.3. Элементы рамки-изображения border-image-slice
Значения:
число
Размер частей рамки можно задавать с помощь одного, двух, трех или четырех значений.
Одно значение устанавливает границы одинакового размера для каждой стороны элемента.
Два значения: первое определяет размер верхней и нижней границы, второе - правой и левой.
Три значения: первое определяет размер верхней границы, второе - правой и левой, а третье - нижней границы.
Четыре значения: определяет размеры верхней, правой, нижней и левой границы.
Числовое значение представляет количество px .
%
Размеры границ рассчитываются относительно размера изображения. Горизонтальные относительно ширины, вертикальные - относительно высоты.
fill
Значение указывается вместе с числом или процентным значением. Если оно задано, изображение не обрезается внутренним краем рамки, а заполняет также область внутри рамки.
initial
Устанавливает это свойство в значение по умолчанию.
inherit
Наследует значение этого свойства от родительского элемента.
Рис. 4. Пример задания срезов рамки-изображения
2.4. Повтор рамки-изображения border-image-repeat
2.5. Смещение рамки-изображения border-image-outset
Рис. 6. Пример смещения рамки-изображения с помощью различных типов значений
3. Смещение внешней рамки outline-offset
Рис. 7. Пример оформления изображения внешней рамкой
4. Градиентная рамка
Полупрозрачная рамка
Почтовый конверт
