Kontakty

Vytvorte dokument HTML. Správna štruktúra dokumentu HTML a kód stránky

  • 27.06.2020

označuje, podľa akého štandardu HTML je vaša webová stránka napísaná.


DOCTYPEPopis
HTML5
Pre všetky dokumenty.
HTML 4.01
"http://www.w3.org/TR/html4/strict.dtd"> Prísna syntax HTML.
Prechodná syntax HTML.
HTML dokument používa rámy.
XHTML 1.0
Prísna syntax XHTML.
Prechodová syntax XHTML.
Dokument je napísaný v XHTML a obsahuje rámce.
XHTML mobilný profil, pridáva špecifické prvky pre mobilné telefóny.
XHTML 1.1
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Táto definícia nemá rozdelenie na typy; syntax je rovnaká a riadi sa jasnými pravidlami.

Existuje teda niekoľko typov dokumentov (prísne a prechodné, pre HTML a XHTML). Otázkou je, ktorý štandard zvoliť.

HTML a XHTML štandardy

HTML je štandardný značkovací jazyk pre webové dokumenty.

V HTML 4.01 a HTML5 je vzhľad stránky oddelený od jej obsahu. Obsah a štruktúra (nadpisy, odseky, odkazy) sú špecifikované v HTML. Dizajn (zarovnanie, fonty, farby) určujú CSS štýly.

Napríklad tag a atribút align boli zastarané.

XHTML je rozšíriteľný značkovací jazyk webových dokumentov založený na XML. Štandard XHTML je zoznam rozdielov medzi HTML 4.01 a XHTML.

Požiadavky na XHTMLJe zakázanéPotrebovať
Všetky značky musia byť zatvorené.
Všetky značky, atribúty a vlastnosti CSS musia byť napísané malými písmenami.
Všetky hodnoty atribútov značky musia byť uzavreté v úvodzovkách.
Hierarchia sa musí prísne dodržiavať: prvá značka je uzavretá ako posledná.... ...
Značka bloku nemôže byť vnorená do vloženej značky. (Po prvku bloku sa ďalší výstup na stránke uskutoční na novom riadku. Vložený prvok nevytvára zalomenie riadku.)
...
...
Booleovské atribúty sú zapísané v rozšírenej forme.
Obrázky musia mať popis

Výhodami jazyka XHTML nie je prísnosť syntaxe, ale možnosť vymýšľať si vlastné značky.

2. júla 2009 však World Wide Web Consortium (W3C) oznámilo ukončenie prác na XHTML 2.0, pretože koncept XHTML považoval za nesprávny. Skupina programátorov prešla na prácu na štandarde HTML5. A hoci štandard HTML5 ešte nie je schválený, už je na ňom napísaných veľa stránok.

Každý, kto sa pýta, kedy bude HTML5 dokončené, si môže pozrieť pôvodné zdroje:

Oficiálna verzia štandardu HTML5 sa nachádza na: www.w3.org/TR/html5/

Urobme si výber. Nie je to ťažké: nemali by ste používať štandard XHTML, ak nemáte v úmysle rozšíriť jazyk HTML.

Nebudeme sa venovať!DOCTYPE, ktorý je určený pre dokumenty využívajúce rámy: predvčerom.

Ďalšia otázka znie: akú syntax si vybrať – prísnu alebo tranzitívnu?

Prísna a prechodná syntax HTML 4.01

Pre uľahčenie prechodu na nový štandard existujú syntaxe prechodu. Preskočia veľa z toho, čo by prísna syntax považovala za chyby.

Na príklade je ľahšie pochopiť, o čo tu ide. Najprv nastavíme prísnu syntax.

Prísna syntax

Kontrola platnosti

Kontrola platnosti

červená farba.



Súlad HTML kódu s deklarovaným štandardom sa nazýva platnosť a kontrola tejto korešpondencie je validácia.

Ak chcete sledovať chyby rozloženia, nainštalujte doplnok FireFox Html Validator.

Otvorme našu stránku v prehliadači FireFox a umiestnime kurzor myši na znak validátora:

Dvojitým kliknutím na znak validátora sa zobrazí podrobný zoznam chýb:


Poďme zmeniť!DOCTYPE na syntax prechodu:

Prechodová syntax

Kontrola platnosti

Kontrola platnosti

