02. HTML - Ipng.hr

22.1.2012.
HTML
voditelj: Višeslav Račić, prof, ACE
e‐mail: viseslav.racic@algebra.hr
1
•
•
•
•
•
•
•
•
•
•
Osnove HTML jezika
Osnovni elementi HTML jezika
Rad s grafikom
Povezivanje dokumenata
Rad s tablicama
Uvod u CSS
Obrasci
Metaelementi
HTML5
Dodatci
2
1
22.1.2012.
• HTML (HyperText Markup Language)
– Jezik za označavanje pomoću kojeg se može odrediti logička i fizička struktura elemenata unutar HTML dokumenta kao što su naslovi, odlomci, slike i hipertekstualne veze
– Omogućava u većoj/manjoj mjeri stilsko/grafičko uređenje elemenata
3
Evolucija HTML‐a
• SGML (Standard Generalized Markup Language)
• HTML (HyperText Markup Language)
– Prva web stranica 6. kolovoza 1991.
• XML (Extensible Markup Language)
• XHTML (Extensible HyperText Markup Language) – markup language za kreiranje web stranica
• XHTML 1.0 – Dozvoljava da sadržajem dokumenta budu samo sadržaj i struktura, a ne i odlikovanje
– Oblikovanje se specificira sa CSS (Cascading Style Sheets)
4
2
22.1.2012.
5
6
3
22.1.2012.
PRAVILA SINTAKSE
• Svi elementi i imena atributa pišu se malim slovom
• Sve vrijednosti atributa moraju biti pod dvosturkim navodnicima
• Svi elementi moraju biti zatvoreni
• Svi elementi moraju biti pravilno ugniježđeni
• Ugniježđeni element mora biti zatvoren prije završetka roditeljskog elementa
7
IZRADA WEB SJEDIŠTA
• Razdvojiti strukturu (HTML) od dizajna (CSS)
• Pristupačnost i dostupnost (pr. alt kod <img>)
• Dizajnom i strukturom omogućiti brže učitavanje
8
4
22.1.2012.
OSNOVNI ELEMENTI HTML JEZIKA
• !DOCTYPE
– Prva instrukcija HTML dokumenta
– Nije HTML tag, već instrukcija web pregledniku o kojoj se verziji markup jezika radi u dokumentu
– Referencira se na Document Type Definition (DTD) – DTD specificira pravila markup jezika kako bi preglednici sadržaj ispravno tumačili tj. prema pravilima koje su donijeli:
• World Wide Web Consortium (W3C)
• Internet Engineering Task Force (IETF)
9
Doctype dostupni u preporukama W3C
• HTML 4.01 Strict
– Ovaj DTD sadrži sve HTML elemente i atribure, ali ne uključuje prezentacijske i zastarjele elemente (<font>). Frameset nije dopušten.
– <!DOCTYPE HTML PUBLIC "‐//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> • HTML 4.01 Transitional
– Ovaj DTD sadrži sve HTML elemente i atribure, uključujući i prezentacijske i zastarjele elemente (<font>). Frameset nije dopušten. • HTML 4.01 Frameset
– Ovaj DTD jednak je HTML 4.01 Transitional, ali dozvoljava Frameset.
10
5
22.1.2012.
• XHTML 1.0 Strict
– Ovaj DTD sadrži sve HTML elemente i atribure, ali ne uključuje
prezentacijske i zastarjele elemente (<font>). Frameset nije dopušten. Označavanje mora poštivati pravila oblikovanja XML‐a.
– <!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1‐strict.dtd">
• XHTML 1.0 Transitional
– Ovaj DTD sadrži sve HTML elemente i atribure, uključuje
prezentacijske i zastarjele elemente (<font>). Frameset nije dopušten. Označavanje mora poštivati pravila oblikovanja XML‐a.
• XHTML 1.0 Frameset
– Ovaj DTD jednak je XHTML 1.0 Transitional, ali dipušta korištenje Frameseta
• XHTML 1.1
– Ovaj DTD jednak je XHTML 1.0 Strict, ali dopušta korištenje dodavanje modula (npr. Radi podrške za govornike s prostora istočne Azije).
11
OSNOVNI ELEMENTI HTML JEZIKA
• ODLOMAK
– Element: <p> </p>
– Funkcija: predstavlja normalni odlomak teksta
– Atributi: • id (identifikator)
• title (naslov elementa)
• style (linijski stilovi)
• align (poravnavanje: left, right, center, justify)...
• <p>Ovo<em>je</em> vrlo <strong> jednostavan </strong>
primjer.</p> 12
6
22.1.2012.
http://www.quackit.com/html_5/tags/html_comments_tag.cfm
13
APSOLUTNE I RELATIVNE PUTANJE
• Govorimo o ovisnosti HTML dokumenta i npr. slike
– Apsolutna (globalna) – pišemo cijelu adresu, počinjemo od polazne (korijenske mape) ili URL adrese
<img src=“http:// botanika.hr/slike/mrav.gif” alt=“mrav” />
– Relativna – u odnosu na neki dokument. Početna “točka” mapa u kojoj je i dokument
<img src=“../slike/slika.gif” alt=“” />
• / – razmak između mapa
• .. – roditeljska mapa u odnosu na HTML dokument
14
7
22.1.2012.
POVEZIVANJE DOKUMENATA
• Unutarnje veze
– Veza prema sadržajima unutar sitea
• Vanjske veze
– Veze prema stranicama an fizički odvojenim lokacijama
• Veze prema elektronskoj pošti
– Slanje maila putem zadane e‐mail aplikacije
• Veze unutar samog HTML dokumenta – sidra (anchor) – važnost atributa name
– moguće povazati i sa sidrom u drugom dokumentu (indeks.html#vrhstranice)
15
Rad s tablicama
• Tablice
– Strukturni elementi za tablični prikaz podataka, izračuna, statističkih podataka
– Elementi <table> </table>
– Tablica sadrži retke – element <tr> </tr>
– A redak ćelije – element <th> </th> ili <td> </td>
16
8
22.1.2012.
17
• Jednostavna tablica
18
9
22.1.2012.
Strukturiranje sadržaja pomoću tablica
19
Uvod u CSS
CSS (Cascading Style Sheet) – liste kaskadnih stilova –
stilske liste
• Zasebna datoteka (.css)
– S dokumentom se povezuje preko koda dodanog u HEAD tag: – <link rel=˝STYLESHEET˝ type=˝text/css˝ href=˝style.css˝ > • U samom kodu HTML stranice, unutar STYLE taga (unutar HEAD taga): – <style type=˝text/css˝> ... </style>
• U HTML kodu svakog elementa pomoću riječi style
– <div style=˝font‐family:Arial; font‐size: 10pt;˝> ... </div>
20
10
22.1.2012.
21
OBRASCI (Forms)
Primanje informacija od posjetitelja
Upisivanje informacija u polja
Slanje i obrada podataka
Izvršavanje akcije (slanje mailom, prijava u sustav, plaćanje...)
• Informacije se mogu obrađivati u realnom vremenu, te se šalje odgovor korisniku
• Sadrži razne tipove polja: tekstualni okviri, polja za unos teksta, padajući izbornici, kružni izbornici, kontrolni kvadratići i gumbi
• Stranica može imati više obrazaca
•
•
•
•
22
11
22.1.2012.
– Element: <form></form>
– Atributi: •
•
•
•
•
•
id (identifikator)
style (linijski stilovi)
name (ime obrasca)
action (putanja do skripte koja obrađuje podatke)
method (HTTP metoda prosljeđivanja podataka: post i get)
enctype (opis tipa podataka koji se šalje:
– multipart/form‐data (kod slanja datoteka)
– text/plain (kod slanja teksta)
• target (informacije o okviru u koji se podatci prosljeđuju)
23
24
12
22.1.2012.
Input elementi
• Pomoću <input> elementa moguće je, ovisno o vrijednosti atributa <type> definirati nekoliko vrrsta polja obrasca
– Element: <input/>
– Atributi: •
•
•
•
id (identifikator)
style (linijski stilovi)
name (ime polja)
type (obavezan atribut koji određuje tip polja:
– text / password / checkbox / radio button / submit / reset / file / hidden / image / button
25
• Tekstualni elementi
– type=“text” type=“password”
• Kružni izbornici
– type=“radio” value=“poštom” checked
• Kvadratići za označavanje
– type=“checkbox” value”da”
• Gumbi
– type=“submit” value=“Prihvati”
– type=“reset” value=“Počisti”
26
13
22.1.2012.
Metaelementi
• Ne utječu direktno na strukturu sadržaja, ali mogu utjecati na izgled sadržaja
• Smješteni unutar taga <head></head>
• Pomažu kod indeksiranja Internet lokacija od strane pretraživača; definiranja ključnih riječi, kodne stranice, podataka o autoru…
– Element: <meta/>
– Atributi: • name (ime parametra: description, keywords, author, company, copyright)
• content (vrijednost parametra)
• http‐equiv (ovisi o vrijednostima GTTP zaglavlja, upotrebljava se umjesto name atributa)
27
•
•
•
•
•
•
<meta name="description" content="Ovdje ide opis stranice.">
<meta name="keywords" content="Ovdje dolaze ključne riječi">
<meta name="company" content="Podatci o kompaniji">
<meta name="author" content="Podatci o autoru">
<meta name="copyright" content="autorska prava">
<meta name="generator" content="program koji je korišten za izradu dokumenta">
• <meta http‐equiv="refresh" content="5;url=adresa" />
• <meta http‐equiv="Content‐Type" content="text/html; charset=UTF‐8" /> • <meta name="robots" content="index,follow" />
• <meta name="robots" content="noindex,nofollow" />
28
14
22.1.2012.
HTML5
XHTML 1.0
XHTML 2.0
HTML5
• obavezna podrška za postojeće sadržaje
• HTML5 ne govori samo o načinu tumačenja elemenata nego i o postupcima s greškama
• 2022. predviđeni završetak standardizacije 29
• Težnja pojednostavljivanju semantike u kodu
• !DOCTYPE
• <!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1‐
strict.dtd">
– <!DOCTYPE html>
30
15
22.1.2012.
• HEAD
– <meta http‐equiv="Content‐Type" content="text/html; charset=UTF‐8" />
– <meta charset=„UTF‐8”> – <script type=„text/javascript” src=„file.js”></script>
– <script src=„file.js”></script>
– <link rel=˝STYLESHEET˝ type=˝text/css˝ href=˝style.css˝/ > – <link rel=˝stylesheet˝ href=˝style.css˝ />
31
Novi HTML5 elementi
• Uvođenje radi poboljšanja semantike weba, i popunjavanja „rupa”
• Canvas
– Postavljanje dinamičkih grafičkih elemenata
– Na <canvas> je moguće utjecati JavaScriptom
• Audio
– Reproduciranje glazbenih formata bez upotrebe za instaliranim dodatcima (flash
player, quick time…)
32
16
22.1.2012.
• Video
– Reprodukcija videa bez potrebe za dodatcima
• Forme
– Dodatni atributi o tipu podataka u elementu obrasca
– type=„email”; type=„url”; type=„tel”; • Semantički elementi
– Section, header, footer, aside, nav, article
33
<div id="head">
<ul id="nav">[...]</ul>
</div>
<div id="content">
[...]
</div>
<ul id="footer">[...]</ul>
<header>
<nav>[...]</nav>
</header>
<article>
[...] </article>
<footer>[...]</footer>
34
17
22.1.2012.
<div id="header"><header>
<div id="nav"><nav>[...]</nav></div>
</header></div>
<div id="article"><article>
[...]
</article></div>
<div id="footer"><footer>
[...]
</footer></div>
35
18

Download Report