Právě probíhající akce na Howrse: Důl Elementálů+ Všechny akce
Právě probíhající soutěž: Zatím žádná+ Všechny soutěže
Přehled českých výtvorů v KP!
Chat s adminkami
• Bleskovky a informace, co na webu nenajdete - sledujte nás na Facebooku!
• Anketa - VIP vs. Pegasus
Podvodné stránky - nenaleťte!+ Více novinek

IV. Obecné uvedení do HTML/CSS

http://i.minus.com/icTF3ydl2zwb.png

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ář

Autor:

Text:

:) ;) B) :( :'( :P :D XD *yes* *no* :* :[ :-/ :O
Velké množství smajlíků či pouze smajlíky do komentářů nepatří!

Opište tento text: CAPTCHA

Komentáře

76)  Ratlover  [17. 07. 2015 | 00:11]

RatloverJazyk HTML je opravdu těžký se naučit...
Kdyby se prezentace psali v Javě, bylo by to mnohem jednodušší, programátoři mi to určitě potvrdí B)

75)  Tery  [17. 05. 2014 | 17:37]

PonkaDí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..:D)

72)  Hawkeye  [07. 07. 2013 | 01:19]

HawkeyeAhoj :) 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]

AsDeeNkrá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 :)XD;(

67)  Ájullka  [08. 05. 2013 | 17:45]

Zajímavé... Není to až moc pro někoho složité?:O

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 :D:PXD

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]

Chlupatka98Já z toho nic nevím xD! Naopak, jsem ještě zmatenější ;D!

61)  Zaara  [01. 03. 2013 | 14:54]

Zaaranatá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: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]

ZaaraCleoNile: Musíš si ho napsat - od toho tu jsou tyto články ;)

57)  maniola1  [26. 02. 2013 | 16:15]

maniola1jak mam udelat html kod na prezentaci s programu PhotoFiltre studio X

1 2 3 4   »