OSNOVE HTML-A I CSS-A · 2019-09-25 · Vježbe iz izborne nastave “Informatika" OSNOVE HTML-A I...

Vježbe iz izborne nastave “Informatika"

OSNOVE HTML-A I CSS-A

Tomislav Volarić,prof [email protected]Čitluk, 2011/12

Srednja škola dr.fra Slavka Barbarića, Čitluk

Internet i WWW

HTML

osnovni elementi HTMLa

osnovni elementi

hiperveze

osnovno formatiranje teksta i sadržaja

liste

posebni znakovi

prikaz slika

tablice

forme

okviri

2

Sadržaj

Internet3 www.sscitluk.bawww.google.com

www.facebook.com

server

TCP/IP protokol

WWW=World Wide Web

stvoren je 1989. godine na CERN-u

bazira se na hipertekstu (povezivanju sadržaja)

WWW je biblioteka multimedijalnih dokumenata

smještenih na računalima širom svijeta dostupnih putem

Interneta

dokumenti se nazivaju web stranice

4

WWW

web počiva na 3 mehanizma:

1. jedinstvenom adresiranju sadržaja putem URL-a

(Uniform Resource Locator)

2. protokolima za pristup sadržajima (http - HyperText

Transfer Protocol)

3. hipertekstualnoj organizaciji i pristupu sadržajima

(HTML jezik)

5

WWW

WWW6 http://www.sscitluk.ba/index.hml

URL

klijent

HTML=HyperText Markup Language

jezik za opis strukture dokumenta

najvažnija osobina HTML dokumenta je

hipertekstualnost (povezivanje sadržaja)

HTML dokument je tekstualna datoteka koja se sastoji

od HTML elemenata

7

HTML

8

Primjer HTML stranice

<table id = "prva_tablica">

<tr>

<td> Prva ćelija </td>

</tr>

</table>

<hr />

9

Koncepti HTMLa

element

atribut

vrijednost atributa

oznake

često se na web stranici na isti sadržaj primjenjuje više elemenata

takvi elementi ne smiju se preklapati već moraju biti ugnježđeni (eng. nested)

10

Ugnježđivanje

Ugnježđivanje

<p>

<b>Neki sadržaj

</b>

</p>

Preklapanje

<p>

<b>Neki sadržaj

</p>

</b>

HTML dokument <html></html>

početna i završna oznaka svakog dokumenta

svi ostali elementi moraju biti ugnježđeni unutar ovoga

HTML dokument dijeli se na 2 osnovna dijela

zaglavlje dokumenta <head></head>

tijelo dokumenta <body></body>

<frameset></frameset>

11

Struktura HTML dokumenta

zaglavlje dokumenta <head></head>

unutar zaglavlje unose se određeni "meta" podaci koji opisuju dokument npr. naslov dokumenta, kodna stranica, ključne riječi,...

naslov dokumenta <title></title>

meta podaci

<meta name="keywords" content=“računalni

praktikum 2, osnove HTMLa" />

meta name="author" content=“Tomo" />

<meta http-equiv="Content-Type"

content="text/html; charset=utf-8" />

12

Zaglavlje HTML dokumenta

<html>

<head>

<title>Prva HTML stranica</title>

</head>

<body>

Ovo je moja prva HTML stranica!

</body>

</html>

13

HTML dokument

Izgled u pregledniku14

naslovi (6 razina naslova <h1>-<h6>)

<h1>Ovo je naslov razine 1</h1>


...


odlomci <p>Ovo je odlomak</p>

prijelaz u novi redak <br />

vodoravna crta za odvajanje odlomaka <hr />

komentar <!–- Ovo je komentar -->

ne prikazuje se u web pregledniku

15

Elementi HTML-a

Nemate naznačen encoding, pa browseri ne znaju

kako prikazati stranicu. Encodinga koji podržavaju

hrvatske dijakritike ima više (ISO, UTF-8 i Windows)

Odmah iza <head> upišite ovaj kod:

Ne vide mi se hrvatska slova! (š, č, ć, ž, đ)

<meta http-equiv="Content-Type" content="text/html;

charset=windows-1250" />

16

<html>

<head><title>Druga HTML stranica</title></head>

<body>

<h1>Ovo je moja druga HTML stranica</h1>

<h2>HTML</h2>

<p>HTML je izvorni jezik za prikazivanje sadržaja na webu.<br />Razvijen je 1989. godine na CERN-u Europskom laboratoriju za nukleranu fiziku u Ženevi.



<hr />

Tim Berners-Lee, istraživač na CERN-u, predložio je distribuirani informacijski sustav za pohranu informacija. Sustav je bio baziran na Hipertekstu.

</p>

</body>

</html>

17

HTML dokument

hiperveza je veza između HTML dokumenta i drugog sadržaja

(drugi HTMLdokument, tekst, slika,...)

19

Hiperveza

<a href="drugi_dokument.html">

Ovo je link na drugi dokument</a>

