Si të llogarisni kodin burimor të një faqeje. Si të hapni shpejt kodin e faqes në shfletues, edhe nëse kopjimi është i ndaluar

05.09.2019 Windows 8

Për një kohë të gjatë, opsioni "shfaq kodin burimor të faqes" ishte i padobishëm dhe jo interesant për mua. Deri më tani, mësimi i HTML në Codecademy dhe ndërtimi i faqeve të mia 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 çuditërisht e thjeshtë, si të gjithë gjenitë: shikoni kodin burimor të faqes në Google Chrome! Unë ndaj me ju gjetjet e mia modeste.

Çfarë është kodi burim i faqes

Nëse ju, si unë, sapo po hidhni hapat e parë në programimin HTML, nuk do të jetë e tepërt të dini se cili është kodi burimor i një faqeje.

Kodi burimor, i njohur gjithashtu si kodi HTML i faqes, ë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 luajnë rolin e udhëzimeve për shfletuesin: si të shfaqni përmbajtjen, çfarë lloj 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: gjejmë një faqe interesante dhe shikojmë, ruajmë, 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 në 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 për "Shiko kodin burimor". Sinqerisht, unë rrallë e përdor këtë metodë: shumë lëvizje të panevojshme. Mund të bëhet edhe më e lehtë.
Shtypni kombinimin e tastit Ctrl+U- hap një dritare të re me kodin burimor;
Për fansat e menusë së kontekstit: kliko me të djathtën në faqe dhe zgjidh opsionin "Shiko kodin e faqes".

Ne u përballëm me detyrën e shikimit të kodit HTML të faqes në shfletues. 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, thërrasim menunë e kontekstit dhe zgjedhim opsionin "Ruaj si" dhe ruajmë skedarin në hard disk. Ne redaktojmë skedarin në Notepad ose Notepad, ruajmë ndryshimet dhe hapim përmes shfletuesit. Rezultatet e ndryshimeve tona (të suksesshme dhe jo aq të mira) 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" është 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 burim pa lënë dritaren e shfletuesit tuaj.

Shtë e nevojshme 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 të lëvizur, 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, me të mund të kontrolloni funksionimin e skripteve dhe shtojcave të ndryshme, të eksperimentoni me ndryshimin e dizajnit dhe të modifikoni të gjithë skedarët e faqes, dhe pas testit, të transferoni 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ë faqes në shfletues

Hapni faqen e kërkuar në internet të faqes tuaj. Ne klikojmë me të djathtën në elementin e kërkuar, do të shfaqet një menu rënëse e kontekstit të 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ë menynë rënëse mund të ndryshojnë, për shembull, për elementët aktivë (lidhje, imazhe, video) dhe elementë joaktivë (tekst, sfond, divs):

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

Prandaj, nëse nuk e gjeni komandën e kërkuar, thjesht klikoni me të djathtën diku tjetër ose përdorni çelësat e nxehtë të shfletuesit.

Duke u kthyer në figurën 1, ai tregon komandën e nevojshme për të parë të gjithë kodin HTML të faqes origjinale të internetit, që quhet " Shiko kodin e faqes". Ne klikojmë në komandën, do të hapet një skedë e re me kodin e plotë të faqes origjinale të internetit, një plus i madh për gjithçka - pamja është e disponueshme me theksimin e sintaksës:

Figura 3. Copë kodi për këtë sajt

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ë HTML-në e një faqe në internet

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, ne gjithashtu shohim se kjo komandë është e disponueshme përmes një shkurtoreje të tastierës. + ;

Ngjitni në shiritin e adresave të burimit të pamjes së shfletuesit: siti në vend të domenit tim, ngjisni adresën tuaj;

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

Në fillim mund të duket për disa 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 elemente të tjera.

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

Figura 3. Kërko sipas kodit të faqes

Pasi të bëni 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 HTML të faqes në internet

Udhëzimi 2: Si të shikoni dhe modifikoni kodin HTML dhe CSS të faqes në internet 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ë faqes në shfletues. pastaj transferoni ndryshimet në shfletues.

Këtu është një mjet kaq i dobishëm gjithmonë i disponueshëm në shfletuesin tuaj, eksperimentoni me komanda të tjera që do t'ju bëjnë më të lehtë modifikimin e faqes.

