• 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
35) Osmanda [03. 09. 2012 | 20:48]
AHoj, udělala jsem první řádek a zkusila kód vloži, ale nezobrazuje se mi šablona a nevím co s tím mám dělat. Zkoušela jsem obrázek nahrávat všude, ale nikdy nevím co mám vlastně správně zkopírovat.
Děkuji Osmanda.
34) Zaara [03. 09. 2012 | 10:07]
Lucia1234: To můžou být špatné hodnoty margin - pokud chceš kód zkontrolovat, pošli mi ho do zprávy na Howrse 
.
33) Łu ^^ [02. 09. 2012 | 18:54]
Už to chápem, ale vždy mi ten text dá hore vpravo. 
32) Zaara [31. 08. 2012 | 16:30]
MAJLA7: Bezva, jsem ráda, že to někdo i pochopil 
A nemusíš se bát, články z letního kurzu tu budou napořád 
31) Itineris [31. 08. 2012 | 15:02]
To je super už to chápu mohlabych se zeptat jak dlouho to tu ještě bude?
30) Zaara [31. 08. 2012 | 14:23]
Arakl, Eboni: Ráda Vám poradím, ale musítě mít konkrétnější dotaz... Takhle bohužel nevím, co Vám poradit
29) Eboni [31. 08. 2012 | 13:00]
Ahoj Zaaro,
já to nechápu.
28) Raduza [30. 08. 2012 | 23:52]
Tak nějak to zrovna moc nechápu.
27) gabcahu1 [29. 08. 2012 | 14:20]
Nechápu
26) Zaara [21. 08. 2012 | 23:54]
Marki: Je jedno, v jakém graf. programu si uděláš obrázek - HTML kód bude stejný. Jak se kóduje šablona jsem psala v článku č. 5, zde je jen obecné uvedení .
25) Marki [21. 08. 2012 | 22:59]
Jo a dělám to v programu Photofiltre vadíto nebo je to stejné ( ten kod v tom HTML). ??? prosím pomoc
24) Marki [21. 08. 2012 | 22:54]
Ja to nechápu udělala jsem jsi prezentaci ale nejde mi to převést do HTMLM jak na to vůbec to nechápu
23) Zaara [21. 08. 2012 | 16:39]
domička: Je to psáno dole v komentářích - Alt Gr + klávesa pro čárku/otazník pro levou závorku a Alt Gr + klávesa tečky/dvojtečky pro pravou . Jinak článek už je zveřejněn.
22) domička [21. 08. 2012 | 16:37]
Kde na klávesnici najdu ty ostré závorky? Jo a kdy tu bude další článek? uš tu měl být včera nechci otravovat jen se ptám
21) Zaara [19. 08. 2012 | 20:20]
anexa1: Uvozovky jsou většinou na klávese, jak je ů - zmáčkneš Shift+ů Ale může se to lišit, na některých klávesnicích je to třeba jinde, musíš hledat...
20) Safira Zářivá šupina xD [19. 08. 2012 | 13:15]
No... je to hodně těžké ale nějak to snaf zvládnu
19) anexa1 [19. 08. 2012 | 12:33]
Zaara jo už to trochu víc chápu.Jen jak se dělají ty uvozovky?
18) Zaara [18. 08. 2012 | 13:50]
betynka2000: Nemáš zač, jsem ráda, že je to užitečné
LuckyHorse: Doufám, že ano, chce to si to jen párkrát vyzkoušet
Subtrop: Musíš to zkoušet, jinak to bohužel nejde... Pokud máš konkrétní problém, tak ti můžu poradit, ale jinak... Auto u overflow znamená 'nenechá se přetékat; je-li potřeba, zobrazí se rolovací lišta' (z Jak psát web). U toho příkladu máš překlep u width, mezi br a / má být mezera (tedy <br /> a ukončovací tag pro odstavec je </p> (lomítko je první, ale to je nejspíš taky jen překlep) .
Teressss: Snažila jsem se to udělat přehledné, jak jen to šlo, bohužel to není žádná lehká věc...
helena7: Děkuji
Dada222: Bezva, chce to jen praxi
Klárka-zbony: Bezva . Komentáře bohužel HTML kód neberou, ale máš to dobře .
anexa1: Máš nějaký konkrétní problém? Protože jinak ti asi nemůžu pomoct, zkus to přečíst ještě několikrát a vyzkoušet si to...
17) anexa1 [17. 08. 2012 | 13:37]
Já to vůbec nechápu
36) AsDeeN [03. 09. 2012 | 21:58]
Co se týče toho, kam ji vložit - je to vlastně pozadí, takže v HTML to bude takto:
background="ADRESA URL OBRÁZKU"