shtëpi › Internet › Si të gjeni kodin burimor të një faqeje. Google Chrome - mjete për webmasterët

Si të gjeni kodin burimor të një faqeje. Google Chrome - mjete për webmasterët

Shkathtësi ndryshoni kodin burimor të faqes– një aftësi e dobishme për një përdorues të avancuar të internetit. Duke zëvendësuar kodin HTML, ju mund të ndryshoni faqen e hapur të internetit sipas dëshirës tuaj. Në këtë artikull do t'ju tregojmë si të ndryshoni kodin e faqes në Google Chrome. Sidoqoftë, në shfletuesit e tjerë gjithçka bëhet në mënyrë të ngjashme, kështu që nuk duhet të ketë ndonjë vështirësi.

Cili është kodi HTML i faqes?

Çdo faqe që hapni në shfletuesin tuaj ka kodin e vet në gjuhën e shënjimit HTML. Ky kod përfaqëson etiketat dhe tekstin. Etiketat janë etiketa unike që i tregojnë shfletuesit se si të shfaqë këtë ose atë pjesë të faqes. Teksti është përmbajtja e faqes, ajo që shikon përdoruesi. Gjithashtu, stilet CSS mund të lidhen me faqen, të cilat përcaktojnë pamjen e elementeve të faqes. te ndryshoni kodin burimor të faqes ju nuk keni nevojë të njihni plotësisht HTML dhe CSS, dhe së shpejti do ta shihni vetë.

Pse të ndryshoni një faqe interneti?

Mund të zëvendësoni të dhënat në sajt, të ndryshoni tekstin e mesazhit ose të bëni një pamje të rreme të ekranit. Ju lutemi vini re se të gjitha ndryshimet janë të dukshme vetëm për ju dhe do të zhduken kur të rifreskoni faqen. Gjithashtu të dhënat e ndryshuara nuk do të jenë reale. Për shembull, nëse nuk kam 10 dollarë dhe i ndryshoj në 100, atëherë nuk do të kem më para. Kjo është vetëm shfaqja e faqes nga shfletuesi. Shembull:

Pas:

Për shembull, unë do të marr të njëjtën faqe dhe do të ndryshoj njoftimin e mëparshëm të artikullit "Hapja e faqes kryesore në Google Chrome. Unë kliko me të djathtën mbi elementin që dua të ndryshoj, për shembull, titullin e njoftimit dhe zgjedh "Shiko kodin".

Në dritaren që hapet, shkoni te skeda Elemente dhe shihni kodin HTML të faqes. Në të duhet të gjejmë tekstin që na intereson. (e nënvizuar me të kuqe)

Tani do të fshij tekstin e vjetër dhe do të shkruaj në një të ri.

Kjo është e gjitha, titulli i njoftimit është ndryshuar. Tani do të ndryshoj vetë njoftimin, etiketat dhe kategorinë.

Mund të futni një imazh tjetër duke ndryshuar atributin src në etiketën img.

Çdo përdorues i internetit ka faqet e tij të preferuara në të cilat ai shpenzon një kohë të gjatë. Dhe vetëm dembelët nuk menduan të shikojnë se si u krijua dhe nga çfarë përbëhej. Është e pamundur t'u përgjigjesh të gjitha këtyre pyetjeve, pasi ka shumë mënyra për të krijuar një faqe interneti, por të shikosh komandat dhe kodet që përbëjnë atë është e mundur dhe e disponueshme publikisht për të gjithë.

Një pyetje tjetër është nëse një person që nuk është i përfshirë në programim do të kuptojë ndonjë nga simbolet që përbëjnë kodin. Por nga shembujt që do të jepen më poshtë, çdo përdorues i Google Chrome do të jetë në gjendje të shikojë elemente individuale të sajteve.

Si të shikoni kodin burimor të një faqe html në një shfletues Google

Që të mund të shikoni kodin e faqes në Chrome, duhet të shkoni te faqja që ju intereson dhe të kryeni hapat e mëposhtëm:

Këto dy artikuj ndryshojnë në funksionalitetin dhe informacionin e tyre për përdoruesin, programuesin ose hakerin.

Cili është ndryshimi midis kodit të faqes dhe komandës "Shiko kodin"?

Duke analizuar secilën prej këtyre funksioneve, mund të shkruani një artikull të veçantë. Për programuesit, ky ndryshim është i rëndësishëm dhe ata e kuptojnë se në cilat raste është e nevojshme të përdoret "Shiko kodin" dhe në cilin "Shiko kodin e faqes" në shfletuesin Google Chrome.

Por duke shpjeguar për përdoruesin mesatar, këto funksione mund të ndahen në qëllimet e mëposhtme:

"Shiko kodin e faqes" është i nevojshëm vetëm për të parë kombinimin kryesor të faqes. Në thelb, kjo është struktura e faqes (pa modele shtesë në formën e skedarëve CSS dhe shtesave të tjera që mbeten në dosjen e krijuesit të faqes). Kjo strukturë nuk është e përshtatshme për të krijuar faqen tuaj duke "copy-pasting", por do t'ju lejojë të shihni se çfarë bëri saktësisht programuesi dhe në çfarë sekuence për të siguruar që faqja në shfletuesin Google Chrome të kishte një dizajn të tillë të jashtëm.
"View Code" shfaq një strukturë të detajuar, duke theksuar të gjitha zonat që preken në faqe. Nëse rri pezull mbi një kod specifik të listës, ai do të nxjerrë në pah elementin në sajtin të cilit i përket.
Shikimi i kodit të faqes hapet në një shfletues të veçantë pa aftësinë për ta modifikuar atë. Kjo do të thotë, është i përshtatshëm vetëm për kopjimin dhe leximin e kodit të faqes. Por ky nuk është funksion më pak i dobishëm.
"Shiko kodin" është i ndryshueshëm dhe ju mund të modifikoni çdo element në një mënyrë të përshtatshme për ju. Natyrisht, të gjitha këto ndryshime do të "rrojnë" derisa faqja të rifreskohet, por ndonjëherë është kënaqësi të kalosh nëpër ato cilësime dhe thjesht të kuptosh pse nevojitet kjo apo ajo vlerë dhe çfarë do të ndodhë nëse e ndryshoni atë. Ju nuk duhet të supozoni se me veprime të tilla do të dëmtoni veten ose sitin - këto ndryshime ndikojnë vetëm në kodin e Google Chrome tuaj dhe nuk hyjnë në internet.

Ne po shqyrtojmë pyetjen se si të shikojmë kodin e elementit

Nëse do t'i përgjigjenim një pyetjeje të tillë, atëherë i vetmi opsion që sugjeron vetveten është një shembull. Sepse në një artikull është shumë e vështirë të bëhesh një person që e kupton këtë temë (zhvilluesi i uebit), por të tregosh me një shembull në mënyrë që pyetja të zgjidhet është shumë më e lehtë.

Funksionaliteti i kodit të elementit është shumë i gjerë, kështu që marrim një nga fjalët në faqen e internetit të shfletuesit Google Chrome. Ne donim të merrnim parasysh se cilat fjalë kyçe (në kod do të shkruhet si "fjalë kyçe") janë përdorur për faqen tonë. Për ta bërë këtë, ne kryejmë algoritmin e mëposhtëm:

Mënyra të tjera për të përdorur këtë veçori në shfletuesin Google Chrome

Në përgjithësi, duke vazhduar t'i përgjigjeni pyetjes se si të shikoni kodin e një elementi dhe pse është i nevojshëm, duhet të rendisni funksionet e tij. Gjegjësisht, falë aftësisë për të parë kodin e një elementi të çdo faqeje në shfletuesin Google Chrome, ne mund:

Shihni strukturën e faqes duke filluar nga kreu (“titulli i faqes”) dhe duke përfunduar me fund (komandën përfundimtare të çdo programi);
Shikoni të gjitha funksionet e faqes, përkatësisht: lidhjet me faqet e tjera, modulet shtesë nga faqet e jashtme dhe praninë e sporteleve të integruara për mbledhjen e informacioneve të ndryshme;
Zbuloni nëse kopjimi nga faqja është i ndaluar apo jo;
Kodi do të regjistrojë të gjitha lidhjet me faqet e tjera të faqes, si dhe dizajnin e tyre dhe veprimet pasuese pasi të klikoni mbi to.

Kjo nuk është aspak një listë e fundme. Por duhet të kujtojmë se pa njohuri të veçanta, është pothuajse e pamundur të "lexosh" kodin e një faqeje Google Chrome dhe të dhënat e marra praktikisht nuk i nevojiten një përdoruesi të zakonshëm.

Artikulli "Shiko kodin e elementit" nuk funksionon

Duhet thënë menjëherë se çdo faqe do të ketë akses të hapur në kodet e elementeve. Kjo do të thotë, edhe faqet më të njohura dhe më të shtrenjta do të jenë të hapura për të parë kodin e tyre. Prandaj, nëse artikulli në shfletuesin Google Chrome nuk është aktiv ose gjeneron një gabim, ai ka arsyet e mëposhtme të mundshme:

Profili i përdoruesit është i korruptuar;
Prania e malware në kompjuter;
Bllokimi nga një shtrirje e caktuar për të rritur performancën (edhe kjo mund të ndodhë).

Rregullimi i një profili të dëmtuar të përdoruesit

Për të krijuar një profil të ri, duhet të fshini të vjetrin nga kompjuteri juaj. Për ta bërë këtë ne bëjmë sa vijon:

Mbyllni Google Chrome dhe hapni shfletuesin e integruar të Windows Explorer.
Futni komandën e mëposhtme në shiritin e adresave: %LOCALAPPDATA%\Google\Chrome\User Data\.
Kur të hapet drejtoria, kërkoni dosjen "Default" dhe shtoni "Backup" në emrin e saj në mënyrë që të merrni sa vijon: "Backup Default".
Tani, pas rinisjes së shfletuesit Chrome, do të krijohet një profil i ri.

Ne heqim malware ose mbetjet e tij

Nëse profili i ri nuk na jep akses në kodin e elementit të faqes dhe ne ende shohim gabimin, duhet të bëjmë sa më poshtë:

Hapni linjën e komandës së Windows ("Run") dhe futni komandën "cmd" atje.
Futni komandën e mëposhtme në rreshtin: RD /S /Q "%WinDir%\System32\GroupPolicyUsers".
Pasi të konfirmoni veprimin, shkruani këtë: RD /S /Q "%WinDir%\System32\GroupPolicy".
Tani "gpupdate /force" (pa thonjëza).

Nëse gjithçka është bërë si duhet, atëherë pas rinisjes së kompjuterit Google Chrome do të hapë kodin e elementeve dhe shfletuesi do të funksionojë normalisht.

Madhësia dhe ngjyra e disa elementeve të rëndësishëm të blogut - si titulli i blogut ose postimi, etiketa më e madhe dhe të ngjashme. Kërkova manualisht kodin e kërkuar, duke eksperimentuar me domenin e testimit, mbi bazën e të cilit u shkrua artikulli më vonë.

Dhe kohët e fundit më duhej të ndryshoja ngjyrën e lidhjeve. Pasi shoshita një tufë literaturë për këtë çështje, kuptova një gjë të thjeshtë: të gjithë japin shembuj nga shabllonet e tyre, por ne të gjithë kemi shabllone të ndryshëm dhe është mirë nëse kodi nga shembulli është të paktën pak i ngjashëm: pa u ankuar, Do ta gjej akoma duke kërkuar - duke përdorur metodën poke.

Numri nuk funksionoi me kodin e lidhjes. Të gjithë treguan rrugë krejtësisht të ndryshme. Pyesja veten nëse kishte një mjet të thjeshtë dhe të saktë, si të gjeni kodin e kërkuar html në çdo faqe interneti. Shumë blogerë, edhe me përvojë, kanë vështirësi në modifikime të vogla të shabllonit. 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.sh. ndryshoni çdo titull, titullin e artikujve dhe seksioneve, ngjyrën dhe madhësinë e 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ë i njohur më kërkoi të gjeja ku të ndryshoja ngjyrën e panelit të kategorisë në shabllonin e tij. Ngarkoi një temë në një nëndomain testues. Cilësimet për këtë element nuk u ruajtën në style.css, por në një skedar tjetër, kështu që një person nuk mund ta gjente atë.

Si të gjeni dhe ndryshoni kodin html dhe css të një faqeje

Nëse nuk ju pëlqejnë artikujt e gjatë, kjo është për ju në fund të artikullit një video tutorial që tregon se si mund të shihni kodin html të sajtit 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. Në video ka hollësi të tjera të trajtimit të një blogu. Dhe për ata që janë më afër dhe më të kuptueshëm 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ë të titullohej artikulli " Si të gjeni kodin css“, por vendosa të ndalem te emri “i gabuar”, sepse në thelb përgjigja e kësaj pyetje kërkohet në html. CSS dhe HTML janë gjëra shumë të ndryshme, edhe pse janë dy pjesë të të njëjtit sistem. Ka shumë artikuj teknikë në internet, këtu do të mjaftojë që të kuptojmë se:

HTML— është përgjegjës për strukturën e faqes (çfarë pason, në çfarë rendi, etj.). Kjo është baza mbi të cilën është krijuar faqja. 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, etj.). Ky është stili i përgjithshëm i shtëpisë dhe stili i dhomave të saj individuale: çfarë lloj letër-muri do të ketë, llamba, perde, mobilje. Prandaj, dokumenti që thotë kodet css, i quajtur "fletë stili"

Dhe nëse po pyesni se si të ndryshoni, për shembull, ngjyrën e titullit të faqes, madhësinë e shkronjave 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 së pari në mënyrë që të bëni vetë ndryshime në kod.

Më pëlqen ta bëj kompleksin 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 dilnin shpesh dhe sa herë e tërhiqja në servis. Imagjinoni sa para u shpenzuan, pavarësisht se zëvendësimi i tyre vetë, siç rezulton, kushton qindarka.

Një ditë pashë se çfarë bën saktësisht mjeshtri. Ende nuk e di si funksionon siguresa. Por unë e di ku ta ndryshoj). Unë nuk do ta riparoja 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ë të keni një kuptim të thellë të programimit. Është mjaft e qartë për të kuptuar se çfarë synohet për çfarë, ku ta kërkoni dhe si ta ndryshoni atë. Është më mirë të ndryshoni atë që mundeni vetë, dhe gjithçka tjetër t'ia lini specialistëve. Artikulli rreth ka një lidhje të dobishme për këtë temë.

A duhet të jesh ekspert në gjithçka?

Shpesh ka diskutime në blogjet e SEO nëse një fillestar duhet të ketë një kuptim të thellë të HTML, ose edhe më mirë, të mësojë se si të shkruajë vetë faqet e internetit në mënyrë që gjithçka të jetë unike.. Epo, nuk e di - për secilin të tijën, dhe ja çfarë është më afër kujt është më afër. Unë jam i interesuar pak më shumë, kështu që tani po mësoj më shumë nga Vladimir. Në nëntor të këtij viti, Vladimir hapi blogun e tij. Blogu i tij u krijua në shabllonin më të thjeshtë, falas, ai vetëm pak e modifikoi për t'iu përshtatur vetes.

Pas 10 ditësh ekzistence, blogu zuri vendin e 104-të në renditjen e të gjitha faqeve 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 dhe mund të porosisë dhe blejë vetë një shabllon unik. Kështu që ju duhet ta kuptoni atë Sekreti nuk qëndron në shabllonet, por në dobinë e informacionit.

Ku fshihet kodi html?

Na vjen keq për digresionin, le të kthehemi te kodet tona). Le të themi se dëshironi të ndryshoni ngjyrën e fontit të titullit të blogut tuaj. Le të shohim shembullin e faqes sime të testimit.

