HTML/Juandev

Původní zápis z kurzu na anglické Wikiverzitě naleznete v archivu.

Tak po tom, co jsem chvíli bojoval s tím, jak začít svoji dráhu IT studenta, jsem konečně na stránkách Web designu našel link na školu HTML: [1]. Čili považuji za férové si napřed nastudovat HTML zde, pak i XHTML a CSS a případně mezitím studovat en:Web design.

Dobré linky

odsud studuju
HTML element - tohle mi pomáhá
a tohle by mohlo taky (neb je to česky:)
W3C validátor - tím se testuje kód
přísnější český validátor

Co k tomu potřebuji?

NotePad
vyhledávač (zatím používám IE 7 a SeaMonkey 1.1.14)

Zpětná vazba

vzhledem k tomu, že je celý kurz chráněn autorskými právy, tak nebudu moci tak často přispívat zde do svého poznámkového bloku, nicméně si myslím, že zveřejnění mého pracovního záznamu, či stránek, které vytvořím, není od věci
jo, konečně se dobírám k souvislostem, které nebyly vyřčeny. Óooo, není nad dobře metodicky zpracovaný kurz. Přišel jsem třeba na to, že HTML 4.01 strict byl navržený tak, aby se doplňoval s CSS. Proto si to teď budu muset ještě jednou projít pro příchuť trasitional.
HTML je očividně navržen pro typologii angličtiny. U jiných jazyků to pak pokulhává. Chtělo by to vyvinout něco jednoduchého a univerzálního. Jsem o tom přesvědčen i po té, co mě to řada lidí na IRC vyvrací.
hmm, dalším současným problémem může být "nesting tags", validátory mi ukázali, že ne vždy to zcela dobře skládám

Pomůcky

U tohoto kurzu, nepotřebuju de facto nic, protože mi nabízí i vlastní konvertér. Na jedné straně okna text na druhé co se zobrazí (otázka, ale je jakému browseru toto zobrazení odpovídá). Ale přesto:

edituji v NotePadu
otvírám v IE 7 (FF či SeaMonkey)
ukládám na Sandbox Server
mentor: ?

1. hodina

seznámil jsem se s tím, jak kurz vypadá
protože nemůžu tady kopírovat strukturu tak alespon vytvářím stránku k tomu co jsem se naučil a tak:

<html>
<body>
<h1>Zaklady HTML - o tom co jsem se dnes naucil</h1>
<h2>Uvodem</h2>
<p>Uvodem je treba vysvetlit proc je tato stranka psana bez hacku a carek. Je to z jednoho prosteho duvodu. Vse co potrebuji k zapisu HTML je na anglicke klavesnici. No a proto, abych urychlil svoji praci s HTML tak v procesu tohoto uceni a nezvazne tvorby webovych stranek pisi na teto anglicke klavesnici.</p>
<p><b>Je take treba upozornit, ze ke zformativani teto lekce pouzivam i znalost, kterou uz mam. Jinak bych toho asi nebyl schopny:-]</b></p>
<h2>Co jsem se dnes naucil</h2>
<p><b>HTML</b> je zkratka pro <b>H</b>yper <b>T</b>ext <b>M</b>ark-up <b>L</b>anguage, tedy jazyk, ktery pomoci ruznych znacek meni vzhled textu a stranky, nemeni se vsak obsah a vyznam slov. Je to jeden z mnoha <i>znackovacich jazyku</i>. <b>Mark-up</b>, tedy oznacovani, je napriklad i to, kdyz si treba podtrhavame nebo obarvujeme poznamky apod.</p>
<p><b>HTML znacky</b> neboli <b>HTML tags</b> jsou zakladnim kamenem formatovani textu v HTML. Jsou tvoreny nejakym "vyrazem", ktery je ohranicen z obou stran hranatymi zavorkami. HTML tagy jsou vetsinou parove, to znamena, ze text ohranicuji z obou stran v podobe <b>oteviraciho</b> [angl. <i>opening tag</i> nebo <i>start tag</i>] a <b>uzaviraciho</b> [angl. <i>closing tag</i> nebo <i>end tag</i>] tagu.</p>
<p>Dokument se pak sklada s elementu [angl. <i>elements</i>] tvorenych pocatecnim tagem, textem [nebo lepe obsahem] a koncovym tagem. Jedna se tedy o zapis ve smyslu <vyraz>obsah</vyraz>. Nedky muze mit otviraci tag i atributy s hodnotou. Jindy nejsou tagy parove.</p>
<p><b>HTML dokument</b> je vpodstate <b>HTML stranka</b> skladajici se z <i>HTML tagu</i> a <i>textu</i> [obsahu].</p>
<p>Taky jsem se dozvedel co je to tzv. <b><i>HTML character</i></b> [cesky <i>HTML entity</i>]. Je to neco co mi umozni predvest na webove strance zapis HTML tagu, neboli predvest to co je v kodu. Tedy "<" je "<" a ">" je ">". Pak zobrazeni HTML entity se provede tak, ze se zapise entita pro & [cili "&"] a za to se doplni zbyvajici znaky. Tedy v nasem pripade "lt;" a "gt;". 
<p>No a taky jsem se naucil to, jak vypada zakladni webova stranka. Tedy nejprve jde Document Type Declaration a po te samoty zformatovany obsah, kde casto byva "hlava" s "nadpisem" a nasledne "telo" dokumentu.

<h2>Jak postupuji pri tvorbe teto stranky?</h2>
<p>Prvotne pracuji s tim co jsem se naucil a rovnou to v notepadu zapisuji a formatuji se znackami HTML.</p>
<p>Jednou za cas to ulozim a natahnu do IE7, abych videl jak to vypada a pripadne poupravil vzhled textu. Pak si to vzdy prohlidnu, abych zjistil, jestli se mi to opravdu libi.</p>

<h2>Otazky</h2>
<p>Jak se jmenuje to co je mezi hranatymi zavorkami? Tagy?</p>

<h2>Postrehy</h2>
<p>Slo by jiste vytvorit nekonecnou radu zapisu jak ukazat na webove strance zapis tagu nebo entity. Mozna to jde i obejit jinym zpusobem, ale o tom zase jindy</p>
</body>
</html>

Komentáře ke kódu

2. hodina

hotovson.--Juandev 19. 1. 2009, 21:06 (UTC)

3. hodina

Zas jsem popojel o kus dál a generuji tento zdroják:

<html>
<body>
<h1>Hratky z tagy 1</h1>
<p><b>Klicova slova:</b> nadpisy, odstavce, linky, 

obrazky</p>
<h2>Nadpisy</h2>
<p>Tak se dozvidam jiz me znamou vec, ze nadpisy se 

tvori tagem <h1></h1>, coz je vlastne y 

anglickeho "heading" a oznacuje to nadpis prvniho 

radu. Tech nadpisu je celkem 6. Cili pak to muze 

vypadat, jak ukazuje nasledujici pripad:</p>
<h3>Nadpis 3</h3>
<h4>Nadpis 4</h4>
<h5>Nadpis 5</h5>
<h6>Nadpis 6</h6>
<p>Jak je videt je toto jen priklad. V kurzu Web 

designu totiz doporucuji neprohazovat urovne nadpisu 

jak se komu zlibi, ale hezky je sestupne radit. A 

tak i <b>ja</b> si to kladu na srdce.</p>
<p><i>Vesele na tom vse je, ze uz nadpis urovne 5 

vypada mensi nez samotny standardni text</i> :]</p>
<h2>Odstavce</h2>
<p>Odstavce se oznacuji opet parovym tagem 

<p></p>. No a jak vim ze sveho 

oblibeneho kurzu <b>Web designu</b>, tam kde 

odstavec ma byt at je a tam kde nema byt at neni. Je 

tedy spatne domahat se mezery vlozenim zalomeni ve 

formatu "line break" tedy <br />, coz jak jsem 

se dozvedel od <i>Mercyho</i> je dokonce XHTML 

tag.</p>
<h2>Linky</h2>
<p>No nova vec, zatim ne moc rozepsana je opet 

parovy link <a></a>. Zde zrejme to "a" 

bude oznacovat "adress". Encyklopedie vsak rika, ze 

se jedna o "hyperlink", tak nevim :[ Nicmene tenhle 

<a href="http://google.com">link</a> vystupuje s 

atributem "href" tedy "<b>h</b>yperlink 

<b>ref</b>erence" kam se proste zada cesta. 

Predpokladam, ze kdyz je to v tom samem adresari, 

tak se tam vrazi pouze jmeno souboru na ktery se 

odkazuje. Zkusme jako ve Wikipedii...<b>ale nic 

nebudem zkouset, napred se to poradne naucime a pak 

muzem <i>teoreticky</i> polemizovat</b>. Taky mi 

vrta v hlave [au!:], jestli se to da uzit bez toho 

atributu, ale nema cenu predjimat, ze</p>
<h2>Obrazky</h2>
<p>A pak je tu vesly priklad vlozeni obrazku, ale to 

si take nechme na dobu az se to bude probirat. Ted 

asi nema cenu, motat si z tim hlavu.</p>

<h1>Postrehy</h1>
<p>Jsem si dnes vsiml jedne zajimave veci, ze napr. 

IE 7 se neobtezuje cist cely tag ci entitu. U 

zakladnich tagu si precte jen <b><neco</b>. To ze 

chybi uzaviraci zavorka <b>></b> to ho uz 

nevrusuje. Stejne je to i z entitami. Napr. u entity 

oznacujici hranatou zavorku > [v zapisu <] se 

muze klidne v zapisu vyenchat ten strednik a funguje 

to taky. <b>Nicmene ja uz z dobreho kurzu Web 

designu vim, ze je dobre psat vse korektne, neb 

internetove prohlizece jsou ruzne.</b></p>
<p>Dalsi vec, ktera tady prichazi v potaz, je asi 

zpusob tvorby HTML stranky. Ted k tomu pristupuji 

tak, ze to rovnou davam do kodu, a pak to pripadne 

poupravim. V realne situaci se asi pracuji s bloky 

jiz ziskaneho textu, ktery je treba tagy nejak 

zviraznit ci usporadat.</p>




</body>
</html>

Ještě, že v HTML kodu, nehraje normální formátování žádnou roli, muhehe.

4. hodina

Dnes jsem zas o kousíček popojel:

<html>
<body>
<h1>Dnesni hodina je opet jina</h1>
<h2>Tak jak je to s temi nadpisy</h2>
<p>Je jich teda 6 urovni, jak jsme si rekly minule. 

Vznikaji tak, ze se pred a z oznacenou cast 

automaticky vlozi jedna prazdna radka</p>
<h2>Vkladani komentaru</h2>
<p>Tak jsem se taky dozvedel, jak se vkladaji 

<b>komentare</b>, tedy casti textu, ktere nejsou 

videt na webove strance</p>
<p>Pojdeme si to zkusit. Vidite neco: <!--Telatko 

bucelo v lese-->? <b><i>Nevidite, tak je to 

spravne</i> :]</b></p>
<h2>HTML dokument je vlastne organizmus - sklada se 

z hlavy a tela</h2>
<p>Od priste uz me webove stranky budou zive, budou 

mit totiz vyjma tela i hlavu :]</p>
<p>Kazda stranka je totiz ma. Hlava se vklada na 

zacatek, pomoci paroveho tagu 

<head></head>. Jedinym povinym tagem pro 

hlavu je pak [opet parovy] tag 

<title></title>. Dalsimi tagy, ktere sem 

mohou prijit jsou <a 

href="http://www.w3schools.com/tags/tag_base.asp"><base></a>, <a 

href="http://www.w3schools.com/tags/tag_link.asp"><link></a>, <a 

href="http://www.w3schools.com/tags/tag_meta.asp"><meta></a>, <a 

href="http://www.w3schools.com/tags/tag_script.asp">

<script></script></a> a <a 

href="http://www.w3schools.com/tags/tag_style.asp"><style></style></a>, ktere umoznuji 

vloteni skriptu, meta informaci apod. Co jsem zde 

objevil jako velmi prijemne bude tag 

<b><script></script></b>, ale budu se k 

tomu muset naucit Java Script :]</p>
<h2>Test vlozeni DTD:</h2>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 

Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">
<p>Vidite neco? Btw, to ze nic nevidite neznamena, 

ze to sem patri!</p>
<p>Tento problem nechavam na jindy, dnes uz jsem 

unaveny</p>
<h1>Hey! How did they do that?</h1>
<p><b>Dobra hlaska ne?!</b> To by se mohlo na neco 

pouzit...</p>
</body>
</html>

5. hodina

Dnes si nejprve dovolím vložit tento kód:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
Tri dny jsem tu nebyl site
</title>
</head>
<body>
<h1>Tri dny jsem nebyl na netu</h1>
<p>Tak se vam musim priznat, ze jsem se nakonec odhodlal k tomu a smazal jsem celej hadr, lepe receno naformatoval a nainstaloval znovu okna.</p>
<p>Je pravda, ze mi to trvalo 3 dny, tak to ted musim dohnat. Nejsem zcela spokojenej s tim co mi to dalo. Napriklad se mi nepodarilo nastavit jiny pocet disku a OS v cestine. Nadruhou stranu jsem ale pochopil, ze priste potrebuji mit vetsi flasku a dobry vypalovaci program na rychle a spolehlive zalohovani dat.</p>
<p>Tedka si jeste pripravuju pracovnu a zitra snad jiz budu editovat z ni. Z postele je to opravdu velmi nepodlne. Taky budu mit cas na to udelat si poradek v dosavadnich datech - ach jo, zivot neni jednoduchy.</p>
<h2>Odstavce</h2>
<p>No proste znama vec, nikde nenechavame opustene masy textu. Bud jsou to nadpisy nebo odstavce. Pak se takova masa obali tagy <p></p> [angl. <i>paragraph</i>]. <b>Internetove vyhledavace pak za kazdy odstavec automaticky vlozi jednu prazdnou radku.</b></p>
<h2>Prazdne tagy - line breaks</h2>
<p>V ramci odstavce je pak mozno text zalamovat tagem <br /> [z angl. <i>Line Break</i>, coz je tzv. <b>otevreny</b> tag. Asi to znamena, ze nema zadny "content", ktery by obaloval. Nema pak <i>de facto</i> pocatecni ani koncovi tag.</p>
<p><a href="http://cs.wikiversity.org/wiki/Uživatel:Mercy">Mercy</a> vsak rikal, ze tag <br /> pochazi z XHTML. Jak to tedy je?</p>
<p>No, pri zodpovedeni teto otazky jsem narazil <b>poradnej problem</b>. Moje napoveda na iternetu se dostala do rozporu s oficialni napovedou kurzu. Zatimco kurz radi pouzivat vylucne tag <br />, tak poradna na IRC tvrdi, ze je to prave naopak, ze HTML 5 nijak nevylucuje tag <br /> a ze tag <br /> je typicky pro <a href="http://en.wikipedia.org/wiki/XHTML">XHTML</a>. Ba co vic, jeden uzivatel poznamenava, ze je nedobre v HTML takto zalamovat, ze je lepsi studovat rovnou XHTML, ktere vlastne obsahuji HTML po verzi 4.01, tedy XHTML 1. Dale se take dozvidam, ze je logicke pouzivat standardni tag <b><br /></br></b>.</p>
<h3>Priklady</h3>
<p>Nicmene pojdme si to procvicit.</p>
<h4>Pouziti <br />:</h4>
<h5>Panamerická dálnice [by me:]</h5>
<p>Začalo pršet<br />
šneci vyrazili na Panamerickou dálnici.<br />
Už nám deští<br />
pod koly aut křupou mladíci i staříci.<br />
Už neprší<br />
-indiáni, plní chutnou hmotou krabici.</p>
<h4>Pouziti <br /></br></h4>
<p>Zde ovsem vyvstava otazka, jestli ma cenu, charakterizovat text jako odstavec a poutivat "line break" tag, pouze v ramci odstavce. Nicmene, budme <b>plne korektni:</b></p>
<h5>Panamerická dálnice</h5>
<p><br />Začalo pršet</br>
<br />šneci vyrazili na Panamerickou dálnici.</br>
<br />Už nám deští</br>
<br />pod koly aut křupou mladíci i staříci</br>
<br />už neprší</br>
<br />- idiáni, plní chutnou hmotou krabici.</br></p>
<p>Jak je videt, tohle se nepovedlo, navic mi tu vadi pravidlo, kaskadovat sestupne uroven nadpisu - mozna jsem to mel dat jen jako paragraf v boldu a byt <b>bold</b> :]</p>
<h2>Horizontal rule, neboli linka</h2>
<p>No to bude stejny pripad jako u pouziti "line break", tedy lepe pouzivat <hr> nez <hr /> jak doporucuje kurz. S touhle ficurou jsem pokusnicil uz nekde v kurzu HTML z en.WV, tak jen predvedu, ze to umim</p><hr />
<p>Muhehe, neverili jste, ze to zvladnu co?!</p>
<p><b>A nakonec v skutku</b> v jine casti kurzu skutecne doporucuji pouzivat pouze <br /> a <hr>. A jak spravne poznamenavaji a jak i ja jsem zaznamenal zde <a href="http://cs.wikiversity.org/wiki/HTML/Juandev/Archiv#2. hodina (Basic formatting in HTML)">HTML/Juandev/Archiv#2. hodina (Basic formatting in HTML)</a> kazdej internetovej vyhledavac to vykresluje jinak. Sami nahlidnete.</p>
<h2>DTD</h2>
<p>Tak a posledni vec je naucit se dnes pouzivat, respektive vkladat DTD. Jakou verzi pouzivam je jasne, co vsak jasne neni, jakou prichut.</p>
<p>DTD je vlastne <b>D</b>ocument <b>T</b>ype <b>D</b>efinition a dava vedet v jakem jazyce, resp. jeho verzi je stranka formatovana. Ja jsem se rozhodl pouzivat verzi HTML 4.01 strict. Ted, kdyz to vim jsou uz me stranky plnocene a mohu je nabizet i v podobe html :]</p>
<p>Kdyz vezmeme v potaz, ze verze HTML 5 zatim nevysla existuji pro verzi 4.01 3 chute: <i>strict</i> [deprecated elements are forbidden], <i>transitional</i> [deprecated elements are allowed] a <i>frameset</i> [in which mostly only frame related elements are allowed]. Frame tagy jsou urcite zajimavou oblasti, ale predpoklada se, ze se pro verzi 5 zakazi, stejne tak prichut transitional a tak jsem striktni pedant.</p>
</body>
</html>

a následně ještě povzdichnout jak je to těžké tvořit v každé hodině webovou stránku. Asi budu dělat jen jednou za čas.

6. hodina

Hmm, tak v téhle lekci se na mě vysypalo spousty tagů. Doufám, že si je v budoucích lekcích dostatečně procvičím. Je dobré, že alespoň vím, že některé existují a jak se dají použít. U mnohých mám chaos v hlavě, protože je různé vyhledávače různě zobrazují, některé se v zobrazení jeví stejně.

7. hodina

No tak v této hodině se jednak dovídám již to co vím. Že se dají tagy skládat, že tag se skládá z řady částí a standardní obostraný tag pak většinou ze tří. Dále se ale dozvídám jednu zajímavou věc, že otevřené tagy se mají do budoucnosti uzavírat pomocí lomítka. Takže standardní otevřený tag se mění na , nikoliv na ! je pak tedy otevřený tak s uzavřením. jednoduché, že! Další zajímavou věcí je to, že tagy se mohou zaznamenávat jak malými tak velkými písmeny, ale oficiální doporuční zní, výhradně malá písmena.

8. hodina

Tato hodina je pro změnu o atributech. Narážím na zajímavé konstatování, že "atribut je většinou v začátečním tagu". To znamená, že nemusí být v počátečním tagu. Otázka ale je, jestli by browser zkousl, kdybych mu naházel atributy do koncových tagů. Jak jsem měl totiž šanci se přesvědčit, napadlo mě, zjistil jsem, že internetové vyhledavače jsou dost netolerantní a není s nima žádná sranda. Otázka, je, jestli to tedy neobejít použitím tagu <bdo></bdo>, tedy bidirectional override. Pojďme to zkusit:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 

4.01//EN" 

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
Blbinky, ala linky na koran :]
</title>
</head>
<body>
<h1>Linky na koran :]</h1>
<p>Nejprve je treba vysvetlit o co na 

teto strance jde. Vetsinou se kladou 

atributy do pocatecniho tagu. A nebudem 

si nijak nalhavat, ze svevolne naruseni 

tohoto poradku bude internetovymi 

vyhledavaci tvrde ztrestano v podobe 

pokazeni, ci nepochopeni. Otazkou ale je, 

jestli to nemuzeme oblafnout s pomoci 

tagu <bdo>&lt/bdo&gt:, tedy 

<i>bidirectional override</i>.</p>
<h2>Vice o BDO</h2>
<p>Nez zacneme pokusnicit, je treba se o 

tagu BDO vice dovedet.</p>
<p>V tagu je zerejmou pevnou podminkou 

atribut <em>dir</em>. Ten udava, jestli 

se obsah bude otacet do leva nebo do 

prava. Dalsi atributy jako <i>id</i>, 

<i>class</i>, <i>title</i>, <i>style</i>, 

<i>lang</i> a <i>xml:lang</i> jsou zrejme 

volitelne.</p>
<h2>Priklady</h2>
<p><b>Priklad 1:</b> <a 

href="http://cs.wikipedia.org/wiki/Korán"

>Koran</a>.</p>
<p><b>Priklad 2: </b> 

<bdo>Koran</bdo>.</p>
<p><b>Priklad 3:</b> <bdo 

dir="ltr">Koran</bdo>.</p>
<p><b>Priklad 4:</b> <bdo 

dir="rtl">Koran</bdo>.</p>
<p><b>Prilad 5:</b> <a>Koran</a 

href="http://cs.wikipedia.org/wiki/Korán"

>.</p>
<p><del><b>Prilad 6:</b> </a>Koran<a 

href="http://cs.wikipedia.org/wiki/Korán"

>.</del> - toto je konflitni zapis, jak 

sami vidite, proto je treba pridat jeste 

jeden tag [ktery pochopitelne </a> ted uz 

nevidite].</p>
<p><b>Prilad 7:</b> <bdo dir="rtl"><a 

href="http://cs.wikipedia.org/wiki/Korán"

>Koran</a></bdo>.</p>
<h2>Zaverem</h2>
<p>Jak vidite s uvedenych prikladu, 

senzace se nakonec nekonala. Browser cte 

HTML vzdy z leva, OBD tag pouze otaci 

text. Zrejme se tak delaj napr. arabsky 

stranky, ceske to vyuziji, jen pro citace 

z <a 

href="http://ar.wikisource.org/wiki/%D8%

A7%D9%84%D9%82%D8%B1%D8%A2%D9%86_%D8%A7%

D9%84%D9%83%D8%B1%D9%8A%D9%85">Koránu</a> 

[<bdo dir="rtl">القرآن الكريم</bdo>]. Safra a 

nefunguje to nahodou i bez toho: القرآن الكريم? 

<em>Hmm, nebo spis UNICODE nezna 

arabstinu.</em></p>





</body>
</html>

No dále se dozvídám další věci o atributech, třeba takový atribut "bgcolor" nám udává barvu a ve spojením s tagem "body" tu hned máme barvu podkladu dokumentu:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 

4.01//EN" 

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
Barva pozadi: zluta
</title>
</head>
<body bgcolor="yellow">
<h1>Zluta barva pozadi</h1>
<p>Toto je stranka, ktera ma za cil 

ukazat, jak se meni barva pozadi celeho 

dokumentu.</p>

</body>

</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 

4.01//EN" 

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
Barva pozadi: matova
</title>
</head>
<body bgcolor="99ff99">
<h1>Matova barva pozadi</h1>
<p>Toto je stranka, ktera ma za cil 

ukazat, jak se meni barva pozadi celeho 

dokumentu.</p>

</body>

</html>

No není to kůl? Tohle jsem chtěl vždycky umět :-) No pak se taky dovídám, že atributy musí být uzavřeny v uvozovkách, což už jsem si několikrát na vlastní kůži zažil, že to nefunguje, když se to hezky neobalí z obou stran (samozřejmě zde se myslí anglických uvozovkách "", nikoliv v českém speciálu „“ :). Někdy se může (a dokonce je to nezbitné) použít uvozovky jednoduché.

9. hodina

Tak mi touha po vzdělání ne a ne dát a musím se kouknout ještě na jednu lekci. Takže se rovnou dozvídám, že výše uvedená radost s barvou pozadí byla špatná, neb atribut "bgcolor", což je vlastně background color je "deprected" a místo toho se mají používat styly.

10. hodina

Tak a další lekce:

při tvorbě linků přes "anchor" tag "a", tedy kotva je třeba odkazovat správně, když jsem na webu v jednom adresáři, tak stačí jméno souboru, když jdu na jinou stránku, tak musím uvést celou cestu
v novém okně se pak link otevře pokud k atribitu "target", přidám hodnotu "_blank" čili: <a href="http://google.com" target="_blank">Google</a> - ale pozor, "_blank" není přípustné v HTML 4.01 strict!
čili máme hyperlink (<a href="url">obsah</a>, možno odkazovat i z obrázku), kotvu (zápis je <a name="trolling">trolluje.cz</a> a nekde v dokumentu to zas uchytim, aby me to tam hodilo: <a name="#trolling">Trolling je neco...</a>)
pokud se odkazuje na cizí web a konkrétní část. pak se do a href dá za fullurl #hondota
při volání cizí stránky z cizí domény, je třeba na konec dávat sleš!

11. hodina

Tak dnes to bude o obrázcích:

obrázek se vkládá pomocí tagu <img>, tedy "image"
každý obrázek je potřeba zaměřit pomocí atributu src, tedy "source"
hodnotou pro src je pak url, kde url = pouze název souboru (v případě, že se soubor nalézá přímo v danném adresáři); /obrázky/test.jpg (v případě jiného adresáře); http://cs.commons.wikimidia.org/wiki/hafuša.gif (v případě, že je na jiné webové stránce)
zápis pak bude vypadat: <img src="/tlacitka/okbutton.gif">
obrázek je zobrazen vždy tam, kam je v kódu umístěn!
další atributy:
- doporučovaným atributem je též "alt", tedy "alternate text". Vkládá se pro případy, kdy vyhledávač není schopen načíst daný obrázek. Místo obrázku se pak zobrazí právě tento text. Hodnoutou k tomuto adtibutuje je tedy "zástupný text".
- pro zobrazení názvu obrázku v případě, že je na něm umístěn kurzor myši se používá atribut "title", hodnotu je text, resp. "popis obrázku"

také se dozvídám, jak vložit obrázek na pozadí. Není to prostřednictvím tagu "img", ale tagu "body", tedy pro celé tělo dokumentu. Atributem je pak "background" a hodnotou url. Background je ale v příchuti strict zavrhnut, zřejmě tedy musíme použít atribut style:

12. hodina - opakování v příchuti "transitional"

Tak jsem si dal opáčko a zde je výsledek:

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 

4.01 Transitional//EN" 

"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>
Testíky
</title>
</head>
<body 

background="Dolmen_of_Viera_entrance_-

_front_view (light).jpg"; text='yellow'>
<h1 align="center">Testik nambr van</h1>
<p align="justify">Principem prvniho 

testu je vycentrovat nadpis na stred.</p>
<h1>Testik nambr dva</h1>
<p>V tomhle testu jde o to, zalomit text 

pomoci <br />. Tak<br />co?<br />breakuje 

to?<br /><hr>
A cara tu je?</p>
<h2 align="center">Ted by validator nemel 

nic kydat</h2>
<p align="center">Break in the<br /> break 

in the<br /> break in the<br /> dust, 

dust.</p><hr width="20%"; align="left"; 

size="5">
<hr align="centre"; width="40%">
<h1>Testik nambr sri</h1>
<p><i>Kurziva na <sup>druhou</sup></i>. 

<b>Slava</b> funguje to.</p>
<h1>Testik nambr for</h1>
<p><big>Vazne, to neni <b>for</b></big>. 

Zde jde o odzkouseni zkratky <abbr 

title="Estados Unidos">EE.UU</abbr>.</p>
<h1>Testik nambr fafj</h1>
<p>A ted teletype: <tt>jses tele type!

</tt></p>
<h1 align="right">Postreh nambr wan</h1>
<h2 align="right">Zakladni atributy</h2>
<p align="right">Tak jsem si zacal cist o 

zakladnich atributech. Atributy 

<em>class</em> a <em>id</em> se pozivaji 

k oznacovani ostatnich tagu a nasledne se 

vazi se styly v CSS nebo JavaScriptu.</p>
<p align="right">Dale atribut 

<em>style</em>. Jde o to, ze on uvozuje 

rovnou styly CSS, ktere jsou inline tedy 

v tele samotneho HTML.</p>
<p align="right">A posledni ze zakladnich 

je <em>title</em>. Zde je mozne, kazdemu 

tagu priradit nazev, takze ve vysledku se 

nam v dokumentu u kazdeho prvku 

formatovani zobrazi v bubline to co 

narvem jako hodnotu atributu 

<em>title</em>.</p>
<p><strong>No a tyhle zakladni atributy 

jdou skoro se vsemi tagy. Vyjimku tvori 

tagy <base>, <head>, 

&lthtml>, <meta&gr;, <param>, 

<script&gr;, <style> a 

<title>.</strong></p>
<h2 align="right">Narodni atributy</h2>
<p align="right">Sem patri dva tributy a 

to <em>dir</em>, ktery svymi hodnotami 

"ltr" a "rtl" urcuje smer toku textu. Je 

to tedy <strong>left to right</strong> - 

z leva do prava, nebo <strong>right to 

left</strong> - z prava doleva. A dale tu 

je atribut <em>lang</em>, kterz vymezuje 

jazyk. Hodnotou je zde "kod".</p>
<h2 align="right">Tag <style></h2>
<p align="right">No a ted se teda 

dozvidam, ze tento tag se vaze pouze z 

CSS. CSS muze byt primknuto k dokumentu 

jako externi soubor, muze bzt vlozene, 

nebo inline. To co jsem tu doposavad 

delal bylo inline. Spatne jsem to ale 

oznacil, proto mi validator pro HTML 4.01 

<em>strict</em> vyjel tolik chyb. Jen 

poznamka na zaver, <strong>CSS je dobre 

vkladat do externich souboru, aby vse 

optimalne pracovalo</strong>.</p>
<h1>Testik nambr six</h1>
<p>Toto je vstup do hrobky:</p>
<img src="Dolmen_of_Viera_entrance_-

_front_view (light).jpg"; alt="Dolmen of 

Menga"; title="Dolmen of Menga"; 

border="2px">



</body>
</html>

Co na to validator: 9 chyb a 7 varovani. Opravuji a dostávám:

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 

4.01 Transitional//EN" 

"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>
Testíky
</title>
</head>
<body 

background="Dolmen_of_Viera_entrance_-_front_view_(light).jpg" text='yellow'>
<h1 align="center">Testik nambr van</h1>
<p align="justify">Principem prvniho 

testu je vycentrovat nadpis na stred.</p>
<h1>Testik nambr dva</h1>
<p>V tomhle testu jde o to, zalomit text 

pomoci <br />. Tak<br />co?<br />breakuje 

to?</p><br /><hr>
<p>A cara tu je?</p>
<h2 align="center">Ted by validator nemel 

nic kydat</h2>
<p align="center">Break in the<br /> break 

in the<br /> break in the<br /> dust, 

dust.</p><hr width="20%" align="left" 

size="5">
<hr align="center" width="40%">
<h1>Testik nambr sri</h1>
<p><i>Kurziva na <sup>druhou</sup></i>. 

<b>Slava</b> funguje to.</p>
<h1>Testik nambr for</h1>
<p><big>Vazne, to neni <b>for</b></big>. 

Zde jde o odzkouseni zkratky <abbr 

title="Estados Unidos">EE.UU</abbr>.</p>
<h1>Testik nambr fafj</h1>
<p>A ted teletype: <tt>jses tele type!

</tt></p>
<h1 align="right">Postreh nambr wan</h1>
<h2 align="right">Zakladni atributy</h2>
<p align="right">Tak jsem si zacal cist o 

zakladnich atributech. Atributy 

<em>class</em> a <em>id</em> se pozivaji 

k oznacovani ostatnich tagu a nasledne se 

vazi se styly v CSS nebo JavaScriptu.</p>
<p align="right">Dale atribut 

<em>style</em>. Jde o to, ze on uvozuje 

rovnou styly CSS, ktere jsou inline tedy 

v tele samotneho HTML.</p>
<p align="right">A posledni ze zakladnich 

je <em>title</em>. Zde je mozne, kazdemu 

tagu priradit nazev, takze ve vysledku se 

nam v dokumentu u kazdeho prvku 

formatovani zobrazi v bubline to co 

narvem jako hodnotu atributu 

<em>title</em>.</p>
<p><strong>No a tyhle zakladni atributy 

jdou skoro se vsemi tagy. Vyjimku tvori 

tagy <base>, <head>, 

<html>, <meta>, 

<param>, <script>, 

<style> a 

<title>.</strong></p>
<h2 align="right">Narodni atributy</h2>
<p align="right">Sem patri dva tributy a 

to <em>dir</em>, ktery svymi hodnotami 

"ltr" a "rtl" urcuje smer toku textu. Je 

to tedy <strong>left to right</strong> - 

z leva do prava, nebo <strong>right to 

left</strong> - z prava doleva. A dale tu 

je atribut <em>lang</em>, kterz vymezuje 

jazyk. Hodnotou je zde "kod".</p>
<h2 align="right">Tag <style></h2>
<p align="right">No a ted se teda 

dozvidam, ze tento tag se vaze pouze z 

CSS. CSS muze byt primknuto k dokumentu 

jako externi soubor, muze bzt vlozene, 

nebo inline. To co jsem tu doposavad 

delal bylo inline. Spatne jsem to ale 

oznacil, proto mi validator pro HTML 4.01 

<em>strict</em> vyjel tolik chyb. Jen 

poznamka na zaver, <strong>CSS je dobre 

vkladat do externich souboru, aby vse 

optimalne pracovalo</strong>.</p>
<h1>Testik nambr six</h1>
<p>Toto je vstup do hrobky:</p>
<img src="Dolmen_of_Viera_entrance_-_front_view_(light).jpg" alt="Dolmen of 

Menga" title="Dolmen of Menga" 

border="2">



</body>
</html>

Co na to validator: „stránka je validní“. Muhehe!--Juandev 5. 2. 2009, 14:00 (UTC)