CSS skripta

Uvod u (X)HTML i CSS Tehničko veleučilište u Zagrebu 2010.

Opće vijesti  

 







Dopušteno je nositi svoje prijenosnike na vježbe Softver koji koristimo: jEdit 4.2 za unos sintakse (najobičniji tekst-editor) i tri preglednika (Firefox, Internet Explorer i Opera) Ne radimo u WYSIWYG uređivačima! Ovo nije Uvod u Dreamweaver ili grafičko uređivanje HTML-a i CSS-a Ovo je prije “Uvod u mehaniku kodiranja” ili “onoga što stoji ispod poklopca motora” Oni koji se žele baviti arhitekturom, prvo moraju naučiti crtati, a tek onda raditi u aplikacijama kao što su Architecture ili AutoCAD Grafičko sučelje je nadgradnja, a ne polazište.

Opće vijesti  



 



Cilj kolegija: teoretske i praktične osnove HTML-a, (X)HTML-a i CSS-a. Koncepcija rada: predavanja za upoznavanje s gradivom; vježbe pripadaju studentima punih 90 minuta. Sve što ćete trebati napraviti na seminarima, bit će objašnjeno na predavanjima. Nema ponavljanja – tko ne pohađa predavanja, na vježbama će zjapiti. Vodite bilješke! Dolaženje na vježbe obvezatno, predavanja nisu, ali su jako (jako!) preporučljiva (osobito za one koji nisu ručno kodirali) Mogućnost oslobođenja od vježbi – za iskusne Dolasci na seminare se bilježe (bit će 11 radnih tjedana s vježbama koji će se evidentirati), 2 su dopuštena izostanka. S tri izostanaka, nećete moći izići na ispit! Nemate li 9 dolazaka, nećete proći ovaj kolegij! Naknadne ispričnice ne uvažavam! (“prva 4 tjedna nisam dolazio, a onda sam se razbolio”). Ponavljači

Opće vijesti 



 

Dolazite u grupama na kojima ste zabilježeni! Ne pitajte me koja ste grupa jer to ja ne znam. Satničar radi grupe po kriterijima kako su ljudi podijeljeni na drugim kolegijima. Ako ne možete doći u svoju grupu, dođite u neku drugu. Ako u toj drugoj grupi nema slobodnih računala, onda tamo niste dobrodošli. Ako imate laptop, onda ste u svakoj dobrodošli! Nemojte doći u drugu grupu, a da nekome tko tamo i pripada uzmete mjesto za računalom! Ako se mislite preseliti u drugu grupu, stavite oglas na forum da tražite studenta koji će htjeti doći u vašu grupu! Konzultacije su odmah nakon predavanja. Također, utorkom od 14:00 do 16:00 sati u IHJJ, Rep. Austrije 16 (Zapadni kolodvor), jedna tramvajska stanica nakon Britanskog trga u smjeru Črnomerca. Otežani radni uvjeti zbog velikih i brojnih grupa! Oni koji dolaze na predavanja molim za disciplinu. Predavanja ne moraju biti ex catedra kao takva, vaši

Opće vijesti 



Vijesti o kolegiju na stranici KHJ-a TVZ-a ili na Moodle e-learning portalu (http://e-learning.tvz.hr/). Tamo će biti i nastavni materijali s predavanja, odnosno kod s vježbi. Potrebno je prethodno se ulogirati da biste ih skinuti. Sljedeći tjedan na vježbama ćemo omogućiti registriranje na kolegij na Moodleu. Pravila:   





Registracija samo uz pomoć TVZ-ove adrese e-pošte Samo jedan korisnički račun po studentu Registracija vlastitim imenom i prezimenom (ne nadimkom)

E-learning će služiti za sav nastavni materijal, blogove, forum, upload datoteka na ispitima, ocjenjivanje, rokove, seminare, ankete… TVZ nema službenog dediciranog admina za

Opće vijesti   



Zašto (X)HTML i CSS? Zašto kodirati ručno? (‘ispod haube’) Ovo je početak vašeg rada na internetu i dosta se drugih kolegija nastavlja na nj: Pretražnici i navigacija na WEB-u, Oblikovanje web stranica, Interaktivno programiranje na webu, Napredne tehnologije interneta Redovitost dolaženja (“matematika”…)

Opće vijesti 

   

 

Ovdje se ne postaje koder/programer, ovdje se uči (i) razmišljati kao koder/programer, (ii) metodologiji jezika Samoobrazovanje Kada znate da ste postali profesionalac? Trikovi, savjeti Html, xhtml, css, javascript, dizajn stranica, ftp, serversko programiranje, Ajax, XML, SilverLight, Flash, Web 2.0, CMS, DMS, XUL, … dugi niz internetskih tehnologija, protokola i još više softvera Budućnost interneta je svijetla (OS na mreži) Rak-rana (X)HTML-a: mnoštvo

Opće vijesti 



Gdje je kraj Uvoda u (X)HTML i CSS i početak Naprednog kodiranja? Kada se postavi pitanje optimizacije, uskladivosti, poslužioca, (klijentskog ili serverskog) programiranja, webdinamičnosti…

Jezici za obilježavanje Mark-up languages 



Jezici koji obilježavaju tekst (primarno, ali ne nužno isključivo samo tekst) – strukturno, grafički, kontekstualno, formulativno, funkcionalno – SGML, HTML, XHTML, RTF, CSS, XML, LaTeX, DocBook, Wikitext, MathML, MusicML, TEI, CML (chemical markup l.), RTML (remote telescope markup l.), VoiceXML, RSS, XUL (Mozillin XML User Interface Markup Language)… Dijele se na document markup l., općenite, za kodiranje aplikativnog

Jezici za obilježavanje    





\b ODF … 1 CS {font-weight: bold} S '''primjer'''

wikisintaksa

Jezici za obilježavanje Jezici za obilježavanje (markup languages) deskriptivni proceduralni (logički, strukturalni) (fizički) 





Onaj tko radi proceduru od deklaracija jest, npr. prebirnik (browser) – zato se HTML prikaz tako razlikuje od prebirnika do prebirnika Pogrješno mišljenje da … znači točno neki izgled – to radi HTML (prikazna) rendering jedinica u browseru – konfigurabilno (dio dostupan preko about:config u Firefoxu) da može biti dobro prikazano na dlanovnicima, mobitelima… On samo naizgled podsjeća na prezentacijski tag, međutim, on to nije HTML vs. CSS – opisni jezik (“Ovo je naslov.”), onaj koji opisuje sadržaj (content) jezik izgleda (“naslov prikaži na sljedeći način…”), onaj koji opisuje izgled

Jezici za obilježavanje

Prebirnik (browser) Preglednik (viewer) Jezici za obilježavanje (markup languages) Pretražnik, pretraživač – deskriptivni proceduralni termini vezani za (logički, strukturalni) (fizički) tražilice i indeksere







Onaj tko radi proceduru od deklaracija jest, npr. prebirnik (browser) – zato se HTML prikaz tako razlikuje od prebirnika do prebirnika Pogrješno mišljenje da … znači točno neki izgled – to radi HTML (prikazna) rendering jedinica u browseru – konfigurabilno (dio dostupan preko about:config u Firefoxu) da može biti dobro prikazano na dlanovnicima, mobitelima… On samo naizgled podsjeća na prezentacijski tag, međutim, on to nije HTML vs. CSS – opisni jezik (“Ovo je naslov.”), onaj koji opisuje sadržaj (content) jezik izgleda (“naslov prikaži na sljedeći način…”), onaj koji opisuje izgled

Zašto ne programiramo HTML?       

 

Jezici za obilježavanje (anotaciju, markup) programski jezici JzO: interpretiraju (“Imaš zgodnu curu.”) PJ: instruiraju (“Nađi i meni jednu takvu.”) Content Markup/Layout Markup = obilježje Obilježje je tekst dodan dijelovima dokumenta da strukturno interpretiraju podatke Jezici za obilježavanje su skup dogovorenih obilježja koji formatiraju i strukturiraju tekst i dokument (HTML, XHTML, XML, LaTeX…) JMBG je JzO JzO mogu instruirati, ali samo ako unutar svoga koda ubaci kod jezika za instruiranje (npr. JavaScript u HTML)

O HTML-u      

HyperText Markup Language “HyperText, HyperLinks” HTML je tekstualni format Primarno, fundamentalno znanje Prva i glavna namjena: web CHM (Microsoft Compiled HTML)   

 

 

ne razvija se više (npr. WordPad u XP-u) > Microsoft Assistance Markup Language Prednost: HTML + sadržaj, indeks i tražilica; manji fajlovi… Help fajlovi, e-knjige

Flash vs. Html (back button, dojam, gdje se nalazim?) ACID3 test (FF 3.0.7 71, IE 7 12, IE 8 20, Opera 9.64 85, Safari 4.26 100) – u kojoj mjeri preglednik prati webstandarde) http://validator.w3.org/ o html-u se ne predaje i ne teoretizira, on se vježba i uče se nove tehnike kodiranja – prvo se uči sjediti, uspraviti, puzati, hodati, trčati…

Validiranje

HTML   

  



Header body Metapodatci [metatags] podatci Zaglavlje ili header sadržava podatke koji se tiču cijelog dokumenta (naslov, kodna tablica…) Tag Element Atribut – dodatno specificira element Tagovi se pišu unutar uglatih zagrada –

HTML 

 

Postoje elementi s dva taga, ali i elementi s jednim tagom ,

Header 

Za indeksiranje dokumenta na tražilicama potrebno je u headeru imati podatak o ključnim riječima i opisu stranice



Meta-podatci 

- osvježavanje svakih 5 sekundi - automatsko preusmjeravanje na drugu stranicu nakon 5 sekundi - nadnevak mora biti u RFC850 - text/css; text/xhtml…

Komentari 

Komentari se ne prikazuju, oni služe autorima koda radi snalaženja:



Isto kao i kod XML-a

Statistika

Izvor: w3c

Statistika

Izvor: w3c

Statistika

Statistika

DHTML   





Dynamic HTML Nije standard W3C-a “Košara u koje kompanije ubacuju interaktivne mrežne tehnologije” dhtml zamišljen da opiše sve što je interaktivno na stranici Mješavina html-a, css-a i javascripta

Izvori:    



http://w3.org http://w3schools.org http://validator.w3.org/ http://www.wikipedia.org Obavezno proći tutorijale na w3schoolsu HTML, XHTML, CSS



 

od sljedećeg tjedna vježbe – raspored objavljen 11 grupa softver: jEdit 4.2 (uređivač koda), Firefox 3, IE 6/7/8, Opera 9

HTML XHTML 

Xml je jezik za definiranje drugih jezika – xhtml je prva njegova aplikacija



Html 4.01 = xhtml 1.0 (njegova xml zamjena) Xhtml 1.1 – striktniji, nedostaju mu stvari iz 1.0 (on nije “transitional”), Xhtml 2.0 (8. javna razvojna faza) – potpuno novi jezik, u izradi

 



Tradicionalni i pragmatični razlozi > xhtml 1.0

HTMLXHTML   

Vrijednosti atributa u navodnicima Mala slova elemenata (*Title *TITLE) Tagovi se moraju zatvarati , …

=> parser brži, sigurniji output (manja šansa za različitim prikazom na različitim sustavima) [što gluplji parser, bolji je kȏd/jezik]

Konverzija  



Konverzija html-a u xhtml http://www.it.uc3m.es/jaf/html2xhtml / TidyUI (http://tidy.sourceforge.net) – potrebno podešavanje

TidyUI

Minimalni XHTML

Najmanji xhtml Jednostavni XHTML dokument.

xml deklaracija za xml dokument; encoding;

Najmanji xhtml Jednostavni XHTML dokument.

xml deklaracija za xml dokument; encoding;

Najmanji xhtml Jednostavni XHTML dokument.

xhtml je xml aplikacija, zato dokument počinje xml deklaracijom

