Svarog: Računalništvo: HTML Tečaj

HTML Tečaj

Glava in telo

Glava

Angl. HEAD

Glava je del HTML datoteke, ki služi za opis same datoteke.
Edini ukaz, ki se uporablja v glave je ukaz TITLE

Primer:

<HEAD> Začetek glave

<TITLE> Moja prva stran </TITLE> Naslov

</HEAD> Konec glave

In kaj dosežemo z ukazom TITLE?
Opišemo stran. Opis opazimo v oglatih oklepajih, v tem primeru je to HTML Tecaj . Ta opis se uporablja v beležki (bookmark), če uporabnik uvrsti dokument vanjo.

Telo

Ja, tukaj pa so vsi ostali ukazi.

<body> Začetek telesa

ukaz

ukaz

</body> Konec telesa

Prvi ukazi

HTML jezik pozna veliko ukazov za oblikovanje besedila. Najbolj osnovna ukaza pa sta naslednja:

Konec vrstice <BR>- break
Začetek odstavka <P> - paragraph

Potrebno je namreč vedno označiti konec vrstice ali začetek odstavka, saj WWW brslalniki ne upoštevajo, če začnemo pisati novo vrstico.

Primer:

Prva vrstica
Druga vrstica

To bo brskalnik izpisal tako:

Prva vrstica Druga vrstica

Dodati moramo ukaz <BR>:

Prva vrstica <BR>
Druga vrstica

Prva vrstica
Druga vrstica

Ukaz <P> uporabimo če želimo začeti z novo vrstico in spustiti še eno:

Prva vrstica <P>
Druga vrstica

Prva vrstica

Druga vrstica

Vodoravna črta

Ukaz: <HR>

Črto lahko narišemo čez polovico širine ekrana:

Ukaz: <HR width=50%>

Ali čez tretjino:

Ukaz: <HR width=33%>

Ali za točno 200 pik:

Ukaz: <HR width=200>

Poravnava:

Levi rob:
Ukaz: <HR width=50% align="left">

in desni:

Ukaz: <HR width=50% align="right">

Debelina črte:

Ukaz: <HR size=4>

Ukaz: <HR size=8>

Ukaz: <HR size=15>

Brez sence:

Ukaz: <HR noshade>

Naslovi (Heading)

Poznamo 6 različnih velikosti naslovov:

&ltH1;>največji naslov&ltH1>	največji naslov
<H2>drugi največji naslov&ltH2>	drugi največji naslov
&ltH3>tretji &ltH3>	tretji
&ltH4>četrti &ltH4>	četrti
&ltH5>peti &ltH5>	peti
<H6>sesti, najmanjši naslov &ltH6>	sesti, najmanjši naslov

Poudarjanja pisav:

Izgled	Ukaz	Komentar

Besedilo	<CITE> Besedilo </CITE>	Citat - Citation
`Besedilo`	<CODE> Besedilo </CODE>	Primer "kodnega besedila" - An example of Code
Besedilo	<EM> Besedilo </EM>	Poudarek - Emphasis
`Besedilo`	<KBD> Besedilo </KBD>	Kot besedilo, ki ga tipka uporabnik - User typed text
`Besedilo`	<SAMP> Besedilo </SAMP>	Vzorčna sekvenca - A sequence of literal characters
Besedilo	<STRONG> Besedilo </STRONG> -	Močno poudarjeno besedilo - Strong typographic emphasis
Besedilo	<VAR> Besedilo </VAR>	Za primer spemenljivk - Indicates a variable name
Besedilo	<B> Besedilo </B>	Mastna pisava - Boldface type
Besedilo	<I> Besedilo </I>	Poševna pisava - Italics
`Besedilo`	<TT> Besedilo </TT>	Pisava "napisana" s pisalnim strojem - TypeType (ali Teletype)
~~Besedilo~~	<STRIKE> Besedilo </STRIKE>	Prečrtana pisava
H₂O	<SUB> Besedilo </SUB>	Indeksna oznaka (subscript)
E=MC²	<SUP> Besedilo </SUP>	Pisava za potence (Superscript)
Besedilo	<BLINK> Besedilo </BLINK>	Utripajoča pisava

Velikost besedila:

Izbiramo lahko med sedmimi različnimi velikostmi črk, od 1 do 7. Privzeta (default) velikost je 3.

Velikost lahko spremenimo na dva načina:
Absolutno: <font size=6>
Relativno: <font size=+3>

Ukaz prekličemo z ukazom <:/font>

Primer: Velikost 6 Tekst

Spremenimo lahko tudi osnovno velikost.

Barva:

<font color="#RRZZMM"> Tekst </font> RR- rdeča komponenta barve
ZZ - zelena komponenta barve
MM - modra komponenta barve

Zapolniti moramo šest mest s šesnajstiškimi števili: 00 pomeni brez barvne komponente, FF pa maksimalno vsebovanost komponente.

Rdeča barva.
<font color="#FF0000"> Tekst </font>

Tekst

Modra:
<font color="#0000FF"> Tekst </font>

Tekst

Predhodno formatirano besedilo

Ukaza :

<PRE > in < /PRE > S tem ukazom lahko prikažemo predhodno pripravljeno besedilo, kot so tekstne datoteke in podobno

Primer

<PRE>
Prva vrstica
      Druga vrstica
                                     Tretja
  Četrta
</PRE>

Na ekranu se vidi:

Prva vrstica
      Druga vrstica
                                     Tretja
  Četrta

Seznami:

Neurejen seznam:

Začetek seznama:

< UL > Konec seznama:

< /UL > Element seznama:

< LI > Preprost primer:

<UL>
<LI> Element 1
</UL>

Izgleda pa takole:

Element 1

Kroglica namesto kvadrata:

<UL type=circle>
<LI> Element 1
</UL>

Izgleda pa takole:

Element 1

in disk: <UL type=disc>
<LI> Element 1
</UL>

Izgleda pa takole:

Element 1

Urejen seznam:

<OL>
<LI> Element 1
</OL>

Izgleda pa takole:

g. Fricelj
šef oddelka

Malo drugače:

<OL type=A>
...

Izgleda pa takole:

g. Fricelj
šef oddelka

<OL type=a>
...

Izgleda pa takole:

g. Fricelj
šef oddelka

<OL type=I>
...

Izgleda pa takole:

g. Fricelj
šef oddelka

<OL type=i>
...

Izgleda pa takole:

g. Fricelj
šef oddelka

<OL type=1 start=106>
...

Izgleda pa takole:

g. Fricelj
šef oddelka

Definicijski seznami

Ukazi

<DL> Definicijski seznam
<DT> Definicijski izraz - definition term
<DD> Definicija definicije - definiton of definition

Primer:

<dl> <dt> Svarog <dd> Izobraževalno društvo </dl> Na ekranu:>p>

Svarog: Izobraževalno društvo

Centriranje besedila in poravnave odstavkov

Kako centrirati besedilo:

Center - ukaz.ki ga uporablja Netscape

<center>
Centrirana vrstica
</center>

Centrirana vrstica

Drug način centriranja

<P align="center">Centrirana vrstica</P>

Centrirana vrstica Desna poravnava:

<P align="right">Ob desnem robu</P>

Ob desnem robu

Slike

Primer:
<IMG SRC="http://www.uni-mb.si/~uvestt01b/graph/redball.gif">
ali:
<IMG SRC="graph/redball.gif">

V bistvu navedemo le katero sliko bomo vnesli na tem mestu in kje se slika nahaja
Uporabljeni sta dve vrsti slik: GIF in JPG.

Sliko lahko tudi poravnamo levo, desno in glede na besedilo, ki sodi k sliki:
Primer:

<img src="graph/mailbox.jpg" align="top"> Poštni nabiralnik

Poštni nabiralnik

<img src="graph/mailbox.jpg" align="middle"> Poštni nabiralnik

Poštni nabiralnik

<img src="graph/mailbox.jpg" align="bottom"> Poštni nabiralnik

Poštni nabiralnik

<img src="graph/mailbox.jpg" align="right"> Poštni nabiralnik

Poštni nabiralnik

Povezave -(linki)

In kako povezati stran z drugo stranjo?
Najprej je potrebno določiti katera beseda ali katere besede bodo sližile za povezavo.
Za primer bo služila beseda poveži

Pritisni na besedo <a href="http://www.yahoo.com"> Poveži </a>

Pritisni na besedo Poveži

Seveda lahko uporabimo katerokoli besedo:

Oglejte si stran izobraževalnega društva <a href="http://www.svarog.org/">Svarog </a>

Oglejte si stran izobraževalnega društva Svarog

Razlaga:
Ukaz za povezavo se začne znotraj tzv. sidra (anchor), to je kombinacija <a> in </a>.
ukazu <a sledi izraz HREF, ki služi navedbi ciljnega HTML sokumenta, na katerega se bo povezava izvedla.

<a href="http://www.yahoo.com"> Yahoo </a> - povezava na dokument na oddaljenem računalniku

<a href="svarog.html"> Svarog </a> - povezava na dokument na istem rečunalniku v istem direktoriju

