Embed Size (px)
Citation preview
1. laboratorijska vježbao HTMLo CSS
Branko Mihaljević
Otvoreno računarstvo - 1. laboratorijska vježba
Ciljevi vježbeo Upoznavanje s
o pisanjem i strukturiranjem dokumenata HTMLo pisanjem obrazaca dokumenata HTMLo oblikovanjem teksta i drugih elemenata pomoću CSS-a
o Zajedničko za sve vježbeo uče se osnovne prakseo važno je znati pronaći informaciju koja nam treba
o pretraživanje Weba i snalaženje!o primjeri:
o Kako otvoriti poveznicu u novom prozoru? o Kako poravnati tekst uz sliku s desna?
Otvoreno računarstvo - 1. laboratorijska vježba
Domaća zadaćao Proučiti osnovne elemente jezika HTML i CSS
o preporučeni izvor w3schools (http://www.w3schools.com)o HTML Tutorial
o sva poglavlja pod "HTML Basic"o odabrana poglavlja pod "HTML Advanced" – HTML Styles, HTML Entities,
HTML Head, HTML Meta, HTML URLs, HTML Attributeso http://www.w3schools.com/html/
o CSS Tutorialo sva poglavlja pod "CSS Basic"o http://www.w3schools.com/css/
o HTML 4.01 specifikacijao poglavlja o obrascima "Forms" – 17.1 - 17.7o http://www.w3.org/TR/html401/interact/forms.html
o oznake nužno potrebne za vježbu dane su u zadatku
Otvoreno računarstvo - 1. laboratorijska vježba
Priprema za vježbuo Proučiti jezik HTML s naglaskom na sljedeće elemente:
o struktura dokumenata HTML (zaglavlje, tijelo)o definiranje ključnih riječi (element <meta>)o definiranje kodne stranice korištene u dokumentu o definiranje tipa dokumenta za provjeru pravila (DOCTYPE)o povezivanje s vanjskom CSS datotekom (element <link>)o definiranje odjeljaka (element <div>, atributi id, class)o naslove i podnaslove (elementi <h1> do <h6>)o odvajanja teksta u dokumentu (elementi <p>, <br>)o istaknutost teksta (elementi <b>, <i>) o umetanje slika u dokument (element <img>)o poveznice između stranica i na elektroničku poštu (element <a>)o tablice (elementi <table>, <tr>, <th>, <td>, atributi colspan i rowspan)o nepobrojane i pobrojane liste (elementi <ul>, <ol>, <li>)o definiranje obrazaca (element <form>) i elemente obrasca (elementi
<input>)
Otvoreno računarstvo - 1. laboratorijska vježba
Priprema za vježbuo Proučiti jezik CSS s naglaskom na sljedeće elemente:
o sintaksa CSS-ao razlika selektora obzirom na elemente, klase i
identifikatoreo razmještaj elemenata na stranicio definiranje svojstava elemenata (boje, pozadina, vrsta i
veličina slova, rubovi, razmak...) za:o odjeljke tekstao listeo tabliceo poveznice (links)
Otvoreno računarstvo - 1. laboratorijska vježba
Zadatak za vježbuo Izraditi sjedište Weba s dvije stranice
o tema ovisi o inačici koju raditeo Kôdna stranica UTF-8o Stranice moraju biti potpuno funkcionalne u više
preglednika Weba, ali ne nužno identičnog izgledao ne odnosi se na funkcioniranje obrasca
o Poželjno koristiti odgovarajući uređivač tekstao podrška za UTF-8o poželjno bojanje sintakse
o Koristiti tip dokumenta DOCTYPE HTML 4.01 Stricto Raspored korištenjem vanjske datoteke CSS
Otvoreno računarstvo - 1. laboratorijska vježba
Stranice Webao Početna stranica - index.html
o oblikovani tekst i listeo slikao tablicao poveznice na drugu stranicu
o Stranica za pretraživanje - obrazac.htmlo obrazac za pretraživanje/filtriranje podataka
o trenutno "ne radi ništa pametno"o sadržaj obrasca dan u zadatku
o Stranice moraju biti dizajnom i "stilski uređene"o boje, izgled, raspored
o Stranice je potrebno provjeriti validatorom za HTMLo http://validator.w3.org
Otvoreno računarstvo - 1. laboratorijska vježba
Obavezna područja stranicao Zaglavlje
o slika i naslovo Navigacija - lista poveznica
o na početnu stranicuo na pretraživanjeo na stranicu RASIP-ao na stranicu FER-a
o u novom prozoruo na e-mail autora
o Tijelo straniceo sadržaj
o Podnožje (footer)o podaci o autoru
Otvoreno računarstvo - 1. laboratorijska vježba
Promjena svojstava i izgleda elemenatao Potrebno je urediti tekst, slike, tablice, navigaciju i
strukturu straniceo Datoteka CSS sa stilovima - dizajn.css
o veličine, vrste i boje slova tekstao položaj elemenata na stranicio boje pozadine elemenatao okvir elemenata (border)o margina i ispuna (margin, padding)o oblikovanje liste za navigacijuo korištenje grafičke promjene pri prelasku mišem
o selektor a:hover npr. za uljepšavanje navigacije
Otvoreno računarstvo - 1. laboratorijska vježba
Primjeri - osnovnoo Osnovni primjeri
o naslovi, odlomci, poveznice, slikeo http://w3schools.com/html/html_primary.asp
o Zaglavlje dokumenta HTMLo <!DOCTYPE>, <head>, <title>, <meta>...
o http://w3schools.com/html/html_head.aspo Oblikovanje teksta kroz HTML
o <b>, <i>, <u> o http://www.w3schools.com/html/html_formatting.asp
o Listeo <ul>, <ol>, <li>
o http://w3schools.com/html/html_lists.asp
Otvoreno računarstvo - 1. laboratorijska vježba
Primjeri - poveznice, slike i tabliceo Poveznice
o <a href="..." > Naziv poveznice </a>o http://w3schools.com/html/html_links.asp
o Slikeo <img src="...">
o http://w3schools.com/html/html_images.aspo Tablice
o <table>, <tr>, <td>, <th>o http://w3schools.com/html/html_tables.asp
Otvoreno računarstvo - 1. laboratorijska vježba
Primjeri - obrascio Početak obrasca – oznaka <form>o Polje za unos teksta – <input type="text">o Kružić za odabir – <input type="radio">o Kvadratić za odabir – <input type="checkbox">o Padajući izbornik – <select> ... <option> ...
o višestruki odabir – multiple="multiple"o Gumb – <input type="button">
o posebni gumbitype="submit"type="reset"
o Više o svemu tome "HTML Forms"o http://w3schools.com/html/html_forms.asp
Otvoreno računarstvo - 1. laboratorijska vježba
Zadatak – obrazac o Tijelo stranice sadrži naslov i obrazaco Obrazac izraditi u obliku tablice
o u jednoj koloni nalazi opis polja, a u drugoj upisno polje ili elementi za unos
o svojstva tablice, redova i ćelija definirati pomoću CSS-ao Polja obrasca ovise o inačici zadatka koju radite i
samim podacimao Primjer: podatak IME se prikazuje kao POLJE ZA UNOS, a
podatak SPOL se prikazuje kao dva KVADRATIĆA ZA IZBOR (checkbox)
Otvoreno računarstvo - 1. laboratorijska vježba
Obrazac – bitni stupcio INAČICA / REDNI BROJ - slovo inačice ili redni broj podatka u strukturio VRIJEDNOSTI - sadrži li element informaciju
o DA – sadržava standardno upisanu tekstualnu vrijednosto SKUP – sadržava podatak isključivo iz skupa dozvoljenih vrijednostio NEMA – ne sadržava podatak
o PRIMJER SLOBODNOG UPISA VRIJEDNOSTI ili SKUP DOZVOLJENIH VRIJEDNOSTI - primjer tekstualnog podatka ili skupa dozvoljenih vrijednosti podatka
o ako u stupcu VRIJEDNOSTI piše DA – npr. Ivoo ako u stupcu VRIJEDNOSTI piše SKUP – skup dozvoljenih vrijednosti
o ELEMENT U OBRASCU - kako će se podatak pretraživati, odnosno pomoću koje elementa za pretraživanje
o POLJE ZA UNOS –polje za unos tekstualnog podatkao KVADRATIĆ ZA IZBOR (checkbox) – polje za odabir jedne ili više vrijednosti iz
skupa dozvoljenih vrijednosti ili druga oznakao KRUŽIĆ ZA ODABIR (radio) – polje za odabir samo jedne vrijednosti iz skupa
dozvoljenih vrijednostio IZBORNIK ZA VIŠESTRUKI ODABIR (multiple select) – polje za odabir samo
jedne ili više vrijednosti iz skupa dozvoljenih vrijednosti
Otvoreno računarstvo - 1. laboratorijska vježba
Zahtjevi nad obrascemo Obrazac mora sadržavati:
o barem 5 polja za unos teksta parametara za pretraživanje
o barem 2 grupe kvadratića za odabir (checkbox) s ponuđenim vrijednostima
o barem 1 grupu kružića za odabir (radio) s ponuđenim vrijednostima
o barem 1 izbornik za višestruki odabir (multiple select)o gumb za slanje podataka na poslužitelj (submit button) o gumb za poništavanje podataka u obrascu (reset
button)
Otvoreno računarstvo - 1. laboratorijska vježba
CSSo Pravila za oblikovanje stranica i elemenata
o selektor {svojstvo: vrijednost; svojstvo: vrijednost; ...}
o http://w3schools.com/css/css_syntax.aspo http://w3schools.com/html/html_css.asp
o Cascade - uzimaju se u obzir kasnije navedena pravila
o Više načina povezivanja s dokumentom HTMLo najvažniji - vanjska CSS datoteka
<link rel="stylesheet" type="text/css" href="style.css">
Otvoreno računarstvo - 1. laboratorijska vježba
Primjeri - teksto Boja i poravnanje teksta
o color: blue; text-align: center;o Vrsta slova
o font-family: Tahoma, Verdana, sans-serif;o Veličina slova
o font-size: 150% ili font-size: 12px ili font-size: 1em;o Oblikovanje slova
o font-style: italic; font-weight: bold; text-decoration: underline;
o http://w3schools.com/css/css_text.aspo http://w3schools.com/css/css_font.asp
Otvoreno računarstvo - 1. laboratorijska vježba
Primjeri - box model
o http://www.w3.org/TR/CSS2/box.html
Otvoreno računarstvo - 1. laboratorijska vježba
Primjeri - rubovi, okviri, punjenjao Rub - margin, npr. 2cm 4cm 3cm 4cm;
o top, right, bottom, lefto Okvir - border
o border-styleo border-coloro border-widtho top, right, bottom, left
o Punjenje – paddingo top, right, bottom, left
o http://w3schools.com/css/css_margin.aspo http://w3schools.com/css/css_border.aspo http://w3schools.com/css/css_padding.asp
Otvoreno računarstvo - 1. laboratorijska vježba
Primjeri - izrada strukture straniceo Odjeljak u dokumentu: <div>
o http://w3schools.com/tags/tag_div.asp
o Izrada strukture stranice korištenjem oznake <div>o http://w3schools.com/css/tryit.asp?filename=trycss_float6
Otvoreno računarstvo - 1. laboratorijska vježba
Primjeri - prikaz elemenatao Prikaz - display: inline, block, none
o http://w3schools.com/css/css_display_visibility.asp o Plutanje – float i clear:
o http://w3schools.com/css/css_float.asp o Pozicioniranje - position: relative, absolute, fixed;
o http://w3schools.com/css/css_positioning.asp
o Primjer – stvaranje horizontalnog izbornikao http://w3schools.com/css/tryit.asp?filename=trycss_float5
Otvoreno računarstvo - 1. laboratorijska vježba
Predaja vježbeo Vježba se predaje prikazivanjem obje stranice
Weba u pregledniku na lokalnom računaluo Stranice Weba moraju biti zapisane u HTML
dokumentima:o index.htmlo obrazac.html
o CSS datoteka dizajna mora biti zapisana u datotecio dizajn.css
o Slike i ostale datoteke mogu biti proizvoljnih naziva i u proizvoljnim mapama
o Datoteka u obliku ZIP koja se predaje na poslužitelj mora u glavnoj mapi sadržavati sve tri navedene datoteke
Otvoreno računarstvo - 1. laboratorijska vježba
Dodatna pomoćo HTML 4.01 / XHTML 1.0 Reference
o http://w3schools.com/tags/default.aspo CSS2 Reference:
o http://w3schools.com/css/css_reference.aspo The W3C Markup Validation Service
o http://validator.w3.org/ o The W3C CSS Validation Service
o http://jigsaw.w3.org/css-validator/ o stock.xchng (ree stock photography site)
o http://www.sxc.hu/
Otvoreno računarstvo - 1. laboratorijska vježba
Pitanja?
o Probleme i pitanja možete postaviti naknadno, u forumu na stranicama predmeta