Časť textu bolo potrebné zvýrazniť červená farba.



Spustite FireFox. Žiadne chyby:


Všetko sa zdá byť v poriadku. Možno by sme sa tam mali zastaviť?

Moja rada: urobte platný layout buď v súlade s prísnou syntaxou HTML 4.01, alebo priamo v HTML5. HTML by sa malo používať na určený účel a dizajn by mal byť ponechaný na CSS. Okrem toho, ak má stránka platné rozloženie, ale nezobrazuje sa správne v žiadnom prehliadači, potom je to určite problém prehliadača. Nové verzie prehliadača budú lepšie spĺňať štandard a nebudú robiť chyby pri interpretácii platného kódu. Ak je zložité rozloženie implementované neplatným spôsobom, nie je zaručené, že ho nové verzie prehliadačov nerozpadnú na kúsky.

Nenechajte sa zlákať vernosťou prechodovej syntaxe, iba striktným dodržiavaním noriem!

Prečo je potrebné platné rozloženie?

Zdalo by sa, prečo sa obťažovať? Prehliadače totiž často opravujú malé nedostatky v rozložení automaticky a stránka funguje úplne dobre. Tieto malé, prakticky nepostrehnuteľné chyby si však vyhľadávače všimnú. Dokonca jeden chýbajúci štítok

- to je mínus pri hodnotení kvality stránky.

Práve kvôli schopnosti vyhľadávačov si všimnúť prípadné nedostatky v HTML kóde sa odporúča zachovať validitu layoutu. Okrem toho kontrolou platnosti kódu môžete nájsť spolu s malými chybami aj vážne chyby, ktoré si predtým nevšimli.



.

Ak si otvoríte akúkoľvek webovú stránku, bude obsahovať typické prvky, ktoré sa nemenia v závislosti od typu a zamerania webu. Príklad 4.1 ukazuje kód pre jednoduchý dokument obsahujúci základné značky.

Príklad 4.1. Zdrojový kód webovej stránky

Príklad webovej stránky

Smerovanie

Prvý odsek.

Druhý odsek.



Skopírujte obsah tohto príkladu a uložte ho do priečinka c:\www\ ako example41.html. Potom spustite prehliadač a otvorte súbor cez položku ponuky Súbor > Otvoriť súbor (Ctrl+O). V dialógovom okne výberu dokumentu vyberte súbor example41.html. V prehliadači sa otvorí webová stránka zobrazená na obr. 4.1.

Ryža. 4.1. Výsledok spustenia príkladu

Elementslúži na označenie typu aktuálneho dokladu - DTD (definícia typu dokladu, popis typu dokladu). Je to potrebné, aby prehliadač pochopil, ako má interpretovať aktuálnu webovú stránku, pretože HTML existuje vo viacerých verziách, okrem toho existuje XHTML (EXtensible HyperText Markup Language), ktorý je podobný HTML, ale líši sa od neho syntaxou. Aby sa prehliadač „nezmiatol“ a pochopil, podľa akého štandardu má webovú stránku zobraziť, je potrebné v prvom riadku kódu nastaviť .

Existuje niekoľko typov, líšia sa v závislosti od verzie HTML, na ktorú sú zacielené. V tabuľke 4.1. Uvádzajú sa hlavné typy dokumentov s ich popisom.

Tabuľka 4.1. Platné DTD
DOCTYPE Popis
HTML 4.01
Prísna syntax HTML.
Prechodná syntax HTML.
HTML dokument používa rámy.
HTML 5
Táto verzia HTML má iba jeden typ dokumentu.
XHTML 1.0
Prísna syntax XHTML.
Prechodová syntax XHTML.
Dokument je napísaný v XHTML a obsahuje rámce.
XHTML 1.1
Vývojári XHTML 1.1 očakávajú, že postupne nahradí HTML. Ako vidíte, táto definícia nemá žiadne rozdelenie na typy, pretože syntax je rovnaká a riadi sa jasnými pravidlami.

Rozdiel medzi striktným a prechodným popisom dokumentu je odlišný prístup k písaniu kódu dokumentu. Striktné HTML vyžaduje prísne dodržiavanie špecifikácie HTML a je neúprosné. Prechodové HTML je v niektorých chybách kódu uvoľnenejšie, preto je v určitých prípadoch vhodnejšie použiť tento typ.

Napríklad v striktnom HTML a XHTML sa vyžaduje prítomnosť značky a v prechodnom HTML ho možno vynechať a nešpecifikovať. Zároveň si pamätáme, že prehliadač v každom prípade zobrazí dokument bez ohľadu na to, či sa zhoduje so syntaxou alebo nie. Táto kontrola sa vykonáva pomocou validátora a je určená predovšetkým vývojárom na sledovanie chýb v dokumente.</p> <p>V budúcnosti budeme používať hlavne prísne<!DOCTYPE>, pokiaľ nie je uvedené inak. To nám umožní vyhnúť sa bežným chybám a naučí nás písať syntakticky správny kód.</p> <p>Často môžete nájsť HTML kód bez použitia akéhokoľvek<!DOCTYPE>, webová stránka sa v tomto prípade stále zobrazí. Môže sa však stať, že rovnaký dokument sa v prehliadači pri používaní zobrazí inak<!DOCTYPE>a bez toho. Prehliadače môžu navyše takéto dokumenty zobrazovať vlastným spôsobom, v dôsledku čoho sa stránka „rozpadá“, t.j. sa zobrazí úplne inak, ako vývojár požaduje. Aby ste predišli takýmto situáciám, vždy pridajte<!DOCTYPE>na začiatok dokumentu.</p><p>Tag <html>definuje začiatok súboru HTML, hlavička je v ňom uložená ( <head>) a telo dokumentu ( <body> ).</p><p>Názov dokumentu, nazývaný aj blok <head>, môže obsahovať text a značky, ale obsah tejto sekcie sa nezobrazuje priamo na stránke, s výnimkou kontajnera <title> .</p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </p><p>Tag <meta>je univerzálny a pridáva celú triedu schopností, najmä pomocou meta tagov, ako sa tento tag všeobecne nazýva, môžete zmeniť kódovanie stránky, pridať kľúčové slová, popis dokumentu a mnoho ďalšieho. Aby prehliadač pochopil, že ide o kódovanie UTF-8 (formát transformácie Unicode, formát transformácie Unicode) a tento riadok sa pridá.</p><p> <title>Príklad webovej stránky

Tag určuje názov webovej stránky je to jeden z dôležitých prvkov určených na riešenie mnohých problémov. V operačnom systéme Windows sa text nadpisu zobrazuje v ľavom hornom rohu okna prehliadača (obrázok 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>Ryža. 4.2. Zobrazenie hlavičky v prehliadači</p> <p>Tag <title>je povinné a určite musí byť uvedené v kóde dokumentu.</p><p>Musíte pridať uzatváraciu značku</head> na označenie, že hlavové pole dokumentu je dokončené.</p><p>Telo dokumentu <body>určené na umiestnenie značiek a obsahu webovej stránky.</p><p> <h1>Smerovanie</h1> </p><p>HTML ponúka šesť textových nadpisov rôznych úrovní, ktoré označujú relatívnu dôležitosť časti nasledujúcej za nadpisom. Áno, tag <h1>predstavuje najdôležitejší nadpis prvej úrovne a značku <h6>slúži na označenie nadpisu šiestej úrovne a je najmenej významný. V predvolenom nastavení sa nadpis prvej úrovne zobrazuje najväčším tučným písmom a nadpisy nasledujúcich úrovní sú menšie. Tagy <h1>...<h6>Odkazujú na prvky bloku, vždy začínajú na novom riadku a po nich sa na ďalšom riadku objavia ďalšie prvky. Pred a za nadpisom sa navyše pridá medzera.</p><p> <!-- Комментарий --> </p><p>Určitý text je možné skryť tak, aby sa nezobrazoval v prehliadači, a to tak, že k nemu pridáte komentár. Aj keď tento text používateľ neuvidí, bude sa v dokumente stále prenášať, takže ak sa pozriete do zdrojového kódu, môžete objaviť skryté poznámky.</p> <p>Dnes si, milý čitateľ, povieme niečo o takej záhadnej veci, akou je deklarácia štandardu, podľa ktorého sa píše HTML dokument. Prvá HTML direktíva v kóde webovej stránky, tzv <b>!DOCTYPE</b>.</p> <p>Tu je príklad tohto riadku:</p><p> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> </p><p>Ak neviete, prečo je taký žvásty potrebný a aký DOCTYPE si vybrať vo vašom prípade, v tomto článku nájdete odpovede na tieto otázky, aspoň som sa pokúsil podrobne pokryť problém :)</p> <p>Prvá vec, ktorú môže svedomitý začínajúci webmaster, ktorý sa snaží pochopiť účel smernice DOCTYPE, urobiť, je prejsť na webovú stránku htmlbook.ru a prečítať si, z čoho bude zrejmé, že <i>doctypes</i> Existuje niekoľko (prísne a nie také prísne, pre HTML a XHTML). Je jasné, že táto smernica je potrebná na to, aby prehliadač upozornil na to, podľa akých štandardov je HTML dokument zostavený, ale ktorý štandard si vybrať a na čo to má vplyv je veľká otázka.</p> <p>Aby sa veľká otázka zmenila na podrobnú odpoveď, zoznámime sa so zaujímavou históriou vzniku všetkých týchto noriem (neľakajte sa, budem stručný).</p> <h2>História štandardov HTML</h2> <p>Kedysi dávno, keď internet ešte len začínal, nastal problém <i>ako premeniť sadu písmen prenášaných cez sieť na nadpisy, odseky, odkazy</i>. Fyzik Tim Berners-Lee našiel odpoveď vynájdením <b>hypertextový značkovací jazyk HTML</b>(Upozorňujeme, kolegyne blondínky, HTML nie je programovací jazyk). Dokumentácia pre jazyk HTML bola publikovaná v roku 1991.</p> <p>HTML sa uchytilo natoľko, že sa stalo štandardom pre označovanie dokumentov na internete a bolo schválené medzinárodnou organizáciou pre štandardy W3C, ktorú založil a viedol, napodiv, rovnaký tvorca HTML, Sir Tim Berners-Lee.</p> <p>Vo svojom prvom vydaní bol HTML značkovací jazyk pre obsah webovej stránky, ktorý prehliadaču povedal, kde je nadpis, kde je odsek, kde je odkaz, pomocou HTML tagov našich dobrých priateľov. Prehliadače sa však museli rozhodnúť, ako vizuálne znázorniť všetky obsahové prvky štruktúrované tagmi. Inými slovami, prvé vydanie HTML nemalo žiadnu moc nad vizuálnou prezentáciou hypertextu na strane klienta, táto funkcia padla výlučne na plecia prehliadača.</p> <p>Netrvalo dlho pred rýchlym rozvojom internetových technológií, keď sa biznis nalial na internet. Obchodné stránky nechceli byť navzájom podobné, potrebovali jas a zapamätateľnosť.</p> <p>V tom čase populárne prehliadače (samozrejme IE a vtedy ešte živý Netscape) začali prichádzať s vlastnými značkami, ktoré umožňovali nastaviť jednotlivé vlastnosti dizajnu webového dokumentu. Áno, vážený čitateľ, v tom čase neexistovala žiadna funkcia krížového prehliadača. Stále si pamätám tie časy, keď ste mohli liezť na webové stránky iba pomocou IE, všetky ostatné prehliadače ukazovali hrozné veci. Ale o tom to teraz nie je.</p> <p>W3C prijíma nový štandard HTML, ktorý už obsahuje vizuálne reprezentácie.</p> <p>Začína sa míľovými krokmi rozvíjať CSS technológia, určená na obnovenie poriadku a oddelenie prezentácie (zarovnanie, farby, fonty, ktoré budú teraz nastavované CSS štýlmi) od štruktúry (nadpisy, odseky, odkazy, ktoré sú ideologicky nastavené v HTML) .</p> <p>Začínajúci webmaster sa opýta <i>prečo oddeľovať vizuálnu časť od štruktúry</i> a my mu odpovieme:</p> <ul><li>Na jednoduchom webe to nie je zrejmé, ale ak je projekt veľký, rozdelenie pomôže vyhnúť sa zmätku a neporiadku v kóde HTML.</li> <li>Nie je potrebné opakovať rovnaký kód na rôznych stránkach, ak je vizuálna reprezentácia blokov rovnaká. Stačí použiť CSS súbor, kde raz určíte štýl zobrazenia pre danú rodinu blokov.</li> <li>Oddelením pokynov týkajúcich sa vzhľadu do súboru vo vyrovnávacej pamäti sa môžete vyhnúť nezmyselnému zaťaženiu World Wide Web (hehe, prečo by sme sa mali starať o World Wide Web, nepreťažujte váš server; CSS šetrí servery pre projekty s vysokou záťažou) .</li> <li>Teraz je sila CSS z hľadiska práce s prezentačnou logikou nepopierateľne väčšia ako umelo zavedené HTML nástroje na zmenu vzhľadu stránky.</li> </ul><p>Takže dosť o CSS, vráťme sa k HTML.</p> <p>Aktuálne aktuálne <b>štandard HTML 4.01</b> zakazuje používanie HTML na manipuláciu so zobrazovaním prvkov. Rozlúčte sa s direktívami HTML <i>zarovnať, písmo</i>; vzhľad musí byť nastavený pomocou CSS štýlov. Všetko sa vráti do normálu.</p> <p>Ale internet sa naďalej vyvíja a normy sa vyvíjajú a degenerujú spolu s ním.</p> <p>W3C rozhodla, že nový rozšíriteľný <b>štandard XHTML</b>. Táto vec je akousi symbiózou HTML s princípmi XML.</p> <p>XML je spôsob ukladania štruktúrovaných údajov do textového súboru. Vynájdené značky určitým spôsobom v súlade so štandardmi XML tvoria dátovú štruktúru:</p><p> <kontakty> <zapis nomer="1"> <familiya>Morkovin</familiya> <imya>Andrey</imya> <site>webovej stránky</site> </zapis> <zapis nomer="2"> <familiya>Volozh</familiya> <imya>Arkady</imya> <site>yandex.ru</site> </zapis> </kontakty> </p><p>Pomocou jednoduchého programu ľahko oddelíte dáta štruktúrované pomocou XML. Dáta je navyše možné analyzovať v akomkoľvek operačnom systéme, na akomkoľvek zariadení (veď ide len o textový súbor, štruktúrovaný s príslušnými oddeľovačmi tagov, podľa známeho štandardu).</p> <p>Organizácia W3C považovala vyššie uvedenú funkciu za veľmi cool a premýšľanie o slepej uličke vo vývoji HTML viedlo k zrodu XHTML. Pôjde o značkovací jazyk, ktorý by sa mal bezbolestne rozširovať o nové značky a spracovať ho môže akékoľvek zariadenie (mobil, počítač, TV), pretože je založený na XML, ktorý toto podporuje (mysleli si naivní zamestnanci organizácie W3C) .</p> <p>Len čo sa povedalo ako urobilo, objavilo sa v máji 2001 <b>nový štandard pre rozšíriteľné hypertextové značenie XHTML 1.0</b>. Pohltil náročnosť XML, teraz musí kód HTML spĺňať nasledujúce požiadavky:</p> <ul><li>Všetky značky musia byť zatvorené. Ak je tag single, napr <i><img> </i>, potom by to malo vyzerať takto: <i><img src='/1c-enterprise/sozdaem-html-dokument-pravilnaya-struktura-html-dokumenta-i-kod-stranicy.html' loading=lazy loading=lazy> </i>.</li> <li>Je potrebné prísne dodržiavať hierarchiu. Toto nie je možné: <i><div>…</div> </i>. Môžete urobiť iba toto: <i><div>…</div> </i>. Nezabudnite na značky <i><html>, <body> </i>- všetko musí byť čisté.</li> <li>Atribúty značiek musia byť uzavreté v úvodzovkách. Nemôžete to urobiť týmto spôsobom: <i><a href=http://сайт> </i>. Môžete urobiť iba toto: <i><a href=”http://сайт”> </i>.</li> <li>Značky a vlastnosti CSS je možné písať len malými písmenami.</li> <li>Ak existuje odkaz obsahujúci znak <i>& </i>, je potrebné ho previesť na <i>&</i></li> <li>Pre obrázky vygenerované značkou <i><img> </i>, musíte špecifikovať vlastnosť <i>alt</i>.</li> </ul><p>A rovnako ako v HTML 4.01, v kóde XHTML by nemala byť žiadna pamäť na vzhľad.</p> <p>Samozrejme, toto nie je úplná špecifikácia jazyka XHTML, má množstvo obmedzení týkajúcich sa skriptov a bohvie čoho ešte. Úplnú špecifikáciu nájdete v príslušnej sekcii webu W3C (aj keď je všetko v angličtine, sú tam farebné príklady správnej a nesprávnej syntaxe, takže kto chce rozumieť, pochopí).</p> <p>Ako som už povedal, XHTML je <b>rozšíriteľná</b> hypertextový značkovací jazyk. Celá táto rozšíriteľnosť je však málo pochopená vyhľadávacími nástrojmi, nefunguje správne v IE6 a IE7, je potrebné prispôsobiť hlavičky odosielané serverom a dodržiavať prísne pravidlá formátu XML, aby všetky výhody XTML fungovali. v plnej sile.</p> <p>Výhodou jazyka XHTML nie je prísnosť syntaxe, ale schopnosť používať zložité značkovacie značky, napríklad tie, ktoré patria do menného priestoru. <i>MathML</i>(príklad, ktorý je potrebné spustiť iba v bežných prehliadačoch; IE6 namiesto interpretácie XHTML kódu vyvolá dialógové okno na uloženie súboru) alebo si tagy vymyslite sami vo svojom vlastnom mennom priestore (tento proces je podrobne popísaný na W3C webová stránka).</p> <p>Cestou von je ďalší vývoj revolučnej vetvy XHTML <b>Štandard XML 2.0</b>, výrazne odlišný od bežného HTML a nekompatibilný s XHTML 1.0. Ukončenie prác na XHTML 2.0 bolo plánované na rok 2009.</p> <p>Štandard XHTML 2.0 bol opustený a W3C prešlo na vývoj HTML 5.</p> <p>Štandard HTML 5 sa plánuje schváliť najskôr v roku 2020.</p> <h2>Ktorý DOCTYPE si vybrať</h2> <p>Teraz, vyzbrojení znalosťami histórie štandardov, sa vráťme k článku na htmlbook.ru o DOCTYPE.</p> <p>Vieme, čo sú HTML 4.01 a XHTML 1.0. Otvorené zostávajú tri otázky:</p> <ul><li>Čo je to prísna a tranzitívna syntax?</li> <li>Ktorý štandard by ste si mali vybrať?</li> <li>Ako sa naučiť sadzbu v súlade so zvolenou normou?</li> </ul><p>Teraz postupne odpoviem na všetky položené otázky.</p> <p><b>Čo je prísna a tranzitívna syntax</b></p> <p>Ukazuje sa, že odstúpenie od zmluvy pri prechode na nový štandard nie je také bolestivé, vynašli <b>syntaxe prechodov</b>.</p> <p>Pamätáte si, že štandard HTML 4.01 zakazuje pokyny HTML týkajúce sa vzhľadu? Áno, samozrejme, pamätajte, len som sa o tom chcel uistiť.</p> <p>Teraz poďme experimentovať.</p> <p>Najprv si vyberiem <b>striktná syntax formátu HTML 4.01</b> a špecifikujte zodpovedajúcu smernicu DOCTYPE:</p><p> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> </p><p>Tento žart znamená, že nižšie uvedený kód HTML je v súlade so štandardom 4.01 prijatým organizáciou W3C (tu je tento úryvok <i>"-//W3C//DTD HTML 4.01//EN"</i>). Pokyny napísané W3C týkajúce sa tohto štandardu sa nachádzajú tu: <i>"http://www.w3.org/TR/html4/strict.dtd"</i> a prehliadač môže prejsť na túto adresu kvôli objasneniu.</p> <p>Budeme experimentovať s týmto HTML kódom:</p><p> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Skontrolujte

Nejaký text



Hlavná pozornosť by sa mala venovať prítomnosti zakázaných prvkov v kóde: align="center" a tag .

Teraz skontrolujeme, či je tento kód v súlade s normami. Ako som už mnohokrát povedal, pre FireFox existuje skvelé rozšírenie s názvom . Programulina zobrazuje dve chyby v kóde HTML:

Všetko sa ukázalo ako predvídateľné. Validátor sa sťažuje na atribút zarovnať a tag , takéto veci sú zakázané v štandarde HTML 4.01, ktorý deklarujeme ako prvý riadok HTML kódu.

Nahraďte prvý riadok štandardným doctype HTML 4.01 prechodná syntax:

Teraz gýč povie prehliadaču, že dokument HTML je napísaný v súlade s prechodnou syntaxou štandardu HTML 4.01, pretože autor dokumentu má z času na čas neodolateľnú túžbu použiť smernice zakázané štandardom. Vložením tohto DOCTYPE do kódu vyššie zopakujeme overenie.

Voila, drahý čitateľ, tieto dve chyby sú preč:

Myslím, že všetky rozdiely by teraz mali byť jasné prísny A prechodný syntax.

Prechodný doctype štandardu XHTML 1.0 umožní použitie direktív HTML na nastavenie vzhľadu, ale súlad s ideológiou XML bude dôkladne monitorovaný a bude reagovať chybou overenia na každú neuzatvorenú jednotlivú značku alebo absenciu vlastnosti alt v obrázok.

Ktorý štandard si vybrať

Domnievam sa, že je potrebné správne rozvrhnúť v súlade s prísnou syntaxou normy. To vás prinúti používať HTML na určený účel a nemiešať rezne s muchami na jednom tanieri. Okrem toho, ak je stránka správne rozložená a nesprávne sa zobrazuje v akomkoľvek prehliadači, potom ide o problém s prehliadačom, ktorého nové verzie sú čoraz lepšie v súlade s normami organizácie W3C a opravujú chyby vo výklade platných kód. Ale ak ste implementovali nejakú zložitú štruktúru zvráteným, neplatným spôsobom, kde sú potom záruky, že nové verzie prehliadača neroztrhnú vaše rozloženie na kusy?

Takže žiadne syntaxe prechodu, len prísne dodržiavanie noriem.

Existuje ďalší argument pre prísne dodržiavanie noriem. Nohy tohto argumentu vyrastajú z nášho sporu s Takobusom, ktorý sa rozhorel v komentároch k článku o. Ukazuje sa, že IE8 koniec koncov dokonale chápe účel vlastnosti CSS displej: tabuľka-bunka, ak je však deklarovaná prísna syntax štandardu HTML 4.01. V prechodnej syntaxi IE8 odmieta pracovať s touto vlastnosťou CSS.

