Es nevaru apskatīt lapas kodu. Google Chrome — rīki tīmekļa pārziņiem

Tātad, šodien mēs apskatīsim vairākus noderīgus rīkus tīmekļa meistariem, kas atvieglo mājas lapas izstrādi. Sāksim ar tīmekļa pārziņa konsoli pārlūkprogrammā Google Chrome. Un apskatīsim jautājumus, kas tīmekļa pārzinim visbiežāk rodas vietnes izkārtojuma laikā.

Lai piekļūtu konsolei, atveriet savu vietni pārlūkprogrammā Google Chrome, ar peles labo pogu noklikšķiniet jebkurā tīmekļa lapas vietā un kontekstuālajā nolaižamajā izvēlnē atlasiet “Skatīt lapas kodu” vai uz konkrēta elementa, ko izpētīt, atlasot “Skatīt kodu”. elements".

Augšpusē būs norādītas vairākas cilnes. Šodien mēs runāsim par cilni “Elementi”. , kas uzrāda tīmekļa lapas elementus ar tagu izcelšanu, rekvizītus, elementu ligzdošanas izcelšanu, elementa hierarhijas attēlojumu DOM kokā (mājiens apakšā, no saknes vecāka uz pašreizējo), iespēju rediģēt elementus, to rekvizītu sarakstu, apsveriet meklēšanu pēc elementiem, kā arī Iepazīsimies ar elementiem saistīto css stilu apskati utt.

Kā es varu apskatīt visus stilus, kas ir saistīti ar konkrētu elementu? Kurš no tiem tiek izmantots tagad? Kādos failos tie atrodas?

Tātad, nekas nevar būt vieglāks! Atveriet pārlūkprogrammu Google Chrome, atveriet mūsu vietni - jautājumu avotu, ar peles labo pogu noklikšķiniet uz vajadzīgā elementa, ja tas ir redzams lapas kontekstā, un konteksta izvēlnē atlasiet “Skatīt elementa kodu”.

Apakšā ir konsole ar izceltu cilni kreisajā pusē “ Elementi” un visiem stiliem, kas saistīti ar elementu labajā pusē, kur: Aprēķinātie stili– tie ir vispārīgi “kopsavilkuma” stili, kas elementam tika piešķirti no css noteikumiem un lietotāja pārlūkprogrammas (viņa vides) iestatījumiem, un tajā pašā laikā cilne tiek sakļauta.

Bet mūs interesē zem tās paplašinātā cilne “Stili”, kurā pēc kārtas ir uzskaitīti visi elementam piešķirtie stili, kā arī faili, kur šie noteikumi ir norādīti šim elementam pēc tā veida, id, klases, nosaukuma, rekvizīta , atribūts utt. Turklāt, ja css noteikums ir izsvītrots, tas nozīmē, ka tas tika atkārtoti definēts agrāk/vēlāk (kas ļauj viegli izsekot, kuram no css kārtulām ir prioritāte un kas šajā gadījumā tiek piemērots elementam).

Zem konsoles ir rinda, kas parāda elementu dokumenta hierarhijā, ļaujot ērti skatīt visu vecāku elementu sarakstu no saknes līdz atlasītajam elementam. Kaut kas līdzīgs "maizes drupatas".

Html tags nav redzams lapas kontekstā? Vai arī jums ir jāatrod visi tagi, piemēram, pēc noteiktas klases, nosaukuma, rekvizīta, veida?

Atveriet vietni pārlūkprogrammā Google Chrome, ar peles labo pogu noklikšķiniet, atveriet konteksta izvēlni, atlasiet « Skatīt lapas kodu » . Vienlaicīgi nospiediet taustiņu kombināciju “CTRL + F”, ievadiet mums vajadzīgo frāzi ( Piemēram: klase=”polsterējums") un pārvietoties pa atrasto rezultātu sarakstu, vienlaikus skatot visus stilus, kas saistīti ar vēlamajiem elementiem lapas labajā pusē.

Kā skatīt dinamiski ielādēta elementa(-u) html kodu (piemēram, izmantojot Ajax)

Mēs gaidām lapas ielādi pārlūkprogrammā Google Chrome. Veicam nepieciešamās darbības, lai Ajax darbotos. Ar peles labo pogu noklikšķiniet uz ielādētajiem datiem, konteksta izvēlnē atlasiet “Skatīt elementa kodu” un pārbaudiet rezultātu konsolē kreisajā pusē esošajā cilnē “Elementi”.

Skatiet css stila izmaiņas reāllaikā

Starp citu, vajadzības gadījumā ir ērti arī novērot, kādi stili tiek piešķirti elementam lidojuma laikā, piemēram, ritinot galeriju un citus taimera notikumus. Visi stili, kas piešķirti, izmantojot JavaScript reāllaikā, tiks parādīti īpašumā stils atlasīto elementu cilnes “Elementi” logā.

Interaktīvi apskatiet css noteikumu ietekmi uz html tagu prezentāciju

Google Chrome nodrošina interaktīvu konsoli css stiliem. Tas nozīmē, ka varat ne tikai skatīt, kuri stili tiek piemēroti elementam, bet arī pārvietot peles kursoru virs konkrēta css rekvizīta, iespējot to, izmantojot labajā pusē esošo uznirstošo izvēles rūtiņu vai atspējot to, notīrot karogu, un skatīt lapā iegūtais rezultāts.

Mēs mainām html elementu prezentācijas struktūru lidojumā (tieši pārlūkprogrammā)

Tātad, mēs jau esam iemācījušies izpētīt tīmekļa dokumenta struktūru pārlūkprogrammā Google Chrome, tagad mēs īsi apskatīsim rediģēšanas elementus. Mēs ejam uz konsoli jebkurā mums ērtā veidā. Mēs atrodam vajadzīgo elementu cilnē “Elementi”, ar peles labo pogu noklikšķiniet uz tā, tādējādi izsaucot uznirstošo konteksta izvēlni:

  • Pievienot atribūtu– pievieno norādītajam elementam atribūtu. Tiklīdz kursors kļūst aktīvs, mēs sākam iestatīt vēlamo rekvizītu. Piemēram: ierakstiet name="itemImage", kas nekavējoties tiks pievienots mūsu elementam.
  • Rediģēt atribūtu– ja ar peles labo pogu noklikšķiniet uz elementa atribūta, vienums kļūst pieejams rediģētatribūts. Noklikšķiniet un rediģējiet.

Lietošanas piemērs: Mēs aizmirsām paroli, kas saglabāta zem zvaigznītēm pārlūkprogrammā Google Chrome (ja parole tika saglabāta šajā pārlūkprogrammā). Ar peles labo pogu noklikšķiniet uz elementa ar ievadīto paroli, noklikšķiniet uz "Skatīt elementa kodu" , konsolē kreisajā cilnē Elementi ar peles labo pogu noklikšķiniet uz atribūta type="password", ar peles kreiso pogu noklikšķiniet uz Rediģētatribūts mainīt atribūtu tips=”parole" ieslēgts tips=”teksts", un tagad zvaigznīšu vietā teksta formā tiek parādīta tā pati parole.

  • Rediģēthtml– ar peles labo pogu noklikšķiniet uz elementa konsolē Elementi, atlasiet Rediģēthtml, mainiet kodu pēc saviem ieskatiem.
  • KopētHTML– mēs kopējam to HTML daļu, kas mums nepieciešama turpmākai izpētei, teiksim, piezīmju grāmatiņā vai citiem mērķiem, kur jāpielieto tieši tāds pats izkārtojums. Mēs ietaupām laiku.
  • KopētXPATH– kopē struktūras XPATH attēlojumu no vecākelementa saknes uz atlasīto elementu.
  • Dzēstmezgls– ja jums ir jāizņem pašreiz atlasītais elements un visi tā atvasinājumi no tīmekļa lapas konteksta un jāredz rezultāts.
  • Vārdsiesaiņojums– atveidos tīmekļa lapas skatu konsoles kontekstā Elementi lasāmāks.

Nākamajos rakstos mēs turpināsim apsvērt rīkus tīmekļa pārziņiem, un jo īpaši mēs iepazīsimies ar atlikušajām tīmekļa pārziņiem paredzēto rīku cilnēm. Google Chrome, kā arī apsveriet JavaScript kļūdu atkļūdošanu, izmantojot dažādas pārlūkprogrammas

Pārlūkojot neskaitāmas vietnes internetā, jūs varat atrast tādas, kas mums ļoti patīk. Uzreiz rodas virkne jautājumu. Vai vietne tika izveidota, izmantojot paštaisītu kodu vai kādu CMS? Kādi CSS stili tai ir? Kas ir tā metatagi? Un tā tālāk.

Ir daudz rīku, ko var izmantot, lai iegūtu informāciju par vietnes lapas kodu. Bet mums vienmēr pie rokas ir labā peles poga. To mēs izmantosim, kā piemēru izmantojot manu vietni.

Kā apskatīt lapas kodu?

Lai skatītu vietnes lapas avota kodu, novietojiet peles kursoru virs jebkura tīmekļa lapas apgabala (izņemot attēlus un saites). Pēc tam noklikšķiniet uz peles labās pogas. Mūsu priekšā atvērsies logs ar vairākām opcijām (dažādās pārlūkprogrammās tās var nedaudz atšķirties). Piemēram, pārlūkprogrammā Google Chrome ir šādas komandas:

  • mugura;
  • uz priekšu;
  • pārstartēt;
  • saglabāt kā;
  • Ronis;
  • tulkot krievu valodā;
  • apskatīt lapas kodu;
  • apskatīt kodu.

Mums ir jānoklikšķina uz apskatīt lapas kodu, un mūsu priekšā tiks atvērts vietnes lapas html kods.

Lapas koda apskate: kam pievērst uzmanību?

Tātad HTML lapas kods ir numurēts rindiņu saraksts, no kurām katra satur informāciju par šīs vietnes izveidi. Lai ātri iemācītos saprast šo milzīgo zīmju un īpašo simbolu skaitu, jums ir jānošķir dažādas koda sadaļas.

Piemēram, koda rindās head tagā ir informācija meklētājprogrammām un tīmekļa pārziņiem. Tie netiek rādīti vietnē. Šeit var redzēt, pēc kādiem atslēgvārdiem šī lapa tiek reklamēta, kā rakstīts tās nosaukums un apraksts. Arī šeit jūs varat atrast saiti, pēc kuras mēs uzzināsim par vietnē izmantoto Google fontu saimi.

Ja vietne ir veidota uz CMS WordPress vai Joomla, tad arī tas būs redzams šeit. Piemēram, šajā apgabalā tiek parādīta informācija par WordPress motīvu vai Joomla vietnes veidni. To var redzēt, izlasot zilā krāsā iezīmēto saišu saturu. Viena saite parāda vietnes veidni.

Piemēram:

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

Mēs redzēsim lapas CSS fontu stilus. Šajā gadījumā tiek izmantots fonts. To var redzēt šeit - font-family: 'Source Sans Pro'.

Šī vietne ir optimizēta, izmantojot Yoast SEO spraudni. To var redzēt no šīs komentētās koda sadaļas:

Šī vietne ir optimizēta ar Yoast SEO spraudni v3.4.2 - https://yoast.com/wordpress/plugins/seo/

Visu informāciju, kas atrodas body tagā, pārlūkprogramma parāda monitora ekrānā. Šeit mēs redzam lapas html kodu, un pašā apakšā ir Yandex Metrics skripta kods. To ieskauj komentēta atzīme ar tekstu:

/Yandex.Metrika skaitītājs

Apkoposim to

Veicot diezgan virspusēju vietnes galvenās lapas koda analīzi, mēs varam izdarīt secinājumu par to, ar kādiem rīkiem šī lapa tika izveidota. Mēs tajā redzējām:

  • CMS WordPress;
  • Google font Source Sans Pro;
  • WordPress tēma – Sidneja;
  • Yoast spraudņi;
  • Yandex metrikas skaitītājs.

Tagad vietnes lapas html koda analīzes princips ir diezgan skaidrs. Pārlūkprogrammā nemaz nav nepieciešams paturēt atvērtu lapu, kuru pētāt. Lapas kodu var saglabāt datorā, izmantojot taustiņu kombinācijas ctrl+a, ctrl+c, ctrl+v. Ielīmējiet to jebkurā teksta redaktorā (vēlams Notepad++) un saglabājiet to ar html paplašinājumu. Tādējādi jebkurā laikā varat to izpētīt dziļāk un atrast sev noderīgāku informāciju.

Esam izlaiduši jaunu grāmatu Sociālo mediju satura mārketings: kā iejusties savu sekotāju galvās un likt viņiem iemīlēties savā zīmolā.

Abonēt

Vietnes avota kods ir HTML marķējumu, CSS stilu un JavaScript skriptu kolekcija, ko pārlūkprogramma saņem no tīmekļa servera.

Vairāk video mūsu kanālā - apgūstiet interneta mārketingu ar SEMANTICA

To var salīdzināt ar komandu kopumu, ko karavīriem dod komandieris. Iedomājieties, ka auditorija neredz un nedzird priekšnieku. No viņu viedokļa militārpersonas darbības veic neatkarīgi. Mūsu gadījumā komandieris ir pārlūkprogramma, komandas ir pirmkods, un soļojošie karavīri ir gala rezultāts.

Vietne tiek glabāta tīmekļa serverī, kas nosūta lapu pēc lietotāja pieprasījuma. Pieprasījums ir URL ievadīšana adreses joslā, noklikšķināšana uz saites vai noklikšķināšana uz pogas Iesniegt veidlapā. Nav svarīgi, kādā valodā tīmekļa lapas ir rakstītas un vai tajās ir iekļauts programmatūras komponents. Jebkura servera puses algoritma gala rezultāts ir html tagu un teksta kopa.
Lapas avota kods ir datu kopa, kas ietver:

  • html iezīmēšana;
  • stila lapa vai faila saite;
  • programmas, kas rakstītas JavaScript vai saites uz failiem ar kodu.

Šīs trīs sadaļas apstrādā pārlūkprogramma. Serverim tas ir vienkārši teksts, kas jānosūta, atbildot uz pieprasījumu.

Kāpēc mums varētu būt nepieciešams izpētīt avota kodu

Visu, ko mēs redzam, mēs varam analizēt un izmantot, lai atrisinātu noteiktas problēmas, kas rodas, strādājot ar vietni, īpaši optimizējot to. Apskatot avota kodu, mēs varam:

  • Skatiet savas vai kāda cita vietnes metatagus, lai tos analizētu.
  • Skatiet noteiktu elementu esamību vai neesamību vietnē: skaitītāji, identifikācijas kodi dažādās sistēmās, noteikti skripti utt.
  • Uzziniet elementu parametrus: izmērus, krāsas, fontus.
  • Atrodiet ceļu uz fotoattēliem un citiem lapā esošajiem elementiem.
  • Izpētiet lapas saites.
  • Atrodiet problēmas ar kodu, kas traucē vietnes optimizācijas procesu: stili, kas nav ievietoti atsevišķos failos, skripti, nederīgs kods.

Šīs ir pamatfunkcijas, taču patiesībā, protot nolasīt kodu, jūs varat uzzināt daudz vairāk par lapu.

Kā skatīt vietnes avota kodu

To pilnībā nevarēs izdarīt tādā formā, kādā tas ir ievietots serverī no pārlūkprogrammas. Bet jūs varat redzēt visus marķējumus, ar peles labo pogu noklikšķinot uz lapas. Šeit un tālāk, kā piemēru izmantojot Google Chrome.

Atlasiet opciju “Skatīt lapas kodu” un saņemiet pilnu sarakstu atsevišķā cilnē.

Tas ir tikai teksts, kas jums jāanalizē, lai saprastu. Bet jūs varat iegūt interaktīvu kodu, izmantojot izstrādātāja rīkus.

Kā atrast vietnes lapas avota kodu

Pārlūkprogrammā noklikšķiniet uz izvēlnes ikonas. Visbiežāk tas atrodas labajā pusē un izskatās kā trīs punkti vai svītras.

Papildu rīku sadaļā atlasiet “Izstrādātāja rīki”.

Tiks atvērts logs, kas parāda koda aktīvo stāvokli. Tas nozīmē, ka, noklikšķinot uz marķējuma, blakus tam parādīsies elementa stils, un atlasītie bloki tiks iezīmēti lapā.

Cilnē “Avots” varat apskatīt dažu failu saturu: skriptus, fontus, attēlus.

Cilnē “Drošība” varat pārbaudīt vietnes sertifikātu.

Cilne “Audits” palīdzēs jums pārbaudīt mitināšanā ievietoto resursu.

Ja paneļa atrašanās vieta labajā pusē ir neērta, varat noklikšķināt uz trim punktiem un mainīt to, atlasot vajadzīgo vienumu.

Kā skatīt metatagus

Katrs HTML dokuments ietver struktūras tagus. Šeit ir daži no tiem:

  1. Html — viss dokuments.
  2. Head – pakalpojumu virsrakstu sadaļa.
  3. Title – lapas virsraksts (tiek rādīts cilnē).
  4. Pamatteksts – dokumenta pamatteksts.
  5. H1-H6 – lappušu teksta virsraksti.
  6. Raksts – raksts.
  7. Sadaļa - sadaļa.
  8. Izvēlne – izvēlne.
  9. Div – bloks.
  10. Spin – stīga.
  11. P – rindkopa.
  12. Tabula – tabula.

Elementi ir paredzēti, lai loģiski norobežotu sadaļas, ja nepieciešams, tie tiek veidoti, izmantojot stilus. Tajos ir teksts, kas kaut kādā veidā ir redzams lapā. Bet Head tag satur pakalpojumu informāciju. Lai to norādītu, tiek izmantoti meta tagi. Viss, kas tajos rakstīts, ir paredzēts serverim un meklētājprogrammām.

To saturu nevar noskaidrot citādi.

Pievērsīsim uzmanību saites tagam. Ar tās palīdzību tiek norādītas saites uz ārējiem iekļautajiem failiem. Ja vēlaties, varat redzēt saturu un saglabāt to diskā. Lai to izdarītu, pārvietojiet kursoru uz adresi un nospiediet RMB. Atlasiet "Atvērt jaunā cilnē".

Norādītais fails tiks atvērts jaunā cilnē, kuru varēsiet apskatīt vai saglabāt.

Kā skatīt lapas avota kodu, lai atkļūdotu skriptu

Šajā gadījumā visērtāk ir atvērt lapu vietējā datorā. Ja jums ir jālabo tikai marķējums, stili un skripti, to var izdarīt tieši no mapes. HTML kods tiek skatīts tādā pašā veidā. Bet JavaScript koda kļūdas var redzēt cilnē “Konsole”. Tas parāda kļūdas aprakstu un rindas numuru, kurā tā radās.

Sintakse ir redzama tieši kodā. Tam ir paredzēta cilne “Avots”.

Kā apskatīt konkrēta elementa kodu

Lielām lapām ar daudziem elementiem ir grūti atrast nepieciešamo kodu visos marķējumos. Šajā gadījumā jums vajadzētu izmantot īpašu konteksta izvēlnes komandu. Pārvietojiet peles kursoru virs fragmenta un nospiediet RMB. Atlasiet komandu "Skatīt kodu".

Tiks atvērts tas pats logs, bet ar fokusu uz atlasīto objektu.

Kopsavilkums

Mēs jums teicām, kas ir lapas avota kods. Pietiek apgūt HTML un CSS pamatzināšanas, un, izmantojot ērtus izstrādātāju rīkus, jūs varēsiet atkļūdot savus HTML dokumentus.

Pārskatot resursu kodu internetā, varēsi mācīties ne tikai no savas pieredzes, bet arī izmantot reālus darba piemērus. Un SEO speciālistiem noderēs meta tagi, kuros esošā informācija var daudz pastāstīt par vietni.

Varbūtība ieskatīties sākotnējā kodu tīmeklī lapas, ko pārlūkprogramma saņēmusi serverim adresēta pieprasījuma rezultātā, ir pieejama praktiski katrā interneta pārlūkprogrammā. Piekļuve atbilstošajai komandai tiek organizēta aptuveni identiski, taču pastāv būtiskas atšķirības metodē un formā, kādā sākotnējā kodu .

Instrukcijas

1. Pārlūkprogrammas Mozilla FireFox izvēlnē izvērsiet sadaļu "Skatīt" un noklikšķiniet uz "Sākotnējais". kodu lapas" Tas pats vienums ir arī konteksta izvēlnē, kas parādās, ja ar peles labo pogu noklikšķiniet uz teksta lapas. Varat arī izmantot taustiņu kombināciju CTRL + U. Mozilla FireFox neizmanto ārējās programmas - sākotnējais kodu lapas ar sintakses izcelšanu tiks atvērts atsevišķā pārlūkprogrammas logā.

2. Programmā Internet Explorer noklikšķiniet uz izvēlnes Fails un atlasiet Rediģēt programmā Notepad. Nosaukuma Notepad vietā var uzrakstīt citu programmu, kuru pārlūkprogrammas iestatījumos esat piešķīris iniciāļa apskatei kodu A. Noklikšķinot lapas ar peles labo pogu parādās konteksta izvēlne, kurā ir arī vienums, kas ļauj atvērt iniciāļus kodu lapasārējā programmā – “Skatīt HTML- kodu A".

3. Opera pārlūkprogrammā atveriet izvēlni, dodieties uz sadaļu "Lapa" un apakšsadaļā "Izstrādes rīki" būs iespēja atlasīt vienumu "Sākt". kodu"vai vienumu "Sākotnējais kodu rāmis." Šai atlasei ir attiecīgi piešķirti karstie taustiņi CTRL + U un CTRL + SHIFT + U. Konteksta izvēlnē, kas saistīta ar klikšķi lapas ar peles labo pogu noklikšķiniet, ir arī vienums “Sākotnējais kodu" Opera atver avotu lapasārējā programmā, kas ir piešķirta OS vai pārlūkprogrammas iestatījumos HTML failu rediģēšanai.

4. Pārlūkprogrammai Google Chrome, bez šaubām, ir vislabākā organizācija sākotnējās versijas skatīšanai kodu A. Ar peles labo pogu noklikšķinot uz lapas, varat izvēlēties skatīt kodu A lapas"un pēc tam avota kods ar sintakses izcelšanu tiks atvērts atsevišķā cilnē. Vai arī jūs varētu dot priekšroku rindiņai “Skatīt” tajā pašā izvēlnē kodu elements” un pārlūkprogramma tajā pašā cilnē atvērs divus papildu kadrus, kuros varēsiet pārbaudīt HTML un CSS kodu katrs elements lapas. Pārlūkprogramma reaģēs uz kursora pārvietošanos pāri līnijām kodu un izceļot elementus lapā, kas atbilst šai HTML sadaļai kodu A.

5. Apple Safari pārlūkprogrammā izvērsiet sadaļu Skats un atlasiet Skatīt HTML kodu A". Izvēlnē, kas parādās, ar peles labo pogu noklikšķinot uz atvērt lapas, atbilstošo vienumu sauc par “Skatīt avotu”. Šai darbībai ir piešķirti karstie taustiņi CTRL + ALT + U. Sākotnējais kodu tiek atvērts atsevišķā pārlūkprogrammas logā.

Ja atverat jebkuru tīmekļa lapu, tajā būs tipiski elementi, kas nemainās atkarībā no vietnes veida un fokusa. Piemērā 4.1 ir parādīts kods vienkāršam dokumentam, kas satur pamata tagus.

Piemērs 4.1. Web lapas pirmkods

Tīmekļa lapas piemērs

Virsraksts

Pirmā rindkopa.

Otrā rindkopa.



Kopējiet šī piemēra saturu un saglabājiet to mapē c:\www\ kā example41.html. Pēc tam palaidiet pārlūkprogrammu un atveriet failu, izmantojot izvēlnes vienumu Fails > Atvērt failu (Ctrl+O). Dokumenta atlases dialoglodziņā atlasiet failu example41.html. Pārlūkprogrammā tiks atvērta tīmekļa lapa, kas parādīta attēlā. 4.1.

Rīsi. 4.1. Piemēra izpildes rezultāts

Elementsir paredzēts, lai norādītu aktuālā dokumenta veidu - DTD (dokumenta tipa definīcija, dokumenta veida apraksts). Tas nepieciešams, lai pārlūkprogramma saprastu, kā interpretēt aktuālo mājas lapu, jo HTML eksistē vairākās versijās, turklāt ir XHTML (EXtensible HyperText Markup Language), kas ir līdzīgs HTML, bet atšķiras no tā sintaksē. Lai pārlūkprogramma "neapjuktu" un saprastu, pēc kura standarta rādīt tīmekļa lapu, ir jāiestata pirmajā koda rindā .

Ir vairāki veidi, tie atšķiras atkarībā no HTML versijas, uz kuru tie ir atlasīti. Tabulā 4.1. Doti galvenie dokumentu veidi ar to aprakstiem.

Tabula 4.1. Derīgi DTD
DOCTYPE Apraksts
HTML 4.01
Stingra HTML sintakse.
Pārejas HTML sintakse.
HTML dokumentā tiek izmantoti rāmji.
HTML 5
Šai HTML versijai ir tikai viens dokumenta veids.
XHTML 1.0
Stingra XHTML sintakse.
XHTML pārejas sintakse.
Dokuments ir uzrakstīts XHTML un satur rāmjus.
XHTML 1.1
XHTML 1.1 izstrādātāji sagaida, ka tā pakāpeniski aizstās HTML. Kā redzat, šai definīcijai nav iedalījuma tipos, jo sintakse ir tāda pati un ievēro skaidrus noteikumus.

Atšķirība starp stingru un pārejas dokumenta aprakstu ir atšķirīga pieeja dokumenta koda rakstīšanai. Stingrs HTML prasa stingru HTML specifikācijas ievērošanu, un tas ir nepielūdzams. Pārejas HTML ir mierīgāks attiecībā uz dažiem koda trūkumiem, tāpēc noteiktos gadījumos ieteicams izmantot šo veidu.

Piemēram, stingrā HTML un XHTML ir nepieciešama taga klātbūtne , un pārejas HTML to var izlaist un nenorādīt. Tajā pašā laikā mēs atceramies, ka pārlūkprogramma jebkurā gadījumā parādīs dokumentu neatkarīgi no tā, vai tas atbilst sintaksei vai nē. Šī pārbaude tiek veikta, izmantojot pārbaudītāju, un tā ir paredzēta galvenokārt izstrādātājiem, lai izsekotu dokumentā esošās kļūdas.</p> <p>Nākotnē mēs galvenokārt izmantosim stingru<!DOCTYPE>, ja vien nav noteikts citādi. Tas ļaus izvairīties no izplatītām kļūdām un iemācīs rakstīt sintaktiski pareizu kodu.</p> <p>Jūs bieži varat atrast HTML kodu, neizmantojot nevienu<!DOCTYPE>, šajā gadījumā tīmekļa lapa joprojām tiks rādīta. Tomēr var gadīties, ka viens un tas pats dokuments pārlūkprogrammā parādās atšķirīgi, kad to izmantojat<!DOCTYPE>un bez tā. Turklāt pārlūkprogrammas šādus dokumentus var attēlot savā veidā, kā rezultātā lapa “izjuks”, t.i. tiks parādīts pilnīgi citādi, nekā to pieprasa izstrādātājs. Lai izvairītos no šādām situācijām, vienmēr pievienojiet<!DOCTYPE>līdz dokumenta sākumam.</p><p>Tag <html>nosaka HTML faila sākumu, galvene tiek saglabāta tajā ( <head>) un dokumenta pamattekstu ( <body> ).</p><p>Dokumenta nosaukums, ko sauc arī par bloku <head>, var saturēt tekstu un atzīmes, taču šīs sadaļas saturs lapā netiek tieši parādīts, izņemot konteinerā <title> .</p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </p><p>Tag <meta>ir universāls un pievieno veselu iespēju klasi, jo īpaši, izmantojot metatagus, kā šo tagu parasti sauc, jūs varat mainīt lapas kodējumu, pievienot atslēgvārdus, dokumenta aprakstu un daudz ko citu. Lai pārlūkprogramma saprastu, ka tā nodarbojas ar UTF-8 kodējumu (Unikoda transformācijas formāts), un šī rinda tiek pievienota.</p><p> <title>Tīmekļa lapas piemērs

Tag nosaka tīmekļa lapas nosaukumu, tas ir viens no svarīgiem elementiem, kas paredzēti daudzu problēmu risināšanai. Operētājsistēmā Windows virsraksta teksts tiek parādīts pārlūkprogrammas loga augšējā kreisajā stūrī (4.2. attēls).</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>Rīsi. 4.2. Galvenes skats pārlūkprogrammā</p> <p>Tag <title>ir obligāta, un tam noteikti jābūt iekļautam dokumenta kodā.</p><p>Jums jāpievieno beigu atzīme</head> lai norādītu, ka dokumenta nosaukuma bloks ir pabeigts.</p><p>Dokumenta pamatteksts <body>paredzēts tagu un tīmekļa lapas satura ievietošanai.</p><p> <h1>Virsraksts</h1> </p><p>HTML piedāvā sešus dažāda līmeņa teksta virsrakstus, kas norāda uz sadaļas, kas seko virsrakstam, relatīvo nozīmi. Jā, atzīmē <h1>apzīmē vissvarīgāko pirmā līmeņa virsrakstu un tagu <h6>kalpo, lai norādītu sestā līmeņa virsrakstu un ir vismazāk nozīmīga. Pēc noklusējuma pirmā līmeņa virsraksts tiek parādīts ar lielāko treknrakstu, un turpmākie virsraksti ir mazāki. Tagi <h1>...<h6>Skatiet bloka elementus, tie vienmēr sākas jaunā rindā, un pēc tiem nākamajā rindā parādās citi elementi. Turklāt pirms un pēc virsraksta tiek pievienota atstarpe.</p><p> <!-- Комментарий --> </p><p>Dažu tekstu var paslēpt, lai tas netiktu rādīts pārlūkprogrammā, padarot to par komentāru. Lai gan lietotājs neredzēs šo tekstu, tas joprojām tiks pārsūtīts dokumentā, tāpēc, aplūkojot avota kodu, varat atklāt slēptās piezīmes.</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">Populārs kategorijā:</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/5be8b76667696c4cd63a8c38979b50af.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Kā apvienot Photoshop slāņus vienā vai apvienot tos grupā Kā apvienot vairākus slāņus programmā Photoshop"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">Kā apvienot Photoshop slāņus vienā vai apvienot tos grupā...</div> <a href="https://innovakon.ru/lv/settings/sposoby-obedineniya-sloev-v-fotoshope-kak-obedinit-sloi-v-fotoshope-v.html" rel="bookmark" title="Kā apvienot Photoshop slāņus vienā vai apvienot tos grupā Kā apvienot vairākus slāņus programmā Photoshop">lasīt</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/33b72e60e1d3066a9663f391221dc014.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Kontaktu pārsūtīšana uz jaunu Android tālruni"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">Kontaktu pārsūtīšana uz jaunu Android tālruni</div> <a href="https://innovakon.ru/lv/phone/perenos-kontaktov-na-novyi-telefon-android-android-prilozheniya.html" rel="bookmark" title="Kontaktu pārsūtīšana uz jaunu Android tālruni">lasīt</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 atsāknējas pats — Solutions Galaxy note 4 atsāknējas atsevišķi"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">Samsung Galaxy atsāknējas pats — Galaxy piezīmju risinājumi...</div> <a href="https://innovakon.ru/lv/internet/esli-xiaomi-postoyanno-perezagruzhaetsya-samsung-galaksi-perezagruzhaetsya-sam-po.html" rel="bookmark" title="Samsung Galaxy atsāknējas pats — Solutions Galaxy note 4 atsāknējas atsevišķi">lasīt</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="Kaspersky Rescue Disk galvenās funkcijas"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">Kaspersky Rescue Disk galvenās funkcijas</div> <a href="https://innovakon.ru/lv/rates/skachat-zagruzochnyi-disk-kasperskogo-osnovnye-vozmozhnosti-kaspersky-rescue.html" rel="bookmark" title="Kaspersky Rescue Disk galvenās funkcijas">lasīt</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">Jaunākie raksti</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/d93303aadea847492ee52538b585df87.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">MacBook nevar izveidot savienojumu ar wifi MacBook neredzēs...</div> <div class="clr"></div> <a href="https://innovakon.ru/lv/phone/macbook-ne-podklyuchaetsya-k-wifi-avtomaticheski-makbuk-ne-podklyuchaetsya-k-wifi-makbuk-ne-vidit-vai-fai.html">lasīt</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/094fe0c598853f299be65e8611b45d60.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Kā nopelnīt naudu vietnē WebMoney</div> <div class="clr"></div> <a href="https://innovakon.ru/lv/internet/kak-zarabotat-rubli-na-webmoney-kak-zarabotat-na-webmoney-proverennye.html">lasīt</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">"Supra" tablete: klientu atsauksmes</div> <div class="clr"></div> <a href="https://innovakon.ru/lv/rates/planshet-podelka-est-takoi-supra-firma-supra-planshet-otzyvy-pokupatelei-plyusy-i-minusy.html">lasīt</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">Kuģu atrašanās vietas reāllaikā</div> <div class="clr"></div> <a href="https://innovakon.ru/lv/settings/voennye-korabli-v-realnom-vremeni-onlain-mestonahozhdeniya-sudov-v.html">lasīt</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">Labākās programmas Android ierakstīšanai zvaniem no...</div> <div class="clr"></div> <a href="https://innovakon.ru/lv/rates/prilozheniya-dlya-android-obuchayushchie-programmy-dlya-detei-luchshie.html">lasīt</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">Nesekotāju noņemšana pakalpojumā Twitter</div> <div class="clr"></div> <a href="https://innovakon.ru/lv/services/kak-udalit-ne-vzaimnyh-chitatelei-v-twitter-udalyaem-ne-chitatelei-v.html">lasīt</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">Interneta pieslēgšana klēpjdatorā: viss iespējamais...</div> <div class="clr"></div> <a href="https://innovakon.ru/lv/phone/kak-vklyuchit-internet-na-kompyutere-ispolzuya-mobilnyi-telefon.html">lasīt</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 ir jaunais flagmanis...</div> <div class="clr"></div> <a href="https://innovakon.ru/lv/phone/samsung-galaxy-s4-vtoroi-vzglyad-samsung-galaxy-s-iv-novyi-flagman-galakticheskogo-masshtaba-galak.html">lasīt</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>Mobilie telefoni un sakari</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="">Projekta redakcija</a></li> <li><a href="">Reklāma mājas lapā</a></li> </ul> <ul> <li><a href="https://innovakon.ru/lv/feedback.html">Kontakti</a></li> <li><a href="https://innovakon.ru/lv/sitemap.xml">Vietnes karte</a></li> </ul> </div> </div> </div> <div class="copyright">© 2024 Mobilie tālruņi un sakari</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="Ritiniet līdz augšai">Tops</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>