Jdi na obsah Jdi na menu
 


 

 Úvod do jazyka HTML

 

- pojem tag

- rozdělení tagů

- jejich zápis, vlastnosti, atributy, pravidla pro jejich tvorbu, praktické využití,

- vznik XML a XHTML

 

Jazyk HTML (Hypertext Markup Language) je programovací jazyk, který slouží k vytváření dokumentů určených pro zobrazování na Internetu. Podstatou dokumentu HTML je textový dokument ukládaný s příponou *.htm nebo *.html. Základními stavebními kameny jazyka HTML jsou jednotlivé elementy – tzv. tagy (značky). Zdrojový kód HTML není nijak překládán a dále šířen jako samostatný spustitelný soubor, po celou dobu návrhu, ladění a prohlížení zůstává v textové podobě. O jeho zobrazení se postará prohlížeč např. IE, Netscape, Opera, Mozilla Firefox,…

Prohlížeč funguje jako interpreter jazyka HTML, přečte dokument řádek po řádku a upravuje vzhled dokumentu podle předem zadaného kódu. Ke psaní zdrojového kódu můžeme použít obyčejný poznámkový blok, PSPad editor,… Jazyk HTML není case sensitive (citlivý na velikost písma), proto je úplně jedno jestli napíšeme tag velkými nebo malými písmeny.

 

Struktura dokumentu HTML

Každý dokument HTML má přesně stanovenou základní kostru. Prohlížeče bývají tolerantní k chybám, které se občas vyskytnou při psaní kódu a v podstatě nikdy se nestane, že nahlásí chybu a ukončí provádění programu jako v jiném programovacím jazyce. Pokud prohlížeč narazí na chybu, tak ji ignoruje a pokračuje další instrukcí hned za touto chybou. Občas je velmi obtížné objevit zdroj chyby, která způsobuje, že program nefunguje přesně podle představ programátora.

Svůj zdrojový kód si můžete nechat validovat např. na http://validator.w3.org

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//CZ">

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=windows-1250">

<meta name="generator" content="PSPad editor, www.pspad.com">

<title></title>

</head>

  <body>

  </body>

</html>

 

Tagy jazyka HTML

Jazyk HTML se skládá z tagů. Ty jsou jedinou částí zdrojového kódu, kde musíme dodržovat určitá pravidla. Tagy musí být psány vždy ve špičatých závorkách. Mezi levou závorkou a názvem tagu nesmí být ponechána mezera.

<html>  - správně

< html> - špatně

Vše, co je uzavřeno do špičatých závorek, je tag včetně svých parametrů a vše, co je mimo tyto špičaté závorky, je samotný obsah dokumentu.

 

Jazyk HTML dělí tagy do dvou základních skupin:

a) Párové tagy

- ovlivňují část dokumentu vymezenou právě takovou párovou značkou. Využívají se především tam, kde je třeba určitým způsobem ovlivnit pouze část dokumentu, např. ztučnit písmo, podtrhnout,…

př.: <b>Tento text bude vypsán tučně…</b>

 

b) Nepárové tagy

- tyto tagy svým významem ovlivní dokument jen jednou a potom se jejich činnosti ukončí a dokument již dále neovlivňují, např. přechod na nový řádek, vložení obrázku,…

př.:

<br>    - odřádkování                                                                       

<img src = “obrazek.jpg”>                 - vložení obrázku       

 

Pro každou verzi existuje definice pravidel DTD (Document Type Definition). Od verze 4.01 musí být odkaz na deklaraci DTD v dokumentu uveden pomocí klíčového slova DOCTYPE. DTD definuje pro určitou verzi, které elementy je možné používat a s jakými atributy.

 

Dokument může mimo značkování obsahovat další prvky:

- Direktivy - začínají znaky „<!“, jsou určeny pro zpracovatele dokumentu (prohlížeč)

- Komentáře - pomocné texty pro programátora, nejsou součástí obsahu dokumentu a nezobrazují se

  (prohlížeč je ignoruje). <!-- toto je komentář -->

- Kód skriptovacích jazyků

- Definice událostí a kód pro jejich obsluhu

 

Značky můžeme z hlediska významu rozdělit na tři základní skupiny:

- Strukturální značky jsou ty, které rozvrhují strukturu dokumentu. Příkladem jsou odstavce (<p>), nadpisy

  (<h1>, <h2>). Dodávají dokumentu formu.

 

- Popisné (sémantické) značky popisují povahu obsahu elementu. Příklad nadpis (<title>) nebo adresa  

  (<address>). Současný trend je orientován právě na sémantické značky, které usnadňují automatizované  

  zpracovávání dokumentů a vyhledávání informací v záplavě dokumentů na webu. Vyvrcholením této snahy je  

  v současné době jazyk XML.

 

- Stylistické značky určují vzhled elementu při zobrazení. Typickým příkladem je značka pro tučné písmo

  (<b>). Tento druh značek se nedoporučuje používat, trendem je používání kaskádových stylů oddělených od   

  obsahu dokumentu. Problém je především v tom, že tyto značky jsou orientovány na obrazovku monitoru,

  problémy mohou nastat při používání dokumentu jiným způsobem - alternativní prohlížeče pro postižené

  (čtečky pro slepce), v mobilních zařízeních a podobně. Kaskádové styly umožňují definovat rozdílné

  zobrazení pro různá zařízení.

 

Atributy tagu

Většina tagů má atributy, které přesněji určují význam tagů. Atributy mohou mít různé hodnoty. Například:

<font color = ”red”> text </font>

Kde font je tag, color je atribut a red je hodnota atributu.

Atributy jsou ve většině případů nepovinné. Prohlížeče jsou mimo to ohledně syntaxe HTML často velmi benevolentní. Není rozlišováno mezi malými a velkými psímeny tagů a atributů, bílé mezery jsou ignorovány (tabulátory, více mezer za sebou, odřádkování,…).

Co se týče psaní uvozovek u hodnoty atributu, máme tyto možnosti:

Oba styly zápisu jsou v HTML správné, avšak použití uvozovek je více než vhodné:

<font color = “red”>

<font color = red>                  v XHTML již špatně

Hodnota atributu složená z několika slov musí být uzavřena v uvozovkách:

<font face = “Times New Roman”>             správně

<font face = Times New Roman>                            špatně

 

 

Vnořování tagů

Obsahem tagu může být cokoliv, klidně i další značky, které text dále ovlivní.

<b><i><u><s> text bude napsán: tučně, kurzívou, podtrženě a přeškrtnu </s></u></i></b>

 

Zákaz křížení

Tag nesmí mít koncovou značku před tím, než ji budou mít všechny vnořené tagy.

<b><i> tyto tagy se kříží </b></i>

 

Velikost znaků

 

V jazyce HTML nezáleží na velikosti znaků. (Anglicky se říká, že HTML je non-case-sensitive.) To znamená, že:

·         <tag> je totéž, co <TAG>

·         atribut je totéž, co Atribut nebo ATRIBUT

·         hodnota je totéž, co HodnotA

·         <table align="left"> je totéž co <TABLE ALIGN="LEFT">

·         a jestli to ještě někomu nedošlo, tak </a> je ekvivalentní s </A>

 

Kdy si dávat pozor na velikosti znaků:

·         když se zapisuje URL (cesta k souboru). Tam se doporučuje zachovávat velikosti.

·         při zápisu Java skriptů je nutno velikosti písmen zachovávat (ale to už nepatří do HTML), ale při zápisu CSS stylů jsou velikosti lhostejné

 

Na a samozřejmě v samotném textu stránky je nutno velikosti rozlišovat.

 

Mezery v kódu

Pro zápis mezer v HTML platí následující zajímavá pravidla:

·         2 mezery jsou jako jedna

·         konec řádku je chápán jako mezera

·         tabulátor je chápán jako mezera

 

Z toho vyplývá, že:

·         3 mezery jsou chápány jako jedna mezera

·         x mezer je jako jedna mezera

·         prázdný řádek je jako jedna mezera

·         několik prázdných řádků je jako jedna mezera

·         je nutno si uvědomit, že jakkoli velký prázdný prostor v kódu uděláte, na stránce se zobrazí jedna mezera

Entity

Jak tedy ve stránce zobrazit více mezer za sebou? Třeba použitím entity &nbsp;, což je "pevná mezera".

Podobným způsobem se na stránce dělají znaky, které by se prohlížeč snažil interpretovat jako prvky jazyka, například ostrá závorka. < se dělá jako entita &lt;

Znakové entity se zapisují jako sekvence znaků. Sekvence začíná znakem & a končí středníkem. Mezi nimi je krátký písmenkový zápis daného znaku.

Asi nejdůležitější entitou je pevná mezera. Představuje jediný způsob, jak na stránce zobrazit několik mezer po sobě (odhlédněme nyní od faktu, že dvě mezery za sebou jsou v typografii chybou).

Číselný zápis entity

V rámci zvoleného kódování je možné vkládat do HTML zdroje znaky podle čísla v ASCII tabulce. Dělá se to zápisem &#číslo;

Například &#0190; je ¾. Takový znak se zobrazí vždy stejně bez ohledu na kódování dokumentu (je na to nějaká iso norma).

 

XML

 

Konzorcium W3C se rozhodlo vytvořit jazyk, který by byl stejně dobrý jako SGML, ale byl by vhodnější právě pro masové využití - a to zejména na Internetu. Velkou motivací pro tento krok byla také potřeba relevantního vyhledávání na Webu, které by měl nový jazyk řešit. Při tvorbě XML (eXtended Markup Language) si konzorcium stanovilo deset cílu, mezi něž patřila například jednoduchost jazyka, kompatibilita s SGML, absolutní minimum či úplná absence volitelných rysů, čitelnost a jasnost atp. XML je tedy v podstatě SGML s restrikcemi, které však jazyk výrazně neoslabují, ale činí ho mnohem vhodnější pro běžné použití. Například není nutné zadávat žádné pokyny pro parser - XML jednoduše používá jako oddělovače značek znaky větší než a menší než - uživatel na tom nic nezmění (nevýhoda), ale parser bude výrazně jednodušší (výhoda). Výhod je přehršel a nad nevýhodami zcela dominují: dokumenty jsou čitelné lidským okem, minimalizace volitelných rysů zabezpečuje méně nákladný vývoj aplikací s XML pracujícími, návrh dokumentů je relativně rychlý a jejich vytváření jednoduché - stačí běžný textový editor, XML se výborně hodí i pro popis semistrukturovaných dat, nejen klasických dokumentů,... Ruku v ruce s vývojem XML vznikla i sada pro kódování znaků, která by měla jednou provždy ukončit dlouhé roky se táhnoucí problém s kódováním všech světových jazyků - norma ISO/IEC 10646 Unicode.

 

Technologie a formáty související s XML

 

S jazykem XML se pojí mnoho nových technologií, které práci s ním výrazně ulehčují a obohacují. Zmíním se pouze o několika z nich.

 

Pro adresaci konkrétních částí XML dokumentu se používá jazyk XPath. Jeho princip je velmi podobný adresaci v souborovém systému. XPath je velmi mocný a zároveň dostatečně "jemný" jazyk, který otevírá uživateli širokou škálu možností jak vyznačit, co a podle jakých kritérií vybírat. Není problém vybrat elementy, jejichž nějaký atribut má nějakou požadovanou hodnotu, vybrat všechny podelementy určitého elementu, vybrat pouze některé atributy,... V současné době se už začíná hojně používat XPath verze 2.0, který přináší oproti starší verzi (1.0) "pouze" další a přesnější možnosti adresace.

 

O odkazy se stará technologie XLink. XLink definuje XML konstrukce, které popisují odkazy mezi zdroji. Ovšem tyto odkazy jsou daleko obecnější než například klasické hypertextové odkazy v HTML. Na jednom odkazu se nemusí podílet pouze dva dokumenty, ale může jich být mnohem víc, jako odkaz může fungovat libovolný element (ne pouze A element) atd.

 

