horké novinky

tutoriály : Barvy, nadpisy, užitečné prográmky

horké novinky

Na začátek si řekneme hned pár užitečných rad.

HTML kód uvnitř tagů se nemusí psát velkými písmeny, pokud vám to vyhovuje, můžete psát tagy i malými písmeny. V HTML kódu se nerozlišují velká a malá písmenka. Můžete klidně napsat
<BODY> i <body>.
Zdrojový kód nemusí být rozložený na několika řádcích. Můžete napsat třeba zdroják na jeden řádek, ale za pár dnů se v něm nemusíte vyznat a taky nevyznáte! Proto si udržujte ve zdrojáku pořádek a používejte hodně TABELÁTOR.
V HTML kódu existuje také příkaz komentáře. Komentář se na výsledné stránce nezobrazí, ale slouží programátorovi k lepší orientaci. Na dalším řádku je jeden komentář:



Komentář musí začínat . Komentář je ukázán v následujícím příkladu. Může být i víceřádkový.
Tagy ale neřeší samy o sobě všechno. Proto do nich můžeme dávat parametry které například změní barvu pozadí, nastaví barvu a písmo textu. Pokud chceme zelené pozadí, uděláme to takto:
Do sekce <BODY> dáme parametr BGCOLOR = "green".
A zdrojový kód bude vypadat takoto:

<HTML>
<HEAD>
<TITLE>Zelené pozadí</TITLE>
</HEAD>



<BODY BGCOLOR = "green">
Zkoušíme zelené pozadí
</BODY>
</HTML>

Pokud se na stránku koukneme v prohlížeči, můžeme jásat! Pozadí je opravdu zelené a komentáře nejdou vidět!

zelené pozadí

Zelené pozadí můžeme také udělat bez slůvka green a to tak, že namísto příkazu green dáme tohle vyjádření barvy:

<BODY BGCOLOR = "#00FF00">
I když tam dáme tento kód (#00FF00), tak se nám přece zobrazí zelená...jak to jen funguje? No, v následující tabulce je popis a zobrazení důležitých barev:

Název barvy	standard HTML	kód	barva
azurová	aqua	#00FFFF
černá	black	#000000
modrá	blue	#0000FF
růžová	fuchsia	#FF00FF
šedá	gray	#808080
zelená	green	#008000
jasně zelená	lime	#00FF00
kaštanová	maroon	#800000
námořnická	navy	#000080
hnědá	olive	#808000
fialová	purple	#800080
červená	red	#FF0000
stříbrná	silver	#C0C0C0
modrozelená	teal	#008080
žlutá	yellow	#FFFF00
bílá	white	#FFFFFF

Barva white má ekvivalent #FFFFFF. Je to Hexadecimální číslo skládající se ze čtyř částí a má formát #RRGGBB

Znaku # - anglicky "hash". Ten informuje prohlížeč, že následující barva bude v hexadecimálním tvaru
Za první dvojici RR se dosadí kolik červené se má ve výsledné barvě vyskytovat. Je to hodnota 00 až FF
Za druhou dvojici GG se dosadí kolik zelené se má ve výsledné barvě vyskytovat. Může mít hodnotu 00 až FF
Za třetí dvojici BB se dosadí kolik modré se má ve výsledné barvě vyskytovat. Je to také hodnota 00 až FF

Pokud víme, že bílá barva se skládá s červené, zelené a modré barvy, pak bychom měli dosadit všude FF a vyjde nám tohle: #FFFFFF

Nyní si uděláme stránku s černým pozadím a z bílým písmem. Můžete použít i jiné barvy, nebo i #000000 namísto černé barvy, ale záleží na vás..

<HTML>
<HEAD>
<TITLE>Black/White</TITLE>
</HEAD>

<BODY BGCOLOR = "black" TEXT = "white">
No, máme tu černé pozadí,<BR>
ale bílý text!!!
</BODY>
</HTML>

Prametr TEXT = "white" znamená, že text se zobrazí bílou barvou

To jsme dokázali nadefinovat barvu textu na celou stránku, ale pokud chceme zvýraznit jen část textu tak použijeme následující párový tag:

<FONT COLOR = "red">Tento text bude červený.</FONT>

Pokud chceme změnit i písmo tak přidáme do tagu <FONT> parametr

FACE = "Courier"

A text, který bude v tagu FONT se zobrazí písmem Courier.
Použít můžete i jiné písma, ale pokud napíšete nějaké, které nebude existovat na počítači, tak se standardně zobrazí písmem Times New Roman.

<HTML>
<HEAD>
<TITLE>Barvy písma</TITLE>
</HEAD>

<BODY BGCOLOR = "black" TEXT = "white">
No, máme tu černé pozadí, ale bílý text !!!
<BR>
<FONT FACE = "Arial" COLOR = "red">
Zdůrazněný text
</FONT>
</BODY>
</HTML>

černé pozadí

Nyní se dostáváme dále a to k velikosti písma.
Opět to můžeme udělat několika způsoby:

1) Parametrem SIZE = "X" v tagu <FONT>, kte X je číslo od 1 do 7. Pokud napíšete namísto X například -2 tak písmo v tagu <FONT> bude o dvě "velikosti" menší než je standardní velikost
2) Párovými tagy <H1> až <H6>. Písmo v tagu <H1></H1> je největší a v tagu <H6></H6> nejmenší.

Velikost H1

Velikost H2

Velikost H3

Velikost H4

Velikost H5

Velikost H6

Na víc ještě nemusíte za tyto příkazy dávat <BR>, protože to udělají automaticky!!

Dále mají ještě parametr, který dokáže takový nadpis
zarovnat a to ALIGN = "X" kde x může být:

Hodnota prametru	Způsob zarovnání
left	Zarovnání vlevo
right	Zarovnání vpravo
center	Zarovnání na střed

Nyní si povíme něco o dalším formátování textu.
Formátovat s pomocí tagu <BR> je docela neefektivní, protože znepřehledňuje celý dokument.
Proto HTML definuje další dva párové tagy k formátování textu

První je párová značka <DIV> a definuje odstavec textu a má stejný parametr ALIGN jako třeba příkaz <H1>. Příkaz má tu výhodu, že po uzavření přejde na další řádek.

Druhý párový příkaz je <P> a má stejné parametry jako <DIV>, ale po uzavření tagu přidává celkem dva příkazy <BR>.
A nakonec ukázka která není přehledná, ale přehlednou si ji můžete stáhnout dole!

<html>
<head>
<title>Testovací stránka</title>
</head>
<body bgcolor = "#049189" text = "#ecb83e">

<h1 align = "center">Vítejte na mé stránce</h1>
<hr size = "3" color = "gold" width = "70%">
<font face = "Arial" size = "2">

<p>
HTML umožňuje formátování s pomocí tagů <b>P</b> a <b>DIV</b>.
Díky nim je možné text zarovnat do odstavců a člověk se nemusí otravovat s tagem <b>BR</b> a navíc umožňuje několik typů zarovnání vzhledem k dokumentu.
</p>

<p>
Nyní si předvedeme zarovnání u tagu DIV.<br>
Zarovnání jsou tři:
</p>

<div align = "left">
<font size = "3" color = "red">
<b>Nalevo</b></font>
- parametr ALIGN = "left"
</div>

<div align = "center">
<font size = "3" color = "lime">
<b>Na střed</b></font>
- parametr ALIGN = "center"
</div>

<div align = "right">
<font size = "3" color = "blue">
<b>Napravo</b></font>
- parametr ALIGN = "right"
</div>

<p>
Další odstavec potom začíná na novém řádku.
</p>

<p>
Nyní si předvedeme zarovnání u tagu P.<br>
Zarovnání jsou také tři:
</p>

<p align = "left">
<font size = "3" color = "#ff1188">
<b>Nalevo</b></font>
- parametr ALIGN = "left"
</p>

<p align = "center">
<font size = "3" color = "#29fd88">
<b>Na střed</b></font>
- parametr ALIGN = "center"
</div>

<p align = "right">
<font size = "3" color = "#ba05ff">
<b>Napravo</b></font>
- parametr ALIGN = "right"
</p>

<p>
Další odstavec začíná ještě o řádek níž
než u DIV, tedy o dva !
</p>

<br>
<br>
<br>
<hr size = "3" color = "gold" width = "70%">
<p align = "center">
A tady si ukážeme několik barev
<br>
<br>

<font size = "4"><b>

<font color = "blue">modrá</font>
<font color = "orange">oranžová</font>
<font color = "fuchsia">fialová</font>
<font color = "silver">stříbrná</font>

</b></font>
</p>

</font>
</body>
</html>

Ještě jsem v ukázce uvedl několik parametrů v příkazu <HR> a na ty snad přijdete sami :-)
Jinak příště bude řeč (konečně) o odkazech a obrázcích (3.tutoriál) a další bude kompletně o tabulkách (4.tutoriál).

DOWNLOAD
Předchozí ukázka	v souboru ZIP !
eyedropper301	Program dokáže zjistit barvu aktuálního bodu obrazovky a převést ji do HexaDecimálního zobrazení (usadí se vedle hodin!)
colorscheme	Pomůže navrhnout a vybrat barevné kombinace na stránku
HTML Font Colorizer	Dokáže vyrobit takový hezký text!

HUB

Poslední update: