HTML - 2. lekce
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
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 221×

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 Češi sledují internetovou televizi i na dovolené. Na Kuki se dívalo nejvíce diváků na Slovensku

Češi sledují internetovou televizi i na dovolené. Na Kuki se dívalo nejvíce diváků na Slovensku

V dubnu letošního roku skončilo omezení sledování internetového vysílání rozhlasových a televizních stanic za hranicemi České republiky. Sledovat IPTV platformy lze nejenom na dovolené, ale i služební cestě a to kdekoliv v rámci Evropské unie. Uživatelé televize Kuki tuto novinku během léta hojně využívali. Dovolenou si užili i se svými oblíbenými pořady a filmy. 

Reklama
Reklama
Obrázek ke článku Využijte plně potenciál mobilních technologií pro svou firmu

Využijte plně potenciál mobilních technologií pro svou firmu

Analytici společnosti IDC upozorňují, že v době nástupu nových mobilních technologií, jež podporují třeba umělou inteligenci, rozšířenou realitu nebo 5G sítě, bude pro úspěch firem ještě zásadnější zvolit ta správná řešení.  Kudy tedy vede cesta k efektivnímu využití mobilních technologií ve firmách? Na to se zaměří již šestý ročník úspěšné konference Mobilní řešení pro business, která se koná 20.9.2018 v pražském Kongresovém centru Vavruška na Karlově náměstí.

Obrázek ke článku Elektronická faktura není totéž, co faktura v e-mailu. Firmy e-fakturaci zatím příliš nevyužívají

Elektronická faktura není totéž, co faktura v e-mailu. Firmy e-fakturaci zatím příliš nevyužívají

Daňový doklad může mít listinnou nebo elektronickou podobu. Díky moderním účetním systémům je tak možné faktury posílat i přijímat s využitím elektronické výměny dat. Tuto vymoženost ale využívají pouhé jednotky procent firem. Mnohem větší nárůst obliby má paradoxně obdobný systém u živnostníků a malých firem, kteří si mohou doklad automaticky naimportovat do své fakturační aplikace ze zaslaného odkazu.

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