• 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
15) Subtrop [16. 08. 2012 | 21:43]
<div style="widght: 500px; height: 150px; background: #9BF33D; overflow: auto;">
<P style="color: #4E9600; padding: 10px;">
Prostě něco...
<br/>
Prostě něco...
<p/>
</div>
Tohle je dobře?
14) Subtrop [16. 08. 2012 | 20:08]
<div style=" width: 800px; heigth: 350px; background: #9BF33D; overflow: auto;">
NO Snad jsem se konečně naučila 1. řádek.
13) Subtrop [16. 08. 2012 | 19:51]
Jé! MOc díky Dada!
12) Dada222 [16. 08. 2012 | 19:37]
No, trochu tomu chápem, ale nie úplne, no časom mi to pôjde
Subtrop: Stlačíš naraz "Alt Gr" a to tlačítko nad tým - tam kde je aj otáznik..To je tá šípka vľavo a šípka vpravo je Alt Gr + to tlačítko vedľa
11) Subtrop [16. 08. 2012 | 12:20]
Janus: A jak se dělají?
10) Janus [16. 08. 2012 | 11:59]
Dobré už to vím
9) Janus [16. 08. 2012 | 11:57]
Ahoj jak se dělají ty šipečky??
8) Subtrop [16. 08. 2012 | 11:38]
Co znamená to auto?
7) MrsAnninka [16. 08. 2012 | 09:51]
Andulik117: Je to tlačítko pod Esc, není to blbost, já to taky nevěděla 
6) Andulik117 [15. 08. 2012 | 22:25]
Já sem to pochopila a trochu to zkouším. Můžu se ale zeptat (asi je to blbost ) jak se děla takové to znamínko čárka a nad tím tečka... Asi se budete smát, ale já to fakt nevím
5) helena7 [15. 08. 2012 | 18:28]
Nevím, jestli je to tím že už kódovat umím, ale tohle se mi zdá jako nejpřehlednější návod ze všech co jsem viděla
4) Teressss [15. 08. 2012 | 16:32]
Ahoj,tak toto není vůbec přehledné,nic z toho newím,ale žádnej učený z nebe nespad
3) Subtrop [15. 08. 2012 | 16:15]
Hmm... tak tohle vůbec nechápu.
2) LuckyHorse [15. 08. 2012 | 15:45]
Zdá se mi to trošku složité, ale za nějaký čas mi to určitě půjde.
1) betynka2000 [15. 08. 2012 | 15:18]
opět moc děkuji... má hlava přetéká informacemi
16) Klárka-zbony [17. 08. 2012 | 11:41]
<div style="width: 500px; height: 100px; background: #CCE6B8; overflow: auto;">
<p style="color: #2A4513; padding: 10px;">
Ahoj.Kdo tu všechno je???
<br />
Ahojky jak se máte??
</p>
</div>