Lecția 6: Cucerirea link-urilor html

va arăta ca în browser:

Element a (ancor) este ca o ancoră, adică text inclus între deschidere si inchidere eticheta va fi textul linkului.
atributul href Aceasta este o abreviere pentru „referință hipertext” și specifică locația către care este navigat un anumit link - de obicei o adresă de Internet și/sau un nume de fișier.

Crearea unei legături html între paginile aceluiași site web este mult mai ușoară. De exemplu, dacă avem două pagini (de exemplu pagina1.htmŞi pagina2.htm) aflat în același folder, atunci codul de legătură de la pagina1 la pagina2 va arăta astfel:

Aceste. trebuie doar să scriem numele paginii la care vrem să mergem.

Dacă pagina pagina 2 este într-un subdosar "subdosar", codul linkului arată astfel:

Pentru a merge la pagina 2 faceți clic aici!

Pentru a merge la pagina 1 faceți clic aici!

Aceste. combinatie" ../ " indică, parcă, un folder situat cu un nivel mai sus față de poziția dată a fișierului din care se face legătura.

Secțiunea 1

Secțiunea 1:

Acum vă puteți referi la zona marcată (în acest caz, Secțiunea 1) prin simpla specificare a numelui acesteia după semnul #.

Permiteți-mi să vă dau un exemplu mai clar:

Cuprins

Secțiunea 1: Cum să te îmbogățești

Ca sa devii bogat trebuie sa muncesti mult.....

Secțiunea 2: Cum să fii fericit

Secțiunea 3: cum să fii sănătos

Iată rezultatul în browser:

Ca sa devii bogat trebuie sa muncesti mult.....

Pentru a deveni fericit, trebuie să folosești fiecare minut...

Pentru a fi sănătos trebuie să faci mult exerciții fizice...

Bineinteles ca poti..

Scrieți o scrisoare administratorului site-ului

În browser va arăta astfel:

După cum puteți vedea, se folosește mailto, urmat de două puncte și de e-mailul destinatarului. Când faceți clic pe link, programul client de e-mail se va lansa cu câmpul pentru numele destinatarului completat.

Câteva atribute suplimentare:

ŢINTĂ- indică unde se deschide pagina către care duce linkul html. În mod implicit, se deschide în aceeași fereastră. Dacă doriți să se deschidă într-unul nou, ar trebui să scrieți target="_blank".

Vezi exemplu:

Acesta este un link către site-ul web, se va deschide într-o fereastră nouă




Acesta este si pe site. Când treceți cu mouse-ul deasupra, va apărea un titlu.

Uită-te la rezultat:

Ei bine, asta e tot. Nu trebuie să vă faceți prea multe griji, în Adobe Dreamweaver orice link se face cu un singur clic de mouse. Principalul lucru pentru tine este să înțelegi ce este și nu trebuie să-l memorezi...

Este posibil să schimbi culoarea link-urilor?

Desigur că poți. Pentru a schimba culoarea legăturilor în întregul document, există atribute speciale ale elementului BODY.

LINK - culoarea doar a linkurilor.

ALINK (Active Link) - culoarea linkurilor active (activ înseamnă în momentul în care faceți clic pe el)

VLINK (Visited Link) - culoarea linkurilor deja vizitate

Toate culorile sunt specificate fie printr-o valoare RGB în hexazecimal, fie printr-una dintre cele 16 culori de bază.

De exemplu, dacă la deschiderea corpului unui document, scrieți în elementul body:

Legătură neagră

Toți utilizatorii care sunt într-un fel sau altul conectați cu site-urile web, cu crearea sau editarea acestora, întâlnesc crearea de link-uri către diverse materiale în fiecare zi. Și probabil că fiecare dintre ei știe cum și folosind ce etichetă html să facă un link către orice material de pe Internet.

Cu toate acestea, nu toată lumea știe cum să creeze un link către o anumită parte a paginii. Acest lucru poate fi foarte util dacă scrieți articole mari. La începutul postării, puteți face un cuprins, din fiecare rând din care puteți face apoi un link către o parte a textului atât pe aceeași pagină, cât și pe oricare alta.

Pentru a înțelege la ce ne referim, uitați-vă la designul instrucțiunilor noastre recente despre. În partea de sus a paginii există doar un astfel de meniu, în care se fac linkuri către un anumit loc de pe pagină.

Cum să faci link către o anumită locație pe pagina curentă

1. Atribuiți o ancoră unei părți a paginii

Primul pas este să atribuiți o așa-numită „ancoră” părții din pagină către care utilizatorul ar trebui să fie redirecționat atunci când face clic pe link. Pentru a face acest lucru, introduceți următorul cod înaintea textului din această parte a paginii

Textul paginii...

unde în loc de „ancoră” introduceți orice cuvânt care de preferință se potrivește cu sensul paragrafului la care vă referiți.

2. Link la ancora

Al doilea lucru pe care trebuie să-l faceți este să faceți legătura la „ancora” stabilită în primul paragraf în acel loc pe pagină de unde credeți că utilizatorul ar putea dori să meargă la partea din text la care trimiteți legătura. De exemplu, acesta ar putea fi un cuprins la începutul unui articol. Link-ul de ancorare arată așa

unde „ancoră” înlocuiește cu cuvântul pe care l-ai ales în primul paragraf al articolului.

Cum să faci link către o anumită parte a unei alte pagini

În același mod în care am discutat mai sus, puteți face link nu numai la o parte a textului de pe aceeași pagină, ci și la un anumit loc de pe orice altă pagină. Principalul lucru este că aveți posibilitatea de a plasa o „ancoră” acolo. Acest lucru se face după cum urmează:

1. Atribuiți o „ancoră” paginii destinatare

Ca și în paragraful anterior, atribuiți o „ancoră” părții dorite a paginii la care ar trebui să meargă utilizatorul când face clic pe link, aceasta arată în continuare la fel:

Textul paginii...

unde în loc de „ancoră” ar trebui să inserați orice cuvânt doriți.

2. Link către ancora unei alte pagini

Ca și în cazul precedent, trebuie doar să puneți un link către „ancora” creată mai devreme. Singura diferență este că atunci când conectați la o parte a unei alte pagini, trebuie să adăugați URL-ul acesteia la cod, care, ca urmare, va arăta astfel

Link text

unde în loc de „adresa paginii” trebuie să înlocuiți, respectiv, adresa URL a paginii la care faceți legătura și în loc de „ancoră” textul pe care l-ați selectat la crearea „ancorii”.

Pentru a crea link-uri către alte pagini ale site-ului dvs. sau link-uri către alte pagini ale site-ului, utilizați o etichetă asociată cu un parametru care indică unde se va face tranziția dacă se face clic pe link.

În parametrul href= am scris adresa paginii și între etichete Şi trebuie să scriem un text care, atunci când facem clic, va duce la un link.

În loc de text, poate exista orice imagine. Apoi, făcând clic pe imagine, veți ajunge și la link.

Să ne întoarcem la exemplul nostru anterior și să adăugăm link-uri către acest site, astfel

Acum pagina noastră va arăta așa.

Unii oameni întreabă. O cum se face legătura la un fișier ?

Exact la fel ca și alte link-uri, specificând doar numele fișierului în destinație. De exemplu

Descărcați cântecul lui Kirkorov

Descărcați programul

cu condiția ca fișierele să fie în același folder cu fișierul html

Dacă se află într-un folder diferit?

Descărcați programul dacă fișierul arhiv.rar se află în folderul soft relativ la pagina din directorul principal al site-ului. Aceste. „spunem” că trebuie mai întâi să mergeți la directorul soft și să luați fișierul arhiv.rar din acesta

înapoi la director dacă trebuie să mergeți la o pagină care se află într-un director superior, de exemplu, dacă fișierul katalog.html este localizat în directorul principal al site-ului dvs. și pagina de la care faceți legătura la acesta se află în folder soft. Înregistra ../ înseamnă revenirea la directorul anterior, cu un nivel mai sus. Această înregistrare a fost un standard încă de la apariția computerului. Aceste. înapoi la director înseamnă a merge la un director de nivel superior și a deschide fișierul katalog.html din el

Dacă aveți 2 directoare în directorul principal al site-ului dvs. și trebuie să faceți o legătură de la un fișier aflat într-un director la un fișier din alt director, atunci faceți ceva de genul acesta

aceste. mai întâi, permiteți-ne să clarificăm că trebuie să mergeți la directorul superior (../), apoi să introduceți folderul soft și să deschideți fișierul soft.html în el

Acestea sunt toate exemple de legături relative, de ex. link-uri referitoare la pagina de pe care se face link-ul.

Sau specificați calea completă către fișier. Aceste. de pe http://
De exemplu, Catalog
Link-urile care conțin calea completă către fișier se numesc absolute.

Dar în acest caz, funcționarea site-ului poate fi verificată doar atunci când este încărcat pe server și aveți conexiune la Internet.

În acest articol vă vom arăta cum să creați un link în HTML de la o pagină la alta. Vom descrie, de asemenea, pe scurt diverse tipuri hiperlinkuri.

Adăugați un ID în partea din pagină la care doriți să duceți utilizatorul. Pentru a face acest lucru, utilizați atributul id. Valoarea ar trebui să fie pe scurt text. id este un atribut folosit frecvent în HTML.

Elefanti

1. Creați un hyperlink

Sari la Elefanți

Fragmentele de cod de mai sus sunt postate la diferite părți document. Se dovedește ceva de genul:

Sari la Elefanți

Pisicile

Totul despre pisici.

Câini

Totul despre câini.

Păsări

Totul despre păsări.

Elefanti

Totul despre elefanți.

Maimuţe

Totul despre maimuțe.

Șerpi

Totul despre șerpi.

Șobolani

Totul despre șobolani.

Peşte

Totul despre pește.

Bivol

Totul despre bivol.

Vezi exemplu

Nu trebuie să fie aceeași pagină. Puteți folosi această metodă pentru a naviga la ID-ul oricărei pagini. Pentru a face acest lucru, înainte de a lipi linkul în HTML, adăugați adresa URL țintă înainte de caracterul „#”. De exemplu:

Sari la Elefanți

Desigur, se presupune că există un identificator cu această valoare pe pagină.

Link-uri către e-mail

Trimiteți un e-mail la King Kong

Vezi exemplu

Dacă dintr-o dată, dintr-un motiv oarecare, decideți să schimbați adresa URL a site-ului dvs., ar fi bine să lăsați o pagină ca aceasta în locul vechi:

Adresa site-ului a fost schimbată, după 10 secunde browserul dumneavoastră va fi redirecționat automat către noua adresă:
http://www.mysite.ru/
Faceți clic aici pentru a transfera imediat.
Ne cerem scuze pentru neplăcerile cauzate.

Să analizăm și să înțelegem linia din exemplu:

meta- Reîmprospătare (recuperare) spune browserului că această pagină trebuie să fie reîmprospătată continut="10;- actualizați după un număr specificat de secunde (în cazul nostru zece) URL=http://www.mysite/index.html"- adresa paginii noi/diferite la care să accesați.

Dar dacă în titlu Reîmprospăta Dacă omiteți adresa URL, așa cum se arată în exemplu, atunci browserul va actualiza constant conținutul acestei pagini la fiecare 30 de secunde (bine, sau nu 30.. oricât de mult ați scrie..).

Această metodă este utilizată pe scară largă în fluxurile de știri, unde informațiile circulă într-un flux, ca să spunem așa, și necesită o actualizare constantă.

Efecte la urmărirea unui link

>

Aceste titluri creează efecte vizuale atunci când treceți de la o pagină la alta.

Pagină-Enter- Efect de aspect al paginii

Pagina - Ieșire- Efectul de dispariție a paginii

In care:

Durată- durata efectului în secunde

Tranziţie- Unul dintre numerele efectelor propuse (de la 0 la 23) enumerate în tabel:

Fișier page1.html