HTML - 2. lekce
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

HTML - 2. lekceHTML - 2. lekce

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno

HTML - 2. lekce

Google       Google       9. 7. 2005       36 361×

Barvy, text, obrázky.....

Reklama
Reklama

  1. Barvy
  2. Text
  3. Obrázky
  4. Úkol

Barvy

Pro určení barvy se používá pět druhů syntaxe. Uvedu jen ty nejpoužívanějsí.

způsob příklad: modrá barva poznámka:
jménem (v angličtině) <..color="blue"> viz obr. níže
RGB zápisem <..color="#0000FF"> nejjistější a nejlepší způsob
desetinným RGB zápisem <..color="rgb(0,0,255)"> nefunguje všude

V další tabulce na obrázku vpravo uvedu barvy, které se dají zapsat jménem a budete je používat nejspíš nejčastěji.

Barvit se dá ledacos text, pozadí atd. Základní barvy dokumentu určíte jako parametry tagu body.

Určit se dá barva:

  • odkazu - link
  • aktivního odkazu - alink
  • navštíveného odkazu - vlink
  • textu - text
  • pozadí - bgcolor (lze použít i obrázek background)

Text

Text začíná a končí tagem <font> a má tři základní parametry:

  • typ písma
  • barva písma
  • velikost písma

Typ písma

Typ písma se označuje face a určuje se názvem písma (Arial, Times New Roman, Verdana, Courier...). Používejte radši písma, která jsou všeobecně známá! Ne svoje vlastní, protože prohlížeč používá písma, která má OS k dispozici a to nebude písmo, které jste si od někud stáhli. Já tady používám Verdanu. Bezpečně lze použít i Arial, Courier, Times New Roman nebo Comic Sans MS.

Barva písma

Barvu jsem už ukázal o pár řádků výš a proto ji zde vynechám.

Velikost písma

Velikost se značí se dá určit: číslem (1 - 7), pixely (1px - 7px).

Ukázka:


<font size="1">Velikost 1</font>
<font size="2">Velikost 2</font>
<font size="3">Velikost 3</font>
<font size="4">Velikost 4</font>
<font size="5">Velikost 5</font>
<font size="6">Velikost 6</font>
<font size="7">Velikost 7</font>

Výsledek:

Velikost 1
Velikost 2
Velikost 3
Velikost 4
Velikost 5
Velikost 6
Velikost 7

Je tedy na vás, který způsob si vyberete. Existuju ale i jiná možnost, jak změnit velikost písma - můžete použít nadpis. Je to párový tag <hx>, kde x je úroveň velikosti. Čím menší zadáte číslo tím bude nadpis větší! Nejmenší nadpis je h6 a největší je h1.

Ukázka:


<h6>Nadpis 6. úrovně</h6>
<h5>Nadpis 5. úrovně</h1>
<h4>Nadpis 4. úrovně</h1>
<h3>Nadpis 3. úrovně</h3>
<h2>Nadpis 2. úrovně</h1>
<h1>Nadpis 1. úrovně</h1>

Výsledek:

Nadpis 6. úrovně
Nadpis 5. úrovně

Nadpis 4. úrovně

Nadpis 3. úrovně

Nadpis 2. úrovně

Nadpis 1. úrovně

Formátování

Text se dá formátovat do odstavců <p>.

Ukázka:


<p>první odstavec</p>
<p>druhý odstavec</p>

Výsledek:

první odstavec

druhý odstavec

Odstavec má parametr align, který má tyto hodnoty: left (vlevo), right (vpravo), center (na střed), justify (rozložit).

Ukázka:


<p align="left">odstavec zarovnaný vlevo</p>
<p align="right">odstavec zarovnaný vpravo</p>
<p align="center">odstavec zarovnaný na střed</p>
<p align="justify">odstavec rozložený</p>

Výsledek:

odstavec zarovnaný vlevo

odstavec zarovnaný vpravo

odstavec zarovnaný na střed

odstavec rozložený

Pokud se vám nechce dělat odstavce a jen potřebujete odřádkovat text, stačí zadat tag <br>.

Ukázka:


Tady je nějaký dlouhý text <br>
a tady pokračuje.

Výsledek:


Tady je nějaký dlouhý text
a tady pokračuje.

To by myslím k textu stačilo a můžeme se přesunout k další kapitole.

Obrázky

Obrázek se určuje nepárovým tagem <img>. Jeho parametry uvedu pro přehlednost v tabulce.

parametr zápis hodnoty poznámky
adresa k obrázku src absolutní:
src="http://www.neco.cz/obrazek.gif"
relativní:
src="obrazek.gif"
prohlížeče podporují tyto formáty:
gif, jpeg a png
umístění align left, right, top, botoom, middle...
viz dále
pozice v textu
rámeček border 0 - x šířka rámečku okolo obrázku
popisek alt popis obrázku zobrazí se při najetí myši nad obrázek
šířka width šířka obrázku určí šířku obrázku
výška height výška obrázku určí výšku obrázku

Adresa k obrázku

Spolehlivější je absolutní adresa ale je méně praktická. Když použijete relativní adresu, musí být obrázek ve stejném adresáři jako je stránka!

Umístění

Obrázek se dá tímto způsobem umístit pouze vzhledem k textu. Vypisuju jen ty nejdůležitější.


<img src="adresa k obrázku" align="způsob zarovnání">
např.
<img src="obrazek.jpg" align="left"> 

Ukázka:

Tady je obrázek o rozměrech 50x50 a je zarovnán vlevo.


Tady je obrázek o rozměrech 50x50 a je zarovnán vpravo.


Tady je obrázek o rozměrech 50x50 a je zarovnán nahoru.


Tady je obrázek o rozměrech 50x50 a je zarovnán dolů.


Tady je obrázek o rozměrech 50x50 a je zarovnán na střed.

Rámeček

Kolem obrázku můžete mít rámeček o šířce, kterou si sami určíte.

Ukázka:


<img src="adresa k obrazku" border="0"> bez rámečku
<img src="adresa k obrazku" border="1"> s rámečkem o šířce 1

Výsledek:

bez rámečku

s rámečkem o šířce 1

Popisek

Tento text se zobrazí po najetí myší, ale i pokud obrázek není k dipozici.

Ukázka:


<img src="adresa k obrazku" alt="Tady je popisek obrázku"> 

Výsledek:

Tady je popisek obrázku

Šířka a výška

Určuje se buď číslem a nebo počtem pixelů. Takto se dá obrázek také zmenšit (pokud zadáte menší rozměry než má obrázek) a dá se samozřejmě také zvětšit.

To by na začátek stačilo. V případě dotazů navštivte poradnu. A nakonec úkol.

Úkol

Tentokrát za úkol vytvořte stránku s:
  • titulkem
  • barevným pozadím
  • nadpisem
  • obrázkem, který bude mít popisek a bude zarovnán doleva
  • nějakým textem u obrázku v jednom odstavci

Příště: efekty a zvýraznění písma, odkazy

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
0 hlasů
Google
(fotka) Ondřej ŠateraOndřej se zajímá o tvorbu webů, návrh a implementaci webových aplikací. Studuje v Praze na ČVUT a pracuje u společnosti Emotion design s.r.o
Web     Twitter    

Nové články

Obrázek ke článku Datafesťak 2018 bude o datech, byznyse a ženách v IT

Datafesťak 2018 bude o datech, byznyse a ženách v IT

Na Univerzitě v Hradci Králové se 23. a 24. listopadu potkají všichni, které zajímá práce s daty. 

Reálné zkušenosti se zpracováním dat budou v prostorách univerzity prezentovat zástupci obchodních i výrobních firem. Potkat tak bude možné představitelé například z Kiwi.com, Crocodille, Dáme Jídlo nebo společnosti Adler. 

Reklama
Reklama
Obrázek ke článku 4 tipy, jak financovat rozvoj start-upu

4 tipy, jak financovat rozvoj start-upu

Možná jste právě jedním ze zakladatelů či manažerů nadějného start-upu 
a aktuálně řešíte, kde sehnat finanční prostředky pro další rozvoj. Zde pro vás máme čtyři tipy.

Obrázek ke článku Virtuální zrcadla změní způsob nakupování v e-shopech

Virtuální zrcadla změní způsob nakupování v e-shopech

Díky pluginu Virtooal.com získávají zákazníci e-shopů možnost si vyzkoušet produkty ve virtuálním světě. E-shopy, které si plugin nainstalují, výrazně snižují množství vráceného zboží, dělají nákupy zábavnějšími, a tím budují lepší vztahy se svými zákazníky. V současnosti lze Virtooal.com využít zejména pro kosmetiku, brýle a šperky, do budoucna půjde také o módu.

Obrázek ke článku Kariérní postup & vyšší plat: Titul MBA ve sféře IT

Kariérní postup & vyšší plat: Titul MBA ve sféře IT

Působíte jako specialista v oblasti IT a aspirujete na povýšení, příp. řídící pozici? Pak se jistě potýkáte nejen s vysokými nároky (potenciálních) zaměstnavatelů, ale i se silnou konkurencí ze strany ostatních uchazečů. Pokud chcete zvýšit své šance na kariérní posun a lepší plat, měli byste vedle technických dovedností ovládat i ty manažerské. Pomoci vám v tomto ohledu může studium MBA se specializací na management IT.

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032018 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý