Hoe maak je een link in HTML?

Inhoudsopgave:

Hoe maak je een link in HTML?
Hoe maak je een link in HTML?
Anonim

Websites, blogs, webpagina's - al bekende concepten in onze tijd. Met de ontwikkeling van internet zijn sites voor het hosten van webpagina's ongelooflijk populair geworden, en dit is niet verwonderlijk: voor sommige mensen is het hebben van een eigen website een noodzaak, voor anderen is het een plezierig vermaak. In het eerste geval hebben we het meestal over bedrijven, bedrijven, particuliere ondernemers, wanneer ze adverteren voor een product of dienst waar veel vraag naar is. De tweede gaat over bloggers.

Bovendien zijn er internetgebruikers die gewoon naar informatie zoeken, blogs lezen, video's bekijken enzovoort.

Er zijn veel opties om een kwaliteitswebsite te maken. We zullen ons concentreren op webprogrammering via HTML.

Wat is HTML

HTML staat voor Hyper Text Mark-Up Language. Vertaald uit het Engels betekent dit "Hypertext Markup Language".

Met andere woorden, HTML is een reeks codes waarmee u de belangrijkste elementen van de site, het frame, zoalshoe woorden zijn opgebouwd uit zinnen.

HTML-codes worden uitsluitend in Latijnse letters geschreven en worden tags genoemd, en elke code staat tussen punthaken. Sommige tags zijn gekoppeld, andere zijn niet gekoppeld.

Gepaard betekent dat ze zonder mankeren in paren moeten worden gebruikt. De openingstag geeft bijvoorbeeld aan waar het begint op een webpagina en de sluittag geeft aan waar het stopt. De laatste verschilt van de eerste door de aanwezigheid van een schuine streep na de openingshoekhaak. is bijvoorbeeld de openingstag,is de afsluitende tag.

Ongepaarde tags hebben geen partner nodig.

Veel tags kunnen attributen hebben - extra elementen die het een specifiekere betekenis geven. Bijvoorbeeld de tag.

Webdesign
Webdesign

Waar HTML wordt gebruikt

Het klassieke begrip van waar HTML nodig is, is het bouwen van websites.

In de praktijk kan dit voldoende zijn, omdat u met HTML de belangrijkste elementen van de site, menu's (inclusief meerdere niveaus) kunt maken, de achtergrond kunt instellen, tekst, afbeeldingen, audio, video kunt invoegen, lettertypen kunt bewerken en nog veel meer.

Er zijn echter andere talen waarmee u interessantere en vaak noodzakelijke elementen aan een webpagina kunt toevoegen:

  • CSS stelt stijlen in voor de hele site zonder de noodzaak om constant stijlkenmerken van individuele elementen voor te schrijven met behulp van tags - bijvoorbeeld de kleur en het lettertype van de tekst.
  • Met de scripttaal kunt u miniprogramma's (scripts) ontwikkelen en insluiten op de site, variërend vanbanale esthetische dingen (de kleur van de link veranderen als je er met de muis overheen gaat) en eindigen met functionele dingen (het verzamelen van e-mailadressen van klanten, telefoonnummers).
  • Met PHP kun je je eigen gastenboek of commentaarsysteem ontwikkelen.

Ook HTML wordt gebruikt bij het maken van e-mails voor distributie.

internet mailinglijst
internet mailinglijst

Wat is een link

Hiermee kunt u naar een andere webpagina navigeren, zowel binnen als buiten de site.

HTML-links worden vaak gebruikt:

  • Naar een externe webbron gaan.
  • Om door de pagina's binnen de site te bladeren.
  • Om naar Google Forms te gaan.

Een link naar de bron in HTML wordt ook vaak aangegeven, vooral omdat je bij het kopiëren van materiaal van een andere site de auteur moet specificeren. Anders kan kopiëren zonder bronvermelding onder de definities van auteursrechtinbreuk, diefstal van inhoud en averechts werken. Bovendien vermindert het gebruik van geleende, niet-unieke materialen de SEO-prestaties en vermindert het aangeven van een link naar de bron risico's.

Soorten links

In de klassieke zin is een link het adres van een webbron waar je naartoe kunt gaan door erop te klikken.

soorten links
soorten links

Daarnaast zijn er hyperlinks: tekst en afbeeldingen. In deze gevallen is de HTML-link "verborgen" onder een zin (woord) of afbeelding, en om deze te volgen, moet u op de tekst of afbeelding klikken.

Andere soorten links:

  • Niet bezocht - een link waarop nog niet is geklikt tijdens een bepaalde sessie. Als u bijvoorbeeld gisteren deze link hebt gevolgd en vervolgens uw computer hebt uitgezet en vandaag weer hebt ingeschakeld, is de link nu weer niet bezocht, omdat er een nieuwe sessie is gestart.
  • Actief - in deze staat wordt de link voor een zeer korte tijd bewaard: het interval tussen het klikken op de link en het volgen ervan.
  • Bezocht - een link die al minstens één keer is bezocht tijdens een sessie.

Voor reguliere tekstlinks hebben bezochte links de neiging om van kleur te veranderen, tenzij anders aangegeven.

Een afbeelding met hyperlinks verandert niet van uiterlijk, of deze nu wordt bezocht of niet.

Een gewone link invoegen

Veel webbronnen zien het siteadres als een link, maken het onmiddellijk klikbaar en markeren het met kleur. Als het adres bijvoorbeeld in een messenger of per e-mail is verzonden, kunt u door erop te klikken naar de site gaan.

In het geval dat u zelf een site maakt met HTML, moet u een link invoegen met een speciale tag. Het ziet er als volgt uit: websiteadres. Linktekst in HTML moet volledig worden gespecificeerd, met protocol.

Een teksthyperlink invoegen

Er werd eerder gezegd dat een teksthyperlink dezelfde functie vervult als een gewone link, maar er esthetisch aantrekkelijker uitziet: in plaats van een siteadres, dat vaak onnodig lang is, wordt een woord of woordgroep aangegeven. In de zin "Zoek hier informatie" kunt u bijvoorbeeld de link verbergen inhet woord "hier". Het wordt gemarkeerd en door erop te klikken gaat de gebruiker naar de gewenste site.

een hyperlink invoegen
een hyperlink invoegen

Hoe een HTML-link te maken is al eerder besproken. U kunt een teksthyperlink invoegen met dezelfde tag. Het enige verschil is dat je tussen de tags de tekst moet specificeren waaronder de link verborgen zal worden: zichtbare tekst.

Hoe een afbeeldingshyperlink in te voegen

Het is hier een beetje ingewikkelder. We gebruiken dezelfde tag, maar in plaats van tekst moet je het pad naar de afbeelding specificeren.

Het pad is de locatie van de afbeelding. Als de afbeelding (foto) zich op een service voor het delen van bestanden bevindt, moet u alle mappen langs het pad naar de afbeelding door middel van een schuine streep specificeren. U kunt indien mogelijk ook een link naar een afbeelding opnemen.

Naar tag

naast src zijn ook andere attributen van toepassing, waarmee je de hoogte, breedte en locatie van de afbeelding kunt aanpassen en nog veel meer. Sommigen van hen:

  • Src - specificeert het pad naar de afbeelding.
  • Lowsrc - identiek aan het vorige attribuut, maar gespecificeerd voor afbeeldingen van lage kwaliteit.
  • Hoogte - foto hoogte.
  • Breedte - de breedte.
  • Alt - afbeeldingsbeschrijving. Wanneer je de muisaanwijzer over een foto of afbeelding beweegt, verschijnt de tekst die in dit kenmerk is gespecificeerd.
  • Border - bepa alt de dikte van de rand rond de afbeelding.

Attributen worden gespecificeerd na de tag en zijn opgenomen inzijn samenstelling. Het attribuut moet worden gevolgd door de waarde ervan. Bijvoorbeeld, voor de attributen "hoogte" of "breedte" (hoogte, breedte) specificeert de hoogte van de afbeelding op de webpagina. De maateenheid is pixels, tenzij anders aangegeven.

Het ziet er als volgt uit: <a href="webpagina-adres"

. Deze kenmerken helpen bij het instellen van de juiste grootte voor de afbeelding. Rand helpt bij het creëren van een onzichtbare rand rond de afbeelding.

een link volgen
een link volgen

De bovenstaande kenmerken zijn afzonderlijk van toepassing op de tag voor het invoegen van afbeeldingen. Bijvoorbeeld:.

Wat zijn ankerlinks

Ankerlinks maken is een zeer nuttige vaardigheid. Vaak is het nodig om een webpagina op te maken met een lang tekstblok of met meerdere subsecties op één pagina. In dit geval kunt u onmiddellijk beginnen met een lijst met links naar subsecties van de tekst of webpagina, en wanneer u erop klikt, gaat de gebruiker direct naar de gevraagde sectie.

Het maken van ankerlinks vereist meer gebruik van attribuuttags dan andere soorten links.

link anker
link anker

Eerst moet u de algemene waarde voor elk informatieblok of subsectie van tekst instellen met behulp van het attribuut top en deze vervolgens koppelen aan de bijbehorende link.

Hun functies zijn uitgebreider, daarom is het raadzaam om eerst het maken van eenvoudigere links onder de knie te krijgen en vervolgens over te gaan tot het maken van ankerlinks.

Tips

Plaatsing van verschillende informatieblokken op een webpagina
Plaatsing van verschillende informatieblokken op een webpagina

Hulp van ervarenprogrammeurs:

  • Je kunt het zo maken dat informatie over een link wordt weergegeven bij de muisaanwijzer in HTML. Hiervoor kan het alt-attribuut, dat we ook gebruiken voor grafische elementen, van pas komen.
  • Het is mogelijk om een lijst met links te maken met HTML. Dit kan met name handig zijn voor ankerlinks, maar ook wanneer u een lijst met webbronnen moet maken die gevolgd kunnen worden door een link rechtstreeks vanaf de huidige webpagina.
  • Met behulp van CSS en JavaScript, evenals enkele HTML-functies, kunt u een ander ontwerp van tekstlinks en hyperlinks maken dan normaal. Als u bijvoorbeeld over een link zweeft, kan deze van kleur veranderen en terugkeren naar de vorige wanneer de cursor er vanaf is. Dit kan met een aangepast JavaScript-script. Bovendien kan de linkkleur worden ingesteld op iets anders dan blauw voor niet-bezocht of paars voor bezocht. Dit is de taak van CSS.
  • Maak geen misbruik van links. Een webpagina met veel ongepaste links ziet er slordig en slordig uit.
  • Zorg ervoor dat de gebruiker begrijpt dat de hyperlink met de afbeelding echt een afbeelding is, en niet zomaar een afbeelding.

Conclusie

Het is heel gemakkelijk om in HTML naar een pagina te linken. Het is belangrijk om alle hoofdpunten van deze taal te volgen, omdat zelfs een kleine fout ertoe kan leiden dat er geen resultaat is en de code niet zal werken.

Aanbevolen: