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 Language Jazyk pro tvorbu WWW stránek XHTML extensible HyperText Markup Language "kombinace Je to jazyk HTML přizpůsobený pravidlům XML Dnes už převážně XHTML Vzhledem k více méně kosmetickým rozdílům budeme používat jen XHTML
XML JAK TO VYPADÁ - TAG Řetězec uzavřený v ostrých závorkách <můj_tag> Mají 3 typy Start-tag: <můj_tag> End-tag: </můj_tag> Empty-element tag: <můj_tag/>
XML JAK TO VYPADÁ - ELEMENT Dvojice Start-tag, end-tag se stejným názvem <můj_tag>...</můj_tag>... se nazývají obsah elementu. To může být jak text, tak další elementy Empty-element tag říká že element nemá žádný obsah <můj_tag/> Stejné jako <můj_tag></můj_tag>
XML JAK TO VYPADÁ - OBSAH Prázdný <můj_tag/> Textový <můj_tag>můjtext</můj_tag> Elementový <můj_tag><další_tag/><jiný_tag/></můj_tag> Smíšený <můj_tag>t<jiný_tag>text</jiný_tag></můj_tag>
XML JAK TO VYPADÁ ATRIBUTY Dvojice název/hodnota uvnitř Start-tagu nebo Empty-element tagu Například number="3" Příklady Název number Hodnota 3 <položka id="123">toto je položka</položka> <značka id="456"/>
XML - PRAVIDLA Záleží na velkých a malých písmenech Nelze: <Můj_tag></můj_tag> Správné uzávorkování Nelze: <Tag1><Tag2></Tag1></Tag2> Pouze jeden kořenový element Celý XML dokument má tvar stromu První řádek dokumentu obsahuje hlavičku <?xml version="1.0" encoding="utf-8"?> Encoding je použité kódování znaků Nejlépe Unicode UTF-8 Lze i ISO8859-2 nebo Windows-1250
XML - PŘÍKLAD <?xml version="1.0" encoding='utf-8'?> <záznam> <img src="fotka.jpg" alt="moje fotka"/> <popis> Tohle je moje fotka ze dne: <datum> <den>2</den>.<měsíc>12</měsíc>. <rok>2009</rok> </datum> </popis> </záznam>
HTML JAK TO VYPADÁ Je to sada tagů, atributů a pravidel, jak tyto tagy a atributy mohou být umístěny Tagy: html, body, head, h1, h2, div, span,... Atributy: id, src, ref,... Pravidla "Tag head musí být jen v tagu html a to právě jednou "Tag img musí mít atribut src...
HTML VS. XHTML HTML není XML, XHTML je XML V HTML je možné mít třeba start-tag a ne endtag <p>, <br> Aby to bylo XML a tedy XHTML, musí to být správně uzávorkované <p/>, <br/> nebo <p></p>, <br></br> Další rozdíly, v podstatě vychází z HTML 4.01
(X)HTML HLAVIČKA DOKUMENTU HTML i XHTML dokument má hlavičku říkající podle které verze W3C doporučení je dokument napsán HTML: 4.01 XHTML: 1.0 Strict, 1.0 Transitional, 1.0 Frameset, XHTML 1.1 navíc moduly <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> Před prvním tagem ve stránce http://www.w3schools.com/tags/tag_doctype.asp
XHTML - MOJE PRVNÍ STRÁNKA 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í
XHTML - ZÁKLADNÍ DĚLENÍ STRÁNKY <html> a </html> Vymezují rozsah HTML stránky Atribut xmlns="http://www.w3.org/1999/xhtml" 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
XHTML - HLAVIČKA HTML STRÁNKY <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
XHTML - HLAVIČKA - ZAJÍMAVÉ METATAGY <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 2006 14:25:27 GMT"> Nastaví hodnotu, kdy vyprší platnost stránek a lze jí uchovat v cache
XHTML TĚLO BLOKOVÉ ELEMENTY <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
XHTML TĚLO NADPISY A ČARY Slouží ke strukturování textů Vyhledávače podle nadpisů indexují obsah Mají hierarchii a jsou všechny párové <h1> až <h6> Čáry také oddělují text - <hr />
XHTML TĚLO FORMÁTOVACÍ TAGY 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í http://www.w3schools.com/html/html_formatting.asp
XHTML TĚLO SEZNAMY Seznamy <ol> - Číslovaný seznam (Ordered list) <ul> - Nečíslovaný seznam (Unordered list) <li> - Položka seznamu (List Item) Příklad: <ul> <li>první</li> <li>druhá</li> </ul>
XHTML TĚLO ENTITY Entita kód pro text Pro web nejzajímavější: & & < < > > " " Obecně lze v XML definovat vlastní, tady na to zapomeňte Příklad: H&M se v XHTML píše: H&M
XHTML TĚLO OBRÁZKY 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
XHTML TĚLO ODKAZY <a> - Kotva (Anchor) Hlavní použití jako odkaz <a href="http://www.google.com">google</a> Atribut href udává URL kam odkaz vede Obsah elementu <a> je to, na co budu klikat Další použití jako cíl odkazu v rámci stránky (Bookmark) <a id="odstavec2"> </a> Atribut id udává identifikátor, na který se pak dá odkázat Pomocí <a href="#odstavec2"> </a> Nebo z jiné stránky pomocí <a href="http://www.google.com#odstavec2"> </a>
XHTML - ADRESACE Adresy na webu mohou být absolutní nebo relativní Absolutní - vždy plná cesta http://www.ksi.mff.cuni.cz/~lasak/nswi096.php Relativní - jen rozdílná část Jsme na stránce http://www.ksi.mff.cuni.cz/~lasak/ Chceme na stránku http://www.ksi.mff.cuni.cz/~lasak/nswi096.php Stačí napsat <a href="/nswi096.php">blabla</a>
XHTML - VALIDACE Jak zjistit jestli je stránka validní? Tj. jestli vyhovuje např. XHTML 1.1 standardu? Tj. jestli už splňuje podmínku validity na zápočet? http://validator.w3.org/ Validuje přes odkaz Validuje přes nahrání HTML souboru Validuje přes zadání textu přímo do validátoru