a - "sidro" (eng. anchor) href – hyperlink referenceprikazuje se kao plavi podcrtani tekst (ukoliko specifičnim stilom nije drugačije definirano)

"adresiranje" drugog dokumenta koji se poziva može se

provesti na različite načine

ako se drugi dokument nalazi na drugom web poslužitelju,

navodi se puna adresa poslužitelja i naziv dokumenta

ako se dokument nalazi na istom web poslužitelju i istom

direktoriju kao html stranica putanju nije potrebno navoditi

20

Hiperveza

<a href="http://www.unidu.hr/index.html"> Tekst linka</a>

<a href="index.html">Tekst linka</a>

hiperveza može pokazivati na određeno mjesto u HTML dokumentu

odredišna mjesta (knjiške oznake) moraju biti posebno imenovana vrijednošću atributa "name" <a> elementa ili"id" atributa bilo kojeg (npr. <h1>) elementa

21

Hiperveza

<a href="drugi_dokument.html#mjesto2"> Ovo je link na određeno

mjesto u drugom dokumentu</a>

<a name = "mjesto2">Odredište</a>

ili

<h1 id = "mjesto2">Odredište</h1>

stranica se može otvoriti u novom prozoru (atr. target)

ili u određenom okviru (frame)

hiperlinkovi mogu biti posebnih vrsta:

slanje elektroničke pošte

pristup datotekama na ftp serveru

22

Hiperveza

<a href="drugi_dokument.html" target="_blank">

Ovo je link na drugi dokument</a>

<a href="mailto:[email protected]">E-mail</a>

<a href="ftp://ftp.server.hr/datoteka">FTP adresa</a>

<a href="drugi_dokument.html" target="lijeviOkvir">

Ovaj dokument će se otvoriti u lijevom okviru</a>

<html>

<head>

<title>Primjer linkova</title>

</head>

<body>

<a href="http://www.google.com/index.html">Ovo je

link na drugi dokument</a><br />

<a href="#mjesto2">Ovo je link na dno ovog

dokumenta</a><br />

<a href="mailto:[email protected]">E-mail</a><br />

<a href="ftp://ftp.carnet.hr/README"> FTP

datoteka</a><br /><br /><br /><br /><br /><br />

<a name="mjesto2">Odredište</a>

</body>

</html>

23

HTML dokument

oznake za formatiranje značenja teksta25

Osnovno formatiranje teksta

<strong>Ovaj tekst je jako

naglašen</strong>

<em>Ovaj tekst je

naglašen</em>

<code>Ovo je programski

kod</code>

<cite>Ovo je citat</cite>

oznake za formatiranje fizičkog izgleda teksta26

Osnovno formatiranje teksta

<b>Ovaj tekst je

podebljan</b>

<i>Ovaj tekst je

nakošen</i>

Ovo je indeks<sub>1</sub>

Ovo je

potencija<sup>2</sup>

<tt>Ovo je font fiksne

širine</tt>

<html>

<head><title>Treća HTML stranica</title></head>

<body>

<h1>Ovo je moja treća HTML stranica</h1>

<h2>HTML</h2>

<p>HTML je izvorni jezik za <strong>prikazivanje sadržaja</strong> na webu.<br /> Razvijen je 1989. godine na CERN-u<sup>1</sup> <em> Europskom laboratoriju za nukleranu fiziku u Ženevi.</em>



<hr /><big>Tim Berners-Lee</big>, istraživač na <def>CERN-u</def>, predložio je distribuirani informacijski sustav za pohranu informacija. <br />

<code>Sustav je bio baziran na hipertekstu.</code>

</p>

</body>

</html>

27

HTML dokument

prikazom u pregledniku gubi se početno formatiranje sadržaja

29

Osnovno formatiranje sadržaja

<html>

<head>

<title></title>

</head>

<body>

///\\___

(@ @)

+----oOO----(_)-----------+

| I ja učim |

| osnove |

| HTML-a |

+-----------------oOO-----+

|__|__|

|| ||

ooO Ooo

</body>

</html>

očuvanje formatiranja sadržaja

oznake <pre></pre>

tekst se prikazuje fontovima fiksne širine

30

Osnovno formatiranje sadržaja

<html>

<head>

<title></title>

</head>

<body>

<pre>

///\\___

(@ @)

+----oOO----(_)-----------+

| I ja učim |

| osnove |

| HTML-a |

+-----------------oOO-----+

|__|__|

|| ||

ooO Ooo

</pre>

</body>

</html>

liste služe za organizaciju sadržaja na web stranici

poredana lista (ordered list)

<ol></ol> kreira listu

neporedana lista (unordered list)

<ul></ul> kreira listu

elementi liste (za obje vrste liste)

<li></li> elementi liste

31

Liste

poredana lista (eng. ordered list) je lista kod koje su elementi nabrojani jedan

ispod drugoga i svaki element označen je rednim brojem

koristi se kada je redoslijed elemenata važan

32

Poredana lista

<ol>

<li>prvi element liste</li>

<li>drugi element liste</li>

<li>treći element liste</li>

</ol>

neporedana lista (eng. unordered list) je lista kod koje su elementi nabrojani jedanispod drugoga, a svaki element označen je točkom

koristi se kada nije važan redoslijed elemenata u listi

33

Neporedana lista

<ul>

<li>prvi element liste</li>

<li>drugi element liste</li>

<li>treći element liste</li>

</ul>

Unutar <ul>/<ol> elementa smije se nalaziti samo <li> element

<ul>/<ol> ne smiju biti u istoj razini s <li> elementom

Ugnježđena <ul>/<ol> lista dolazi unutar <li>

34

Ugnježđivanje listi

Pogrešno

<ul>

<li>ispitivanje znanja</li>

<ul>

<li>seminarski </li>

<li>kolokviji</li>

</ul>

<li>predavanja</li>

</ul>

Ispravno<ul>

<li>ispitivanje znanja

<ul>

<li>seminarski </li>

<li>kolokviji</li>

</ul>

</li>

<li>predavanja</li>

</ul>

znakovi koji u HTML-u imaju posebno značenje u tekstu se moraju prikazivati na poseban način, znakovnim ili numeričkim kodovima

na početku imaju znak & (ampersand), a na kraju točku-zarez

najčešće korišteni posebni znakovi:

35

Posebni znakovi

Znak

Za prikaz

koristiti

znakovni kod

... ili

numerički

< < <

> > >

" " "

‘ ' '

znak razmaka

Pogrešno

<html>

<head>

<title>Kod prve HTML

stranice</title>

</head>

<body>

Podebljani tekst se prikazuje

između oznaka <b> i </b>

</body>

</html>

36

HTML dokument

Želimo prikazati HTML kod :

37

HTML dokument

Želimo prikazati HTML kod:

Ispravno<html>

<head>

<title>Kod prve HTML stranice</title>

</head>

<body>

Podebljani tekst se prikazuje

između oznaka < b > i <

/b >

</body>

</html>

u HTML dokumentu mogu se ubaciti i slike

za prikaz se koristi <img> element

<img src="slika.jpg" alt="Moja prva slika"

height="160" width="160" border="2" />

src - naziv i putanja slike koja se prikazuje

alt - tekst koji opisuje sliku koji se prikazuje u slučaju ako nije moguć prikaz slike

height i width - visina i širina slike

border - definira okvir oko slike

align ("left" , "right", "bottom", "middle", "top" -

poravnanje u odnosu na odlomak

slike se mogu koristiti i kao linkovi

<a href="http://www.fpmoz.hr/">

<img src="slika.jpg" alt="Moja prva slika"

height="159" width="143" border="2" /></a>

38

Prikaz slike

HTML dokument

39

<html>

<head><title>Primjer slike</title></head>

<body>

<img src="http://www.timdizajn.com/praktikum/slike/kosarka.jpg" alt="Prva slika"

height="160"

width="160"

border="2"

align="right"/>

<a href="http://www.fpmoz.ba/">

<img src="http://www.timdizajn.com/praktikum/slike/Windows_8.png"

alt=“windows"

height="160"

width="160"

border="2" /></a>

</body>

</html>

prikazuju sadržaj na strukturirani način, u recima i

stupcima

u praksi tablice se koriste za:

prikaz strukturiranih podataka

pozicioniranje sadržaja na točno određeno mjesto na

stranici

sadržaj se smješta u određenu ćeliju

41

Tablice

HTML oznake tablice <table></table> određuje tablicu

<th></th> određuje zaglavlje tablice

<tr></tr> određuje redak tablice

<td></td> određuje ćeliju tablice

<caption></caption> određuje opis (naslov) tablice

42

HTML oznake tablice

zaglavlje zaglavlje

ćelija ćelija

ćelija ćelija

redak 1

zaglavlje

redak 2

tablica

Opis/naslov tablice

debljina okvira (u pixelima)<table border="?"> </table>

širina (u % ili pixelima)<table width="?"> </table>

u odnosu na širinu prozora preglednika

ako se ne navede tablica zauzima širinu sadržaja

<td width="?"> </td>

visina (u % ili pixelima)<table height="?"> </table>

u odnosu na visinu prozora preglednika

ako se ne navede tablica zauzima visinu sadržaja

<td height="?"> </td>

43

Osnovni atributi tablice

<table border="2">

<caption>Glumci i glumice</caption>

<tr>

<th>Inicijali</th>

<th>Ime i prezime</th>

</tr>

<tr>

<td>AJ</td>

<td>Ashley Judd</td>

</tr>

<tr>

<td>BW</td>

<td>Benjamin Weir</td>

</tr>

<tr>

<td>TLJ</td>

<td>Tommy Lee Jones</td>

</tr>

</table>

44

Primjer 1 (okvir tablice)

<table width="50%" height="300" border="2">

<tr>

<th>Inicijali</th>


</tr>

<tr>

<td>AJ</td>


</tr>

<tr>

<td>BW</td>


</tr>

<tr>

<td>TLJ</td>


</tr>

</table>

45

Primjer 2 (širina i visina tablice)

<table border="2">

<tr>

<th width="60%" height="75">Inicijali</th>


</tr>

<tr>

<td>AJ</td>


</tr>

<tr>

<td>BW</td>


</tr>

<tr>

<td>TLJ</td>


</tr>

</table>

46

Primjer 3 (širina i visina ćelije)


prazan prostor oko sadržaja ćelije (u pixelima)<table cellpadding="?"> </table>

ako se ne navede, po defaultu je 1 ili 2 pixela

ako se želi ukloniti treba staviti da je 0

Ime Prezime

cellpadding

47


razmak između ćelija (u pixelima)<table cellspacing="?"> </table>

ako se ne navede, po defaultu je 1 ili 2 pixela

ako se želi ukloniti treba staviti da je 0

Ime Prezime

cellspacing

48

horizontalno poravnanje sadržaja u ćeliji

<tr align="?"> </tr>

<td align="?"> </td>

left, center ili right

<caption align="?"> </caption>

left, center ili right

vertikalno poravnanje sadržaja u ćeliji

<tr valign="?"> </tr>

<td valign="?"> </td>

top, middle ili bottom

<caption align="?"> </caption>

top ili bottom

49


<table border="2" cellpadding="15">

<tr>

<th>Inicijali</th>


</tr>

<tr>

<td>AJ</td>


</tr>

<tr>

<td>BW</td>


</tr>

<tr>

<td>TLJ</td>


</tr>

</table>

50

Primjer 4 (prostor oko sadržaja)

<table border="2" cellspacing="15">

<tr>

<th>Inicijali</th>


</tr>

<tr>

<td>AJ</td>


</tr>

<tr>

<td>BW</td>


</tr>

<tr>

<td>TLJ</td>


</tr>

</table>

51

Primjer 5 (razmak između ćelija)

<table>

<tr>

<td><img src="pic-1a.gif" width="56"

height="102" border="0"></td>

<td><img src="pic-1b.gif" width="56"


<td><img src="pic-1c.gif" width="56"


</tr>

<tr>







</tr>

</table>

52

Primjer 6 (tablica s razmacima)

<table cellspacing="0" cellpadding="0"

border="0">

<tr>







</tr>

<tr>







</tr>

</table>

53

Primjer 7 (tablica bez razmaka)

<table border="2">

<caption align="bottom">Glumci i glumice</caption>

<tr align="left">

<th>Inicijali</th>

<th align="left">Ime i prezime</th>

</tr>

<tr>

<td align="center">AJ</td>


</tr>

<tr>

<td align="center">BW</td>


</tr>

<tr>

<td align="center">TLJ</td>


</tr>

</table>

54

Primjer 8 (poravnanje sadržaja)

spojeni redovi<td rowspan="?"> </td>

broj spojenih redova

spojeni stupci<td colspan="?"> </td>

broj spojenih stupaca

55

Spojene ćelije tablice


<tr align="center">

<th rowspan="2">Godina</th>

<th colspan="3">Studenti</th>

</tr>

<tr align="center">

<th>1. godina</th>

<th>2. godina</th>

<th>3. godina</th>

</tr>

<tr align="center">

<td>2003</td>

<td>35</td>

<td>28</td>

<td>18</td>

</tr>

<tr align="center">

<td>2004</td>

<td>45</td>

<td>15</td>

<td>14</td>

</tr>

</table>

56

Primjer 9 (spojeni redovi ili stupci)


<tr align="center">

<th rowspan="2">Godina</th>

<th colspan="3">Studenti</th>

</tr>

<tr align="center">

<th>1. godina</th>

<th>2. godina</th>

<th>3. godina</th>

</tr>

<tr align="center">

<td valign="bottom">2003</td>

<td rowspan="2" colspan="3">Nema upisanih</td>

</tr>

<tr align="center">

<td>2004</td>

</tr>

</table>

57

Primjer 10 (spojeni redovi i stupci)

OSNOVE CSS-a58

CSS

Elementi CSS-a

HTML elementi za primjenu stilova

Svojstva teksta, fontova, pozadine, okvira

Prazan prostor oko elemenata (padding)

Određivanje margina

Smještanje sadržaja na stranici

Svojstva linkova

Ostala svojstva

59

Sadržaj

CSS = Cascading Style Sheets

određuju način na koji će se prikazati elementi HTML-a

stil se primjenjuje na elemente HTML-a

omogućuje razdvajanje oblikovanja od sadržaja

ideja je došla iz izdavaštva (knjiga i časopisa)

stilovi su opisani "predlošcima stilova" (Style Sheets")

CSS definicije stilova mogu biti:

uključene u HTML dokument

navedene u posebnoj datoteci s opisima stilova

tekstualna datoteka s ekstenzijom .css može se kreirati u tekstualnom editoru ili u posebnim editorima za formiranje

stilova

60

CSS

CSS 1 – 1996 osnovno formatiranje elemenata

većina preglednika podržava ovaj standard

CSS 2 - 1998 pozicioniranje elemenata

preglednici podržavaju dio specifikacije

CSS 3 – u razvoju specifikacija će se (najvjerojatnije) razdvojiti na više

specijaliziranih

problem nekonzistentne podrške u različitim preglednicima

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(CSS)

61

CSS specifikacije

62

HTML dokument

selector {property: value}

višestruka svojstva i vrijednosti razdvajaju se znakom točke zareza

selector {property: value; property: value}

63

Elementi CSS-a

1. selector - osnovni element CSS-a koji definira izgled svih elemenata na koje je primjenjen (odgovarajući izgled)

defaultni selectori - svaki element HTML-a ima odgovarajući selector(tijelo dokumenta=body, odlomak=p, tablica=table, redak tablice=tr,...)

ime im je jednako oznaci HTML-a bez trokutastih zagrada (npr. element <body> ima selector body)

class selectori - za opis razreda

imenuju se s točkom ispred imena (npr .moj_selector )

isti stil se primjenjuje na više elemenata istog razreda

id selectori - za opis pojedine instance

imenuju se s oznakom "hash" ispred imena (npr #moj_selector )

stil se primjenjuje samo na jedan element

body {color: red; font-size: 24px}

64


2. property - opisuje odgovarajuće svojstva elemenata

npr. boju pozadine, fontove, okvir, horizontalno poravnanje,...

paralela s atributima HTML elemenata

navode se unutar vitičastih zagrada s znakom dvotočke iza naziva

izuzetak je kod linijskog stila gdje se ne omeđuju vitičastim zagradama već znakovima navodnika

iza dvotočke se navodi pridružena vrijednost

body {color: red ; font-size:

24px}

65


3. value - vrijednost odgovarajućeg svojstva

paralela s vrijednosti atributa u HTML-u

npr. property color definira boju fonta. Vrijednost red

označava da će se odgovarajući font prikazati crvenom

bojom

navode se iza znaka dvotočke

ako se vrijednost sastoji od više riječi potrebno ih je navesti unutar

navodnika

body {color: red ; font-size: 24px}

između vrijednosti i mjerne jedinice ne smije se ostavljati razmak

66


Grupiranje Formatira istim stilom sve navedene elemente

p, h1, h3, .proljece, #zeleno { color:green }

Klase određenih elemenata formatira samo one element s određenom vrijednošću “class” atrributa

h1.zeleno, h3.dolje { color: red}

Instance određenih elemenata formatira samo one element s određenom vrijednošću “id” atributa

h1#prvi, h3#zadnji { color: blue }

Kontekstualni selektori formatira samo ugnježđene element po zadanoj hijerarhiji

td strong {color: red} ;

p strong {color: green}

67

Primjena selectora

1. stilovi koji se primjenjuju na 1 element

linijski predlošci (inline style sheets)

2. stilovi koji se primjenjuju na 1 dokument

umetnuti predlošci (embedded style sheets)

stilovi se definiraju u zaglavlju HTML dokumenta

3. stilovi koji se primjenjuju na više dokumenata

vezani predlošci (linked style sheets)

stilovi se definiraju u posebnom css dokumentu

uvezeni predlošci (imported style sheets)

stilovi se definiraju u posebnom css dokumentu

mogu se navesti unutar HTML ili css dokumenta

68

Tipovi CSS-a

primjenjuju se na 1 element

koristi se style atribut odgovarajućeg elementa HTML-

a

svojstva i vrijednosti su vrijednost style atributa i

navode se pod navodnim znakovima<p style="color: red; font-style: italic;">

imaju najviši prioritet kod primjene

nedostatak: uz svaki element moraju se navoditi sva

svojstva i vrijednosti

69

Linijski predlošci (eng. inline)

primjenjuju se na čitav dokument

koristi se HTML <style> element u zaglavlju dokumenta

<style type="text/css">

p {

color: navy;

font-size: 12pt;

background-color: yellow;

}

</style>

nedostatak: u svakom HTML dokumentu moraju se navoditi svi stilovi

70

Umetnuti predlošci (eng. embedded)

primjenjuju se na više dokumenata

stil se navodi u posebnom css dokumentu i veže na više HTML

dokumenata

koristi se HTML <link> element u zaglavlju dokumenta

<link rel="stylesheet" type="text/css"

href="datoteka_stila.css" />

prednosti:

isti dokument stila veže se uz više HTML stranica

HTML stranice sa sličnim ili istim stilom su puno manje

kod izmjene stila dovoljno je izmijeniti css datoteku s definicijom stila

71

Vezani predlošci (eng. linked)

Umetnuti predlošci koji se primjenjuju na više dokumenata

stil se navodi u posebnom css dokumentu i veže na više HTML dokumenata pomoću css naredbe

@import url(ime_css_datoteke.css)

Unutar jednog CSS dokumenta uključuje se sadržaj drugog

u HTML dokumentu se naredba navodi unutar HTML <style>elementa u zaglavlju dokumenta

<style>

@import url(p1.css);

</style>

iste prednosti kao kod vezanih predložaka

72

Uvezeni predlošci (eng. imported)

bilo koji HTML element (<p>,<td>,<input />,…)

posebni HTML elementi za primjenu stilova

<div></div> blok element

sadržaj formatira kao poseban odlomak i odvaja ga prijelazom u novi

red (funkcionira poput <p> elementa)

<span></span> linijski element

koristimo ga kada želimo posebno formatirati sadržaj unutar nekog

drugog elementa

ne odvaja sadržaj prijelazom u novi red i ne formatira ga kao poseban

odlomak

73

HTML elementi za primjenu stilova

74

<div></div> element

HTML

<div style="background-color: red">

<h1>Ovaj dio dokumenta</h1>

<h2>imati će</h2>

<p>crvenu pozadinu</p>

</div>

<p>A ovaj neće.</p>

75

<span></span> element

HTML

<h1>Ovo je normalan naslov</h1>

<p>a ovaj dolje je šareni</p>

<h2>

<span style="background-color: blue">Plavo

</span>

<span style="background-color: red">Crveno

</span>

<span style="background-color: green">Zeleni

</span>

</h2>

Znamo kako postaviti komentare u HTML-u:

komentar <!–- Ovo je komentar -->

Komentar u CSS-u:

komentar /* Ovo je komentar */

76

Komentari u CSS-u

77

HTML dokument

u primjerima ćemo koristiti stilove definirane u zaglavlju HTML dokumenta

HTML dokument je primjer.html

u HTML dokumentu u zaglavlje dodajte style element

78

Primjeri

<head>

<style>

<link rel="stylesheet" type="text/css" href="p.css" />

</style>

</head>

kontrolira tekst unutar odgovarajućeg elementa (boju, poravnanje, dekoraciju...).

color - boja teksta

vrijednosti: naziv boje, hex ili rgb oznaka

text-align - horizontalno poravnanje teksta

vrijednosti: left, right, center, justify

text-decoration - dekoracija teksta

vrijednosti: underline, overline, line-through, blink, none

79

Formatiranje svojstava teksta

Tekst čitavog dokumenta ćemo

prikazati poravnat s obje strane

(justify).

U drugom odlomku promijeniti ćemo

boju teksta u “ciglastu” (FireBrick),

centirati ćemo ga i podcrtati.

Treći odlomak ćemo poravnati s

desne strane.

80

Primjer 1-1

CSS

body {

text-align: justify;

}

#odlomak2 {

color: firebrick;

text-decoration: underline;

text-align: center;

}

#odlomak3 {

text-align: right;

}

81

HTML dokument

kontrolira svojstva fonta kojim se prikazuje odgovarajući sadržaj

font-family - naziv obitelji ili specifičnog fonta

vrijednosti: naziv obitelji ili naziv fonta

5 osnovnih obitelji fontova

serif - fontovi tipa Times (sa ukrasnim završecima)

sans-serif - fontovi tipa Arial (bez ukrasnih završetaka)

monospace - fontovi sa slovima fiksne širine

cursive - fonovi koji simuliraju rukopis

fantasy - fontovi koji ne spadaju u nijednu od skupina

može se navesti i naziv konkretnog fonta

npr. impact ili CommercialScript BT

font-family: verdana, arial, sans-serif;

82

Formatiranje fontova

font-size - veličina fonta

vrijednost - izražena u različitim mjernim jedinicama (apsolutne:

mm, cm, pt; relativne: em, ex, px,…)

font-style - stil fonta

vrijednost: italic, normal

font-weight - debljina fonta

vrijednost: bold, bolder, lighter, normal,...

83

Formatiranje fontova (nastavak)

Staviti ćemo da font čitavog

dokumenta bude verdana.

Promijeniti ćemo naslov razine 1

da se prikazuje plavom bojom,

podebljano, fontom veličine 2

puta veće od veličine

standardnog fonta.

Treći odlomak prikazati ćemo

nakošeno.

84

Primjer 1-2

CSS

body {

font-family: verdana;

}

h1 {

font-size: 2em;

font-weight: bold;

color: blue;

}

#odlomak3 {

font-style: italic;

}

85

HTML dokument

kontrolira pozadinu odgovarajućeg elementa

background-color - boja pozadine

vrijednosti:

naziv boje (npr. red, blue, green,...)

hex oznaka (npr. #FF0000, #0000FF, #00FF00)

rgb oznaka (npr. rgb(255,0,0),...)

background-image - slika na pozadini

vrijednosti: url(slika) npr. url(http://www.timdizajn.com/praktikum/slike/pozadina.jpg)

background-repeat - ponavljanje slike

vrijednosti: repeat, repeat-x, repeat-y, no-repeat

background-attachment - hoće li se slika pomicati kako se pomiče stranica

vrijednosti: scroll, fixed

86

Formatiranje pozadine

U dokumentu staviti ćemo sliku kao pozadinu sliku "pozadina.jpg" koja se ne pomiče zajedno sa stranicom

U trećem odlomku promijeniti ćemo boju pozadine u "prašnjavo-plavu" (powderblue).

87

Primjer 1-3

CSS

body {

background-image:

url(http://www.timdizajn.com/praktikum/slike/pozadi

na.jpg);

background-attachment: fixed;

}

#odlomak3 {

background-color:powderblue;

}

88

HTML dokument

Omotač oko HTML elemenata

Sastoji se od

Margine (margin)

Okvira (border)

Razmaka između

sadržaja i okvira

(padding)

89

CSS box model

Kod oblikovanja sadržaja određujete širinu i visinu sadržaja (HTML elementa)

Veličina elementa osim veličine sadržaja uključuje i veličinu elemenata uključenih u box model (margine, okvira i razmaka između sadržaja i okvira)

Npr. ukupna širina elementa na slici je 300px

širina sadržaja:250px;

razmak: 10px;

okvir:5px

margina:10px;

Izračun veličine elementa:

250px (širina sadržaja)+ 20px (razmak s lijeve i desne strane)+ 10px (lijevi i desni okvir)+ 20px (lijeva i desna margina)= 300px

90

Veličina elementa

kontroliraju svojstva okvira kojim se uokviruje odgovarajući sadržaj

border-width - debljina okvira

vrijednosti: thin, medium, thick ili debljina u px

border-style - način na koji je iscrtan okvir

vrijednosti: solid, dashed, dotted, inset, outset, ridge, groove, double

border-color - boja okvira

vrijednosti: naziv boje, rgb ili hex oznaka

moguće je baratati pojedinačno sa svojstvima svake strane okvira

border-[top|bottom|right|left]-[style|color|width]

sva svojstva okvira odjednom

border: width style color;

Npr. border: thin solid red;

91

Svojstva okvira

Drugi odlomak uokviriti ćemo

punim, tankim okvirom. Boja

okvira s lijeve i donje strane biti

će bijela, a s desne i gornje

crna.

Treći odlomak uokviriti ćemo

debelim, izbočenim (inset)

okvirom zelene boje

92

Primjer 1-4

CSS

.odlomak2 {

border-style: solid;

border-width: thin;

border-left-color: white;

border-right-color: black;

border-top-color: black;

border-bottom-color: white;

}

.odlomak3 {

border: thick inset green;

}

93

HTML dokument

određuje se veličina praznog prostora oko sadržaja elementa padding - prostor na sve 4 strane

padding-top - prostor s gornje strane

padding-right - prostor s desne strane

padding-bottom - prostor s donje strane

padding-left - prostor s lijeve strane

vrijednost: veličina u odgovarajućoj mjernoj jedinici (mm, cm,px, em,...)

sva veličina razmaka odjednom

padding: top right bottom left;

94

Razmak (padding)

Prostor oko sadržaja

trećeg odlomka sa svih

strana je 15 piksela

95

Primjer 2-1

CSS

#odlomak3 {

padding: 15px;

}

96

HTML dokument

margine određuju udaljenost sadržaja od ruba

nadređenog objekta

margin - sve 4 margine

margin-top - gornja margina

margin-right - desna margina

margin-bottom - donja margina

margin-left - lijeva margina

vrijednost: veličina u odgovarajućoj mjernoj jedinici (mm, cm, px, em,...) ili

“auto”

sva margine odjednom

margin: top right bottom left;

97

Određivanje margina

naslov ćemo odmaknuti

za 2 znaka od gornje

margine;

drugi odlomak uvući

ćemo za 4 znaka u

desnu stranu, a treći za

8 znakova.

98

Primjer 2-2

CSS

h1 {

margin-top: 2em;

}

#odlomak2 {

margin-left: 4em;

}

#odlomak3 {

margin-left: 8em;

}

99

HTML dokument

posebni "pseudo selectori" za prikaz stanja u kojem se nalazi link

1. a:link - stil linka koji nije posjećen (običan link)

2. a:visited - stil posjećenog linka

3. a:hover - stil linka iznad kojeg se nalazi miš

4. a:active - stil linka koji je zadnji izabran

važan je redoslijed navođenja pseudo selectorakoji mora biti

link->visited-> hover-> active

100

Svojstva linkova

Neposjećene linkove prikazati ćemo

zelenim slovima, posjećene crvenim,

aktivni linkovi biti će prikazani žutim

slovima na smeđoj pozadini, a aktivni

link iznad kojeg se nalazi miš bijelim

slovima na zelenoj pozadini.

101

Primjer 2-5

CSS

a:link { color: green; }

a:visited { color: red; }

a:hover {

background-color: green;

color: white;

}

a:active {

background-color: brown;

color: yellow;

}

102

HTML dokument

Korištenjem neporedane liste napraviti

ćemo izbornik.

Linkovi će biti prikazani bijelim

slovima na zelenoj pozadini. Aktivni

link iznad kojeg se nalazi miš biti će

prikazan bijelim slovima na crvenoj

pozadini.

103

Primjer 2-6CSS

ul {

list-style-type: none;

}

li {

margin-left: .2em;

width: 8em;

}

a {

display: block;

color: white;

background-color: green;

text-decoration: none;

}

a:hover

{

background-color: red;

color: white;

}

104

HTML dokument

list-style-type – svojstva oznake elementa liste vrijednosti kod neporedane liste: disc, circle, square

vrijednosti kod poredane liste: decimal, lower-roman, upper-roman, lower-alpha, upper-alpha

vrijednost kada se žele elementi bez oznaka: none

cursor - izgled cursora kada se pozicionira iznad elementa vrijednosti: crosshair, default, pointer, move, e-resize, ne-resize, nw-resize,

n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help

display - način na koji se element prikazuje vrijednosti: none, inline, block

visibility - da li će element biti vidljiv ili ne vrijednosti: visible, hidden

105

Ostala svojstva

Vodiči kroz CSS http://www.w3schools.com/css/

http://www.w3.org/MarkUp/Guide/Style.html

http://www.w3.org/Style/CSS/learning

http://www.westciv.com/style_master/academy/css_tutorial/

http://www.thenoodleincident.com/

http://gallery.theopalgroup.com/selectoracle/

Popis svih CSS elemenata i svojstava

http://www.blooberry.com/indexdot/css/propindex/all.htm

Specifikacija boja

http://www.w3schools.com/css/css_colors.asp

CSS specifikacije

http://www.w3.org/TR/REC-CSS2

106

Literatura

font čitavog dokumenta neka bude Arial,

naslov prikažite podcrtano, boldano, veličine 3 puta veće od veličine standardnog fonta, na žutoj pozadini

odlomci neka budu poravnati s obje strane

107

DZ1

Korištenjem linijskih HTML

elemenata i selektora za opis

razreda na HTML stranici iz

prethodnog zadatka označite riječ

HTML da stranica izgleda ovako

108

DZ 2

Tablicu formatirajte na slijedeći način:

svi fontovi neka budu tipa Verdana

zaglavlje neka bude prikazano

bijelim slovima na zelenoj pozadini

prvi i treći redak neka budu na žutoj

pozadini (yellow), a drugi na srebrnoj

(silver).

okvir svih ćelija neka bude plave boje

(blue) istočkan (dotted) -

/prethodno iz HTMLa uklonite atribut

debljine okvira!/

109

DZ 3

Stranicu formatirajte pomoću CSSa. Slika za oznaku liste nalazi se na adresi: http://www.timdizajn.com/praktikum/slike/tocka.png

Slika kompota nalazi se na adresi http://www.timdizajn.com/praktikum/slike/kompot.jpg

110

DZ 4

http://www.timdizajn.com/praktikum/slike/tocka.png

http://www.timdizajn.com/praktikum/slike/tocka.png

http://www.timdizajn.com/praktikum/slike/kompot.jpg

http://www.timdizajn.com/praktikum/slike/kompot.jpg

Stranicu iz 1 zadatka "Osnove CSSa 1. dio" formatirajte na način da:

tekst bude podijeljen u 2 odlomka

prvi odlomak odmaknite od lijevemargine 20%

drugi odlomak odmaknite od desnemargine 30%

111

DZ5

Tablica širine 50% stranice,

centrirana, obrub širine 1px,

zelene boje, font:Tahoma,

boja pozadine žuta, tekst

centriran.

Boja pozadine zaglavlja:

#ffff00, veličina teksta16,

boja teksta: zelena.

Boja pozadine ćelija:

#9acd32, veličina teksta

14, boja teksta: crna.

Postaviti da nema razmaka

oko sadržaja ćelija.

Sve elemente stranice zadati

u istom dokumentu u obliku

Internal Style Sheet CSS-a.

112

Zadatak 6

Formatirajte stranicu s zaglavljem i 2 stupca.

Prvi stupaczauzima 60% ukupne širine stranice, a drugi preostali dio.

113

Zadatak 7

Pomoću poredane liste napravite

izbornik koji će mijenjati boju

pozadine kada se kursor nalazi

iznad njega.

Boju će promijeniti iz modre (navy) u

crvenu (red).

Linkovi neka vode na stranice

proizvođača preglednika:

http://www.microsoft.com/

http://www.mozilla.org/

http://www.opera.com/

http://linx.browser.org/

114

Zadatak 8

Izbornik iz prethodnog zadatka napravite da bude horizontalni.

115

Zadatak 9

Zadatak 10

Formatirajte životopis pomoću CSSa, bez tablica.

116

Mogu koristiti stranicu http://www.w3schools.com/ na testu

Ako sam uradio domaću zadaću znam osnove HTML-a i

CSS-a i ne treba mi šverc

http://www.w3schools.com/

OSNOVE HTML-A I CSS-A · 2019-09-25 · Vježbe iz izborne nastave “Informatika" OSNOVE HTML-A I...

Documents

Transcript of OSNOVE HTML-A I CSS-A · 2019-09-25 · Vježbe iz izborne nastave “Informatika" OSNOVE HTML-A I...