Hapni faqen në shfletuesin Google Chrome (nëse nuk e përdorni ende, instaloni - është projektuar mirë për të punuar me faqet e internetit, ka shumë mjete të integruara).
Lëvizim kursorin e miut mbi elementin që do të ndryshojmë . Në këtë rast - emri i blogut. Klikojmë me të djathtën mbi të dhe në dritaren që shfaqet zgjedhim PARAQITJE KODI I ELEMENTIT.

E RËNDËSISHME: mos e ngatërroni këtë me SHIKONI KODI I FAQES! Nuk na duhet e gjithë faqja tani, vetëm një element i veçantë.

Klikoni mbi të - një dritare për shikimin e 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ë (jo të përafërt) të kodit përgjegjës për fontet, ngjyrën, madhësinë, theksimin, etj. Në këtë mënyrë mund të zbuloni ÇDO kod të çdo elementi të çdo shablloni.

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

Parimi i përgjithshëm se ku të kërkoni gjërat:

Emri i shkronjave - në linjën FONT FAMILY

Madhësia e shkronjave - në rreshtin FONT SIZE

Ngjyra e shkronjave - në rreshtin COLOR

Këtu janë tre linja kryesore në të cilat ndryshojnë emri, madhësia dhe ngjyra e shkronjave të çdo elementi. Në të djathtë në vijën e stilit css është dhënë pozicioni i rreshtit në dokument. Nëse keni nevojë të ndryshoni ndonjë element tjetër (për shembull, duhet të zbuloni se ku është rreshti ku mund të ndryshoni ngjyrën e shiritit të menusë ose ngjyrën e lidhjeve), gjithçka bëhet saktësisht e njëjta gjë.

KUJDES:

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

në mënyrë që më vonë ta gjeni në fletën e stilit.

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

#header h1 a, #header h1 a:visited (

Gjeni rreshtin e kërkuar në skedarin "Stil sheet (style.css)". Kjo është bërë tashmë në panelin e administratorit. Unë kërkoj me forcë që, ndërsa nuk ka besim dhe mirëkuptim të plotë, të gjitha eksperimentet duhet të kryhen 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 linjën e kërkimit duke përdorur tastet CTRL + F: një dritare e linjës bosh do të shfaqet në dritaren e sipërme. Ne ngjitim në të rreshtin që kopjuam në hapin 4.

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

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

Ju mund të zgjidhni një ngjyrë në çdo shërbim të paletës së ngjyrave të internetit: shkruani "Paleta e ngjyrave në ueb" në një motor kërkimi dhe zgjidhni atë që dëshironi. Ne zgjedhim një ngjyrë, kopjojmë vlerën e saj dixhitale dhe e zëvendësojmë me kujdes me atë të vjetër. pas së cilës klikojmë UPDATE FILE dhe shkojmë të shohim se çfarë ka ndodhur.

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

Duhet shumë kohë për t'u përshkruar, 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 shqetësoj më me kode. Shpresoj që tani ju vetë do të jeni në gjendje të gjeni dhe ndryshoni lehtësisht çdo element të kodit html, ose më saktë, kodin css - mund të më falin ekspertët për thjeshtimin e tij. Dhe nëse nuk e kuptoni, përsëri vizitoni faqen. Mos e humbni kohën tuaj me marrëzi.

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

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

Ju gjithashtu mund të jeni të interesuar të dini:

Ju duhet të shihni shpejt të gjitha ndryshimet në vetë sitin, pa ndikuar në skedarët dhe kodin e faqes së postuar në internet. Për shembull, ndryshoni skemën e ngjyrave të një blloku, zhvendosni një element që është zhvendosur, etj.

