Internet cvičení (X)HTML Jakub Klímek

Internet – cvičení (X)HTML Jakub Klímek

XML and Web Engineering Research Group Faculty of Mathematics and Physics Charles University, Prague Czech Republic

Agenda   

Požadavky na zápočet jsou na webu Deadline na témata: 30.11.2011 23:59 Deadline: 13.1.2012 23:59  Nechte si rezervu, úkol se vám nemusím uznat a můžete odevzdávat vícekrát





Každé odevzdání snižuje možnou známku o 1, kontrolujte zda máte vše co se po vás chce Informace: http://www.ksi.mff.cuni.cz/~klimek/teaching/#Internet Internet – (X)HTML

2

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

Internet – (X)HTML

3

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/>


4

XML – jak to vypadá - Element 

2 typy  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>


5

XML – jak to vypadá - Obsah 

Obsah elementu – 4 typy  Prázdný - <můj_tag/>  Textový - <můj_tag>Můj text  Elementový <můj_tag><jiný_tag/>  Smíšený <můj_tag>T<jiný_tag>Text


6

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 


7

XML - pravidla 

Záleží na velkých a malých písmenech  Nelze: <Můj_tag>



Správné uzávorkování  Nelze:



Pouze jeden kořenový element  Celý XML dokument má tvar stromu



První řádek dokumentu obsahuje hlavičku    

Encoding je použité kódování znaků Nejlépe Unicode UTF-8 Lze i ISO8859-2 nebo Windows-1250 Internet – (X)HTML

8

XML - Příklad <popis> Tohle je moje fotka ze dne: <den>2.<měsíc>12. 2009 Internet – (X)HTML

9

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"  ... Internet – (X)HTML

10

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


11

(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, 1.1 XHTML 1.1 


12

XHTML – struktura dokumentu   

Kořenový element 2 podelementy a obsahuje informace o stránce, které se nezobrazují  Výjimka: element obsahuje text, který se zobrazí v titulku prohlížeče  <body> je vlastní obshah stránky  - odstavec  <h1> - <h6> - Nadpisy dle váhy, <h1> nejvyšší Internet – (X)HTML 13 XML - namespaces    Různé dokumenty mohou používat stejné názvy elementů v různých významech Aby se předešlo zmatkům, zavádí se prostory jmen – namespace Identifikátor namespace je URI  http://www.w3.org/1999/xhtml  Pro namespace se v dokumentu zavede jméno  Jako atribut xmlns elementu, uvnitř kterého budu namespace používat  <e xmlns:N="http://www.w3.org/1999/xhtml" />  Poté se elementy z namespace N značí <N:e/>  Lze zavést výchozí namespace bez označení Internet – (X)HTML 14 XHTML – základní příklad <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs"> <head> <title>Moje první stránka
Můj první nadpis

Test


15

XML - 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 Internet – (X)HTML

16

XHTML – jak na to? 

Když nevím jak udělat to co chci (užitečné odkazy)  Použiji Google  Seznam tagů: http://www.w3schools.com/tags/default.asp • XHTML 1.1 vychází z XHTML 1.0 Strict – používejte tedy jen tagy označené jako "S"

 Jestliže to najdu jinde, podívám se na zdrojový kód stránky jestli to nejde opsat


17

XHTML – zajímavé tagy - seznamy 

Seznamy    

- Číslovaný seznam (Ordered list)
- Nečíslovaný seznam (Unordered list)
- Položka seznamu (List Item) Příklad: •
–
První
–
Druhá

•


18

XHTML – zajímavé tagy - tabulky 

- Tabulka  - Řádek tabulky (Table Row) 
- Záznam uvnitř řádku (Table Data)  Příklad: • – –

•
1-1 1-2 1-3
2-1 2-2

 Tabulka nemusí mít v každém řádku stejný počet buněk (sloupečků) Internet – (X)HTML

19

XHTML – zajímavé tagy - 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 – V našem případě je to text Google, ale může to být cokoliv jiného » I složitého jako tabulka, obrázek, odstavec, seznam, …

 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í … Internet – (X)HTML

20

XHTML – zajímavé tagy - obrázky 

- Obrázek (Image)  Slouží pro vkládání obrázků   Atribut src udává URL souboru s obrázkem  Atribut alt udává textový popis obrázku • Objeví se když jsou obrázky vypnuté, když nelze obrázek načíst

 Atribut usemap udává id klikací mapy  Atributy width a height mohou udávat rozměry  Povinné atributy: src a alt


21

XHTML – klikací mapa 

<map>  Atribut id – udává id mapy, na které se dá odkazovat třeba z  Podelementy <area> - klikací oblasti • Atribut href – kam vede odkaz • Atribut alt – náhradní text • Atributy shape a coords – tvar a rozměr oblasti – shape="rect" – coords="x1,y1,x2,y2" – krajní body obdélníka – shape="circle" – coords="x,y,r" – střed a poloměr kružnice – shape="poly" – coords="x1,y1,x2,y2,…,xn,yn" – body polygonu


22

XHTML – klikací mapa - příklad <map id="planetmap" name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"/> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"/> <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"/> Proč používám atribut name? Mapa je různě definována v HTML, XHTML 1.0 a XHTML 1.1 Navíc každý prohlížeč podporuje něco jiného XHTML 1.1: atribut usemap elementu img nesmí obsahovat #. Element map musí mít atribut id, nesmí mít atribut name. Tedy: <map id="planetmap"/> Takto to ale žádný prohlížeč nepodporuje


XHTML 1.0 Strict: atribut usemap elementu img tvaru #planetmap. Element map musí mít atribut id. Tedy: <map id="planetmap"/> Takto to ale umí jen IE a Opera Neumí: Firefox, Safari, Google Chrome Oprava: přidat i atribut name se stejnou hodnotou, který v XHTML 1.0 být může – viz příklad nahoře

HTML 4.01: atribut usemap elementu img tvaru #planetmap. Element map musí mít atribut name, nesmí mít atribut id. <map name="planetmap"> Takto to funguje všude, ale není to XHTML 23

XHTML – další tagy 

 

- pro zdrojové kódy – použije písmo se stejnou šířkou všech znaků - označuje kontakt na majitele XHTML dokumentu - Seznam definic, obsahuje:  - Definition description  - Term  …     Tagy pro formuláře – ještě dnes Tagy pro formátování (, ) – bude příště - tučný text, - kurzíva, vodorovná čára - XML komentář Internet – (X)HTML 24 XHTML - poznámka    Až budete nahrávat svůj web na internet, hlavní stránka se jmenuje index. Přípona je .html, .htm, (později .php) dle potřeby Tzn. http://www.ksi.mff.cuni.cz/~klimek ve skutečnosti ukazuje na http://www.ksi.mff.cuni.cz/~klimek/index.php Internet – (X)HTML 25 XHTML – poznámka - adresy     Adresy na webu mohou být absolutní nebo relativní Absolutní: vždy plná cesta. Např. http://www.ksi.mff.cuni.cz/~klimek Relativní: jen rozdílná část Jsem-li tedy na stránce http://www.ksi.mff.cuni.cz/~klimek a chci odkaz na stránku http://www.ksi.mff.cuni.cz/~klimek/teaching stačí mi napsat blabla Internet – (X)HTML 26 XHTML - Formuláře   Pro sběr dat od uživatele Element  atribut method – hodnota post nebo get • post – data se předávají vůči uživateli neviditelně • get – data se předávají v adrese stránky – lze ukládat odkazy  atribut action – URL stránky, kam se data posílají   Podelementy <select> Podelementy  atribut name udává jméno, pod kterým se vstup bude dále zpracovávat  atribut type rozhoduje o funkci/vzhledu • text, password, radio, checkbox, file, button, reset, submit, image, hidden Internet – (X)HTML 27 XHTML – Elementy 1  text – pro vložení jedné řádky textu  atribut maxlength – maximální délka textu   password – to samé, ale místo textu se zobrazují zástupné znaky (není vhodné používat s metodou GET) radio – volba, u všech položek ve skupině musí být name stejné  atribut value – jaká hodnota se předá pro zpracování  atribut checked="checked" – výchozí hodnota: zvoleno  checkbox – vícenásobná volba, jinak stejné jako radio  Pro následné zpracování ve formě pole je nutné atribut name ukončit []  Jinak může mít každá volba jiné jméno Internet – (X)HTML 28 XHTML – Elementy 2       submit – tlačítko pro odeslání, atribut value obsahuje text reset – tlačítko pro vyčistění formuláře, atribut value obsahuje text hidden – skrytý element, používá se pro výchozí hodnoty a nebo pro změny JavaScriptem image – udává obrázek místo tlačítka pro odeslání file – pole pro odeslání souboru button – tlačítko které nic nedělá (využití JavaScriptem), atribut value obsahuje text Internet – (X)HTML 29 XHTML - <select>   Element <select> se používá pro seznam, ze kterého se dá vybírat Podelementy Internet – (X)HTML 31 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 Internet – (X)HTML 32 Formátování - CSS    Formátování vzhledu již není součástí XHTML Používají se k tomu styly CSS CSS – Cascading Style Sheets  XHTML obsahuje data k zobrazení  CSS říká jak je zobrazovat  Bude příště Internet – (X)HTML 33 Report "Internet cvičení (X)HTML Jakub Klímek" Your name Email Reason Description Copyright © 2024 ADOC.PUB. All rights reserved. About Us | Privacy Policy | Terms of Service | Copyright | Contact Us | Cookie Policy Sign In Email Password Remember me Forgot password? Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close

Internet cvičení (X)HTML Jakub Klímek

Pohlaví

Majetek

Rodinný stav

Internet cvičení (X)HTML Jakub Klímek

Recommend Documents

Můj první nadpis

Pohlaví

Majetek

Rodinný stav