Barve v HTML

Definicije lahko navajamo s pomočjo HTML ukazov: <DL><DT><DD></DL>
<DL>.....Definicijski seznam
<DT>.....Pojem definicije
<DD>.....Pojasnilo definicije
</DL>....Konec navedbe definicije

Primer:

<DL>

<DT>Ime definicije<DT/>

<DD> Praviloma daljša formulacija definicije</DL>

</DL>

Seznami

Seznami so v predstavitvenih straneh velikokrat uporabljeni. HTML nam omogoča uporabo dveh vrst seznamov: oštevilčene in neoštevilčene. Pri navajanju seznamov v HTML-ju uporabljamo naslednje ukaze:
<UL>.....Ukaz, ki omejuje neoštevilčen seznam
<OL>.....Ukaz, ki omejuje oštevilčen seznam
<LI>.....Ukaz, ki določa postavke ustreznega seznama

Posamezni ukazi poznajo že določene lastnosti:
<UL TYPE="{disc|square|circle}" COMPACT>
<OL TYPE="{1|a|A|i|I}" START=zap. št. zač. oznake COMPACT>
<LI TYPE="{disc|square|circle}" oz. "{1|a|A|i|I}" VALUE=št.>

Primer1:

<OL>  <LI>Uvod  <LI>Jedro    <UL>      <LI>Pregled      <LI>Stanje        <UL>          <LI>Analiza          <LI>Potek          <LI>Zapis        </UL>      <LI>Prihodnost    </UL>  <LI>Konec</OL>

1. Uvod
2. Jedro
   • Pregled
   • Stanje
     • Analiza
     • Potek
     • Zapis
   • Prihodnost
3. Konec

Primer2:

<OL TYPE="I" START=2>  <LI>Drugič  <LI VALUE=4>Četrtič    <UL TYPE="disc">      <LI>Krožec      <LI TYPE="square">Kvadratek        <OL TYPE=A>          <LI>A          <LI>B          <LI>C        </OL>      <LI TYPE="circle">Krožnica    </UL>  <LI TYPE="A" VALUE=7>Sedmič</OL>

2. Drugič
4. Četrtič
   • Krožec
   • Kvadratek
     1. A
     2. B
     3. C
   • Krožnica
5. Petič

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.

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.

<P align = center><IMG SRC="tiger.gif"></P>

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.filip.phpnet.us"><img src="tiger.gif" width=40></a>

Rezultat: 
Pritisni na tigra: 

Lastnosti vnosa slike:

<IMG

   SRC="URL|relativna pot"                 {pot do slike}                               

   LOWSRC="URL|relativna pot" {pot do nižje kvalitetne slike}

   ALT="opis slike"    {opisno ime, ki se pokaže namesto slike}

   ALIGN="top|middle|bottom|left|right"       {poravnava}

   HEIGHT=višina slike v točkah          

   WIDTH=širina slike v točkah

   BORDER=debelina obrobe slike pri povezavi v točkah

   HSPACE=vrinjeni presledek v točkah vodoravno

   VSPACE=vrinjeni presledek v točkah navpično

   USEMAP=URL         {kadar želimo imeti na sliki več povezav}

   ISMAP              {več povezav najdemo na strežnikovi strani}

>

Povezave in karte

Poleg vključevanja slik je drugi razlog za priljubljenost in uporabnost označevalnega jezika HTML možnost vnašanja povezav. Ker je povezava lahko katera koli beseda ali slika, lahko z njimi ustvarjamo nadpredstavne dokumente. 

Povezave označimo na naslednji način:
<A HREF= "http://www.imestrežnika.si/imedokumenta.htm"> Označeno besedilo ali slika</A> 

Označeno besedilo ali slika

Namesto besedila lahko seveda uporabimo sliko. 

Z oznako <A> lahko določimo tudi poimenovano mesto znotraj dokumenta, ki bo cilj določene hiperpovezave. Tedaj je oznaka samostojna in ne potrebuje končne oznake </A>, saj zgolj označuje mesto v dokumentu.

Za označitev točke v dokumentu uporabimo parameter NAME, ki mu priredimo poljubno, vendar znotraj dokumenta enolično določeno ime. Za sklicevanje na tako označena mesta je potrebno posebej označiti absolutni krajevnik. Pred oznako vedno zapišemo višaj # (hash). Vsebina parametra NAME je občutljiva za velike in male znake.

Primer:
Na vrhu tega dokumenta smo vrh označili z naslednjo označbo: <A NAME="vrh">.
Tukaj pa z oznako <A HREF="#vrh";> Pritisni tukaj</A> dosežemo, da nas klik na omenjeno besedilo prestavi na vrh dokumenta! 
Če pa želimo, da nas v nekem drugem dokumentu postavi na določeno mesto, ki je v tistem dokumentu tudi označeno, pa to storimo na naslednji način: <A HREF="vsebina8.htmlljezik.html#vrh">Pritisni tukaj</A> 

Omenili smo še, da je mogoče kot povezavo uporabiti tudi sliko. Še več, ista slika lahko pelje do različnih povezav. V tem primeru moramo sliko opremiti s karto vročih mest, ki natančno določajo, kam kaže določen del slike.

Slikovno karto definirmao s parom oznak <MAP>. Dokument lahko vsebuje več slikovnih kart, saj vsako poimenujemo s parametrom NAME. Znotraj para oznak je ena ali več oznak <AREA>, ki določajo posamezna vroča mesta slike. Vroča mesta lahko definiramo kot pravokotnike(rect), kroge(circle), večkotnike(poly) ali celotna slika(default).

<MAP [NAME={ime karte}]>

  [< AREA

      [SHAPE="{rect|circle|poly|default}"]

      [COORDS="x₁,x₂,..."]

      [HREF="URL"|NOHREF]

      [ALT="{opis povezave}"]

  ...]

</MAP>

S parametrom COORDS definiramo območje, kar je odvisno od izbrane oblike, ki jo določa parameter SHAPE. Območje določamo z navedbo točk, ki se navedejo glede na izhodišče slike, ki je vedno levi zgornji vogal slike. Pri pravokotnikih podajamo koordinati levega zgornjega in desnega spodnjega vogala, pri krogu podamo koordinati središča in polmer, privečkotniku pa podajamo koordinate posameznih oglišč. Če vrsto območja označimo z default, se prevzame vsa površna slike, kar lahko izkoristimo za pokritje še nedefiniranih območij. Če se dve območji prekrivata, obvelja tisto, ki je navedeno prej.

Primer:

<MAP NAME="karta">

  <AREA COORDS="4,8,89,89"

            HREF="HTML-jezik/karta1.htm" ALT="Kvadrat">

  <AREA SHAPE="circle" COORDS="96,86,37"

            HREF="HTML-jezik/karta2.htm" ALT="Krog">

  <AREA SHAPE="poly" COORDS="140,52,178,17,179,123"

            HREF="HTML-jezik/karta3.htm" ALT="Trikotnik">

  <AREA SHAPE="default"

            NOHREF ALT="Preostali del slike,

                        ki ne povezuje">

</MAP>

<IMG SRC="slika.jpg" ALT="Občutljiva slika"



Sliko smo v dokument vnesli z ukazom <IMG SRC ...> in lastnostjo USEMAP, ki sliki priredi določeno območje. Ker območje določimo posebej, ga lahko zapišemo kjerkoli, tudi v drugem dokumentu in na drugem mestu. 

Slika pa lahko povezuje tudi na druge povezave, ne samo na klasično obliko dokumenta HTML. Poveže lahko na elektronsko pošto, ftp protokol, na debate v obliki news, itd. Pa si poglejmo še te primere:



<A HREF="mailto:[email protected]">elektronski naslov </A>




<A HREF="ftp://ftp.pasadena.si/books/java/primeri.zip>datoteka z zgledi </A>




<A HREF="news:soc.culture.slovenia">debata o Sloveniji </A>

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:[email protected]">[email protected]  </A>

ustvari naslednji rezultat: 

e-pošta: [email protected]

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

Telefonska številka

To storimo zelo podobno kot pri e-pošti. tudi pri tem primeru moramo slediti pravilom vhref atriutu.

<a href="tel:000000000" > Tel:000000000</a>

Prikaz:

Tel:000000000

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

Okvirji

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>

  Iz danega primera lahko razberemo način, kako s pritiskom na hiperpovezavo v enem oknu spremenimo vsebino v drugem oknu. To naredimo z uporabo parametra TARGET pri oznaki <A HREF>, kjer pride v poštev poimenovanje (NAME) posameznih okvirov. Lahko pa namesto imena okvira uporabimo še druge parametre: 
   

  Parameter	Pomen
  _blank	Vsebina povezave se prikaže v novem, praznem in nepoimenovanem oknu
  _self	Vsebina se prikaže v istem okviru. To je tudi privzeto vedenje.
  _parent	Vsebina se prikaže v nadrejenem oknu, če gre za gnezdenje.
  _top	Vsebina se prikaže v istem oknu, a tokrat brez okvirov. Tako se najlažje prebijemo ven.

  Obrazci

  Z obrazci lahko znotraj spletne strani dodajamo različne elemente, znane iz grafičnih uporabniških vmesnikov, kot so npr. ukazni guumbi, vnosna polja ali stikala. Grafični brskalniki prikazujejo elemente, prevzete iz operacijskega sistema, v katerem se izvajajo. 
  
  V HTML obrazce kodiramo znotraj para oznak <FORM>. Oznaka določa začetek obrazca, poleg tega podaja tudi informacijo o programu oz. protokolu, ki vneseno informacijo obdela.

  Celotna oblika:<FORM    [ACTION="{strežni program}|{strežni protokol}"]    [METHOD="{get|post}"]    [ENCTYPE="{kodiranje podatkov}"]>

  Parameter ACTION lahko vsebuje naslov URL strežnega programa, ki bo obdelal vsebino, vneseno v obrazec, ali pa vsebuje elektronski naslov v obliki URL, kamor se bo vsebina obrazca posredovala po protokolu za prenos elektronske pošte (npr. mailto:[email protected]). Parameter METHOD določa način prenosa podatkov, če je uporabljen protokol HTTP. S parametrom ENCTYPE lahko določimo drugačen način kodiranja podatkov (po MIME), kakor je privzeti način application/x-www-form-urlencoded. 
  
  Dokument lahko vsebuje več obrazcev, gnezdenje pa ni dopustno. Več obrazcev moramo definirati zaporedno. Posamezne dele obrazca kodiramo z oznakami <INPUT>,<SELECT> in <TEXTAREA>. Z njimi lahko na spletno stran dodamo vnosna polja, ukazne gumbe, stikala, sezname in slike.

  Osnovni vnosi omogočajo izbiro gumba, vklop stikala, vnos krajšega besedila ali izbiro točke na sliki. Vse to kodiramo z oznako <INPUT>:

   

  <INPUT   [TYPE="{text|password|checkbox|radio|submit|reset|           file|hidden|image}"]   [NAME="{ime elementa}"]   [VALUE="{vsebina}"]   [CHECKED]   [SIZE={velikost elementa za vnosno polje}]   [MAXLENGHT={dopustna dolžina vnosa za polje}]   [SRC="{naslov URL pri sliki}"]     [ALIGN="{top|middle|bottom|left|right}"]>

  Vrednost in smiselnost parametrov je v celoti odvisna od nastavitve vrste elementa, ki jo določa parameter TYPE. Z njim lahko določimo enostavno vnosno polje (text), vnosno polje z zakritim vnosom (password), stikali (checkbox in radio), potrditveni gumb (submit), gumb za vnovično nastavitev elementov (reset), mo?nost prenosa datotek (file), skrito polje (hidden) ali sliko (image). Če parameter izpustimo, se privzame vnosno polje (text). 
  
  Vsak element lahko poimenujemo s parametrom NAME. Nekaterim elementom lahko predpišemo vrednost s parametrom VALUE. Stikali lahko vključimo tako, da navedemo parameter CHECKED. Pri vnosnih poljih lahko določimo izrisano širino (SIZE) in največjo dopustno dolžino vnosa (MAXLENGHT). Pri elementu image podamo naslov URL ustrezne slike in po želji tudi njeno poravnavo (ALIGN). 
   

  Poglejmo si obrazce na primeru:
   

  1.) Text:
  
  <FORM>
Tvoja starost:
<INPUT TYPE="text" VALUE="Vnesi pravo vrednost!">
</FORM>

  Izgled:

  Tvoja starost:  

   

  2.) Password:
  
  <FORM>
Tvoja starost:
<INPUT TYPE="password">
</FORM>

  Izgled:

  Tvoja starost:  

   

  3.) Checkbox:

  
  <FORM>
Tvoja starost:
<INPUT TYPE="checkbox" CHECKED>Polnoleten
</FORM>

  Izgled:

  Tvoja starost: Polnoleten

   

  
  4.) Radio:
  
  <FORM>
Tvoja starost:
<INPUT TYPE="radio" NAME="starost">0-20 let
<INPUT TYPE="radio" NAME="starost" CHECKED>21-40 let
<INPUT TYPE="radio" NAME="starost">41-60 let
<INPUT TYPE="radio" NAME="starost">61-80 let
</FORM>

  Izgled:

  Tvoja starost:
  0-20 let
  21-40 let
  41-60 let
  61-80 let

   

  5.) Submit, reset in hidden:
  
  <FORM ACTION="mailto:[email protected]" METHOD="post" ENCTYPE="text/plain">
