Attēls kā hipersaite priekš. Kā ievietot hipersaiti HTML? Hipersaišu izveide un izmantošana HTML

Sveiki, dārgie emuāra vietnes lasītāji. Šodien mēs runāsim par to, kā izveidot hipersaites html, uzzināsim, kā izmantot tagu “A” un tā href un mērķa atribūtus, kā arī uzzināsim, kā attēlu padarīt par saiti.

Hipersaites ir galvenie tīmekļa lapas elementi. Tie savieno dažādas html lapas pilnvērtīgā tīmekļa vietnē. Parasti saites tiek parādītas kā pasvītrots teksta fragments, kas, virzot kursoru virs tā, liek peles kursoram parādīties kā rādītājam.

Turklāt hipersaite var būt grafiska attēla vai tā fragmenta formā. Noklikšķinot uz saites, pārlūkprogramma ielādē tīmekļa lapu, kuras adrese ir norādīta šīs saites atribūtos. Hipersaites ļauj izveidot saites uz abiem iekšējās lapas jūsu vietni, kā arī citus resursus internetā.

Sāksim vienkārši un apsvērsim iespēju izveidot parastu tekstu saites. Lai izveidotu teksta hipersaiti, pietiek pievienot pārī savienotajā tagā A jebkuru teksta fragmentu, kam jākļūst par saiti. Un šī taga atribūtā href jums jānorāda mērķa tīmekļa lapas adrese internetā:

Šis html koda fragments izveido rindkopu, kurā ir saite. Saite norāda uz tīmekļa lapu page15.html, kas atrodas kataloga mapē, kas saglabāta vietnes www.site.ru saknes mapē.

Ja lapa netiek izmantota CSS stili un netiek lietoti nekādi papildu atribūti, tad hipersaites lapā pēc noklusējuma tiek parādītas šādi:

• parastās saites tiek parādītas zilā krāsā;
• apmeklētās saites ir izceltas purpursarkanā krāsā;
• aktīva hipersaite (noklikšķināta uz šobrīd) tiek parādīts sarkanā krāsā, taču, tā kā laiks starp klikšķi uz saites un jauna dokumenta ielādes sākumu ir diezgan īss, šāds saites stāvoklis ir ļoti īslaicīgs;
• Saites teksts tiek parādīts ar pasvītrojumu.

Pilnajā adresē ir norādīta tīmekļa servera interneta adrese un ceļš uz failu, kas jāiegūst. Piemēram:

Šeit www.site.ru ir tīmekļa servera adrese, un /catalog/page15.html ir ceļš uz failu šajā serverī. Parasti pilnas interneta adreses parasti tiek izmantotas tikai tad, ja ir nepieciešams izveidot hipersaiti, kas norāda uz jebkādiem resursiem, kas atrodas citā vietnē.

Veidojot hipersaites, kas norāda uz failiem, kas ir daļa no tās pašas vietnes kā pašreizējā tīmekļa lapa, labāk ir izmantot saīsinātas interneta adreses. Saīsinātā adrese satur tikai ceļu uz failu serverī, jo Tīmekļa servera adrese pārlūkprogrammai jau ir zināma.

Ir saīsinātas interneta adreses absolūts Un radinieks. Absolūtā adrese norāda ceļu uz mērķa failu attiecībā pret vietnes saknes mapi. Šī adrese sākas ar simbolu / (slīpsvītra), kas apzīmē saknes mapi. Piemēram, adrese "/page15.html" norāda uz failu page15.html, kas tiek saglabāts vietnes saknes mapē. Vai arī adrese “/catalog/page.html” norāda uz failu page.html, kas tiek ievietots kataloga mapē, ligzdots vietnes saknes mapē.

Relatīvā adrese attiecas uz faila ceļu attiecībā pret pašreizējo tīmekļa lapas failu. Relatīvās adreses nesatur slīpsvītru. Apskatīsim dažus piemērus.

Piemēram, adrese "page.html" norāda uz failu, kas atrodas tajā pašā mapē, kurā atrodas pašreizējās tīmekļa lapas fails. Un adrese “catalog/page.html” atvērs kataloga mapē saglabāto failu page.html, kas ir ligzdots mapē, kurā tiek glabāta pašreizējā lapa.

