Formatiranje teksta

Download Report

Transcript Formatiranje teksta 

Formatiranje teksta
• stavimo neki naslov na Web stranicu
(npr. "ALFA ROMEO").
HTML razlikuje šest nivoa (veličina) naslova,
a sledeća tabela prikazuje svih 6 tagova i
odgovarajuće naslove:
<h1>ALFA ROMEO</h1>
ALFA ROMEO
<h2>ALFA ROMEO</h2>
<h3>ALFA ROMEO</h3>
<h4>ALFA ROMEO</h4>
<h5>ALFA ROMEO</h5>
<h6>ALFA ROMEO</h6>
ALFA ROMEO
ALFA ROMEO
ALFA ROMEO
ALFA ROMEO
ALFA ROMEO
Formatiranje teksta
• po defaultu tekst je poravnat uz levu
marginu. Ako želimo da naš naslov, ili bilo
koji drugi element stranice, bude centriran,
treba ga staviti između tagova <center> i
</center>:
<center>OVO JE CENTRIRAN TEKST</center>
što daje slede:
OVO JE CENTRIRAN TEKST
Formatiranje teksta
• ukoliko posebno ne naglasimo kojim fontom
želimo da bude ispisan tekst na našoj stranici,
browser će koristiti default font
• osnovni tag kojim menjamo font na HTML
stranici je
<font>
a on može imati tri atributa:
face, size i color.
Formatiranje teksta
• atributom face definisan je tip fonta kojim želimo
da naš tekst bude ispisan.
• na jednoj stranici možemo koristiti i više različitih
fontova.
• pri tom treba voditi računa o tome da korisnik
koji učitava našu stranicu mora imati instaliran
taj font na svom računaru.
• u suprotnom njegov browser će prikazati tekst u
default fontu. Zato na svojim stranicama ne
treba koristiti neke egzotične fontove, već
koristiti samo široko rasprostranjene fontove.
Formatiranje teksta
• ako hoćemo da naša stranica bude
ispisana recimo “Verdana" fontom onda
pišemo:
<font face=“Verdana"> ovde pišemo tekst. </font>
Formatiranje teksta
• ako koristimo neke egzotičnije fontove onda bi
trebalo navesti i nekoliko alternativnih fontova,
jedan za drugim, odvojenih zarezom.
• ako posetilac naše stranice na svom računaru
nema instaliran prvi font sa liste, on će ga
prikazati u sledećem sa liste, i tako dalje.
• na primer:
<font face="Comic Sans MS,Arial,Courier">
Formatiranje teksta
• primer nekoliko popularnih fontova koji se
mogu koristiti na web stranicama:
Verdana
Arial
Courier
Bedrock
Times New Roman
Comic Sans MS
Formatiranje teksta
• može se menjati i veličina slova, a ona se
definiše preko size atributa.
• HTML razlikuje 7 veličina slova koja imaju
vrednosti od 1 do 7
• podrazumevana (default) veličina je 3.
• ako su nam slova veličine 3 suviše mala
možemo zadati veličinu slova 5:
<font size="5">
Formatiranje teksta
• primer liste sa veličinama fonta od 1 do 7
veličina 1
veličina 2
veličina 3
veličina 4
veličina 5
veličina 6
veličina 7
Formatiranje teksta
• atributom color menjamo boju teksta
• za ovaj atribut važi isto pravilo kao i kod
definisanja boja <body> tagom.
• ako želimo da u nekom delu teksta
promenimo boju fonta u crvenu onda
pišemo:
<font color="#ff0000"> ovde pišemo tekst. </font>
Formatiranje teksta
• u HTML dokumentima postoji mogućnost
pisanja
podebljanim (bold ili strong) slovima
kurzivom (italic),
mogućnost podvlačenja (underline) i
precrtavanja (strike) teksta.
Formatiranje teksta
sledeća tabela prikazuje odgovarajuće
tagove kao i rezultate njihove primene:
<b>bold</b>
bold
<strong>strong</strong>
strong
<i>italic</i>
italic
<u>underline</u>
underline
<strike>strike</strike>
strike
Formatiranje teksta
• mogu se pisati i slova u indeksu ili
eksponentu.
• indeks se dodaje pomoću taga <sub>,
eksponent pomoću taga <sup>
H<sub>2</sub>O
H2O
2<sup>2</sup>=4
22 =4
Formatiranje teksta
• tekst se u browser-u automatski lomi na
kraju reda
• to nije dobro ako želimo da neke fraze
budu cele u jednom redu
• ovo se može postići umetanjem tog dela
teksta izmedju tagova:
<nobr> ovde ide tekst koji se neće
prelomiti na kraju reda </nobr>
Formatiranje teksta
• ako je tekst prevelik da stane u jedan red na monitoru,
na dnu prozora će se pojaviti horizontalni
"klizač" (scrollbar) i korisnik će morati skrolovati da bi ga
pročitao
• ako hoćemo da se red da se prelomi, ali na tačno
određenom mestu, to možemo postići korišćenjem
<wbr> taga.
• ovaj tag ne zahteva završni tag
• za razliku od <br> taga koji će obvezno prelomiti red,
ovaj tag će prelomiti red samo ako je to neophodno tj.
ako je tekst pre njega predugačak da bi stao u jedan red
• ovaj tag omogućava da prelomite neku dugačku reč na
kraju reda.
Formatiranje teksta
• Kako možemo preći u novi red ili započeti novi odeljak?
• kad pišemo tekst u Notepad-u prelazak u novi red se postiže
pritiskom na taster ENTER
• međutim ovo neće dovesti do prelaska u novi red i na našoj HTML
stranici
• da bi browser prešao u novi red, to mu moramo eksplicitno narediti
odgovarajućim tagom
• tag za prelazak u novi red je <br>
• on ne zahteva odgovarajući završni tag
• prelazak u novi odjeljak postiže se <p> tagom
• on ima istu ulogu kao i <br> tag s tom razlikom što će napraviti mali
razmak između redova
• na kraju odeljka možemo staviti i njegov završni tag, no većina
browsera ga ne zahteva, tako da ga možemo izostaviti
Formatiranje teksta
• tekst se po defaultu poravnava uz levu
marginu
• centriranje odeljka ili poravnanje odeljka
uz desnu marginu se postiže align
atributom.
• Align atribut može imati tri vrednosti:
left
center
right
Formatiranje teksta
• odgovarajući tagovi za svako od
navedenih poravnanja izgledaju ovako:
<p align="left">
<p align="center">
<p align="right">
Formatiranje teksta
• ako prelazak u novi odeljak nije dovoljan da naglasimo
prelazak na neku novu celinu u okviru naše stranice, najbolje
rešenje bi bilo da povučemo jednu horizontalnu liniju
• liniju možemo povući pomoću <hr> taga
• ovaj tag crta tanku sivu liniju preko cele stranice
• ako ne želimo da linija bude osenčena već potpuno crna
stavimo atribut noshade
• dimenzije linije možemo promeniti pomoću dva atributa:
size i width
atributom size određujemo debljinu linije u pikselima
atributom width određujemo dužinu linije ili u pikselima ili u
postocima širine stranice
• ovaj tag može sadržati align atribut kojem možemo dodeliti
iste vrednosti kao i za odeljak
• boju linije možemo odrediti pomoću color atributa na već
opisani način za definisanje boja u HTML dokumentima.
Formatiranje teksta
• na primer:
želimo da povučemo neosenčenu crvenu
liniju koja će biti centrirana i čija će debljina
iznositi 6 piksela a pružaće se preko 50%
širine stranice:
<hr noshade align="center" size="6" width="50%" color="#ff0000">
Formatiranje teksta
• u editorima teksta tipka "TAB" služi za uvlačenje
(engl. indent) teksta tj. za ostavljanje određenog
broja praznih mjesta na početku reda (obično se
uvlači prvi red pasusa)
• u Notepad-u možemo uvući red pritiskanjem
tipke "TAB" međutim ovo neće imati nikakvog
efekta na tekst koji će biti prikazan u browser-u
• u HTML dokumentu možemo uvući red za
određeni broj mesta korišćenjem oznake:
&nbsp;
• ova oznaka ostavlja jedno prazno mesto
Formatiranje teksta
• ako hoćemo da ostavimo pet praznih
mesta stavimo pet ovakvih oznaka jednu
za drugom:
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Primer paragrafa
<html>
<head>
<TITLE> HTML Primer</TITLE>
</head>
<body>
<H1>HTML Uvod</H1>
<P>Ovo je primer prvog paragrafa.
Koji se radi u okviru formatiranja teksta.
</P>
<P>Drugi paragraf.</P>
<P ALIGN=CENTER>
Ovo je centrirani paragraf
</P>
</body>
</html>
Primer osnovnih tagova u HTML
<HTML>
<HEAD><TITLE>Primeri osnovnih tagova</TITLE></HEAD>
<BODY>
<H2><P ALIGN=CENTER> HTML</P> </H2>
<HR>
<P ALIGN=LEFT>
HTML (HyperText Markup Language) je veoma jednostavan jezik cije osnove
svako moze da se brzo savlada. </P>
<HR>
<P ALIGN=RIGHT>
Svaki put kada krstareci internetom naletite na neku zanimljivu stranicu , a ne
znate kako je napravljena, njen izvorni HTML kod mozete pogledati ako u
liniji menija odaberete: View -> Source (ili View -> Page Source u Netscape
Navigatoru).</P>
Primer osnovnih tagova u HTML
<HR>
<P ALIGN=CENTER>HTML se koristi i u okviru<BR>
ASP stranica<BR>
JSP stranica, <BR> Zajedno sa JavaScriptom <BR> ili PHP jezikom <BR>
ili nekim drugim script jezikom</P>
<HR>
<P ALIGN=CENTER>HTMLje
<DIV ALIGN=LEFT>hiper-</DIV>
<DIV ALIGN=CENTER>tekst-</DIV>
<DIV ALIGN=RIGHT>Markup jezik.</DIV>
Kad savladate osnove HTML-a mozete preci na upoznavanje JavaScripta </P>
</BODY>
</HTML>
Formatiranje teksta - primer
<HTML>
<BODY style=”background-color: #ccff33;”>
<p> <b> podebljani tekst </b> </p>
<p><big>tekst pisan vecim slovima </big> </p>
<p><i> iskriviljen text </i> </p>
<p> <small>tekst pisan manjim slovima </small> </p>
<p>Ovaj tekst je<sub>pisan kao indeks </sub> </p>
<p>Ovaj tekst je<sup>pisan kao eksponent </sup> </p>
</BODY>
</HTML>
Rad sa prelomom linije
<html>
<head><title> Rad sa prelomom linije </title>
</head>
<body>
<nobr>
<h1>Hajde skroluj, skroz na desno, dok se ne vidis sve sto
pise u ovom redu...</h1>
</nobr>
</body>
</html>
Rad sa fontovima
<html>
<head><title> Rad sa fontovima</title>
</head>
<body>
<P>
The <FONT FACE="Arial, Helvetica, Geneva" SIZE="+1"><A
HREF=“Biblioteka.html">Biblioteka</A></FONT>
ima dogovor sa caffe-om
<FONT FACE="Arial, Helvetica, Geneva" SIZE="+1"><A
HREF="caffe.html">caffe</A></FONT>
da Vas tokom nedelje osvezava
<FONT FACE="Arial, Helvetica, Geneva" SIZE="+1"><A
HREF=“kafaiznenadjenja.html">kafom iznenadjenja</A></FONT>
</P>
</body>
</html>
HREF je tag za link