HTML/Juandev/Webdesign

Tak jsem se rozhodl, že si udělám svoje vlastní trojvrství stránky (HTML-CSS-JS) a začínám se studiem HTML na anglické Wikiverzitě: en:HTML.

Opět se vracím ke kurzu, kdy jsem si myslel, že se napřed budu učit čisté HTML – ten kurz je ale velmi špatný, proto se vracím k tomuto. Do jisté míry jsem i nabyl dojmu, že v dnešní době už i HTML je dost propojeno a spjato se znalostí CSS.--Juandev 18. 1. 2009, 10:17 (UTC)

Potřeby

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

0. hodina (

Archiv (z minula)

Hodina 1.

přečetl jsem si úvodní stránku
vrhl jsem se na en:Introduction to HTML a nastudoval si pojmy HTML, XML, mark up language, web page
začal jsem si hrát a dělat první stránky, příště nějaký obr

Hodina 2.

vrhl jsem se na en:What is HTML a tohle je výsledkem:
- zdroják: Základy HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Základy HTML</title>
</head>
<body>
<h1>Základy HTML</h1>
<p><strong>Licence:</strong> tuto stránku, stejně jako její zdrojový kód uvolňuji pod podmínkami licence GFDL a Creative 
Commons Attribution Share-Alike 3.0 Unported.</p> 
<h2>Úvodem</h2>
Tato stránka vysvětluje to co jsem se naučil na své druhé hodině studia HTML. Použity jsou jen věci, se kterými jsem v 
průběhu studia přišel do styku. Kód je psán tak, aby byl v souladu se správným zápisem.<br /><br />
<strong>Klíčová slova:</strong> <em>Hyper Text Markup Language, mark-up, WYSIWYG, heading, paragraph, emphasis, strong, line
-break</em>.
<h2>Proč kód?</h2>
<h3>Co je to WYSIWYG?</H3>
WYSIWYG	znamená anglicky What You See Is What You Get (tedy Co Vidíš To Dostaneš - CVTD:) Jedná se o editory webových 
stránek, které automaticky převádějí editace do kódu HTML.
<h3>Co je to Hyper Text Markup Language?</h3>
Jedná se vlastně o systém značek označovaných jako tagy, které mění vzezření a vlastnosti textu - nemění však jeho smysl. 
Samotný <em>markup</em> je pak výraz pro jakékoliv označování textu za účelem změny jeho vlastností. Setkáme se s ním při 
psaní a vylepšování dokumentu v MS Word, OO Writer, Wikipedii nebo ve škole při psaní a zvýrazňování poznámek.
<h3>Proč tedy HTML v kódu a nikoli ve WYSIWYG?</h3>
<p>HTML kód je jazyk, který je standardizován společností W3C. Na základě tohoto jazyka jsou schopni webové prohlížeče 
zobrazovat to co chcete, aby se zobrazilo. Musíte přeci tomu chladnému stroji nějak vysvětlit, že chcete aby tato část textu 
byla podtržená a toto jako příklad zeleně. Jistě existuje řada přístupů, jak to udělat, ale v současnosti ten nejjednodušší a 
nejzákladnější je jazyk HTML.</p>
<p>Takže když píšete kód sami, tak máte do určité míry jistotu, že v dokumentu nebudou chyby a také přesně víte co dostanete. 
I když to není zcela pravda, jak ukazují výsledky tzv. Acid testu. Nicméně na standardizaci se pracuje, stejně jako na 
webových prohlížečích a neměli by být na tomto poli vážnější problémy. Na rozdíl takový WYSIWYG editor sice tvrdí, že je 
schopen zakódovat vše co v něm vyplodíte, z vlastní zkušenosti ale vím, že tomu tak není. Navíc některé překlady do kódu jsou 
chybné a zbytečně dlouhé, protože řada editorů nedokáže kód racionalizovat. Navíc, když si uděláte něco sami, tak máte radost 
z vydařené práce. Jde tedy o to, ubrat si trochu z pohodlí a za odměnu pak sklidit více plodů, než ten, kdo si pohodlí ubrat 
nedokáže. Řečeno jinak pro nechápavé - když se naučíme kód HTML a budeme psát stránky přímo v kódu, bude kód jednodušší, 
stránky bezchybné a navíc budeme mít hřejivý pocit u srdce, že se nám něco povedlo.</p>
<h2>Struktura HTML stránky</h2>
K tomuto jen stručně, neb ještě nebylo probíráno a taky to tu neumím zatím ještě jasně interpretovat. Nicméně je jasné, že 
každý zdrojový kód se skládá z označníku a html kódu. V "označníku" je jakási definice a mohou se sem vkládat i různé 
poznámky. HTML kód se pak skládá z hlavy a těla. V hlavě se vyskytuje název a v těle zbytek stránky. Zobrazuje se pouze tělo. 
Myslím, že o této struktuře pojednám někdy v budoucnu.
<h2>Nadpisy, odstavce a zvýraznění</h2>
V této části se pokusím vysvětlit to co jsem se naučil o těchto tazích (z angl. tag) právě za použití těchto tagů, nevím jak 
se mi to podaří, ale uvidíme:]
<h3>Co je to tag?</h3>
<p>Tag je v podstatě značka zabalená v hranatých závorkách, která mění vlastnosti textu. Většina tagů se skládá z počátečního 
a koncového tagu, mezi ně se pak umisťuje text. Zápis je asi následovný: "hranatá závorka zleva, zkratka tagu"...uj, uj, uj, 
tohle se mi nelíbí. Už teď je jasné, že se znalostí současných tagů, nejsem schopen to dostatečně vysvětlit. Budu zřejmě 
muset použít tag "pre", který jsem odkoukal - spočívá to v tom, že co je v tagu "pre" tak to browser čte jako raw text. Takže 
znova:</p>
<p>Tag je v podstatě značka zabalená v hranatých závorkách, která mění vlastnosti textu. Většina tagů se skládá z počátečního 
a koncového tagu, mezi ně se pak umisťuje text. Zápis je asi následovný <pre><zkratka tagu>text</zkratka 
tagu></pre>.<br /><strong>Hmmm, tak to sami vidíte, že se musím ještě hodně učit...</strong>
</body>
</html>

- stránka: Základy HTML