В этом курсе мы узнаем все об одном из наиболее значительных изобретений в истории Web — ссылках. Ссылки позволяют читателю документа переходить по ним к другому документу и перемещаться с сервера на сервер, не создавая новое соединение. Много изменений произошло с тех пор, как они впервые были изобретены, но одно остается неизменным: ссылки являются очень важной частью использования Web, и можно облегчить или затруднить жизнь посетителям Web-сайта, в зависимости от того, как они используются.
После изучения этой лекции вы узнаете, как создавать ссылки, которые легко понять и использовать в любой рабочей среде. Более того, вы узнаете, как ссылки влияют на вашу популярность в поисковых системах, и получите несколько советов, как лучше сформулировать ссылки. Как обычно, имеется дополнительный zip-файл (http://dev.opera.com/articles/view/18-html-links-let-s-build-a-web/links_code.zip), который содержит несколько файлов, которые используются во время изложения материала. Лекция имеет следующую структуру:
id и href title Ссылки являются частью Web-сайта (созданного обычно с помощью HTML, но не всегда), которые указывают на другие ресурсы — другие документы HTML, текстовые файлы, файлы PDF, и т.д. Существуют ссылки, по которым браузер должен переходить автоматически, созданные с помощью элементов (вы уже встречали некоторые из них в предыдущих лекциях — они используются для импорта файлов CSS в документ HTML), и существуют также ссылки, которые пользователь не обязан активировать. Они называются a.
Любой строковый элемент в документе можно превратить в анкерную ссылку, добавляя вокруг него элемент a. Например, в следующем документе HTML текст Yahoo Developer Network превращен в ссылку (linkexample.html).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Link Example</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>A link to the YDN</h1> <p><a href="http://developer.yahoo.com">Yahoo Developer Network</a></p> </body> </html>
Посетители, активирующие эту ссылку (щелкая на ней мышью или активируя ее с помощью клавиатуры или голоса в некоторых случаях) покинут текущий сайт и перейдут на YDN. Имеются дополнительные изменения, происходящие в самой ссылке, и мы увидим их позже, когда будем говорить о стилевом оформлении ссылки.
href - ресурс, на который указывает id - ID title - дополнительная информация о внешнем ресурсе.Давайте рассмотрим сначала наиболее важные атрибуты, а затем поговорим о том, что можно сделать, чтобы облегчить посетителям восприятие ссылок.
Элемент a может играть несколько ролей в зависимости от заданных атрибутов. Наиболее часто используется атрибут , который определяет ресурс, на который указывает ссылка. Этот атрибут может содержать различные значения:
"../../help/help.html" ), абсолютно, относительно корня сервера (например, "/help/help.html" ) или вообще на другом сервере (например, "http://wait-till-i.com", или "ftp://ftp.opera.com/", или "http://developer.yahoo.com/yui" )."#menu" ). Это является указателем на цель внутри того же самого документа. href с URL, за которым следует "http://developer.yahoo.com/yui/#cheatsheets" ).Любое из этих значений делает элемент a ссылкой, так как он указывает куда-то в другое место. С другой стороны атрибут id сделает его на странице a ). Чтобы легче запомнить, представляйте это следующим образом: атрибут id делает ссылку
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Different Link Example</title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
<h1>Different Link examples</h1>
<h2>Example of in-page navigation with fragment identifiers, links and anchors</h2>
<div id="nav">
<ul id="toc">
<li><a href="#sec1">Section One</a></li>
<li><a href="#sec2">Section Two</a></li>
<li><a href="#sec3">Section Three</a></li>
<li><a href="#sec4">Section Four</a></li>
<li><a href="#sec5">Section Five</a></li>
</ul>
</div>
<div id="content">
<div>
<h2><a id="sec1">Section #1</a></h2>
<p><a href="#toc">Back to menu</a></p>
</div>
<div>
<h2><a id="sec2">Section #2</a></h2>
<p><a href="#toc">Back to menu</a></p>
</div>
<div>
<h2><a id="sec3">Section #3</a></h2>
<p><a href="#toc">Back to menu</a></p>
</div>
<div>
<h2><a id="sec4">Section #4</a></h2>
<p><a href="#toc">Back to menu</a></p>
</div>
<div>
<h2><a id="sec5">Section #5</a></h2>
<p><a href="#toc">Back to menu</a></p>
</div>
</div>
<h2>Some other link examples</h2>
<ul>
<li><a href="http://developer.yahoo.com">Yahoo Developer Network</a></li>
<li><a href="http://dev.opera.com/articles/view/the-freelancing-business-part-1-pricing/#marketing">Tips on marketing yourself</a></li>
<li><a href="ftp://get.opera.com/pub/opera/win/">Download different Opera versions</a></li>
<li><a href="http://farm1.static.flickr.com/56/188791635_0b8bdd808d.jpg?v=0">Photo of my book</a></li>
</ul>
</body>
</html>
Откройте этот файл в браузере и поэкспериментируйте с ним. Вы обнаружите, что активация любой из ссылок в первом списке вызывает переход в соответствующий раздел документа. Это связано с тем, что они связаны одним идентификатором фрагмента — первая ссылка в списке, например, имеет атрибут со значением #sec1, что совпадает со значением ID ссылки в первом элементе h2 контента. Это все, что нужно сделать, чтобы соединить два анкерных элемента в документе — использовать то же самое значение в атрибуте ссылки с предшествующим символом решетки, если это значение присутствует в атрибуте id. Можно также заметить, что URL в строке адреса в браузере изменился, и показывает теперь в конце
Однако, если активировать любую из ссылок "Back to menu", происходит то же самое. Как это возможно? Идентификатором фрагмента может быть любой элемент с атрибутом ID. Повторим вкратце:
href - этот # ).id, имеющим это значение. Значения ID на каждой странице должны быть уникальными.Это охватывает меню и различные разделы в примере, но как насчет других ссылок? Если проверить их, то можно увидеть, что они указывают на различные цели — одна переходит на другой сайт, другая выводит фотографию, а третья показывает определенный раздел другой Web-страницы (находимую при переходе к указанному ID). Если все это работает, то отлично — но как быть, если вы или ваш браузер не можете понять некоторые из этих ресурсов?
Самое важное, что нужно помнить о ссылках, состоит в том, что они являются существенной частью отношений с посетителями. Они считают, что когда вы предлагаете им ссылку, они могут перейти по ней и получить хорошую, подходящую информацию. Если ссылки не работают, так как указанный ресурс недоступен, или представлен в формате, который посетитель не может использовать, то вы не оправдали надежду и теряете доверие. Не позволяйте такому происходить.
Как почти для любого другого элемента HTML в элемент a можно добавить атрибут , чтобы предоставить некоторую дополнительную информацию. Браузеры показывают так называемую всплывающую подсказку, когда посетители проводят курсором своей мыши над ссылкой. Эта всплывающая подсказка сообщает информацию о ссылке. Например, можно дать небольшое введение в содержание и расположение присоединенного по ссылке документа (titleexample.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Adding extra information with a title attribute</title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
<h1>Adding extra information with a title attribute</h1>
<ul>
<li>Find more information on the <a title="The Yahoo Developer Network is the main hub
for all the developer tools Yahoo offers, including the Yahoo User Interface Library (YUI)
and the Design Patterns repository"
href="http://developer.yahoo.com">Yahoo Developer Network</a>.</li>
</ul>
</body>
</html>
Однако нельзя надеяться, что посетители обладают достаточным терпением и точной координацией, чтобы полагаться на это средство для критически важной информации. Пользователи с недостатками зрения, которые вообще не могут видеть страницу, скорее всего не смогут добраться до этой информации. Хотя считыватели экрана имеют возможность читать атрибуты для конечного пользователя, она выключена по умолчанию — именно поэтому никогда не нужно использовать атрибут для критически важной информации о ссылке. Критически важной может быть следующая информация:
Может быть очень досадно, когда после щелчка на ссылке браузер не знает, что делать с тем, на что указывает эта ссылка. Однако достаточно часто можно видеть Web-сайты со ссылками на изображения, документы PDF, и видео, которые не предупреждают об этом посетителей. Видео особенно часто становится причиной для отказа браузеров. Более того, ресурс может быть большим по объему (PDF файл размером 20 Мбайтов, например), который посетитель мог бы предпочесть загрузить, а не открывать в браузере, или вообще не обращаться к этому документу.
Одним из важнейших факторов успеха Web-продукта является исключение для людей необходимости догадываться, что произойдет, когда они выполнят какое-то действие, и четко сообщить им вместо этого, какой результат будет иметь их действие. В случае ссылок для исключения разочарования достаточно сообщить посетителям, с каким ресурсом соединяется ссылка. Вот несколько примеров (linkingnonhtml.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Linking non-HTML resources</title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
<h1>Linking non-HTML resources</h1>
<ul>
<li>Find more information on the <a href="http://developer.yahoo.com">Yahoo Developer Network site (external)</a></li>
<li>Download the <a href="http://www.wait-till-i.com/stuff/JavaScript-DOM-Cheatsheet.pdf">Dom Cheatsheet (PDF, 85KB)</a></li>
<li>Pick and <a href="ftp://get.opera.com/pub/opera/win/">download different Opera versions from their FTP (external)</a></li>
<li>Check out a <a href="http://farm1.static.flickr.com/56/188791635_0b8bdd808d.jpg?v=0">Photo of my book (JPG, 200KB)</a></li>
</ul>
</body>
</html>
Предоставляя такую информацию о файле ссылки и его размере, вы оставляете принятие решения о том, что с ним делать, посетителям, а не предполагаете, что они имеют определенные настройки браузера или установленное программное обеспечение. Если соединить это с хорошим стилевым оформлением, то можно даже заставить это выглядеть симпатичным и интуитивно понятным. Если вы хотите быть совершенно безопасным, предложите также раздел справки, который поясняет, что означают различные форматы файлов, и где можно взять программное обеспечение, необходимо для их вывода.
Один из самых больших страхов руководителей компаний, когда речь идет о Web-сайте компании, состоит в том, что люди покидают сайт преждевременно. Это часто является причиной отсутствия ссылок на сторонние сайты (если только владельцы этих сайтов не платят деньги за право получения направленного им Web-трафика). Я вернусь к этому ошибочному решению позже; пока давайте поговорим о том, что делают люди, чтобы избежать ухода посетителей со своего сайта, и как эти меры влияют на успех сайта.
Страх ухода посетителей на другие сайты вместе с желанием иметь на них ссылку, породили несколько изобретений в разработке приложений Web, которые годами были помехой для создания удобных для использования сайтов: фреймы и всплывающие окна.
Использование фреймов HTML означает, что вы делите выводимую в браузере страницу на несколько различных документов. Преимущество состоит в том, что документ по внешнему виду остается таким же, даже когда части его загружаются либо с вашего собственного сервера, либо с серверов сторонних компаний. Однако именно здесь заканчивается полезность — фреймы являются ужасным опытом пользователей и фактически вредными.
Ссылки внутри множества фреймов используют атрибут target в этом фрейме. Если множество фреймов недоступно (например, когда посетитель находит документ со ссылками через поисковую систему), каждая ссылка открывается в новом экземпляре браузера.
Открытие нового экземпляра браузера является другим распространенным способом соединения со сторонними сайтами — либо с помощью сценарного всплывающего окна, либо с помощью атрибута target со значением _blank. Тот факт, что каждый современный браузер поставляется со средством блокирования всплывающих окон должен подсказать, что использование такого подхода является совершенно неоправданным.
Короче говоря: не используйте атрибут target при создании ссылок, если только вы действительно знаете, что делаете. Однако это устаревшая идея — сегодня большинство браузеров имеют интерфейсы с вкладками, поэтому пользователи могут открывать сторонние сайты в фоновом режиме для дальнейшего чтения, оставаясь на вашем сайте. При некоторых обстоятельствах может понадобиться указать различие между внешними и внутренними ссылками, но всегда оставляйте на усмотрение посетителя, что они захотят с ними сделать.
Существует несколько серьезных причин для создания ссылок на сторонние сайты, даже когда они являются конкурентами.
Полезность входящих ссылок (ссылок, указывающих с внешнего сайта на ваш) менее дискуссионна. Чем более убедительные и высококачественные сайты ссылаются на ваш с помощью подходящих ключевых слов, тем выше вы будете ранжированы в поисковых системах, таких как Google. Однако, прежде чем это произойдет, необходимо доказать, что вы также не боитесь ссылаться на других.
Подходящие ключевые слова ведут нас к другой очень важной части создания хороших ссылок: как их формулировать.
Частично этот вопрос уже рассматривался в разделе о ссылках на ресурсы, отличные от HTML, но можно лишний раз напомнить себе, что ссылки являются не только частью основного текста, но являются также интерактивными элементами в документе.
Некоторые вспомогательные технологии предлагают список ссылок вместо целого документа, чтобы позволить посетителям быстро по ним перемещаться, что означает, что необходимо сделать так, чтобы текст ссылок имел смысл вне контекста, в котором они находятся. Можно легко проверить это в браузере Opera, открывая Web-сайт и выбирая в меню Tools > Links или нажимая Ctrl + Alt + L. Будет создана новая вкладка, которая показывает все ссылки в документе, и куда они указывают.
Это означает, что необходимо гарантировать не только что тексты ссылок имеют смысл, но также что нет ссылок, которые имеют одинаковое выражение, но указывают на различные ресурсы. Классической ошибкой здесь являются ссылки "щелкните здесь", представленные например как "Для загрузки последней версии нашего инструмента щелкните здесь". Значительно лучше использовать текстовую ссылку, которая поясняет, на что она указывает — в данном случае "Вы можете загрузить последнюю версию нашего инструмента и проверить его самостоятельно".
То же самое применимо к ссылкам "продолжение". Они часто встречаются на новостных сайтах, где вы получаете заголовок и текст анонса и ссылку для перехода "продолжение" или "полная история". Решение этой проблемы состоит либо в использовании ссылочного изображения "продолжение" и задание для него уникального альтернативного текста, либо в добавлении интервала внутрь ссылки после "продолжение" и сокрытие его с помощью CSS. Вы узнаете больше об этих приемах в руководстве о меню и навигации позже в ходе курса.
Bы пока еще не добрались в этом курсе до CSS, но будет полезно рассмотреть в этом месте, что способ представления ссылок очень важен, и что имеется несколько различных состояний ссылки, которые надо учитывать. Состояниями (которые позже свяжутся с псевдо селекторами CSS — это звучит угрожающе, но это не сложно) являются:
link - состояние по умолчанию - оно определяет, как должны выглядеть ссылки в определенной части документа. По умолчанию непосещенные ссылки имеют синий цвет.visited - стиль ссылки, которая уже была посещена раньше (онa может уже находиться в кеше браузера). По умолчанию посещенные ссылки имеют пурпурный цвет.hover - стиль ссылки, когда курсор мыши находится над ней.active - стиль ссылки, когда она активируется, т.е. когда выполняется соединение с другим сайтом; это также стиль последней активированной ссылки, когда вы снова возвращаетесь к документу в своем браузере.Мы рассмотрели в этот раз достаточно много, но очень важно помнить, как работают ссылки, и что они должны делать. Вы узнаете много приемов и методов за свою карьеру разработчика Web, позволяющих переопределить это поведение по умолчанию, и я надеюсь, что вы остановитесь и задумаетесь, действительно ли нужно то, что вы собираетесь сделать.
Мы рассмотрели следующие вопросы:
a и его (неисключенные) атрибуты.a в качестве ссылок (с атрибутом href ) и name ). title , которая выводится как всплывающая подсказка - и почему это не является безопасным способом предоставления критически важной информации.С этими знаниями вы сможете создать документы HTML, которые правильно используют ссылки, и вы будете готовы двигаться дальше к рассмотрению меню и навигации по сайту.
<a href="report.pdf" title="report as PDF, 2.3MB">get our latest report</a>?target, и имеются ли для него хорошие применения?Крис Хайлман проработал Web-разработчиком в течение десяти лет, после того как бросил радио-журналистику. Он работает для Yahoo! в Великобритании в качестве инструктора и ведущего разработчика, и осуществляет надзор за качеством кода
Крис поддерживает блог на сайте Wait till I come (http://wait-till-i.com/) и доступен во многих социальных сетях под ником "codepo8".
Bluesmoon (http://www.flickr.com/photos/bluesmoon/1545636474/)
В этом курсе мы узнаем все об одном из наиболее значительных изобретений в истории Web — ссылках. Ссылки позволяют читателю документа переходить по ним к другому документу и перемещаться с сервера на сервер, не создавая новое соединение. Много изменений произошло с тех пор, как они впервые были изобретены, но одно остается неизменным: ссылки являются очень важной частью использования Web, и можно облегчить или затруднить жизнь посетителям Web-сайта, в зависимости от того, как они используются.
После изучения этой лекции вы узнаете, как создавать ссылки, которые легко понять и использовать в любой рабочей среде. Более того, вы узнаете, как ссылки влияют на вашу популярность в поисковых системах, и получите несколько советов, как лучше сформулировать ссылки. Как обычно, имеется дополнительный zip-файл (http://dev.opera.com/articles/view/18-html-links-let-s-build-a-web/links_code.zip), который содержит несколько файлов, которые используются во время изложения материала. Лекция имеет следующую структуру:
id и href title Ссылки являются частью Web-сайта (созданного обычно с помощью HTML, но не всегда), которые указывают на другие ресурсы — другие документы HTML, текстовые файлы, файлы PDF, и т.д. Существуют ссылки, по которым браузер должен переходить автоматически, созданные с помощью элементов (вы уже встречали некоторые из них в предыдущих лекциях — они используются для импорта файлов CSS в документ HTML), и существуют также ссылки, которые пользователь не обязан активировать. Они называются a.
Любой строковый элемент в документе можно превратить в анкерную ссылку, добавляя вокруг него элемент a. Например, в следующем документе HTML текст Yahoo Developer Network превращен в ссылку (linkexample.html).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Link Example</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>A link to the YDN</h1> <p><a href="http://developer.yahoo.com">Yahoo Developer Network</a></p> </body> </html>
Посетители, активирующие эту ссылку (щелкая на ней мышью или активируя ее с помощью клавиатуры или голоса в некоторых случаях) покинут текущий сайт и перейдут на YDN. Имеются дополнительные изменения, происходящие в самой ссылке, и мы увидим их позже, когда будем говорить о стилевом оформлении ссылки.
href - ресурс, на который указывает id - ID title - дополнительная информация о внешнем ресурсе.Давайте рассмотрим сначала наиболее важные атрибуты, а затем поговорим о том, что можно сделать, чтобы облегчить посетителям восприятие ссылок.
Элемент a может играть несколько ролей в зависимости от заданных атрибутов. Наиболее часто используется атрибут , который определяет ресурс, на который указывает ссылка. Этот атрибут может содержать различные значения:
"../../help/help.html" ), абсолютно, относительно корня сервера (например, "/help/help.html" ) или вообще на другом сервере (например, "http://wait-till-i.com", или "ftp://ftp.opera.com/", или "http://developer.yahoo.com/yui" )."#menu" ). Это является указателем на цель внутри того же самого документа. href с URL, за которым следует "http://developer.yahoo.com/yui/#cheatsheets" ).Любое из этих значений делает элемент a ссылкой, так как он указывает куда-то в другое место. С другой стороны атрибут id сделает его на странице a ). Чтобы легче запомнить, представляйте это следующим образом: атрибут id делает ссылку
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Different Link Example</title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
<h1>Different Link examples</h1>
<h2>Example of in-page navigation with fragment identifiers, links and anchors</h2>
<div id="nav">
<ul id="toc">
<li><a href="#sec1">Section One</a></li>
<li><a href="#sec2">Section Two</a></li>
<li><a href="#sec3">Section Three</a></li>
<li><a href="#sec4">Section Four</a></li>
<li><a href="#sec5">Section Five</a></li>
</ul>
</div>
<div id="content">
<div>
<h2><a id="sec1">Section #1</a></h2>
<p><a href="#toc">Back to menu</a></p>
</div>
<div>
<h2><a id="sec2">Section #2</a></h2>
<p><a href="#toc">Back to menu</a></p>
</div>
<div>
<h2><a id="sec3">Section #3</a></h2>
<p><a href="#toc">Back to menu</a></p>
</div>
<div>
<h2><a id="sec4">Section #4</a></h2>
<p><a href="#toc">Back to menu</a></p>
</div>
<div>
<h2><a id="sec5">Section #5</a></h2>
<p><a href="#toc">Back to menu</a></p>
</div>
</div>
<h2>Some other link examples</h2>
<ul>
<li><a href="http://developer.yahoo.com">Yahoo Developer Network</a></li>
<li><a href="http://dev.opera.com/articles/view/the-freelancing-business-part-1-pricing/#marketing">Tips on marketing yourself</a></li>
<li><a href="ftp://get.opera.com/pub/opera/win/">Download different Opera versions</a></li>
<li><a href="http://farm1.static.flickr.com/56/188791635_0b8bdd808d.jpg?v=0">Photo of my book</a></li>
</ul>
</body>
</html>
Откройте этот файл в браузере и поэкспериментируйте с ним. Вы обнаружите, что активация любой из ссылок в первом списке вызывает переход в соответствующий раздел документа. Это связано с тем, что они связаны одним идентификатором фрагмента — первая ссылка в списке, например, имеет атрибут со значением #sec1, что совпадает со значением ID ссылки в первом элементе h2 контента. Это все, что нужно сделать, чтобы соединить два анкерных элемента в документе — использовать то же самое значение в атрибуте ссылки с предшествующим символом решетки, если это значение присутствует в атрибуте id. Можно также заметить, что URL в строке адреса в браузере изменился, и показывает теперь в конце
Однако, если активировать любую из ссылок "Back to menu", происходит то же самое. Как это возможно? Идентификатором фрагмента может быть любой элемент с атрибутом ID. Повторим вкратце:
href - этот # ).id, имеющим это значение. Значения ID на каждой странице должны быть уникальными.Это охватывает меню и различные разделы в примере, но как насчет других ссылок? Если проверить их, то можно увидеть, что они указывают на различные цели — одна переходит на другой сайт, другая выводит фотографию, а третья показывает определенный раздел другой Web-страницы (находимую при переходе к указанному ID). Если все это работает, то отлично — но как быть, если вы или ваш браузер не можете понять некоторые из этих ресурсов?
Самое важное, что нужно помнить о ссылках, состоит в том, что они являются существенной частью отношений с посетителями. Они считают, что когда вы предлагаете им ссылку, они могут перейти по ней и получить хорошую, подходящую информацию. Если ссылки не работают, так как указанный ресурс недоступен, или представлен в формате, который посетитель не может использовать, то вы не оправдали надежду и теряете доверие. Не позволяйте такому происходить.
Как почти для любого другого элемента HTML в элемент a можно добавить атрибут , чтобы предоставить некоторую дополнительную информацию. Браузеры показывают так называемую всплывающую подсказку, когда посетители проводят курсором своей мыши над ссылкой. Эта всплывающая подсказка сообщает информацию о ссылке. Например, можно дать небольшое введение в содержание и расположение присоединенного по ссылке документа (titleexample.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Adding extra information with a title attribute</title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
<h1>Adding extra information with a title attribute</h1>
<ul>
<li>Find more information on the <a title="The Yahoo Developer Network is the main hub
for all the developer tools Yahoo offers, including the Yahoo User Interface Library (YUI)
and the Design Patterns repository"
href="http://developer.yahoo.com">Yahoo Developer Network</a>.</li>
</ul>
</body>
</html>
Однако нельзя надеяться, что посетители обладают достаточным терпением и точной координацией, чтобы полагаться на это средство для критически важной информации. Пользователи с недостатками зрения, которые вообще не могут видеть страницу, скорее всего не смогут добраться до этой информации. Хотя считыватели экрана имеют возможность читать атрибуты для конечного пользователя, она выключена по умолчанию — именно поэтому никогда не нужно использовать атрибут для критически важной информации о ссылке. Критически важной может быть следующая информация:
Может быть очень досадно, когда после щелчка на ссылке браузер не знает, что делать с тем, на что указывает эта ссылка. Однако достаточно часто можно видеть Web-сайты со ссылками на изображения, документы PDF, и видео, которые не предупреждают об этом посетителей. Видео особенно часто становится причиной для отказа браузеров. Более того, ресурс может быть большим по объему (PDF файл размером 20 Мбайтов, например), который посетитель мог бы предпочесть загрузить, а не открывать в браузере, или вообще не обращаться к этому документу.
Одним из важнейших факторов успеха Web-продукта является исключение для людей необходимости догадываться, что произойдет, когда они выполнят какое-то действие, и четко сообщить им вместо этого, какой результат будет иметь их действие. В случае ссылок для исключения разочарования достаточно сообщить посетителям, с каким ресурсом соединяется ссылка. Вот несколько примеров (linkingnonhtml.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Linking non-HTML resources</title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
<h1>Linking non-HTML resources</h1>
<ul>
<li>Find more information on the <a href="http://developer.yahoo.com">Yahoo Developer Network site (external)</a></li>
<li>Download the <a href="http://www.wait-till-i.com/stuff/JavaScript-DOM-Cheatsheet.pdf">Dom Cheatsheet (PDF, 85KB)</a></li>
<li>Pick and <a href="ftp://get.opera.com/pub/opera/win/">download different Opera versions from their FTP (external)</a></li>
<li>Check out a <a href="http://farm1.static.flickr.com/56/188791635_0b8bdd808d.jpg?v=0">Photo of my book (JPG, 200KB)</a></li>
</ul>
</body>
</html>
Предоставляя такую информацию о файле ссылки и его размере, вы оставляете принятие решения о том, что с ним делать, посетителям, а не предполагаете, что они имеют определенные настройки браузера или установленное программное обеспечение. Если соединить это с хорошим стилевым оформлением, то можно даже заставить это выглядеть симпатичным и интуитивно понятным. Если вы хотите быть совершенно безопасным, предложите также раздел справки, который поясняет, что означают различные форматы файлов, и где можно взять программное обеспечение, необходимо для их вывода.
Один из самых больших страхов руководителей компаний, когда речь идет о Web-сайте компании, состоит в том, что люди покидают сайт преждевременно. Это часто является причиной отсутствия ссылок на сторонние сайты (если только владельцы этих сайтов не платят деньги за право получения направленного им Web-трафика). Я вернусь к этому ошибочному решению позже; пока давайте поговорим о том, что делают люди, чтобы избежать ухода посетителей со своего сайта, и как эти меры влияют на успех сайта.
Страх ухода посетителей на другие сайты вместе с желанием иметь на них ссылку, породили несколько изобретений в разработке приложений Web, которые годами были помехой для создания удобных для использования сайтов: фреймы и всплывающие окна.
Использование фреймов HTML означает, что вы делите выводимую в браузере страницу на несколько различных документов. Преимущество состоит в том, что документ по внешнему виду остается таким же, даже когда части его загружаются либо с вашего собственного сервера, либо с серверов сторонних компаний. Однако именно здесь заканчивается полезность — фреймы являются ужасным опытом пользователей и фактически вредными.
Ссылки внутри множества фреймов используют атрибут target в этом фрейме. Если множество фреймов недоступно (например, когда посетитель находит документ со ссылками через поисковую систему), каждая ссылка открывается в новом экземпляре браузера.
Открытие нового экземпляра браузера является другим распространенным способом соединения со сторонними сайтами — либо с помощью сценарного всплывающего окна, либо с помощью атрибута target со значением _blank. Тот факт, что каждый современный браузер поставляется со средством блокирования всплывающих окон должен подсказать, что использование такого подхода является совершенно неоправданным.
Короче говоря: не используйте атрибут target при создании ссылок, если только вы действительно знаете, что делаете. Однако это устаревшая идея — сегодня большинство браузеров имеют интерфейсы с вкладками, поэтому пользователи могут открывать сторонние сайты в фоновом режиме для дальнейшего чтения, оставаясь на вашем сайте. При некоторых обстоятельствах может понадобиться указать различие между внешними и внутренними ссылками, но всегда оставляйте на усмотрение посетителя, что они захотят с ними сделать.
Существует несколько серьезных причин для создания ссылок на сторонние сайты, даже когда они являются конкурентами.
Полезность входящих ссылок (ссылок, указывающих с внешнего сайта на ваш) менее дискуссионна. Чем более убедительные и высококачественные сайты ссылаются на ваш с помощью подходящих ключевых слов, тем выше вы будете ранжированы в поисковых системах, таких как Google. Однако, прежде чем это произойдет, необходимо доказать, что вы также не боитесь ссылаться на других.
Подходящие ключевые слова ведут нас к другой очень важной части создания хороших ссылок: как их формулировать.
Частично этот вопрос уже рассматривался в разделе о ссылках на ресурсы, отличные от HTML, но можно лишний раз напомнить себе, что ссылки являются не только частью основного текста, но являются также интерактивными элементами в документе.
Некоторые вспомогательные технологии предлагают список ссылок вместо целого документа, чтобы позволить посетителям быстро по ним перемещаться, что означает, что необходимо сделать так, чтобы текст ссылок имел смысл вне контекста, в котором они находятся. Можно легко проверить это в браузере Opera, открывая Web-сайт и выбирая в меню Tools > Links или нажимая Ctrl + Alt + L. Будет создана новая вкладка, которая показывает все ссылки в документе, и куда они указывают.
Это означает, что необходимо гарантировать не только что тексты ссылок имеют смысл, но также что нет ссылок, которые имеют одинаковое выражение, но указывают на различные ресурсы. Классической ошибкой здесь являются ссылки "щелкните здесь", представленные например как "Для загрузки последней версии нашего инструмента щелкните здесь". Значительно лучше использовать текстовую ссылку, которая поясняет, на что она указывает — в данном случае "Вы можете загрузить последнюю версию нашего инструмента и проверить его самостоятельно".
То же самое применимо к ссылкам "продолжение". Они часто встречаются на новостных сайтах, где вы получаете заголовок и текст анонса и ссылку для перехода "продолжение" или "полная история". Решение этой проблемы состоит либо в использовании ссылочного изображения "продолжение" и задание для него уникального альтернативного текста, либо в добавлении интервала внутрь ссылки после "продолжение" и сокрытие его с помощью CSS. Вы узнаете больше об этих приемах в руководстве о меню и навигации позже в ходе курса.
Bы пока еще не добрались в этом курсе до CSS, но будет полезно рассмотреть в этом месте, что способ представления ссылок очень важен, и что имеется несколько различных состояний ссылки, которые надо учитывать. Состояниями (которые позже свяжутся с псевдо селекторами CSS — это звучит угрожающе, но это не сложно) являются:
link - состояние по умолчанию - оно определяет, как должны выглядеть ссылки в определенной части документа. По умолчанию непосещенные ссылки имеют синий цвет.visited - стиль ссылки, которая уже была посещена раньше (онa может уже находиться в кеше браузера). По умолчанию посещенные ссылки имеют пурпурный цвет.hover - стиль ссылки, когда курсор мыши находится над ней.active - стиль ссылки, когда она активируется, т.е. когда выполняется соединение с другим сайтом; это также стиль последней активированной ссылки, когда вы снова возвращаетесь к документу в своем браузере.Мы рассмотрели в этот раз достаточно много, но очень важно помнить, как работают ссылки, и что они должны делать. Вы узнаете много приемов и методов за свою карьеру разработчика Web, позволяющих переопределить это поведение по умолчанию, и я надеюсь, что вы остановитесь и задумаетесь, действительно ли нужно то, что вы собираетесь сделать.
Мы рассмотрели следующие вопросы:
a и его (неисключенные) атрибуты.a в качестве ссылок (с атрибутом href ) и name ). title , которая выводится как всплывающая подсказка - и почему это не является безопасным способом предоставления критически важной информации.С этими знаниями вы сможете создать документы HTML, которые правильно используют ссылки, и вы будете готовы двигаться дальше к рассмотрению меню и навигации по сайту.
<a href="report.pdf" title="report as PDF, 2.3MB">get our latest report</a>?target, и имеются ли для него хорошие применения?Крис Хайлман проработал Web-разработчиком в течение десяти лет, после того как бросил радио-журналистику. Он работает для Yahoo! в Великобритании в качестве инструктора и ведущего разработчика, и осуществляет надзор за качеством кода
Крис поддерживает блог на сайте Wait till I come (http://wait-till-i.com/) и доступен во многих социальных сетях под ником "codepo8".
Bluesmoon (http://www.flickr.com/photos/bluesmoon/1545636474/)
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.