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 editovat

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? editovat

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

Zpětná vazba editovat

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 editovat

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 editovat

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 editovat

2. hodina editovat

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

3. hodina editovat

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 editovat

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 editovat

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="https://www.duhoctrungquoc.vn/edu/cs/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="https://www.duhoctrungquoc.vn/edu/cs/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 editovat

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 editovat

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 editovat

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 editovat

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 editovat

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 editovat

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" editovat

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)