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

HTML - 2. lekceHTML - 2. lekce

 

HTML - 2. lekce

Google       Google       9. 7. 2005       35 030×

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

Reklama
Reklama
Obrázek ke článku Nový IT hráč na českém trhu

Nový IT hráč na českém trhu

V roce 2015 otevřela v Praze na Pankráci v budově City Tower své kanceláře společnost EPAM Systems (NYSE:EPAM), jejíž centrála se nachází v USA. Společnost byla založená v roce 1993 a od té doby prošla velkým vývojem a stále roste.

Obrázek ke článku České Radiokomunikace opět hledají nejlepší nápady pro internet věcí

České Radiokomunikace opět hledají nejlepší nápady pro internet věcí

České Radiokomunikace (CRA) pořádají druhý ročník CRA IoT Hackathonů. Zájemci z řad vývojářů a fanoušků moderních technologií mohou změřit své síly a během jediného dne sestrojit co nejzajímavější funkční prototyp zařízení, které bude komunikovat prostřednictvím sítě LoRa. CRA IoT Hackathony se letos uskuteční ve dvou fázích, na jaře a na podzim, v různých městech České republiky. Jarní běh se odstartuje 31. března v Brně a 7. dubna v Praze.

Obrázek ke článku Cloud computing je využíván stále intenzivněji

Cloud computing je využíván stále intenzivněji

Využívání cloud computingu nabývá na intenzitě. Jen v letošním roce vzroste podle analytiků trh se službami veřejného cloudu o 18 %, přičemž o téměř 37 % vzrostou služby typu IaaS. Růst o více než pětinu pak čeká služby poskytování softwaru formou služby, tedy SaaS. Aktuálním trendům v oblasti využívání cloudu se bude věnovat konference Cloud computing v praxi, která se koná 23. března. 2017 v pražském Kongresovém centru Vavruška na Karlově náměstí 5.

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 © 20032017 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý