Sådan oprettes et link i et HTML-dokument. Tag A - dens syntaks og attributter

  1. URL eller "adresse" på en side på internettet
  2. <A> tag og dens grundlæggende syntaks
  3. Absolut og relativ reference
  4. Relativ link til bibliotek højere end nuværende
  5. Attributter til <A> -taggen. Sådan åbner du et dokument ved reference i et nyt vindue
  6. Titel link. Titelattributten til <A> -taggen
  7. Attribut hyperlink nofollow. Forbud mod overførsel af "tillid" på webstedet ved henvisning
  8. Internt link eller anker inde i dokumentet
  9. Link Anker - Billede
  10. udvidelse

Referencer (eller hyperlinks) gennemsyrer internettet som blodkar. Hvis der ikke var nogen links, ville der ikke være noget internet.

Sådan oprettes et link i et HTML-dokument og registrerer dets attributter, hvad en webadresse er og hvordan søgemaskiner relaterer til links - i denne næste lektion for begyndere til at lære HTML.

URL eller "adresse" på en side på internettet

Hvert HTML-dokument på internettet har sin egen "nøjagtige adresse". Det hedder "URL", fra engelsk. URL - Uniform Resource Locator

URL-strukturen er ofte synlig i browserens adresselinje. Det omfatter:

  1. Protokolnavnet er http: // eller https: //
  2. Site Domain
  3. mappen eller stien til den mappe, hvor dette dokument er placeret,
  4. Filnavn (kan ikke altid være).

Takket være denne "nøjagtige adresse" blev det muligt at henvise til dette dokument fra teksten til et andet dokument.

<A> tag og dens grundlæggende syntaks

Jeg håber, at ordet "syntaks" ikke længere skræmmer dig 🙂

<a href="http://domen-saita.ru/papka-na-servere/dokument.html"> linktekst </a>

Som du kan se, efter starten af ​​<A> -taggen, skal der være en obligatorisk href-attributt, der angiver adressen på det dokument, som du vil hen.

Inde i <A> container tag er selv en tekst (selvom der kan være et billede), som er linkens tekst. Det kaldes også " Anker " eller simpelthen - Anker.

Absolut og relativ reference

I eksemplerne ovenfor blev der anvendt absolutte referencer. De, der indeholder dokumentets fulde URL .

I nogle tilfælde indeholder href-attributten ikke en fuldstændig webadresse med navnet på protokollen og webstedets domæne. Hvis det dokument, som linket fører til, er på samme websted - du kan bruge det relative link, der fører fra det sted, hvor dokumentet er placeret.

Ordning, når relativ reference anvendes

Eksempel: Et link fra det første.html-dokument fører til anden.html-filen, som er placeret i nyhedsmappen.

Relativ link til bibliotek højere end nuværende

kode:

<a href="../first.html"> dette er et relativt link til en fil på et katalogniveau et </a>

Dette link fører til filen first.html i "parent" -mappen, dvs. et niveau op .

Kombinationen ../ angiver et mappe et niveau op fra den givne position af filen, som linket bliver lavet til.

Attributter til <A> -taggen. Sådan åbner du et dokument ved reference i et nyt vindue

For at dokumentet skal kunne åbnes i en ny browser-faneblad, skal du bruge attributtargets = "_ blank"

For at dokumentet skal kunne åbnes i en ny browser-faneblad, skal du bruge attributtargets = _ blank

Attributlink target = "_ blank"

Må ikke misbruge det. Du behøver ikke lave interne links til webstedet med denne attribut. Brugere vil blive irriteret af "gnistningsvinduet".

Generelt med dette målattribut - hele historien. Der er stadig en række af dens betydninger, men alle er sjældent brugt i dag.

Dette skyldes, at de er designet til at arbejde sammen med webstedet på rammer , der ikke længere er populære, og med fremkomsten af HTML5 bliver det en fortid.

Titel link. Titelattributten til <A> -taggen

En anden nyttig attribut er title = "Tekst forklarer, hvor dette link fører"

syntaks:

<a href="http://domen-saita.ru/papka-na-servere/dokument.html" title="the pop-up hint"> dette er et hint link </a>

Som du kan se, viser browseren det som et værktøjstip. Og alligevel tager det hensyn til søgemaskinerne.

Attributtips for link titel

Attribut hyperlink nofollow. Forbud mod overførsel af "tillid" på webstedet ved henvisning

Der er en mere tvetydig attribut for forbindelserne rel = "nofollow"

Han fortæller søgemaskiner, at linkdokumentet ikke er troværdigt. Samtidig sendes tillid ("trust") indikatorer fra Source-webstedet ikke til webstedet ved henvisning.

Emnet "tillid" og linkplaceringer er stadig foran, men hvis det er kort, vil "skæbnen" af websteder i søgemaskinerne også afhænge af antallet af links, der fører til dette websted. Jo mere af dem, jo ​​mere autoritative sider linker - jo mere troværdighed af webstedet ved reference.

