HTML - Úvod. Zpracoval: Petr Lasák

Rozměr: px

Začít zobrazení ze stránky:

Download "HTML - Úvod. Zpracoval: Petr Lasák"

Marta Krausová
před 8 lety
Počet zobrazení:

1 HTML - Úvod Zpracoval: Petr Lasák

2 Je značkovací jazyk, popisující obsah HTML stránek Je z rodiny SGML jazyků, jako např. XML, DOCX, XLSX Nejedná se o programovací ale značkovací jazyk Dynamičnost dodávají jiné jazyky Javascript, PHP Jedná se o množinu značek, kterými lze prokládat text Slouží k popisu webových stránek

3 Soubor s příponou.htm nebo.html Je to jedno, která první je jenom z historického hlediska Pro psaní čistého HTML nepotřebujeme ani server, ani browser ani nějaký HTML Editor Zvláštní postavení index.html nebo index.php Pokud máme začleněn kód v stránce, tak je nutné zde mít index První se hledá.php až pak.html Lze nastavit i jiné řešení

Pro označení textu slouží HTML značky Jsou uzavřeny do tagů - < a > Párové tagy Otevírací a zavírací (mají před jménem znak /) Nepárové tagy Mají před koncovou > znaménko / HTML

4 Pro označení textu slouží HTML značky Jsou uzavřeny do tagů - < a > Párové tagy Otevírací a zavírací (mají před jménem znak /) Nepárové tagy Mají před koncovou > znaménko / HTML dokument s tagy = HTML stránka Je zobrazena v Prohlížeči Ten rozumí jazyku HTML a provede příslušnou úpravu tagy nejsou zobrazeny, význam ANO! Mozilla, Firefox, Opera, Chrome, Internet Explorer

5 HTML elementy vše co je zavřeno v tagu Od začínajícího tagu po uzavírací tag Obsah elementu vše bez ohraničujících tagů Některé elementy mají prázdný obsah nepárové Elementy se mohou do sebe vnořovat Vnoření musí být dobře uspořádané Proto je skoro nutné psát uzavírací tagy!!! Je dobré psát malými písmeny názvy tagů

6 Skoro všechny elementy mohou mít atributy Jsou příslušný danému elementu mají omezenou působnost na daný element Dodávají doplňující informace danému atributu Jsou zapsány vždy v otevíracím tagu Mají tvar jmeno= hodnota Vždy jméno malým písmenem a hodnotu uzavřít do uvozovek

7 Různé vývojové verze dovolují různé možnosti Aby prohlížeč věděl, co jak a co má zobrazit je potřeba určit standard Strict, Transitional, Frameset Od nejpřísnějšího až po nejméně přísný Strict nedovolí stylování textu Oddělení obsahu a vzhledu Transitional dovolí míchání stylů a textu Existuje kvůli zpětné kompatibilitě Frameset kvůli povolení rámců

HTML vs XHTML XHTML je přísnější na definici a dobré uzavření Obsahuje i atribut značky html, který určuje jakou verzi použít Oba standardy jsou ve verzi Strict, Transitional a Frameset XHTML 1.

8 HTML vs XHTML XHTML je přísnější na definici a dobré uzavření Obsahuje i atribut značky html, který určuje jakou verzi použít Oba standardy jsou ve verzi Strict, Transitional a Frameset XHTML 1.1 navíc dokáže ještě loadovat moduly <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Před prvním tagem ve stránce

9 <html> a </html> Vymezují rozsah HTML stránky Atribut xmlns=" Ta je rozdělena vnitřně na hlavičku a tělo <head> a </head> Vymezují hlavičku Obsahuje především popis obsahu stránek Klíčové slova, kódování stránky, refresh interval, styly <body> a </body> Vymezují tělo stránky Samotný obsah stránek Text, obrázky, odkazy, javascripty

10 <title> a </title> Titulek dané stránky <meta /> Určuje meta informace o stránce http-equiv typ meta informace Spolu s dalším upřesněním hodnoty <style> a </style> Styl definovaný přímo v hlavičce <script> a </script> Definice JavaScriptu přímo v hlavičce

11 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> Určuje typ obsahu a kódování stránky <meta name="description" content="free Web tutorials on HTML, CSS, XML" /> Určuje popisek stránek, které indexují některé vyhledávače <meta name="keywords" content="html, CSS, XML" /> Určuje klíčové slova, podle kterých indexují některé vyhledávače <meta http-equiv="expires" content="wed, 21 June :25:27 GMT"> Nastaví hodnotu, kdy vyprší platnost stránek a lze jí uchovat v cache Nebo jiné nastavení cachování nebo reloadu stránky

12 <div> a </div> Slouží na označení logického celku obsahu Dělí obsah na bloky <p> a </p> Slouží na označení odstavce Mohou být vnořeny do div tagu, né naopak <span> a </span> Slouží k označení části textu v odstavci Mohou být vnořeny do p tagu, né naopak

13 Slouží ke strukturování textů Vyhledávače podle nadpisů indexují obsah Mají hierarchii a jsou všechny párové <h1> a </h1> <h2> a </h2> <h3> a </h3> <h4> a </h4> Čáry také oddělují text - <hr />

Jelikož některé znaky mají v HTML speciální význam, musí se nahradit Mají tvar &hodnota; http://www.w3schools.com/html/html_entities.

14 Jelikož některé znaky mají v HTML speciální význam, musí se nahradit Mají tvar &hodnota; p Hlavní < > & Jelikož & má zvláštní význam v URL tak je potřeba ho nahradit v URL - pevná mezera HTML totiž ignorují vícenásobné bílé znaky

15 Podobně jako <span> existují i párové tagy, které vymezený kus textu i formátují <tt> - použije telegrafický formát Proporcionální písmo <i> - italica, <b> - bold <sub> - dolní index <sup> - horní index <pre> - zobrazí přesně tak, jak je napsáno v zdrojové stránce <big> - zvětšení písma <small> - zmenšení tting.asp

K vkládání obrázku do stránky je tag <img /> Nejdůležitější atribut je src zdroj obrázku Povinný atribut Zdroj může být adresa na serveru nebo samotný obrázek Další povinné

16 K vkládání obrázku do stránky je tag <img /> Nejdůležitější atribut je src zdroj obrázku Povinný atribut Zdroj může být adresa na serveru nebo samotný obrázek Další povinné atributy: alt alternativní text, pokud jsou vypnuté obrázky Další zajímavé atributy: title text zobrazení po najeti myší border rámeček okolo obrázku width, height rozměry obrázku

Jsou vázány na nějaký obsahu Obalují nějaký viditelný kus stránky pomocí párového tagu <a> Nejsou povinné atributy, ale důležitý atribut je href cíl odkazu

17 Jsou vázány na nějaký obsahu Obalují nějaký viditelný kus stránky pomocí párového tagu <a> Nejsou povinné atributy, ale důležitý atribut je href cíl odkazu URL buď absolutní nebo relativní vůči serveru Sekce na dané stránce Lze kombinovat s URL Definování sekce Pomocí <a name= jmeno > Odkaz pomocí <a href= #jmeno >

18 Přehledné rozdělení tagů s popisem Tutoriál HTML, CSS a W3C krok po kroku Popis standardů Validace stránky, zda odpovídá zvolenému DOCTYPE

Podobné dokumenty

NSWI096 - INTERNET. Úvod do HTML

NSWI096 - INTERNET. Úvod do HTML NSWI096 - INTERNET Úvod do HTML XHTML CO TO JE? XML extensible Markup Language Sada pravidel, jak kódovat dokumenty Podle těchto pravidel lze vytvořit nekonečně mnoho různých jazyků HTML HyperText Markup