HTML Formatiranje Teksta

HTML
Formatiranje teksta, komentari i HTML entiteti

HTML KOMENTARI






Formatiranje teksta
Tag Opis
 Definira podebljani tekst
<big> Definira povedani tekst
 Definira naglaeni tekst
 Definira nakoeni tekst
 Definira smanjeni tekst
 Definira masno otisnuti tekst
 Definira potpisani tekst
 Definira natpisani tekst
<ins> Definira ubaeni tekst
<del> Definira obrisani tekst
<s>
Definira precrtani tekst.
Zastarjelo. Koristiti <del>
<strike>
Definira precrtani tekst.
Zastarjelo. Koristiti <del>

Definira podcrtani tekst.
Zastarjelo. Koristiti stilove
Zadatak
kreirati novi standardni html dokument sa 2 paragrafa sadaja
po izboru
unutar prvog paragrafa barem jedna reenica mora biti
podebljana, jedna podcrtana, jedna nakoena
na barem jednoj proizvoljnoj rijei postaviti natpisani broj te na
jo jednoj proizvoljnoj rijei napraviti potpisani broj
jedna cijela reenica neka bude precrtana
na jednoj reenici u drugom paragrafu napraviti da je tekst i
podebljan i nakoen i podcrtan (sve zajedno)
HTML vs XHTML
HTML
preporua se koritenje malih slova
za nazive elemenata/tagova, atributa
i njihovih vrijednosti ali mogu se
koristiti i tampana slova (npr. ovo
nije preporueno ali nije ni krivo:
<HEAD></HEAD>)
preporua se da vrijednosti atributa
budu u jednostrukim ili dvostrukim
navodnicima ali moe i bez njih
svi tagovi bi trebali biti zatvoreni osim
 , <hr>, <img>, <input>
doctype je obavezan
ovo nije preporueni ali je doputeno
u HTML(u XHTML nije doputeno):
<input disabled>

XHTML
obavezno koritenje malih slova za
sve elemente/tagove, atribute i
njihove vrijednosti(ovo je krivo:
<HEAD></HEAD> a ovo je ispravno:
<head></head>)
vrijednosti atributa obavezno moraju
biti u jednostrukim ili dvostrukim
navodnim znakovima
svi tagovi obavezno moraju biti
zatvoreni pa ak i , <hr/>,
<img/>,<input/>
svi XHTML tagovi moraju biti ispravno
ugnjedenji(eng. nested)
doctype je opcion
ovako je ispravno:
<input disabled=disabled>

Struktura taga/elementa
<tag atribut=vrijednost atribut=vrijednost>Sadraj</tag>

Standardni atributi za tagove/elemente
Atribut Vrijednost Opis DTD
class nazivklase Specificira naziv klase za neki element STF
id nazivid Specificira unikatni naziv id-a za neki element STF
style definicije stila Specificira inline stil za neki element STF
title tekst
Specificira dodatne informacije za neki
element STF
standardni atributi mogu se koristiti za sve tagove/elemente osim sljedeih:
base
head
html
meta
param
script
style
title

podran u vedini browsera
 tag specificira tip fonta, veliinu fonta i boju teksta

Sintaksa:
Ovo je sadraj
Atributi font elementa
color rgb(x,x,x) Specificira boju fonta. Zastarjelo. Koristiti stilove. TF
#xxxxxx Specificira boju fonta. TF
colorname Specificira boju fonta. TF
face font_family Specificira tip fonta. Zastarjelo. Koristiti stilove. TF
size number Specificira veliinu fonta. Zastarjelo. Koristiti stilove. TF
uz sve standardne atribute za font tag moete koristiti i sljedee atribute
Promjena veliine fonta ()
Pogledaj me u veliini 1 
Pogledaj me u veliini 6

Promjena tipa fonta
Pogledaj me u verdani 
Pogledaj me u arialu 
Pogledaj me u georgiji 

Popis standardnih fontova
Naziv fonta
Arial
Arial Black
Charcoal
Comic Sans MS
Courier
Courier New
Gadget
Geneva
Georgia
Helvetica
Impact
Lucida Grande
Monaco
New York
Palatino
Times
Verdana
Odreivanje boja u HTML-u
u HTML-u postoje barem 2 standarda/oblika/modela za
odreivanje boje nekog elementa/entiteta/znaka/sadraja
decimalni oblik/model
hexdecimalni oblik/model
mi demo koristiti hexadecimalni model jer je standard koji se
uglavnom koristi za izradu web stranica

Heksadecimalni brojevni sustav
predstavlja brojevni sustav s bazom 16
to znai da u tom brojevnom sustavu za oznaavanje brojeva
koristimo 16 znakova:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E i F
kako za sastavljanje heksadecimalnog broja na raspolaganju
imamo 16 navedenih znakova, heksadecimalni niz izgleda ovako:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12, 13, 14, 15, 16,
17, 18, 19, 1A, 1B, 1C, 1D, 1E, 1F, 20, 21...
Heksadecimalni triplet boja
#Byte1Byte2Byte3
Byte 1 (jedna ili dvije znamenke): crvena vrijednost
Byte 2 (jedna ili dvije znamenke): zelena vrijednost
Byte 3 (jedna ili dvije znamenke): plava vrijednost

256x256x256=16 777 216 boja

Primjer vrijednosti boja u heksadecimalnom i decimalnom obliku
R=red(crvena), G=green(zelena), B=blue(plava)
HTML naziv Hex kod Decimalni kod
R G B R G B
Indi anRed CD 5C 5C 205 92 92
Li ghtCoral F0 80 80 240 128 128
Sal mon FA 80 72 250 128 114
DarkSal mon E9 96 7A 233 150 122
Li ghtSal mon FF A0 7A 255 160 122
Cri mson DC 14 3C 220 20 60
Red FF 00 00 255 0 0
Fi reBri ck B2 22 22 178 34 34
DarkRed 8B 00 00 139 0 0
Neke od crvenih nijansi
Nain koritenja boja u HTML-u
Za vrijednost boje u HTML-u moete koristiti 3 naina/oblika
HEX
RGB
NazivBoje

Primjer vrijednosti ute boje:
HEX - #FFFF00
RGB - rgb(255,255,0)
Prema nazivu boje - yellow
Popis nekih boja
Naziv boje HEX -vrijednost
AliceBlue #F0F8FF
AntiqueWhite #FAEBD7
Aqua #00FFFF
Aquamarine #7FFFD4
Azure #F0FFFF
Beige #F5F5DC
Bisque #FFE4C4
Black #000000
BlanchedAlmond #FFEBCD
Blue #0000FF
BlueViolet #8A2BE2
Brown #A52A2A
BurlyWood #DEB887
CadetBlue #5F9EA0
Chartreuse #7FFF00
Chocolate #D2691E
Coral #FF7F50
CornflowerBlue #6495ED
Cornsilk #FFF8DC
Crimson #DC143C
Cyan #00FFFF
Cijeli popis naziva boja moete vidjeti
ovdje:http://www.w3schools.com/html/html_colornames.asp
Dobro je znati
moete koristiti sve navedene nazive boja ali znajte da prema
W3C standardu standardne su samo sljededih 16 boja:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
olive, purple, red, silver, teal, white, i yellow

ako elite koristiti bilo koju boju(od ~16 000 000) a da sve i dalje
bude po standardu MORATE koristiti heksadecimalni oblik!
A to je ujedno i preporueni oblik zapisa boje za web
Promjena boje fonta ( tag)
Pogledaj me u veliini 1 
Pogledaj me u veliini 1

Font tag i boja (konano)
Ovo je crveni tekst!
Ovo je crveni tekst!
Ovo je crveni tekst!
Font tag ()
Atribut Primjer Svrha
size=broj" size="2" Definira veliinu fonta
size="+broj" size="+1" Poveava veliinu fonta
size="-broj" size="-1" Smanjuje veliinu fonta
face=naziv fonta" face="Times" Definira font
color=hex boja" color="#eeff00" Definira boju fonta
color=ime boje" color="red" Definira boju fonta
Primjer

Pogledaj me u veliini 2

Horizontalna linija
HTML
<hr>
XHTML
<hr/>
Ovaj tag kreira horizontalnu liniju
Tag za horizontalnu liniju se ne zatvaraU HTML-u, dok u XHTML-u mora biti zatvoren
Ovaj tag se razliito renderira/prikazuje u razliitim preglednicima
Atributi za horizontalnu liniju

align left
center
right
noshade noshade Specificira da se horizontalna linija renderira u jednoj boji. Zastarjelo. Koristiti stilove. TF
size pikseli Specificira visinu horizontalne linije. Zastarjelo. Koristiti stilove. TF
width pikseli
%
Specificira poravnanje. Zastarjelo. Koristiti stilove.
Specificira irinu horizontalne linije. Zastarjelo. Koristiti stilove.
TF
TF
Zadatak
Izraditi u HTML-u neto poput ovoga:
HTML entiteti
Rezervirani znakovi u HTML-u moraju biti zamjenjeni sa njihovim entitetima da bi se
ispisali
Neki znakovi su rezervirani u HTML-u
Npr. Ne moete koristiti znakove unutar sadraja jer de ih browser interpretirati
kao HTML a ne kao sadraj
Ako ih elimo prikazati na stranici moramo ih zapisati u obliku entiteta
Entitet znaka izgleda ovako:
&naziv_entiteta;
&#broj_entiteta;
Da bi ispisali < znak moramo u HTML-u napisati: < ili <
Prednost koritenja naziva entiteta u obnosu na broj je da su lake zapamtljivi
Browseri opdenito imaju bolju podrku za brojanu vrijednost entiteta
Najede koriteni entitet je prazno mjesto ili SPACE.
U normalnim okolnostima ako napravite razmak od 10 mjesta u HTML-u 9 de biti
zanemareno/uklonjeno
Da bi dodali vie praznog mjesta u tekstu morate koristiti
Najede koriteni entiteti
Rezultat Opis Naziv entiteta Broj entiteta
non-breaking space
< manje od < <
> vede od > >
& I & &
cent ¢ ¢
pound £ £
yen ¥ ¥
euro € €
sekcija § §
copyright © ©
registered trademark ® ®
pregled svih/vedine entiteta moete vidjeti ovdje: http://www.w3schools.com/tags/ref_entities.asp
Zadatak
Na zadatak prije u zadnji red dodati:

- nije spomenut pa ovaj morate pronadi sami

HTML Formatiranje Teksta

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Formatiranje Teksta

Uploaded by

Copyright:

Available Formats

HTML

Formatiranje teksta, komentari i HTML entiteti

You might also like