View
171
Download
11
Category
Preview:
Citation preview
HTML
Formatiranje teksta, komentari i HTML entiteti
HTML KOMENTARI
<!-- Ovo je neki komentar -->
<!-- I ovo je komentar u višeredova -->
<!-- A može i ovako -->
Formatiranje tekstaTag Opis<b> Definira podebljani tekst
<big> Definira povećani tekst<em> Definira naglašeni tekst
<i> Definira nakošeni tekst<small> Definira smanjeni tekst
<strong> Definira masno otisnuti tekst<sub> Definira potpisani tekst<sup> 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>
<u>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 <br>, <hr>, <img>, <input>
• doctype je obavezan• ovo nije preporučeni ali je dopušteno
u HTML(u XHTML nije dopušteno): <input disabled><p width=100%>
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 <br/>, <hr/>, <img/>,<input/>
• svi XHTML tagovi moraju biti ispravno “ugnježdenji”(eng. nested)
• doctype je opcion• ovako je ispravno:
<input disabled=“disabled”><p width=“100%”>
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
<font></font>
• podržan u većini browsera• <font> tag specificira tip fonta, veličinu fonta i boju teksta
• Sintaksa:<font>Ovo je sadržaj</font>
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 (<font></font>)
<font size=“1”>Pogledaj me u veličini 1</font><br/><font size=“2”>Pogledaj me u veličini 2</font><br/><font size=“3”>Pogledaj me u veličini 3</font><br/><font size=“4”>Pogledaj me u veličini 4</font><br/><font size=“5”>Pogledaj me u veličini 5</font><br/><font size=“6”>Pogledaj me u veličini 6</font>
Promjena tipa fonta
<font face=“Verdana”>Pogledaj me u verdani</font><br/><font face=“Arial”>Pogledaj me u arialu</font><br/><font face=“Georgia”>Pogledaj me u georgiji</font><br/>
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 (<font></font> tag)
<font color=“red”>Pogledaj me u veličini 1</font><br/><font color=“#FF0000”>Pogledaj me u veličini 1</font>
Font tag i boja (konačno)
<font color="red">Ovo je crveni tekst!</font> <font color="#FF0000">Ovo je crveni tekst!</font><font style="color:rgb(255,0,0)">Ovo je crveni tekst!</font>
Font tag (<font></font>)
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
<font size=“2” face=“Verdana” color=“#FF0000”>Pogledaj me u veličini 2
</font>
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 < i > 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
Recommended