Minimalni XHTML

xhtml deklaracija; xhtml inačica i kategorija; dtd



Najmanji xhtml Jednostavni XHTML dokument.

Minimalni XHTML

početak kontejnera; xml namespace



Najmanji xhtml Jednostavni XHTML dokument.

Minimalni XHTML

metapodatci sadržaja fajla; naslov; ključne riječi…



Najmanji xhtml Jednostavni XHTML dokument.

Minimalni XHTML

Najmanji xhtml Jednostavni XHTML dokument.

naš sadržaj

dtd 

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd



xhtml pamet



Svaki preglednik još ima svoj engine koji tumači dtd i na svoj način prikazuje elemente



Page source (IE )

Strict/Transitional/Frame set



html/xhtml Transitional/Strict/Frameset frameset.dtd definira samo okvire Strict za razliku od Transitional nema depreciated elemente (ovisno o inačici). xhtml 1.0 Strict ne koristi , , …, koristi stylesheetove Transitional je ‘najkompatibilniji’



Koristimo xhtml 1.0 Transitional

  



xhtml 1.0 headeri

html 4.01 headeri

paragraf

Apsolutne i relativne poveznice      

- direktorij ispod



Otvaranje u novom tabu/prozoru: Klikni za stranice TVZ-a 



SHIFT+desni klik u FF za novi prozor (inače JavaScript)

Mail-poveznice 



Promjena fajla 

Snimiti dokument kao html fajl (mogućnost promjene nastavaka)

Ikona u adresnoj traci (favicon)  

http://www.chami.com/html-kit/services/favicon/ (online i automatsko pretvaranje slika u ikone ili animirane ikone)

/>  

< /p> ili Ostatci Netscapea – razmak u završnom tagu se stavljao radi njegovih internih problema

Ubacivanje slika 

    

  



Što ako nema slike ili se ne učita dobro? Razlika i bug: IE6 prikazuje je semantičko, a ekransko obilježavanje Oprez! je obvezatni element za validaciju (alt=“”) hspace i vspace atributi – odmicanje od ruba align atribut – poravnavanje slike u odnosu na tekst Promjena veličine slike ne radi se u prebirniku, već u uređivaču slika! Slika postaje poveznica: “view frame source” zašto? brzina, štedljivost bandwidtha, modularnost izrade)

Okviri

Okviri

iframe  





“unutarnji okviri” Nije podržan u striktnom modu, samo u tranzicijskom Zamjena: korištenje serverskih jezika (PHP, ASP.Net…) Ne preporučuje se JavaScript niti element (neindeksiranje, odnosno bugovi i nedovoljna podržanost)

iframe  





“unutarnji okviri” Nije podržan u striktnom modu, samo u tranzicijskom Zamjena: korištenje serverskih jezika (PHP, ASP.Net…) Ne preporučuje se JavaScript niti element (neindeksiranje, odnosno bugovi i nedovoljna podržanost)

Okviri i sidrišta 





Klasična sidrišta: Poveznica Sidrišta u različitom okviru: Poveznica Okvir u kojem se želi nešto prikazati mora biti atribuiran u frameset okviru kao name=“neki_naziv” Mjesto na kojem se link nalazi mora biti atribuiran kao target=“neki_naziv”

Okviri i sidrišta

Semantički web 

Web 2.0 semantički web

Semantički web  

Web 2.0 semantički web Dinamičnije i interaktivnije stranice, korisnici sudjeluju u izgradnji sadržaja...

Semantički web  



Web 2.0 semantički web Dinamičnije i interaktivnije stranice, korisnici sudjeluju u izgradnji sadržaja… Semantika (značenje) kao uvjet za bolju iskorištenost Mreže kao mjesta za razmjenu podataka, informacija i znanja (RDF – resource description framework, OWL – web ontology language, XML – extensible markup

Layoutcontent 

         



Semantičko obilježavanje (npr. za osobe oštećena vida, za razne inačice prikaza [bez slika, za manje uređaje], za filtriranje ili blokiranje sadržaja, pomoć za indeksere i tražilice…): … (tražilice prema njima semantički indeksiraju dokument) - kurziv - bold - skraćenice - adresa - kratice - definicija - promjenjivica , - navodnici (IE ne pokazuje, IE 8 uveo); korisno za lokalizaciju (search engines; provjernici; izgovor) – [fr, us, uk, hr]; ldquo; ” ‘ ’)

Layoutcontent         

Ekransko obilježavanje: u cilju da se prikaže nešto velikim (3 default) = - podvučeno

Tablice  





Content element u primjeni za layout Tablični prikaz u službi pozicioniranja elemenata stranice Još uvijek relativno česta uporaba (vecernji-list.hr, vjesnik.hr, w3schools.com, demonoid.com…) CSS

Tablice     

- table heading - naslov stupca - table row - redak tablice - table definition - sadržaj polja

Tablice

Modifkacije tablice 

        

valign=“top|bottom|middle” align=“right|left|center” I svako polje može imati pozadinsku boju i/ili sliku može biti i prazan. Oprez! IE ne crta okvir polja. Trik: upisati   elementi ne moraju nužno biti vodoravno

HTML-forme (HTMLobrasci)

HTML-forme (HTMLobrasci)

caption text box radio buttons checkboxo vi padaju ći izborni k text area

tipke submit i reset

HTML-forme 

Višestruki izbor padajućeg izbornika:





Visina padajućeg izbornika: Onemogućen izbor:

Uvodni dio 







Grupa A. Ponovno?! (izlika “mi smo prvi i nama je najteže”) Grupa B pod povećanim nadzorom. Varanje ili briljantna grupa? 192 studenta od 249 (nekoliko dana prije isteka ionako tolerantnog roka registracije na kolegij) I dalje sve tekuće stvari, službene i neslužbene na Moodleu (vaša aktivnost na kolegiju, pored motiviranosti, zainteresiranosti također se ocjenjuje).

CSS

CSS 

(X)HTML služi za…?

CSS 

(X)HTML služi za…? prikaz teksta na ekranu?!