Teraz sa rozhodnime medzi súčasnými štandardmi: HTML 4.01 a XHTML 1.0.

Chystáte sa rozšíriť jazyk HTML? Ak nie, potom nie je potrebné používať prehnitú vetvu XHTML, ktorá sa nikdy nezvrhla do verzie 2.0.

Ak chcete chrániť svoj produkt do budúcnosti, aby v budúcnosti neboli problémy pri rozširovaní funkcionality kvôli HTML kódu, ktorý nevyhovuje štandardom XML, tak sa mučte lomkami v jednotlivých tagoch ​​a povinnými alt parametrami obrázkov . Nerobte to však zbytočne; nevidím potrebu jednoducho používať štandard XHTML.

Existujú aj direktívy DOCTYPE určené pre HTML dokumenty, ktoré používajú rámce. Nejako pochybujem, že používaš starodávnu technológiu rámovania :)

Pre tých, ktorí to nevedia:

Rámy sú nezávislé okná prehliadača zobrazené na jednej webovej stránke. Každé okno je spojené s nezávislým súborom HTML.

Teraz je jasné, ktorý! DOCTYPE je najvhodnejší:

Prísna syntax formátu HTML 4.01

Ako sa naučiť usporiadať v súlade so zvolenou normou

Ukazuje sa, že je to veľmi jednoduché. Je potrebné nainštalovať rozšírenie, ktoré odporúčam pre FireFox, ktoré populárnym spôsobom s príkladmi vysvetlí príčinu chyby v HTML a ukáže, ako ju opraviť. Tu je platný kód.

Vtipné video k téme

P.S. Pokračuje kampaň na výmenu stráží s otvoreným koncom. Rád si vymením odkazy s tematickými blogmi a stránkami. Ak máte túžbu, napíšte.

V pokračovaní vyššie uvedeného vysielam strážcu.

Zaujímaš sa o webdizajn? Vytvárate webové stránky? Potom na portáli Web 2.0 nájdete veľa zaujímavostí.

Pekný deň všetkým! Dnes sa naučíme, ako vytvoriť drôtený model pre našu prvú HTML stránku. Alebo sa radšej pozrime na základnú štruktúru html stránky a zistime, z čoho pozostáva. Najprv si však povedzme niečo málo o tagoch.

V čom je značkaHTML?

