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ētkāHTML– 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ā.
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:
- Html — viss dokuments.
- Head – pakalpojumu virsrakstu sadaļa.
- Title – lapas virsraksts (tiek rādīts cilnē).
- Pamatteksts – dokumenta pamatteksts.
- H1-H6 – lappušu teksta virsraksti.
- Raksts – raksts.
- Sadaļa - sadaļa.
- Izvēlne – izvēlne.
- Div – bloks.
- Spin – stīga.
- P – rindkopa.
- 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
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.
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
Nākotnē mēs galvenokārt izmantosim stingru, 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.
Jūs bieži varat atrast HTML kodu, neizmantojot nevienu, š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 izmantojatun 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 pievienojietlīdz dokumenta sākumam.
Tag nosaka HTML faila sākumu, galvene tiek saglabāta tajā (
) un dokumenta pamattekstu (Dokumenta nosaukums, ko sauc arī par bloku
, var saturēt tekstu un atzīmes, taču šīs sadaļas saturs lapā netiek tieši parādīts, izņemot konteinerā
Tag 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.
Tag
Rīsi. 4.2. Galvenes skats pārlūkprogrammā
Tag
Jums jāpievieno beigu atzīme lai norādītu, ka dokumenta nosaukuma bloks ir pabeigts.
Dokumenta pamatteksts
Virsraksts
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ē
apzīmē vissvarīgāko pirmā līmeņa virsrakstu un tagu 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 ...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.
...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.
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.