Për ta bërë këtë, shumë webmaster përdorin serverë lokalë Denwer ose OpenServer, duke ekzekutuar një kopje të plotë të faqes në kompjuterin e tyre. Kjo metodë është universale dhe e përshtatshme për profesionistët, mund të përdoret për të testuar funksionimin e skripteve dhe shtojcave të ndryshme, për të eksperimentuar me ndryshimin e dizajnit dhe për të redaktuar të gjithë skedarët e faqes, dhe pas testimit, për të transferuar ndryshimet e duhura drejtpërdrejt në sit.

Për përdoruesit që janë larg artit të webmasterit, unë rekomandoj përdorimin e një shfletuesi për këto qëllime. Meqenëse përdor Chrome, do të jap udhëzime me pamje nga ekrani për këtë shfletues të veçantë. Për analogji, ju mund të punoni me Opera, Yandex.Browser, Mozilla Firefox dhe shfletues të tjerë, parimi i mjeteve të tyre është i ngjashëm.

Udhëzimi 1: si të shikoni të gjithë kodin HTML të një siti në një shfletues

Hapni faqen e kërkuar në internet të faqes tuaj. Klikoni me të djathtën në elementin e kërkuar, do të shfaqet një menu rënëse kontekstuale e shfletuesit me komandat e disponueshme:

Figura 1. Shikimi i të gjithë kodit HTML të një faqe interneti në shfletuesin Chrome

E rëndësishme: Komandat në menunë rënëse mund të ndryshojnë, për shembull, për elementët aktivë (lidhje, fotografi, video) dhe ato joaktive (tekst, sfond, divs):

Figura 2. Menyja rënëse e shfletuesit Chrome

Pra, nëse nuk e gjeni komandën që ju nevojitet, thjesht kliko me të djathtën diku tjetër ose përdor çelësat e nxehtë të shfletuesit.

Le të kthehemi te Figura 1, ajo tregon komandën e nevojshme për të parë të gjithë kodin HTML të faqes burimore në internet, quhet " Shiko kodin e faqes". Klikoni në komandë, do të hapet një skedë e re me kodin e plotë të faqes së burimit në internet, një plus i madh për gjithçka - shikimi është i disponueshëm me theksimin e sintaksës:

Figura 3. Fragment kodi i kësaj faqeje

Ky mjet është shumë i dobishëm për gjetjen dhe modifikimin e elementeve që kërkoni.

Mënyra alternative për të parë të gjithë kodin HTML të një faqe interneti

Për akses më të shpejtë, mund të përdorni mënyra të tjera për ta thirrur këtë mjet

Në figurën 1 shohim gjithashtu se kjo komandë është e disponueshme përmes një shkurtoreje tastiere + ;

Ngjit view-source:site në shiritin e adresave të shfletuesit në vend të domenit tim, fut adresën tënde;

Të dyja metodat janë universale dhe duhet të funksionojnë në të gjithë shfletuesit.

Në fillim, disa mund të mendojnë se ky nuk është fare një mjet i nevojshëm, por shikimi i të gjithë kodit HTML të një faqeje është i shkëlqyeshëm për të gjetur elementët e nevojshëm në kod, këto mund të jenë lidhje, etiketa, meta etiketa, atribute dhe elementë të tjerë. .

Kombinimi i çelësave të nxehtë +hapni dritaren e kërkimit, në shfletuesin Chrome shfaqet lart djathtas:

Figura 3. Kërko sipas kodit të faqes

Pasi të vendosni një kërkesë në formularin e kërkimit, ekrani do të kalojë te elementi i parë i gjetur, duke përdorur shigjetat që mund të lëvizni midis tyre dhe të zgjidhni atë që ju nevojitet:

Figura 4. Kërko sipas kodit të faqes HTML

Udhëzimi 2: si të shikoni dhe modifikoni kodin HTML dhe CSS të një siti në shfletuesin Google Chrome

Tani pjesa më e rëndësishme, në të cilën unë do të tregoj se si mund të modifikoni kodin HTML dhe CSS të një faqe interneti në një shfletues. pastaj transferoni ndryshimet në shfletues.

Ky mjet i dobishëm është gjithmonë i disponueshëm në shfletuesin tuaj, eksperimentoni me komanda të tjera që do ta bëjnë më të lehtë për ju të modifikoni faqen tuaj.

Për një kohë të gjatë, opsioni "shfaq burimin e faqes" ishte i padobishëm dhe jo interesant për mua. Deri më tani, mësimi i HTML në Codecademy dhe dizajnimi i faqeve të mia të internetit nuk është rritur në hobi tim të ri. Këtu lindi pyetja: ku të gjeni raste reale dhe të huazoni zgjidhje interesante për "derrkucin" tuaj? Përgjigja ishte papritur e thjeshtë, si të gjitha gjërat gjeniale: shikoni kodin burimor të faqes në Google Chrome! Unë ndaj me ju gjetjet e mia modeste.

Cili është kodi burimor i faqes

Nëse ju, si unë, sapo po hidhni hapat e parë në programimin HTML, do të ishte një ide e mirë të zbuloni se cili është kodi burimor i një faqeje.

Kodi burimor, i njohur gjithashtu si kodi i faqes HTML, është tekst në gjuhën e shënjimit të tekstit hiper (HTML). Ai përfshin përmbajtjen aktuale të faqes (tekst, tabela) dhe etiketat. Këto të fundit veprojnë si udhëzime për shfletuesin: si të shfaqni përmbajtjen, çfarë lloji formatimi të përdorni, ku të futni një hiperlink ose skedar media. Epo, për ne, programuesit fillestarë, kodi burimor është terreni më i mirë i trajnimit: ne gjejmë një faqe interesante dhe e spiunojmë atë, e ruajmë atë dhe përdorim fragmente të suksesshme. Si?

Si të shikoni kodin burimor në faqen e shfletuesit Google Chrome

Gjeni faqen që ju pëlqen. Për shembull, unë isha i interesuar për hartimin e menusë së faqes. Ekzistojnë tre mënyra për të hapur kodin burimor në shfletuesin Google Chrome:

Klikoni në ikonën menu në këndin e sipërm të djathtë të shfletuesit dhe zgjidhni "Mjete të tjera". Ndër të tjera, ekziston një opsion "Shiko kodin burimor". Sinqerisht, unë rrallë e përdor këtë metodë: ka shumë lëvizje të panevojshme. Mund të bëhet edhe më e thjeshtë.
Shtypni kombinimin e tastit Ctrl+U– hapet një dritare e re me kodin burimor;
Për fansat e menusë së kontekstit: kliko me të djathtën në faqe dhe zgjidhni opsionin "Shiko kodin e faqes".

Ne u përballëm me detyrën e shikimit të kodit HTML të faqes në shfletues. Le të kalojmë në fazën më interesante.

Si të redaktoni dhe ruani kodin burimor

Për të mësuar se si të krijoni faqe interneti, nuk mjafton të lexoni kodin HTML të dikujt tjetër. Ju duhet të luani me të, të eksperimentoni, të bëni ndryshime dhe të kontrolloni rezultatin. Ju madje mund të filloni duke përpiluar disa mostra të suksesshme. Si të modifikoni dhe ruani kodin burimor?

Opsioni 1. "Manualisht"

Pasi të kemi hapur kodin burimor të faqes, thirrni menunë e kontekstit dhe zgjidhni opsionin "Ruaj si" dhe ruajeni skedarin në hard diskun tuaj. Ne redaktojmë skedarin në Notepad ose Notepad, ruajmë ndryshimet dhe e hapim atë përmes shfletuesit. Rezultatet e ndryshimeve tona (të suksesshme dhe jo aq të suksesshme) do të pasqyrohen në dritaren e shfletuesit.

Opsioni 2. Për profesionistët

Kur "luan" me kodin burim çdo ditë, procesi i "ruaj - hap - ndrysho - ruaj - kontrollo" bëhet i lodhshëm. Për veten time, gjeta një zgjidhje në formën e instalimit të një shtojce për Google Chrome - Firebug Lite. Kjo ju lejon të redaktoni dhe ruani kodin burimor pa u larguar nga dritarja e shfletuesit.

Të njohura në kategorinë: