Cred că ați înțeles deja despre ce se va discuta în acest capitol.. și știți ce este un link, dacă nu, atunci faceți clic aici.. Există mai multe tipuri de link-uri, precum și „mecanisme” de a face clic pe ele. În acest capitol voi încerca să vorbesc în detaliu despre cum să înregistrez link-urile, precum și să intru în complexitatea lucrului cu ele.
Digresiune lirică:
Odată ajuns în armată, șeful de stat major a venit la mine și a dat un ordin, citez:
Adu-mi acel document, deși nu știu unde este sau ce este!! De ce stai in picioare? Să fugim!! Am întârziat!!!
Deci, ce vreau să spun prin asta, pentru ca browserul să nu cadă în stupoare, așa cum am făcut atunci, trebuie să știe: numele exact al documentului, calea către document și locul unde să-l aducă, sau mai degrabă, unde să-l deschid.
Momentan, folosind un notepad, am creat un singur document HTML, il am cu numele index.html (de ce ai ales un nume asa ciudat index.html si de ce este nevoie, vezi) nu stiu care unul, ai venit singur cu numele, dar cred că , Îl amintești și știi unde este, cu excepția cazului în care, desigur, ești șeful meu de cabinet :).. În acest document vom încerca să creăm un link către un alt document pe care nu o avem încă.. Deci, înainte de a vă conecta la el, trebuie să îl creați, din fericire știți deja cum să faceți acest lucru.
- Deschide blocnotesul.
- Scriem cod în limbaj html. de exemplu, o pagină cu un număr de fotografii.
- Îl salvăm ca pagină html în același folder de lucru în care există deja primul document pe care l-am creat. Să-l numim primer.html pentru a evita confuzia și, probabil, să-l redenumim pe primul în index.html
Acum știu că aveți două documente html index.html și primer.html și că acum aveți un set minim pentru pregătire ulterioară.
Legături text.
Să ne întâlnim cu eticheta (din ancoră), puteți include text sau o imagine în el, care va deveni un link către anumite documente. Atributul etichetei href specifică numele și calea către documentul către care indică legătura.
Toate împreună este scris așa:
Iata pozele mele!!După cum probabil ați înțeles, primer.html este numele celui de-al doilea document al nostru html și inscripția „Iată fotografiile mele!!” aceasta este o bucată de text din fișierul index.html.
Prin analogie cu pozele, eticheta
Calea legăturii către documentul deschis este specificată folosind aceleași metode:
Iata pozele mele!!- Aceasta înseamnă că fișierul primer.html este situat cu un nivel mai sus față de document
Iata pozele mele!!- documentul se află pe site-ul www.site.ru..
Ei bine, hai să încercăm? Mai jos este un exemplu de două documente care conțin legături care indică unul către celălalt.
Fișier index.html:
Spune-mi, dragă copilă: în ce ureche bâzâie?
ÎN dreapta sau stânga?
Fișier Primer.html:
Din exemplu puteți vedea că linkurile sunt evidențiate în culoare, în mod implicit albastrul este un link, iar roșu este un link deja vizitat, aceste culori pot fi schimbate folosind eticheta de deschidere care ne este deja bine cunoscută < body > și atributele sale.
legătură- culoarea link-ului.o legătură- culoarea link-ului activat pe care s-a făcut clic.
vlink- culoarea link-ului vizitat.
Este scris astfel:
>Continuând să vorbim despre culoarea unui link text, merită menționat că, dacă este necesar, puteți forța atât întregul link, cât și părțile sale individuale (expresii, cuvinte, litere) să fie evidențiate în culoare folosind o etichetă familiară. si atributul acestuia culoare. Cu toate acestea, acest lucru se aplică nu numai culorii; puteți, de asemenea, să setați separat dimensiunea, stilul și fontul textului. Dar rețineți că manipularea culorilor trebuie făcută în interiorul etichetei Aici și nu peste bord, altfel culoarea linkului va fi fie implicit, fie așa cum este specificat în etichetă
Fișier index.html:
link="#008000" alink="#ff0000" vlink="#ffff00">
Priviți fraza care vă va ajuta să vă amintiți locurile de culori din curcubeu
R
A
D
U
G
A
Fișier Primer.html:
link="#008000" alink="#ff0000" vlink="#ffff00">
Fiecare
vânător
dorințe
stiu
Unde
stă
fazan
Reveniți la pagina principală
Una dintre paginile tale de pe site Neapărat ar trebui chemat index.html. Este fișierul cu acest nume pe care programul robot îl va căuta pe site-ul dvs. web atunci când o persoană introduce numele site-ului dvs. De la pagina index.html se va deschide primul, fă-l cel principal. Poti numi restul paginilor cum vrei... nu mai exista nuante cu nume.
Despre registru... Când scrieți calea și numele documentelor, amintiți-vă că, de exemplu: Page.html, page.html și PAGE.html sunt numele diferitelor documente! Același lucru este valabil și pentru numele marcajelor și imaginilor. Luați în considerare întotdeauna cazul când scrieți codul; există o probabilitate mare ca astfel de nume să nu fie recunoscute de un browser sau altul. Faceți o regulă să scrieți și să numiți totul cu litere mici latine, atunci riscul factorului uman și capriciile programelor vor fi reduse la zero.
Regula celor trei clicuri...
Încercați să formați un „arborele de legături” în așa fel încât un vizitator al site-ului să poată ajunge de la orice pagină la orice loc de pe site într-un număr minim de clicuri. Mai mult de trei tranziții către locul dorit de pe site nu mai sunt bune. Încărcarea nesfârșită a paginilor inutile pentru o persoană poate duce la criză nervoasă și închiderea prematură a site-ului. Economisiți timpul, banii și nervii oamenilor.
Hyperlinkurile au fost inventate pentru a lega documentele din rețea între ele, iar dacă site-ul dvs. este format din mai multe pagini, mai degrabă decât una, atunci le puteți lega împreună doar prin crearea de hyperlinkuri. Să vedem direct cu un exemplu cum arată.
Crearea unui hyperlink simplu
Accesați altă pagină
Deschiderea unui link într-o pagină nouă
Există un alt atribut interesant care vă poate fi util:
Accesați altă pagină
Atributul target cu valoarea _blank deschide linkul într-o fereastră nouă; acesta este adesea folosit dacă nu doriți ca o persoană să vă piardă pagina și, în același timp, să obțineți informațiile de care are nevoie pur și simplu într-o filă sau fereastră nouă.
Link-uri imagini
Rezultat în browser:
În esență, totul este simplu aici, am plasat eticheta de imagine între eticheta de hyperlink de deschidere și de închidere , dar din nou nu am inserat doar două imagini, am atribuit clasa img uneia în care resetez cadrul din jurul imaginii, deoarece atunci când devine hyperlink apare, dar nu în toate browserele, de exemplu o vei vedea în IE, dar nu în Google Chrome.
Sublinierea în linkuri
Accesați altă pagină
Accesați altă pagină
Pentru claritate, am oferit două opțiuni pentru rezolvarea acestei probleme, le-am atribuit unui selector de clasă și, înregistrând această clasă, veți elimina sublinierea inutile în anumite locuri. A doua soluție la problemă este eliminarea sublinierii de pe toate linkurile din etichetă<а>, care desigur rareori provoacă o nevoie, dar totuși cunoștințele nu sunt de prisos.
Legături în cadrul unui document
Nu este neobișnuit când un document este destul de lung și la începutul paginii există un mic meniu cu link-uri către subsecțiuni ale acestei pagini. Aceste link-uri sunt numite link-uri în cadrul documentului și toate acestea sunt implementate destul de simplu. Pentru început, ancorele sunt plasate în document, acestea sunt etichete, sunt plasate în document unde vor trebui mutate când faceți clic pe un link intern, de regulă, acestea sunt titluri de secțiune, eticheta arată astfel:
Și ultimul lucru pe care trebuie să-l știm despre hyperlink-uri sunt link-urile către cutiile poștale electronice, poate fi implementat foarte simplu, doar adăugați o intrare precum mailto: și adresa cutiei poștale la atributul href:
Aici termin lecția „Crearea de hyperlinkuri în html”, după cum poate ați observat, nu ne-am putea lipsi de CSS aici, în general materialul este destul de simplu, cred că totul va fi simplu și clar pentru dvs., dacă ai intrebari, scrie.
Data publicării: 2014-04-23
Hyperlinkurile sunt una dintre cele mai importante componente ale documentelor HTML. Datorită acestei componente, precum și a linkurilor obișnuite, Internetul este atât de ușor de utilizat. Ne vom uita la cele mai simple opțiuni de inserare a hyperlink-urilor, care vă vor ajuta, ca programatori începători, să stăpâniți această lecție.
Cum se creează un hyperlink în html?
Acest cod va funcționa numai pe site-ul dvs. web; nu va funcționa pentru link-uri externe.
< a href=" *** ">***** < /a>
Exemplu:
< a href="https://сайт/">Revista Cum să faci totul< /a>
În browser va arăta astfel:
< a href="https://сайт/prigotovlenie-edy/368-kak-sdelat-malosolnye-ogurcy.html">Cum să faci castraveți ușor sărați?< /a>
În browser vom putea vedea următoarele:
Cum se creează un hyperlink în html către un site extern?
Pentru link-urile externe, codul ar trebui să fie ușor modificat. Pentru a crea un link către un alt site, foloseste codul:
< a href="*** ">***** < /a>
< a href="https://vk.com/kaksdelatvse">Suntem în contact „Cum să facem totul”< /a>
Un hyperlink poate lega pagini dintr-un singur site sau poate indica orice pagină de pe Internet. Când construiți link-uri către paginile altor persoane, ar trebui să utilizați întotdeauna adresa absolută a paginii (http://www.site.com/page.html). Dacă creați un link către o pagină dintr-un site, este de preferat să utilizați o adresă URL relativă (page.html, catalog/page.html). Când creați un hyperlink grafic, rețineți că este posibil ca elementele grafice să nu fie accesibile anumitor utilizatori, așa că asigurați-vă că includeți elemente de text adecvate.
Exemplu:
Hyperlink într-o pagină html
Uneori este necesar să se creeze un hyperlink într-o singură pagină. De exemplu, pe această pagină există hyperlinkuri la începutul lecției, permițându-vă să accesați o anumită întrebare și chiar în partea de jos a paginii, permițându-vă să mergeți în partea de sus a paginii.
Exemplu:
hyperlink poștal
Exemplu:
|
Cod HTML: |
Afișarea browserului: |
Deschiderea paginilor html într-o fereastră nouă
Folosind atributul TARGET, puteți încărca pagina într-o nouă fereastră de browser. Acest atribut este destinat să specifice numele ferestrei. Numele ferestrei este folosit în scopuri oficiale. Pentru a deschide o pagină într-o fereastră nouă, trebuie să utilizați constanta _blank.
Exemplu:
Culoarea textului hyperlinkului
Atributele LINK, ALINK, VLINK specifică culoarea fontului hyperlinkurilor.
Atributul LINK este folosit pentru a evidenția hyperlinkuri care nu au fost încă vizitate de utilizator.
Procedura pentru următoarele hyperlinkuri
Unele browsere pot accepta capacitatea de a naviga prin hyperlinkuri folosind tasta Tab. În acest caz, browserul evidențiază implicit hyperlinkurile în ordinea în care apar în textul paginii. Puteți modifica ordinea de tranziție utilizând atributul etichetei TABINDEX . Pentru a include un hyperlink în lista care descrie noua ordine de navigare, trebuie să atribui atributului TABINDEX un număr întreg pozitiv în intervalul de la 1 la 32767. Pentru a exclude un hyperlink din listă, trebuie să atribuiți orice număr negativ atributului. Când utilizatorul apasă tasta TAB, cursorul se deplasează la hyperlinkul cu cea mai mică valoare pozitivă a indexului. Dacă mai multor hyperlinkuri li se atribuie aceeași valoare de index, primul selectat este cel care apare mai sus în textul paginii.
Trebuie spus că atributul TABINDEX poate fi folosit pentru a selecta alte obiecte, de exemplu, imagini grafice.
„Hyperlink-uri în HTML” este a cincea lecție a manualului HTML. Această lecție se va concentra pe utilizarea legăturilor hipertext. Orice document web se bazează pe link-uri hipertext, astfel încât fiecare web master trebuie să poată lucra cu link-uri.
Reguli de utilizare a link-urilor hipertext.
Hiperlinkuri în HTML sunt necesare pentru conectarea diferitelor documente, atât în cadrul unui site, cât și pe întregul Internet. Pentru a crea legături hipertext (hyperlink-uri), se folosește un descriptor :
Atributul href este folosit pentru a transmite adresa documentului către care indică legătura.
O mare varietate de obiecte, inclusiv imagini, pot acționa ca hyperlinkuri:
– metaetichete în HTML.
Vă puteți referi nu numai la diferite documente, ci și la diferite părți ale acestor documente. Pentru a face acest lucru, într-o parte a documentului trebuie să plasați o așa-numită ancoră - o construcție a formularului și apoi să faceți referire la aceasta specificând următorul cod în atributul href:
href="http://www.site.#anchor name"
Dacă browserul nu poate găsi ancora numită specificată pe pagina apelată, atunci browserul va sări pur și simplu la începutul documentului fără erori.
Comunicațiile hipertext pot fi efectuate folosind o varietate de protocoale. Cele mai frecvent utilizate sunt prezentate mai jos:
- HTTP– protocol – un protocol standard de comunicații hipertext conceput pentru transmiterea unică a blocurilor de informații.
- FTP– protocol – protocol universal de transfer de fișiere. Necesită autorizare.
- MAILTO– protocol standard de transfer de e-mail.
Configurarea hyperlink-urilor în HTML.
atributul target al etichetei determină modul în care se va deschide o nouă pagină și ia următoarele valori:
- _self – documentul se va deschide în fereastra curentă
- _parent – în cadrul care este părintele cadrului curent
- _top – în fereastra principală a întregii structuri de cadru
- _blank – documentul se va deschide într-o fereastră nouă
De exemplu, pentru a deschide o pagină cu contacte într-o fereastră nouă, trebuie să utilizați următorul cod:
- Link – determină aspectul linkurilor care nu au fost încă vizitate.
- Alink – determină aspectul linkurilor deja vizitate.
- Vlink – determină aspectul linkurilor selectate.
În următoarea lecție vom vorbi despre lucrul cu grafica în HTML: vom învăța cum să inserăm imagini, să le personalizăm aspectul etc.
