• Chat s adminkami
• Bleskovky a informace, co na webu nenajdete - sledujte nás na Facebooku!
• Anketa - VIP vs. Pegasus
• Podvodné stránky - nenaleťte!
Howrse
Grafika
Oddechový koutek
IV. Obecné uvedení do HTML/CSS
Než se pustíme do samotného kódování naší šablony, řekneme si pár obecných věcí.
Tvorba přepisovací prezentace se dá rozdělit na dvě části - vytvoření šablony (podkladu) v graf. editoru a její nakódování do přepisovací podoby. Co to ale to kódování vlastně je? Zjednodušeně řečeno je to v podstatě napsání určitého textu v jazyce HTML. A stejně jako při psaní v jakémkoliv jiném jazyce, je třeba dodržet jisté zásady a syntaxi.
Potřebuji nějaký zvláštní program?
Ne. Předpokládám, že každý z Vás má v počítači nějaký textový editor - ať už MS Word, Office Writer, Poznámkový blok, WordPad apod. Pokud si vyloženě nechcete stahovat a instalovat další programy, vystačíte si i s tímto. Existují ale "vylepšené" textové editory, mezi jejichž přednosti se počítá třeba zvýrazňování syntaxe, kontrola pravopisu apod. Osobně jsem spokojená s programem PSPad (český freeware, stahuj zde), můžete si ale vybrat mezi spoustou dalších (NotePad++, TopStyle).
WYSIWYG editory
WYSIWYG (= What you see is what you get = Co vidíš, to dostaneš) editory usnadňují tvorbu webových stránek začátečníkům, jelikož při jejich použití v podstatě není nutná hlubší znalost HTML/CSS. Zázrak? Ne tak docela. Vzhledem k náročnosti takového úkolu se Vám totiž do výsledného kódu vloudí nejen chyby, ale i zbytečné kusy kódu, který není třeba. Výsledek tedy nikdy nebude perfektní, jak by se ze začátku mohlo zdát. Navíc pokud se chcete naučit aspoň základy, s použitím WYSIWYG editoru toho nikdy nedosáhnete. Proto bych Vám doporučila - zapomeňte, že něco takového existuje :).
Co je to HTML?
HTML (= HyperText Markup Language = Hypertextový značkový jazyk) je jazyk, který umožňuje psaní WWW stránek. Každý web je tedy napsaný v HTML. Pokud si ve svém prohlížeči zobrazíte zdrojový kód kterékoliv stránky (většinou pod Nástroje/Možnosti/Zobrazení), uvidíte, že je to v podstatě normální text obalený různými značkami. Těmto značkám se říká tagy.
| Každý tag je obklopen ostrými závorkami < >. Existují tagy párové a nepárové. Nepárovým tagem je třeba značka obrázku <img>. Párový tag má ještě ukončovací značku, která se liší od počáteční lomítkem /, např. pro tučný text je počáteční značka <b> a ukončovací </b>. |
| U párových tagů je třeba dodržovat pořadí, v jakém tagy píšeme! Ten, který jsme otevřeli jako poslední, uzavřeme jako první. Např.: <b> <u> <a> - otevřen jako poslední Toto je text obalený třemi značkami. </a> - uzavřen jako první </u> </b>. |
Každý tag může mít určité vlastnoti = atributy. Nás bude ale zajímat pouze atribut style.
Zápis stylu v CSS
Pomocí HTML tagů můžete vytvořit strukturu dokumentu, jeho vzhled se zapíše pomocí kaskádových stylů - CSS (Cascading Style Sheets). CSS styl se zapisuje pomocí atributu style k danému HTML tagu - říká se tomu in-line zápis CSS.
Zdá se Vám to složité? Ukážeme si jednoduchý příklad.
| Párový tag <p> znamená odstavec textu. Například: <p> Toto je text uzavřený v odstavci. </p> Pokud bychom chtěli, aby ten text v odstavci byl psán třeba červenou barvou, využijeme právě CSS stylu: <p style="color: red;"> Toto je text v odstavci, který bude červenou barvou. </p> |
Z tohoto příkladu vyplývá celá syntaxe HTML a CSS zápisu, kterou budeme dodržovat:
počáteční ostrá závorka - tag - mezera - atribut style - rovnítko - uvozovky nahoře - CSS vlastnost (viz dále) - středník - uvozovky nahoře - koncová ostrá závorka.
Pozn.: V atributu style může být (a většinou je) i více CSS vlastností najednou.
Přehled nejpoužívanějších HTML tagů
Vzhledem k tomu, že příště budeme kódovat pouze šablonu prezentace, nemusíte nutně znát všechny tagy, které existují. Pro jednoduchost zde tedy vypíšu pouze ty nejčastější, se kterými se můžete setkat. Každý zápis taktéž odkazuje na stránky Jak psát web, kde je daný tag popsán podrobněji.
| <table>, <tbody>, <tr>, <td>, - párové tagy, umožňují vytvořit tabulku |
| <div> - párový tag, blok/oddíl, často "obaluje" určité prvky/text, kterým chceme nastavit hodnoty (styl) |
| <span> - párový tag, řádkový prvek, často "obaluje" část textu na řádku, který chceme mít jinak nastylovaný |
| <p> - párový tag, odstavec textu |
| <br /> - nepárový tag, řádkový zlom, ukončení řádku (enter) |
| <hr /> - nepárový tag, vodorovná čára |
| <b> nebo <strong> - párový tag, tučný text |
| <i> nebo <em> - párový tag, kurzíva |
| <u> - párový tag, podtržený text |
| <a> - párový tag, odkaz |
| <img> - nepárový tag, obrázek |
Přehled nejpoužívanějších CSS vlastností
CSS vlastnosti, které budeme používat při kódování naší šablony.
| background - pozadí prvku |
| width - šířka prvku, budeme většinou zadávat v pixelech |
| height - výška prvku, budeme většinou zadávat v pixelech |
| margin - vnější okraj prvku, budeme zadávat v pixelech, můžeme chápat jako rozestup prkvů (boxů) |
| padding - vnitřní okraj prvku, budeme zadávat v pixelech |
| overflow - definuje chování přetékajících prvků, přidá nám do boxů rolovací lištu |
| color - definuje barvu písma (a rámečků, ty ale nebudeme nikde používat) |
| font - určuje písmo, není nutné používat, pouze pokud chcete změnit písmo nebo jeho velikost |
| text-align - zarovnání textu (vlevo, na střed, vpravo, do bloku), také není nutné, výchozí zarovnání je vlevo |
| line-height - výška řádku, není nutné, ale občas používám, aby řádky měly větší odstup a lépe se četly |
| border-collapse - sloučí rámečky buněk tabulky |
Jdeme na to?
Protože sama vím, že čtením nudné teorie se toho zase tak moc nenaučíte, na závěr tu mám jeden lehký příklad - text uzavřený v odstavci. Tomuto odstavci je přidán styl - barva písma a vnitřní rámeček 10px. Celý odstavec je ještě uzavřen v divu, který je taktéž nastylován - má danou šířku, výšku, barvu pozadí a zobrazení rolovací lišty v případě, že by text přetekl.
| <div style="width: 500px; height: 100px; background: #CCE6B8; overflow: auto;"> <p style="color: #2A4513; padding: 10px;"> Praesent fermentum enim quis sapien bibendum sit amet fringilla justo rhoncus. Mauris nunc ipsum, luctus non adipiscing a, laoreet non felis. Aliquam accumsan cursus vestibulum. Nullam quis sapien lacus, id feugiat tellus. Aliquam erat volutpat. <br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas rutrum, eros eu congue egestas, arcu dui lacinia diam, viverra scelerisque lacus enim a est. Suspendisse nulla dolor, hendrerit et porta quis, interdum eu libero. Sed ac ipsum erat, vitae ullamcorper eros. Duis massa erat, venenatis ac adipiscing a, pellentesque eget urna. </p> </div> |
Jak se příklad zobrazí:
Praesent fermentum enim quis sapien bibendum sit amet fringilla justo rhoncus. Mauris nunc ipsum, luctus non adipiscing a, laoreet non felis. Aliquam accumsan cursus vestibulum. Nullam quis sapien lacus, id feugiat tellus. Aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas rutrum, eros eu congue egestas, arcu dui lacinia diam, viverra scelerisque lacus enim a est. Suspendisse nulla dolor, hendrerit et porta quis, interdum eu libero. Sed ac ipsum erat, vitae ullamcorper eros. Duis massa erat, venenatis ac adipiscing a, pellentesque eget urna.
Pokud si budete chtít příklad zobrazit v prohlížeči, stačí, když textový soubor uložíte s příponou .html (ne .txt, .doc apod.).
A to je pro dnešek vše :). Příště si spolu konečně nakódujeme celou prezentaci!
Přidat komentář
Komentáře
55) Wewik [19. 02. 2013 | 19:29]
Okej 
Teraz som to dorobila, robila som na tom kódovaní asi hodinku a nejde to -.- Neexistuje nejaká kontrola že čo tam mám zle alebo tak ?
54) AsDeeN [19. 02. 2013 | 19:20]
Wewik: Tak nejlepší je si ten daný úsek označit oříznout a pak jen zjistit ten daný rozměr, který potřebuješ Protože mám za to, že v PF něco jako vodítka (co jsou v PS) nejsou. Mám i za to, že to tady Wendiseek někde popisoval, ale nemůžu to najít. Pokud by ti to rozřezání nešlo určitě se na ní můžeš obrátit 
53) Wewik [19. 02. 2013 | 19:06]
No hej 
Ale keď budem mať rozmery iné tak sa mi šikne vedieť ako sa to dozviem
52) AsDeeN [19. 02. 2013 | 18:53]
Wewik: Tak jestliže máš stejné, tak ty rozměry víš, ne?
51) Wewik [19. 02. 2013 | 18:49]
To som čítala ale ja robím v inom programe. (PFS X ) Prezentácia má také isté rozmery ako tá jej
50) AsDeeN [19. 02. 2013 | 17:44]
Wewik: Nejlepší je, znát rozměry přímo ze šablony, např. tady popisuje Zaara, jak si zjistit rozměry, http://howrseforum.jecool.net/kurz/rozmery/rozmery.html, jestliže jsi prezentaci dělala od oka, tak asi i rozměry budeš muset odhadnout a zkoušet.
49) Wewik [19. 02. 2013 | 17:13]
Ako mám zistiť margin ? 
48) kikiliki00 [12. 02. 2013 | 13:27]
Ahoj, já jsem to pochopila, ale stejně to asi pustim. Moc mi to nejde, ale na to, že jsem začátečník, ujde to..
47) nikolak123 [20. 01. 2013 | 12:24]
Ahoj já jsem to vůbec nepochopila 
prosim nenapsal by mi to někdo na howrse ? A lechčy
46) Johana [09. 01. 2013 | 19:23]
No trochu jsem asi pochytila to se ještě uvidí...
Ale nepochopila jsem toto: Pokud si budete chtít příklad zobrazit v prohlížeči, stačí, když textový soubor uložíte s příponou .html (ne .txt, .doc apod.).
45) Bavaria [03. 01. 2013 | 18:07]
Ahoj chcem sa opýtať kde nájdem ako mám zapísať farbu v tých číslach?
ďakujem za odpoveď
44) Dovakhiin [21. 12. 2012 | 17:41]
Ahojte nejde mi nakodovat prezentace, takže pomohl by mi prosím někdo?
43) lady magdys [09. 12. 2012 | 09:27]
prominte,já to nechápu nešlo by to vysvětlit nějak....lehčejc?
kdyžtam mi to napište na howrse,děkuju
42) keirra [17. 11. 2012 | 13:43]
opicka1710: Photoshop CS6 myslím
41) opicka1710 [17. 11. 2012 | 13:12]
Ktorý Photoshop je najnovší?
40) terka [07. 10. 2012 | 16:50]
OMG je to docela složitý ale něco jsem pochopila JUPÍÍÍÍÍ*rofl*
39) Zaara [22. 09. 2012 | 14:37]
eliska987654321: Tak to je fajn .
Petra: Musíš hledat na googlu .
38) Petra [22. 09. 2012 | 14:15]
Ahoj,nevíte kde mám stáhnout photoshop v češtině??
37) Safira Zářivá šupina xD [16. 09. 2012 | 15:25]
Panebože, panebože, panebože já jsem to pochopila!!! A já jsem si myslela že se toho nedořiju*rofl*
56) AsDeeN [19. 02. 2013 | 20:39]