Značka je základným prvkom jazyka HTML. To znamená, že HTML pozostáva práve zo značiek a na to, aby ste sa naučili HTML, stačí naštudovať si základné značky, ktoré sa najčastejšie používajú. V porovnaní s príkladom zo skutočného života tag v HTML je to ako tehla pre domov. Tehla je hlavným prvkom, ktorý sa používa na stavbu domu. To isté platí aj v HTML, tag je základným prvkom pre vytvorenie HTML stránky. Pomocou tagu hovoríme prehliadaču, ako má správne zobraziť obsah html stránky.

Existujú dva typy značiek: spárované značky A jednotlivé značky:

  • Spárované značky Ide o značky, ktoré sa skladajú z otváracej značky a uzatváracej značky. V skratke ide o značky, ktoré majú uzatváraciu značku. Príklady: A; A; A ; A

    ; ;
  • Jednotlivé značky Ide o značky, ktoré nemajú uzatváraciu značku. Príklady jednotlivých značiek:
    .

html stránka má základná štruktúra. Základná štruktúra na všetkých stránkach webu vyzerá rovnako. Jediné, čo sa môže líšiť v základnej štruktúre stránok na jednotlivých stránkach, je prvok DOCTYPE. Ak chcete zistiť, čo je DOCTYPE a aké typy existujú, prečítajte si tento článok. Ak tento prvok nešpecifikujeme, prehliadač zobrazí stránku nesprávne.

Takto vyzerá ten základný rámhtml stránky:

Domovská stránka

Ak teraz otvoríme túto stránku v prehliadači, bude prázdna. Teraz do značky pridáme pár riadkov kódu telo a znova otvorte túto stránku v prehliadači.

Moja prvá html stránka

Takto vyzerá stránka v prehliadači po zmene kódu:


Poďme analyzovať tento príklad

Na začiatku stránky, pred značkou html vždy uviesťDOCTYPE, teda typ dokumentu.

Každá html stránka začína na tag< html> a končí taghtml> a skladá sa z hlavičky < hlava>hlava> a telá < telo>telo>.

Prvky služby, ktoré nie sú zobrazené na stránke v prehliadači, sú zapísané vo vnútri hlavičky. hlavne:

  • Meta tagy. Hlavnými sú m kódovanie značky eta, prostredníctvom ktorého označujeme kódovanie stránky ( ), metaznačky pre vyhľadávače, toto meta tags popisom stránky (popis) A kľúčové slová pre stránku (Kľúčové slová).
  • Názov stránky, ktorý je uvedený vo vnútri značky < názov>názov>. Tento názov sa zobrazí na karte prehliadača.
  • Blok s vnútornými štýlmi. < štýltyp=”text/css”>Interné štýly.
  • Jediný štítok < odkaz />, cez ktorý pripájame externé súbory.
  • A tiež blok < skriptsrc=" library.js" typu=" text/javascript" > skript> v ktorých sú napísané rôzne scenáre JavaScript.

Vo vnútri štítku < telo>telo> obsah stránky je napísaný. Obsah môže obsahovať text, obrázky, tabuľky, zoznamy, odkazy a ďalšie prvky, ktoré sa zobrazujú na stránke v prehliadači.

Názvy značiek sa dajú písať v každom prípade, teda ak píšeme < BODY>,< bOdY>,< Telo> alebo < telo>, potom bude výsledok rovnaký, ale odporúča sa to vždy písať malými písmenami, to jest < telo>.

To je hádam všetko. Z tohto malého, ale veľmi dôležitého článku ste sa dozvedeli, ako to vyzerá základná štruktúra html stránky.

Ak vytvárate šablónu od začiatku, musíte začať od niečoho. Vzhľadom na to, že štandard HTML5 je „rozšírený po celej krajine“, v tomto článku uvediem príklad prázdnej šablóny HTML5.

Nový štandard veľa zjednodušil a teraz základná časť vyzerá takto:

...

Nové značky HTML5

HTML5 zavádza niekoľko nových značiek pre štruktúru kódu:

,
Najnovšie články
Populárne články
Voľba editora

Stránky pomocníka pre počítače

© Copyright 2024,
rzdoro.ru -Webová stránka pomocníka pre počítače

  • Kategórie
  • Programy
  • Microsoft Office
  • internet
  • Linux
  • Programy
  • Microsoft Office
  • internet
  • Linux
rzdoro.ru