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 që ju nevojitet, thjesht klikoni me të djathtën diku tjetër ose përdorni tastet kryesore të shfletuesit tuaj.
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ë
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
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.
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
Në vijim do të përdorim kryesisht striktin, 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.
Shpesh është e mundur të hasësh kodin HTML pa përdorur asnjë, 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ërdoretdhe 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ë shtonideri në fillim të dokumentit.
Etiketë përcakton fillimin e skedarit HTML, titulli ruhet brenda tij (
) dhe trupi i dokumentit (Titulli i dokumentit, siç quhet edhe blloku
, mund të përmbajë tekst dhe etiketa, por përmbajtja e këtij seksioni nuk shfaqet drejtpërdrejt në faqe, përveç kontejnerit
Etiketë ë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.
Etiketë
Oriz. 4.2. Pamja e kokës në shfletues
Etiketë
Sigurohuni që të shtoni një etiketë mbyllëse për të treguar që blloku i titullit të dokumentit është i plotë.
Trupi i dokumentit
kokë
HTML ofron gjashtë nivele të ndryshme të titujve të tekstit që tregojnë rëndësinë relative të seksionit pas titullit. po, tag
përfaqëson titullin më të rëndësishëm të nivelit të parë dhe etiketën 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 ...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.
...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.
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ë shikimi i kodit burimor mund të zbulojë shënime të fshehura.
Ctrl+U
Si të shikoni kodin burimor të një elementi?
Klikoni butonin e djathtë të miut në elementin e faqes me interes.
Google Chrome: "Shiko kodin e elementit"
Opera: "Inspektoni elementin"
Firefox: "Elementi i analizës"
Në shfletues të tjerë, kërkoni për një artikull të ngjashëm menyje.
Përshëndetje!
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ë hedhim një vështrim në një shembull specifik 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ë kërkuar 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 fjala e kërkimit do të theksohet.
Për analogji, ju mund të kërkoni dhe studioni copa të tjera kodi.
Shikimi i të gjithë kodit burimor të një faqeje në shumicën e rasteve nuk është shumë i përshtatshëm, kështu që në të gjithë shfletuesit është e mundur të shikoni kodin e një elementi ose fragmenti të vetëm.
Le të përdorim një shembull konkret për të parë kodin e elementit. Për shembull, le të shohim nëse lidhja ka një atribut nofollow. Ne klikojmë 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 elementit" 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.
Ne shohim që rel=”nofollow” është i pranishëm në kodin e lidhjes. Kjo do të thotë që kjo lidhje nuk do të "rrjedh" dhe PR. Ne do të flasim për këtë në më shumë detaje në artikujt e ardhshëm. Tani për tani, gjëja e rëndësishme është që ju tani të dini se si të shikoni kodin burimor të faqes dhe kodin burimor të një elementi individual.
". I njëjti artikull është gjithashtu në menynë e kontekstit, e cila, nëse klikoni me të djathtën mbi tekstin faqet. Mund të përdorni gjithashtu shkurtoren e tastierës CTRL + U. Mozilla FireFox nuk përdor programe të jashtme - origjinale Kodi faqet me theksimin e sintaksës do të hapet në një dritare të veçantë të shfletuesit.
Në Internet Explorer, klikoni në menunë File dhe zgjidhni Edit në Notepad. Në vend të emrit Notepad, mund të shkruhet një tjetër, ju keni caktuar në cilësimet e shfletuesit për të parë origjinalin Kodi por. Ne klikim faqet Klikoni me të djathtën në një meny të kontekstit, e cila gjithashtu ka një artikull që ju lejon të hapni burimin Kodi faqet në një program të jashtëm - "Shiko HTML- Kodi por".
Në shfletuesin Opera, hapni menunë, shkoni te seksioni "Faqja" dhe do të keni mundësinë të zgjidhni artikullin "Burimi" në nënseksionin "Mjetet e zhvillimit". Kodi” ose artikulli “Inicial Kodi kornizë". Tastiet kryesore CTRL+U dhe CTRL+SHIFT+U i janë caktuar përkatësisht kësaj përzgjedhjeje. Në menynë e kontekstit të bashkangjitur për të klikuar faqet kliko me të djathtën, ekziston edhe artikulli "Burimi Kodi". Burimi i operës faqet në një program të jashtëm që është caktuar në OS ose në cilësimet e shfletuesit për redaktimin e skedarëve HTML.
Shfletuesi Google Chrome pa asnjë dyshim ka organizimin më të mirë të shfletuesit burimor. Kodi por. Duke klikuar me të djathtën mbi miun, mund të zgjidhni View Kodi por faqet” dhe më pas kodi burimor me theksimin e sintaksës do të hapet në një skedë të veçantë. Ose mund të zgjidhni në të njëjtën menu rreshtin "Shiko Kodi një element" dhe në të njëjtën skedë do të hapen dy korniza shtesë në të cilat mund të inspektoni HTML dhe CSS - Kodi element faqet. Shfletuesi do t'i përgjigjet lëvizjes së kursorit nëpër rreshta Kodi dhe, duke theksuar elementet në faqe që korrespondojnë me këtë seksion të HTML- Kodi por.
Probabiliteti për të parë në fillestar Kodi ueb faqet, i marrë nga shfletuesi si rezultat i një kërkese drejtuar serverit, është në fakt në çdo shfletues Interneti. Qasja në komandën përkatëse është e organizuar përafërsisht në mënyrë identike, por ka dallime domethënëse në atë metodë dhe në çfarë forme do t'ju prezantohet fillestari Kodi .
Udhëzim
1. Në shfletuesin Mozilla FireFox, zgjeroni seksionin "Shiko" nga menyja dhe klikoni në "Initial Kodi faqet". I njëjti artikull është gjithashtu në menynë e kontekstit që shfaqet kur klikoni me të djathtën mbi tekst faqet. Lejohet gjithashtu shkurtesa e tastierës CTRL + U. Mozilla FireFox nuk përdor programe të jashtme - fillestari Kodi faqet me theksimin e sintaksës do të hapet në një dritare të veçantë të shfletuesit.
2. Në Internet Explorer, klikoni në menunë File dhe zgjidhni Edit në Notepad. Në vend të emrit Notepad, mund të shkruhet një program tjetër që e keni caktuar në cilësimet e shfletuesit tuaj për të parë fillestarin Kodi por. Ne klikim faqet me butonin e djathtë të miut, shfaqet një menu e kontekstit, e cila gjithashtu ka një artikull që ju lejon të hapni fillestarin Kodi faqet në një program të jashtëm - "Shiko HTML- Kodi por".
3. Në shfletuesin Opera, hapni menunë, shkoni te seksioni "Faqja" dhe ka të ngjarë të preferoni artikullin "Fillimtar" në nënseksionin "Mjetet e Zhvillimit". Kodi” ose zëri “Inicial Kodi kornizë". Tastiet kryesore CTRL+U dhe CTRL+SHIFT+U i janë caktuar përkatësisht kësaj përzgjedhjeje. Në menynë e kontekstit të bashkangjitur për të klikuar faqet kliko me të djathtën, ka edhe artikullin "Initial Kodi". Opera me burim të hapur faqet në një program të jashtëm që është caktuar në OS ose në cilësimet e shfletuesit për redaktimin e skedarëve HTML.
4. Shfletuesi Google Chrome, pa asnjë dyshim, ka organizimin më të mirë për shfletimin e fillestarit Kodi por. Duke klikuar me të djathtën në një faqe, ju mund të preferoni Pamjen Kodi por faqet” dhe më pas kodi burimor me theksimin e sintaksës do të hapet në një skedë të veçantë. Ose mund të preferoni në të njëjtën menu rreshtin "Shiko Kodi një element" dhe shfletuesi në të njëjtën skedë do të hapë dy korniza shtesë në të cilat mund të inspektoni HTML dhe CSS - Kodiçdo element faqet. Shfletuesi do t'i përgjigjet lëvizjes së kursorit nëpër rreshta Kodi dhe, duke theksuar elementet në faqe që korrespondojnë me këtë seksion të HTML- Kodi por.
5. Në shfletuesin Apple Safari, zgjeroni seksionin "Shiko" dhe zgjidhni rreshtin "Shiko HTML Kodi por". Në menynë që shfaqet kur klikoni me të djathtën mbi hapjen faqet, artikulli përkatës titullohet "Shiko burimin". Ky veprim i janë caktuar tastet kryesore CTRL + ALT + U. Kodi hapet në një dritare të veçantë të shfletuesit.