CSS 

(X)HTML služi za…? prikaz teksta na ekranu?!

KRIVO!!

CSS   

   

Cascading Style Sheet; 2.1 (CSS “level 2, rev. 1”) ‘slijedni stilski obrazac’ – kaskadni? Usmjeren na prikaz (X)HTML-a (ali ne nužno samo HTML-a, već i XML-a ili bilo kojeg drugog mark-up jezika) (X)HTML-u ostaviti ono za što je i zamišljen… Obvezatan u strict modu XHTML-a Bitno različit jezik od XHTML-a Unutarnji i vanjski smještaj CSS-a: unutar (X)HTML-a i u zasebnom fajlu *.css   

Unutar elementa– kontejner Unutar HTML taga (vidi kasniji slajd s umetnutim stilovima) Vanjski

CSS u -u

CSS u -ju

CSS u -ju 2

Vanjski CSS 

Datoteka mora imati nastavak *.css

Vanjski CSS

Uređivanje tablice cssom

Izgled css-tablice

CSS prioriteti 

1. 2.

3.

.

Što ako na različitim mjestima različito utječemo na isti element; što će biti prikazano? Autorski stilski obrazac (author style sheet) – onaj koji je definirao autor stranice Korisnički stilski obrazac (user style sheet) – onaj koji je definirao korisnik (posjetitelj) stranica Prebirnički stilski obrazac (user agent style sheet) – onaj koji je zadan (default) u prebirniku, npr. ishoduje masnim slovima, kosim… Što je obilježivač (selector) specifičniji (niži), ima veći prioritet.

CSS prioriteti 2 

Najniži prema višem prioritetu: Prebirničke zadane vrijednosti (browser default)  Vanjski CSS  CSS unutar kontejnera  Unutar (X)HTML retka (inline) 

CSS http://www.w3schools.com/css/demo_ default.htm http://www.csszengarden.com/ Kako se gleda pripadajući CSS kôd?



  1. 2. 3.



view page source; pronađi gdje se unutar poziva CSS; spoji relativnu poveznicu CSS-a s URL-om HTML stranice.

CSS-validacija: http://jigsaw.w3.org/css-validator/



CSS-specifikacija: http://www.w3.org/TR/CSS21/



CSS se može vezati i za XML

CSS (X)HTML  

 



(X)HTML-u sadržaj, izgled CSS-u Umijeće izradbe mrežnih stranica većim je dijelom rad na layoutu nego na contentu. Estetika pripada CSS-u Odjeljivanjem sadržaja i izgleda generira se manje koda (bandwidth), kod je daleko pregledniji, lakše ga je naknadno uređivati… Svaki element XHTML-a može se

Kako se uči CSS? 





Atributi u XHTML-u nisu univerzalni, u CSS-u su gotovi svi Veliki popisi atributa, dobro je imati pomoćna sredstva kraj sebe – ne mora se pamtiti napamet – važno ih je samo znati primjenjivati. Neću na predavanju proći kroz svaki atribut jer ih je puno; osim toga mnogi se nalaze u transparentnom odnosu (univerzalni su) s dobrom usustavljenošću (npr. padding, marginu, align… može imati paragraf, div, slika, naslov…)

CSS media types 





CSS predviđen za prikaz na pisaču, projektoru različitih razlučivosti, televizoru, dlanovnicima, različite prebirnike (česta primjena!)… (“dlanovnik”…)

CSS sintaksa

obilježivač {obilježje: vrijednost;}

CSS sintaksa

obilježivač {obilježje: vrijednost;} selector {property: value;}

CSS sintaksa

obilježivač {obilježje: vrijednost;} selector {property: value;}

p {font-family: “verdana”;} …

CSS sintaksa

Točka-zarez na kraju svakog retka čak i kada je deklariran samo jedan atribut! (w3schools se toga ne pridržava… )

CSS sintaksa

Točka-zarez na kraju svakog retka čak i kada je deklariran samo jedan atribut! (w3schools se toga ne pridržava… ) (previše se trudi približiti studentima)

CSS sintaksa 

Obilježja (atribucije) mogu se nizati u retke: h1 { margin-left: 10pt; font-family: helvetica; text-align: center; }

CSS sintaksa 

Vrijednosti koje imaju u sebi razmak moraju biti pisane unutar navodnika.

h1 {font-family: “times new roman”}

Obilježivači (selektori) 

Obilježavači (selektori, elementi) mogu se grupirati: h3,li,p {color:purple}

ili h3, li, p { color: purple }

Klase (XHTML elemenata) 

Klase: p.desno {text-align: right;} p.sredisnje {text-align: center;}



U (X)HTML-u bit će: Ovaj tekst ide udesno

Klase (samostalne) Klase: ili: .desno {text-align: right} 



U (X)HTML ide: Veliki naslov udesno

Identifkatori 

Klasa identifikator .desno {color: red;} {color: red;} #desno {color: red;} {color: red;} class=“desno” id=“desno”

p.desno p#desno

Identifkatori 

Klasa identifikator



Klasa se primjenjuje za brojne članove ID se primjenjuje za pojedinačne slučajeve



Identifkatori 

Klasa identifikator



Klasa se primjenjuje za brojne članove ID se primjenjuje za pojedinačne slučajeve





Zašto postoji ova razlika? (nagradno pitanje)

Identifkatori 

Klasa identifikator



Klasa se primjenjuje za brojne članove ID se primjenjuje za pojedinačne slučajeve







Zašto postoji ova razlika? (nagradno pitanje) Dio stranice je unikatan: header,

CSS sintaksa 

Dodavanje stila atributima elemenata: table[height="400"] {backgroundcolor: yellow}

CSS sintaksa 

Komentari: /* Ovo je komentar u CSS-u */



Višeredčani komentari: /* Početak, sredina i kraj višeredačnog komentara */

Poveznice 

Bojanje poveznica: a:link {color:green} a:visited {color:yellow} a:hover {color:black} a:active {color:blue}

Poveznice 

Bojanje poveznica: a:link {color:green} a:visited {color:yellow} a:hover {color:black} a:active {color:blue}

Novo!

Pripreme za vježbe 

Proučiti CSS-tutorijal s w3schoolsa posvećen 

background 



text 



(www.w3schools.com/css/css_text.asp)

font 



(www.w3schools.com/css/css_background.a sp)

(www.w3schools.com/css/css_font.asp)

Izraditi vlastitu skripte radi lakšeg i



   

I dalje vježbe mogu obuhvaćati gradiva od prošlih tjedana (linearno širenje, ne izolirani skokovi) 50% > “minimalni kriteriji” 49%?!, 75%?! Preteško nam je? Objašnjavanje CSS selektora

Grupiranje selektora 2 

Pojmovi child, descendant, sibling znaju stvoriti zabunu, ali ih treba razumijeti.



BODY ima dva djeteta BODY ima 14 nasljednika P ima najstarijeg sina EM

 

Grupiranje selektora 2 

Pojmovi child, descendant, sibling znaju stvoriti zabunu, ali ih treba razumijeti.



BODY ima dva djeteta > BODY ima 14 nasljednika razmak P ima najstarijeg sina EM +

 

Klasično grupiranje selektora h1, h2, h3 {color: blue;}  

+ i > problemi u IE Moguće je imati i višestruke nizove:

body > div > a .desno p, .lijevo p, ul {color: blue;}

Blokni i redačni elementi 



 

Nešto se prikazuje u novom retku… , , , … Nešto se prikazuje u nastavku… , , … block-element inline-element

i 

Jedini elementi u (X)XHTML-u koji nemaju značenje.

i 

služi za inline grupiranje i atribuiranje

i 



služi za blokno grupiranje i atribuiranje je block-level element; je inline-level element

i 

Njihovi atributi:



i 

se češće koristi zbog svoje naravi da: grupira kod  dijeli sastavnice web-stranice 



O primjeni divova umjesto tablica više će se govoriti sljedeći puta kada budemo obrađivali pozicioniranja (sljedeće vježbe neće još uključivati korištenje divova za smještaj elemenata)

Pokazivači (cursors)

Jedinice Česta uporaba – relativno korištenje, slično postotku (2em = 200%)

Obrubi, rubovi, popune (borders, margins, paddings)  

Model kutije (box-model) IE problem

Obrubi, rubovi, popune (borders, margins, paddings)  



Model kutije (box-model) Kad se postavi pozadinska boja, ona pokriva sadržaj i popunu Popuna je “unutarnji odmak od obruba”

Model kutije Koliko je box ukupno širok i



visok?

Model kutije Koliko je box ukupno širok i



visok?

Obrubi (borders)

Obrubi (borders)

Modifkacija obruba     

border: border-bottom: border-top: border-left: border-right:

width: -style: -color:

Modifkacija obruba     

border: border-bottom: border-top: border-left: border-right:

width: -style: -color:

thin

solid

medium

double

thick

dotted

lenght (izbor)

…

riječima, heksadecimal no, RGB

Modifkacija obruba/ skraćivanje pisanja/ model sata 

Želimo li samo neke obrube bojati, ne sve, umjesto deklariranja u više redaka, kod se može bitno skratiti…

border-color-top: red; border-color-right: green; border-color-bottom: blue; border-color-bottom: yellow;

Modifkacija obruba/ skraćivanje pisanja/ model sata

{border-color: red;} sva četiri obruba crvena {border-color: red green;} gore i dolje crno, desno i lijevo zeleno {border-color: red green blue;} gore crveno, desno i lijevo zeleno, dolje plavo {border-color: red green blue yellow;} gore crveno, desno zeleno, dolje plavo, lijevo žuto

Modifkacija obruba/ skraćivanje pisanja/ model sata

Modifkacija obruba/ skraćivanje pisanja/ model sata

{border-width: 5px;} sva četiri obruba su 5px {border-width: 5px 10px;} gornji i donji su 5px, desni i lijevi su 10px {border-width: 5px 10px 1px;} gornji je 5px, desni i lijevi su 10px, donji je 1px {border-width: 5px 10px 1px 0px;} gornji je 5px, desni je 10px, donji je

Rubovi (margins)     



margin margin-top margin-right margin-bottom margin-left Vrijednost auto znači da prebirnik sam podešava rubove prema svojim zadanim vrijednostima

Rubovi (margins)

Unutarnja udaljenost (padding)     

padding padding-top padding-right padding-bottom padding-left

Unutarnja udaljenost (padding)

Nagradno pitanje 

Ako smo zadali marginu desno fiksno, zašto se prikazuje tako široko? (široko da ide skroz do kraja desnog ruba ekrana…)

Nagradno pitanje 

Ako smo zadali marginu desno fiksno, zašto se prikazuje tako široko? (široko da ide skroz do kraja desnog ruba ekrana…)



Zato što je block element Što ako ga promijenimo u redačni element? (i kako?)



Sljedeće vježbe



display selektor neće biti na vježbama sljedeći tjedan selektori obruba:



http://w3schools.com/css/css_border. asp selektori rubova:



http://w3schools.com/css/css_margin .asp

Uređivanje lista 

list-style-type Uređivanje kako lista izgleda



list-style-image Postavljanje slike kao graf. elementa koji buletira

Liste none, disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha lower-latin, upper-latin… 

Liste

Tablice 

 

Čim se u HTML-u atributom border postavi debljina vanjskog okvira tablice istovremeno se pojavi i okvir td-ova. u CSS-u treba posebno deklarirati i border-style (puna linija, točkasta, crtkasta…); border-width (njegova širina); border-spacing (razmak od i među -ovima)

Tablice 

Border-spacing obilježivač može imati jednu ili dvije vrijednosti:

border-spacing: 5px; gore, dolje, lijevo i desno odmak 5px; border-spacing: 20px 0px; gore i dolje 20px, lijevo i desno 0px;

Empty cell empty-cell: show; empty-cell: hidden; 



Kada je polje prazno, nema obrub Umjesto   koristimo “show” vrijednost.

