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

HTML - 2. lekceHTML - 2. lekce

 

HTML - 2. lekce

Google       Google       9. 7. 2005       34 497×

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 Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres HCPP16 pořádá od 30. září do 2. října nezisková organizace Paralelní Polis již potřetí, a to ve stejnojmenném bitcoinovém prostoru v pražských Holešovicích. Letos přiveze na třídenní konferenci přes 40 většinou zahraničních speakerů – lídrů z oblastí technologií, decentralizované ekonomiky, politických umění a aktivismu. Náměty jejich přednášek budou také hacking, kryptoměny, věda, svoboda nebo kryptoanarchie.

Reklama
Reklama
Obrázek ke článku ICT PRO školení zaměřené nejenom na ICT

ICT PRO školení zaměřené nejenom na ICT

Dovolte, abychom se představili. Jsme zaměstnanci společnosti ICT Pro, profesionálové v oblasti poskytování komplexních ICT služeb. Neboli služeb spojených s informačními a komunikačními technologiemi, které dnes - ve 21. století - tvoří  nedílnou součást běžného provozu všech moderních firem.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý