1. vježbe iz web programiranja - mathos.unios.hr · 21.10.2014. 2 Što ćemo naučiti? •osnovna...
TRANSCRIPT
21.10.2014.
1
1. vježbe iz WEB programiranja
HTML
Osnovni cilj
• Napraviti HTML/XHTML OSNOVU za osobnu stranicu na adresi
http://www.mathos/~korisnicko_ime
• Primjerice:
http://www.mathos.hr/~ibandic
• Podsjetimo se:
– osobne stranice iz kolegija Uredsko poslovanje
21.10.2014.
2
Što ćemo naučiti?
• Osnovna struktura HTML5/XHTML dokumenta– Deklaracija tipa dokumenta
– Element HTML
– Element HEAD
– Element BODY
• Osnovni HTML tagovi
• Rad sa tekstom i slikama
• Dodavanje hiperteksta
• Dodavanje slika
W3C standard
• World Wide Web Consortium – propisuje standarde u poznatim WEB tehnologijama
• Dobra referenca:
– http://www.w3schools.com/
21.10.2014.
3
IDE - Integrated Development Environment
• Aptana Studio 2.0.1
– http://www.aptana.com/
Editori
• Notepad++
– http://notepad-plus-plus.org/
• Editra
• http://editra.org/
• Komodo Edit
• http://komodoide.com/komodo-edit/
21.10.2014.
4
Osnovna struktura HTML5 dokumenta
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Odjel za matematiku - ime i prezime</title>
</head>
<body>
Moj prvi HTML document
</body>
</html>
Što je tu što - nazivi
<oznaka atribut=“vrijednost”> … </oznaka>
oznaka = engl. tagatribut = engl. attributevrijednost = engl. value
Preporuke:• oznake i atribute pisati malim slovima• vrijednosti pisati između dvostrukih navodnika
21.10.2014.
5
<HEAD></HEAD>
• Sadržaj unutar <HEAD></HEAD> ne prikazuje se u pretraživaču
– META - daje informacije o stranici
• keywords – ključne riječi, npr. <meta name="keywords" content="HTML, CSS">
• description – opis stranice, npr.<meta name="description" content="Učimo HTML">
• charset – definiramo KODIRANJE dokumenta
http://www.w3schools.com/TAGS/ref_charactersets.asp
<HEAD></HEAD>
– TITLE – naslov dokumenta, prikazan na
• statusnoj traci preglednika,
• favoritima (bookmarks),
• rezultatima tražilica.
– LINK – povezuje vanjsku datoteku, primjerice vanjsku datoteku sa CSS stilovima
21.10.2014.
6
<head>
<meta charset="utf-8" />
<title>Odjel za matematiku - ime i prezime</title>
</head>
<BODY></BODY>
• prikazuje sadržaj dokumenta<body>
<div>......</div>
</body>
21.10.2014.
7
Element <DIV></DIV>
• definira blokovsku strukturu dokumenta• često korišteni atributi:
– class – određuje CSS klasu čiji stil treba pridružiti bloku– style – definira tzv. inline CSS stil za element– id – jedinstveni identifikator objekta– title – naziv elementa (prikazuje se kao tooltip)
Ovo su ujedno atributi koji se smiju koristiti sa svakom oznakom
<div id="glavniBlok"><strong>Sveučilište J. J. Strossmyera - Odjel za matematiku</strong><br />napisati adresu odjela… (ulicu i grad staviti u posebne redove)!!!</div>
Popis validnih HTML5 elemenata
• http://www.w3schools.com/tags/default.asp
21.10.2014.
8
Strukturiranje teksta
• Strukturirani tekst:
– elementi koji dodaju strukturu u dokument
– Primjerice: STRONG - prikazuje se kao podebljani tekst
– ostalo: http://www.w3schools.com/TAGS/tag_phrase_elements.asp
<strong>Sveučilište J. J. Strossmayera</strong>
- <em>Odjel za matematiku</em>
Nastavak
• Zaglavlje (heading)
– definiraju vizualnu strukturu dokumenta
– naslov-podnaslov
– h1, h2, h3, h4, h5, h6
<div>
<h1>Ime i prezime..</h1>
<h2>Osobna stranica</h2>
</div>
21.10.2014.
9
Nastavak - <p></p>
• Definira blokovsku strukturu teksta• Paragrafi
– Pogledati: http://www.w3schools.com/tags/tag_p.asp• Preglednici automatski ubacuju prazan red između dva
paragrafa
<div>
<p>Dobro došli na moju novu početničku web
stranicu</p>
<p>Pozdrav svima!!!</p>
</div>
index.html:
<span></span>
• Definira inline strukturu dokumenta
– http://www.w3schools.com/tags/default.asp
<div>
<p>Dobro došli na moju novu <span
class=„nekistil">početničku</span> WEB stranicu</p>
<p><em>Pozdrav svima!!!</em></p>
</div>
21.10.2014.
10
Stiliziranje teksta inline stilovima
ZADATAK: Primijenite neki od gore navedenih stilova na “pozdrav dobrodošlice”!!!
• U HTML5 je obavezno stiliziranje teksta pomoću CSS-a
– CSS background: http://www.w3schools.com/css/css_background.asp
– CSS text: http://www.w3schools.com/css/css_text.asp
– CSS font: http://www.w3schools.com/css/css_font.asp
Liste
• moćno sredstvo za organizaciju sadržaja• http://www.w3schools.com/html/html_lists.asp• Neuređene (eng. unordered) liste
– ul – kreira neuređenu listu– li – kreira stavku liste
<ul><li>…..</li><li>…..</li></ul>
ZADATAK: Kreiraj novi HTML dokument pod nazivom zivotopis.html u kojem ćete napraviti skraćeni CV. Koristite neuređene i uređene liste. Ugnijezdite neuređene u uređene!!!
21.10.2014.
11
Hipertekst
• definira poveznice na druge WEB stranice ili na određene dijelove iste stranice
• element SIDRO - <a></a> (engl. anchor)
• atributi:
– href – lokacija destinacije linka
– name – ime sidra (opcionalno)
– target – usmjerenje linka drugu lokaciju (najčešće novi prozor pretraživača ili tab) (opcionalno)
Hipertekst - nastavak
• apsolutno povezivanje – kao vrijednost atributa href upotrijebljen je puni URL
• relativno povezivanje – upotrebljava se kod povezivanja datoteka na istoj adresi i na istom serveru
21.10.2014.
12
Hipertekst - nastavak
• ZADATAK: Kreirajte HTML dokument web_prog.html na kome ćete koristiti link prema web stranici kolegija WEB programiranje. Povežite web_prog.html i zivotopis.html sa naslovnom stranicom index.html– napraviti linkove na stranici index.html
<div>
……
31000 Osijek</div>
<hr />
<div>
Naslovna stranica | <a href="web_prog.html">Web programiranje</a>
| <a href="zivotopis.html">Životopis</a>
</div>
<div>
<h1>Ime i prezime..</h1>
</div>
Hipertekst - nastavak
• link na e-mail adresu– <a href=“mailto:_emailadresa_”>tekst
_poveznice</a>
ZADATAK: Staviti link na e-mail adresu koju ste naveli na stranici zivotopis.html