Tvoj komentar:
<INPUT NAME="Komentar">
<INPUT TYPE="hidden" NAME="skrito" VALUE="Na to besedilo ne morete vplivati!">
<INPUT TYPE="submit" VALUE="Pošlji pošto">
<INPUT TYPE="reset" VALUE="Počisti!">
</FORM>

  Izgled:

  Tvoj komentar: 
  
  
    

   

  File:
  
  <FORM ACTION="/" ENCTYPE="multipart/form-data" METHOD="get">
Datoteka za prenos: 
<INPUT TYPE="file" NAME="userfile" VALUE="Brskaj...">
<INPUT TYPE="submit" VALUE="Prenesi!">
</FORM> 

  Izgled: 
   
  Datoteka za prenos:  

   

  
   

  V obrazcih lahko omogočimo uporabniku, da izbere s seznama možnosti. Tedaj porabimo oznako <SELECT>, med katerima naštejemo elemente seznama. Posamezen element določa oznaka <OPTION>.

  Oblika oznake je sledeča:<SELECT    [NAME="{ime seznama}"]    [SIZE="{število vidnih elementov}"]    [MULTIPLE]><OPTION    [VALUE="{vrednost}"]    [SELECTED]>

  Seznamu podamo ime s parametrom NAME. S parametrom SIZE lahko določimo, koliko vrstic seznama je naenkrat vidnih na zaslonu. Prisotnost parametra MULTIPLE določa, da je mogoče s seznama izbrati več elementov. Vsaka izmed vrstic je določena z oznako <OPTION>, parameter VALUE pa ji določa vrednost. Prisotnost parametra SELECTED dotično vrstico označi kot izbrano že na začetku. 
   

  Poglejmo si primer:
  
  <FORM>
Izberi ustrezna leta:
<SELECT>
   <OPTION VALUE="1" SELECTED>0-20
   <OPTION VALUE="2">21-40
   <OPTION VALUE="3">41-60
   <OPTION VALUE="4">61-80
</SELECT>
</FORM>

  Izgled:

  Izberi ustrezna leta:    0-20   21-40   41-60   61-80 

   

  Če parameter SIZE ispustimo, se privzame nastavitev ene vidne vrstice, kar se na spletni strani odrazi v padajočem seznamu. S tovrstnega seznama ni mogoče izbrati več elementov, četudi bi podali parameter MULTIPLE. Nastavitev dveh ali več vidnih vrstic se odrazi v odprtem seznamu, po katerem se je moč premikati z drsnikom, če je na?tetih elementov več od predpisane velikosti. Če velikosti ne navedemo, podamo pa parameter MULTIPLE v izbiri <SELECT>, je rezultat enak, kot pa če bi za SIZE izbrali število vseh izbir, ki jih navedemo.Izbiranje več elementov je odvisno od brskalnika,pri večini pa to dosežemo tako, da klikamo posamezne vrstice, hkrati padržimo pritisnjeno tipko Ctrl. 
   

  Primer:
  
  <FORM>
Izberi ustrezna leta:
<SELECT MULTIPLE>
   <OPTION VALUE="1" SELECTED>0-20
   <OPTION VALUE="2">21-40
   <OPTION VALUE="3">41-60
   <OPTION VALUE="4">61-80
   <OPTION VALUE="5">61-80
</SELECT>
</FORM>

  Izgled:

  Izberi avtomobilske znamke, ki so ti všeč:
     Fiat   Opel   Zastava   Ford   BMW 

   

  Večkrat želimo, da uporabnik vnese svoje mnenje, ki pa je ponavadi daljše od ene vrstice in ga zato običajno ne moremo vnesti v običajno vnosno polje. Za vnos dalšega besedila je na voljo poseben par oznak <TEXTARA>:

   

  <TEXTAREA    [NAME="{ime vnosnega polja}"]    [ROWS={število vidnih vrstic}]    [COLS={število vidnih stolpcev}]>{Začetno besedilo v vnosnem polju}</TEXTAREA>

  Primer:
  
  <FORM>
Vnesi nekaj svojih komentarjev:
<TEXTAREA NAME="Komentarji" ROWS=3 COLS=50>
Ta HTML stran je več kot odlična :)
</TEXTAREA>
</FORM>

Izgled:

  Vnesi nekaj svojih komentarjev:
  Ta HTML stran je več kot odlična :)

  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
  x²

   

  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
  

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

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