I nogle tilfælde er det værd at "screening" -links med denne attribut. For eksempel, hvis du skriver en negativ anmeldelse om enhver tjeneste.

<a href="http://bad-sait.ru/dokument.html" rel="nofollow"> bad site </a>

Internt link eller anker inde i dokumentet

I store tekster kræves ofte installation af såkaldte "ankre" i logiske dele af dokumentet. Så er det på dette sted, du kan henvise.

Den nemmeste måde at bruge den på er at oprette et lokalt indholdsfortegnelse fra hyperlinks, der fører til disse ankre. Sådanne indholdsfortegnelser er sædvanligvis placeret i starten af ​​artiklen.

Ved oprettelse af et sådant anker anvendes navnet attributten i stedet for href attributten.

Syntaxen til oprettelse af et anker er:

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

Når du opretter et link, ved slutningen af ​​webadressen tilføjes tegnet # - navnet på "ankeret":

<p> <a href="#top"> Top </a> </ p>

Overgangen vil være nøjagtigt til dette sted, dvs. Browseren placerer dette sted i sin øverste synlige del.

Ofte, i lange dokumenter, i bunden sætter de et sådant link "Top".

... har rejst rundt i verden af ​​duftende korn, de fandt den højeste kvalitet af dem, for hvilke Afrika, Asien, Central- og Sydamerika er berømte. Derfor i dag i mærkeets kaffehuse Kaffebønne Du finder de bedste kaffesorter fra anerkendte producenter.

? Til toppen ?

Fra et andet dokument kan du også gå til dette sted, hvis du tilføjer i slutningen af ​​webadressen via tegnet # name_accord

<a href="http://domen-saita.ru/dokument.html#top"> linktekst fører til et anker "top" i dette dokument </a>

Link Anker - Billede

Ethvert billede kan være et link.

kode:

<a href="http://sait.ru/dokument.html"> <img src = kartinka.jpg "width =" 100 "height =" 131 "/> </a>

Som standard understreges linkene af browseren med en solid blå linje, og linkbilledene får den blå ramme.

Links-billeder får en blå ramme

For at slippe af med det tilføjes en simpel regel til CSS-filen til webstedet:

en {grænse: 0px;}

Dette er en instruktion til at gøre grænsetykkelsen nul for alle billedforbindelser.

udvidelse

I det næste indlæg vil jeg tale om email links, deres attributter og metoder til "beskyttelse" fra onde spammere

Новости

Как сбалансировать юзабилити и дизайн при создании сайта — User House
Красота или уродство в веб-дизайне всегда связаны с восприятием конкретного человека. То, что для одного «красиво», может быть «ужасным» для другого и наоборот. Но как же так получается, что многие популярные

Чем лучше юзабилити сайта – тем больше лояльных клиентов
Хотите понять, как посетители воспринимают сайт? Это очень просто. Представьте, что вы говорите по телефону с директором, и в это время вам звонит кто-то из родственников, а у вас еще работы на четыре

Знакомство с юзабилити-тестированием сайта. // webknowledge.ru
Перевод статьи:   An Introduction To Website Usability Testing. Автор:   Thomas Churm. При создании нового сайта необходимо учитывать множество факторов. Для того чтобы у посетителей возникло

Специалист по web-usability – боец невидимого фронта
Ярослав Перевалов Что такое usability engineering? Часто ли вы, бродя по Сети, обращаете внимание на то, насколько качественно структурирована информация на сайте и насколько удобно устроена навигация?

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

25 советов как улучшить юзабилити (usability) вашего сайта. | Блог об интернет деятельности и трудовых буднях Максима Вячеславовича
Доброго времени суток, дорогие друзья! Сегодня мы поговорим с вами о такой важной вещи как U sability (юзабилити) сайта , о том, как улучшить данный фактор, зная его основные принципы и правила.

Что такое юзабилити и зачем оно нужно
Юзабилити включает простоту, удобство в пользовании, тестирование, проведение аудита проекта. Юзабилити сайтов, интернет-магазинов — это неотъемлимая часть выгодного ведения бизнеса. Задача юзабилити

Юзабилити тестирование сайта турагентства
«Когда информации много и она дешева, дорогим становится внимание». James Gleick Представим сайт, владелец которого считает его достаточно хорошим, удобным и привлекательным. Он размещает рекламные объявления

Юзабилити
Юзабилити (от англ. слова «usability» – практичность, простота использования) – это весьма распространенное ныне понятие объединяет максимальное удобство использования сайта и полезность информации, на

5 шагов для успешного юзабилити-тестирования приложения
Представьте: вы придумали и разработали мобильное приложение с приятным, на ваш взгляд, дизайном, удобным функционалом, полезными опциями, выпустили релиз продукта, но… Несмотря на мощную маркетинговую

Карта