Cilj predmeta jeste dizajn dinamičkih veb strana koje uključuju interakciju korisnika. Cilj predmeta jeste dizajn dinamičkih veb strana koje uključuju interakciju korisnika

imeStranice#imeKrajnjePozicije"> polaznaPozicija

Domaći iz IP programiranja

Slika u (X)HTML dokumentu može predstavljati i polazni čvor u hipervezi. Krajnja adresa se tada navodi kao kod običnog linka, a umesto teksta koji se može aktivirati navodi se tag img.

• Slika u (X)HTML dokumentu može predstavljati i polazni čvor u hipervezi. Krajnja adresa se tada navodi kao kod običnog linka, a umesto teksta koji se može aktivirati navodi se tag img.

• imeKrajnjePozicije"> tagSaSlikom

• Primer:

• 

Linkovi se mogu iskoristiti i za pisanje nove mail poruke pomoću default programa za elektronsku poštu

• Linkovi se mogu iskoristiti i za pisanje nove mail poruke pomoću default programa za elektronsku poštu

• Pošaljite e-mail poruku!

• Pored adrese na koju se želi poslati poruka mogu se podesiti još neki parametri, kao što su naslov ili tekst poruke.

• Pošaljite e-mail poruku!

XHTML tekst ima hijerarhijsku strukturu.

• XHTML tekst ima hijerarhijsku strukturu.

• Pomoću imena elemenata, klasa elemenata ili ID-ova elemenata se mogu definisati grupe elemenata ili pojedinačni elementi.

• Pomoću klasa se mogu definisati grupe elemenata.

• Grupama elemenata se može pridružiti određeni stil.

• Neke osobine stilova se nasleđuju sa elementa roditelja na element dete.

Opšta sintaksa:

• Opšta sintaksa:

• imeGrupe {a1:v1;a2:v2;…}

• imeGrupe je CSS selektor koji određuje grupu ili pojedinačni element, koji se gradi na različite načine:

• imeElementa imeElementaDeteta

• imeElementa#IDElementa

• imeElementa.klasaElementa

• imeElemenata[imeAtributa=“vrednostAtributa”]

• Ovi načini se mogu na različite načine kombinovati, npr.

• imeElementa imeElementaDeteta.klasaDeteta imeElementaUnuka

• Kao i ranije a1,a2,... su atributi ili osobine, a v1,v2,... Njihove vrednosti.

Primeri:

• Primeri:

• h2 {color:red;}

• p.citati {color:red; font-size:small;}

• div.engleski p.citati {color:blue;}

• div p div.maleslike {width:50px;}

• .citati {color:red;}

• Primer stila svih potomaka:

• div#gaudi p {color:red;}

• Primer stila dece:

• div#gaudi > p {color:red;}

Pseudo klasa zavisi od korisničkih aktivnosti:

• Pseudo klasa zavisi od korisničkih aktivnosti:

• imeGrupe: pseudoKlasa {a1:b1; a2:b2;…}

• Stanje linka koje zavisi od aktivnosti korisnika se može opisati pomoću pseudo-klase:

• a:link{color:red;}

• a:visited{color:yellow;}

• a:hover{color:green;} – prešli mišem

• a:active{color:blue;} – link u momentu kad je kliknut

Pseudo element opisuje delove elementa:

• Pseudo element opisuje delove elementa:

• imeGrupe::pseudoElement {a1:b1; a2:b2;…}

• Primeri pseudo-elemenata:

• h1::before { content:url(smiley.gif);}

• p::first-letter{ color:#ff0000; font-size:xx-large;}

Stilovi mogu biti definisani u eksternim fajlovima koji se pozivaju u okviru zaglavlja pomoću taga , ili interno pomoću taga