Hallo, beste lezers van de blogsite! Zoals u weet, is het voor het succesvol promoten van een website en het vergroten van de positie in de zoekresultaten noodzakelijk om hoogwaardige SEO-optimalisatie van de website uit te voeren. Het concept van "", dat op zijn beurt is onderverdeeld in intern en extern, is onlosmakelijk verbonden met concepten als "interne en externe sitelinks". Daarom is het voor ons erg belangrijk om te weten hoeveel links er op de site moeten staan, hoe we hun aantal kunnen controleren, hoe we onnodige links van de site kunnen verwijderen en blokkeren voor indexering, hoe we de linkmassa kunnen vergroten, enz. Om al deze en andere vragen over interne en externe links te beantwoorden, moeten we eerst begrijpen wat een link (of hyperlink) in HTML is.
In dit artikel vertel ik je wat een link is, hoe je een hyperlink in HTML op een website maakt, hoe je een link in een nieuw venster opent, hoe je een link naar een e-mailadres (e-mail) maakt en hoe je maak een link naar een foto. We zullen ook ingaan op concepten als html-tags en hyperlink-attributen, link-anker, html-anker en hash-links. Dus laten we beginnen.
Wat is een link (hyperlink).Als een hyperlink naar een webpagina of bestand leidt die niet bestaat (verwijderd, verplaatst) of als het adres ervan onjuist is, wordt zo'n link een verbroken link genoemd. Er mogen geen verbroken links op de site staan, omdat deze bezoekers misleiden en als iemand op een dergelijke link heeft geklikt, is het onwaarschijnlijk dat iemand naar uw site terugkeert. In een apart artikel zullen we meer vertellen over waarom verbroken links verschijnen, hoe u deze kunt vinden en repareren. Laten we nu doorgaan.
Hoe u een link (hyperlink) in HTML op een website maakt.Het is heel gemakkelijk om naar een andere pagina op uw of een andere site te linken. Om een hyperlink te maken, moet u de browser vertellen wat de link is en het adres aangeven van het document waarnaar deze zal leiden. Dit gebeurt met behulp van een HTML-tag en het vereiste href attribuut:
Hier is URL het adres van het document waar u naartoe moet gaan. En de hyperlinktekst tussen de tags En, heet een link anchor en is zichtbaar voor de bezoeker van de webpagina. Naast het feit dat de linktekst (anker) de lezer informeert waar de overstap zal plaatsvinden, is deze ook erg belangrijk bij zoekmachineoptimalisatie (SEO), omdat deze dient als een van de bepalende factoren die de ranking van uw site beïnvloeden. voor de trefwoorden in dit anker. Meestal wordt dit type ranking link ranking genoemd.
Absoluut verband
Ze worden gebruikt om naar een document op een andere site te verwijzen (externe link).
Het is ook mogelijk om absolute links binnen één site te maken, maar het is juister om relatieve adressen te gebruiken, die er korter uitzien, om interne links te creëren. Maar tijdens het analyseren van verschillende sites merkte ik dat de overgrote meerderheid van de webmasters interne links maakt met absolute adressen. Dit heeft zijn voordeel, want als uw pagina wordt gekopieerd, krijgt u op deze manier werkende backlinks.
Zoals je kunt zien, is alles met absolute links eenvoudig. Met relatieve is het moeilijker, omdat je bij het maken ervan moet begrijpen welke waarde van het href-attribuut moet worden gespecificeerd, omdat dit afhangt van de oorspronkelijke locatie van de documenten. Zoals ik al zei, stoort niemand zich hier echt aan en maakt alle links op de site absoluut. Als u echter meer wilt weten over hoe u op de juiste manier relatieve links voor een website kunt maken, kan ik u een artikel van Dmitry, auteur van de blog ktonanovenkogo.ru, aanbevelen. Een gedetailleerder en begrijpelijker uitleg heb ik nog nooit gezien.
Ik laat je bijvoorbeeld zien hoe een link die naar een bestand leidt ten opzichte van de hoofdmap van de site eruit zal zien (we knippen eenvoudigweg alles links van de derde schuine streep in een soortgelijke absolute link):
Relatieve link
Naar hoofdgerecht
Linktekst (anker)
De kleuren en het ontwerp van de pop-uptekst zijn alleen afhankelijk van het besturingssysteem en de browserinstellingen.
Hoe een link in een nieuw venster te openen.Wanneer u op een koppeling klikt, wordt standaard een nieuw document geopend in het huidige venster. Bij het surfen op websites is dit voor mij persoonlijk echter niet handig. Wanneer ik een artikel lees en een link volg, is het voor mij handig dat de pagina in een nieuw venster opent en ik op elk gewenst moment verder kan gaan met het lezen van het vorige artikel. Een andere reden om een link in een nieuw venster te openen is dat wanneer u naar de site van iemand anders gaat, de kans groot is dat de lezer niet meer terugkomt. Vooral als hij meerdere overgangen maakt en simpelweg niet meer weet waar hij een paar minuten geleden was.
Het doelkenmerk van de tag helpt ons de link in een nieuw venster te openen . Standaard heeft het de waarde _self , die meestal niet is opgegeven. Om het document in een nieuw venster te openen, wijzigt u de waarde van het doelattribuut in _blank:
| 1 | Nieuw raam |
Nieuw raam
Wat moet u doen als u, wanneer u de site van iemand anders bezoekt, waar links in het huidige venster geopend zijn, deze in een nieuw venster wilt openen? U hoeft er alleen maar op te klikken, niet met een knop, maar met het muiswiel. In dit geval wordt een nieuwe pagina geopend in een nieuw venster.
Hoe maak je een link naar een e-mail (e-mailadres).Wanneer u op deze link klikt, wordt uw standaard e-mailprogramma geopend, waarbij het veld ‘Aan’ al is ingevuld. Om het onderwerp van de brief automatisch in te vullen, moet u een link maken naar een e-mail van dit type:
Dmitry KtoNaNovenkogo adviseert een andere manier om bladwijzers in de tekst van een webpagina te plaatsen, zonder gebruik te maken van html-ankers. Om dit te doen, maken we een bladwijzer van elke HTML-tag die op de pagina beschikbaar is, en wijzen we deze het universele id-attribuut toe. Laten we bijvoorbeeld een bladwijzer maken voor een h3-titeltag:
Titel tekst
Het is belangrijk om een Latijnse letter in het id-attribuut op te nemen als het eerste teken van de ankernaam. Vervolgens kunt u alle andere toegestane tekens gebruiken.
Laten we bijvoorbeeld teruggaan naar de kop “ “, en dan verdergaan.
U kunt hashlinks gebruiken om niet alleen binnen één pagina naar de gewenste locatie te gaan, maar ook om naar een andere pagina op de site te gaan. Om dit te doen, plaatsen we het html-anker op de juiste plaats op de juiste pagina, en in de hashlink zelf schrijven we het adres van deze pagina vóór het hash-symbool. Bijvoorbeeld:
Koppel tekst aan HTML-ankerbladwijzer
Typen en kleuren van hyperlinks in HTML.- Een niet-bezochte link is blauw en onderstreept.
- Actieve link - wordt rood gedurende de tijd tussen de muisklik op de link en het begin van het laden van een nieuwe pagina. Het is duidelijk dat ze slechts korte tijd in deze toestand verkeert.
- Bezochte link – verandert de kleur in paars nadat erop is geklikt.
U kunt de kleur van hyperlinks in een HTML-document wijzigen met behulp van een tag en de volgende kenmerken:
- Link – kleur van niet-bezochte links.
- Alink – kleur van de actieve link.
- Vlink – kleur van bezochte links.
Alle bovenstaande kenmerken kunnen worden gecombineerd:
| 1 |
Ik hoop dat het nu duidelijk is hoe je een hyperlink op een HTML-pagina en naar een e-mail kunt maken, hoe je van een afbeelding een link kunt maken, wat tekstankers, hashlinks en html-ankers zijn, wat html-tags en linkattributen zijn. Ik heb zo goed mogelijk geprobeerd in detail te vertellen wat links in HTML zijn en wat ze zijn. Ik wil u eraan herinneren dat het invoegen van hyperlinks in tekst alleen in de HTML-modus kan worden gedaan.
Ik heb nog nooit zulke lange artikelen geschreven, meer dan 10.000 tekens. Maar dit is niet het einde van het onderwerp links, dat wordt vervolgd.
Als dit artikel nuttig voor je was, klik dan op de onderstaande sociale mediaknoppen. Tot ziens op de pagina's!
Laten we het hebben over een vrij eenvoudige, maar tegelijkertijd populaire vraag. Hoe maak je van een afbeelding een link? Het komt voor dat het nodig is om een link naar de sitestructuur, naar een bepaalde bron, toe te voegen, niet in de vorm van een tekstlink, maar in de vorm van een afbeelding. Dat is best logisch, aangezien een link in de vorm van een afbeelding er aantrekkelijker uitziet dan een simpele tekstlink. En bovendien is het voor de bezoeker veel beter merkbaar.
De vraag is eigenlijk heel simpel, maar niet iedereen kan hem oplossen. Ik stel bijvoorbeeld voor om elke afbeelding op internet te nemen en deze om te zetten in een link naar een bron. Ik zal bijvoorbeeld een link naar het sociale netwerk VKontakte aan dit artikel toevoegen. En om het uiterlijk van de link te ontwerpen, zal ik het VKontakte-logo gebruiken.
Om uw plan uit te voeren, moet u dus een afbeelding vinden of tekenen, die later een link zal worden. En zoek een beetje uit hoe je een afbeelding kunt weergeven met behulp van HTML. En ook hoe je van de afbeelding een link kunt maken, volledig klikbaar en werkend.
HTML - afbeeldingscode.Om een afbeelding in HTML-code weer te geven, kun je de daarvoor bestemde img-tag gebruiken. Afhankelijk van de syntaxis van onze code kan de afbeeldingsuitvoer er anders uitzien. Als u HTML-syntaxis gebruikt, ziet de code er bijvoorbeeld als volgt uit:
En als je de XHTML-syntaxis gebruikt, zoals deze:
Meer details over de syntaxis vindt u in het artikel over DOCTYPE.
Iets meer over de code:
src=”URL” - In plaats van een URL moet u het pad naar de afbeelding invoeren dat we in een link zullen converteren.
alt = "alternatieve tekst" - bedoeld om tekstinformatie over de afbeelding weer te geven wanneer het weergeven van afbeeldingen is uitgeschakeld in de browser.
Bovendien heeft de img-tag andere kenmerken. De belangrijkste:
hoogte — hoogte van de afbeelding
breedte — breedte van de afbeelding
Dit zijn slechts enkele van de kenmerken die op afbeeldingen worden toegepast. Maar in dit stadium hebben we genoeg. Al deze attributen kunnen zowel in html-code als in CSS-stijlen worden toegewezen.
HTML - linkcode.Uitleg voor de code:
De a-tag heeft ook andere attributen, maar in dit stadium zijn we mogelijk slechts in een paar daarvan geïnteresseerd:
doel - ontworpen om te bepalen in welk browservenster het document wordt geopend met behulp van de huidige link. Het document wordt bijvoorbeeld geopend in het huidige venster (standaard) of in een nieuw venster.
Nu weten we dus dat de afbeelding een link is en uit twee delen code bestaat. Het enige dat overblijft is om ze samen te combineren. Zoals ik hierboven al zei, zal ik het logo van het sociale netwerk VKontakte gebruiken om een foto weer te geven en een link naar mijn groep te plaatsen, waarin ik, met behulp van het doelattribuut, de link zal instellen om in een nieuw venster te openen.
Eerst moet u de afbeelding uploaden naar de server die we gebruiken of de link naar de afbeelding op internet kopiëren. Voor het weergeven van afbeeldingen gebruik ik het liefst mijn eigen server.
Ik wil meteen reserveren dat ik de afbeelding heb geüpload naar de WordPress-bibliotheek, dat wil zeggen naar mediabestanden. Omdat ik gewoon een fotolink aan het artikel zal toevoegen. Maar bij het ontwerpen van een site en het toevoegen van verschillende elementen aan de site is het juister om afbeeldingen via een FTP-client te uploaden naar de daarvoor bestemde map. In WordPress bevindt de map zich meestal in de themamap en wordt deze afbeeldingen of img genoemd.
Dit is hoe het eruit zal zien:
Zoals we kunnen zien, bleek het, op zijn zachtst gezegd, niet zo goed. Attributen voor img helpen ons het uiterlijk en de locatie te verbeteren. Ik heb ook een alinea toegevoegd waaraan ik het kenmerk voor tekstuitlijning aan het midden heb toegewezen. Dit betekent dat de tekst en andere elementen die zich tussen de p-tags bevinden, worden uitgelijnd.
Iets meer over de p-tag:
Het is ontworpen om een tekstparagraaf te definiëren. Heeft openings- en sluitingstags.
stijl - Het attribuut definieert de stijlen van het element met behulp van CSS-regels.
tekst uitlijnen: centreren; — CSS-regel. Definieert de horizontale uitlijning van een element (de p-tag en alle elementen daarbinnen). In dit geval wordt het element uitgelijnd op het midden.
Dus we hebben de foto uitgezocht. Maar het is nog steeds geen schakel geworden.
Dat is eigenlijk alles. Op het eerste gezicht lijkt het misschien een beetje ingewikkeld. Maar in werkelijkheid is alles eenvoudig, het belangrijkste is om alles wat er geschreven staat zorgvuldig te lezen. En natuurlijk moet je zeker proberen zelf een link te leggen met een foto. Door het beste te oefenen, kun je alles begrijpen wat in theorie niet duidelijk is, en kun je ook veel beter onthouden wat er moet gebeuren.
Hyperlinks zijn uitgevonden om documenten op het netwerk met elkaar te verbinden, en als uw site uit meerdere pagina's bestaat in plaats van uit één, dan kunt u ze alleen aan elkaar koppelen door hyperlinks te maken. Laten we direct met een voorbeeld zien hoe dit eruit ziet.
Een eenvoudige hyperlink maken
Ga naar een andere pagina
Er is nog een interessant kenmerk dat nuttig voor u kan zijn:
