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 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:  Empty-element tag: <můj_tag/> 

XML – JAK TO VYPADÁ - ELEMENT



Dvojice Start-tag, end-tag se stejným názvem <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> 

XML – JAK TO VYPADÁ - OBSAH



Prázdný 



Textový 



<můj_tag>Můjtext

Elementový 



<můj_tag/>

<můj_tag><jiný_tag/>

Smíšený 

<můj_tag>T<jiný_tag>Text

XML – JAK TO VYPADÁ – ATRIBUTY



Dvojice název/hodnota uvnitř Start-tagu nebo Empty-element tagu  Například number="3" 

Název number  Hodnota 3 



Příklady <položka id="123">Toto je položka  

XML - PRAVIDLA 

Záleží na velkých a malých písmenech 



Správné uzávorkování 



Celý XML dokument má tvar stromu

První řádek dokumentu obsahuje hlavičku 



Nelze:

Pouze jeden kořenový element 



Nelze: <Můj_tag>

Encoding je použité kódování znaků Nejlépe Unicode UTF-8  Lze i ISO8859-2 nebo Windows-1250 

XML - PŘÍKLAD <popis> Tohle je moje fotka ze dne: <den>2.<měsíc>12. 2009

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 



,

Aby to bylo XML a tedy XHTML, musí to být správně uzávorkované 



,
nebo
,

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 



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 

a 

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

a 

Vymezují hlavičku



Obsahuje především popis obsahu stránek



Klíčové slova, kódování stránky, refresh interval, styly…

a 

Vymezují tělo stránky



Samotný obsah stránek



Text, obrázky, odkazy, javascripty

XHTML - HLAVIČKA HTML STRÁNKY 

a 



Titulek dané stránky

<meta /> 

Určuje meta informace o stránce



http-equiv – typ meta informace 



<style> a 



Spolu s dalším upřesněním hodnoty

Styl definovaný přímo v hlavičce

<script> a 

Definice JavaScriptu přímo v hlavičce

XHTML - HLAVIČKA - ZAJÍMAVÉ METATAGY 

<meta http-equiv="Content-type" content="text/html; charset=utf8" /> 



Určuje typ obsahu a kódování stránky

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" /> 



<meta name="keywords" content="HTML, CSS, XML" /> 



Určuje popisek stránek, které indexují některé vyhledávače

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 





a


Slouží na označení logického celku obsahu



Dělí obsah na bloky

a


Slouží na označení odstavce



Mohou být vnořeny do div tagu, né naopak

<span> a 

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é 



až

Čáry také oddělují text -

XHTML – TĚLO – FORMÁTOVACÍ TAGY 

Podobně jako <span> existují i párové tagy, které vymezený kus textu i formátují



- použije telegrafický formát  Proporcionální písmo  - italica, - bold  <sub> - dolní index <sup> - horní index  <pre> - zobrazí přesně tak, jak je napsáno v zdrojové stránce  - zvětšení písma <small> - zmenšení  http://www.w3schools.com/html/html_formatting.asp XHTML – TĚLO – SEZNAMY   Seznamy  - Číslovaný seznam (Ordered list)  - Nečíslovaný seznam (Unordered list)  - Položka seznamu (List Item) Příklad:    První  Druhá 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  Nejdůležitější atribut je src – zdroj obrázku    Zdroj může být adresa na serveru nebo samotný obrázek Další povinné atributy:   Povinný atribut 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  - Kotva (Anchor)  Hlavní použití jako odkaz  Google  Atribut href udává URL kam odkaz vede  Obsah elementu je to, na co budu klikat  Další použití jako cíl odkazu v rámci stránky (Bookmark)  …  Atribut id udává identifikátor, na který se pak dá odkázat  Pomocí …  Nebo z jiné stránky pomocí  … 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   Chceme na stránku   http://www.ksi.mff.cuni.cz/~lasak/ http://www.ksi.mff.cuni.cz/~lasak/nswi096.php Stačí napsat  blabla 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

NSWI096 - INTERNET. Úvod do HTML

Recommend Documents

až