Cum se configurează smartphone-uri și PC-uri. Portal informativ
  • Acasă
  • Windows Phone
  • Cum se inserează un hyperlink în HTML? Crearea și utilizarea hyperlink-urilor în HTML. Ce este un hyperlink și cum să îl faci în VK, Word, prezentare, Excel, html

Cum se inserează un hyperlink în HTML? Crearea și utilizarea hyperlink-urilor în HTML. Ce este un hyperlink și cum să îl faci în VK, Word, prezentare, Excel, html

Bună ziua, dragi vizitatori!

În acest articol vă voi arăta cum să adăugați un link către un site web sub forma unui hyperlink simplu, o imagine și, de asemenea, un buton pe care îl puteți seta propriul design folosind stiluri CSS. Toate cele 3 opțiuni sunt foarte des folosite și au un efect destul de bun atunci când sunt folosite de vizitatori.

Să începem cu cel mai simplu și să ajungem la complex.

Link obișnuit și hyperlink

http://site/poleznoe/kak-sdelat-ssylku-na-sait.html

http: //site/poleznoe/kak-sdelat-ssylku-na-sait.html

Această opțiune își are locul, dar există un dezavantaj semnificativ dacă vorbim despre eficiența unei astfel de legături. Nu se poate face clic, adică nu poți accesa el cu un simplu clic al mouse-ului. Această opțiune este destul de dificil de perceput de vizitatori.

Un alt lucru este un hyperlink, care, atunci când se dă clic, redirecționează către un alt document de pe Internet, atât intern (în cadrul aceluiași site), cât și extern (un alt site). Un exemplu de astfel de link poate fi văzut mai jos. Încercați să dați clic pe link.

Pagina principală a resursei mele ar trebui să se deschidă într-o filă nouă. Pentru a implementa această opțiune, trebuie fie să utilizați instrumentele motorului dvs., fie să scrieți următoarea linie în codul HTML.

Click aici

Linkul este creat cu o etichetă simplă , în interiorul căreia se află adresa în sine, unde utilizatorul trebuie redirecționat, precum și o ancoră de link (în exemplul de mai sus, ancora este expresia „click aici”), care indică textul linkului explicând ce vei primiți când mergeți la această adresă.

Dacă ai un site simplu realizat în HTML, atunci ar trebui să scrii exact acest cod în editorul de pagini, schimbându-mi adresa cu a ta și specificând ancora ta. Va arata asa.

În interiorul unei etichete de link Există, de asemenea, un atribut pentru deschiderea paginii într-o filă nouă.

target = "_blank"

Acest lucru este, de asemenea, foarte important, este indicat să nu aruncați vizitatorul din resursă, ci să-l părăsiți. Folosind acest atribut, te vei asigura că un vizitator, făcând clic pe mai multe link-uri dintr-o singură pagină, nu va părăsi cea actuală, dar în același timp va deschide multe alte pagini. Acest lucru este important dacă promovați un site web.

Puteți adăuga un atribut de titlu la link, care este o etichetă de titlu și le permite motoarele de căutare să știe unde duce linkul. De asemenea, această etichetă este afișată (dacă este înregistrată) atunci când indicăm un link sub forma unui tooltip.


Este recomandabil să adăugați o etichetă de titlu, astfel încât vizitatorii să vadă acest sfat explicativ atunci când trec cu mouse-ul și să înțeleagă unde merg. Acest lucru se face simplu, în interiorul etichetei de deschidere , ca în exemplul de mai jos.

Când utilizați un motor, cum ar fi WordPress, adăugarea unui link către un site este foarte simplă, fără modificări în modul html. Editorul de postare are o pictogramă specială cu o pictogramă de conexiune.

În imagine am arătat întregul proces de adăugare a unei conexiuni între text și altă pagină.

  1. Mai întâi, selectați fraza cu care doriți să faceți un link;
  2. Faceți clic pe pictograma adăugare conexiune;
  3. Setăm parametrii linkului (adresa paginii în care doriți să redirecționați utilizatorul, precum și titlul linkului, adică ancora, dacă este necesar).

Nu trebuie să introduceți titlul linkului, deoarece acesta va fi textul care a fost selectat în prima etapă. În imagine am arătat adăugarea de link-uri din paginile site-ului existente. Puteți face acest lucru, apoi când faceți clic pe una dintre intrările din listă, URL-ul și titlul vor fi introduse automat.