<a href="test/test.html"> Test </a> - povezava na dokument na istem rečunalniku v direktoriju TEST

Tabele

Ukaz:
<table> in </table>

Vrstica:
<tr> in </tr>

Element:
<td> in 1</td>

Struktura tabele:

Začetek tabele

začetek elementa

besedilo

Konec tabele

Primer:
<table>
<tr>
<td>opis 1</td> <td>opis 2</td> <td>opis 3</td>
</tr>
<tr>
<td>vrednost 1</td> <td>vrednost 2</td> <td>vrednost 3</td>
</tr>
</table>

opis 1 opis 2 opis 3

vrednost 1 vrednost 2 vrednost 3

<Table border>
Tabela z okvirjem:

opis 1 opis 2 opis 3

vrednost 1 vrednost 2 vrednost 3

<table border=10>
Tabela z debelejšim okvirjem:

opis 1 opis 2 opis 3

vrednost 1 vrednost 2 vrednost 3

Tabela s parametrom cellspacing=10:

opis 1 opis 2 opis 3

vrednost 1 vrednost 2 vrednost 3

Tabela s parametrom cellpadding=10:

opis 1 opis 2 opis 3

vrednost 1 vrednost 2 vrednost 3

Stisnjena tabela:
</table border=0 cellpadding=0 cellspacing=0>

opis 1 opis 2 opis 3

vrednost 1 vrednost 2 vrednost 3

Tabela s predpisano širino polovice ekrana:

opis 1 opis 2 opis 3

vrednost 1 vrednost 2 vrednost 3

Različne poravnave besedila v vrsticah:

opis 1 opis 2 opis 3

leva poravnava vredn. 2 vredn. 3

poravnava na sredino vrednost 2 vrednost 3

desna poravnava vredn. 2 vredn. 3

poravnava na zgornji rob vredn. 2 vredn. 3

poravnava na sredino vredn. 2 vredn. 3

poravnava na spodnji rob vredn. 2 vredn. 3

poravnava na osnovno črto vredn. 2 vredn. 3

Tabela s predpisano širino in višino celice:

opis 1 opis 2 opis 3

vrednost 1 vrednost 2 vrednost 3

Tabela z napisom:

Napis pod tabelo opis 1 opis 2 opis 3 vrednost 1 vrednost 2 vrednost 3
Tabela z manjkajočimi podatki (1):

opis 1 opis 2 opis 3 opis 4

vrednost 1 vrednost 4

vrednost 11 vrednost 22 vrednost 33

Tabela z manjkajočimi podatki (2):

opis 1 opis 2 opis 3 opis 4

vrednost 1 vrednost 3

vrednost 11 vrednost 22 vrednost 33

Tabelo lahko uporabimo za besedilo, poravnano na neko srednjo črto:

ime:
priimek:
kraj:
ulica: Janez
Novak
Ljubljana
Monitorjeva ulica 13

Celice tabele so različno visoke:

opis 1 opis 2 opis 3

opis 2.1 opis 3.1

vrednost 1 vrednost 2 vrednost 3

vrednost 1.1 vrednost 2.2

Tabela znotraj druge tabele:

opis 1 opis 2 opis 3

vrednost 1 vrednost 2

A B

C D

Avtor: Tomaž Kovačič

V kolikor želite sodelovati z nami, vas vljudno vabimo, da se nam pridružite, pošljete članke, ali pa samo izrazite vaša mnenja.

<HEAD>	Začetek glave
<TITLE> Moja prva stran </TITLE>	Naslov
</HEAD>	Konec glave

opis 1	opis 2	opis 3
leva poravnava	vredn. 2	vredn. 3
poravnava na sredino	vrednost 2	vrednost 3
desna poravnava	vredn. 2	vredn. 3
poravnava na zgornji rob	vredn. 2	vredn. 3
poravnava na sredino	vredn. 2	vredn. 3
poravnava na spodnji rob	vredn. 2	vredn. 3
poravnava na osnovno črto	vredn. 2	vredn. 3

opis 1	opis 2	opis 3	opis 4
vrednost 1			vrednost 4
vrednost 11	vrednost 22	vrednost 33

Glava in telo

Glava

Telo

Prvi ukazi

Primer:

Vodoravna črta

Naslovi (Heading)

največji naslov

drugi največji naslov

tretji

četrti

peti

sesti, najmanjši naslov

Poudarjanja pisav:

Predhodno formatirano besedilo

Seznami:

Neurejen seznam:

Urejen seznam:

Definicijski seznami

Centriranje besedila in poravnave odstavkov

Slike

Povezave -(linki)

Tabele