Nëse hapni ndonjë faqe interneti, ajo do të përmbajë elementë tipikë që nuk ndryshojnë në varësi të llojit dhe drejtimit të faqes. Shembulli 4-1 tregon kodin për një dokument të thjeshtë që përmban etiketa bazë.

Shembulli 4.1. Kodi burimor i faqes së internetit

Shembull i faqes në internet

kokë

Paragrafi i parë.

Paragrafi i dytë.

Kopjoni përmbajtjen e këtij shembulli dhe ruajeni në dosjen c:\www\ si shembull41.html. Pas kësaj, hapni shfletuesin dhe hapni skedarin përmes artikullit të menusë Skedari > Hap skedarin (Ctrl+O). Në dialogun e përzgjedhjes së dokumentit, specifikoni skedarin shembull41.html. Faqja e internetit e paraqitur në Fig. 4.1.

Oriz. 4.1. Rezultati i ekzekutimit të shembullit

Elementika për qëllim të tregojë llojin e dokumentit aktual - DTD (përkufizimi i llojit të dokumentit, përshkrimi i llojit të dokumentit). Kjo është e nevojshme në mënyrë që shfletuesi të kuptojë se si të interpretojë faqen aktuale të internetit, sepse HTML ekziston në disa versione, përveç kësaj, ekziston XHTML (Extensible HyperText Markup Language, gjuha e zgjeruar e shënjimit të hipertekstit), e ngjashme me HTML, por e ndryshme në sintaksë. Në mënyrë që shfletuesi "të mos ngatërrohet" dhe të kuptojë se sipas cilit standard duhet të shfaqet një faqe në internet, është e nevojshme të vendosni në rreshtin e parë të kodit .

Ka disa lloje, ato ndryshojnë në varësi të versionit të HTML që synojnë. Në tabelë. 4.1. jepen llojet kryesore të dokumenteve me përshkrimin e tyre.

Tab. 4.1. DTD të vlefshme

DOCTYPE	Përshkrim
HTML 4.01
	Sintaksë e rreptë HTML.
	Sintaksa kalimtare HTML.
	Kornizat përdoren në një dokument HTML.
HTML 5
	Ky version i HTML ka vetëm një tip doctype.
XHTML 1.0
	Sintaksë e rreptë XHTML.
	Sintaksa kalimtare XHTML.
	Dokumenti është i shkruar në XHTML dhe përmban korniza.
XHTML 1.1
	Zhvilluesit e XHTML 1.1 presin që ai gradualisht të zëvendësojë HTML. Siç mund ta shihni, ky përkufizim nuk ka ndarje në lloje, pasi sintaksa është e njëjtë dhe i bindet rregullave të qarta.

Dallimi midis përshkrimeve të rrepta dhe atyre kalimtare të dokumenteve është qasja e ndryshme për të shkruar kodin e dokumentit. HTML strikte kërkon respektim të rreptë të specifikimeve HTML dhe nuk fal gabime. HTML kalimtare është më "i qetë" për disa gabime të kodit, kështu që ky lloj preferohet në raste të caktuara.

Për shembull, HTML dhe XHTML strikte kërkojnë etiketën , por në HTML kalimtare mund të hiqet dhe të mos specifikohet. Në të njëjtën kohë, mbani mend se shfletuesi do të shfaqë dokumentin në çdo rast, pavarësisht nëse përputhet me sintaksën apo jo. Një verifikim i tillë kryhet duke përdorur një vërtetues dhe ka për qëllim kryesisht zhvilluesit të gjurmojnë gabimet në një dokument.</p> <p>Në vijim do të përdorim kryesisht striktin<!DOCTYPE>, përveç rasteve kur thuhet në mënyrë specifike. Kjo do të na lejojë të shmangim gabimet e zakonshme dhe të na mësojë të shkruajmë kodin e saktë sintaksor.</p> <p>Shpesh është e mundur të hasësh kodin HTML pa përdorur asnjë<!DOCTYPE>, faqja e internetit do të shfaqet përsëri në një rast të tillë. Megjithatë, mund të ndodhë që i njëjti dokument të shfaqet ndryshe në shfletues kur përdoret<!DOCTYPE>dhe pa të. Për më tepër, shfletuesit mund të shfaqin dokumente të tilla në mënyrën e tyre, si rezultat, faqja do të "shkërmoqet", d.m.th. do të shfaqet në një mënyrë krejtësisht të ndryshme, siç kërkohet nga zhvilluesi. Për të shmangur situata të tilla, gjithmonë shtoni<!DOCTYPE>deri në fillim të dokumentit.</p><p>Etiketë <html>përcakton fillimin e skedarit HTML, titulli ruhet brenda tij ( <head>) dhe trupi i dokumentit ( <body> ).</p><p>Titulli i dokumentit, siç quhet edhe blloku <head>, mund të përmbajë tekst dhe etiketa, por përmbajtja e këtij seksioni nuk shfaqet drejtpërdrejt në faqe, përveç kontejnerit <title> .</p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </p><p>Etiketë <meta>është universale dhe shton një klasë të tërë karakteristikash, në veçanti, me ndihmën e meta etiketave, siç quhet përgjithësisht ky etiketë, mund të ndryshoni kodimin e faqes, të shtoni fjalë kyçe, përshkrimin e dokumentit dhe shumë më tepër. Në mënyrë që shfletuesi të kuptojë se ka të bëjë me kodimin UTF-8 (Formati i transformimit Unicode, formati i transformimit Unicode) dhe kjo linjë shtohet.</p><p> <title>Shembull i faqes në internet

Etiketë përcakton titullin e një faqe interneti, ky është një nga elementët e rëndësishëm të krijuar për të zgjidhur shumë probleme. Në sistemin operativ Windows, teksti i titullit shfaqet në këndin e sipërm të majtë të dritares së shfletuesit (Fig. 4.2).</p> <p><img src='https://i2.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy loading=lazy></p> <p>Oriz. 4.2. Pamja e kokës në shfletues</p> <p>Etiketë <title>është i detyrueshëm dhe duhet të jetë i pranishëm në kodin e dokumentit.</p><p>Sigurohuni që të shtoni një etiketë mbyllëse</head> për të treguar që blloku i titullit të dokumentit është i plotë.</p><p>Trupi i dokumentit <body>është menduar për vendosjen e etiketave dhe përmbajtjes së ueb faqes.</p><p> <h1>kokë</h1> </p><p>HTML ofron gjashtë nivele të ndryshme të titujve të tekstit që tregojnë rëndësinë relative të seksionit pas titullit. po, tag <h1>përfaqëson titullin më të rëndësishëm të nivelit të parë dhe etiketën <h6>shërben për të përcaktuar një titull të nivelit të gjashtë dhe është më pak i rëndësishëm. Si parazgjedhje, titulli i nivelit të parë shfaqet me fontin më të madh të trashë, titujt e nivelit tjetër janë më të vegjël. etiketa <h1>...<h6>janë elementë të nivelit të bllokut, ato gjithmonë fillojnë në një linjë të re dhe pas tyre, elementë të tjerë shfaqen në rreshtin tjetër. Përveç kësaj, një hapësirë boshe shtohet para dhe pas titullit.</p><p>  </p><p>Disa tekste mund të fshihen nga shfaqja në shfletues duke e bërë atë një koment. Megjithëse përdoruesi nuk do ta shohë një tekst të tillë, ai përsëri do të transmetohet në dokument, kështu që duke parë kodin burimor, mund të gjeni shënime të fshehura.</p> <p>Pra, sot do të shikojmë disa mjete të dobishme për magjistarin e uebit që e bëjnë jetën më të lehtë kur shtroni një faqe. Le të fillojmë me tastierën e webmasterit në Google Chrome. Dhe le të kalojmë mbi pyetjet që lindin më shpesh nga webmaster gjatë paraqitjes së faqes.</p> <p>Për të mbërritur 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ë element specifik për të eksploruar duke zgjedhur "Shiko kodin" . element".</p> <p>Në krye do të keni të listuara disa skeda. Sot do të flasim për skedën "Elementet". <b>, </b> i cili paraqet elementet e një faqeje interneti me theksimin e etiketave, vetive, folesë së elementeve, paraqitjen e hierarkisë së elementit në pemën DOM (shitje në fund, nga prindi rrënjë deri tek ai aktual që po ekzaminohet), aftësia për të redaktuar elementet, një listë e vetive të tyre, merrni parasysh kërkimin sipas elementeve, dhe gjithashtu Le të njihemi me shikimin e stileve css që lidhen me elementët, etj.</p> <h3>Si të shikoni të gjitha stilet që lidhen me një element të veçantë? Cili është në përdorim tani? Në cilat skedarë ndodhen?</h3> <p>Pra, nuk ka asgjë më të lehtë! Ne hapim shfletuesin Google Chrome, hapim faqen tonë - burimin e pyetjeve, klikojmë me të djathtën mbi elementin e dëshiruar nëse është i dukshëm në kontekstin e faqes dhe zgjedhim artikullin "Shiko kodin e elementit" në menunë e kontekstit.</p> <p>Në fund, ne kemi një tastierë me një skedë të theksuar në të majtë " Elemente"Dhe të gjitha stilet që lidhen me elementin në të djathtë, ku: <b>Stilet e llogaritura</b>- këto janë stile të përgjithshme "përmbledhëse" që i janë caktuar elementit nga rregullat css dhe cilësimet e shfletuesit të përdoruesit (mjedisi i tij), dhe në të njëjtën kohë skeda është shembur.</p> <p>Por ne jemi të interesuar për skedën "Stilet" e vendosur poshtë saj, e cila rendit me radhë të gjitha stilet e caktuara për elementin, si dhe skedarët ku këto rregulla janë specifikuar për këtë element sipas llojit, id, klasës, emrit, vetisë, atribut etj. Në të njëjtën kohë, nëse rregulli css është tejkaluar, atëherë ai është ripërcaktuar më herët/tjetër (gjë që e bën të lehtë gjurmimin se cili prej rregullave css është prioritet dhe zbatohet për elementin në këtë rast).</p> <p>Poshtë konsolës është një rresht që tregon elementin 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.</p> <h3>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?</h3> <p>Hapni faqen në Google Chrome, klikoni me të djathtën, telefononi menunë e kontekstit, zgjidhni <b>« </b> Shiko kodin e faqes <b>» </b>. Shtypni kombinimin e tastit "CTRL + F" në të njëjtën kohë, shkruani frazën që na nevojitet ( <b>për shembull</b><i>: </i><i>klas="</i><i>mbushje"</i>) dhe lëvizni nëpër listën e rezultateve të gjetura, duke parë njëkohësisht të gjitha stilet që lidhen me elementët e dëshiruar në anën e djathtë të faqes.</p> <h3>Si të shikoni kodin html të elementit (elementeve) të ngarkuar në mënyrë dinamike (për shembull: nga Ajax)</h3> <p>Në pritje të ngarkimit të faqes në Google Chrome. Ne kryejmë veprimet e nevojshme që Ajax të funksionojë. Ne klikojmë me të djathtën mbi të dhënat e shkarkuara, zgjedhim "Shiko kodin e elementit" në menunë e kontekstit, ekzaminojmë rezultatin në tastierën në skedën "Elemente" në të majtë.</p> <h3>Shikoni ndryshimet e stilit css në kohë reale</h3> <p>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 nëpër galeri dhe ngjarje të tjera të kohëmatësit. Të gjitha stilet e caktuara nëpërmjet javascript në kohë reale do të shfaqen në pronë <b>stil</b> elementi i zgjedhur në dritaren në skedën Elemente.</p> <h3>Pamje interaktive e ndikimit të rregullave css në prezantimin e etiketave html</h3> <p>Google Chrome ofron një tastierë interaktive për stilet css. Dhe kjo do të thotë që ju jo vetëm që mund të shihni se cilat stile janë aplikuar në element, por gjithashtu mund të lëvizni kursorin e miut mbi një pronë të caktuar css, ta aktivizoni atë me një shenjë kontrolli që shfaqet në të djathtë ose ta çaktivizoni atë duke hequr zgjedhjen e flamurit dhe duke e parë rezultati që rezulton në faqe.</p> <h3>Ne ndryshojmë strukturën e paraqitjes së elementeve html në fluturim (djathtas në shfletues)</h3> <p>Pra, ne kemi mësuar tashmë se si të eksplorojmë strukturën e një dokumenti në internet në Google Chrome, tani le të hedhim një vështrim të shpejtë në modifikimin e elementeve në fluturim. Ne shkojmë në tastierë në çdo mënyrë të përshtatshme për ne. Ne gjejmë elementin e dëshiruar në skedën "Elementet", kliko me të djathtën mbi të, duke thirrur menynë e kontekstit që shfaqet:</p> <ul><li><b>Shto atribut</b>- Shton një atribut në elementin e specifikuar. Sapo kursori të aktivizohet, fillojmë të vendosim vetinë e dëshiruar. <b>Për shembull</b>: Le të shkruajmë name="itemImage", i cili do t'i shtohet menjëherë elementit tonë.</li> <li><b>Redakto atributin</b>– nëse klikoni me të djathtën mbi një atribut të një elementi, artikulli bëhet i disponueshëm <b>redaktoni</b><b>atributet</b>. Kliko, modifiko.</li> </ul><p><b>Shembull përdorimi:</b> ne kemi harruar 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 në elementin me fjalëkalim, klikoni në "Shiko kodin e elementit" <b>, </b> në tastierën në anën e majtë të skedës <b>Elementet</b> kliko me të djathtën në atributin type="password", kliko me të majtën <b>Redakto</b><b>atributet,</b> ndryshoni atributin <i>tip="</i><i>fjalëkalim"</i> në <i>tip="</i><i>tekst"</i>, dhe këtu kemi tashmë të njëjtin fjalëkalim në formën e tekstit në vend të yjeve.</p> <ul><li><b>Redakto</b><b>html</b>- kliko me të djathtën mbi një element në tastierë <b>Elementet</b>, zgjidhni <b>Redakto</b><b>html,</b> ndryshoni kodin sipas dëshirës tuaj.</li> <li><b>Kopjo</b><b>si</b><b>HTML</b>- kopjoni pjesën e HTML që na nevojitet për kërkime të mëtejshme, le të themi, në një fletore, ose për qëllime të tjera ku duhet të aplikojmë saktësisht të njëjtën paraqitje. Ne kursejmë kohë.</li> <li><b>Kopjo</b><b>XPATH</b>– kopjon paraqitjen XPATH të strukturës nga rrënja e elementit prind në elementin e zgjedhur.</li> <li><b>Fshije</b><b>nyje</b>– 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.</li> <li><b>fjalë</b><b>mbështjell</b>- do të japë pamjen e faqes së internetit në kontekstin e tastierës <b>Elementet</b> më të lexueshme.</li> </ul><p>Në artikujt e mëposhtëm do të vazhdojmë të shikojmë veglat e webmasterit dhe në veçanti do të njihemi me pjesën tjetër të skedave të veglave të uebmasterit në <b>Google Chrome</b>, dhe gjithashtu merrni parasysh korrigjimin e gabimeve të javascript duke përdorur shfletues të ndryshëm</p> <p>Zhvilluesit e shfletuesve janë kujdesur për komoditetin e atyre që krijojnë faqe që hapen në të njëjtët shfletues, përkatësisht, webmasterët. Ata shtuan vegla zhvilluesish në veçoritë standarde, me të cilat mund të hapni lehtësisht dhe <b>shikoni kodin burimor të faqes së faqes në shfletues</b>: HTML, CSS, JavaScript (JS), merrni të dhëna të ndryshme të dobishme në lidhje me strukturën e faqes, kryeni analizën teknike të saj. Në përgjithësi, për të parë shumë gjëra të dobishme.</p> <p>Sigurisht, këto mjete përdoren jo vetëm nga krijuesit e faqeve për punë, por edhe nga përdoruesit e zakonshëm, të cilëve kodi burim ju lejon të shihni të dhëna të ndryshme të dobishme.</p> <p>Nga ky artikull do të mësoni se si të shikoni kodin burimor të faqes së faqes në shfletues (si të hapni kodin HTML, CSS, JavaScript të faqes).</p> <i> </i> <h2>Si të hapni kodin burimor të faqes në shfletues</h2> <p>Ekzistojnë dy mënyra për të hapur kodin burimor të një faqeje interneti në një shfletues:</p> <ol><li>Përdorimi i çelësave të nxehtë;</li> <li>Hapni nga menyja e kontekstit.</li> </ol><p><b>Ctrl+U</b>- një kombinim i çelësave të nxehtë për të parë kodin burimor të të gjithë faqes së faqes në një dritare të re të veçantë. Standard për të gjithë shfletuesit: Google Chrome, Opera, Mozilla Firefox, shfletues Yandex, IE.</p> <p>Mund të futni gjithashtu mjetet e zhvilluesit si më poshtë:</p> <p>Për të gjetur shpejt kodin, fjalën ose tekstin e dëshiruar në faqe, mund të përdorni kombinimin standard të tasteve të kërkimit për të gjithë shfletuesit: Ctrl + G.</p> <p>Video udhëzime:</p> <p><span class="dmruvuTBwxg"></span></p> <h2>Shiko kodin e elementit | eksploroni elementin | inspektoni elementin</h2> <p>Nëse befas duhet të shikoni jo të gjithë kodin burimor, por të shfaqni vetëm një pjesë të veçantë të tij, një pjesë në faqe, atëherë mjeti i mëparshëm nuk do të funksionojë. Për ta bërë këtë, ekziston një funksion tjetër në mjetet e zhvilluesit, i cili do të diskutohet më poshtë.</p> <p><b>Si të shikoni kodin e një elementi në një faqe:</b></p> <br><img src='https://i0.wp.com/urfix.ru/wp-content/uploads/2018/11/Proinspektirovat-otdelnyy-element.png' width="100%" loading=lazy loading=lazy><p>Përveç kësaj, mund të përdorni shkurtoret e tastierës për të hyrë shpejt në inspektimin e elementeve.</p> <p>Çelësat e nxehtë (butonat):</p> <p>Google Chrome: Ctrl+Shift+I dhe Ctrl+Shift+C</p> <p>Opera: Ctrl+Shift+I dhe Ctrl+Shift+C</p> <p>Mozilla Firefox: Ctrl+Shift+I dhe Ctrl+Shift+C</p> <p>Shfletuesi Yandex: Ctrl+Shift+I dhe Ctrl+Shift+C</p> <p>Pas veprimeve të kryera, kodi burimor i faqes në internet do të hapet në të njëjtën dritare të shfletuesit:</p> <br><img src='https://i0.wp.com/urfix.ru/wp-content/uploads/2018/11/Posmotret-HTML-CSS-kod-sayta.png' width="100%" loading=lazy loading=lazy><p>I gjithë kodi HTML do të jetë në kolonën e majtë të madhe. Dhe stilet CSS janë në të djathtë.</p> <br><img src='https://i2.wp.com/urfix.ru/wp-content/uploads/2018/11/Posmotret-css-stili-v-brauzere.png' width="100%" loading=lazy loading=lazy><p>Avantazhi i kësaj metode, natyrisht, është se përdoruesi ka mundësinë të ndryshojë kodin burimor, të modifikojë stilet. Kjo do të thotë, ju mund të modifikoni stilet në faqe dhe të shihni se si do të duket me stile të caktuara, pa pasur nevojë të bëni menjëherë ndryshime në skedarët që janë në serverët pritës. Për të ndryshuar ose shtuar një kod programi, duhet të klikoni dy herë në fragmentin ose seksionin e dëshiruar. Sigurisht, korrigjimi i kodit në shfletues nuk do të bëhet në serverët pritës. Prandaj, në të ardhmen, në çdo rast, do t'ju duhet të kopjoni këtë kod dhe ta shkruani atë në skedarë.</p> <p>Ky udhëzues video detajon dhe tregon se si të punoni me mjetet e zhvilluesve:</p> <p><span class="DQMK8CuXkOg"></span></p> <p>Pra, vetëm në internet, pikërisht në shfletues, mund të shikoni kodin burimor të faqes së faqes, të merrni informacione bazë për kodin HTML dhe CSS, t'i ndryshoni dhe kopjoni ato, pa pasur nevojë të shkarkoni skedarët e kësaj faqeje në kompjuterin tuaj.</p> <p>Nga rruga, përdoruesit e papërvojë të internetit që kanë ndryshuar kodin e faqes dhe presin që ai të ruhet do të zhgënjehen. Në fund të fundit, pas rifreskimit të faqes, të gjitha ndryshimet në të do të humbasin. Kjo nuk mjafton për të hakuar faqen 🙂</p> <h2>Si të shikoni kodin burimor në një telefon Android</h2> <p>Do të doja gjithashtu të vërej se mjetet e zhvilluesit janë të disponueshme jo vetëm në versionin desktop të shfletuesve, domethënë në kompjuterë dhe laptopë. Në telefonat dhe tabletët (Android, IOS) mund të shikoni gjithashtu kodin burimor.</p> <p>Për ta bërë këtë, shtoni prefiksin e burimit të pamjes në URL-në e faqes së inspektuar:</p> <p>Për shembull:</p> <p>view-burimi:https://website/turbo-mode-opera/</p> <p><span class="N9JyJMmIZr8"></span></p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="post-social-counters-block"> <div style="margin-top: 12px"> <noindex></noindex> </div> </div> </div> </div> <a name="comments"></a> <h3 class="best-theme-posts-title">Artikujt kryesorë të lidhur</h3> <div class="container-fluid"> <div class="best-theme-posts row"> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/sq/reshit-keis-po-menedzhmentu-primer-s-resheniem-istoriya-i.html"> <div class="img_container"><img src="/uploads/03c19e5e6a2f708d560f6ca61a35142b.jpg" border="0" alt="Historia dhe përshkrimi i konceptit të një rasti në biznes, udhëzime për shkrim dhe zgjidhje" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Historia dhe përshkrimi i konceptit të një rasti në biznes, udhëzime për shkrim dhe zgjidhje</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/sq/kak-ubrat-programmy-iz-avtozagruzki-avtozapuska-uskoryaem-zagruzku.html"> <div class="img_container"><img src="/uploads/efd0a1dbf4ce02dd89d490c8ee01bc36.jpg" border="0" alt="Përshpejtoni nisjen e kompjuterit" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Përshpejtoni nisjen e kompjuterit</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/sq/vosstanovlenie-sistemy-windows-vosstanovlenie-sistemy-windows-zapusk.html"> <div class="img_container"><img src="/uploads/2c4255ec6badd7f2428aa81d67c3724c.jpg" border="0" alt="Rivendosja e sistemit të Windows Filloni rikuperimin kur mund të identifikoheni" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Rivendosja e sistemit të Windows Filloni rikuperimin kur mund të identifikoheni</span> </a> </div> </div> </div> </div> <a name="comments"></a> </div> <div class="right-column col-sm-4 col-md-4"> <div class="write"> <span class="tags-title">Kategoritë:</span> <ul style="height: 286px;" id="right-tags" data-tagscount="18" data-currentmaxtag="10" class="tags"> <li class=""><a href="https://bumotors.ru/sq/category/programs/">Programet</a></li> <li class=""><a href="https://bumotors.ru/sq/category/safety/">Siguria</a></li> <li class=""><a href="https://bumotors.ru/sq/category/windows-10/">Windows 10</a></li> <li class=""><a href="https://bumotors.ru/sq/category/iron/">Hekuri</a></li> <li class=""><a href="https://bumotors.ru/sq/category/windows-8/">Windows 8</a></li> <li class=""><a href="https://bumotors.ru/sq/category/vkontakte/">Në kontakt me</a></li> <li class=""><a href="https://bumotors.ru/sq/category/errors/">Gabimet</a></li> </ul> </div> <div class="banner"> </div> </div> </div> </div> <div style="clear:both"></div> </div> <div class="footer"> <div class="subscribe"> <div class="main-wrapper container"> <div class="row"> <div class="col-sm-8"> </div> <div class="col-sm-4"> <div class="social"> <a href="" class="vk social-ico"></a> <a href="https://facebook.com/" class="fb social-ico"></a> <a href="https://twitter.com/" class="tw social-ico"></a> </div> </div> </div> </div> </div> <div class="info"> <div class="main-wrapper container"> <div class="row"> <span class="footer-info col-xs-12">© 2022 bumotors.ru. Si të konfiguroni telefonat inteligjentë dhe PC. Portali informativ.</span> </div> </div> </div> </div> </body> </html>