Si të tregoni kodin burimor të faqes. Google Chrome - veglat e webmasterit

Duke shfletuar faqe të panumërta në internet, mund të gjeni disa që na pëlqejnë shumë. Menjëherë lindin një sërë pyetjesh. A është krijuar faqja duke përdorur kod të shkruar vetë ose ndonjë CMS? Cilat janë stilet e tij CSS? Cilat janë meta etiketat e saj? etj.

Ka shumë mjete që mund të përdoren për të nxjerrë informacione në lidhje me kodin e një faqeje. Por ne gjithmonë kemi në dorë butonin e djathtë të miut. Ne do ta përdorim atë në shembullin e faqes sime.

Si mund ta shikoj kodin e faqes?

Për të parë kodin burimor të faqes së sajtit, duhet të vendosni kursorin e miut mbi çdo zonë të faqes së internetit (duke përjashtuar imazhet dhe lidhjet). Pas kësaj, klikoni në butonin e djathtë të miut. Një dritare me disa opsione do të hapet para nesh (ato mund të ndryshojnë pak në shfletues të ndryshëm). Në shfletuesin Google Chrome, për shembull, këto janë komandat:

• mbrapa;
• përpara;
• rindezje;
• ruaj si;
• vulë;
• përkthe në rusisht;
• pamje e kodit të faqes;
• shikoni kodin.

Duhet të klikojmë pamje e kodit të faqes, dhe kodi html i faqes së faqes do të hapet para nesh.

Shikoni kodin e faqes: çfarë të kërkoni?

Pra, kodi Html i një faqeje është një listë me numra rreshtash, secila prej të cilave mbart informacione se si është krijuar kjo faqe. Për të mësuar shpejt të kuptoni këtë numër të madh karakteresh dhe karakteresh speciale, duhet të bëni dallimin midis pjesëve të ndryshme të kodit.

Për shembull, linjat e kodit brenda etiketës së kokës përmbajnë informacion për motorët e kërkimit dhe webmasterët. Ato nuk shfaqen në sit. Këtu mund të shihni se me cilat fjalë kyçe po promovohet kjo faqe, si shkruhet titulli dhe përshkrimi i saj. Gjithashtu këtu mund të gjeni një lidhje, duke klikuar mbi të cilën mësojmë për familjen e shkronjave të Google të përdorura në faqe.

Nëse faqja është krijuar në CMS WordPress ose Joomla, atëherë do të shihet edhe këtu. Për shembull, kjo zonë shfaq informacion në lidhje me një temë të WordPress ose shabllon të faqes Joomla. Mund ta shihni duke lexuar përmbajtjen e lidhjeve të theksuara me ngjyrë blu. Një lidhje tregon shabllonin e faqes.

Për shembull:

//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3

Ne do të shohim stilet CSS për fontet e faqeve. Në këtë rast, përdoret fonti. Mund ta shihni këtu - font-family: 'Source Sans Pro'.

Kjo faqe është optimizuar duke përdorur shtesën SEO SEO të Yoast. Kjo mund të shihet nga kjo pjesë e komentuar e kodit:

Kjo faqe është optimizuar me shtesën Yoast SEO v3.4.2 - https://yoast.com/wordpress/plugins/seo/

Të gjitha informacionet brenda etiketës së trupit shfaqen nga shfletuesi në ekranin e monitorit. Këtu shohim kodin html të faqes, dhe në fund është kodi i skriptit Yandex Metrics. Është mbështjellë në një etiketë të komentuar me tekstin:

/Yandex.Metrika sportel

Duke përmbledhur

Pasi të kemi bërë një analizë mjaft sipërfaqësore të kodit të faqes kryesore të faqes, mund të konkludojmë se me cilat mjete është bërë kjo faqe. Ne pamë në të:

• CMS WordPress;
• Burimi i fontit të Google Sans Pro
• Tema e WordPress - Sydney;
• shtojcat Yoast;
• Njehsuesi i metrikës Yandex.

Tani parimi i analizimit të kodit html të një faqe interneti është mjaft i qartë. Nuk është aspak e nevojshme të mbash hapur faqen e eksploruar në shfletues. Ju mund ta ruani kodin e faqes në kompjuterin tuaj duke përdorur kombinimet e tasteve ctrl + a, ctrl + c, ctrl + v. Ngjitni atë në çdo redaktues teksti (mundësisht Notepad ++) dhe ruajeni me shtesën html. Kështu, në çdo kohë mund ta studioni më thellë dhe të gjeni informacione më të dobishme për veten tuaj.

Pra, sot do të shikojmë disa mjete të dobishme për një master Web që e bëjnë jetën më të lehtë për paraqitjen e faqes në internet. Le të fillojmë me tastierën e webmasterit në Google Chrome. Dhe le të kalojmë mbi pyetjet që lindin më shpesh nga web-master gjatë paraqitjes së faqes.

Për të hyrë në tastierë, hapni faqen tuaj në Google Chrome, kliko me të djathtën kudo në faqen e internetit dhe zgjidhni Shiko Kodin e Faqes nga menyja rënëse e kontekstit, ose në një artikull specifik për kërkime duke zgjedhur elementin Shiko Kodin " .

Në krye, do të keni të listuara disa skeda. Sot do të flasim për skedën "Elementet". , i cili paraqet elementet e një faqe interneti me etiketat, veçoritë e theksuara, duke theksuar folenë e elementeve, duke përfaqësuar hierarkinë e një elementi në pemën DOM (shih në fund, nga prindi rrënjë deri tek ai aktual i eksploruar), aftësinë për të redaktoni elementet, një listë të vetive të tyre, merrni parasysh kërkimin sipas elementeve dhe le të njihemi me shikimin e stileve css që lidhen me elementët, etj.

Si mund t'i shoh të gjitha stilet që lidhen me një element specifik? Cila po aplikohet tani? Në cilat skedarë ndodhen?

Pra, asgjë nuk mund të jetë më e lehtë! Ne hapim shfletuesin Google Chrome, hapim faqen tonë - burimin e pyetjeve, kliko me të djathtën në elementin e dëshiruar, nëse është i dukshëm në kontekstin e faqes dhe zgjedh "Shiko kodin e elementit" nga menyja e kontekstit.

Në fund, ne kemi një tastierë me një skedë të theksuar në të majtë "Elementet" dhe të gjitha stilet që lidhen me elementin në të djathtë, ku: Stilet e llogaritura- këto janë stile të përgjithshme "përmbledhëse" që i janë caktuar një elementi nga rregullat css dhe cilësimet e shfletuesit të përdoruesit (mjedisi i tij), dhe skeda është shembur.

Por ne jemi të interesuar për skedën "Stilet", e zgjeruar nën të, në të cilën renditen një nga një të gjitha stilet e caktuara për një element, si dhe skedarët ku tregohen këto rregulla për këtë element sipas llojit, id, klasës, emri, prona, atributi, etj. Në të njëjtën kohë, nëse rregulli css ka kaluar, atëherë ai është ripërcaktuar më herët / më vonë (gjë që e bën të lehtë gjurmimin se cili nga rregullat css ka përparësi dhe zbatohet në këtë rast për elementin).

Poshtë konsolës është një rresht që tregon një element në hierarkinë e dokumentit, duke ju lejuar lehtësisht të shikoni të gjithë listën e elementeve prindër nga rrënja në elementin e zgjedhur. Diçka si thërrime buke.

Etiketa HTML nuk është e dukshme në kontekstin e faqes? Apo duhet të gjeni të gjitha etiketat, për shembull, sipas një klase, emri, vetie, lloji të caktuar?

Hapni faqen në Google Chrome, klikoni me të djathtën, hapni menunë e kontekstit, zgjidhni « Shiko kodin e faqes » ... Shtypni kombinimin e tastit "CTRL + F" në të njëjtën kohë, shkruani frazën që na nevojitet ( Për shembull: klasa = "mbushje ") dhe lundroni nëpër listën e rezultateve të gjetura, gjatë rrugës duke parë të gjitha stilet që lidhen me elementët e dëshiruar në anën e djathtë të faqes.

Si të shikoni kodin html të elementit (ve) të ngarkuar në mënyrë dinamike (për shembull: nga Ajax)

Ne presim që faqja të ngarkohet në Google Chrome. Ne kryejmë veprimet e nevojshme që Ajax të funksionojë. Klikoni me të djathtën mbi të dhënat e ngarkuara, zgjidhni "Shiko kodin e elementit" nga menyja e kontekstit, ekzaminoni rezultatin në tastierën në skedën "Elementet" në të majtë.

Shikoni ndryshimet në stilet css në kohë reale

Nga rruga, është gjithashtu e përshtatshme të vëzhgoni, nëse është e nevojshme, cilat stile i caktohen një elementi në fluturim, për shembull, kur lëvizni galerinë dhe ngjarjet e tjera me kohëmatës. Të gjitha stilet e caktuara nga javascript në kohë reale do të shfaqen në pronë stil elementin e përzgjedhur në dritaren në skedën "Elementet".

Vështrim i drejtpërdrejtë i efektit të rregullave css në prezantimin e etiketave html

Google Chrome ofron një tastierë interaktive për stilet css. Dhe kjo do të thotë që ju jo vetëm që mund të shikoni se cilat stile janë aplikuar për elementin, por gjithashtu mund të lëvizni kursorin e miut mbi css të specifikuar nga vetitë, ta aktivizoni atë duke përdorur shenjën që shfaqet në të djathtë ose ta çaktivizoni duke hequr zgjedhjen e flamurit dhe shikoni rezultatin që rezulton në faqe.

Ndryshimi i strukturës së prezantimit të elementeve html në fluturim (djathtas në shfletues)

Pra, ne kemi mësuar tashmë se si të eksplorojmë strukturën e një dokumenti në internet në Google Chrome, tani do të shohim shkurtimisht elementët e redaktimit në fluturim. Ne shkojmë në tastierë në çdo mënyrë të përshtatshme për ne. Ne gjejmë elementin e kërkuar në skedën "Elementet", kliko me të djathtën mbi të, duke thirrur kështu menunë e kontekstit që shfaqet:

• Shto atribut- shton një atribut për elementin e specifikuar. Sapo kursori të aktivizohet, fillojmë të vendosim vetinë e dëshiruar. për shembull: le të shkruajmë emrin = "artikullImage", i cili do t'i shtohet menjëherë artikullit tonë.
• Redakto atributin- nëse klikoni me të djathtën mbi një atribut elementi, artikulli bëhet i disponueshëm redaktoniatribut... Kliko, modifiko.

Shembull përdorimi: ne harruam fjalëkalimin e ruajtur nën yjet në Google Chrome (nëse fjalëkalimi është ruajtur në këtë shfletues). Klikoni me të djathtën mbi artikullin me një fjalëkalim, klikoni në "Shiko kodin e artikullit" , në tastierën në të majtë në skedën Elementet klikoni në tipin tip = "fjalëkalim" me butonin e djathtë të mausit, klikoni majtas Redaktoatribut, duke ndryshuar atributin lloj = "fjalëkalimi " në lloj = "tekst ", dhe tani, në vend të yjeve, i njëjti fjalëkalim shfaqet në formën e tekstit.

• Redaktohtml- kliko me të djathtën mbi një artikull në tastierë Elementet, zgjidhni Redaktohtml, ndryshoni kodin sipas dëshirës tuaj.
• KopjosiHTML- kopjoni pjesën HTML që na nevojitet për kërkime të mëtejshme, të themi, në një bllok shënimesh, ose për qëllime të tjera ku duhet të aplikojmë saktësisht të njëjtën paraqitje. Ne kursejmë kohë.
• KopjoXPATH- kopjon paraqitjen XPATH të strukturës nga rrënja e elementit prind në elementin e zgjedhur.
• Fshijenyje- nëse duhet të hiqni elementin aktual të zgjedhur dhe të gjithë fëmijët e tij nga konteksti i faqes së internetit dhe shikoni rezultatin.
• fjalëmbështjell- do të japë pamjen e faqes së internetit në kontekstin e tastierës Elementet më të lexueshme.

Në artikujt vijues, ne do të vazhdojmë shqyrtimin tonë të mjeteve për webmasterin, dhe në veçanti, do të njihemi me pjesën tjetër të skedave të veglave për webmasterin në Google Chrome, dhe gjithashtu merrni parasysh korrigjimin e gabimeve të javascript duke përdorur shfletues të ndryshëm

Madhësia dhe ngjyra e disa prej elementeve të rëndësishëm të një blogu, si p.sh. titulli i blogut ose postimi, sa më shumë etiketa dhe të ngjashme. Kërkova manualisht kodin e nevojshëm, duke eksperimentuar me domenin e testimit, në bazë të të cilit u shkrua artikulli më vonë.

Dhe kohët e fundit më duhej të ndryshoja ngjyrën e lidhjeve. Pasi gjeta një tufë literaturë për këtë çështje, kuptova një gjë të thjeshtë: secili jep shembuj nga shabllonet e tij, por të gjithë kemi shabllone të ndryshëm dhe është mirë nëse kodi nga shembulli është edhe pak i ngjashëm: nuk jam duke u ankuar, do ta gjej akoma duke u rrotulluar - me metodën poke.

Numri nuk kaloi me kodin e referencës. Të gjithë treguan rrugë krejtësisht të ndryshme. Pyesja veten nëse kishte një instrument të thjeshtë dhe të saktë, si të gjeni kodin e kërkuar html në çdo sajt. Shumë blogerë, edhe me përvojë, e kanë të vështirë të modifikojnë pak shabllonin. Nuk ka asgjë të keqe me këtë, sepse secili ka interesat dhe qëllimet e veta për krijimin e një faqe interneti.

Nëse dëshironi të bëni ndryshime të vogla në shabllon, për shembull ndryshoni çdo titull, titull të artikujve dhe tituj, ngjyrë dhe madhësi të shkronjave dhe lidhjeve, zakonisht mjafton të mësosh parimin e thjeshtë të diskutuar në këtë artikull. Por ka edhe raste komplekse që kërkojnë ose një studim më të thellë të html dhe css, ose ndihmën e një specialisti.

Një ditë një mik më kërkoi të gjeja se ku të ndryshoja ngjyrën e shiritit të titullit në shabllonin e tij. E ngarkoi temën në nënfushën e testimit. Cilësimet për këtë element nuk u ruajtën në style.css, por në një skedar tjetër, kështu që personi nuk mund ta gjente atë.

Si të gjeni dhe ndryshoni kodin html dhe css të faqes

Nëse nuk ju pëlqejnë artikujt e gjatë, për ju në fund të artikullit një video tutorial që tregon se si mund të shihni kodin html të një sajti duke përdorur Notepad ++ dhe të bëni ndryshime në dizajnin e çdo shablloni duke përdorur një shembull se si të ndryshoni ngjyrën e shkronjave. Ka hollësi të tjera të trajtimit të një blogu në video. Dhe për ata që janë më afër dhe më të qartë me tekstin, më poshtë është një analizë e detajuar e temës me pamje nga ekrani.
httpv: //youtu.be/uIlVvwCt2ho

Termat dhe konceptet

Do të ishte më e saktë ta quanim artikullin " Si të gjeni kodin css", Por vendosa të qëndroj me emrin" e gabuar", sepse në thelb përgjigja e kësaj pyetje kërkohet në html. CSS dhe HTML janë gjëra shumë të ndryshme, megjithëse janë dy pjesë të të njëjtit sistem. Ka shumë artikuj teknikë në internet, do të mjaftojë që ne këtu të kuptojmë se:

• HTML- është përgjegjës për strukturën e faqes (çfarë pason, në çfarë rendi, etj.). Ky është themeli mbi të cilin është ndërtuar siti. Nëse e krahasojmë me një shtëpi, atëherë kjo është faqosja e saj, rregullimi i dhomave.
• CSS- është përgjegjës për dizajnin (çfarë shkronjash, madhësish, ngjyrash e të ngjashme). Ky është stili i përgjithshëm i shtëpisë dhe stili i dhomave të saj individuale: çfarë lloj letër-muri do të jetë, llambat, perdet, mobiljet. Prandaj, dokumenti në të cilin kodet css, i quajtur "fletë stili"

Dhe nëse keni pyetur veten se si të ndryshoni, për shembull, ngjyrën e titullit të faqes, madhësinë e fontit në tekste ose ngjyrën e titujve në shiritin anësor, atëherë duhet të kërkoni të gjitha këto në fletën e stilit CSS. Kjo është e vetmja gjë që ia vlen të kuptohet për të filluar në mënyrë që të bëni vetë ndryshime në kod.

Më pëlqen ta kthej kompleksin në të thjeshtë. Më kujtohet shumë kohë më parë, kur kisha makinën time të parë, ishte shumë e vjetër, instalimet elektrike ishin të kalbura, siguresat digjeshin shpesh dhe e tërhiqja çdo herë në servis. Imagjinoni sa para u hodhën, pavarësisht nga fakti se një zëvendësim i pavarur, siç doli, kushton një qindarkë.

Një herë pashë se çfarë po bënte mjeshtri. Ende nuk e di si funksionon siguresa. Por unë e di ku ta ndryshoj). Unë nuk do ta rregulloja vetë motorin dhe nuk është e vështirë të zëvendësosh siguresën. Është e njëjta gjë me faqet e internetit.

Nëse nuk dëshironi të bëheni programues, atëherë nuk ka nevojë për kuptim të thellë të programimit. Mjafton të kuptoni qartë se çfarë synohet për çfarë, ku ta kërkoni dhe si ta ndryshoni atë. Është më mirë të ndryshosh atë që është e mundur, dhe pjesën tjetër t'ia lini specialistëve. Artikulli ka një lidhje të dobishme për këtë temë.

A duhet të jem ekspert në gjithçka

Në blogjet SEO, ka shpesh diskutime nëse një fillestar duhet të kuptojë thellë në html, apo edhe më mirë - mësoni si të shkruani vetë faqet e internetit, në mënyrë që gjithçka të jetë unike.. Epo, nuk e di - për secilin të tijën, dhe pastaj kush është më afër dikujt. Unë jam i interesuar pak më shumë, kështu që tani po mësoj shtesë nga Vladimir. Në nëntor të këtij viti, Vladimir hapi blogun e tij. Blogu i tij është bërë në shabllonin më të thjeshtë, falas, ai vetëm pak e modifikoi për vete.

Pas 10 ditësh ekzistence, blogu zuri vendin e 104-të në renditjen e të gjitha faqeve në Runet me një trafik prej rreth 1.5 mijë njerëz në ditë. Në 10 ditë. Pra, çfarë është marrëveshja? Vladimiri është i përgatitur mirë në html, mund të porosisë dhe blejë një shabllon unik. Kështu që ju duhet ta kuptoni atë sekreti nuk qëndron te shabllonet, por te dobia e informacionit.

Ku fshihet kodi html

Na vjen keq për digresionin, kthehu te kodet tona). Le të themi se dëshironi të ndryshoni ngjyrën e shkronjave të një titulli blogu. Le ta konsiderojmë atë në shembullin e faqes sime të testimit.

1. Hapja e faqes në shfletuesin Google Chrome (nëse nuk e përdorni tashmë, instaloni - është i mprehur mirë për të punuar me faqet e internetit, ka shumë mjete të integruara).
2. Zhvendosni kursorin e miut mbi elementin që do të ndryshojmë ... Në këtë rast, emri i blogut. Klikoni mbi të me mausin "djathtas" dhe në dritaren që shfaqet zgjidhni PARAQIT KODI I ELEMENTIT.

E RËNDËSISHME: mos e ngatërroni me SHQYRTIMIN E KODIT TË FAQES! Nuk na duhet e gjithë faqja tani, vetëm një element i vetëm.

Klikoni mbi të - një dritare e shikimit të kodit shfaqet në fund të shfletuesit:

Linja e kodit që po ndryshojmë është e theksuar me të kuqe.

Por zona e theksuar me blu përmban atë që ne po kërkojmë. Këtu mund të gjeni linjën e saktë (dhe jo të përafërt) të kodit përgjegjës për fontet, ngjyrën, madhësinë, theksin dhe më shumë. Në këtë mënyrë ju mund të gjeni ÇDO kod të çdo elementi të çdo shablloni.

Gjeni vijën e kërkuar në bllokun e theksuar me blu. Ekziston një rrëshqitës në të djathtë, mund të lëvizni dhe të gjeni rreshtin e dëshiruar.

Parimi i përgjithshëm, ku është ajo që kërkohet:

Emri i shkronjave - në linjë FONT FAMILY

Madhësia e shkronjave - në linjë FONT SIZE

Ngjyra e shkronjave - në linjë COLOR

Ekzistojnë tre linja kryesore që ndryshojnë emrin, madhësinë dhe ngjyrën e shkronjave të çdo elementi. Në të djathtë, në linjën e stilit css, jepet pozicioni i rreshtit në dokument. Nëse keni nevojë të ndryshoni ndonjë element tjetër (për shembull, duhet të zbuloni se ku ndodhet linja, në të cilën mund të ndryshoni ngjyrën e shiritit të menusë ose ngjyrën e lidhjeve), gjithçka bëhet në të njëjtën mënyrë.

KUJDES:

vija që do të kopjojmë është e theksuar me të kuqe në figurë,

për ta gjetur më vonë në fletën e stilit.

4. Kopjoni rreshtin... Meqenëse në këtë shembull duam të ndryshojmë ngjyrën e emrit të faqes, kopjoj rreshtin në foton e dytë të theksuar me një drejtkëndësh të kuq. Në shabllonin tim, ajo është përgjegjëse për ndryshimin e ngjyrës së emrit të faqes:

#header h1 a, #header h1 a: vizituar (

Gjeni rreshtin e kërkuar në skedarin "style sheet (style.css)". Kjo është bërë tashmë në panelin e administratorit. Unë kërkoj me forcë, ndërkohë që nuk ka besim dhe mirëkuptim të plotë, të kryhen të gjitha eksperimentet në një nënfushë testimi për të përjashtuar.

Pra, shkoni te paneli i administratorit: KONSOLA - PARAQITJA - EDITOR. Në shiritin anësor të djathtë gjejmë skedarin STYLE TABLE (STYLE.CSS), hapeni atë.

Tani hapni shiritin e kërkimit me tastet CTRL + F: në dritaren e sipërme do të shfaqet një vijë e zbrazët e dritares. Ne ngjitim në të rreshtin që kopjuam në hapin 4.

Dhe do të shihni se si theksohet kjo linjë në fletën e stilit (në foto - në portokalli):

Ne bëjmë një ndryshim në element. Në rastin tonë, ne ndryshojmë ngjyrën e shkronjave, kështu që zëvendësojmë një vlerë tjetër në rreshtin COLOR - ngjyrën që duam. Në shembull, ngjyra është e zezë, kuptimi i saj:

Ju mund të zgjidhni një ngjyrë në çdo shërbim të paletave të ngjyrave të uebit: shkruani në motorin e kërkimit "Paleta e ngjyrave të uebit" dhe zgjidhni atë që dëshironi. Zgjidhni një ngjyrë, kopjoni vlerën e saj dixhitale dhe zëvendësoni me kujdes atë të vjetër. pastaj klikoni UPDATE FILE dhe shkoni për të parë se çfarë ka ndodhur.

Nëse ndryshimet nuk u shfaqën, në orën e kaluar dhe pastaj shkoni përsëri në faqe - këtë herë gjithçka duhet të shfaqet.

Është përshkruar për një kohë të gjatë, por në praktikë gjithçka bëhet shpejt, veçanërisht kur shfaqet aftësia fillestare.

Më në detaje, si të ndryshoni disa elementë:

Kaq për sot, nuk do t'ju mundoj më me kode. Shpresoj që tani ju vetë mund të gjeni dhe ndryshoni lehtësisht çdo element të kodit html, ose më saktë, kodin css - ekspertët do të më falin për thjeshtimin. Dhe nëse nuk e kuptoni, vizitoni faqen gjithsesi. Mos humbisni kohë në marrëzi.

Unë sugjeroj të shikoni videon e Artem Abramovich se si të kërkoni dhe gjeni në çdo temë / shabllon, për çdo motor (wordpress, joomla, etj.) çdo fjalë ose element dhe ta zëvendësoni me atë që ju nevojitet:

Ju lutemi shpërndajeni nëse ju pëlqeu:

Ju mund të jeni të interesuar të mësoni më shumë:

Kemi publikuar një libër të ri, "Marketingu i përmbajtjes në mediat sociale: Si të hyni në krye të abonentëve dhe të bini në dashuri me markën tuaj".

Kodi burimor i një siti është një koleksion i shënimeve HTML, stileve CSS dhe JavaScript që një shfletues merr nga një server në internet.

Më shumë video në kanalin tonë - mësoni marketingun në internet me SEMANTICA

Mund të krahasohet me një grup komandash që u jepen ushtarëve nga komandanti. Imagjinoni që audienca nuk mund ta shohë apo dëgjojë shefin. Nga këndvështrimi i tyre, ushtria kryen veprime të pavarura. Në rastin tonë, komandanti është shfletuesi, komandat janë kodi burimor dhe ushtarët marshues janë rezultati përfundimtar.

Sajti ruhet në një server në internet që dërgon faqen me kërkesë të përdoruesit. Një kërkesë është shtypja e një URL në shiritin e adresave, klikimi i një lidhjeje ose klikimi i një butoni dërgo në një formular. Nuk ka rëndësi se në cilën gjuhë janë shkruar faqet e internetit, nëse ato përfshijnë kod. Rezultati përfundimtar i çdo algoritmi nga ana e serverit është një grup etiketash html dhe teksti.
Kodi burimor i një faqeje është një grup të dhënash që përfshin:

• shënjimi html;
• fletë stili ose lidhje skedari;
• programe të shkruara në JavaScript ose lidhje me skedarë me kod.

Këto tre seksione trajtohen nga shfletuesi. Për serverin, ky është thjesht tekst që duhet të dërgohet në përgjigje të një kërkese.

