Hyperlinks maken in een HTML-document. Hyperlink - wat is het, hoe maak je een link en hoe voeg je code in HTML in (href, target blank en andere attributen van de a-tag)

Goede dag allemaal, mijn lieve vrienden en lezers. Ik hoop dat je hebt besloten deel te nemen aan mijn wedstrijd en al schrijft over je blogreis. Welnu, ik zou graag onze studie van de HTML-taal willen voortzetten en vandaag zou ik u willen vertellen over een van de belangrijkste componenten, namelijk hyperlinks.

Ja, zonder dergelijke hyperlinks zou internet niet zo handig zijn. Nee, ik lieg. Het zou helemaal niet gemakkelijk zijn om te navigeren. Kun je je het internet voorstellen zonder hen? Persoonlijk niet.

En vandaag zullen we leren hoe we een hyperlink in HTML kunnen invoegen. Maar eerst zou ik u willen vragen: weet u wat een hyperlink eigenlijk is en hoe deze verschilt van een gewone link? Eigenlijk is alles hier eenvoudig: een link is een eenvoudig stukje informatie dat naar een document verwijst. Tegelijkertijd kun je niet op deze tekst klikken (er gebeurt niets), maar je weet wel waar je informatie moet zoeken.

Voorbeeld: U kunt leren hoe u haar kunt highlighten in Photoshop op //site/adobe-photoshop/kak-vydelit-volosy/

Een hyperlink is dezelfde tekst, maar de essentie ervan is dat u op deze tekst kunt klikken en naar de gewenste pagina, site of een ander object kunt gaan. Bovendien kan de tekst zelf van alles zijn, terwijl het adres afzonderlijk binnenin wordt geschreven en compleet anders kan zijn. Maar hoe het ook zij, in de omgangstaal worden ze nog steeds eenvoudigweg links genoemd. Hier is een voorbeeld van een hyperlink:

Hoe je haar op de juiste manier kunt highlighten in Photoshop kun je lezen in een van mijn tutorials.

Ach ja. Goede theorie. Laten we nu verder gaan met oefenen en kijken welke verantwoordelijk zijn voor al deze zaken.

Verantwoordelijk voor de hyperlink gepaarde label, maar op zichzelf vertegenwoordigt het niets. Het gaat altijd samen met een attribuut. En binnen in dit geval we moeten voortdurend dezelfde href schrijven. In de attribuutwaarde plaatsen we de link naar de gewenste bron zelf. En in de content zelf schrijven we de tekst zelf, die klikbaar moet worden (werkt wanneer erop wordt geklikt). Kijk naar het voorbeeld en ik denk dat je alles zult begrijpen.

Yandex-zoekmachine

Zoals u begrijpt, schreef ik in dit voorbeeld dat wanneer u op een stuk tekst "Yandex-zoekmachine" klikt, een persoon wordt doorverwezen naar het adres dat is geschreven in de waarde van het href-attribuut.

Ik denk dat velen van jullie weten dat er interne en externe links zijn. Interne links worden uitgevoerd binnen één map, dat wil zeggen een website, en externe links leiden naar een aantal bron van derden. En nu zal ik je laten zien hoe je beide kunt doen.

Bestand in dezelfde map

Maar een dergelijke overgang werkt, op voorwaarde dat het bestand waarnaar u linkt, zich in dezelfde map bevindt als het bestand waarin u de link plaatst. Voor andere opties is alles een beetje anders.

Bestand in een andere map

1. Open het pushkin.html-bestand in Notepad++
2. Zoek nu het woord foto en verpak het in tags<een href> .
3. Nu aandacht! In de attribuutwaarde specificeren we het pad relatief aan het bestand dat wordt bewerkt, dat wil zeggen pushkin.html zelf. Je zou met zoiets als dit moeten eindigen:

Wat hebben we nu gedaan? En we hebben het volgende gedaan: aangezien het pad naar fotografie erin ligt aparte map img, die zich in dezelfde map bevindt als het pushkin.html-bestand, dan moeten we in de attribuutwaarde eerst de naam van de map schrijven, en dan, via een schuine streep (/), de volledige naam van het document (in ons geval, foto's).

Sla nu het pushkin.html-bestand op en voer het uit in uw browser. U zult zien dat het woord “Foto” blauw is gemarkeerd en klikbaar is geworden, wat betekent dat we door op deze link te klikken naar het bestand fofo.jpg worden geleid, dat zich in de map img bevindt.

Dus hoe? Is alles duidelijk? Als er iets gebeurt, aarzel dan niet om het te vragen.

Externe overgangen

En natuurlijk kunnen we het niet laten om het te vermelden externe links, nadat we erop hebben geklikt, worden we naar een compleet andere site geleid. Maar er is hier niets ingewikkelds. Het hele punt is dat je de href-waarde invoert volledig adres site of webpagina. Ik liet hierboven een voorbeeld zien met Yandex. Maar hier is nog een voorbeeld:

Ik ga studeren om een ​​meester in sociale projecten te worden.

Hier komen we specifieke pagina specifieke site.

Opent in een nieuw venster

Wanneer u op een link klikt, wordt het document standaard geopend in hetzelfde venster als uw pagina, d.w.z. uw pagina zal dichtslaan. En dit is niet goed. In het bijzonder voor promotie inhoudelijke projecten of blogs, is het raadzaam ervoor te zorgen dat wanneer u op een link klikt, het document in een nieuw venster of tabblad wordt geopend zonder uw pagina te sluiten.

Het doelattribuut met de waarde “_blank” zal ons hierbij helpen. Er is hier niets ingewikkelds. U hoeft dit alleen maar in de openingstag te plaatsen na de href attribuutwaarde. Laten we dat fragment uit het bestand lukomorye.html nemen, waar we een link naar de pushkin.html-pagina hebben gemaakt, maar nu zullen we precies dit attribuut schrijven. Het zou er zo uit moeten zien:

Uit het gedicht Ruslan en Lyudmila (auteur - A.S. Poesjkin)

Nou, alles is hier duidelijk. Wanneer u nu op inhoud klikt gewenste pagina opent in een nieuw venster. Dit is zeer noodzakelijk, want als u het niet registreert, verlaat de gebruiker eenvoudigweg uw pagina. En dus zal hij er in ieder geval op blijven, alleen als hij het niet specifiek sluit. Probeer alles zelf te doen, maak alles gewoon mooi met je eigen handen. Kopiëren en plakken is niet nodig.

Nou, zoiets als dit. Het lijkt erop dat ik je de belangrijkste dingen heb verteld, maar als je deze richting op wilt gaan en HTML en CSS wilt leren om professionele websites, blogs en zelfs online winkels te maken, kijk dan zeker eens naar uitstekende videocursus over dit onderwerp. De lessen zijn echt uitstekend en worden echt verteld voor mensen die nog weinig of helemaal niet bekend zijn met het bouwen van websites.

Welnu, hiermee is onze les voor vandaag afgesloten. Ik hoop dat je mijn artikel leuk vond en dat je blij zult zijn als je mijn vaste lezer wordt. Vergeet je dus niet te abonneren op mijn blogupdates, zodat je niets interessants mist. Welnu, ik wens u succes bij al uw inspanningen. Tot ziens!

Met vriendelijke groet, Dmitry Kostin.

Hyperlink is het belangrijkste element van hypertekst, onderscheidend kenmerk HTML-documenten die webpagina's en andere bestanden aan elkaar koppelen. Veel mensen associëren het woord ‘Link’ terecht met het woord ‘Internet’.

Eenvoudige koppelingen

IN HTML-taal tag wordt gebruikt om links te maken en zijn attributen.

href- tag-attribuut , waarvan de waarde het linkadres is. Of u nu naar een site, een webpagina of een bestand linkt, het maakt niet uit, alleen de waarde van dit kenmerk zal anders zijn.

- dit is de tag die verantwoordelijk is voor het maken van de link.

- sluitlabel.

Tussen karakters > En < de tekst Link bevindt zich. De gebruiker die de pagina opent, ziet deze en klikt erop om naar het daarin opgegeven adres te gaan.

Onder aan een HTML-document wilt u bijvoorbeeld een link 'Terug naar boven' plaatsen die naar het begin van het document leidt: de kop 'Bovenaan de pagina'. Om dit te doen, moet u een anker aan het begin van de pagina plaatsen en een link ernaartoe onderaan de pagina.

Laat het anker beginnen. Vervolgens moet u het attribuut aan de tag toevoegen aan de inhoud waarnaar de link zal leiden Identiteitskaart met betekenis beginnen.

Bovenaan de pagina

Het anker is geïnstalleerd en nu hoeft u alleen nog maar de leidende link eraan toe te voegen. In ons geval zal het er als volgt uitzien:

Bovenkant

Let op: er staat een hash voor de ankernaam - dit is een onderscheidend kenmerk van interne links.

Grafische links

Met de komst van HTML 5-tag is veranderd in een container die blokelementen kan bevatten, zodat een link nu niet alleen tekst of een afbeelding kan zijn, maar zelfs een tabel, een lijst of een hele pagina.

Links naar e-mail en Skype

Voor het gemak van de sitebezoekers kunt u niet alleen uw contactgegevens op de pagina aangeven, maar deze ook actief maken, zodat wanneer u op klikt e-mailadres de gebruiker opende onmiddellijk e-mailclient en wanneer u op inloggen klikt Skype-programma Ik heb meteen toestemming gevraagd om te bellen.

Schrijf per e-mail!

Bel mij op Skype

Hypertekst is tekst die koppelingen naar andere tekst bevat. Een voorbeeld hiervan zijn de aantekeningen van de auteur complexe definities of voetnoten van de vertalers onderaan de boekpagina, als deze tekst bevat vreemde taal. Internetsites zijn complexe systemen hypertekstovergangen van de ene pagina naar de andere, binnen de pagina zelf, maar ook tussen bronnen die geen verband houden met een enkel onderwerp. Deze structuur is praktisch, bespaart veel tijd en zorgt ervoor dat de bezoeker snel kan vinden noodzakelijke informatie en raak niet in de war grote hoeveelheden overgangen.

Een hyperlink invoegen

In HTML wordt een descriptor (tag) gebruikt om een ​​hyperlink in te voegen. , die op de gewenste locatie wordt ingevoegd. Meestal wordt deze tussen de tekst geplaatst, omdat de hyperlink zelf een tekststructuur is. Maar links kunnen ook grafisch zijn (pictogrammen, knoppen, afbeeldingen); ze zullen verder worden besproken. Hun locatie op een webpagina is niet beperkt tot tekst, maar hangt af van de ontwerpbeslissing van de maker van de site.

Google-startpagina

Dit is een voorbeeld van hoe u een hyperlink in een HTML-document kunt invoegen, wat gebeurt met behulp van de tag . Een bezoeker van de site ziet onderstreepte tekst, anders dan de kleur van de omringende tekst (de kleur van de HTML-link kan elke kleur zijn), "Google-startpagina", waarna hij doorklikt naar de hoofdpagina van de Google-zoekmachine. Opgemerkt moet worden dat de tekst van de hyperlink informatie moet bevatten over waar de overstap zal plaatsvinden. Dit principe moet als regel worden nageleefd en geaccepteerd!

Tagstructuur ...

Dat merk je aan de tag - gekoppeld: sluittag vereist.

href—kenmerk tag, geeft het doel van de link aan.

https://google.com/ - attribuutwaarde, die de URL bevat van de bron waarnaar de transitie zal plaatsvinden. Het bestaat uit dubbele of enkele aanhalingstekens. Dit is afhankelijk van de neststructuur van tags volgens HTML-regels.

Google-startpagina

deze hele structuur wordt genoemd element webdocument.

Volgens HTML-regels kunnen sommige elementen andere elementen bevatten. Label geen uitzondering. Als een programmeur het woord Google vetgedrukt moet markeren, dan gebeurt dit met behulp van een tag volgens de algemene regels voor tekstopmaak, waarbij de volgorde van het nesten van tags in acht wordt genomen. Een webmaster moet foutloos een hyperlink in HTML kunnen maken, anders werken ze niet. Verbroken links worden in computertaal ‘gebroken’ genoemd.

startpagina Googlen

Hier: element

startpagina Googlen

bevat een genest element

Googlen

Absoluut hyperlinks

protocol://domeinnaam/pad naar bestand

Een voorbeeld van een adres voor een populaire zoekmachine in Amerika: https://aol.com - absoluut, aangezien het de domeinnaam.com bevat.

Absolute hyperlinks worden gebruikt om naar pagina's op andere sites te navigeren of om toegang te krijgen tot bronnen die zich op een andere server bevinden. De transitie wordt uitgevoerd met behulp van internetprotocollen. Protocollen zijn niet het onderwerp van dit artikel, maar aangezien ze betrokken zijn bij het creëren van hyperlinks, is het noodzakelijk om ze op zijn minst kort te vermelden:

• http En https- meest voorkomende; ze worden gebruikt om te navigeren tussen internetpagina's van verschillende sites;
• ftp- protocol voor het uploaden van bestanden naar de server of downloaden door de gebruiker van de site;
• mailto - postprotocol dat wordt gebruikt voor verzending e-mail rechtstreeks vanaf de site, zonder naar uw persoonlijke e-mail te gaan.

Er zijn verschillende andere protocollen speciaal doel(gopher, telnet), die vrij zeldzaam zijn en waarvan het gebruik vereist is bijzondere kennis in programmeren of systeembeheer.

Relatieve hyperlinks

Bij relatieve adressering dient het gebruik van hyperlinks in HTML om binnen de bron te navigeren en niet buiten de grenzen ervan. Als de pagina zo groot is, werkt het verticale streep scrollen, soms erg lang, zoals bijvoorbeeld in woordenboeken, is erg handig en raadzaam om te gebruiken relatieve koppelingen om snel naar de gewenste letter te springen.

Bij het maken van een onlinewoordenboek plaatst de programmeur het alfabet aan het begin van de pagina, en als er geen links zouden worden gebruikt, zou de gebruiker heel lang aan het muiswiel moeten draaien om bij de letter “Ik” te komen. ”.

Ga naar letter I

Waar ja genaamd anker, A Ga naar letter I- bestemmingsanker. Om ankers correct weer te geven is het aan te raden om gebruik te maken van Latijnse letters en cijfers, dus je moet niet ‘ik’ schrijven, hoewel dat duidelijker zou zijn.

Om nu over te gaan van het alfabet aan het begin van de pagina naar de letter “I”, moet je het anker verankeren op de plaats in het HTML-document waar woorden die beginnen met de letter “I” beginnen:

brief ik

er staat een hekje voor het anker, zonder dit zal de overgang naar de letter niet werken.

Relatieve adressering bij het maken van een site

Een handig en meest algemeen geaccepteerd algoritme voor het maken van een website door een programmeur:

• een map op uw computer maken en deze op een locatie plaatsen snelle toegang voor het gemak;
• het aanmaken van de hoofdmap in deze map;
• creatie van secundaire webpagina's (index.html/page2);
• en plaatsing van grafische bestanden daarin;
• een map aanmaken en daarin andere objecten plaatsen (bijvoorbeeld bestanden om te downloaden);
• het vullen van de site met inhoud;
• het hosten van sitebestanden.

U zult zeker links moeten gebruiken om verbinding te maken tussen site-elementen, en het zal erg handig zijn om te weten hoe u een hyperlink in HTML naar een andere pagina van dezelfde site kunt invoegen. Als de sitebestanden zich in dezelfde map op dezelfde server bevinden, is het niet nodig om absolute adressering te gebruiken. Bij het overzetten van sitebestanden naar de hosting blijft de verbinding tussen de objecten behouden, omdat deze ook in dezelfde directory op de hosting worden geplaatst.

Laten we zeggen dat een programmeur de hoofdpagina van een site heeft gemaakt, index.html, die een link heeft naar een andere pagina, pagina2.html, versierd met een img.png-afbeelding. Het relatieve pad naar deze afbeelding ziet er dan als volgt uit:

afbeelding

Tip: Wanneer u dit onderwerp bestudeert, kunt u het beste een eenvoudige teksteditor gebruiken, omdat u behendig moet worden in het correcte spelling transitieadressen en om de code van iemand anders te leren begrijpen. In dit stadium zal dat zo zijn goed resultaat een hyperlink geschreven in kladblok zonder fouten,HTML vergeeft ze niet en produceert fouten.

Methoden voor het volgen van hyperlinks

Standaard wordt er een nieuwe pagina geopend in het huidige browservenster wanneer de gebruiker op een hyperlink klikt. Maar een webprogrammeur kan de standaardwaarde wijzigen en de pagina dwingen om bijvoorbeeld in een nieuw venster te openen. Hiervoor bestaat een attribuut doel met een bepaalde betekenis. Dit kan het duidelijkst worden uitgedrukt in een tabel.

Kenmerksyntaxis doel:

Google-startpagina

Startpagina Google wordt geopend in een nieuw venster.

Let op: Er zijn geen waarden voor het openen van pagina's in een nieuw tabblad. van dit attribuut, maar wordt door de gebruiker zelf ingesteld in de browserinstellingen.

Kleur hyperlink

Een ervaren internetgebruiker zou in de loop van de tijd moeten hebben opgemerkt dat hyperlinks een andere kleur hebben dan de omringende tekst, en dat ze meestal blauw zijn. Links die hij volgde en waarnaar hij terugkeerde vorige pagina, lila worden. Het gebruik van hyperlinks in HTML in niet-standaard kleurenschema niet veel, maar het zorgt ervoor dat de site zich onderscheidt van de rest.

Stel de kleuren van links in de tag in met behulp van attributen en hun waarden, waarin HTML-kleur V RGB-systeem(#00FF00) of met een directe aanduiding van de kleurnaam (“groen”). Er zijn drie soorten attributen voor links:

• link — stelt de kleur in van een niet-bezochte link;
• vlink - stelt de kleur in van de link die de gebruiker al heeft gevolgd;
• alink - stelt de kleur van de link in op het moment van overgang naar een andere pagina. Dit gebeurt snel, dus het is niet altijd mogelijk om dit effect op te vangen.

Opmaakvoorbeeld:

Als je deze attributen toepast in een tag , links naar dit webdocument zijn donkerblauw, bezochte links zijn paars en actieve links zijn oranjerood.

Grafische hyperlinks

De vooruitgang en ontwikkeling van webdesign vereist dat u weet hoe u een hyperlink in HTML als afbeelding invoegt. Het is duidelijk dat de afbeelding moet overeenkomen met de inhoud van de bestemmingspagina. De hoofdpagina van een site over geneeskrachtige planten kan bijvoorbeeld worden gepresenteerd in de vorm van foto's van planten, door erop te klikken wordt de gebruiker doorgestuurd naar een pagina die de geneeskrachtige eigenschappen van de plant beschrijft.

Een veelgebruikte methode voor het vervangen van statische knoppen ( ) naar prachtige afbeeldingen gemaakt door een webontwerper in grafische editors (GIMP, Photoshop).

Om afbeeldingen in te voegen als hyperlinks naar sitepagina's wordt dezelfde syntaxis gebruikt, maar in plaats van tekst wordt een tag voor het invoegen van afbeeldingen gebruikt volgens de HTML-regels:

Hetzelfde geldt voor de attributen voor het instellen van alternatieve tekst, breedte, hoogte en andere.

Oproepen vanaf de site

De html5-standaard is uitgebreid functionaliteit via internet, en nu kunt u niet alleen vanaf uw telefoon bellen, maar ook rechtstreeks vanaf de website. U kunt hiervoor ook hyperlinks in een HTML-document gebruiken, deze hebben de volgende syntaxis:

...abonnee...

In plaats van het woord “abonnee” wordt een voor de beller begrijpelijk contact geschreven, zoals in telefoonboek. Plaatsen mag ook grafisch bestand(foto van de abonnee).

Om vanaf de site te kunnen bellen, is het niet alleen nodig om een ​​link naar het telefoonnummer van de abonnee te hebben, maar ook een headset (microfoon, hoofdtelefoon), een VoIP-programma op de computer geïnstalleerd en de internetsnelheid moet hoger zijn dan 0,5 Mb/sec. Betaling voor gesprekken vindt plaats op basis van het verkeersverbruik. Als het internet onbeperkt is, zijn bellen dus gratis.

De ethiek van het maken van hyperlinks

Bij het plaatsen van een website op internet moet een webmaster weten welke soorten hyperlinks er in HTML bestaan, en deze niet alleen correct en professioneel toepassen, maar zich ook aan de volgende bepalingen houden:

• De hyperlink moet duidelijk zichtbaar zijn en zich onderscheiden van de omringende tekst. De gebruiker moet weten dat dit een hyperlink is.
• Het moet voor de gebruiker duidelijk zijn waar hij heen gaat als hij op de link klikt. Hiervoor is het raadzaam een ​​ander attribuut te gebruiken titel, die de overgangspagina bondig beschrijft. De syntaxis voor het gebruik van het attribuut is:

Yandex

• De gebruiker moet echte informatie ontvangen over het bestand dat wordt gedownload wanneer hij op de link klikt.

Als de gebruiker op een pagina terechtkomt die niet de pagina is die hij had verwacht of als hij het verkeerde bestand downloadt, verlaat de gebruiker in 99% van de gevallen de site onmiddellijk en bezoekt deze in de toekomst nooit meer.

Anti-Seo bij het aanmaken van hyperlinks

Behalve technische kant De vraag hoe je een hyperlink in HTML invoegt zou ook het morele aspect moeten omvatten. Er zijn veel sites waartoe gebruikers geen toegang hebben door beveiligingsprogramma's (antivirus) of zelfs door de overheid. Dit zijn de sites die zijn gemaakt door oneerlijke webprogrammeurs.

Een van de trucs die ze gebruiken is het invoegen van ‘onzichtbare’ hyperlinks in een webpagina. Fraudeurs weten hoe ze een hyperlink in HTML moeten maken en gebruiken attributen om de onderstreping van de link te verwijderen en deze de kleur van de omringende tekst toe te wijzen, zodat de gemiddelde gebruiker deze niet kan zien. En met behulp van andere webtechnologietools (CSS, JavaScript, PHP) kun je hun gedrag programmeren. Bijvoorbeeld de OnMouseOver-gebeurtenis JavaScript-taal activeert de actie van een webpagina-element. Wanneer een gebruiker over een onzichtbare link beweegt, wordt hij/zij ernaartoe geleid advertentie pagina een andere site. Of erger nog, wanneer er een onzichtbare link naar een bestand is en er onnodige dingen worden gedownload en op zijn computer geïnstalleerd software. Meestal zijn dit virussen die veranderen startpagina browsers zijn rommelig harde schijf veel programma's etc.

Binnenkort zullen dergelijke sites op de “zwarte lijst” van virusdatabases, beveiligingssystemen en onder internetgebruikers zelf terechtkomen. Dergelijke sites duren niet lang en moeten hun naam veranderen, eindeloos over het internet migreren en van hostprovider wisselen. Dit draagt ​​niet bij aan de promotie van de site, waar de maker altijd naar streeft, en zal er nooit een megaportaal van maken, zoals bijvoorbeeld sociale netwerken. Dergelijke trucs veroorzaken onder andere veel negatieve emoties bij mensen die door deze acties worden getroffen.

In deze tutorial leren we hoe u hyperlinks kunt maken. Zonder hen is er geen volwaardige website mogelijk. Een hyperlink is een link die, wanneer erop wordt geklikt, de browser naar een andere pagina op internet brengt, of naar een andere site, of naar een specifieke plaats in een document, in het algemeen, waar we deze ook aanwijzen. Voor deze les moet je een aantal dingen doen voorbereidende werkzaamheden: creëren nieuwe pagina met de naam third_page.html .

Maak een lijst zoals deze op de pagina:

• Startpagina
• Eerste pagina
• Tweede pagina

De code ziet er als volgt uit:

• Startpagina
• Tweede pagina
• Derde pagina

Nu gaan we uit deze lijst een menu maken, waarvan elke regel naar een andere pagina leidt. Dit kan via hyperlinks. De hyperlinktag ziet er als volgt uit:

Hier in de lijstelementtag (

De code ziet er als volgt uit:

Open de pagina in uw browser, klik op de links en kijk hoe de paginanavigatie werkt. Als uw links niet worden geopend, volgt u deze stappen:

• Controleer of alle bestanden (index.html, second_page.html) in dezelfde map staan ​​als third_page.html
• Verwijder cookies in uw browser
• Start uw browser opnieuw en laad vervolgens third_page.html opnieuw

Zo hebben we geleerd hoe we de eenvoudigste links kunnen maken, zonder welke het onmogelijk is om één pagina op internet voor te stellen. Met Dreamweaver kunt u sneller en eenvoudiger hyperlinks maken.

Maak een nieuwe pagina aan met de naam: derde_pagina.html. Maak een lijst vergelijkbaar met dat, die we hebben beschreven tijdens het werken in Kladblok.

Dreamweaver gebruikt een venster om hyperlinks te maken Link(nummer 1). Selecteer de tekst: Startpagina. Op het tabblad Bestanden(nummer 2) klik met de linkermuisknop op het bestand index.html(nummer 3) en zonder de knop los te laten, sleept u deze naar het veld Link. De geselecteerde tekst in uw ontwerpveld zou moeten veranderen: de kleur van het lettertype wordt blauw en er verschijnt een onderstreping. Daarom hebben we onze eerste hyperlink gemaakt.

Selecteer de tekst "Derde pagina". Voer in het veld Link het volgende in: http://www.mail.ru/

Bekijk de pagina in uw browser.

In dit hoofdstuk hebben we geleerd hoe u eenvoudige hyperlinks kunt maken. Deze vaardigheden zullen ons in de toekomst helpen om mooie en gebruiksvriendelijke websites te maken. In het volgende hoofdstuk leren we hoe u tabellen maakt.

Een hyperlink definiëren in HTML

Om hyperlinks in HTML te maken, wordt het element "a" gebruikt, dat wordt gevormd door een gepaarde tag . Alles binnen het "a"-element is een hyperlink.

Let op het anker in het absolute adres dat is opgegeven als de waarde van het href-attribuut in de tweede alinea van het voorbeeld. Bij gebruik van een dergelijke hyperlink gaat de browser eerst naar opgegeven adres en schuift vervolgens de pagina naar de locatie van het opgegeven anker. Als er geen anker op de pagina staat, wordt de pagina vanaf het begin weergegeven.

Relatieve hyperlinks en constructie van relatieve adressering

Laten we tot slot eens kijken naar het constructieprincipe relatieve adressen. Laat onze hyperlink in een document staan ​​op lokale server op het adres http://localhost/site/doc_1/doc_2/ ... /doc_n/web_page.html

• , waarbij doc_n de map van het n-de nestniveau is. In dit geval wordt de map doc_n, waarin ons document met de hyperlink zich bevindt, automatisch als basis genomen waarop alle adressering is gebaseerd. Dus:
• Als u wilt dat de link verwijst naar een doeldocument new_page.html dat zich in dezelfde map doc_n bevindt als ons originele hyperlinkdocument, dan hoeft u alleen maar het href-attribuut van de link in te stellen op de naam van het doeldocument: href ="new_page .html" . Om naar het doeldocument new_page.html in de map te navigeren http://localhost/site/doc_1/doc_2/ ... /doc_n/ doc_n_1/ ... doc_n_k/ , mag de waarde van het href-attribuut van de link alleen mappen bevatten die zijn genest onder doc_n , en uiteraard de naam van het doeldocument: href ="doc_n_1/ ... doc_n_k/ nieuwe_pagina.html" . We vertellen de browser dus dat deze naar de map doc_n_1 in de map doc_n moet gaan origineel document
• , waarin de hyperlink is geregistreerd, vervolgens naar de map doc_n_2 enzovoort, totdat deze in de map doc_n_k terechtkomt met daarin het doeldocument dat moet worden geopend. Om naar een map op een hoger niveau dan het origineel te gaan, gebruikt u een speciale combinatie van tekens "../" . Om n niveaus omhoog te gaan, moet je de combinatie "../" n keer achter elkaar schrijven. Dus in ons geval volgt u een link naar het doeldocument http://localhost/site/doc_1/doc_2/ ... /doc_n-3/ nieuwe_pagina.html
• Als u niet alleen meerdere niveaus omhoog moet gaan, maar daar ook naar een map (of meerdere submappen) moet gaan om toegang te krijgen tot het doeldocument, dan moet u in de waarde van het href-attribuut van de link eerst het vereiste nummer opgeven van niveaus om omhoog te gaan met behulp van de symbolen ". ./" en voeg vervolgens het pad toe van de resulterende map naar het doeldocument. Als het doeldocument zich bijvoorbeeld in de map new_doc bevindt en het adrespad ernaartoe zo is http://localhost/site/doc_1/doc_2/ ... /doc_n-3/new_doc/ nieuwe_pagina.html , dan moet het href-attribuut van de link de waarde hebben"../../../nieuwe_doc/nieuwe_pagina.html" . Die. we vertellen de browser dat hij drie niveaus omhoog moet gaan ten opzichte van bronmap

doc_n , dat het document met de hyperlink bevat, en ga vervolgens naar de map new_doc en open het doeldocument new_page.html

U kunt bijvoorbeeld een trainingsminisite downloaden die volledig op relatieve adressering is gebouwd. Experimenteer na het bekijken met het wijzigen en maken van nieuwe links, mappen en pagina's. Relatieve hyperlinks

erg handig voor het ontwikkelen van browsergebaseerde offlinetoepassingen, zoals helpgidsen. Houd er echter rekening mee dat wanneer u een document van de huidige map naar een andere map verplaatst, alle relatieve koppelingen daarin niet meer werken. Daarom zullen ze herschreven moeten worden. Als relatieve links verwijzen naar bestanden die zich ook in de huidige map of in submappen bevinden, blijven alle links in het document werken nadat deze map naar een andere locatie is verplaatst. Als je moet beginnen met tellen relatief pad vanaf de hoofdmap van de site moet u aan het begin van het pad een schuine streep "/" schrijven. Link bijvoorbeeld " Thuis

" verwijst naar een document dat zich in de hoofdmap van de site bevindt (niet de huidige!). Houd er rekening mee dat tellen vanaf de hoofdmap van de site alleen werkt onder controle van een echte webserver. Op een lokale server, bijvoorbeeld Xampp , moet het tellen beginnen vanaf de naam van de hoofdmap.

• Navigeer snel naar andere pagina's