HTML Formatiranje Teksta

HTML

Formatiranje teksta, komentari i HTML entiteti

HTML KOMENTARI







Formatiranje tekstaTag Opis Definira podebljani tekst

<big> Definira povećani tekst Definira naglašeni tekst

 Definira nakošeni tekst Definira smanjeni tekst

 Definira masno otisnuti tekst Definira potpisani tekst Definira natpisani tekst<ins> Definira ubačeni 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 sadžaja po izboru

• unutar prvog paragrafa barem jedna rečenica mora biti podebljana, jedna podcrtana, jedna nakošena

• na barem jednoj proizvoljnoj riječi postaviti natpisani broj te na još jednoj proizvoljnoj riječi napraviti potpisani broj

• jedna cijela rečenica neka bude precrtana• na jednoj rečenici u drugom paragrafu napraviti da je tekst i

podebljan i nakošen i podcrtan (sve zajedno)

HTML vs XHTML

HTML• preporuča se korištenje malih slova

za nazive elemenata/tagova, atributa i njihovih vrijednosti ali mogu se koristiti i štampana slova (npr. ovo nije preporučeno ali nije ni krivo: <HEAD></HEAD>)

• preporuča se da vrijednosti atributa budu u jednostrukim ili dvostrukim navodnicima ali može i bez njih

• svi tagovi bi trebali biti zatvoreni osim , <hr>, <img>, <input>

• doctype je obavezan• ovo nije preporučeni ali je dopušteno

u HTML(u XHTML nije dopušteno): <input disabled>

XHTML• obavezno korištenje 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 “ugnježdenji”(eng. nested)

• doctype je opcion• ovako je ispravno:

<input disabled=“disabled”>

Struktura taga/elementa

• <tag atribut=“vrijednost” atribut=“vrijednost”>Sadržaj</tag>

Standardni atributi za tagove/elementeAtribut Vrijednost Opis DTD

class nazivklase Specificira naziv klase za neki element STFid nazivid Specificira unikatni naziv id-a za neki element STFstyle definicije stila Specificira inline stil za neki element STF

title tekstSpecificira dodatne informacije za neki element STF

•standardni atributi mogu se koristiti za sve tagove/elemente osim sljedećih:•base•head•html•meta•param•script•style •title



• podržan u većini browsera• tag specificira tip fonta, veličinu fonta i boju teksta

• Sintaksa:Ovo je sadržaj

Atributi font elementa

Atribut Vrijednost Opis DTDcolor rgb(x,x,x) Specificira boju fonta. Zastarjelo. Koristiti stilove. TF #xxxxxx Specificira boju fonta. TF colorname Specificira boju fonta. TFface font_family Specificira tip fonta. Zastarjelo. Koristiti stilove. TFsize number Specificira veličinu fonta. Zastarjelo. Koristiti stilove. TF

•uz sve standardne atribute za font tag možete koristiti i sljedeće atribute

Promjena veličine fonta ()

Pogledaj me u veličini 1 Pogledaj me u veličini 2 Pogledaj me u veličini 3 Pogledaj me u veličini 4 Pogledaj me u veličini 5 Pogledaj me u veličini 6

Promjena tipa fonta

Pogledaj me u verdani Pogledaj me u arialu Pogledaj me u georgiji 

Popis standardnih fontova

Naziv fontaArial

Arial Black

Charcoal

Comic Sans MSCourier

Courier New

Gadget

Geneva

Georgia

Helvetica

Impact

Lucida GrandeMonaco

New YorkPalatino

Times

Verdana

Određivanje boja u HTML-u

• u HTML-u postoje barem 2 standarda/oblika/modela za određivanje boje nekog elementa/entiteta/znaka/sadržaja

• decimalni oblik/model• hexdecimalni oblik/model

• mi ćemo koristiti hexadecimalni model jer je standard koji se uglavnom koristi za izradu web stranica

Heksadecimalni brojevni sustav

• predstavlja brojevni sustav s bazom 16 • to znači da u tom brojevnom sustavu za označavanje 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 kodR G B R G B

IndianRed CD 5C 5C 205 92 92LightCoral F0 80 80 240 128 128Salmon FA 80 72 250 128 114DarkSalmon E9 96 7A 233 150 122LightSalmon FF A0 7A 255 160 122Crimson DC 14 3C 220 20 60Red FF 00 00 255 0 0FireBrick B2 22 22 178 34 34DarkRed 8B 00 00 139 0 0

Neke od crvenih nijansi

Način korištenja boja u HTML-u

• Za vrijednost boje u HTML-u možete koristiti 3 načina/oblika– HEX– RGB– NazivBoje

– Primjer vrijednosti žute boje:• HEX - #FFFF00• RGB - rgb(255,255,0)• Prema nazivu boje - yellow

Popis nekih bojaNaziv boje HEX -vrijednostAliceBlue #F0F8FFAntiqueWhite #FAEBD7Aqua #00FFFFAquamarine #7FFFD4Azure #F0FFFFBeige #F5F5DCBisque #FFE4C4Black #000000BlanchedAlmond #FFEBCDBlue #0000FFBlueViolet #8A2BE2Brown #A52A2ABurlyWood #DEB887CadetBlue #5F9EA0Chartreuse #7FFF00Chocolate #D2691ECoral #FF7F50CornflowerBlue #6495EDCornsilk #FFF8DCCrimson #DC143CCyan #00FFFF Cijeli popis naziva boja možete vidjeti

ovdje:http://www.w3schools.com/html/html_colornames.asp

Dobro je znati

• možete koristiti sve navedene nazive boja ali znajte da prema W3C standardu standardne su samo sljedećih 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 preporučeni oblik zapisa boje za web

Promjena boje fonta ( tag)

Pogledaj me u veličini 1 Pogledaj me u veličini 1

Font tag i boja (konačno)

Ovo je crveni tekst! Ovo je crveni tekst!Ovo je crveni tekst!

Font tag ()

Atribut Primjer Svrha

size=“broj" size="2" Definira veličinu fontasize="+broj" size="+1" Povećava veličinu fontasize="-broj" size="-1" Smanjuje veličinu fontaface=“naziv fonta" face="Times" Definira fontcolor=“hex boja" color="#eeff00" Definira boju fontacolor=“ime boje" color="red" Definira boju fonta

Primjer

Pogledaj me u veličini 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 različito renderira/prikazuje u različitim preglednicima

Atributi za horizontalnu liniju

Atribut Vrijednost Opis DTDalign left

centerright

noshade noshade Specificira da se horizontalna linija renderira u jednoj boji. Zastarjelo. Koristiti stilove. TFsize pikseli Specificira visinu horizontalne linije. Zastarjelo. Koristiti stilove. TFwidth pikseli

%

Specificira poravnanje. Zastarjelo. Koristiti stilove.

Specificira širinu horizontalne linije. Zastarjelo. Koristiti stilove.

TF

TF

Zadatak

• Izraditi u HTML-u nešto 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 možete koristiti znakove unutar sadržaja jer će ih browser interpretirati

kao HTML a ne kao sadržaj• 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 korištenja naziva entiteta u obnosu na broj je da su lakše zapamtljivi• Browseri općenito imaju bolju podršku za brojčanu vrijednost entiteta• Najčešće korišteni entitet je prazno mjesto ili “SPACE”.• U normalnim okolnostima ako napravite razmak od 10 mjesta u HTML-u 9 će biti

zanemareno/uklonjeno• Da bi dodali više praznog mjesta u tekstu morate koristiti

Najčešće korišteni entiteti

Rezultat Opis Naziv entiteta Broj entiteta non-breaking space < manje od < <> veće od > >& I & &¢ cent ¢ ¢£ pound £ £¥ yen ¥ ¥€ euro € €§ sekcija § §© copyright © ©® registered trademark ® ®

•pregled svih/većine entiteta možete vidjeti ovdje: http://www.w3schools.com/tags/ref_entities.asp

Zadatak

• Na zadatak prije u zadnji red dodati:– ©– €– ½ - nije spomenut pa ovaj morate pronaći sami

Documents

HTML Formatiranje Teksta