Izmantojot divus punktus adreses sākumā, varat norādīt iepriekšējā ligzdošanas līmeņa mapes. Tā, piemēram, adrese “.../page.html” norāda uz lapu page.html, kas saglabāta mapē, kurā ir ligzdota mape ar pašreizējo tīmekļa lapu.

Izmantojot html valodu, varat izveidot pasta hipersaites, noklikšķinot uz kura tiek palaista programma pasta klients. Norādot adresi atribūtā href, pirms e-pasta jāliek “mailto:”, t.i. kaut kas līdzīgs šim: href="mailto: [aizsargāts ar e-pastu] Turklāt pirms pasta adreses aiz kola nedrīkst būt atstarpes.

Tā kā tas ir iekļauts html lapas elements, mēs vienkārši ievietojam šo tagu "A" taga iekšpusē, nevis teksta:

Bez šī vienkāršs variants izveidojot hipersaites attēlu, html ļauj daļu grafiskā attēla pārvērst par hipersaiti. Turklāt attēlu ir iespējams sadalīt daļās, no kurām katra būs hipersaite, kas norāda uz savu interneta adresi. Šo opciju sauc par attēlu karti.

Mūsdienās attēlu karti izmanto reti, jo tai ir nepieciešams ļoti liels tagu skaits un html kods kļūst apgrūtinošs un mulsinošs.

Attēlu karte tiek veidota trīs posmos:

Pilns html kods, kas izveido attēla karti, izskatās apmēram šādi:

Šeit esam izveidojuši vienu taisnstūra apgabalu, kas norāda uz webcodius vietnes galveno lapu, vienu apļveida apgabalu, kas norāda uz lapu ar visiem rakstiem tajā pašā vietnē, un vienu daudzstūra apgabalu bez saites.

Enkurs vai tags ir hipersaites veids, kas iezīmē atsevišķu HTML lapas fragmentu un ļauj pārvietoties pa dokumenta saturu.

Iespējams, jau esi sastapies ar lapām, kur uzreiz aiz virsraksta bija saraksts ar rakstu sadaļu nosaukumiem, uz kuriem noklikšķinot, nonāksi sev interesējošā ieraksta sadaļā.

Enkuri, tāpat kā parastās hipersaites, tiek veidoti, izmantojot sapārotu A tagu, tikai atribūta href vietā tajā tiek ievietots name vai id atribūts, kura vērtība norāda unikālo etiķetes identifikatoru. Tomēr pašam “A” tagam parasti nav satura:

Ir otrs veids, kā izveidot enkuru, kurā jums nav jāizveido tukši “A” elementi. Vai arī varat izmantot tīmekļa lapā jau esošos elementus, piemēram, . Lai to izdarītu, vēlamajam elementam pievienojiet universālā id atribūtu:

Es domāju, ka jūs jau saprotat, kas tiks apspriests šajā nodaļā.. un jūs zināt, kas ir saite, ja nē, tad spiediet šeit.. Ir vairāki saišu veidi, kā arī “mehānismi”, kā uz tām klikšķināt. Šajā nodaļā es mēģināšu detalizēti runāt par to, kā reģistrēt saites, kā arī iedziļināties darba ar tām sarežģītībā.

Liriskā novirze:
Reiz armijā štāba priekšnieks pienāca pie manis un deva pavēli, citēju:
Atnesiet man to dokumentu, lai gan es nezinu, kur tas atrodas un kas tas ir!! Kāpēc tu stāvi? Skrienam!! es kavēju!!!

Tātad, ko es ar to domāju, lai pārlūkprogramma neiekristu stuporā, kā es toreiz, tai ir jāzina: precīzs dokumenta nosaukums, ceļš uz dokumentu un vieta, kur to nogādāt, vai drīzāk, kur to atvērt.

Šobrīd, izmantojot piezīmju grāmatiņu, esam izveidojuši tikai vienu HTML dokumentu, man tas ir ar nosaukumu index.html (kāpēc izvēlējāties tik dīvainu nosaukumu index.html un kāpēc tas ir vajadzīgs, skat.) Nezinu kuru, tu pats izdomāji nosaukumu, bet es domāju , Tu to atceries un zini, kur tas atrodas, ja vien, protams, neesi mans štāba priekšnieks :).. Šajā dokumentā mēģināsim izveidot saiti uz citu dokumentu kuras mums vēl nav. Tāpēc, pirms izveidojat saiti uz to, jums tas ir jāizveido, par laimi, jūs jau zināt, kā to izdarīt.

Tagad es zinu, ka jums ir divi html dokumenti index.html un primer.html un ka tagad jums ir minimālais komplekts turpmākai apmācībai.

Tiekamies ar tagu (no enkura), tajā var pievienot tekstu vai attēlu, kas kļūs par saiti uz noteiktiem dokumentiem. Tag atribūts href norāda tā dokumenta nosaukumu un ceļu, uz kuru norāda saite.

alink — noklikšķinātās, aktīvās saites krāsa. vlink - apmeklētās saites krāsa. Tas ir rakstīts šādi:

Šeit ir manas bildes!!

Turpinot runāt par teksta saites krāsu, ir vērts pieminēt, ka, ja nepieciešams, jūs varat piespiest gan visu saiti, gan tās atsevišķas daļas (frāzes, vārdus, burtus) izcelt ar krāsu, izmantojot pazīstamu tagu un tā krāsu. atribūts.



Tomēr tas attiecas ne tikai uz krāsu, jūs varat arī iestatīt teksta lielumu, stilu un fontu atsevišķi. Bet atcerieties, ka manipulācijas ar krāsu jāveic tagā


tieši šeit
un nepārsniegt bortu, pretējā gadījumā saites krāsa būs vai nu pēc noklusējuma, vai tāda, kā norādīts tagā
Varavīksne
Paskaties uz frāzi, kas palīdzēs atcerēties krāsu vietas varavīksnē
G
un nepārsniegt bortu, pretējā gadījumā saites krāsa būs vai nu pēc noklusējuma, vai tāda, kā norādīts tagā




Saites izveidošana uz teksta daļu

Turpinot runāt par teksta saites krāsu, ir vērts pieminēt, ka, ja nepieciešams, jūs varat piespiest gan visu saiti, gan tās atsevišķas daļas (frāzes, vārdus, burtus) izcelt ar krāsu, izmantojot pazīstamu tagu un tā krāsu. atribūts.




Katru
mednieks
vēlmes
zināt
Kur
sēžot
fazāns



atgriezties mājās

Vienai no jūsu vietnes lapām ir jābūt sauktai index.html.

Tieši failu ar šādu nosaukumu robotprogramma meklēs jūsu vietnē, kad persona ievadīs jūsu vietnes nosaukumu. Tā kā vispirms tiks atvērta lapa index.html, padariet to par galveno lapu. Pārējās lapas vari saukt kā gribi... ar nosaukumiem vairs nav nianšu.

Par reģistru... Rakstot dokumentu ceļu un nosaukumus, atcerieties, ka, piemēram: Lapa.html, lapa.html un LAPA.html ir dažādu dokumentu nosaukumi! Tas pats attiecas uz grāmatzīmju un attēlu nosaukumiem. Rakstot kodu, vienmēr ņemiet vērā gadījumus, kad pastāv liela varbūtība, ka viens vai otrs pārlūks neatpazīs šādus nosaukumus. Padariet par likumu visu rakstīt un saukt ar maziem latīņu burtiem, tad cilvēciskā faktora un programmu kaprīžu risks tiks samazināts līdz nullei.

Trīs klikšķu noteikums... Mēģiniet izveidot “saišu koku” tā, lai vietnes apmeklētājs ar minimālu klikšķu skaitu varētu nokļūt no jebkuras lapas uz jebkuru vietnes vietu. Vairāk nekā trīs pārejas uz uz pareizo vietu

tas vairs nav labi uz vietas.. Bezgalīga cilvēkam nevajadzīgu lapu ielāde var izraisīt nervu sabrukumu un priekšlaicīgu vietnes slēgšanu. Ietaupiet cilvēku laiku, naudu un nervus. Sveiki, dārgie emuāra vietnes lasītāji! Kā zināms, lai veiksmīgi reklamētu mājaslapu un paaugstinātu tās pozīcijas rezultātos meklēšanas rezultāti , nepieciešams veikt kvalitatīvu vietnes SEO optimizāciju. Jēdziens “”, kas, savukārt, ir sadalīts iekšējā un ārējā, ir nesaraujami saistīts ar tādiem jēdzieniem kā “iekšējās un ārējās vietnes saites”. Tāpēc mums ir ļoti svarīgi zināt, cik saitēm jābūt vietnē, kā pārbaudīt to skaitu, kā noņemt no vietnes nevajadzīgās saites un bloķēt to indeksāciju, kā palielināt saišu masu utt. Lai atbildētu uz visiem šiem un citiem jautājumiem par iekšējiem unārējās saites

, vispirms noskaidrosim, kas ir saite (vai hipersaite) HTML. Šajā rakstā es jums pastāstīšu, kas ir saite, kā izveidot hipersaiti vietnē HTML, kā atvērt saiti jaunā logā, kā izveidot saiti uz adresi e-pasts

Ja hipersaite ved uz tīmekļa lapu vai failu, kas neeksistē (dzēsts, pārvietots) vai tā adrese ir nepareiza, tad šādu saiti sauc par bojātu saiti. Vietnē nedrīkst būt bojātas saites, jo tās maldina apmeklētājus, un, noklikšķinot uz šādas saites, cilvēks, visticamāk, neatgriezīsies jūsu vietnē. Par to, kāpēc parādās bojātas saites, kā tās atrast un labot, mēs sīkāk runāsim atsevišķā rakstā. Tagad turpināsim.

Ir ļoti viegli izveidot saiti uz citu jūsu vai citas vietnes lapu. Lai izveidotu hipersaiti, pārlūkprogrammai ir jāpasaka, kas ir saite, un jānorāda dokumenta adrese, uz kuru tā vedīs. Tas tiek darīts, izmantojot HTML tagu un nepieciešamais href atribūts:

Šeit URL ir tā dokumenta adrese, uz kuru doties. Un hipersaites teksts, kas atrodas starp tagiem Un, tiek saukts par saites enkuru un ir redzams tīmekļa lapas apmeklētājam. Papildus tam, ka saites teksts (enkurs) informē lasītāju, kur tiks veikta pāreja, tas ir ļoti svarīgi arī meklētājprogrammu optimizācijā (SEO), jo tas kalpo kā viens no noteicošajiem faktoriem, kas ietekmē jūsu vietnes rangu. . atslēgvārdi, kas atrodas šajā enkurā. Parasti šāda veida ranžēšanu sauc par saišu ranžēšanu.

Absolūta saite

Tos izmanto, lai norādītu uz dokumentu citā vietnē (saite ir ārēja).

Ir iespējams arī izveidot absolūtas saites vienas vietnes ietvaros, taču pareizāk ir izmantot relatīvās adreses, kas izskatās īsākas, lai izveidotu iekšējās saites. Taču, analizējot dažādas vietnes, es pamanīju, ka lielākā daļa tīmekļa pārziņu veido iekšējās saites ar absolūtām adresēm. Tam ir sava priekšrocība, jo, ja jūsu lapa tiek kopēta, tad tādā veidā jūs saņemsiet strādājošas atpakaļsaites.

Kā redzat, ar absolūtām saitēm viss ir vienkārši. Grūtāk ir ar relatīvajiem, jo, veidojot tos, ir jāsaprot, kāda ir jānorāda atribūta href vērtība, jo tā ir atkarīga no dokumentu sākotnējās atrašanās vietas. Kā jau teicu, neviens ar to īsti neuztraucas un padara visas vietnes saites absolūtas. Tomēr, ja vēlaties uzzināt vairāk par to, kā pareizi izveidot relatīvās saites vietnei, varu ieteikt emuāra ktonanovenkogo.ru autora Dmitrija rakstu. Sīkāku un saprotamāku skaidrojumu neesmu redzējis.

Piemēram, es jums parādīšu, kā izskatīsies saite, kas ved uz failu attiecībā pret vietnes sakni (līdzīgā absolūtajā saitē mēs vienkārši nogriezām visu, kas atrodas pa kreisi no trešās slīpsvītras):

Relatīvā saite

Sākums

Saites teksts (enkurs)

Uznirstošā teksta krāsas un dizains ir atkarīgi tikai no iestatījumiem operētājsistēma un pārlūkprogramma.

Pēc noklusējuma, noklikšķinot uz saites, pašreizējā logā tiks atvērts jauns dokuments. Tomēr, pārlūkojot vietnes, man personīgi tas nav ērti. Lasot rakstu un sekojot saitei, man ir ērti, ka lapa atveras jaunā logā un jebkurā brīdī varu turpināt lasīt iepriekšējo rakstu. Vēl viens iemesls, lai atvērtu saiti jaunā logā, ir tas, ka, pārejot uz kāda cita vietni, pastāv liela varbūtība, ka lasītājs neatgriezīsies. It īpaši, ja viņš veic vairākas pārejas un vienkārši neatceras, kur bija pirms dažām minūtēm.

Taga mērķa atribūts palīdzēs mums atvērt saiti jaunā logā . Pēc noklusējuma tai ir vērtība _self , kas parasti nav norādīta. Lai atvērtu dokumentu jaunā logā, mainiet mērķa atribūta vērtību uz _blank:

Kā rīkoties, ja, apmeklējot kāda cita vietni, kur saites tiek atvērtas pašreizējā logā, vēlaties tās atvērt jaunā? Jums vienkārši jānoklikšķina uz tiem nevis ar pogu, bet ar peles ritenīti. Šajā gadījumā jauna lapa tiek atvērts jaunā logā.

Noklikšķinot uz šīs saites, tiks atvērta jūsu noklusējuma e-pasta programma ar jau aizpildītu lauku “Kam”. Lai vēstules temats tiktu aizpildīts automātiski, jums ir jāizveido saite uz šāda veida e-pastu:

Dmitrijs KtoNaNovenkogo iesaka citu veidu, kā tīmekļa lapas tekstā iestatīt grāmatzīmes, neizmantojot html enkurus. Lai to izdarītu, mēs izveidojam grāmatzīmi no jebkura lapā pieejamā HTML taga, piešķirot tai universālā id atribūtu. Piemēram, pievienosim grāmatzīmēm h3 nosaukuma tagu:

Virsraksta teksts

Ir svarīgi iekļaut latīņu burtu id atribūtā kā enkura nosaukuma pirmo rakstzīmi, tad varat izmantot jebkuras citas atļautās rakstzīmes.

Piemēram, atgriezīsimies pie virsraksta “ ” un pēc tam turpinām.

Varat izmantot hash saites, lai pārietu uz vēlamo vietu ne tikai vienas lapas ietvaros, bet arī, lai pārietu uz citu vietnes lapu. Lai to izdarītu, mēs iestatām html enkuru pareizajā vietā pareizajā lapā, un pašā hash saitē pirms hash simbola ierakstām šīs lapas adresi. Piemēram:

Saite tekstu uz html enkura grāmatzīmi

• Neapmeklēta saite ir zilā krāsā un pasvītrota.
• Aktīvā saite - kļūst sarkana laikā starp peles klikšķi uz saites un jaunas lapas ielādes sākumu. Skaidrs, ka šādā stāvoklī viņa atrodas tikai īsu brīdi.
• Apmeklētā saite – maina tās krāsu uz purpursarkanu pēc noklikšķināšanas uz tās.

Jūs varat mainīt hipersaišu krāsu HTML dokumentā, izmantojot tagu un tā atribūtus:

• Link – neapmeklēto saišu krāsa.
• Alink – aktīvās saites krāsa.
• Vlink – apmeklēto saišu krāsa.

Visus iepriekš minētos atribūtus var apvienot:

Es ceru, ka tagad ir skaidrs, kā izveidot hipersaiti uz HTML lapu un uz e-pastu, kā padarīt attēlu par saiti, kas ir teksta enkuri, hash saites un html enkuri, kas ir html tagi un saišu atribūti. Es centos pēc iespējas detalizētāk pastāstīt, kas ir saites HTML un kas tās ir. Atgādināšu, ka hipersaišu ievietošana tekstā tiek veikta tikai HTML režīmā.

Tik garus rakstus, vairāk par 10 000 zīmēm, vēl nebiju rakstījis. Bet ar to saišu tēma nebeidzas, jāturpina.

Ja šis raksts jums bija noderīgs, lūdzu, noklikšķiniet uz tālāk esošajām sociālo tīklu pogām. Tiekamies atkal lapās!

Sveiki, dārgie šī emuāra lasītāji. Droši vien ne reizi vien internetā esat pamanījuši bildes, uz kurām varētu noklikšķināt un tādējādi aiziet uz kādu lapu. Kā tas tiek īstenots no iekšpuses? Kā izveidot attēla saiti html? Ļoti vienkārši.

Šeit jums tas jādara ļoti vienkārši. Attēla ievietošanas tags ir img. Tas ir viens. Saites tags ir . Tas ir savienots pārī. Attiecīgi pārī savienotajā saites tagā vienkārši jāievieto img. Un aptuveni tas izskatīsies šādi:

Tātad ir tikai divi tagi un divi obligātie atribūti – adrese, uz kuru, noklikšķinot, notiks pāreja, un paša attēla adrese. Citus atribūtus, piemēram, stila klases vai saites atvēršanu jaunā logā, var norādīt pēc vēlēšanās.

Bet tas nav vienīgais veids, kā izveidot attēla saiti HTML. Ir vēl viens, kurā jums nav nepieciešams ievietot attēlu tieši html kodā.

Šeit mēs kodā neesam ievietojuši attēlu. Tātad, kā mēs to iegūstam? Izmantojot css un pievienojot saitei fonu. Bet vispirms saite ir jāpārvērš bloka elementā un jāpiešķir tai tādi paši izmēri kā attēlam, kas darbosies kā fona attēls. Tālāk sniegtajā kodā tiek pieņemts, ka attēla izšķirtspēja ir 200 x 200 pikseļi.

A(
Displejs: bloks;
Platums: 200 pikseļi;
Augstums: 200 pikseļi;
Fons: url (ceļš uz attēlu) no-repeat;
}

Šeit mēs norādījām skaidrus elementa izmērus, pēc tam iestatījām fona attēlu un lūdzām pārlūkprogrammu to neatkārtot. Šī būs tieši tāda pati attēla saite kā iepriekšējā versijā, izņemot to, ka tai būs bloka rekvizīti.

Tas ir atkarīgs no mērķiem. Piemēram, grafiskie elementi - sociālo tīklu pogas, grafiskās navigācijas pogas un tā tālāk ir labāk izstrādāti otrā veidā, jo tad meklētājprogramma neuzskatīs šos attēlus par lapas satura daļu un tā semantika var uzlaboties.

Bildes satura daļā, protams, gluži otrādi, jāievieto, izmantojot img tagu, jo tam var piešķirt arī alternatīvu teksta atribūtu, un tas nedaudz uzlabos teksta aktualitāti.

HTML dokumenta galvenā iezīme ir tajā esošās hipersaites (vai vienkārši saites) uz citiem dokumentiem, vietnēm, failiem, attēliem utt. Tā ir iespēja ievietot saites uz objektiem ārpus lapas, kas ir padarījusi internetu tik populāru. un ērti lietojams. Tāpēc, veidojot savu vietni, vienmēr atcerieties saišu “maģiju”.

Šajā nodarbībā mēs runāsim par to, kā izveidot saiti uz vietni, uz tās atsevišķu lapu vai failu. Jūs uzzināsiet, kā mainīt saites tekstu, kā to atvērt jaunā logā, kā izveidot saiti uz attēlu, kas ir ārējās un iekšējās saites, un daudz ko citu. Turklāt jums jau ir informācija par darbu ar saitēm, kurai mēs pieskārāmies iepriekšējās nodarbībās (piemēram, mēs runājām par to, kā jūs varat mainīt saites krāsu).

Kopumā šī apmācība padarīs jūsu izpratni par saišu veidošanu pilnīgu un pietiekamu. Jūs sapratīsit, kā izveidot hipersaiti HTML valodā un kāpēc. Un jūs iemācīsities kontrolēt tā īpašības.

Daudzi jautājumi par to, kā saite uz failu atšķiras no saites uz vietni vai tās atsevišķu lapu, lika man atbildēt uz to šīs nodarbības pašā sākumā. Atbilde ir: nekas. Visas norādītās saites ir ārpus sākotnējās lapas un tiek izveidotas tādā pašā veidā.

Lai manas domas netiktu vaļā, es jums visu parādīšu ar piemēru.

Pārlūkprogrammā mēs redzēsim šo:

Pārlūkprogrammā mēs redzēsim šo:

Kā redzat, visu veidu saites tiek izveidotas tieši vienādi. Vienīgā atšķirība ir atsauces objekta adrese. Tagad pāriesim uz nodarbības galveno daļu.

Saites atšķiras viena no otras ārējā un iekšējā, kā arī teksta un grafika. Ārējās saites ved ārpus html lapas, iekšējās saites ved uz dažādām vienas lapas daļām. Teksta saites ir teksts (pēc noklusējuma tas ir iezīmēts zilā krāsā un pasvītrots), un grafiskās saites satur attēlu kā objektu, uz kura jānoklikšķina, lai pārietu uz to. Visi šie saišu veidi tiek izveidoti HTML, izmantojot tagu (saīsinājums no enkura). Apskatīsim to tuvāk.

Lai izveidotu ārēju saiti uz vietni, lapu vai failu, izmantojiet taga atribūtu href. Šī atribūta vērtība ir vietnes, lapas vai faila URL (mēs to apspriedām iepriekš). Starp tagiem ir redzamā saites daļa (saites enkurs), t.i., tas, ko mēs redzam pārlūkprogrammas ekrānā. Saites enkurs var būt vienkāršs teksts (teksta saite) vai grafisks attēls (attēla saite). Attēla saite tiek izveidota, starp tagiem un ievietojot pazīstamu tagu. Kopumā saites izveides sintakse izskatās šādi:

Piemēram, lai izveidotu teksta saiti uz šīs vietnes sākumlapu, jums jāieraksta šāds HTML kods:

http://www.seoded.ru/">Vietnes vietnes galvenā lapa

Pārlūkprogrammā tas izskatīsies šādi:

Kā jau rakstīju šīs nodarbības pašā sākumā, saites teksta (enkura) krāsu var mainīt, izmantojot . Kopumā saišu tekstam var piemērot tos pašus noteikumus kā lapas galvenajam tekstam, t.i., izcelt to treknrakstā, slīprakstā, izmantot virsrakstus utt.

Kā jau teicu iepriekš, lai izveidotu attēla saiti, jums ir jāizmanto . Šādas saites piemērs izskatās šādi:

Un pārlūkprogramma parādīs:

Pēc noklusējuma pārlūkprogramma ieskauj attēlu grafiskā saitē ar rāmi. Ja tas nav vēlams, IMG taga apmales atribūts jāiestata uz 0:

border="0">

Mājas lapa

Iekšējās saites tiek izmantotas, lai ērti pārvietotos pa lapām ar daudz satura. Ar viņu palīdzību es izveidoju “Nodarbības saturu” (skat. šīs lapas sākumā). Iekšējās saites tiek veidotas pēc tāda paša principa kā ārējās saites. Tikai atribūta href vērtība norāda saites “enkuru”. "Enkuru" veido nosaukuma atribūts:

name="enkura nosaukums">tekstu

Un “enkura” nosaukums ir iestatīts patvaļīgi. Šeit ir vērts teikt, ka ne visas pārlūkprogrammas saprot “enkuru” krievu nosaukumus, tāpēc iesaku izmantot latīņu alfabētu. Teksts starp tagiem, lai izveidotu “enkuru”, nav obligāts un visbiežāk nav norādīts.

“Es esmu masalas” atrodas tajās lapas vietās, kur lietotājam jānokļūst pēc noklikšķināšanas uz saites.

Kā jau teicu iepriekš, iekšējās saites atribūtā href adreses vietā vēlamā “enkura” nosaukums ir norādīts ar obligāto jaucējzīmi (#) tā priekšā. Apskatīsim to ar piemēru.

Es izveidoju "enkuru" ar nosaukumu zagolovok un ievietoju to lapas kodā blakus šīs nodarbības nosaukumam (Hipersaites HTML valodā). Enkura kods ir šāds:

name="zagolovok">

href="#zagolovok">Uz virsrakstu

Un pārlūkprogrammā šādi:

Ja pamanījāt, noklikšķinot uz iekšējās saites uz virsrakstu, URL pārlūkprogrammas adreses joslā mainījās:

Uz sākotnējo adresi:

http://www..html

http://www..html#zagolovok

Un, izmantojot šo funkciju, jūs varat izveidot saiti uz noteiktu vietu lapā no jebkura resursa internetā! Tas ir, pieņemsim, ka esat izveidojis lapu ar garu rakstu par kaut ko (vai ievietojis lapā lielu skaitu fotogrāfiju) un atzīmējis to ar iekšējām saitēm. Atrodoties , jums vajadzēja izveidot saiti ne tikai uz lapu ar rakstu (vai fotogrāfijām), bet arī uz noteiktu vietu tajā (vai konkrētu fotoattēlu). Izmantojot opciju ar iekšējo saiti adresē, varat viegli sasniegt to, kas jums nepieciešams.

Mājas lapa

Bet ar relatīvām saitēm tas ir nedaudz sarežģītāk. Šādās saitēs adrese ir norādīta vai nu saistībā ar vietnes saknes mapi (tā, kurā atrodas galvenā lapa), vai attiecībā pret avota lapu. Šādas saites ir nepieciešamas, piemēram, ja vietne atrodas jūsu mājas datorā. Vai arī šī nav vietne, bet gan lapa, kas ir norāde uz citiem dokumentiem.

Pieņemsim, ka mums ir jāatsaucas uz lapu klienty.html, kas atrodas vienā mapē ar mājas lapa vietne. Tad relatīvās saites kods izskatīsies šādi:

/klienty.html">Klienti

Tagad pieņemsim, ka tajā pašā mapē, kur galvenā lapa, ir mape zakazy un tajā jau atrodas klienty.html lapa, tad relatīvās saites kods būs šāds:

/zakazy/klienty.html">Klienti

Tagad apskatīsim hipersaišu izveidi attiecībā pret avota lapu. Pieņemsim, ka mums ir lapa cena.html (avota lapa), un no tās mums ir nepieciešams izveidot saiti uz lapu klienty.html. Ir šādas tipiskās iespējas.

1. Lapas cena.html un klienty.html atrodas vienā mapē.

klienty.html">Klienti




2. vietnes saknes mapē cena.html lapa atrodas mapē zakazy vienu līmeni augstāk).

Kods izskatīsies šādi:

../klienty.html">Klienti

Divi punkti norāda, ka jums ir jāpāriet no pašreizējās mapes uz augstāku līmeni.




3. Lapa klienty.html un mape zakazy atrodas vietnes saknes mapē, mape mebel atrodas mapē zakazy, lapa price.html atrodas mapē mebel (t.i., klienty.html lapa attiecībā pret vietni sākotnējā cena.html lapa ir par diviem līmeņiem augstāka ).

../../klienty.html">Klienti

Tas nozīmē, ka katrs līmenis ir norādīts ar diviem punktiem un slīpsvītru “/”.




4. vietnes saknes mapē klienty.html lapa atrodas mapē zakazy (t.i., tagad klienty.html lapa attiecībā pret sākotnējo price.html lapu atrodas vienu līmeni zemāk).

zakazy/klienty.html">Klienti

Šajā gadījumā punkti un slīpsvītras netiek izmantotas.




5. Lapa price.html (oriģinālā lapa) un mape zakazy atrodas vietnes saknes mapē, mape mebel atrodas mapē zakazy, lapa klienty.html atrodas mapē mebel (t.i., tagad klienty .html lapa ir saistīta ar sākotnējo cenu. html lapa atrodas divus līmeņus zemāk).

zakazy/mebel/klienty.html">Klienti




6. Vietnes saknes mapē ir divas mapes: zakazy un oplata. Lapa klienty.html atrodas mapē zakazy, sākotnējā cena.html lapa atrodas mapē oplata (tas ir, abas lapas atrodas dažādās mapēs vienu līmeni zem vietnes saknes mapes).

../zakazy/klienty.html">Klienti

Lai izveidotu saiti uz e-pastu, atribūta href vērtībā URL ir jāaizstāj ar e-pasta adresi, kas norāda protokolu (mailto:). Un tad, noklikšķinot uz šīs saites, tiks atvērts logs pasta programma ar e-pasta adresi, kas ievadīta laukā “Kam”. HTML kodā tas izskatās šādi:

mailto: [aizsargāts ar e-pastu]">Mans pasts

Un pārlūkprogrammā tas ir tāpat.