Osnove HTML – Dekani,2006

Osnove HTML

Vsebina

Kako in kaj prenašamo?


Po spletu se prenaša besedilo (znaki zapisani z ničlami in enicami). Od tod tudi ime hipertekst.
Kaj pa slike zvok, video? Tudi to so zgolj podatki zapisani z ničlami in enicami, le da jih različni
programi predstavljajo na različne načine.

Poglejmo si, kako v resnici izgleda poljubna spletna stran. Pogled -> Izvorna koda

Kako postavimo spletno stran na strežnik?

Ustvarimo mapo public_html, ki bo edina vidna za obiskovalce (ostale mape so nedostopne)
in začetno spletno stran poimenujemo index.html. Privzeto je, da brskalnik odpre spletno
stran s tem imenom, če se nahaja v mapi, ostalih pa ne odpira neposredno.

Poglejmo si na naslednjih primerih:

  1. Primer brez spletne strani z imenom index.html
  2. Primer spletne strani z imenom index.html

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>

Spletne strani “pišemo” v preprostih urejevalnikih besedila (Beležnica, UltraEdit, TextPad, …),
besedilo oblikujemo z značkami, izgled pa pregledujemo s spletnimi pregledovalniki.

Zakaj Word ni dober?

Word je urejevalnik besedila, ki nam takoj prikaže končni izgled (WYSIWYG) in ima “v ozadju” nam
nevidna navodila za urejanje besedila, ki jih drugi programi ne znajo predstaviti.

Spletni pregledovalniki (browsers – Firefox, Opera, I.E.) 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.


Presledkov in praznih vrstic ne prikaže (jih ne upošteva).

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. krepki 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 spletne strani

Oblika spletne strani v jeziku HTML je naslednja:

    <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.

Sicer lahko vedno “ročno” nastavimo nabor znakov: Pogled -> Kodiranje znakov, vendar
pravi programer vedno poskrbi, da to ni potrebno. Enostavno zapiše zgoraj navedni ukaz in brskalnik
bo znake pravilno prikazal.

Š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 “

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).

Sedaj lahko naredimo nekaj primerov: Prazna,Naslovna vrstica, Šumniki

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>

Naredimo primer: Naslovi različnih velikosti

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>

Naredimo primer: Odstavki, poravnava in nove vrstice

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.pef.upr.si"><img src="tiger.gif" width=40></a>

Rezultat:

Pritisni na tigra:

Pošiljanje pošte

Če želimo 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@guest.arnes.si"> x.y@guest.arnes.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 (top, bottom) – 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:

Zapis Barva
‘#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”

 

Tukaj lahko najdeš imena vseh barv.

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>
     Primer: <FONT color="Red">Hkrati</FONT> lahko <FONT color="DarkMagenta" FACE="Comic SANS MS" SIZE="+3">kombiniramo več </FONT> lastnosti besedila.
     Rezultat:
      Primer:   Hkrati lahko kombiniramo več lastnosti besedila.    Tukaj lahko najdeš imena in vzorce pisav.

     

  • Barva ozadja tabele: znački <TABLE> dodamo lastnost bgcolor, npr. 
     <TABLE bgcolor="Silver">

    Primer.

  • Barva celice v tabeli: znački <TD> dodamo lastnost bgcolor, npr. 
     <TD bgcolor="Orange"> Besedilo </TD>
  • Barva povezave – link, barva že obiskane povezave – vlink, barva aktivne povezave (med klikom na povezavo) – alink : 
     Navedemo na samem začetku telesa (body):
     <body bgcolor=”Orange” link=”Navy” vlink=”DarkRed” alink=”White”>

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="60%,40%">
    <FRAME src="Telo_tabela.html" name="zgornji">
    <FRAME src="spodnji_okvir.html" 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="20%,80%" frameborder=0  >
    <FRAME src="Levi_okvir.html" name="levi">
    <FRAME src="Telo_tabela.html" 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="20%,80%">
     <FRAME src="Levi_okvir.html" name="levi1">
     <FRAMESET rows="40%,60%" frameborder=0 >
	    <FRAME src="Telo_tabela.html" name="zgornji1">
	    <FRAME src="Spodnji_okvir.html" 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.obala.net" target="_blank">http://www.obala.net </A>
    • Izbrani okvir: 
       <A HREF="http://www.studenti.pef.upr.si/~zdravkom/ROM/" target="Spodnji_okvir">ROM </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

Pripravil: Andrej Mrvar, Preuredil: Zdravko Mutič