• 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
75) Tery [17. 05. 2014 | 17:37]
Díky za návod skusím to ale stejně je lepší kodator
74) rehovicovak [09. 02. 2014 | 21:58]
Ahoj Zaar.Děkuji a jsi moc hodná že jsi to jsem dala.
73) Petra.cvok [11. 07. 2013 | 12:27]
Ahoj..! Mám takový problém. Udělala jsem si svoji prezentaci, ale nevím jak to nakódovat. Není úlně podle tvého návodu např. pod obrázkem mám ještě černé pozadí (kdybych obrázek roztáhla byl by rozmazaný), boxy mám každý jinak rozmístěný a jinak velký. Je to problém? popř. Nemohla bys mi to nakódovat? Kdyštak napiš, na Howrse se jmenuju taky Petra.cvok...DÍKY
P.S. Děláš pěkné prezentace a máš skvělé návody (až na ten s kódováním, ten nechápu..
)
72) Hawkeye [07. 07. 2013 | 01:19]
Ahoj mám menší problém v prohlížeči mi to ukazuje dokument i s obrázkem ovšem na howrse se mi obrázek nezobrazuje, proč?
71) lucišek000 [04. 07. 2013 | 07:40]
AHOJ! Hledám někoho kdo by mi nakodoval mnou vytvořenou prezentaci
Na ČR howrse jsem lucišek000
70) Wolfs [20. 06. 2013 | 18:37]
Ako nakódujem prezentáciu vytvorenú napr. vo www.picmonkey.com ??? A ako spravím obrázky priesvitnými? píšte do ss na howrse.sk Wolfs
69) AsDeeN [18. 05. 2013 | 11:22]
králíčekklárrka3: Obrázky by asi moc nepomohly, je to prostě jen o skladbě znaků, které jsou ty vysvětlené a řekla bych, dle vlastního názoru, to Zaar vysvětlila na tolik polopaticky, že to více rozebrat ani nejde. Jenže většina lidí nechápe, že se to nenaučí jen tím, že si to přečtou a tím to hasne, chce to hodiny zkoušení psaní HTML tagů, hledání chyb, zkoušení, zkoušení a furt jen zkoušení, není to snadné, ale ani nemožné a jestliže se to člověk chce naučit, naučí se to - jsou 1000x složitější věci
68) králíčeklárka3 [18. 05. 2013 | 10:53]
Nooo... Vazne nerozumim jak z toho muze nekdo neco pochopit. Chtelo by to vysvetleni pomoci kroku s obrazkama 
67) Ájullka [08. 05. 2013 | 17:45]
Zajímavé... Není to až moc pro někoho složité?
66) terrča [02. 05. 2013 | 18:42]
ahoj je tady někdo kdo by mi nakódoval prezentaci?
PS: na howrse se jmenuju terrča
65) Anonym :3 [17. 04. 2013 | 15:30]
Zaujímavé.. Ale nepochopila som ani písmenko.... Iba som si otvorila Word, vložila <p style="color: red;"> a ďalej som z toho de*il 
64) ?? [12. 04. 2013 | 21:32]
Nechápu..... 
63) natalie [13. 03. 2013 | 18:07]
Šedivka: máš pravdu, ani já se v tom neviznám a i kdyby jo, tak jsem to nepochopila same </p>
</div> kody ....jak se v tom ma clovek viznat ????
62) Šedivka [11. 03. 2013 | 20:19]
Já z toho nic nevím ! Naopak, jsem ještě zmatenější ;D!
61) Zaara [01. 03. 2013 | 14:54]
natálie: Kdybys ten článek četla trochu pozorněji, nemusela by ses ptát Viz "Potřebuji nějaký zvláštní program?". Plus celý tento článek i ten následující se věnuje právě kódování šablony...
60) natalie [27. 02. 2013 | 13:36]
a půjde to i v zoner photo 12 ??? Předem Díky za odpověd
59) natálie [27. 02. 2013 | 13:34]
ahojky, chtěla jsem se zeptat,když já umím prezentace,ale neumím udělat html kod....nevím jak to mám udělat , prosím, kdo to ví at se ozve na Howrse..... jmenuji se tam natalusak .....Díky a ještě jsem se chtěla zeptat. půjde to html zakodovat ve wordu ????
58) Zaara [27. 02. 2013 | 06:40]
CleoNile: Musíš si ho napsat - od toho tu jsou tyto články 
57) maniola1 [26. 02. 2013 | 16:15]
jak mam udelat html kod na prezentaci s programu PhotoFiltre studio X
76) Ratlover [17. 07. 2015 | 00:11]
Kdyby se prezentace psali v Javě, bylo by to mnohem jednodušší, programátoři mi to určitě potvrdí