Osnove HTML

Vsebina

Kaj je HTML?

HTML (Hypertext Markup Language) je zaporedje ukazov, ki povejo kako naj se predstavitvena stran prikaže. Ukazi se imenujejo tudi značke (tags). Značke se vedno nahajajo med znakoma < in >, kot npr. <TAG>

Spletni pregledovalniki (browsers) so programi, ki berejo ukaze v jeziku HTML in glede na to prikazujejo vsebino. Vsako ročno oblikovanje strani (npr. večkratni presledki, prazne vrstice,...) se ignorira. Na primer, če odtipkamo 

        Danes
                  je
                             lepo
                                         vreme.

bo prikazovalnik prikazal naslednjo vsebino:

Danes je lepo vreme.

Datoteke v HTML imajo podaljšek .htm ali .html

Značke v HTML

Obstajata dve vrsti značk:
  • samostojne značke (npr. <TAG>)
  • začetne in končne značke (npr. <TAG> in </TAG>)
Samostojne značke ne rabijo zaključka (npr. nova vrstica, nov odstavek...), saj vsaka naslednja uporaba iste značke prekliče prejšnjo. Včasih pa moramo posebej povedati do kje seže učinek značke (npr. debeli izpis, centriranje besedila,...). V tem primeru uporabimo končno značko. Končna značka se od začetne značke loči le po dodatnem znaku / pred imenom značke. Vse kar se nahaja v notranjosti značke se podreja oblikovanju, ki ga zahteva značka.

Splošna oblika opisa predstavitvene strani

Opis predstavitvene strani v jeziku HTML je naslednji: 

    <HTML>
    <HEAD>
    <TITLE>Naslov, ki se pojavi v okviru okna</TITLE>
    </HEAD>
    <BODY>
    Vsebina predstavitvene strani
    </BODY>
    </HTML>
Med znački <HEAD> in </HEAD> napišemo informacije o dokumentu, ki sledi. Te informacije se na sami predstavitveni strani ne izpišejo. V zgornjem primeru je uporabljena samo značka <TITLE>, ki podaja vsebino, ki se izpiše v zgornjem okviru okna. Za oblikovanje predstavitvenih strani v slovenščimi (pisanje šumnikov) si pomagamo z 
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250">
Če v glavi uporabimo to značko, lahko uporabljamo č,š in ž kar s tipkovnice.

Še bolj splošna rešitev za pisanje šumnikov pa je uporaba kode znakov v obliki 

&#n;
kjer je n

nČrka
268 Č
269 č
352 Š
353 š
381 Ž
382 ž

Mali č torej zapišemo kot &#269;

V primeru pisanja šumnikov s kodami je koristno v glavi dokumenta navesti 

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
Tako pisanje šumnikov je nekoliko nerodno zato se jih splača v programu TextPad dodati v datoteko htmlchar.tcl, ki se nahaja na poddirektoriju Samples (na mestu kjer je nameščen TextPad).

Naslovi

Na voljo imamo šest nivojev naslovov (headings) h1 do h6. Drugi nivo, ki je uporabljen zgoraj dosežemo z: 

    <H2>Naslov</H2>
Naslov lahko centriramo z dodatkom: 
    <H2 align=center>Naslov</H2>

Odstavki in nove vrstice

Običajne odstavke (paragraphs), katerih širina se prilagaja trenutni velikosti okna, dosežemo z: 

    <P>
Znački <P> lahko z dodatkom align določimo način poravnavanja - left, right, center. Primer: 
<P align=right>
Ta del besedila bo <br>
desno poravnan.
</P>
Rezultat:

Ta del besedila bo
desno poravnan.

Skok v novo vrstico zahtevamo z značko <BR>

Oblike izpisa

Na voljo je več različnih stilov.

Debeli izpis (bold) zahtevamo z: 
    <B> Besedilo </B>
Poševni izpis (italic) zahtevamo z:: 
    <I> Besedilo </I>
Podčrtan izpis (underline) zahtevamo z: 
    <U> Besedilo </U>
Neproporcionalni izpis (typewriter) zahtevamo z: 
    <TT> Besedilo </TT>
Utripajoč izpis (blink) zahtevamo z: 
    <BLINK> Besedilo </BLINK>
Stile lahko gnezdimo (debelo in poševno hkrati).

Seznami

Neoštevilčene sezname (unnumbered lists) dobimo z 

    <UL>
    <LI> Prva točka
    <LI> Druga točka
    <LI> Tretja točka
    </UL>
Rezultat:
  • Prva točka
  • Druga točka
  • Tretja točka
Če želimo uporabljati oštevilčene sezname (numbered lists) namesto neoštevilčenih, uporabimo namesto značke UL značko OL. Rezultat:
  1. Prva točka
  2. Druga točka
  3. Tretja točka
Sezname lahko gnezdimo, npr. 
    <OL>
    <LI> Prva točka
      <UL>
         <LI> Prva pika prve točke
         <LI> Druga pika prve točke
         <LI> Tretja pika prve točke
      </UL>
    <LI> Druga točka
    <LI> Tretja točka
    </OL>
Rezultat:
  1. Prva točka
    • Prva pika prve točke
    • Druga pika prve točke
    • Tretja pika prve točke
  2. Druga točka
  3. Tretja točka

Ročno oblikovano besedilo

Če želimo, da je besedilo prikazano tako, kot smo ga natipkali (razlomi vrstic, večkratni presledki,...), moramo uporabiti značko <PRE> (predefined text): 

<PRE>
   Danes
           je
                  lepo
                          vreme
</PRE>
Rezultat je 
   Danes
           je
                  lepo
                          vreme
Tak izpis je npr. uporaben pri izpisih programov. Zaradi poravnavanja po stolpcih se v tem primeru uporabi neproporcionalni font.

Sidra

Sidra (anchors) so značke, s pomočjo katerih zahtevamo skok na nek drug dokument in prikaz le tega. Uporabljamo lahko relativni naslov (če se dokument nahaja na istem računalniku, morda le na drugem direktoriju) ali pa absolutni naslov (URL - Uniform Resource Locator), če se dokument nahaja na drugem računalniku.
Primer klica z relativnim naslovom 

    <A HREF="poddirektorij/vaja.htm"> Opisno pojasnilo </A>
Primer klica z absolutnim naslovom 
    <A HREF="http://www.fdv.uni-lj.si/"> Fakulteta za družbene vede </A>
Poljubnemu mestu v dokumentu lahko damo ime 
    <A NAME="Oznaka"> </A>

ki ga uporabimo za skakanje znotraj istega dokumenta z značko 

    <A HREF="#Oznaka"> Opisno pojasnilo </A>
Podobno lahko skočimo na izbrano mesto v dokumentu, ki se nahaja na drugem računalniku: 
    <A HREF="URL#Oznaka"> Opisno pojasnilo </A>

Vključevanje slik

V dokument vključimo slike z: 

    <IMG SRC="Naslov in ime datoteke">
Pravila za opis kje se slika nahaja so enaka kot pri sidrih (relativni ali absolutni naslovi). Vsi prikazovalniki naj bi prepozali in prikazovali vsaj formata GIF in JPG.
Npr. 
<center>
<IMG SRC="tiger.gif">
</center>
Ustvari naslednji rezultat:
Sliko lahko raztegnemo v horizontalni / navpični smeri z: 
    <IMG SRC="Naslov in ime datoteke" WIDTH=W HEIGHT=H>
Kjer pomenita W in H širino in višino slike v pikah (pixels). Lahko pa navedemo tudi relativno velikost v odstotkih glede na velikost okna, tako da številki dodamo znak %.
Sliko lahko uporabimo tudi kot sidro. Primer uporabe: 
Pritisni na tigra:
<a href="http://www.fdv.uni-lj.si"><img src="tiger.gif" width=40></a>
Rezultat:
Pritisni na tigra:

Pošiljanje pošte

Če želima na predstavitveno stran vključiti možnost pošiljanje pošte izbrani osebi, to storimo z dodatkom mailto v sidru