Samostatnou kapitolou jsou způsoby zobrazování a formátování dokumentů. Formátovat XML dokument můžeme mnoha cestami. K dispozici máme staré dobré kaskádové styly (CSS, respektive CSS2), XSL(T) šablony či FO - formátovací objekty. Tyto nástroje dokáží buď zobrazovat XML dokumenty (čili určit, jak který element bude na obrazovce vypadat) nebo podle nějakých pravidel zcela změnit jejich strukturu - vytvořit z nich třeba XHTML dokumety, (La)TeXové zdrojové soubory, PDF soubory... Jeden dokument tak můžeme použít jak pro tisk klasické publikace na papíře, tak i pro vhodnou elektronickou prezentaci na Webu, CD-ROM,...

 

Specifikací a standardů je samozřejmě mnohem víc, kupříkladu XPointer (odkazy v rámci dokumentu), XInclude ("vnoření" XML dokumentu (nebo holého textového souboru) do jiného XML dokumentu), XMLBase (explicitní specifikace URI dokumentu pro řešení relativních URI v odkazech na externí obrázky, kaskádové styly,...) atp. Dále jsou to jiné způsoby definice typu dokumentu, které se snaží nahradit již přece jen poněkud obstarožní a nepružné (ale stále nejpoužívanější) DTD - XMLSchema, Relax NG, Schematron...

 

XHTML, WML, MathML...

 

S příchodem každé nové technologie se řeší problém co nejméně bolestivého přechodu na tuto technologii. Zavádění všech doporučení a formátů návazných k XML je velmi zdlouhavé a pomalé, navíc většina z těchto formátů je v neustálém vývoji, tedy nějaká jejich stabilní a dobrá implementace je jen těžko myslitelná, natož proveditelná. Proto konzorcium W3C sáhlo po elegantním řešení: redefinovat HTML 4.0 jako instanci XML. Vznikl tak jazyk XHTML (eXtended HyperText Markup Language) verze 1.0, který má totožnou sadu značek jako HTML, ale je formálně definovanou instancí XML, čili může plně využívat všech (i teprve potencionálních) vymožeností XML. Přitom zůstává zpětně kompatibilní, a tedy běžný uživatel brouzdající po Webu by v okně svého prohlížeče změnu vůbec neměl poznat. Převod HTML na XHMTL je navíc poměrně jednoduchá záležitost - existují šikovné prográmky, které to dokážou automaticky, a v nejhorším případě to lze udělat i ručně, stačí provést pár úprav. Názvy elemetů malými písmeny, hodnoty atributů uzavřené v uvozovkách, správně vnořené (tedy nepřekřížené) elementy, elementy uzavřené koncovými značkami,... to jsou některé požadavky, které musí dokumenty v XHTML mít a HTML je nevyžadovalo. Mimochodem, odstranění těchto syntaktických chyb umožňuje například psaní jednodušších prohlížečů - na zpracování takových dokumentů si totiž vystačíme s pouhým zásobníkem - a i taková maličkost má dalekosáhlé následky... XHTML můžeme tedy opustit s konstatováním, že je mezistupněm mezi HTML a XML.

 

 

Budoucnost HTML

Vývoj jazyka HTML byl původně ukončen verzí 4.01. Dle W3C měl další vývoj psaní dokumentů na web patřit XHTML. Některým lidem se však vývoj okolo XHTML nezamlouval. Část z nich včetně některých tvůrců webových prohlížečů jako například Mozilla Foundation, Opera Software či Apple založili iniciativu WHATWG, jejíž cílem bylo vytvořit novou verzi HTML, která byla často označována jako „HTML 5“.

 

7. března 2007 W3C založilo novou pracovní skupinu HTML, jejíž cílem je v roce 2010 uvolnit specifikaci nové verze HTML. Po hlasování bylo určeno[1], že nová verze ponese označení HTML 5.0 a že zpočátku bude založena na specifikacích Web Applications 1.0 a Web Forms 2.0 z iniciativy WHATWG, které budou upravovány. Kromě toho pracuje W3C dále i na specifikacích XHTML 2.0 a XForms, které původně považovala za další směr vývoje.

 

 

 

 
 

 

Portrét



Poslední fotografie




Archiv

Kalendář
<< červenec / 2022 >>