Tablice

Tablice 



caption-side: top (default) | left | right | bottom table-layout: automatic (default) | fixed

širina polja se prilagođava

širina polja je fiksna

Skraćivanje zapisa h2 { font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 80%; line-height: 120%; font-family: arial, helvetica, sans-serif; } h2 { font: italic small-caps bold 80%/120% arial, helvetica, sans-serif; }

Dimenzioniranje height – visina width – širina line-height – razmak među redcima

Dimenzioniranje p {line-height: 90%} p {line-height: 200%}

Dimenzioniranje 

Originalna slika je 311x188px. S ovim kodom slika će se prikazati izduženom jer su HTML koordinate nižeg prioriteta.

Vježbe 7 

Koncentracija na CSS obradu tablice

Dimenzioniranje display: block – pretvaranje redačnog elementa u blokni (npr. linkovi da budu u više redaka) display: inline – pretvaranje bloknog elementa u redačni (npr. dva -a ili lista da budu u istom retku)

Blokni elementi: div; h1-6; p; ul/ol/dl; li/dt/dd; table; form…

Redačni elementi:  span;  a;  img;  acronym…

Klasifciranje 

Nekada se elementi trebaju promijeniti iz bloknih u redne, i obrnuto, npr.

Klasifciranje 

Nekada se elementi trebaju promijeniti iz bloknih u redne, i obrnuto, npr.

Osobito se često koristi za izradbu vodoravnih menija! Pritom se često koristi i list-styletype:none;

Klasifciranje 

Važan aspekt pretvaranja redačnog elementa u blokni: riječ koja je prije u redačnom obliku bila poveznica sada postaje “pravokutnik” koji cijeli postaje površina poveznice

Sve što preostaje jest urediti dizajn po svojoj volji da bismo dobili efektne vodoravne menije

Klasifciranje 



float – smještanje elementa u odnosu na nadređeni element, npr. tekst u odnosu na sliku, ili obrnuto… Ne miješati s text-align (smještaj teksta u odnosu na neki kontejner u kojem se nalazi: body, td…)

Klasifciranje

Klasifciranje

Klasifciranje 

Sliku smo odmaknuli od teksta i od gornjeg ruba…

Klasifciranje 

Željeli smo i ‘stisnuti’ odlomke, tj. smanjiti prostor među njima…

Klasifciranje

Klasifciranje 

Malo ukrašavanja…

Klasifciranje 

Umjesto načina ukrašavanja slike u odnosu na tekst u prethodnim dvama primjerima, bolje je (profesionalnije) koristiti opći obilježivač (univerzalni selektor).

Klasifciranje 

Važan aspekt floatanja: osim što govori kako se koji element treba postaviti u odnosu na prethodni, govori i kako se postojeći element mora postaviti u odnosu na sljedeći.

Float ili plutanje 

Plutanje je, iako se to možda ne čini na prvi pogled, napredan element i potrebno ga je dobro proučiti i znati s njime raditi, osobito u svijetu -ova i CSS-dizajna.

Float ili plutanje

Pozicioniranje 

Smještanje elemenata na ekranu: static – zadana vrijednost  relative – smještanje u odnosu na neki element  absolute – smještanje u odnosu na cijelu stranicu  fixed – uvijek ostaje na mjestu bez obzira na klizanje stranice 

Apsolutno pozicioniranje position: absolute; top/right/left/bottom:

Relativno pozicioniranje position: relative; top/right/left/bottom:

Fiksirano pozicioniranje 

Podvrsta apsolutnog pozicioniranja

Pozicioniranje 

 

 

Kada se elementi preklapaju, zindeksom određujemo što ide u pozadinu, odnosno što će biti vidljivo z-index: Vrijednosti su izražene brojčano – što je veći broj, indeks je veći i prikaz ima prioritet Zadana vrijednost jest 0 Zadano (defaultno) stanje jest da se elementi ne preklapaju

Pozicioniranje

Pozicioniranje vertical-align: text-top/text-bottom/top/bottom/middle/ sub/super

Pozicioniranje

Pozicioniranja 





Oprez s apsolutnim pozicioniranjem: sjetite se da ima korisnika koji rade s manjih razlučivostima, tako da ne smijete elemente apsolutno pozicionirati u donji desni dio kut vašeg širokokutnog ekrana. Osim toga, resizeanje ekrana može poremetiti dizajn. Bolji izbor: relativno pozicioniranje, odnosno plutanje.

Pozicioniranja 



Budući da s plutanjem, relativnim pozicioniranjem postavljamo odnose među elementima, kod se usložnjuje, teže je pratiti tijek nizanja i potrebna je veća koncentracija na vježbama. Komentari su osobito korisni.

Pozicioniranja 



Relativno pozicioniranje često se koristi u svijetu CSS-dizajna. Potrebno ga je dobro proučiti i shvatiti.

Učenje  



Izvježbajte selektor display Izvježbajte raznovrsna plutanja (različiti elementi s različitim elementima i što se događa: s -om, s -om, i s -om… Shvatite kako se radi osnovni dizajn s -ovima i pozicioniranje elemenata bez tablice (v. sljedeći slajd)

umjesto tablice

http://www.w3schools.com/css/tryit.asp?

Zaobljeni uglovi  

 



Ugao kut Prve kritike CSS-a: previše šiljastih okvira Različite tehnike zaobljivanja uglova Trebaju nam slike jer ne postoje CSS-obilježivači koji to rade za nas (CSS 3.0) Windows Paint ili neki drugi program za crtanje

Zaobljeni uglovi 

Napraviti pravokutnik sa zaobljenim uglovima

Zaobljeni uglovi 





Pozorno napraviti crop brišući sve bijele viškove sa svih strana Kada se rade zaobljivanja u CSS-u često se ove slike spremaju u GIF-format ZAŠTO?!

Zaobljeni uglovi 



 





Pozorno napraviti crop brišući sve bijele viškove sa svih strana Kada se rade zaobljivanja u CSS-u često se ove slike spremaju u GIF-format ZAŠTO?! Prvotno zbog prozirnosti (kao i PSD, PNG, TIFF, dok JPG ne podržava) U Paintu nije moguće snimiti prozirni GIF (treba nam jači program za grafičku obradu) U tim jačim programima moguće je raznim tehnikama omogućiti i da JPG ima prozirnu pozadinu

Zaobljeni uglovi 



 





Pozorno napraviti crop brišući sve bijele viškove sa svih strana Kada se rade zaobljivanja u CSS-u često se ove slike spremaju u GIF-format ZAŠTO?! Prvotno zbog prozirnosti (kao i PSD, PNG, TIFF, dok JPG ne podržava) U Paintu nije moguće snimiti prozirni GIF (treba nam jači program za grafičku obradu) U tim jačim programima moguće je raznim tehnikama omogućiti i da JPG ima prozirnu pozadinu

Zaobljeni uglovi 



Pozorno napraviti crop brišući sve bijele viškove sa svih strana U našem slučaju možemo umjesto bijele staviti drugu boju predviđenu za pozadinu stranice

Zaobljeni uglovi 

Zarotirati sliku za 180˚

Zaobljeni uglovi 





Pripaziti na izabranu boju slika i znati njezin heksadecimalni kod RGB to HEX i drugi pretvarači (ako se radi s Paintom koji ne daje HEX boju): http://www.javascripter.net/ faq/rgbtohex.htm U našem slučaju izabrali smo boju #ff6600 (koja se može zapisati i kao #f60)

Zaobljeni uglovi



-u se daje širina slike (naša je slika 207px široka) -u se daje pozadinska slika:



… ali stvar i dalje ne funkcionira!



Zaobljeni uglovi



-u se daje širina slike (naša je slika 207px široka) -u se daje pozadinska slika:



… ali stvar i dalje ne funkcionira!



Jedan ne može imati dvije pozadinske slike. Potreban nam je trik

Zaobljeni uglovi 

Kako u -u imamo naslov i tekst, a je na vrhu, onda ćemo njemu dati pozadinsku sliku ‘top.gif’ i smjestiti ju left top, a ostatku ‘bottom.gif’ left bottom

Zaobljeni uglovi 

I još malo završne dizajnerske obrade:

Zaobljeni uglovi

Zaobljeni uglovi 

Glavna prednost ovog pristupa s dvije slike (top.gif i bottom.gif) jest što sada ne ovisimo o količini teksta koji se unosi u dotični kao i od povećanja veličine fonta od strane korisnika: on će se produživati po visini bez straha od razbijanja dizajna.

Zaobljeni uglovi

Zaobljeni uglovi 

Nedostatak ove tehnike: (pitanje)

Zaobljeni uglovi 





Nedostatak ove tehnike: pravokutnik se ne širi vodoravno, samo okomito (jer ima fiksnu širinu) U naprednom CSS-u moramo misliti na to kako će naša stranica izgledati kada ju povećavamo i smanjujemo (u našem Uvodu u (X)HML i CSS) to nam nije presudno). ‘Tehnika kliznih vrata’ (sliding doors technique) sa četiri slike

Zaobljeni uglovi 

Poznavanje tehnike kliznih vrata neće biti traženo na vježbama i ispitu (ne spada u osnovno znanje CSS-a)

Zaobljeni uglovi 

Tehnika s dvije slike (za menije):

Zaobljeni uglovi 

Tehnika sa četiri slike (za ove):

Zaobljeni uglovi

Sjene 





Ili u programima za obradu fotografija ili preko CSS-a Potreban je trik za ovo jer ne postoji izravan obilježivač koji to čini Prednost je korištenje sjenčanja u CSS-u jer kasnije možete jednim zahvatom izmijeniti izgled brojnim slikama

Sjene 

Potrebno je imati sliku sjene koja se stavlja u pozadinu -a, a onda se sjena otkriva odmicanjem slike zadavanjem negativne margine.

Sjene 

Potrebno je imati sliku sjene koja se stavlja u pozadinu -a, a onda se sjena otkriva odmicanjem slike zadavanjem negativne margine.

Sjene

uvećano

Sjene 





Moramo obratiti pozornost na širinu sjene (5px), te da istu vrijednost unesemo da se slika odmakne u negativnoj vrijednosti Ako sjena pada dolje desno, onda negativno odmičemo gornju i lijevu marginu. Veličina slike sjene NE mora podudarati veličini same slike koju treba osjenčati!

Sjene 





Moramo obratiti pozornost na širinu sjene (5px), te da istu vrijednost unesemo da se slika odmakne u negativnoj vrijednosti Ako sjena pada dolje desno, onda negativno odmičemo gornju i lijevu marginu. Veličina slike sjene NE mora podudarati veličini same slike koju treba osjenčati jer ćemo koristiti

Sjene

Dotjerivanje

Napomene o plutanju 



Elementi koji slijede u HTML-u (npr. nova slika i tekst pored nje) poravnavaju se lijevo zbog naslijeđenog svojstva plutanja (float: left) prethodnog -a. Ako tom drugom elementu damo neki margin-top želeći novi odmaknuti od gornjeg ruba, pomaknut će se ne samo taj novi , nego i njegov prethodujući.

Napomene o plutanju

Napomene o plutanju 

Želimo li ‘poništiti’ naslijeđeno svojstvo plutanja prethodnog a, moramo koristiti obilježivač clear: left.

Napomene o plutanju 

Želimo li pak da se samo novi odmakne od gornjeg ruba, novom -u moramo isto zadati float: left da bude “na istoj ravni” s prethodnim -om.

Uređivanje menija 

Kako se radi stilizirani oblačić nad poveznicom?

Uređivanje menija

Uređivanje menija Pozor! Ako se ne postavi deklaracija, tekst će zadano imati podvučene riječi

Stilizacija poveznica

Selektor atributa ne radi u IE! 

Slike kao poveznice 

Ako koristimo različite slike kao poveznice (npr. za pozadinu poveznice,

a za pozadinu hover poveznice), griješimo na dvije razine: 1. Nepotrebno opterećujemo poslužilac i radimo promet hoverom 2. U slučaju sporije veze ili

Pametnija rollovermetoda 

  



Želimo da se obje slike učitaju prvim posjetom stranice Radimo jednu sliku: Bitna je njezina dužina, npr. 400px Postavimo pozadinu neposjećene poveznice da je background-position: left top Postavimo pozadinu posjećene poveznice da je background-position: right top

Raspoređivanje 

Želimo li napraviti jedan centrirani stupac na stranici, koristimo obilježivač: margin: 0 auto;

Raspoređivanje 

 



Još jedan bug u IE: margin 0 auto; ne radi  Kako to riješiti? Još jednim bugom u IE koji krivo interpretira text-align: center; (on treba služiti samo za tekst, ne za -ove) Postavimo body {text-align: center;}, a -u dodamo textalign: left;

Alternativna metoda korištenja neg. margina 



U prethodnom slučaju koristili smo ‘nečist’ CSS i ‘nastavili koristiti’ CSS obilježivače na krivi način Kvalitetniji način centriranja jest korištenjem negativnih margina: potrebno je stupac relativno pozicionirati lijevo na 50% i onda se “vratiti nazad” negativnom marginom vrijednosti pola širine stupca

Plutajuće raspoređivanje stupaca

Plutajuće raspoređivanje stupaca Glavni naslov Poveznice

Sadržaj

Dodatni

Zaglavlje

Prvo moramo napraviti raspored po ovima i što će plutati oko čega

Plutajuće raspoređivanje stupaca Glavni naslov Poveznice

Sadržaj

Zaglavlje

1. div: omotač – širina 720px

Dodatni

Plutajuće raspoređivanje stupaca Glavni naslov Poveznice

Sadržaj

Dodatni

Zaglavlje

2. div: glavni naslov; širina nije navedena, samo padding čime se dobiva visina

Plutajuće raspoređivanje stupaca Glavni naslov Poveznice

Sadržaj

Dodatni

Zaglavlje

3. div: glavni sadržaj i dodatni (sporedni) sadržaj – on pluta desno u odnosu na “Poveznice”, širina 520px

Plutajuće raspoređivanje stupaca Glavni naslov Poveznice

Sadržaj

Dodatni

Zaglavlje

4. div: poveznice – on pluta lijevo u odnosu na koji sadrži “Sadržaj” i “Dodatni”; širina 200px

Plutajuće raspoređivanje stupaca Glavni naslov Poveznice

Sadržaj

Dodatni

Zaglavlje

5. div: glavni sadržaj – on pluta lijevo u odnosu na “Dodatni”; širina 340px

Plutajuće raspoređivanje stupaca Glavni naslov Poveznice

Sadržaj

Dodatni

Zaglavlje

6. div: dodatni sadržaj – on pluta desno u odnosu na “Sadržaj”; širina 180px

Plutajuće raspoređivanje stupaca Glavni naslov Poveznice

Sadržaj

Dodatni

Zaglavlje

7. div: zaglavlje – on ima poništeno plutanje: clear: both; širina nije izražena, naveden samo padding čime se dobiva visina i širina

Uređivanje HTML-formi

Uređivanje HTML-formi  

  

, i Semantički elementi koji olakšavaju rad s CSS-om (ne trebamo izmišljati -ove, već koristimo semantičke kontejnere – lakše snalaženje, bolji i sigurniji output) daje pravokutnik formi daje naslov formi je naziv forme (ima atribut for s istim sadržajem kao i id od inputa)

Identični Ime: nazivi!

Uređivanje HTML-formi Korištenjem pseudoelementa za fokus daje zanimljivi dizajn: input:focus, textarea:focus {background: #ffc;} 

Uređivanje HTML-formi

Uređivanje tablica 





Isto kao što nam , i ini olakšavaju rad s CSS-om (ne moramo divitizirati kod), tako je preporučljivo u CSS-obradi tablica koristiti se i kontejnerima u kojima su -ovi, odnosno -ovi Takvi semantički kontejneri olakšavaju rad s CSS-om i jako se preporučuju od strane W3C-a Npr. puno je čitljivije napraviti: (hover se odnosi samo na dio tbody tr:hover {background-color: #3d80df; tablice color: s podatcima) #fff;} Ovaj pseudoelement ne nego: funkcionira u IE  .sadrzaj tr:hover {…}

(generička imena koja drugoj osobi ne moraju biti posve jasna ili uopće jasna)  Osim toga nema potrebe za -ovima u tablici jer je

Uređivanje tablica

Isticanje autorstva u CSS-u 

Često se zagléda u tuđi kod. Kako si pomoći u isticanju autorstva?

pravi_css.cs s moj_stil.css

Zadnje predavanje 





Obradili smo sve osnovne pojmove u CSS-u (287 slajdova) Dosadašnja predavanja najavljivala su što će se pojaviti na vježbama u tjednu koji slijedi 10. i 11. vježbe bit će vježbe za ispit, tj. obuhvaćat će dosta različitih tehnologija koje smo do sada radili

Savjet za dalje 

Napredna gradiva (X)HTML-a i CSS-a:  

Tehnike, trikovi Bolje upoznavanje s browserima:   





njihovi nedostatci i ograničenja u prihvaćanju standarda te kako ih izbjeći kolačići (cookies) Što su layout engines u njima i kako se uskladiti s njima?

Budućnost (X)HTML-a i CSS-a (HTML 5.0, XHTML 2.0, CSS3

Nakon ovog kolegija, preporuke za daljnje učenje:    

Kako se otvara domena, gdje i za koliko, (webhosting) Rad u grafičkom sučelju JavaScript Flash/Silverlight

Savjet za dalje 







Kako znate da ste postali profesionalac? Kad naiđete na nešto što vas oduševi, raščlanjujte tuđi CSS i tragajte za tehnikom koja stoji iza tog efekta Pripremite se za CSS3 na vrijeme da budete ispred prije većine kao i konkurentni dizajnom Držite se standarda