Pse mund të na duhet të studiojmë kodin burimor

Gjithçka që shohim, ne mund të analizojmë dhe aplikojmë për të zgjidhur probleme të caktuara që lindin gjatë punës me sitin, veçanërisht kur e optimizojmë atë. Duke parë kodin burimor, ne mund të:

• Shikoni etiketat meta të faqes suaj ose të dikujt tjetër për t'i analizuar ato.
• Shihni praninë ose mungesën e disa elementeve në sajt: numërues, kode identifikimi në sisteme të ndryshme, skripta të caktuara dhe më shumë.
• Gjeni parametrat e elementeve: madhësive, ngjyrave, shkronjave.
• Gjeni shtegun drejt fotove dhe artikujve të tjerë në faqe.
• Eksploroni lidhjet nga faqja.
• Gjeni probleme me kodin që ndërhyjnë në procesin e optimizimit të faqes në internet: stilet, skriptet, kodi i pavlefshëm që nuk përfshihet në skedarë të veçantë.

Këto janë veçori themelore, por në fakt, duke ditur se si të lexoni kodin, mund të mësoni shumë më tepër rreth faqes.

Si të shikoni kodin burimor të faqes

Plotësisht në formën në të cilën është postuar në server, kjo nuk mund të bëhet nga shfletuesi. Por ju mund të shihni të gjithë shënimin duke klikuar me të djathtën në faqe. Në vijim, duke përdorur shembullin e Google Chrome.

Ne zgjedhim opsionin "Shiko kodin e faqes" dhe marrim listën e plotë në një skedë të veçantë.

Është vetëm tekst që duhet analizuar për ta kuptuar. Por ju mund të merrni kodin interaktiv duke përdorur mjetet e zhvilluesit.

Si të gjeni kodin burimor të faqes së sajtit

Klikoni në ikonën e menysë në shfletues. Më shpesh është në të djathtë dhe duket si tre pika ose vija.

Në seksionin e mjeteve shtesë, zgjidhni "Mjetet e Zhvilluesit".

Do të hapet një dritare që tregon gjendjen aktive të kodit. Kjo do të thotë që kur klikoni mbi shënimin, stili i elementit do të shfaqet pranë tij dhe blloqet e zgjedhura do të theksohen në faqe.

Në skedën "Burimi", mund të shikoni përmbajtjen e disa skedarëve: skriptet, shkronjat, imazhet.

Kontrollimi i certifikatës së faqes është i disponueshëm në skedën "Siguria".

Skeda "Audite" do të ndihmojë për të kontrolluar burimin e postuar në host.

Nëse vendndodhja e panelit në të djathtë është e papërshtatshme, mund të klikoni tre pika dhe ta ndryshoni atë duke zgjedhur artikullin e dëshiruar.

Si të shikoni meta etiketat

Çdo dokument html përfshin etiketat e strukturës. Ja disa prej tyre:

1. Html - dokument i tërë.
2. Shefi - seksioni i titujve të shërbimit.
3. Titulli - titulli i faqes (shfaqet në skedë).
4. Trupi - trupi i dokumentit.
5. H1-H6 - titujt e tekstit të faqes.
6. Artikull - artikull.
7. Seksion - seksion.
8. Menu - menu.
9. Div - bllok.
10. Span është një varg.
11. P - paragrafi.
12. Tabela - një tryezë.

Elementet janë të destinuara për përcaktimin logjik të seksioneve në faqe; nëse është e nevojshme, ato stilohen. Ato përmbajnë tekst që është disi i dukshëm në faqe. Por etiketa Head përmban informacione për shërbimin. Meta etiketat përdoren për ta treguar atë. Gjithçka që shkruhet në to është menduar për serverin dhe motorët e kërkimit.

Është e pamundur të zbulohet përmbajtja e tyre në ndonjë mënyrë tjetër.

Le t'i kushtojmë vëmendje etiketës Link. Me ndihmën e tij, specifikohen lidhjet me skedarët e përfshirë të jashtëm. Nëse dëshironi, mund të shihni përmbajtjen dhe ta ruani në disk. Për ta bërë këtë, lëvizni treguesin mbi adresën dhe shtypni RMB. Zgjidhni "Hap në skedën e re".

Skedari i specifikuar do të hapet në një skedë të re dhe mund të shikohet ose ruhet.

Si të shikoni kodin burimor të një faqeje për korrigjimin e një skripti

Në këtë rast, është më e përshtatshme të hapni faqen në makinën lokale. Nëse ju duhet vetëm të rregulloni shënimin, stilet dhe skriptet, atëherë mund ta bëni atë direkt nga dosja. Kodi html shihet në të njëjtën mënyrë. Megjithatë, gabimet e kodit JavaScript mund të shihen në skedën "Console". Ai tregon një përshkrim të gabimit dhe numrin e linjës në të cilën ka ndodhur.

Sintaksa mund të shihet drejtpërdrejt në kod. Skeda "Burimi" është menduar për këtë.

Si të shikoni kodin e një artikulli specifik

Për faqet e mëdha me shumë elementë, është e vështirë të gjesh kodin që dëshiron në të gjithë shënjimin. Në këtë rast, duhet të përdorni një komandë të veçantë të menusë së kontekstit. Zhvendosni miun mbi fragment dhe shtypni RMB. Le të zgjedhim komandën "Shiko kodin".

Do të hapet e njëjta dritare, por me fokus në objektin e zgjedhur.

Përmbledhje

Ne ju thamë se cili është kodi burimor i faqes. Mjafton të zotëroni njohuritë bazë të HTML dhe CSS, dhe duke përdorur mjete të përshtatshme zhvilluesish, mund të korrigjoni dokumentet tuaja html.

Shfletimi i kodit të burimit në internet do t'ju lejojë të mësoni jo vetëm nga përvoja juaj, por edhe të përdorni shembuj realë pune. Dhe për specialistët e SEO, meta etiketat do të jenë të dobishme, informacioni në të cilin mund të thotë shumë për sitin.

Ctrl + U

Si mund ta shikoj kodin burimor të një artikulli?

Klikoni me të djathtën mbi elementin me interes në faqe.

Google Chrome: "Shiko kodin e artikullit"

Opera: "Inspektoni elementin"

FireFox: "Elementi i analizës"

Kërkoni për një artikull të ngjashëm menyje në shfletues të tjerë.

Pershendetje te gjitheve!

Sidomos në fillim të artikullit parashtrova të gjithë pikën, për ata që kërkojnë një përgjigje të shpejtë.

Informacioni mund të jetë i njohur për shumë njerëz, por meqenëse po shkruaj për blogerët fillestarë, programuesit e uebit dhe kërkuesit e tjerë, ky artikull ndihme duhet të jetë i pranishëm.

Në të ardhmen, ju patjetër do të studioni kodin burimor të faqeve dhe elementeve individuale.

Le të shohim një shembull konkret se si mund të përdorni pamjen e burimit të faqes.

Për shembull, ne duam të shohim se cilat fjalë kyçe përdoren për një faqe të caktuar. Shkojmë në faqen e internetit që na intereson dhe shtypim Ctrl + U. Kodi burimor i kësaj faqeje do të hapet në një dritare të veçantë ose në një skedë të veçantë. Shtypni Ctrl + F për të gjetur një pjesë të kodit. Në këtë rast, ne shkruajmë në kutinë e kërkimit fjalën " fjalë kyçe”. Do të ridrejtoheni automatikisht në një copë kodi me këtë meta-etiketë dhe do të nënvizoni fjalën e dëshiruar.

Për analogji, ju mund të kërkoni dhe studioni pjesë të tjera të kodit.

Shikimi i të gjithë kodit burimor të një faqeje nuk është shumë i përshtatshëm në shumicën e rasteve, kështu që në të gjithë shfletuesit është e mundur të shikoni kodin e një elementi ose fragmenti individual.

Le të përdorim një shembull specifik për të parë kodin e një elementi. Për shembull, le të shohim nëse një lidhje ka një atribut nofollow. Klikoni me të djathtën në lidhjen që na intereson dhe në menunë e kontekstit rënës, kliko me të majtën mbi artikullin "Shiko kodin e artikullit" ose të ngjashme (në varësi të shfletuesit tuaj). Më poshtë, në një dritare të veçantë për analizën e kodit, marrim diçka të ngjashme.

Mund të shohim se rel = "nofollow" është i pranishëm në kodin e lidhjes. Kjo do të thotë se kjo lidhje nuk do të "rrjedh" dhe PR. Ne do të flasim për këtë në mënyrë më të detajuar në artikujt vijues. Ajo që është e rëndësishme tani është që ju tani dini se si të shikoni kodin burimor të faqes dhe kodin burimor të një elementi individual.