Imazhi si hiperlidhje për. Si të futni një hiperlidhje në HTML? Krijimi dhe përdorimi i hiperlidhjeve në HTML. Si të bëni një foto një lidhje në forum

Lidhjet mund të ndahen në dy kategori:
lidhjet me burimet e jashtme— krijohen duke përdorur një etiketë dhe përdoren për të zgjeruar aftësitë e dokumentit aktual kur përpunohet nga shfletuesi;
hiperlidhjet— lidhje me burime të tjera që përdoruesi mund të vizitojë ose shkarkojë.

Si të krijoni hiperlidhje në një faqe interneti

1. Struktura e lidhjes

Hiperlidhjet krijohen duke përdorur një etiketë të çiftuar. Teksti që do të shfaqet në faqen e internetit vendoset brenda etiketës. Teksti i lidhjes shfaqet në shfletues me një nënvizim, ngjyra e shkronjave është blu dhe kur rri pezull mbi lidhjen, kursori i miut ndryshon pamjen.

Parametri i kërkuar i etiketës është atributi href, i cili specifikon URL-në e faqes së internetit.

indeksi i lidhjes

Lidhja përbëhet nga dy pjesë − tregues Dhe pjesa e adresës. Indeksi i lidhjesështë një pjesë teksti ose imazhi e dukshme për përdoruesin. Pjesa e adresës Lidhja nuk është e dukshme për përdoruesin; ajo përfaqëson adresën e burimit në të cilin duhet të shkoni.

Pjesa e adresës së lidhjes përbëhet nga URl. URL(Uniform Resource Locator) - adresë uniforme e burimit. Kur krijoni adresa, rekomandohet të përdorni një vizë ndarëse në vend të një nënvize për të ndarë fjalët. Në përgjithësi, një URL që ka formatin e mëposhtëm:

Metoda e hyrjes: // emri i serverit: porti/rruga

Metoda e hyrjes, ose protokolli, shkëmben të dhëna ndërmjet stacioneve të punës në rrjete të ndryshme. Protokollet më të zakonshme të transferimit të të dhënave:

skedari ofron leximin e një skedari nga disku lokal:

Skedari:/gallery/pictures/summer.html

http siguron qasje në një faqe interneti duke përdorur protokollin HTTP:

http://site.ru/

https është një zbatim i veçantë i protokollit HTTP që përdor kriptim (zakonisht SSL ose TLS)

https://site.ru/

ftp i bën një kërkesë serverit FTP për të marrë një skedar:

Ftp://pgu/directory/library

mailto fillon një seancë postare me destinacionin dhe hostin e specifikuar:

Mailto: [email i mbrojtur]

Emri i serverit përshkruan emrin e plotë të makinës në rrjet, për shembull, site.ru. Nëse emri i serverit nuk është i specifikuar, atëherë lidhja konsiderohet lokale, d.m.th. është në të njëjtën makinë si dokumenti HTML që përmban lidhjen.

Numri i portit TCP, në të cilin funksionon web serveri. Ky është një numër që duhet të specifikohet nëse metoda kërkon një numër porti (serverët individualë mund të kenë numrin e tyre të veçantë të portit). Nëse nuk specifikohet asnjë port, standardi është porti 80. Portat standarde janë:
21 - FTP
23 - Telnet
70 - Gopher
80 - HTTP

Rrugë përmban emrin e dosjes në të cilën ndodhet skedari.

2. Rruga absolute dhe relative

Kur një lidhje specifikon vetëm një emër skedari, shfletuesi supozon se skedari është në të njëjtën dosje me dokumentin që përmban hiperlidhjen. Në praktikë, faqet e internetit përmbajnë qindra dokumente, të cilat vendosen në dosje të veçanta për ta bërë më të lehtë menaxhimin e tyre. Për të krijuar një lidhje me një skedar jashtë dosjes që përmban dokumentin aktual, duhet të specifikoni vendndodhjen ose shtegun e skedarit. HTML mbështet dy lloje rrugësh: absolute dhe relative.

Oriz. 1. Shembull i strukturës së dosjeve

2.1. Rruga absolute

Rruga absolute tregon vendndodhjen e saktë të skedarit brenda të gjithë strukturës së dosjes në kompjuter (server). Rruga absolute drejt skedarit jep akses në skedar nga burimet e palëve të treta dhe përmban komponentët e mëposhtëm:
1) protokolli, për shembull, http (opsionale);
2) domain (emri i domenit ose adresa IP e kompjuterit);
3) dosje (emri i dosjes që tregon rrugën drejt skedarit);
4) skedari (emri i skedarit).

Ekzistojnë dy lloje të shënimeve absolute të rrugës: me dhe pa tregues protokolli:

Http://site.ru/pages/tips/tips1.html //site.ru/pages/tips/tips1.html

Nëse skedari është në dosjen rrënjë, atëherë rruga për në skedar do të jetë si më poshtë:

http://site.ru/index.html

Nëse nuk ka emër skedari, faqja e internetit që është caktuar si parazgjedhje në cilësimet e serverit të uebit do të ngarkohet (i ashtuquajturi skedari i indeksit).

http://site.ru/

Zakonisht skedari i indeksit është një dokument i quajtur index.html. Prania e një vije të pjerrët / do të thotë që qasja shkon në dosje; nëse nuk është aty, ajo shkon drejtpërdrejt në skedar.

2.2. Rruga relative

Rruga relative përshkruan rrugën drejt dokumentit të specifikuar në lidhje me atë aktual. Rruga përcaktohet në bazë të vendndodhjes së faqes së internetit në të cilën ndodhet lidhja. Lidhjet relative përdoren kur krijohen lidhje me dokumente të tjera në të njëjtin sajt. Kur shfletuesi nuk gjen protokollin http:// në lidhje, ai kërkon të njëjtin server për dokumentin e specifikuar.

Një rrugë relative përmban komponentët e mëposhtëm:
1) dosje (emri i dosjes që tregon rrugën drejt skedarit);
2) skedari (emri i skedarit).

Rruga për lidhjet relative ka tre shënime të veçanta:
/ tregon në direktorinë rrënjë dhe thotë që të fillojë në direktorinë rrënjë të dokumentit dhe të kalojë në dosjen tjetër
./ tregon në dosjen aktuale
../ shko lart një dosje (drejtori)

Dallimi kryesor midis një shtegu relative dhe një shtegu absolut është se shtegu relative nuk përmban emrin e dosjes rrënjësore dhe dosjeve mëmë, gjë që e bën adresën më të shkurtër, dhe nëse lëvizni nga një domen në tjetrin, nuk keni nevojë të shkruani një adresë të re absolute. Por nëse një burim i palës së tretë lidhet, për shembull, me imazhet tuaja me adresa relative, atëherë ato nuk do të shfaqen në një faqe tjetër.

3. Ankorat

Ankorat, ose lidhje të brendshme, krijojnë kalime në seksione të ndryshme të faqes aktuale të internetit, duke ju lejuar të lëvizni shpejt midis seksioneve. Kjo rezulton të jetë shumë e përshtatshme kur ka shumë tekst në faqe. Lidhjet e brendshme krijohen gjithashtu duke përdorur etiketën me ndryshimin se atributi href përmban emrin e pointerit - të ashtuquajturit spirancë, jo URL-në. Emri i treguesit gjithmonë paraprihet nga një shenjë #.

Unë mendoj se ju tashmë e kuptoni se çfarë do të diskutohet në këtë kapitull.. dhe ju e dini se çfarë është një lidhje, nëse jo, atëherë klikoni këtu. Ka disa lloje lidhjesh, si dhe "mekanizma" për klikim mbi to. Në këtë kapitull do të përpiqem të flas në detaje se si të regjistroni lidhjet, si dhe të hyj në ndërlikimet e punës me to.

Digresioni lirik:
Një herë në ushtri më erdhi shefi i shtabit dhe dha një urdhër, citoj:
Ma sillni atë dokument, edhe pse nuk e di ku është dhe çfarë është!! Pse po qëndroni në këmbë? Le te vrapojme!! Jam vone!!!

Pra, çfarë dua të them me këtë, në mënyrë që shfletuesi të mos bjerë në hutim, siç bëra atëherë, ai duhet të dijë: emrin e saktë të dokumentit, rrugën drejt dokumentit dhe vendin ku duhet ta sjellë atë, ose më mirë, ku ta hapni.

Për momentin, duke përdorur një bllok shënimesh, ne kemi krijuar vetëm një dokument HTML, unë e kam me emrin index.html (pse zgjodhët një emër kaq të çuditshëm index.html dhe pse duhet, shikoni) nuk e di cili, emrin e keni gjetur vetë, por mendoj se ju e mbani mend dhe e dini ku është, përveç nëse sigurisht jeni shefi im i kabinetit :).. Në këtë dokument do të përpiqemi të krijojmë një lidhje me një dokument tjetër që ne nuk e kemi ende.. Pra, përpara se të lidheni me të, ju duhet ta krijoni atë, për fat të mirë ju tashmë e dini se si ta bëni këtë.

1. Hap bllokun e shënimeve.
2. Ne shkruajmë kodin në gjuhën html. për shembull, një faqe me një numër fotografish.
3. Ne e ruajmë atë si një faqe html në të njëjtën dosje pune ku ekziston tashmë dokumenti i parë që krijuam. Le ta quajmë primer.html për të shmangur konfuzionin dhe ndoshta të riemërtojmë të parin në index.html

Tani e di që keni dy dokumente html index.html dhe primer.html dhe se tani keni një grup minimal për trajnime të mëtejshme.

Lidhje me tekst.

Le të takohemi tag (nga spiranca), mund të bashkëngjitni tekst ose një foto në të, e cila do të bëhet një lidhje me dokumente të caktuara. Atributi i etiketës href specifikon emrin dhe rrugën drejt dokumentit në të cilin tregon lidhja.

Të gjitha së bashku shkruhet kështu:

Këtu janë fotot e mia!!

Siç e keni kuptuar ndoshta, primer.html është emri i dokumentit tonë të dytë html dhe mbishkrimi "Këtu janë fotot e mia!!" kjo është një pjesë e tekstit nga skedari index.html.

Për analogji me fotot, etiketa Rruga e lidhjes për dokumentin që hapet specifikohet duke përdorur të njëjtat metoda:

Këtu janë fotot e mia!!- Kjo hyrje nënkupton që në drejtorinë ku ndodhet dokumenti ynë i parë html ka një dosje stranica në të cilën ndodhet skedari primer.html
Këtu janë fotot e mia!!- Kjo do të thotë që skedari primer.html ndodhet një nivel më lart nga dokumenti
Këtu janë fotot e mia!!- dokumenti ndodhet në faqen e internetit www.site.ru..

Epo, le ta provojmë? Më poshtë është një shembull i dy dokumenteve që përmbajnë lidhje që tregojnë njëri-tjetrin.

Skedari Index.html:

Më thuaj, fëmijë i dashur: në cilin vesh po gumëzhin?


NË drejtë ose majtas?

Skedari Primer.html:

Por nuk e mora me mend mirë! Kam një gumëzhimë në të dy veshët.

Epo, unë nuk luaj kështu ...

Nga shembulli mund të shihni se lidhjet janë të theksuara me ngjyra, si parazgjedhje bluja është një lidhje, dhe e kuqja është një lidhje tashmë e vizituar, këto ngjyra mund të ndryshohen duke përdorur etiketën hapëse që tashmë është e njohur për ne. < body > dhe atributet e tij.

lidhje- ngjyra e lidhjes.
lidhje- ngjyra e lidhjes aktive të klikuar.
vlink- ngjyra e lidhjes së vizituar.

Është shkruar kështu:

>

Duke vazhduar të flasim për ngjyrën e një lidhjeje teksti, vlen të përmendet se, nëse është e nevojshme, mund të detyroni të gjithë lidhjen dhe pjesët e saj individuale (frazat, fjalët, shkronjat) të theksohen me ngjyra duke përdorur një etiketë të njohur. dhe atributin e tij ngjyrë. Sidoqoftë, kjo vlen jo vetëm për ngjyrën; gjithashtu mund të vendosni veçmas madhësinë, stilin dhe fontin e tekstit. Por mbani mend se manipulimi i ngjyrave duhet të bëhet brenda etiketës këtu dhe jo jashtë bordit, përndryshe ngjyra e lidhjes do të jetë ose si parazgjedhje ose siç specifikohet në etiketë

Skedari Index.html:

link="#008000" alink="#ff0000" vlink="#ffff00">

Shikoni frazën që do t'ju ndihmojë të mbani mend vendet e ngjyrave në ylber

R
A
D
U
G
A




Skedari Primer.html:

link="#008000" alink="#ff0000" vlink="#ffff00">

Çdo
gjahtar
dëshirat
e di
Ku
është ulur
fazani



Kthehuni në faqen kryesore

Një nga faqet tuaja në faqe Domosdoshmërisht duhet thirrur index.html.Është skedari me këtë emër që programi robot do të kërkojë në faqen tuaj të internetit kur një person fut emrin e faqes tuaj të internetit. Që nga faqja index.html do të hapet së pari, do ta bëjë atë kryesore. Pjesa tjetër e faqeve mund t'i quani si të doni... nuk ka më nuanca me emra.

Rreth regjistrit... Kur shkruani rrugën dhe emrat e dokumenteve, mbani mend se, për shembull: Page.html, page.html dhe PAGE.html janë emrat e dokumenteve të ndryshme! E njëjta gjë vlen edhe për emrat e faqeshënuesve dhe fotografive. Gjithmonë merrni parasysh rastin kur shkruani kodin; ekziston një probabilitet i lartë që emra të tillë të mos njihen nga një shfletues ose një tjetër. Bëjeni rregull që të shkruani dhe të quani gjithçka me shkronja të vogla latine, atëherë rreziku i faktorit njerëzor dhe pakuptimtë e programeve do të reduktohet në zero.

Rregulli me tre klikime...

Përpiquni të formoni një "pemë lidhjesh" në atë mënyrë që një vizitor i faqes të mund të arrijë nga çdo faqe në çdo vend të sajtit me një numër minimal klikimesh. Më shumë se tre kalime në vendin e dëshiruar në faqe nuk janë më të mira. Ngarkimi i pafund i faqeve të panevojshme për një person mund të çojë në prishje nervore dhe mbyllje të parakohshme të faqes. Kurseni kohën, paratë dhe nervat e njerëzve.

Si të krijoni lidhje në një dokument HTML

(Më shumë shembuj do të gjeni në fund të kësaj faqeje)

Hiperlidhjet HTML (Lidhjet)

Etiketë mund të përdoret në dy mënyra:

1. Për të krijuar një lidhje me një dokument tjetër - duke përdorur atributin href
2. Për të bërë një faqeshënues brenda një dokumenti - duke përdorur atributin e emrit

Lidhje sintaksore HTML

Shembull

Vizitoni faqen

do të shfaqet nga shfletuesi si kjo:

Lidhjet HTML - Atributi i synuar

Atributi target specifikon se ku të hapet dokumenti i lidhur (ai të cilit i referohet lidhja).

Shembulli i mëposhtëm do të hapë dokumentin e lidhur në një dritare ose skedë të re të shfletuesit:

Lidhjet HTML - Atributi i Emrit

Atributi i emrit përdoret për të krijuar një faqeshënues ("ankor") brenda një dokumenti HTML.

Koment:
Standardi i ardhshëm HTML5 sugjeron përdorimin e atributit id në vend të atributit të emrit për të specifikuar emrin e lidhjes.
Përdorimi i atributit id funksionon në të vërtetë në HTML4 në të gjithë shfletuesit modernë.

Faqerojtësit nuk shfaqen në ndonjë mënyrë të veçantë. Ata nuk janë të dukshëm për lexuesin.

Koment: Gjithmonë shtoni një vijë të pjerrët pasuese në lidhjet e nëndirektorive. Nëse krijoni një lidhje si kjo: href="http://site/html", atëherë serverit gjenerohen dy kërkesa, së pari serveri shton një vijë të pjerrët në adresë dhe më pas krijon një kërkesë të re: href="http ://site/html/" .

Këshilla: Lidhjet me emër përdoren shpesh për të krijuar një "tabela të përmbajtjes" në fillim të një dokumenti të madh. Secilit kapitull brenda një dokumenti i caktohet një spirancë me emër dhe lidhjet për secilën prej këtyre ankorave të emërtuara futen në fillim të dokumentit.

Këshilla: Nëse shfletuesi nuk gjen lidhjen e specifikuar me emër, ai shkon në fillim të dokumentit. Nuk ndodhin gabime.

Ne kemi publikuar një libër të ri, Marketingu i përmbajtjes në mediat sociale: Si të futeni brenda kokës së ndjekësve tuaj dhe t'i bëni ata të dashurohen me markën tuaj.

Ky është një baner reklamues në të djathtë të rrugës. Një imazh shumëngjyrësh mund të dërgojë një shofer në botën që reklamon. Nëse, sigurisht, udhëtari dëshiron të shkojë atje - domethënë, ai shkon në adresën e treguar në bander.

Llojet e lidhjeve në faqe

Siç kemi bërë tashmë, lidhjet në sit mund të jenë të ndryshme. Dy llojet kryesore të lidhjeve janë teksti ankorues, teksti jo ankorues dhe lidhjet e imazhit. Lidhjet e tekstit janë të rëndësishme për promovim, pasi ato rrisin peshën e pyetjeve të kërkimit nga lista e ankorimit. Lidhjet e imazheve gjithashtu përcjellin peshë, por më shpesh ato përdoren për të përmirësuar përdorshmërinë e faqes.

Për shembull, në seksionin "galeria e fotografive", për lehtësinë e përdoruesve, është logjike të krijoni lidhje me foto. Kur klikoni në ikonën e fotografisë, hapet një dritare e re e madhe, në të cilën një person mund ta shikojë plotësisht imazhin në një format të madh. Ose, për shembull, imazhi i hartës së drejtimit mund të zmadhohet gjithashtu nëse përdoruesi dëshiron. Nëse teksti juaj përmban vizatime dhe grafika, është logjike të jepni një lidhje për të shkarkuar imazhin në madhësi të plotë.

Imazhi mund të çojë në një faqe tjetër në faqe. Kjo mund të jetë një shteg nga një baner reklamimi, një artikull menyje, etj.

Ju kujtojmë se nuk këshillohet të organizoni menunë në faqen tuaj të internetit në formën e fotografive - kjo është e papërshtatshme si për ju ashtu edhe për motorin e kërkimit. Këshillohet përdorimi i tekstit.

Si të futni një lidhje në një foto

Shumica e CMS kanë redaktues të integruar që ju lejojnë të punoni me ngarkimin e imazheve dhe vendosjen e lidhjeve prej tyre.

• Në një redaktues vizual, zakonisht thjesht mund të zgjidhni një imazh, klikoni në butonin "fut lidhjen" dhe specifikoni url-në e dëshiruar.
• Nëse futni një lidhje në një foto si kod HTML, atëherë përdorni drejtshkrimin e mëposhtëm:

Etiketë<а>do të thotë të ndjekësh një lidhje, a specifikon rrugën drejt imazhit nga e cila e dërgoni përdoruesin diku. Kjo do të thotë, fillimisht duhet ta ngarkoni në serverin tuaj.

Udhëzime shtesë:

• lartësia, gjerësia - tregoni madhësinë e figurës;
• kufiri - ne punojmë me skaj (kornizë);
• alt - tekst alternativ për vizitorin, imazhi i të cilit nuk u shfaq.

Mund të shtoni një hije në imazh, të ndryshoni transparencën kur rri pezull treguesin e miut, të ndryshoni ngjyrën, qoshet e rrumbullakëta - e gjithë kjo është e mundur me mjetet CSS.

Nëse bëni një foto nga një faqe tjetër si lidhje

Ju mund të përdorni një imazh nga një burim tjetër, për këtë qëllim në ju duhet të ngjitni rrugën e saj të plotë.

Nëse dëshironi të vendosni një imazh në faqen tuaj pa e shkarkuar atë, domethënë duke e tërhequr nga një faqe tjetër:

• Mos harroni se përdorimi i imazheve të njerëzve të tjerë nuk është i këshillueshëm dhe përgjithësisht i pamundur, pasi çdo material grafik ka autorin e vet.
• Kur shfaqni një imazh të ngarkuar nga burimi i dikujt tjetër në faqen tuaj, ju transferoni një pjesë të besimit të faqes tuaj te një burim i palës së tretë dhe, përveç kësaj, paguani për një kohë më të gjatë ngarkimi të faqes.

E gjithë kjo përkeqëson rezultatet e promovimit të faqes në internet.

Rregullat për vendosjen e lidhjeve-fotove në faqe

• Lidhje vetëm nga imazhet tuaja.
• Përdorni imazhe unike. Ashtu si tekstet, për promovim të suksesshëm, imazhet nuk duhet të përsëriten në internet.
• Mos ngarkoni një foto të madhe. Vizualisht mund ta zvogëloni duke përdorur gjerësinë dhe lartësinë në etiketë , dhe imazhi në faqe do të jetë i vogël në madhësi. Por në fakt, një imazh me madhësi të plotë do të ngarkohet në faqe çdo herë, gjë që do të rrisë kohën e ngarkimit të faqes dhe do të ketë një efekt të keq në promovimin e faqes. Dhe cilësia e imazhit të ngjeshur me forcë do të vuajë.
• Regjistrohu - përshkrim për secilën foto. Ju gjithashtu mund të regjistroheni