› › Nuk mund ta shikoj kodin e faqes. Google Chrome - mjete për webmasterët

Nuk mund ta shikoj kodin e faqes. Google Chrome - mjete për webmasterët

Pra, sot do të shikojmë disa mjete të dobishme për mjeshtrat e Uebit që e bëjnë jetën më të lehtë kur dizajnoni një faqe interneti. Le të fillojmë me konsolën për masterin e uebit në Google Chrome. Dhe le të kalojmë nëpër pyetjet që lindin më shpesh për një webmaster gjatë paraqitjes së faqes në internet.

Për të hyrë në tastierë, hapni faqen tuaj të internetit në Google Chrome, kliko me të djathtën kudo në faqen e internetit dhe zgjidh "Shiko kodin e faqes" në menynë rënëse kontekstuale ose në një element specifik për të studiuar duke zgjedhur "Shiko kodin" element".

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 theksimin e etiketave, vetive, nxjerrjen në pah të foleve të elementeve, një paraqitje të hierarkisë së elementit në pemën DOM (një aluzion në fund, nga prindi rrënjë në atë aktual), aftësia për të redaktuar elementët, një listë të vetive të tyre, merrni parasysh kërkimin sipas elementeve, si dhe Le të njihemi me shikimin e stileve css, etj., të lidhura me elementët.

Si mund t'i shikoj të gjitha stilet që lidhen me një element specifik? Cila përdoret tani? Në cilat skedarë ndodhen?

Pra, asgjë nuk mund të jetë më e lehtë! Hapni shfletuesin Google Chrome, hapni faqen tonë të internetit - burimin e pyetjeve, kliko me të djathtën mbi elementin e dëshiruar nëse është i dukshëm në kontekstin e faqes dhe zgjidhni "Shiko kodin e elementit" në menunë e kontekstit.

Në fund kemi një tastierë me një skedë të theksuar në të majtë " Elemente" 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 elementit nga rregullat dhe cilësimet css të shfletuesit të përdoruesit (mjedisi i tij), dhe në të njëjtën kohë skeda është shembur.

Por ne jemi të interesuar për skedën "Stilet", e zgjeruar nën të, e cila rendit nga ana tjetër 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ë së tij. , atribut etj. Për më tepër, nëse një rregull css është tejkaluar, do të thotë se 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 ka 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ërrima 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, kliko me të djathtën, thirrni 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 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.

Si të shikoni kodin html të një elementi(eve) të ngarkuar në mënyrë dinamike (për shembull: nëpërmjet 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" në menynë e kontekstit dhe ekzaminoni rezultatin në tastierën në skedën "Elementet" në të majtë.

Shikoni ndryshimet e stilit 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 nëpër një 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ë stil elementi i zgjedhur në dritaren në skedën "Elementet".

Shikoni në mënyrë interaktive ndikimin e rregullave css në prezantimin e etiketave html

Google Chrome ofron një tastierë interaktive për stilet css. Kjo do të thotë që ju jo vetëm që mund të shikoni se cilat stile aplikohen në element, por gjithashtu mund të lëvizni kursorin e miut mbi një veçori specifike css, ta aktivizoni duke përdorur kutinë e zgjedhjes që shfaqet në të djathtë, ose ta çaktivizoni duke pastruar flamurin dhe të shikoni rezultati që rezulton në faqe.

Ne ndryshojmë strukturën e paraqitjes së elementeve html në fluturim (direkt 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 dëshiruar 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: shkruani name="itemImage", i cili do të shtohet menjëherë në elementin tonë.
  • Redakto atributin– nëse klikoni me të djathtën mbi një atribut elementi, artikulli bëhet i disponueshëm redaktoniatribut. Klikoni dhe modifikoni.

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 në elementin me fjalëkalimin e futur, klikoni në "Shiko kodin e elementit" , në tastierën në skedën e majtë Elementet kliko me të djathtën në atributin type="password", kliko me të majtën Redaktoatribut ndryshoni atributin tip =”fjalëkalim" në tip =”tekst", dhe tani, në vend të yjeve, i njëjti fjalëkalim shfaqet në formë teksti.

  • Redaktohtml– kliko me të djathtën mbi elementin në tastierë Elementet, zgjidhni Redaktohtml, ndryshoni kodin sipas dëshirës tuaj.
  • KopjosiHTML– ne kopjojmë pjesën e 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.
  • Fshijenyja– nëse duhet të hiqni elementin e përzgjedhur aktualisht dhe të gjithë fëmijët e tij nga konteksti i faqes së internetit dhe shikoni rezultatin.
  • fjalëmbështjell– do të japë një pamje të faqes në internet në kontekstin e konsolës Elementet më të lexueshme.

Në artikujt e mëposhtëm do të vazhdojmë të shqyrtojmë mjetet për webmasterët, dhe në veçanti do të njihemi me skedat e mbetura të mjeteve për webmasterët në Google Chrome, dhe gjithashtu merrni parasysh korrigjimin e gabimeve të javascript duke përdorur shfletues të ndryshëm

Duke parë faqet e panumërta në internet, mund të hasni në ato që na pëlqejnë shumë. Menjëherë lindin një sërë pyetjesh. A është krijuar faqja duke përdorur kod të bërë në shtëpi ose ndonjë lloj CMS? Çfarë stilesh CSS ka? Cilat janë meta etiketat e saj? Dhe kështu me radhë.

Ka shumë mjete që mund të përdoren për të nxjerrë informacione në lidhje me kodin e një faqe interneti. Por ne gjithmonë kemi në dorë butonin e djathtë të miut. Kjo është ajo që ne do të përdorim, duke përdorur faqen time si shembull.

Si të shikoni kodin e faqes?

Për të parë kodin burimor të faqes së faqes, duhet të vendosni miun mbi çdo zonë të faqes së internetit (përveç imazheve dhe lidhjeve). 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;
  • shikoni kodin e faqes;
  • shikoni kodin.

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

Shikimi i kodit të faqes: çfarë t'i kushtoni vëmendje?

Pra, kodi i faqes Html është një listë e numëruar 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 të shenjave dhe simboleve të veçanta, duhet të bëni dallimin midis seksioneve të ndryshme të kodit.

Për shembull, rreshtat 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 për cilat fjalë kyçe promovohet kjo faqe, si shkruhet titulli dhe përshkrimi i saj. Gjithashtu këtu mund të gjeni një lidhje, pas së cilës do të 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ë kjo do të jetë gjithashtu e dukshme 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 një shabllon të internetit.

Për shembull:

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

Do të shohim stilet e shkronjave CSS të faqes. Në këtë rast, përdoret fonti. Kjo mund të shihet këtu - font-family: 'Source Sans Pro'.

Kjo faqe është optimizuar duke përdorur shtojcën SEO 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 e përfshira 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. Ai është i rrethuar nga një etiketë e komentuar me tekstin:

/Yandex.Metrika sportel

Le ta përmbledhim

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

  • CMS WordPress;
  • font Google Source 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ë mbani të hapur faqen që po kërkoni 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.

Ne kemi publikuar një libër të ri, Marketingu i përmbajtjes në mediat sociale: Si të futeni në kokën e ndjekësve tuaj dhe t'i bëni ata të dashurohen me markën tuaj.

Abonohu

Kodi burimor i një siti është një koleksion i shënimeve HTML, stileve CSS dhe skripteve JavaScript që shfletuesi merr nga serveri i uebit.

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 një komandant. Imagjinoni që audienca nuk e sheh apo nuk dëgjon shefin. Nga këndvështrimi i tyre, ushtria kryen veprime në mënyrë të pavarur. 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, i cili 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ërgimi në një formular. Nuk ka rëndësi se në cilën gjuhë janë shkruar faqet e internetit ose nëse ato përfshijnë një komponent softuerësh. Rezultati përfundimtar i çdo algoritmi nga ana e serverit është një grup etiketash html dhe teksti.
Kodi burimor i faqes është një grup të dhënash që përfshin:

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

Këto tre seksione përpunohen nga shfletuesi. Për serverin, ky është thjesht teksti që duhet të dërgohet në përgjigje të kërkesës.

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

Gjithçka që shohim, mund të analizojmë dhe aplikojmë për të zgjidhur disa probleme 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 elementeve të caktuara në faqe: numëruesit, kodet e identifikimit në sisteme të ndryshme, skriptet e caktuara, etj.
  • Gjeni parametrat e elementeve: madhësive, ngjyrave, shkronjave.
  • Gjeni shtegun për fotot dhe elementët e tjerë të vendosur në faqe.
  • Eksploroni lidhjet nga faqja.
  • Gjeni probleme me kodin që ndërhyjnë në procesin e optimizimit të faqes në internet: stilet që nuk vendosen në skedarë të veçantë, skriptet, kodi i pavlefshëm.

Këto janë veçoritë themelore, por në fakt, duke qenë në gjendje të lexoni kodin, mund të mësoni shumë më tepër rreth faqes.

Si të shikoni kodin burimor të një siti

Nuk do të jetë e mundur ta bëni këtë plotësisht në formën në të cilën është postuar në server nga shfletuesi. Por ju mund të shihni të gjithë shënimin duke klikuar me të djathtën në faqe. Këtu dhe më poshtë duke përdorur Google Chrome si shembull.

Zgjidhni opsionin "Shiko kodin e faqes" dhe merrni listën e plotë në një skedë të veçantë.

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

Si të gjeni kodin burimor të një faqe interneti

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, fontet, imazhet.

Në skedën "Siguria", mund të kontrolloni certifikatën e faqes.

Skeda "Audite" do t'ju ndihmojë të kontrolloni burimin e postuar në host.

Nëse vendndodhja e panelit në të djathtë është e papërshtatshme, mund të klikoni në 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 – i gjithë dokumenti.
  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ë faqeve.
  6. Artikull – artikull.
  7. Seksion - seksion.
  8. Menu – menu.
  9. Div – bllok.
  10. Hapësirë ​​– varg.
  11. P – paragrafi.
  12. Tabela – tavolinë.

Elementet janë krijuar për të kufizuar logjikisht seksionet në një faqe nëse është e nevojshme, ato janë të dizajnuara duke përdorur stile. Ato përmbajnë tekst që është disi i dukshëm në faqe. Por etiketa Head përmban informacione shërbimi. 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.

Përmbajtja e tyre nuk mund të zbulohet në asnjë mënyrë tjetër.

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

Skedari i specifikuar do të hapet në një skedë të re, të cilën mund ta shikoni ose ruani.

Si të shikoni kodin burimor të një faqeje për të korrigjuar një skript

Në këtë rast, është më e përshtatshme të hapni faqen në makinën lokale. Nëse ju duhet vetëm të korrigjoni shënimin, stilet dhe skriptet, atëherë kjo mund të bëhet direkt nga dosja. Kodi HTML shihet në të njëjtën mënyrë. Por gabimet e kodit JavaScript mund të shihen në skedën "Console". Kjo tregon përshkrimin e gabimit dhe numrin e linjës ku ka ndodhur.

Sintaksa mund të shihet drejtpërdrejt në kod. Për këtë shërben skeda "Burimi".

Si të shikoni kodin e një elementi specifik

Për faqet e mëdha me shumë elementë, është e vështirë të gjesh kodin e nevojshëm në të gjithë shënjimin. Në këtë rast, duhet të përdorni një komandë të veçantë të menusë së kontekstit. Lëvizni miun mbi fragment dhe shtypni RMB. Zgjidhni 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, do të jeni në gjendje të korrigjoni dokumentet tuaja HTML.

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

Probabiliteti për të parë në fillestar kodi ueb faqet, i marrë nga shfletuesi si rezultat i një kërkese drejtuar serverit, është i disponueshëm pothuajse në çdo shfletues të internetit. Qasja në komandën përkatëse është e organizuar përafërsisht në mënyrë identike, por ka dallime të rëndësishme në metodën dhe formën në të cilën fillestari kodi .

Udhëzimet

1. Në shfletuesin Mozilla FireFox, zgjeroni seksionin "Shiko" në meny dhe klikoni "Initial" kodi faqet" I njëjti artikull është gjithashtu në menynë e kontekstit që shfaqet nëse klikoni me të djathtën mbi tekst faqet. Ju gjithashtu mund të përdorni kombinimin e tastit CTRL + U. Mozilla FireFox nuk përdor programe të jashtme - fillestare 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 in Notepad. Në vend të emrit Notepad, mund të shkruhet një program tjetër që keni caktuar në cilësimet e shfletuesit për të parë fillestarin kodi A. Ne klikim faqet me butonin e djathtë të miut, shfaqet një meny 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 A".

3. Në shfletuesin Opera, hapni menunë, shkoni te seksioni "Faqja" dhe do të keni mundësinë të zgjidhni artikullin "Fillimi" 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ë një meny konteksti të lidhur me një klikim faqet kliko me të djathtën, ekziston gjithashtu një artikull "Initial kodi" Opera hap burimin 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 shikimin e fillestarit kodi A. Duke klikuar me të djathtën në faqe, mund të zgjidhni ta shikoni kodi A faqet"dhe më pas kodi burimor me theksimin e sintaksës do të hapet në një skedë të veçantë. Ose mund të preferoni linjën "Shiko" në të njëjtën meny kodi 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 kursorit që lëviz nëpër rreshta kodi dhe, duke theksuar elementet në faqe që korrespondojnë me këtë seksion të HTML kodi A.

5. Në shfletuesin Apple Safari, zgjeroni seksionin View dhe zgjidhni View HTML kodi A". Në menynë që shfaqet kur klikoni me të djathtën për të hapur faqet, artikulli përkatës quhet "Shiko burimin". Këtij veprimi i caktohen tastet kryesore CTRL + ALT + U. Initial kodi hapet në një dritare të veçantë të shfletuesit.

Nëse hapni ndonjë faqe interneti, ajo do të përmbajë elementë tipikë që nuk ndryshojnë në varësi të llojit dhe fokusit 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 ueb faqe

Drejtimi

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, zgjidhni skedarin shembull41.html. Faqja e internetit e paraqitur në Fig. 1 do të hapet në shfletues. 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), e cila është e ngjashme me HTML, por ndryshon prej saj në sintaksë. Në mënyrë që shfletuesi "të mos ngatërrohet" dhe të kuptojë se sipas cilit standard duhet të shfaqet uebfaqja, ë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. Janë dhënë llojet kryesore të dokumenteve me përshkrimet e tyre.

Tabela 4.1. DTD të vlefshme
DOCTYPE Përshkrim
HTML 4.01
Sintaksë e rreptë HTML.
Sintaksa kalimtare HTML.
Një dokument HTML përdor korniza.
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 një përshkrimi të rreptë dhe atij kalimtar të dokumentit është një qasje e ndryshme për të shkruar kodin e dokumentit. HTML strikte kërkon respektim të rreptë të specifikimeve HTML dhe nuk fal gabime. HTML-ja kalimtare është më e relaksuar për disa gabime të kodit, kështu që ky lloj preferohet të përdoret në raste të caktuara.

Për shembull, në HTML dhe XHTML strikte kërkohet prania e etiketës , dhe në HTML kalimtare mund të hiqet dhe të mos specifikohet. Në të njëjtën kohë, kujtojmë se shfletuesi do ta shfaqë dokumentin në çdo rast, pavarësisht nëse përputhet me sintaksën apo jo. Ky kontroll kryhet duke përdorur një vleftësues dhe ka për qëllim kryesisht zhvilluesit të gjurmojnë gabimet në dokument.</p> <p>Në të ardhmen do të përdorim kryesisht strikte<!DOCTYPE>, përveç nëse specifikohet ndryshe. Kjo do të na lejojë të shmangim gabimet e zakonshme dhe të na mësojë të shkruajmë kodin e saktë sintaksor.</p> <p>Shpesh mund të gjeni kodin HTML pa përdorur asnjë<!DOCTYPE>, faqja e internetit do të shfaqet ende në këtë rast. Megjithatë, mund të ndodhë që i njëjti dokument të shfaqet ndryshe në shfletues kur përdorni<!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 "shkërmon", d.m.th. do të shfaqet krejtësisht ndryshe nga ajo që kërkon 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, i quajtur gjithashtu bllok <head>, mund të përmbajë tekst dhe etiketa, por përmbajtja e këtij seksioni nuk shfaqet drejtpërdrejt në faqe, përveç në kontejner <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ë aftësish, 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 ueb faqe

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 (Figura 4.2).</p> <p><img src='https://i0.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 patjetër të jetë i pranishëm në kodin e dokumentit.</p><p>Duhet 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>të destinuara për vendosjen e etiketave dhe përmbajtjes së një faqe interneti.</p><p> <h1>Drejtimi</h1> </p><p>HTML ofron gjashtë tituj tekstesh të niveleve të ndryshme që tregojnë rëndësinë relative të seksionit pas titullit. Po, etiketo <h1>përfaqëson titullin më të rëndësishëm të nivelit të parë dhe etiketën <h6>shërben për të treguar titullin e 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ë shkronjave dhe titujt pasues të nivelit janë më të vegjël në madhësi. Etiketat <h1>...<h6>Referojuni elementeve të bllokut, ata gjithmonë fillojnë në një rresht të ri dhe pas tyre, elementë të tjerë shfaqen në rreshtin tjetër. Për më tepër, hapësira e bardhë shtohet para dhe pas titullit.</p><p> <!-- Комментарий --> </p><p>Disa tekste mund të fshihen për t'u shfaqur në shfletues duke e bërë atë një koment. Megjithëse ky tekst nuk do të shihet nga përdoruesi, ai përsëri do të transmetohet në dokument, kështu që nëse shikoni kodin burimor, mund të zbuloni shënime të fshehura.</p> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> <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="single-popular"> <div class="single-popular-tit col-lg-12">Të njohura në kategorinë:</div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/33b72e60e1d3066a9663f391221dc014.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Transferimi i kontakteve në një telefon të ri android"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">Transferimi i kontakteve në një telefon të ri android</div> <a href="https://innovakon.ru/sq/phone/perenos-kontaktov-na-novyi-telefon-android-android-prilozheniya.html" rel="bookmark" title="Transferimi i kontakteve në një telefon të ri android">lexoni</a> <div class="clr"> </div> </div> </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/ff504b14456f4702a94368a161811b1d.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Samsung Galaxy rindizet vetë - Zgjidhje Galaxy note 4 rindizet vetë"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">Samsung Galaxy rindizet vetë - Zgjidhjet e Galaxy Note...</div> <a href="https://innovakon.ru/sq/internet/esli-xiaomi-postoyanno-perezagruzhaetsya-samsung-galaksi-perezagruzhaetsya-sam-po.html" rel="bookmark" title="Samsung Galaxy rindizet vetë - Zgjidhje Galaxy note 4 rindizet vetë">lexoni</a> <div class="clr"> </div> </div> </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/242e09224609f2b7cbd6b5b9f2adc411.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Karakteristikat kryesore të Kaspersky Rescue Disk"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">Karakteristikat kryesore të Kaspersky Rescue Disk</div> <a href="https://innovakon.ru/sq/rates/skachat-zagruzochnyi-disk-kasperskogo-osnovnye-vozmozhnosti-kaspersky-rescue.html" rel="bookmark" title="Karakteristikat kryesore të Kaspersky Rescue Disk">lexoni</a> <div class="clr"> </div> </div> </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/c62696757e3072ef58017e912c5d6a6d.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Macbook nuk do të lidhet me wifi Macbook nuk do të shohë wifi"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">Macbook nuk do të lidhet me wifi Macbook nuk do të shohë wifi</div> <a href="https://innovakon.ru/sq/phone/macbook-ne-podklyuchaetsya-k-wifi-avtomaticheski-makbuk-ne-podklyuchaetsya-k-wifi-makbuk-ne-vidit-vai-fai.html" rel="bookmark" title="Macbook nuk do të lidhet me wifi Macbook nuk do të shohë wifi">lexoni</a> <div class="clr"> </div> </div> </div> <div class="clr"></div> </div> </div>  <div class="sidebar col-lg-3 col-md-4 col-sm-12"> <div class="sidebar-wrp"> <div class="sidebar-wrp-title">Artikujt e fundit</div> <div class="sidebar-wrp-des"> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/094fe0c598853f299be65e8611b45d60.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Si të fitoni para në WebMoney</div> <div class="clr"></div> <a href="https://innovakon.ru/sq/internet/kak-zarabotat-rubli-na-webmoney-kak-zarabotat-na-webmoney-proverennye.html">lexoni</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/280d369c9d1e343119c3d855af4b9c4d.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Tableti "Supra": vlerësimet e klientëve</div> <div class="clr"></div> <a href="https://innovakon.ru/sq/rates/planshet-podelka-est-takoi-supra-firma-supra-planshet-otzyvy-pokupatelei-plyusy-i-minusy.html">lexoni</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/b1724f08fa52145089eaa72f836127ee.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Vendndodhjet e anijeve në kohë reale</div> <div class="clr"></div> <a href="https://innovakon.ru/sq/settings/voennye-korabli-v-realnom-vremeni-onlain-mestonahozhdeniya-sudov-v.html">lexoni</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/534951a61241c179a7c060b9fe1143c8.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Programet më të mira për Android Regjistroni thirrjet nga...</div> <div class="clr"></div> <a href="https://innovakon.ru/sq/rates/prilozheniya-dlya-android-obuchayushchie-programmy-dlya-detei-luchshie.html">lexoni</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/e280b0808c5e749938522ba1df2a41ec.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Heqja e jo-ndjekësve në Twitter</div> <div class="clr"></div> <a href="https://innovakon.ru/sq/services/kak-udalit-ne-vzaimnyh-chitatelei-v-twitter-udalyaem-ne-chitatelei-v.html">lexoni</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/229610355b0a27a465c73ddb25664556.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Lidhja e internetit në një laptop: të gjitha të mundshme...</div> <div class="clr"></div> <a href="https://innovakon.ru/sq/phone/kak-vklyuchit-internet-na-kompyutere-ispolzuya-mobilnyi-telefon.html">lexoni</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/5399be52c80b405fedf00779a6136b42.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Samsung Galaxy S IV është flamuri i ri...</div> <div class="clr"></div> <a href="https://innovakon.ru/sq/phone/samsung-galaxy-s4-vtoroi-vzglyad-samsung-galaxy-s-iv-novyi-flagman-galakticheskogo-masshtaba-galak.html">lexoni</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/5e7e9f901854bf25f72c63b207b5c99a.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Si kontrollohet shpejtësia e rrotullimit...</div> <div class="clr"></div> <a href="https://innovakon.ru/sq/rates/blok-upravleniya-ventilyatorami-kompyutera-svoimi-rukami-kak.html">lexoni</a> </div> <div class="clr"></div> </div> </div> <div id="text-4" class="widget widget_text sidebar-wrp"> <div class="textwidget"> </div> </div> <div id="ketena1" style="height:500px;width:260px;" align="center"></div> <div class="clr"></div> </div> </div> </div> </div> <div id="footer"> <div class="container"> <div class="row"> <div class="footer-contacts col-lg-6 col-md-6 col-sm-12 col-xs-12"> <img src="/logo/logo.png" loading=lazy loading=lazy> <div class="footer-contacts-tit">innovakon.ru <br>Telefonat celularë dhe komunikimet</div> <div class="footer-soc"> <div class="footer-soc-wrp"> <div class="soc_w"> <a href="#" class="soc-link vk" target="_blank"></a> <a href="#" class="soc-link fb" target="_blank"></a> </div> </div> </div> </div> <div class="footer-links col-lg-4 col-md-6 col-sm-12 col-xs-12"> </div> <div class="footer-links col-lg-4 col-md-4 col-sm-4 col-xs-4" style="display: block;"> <ul> <li><a href="">Redaksia e projektit</a></li> <li><a href="">Reklamimi në faqen e internetit</a></li> </ul> <ul> <li><a href="https://innovakon.ru/sq/feedback.html">Kontaktet</a></li> <li><a href="https://innovakon.ru/sq/sitemap.xml">Harta e faqes</a></li> </ul> </div> </div> </div> <div class="copyright">© 2024 Telefonat celularë dhe komunikimet</div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://innovakon.ru/wp-content/themes/trudinsp/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://innovakon.ru/wp-content/themes/trudinsp/js/SmoothScroll.js"></script> <a id="scroll-to-top" href="#" title="Lëvizni në krye">Top</a> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.4.1'></script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/jquery-smooth-scroll/js/jss-script.min.js?ver=4.8.3'></script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='/wp-includes/js/jquery/ui/effect.min.js?ver=1.11.4'></script> <script type='text/javascript' src='/wp-includes/js/jquery/ui/effect-blind.min.js?ver=1.11.4'></script> <script type='text/javascript'> /* <![CDATA[ */ var stbUserOptions = { "mode":"css","cssOptions":{ "roundedCorners":false,"mbottom":20,"imgHide":"http:\/\/innovakon.ru\/wp-content\/plugins\/wp-special-textboxes\/themes\/stb-metro\/minus.png","imgShow":"http:\/\/innovakon.ru\/wp-content\/plugins\/wp-special-textboxes\/themes\/stb-metro\/plus.png","strHide":"\u0421\u043a\u0440\u044b\u0442\u044c","strShow":"\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c"} }; /* ]]> */ </script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/wp-special-textboxes/js/wstb.min.js?ver=5.5.101'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.3'></script> <script type="text/javascript" id="slb_context">/* <![CDATA[ */if ( !!window.jQuery ) { (function($){ $(document).ready(function(){ if ( !!window.SLB ) { { $.extend(SLB, { "context":["public","user_guest"]} );} } })} )(jQuery);} /* ]]> */</script> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html>