Kako postaviti pametne telefone i računala. Informativni portal
  • Dom
  • Windows Phone
  • Kako umetnuti hipervezu u HTML? Stvaranje i korištenje hiperveza u HTML-u. Što je hiperveza i kako je napraviti u VK, Wordu, prezentaciji, excelu, html-u

Kako umetnuti hipervezu u HTML? Stvaranje i korištenje hiperveza u HTML-u. Što je hiperveza i kako je napraviti u VK, Wordu, prezentaciji, excelu, html-u

Pozdrav dragi posjetitelji!

U ovom ću vam članku pokazati kako dodati vezu na web mjesto u obliku jednostavne hiperveze, slike i gumba koje možete prilagoditi CSS stilovima. Sve 3 opcije se vrlo često koriste i imaju prilično dobar učinak kada ih koriste posjetitelji.

Počnimo s najjednostavnijim i prijeđimo na složenije.

Obična veza i hiperveza

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

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

Ova opcija ima mjesto za biti, ali postoji značajan nedostatak ako govorimo o učinkovitosti takve veze. Nije klikabilan, odnosno ne možete do njega doći jednostavnim klikom miša. Ovu opciju posjetitelji prilično teško percipiraju.

Druga stvar je hiperveza koja na klik preusmjerava na drugi dokument na Internetu, interni (unutar iste stranice) i eksterni (druga stranica). Primjer takve veze možete vidjeti u nastavku. Pokušajte kliknuti na poveznicu.

Glavna stranica mog resursa trebala bi se otvoriti u novoj kartici. Da biste implementirali ovu opciju, morate koristiti alate svog motora ili napisati sljedeći redak u HTML kodu.

Kliknite ovdje

Veza se stvara jednostavnom oznakom , unutar koje se nalazi sama adresa na koju se korisnik treba preusmjeriti, kao i sidro poveznice (u gornjem primjeru sidro je fraza "kliknite ovdje"), koja specificira tekst poveznice koji objašnjava što želite dobit ćete kada odete na ovu adresu.

Ako imate jednostavnu web stranicu izrađenu u HTML-u, trebali biste napisati upravo takav kod u uređivaču stranice, mijenjajući moju adresu u svoju vlastitu i navodeći svoje sidro. Izgledat će ovako.

Unutar oznake veze postoji i atribut za otvaranje stranice u novoj kartici.

target="_prazno"

Ovo je također vrlo važno, stoga je preporučljivo ne izbaciti posjetitelja s resursa, već ga napustiti. Korištenjem ovog atributa osigurat ćete da posjetitelj klikanjem na više poveznica na jednoj stranici ne napusti trenutnu, već da u isto vrijeme otvori mnoge druge stranice. Ovo je važno ako promovirate web stranicu.

Linku možete dodati atribut naslova, koji je oznaka naslova i dati tražilicama do znanja kamo link vodi. Također, ova oznaka se prikazuje (ako je registrirana) kada prijeđemo pokazivačem iznad linka u obliku tooltip-a.


Dobro je dodati oznaku naslova kako bi posjetitelji vidjeli ovaj opis alata kada zadrže pokazivač i razumjeli kamo idu. To se radi jednostavno, unutar uvodne oznake , kao u donjem primjeru.

Kada koristite mehanizam kao što je WordPress, dodavanje poveznice na stranicu vrlo je jednostavno bez ikakvih izmjena u html načinu rada. Uređivač snimanja ima posebnu ikonu s ikonom veze.

Na slici sam prikazao cijeli proces dodavanja veze između teksta i druge stranice.

  1. Prvo odaberite frazu koju želite povezati;
  2. Kliknite na ikonu za dodavanje veze.
  3. Postavljamo parametre linka (adresu stranice na koju želite prebaciti korisnika, kao i naslov linka, odnosno sidro, po potrebi).

Naslov poveznice možete izostaviti jer će to biti tekst koji je odabran u prvoj fazi. Na slici sam prikazao dodavanje poveznica s postojećih stranica stranice. To možete učiniti, zatim klikom na jedan od unosa s popisa URL-ova i naslov će se automatski unijeti.

URL se također može unijeti na vanjskoj stranici. Ako je to slučaj, unesite punu (apsolutnu) adresu stranice. Da biste otvorili stranicu u novoj kartici, nema potrebe pisati atribut rukom. Motor pruža ovu mogućnost s jednim potvrdnim okvirom (pogledajte gornju sliku).

Malo više rekao sam o apsolutnoj adresi. To znači da se unutar poveznice upisuje puna adresa stranice na koju želite preusmjeriti, bez obzira radi li se o našem ili nekom drugom resursu.

Postoji i relativna adresa, kada nije potrebno pisati punu adresu. Dovoljno je samo registrirati put do nekog direktorija ili stranice stranice, bez navođenja naziva domene. Takve veze rade samo za stranicu unutar istog resursa. Na ovaj način se nećete pozivati ​​na vanjski projekt.

Ako želite ići dublje u proces generiranja relativnih adresa, toplo preporučujem pročitajte ovaj članak na drugom resursu. Tamo je sve jako cool.

Link slika

Linkovi u obliku slika također su naširoko korišteni, iako bi se trebali koristiti samo za njihovu namjenu. Ako su to jednostavne poveznice na druge stranice unutar naše stranice, onda je bolje da ih ne pravimo slikama, jer nije uvijek jasno da trebate kliknuti na sliku da biste došli do neke stranice.

Korisno je to učiniti kada želite nekoga reklamirati, primjerice nečiji video tečaj. U ovom slučaju dajete običnu hipervezu, nakon koje odmah slijedi slika veze. U tom će slučaju biti jasnije da slika vodi na web stranicu tečaja, gdje se može kupiti.

Ako uzmemo html način, tada je princip izgradnje strukture veze potpuno isti, uključujući sve atribute. Jedina razlika je sidro veze, koje izgleda kao kod same slike. U prethodnom slučaju postojao je običan tekst.

U praksi će to izgledati ovako.

Kao što vidite, unutar oznaka za otvaranje i zatvaranje veze nalazi se kod slike, koji također ima svoje karakteristike. U njemu morate napisati istu oznaku naslova, odrediti put do slike na hostingu ili na drugom resursu. Također je vrijedno navesti dimenzije slike (širina - širina, visina - visina). I svakako uključite atribut alt koji služi kao opis slike. Ako sve zapišete, onda će optimizacija slike biti na razini.

Evo kako to izgleda u html modu. Podijelio sam kod u 3 dijela kako bi struktura linka bila razumljivija (na sliku se može kliknuti).

Poteškoća je ovdje samo ispravno propisati kod slike, koji se koristi kao sidro.

Gumb za povezivanje s CSS stilovima

Ako želite učiniti nešto drugačije, onda je i ova opcija pravo mjesto. Štoviše, omogućuje vam promjenu stilova tako da kada prijeđete pokazivačem iznad gumba, promijenit će se i sam gumb i boja natpisa koji će biti unutar njega. Ako snimite sliku, to nije uvijek moguće shvatiti. Sa stilom je sve moguće.

Također, vrlo dobra prednost je što gumb možemo postaviti strogo u središte i na njega će se moći kliknuti samo u području gumba. Ako uzmemo sliku, tada kada se ona postavi u središte, moći će se kliknuti cijelo područje širine sadržaja oko slike. Ponekad takav nedostatak dovodi do slučajnog klika na sliku i, iskreno, neugodno.

Na primjer, napravio sam tako jednostavan gumb koji vodi na glavnu stranicu stranice. Možete provjeriti radi li.

Ako pogledate izvorni kod gumba, onda ste svi vrlo jednostavni. Jedina razlika od obične hiperveze je prisutnost id-a koji se dodaje unutar početne oznake a njemu se pak stilovi zapisuju u datoteci style.css.

Ovdje je struktura samog gumba.

To vidimo odmah nakon otvaranja oznake veze naveden je id="button", koji ima dodijeljene vlastite stilove dizajna. Ostatak strukture identičan je hipervezi.

Princip je jasan, pa dajem stilove koje sam dodao na ovaj link link.

/* stilovi gumba u normalnom načinu */#gumb ( prikaz: blok; širina: 550px; /* širina gumba */visina: 60px; /* visina */boja-pozadine: #ff4343; /* boja-pozadine */tekst - sjena: 1px 1px #800909; /* sjena teksta */boja: #fff; /* boja teksta */border-style: solid; /* vrsta obruba gumba */border-width: 1px; /* debljina obruba gumba (okvir) linije */border-color: #db3a3a; /* rub gumba (okvir) boja linije */font-size: 18px; /* veličina teksta */line-height: 60px; /* linearna visina teksta * /font -weight: normalno; /* težina teksta */font-family: arial; /* vrsta fonta */text-align: center; /* poravnanje teksta */text-decoration: ništa; /* podcrtavanje teksta */margina: 40px auto; /* dopunjavanje gumba od ostalih elemenata na stranici */text-transform: velika slova; /* tako da su sva slova velika. Ako nisu, uklonite liniju */) /* stilovi gumba pri prelasku miša */# gumb: lebdi (boja pozadine: #f23333; veličina fonta: 19px; )

Za udoban i informativan tekst, hiperveze su odavno izmišljene. Tako primatelj vašeg dokumenta može odmah otići na željeni odjeljak, na određeno mjesto ili imenik računala. Možete čak postaviti drugi dokument u hipervezu ako znate točno gdje se nalazi. U ovom će se članku detaljno raspravljati o umetanju hiperveza u uređivač teksta Microsoft Office Word.

Kako brzo napraviti hipervezu u Wordu

Najbrži način nije najčitljiviji i najuredniji. Sastoji se od kopiranja adrese stranice izravno u tekst.

  • Kopirajte adresu iz trake preglednika i zalijepite je u dokument.
  • Pritisnite razmaknicu, čim se kursor odmakne od teksta, pojavit će se hiperveza, slova će postati plava i podvučena.
  • Kliknite na njega da otvorite stranicu. Ovo je praktično i brzo, ali postoji mnogo drugih načina za umetanje hiperveza koje će biti mnogo ugodnije za čitanje.


Kako urediti hipervezu u Wordu

  • Da biste hipervezi dali drugačiji izgled, trebate desnom tipkom miša kliknuti na nju, odabrati stavku "Promijeni hipervezu".


  • Pred vama će se otvoriti prozor za uređivanje. Na vrhu, u stupcu “tekst”, prikazuje se naziv hiperveze koji će biti vidljiv svakom čitatelju, dok u donjem stupcu “adresa” treba naznačiti stranicu na koju će hiperveza voditi.
  • Kliknite OK nakon promjene.



Kako hiperlinkirati datoteke i mape u Wordu

Međutim, ne morate ulaziti na stranicu, već odabrati željeni direktorij u koloni “Folder” koja se nalazi na vrhu. Nakon toga možete primijeniti takve promjene tako da se klikom na poveznicu otvori cijela mapa ili kliknuti na njezine pojedinačne datoteke i komponente kako bi se pozvale.

Vrijedno je zapamtiti da kada preuzmete dokument na drugo računalo, takve hiperveze prestaju raditi jer sadrže adresu vaših mapa.


Kako stvoriti hipervezu u Wordu: alternativa

Ovaj je slučaj vrlo prikladan ako želite umetnuti hiperveze u već pripremljeni tiskani tekst. Samo označite prave riječi u tekstu.


Nakon toga idite na odjeljak "Umetni" u zaglavlju programa, pronađite stavku "Hiperveza" u njemu. Kliknite na njega.


Vidjet ćete izbornik koji vam je već poznat. Ostaje samo konfigurirati parametre za web mjesto ili put do mapa i datoteka.

Umetanje hiperveza u Microsoft Office Word vrlo je praktično i jednostavno, možete ga savladati uz samo nekoliko ponavljanja.


  • označite vezu
  • desnom tipkom miša otvorite izbornik
  • a zatim kliknite lijevom tipkom miša na "Kopiraj" u izborniku koji se pojavi:

Vraćamo se na Subscribe.ru u grupu Računalna pismenost. Ovdje, u komentarima, trebate napisati tekst ili umetnuti poveznicu poput http://….., što će u ovom slučaju biti percipirano kao običan tekst. Selektiramo ovaj tekst (kao što je prikazano ispod), dok ikona "lanac" (zaokružena crvenom bojom na slici) postaje "aktivna":

Kliknite lijevom tipkom miša na ikonu lanca. Ovo otvara prozor Dodaj/uredi vezu. Ovdje u prozoru "Adresa veze" morate unijeti prethodno kopiranu adresu veze koja je već u međuspremniku. Da biste to učinili, možete kliknuti desnom tipkom miša i na padajućem izborniku kliknuti na opciju "Umetni". U prozoru "Otvori u ..." bolje je postaviti "novi prozor".

Sada ostaje samo kliknuti na gumb "Umetni". Kako je rekao jedan od članova grupe, poveznica je bila “poplavljena”, tj. postala je hiperveza s karakterističnim plavim isticanjem.

  • označite vezu
  • desnom tipkom miša otvorite izbornik
  • a zatim kliknite lijevom tipkom miša na "Kopiraj" u izborniku koji se pojavi:

Vraćamo se na Subscribe.ru u grupu Računalna pismenost. Ovdje, u komentarima, trebate napisati tekst ili umetnuti poveznicu poput http://….., što će u ovom slučaju biti percipirano kao običan tekst. Selektiramo ovaj tekst (kao što je prikazano ispod), dok ikona "lanac" (zaokružena crvenom bojom na slici) postaje "aktivna":

Kliknite lijevom tipkom miša na ikonu lanca. Ovo otvara prozor Dodaj/uredi vezu. Ovdje u prozoru "Adresa veze" morate unijeti prethodno kopiranu adresu veze koja je već u međuspremniku. Da biste to učinili, možete kliknuti desnom tipkom miša i na padajućem izborniku kliknuti na opciju "Umetni". U prozoru "Otvori u ..." bolje je postaviti "novi prozor".

Sada ostaje samo kliknuti na gumb "Umetni". Kako je rekao jedan od članova grupe, poveznica je bila “poplavljena”, tj. postala je hiperveza s karakterističnim plavim isticanjem.

Bok svima. Svatko od nas susreo se s poveznicama na stranicama web stranica na Internetu. Znate li kako napraviti hipervezu u Word dokumentu? Zapravo, hiperveze se mogu stvoriti u bilo kojem Microsoft Office programu: PowerPoint, Excel i Word.

Što je hiperveza?

Hiperveza je objekt koji uključuje informacije o tome gdje se drugi objekt nalazi. Objekt može biti bilo koji dokument ili datoteka na računalu, može biti i poveznica na bilo koju stranicu na Internetu. Postupak stvaranja hiperveze je isti kao iu mnogim drugim programima. Poveznica je objekt koji kada kliknemo vodi na stranicu ili dokument koji nam treba.

Kako napraviti link kao bookmark

  1. Otvorite dokument i pronađite rečenicu koju želite označiti.
  2. Postavite kursor lijevo od početka retka.
  3. Otvorite karticu "Umetni". Pronađite "Veze". Pritisnite strelicu prema dolje i odaberite Knjižna oznaka.
  4. Sada napravite sljedeće postavke u prozoru Oznake.
    • Napišite naziv za oznaku. Oznaka će pokazivati ​​na mjesto gdje se kursor nalazi u dokumentu. Ako trebate označiti drugi redak, kliknite gumb "Odustani" i postavite pokazivač na željeno mjesto.
    • Ako želite da vaše oznake budu skrivene, označite odgovarajući okvir.
    • Pritisnite gumb Dodaj i oznaka će se povezati s tom lokacijom.
    • Spremite dokument, ako to ne učinite, Word neće znati gdje se nalaze vaše oznake.
  5. Povežimo se s knjižnom oznakom.
    • Na početku dokumenta postavite kursor na mjesto gdje će se sadržaj napraviti.
    • Dajte ime i odaberite ga držeći lijevu tipku miša.
    • Sada otvorite karticu "Umetni", pronađite stavku "Veze" i odaberite stavku izbornika "Hiperveza".
    • U odjeljku "Veza na" odaberite "Smjesti u dokument". Vidjet ćete popis svih knjižnih oznaka u trenutnom dokumentu.
    • Nakon što ste odabrali željenu knjižnu oznaku, samo trebate pritisnuti tipku OK i označene riječi će postati hiperveza.

Kako napraviti hipervezu na dokument na računalu

Ako želite da vaši referentni dokumenti budu dostupni drugima, napravite jednu mapu u koju ćete smjestiti sve dokumente, uključujući i onaj na kojem radite.

Klikom na gumb "Savjet" možete unijeti tekst koji će se prikazati kada kursor bude iznad hiperveze.

Kako napraviti hiperlink na web mjesto na internetu


Video: Kako napraviti link u Wordu?

Najpopularniji povezani članci