HTML je bezpochyby hlavným jazykom internetu,vznikol u neho. Tak či onak sa podieľa na tvorbe a prevádzke každej webovej stránky v sieti WWW. Bez pochopenia toho, čo je HTML a ako funguje, je nemožné zmeniť nepretržitý prúd textu, ktorý je pôvodne akýmkoľvek dokumentom, na štruktúrovanú, krásnu a užívateľsky prívetivú stránku.
HTML a World Wide Web
Skratka je odvodená z angličtinyFrázy v značkovacom jazyku HyperText. Preklad úplne vysvetľuje, čo je to HTML - je to hypertextový značkovací jazyk. Objavil sa na úsvite vývoja internetu a bol určený na tvorbu webových stránok obsahujúcich vedeckú a technickú dokumentáciu, ktoré je potrebné predovšetkým správne naformátovať.
Navrhoval to Tim Berners-Lee, tvorca jazykas jeho pomocou bude možné ľahko vytvoriť jednoduché, ale zrozumiteľné dokumenty na výmenu medzi vedcami z rôznych miest a krajín. Vyvinul súbor deskriptorov - prvkov, ktoré formátujú text. Teraz ich poznáme ako „tagy“.
Potrebujete správne zobrazenie textu HTMLspracováva to. To sa deje pomocou špeciálnych programov - prehľadávačov. Dostávajú značkovaciu stránku, interpretujú deskriptory značiek a zobrazujú text tak, ako by ho mal používateľ vidieť.
Veľmi dôležitá súčasť jazyka, ktorá je zrozumiteľná dokonca aj z jazykajeho názov je podpora hypertextu. To znamená, že niektoré stránky HTML môžu obsahovať odkazy na iné. Systém krížových odkazov mal pre vedecké články mimoriadny význam, pretože neumožňoval hlbšie sa zaoberať vysvetlením zložitého pojmu, ale v prípade potreby jednoducho poslať čitateľa do príslušnej kapitoly.
Rozvoj jazyka
Postupom času jednoduchá sada značiek bola HTMLna začiatku svojej existencie rástol a zosilnel. Teraz je možné vložiť multimediálny obsah na stránku, vytvárať tabuľky a ovládať usporiadanie obrázkov.
Bolo potrebné potlačiť spontánne rozširovanie jazyka a dostať ho pod kontrolu, boli potrebné určité štandardy.
1995 - čas prijatia tretej verziešpecifikácie a bod obratu v osude návrhárov dispozícií. Moderné prehliadače v tom čase už nedokázali zabezpečiť implementáciu prijatých štandardov, začala sa improvizácia a vrstvenie. Každý internetový prehliadač mal vlastný názor na to, čo je HTML a ako by sa mali interpretovať konkrétne deskriptory.
Našťastie sa hlavné konflikty medzi prehľadávačmi už vyrovnali, čo vývojárom frontendu ušetrilo veľa energie a nervov.
HTML5
Piaty štandard je relevantný pre rok 2018HTML, ktorého koncept sa objavil na konci roka 2007. Predstavil mnoho nových prvkov a atribútov s osobitným dôrazom na sémantiku webových stránok a ich prístupnosť pre zdravotne postihnutých používateľov.
Jazyk sa naďalej aktívne rozvíja a zdokonaľuje.
Základy HTML
Hlavné štruktúry HTML sú deskriptory alebo značky a entity. Obyčajný text spracovaný s ich pomocou sa zmení na webový dokument.
Entity Hypertext Markup sú mnemotechnické kódy pre špeciálne znaky Unicode, ktoré nie sú dostupné na bežných klávesniciach.
Príklady entít:
| < | otvorený uholník |
| > | konzola zatváracieho uhla |
| & larr; | tenká šípka smerujúca doľava |
| uarr; | tenká šípka smerujúca nahor |
Entity HTML začínajú znakom &,končí bodkočiarkou a obsahuje ľahko zapamätateľný kód znaku. Sú dôležité, pretože umožňujú zobraziť znaky, ktoré nie je možné priamo zapísať do kódu HTML.
Medzi tieto značky patria napríklad uhlové zátvorky. V hypertextovom značkovacom jazyku slúžia ako identifikátory značiek obklopujúce na oboch stranách názov deskriptora.
HTML tagy
Značky sú hlavnými štruktúrnymi súčasťami webového dokumentu. Sú to nádoby otváracej a zatváracej časti a obsah medzi nimi.
Príklad značky:
<i> text vo vnútri značky </i>Toto je deskriptor HTML aktorý definuje kurzíva. Písmeno i je prvé písmeno slova kurzíva. On má:
- otváracia časť
<i>; - krycia časť
</i>charakterizovaná prítomnosťou lomítka; - obsah, ktorý sa po analýze prehliadačom vykreslí kurzívou.
Väčšina deskriptorov má rovnakú štruktúru, je tu však malá skupina prázdnych značiek.
Dlhý text, ktorý by mal byť rozdelený na viac riadkov <br> aby sa zlepšila čitateľnosť.
Označiť <br> po analýze bude nahradený zlomom riadku. Nemá žiadny obsah, takže sa nevyžaduje žiadna krycia časť.
Nasledujúce značky sú tiež prázdne:
<hr>označenie tenkej šedej čiary oddeľujúcej bloky textu od seba;<vstup>predstavujúci celú rodinu interaktívnych tvarových prvkov;<img>pripojenie obrazového súboru;- množstvo servisných značiek -
<meta>,<odkaz>.
Deskriptory môžu byť vnorené do seba na ľubovoľnom počte úrovní. Jedinou výnimkou sú prázdne značky, ktoré nemôžu obsahovať obsah.
Atribúty značiek
Pri vytváraní webových dokumentov majú veľký význam atribúty, ktoré sú umiestnené v prvku otváracej značky. Deskriptor môže mať jednu alebo viac vlastností alebo vôbec žiadnu.
Vo väčšine prípadov pomocou atribútovniektoré aspekty správania sa prvku sú objasnené a niekedy môžu radikálne zmeniť vizuálnu prezentáciu. Na servisné účely sa používa niekoľko vlastností, ktoré vám umožňujú manipulovať so značkami HTML z CSS alebo JavaScript.
Nastavenie atribútu:
Vyberte farbu: <input type = "checkbox" name = "red"> Červená <input type = "checkbox" name = "yellow" checked> Žltá <input type = "checkbox" name = "green"> ZelenáTu je skupina troch interaktívnych prvkov <input>. Atribút typu definuje ich zobrazenie ako začiarkavacie políčka, názov obsahuje názov konkrétneho poľa a vlastnosť skontrolované, nedôležité, nastaví druhý vstup ako predvolený.
Pre ľubovoľný deskriptor možno definovať všeobecné atribúty a špecifické atribúty špecifické pre konkrétne značky.
Medzi univerzálne vlastnosti patria: id, trieda, titul.
Špecifické - vyššie uvedený typ, začiarknuté, rovnako ako src, href a množstvo ďalších.
Funkcie syntaxe
Po prijatí stránky HTML ju prehliadač analyzuje a vyhodí všetky nepotrebné položky. Takže vo väčšine prípadov bude viac medzier a zalomenie riadkov ignorovaných.
Nasledujúce dva úryvky kódu sú pre prehliadač úplne identické, aj keď jeden z nich obsahuje veľa po sebe nasledujúcich medzier a je rozdelený na riadky, druhý nie.
<!- prvý úryvok -> <p> Lorem ipsum <i> dolor sit </i> amet. </p> <p> <b> doloribus sunt, </b> reklamný prozreteľník. </p> <! - druhý úryvok -> <p> Lorem ipsum <i> dolor sit </i> amet. </p> <p> <b> doloribus sunt, </b> zástupca reklamy. </p>
Pomlčky a záložky sa dajú zvyknúťvizuálna štruktúra kódu, pre prehliadač však nemajú žiadny význam V niektorých prípadoch, keď je potrebné zachovať pôvodný formát textu spolu s medzerami a odsadeniami, existujú značky, ktoré zobrazujú ich obsah bez predbežného spracovania prehľadávačom, napríklad <predbežne>.
V HTML sa nerozlišujú malé a veľké písmená.To znamená, že značky, názvy a hodnoty atribútov môžu byť napísané malými alebo veľkými písmenami a prehliadač rovnako správne spracuje obe možnosti. Ak je to žiaduce, môžete dokonca použiť kombináciu veľkých a malých písmen, čo však narúša bežné vnímanie kódu.
Keď sa oboznámite so značkami, ich vlastnosťami a syntaxou, môžete prejsť od základov jazyka HTML k štruktúre dokumentu HTML ako celku.
Tvorba dokumentu HTML
Aby sa prehliadač mohol správne zobrazovať, musí mať každá webová stránka nejaký druh kostry.
Požadovaná štruktúra dokumentu HTML obsahuje:
- vyhlásenie doctype na zabezpečenie správneho vykreslenia prehliadača;
- html obal pre celú stránku;
- vyhradená servisná časť
hlava.
<! DOCTYPE html> <html> <head> <! - servisné informácie pre prehliadač a vyhľadávacie roboty -> </head> <body> </body> </html>HTML5 nevyžaduje značku telo v dokumente sa však odporúča, aby ste ho stále používali na označenie oblasti obsahu.
Dôležitými, ale voliteľnými deskriptormi služieb sú:
- názov obsahujúci názov stránky;
- metaznačky definujúce kódovanie, seo informácie, hlavičky http a ďalšie dôležité nastavenia.
<head> <title> Názov stránky </title> <meta charset = "utf-8"> <meta name = "description" content = "Popis stránky pre vyhľadávacie roboty"> </head>Inak môže byť štruktúra stránky HTML akákoľvek. Jeho vlastnosti závisia od konkrétneho projektu.
Hlavné pravidlo, ktoré sa musí dodržiavať vakýkoľvek webový dokument je správnym vnorením značiek. Najskôr sa uzavrie deskriptor na najhlbšej úrovni vnorenia a potom postupne všetky externé.
<body> <hlavný> <článok> <p> Text odseku </p> <! - odsek sa najskôr uzavrie -> </article> <! - potom článok -> </main> <! - potom hlavná značka -> </body> <! - a nakoniec text dokumentu ->Sémantická štruktúra
Ako je uvedené v špecifikácii avznik nových deskriptorov zmenil technológiu vytvárania webových dokumentov. Spočiatku išlo o texty nepretržitým prúdom, ktorý sa delil iba na odseky. Potom nastala éra rozloženia tabuľky, ktorá umožnila umiestniť bloky na stránku v akejkoľvek konfigurácii, napríklad do stĺpcov.
S vývojom CSS sa od používania tabuliek postupne upustilo, pretože štýly umožňovali navrhnúť dokument podľa želania.
Nový štandard HTML víta sémantiku v štruktúre dokumentu HTML. To sa dosiahne použitím sémantických značiek, ako je napr hlavička, päta, Hlavná, článok, nav, oddiel a ďalšie.
Hlavný jazyk internetu je veľmi jednoduchý. Ktokoľvek môže zistiť, čo je to HTML, a úspešne uplatniť tieto znalosti vytvorením vlastných webových stránok.