URL-ul poate fi introdus și pe un site extern. Dacă este necesar, introduceți adresa completă (absolută) a paginii. Pentru a deschide o pagină într-o filă nouă, nu este nevoie să introduceți manual atributul. Motorul oferă această opțiune folosind o casetă de selectare (vezi imaginea de mai sus).

Un pic mai sus am spus despre adresa absolută. Aceasta înseamnă că adresa completă a paginii către care trebuie să redirecționezi este scrisă în interiorul linkului, indiferent dacă este resursa noastră sau alta.

Există și o adresă relativă, când nu este necesară introducerea adresei complete. Este suficient doar să introduceți calea către un director sau o pagină a site-ului, fără a specifica numele domeniului. Astfel de link-uri funcționează numai pentru pagini dintr-o singură resursă. Nu te poți referi la un astfel de proiect extern.

Dacă doriți să vă aprofundați în procesul de creare a adreselor relative, vă recomand cu căldură citeste acest articol pe o altă resursă. Totul este foarte cool aranjat acolo.

Legătură poză

Link-urile sub formă de imagini sunt, de asemenea, utilizate pe scară largă, deși ar trebui să fie utilizate numai în scopul propus. Dacă suntem simple link-uri către alte pagini din site-ul nostru, atunci este mai bine să nu le facem cu imagini, deoarece nu este întotdeauna clar că trebuie să faceți clic pe imagine pentru a ajunge la o anumită pagină.

Este recomandabil să faceți acest lucru atunci când doriți să faceți publicitate cuiva, de exemplu, cursul video al cuiva. În acest caz, furnizați un hyperlink obișnuit, urmat imediat de un link imagine. În acest caz, va fi mai clar că imaginea duce la site-ul cursului de unde poate fi achiziționată.

Dacă luăm modul html, atunci principiul construirii structurii link-ului este exact același, incluzând toate atributele. Singura diferență este ancora link-ului, care arată ca codul pentru imagine în sine. În cazul precedent a existat un text simplu.

În practică, va arăta așa.

După cum puteți vedea, în interiorul etichetelor de deschidere și de închidere există un cod de imagine, care are și propriile sale caracteristici. Trebuie să includeți aceeași etichetă de titlu în ea, să indicați calea către imagine pe găzduire sau pe altă resursă. De asemenea, merită să specificați dimensiunile imaginii (lățime - lățime, înălțime - înălțime). Și cu siguranță ar trebui să includeți atributul alt, care servește ca descriere a imaginii. Dacă notați totul, atunci optimizarea imaginii va fi la egalitate.

Iată cum arată în modul html. Am împărțit codul în 3 părți pentru a face structura linkului mai ușor de înțeles (imaginea pe care se poate face clic).

Singura dificultate aici este să introduceți corect codul imaginii, care este folosit ca ancoră.

Butonul de link folosind stiluri CSS

Dacă vrei să faci ceva diferit, atunci această opțiune are și un loc în care să fii. Mai mult, vă permite să schimbați stilurile, astfel încât atunci când treceți cu mouse-ul peste un buton, atât butonul în sine, cât și culoarea inscripției care va fi în interiorul acestuia se vor schimba. Dacă faci o poză, atunci nu este întotdeauna posibil să realizezi acest lucru. Cu stiluri, orice este posibil.

Un alt avantaj foarte bun este că putem plasa butonul strict în centru și va putea fi clicat doar în zona butonului. Dacă luăm o imagine, atunci când o plasăm în centru, toată lățimea zonei de conținut din jurul imaginii va fi clicabilă. Uneori, un astfel de defect are ca rezultat un clic accidental pe imagine și, sincer, este enervant.

De exemplu, am creat un buton simplu care duce la pagina principală a site-ului. Puteți verifica funcționalitatea acestuia.

Dacă te uiți la codul sursă al butonului, totul este foarte simplu. Singura diferență față de un hyperlink obișnuit este prezența unui id, care este adăugat în interiorul etichetei de deschidere și, la rândul lor, stilurile de design sunt scrise în el în fișierul style.css.

Iată structura butonului în sine.

Vedem asta imediat după deschiderea etichetei de link este specificat id="button", căruia îi sunt atribuite propriile stiluri de design. Restul structurii este identică cu hyperlinkul.

Principiul este clar, așa că vă ofer stilurile pe care le-am adăugat la acest buton de link.

/* Stiluri de buton în modul normal */#button ( display: block; width: 550px; /* button width */height: 60px; /* height */background-color: #ff4343; /* background-culoare */text- umbră: 1px 1px #800909; /* umbră text */color: #fff; /* culoare text */border-style: solid; /* tip de linie chenar (cadru) buton */border-width: 1px; /* grosime linia de chenar (cadru) a butonului */border-color: #db3a3a; /* culoarea liniei de chenar (cadru) a butonului */font-size: 18px; /* dimensiunea textului */line-height: 60px; /* înălțimea textului liniar * /font-weight: normal; /* text weight */font-family: arial; /* tip font */text-align: center; /* text alignment */text-decoration: none; / * sublinierea textului */margin : 40px auto; /* indentați butonul din alte elemente din pagină */text-transform: majuscule; /* astfel încât toate literele să fie scrise cu majuscule. Dacă nu este necesar, eliminați linia */) /* stiluri de butoane la trecerea cursorului mouse-ului */# button:hover (culoare de fundal: #f23333; dimensiunea fontului: 19px; )

Hyperlinkurile au fost inventate de mult timp pentru text confortabil și informativ. Astfel, destinatarul documentului dvs. va putea merge imediat la secțiunea dorită, la un anumit site web sau director de computer. Puteți chiar să plasați un alt document într-un hyperlink dacă cunoașteți locația exactă a acestuia. Acest articol va analiza în detaliu inserarea hyperlinkurilor în editorul de text Microsoft Office Word.

Cum să faci un hyperlink în Word rapid

Cea mai rapidă cale nu este cea mai lizibilă sau cea mai îngrijită. Aceasta implică copierea adresei site-ului web direct în text.

  • Copiați adresa din bara browserului și inserați-o în document.
  • Apăsați bara de spațiu și de îndată ce cursorul se îndepărtează de text, va apărea un hyperlink și literele vor deveni albastre și subliniate.
  • Faceți clic pe el pentru a deschide site-ul. Acest lucru este convenabil și rapid, dar există multe alte modalități de a insera hyperlinkuri care vor fi mult mai plăcut de citit.


Cum se editează un hyperlink în Word

  • Pentru a oferi un hyperlink un aspect diferit, trebuie să faceți clic dreapta pe el și să selectați „Editați hyperlink”.


  • O fereastră de editor se va deschide în fața ta. În partea de sus, în coloana „text”, este afișat numele hyperlinkului, care va fi vizibil pentru oricine citește, iar în coloana de jos „adresă”, trebuie să indicați site-ul către care va duce hyperlinkul.
  • După modificare, faceți clic pe „ok”.



Cum să faci un hyperlink către fișiere și foldere în Word

Cu toate acestea, nu trebuie să intrați pe site, ci să selectați directorul dorit în coloana „Folder”, care se află în partea de sus. După aceea, puteți aplica modificări, astfel încât, atunci când faceți clic pe un link, întregul folder să se deschidă sau puteți face clic pe fișierele și componentele sale individuale, astfel încât acestea să fie apelate.

Merită să ne amintim că atunci când descărcați un document pe alt computer, astfel de hyperlinkuri nu mai funcționează, deoarece conțin adresa în mod specific folderelor dvs.


Cum se creează un hyperlink în Word: o opțiune alternativă

Acest caz este bun dacă doriți să inserați hyperlink-uri în text imprimat gata făcut. Doar evidențiați cuvintele de care aveți nevoie în text.


După aceea, mergeți la secțiunea „Inserare” din antetul programului și găsiți elementul „Hyperlink” în ea. Apasa pe el.


Veți vedea meniul cu care sunteți deja familiarizat. Tot ce rămâne este să configurați setările pentru site sau calea către foldere și fișiere.

Inserarea de hyperlinkuri în Microsoft Office Word este destul de convenabilă și simplă, o puteți stăpâni în doar câteva repetări.


  • evidențiați linkul,
  • faceți clic dreapta pentru a afișa un meniu
  • apoi faceți clic stânga pe „Copiere” în meniul care apare:

Revenim la Subscribe.ru în grupul „Computer Literacy”. Aici, în comentarii, ar trebui să scrieți text sau să introduceți un link de genul http://....., care în acest caz va fi perceput ca text obișnuit. Selectați acest text (după cum se arată mai jos), iar pictograma „lanț” (încercuită cu roșu în imagine) devine „activă”:

Faceți clic stânga pe pictograma „lanț”. Aceasta deschide fereastra „Adăugați/Editați link”. Aici, în fereastra „Adresă link”, trebuie să introduceți adresa de link copiată anterior, care este deja în clipboard. Pentru a face acest lucru, puteți face clic dreapta și, în meniul care apare, faceți clic pe opțiunea „Lipire”. În fereastra „Deschide în...” este mai bine să o setați la „fereastră nouă”.

Acum tot ce rămâne este să faceți clic pe butonul „Inserare”. După cum a spus unul dintre membrii grupului, ei au reușit să „albastreze” legătura, adică. a devenit un hyperlink cu o evidențiere albastră caracteristică.

  • evidențiați linkul,
  • faceți clic dreapta pentru a afișa un meniu
  • apoi faceți clic stânga pe „Copiere” în meniul care apare:

Revenim la Subscribe.ru în grupul „Computer Literacy”. Aici, în comentarii, ar trebui să scrieți text sau să introduceți un link de genul http://....., care în acest caz va fi perceput ca text obișnuit. Selectați acest text (după cum se arată mai jos), iar pictograma „lanț” (încercuită cu roșu în imagine) devine „activă”:

Faceți clic stânga pe pictograma „lanț”. Aceasta deschide fereastra „Adăugați/Editați link”. Aici, în fereastra „Adresă link”, trebuie să introduceți adresa de link copiată anterior, care este deja în clipboard. Pentru a face acest lucru, puteți face clic dreapta și, în meniul care apare, faceți clic pe opțiunea „Lipire”. În fereastra „Deschide în...” este mai bine să o setați la „fereastră nouă”.

Acum tot ce rămâne este să faceți clic pe butonul „Inserare”. După cum a spus unul dintre membrii grupului, ei au reușit să „albastreze” legătura, adică. a devenit un hyperlink cu o evidențiere albastră caracteristică.

Salutare tuturor. Fiecare dintre noi a întâlnit link-uri pe paginile site-ului de pe Internet. Știți cum să creați un hyperlink într-un document Word? De fapt, hyperlinkurile pot fi create în orice program Microsoft Office: PowerPoint, Excel și Word.

Ce este un hyperlink?

Un hyperlink este un obiect care include informații despre locul în care se află un alt obiect. Un obiect poate fi orice document sau fișier de pe un computer sau un link către orice pagină de pe Internet. Procesul de creare a unui hyperlink este același ca în multe alte programe. Un link este un obiect care, atunci când se dă clic pe acesta, duce la pagina sau documentul de care avem nevoie.

Cum să faci un link ca marcaj

  1. Deschideți documentul și găsiți propoziția pe care doriți să o marcați.
  2. Plasați cursorul la stânga începutului liniei.
  3. Deschideți fila Inserare. Găsiți elementul „Linkuri”. Faceți clic pe săgeata în jos și selectați Marcaj.
  4. Acum faceți următoarele setări în fereastra Marcaje.
    • Scrieți numele marcajului. Marcajul va duce la locul în care se află cursorul în document. Dacă trebuie să marcați o altă linie, faceți clic pe butonul „Anulați” și plasați cursorul în locația dorită.
    • Dacă aveți nevoie ca marcajele dvs. să fie ascunse, bifați caseta corespunzătoare.
    • Faceți clic pe butonul „Adăugați” și marcajul va trimite către această locație.
    • Salvați documentul; dacă nu faceți acest lucru, Word nu va ști unde se află marcajele dvs.
  5. Să facem un link către marcaj.
    • La începutul documentului, plasați cursorul unde va fi creat conținutul.
    • Dați un nume și selectați-l ținând apăsat butonul stâng al mouse-ului.
    • Acum deschideți fila „Inserare”, găsiți elementul „Link-uri” și selectați elementul de meniu „Hyperlink”.
    • În secțiunea Link către, selectați Locație în document. Veți vedea o listă cu toate marcajele din documentul curent.
    • După ce ați selectat marcajul dorit, tot ce trebuie să faceți este să faceți clic pe OK și cuvintele evidențiate vor deveni un hyperlink.

Cum să faci un hyperlink către un document pe computer

Dacă doriți ca documentele dvs. de referință să fie accesibile altora, creați un folder în care plasați toate documentele, inclusiv pe cel la care lucrați.

Făcând clic pe butonul „Sugestie”, puteți introduce text care va fi afișat atunci când cursorul se află peste hyperlink.

Cum să faci un hyperlink către un site web pe Internet


Video: Cum se creează un link în Word?

Cele mai bune articole pe această temă