We willen allemaal dat onze websites veel bezoekers trekken. Naar zoekmachines heb ze niet omzeild. Om deze doelen te bereiken moeten we echter op zijn minst de basisprincipes kennen.
In dit artikel vertellen wij u de betekenis van hyperlinks en leggen wij uit hoe u zelf een hyperlink op uw website kunt plaatsen.
Hyperlink betekenis
Het belangrijkste belang van hyperlinks is dat ze kunnen worden gebruikt om naar beide te verwijzen interne pagina's eigen site, en op de pagina's van andere sites.
Het is geen geheim dat zoekmachines nauwgezet rekening houden met het aantal links dat op een site wordt geplaatst, en ook de inhoud van hun ankerteksten zorgvuldig analyseren.
Op basis van deze gegevens rangschikken zoekmachines sites en sites met correctere hyperlinks hebben een aanzienlijk voordeel.
Hoe u zelf een hyperlink op uw website kunt maken In deze publicatie zullen we het hebben over zichtbare koppelingen
, die op webpagina's worden weergegeven. Door met de muis op deze link te klikken, wordt de gebruiker direct naar een andere pagina van uw of een andere site geleid.
Voorbeeld 1
In dit voorbeeld:
een - label href is een attribuut,
html-taal http://ru.site/articles - dit is URL-adres
een van de pagina's van onze website,
en de zinsnede "Artikelen over hoe u zelf en gratis een website in het panweb-systeem kunt maken" is de tekst van de hyperlink die zichtbaar zal zijn voor gebruikers van uw site.
Hyperlink in nieuw venster Een hyperlink kan op verschillende manieren voor de gebruiker verschijnen. Soms bij het openen van een pagina waar een link naartoe leidt, nieuwe pagina vervangt de oude. En om naar terug te keren vorige pagina
, moet u het adres in de browser typen of op het pictogram “ga terug” klikken.
Dit is niet altijd handig voor gebruikers, dus veel webmasters geven er de voorkeur aan hyperlinks te maken, zodat de pagina waarnaar deze leidt in een nieuw browservenster wordt geopend.
Voorbeeld 2
Artikelen over hoe u zelf en gratis een website kunt maken met het panweb-systeem
Het enige verschil is dat de pagina waarnaar de link leidt in een nieuw venster wordt geopend.Hoe u een hyperlink maakt op een website die in het systeem is gemaakt
panweb Hoe u een hyperlink maakt op een website die in het systeem is gemaakt Als u uw website heeft gemaakt in een gratis websitebouwer
Ga naar het bewerkingspaneel van uw site. In het venster “tekstbewerkingsmodus” klikt u op “html”, de tekstbewerkingsmodus in “html” wordt geopend:
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 is en waarin deze verschilt? reguliere koppeling? 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
- Open het pushkin.html-bestand in Notepad++
- Zoek nu het woord foto en verpak het in tags<een href> .
- 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 de foto apart ligt img-map, die zich in dezelfde map bevindt als het bestand pushkin.html, 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.
Dit zal ons helpen doel attribuut met de waarde "_blank" . 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 werkelijk uitstekend en worden echt gegeven voor mensen die nog weinig of 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.
- markeer de link,
- klik klik met de rechtermuisknop muis om het menu weer te geven
- en klik vervolgens met de linkermuisknop op “Kopiëren” in het menu dat verschijnt:
We keren terug naar Subscribe.ru in de groep “ Computerkennis" Hier in de opmerkingen moet u tekst schrijven of een link invoegen zoals http://....., wat in dit geval zal worden opgevat als platte tekst. Selecteer deze tekst (zoals hieronder weergegeven) en het “keten”-pictogram (rood omcirkeld in de afbeelding) wordt “actief”:
Klik met de linkermuisknop op het ‘keten’-pictogram. Hierdoor wordt het venster “Link toevoegen/bewerken” geopend. Hier moet u in het venster "Linkadres" het eerder gekopieerde linkadres invoeren, dat al op het klembord staat. Om dit te doen, kunt u met de rechtermuisknop klikken en in het menu dat verschijnt, op de optie "Plakken" klikken. In het venster “Openen in...” kunt u het beste op “nieuw venster” zetten.
Nu hoeft u alleen nog maar op de knop "Invoegen" te klikken. Zoals een van de groepsleden zei, slaagden ze erin de link te “blauwen”, d.w.z. het is een hyperlink geworden met een karakteristieke blauwe accentuering.
Hallo, beste bezoekers!
In dit artikel laat ik u zien hoe u een link naar een website kunt toevoegen in de vorm van een eenvoudige hyperlink, een afbeelding en ook een knop waarmee u uw eigen ontwerp kunt instellen. CSS-stijlen. Alle drie de opties worden heel vaak gebruikt en hebben een redelijk goed effect bij gebruik door bezoekers.
Laten we beginnen met de eenvoudigste en het complexe bereiken.
Reguliere link en hyperlink
http://site/poleznoe/kak-sdelat-ssylku-na-sait.html
http: //site/poleznoe/kak-sdelat-ssylku-na-sait.html |
Deze optie bestaat, maar die is er aanzienlijk nadeel, als we het hebben over de effectiviteit van een dergelijke link. Het is niet klikbaar, dat wil zeggen dat u er niet met een simpele muisklik naartoe kunt gaan. Deze optie is vrij moeilijk voor bezoekers om waar te nemen.
Een ander ding is een hyperlink die, wanneer erop wordt geklikt, doorverwijst naar een ander document op internet, zowel intern (binnen dezelfde site) als extern (een andere site). Een voorbeeld van zo’n link ziet u hieronder. Probeer op de link te klikken.
De hoofdpagina van mijn bron zou in een nieuw tabblad moeten worden geopend. Om deze optie te implementeren, moet u de tools van uw engine gebruiken of de HTML-code schrijven volgende regel.
Klik hier
De link wordt gemaakt met een eenvoudige tag , waarbinnen zich het adres zelf bevindt waarnaar de gebruiker moet worden doorverwezen, evenals een linkanker (in het bovenstaande voorbeeld is het anker de zinsnede "klik hier"), die de linktekst aangeeft waarin wordt uitgelegd wat u wilt ontvangen als u naar dit adres gaat.
Als u een eenvoudige website in HTML heeft, moet u precies deze code in de pagina-editor schrijven, mijn adres wijzigen in het uwe en uw anker opgeven. Het zal er zo uitzien.
Binnen een linktag Er is ook een attribuut voor het openen van de pagina in een nieuw tabblad.
doel = "_blank" |
Dit is ook erg belangrijk, het is raadzaam om de bezoeker niet uit de bron te gooien, maar om hem te verlaten. Gebruiken dit attribuut, zorgt u ervoor dat een bezoeker, door op veel links op één pagina te klikken, de huidige pagina niet verlaat, maar tegelijkertijd vele andere pagina's opent. Dit is belangrijk als u een website promoot.
Je kunt de link toevoegen titel attribuut, dat is de hoofdtag en we geven zoekmachines begrijpen waar de link naartoe leidt. Deze tag wordt ook weergegeven (indien geregistreerd) wanneer we naar een link verwijzen in de vorm van een tooltip.
Het is raadzaam om toe te voegen titel tag, zodat bezoekers deze tooltip zien wanneer ze de muisaanwijzer plaatsen en begrijpen waar ze heen gaan. Dit gebeurt eenvoudig, binnen de openingstag , zoals in het onderstaande voorbeeld.
Wanneer u een engine zoals WordPress gebruikt, is het toevoegen van een link naar een site heel eenvoudig, zonder enige bewerking in de html-modus. De berichteditor heeft een speciaal pictogram met een verbindingspictogram.
In de afbeelding liet ik het hele proces zien van het toevoegen van een verbinding tussen tekst en een andere pagina.
- Selecteer eerst de zin waarnaar u een link wilt maken;
- Klik op het verbindingspictogram toevoegen;
- We stellen de linkparameters in (het adres van de pagina waarnaar u de gebruiker wilt doorverwijzen, evenals de titel van de link, dat wil zeggen het anker, indien nodig).
U hoeft de linktitel niet in te voeren, aangezien dit de tekst is die in de eerste fase is geselecteerd. In de afbeelding liet ik zien dat ik al een link toevoegde bestaande pagina's plaats. U kunt dit doen. Als u vervolgens op een van de vermeldingen uit de lijst klikt, worden de URL en de titel automatisch ingevoerd.
De URL kan ook op een externe site worden ingevoerd. Als dit nodig is, voer dan het volledige (absolute) adres van de pagina in. Om een pagina op een nieuw tabblad te openen, hoeft u het attribuut niet handmatig in te voeren. De engine biedt deze optie met behulp van één selectievakje (zie afbeelding hierboven).
Iets hoger zei ik over het absolute adres. Dit betekent dat het volledige adres van de pagina waarnaar u moet doorverwijzen in de link wordt geschreven, ongeacht of dit onze bron is of een andere.
Er is ook een relatief adres, wanneer het niet nodig is het volledige adres in te voeren. Het is voldoende om het pad naar een map of pagina van de site op te geven, zonder dit op te geven domeinnaam. Dergelijke links werken alleen voor pagina's binnen één bron. Je kunt niet naar zo'n extern project verwijzen.
Als je dieper in het creatieproces wilt gaan relatieve adressen, Ik raad het ten zeerste aan lees dit artikel op een andere bron. Alles is daar heel cool ingedeeld.
Link afbeelding
Links in de vorm van afbeeldingen worden ook veel gebruikt, hoewel ze alleen voor het beoogde doel mogen worden gebruikt. Als het om eenvoudige links naar andere pagina's binnen onze site gaat, is het beter om deze niet met afbeeldingen te maken, omdat het niet altijd duidelijk is dat u op de afbeelding moet klikken om op een bepaalde pagina te komen.
Dit is aan te raden wanneer je reclame wilt maken voor bijvoorbeeld iemands videocursus. In dit geval geeft u een reguliere hyperlink op, onmiddellijk gevolgd door een afbeeldingslink. In dit geval zal het duidelijker zijn dat de afbeelding naar de cursuswebsite leidt waar deze kan worden gekocht.
Als we de html-modus nemen, is het principe van het bouwen van de linkstructuur precies hetzelfde, inclusief alle attributen. Het enige verschil is het link-anker, dat lijkt op de code voor de afbeelding zelf. In het vorige geval was er sprake van eenvoudige tekst.
In de praktijk zal het er zo uitzien.
Zoals u kunt zien, bevindt zich in de openings- en sluitingslinktags een afbeeldingscode, die ook zijn eigen kenmerken heeft. U moet dezelfde title-tag erin opnemen en het pad naar de afbeelding op de hosting of op een andere bron aangeven. Het is ook de moeite waard om de afmetingen van de afbeelding op te geven (breedte - breedte, hoogte - hoogte). En het is zeker de moeite waard om je in te schrijven alt-attribuut, die dient als beschrijving voor de afbeelding. Als je alles opschrijft, is beeldoptimalisatie op orde.
Zo ziet het eruit in de html-modus. Ik heb de code in 3 delen verdeeld om de linkstructuur begrijpelijker te maken (klikbare afbeelding).
De enige moeilijkheid hier is om de code van de afbeelding, die als anker wordt gebruikt, correct in te voeren.
Linkknop met behulp van CSS-stijlen
Als je iets anders wilt doen, dan deze optie vindt ook plaats. Bovendien kunt u de stijlen wijzigen, zodat wanneer u over de knop beweegt, zowel de knop zelf als de kleur van de inscriptie die erin staat, veranderen. Als je een foto maakt, dan is het niet altijd mogelijk om dit te realiseren. Met stijlen is alles mogelijk.
Een ander zeer goed voordeel is dat we de knop strikt in het midden kunnen plaatsen en dat deze alleen in het gebied van de knop kan worden geklikt. Als we een afbeelding maken en deze in het midden plaatsen, kan er over de gehele breedte van het inhoudsgebied rond de afbeelding worden geklikt. Soms resulteert een dergelijk defect in een onbedoelde klik op de afbeelding en is eerlijk gezegd vervelend.
Deze heb ik bijvoorbeeld gemaakt eenvoudige knop waartoe leidt startpagina plaats. U kunt de functionaliteit ervan controleren.
Als je kijkt broncode knoppen, dan ben je allemaal heel simpel. Het enige verschil met een gewone hyperlink is de aanwezigheid van een ID, die wordt toegevoegd in de openingstag en op hun beurt worden er ontwerpstijlen naar geschreven in het style.css-bestand.
Hier is de knopstructuur zelf.
Dat zien we direct na het openen van de linktag id="button" is gespecificeerd, waaraan zijn eigen ontwerpstijlen zijn toegewezen. De rest van de structuur is identiek aan de hyperlink.
Het principe is duidelijk, dus ik geef de stijlen die ik heb toegevoegd aan deze linkknop.
/* knopstijlen in normale modus*/#knop ( weergave: blok; breedte: 550px; /* knopbreedte */hoogte: 60px; /* hoogte */achtergrondkleur: #ff4343; /* achtergrondkleur */tekst-schaduw: 1px 1px #800909; /* tekstschaduw */kleur: #fff; /* tekstkleur */border-stijl: effen; /* knoprandlijntype */border-breedte: 1px* knoprandlijndikte * /border-color: # db3a3a; /* kleur van de randlijn (frame) van de knop */font-size: 18px; /* tekstgrootte */line-height: 60px; tekstgewicht */font-family: arial; /* lettertype */text-align: centreren; /* tekstuitlijning */text-decoratie: geen; de pagina */text-transform: hoofdletters; /* zodat alle letters in hoofdletters zijn. Indien niet nodig, verwijdert u de regel */) /* knopstijlen wanneer u met de muis beweegt */#button:hover ( achtergrondkleur: # f23333; lettergrootte: 19px;
Hyperlinks zijn erg handig hulpmiddel, waarmee u, nadat u op een bepaald stuk tekst of afbeelding heeft geklikt, de lezer naar de bron kunt doorverwijzen aanvullende informatie binnen hetzelfde document of naar verschillende externe bronnen op internet. Bovendien kan het klikken op hyperlinks enkele problemen veroorzaken speciale acties. Bijvoorbeeld het downloaden van programma's waarover waar we het over hebben in het document.
Hoe maak je een hyperlink in Word?Het instellen van hyperlinks in de Word-teksteditor is heel eenvoudig. Noteer het adres van de internetpagina waarnaar u een hyperlink wilt maken in de vorm http://adress.ru, plaats er een spatie achter of druk op Enter en teksteditor converteert het onmiddellijk naar actieve hyperlink. Dit is de eenvoudigste optie, maar niet de meest flexibele.
Om te profiteren van alle functies voor het werken met hyperlinks in Word en deze in te stellen op tekstgedeelten in een document, bestanden en webpagina's, nieuwe documenten en e-mail, moet u zich wenden tot een tool die speciaal voor dit doel is ontworpen.
Ga hiervoor naar de sectie Invoegen en klik op de knop Hyperlink.
Hierdoor wordt de Hyperlinkwizard geopend, waarmee u tekst in het document kunt koppelen diverse bronnen aanvullende informatie.
- Met een bestand of webpagina. Om verbinding te maken met een webpagina in de lijn Tekst voer de informatie in die in het zichtbare deel van de hyperlink zal verschijnen (bijvoorbeeld Hoe precies) en in het veld Adres exacte registratie van de link in de vorm van een internetadres (bijvoorbeeld http://site). Wanneer u een link naar een bestand instelt, selecteert u dit op uw computerstation en voert u ook de linktekst in.
- Met een plaats in het document. Een hyperlink in Word kan worden gekoppeld aan de volgende plaatsen in een document: het begin van het document, koppen en bladwijzers daarin. In dit geval moeten de koppen en bladwijzers al in het document aanwezig zijn. Het enige dat u hoeft te doen, is een plaats in het document selecteren, er een hyperlink naar installeren en de tekst invoeren.
- Met een nieuw document. U kunt een hyperlink koppelen aan een nieuw document dat deel uitmaakt van de standaard bestanden Kantoor. Om dit te doen, volstaat het om dit aan te geven volledige pad naar het bestand op de computer en de linktekst zelf.
- Met een e-mailadres. In dit geval wordt er, wanneer u op een dergelijke link klikt, een programma gestart waarmee u kunt werken per e-mail en er wordt een nieuwe brief aangemaakt voor de geadresseerde die in de hyperlink is opgegeven. Het enige dat u nog hoeft te doen, is de tekst van de brief typen en op de knop drukken om deze te verzenden.
