September 23, 2017
Advertisement

HTML osnove 3 – Rad s fontovima

By Internet -

fontsFont je dizajn za skup znakova. Ovaj dizajn uključuje oblike svakog od znakova, veličinu (visinu i širinu), te mnoštvo drugih karakteristika koje kontrolira kakav će font izgledati i kako mu se izgled može mijenjati.
U HTML-u imate nekoliko načina za prikaz znakova u različitim fontovima. Najjednostavnije je koristiti predviđene oznake kojima se mijenja standardni font.

Na primjer, možete koristiti oznaku <tt> </ tt> (TT je oznaka ta teleprinter) kako bi napravili tkz. „monospaced“ liniju (gdje su sve riječi iste udaljenosti). Kako bi ste vidjeli kako ovo izgleda, u test1.htm upišite:

<tt> Ova linija je primjer </ TT> <BR> Ova linija je primjer
Ova linija je primjer
Ova linija je primjer

Sada bi test1.htm trebao izgledati otprilike ovako:

<HTML>
<HEAD>
<TITLE>Internet Svijet</TITLE>
</HEAD>
<BODY>
<P ALIGN=RIGHT>U ovom članku ćemo <B>popuniti stranicu</B> nekakvim sadržajem, jer u biti razlog zbog kojeg najvjerojatnije želite naučiti HTML je da objavite na internet nekakav sadržaj. Pa da nastavimo.</P>
<P> Glavna oznaka koje trebate znati prilikom oblikovanja teksta je oznaka odlomka (paragraph tag).
<BR>Ova oznaka jednostavno definira odlomak teksta.
<BR><B><U>ovaj tekst je podebljan i podcrtan</U></B></P>
<TT> Ova linija je primjer </TT><BR> Ova linija je primjer
Ova linija je primjer
Ova linija je primjer
</BODY>
</HTML>html_3_dio1

 

 

 

 

Kao što možete vidjeti, znakovi u prvom redu su točno iste udaljenosti. Razmak između znakova u drugom redu varira. Oznaka <TT> (<TT> tag) je korisna za prikaz teksta koji je odštampan ili prikazan na zaslonu. Druga korisna oznaka je <CODE> tag. Ova oznaka se uglavnom koristi za prikazivanje određenog programskog koda. Na primjer, bilo bi korisno ako želite pokazati primjere JavaScripta na Vašoj HTML stranici. Piše se:

<CODE> Ovdje je primjer formatiran </CODE> <BR> Ovdje je primjer bez
Ovdje je primjer bez

U dokumentu izgleda ovako:

<HTML>
<HEAD>
<TITLE>Internet Svijet</TITLE>
</HEAD>
<BODY>
<P ALIGN=RIGHT>U ovom članku ćemo <B>popuniti stranicu</B> nekakvim sadržajem, jer u biti razlog zbog kojeg najvjerojatnije želite naučiti HTML je da objavite na internet nekakav sadržaj. Pa da nastavimo.</P>
<P> Glavna oznaka koje trebate znati prilikom oblikovanja teksta je oznaka odlomka (paragraph tag).
<BR>Ova oznaka jednostavno definira odlomak teksta.
<BR><B><U>ovaj tekst je podebljan i podcrtan</U></B></P>
<TT>Ova linija je primjer formatiran</TT><BR> Ova linija je primjer
Ova linija je primjer bez
Ova linija je primjer bez
<CODE>Ovdje je primjer formatiran</CODE><BR>
Ovdje je primjer bez
Ovdje je primjer bez
</BODY>
</HTML>html_3_dio2

 

 

 

 

Primijetit ćete da ovo u principu ne mijenja izgled znakova u odnosu na oznaku <TT>.
Ova oznaka samo naglašava da se radi o određenom kodu koji je smješten unutar iste.
Ali svakako bi bilo poželjno koristiti odgovarajuće oznake tako da vam je HTML kod razumljiviji.
Kako bi ste promijenili izgled znakova i slova koristit ćete oznaku <FONT>
Započeti ćemo sa veličinom. Fontovi dolaze u 7 veličina a svi odgovaraju određenom broju do 7:
najmanji (puny-1) , mali (small-2), normalni (regular-3), veći (bigger-4), veliki (large-5), ogroman (huge-6), gigantski (gigantic-7)

Veličina se određuje uključivanjem oznake SIZE kao dodatak oznaci <FONT>:

<font size=”2″>Test sa veličinom i izgledom</font>
<font size=”5″>Test sa veličinom i izgledom</font>

Ako ovo dodamo u dokument test1.htm izgledati će ovako:

<HTML>
<HEAD>
<TITLE>Internet Svijet</TITLE>
</HEAD>
<BODY>
<P ALIGN=RIGHT>U ovom članku ćemo <B>popuniti stranicu</B> nekakvim sadržajem, jer u biti razlog zbog kojeg najvjerojatnije želite naučiti HTML je da objavite na internet nekakav sadržaj. Pa da nastavimo.</P>
<P> Glavna oznaka koje trebate znati prilikom oblikovanja teksta je oznaka odlomka (paragraph tag).
<BR>Ova oznaka jednostavno definira odlomak teksta.
<BR><B><U>ovaj tekst je podebljan i podcrtan</U></B></P>
<TT>Ova linija je primjer formatiran</TT><BR> Ova linija je primjer
Ova linija je primjer bez
Ova linija je primjer bez
<BR><CODE>Ovdje je primjer formatiran</CODE><BR>
Ovdje je primjer bez
Ovdje je primjer bez
<BR><font size=”2″>Test sa veličinom i izgledom</font>
<font size=”5″>Test sa veličinom i izgledom</font>
</BODY>
</HTML>html_3_dio3

 

 

 

 

Također možete promijeniti boju fonta koristeći dodatak oznaci font – COLOR.
Rad s bojama je malo složeniji te ćemo se vratiti temi u jednom od narednih članaka. Za sada, primjera radi uzet ćemo jednu boju – crvenu (red) i vidjeti kako funkcijonira:

<font color=”RED”> Test sa veličinom i izgledom.</font>

Nadopunite ovom izmjenom test1.htm dokument:

<HTML>
<HEAD>
<TITLE>Internet Svijet</TITLE>
</HEAD>
<BODY>
<P ALIGN=RIGHT>U ovom članku ćemo <B>popuniti stranicu</B> nekakvim sadržajem, jer u biti razlog zbog kojeg najvjerojatnije želite naučiti HTML je da objavite na internet nekakav sadržaj. Pa da nastavimo.</P>
<P> Glavna oznaka koje trebate znati prilikom oblikovanja teksta je oznaka odlomka (paragraph tag).
<BR>Ova oznaka jednostavno definira odlomak teksta.
<BR><B><U>ovaj tekst je podebljan i podcrtan</U></B></P>
<TT>Ova linija je primjer formatiran</TT><BR> Ova linija je primjer
Ova linija je primjer bez
Ova linija je primjer bez
<BR><CODE>Ovdje je primjer formatiran</CODE><BR>
Ovdje je primjer bez
Ovdje je primjer bez
<BR><font size=”2″>Test sa veličinom i izgledom</font>
<font size=”5″ color=”RED”>Test sa veličinom i izgledom</font>
</BODY>
</HTML>html_3_dio4

 

 

 

 

Jednostavno, zar ne?
Prije započinjanja bilo kakvog daljnjeg rada sa fontovima morate razumjeti da su fontovi instalirani u sistemu, od strane korisnika računala. Dakle, operativni sustavi imaju tendenciju da imaju određene fontove već instalirane. Neki ljudi, poput mene J , imaju stotine fontova koje skupljaju sa različitih strana, od onih dječjih, preko sofisticiranih, profesionalnih.
Drugi ljudi prežive (ne znam kako J) sa osnovnim fontovima koji dolaze integrirani u operativni sustav.

To znači da morate biti vrlo oprezni s fontovima koje koristite. Ako se odlučite na odabir neobičnih i rijetkih fontove, morate biti svjesni da će vrlo malo ljudi moći vidjeti vaš dokument način na koji ga namjeravate prikazati (većina ljudi neće sa Interneta preuzimati nove fontove samo za prikaz određene Internet stranice).

Što se događa kada odaberete font koji nije instaliran na računalu? Preglednik se jednostavno njime ne koristi već odabire osnovni, zadani font.
Evo kako će te odrediti font unutar <FONT> oznake:

<font face=”Impact”>Ovdje se igramo sa različitim fontovima.</font><BR>
<font face=”Comic Sans MS”> Ovdje se igramo sa različitim fontovima.</font>

Ovo ćete umetnuti u test1.htm:

<HTML>
<HEAD>
<TITLE>Internet Svijet</TITLE>
</HEAD>
<BODY>
<P ALIGN=RIGHT>U ovom članku ćemo <B>popuniti stranicu</B> nekakvim sadržajem, jer u biti razlog zbog kojeg najvjerojatnije želite naučiti HTML je da objavite na internet nekakav sadržaj. Pa da nastavimo.</P>
<P> Glavna oznaka koje trebate znati prilikom oblikovanja teksta je oznaka odlomka (paragraph tag).
<BR>Ova oznaka jednostavno definira odlomak teksta.
<BR><B><U>ovaj tekst je podebljan i podcrtan</U></B></P>
<TT>Ova linija je primjer formatiran</TT><BR> Ova linija je primjer
Ova linija je primjer bez
Ova linija je primjer bez
<BR><CODE>Ovdje je primjer formatiran</CODE><BR>
Ovdje je primjer bez
Ovdje je primjer bez
<BR><font size=”2″>Test sa veličinom i izgledom</font>
<font size=”5″ color=”RED”>Test sa veličinom i izgledom</font>
<font face=”Impact”>Ovdje se igramo sa različitim fontovima.</font><BR>
<font face=”Comic Sans MS”> Ovdje se igramo sa različitim fontovima.</font>
</BODY>
</HTML>html_3_dio5

 

 

 

 

Sada ćemo isprobat s umetanjem nepostojećeg fonta, kojeg preglednik neće moći „pročitati“:

<HTML>
<HEAD>
<TITLE>Internet Svijet</TITLE>
</HEAD>
<BODY>
<P ALIGN=RIGHT>U ovom članku ćemo <B>popuniti stranicu</B> nekakvim sadržajem, jer u biti razlog zbog kojeg najvjerojatnije želite naučiti HTML je da objavite na internet nekakav sadržaj. Pa da nastavimo.</P>
<P> Glavna oznaka koje trebate znati prilikom oblikovanja teksta je oznaka odlomka (paragraph tag).
<BR>Ova oznaka jednostavno definira odlomak teksta.
<BR><B><U>ovaj tekst je podebljan i podcrtan</U></B></P>
<TT>Ova linija je primjer formatiran</TT><BR> Ova linija je primjer
Ova linija je primjer bez
Ova linija je primjer bez
<BR><CODE>Ovdje je primjer formatiran</CODE><BR>
Ovdje je primjer bez
Ovdje je primjer bez
<BR><font size=”2″>Test sa veličinom i izgledom</font>
<font size=”5″ color=”RED”>Test sa veličinom i izgledom</font>
<font face=”StrangeFont”>Ovdje se igramo sa različitim fontovima.</font><BR>
<font face=”Comic Sans MS”> Ovdje se igramo sa različitim fontovima.</font>
</BODY>
</HTML>html_3_dio6

 

 

 

 

Primijetit ćete da je preglednik, umjesto odabranog fonta (StrangeFont) prikazao klasični, standardni:
Kako ćete izbjeći ovaj problem? Prvo, pokušajte se držati fontova za koji ste sigurni da ljudi imaju na svojim računalima. Ovo su neki od sigurnih odabira fontova koji već postoje NA Windows – ima kao standard.:

• Andale Mono
• Arial
• Arial Black
• Comic Sans MS
• Courier New
• Gruzija
• Utjecaj
• Times New Roman
• Trebuchet MS
• Verdana

No što ako ipak želite koristiti jedan od onih cool fontova? To je u redu, ali svakako navedite i alternativni. To znači da možete navesti više od jednog fonta unutar <FONT> oznake.
Evo kako to izgleda:

<font face=”Allegro BT,Comic Sans MS”> Ovdje se igramo sa dvije vrste fontova.</font>

S umetanjem ova dva fonta pokrili ste obje opcije: Ako imate “Allegro BT” instaliran vidjet ćete to na taj font, jer u suprotnom ćete vidjeti tekst prikazan u “Comic Sans MS”.
Ovo je jako korisna opcija. Preglednik traži postoji li prvi font instaliran na računalu korisnika. Ako postoji, sve je u redu i font se koristi te ga možete vidjeti u Internet pregledniku.
Ako font ne postoji, preglednik traži da li je drugi ponuđeni font instaliran, zatim treći i tako redom dok ne naiđe na font koji može prikazati.
Ova opcija vam pomaže da kontrolirate prikaz vaše Internet stranice, te vam omogućava da testirate svoju stranicu; svako slovo i znak kako bi bili sigurni da sve izgleda u redu, te da ne dopustite pregledniku da odabire nešto nepoznato umjesto vas.

Primjer u test1.htm dokumentu:

<HTML>
<HEAD>
<TITLE>Internet Svijet</TITLE>
</HEAD>
<BODY>
<P ALIGN=RIGHT>U ovom članku ćemo <B>popuniti stranicu</B> nekakvim sadržajem, jer u biti razlog zbog kojeg najvjerojatnije želite naučiti HTML je da objavite na internet nekakav sadržaj. Pa da nastavimo.</P>
<P> Glavna oznaka koje trebate znati prilikom oblikovanja teksta je oznaka odlomka (paragraph tag).
<BR>Ova oznaka jednostavno definira odlomak teksta.
<BR><B><U>ovaj tekst je podebljan i podcrtan</U></B></P>
<TT>Ova linija je primjer formatiran</TT><BR> Ova linija je primjer
Ova linija je primjer bez
Ova linija je primjer bez
<BR><CODE>Ovdje je primjer formatiran</CODE><BR>
Ovdje je primjer bez
Ovdje je primjer bez
<BR><font size=”2″>Test sa veličinom i izgledom</font>
<font size=”5″ color=”RED”>Test sa veličinom i izgledom</font>
<font face=”StrangeFont”>Ovdje se igramo sa različitim fontovima.</font><BR>
<font face=”Comic Sans MS”> Ovdje se igramo sa različitim fontovima.</font>
<BR><font face=”Allegro BT,Comic Sans MS”> Ovdje se igramo sa dvije vrste fontova.</font>
</BODY>
</HTML>html_3_dio7

 

 

 

 

Uključivanjem različitih fontova slova možete proizvesti različite efekte.
Primjer:

<font face=”Comic Sans MS”> Test za različite efekte<font size=”6″> </font> Ovim testom kombiniramo fontove.</font>
Test za različite efekte. Ovim testom kombiniramo fontove.<FONT></font>

Osim toga, možete miješati ostale oznake u <FONT> tagu. Recimo da je želite podcrtati tekst. Možete učiniti sljedeće:

<font face=”Comic Sans MS”>Test za različite efekte<font size=”6″> </font>Ovim<u>testom</u>kombiniramo fontove.</font>

Isprobajte:

<HTML>
<HEAD>
<TITLE>Internet Svijet</TITLE>
</HEAD>
<BODY>
<P ALIGN=RIGHT>U ovom članku ćemo <B>popuniti stranicu</B> nekakvim sadržajem, jer u biti razlog zbog kojeg najvjerojatnije želite naučiti HTML je da objavite na internet nekakav sadržaj. Pa da nastavimo.</P>
<P> Glavna oznaka koje trebate znati prilikom oblikovanja teksta je oznaka odlomka (paragraph tag).
<BR>Ova oznaka jednostavno definira odlomak teksta.
<BR><B><U>ovaj tekst je podebljan i podcrtan</U></B></P>
<TT>Ova linija je primjer formatiran</TT><BR> Ova linija je primjer
Ova linija je primjer bez
Ova linija je primjer bez
<BR><CODE>Ovdje je primjer formatiran</CODE><BR>
Ovdje je primjer bez
Ovdje je primjer bez
<BR><font size=”2″>Test sa veličinom i izgledom</font>
<font size=”5″ color=”RED”>Test sa veličinom i izgledom</font>
<font face=”StrangeFont”>Ovdje se igramo sa različitim fontovima.</font><BR>
<font face=”Comic Sans MS”> Ovdje se igramo sa različitim fontovima.</font>
<BR><font face=”Allegro BT,Comic Sans MS”> Ovdje se igramo sa dvije vrste fontova.</font>
<BR><font face=”Comic Sans MS”> Test za različite efekte<font size=”6″> </font> Ovim testom kombiniramo fontove.</font>
Test za različite efekte. Ovim testom kombiniramo fontove.<FONT></font>
<BR><font face=”Comic Sans MS”>Test za različite efekte<font size=”6″> </font>Ovim <u>testom</u> kombiniramo fontove.</font>
</BODY>
</HTML>html_3_dio8

 

 

 

 

U jednom od narednih članaka objavit ću malo više o formatiranju teksta, o eventualnim greškama koje se mogu javiti te malo više o tome kako pravilno (ili pogrešno) dizajnirati tekst na stranici. Također ću pisati malo opširnije o Fontovima kako biste saznali kako pregledati i instalirati fontove.

Leave a Reply

Pročitajte ovo prije nego ostavite komentar na blogu

Molimo provjerite komentare prije objavljivanja kako bi bili u skladu sa našim pravilima:

  • Koristite Vaše ime, a ne ključne riječi
  • HTML u potpisu NIJE dozvoljen!
  • Molimo Vas da se primjereno izražavate

Komentari koji nisu sukladni s gore navedenim pravilima biti će izbrisati ili označeni kao SPAM.