Uvod Osnove Uređivanje teksta Liste Slike Linkovi Tablice Forme HTML i CSS
Uvod • • • • •
•
HTML (Hypertext Markup Language) – programski jezik za definiciju web stranica, osnova svih korištenih web stranica, koriste ga svi web preglednici Razvijen od strane Tim Berners-Lee-a (tad mrežni specijalist na CERN institutu) Baziran na SGML (Standard Generalized Markup Language) jeziku koji se koristio u izdavaštvu S vremenom njegov razvoj preuzeo W3C (WWW Consortium) čime je postao važeći standard na Internet-u HTTP – (Hyper Text Transfer Protocol) mrežni protokol također razvijen od strane Tim Berners Lee-a omogućava dohvat HTML stranica preko mreže i komunikaciju između web poslužitelja i njegovih klijenata Zajedno ovaj protokol i programski jezik čine okosnicu Interneta kakvog danas poznajemo
Uvod - Verzije HTML-a • •
•
•
•
HTML 1.0 – osnovni elementi za opis teksta unutar web stranice, sve strance su sive u Times New Roman fontu HTML 2.0 (1995) – stranice dobivaju boje, dodane su tablice i forme (sa samo par elemenata), formira se W3C na čelu sa Tim Berners Lee-om koji preuzima brigu o postavljanju standarda – jak utjecaj Netscape – do tad jedinog preglednika HTML 3.2 (1997) – niz dodatnih opcija za vizualnu prezentaciju stranice, podrška i za prvu verziju CSS-a (Cascading Style Sheets) – W3C postavlja standarde pod utjecajem Netscape-a i Microsoft-a HTML 4.0 (1997 ) i HTML 4.01(1999) – promjena smjera razvoja jezika, ideja razdvajanja prezentacije od sadržaja, smanjuje se broj elemenata, suvišni se proglašavaju prevladanima, zastarjelima (deprecated) XHTML 1.0 (2000) – ideja približavanja HTML i XML standarda, zadržava HTML tagove ali donosi i stroža sintaksna pravila XML-a
Uvod - Verzije HTML-a •
HTML 5 – Nova verzija HTML-a koja je još u razvojnom procesu, nove verzije preglednika već djelomično podržavaju elemente novog standarda. Bolja podrška za multimediju i vektorsku grafiku, donekle promijenjena organizacija sadržaja i podrška za integraciju sa bazama podataka i razvoj web aplikacija… Zajedno ga razvijaju W3C i neovisna skupina stručnjaka (WHTWG). Odstupa od pravila XHTML 1.x. U razvoju je i nova verzija XHTML 5 koja će biti kompatibilna.
Osnove • • • • • •
HTML definira sadržaj web stranice tako da označava sadržaj. Opisano je značenje svakog dijela sadržaja (naslov, odlomak, itd.) Označavanje se izvršava pomoću elemenata ili oznaka (tag-ova). Svaka oznaka (tag) pruža informaciju koju će web preglednik koristiti za prezentaciju i prikaz HTML sadržaj elementa. HTML dokument obavezno mora imati nastavak htm (stari standard) ili html. Ova dva nastavka daju do znanja web serveru i web pregledniku kako je dokument HTML tipa i kako ga treba tretirati kao takvog. HTML dokument je obični tekst i može se izraditi pomoću jednostavnog uređivača teksta poput Notepad-a ali mogu se koristiti i napredni uređivači koji prepoznaju sintaksu HTMLa. Oni mogu uređivati HTML kao tekst ili kao prikaz web stranice - WYSIWYG (What You See Is What You Get). Primjeri uređivača su Adobe DreamWeaver, Microsoft Expression, itd.
Osnove - Oznake • • • •
• •
Sav sadržaj web stranice označen je oznakama (tag) , one se ne prikazuju na našoj web stranici već služe pregledniku kao informacija što da radi s tim dijelom teksta Oznake su sadržane unutar <> znakova (npr.
) Kraj oznake se označava sa (npr.
) Sve između je sadržaj sadržaj oznake (npr.
Ovo je tekst koji će se vidjeti
) Ukoliko oznaka nema sadržaja ona se može otvoriti i zatvoriti unutar jednih zagrada (npr. ) Oznake se naravno mogu ugnježđivati , dakle sadržaj oznake može biti tekst ali i druge oznake.
Osnove - Oznake •
Primjer jednostavne HTML stranice:
MojaStranica.html Naslov stranice Ovo je moja prva stranica. Ovo je podebljani tekst
•
Osnovne oznake koje se pojavljuju mora imati svaka web stranica – html, title, head i body.
Osnove - Oznaka HTML • • •
Sav sadržaj HTML dokumenta, izuzev deklaracije tipa dokumenta mora se naći unutar elementa - . Unutar ovih oznaka preglednik interpretira sav tekst prema HTML pravilima. Prva oznaka jezika za označavanje koja se koristi u bilo kojem HTML dokumentu treba biti , a posljednja oznaka mora biti . Sve druge oznake web stranice sadržaj su ove oznake.
Osnove - Oznaka Head • • • • • •
Nakon oznake HTML, slijede podaci koji čine zaglavlje dokumenta. Ovaj dio sadržavat će opisne informacije o dokumentu, kao što su naslov i metapodaci. Često sadrži i kod klijentskih skripti koje se nalaze na stranici. Metapodaci su podaci koji opisuju podatke i sadrže informacije poput ključnih riječi, imena autora dokumenta ili bilo koji drugi podatak koji nije sadržan u samom dokumentu. Ove informacije ne prikazuju se u pregledniku. Unutar elementa svaki dokument mora imati element naslov . Tekst umetnut između oznaka <title>... se pojavljuje u naslovu prozora web preglednika nakon učitavanja html dokumenta. Za razliku od bilo kojeg drugog teksta unutar html dokumenta nije moguće postaviti bilo kakvu oznaku za formatiranje teksta unutar ovih oznaka. On će uvijek prikazan na isti način (izgled slova, veličina) što određuje preglednik.
Osnove - Oznaka Body • • • •
•
Kao što samo ime asocira, tijelo dokumenta nosi sadržaj dokumenta. Ovaj sadržaj definira što će se prikazati unutar naše stranice. Tijelo dokumenta može se smatrati stvarnim sadržajem knjige u odnosu na omot knjige. Sadržaj dokumenta mora biti smješten između oznaka .... Element otvara se odmah iza završetka elementa , a ostaje otvoren sve do završnog elementa . Ako se tekst smjesti između oznaka i bit će u pregledniku prikazan podebljano.
Osnove •
Naša web stranica sada je spremna za prikaz:
Naziv dokumenta
Osnove - Tipovi dokumenata •
HTML 4.01 je dosta tolerantan standard (nije osjetljiv na mala/velika slova ne moraju sve oznake biti zatvorene itd.) no ukoliko se želimo pridržavati XHTML 1.0 standarda moramo paziti na slijedeće: – Oznake moraju biti pravilno ugniježđene (ne smije biti preklapanja) – Oznake moraju biti ispravno formirane (upotreba navodnika i sl.) – Oznake moraju biti napisane malim slovima – Svaka oznaka mora biti zatvorena
• •
Prilikom izrade stranice sami određujemo kojeg standarda ćemo se držati Na sam početak stranice stavljamo oznaku DOCTYPE npr.
• • •
Ovdje kažemo a) tip dokumenta je HTML b) držimo se XHTML1 Tranzicijskog standarda i c) Definicija standarda nalazi se na spec web adresi DOCTYPE nije dio HTML oznaka to je instrukcija pregledniku da pazi na pridržavanje standada Pri odabiru XHTML/HTML 4.01 standarda imamo izbor između striktnog pridržavanja (preglednik ne prihvaća napuštene elemente iz prethodnih verzija) ili tranzicijskog (preglednik prihvaća i napuštene elemente)
Osnove - HTML atributi • • • • • •
Oznake mogu imati atribute koji dodatno opisuju element Dakle atributi su nosioci dodatnih informacija o pojedinom elementu Atributi su prikazani u parovima naziv/vrijednost tj. naziv_atributa= “vrijednost_atributa” Atributi se uvijek navode u početnoj oznaci nikad na oznaci zatvaranja Vrijednosti atributa moraju biti unutar navodnika (prema XHTML-u) Postoje atributi koji su podržani kod većine HTML elemenata (class, id, style, title) kao i oni koji su samo podržani za pojedine html elemente (npr. href atribut za oznaku) Naslov stranice Ovo je moja prva stranica.
Osnove - komentari • • •
Oznake komentara u HTML-u počinje sa !-- i završava sa – Svi znakovi unutar ove oznake su običan komentirani tekst (jedino nije dozvoljena kombinacija --) Primjer:
Uređivanje teksta • • • • • •
HTML je originalno nastao kao alat za prikazivanje strukture dokumenta Gotovo svaki dokument može biti razložen na blokove teksta ili druge informacije predočene ilustracijama. Kod organizacije dokumenta moguće je imati razne naslove koji su hijerarhijski postavljeni. Slično kao u MS Wordu možete imati naslov knjige, naslov poglavlja, odjeljka itd. U HTML-u naslovi su definirani u šest hijerarhijskih razina od
do
. h1 ukazuje na najznačajniju informaciju, a h6 na informaciju s najmanjim značajem. Naslovi se koriste samo za naslove, a ne kako bi se prikazao neki dio teksta povećano. Za promjenu izgleda teksta koriste se CSS-ovi, dok naslovi imaju veću težinu prilikom pretraživanja stranica
Uređivanje teksta - Naslovi Naslovi h1 h6
Ovo je naslov
Ovo je naslov
Ovo je naslov
Ovo je naslov
Ovo je naslov
Ovo je naslov
do
1 2 3 4 5 6
– – – – – –
h1
h2 h3 h4 h5 h6
Uređivanje teksta - Odlomak •
Odlomak ili paragraf kao dio povezanog teksta označava se oznakom
!
Odlomci
Ovo je odlomak (paragraph).
I ovo je odlomak.
Ovo je odlomak.
Odlomci se definiraju p oznakom.
Uređivanje teksta - div i span elementi • • • •
oznaka definira sekciju ili odjeljak dokumenta Često sadrži jedan ili više paragrafa
oznaka grupira elemente koje sadrži u zajedničku cjelinu i može nam poslužiti za njihovo formatiranje (font, boja i sl.) Ukoliko želimo odvojiti dio teksta unutar paragrafa kako bi ga drugačije prikazali možemo koristiti i element.
Uređivanje teksta - Slova i linije •
•
•
Podebljana slova – b oznaka – Koristi se za prikaz teksta koji se u pregledniku prikazuje «masnim» slovima. – Npr: Ovo su podebljana slova Kosa slova – i oznaka – Ova oznaka znak je pregledniku za prikaz teksta u kurzivu – Npr. Ovo su kosa slova Elementi i – Element (emphasise) naglašava dio teksta i rezultira istim prikazom kao i (nakošeno) – Element jako naglašava dio teksta i rezultirati će istim prikazom kao (masno) – Bolje je koristiti ove oznake jer one ne definiraju samo prikaz već označavaju koji su dijelovi teksta važniji
Uređivanje teksta - Slova i linije •
Prijelaz u novu liniju – Ukoliko je u sadržaju odlomka tekst prešao u novu liniju on će se svejedno unutar web stranice prikazati u istoj liniji – Ako želimo preći sa tekstom u novu liniju koristimo oznaku ili (break line) – oznaka nema sadržaja ona je zatvorena unutar istih zagrada
Uređivanje teksta - Pre element • • •
•
Bez obzira koliko razmaka ili prijelaza u nove linije imate u vašim HTML elementima preglednik će to prikazati samo kao jedan razmak (space) Kada je u tekstu koji se prikazuje na web stranici potrebno zadržati razmake i početak novog retka, bez obzira na mogućnost prikaza dva retka u jednom koristi se
…
oznaka. Ova oznaka pregledniku kaže kako je tekst koji slijedi u točno onakvom obliku u kakvom ga treba prikazati. Najbolje se učinak ove oznake vidi kada se prikaže isti tekst sa
oznakom i bez nje.
Uređivanje teksta - primjer Prikaz teksta bez pre oznake
U glavi nestručnjaka postoje mnoge mogućnosti. U glavi stručnjaka ima ih malo.
Uređivanje teksta – primjer (
) Prikaz teksta sa pre oznakom
U glavi nestručnjaka postoje mnoge mogućnosti. U glavi stručnjaka ima ih malo.
Uređivanje teksta - Specijalni znakovi •
•
• • •
Neki znakovi imaju posebno značenje u HTML-u, poput znaka za manje (<) koji definira početak HTML oznake. Ako je potrebno prikazati na stranici znakove koji u HTML-u imaju posebno značenje potrebno ih je zamijeniti odgovarajućim entitetima u HTML dokumentu. Entitet se sastoji od tri dijela: – znaka i (&) – ampersand – naziva entiteta ili znaka # iza kojeg slijedi broj entiteta – točke-zareza na kraju (;) Kako bi se prikazalo oznaku manje < u pregledniku potrebno je upisati < ili < Prednost uporabe naziva entiteta nad brojem entiteta je očita. Jednostavnije je pamtiti naziv lt koje je skraćenica od less than (manje od) Potrebno je napomenuti kako su nazivi entiteta osjetljivi na velika i mala slova.
Liste su nabrajanja istovjetnih pojmova, u HTML-u imaju specijalan način označavanja Liste se u HTML-u pojavljuju u tri oblika: – neuređena lista – oznaka
(unordered list) – uređena lista – oznaka (ordered list) – lista definicija– oznaka
(definition list) Prve dvije, neuređena i uređena, imaju samo po dva elementa: – LIST -
ili čime se otvara lista , – LIST ITEM -
- čime se nabrajaju elementi liste Bez obzira je liriječ o uređenoj ili neuređenoj listi, svaka pojedina stavka označava se elementom
Liste je moguće ugnježđivati, možemo imati listu unutar liste, pritom možemo kombinirati različite tipove
Neuređena lista •
Neuređena lista je ona u kojoj raspored stavki koje ona nabraja nije bitan, sve su ravnopravne, iako se same stavke prikazuju onim redom kojim su pobrojane u izvornom dokumentu. • Primjer neuređene liste upravo je ovaj tekst • Većina preglednika neuređenu listu prikazuje sa točkom ispred svake stavke što se može promijeniti – pomoću CSS-a ili pomoću atributa type (zastarjelo) Neuređena lista
Nazivi računala u mreži
Saturn
Mars
Neptun
Jupiter
Uređena lista • •
Uređena lista je ona čije stavke imaju određen raspored kojim se prikazuju (npr. rezultati utrke) Preglednici će stavke liste označiti dekadskim brojevima ali to se može promijeniti u mala/velika slova ili rimske brojeve. (CSS ili zastarjeli type atribut) Neuređena lista
Nazivi računala u mreži
Saturn
Mars
Neptun
Jupiter
Definicijska lista •
•
Definicijske liste su skupine parova termin/opis kao u rječniku. Svaka stavka za razliku od ostalih lista sadrži dakle dva dijela: – definicijskog termina – oznaka
(definition termin) – definicijskog opisa – oznaka
(definition) Lista se otvara oznakom definicijske liste
…
nakon čega slijede stavke koje su u parovima oznaka
i
Definicijska lista-primjer Definicijska lista
Rječnik kratica
RAM
Random Access Memory
BIOS
Basic Input Output System
Ugniježđivanje lista Gnježđenje lista
Ugnježđena lista:
Prirodni sok
Borovnica
Višnja
Čaj
Crni čaj
Zeleni čaj
Mlijeko
Slike • • • • • • •
Preglednici pored teksta mogu prikazati i slike, uobičajeni formati su GIF, JPEG i PNG Slike se umeću u web stranicu pomoću oznaka (image) Ova oznaka nema sadržaja, zatvara se unutar početne oznake (XHTML) Ova oznaka uvijek ima najmanje dva atributa (src i alt) Atribut src (source) nam daje lokaciju i ime datoteke sa slikom npr. src=“vsite.jpeg” (datoteka je u istom folderu kao i web stranica) Atribut alt nam daje opis slike tj. tekst koji će se prikazati umjesto slike ako preglednik ne može prikazati sliku npr. alt=“VSITE Logo” Pomoću atributa width i height možemo odrediti širinu i visinu slike a pomoću css-ova možemo dalje prilagoditi njen prikaz
Slike Prikaz slike
Božićni Umbrella party:
Meta oznaka • • •
•
Oznaka postavlja se u HTML zaglavlje i sadrži opisne informacije o stranici Neće se prikazati unutar preglednika ali će sadržati informacije o ključnim riječima za Internet pretraživače, podešenje kodne stranice itd. Oznaka uvijek sadrži name ili http-equiv atribut koji objašnjava što definira pojedina meta oznaka i content atribut koji daje sadržaj meta oznake Npr. - postavlja kodnu stranicu unutar preglednika kako bi se sigurno vidjela i hrvatska slova.
Linkovi • • • • • • •
Linkovi ili poveznice su veze prema drugim stranicama ili dijelovima dokumenta Preglednik ih obično pokazuje podcrtanim slovima Ako se pozicioniramo na link i kliknemo mišom preglednik otvara stranicu na koju link pokazuje Link se označava oznakom (anchor), sadržaj ove oznake je podcrtani tekst (npr. Klikni me ) Atribut href je obvezan i govori nam koja će se stranica otvoriti kad aktiviramo link Ako se datoteka nalazi u istom direktoriju kao i trenutni dokument moguće je napisati samo naziv datoteke koji se želi povezati. (kao gore druga.html) Ako se dokument nalazi na drugom serveru potrebno je navesti punu adresu do datoteke koja se vezuje. (npr http://www.vsite.hr/druga.html )
(table row) elementom a stupci se posebno ne označavaju Ali svaka ćelija tablice mora se označiti
(table data cell) elementom Ako želimo prilagoditi vizualni oblik tablice imamo atribute
elementa border (specificira širinu crte okvira u pixelima, 0-bez crte) i width – (širina u % raspoloživog prostora preglednika – npr. 100% znači da će se tablica nacrtati cijelom širinom prozora) Atribute za specificiranje vizualnog izgleda tablice bolje je zamijeniti odgovarajućim CSS-ovima
Tablice - primjer Tablica
Primjer jednostavne tablice
I red I stupac
I red II stupac
II red I stupac
II red II stupac
Tablice - grupiranje • • •
• • • • •
HTML-u 4.0 unosi koncept grupiranja ćelija unutar tablice I redovi i stupci mogu se grupirati. Uvedena su tri nova elementa u redcima: – TABLE HEAD zaglavlje, – TABLE FOOT podnožje i – TABLE BODY tijelo tablice. Svaka grupa mora sadržavati barem jedan red, koji je definiran pomoću elementa
Zaglavlje - većinom služi prikaz naziva stupaca Ćelije zaglavlja mogu se označiti standardno sa
elementom ali preporučeno je korištenje
(table header cell) elementa kako bi sadržaj zaglavlja bio naglašen Podnožje označava zadnji red koji se prikaže u tablici i većinom prikazuje neke zaključne informacije (tipa sume i sl.) Dok su zaglavlje i podnožje opisnog karaktera, podaci tablice mogu biti prikazani samo u tijelu tablice.
Tablice • • •
•
Stupci imaju samo jedan element koji kontrolira njihovo grupiranje
. Ovaj element ima dva važna atributa: span i width. Span – atribut definira broj stupaca koji će se naći unutar grupe. Vrijednost mora biti cijeli broj veći od nule, a podrazumijevana vrijednost je 1. Width – atribut definira podrazumijevanu širinu za svaki stupac unutar grupe stupaca (za razliku od širine cijele grupe). Vrijednosti mogu biti iskazane u pikselima, postocima i relativnim vrijednostima. Neka je primerice tablica napravljena tako da prikazuje podatke za izračunavanje i neka može imati 10 stupaca širine od po 50 piksela.
...
Definicija grupe stupaca navodi se unutar elementa
, ali prije bilo kojeg elementa head ili foot i prije elementa row.
Tablice • • •
U tablici ne mora svaki red imati isti broj stupaca i obratno svaki stupac isti broj redova Ukoliko želimo spojiti dvije ili više ćelija u jednu (merge) možemo koristiti atribute rowspan i colspan u elementu
(isto tako i u
) Npr.
označava da se ova ćelija proteže preko dva stupca a
označava da se ćelija koju opisujemo proteže kroz 4 reda
Tablice
M&M Paneli
Prva ploča
Crvena ploča
Druga ploča
Plava ploča
Kvalitetni paneli!
Forme • • • • • •
HTML stranice ne moraju sadržavati samo prikaz informacija, one mogu i primiti korisnički unos podataka te ga proslijediti prema poslužitelju Dio web stranice koji aktivno komunicira sa korisnikom te omogućuje unos podataka nazivamo formom Forma je označena oznakom
Forme • • •
Pored elementa postoje još dva elementa za unos podataka:
