Kā ievietot hipersaiti HTML? Hipersaišu izveide un izmantošana HTML. Kā izveidot attēlu par saiti HTML, VKontakte, forumā un izmantojot CSS attēlu kā hipersaiti

Šajā nodarbībā mēs runāsim par kā izveidot saiti html. Saites ļoti bieži tiek izmantotas vietnēs, tās ļauj pārvietoties no vienas vietnes lapas uz citu. Saišu iezīme ir tāda, ka tās var novirzīt ne tikai uz tīmekļa lapu, bet arī uz failiem, attēliem utt.

Saites var būt iekšējas vai ārējas. Iekšējās saites virzās uz lapām un failiem tajā pašā vietnē. Ārējās saites ved uz trešo pušu vietnēm, dokumentiem un failiem. Tajā pašā laikā šāda veida saites tiek iestatītas praktiski vienādi.

Kā izveidot saiti HTML, piemēri

1. HREF— ir atbildīgs par to, kur saitei jānoved. Standarta saite ir definēta šādi: Saites teksts.

2. MĒRĶIS— atbild par logu, kurā tiks atvērts dokuments. Noklusējums jauns dokuments tiek atvērts pašreizējā pārlūkprogrammas logā. Atribūts "target" ļauj atvērt saiti jaunā pārlūkprogrammas logā. Šim atribūtam ir šādi parametri:

  • _blank - ielādē lapu jaunā logā;
  • _self - ielādē lapu pašreizējā logā;
  • _parent - ielādē lapu vecākrāmā;
  • _top — atceļ visus kadrus un ielādē lapu jaunā logā.

3. VĀRDS- izmanto, lai pārvietotos uz noteiktu lapas apgabalu. Mārciņas zīmei seko atslēgvārds (grāmatzīme vai etiķete) pēdiņās. Lai pārietu uz šo iezīmi, izmantojiet saiti, kurā ir rakstīts šis apzīmējums.

Ārējās saites piemērs

Dodieties uz vietni



Dodieties uz vietni
Bezmaksas WordPress nodarbības

4. piemērs: attēli kā saites.

Attēla paraugs kā saite



Piemērs saitei uz noteiktu vietu lapā

Pāriet uz tekstu

Lapas teksts...



Šajā piemērā lapa ir apzīmēta ar nosaukumu "saraksts", izmantojot atribūtu "name". Izveidojot saiti uz šo iezīmi, tiks novirzīts uz noteiktu lapas apgabalu.

Lejupielādēt failu
Uzrakstīt vēstuli

Varat iestatīt saišu krāsu, izmantojot atribūtus, kas kā parametri ir norādīti tagā "body". Apsveriet šos atribūtus:

  • saite - neapmeklēta saite, pēc noklusējuma tā tiek parādīta zilā krāsā;
  • alink - aktīva saite, pēc noklusējuma sarkana;
  • vlink ir apmeklēta saite, pēc noklusējuma violeta.
Saites krāsas piemērs ...

Tādējādi mēs noskaidrojām, kā saites tiek veidotas HTML. Saites var veidot stilus. To var redzēt nodarbībā, noklikšķinot uz saites.

Es domāju, ka jūs jau saprotat, ko tiks apspriestsšajā nodaļā.. un tu zini, kas ir saite, ja nē, tad spied šeit.. Ir vairāki saišu veidi, kā arī "mehānismi", kā tām sekot. Šajā nodaļā es mēģināšu jums detalizēti pastāstīt par to, kā reģistrēt saites, kā arī veltīt darba ar tām sarežģītību.

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

Tātad, kāpēc es esmu tā, lai pārlūkprogramma, tāpat kā es toreiz, neiekristu stuporā, tai jāzina: precīzs dokumenta nosaukums, ceļš uz dokumentu un vieta, kur to atnest, vai drīzāk, kur lai to atvērtu.

Ieslēgts Šis brīdis izmantojot notepad izveidojām tikai vienu HTML dokumentu, man tas ir ar nosaukumu index.html (kāpēc es izvēlējos tik dīvainu nosaukumu index.html un kāpēc man jāskatās) es nezinu ar ko, jūs pats izdomāja nosaukumu, bet domāju, ka 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, kura mums vēl nav.. Tāpēc, pirms uz to atsaucaties, jums tas ir jāizveido, paldies, ka jūs to jau zināt.

  1. Atveriet piezīmju grāmatiņu.
  2. Mēs rakstām kodu html valoda. Piemēram, lapa ar vairākiem fotoattēliem.
  3. Mēs to saglabājam kā html lapu tajā pašā darba mapē, kurā jau pastāv pirmais mūsu izveidotais dokuments. Lai neapjuktu, sauksim to par primer.html un varbūt arī pirmo pārdēvēsim par index.html

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

Teksta saites.

Iepazīstieties ar tagu (no enkura - enkurs), 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.

Tas viss kopā ir rakstīts šādi:

Šeit ir manas bildes!!

Kā jūs droši vien sapratāt primer.html ir mūsu otrā html dokumenta nosaukums un uzraksts "Šeit ir manas fotogrāfijas!!" šis ir teksta fragments no faila index.html.

Pēc analoģijas ar attēlu tagu saites ceļš uz atveramo dokumentu ir rakstīts tādā pašā veidā:

Šeit ir manas bildes!!- Šis ieraksts nozīmē, ka direktorijā, kurā atrodas mūsu pirmais html dokuments, ir mape stranica, kurā atrodas fails primer.html.
Šeit ir manas bildes!!- Un tas nozīmē, ka fails primer.html ir novietots vienu līmeni augstāk no dokumenta
Šeit ir manas bildes!!- dokuments atrodas vietnē www.site.ru..

Nu, mēģināsim? Tālāk ir sniegts piemērs diviem dokumentiem vienlaikus, kuros ir reģistrētas saites, kas norāda viena uz otru.

index.html fails:



Teksta fragmenta saistīšana





Saki man, dārgais bērns: kurā ausī man zum?


IN likumu vai pa kreisi?





fails primer.html:



Sekojiet saitei šeit





Bet es neuzminēju! Man ir dūkoņa abās ausīs.



Nu es tā nespēlēju...





Piemērā redzams, ka saites ir izceltas krāsā, pēc noklusējuma zilā ir saite, bet sarkanā ir jau apmeklēta saite, šīs krāsas var mainīt, izmantojot mums jau labi zināmo sākuma tagu < body > un tās atribūti.

saite- saites krāsa.
alink- noklikšķinātās, aktīvās saites krāsa.
vlink- apmeklētās saites krāsa.

Tas ir rakstīts šādi:

>

Turpinot runāt par teksta saites krāsu, ir vērts pieminēt, ka nepieciešamības gadījumā ar pazīstamu tagu var piespiest krāsu izcelt gan visu saiti, gan atsevišķas tās daļas (frāzes, vārdus, burtus). un tā atribūts krāsa. Taču tas attiecas ne tikai uz krāsu, bet arī atsevišķi var iestatīt teksta izmēru, stilu un fontu. Bet atcerieties, ka manipulācijas ar krāsu jāveic tagā šeit un ne aiz borta, pretējā gadījumā saites krāsa būs vai nu pēc noklusējuma, vai arī tā, kā rakstīts tagā

index.html fails:



Varavīksne

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


Meklējiet frāzi, kas palīdzēs atcerēties krāsu vietas varavīksnē.




R
A
D
Plkst
G
A






fails primer.html:



Varavīksne

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



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



Dodieties atpakaļ uz galveno lapu




    Viena no jūsu lapām vietnē Obligāti jāsauc index.html Tas ir fails ar šādu nosaukumu jūsu vietnē, ko robotprogramma meklēs, kad persona ievadīs jūsu vietnes nosaukumu. Kopš lapas index.html vispirms atvērsies, padariet to par galveno. Pārējās lapas vari saukt kā gribi... ar nosaukumiem vairs nav nianšu.

    Par lietu.Rakstot ceļu un dokumentu nosaukumus, atcerieties, ka, piemēram: Lapa.html, lapa.html un LAPA.html ir dažādu dokumentu nosaukumi! Tas pats attiecas uz grāmatzīmju nosaukumiem un zīmējumiem. Rakstot kodu vienmēr ievērojiet reģistrjutīgumu, pastāv liela iespēja, ka šādus nosaukumus konkrēta pārlūkprogramma neatpazīs. Padariet par likumu visu rakstīt un saukt par mazu ar latīņu burtiem, tad cilvēciskā faktora risks un programmu kaprīzes tiks samazinātas līdz nullei.

    Trīs klikšķu noteikums.

    Mēģiniet izveidot "saišu koku" tā, lai vietnes apmeklētājs no jebkuras tās lapas varētu nokļūt jebkurā vietnes vietā ar minimālu klikšķu skaitu uz saitēm. Vairāk nekā trīs pārejas uz īsto vietu vietnē vairs nav labi .. Nebeidzama personai 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.

HTML dokumenta galvenā iezīme ir tā, ka tas satur hipersaites(vai vienkārši saites) uz citiem dokumentiem, vietnēm, failiem, attēliem utt. Tā bija iespēja lapās ievietot saites uz objektiem ārpus tā, padarīja internetu tik populāru un ērti lietojamu. Tāpēc, veidojot savu vietni, vienmēr atcerieties saišu "maģiju".

Šajā nodarbībā mēs runāsim par 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 par 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ā varat mainīt saites krāsu ).

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



Noteikumi

§ 1. Saite uz failu, saite uz vietni, saite uz lapu

Daudzi jautājumi par atšķirību starp saiti uz failu un saiti 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 ārējās sākotnējā lapa un tiek izveidoti tādā pašā veidā.

Lai doma netiktu izplatīta pa koku, es 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 veidotas tieši tādā pašā veidā. Vienīgā atšķirība ir adrese objekts, uz kuru atsaukties. Tagad pāriesim uz nodarbības galveno daļu.

§ 2. Ārējo saišu izveide

Saites atšķiras viena no otras ar ārējā Un iekšējais, kā arī tālāk tekstu Un grafisks. Ārējās saites ved ārpus html lapas "robežām", iekšējās saites uz dažādām daļām tas pats lapas. Teksta saites ir teksts (pēc noklusējuma tas ir iezīmēts zilā krāsā un pasvītrots), un grafiskās saites kā objekts, uz kura jānoklikšķina, lai pārietu, satur sava veida attēlu. Visi šie saišu veidi tiek veidoti HTML, izmantojot tagu (angļu valodas enkura saīsinājums - anchor). Apsvērsim to sīkāk.

Lai izveidotu ārēju saiti uz vietni, lapu vai failu, tiek izmantots taga atribūts - href. Šis atribūts tiek pieņemts kā tā vērtība URL vietne, lapa vai fails (mēs par to runājām iepriekš). Starp un 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 grafiskais attēls(saite-bilde). Attēla saite tiek izveidota, ievietojot pazīstamu tagu starp un. Kopumā saites izveides sintakse izskatās šādi:

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

http://www.seoded.ru/"> Vietnes sākumlapa

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

Kā jau rakstīju šīs apmācības pašā sākumā, saites teksta (enkura) krāsu var mainīt, izmantojot . Kopumā saišu tekstam var piemērot to pašu, ko lapas galvenajam tekstam, t.i., treknrakstu, slīprakstu, izmantot virsrakstus utt.

2.1. § Grafiskās saites (attēlu saites)

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 attēla saitē esošo attēlu ieskauj ar rāmi. Ja tas nav vēlams, tad atribūts robeža tagu img jāiestata uz 0:

border="0">

Galvenā lapa

§ 3. Iekšējās saites

Ērtai navigācijai daudz satura lapās tiek izmantotas iekšējās saites. Ar viņu palīdzību es izveidoju nodarbības saturu (skat. šīs lapas sākumā). Iekšējās saites tiek veidotas tāpat kā ārējās saites. Tikai atribūta vērtībā href ir norādīts saites "enkurs". Enkuru veido atribūts nosaukums:

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 es iesaku izmantot latīņu alfabētu. Teksts starp tagiem, lai izveidotu "enkuru", nav obligāts un visbiežāk nav norādīts.

"Es esmu masalu" atrodas tajās lapas vietās, uz kurām lietotājam vajadzētu doties pēc noklikšķināšanas uz saites.

Kā jau teicu iepriekš, atribūtā href iekšējā saite adreses vietā, vēlamā "enkura" nosaukums tiek norādīts ar obligāto jaucējzīmi ( # ) viņa priekšā. Ņemsim piemēru.

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

name="title">

href="#zagolovok">Pāriet uz virsrakstu

Un pārlūkprogrammā šādi:

Ja pamanāt, ka pēc noklikšķināšanas uz iekšējās saites uz nosaukumu pārlūkprogrammas adreses joslā ir mainījies URL:


Uz sākotnējo adresi:

http://www.html

http://www..html#header

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 fotoattēlu) un atzīmējis to ar iekšējām saitēm. Atrodoties , jums bija jāatsaucas ne tikai uz lapu ar rakstu (vai fotoattēliem), bet arī uz noteiktu vietu tajā (vai noteiktu fotoattēlu). Izmantojot opciju ar iekšējo saiti adresē, varat viegli sasniegt to, kas jums nepieciešams.

§ 4. Absolūtās un relatīvās atsauces

Galvenā lapa

Bet ar relatīvajām saitēm tas ir nedaudz sarežģītāk. Šādās saitēs ir norādīta arī adrese relatīvi vietnes saknes mape (tā, kurā atrodas galvenā lapa) vai attiecībā pret sākotnējo lapu. Šādas saites ir nepieciešamas, piemēram, ja vietne atrodas mājas dators. Vai arī tā nav vietne, bet lappuse, kas norāda uz citiem dokumentiem.

Pieņemsim, ka mums ir jāizveido saite uz lapu klients.html, kas melo vienā mapē Ar galvenā lapa vietne. Tad relatīvās saites kods izskatīsies šādi:

/clienty.html">Klienti

Tagad pieņemsim, ka tajā pašā mapē ar galveno lapu ir mapju secība un jau tajā atrodas klienty.html lapā. Tad relatīvās saites kods kļūs šāds:

/zakazy/clienty.html">Klienti

Tagad apskatīsim hipersaišu izveidi attiecībā pret sākotnējo lapu. Pieņemsim, ka mums ir lapa cena.html(avota lapa), un no tās jums ir nepieciešams izveidot saiti uz lapu klients.html Tālāk ir norādītas šādas tipiskās iespējas.

    1. Lapas cena.html un clienty.html ir vienā mapē.

    clientty.html">Klienti


    2. vietnes saknes mapē, lapas cena.html atrodas pasūtījumu mapē vienu līmeni uz augšu).

    Kods kļūs šāds:

    ../clienty.html">Klienti

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


    3. Lapa klienty.html un mape zakazy ir vietnes saknes mapē, mēbeļu mape atrodas pasūtījumu mapē, lapas cena.html atrodas mapē mebel(t.i. klienty.html lapa attiecībā pret sākotnējo price.html lapu atrodas divus līmeņus uz augšu).

    ../../clienty.html">Klienti

    Tas ir, katrs līmenis ir norādīts ar diviem punktiem un slīpsvītru " / ».


    4. vietnes saknes mapē, lapa clienty.html atrodas pasūtījumu mapē(t.i., tagad lapa klienty.html ir saistīta ar sākotnējo price.html lapu vienu līmeni uz leju).

    zakazy/clienty.html">Klienti

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


    5. Lapa price.html (sākotnējā lapa) un mape zakazy ir vietnes saknes mapē, mēbeļu mape atrodas pasūtījumu mapē, lapa clienty.html atrodas mapē mebel(t.i., tagad lapa klienty.html ir saistīta ar sākotnējo price.html lapu atrodas divus līmeņus zemāk).

    zakazy/furniture/clienty.html">Klienti


    6. Vietnes saknes mapē ir divas mapes: zakazy un oplata. clienty.html lapa atrodas pasūtījumu mapē, sākotnējā cena.html lapa atrodas mapē oplata(t.i., abas lapas melo dažādās mapēs vienu līmeni uz leju no vietnes saknes mapes).

    ../zakazy/clienty.html">Klienti

§ 5. Saite uz e-pastu

Lai izveidot e-pasta saiti, jums ir nepieciešams URL vietā atribūta vērtībā href uzrakstiet e-pasta adresi ar protokolu ( mailto:). Un tad, noklikšķinot uz šādas 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 tā tas ir pārlūkprogrammā.

Sveiki, dārgie emuāra vietnes lasītāji! Kā zināms, lai veiksmīgi reklamētu vietni un paaugstinātu tās pozīcijas meklēšanas rezultātos, ir 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 aizvērt tās no indeksācijas, kā palielināt saišu masu utt. Lai atbildētu uz visiem šiem un citiem jautājumiem par iekšējām un ārējām saitēm, vispirms sapratīsim, kas ir saite (vai hipersaite) HTML.

Šajā rakstā es paskaidrošu, kas ir saite, kā izveidot hipersaiti vietnē HTML, kā atvērt saiti jaunā logā, kā izveidot saiti uz e-pasta adresi (e-pastu) un kā lai saiti izveidotu attēlu. Mēs pieskarsimies arī tādiem jēdzieniem kā html tagi un hipersaites atribūti, saišu enkurs, html enkurs (enkurs) un jaucējsaites. Tātad, sāksim.

Kas ir saite (hipersaite).

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. Vietnē nevajadzētu būt bojātām saitēm, 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ā. Un tagad turpināsim.

Kā vietnē izveidot saiti (hipersaiti) HTML.

Saites izveidošana uz citu jūsu vietnes lapu vai citu vietni ir ļoti vienkārša. 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 ir viens no noteicošajiem faktoriem, kas ietekmē jūsu vietnes rangu šajā enkurā ietvertie atslēgvārdi. Parasti šāda veida ranžēšanu sauc par atsauces.

Absolūta saite

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

Ir atļauts izveidot absolūtas saites vienas vietnes ietvaros, tomēr pareizāk ir izmantot relatīvās adreses, lai izveidotu iekšējo saiti, kas izskatās īsāki. 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. Šeit ir pluss, jo, ja jūsu lapa tiek kopēta, tad tādā veidā jūs saņemsiet atpakaļ darbojošās ārējās saites.

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

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

Relatīvā saite

Uz galveno

Saites teksts (enkurs)

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

Kā atvērt saiti jaunā logā.

Pēc noklusējuma, noklikšķinot uz saites, pašreizējā logā tiks atvērts jauns dokuments. Tomēr, skatoties vietnes personīgi, man 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, atverot 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.

Mērķa taga atribūts palīdzēs mums atvērt saiti jaunā logā. . Pēc noklusējuma tas ir _self , kas parasti netiek rakstīts. Lai atvērtu dokumentu jaunā logā, mainiet mērķa atribūta vērtību uz _blank:

1 <a href = "http://site" target = "_blank" > Jauns logs</a>

Jauns logs

Ko darīt, 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 tiks atvērts jaunā logā.

Kā izveidot saiti uz e-pastu (e-pasta adresi).

Noklikšķinot uz šīs saites, tiks atvērta programma darbam ar e-pasts, kuru esat instalējis pēc noklusējuma, kur lauks “Kam” jau būs aizpildīts. Lai automātiski aizpildītu vēstules tēmu, jums ir jāizveido saite uz šādas formas e-pastu:

Vārdu “vēstules_priekšmets” vietā jāraksta vēlamā tēma un, protams, ar latīņu burtiem. Mēs to darām, jo ​​daudzas pārlūkprogrammas un e-pasta programmas nedarbojas labi ar kirilicu un tēmas rindiņā var redzēt visdažādāko nejēdzību. Izmantojot šo ne tik viltīgo padomu, jūs varēsiet izveidot saiti uz e-pastu, nebaidoties no liekiem pārsteigumiem.

Kā attēlu izveidot par saiti.

Šeit virsraksta atribūts ir rīka padoms, un teksts, kas rakstīts ar alt atribūtu (alternatīvs informācijas avots), tiks parādīts lapā, ja attēli ir atspējoti pārlūkprogrammā. Ja atribūts title kalpo, pirmkārt, lasītāju ērtībām, tad meklētāji mēģina saprast, kas attēlā redzams pēc alt atribūta. Šajos tagos ieteicams rakstīt atslēgvārdus, kam būs liela nozīme meklētājprogrammu optimizācijā. Galu galā meklēšanu pēc attēliem neviens neatcēla.

Kā izveidot hipersaiti (html enkuru) vienā html lapā.

Iepriekš mēs jau esam apsvēruši, kā izveidot saiti uz vietnes lapu neatkarīgi no tā, vai tā ir iekšēja vai ārēja. Bet dažreiz jums ir jāizveido hipersaites tajā pašā tīmekļa lapā. Par ko? Nu, piemēram, lai, lasot ļoti garu tekstu, mums būtu iespēja ātri pārlēkt uz jebkuru tā daļu. Vai arī noderēs, kad raksta sākumā publicēsi tā saturu pa punktam. Pēc tam, noklikšķinot uz vēlamās preces, jūs uzreiz nonāksit pie jūs interesējošā materiāla. Šādas pārejas tiek veiktas, izmantojot raksta pamattekstā iepriekš instalētas grāmatzīmes, ko sauc par html enkuriem (enkuru, ko nedrīkst jaukt ar teksta enkuru) un īpašas hash saites.

Lai izveidotu enkuru, vispirms izveidojiet grāmatzīmi ar jebkuru nosaukumu (tiek izmantoti tikai latīņu burti, cipari, defises un pasvītras), kas norādīts, izmantojot taga nosaukuma atribūtu :

Uz augšu

1 <a href = "javascript:scroll(0,0);" > "Izlīdzināšanas centra izmērs-pilns wp-image-1393" title = " Augšējā poga" src = !} "http://website/wp-content/uploads/2011/12/Top.jpg" alt= "Button Top_Top" platums = "100" augstums = "100" />

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, norādot tai universālu id atribūtu. Piemēram, mēs izveidojam grāmatzīmi no h3 galvenes taga:

Virsraksta teksts

Ir svarīgi id atribūtā ierakstīt latīņu burtu 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āsim.

Varat izmantot hash saites, lai pārietu uz pareizo vietu ne tikai vienā lapā, 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 grāmatzīmes enkuru

HTML hipersaišu veidi un krāsas.

  • Neapmeklēta saite ir zilā krāsā un pasvītrota.
  • Aktīvā saite — kļūst sarkana laikā starp noklikšķināšanu uz saites un jaunās lapas ielādes sākšanu. Protams, viņa jau sen nav bijusi šādā stāvoklī.
  • 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 šādi atribūti:

  • Saite — neapmeklēto saišu krāsa.
  • Alink — aktīvās saites krāsa.
  • Vlink ir apmeklēto saišu krāsa.

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

1 <body link = "#1122cc" vlink = "#6611cc" alink = "#d14836" >

Es ceru, ka tagad ir skaidrs, kā izveidot hipersaiti HTML lapā un e-pastā, kā attēlu padarīt par saiti, kas ir teksta enkuri, hash saites un html enkuri, kas ir html tagi un saišu atribūti. Esmu centies detalizēti aprakstīt, kādas saites ir HTML un kas tās ir. Atgādināšu, ka hipersaišu ievietošana tekstā tiek veikta tikai HTML režīmā.

Nekad nav nācies rakstīt tik garus rakstus, vairāk nekā 10 000 rakstzīmju. Bet šī saišu tēma nav izsmelta, jāturpina.

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

Laba diena visiem, mani dārgie draugi un lasītāji. Ceru, ka nolēmāt piedalīties manā konkursā un uzrakstīt par savu blogošanas ceļu. Nu, es vēlētos turpināt mūsu pētījumu par html valodu, un šodien es vēlētos jums pastāstīt par vienu no vissvarīgākajām sastāvdaļām, proti, hipersaitēm.

Jā, bez šādām hipersaitēm internets nebūtu tik ērts. Nē, es meloju. Navigācijas ziņā tas nemaz nebūtu ērti. Vai varat iedomāties internetu bez tiem? Es personīgi nē.

Un šodien mēs uzzināsim, kā ievietot hipersaiti html. Bet vispirms es gribētu jums jautāt: vai jūs zināt, kas ir hipersaite un ar ko tā atšķiras no parastās saites? Šeit viss ir patiešām vienkārši: saite ir vienkāršs informācijas ieraksts, kas attiecas uz kādu dokumentu. Tajā pašā laikā jūs nevarat noklikšķināt uz šī teksta (nekas nenotiks), bet jūs zināt, kur meklēt informāciju.

Piemērs. Varat uzzināt, kā programmā Photoshop atlasīt matus, vietnē //website/adobe-photoshop/kak-vydelit-volosy/

Hipersaite ir tas pats teksts, tikai tās būtība slēpjas tajā, ka var noklikšķināt uz šī teksta un nokļūt vēlamajā lapā, vietnē vai jebkurā citā objektā. Turklāt pats teksts var būt jebkurš, savukārt adrese jau ir ierakstīta iekšpusē un var būt pilnīgi atšķirīga. Bet lai kā arī būtu, sarunvalodā tos vienkārši sauc par saitēm. Šeit ir hipersaites piemērs:

Par to, kā pareizi atlasīt matus programmā Photoshop, varat lasīt vienā no maniem.

Vienalga. Laba teorija. Tagad pāriesim pie prakses un redzēsim, kuri ir atbildīgi par visām šīm lietām.

Pāra tags ir atbildīgs par hipersaiti, bet pats par sevi tas neko neatspoguļo. Tas vienmēr ir saistīts ar atribūtu. Un šajā gadījumā mums pastāvīgi jāparaksta tieši šis href. Atribūta vērtībā mēs ievietojam pašu saiti uz vēlamo resursu. Un pašā saturā mēs rakstām pašu tekstu, kuram vajadzētu kļūt noklikšķināmam (strādājiet pēc klikšķa). Paskaties uz piemēru un domāju, ka visu sapratīsi.

Yandex meklētājprogramma

Kā jūs saprotat, šajā piemērā es rakstīju, ka, noklikšķinot uz teksta fragmenta "Yandex meklētājprogramma", persona tiks novirzīta uz adresi, kas ierakstīta atribūta href vērtībā.

Es domāju, ka daudzi no jums apzinās, ka pastāv iekšējās un ārējās saites. Iekšējās saites tiek veiktas vienā direktorijā, tas ir, vietnē, un ārējās saites ved uz kādu trešās puses resursu. Un tagad es jums parādīšu, kā izdarīt abus.

Iekšējās pārejas

Fails tajā pašā mapē


Taču šāda pāreja darbosies ar nosacījumu, ka fails, uz kuru veidojat saiti, atrodas tajā pašā mapē kā fails, kurā ievietojāt saiti. Citām iespējām viss ir nedaudz savādāk.

Fails citā mapē

  1. Atveriet failu pushkin.html programmā Notepad++
  2. Tagad atrodiet vārdu fotoattēls un ietiniet to tagos<href> .
  3. Un tagad uzmanību! Atribūta vērtībā mēs ierakstām ceļu attiecībā pret rediģējamo failu, tas ir, pašu pushkin.html. Jums vajadzētu būt kaut kam šādam:
Fotoattēls

Ko mēs tagad esam izdarījuši? Un mēs rīkojāmies šādi: tā kā ceļš uz fotoattēlu atrodas atsevišķā img mapē, kas atrodas tajā pašā mapē, kurā atrodas fails pushkin.html, tad atribūta vērtībā vispirms jāieraksta mapes nosaukums un pēc tam caur slīpsvītru (/) ievadiet pilnu dokumenta nosaukumu (mūsu gadījumā fotoattēlos).

Tagad saglabājiet un palaidiet failu pushkin.html savā pārlūkprogrammā. Jūs redzēsiet, ka vārds “Foto” ir kļuvis izcelts zilā krāsā un kļuvis klikšķināms, kas nozīmē, ka, noklikšķinot uz šīs saites, mēs tiksim novirzīti uz fofo.jpg failu, kas atrodas mapē img.

Nu kā? Viss skaidrs? Droši jautājiet, ja jums kas nepieciešams.

Ārējās pārejas

Un, protams, mēs nevaram nepieminēt ārējās saites, pēc noklikšķināšanas uz kurām mēs nokļūsim pavisam citā vietnē. Bet šeit nav nekā sarežģīta. Viss ir tas, ka jūs ievadāt href vērtību pilnā vietnes vai tīmekļa lapas adrese. Iepriekš es parādīju piemēru ar Yandex. Bet šeit ir vēl viens piemērs jums:

Mācīšos sociālo projektu maģistrantūrā.

Šeit mēs nokļūstam konkrētas vietnes noteiktā lapā.

Tiek atvērts jaunā logā

Pēc noklusējuma, noklikšķinot uz saites, dokuments tiek atvērts tajā pašā logā, kurā atrodas jūsu lapa, t.i. jūsu lapa avarēs. Un tas nav labi. Jo īpaši reklamētā satura projektiem vai emuāriem ir ieteicams, ka, noklikšķinot uz saites, dokuments tiek atvērts jaunā logā vai cilnē, neaizverot lapu.

Mērķa atribūts ar vērtību "_blank" mums palīdzēs. Šeit nav nekā sarežģīta. Jums tas vienkārši jāielīmē sākuma tagā aiz atribūta href vērtības. Ņemsim to fragmentu no faila lukomorye.html, kur mēs izveidojām saiti uz pushkin.html lapu, tikai tagad mēs rakstīsim tieši šo atribūtu. Tam vajadzētu izskatīties šādi:

No dzejoļa Ruslans un Ludmila (Autors - A.S. Puškins)

Nu šeit viss ir skaidrs. Tagad, noklikšķinot uz satura, vajadzīgā lapa tiks atvērta jaunā logā. Šī lieta ir ļoti nepieciešama, jo, ja jūs to nereģistrēsit, lietotājs vienkārši pametīs jūsu lapu. Un tāpēc viņš jebkurā gadījumā paliks uz tā, tikai tad, ja viņš to īpaši neaizvērs. Mēģiniet darīt visu pats, tikai padariet visu skaistu ar savām rokām. Nav nepieciešams kopēt un ielīmēt.

Kaut kā šādi. Šķiet, ka viņš izstāstīja visu svarīgāko, bet, ja vēlies virzīties šajā virzienā un apgūt HTML un CSS, lai izveidotu profesionālas mājas lapas, emuārus un pat interneta veikalus, tad noteikti apskati lielisks video kurss par šo tēmu. Nodarbības ir patiešām lieliskas, un tās patiešām tiek stāstītas cilvēkiem, kuri joprojām ir maz pazīstami ar vietņu veidošanu vai vispār nav pazīstami.

Ar to mūsu šodienas nodarbība ir beigusies. Es ceru, ka jums patika mans raksts, un es priecāšos, ja kļūsit par manu pastāvīgo lasītāju. Tāpēc neaizmirstiet abonēt mana emuāra atjauninājumus, lai nepalaistu garām kaut ko interesantu. Nu, es novēlu jums panākumus visos jūsu centienos. Čau čau!

Ar cieņu Dmitrijs Kostins.




Tops