Zapis 

e-pošta: <A HREF="mailto:x.y@uni-lj.si"> x.y@uni-lj.si  </A>
ustvari naslednji rezultat:

e-pošta: x.y@uni-lj.si

S klikom na označeno mesto se prestavimo v program za pošiljanje pošte izbranemu naslovniku.

Tabele

Tabele so zelo močno orodje v HTML. Kot smo omenili jezik sam ne omogoča natančnega oblikovanja strani, zato ponavadi za ta namen uporabimo tabele (in nekaj zvijač). Oblika dokumenta, ki ga trenutno pregledujete, je npr. določena z uporabo tabel. V besedilo vključimo tabelo z uporabo značke <TABLE>.

Značke, ki se uporabljajo v tabelah:

  • Znački <TABLE> in </TABLE> označujeta začetek in konec tabele.
  • Znački <TH> in </TH> se uporabljata za oznako stolpcev (prva vrstica tabele) - oznake se izpišejo v debelem tisku.
  • Znački <TR> in </TR> naznanjata novo vrstico. V večini primerov lahko končno značko </TR> izpustimo.
  • Znački <TD> in </TD> naznanjata nov stolpec v trenutni vrstici.
Pomembno: Tabela je zgrajena iz ene ali večih vrstic, vsaka vrstica pa iz ene ali večih celic in na ta način moramo tabelo tudi opisati.
Primer opisa tabele: 
<table>
<tr> <td> a   </td> <td> b   </td> <td> c   </td>
<tr> <td> aaa </td> <td> bbb </td> <td> ccc </td>
</table>
in odgovarjajoči izgled

a b c
aaa bbb ccc

Značka <TABLE> ima lahko še več dodatkov. Omenimo le najpomembnejše:
  • BORDER se nanaša na debelino robov tabele v pikah (debelina 0 pomeni, da tabela nima roba).
  • CELLSPACING se nanaša na prostor med celicami (v pikah).
  • CELLPADDING se nanaša na prostor znotraj celic v pikah (prostor med mejami celic in vsebino znotraj celic).
Primer: 
<table border=2 cellpadding=6>
<tr> <td> a   </td> <td> b   </td> <td> c   </td>
<tr> <td> aaa </td> <td> bbb </td> <td> ccc </td>
</table>
in odgovarjajoči izgled

a b c
aaa bbb ccc

Tudi znački <TD> in <TR> imata lahko več dodatkov, npr.:
  • ALIGN (left, center, right) - vodoravno poravnavanje celice.
  • VALIGN (left, center, right) - navpično poravnavanje celice.
  • COLSPAN = n trenutna celica naj se raztega čez n stolpcev.
  • ROWSPAN = n trenutna celica naj se raztega čez n vrstic.
Primer: 
<table border=2 cellpadding=6>
<tr align=center> <td>           a   </td> <td colspan=2> b   </td>
<tr>              <td rowspan=2> aaa </td> <td> bbb </td> <td> ccc </td>
<tr>                                       <td> bbbb </td> <td> cccc </td>
</table>
in odgovarjajoči izgled

a b
aaa bbb ccc
bbbb cccc

Barve v HTML

Za opis barv se uporablja sistem RGB (Red-Green-Blue). Barvo podamo z mešanico teh treh barv, pri čemer je količina vsake od teh treh barv podana s šestnajstiškim številom od 0 do FF (0 do 255). Nekaj primerov:

ZapisBarva
'#000000'  
'#FFFFFF'  
'#FF0000'  
'#00FF00'  
'#0000FF'  
'#FFFF00'  
'#FF00FF'  
'#00FFFF'  
'#213329'  

Poleg zapisa v RGB lahko nekatere osnovne barve pokličemo kar po imenu (npr. red, orange, lightyellow,...). Nekaj primerov barv in odgovarjajočih imen:

 Black = "#000000"   Green = "#008000"
  Silver = "#C0C0C0"   Lime = "#00FF00"
  Gray = "#808080"   Olive = "#808000"
  White = "#FFFFFF"   Yellow = "#FFFF00"
  Maroon = "#800000"   Navy = "#000080"
  Red = "#FF0000"   Blue = "#0000FF"
  Purple = "#800080"   Teal = "#008080"
  Fuchsia= "#FF00FF"   Aqua = "#00FFFF"

Uporaba barv:
  • Barva ozadja: znački <BODY> dodamo lastnost bgcolor, npr. 
     <BODY bgcolor=Orange>
  • Barva črk: znački <FONT> dodamo lastnost color, npr. 
     <FONT color=Red> Besedilo </FONT>
  • Barva celice v tabeli: znački <TD> dodamo lastnost bgcolor, npr. 
     <TD bgcolor=Orange> Besedilo </TD>

Okviri

Z okviri razdelimo okno na več delov.

  • Horizontalna razdelitev 
    <HTML>
<HEAD>
 <TITLE>Okviri</TITLE>
 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250">
</HEAD>
 <FRAMESET rows="33%,67%">
    <FRAME src="zgornji.htm" name="zgornji">
    <FRAME src="spodnji.htm" name="spodnji">
 </FRAMESET>
</HTML>
  • Vertikalna razdelitev 
    <HTML>
<HEAD>
 <TITLE>Okviri</TITLE>
 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250">
</HEAD>
 <FRAMESET cols="33%,67%">
    <FRAME src="levo.htm" name="levi">
    <FRAME src="desno.htm" name="desni">
 </FRAMESET>
</HTML>
  • Kombinirana razdelitev 
    <HTML>
<HEAD>
 <TITLE>Okviri</TITLE>
 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250">
</HEAD>

 <FRAMESET cols="33%,67%">
     <FRAME src="levo1.htm" name="levi1">
     <FRAMESET rows="33%,67%">
	    <FRAME src="zgornji1.htm" name="zgornji1">
	    <FRAME src="spodnji1.htm" name="spodnji1">
     </FRAMESET>
 </FRAMESET>
</HTML>
  • Odpiranje strani v istem okviru, novem oknu ali izbranem okviru

    • Isti okvir: 
       <A HREF="http://www.google.com">http://www.google.com </A>
    • Novo okno: 
       <A HREF="http://www.najdi.si" target="_blank">http://www.najdi.si </A>
    • Izbrani okvir: 
       <A HREF="http://www.fdv.uni-lj.si" target="spodnji1">http://www.fdv.uni-lj.si </A>

Dodatki

Kot smo omenili se dodatni presledki med besedami ignorirajo. Morebitne potrebne dodatne presledke med besedami zahtevamo z ukazom &nbsp; (non-breakable space).
Izpis vodoravne črte zahtevamo z: 
    <HR>
V tem primeru dobimo črto čez celo širino trenutnega objekta (okna ali celice v tabeli). Dodamo lahko še debelino črte in širino (v pikah ali %). Zahteva 
    <HR size=10 width=40%>
ustvari izpis
Del besedila centriramo z značko <CENTER>.
Zapis 
<CENTER>
To bo na sredini
</CENTER>
npr. povzroči izpis oblike
To bo na sredini
Indekse in potence dobimo z značkama <SUB> in <SUP>.
Npr. zapis 
x<SUP>2</SUP>
povzroči izpis oblike
x2
Komentar (pojasnila, ki jih potrebujemo za svoje potrebe in jih prikazovalnik ne prikaže) zapišemo med znaki <!-- (začetek komentarja) in --> (konec komentarja).
Velikost črk spreminjamo z dodatkom size k znački <FONT>. Velikosti so od 1 do 7. Npr.

<FONT SIZE=1>Napisano z velikostjo 1.</FONT>
ustvari izpis
Napisano z velikostjo 1.

<FONT SIZE=3>Napisano z velikostjo 3.</FONT>
ustvari izpis
Napisano z velikostjo 3.

<FONT SIZE=7>Napisano z velikostjo 7.</FONT>
ustvari izpis
Napisano z velikostjo 7.

Dodatni naslovi