HTML/Juandev
< HTML
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="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
[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 <br /> se mění na <br />, nikoliv na <br /></br>! <br /> 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></bdo>:, 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"><b>Trolling</b> 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>,
<html>, <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)