osnove html-a - tvolaric.comtvolaric.com/preuzimanja/html.pdf · poredana lista (eng. ordered list)...

Vjeţbe iz kolegija “Računalni praktikum 2"

OSNOVE HTML-A

Tomislav Volarić volaric.tomislav@gmail.comMostar, 2010/11

Internet i WWW

osnovni elementi HTMLa

osnovni elementi

hiperveze

osnovno formatiranje teksta i sadrţaja

posebni znakovi

prikaz slika

tablice

okviri

Sadrţaj

Internet3 www.fpmoz.bawww.google.com

www.yahoo.com

server

TCP/IP protokol

WWW=World Wide Web

stvoren je 1989. godine na CERN-u

bazira se na hipertekstu (povezivanju sadrţaja)

WWW je biblioteka multimedijalnih dokumenata

smještenih na računalima širom svijeta dostupnih putem

Interneta

dokumenti se nazivaju web stranice

web počiva na 3 mehanizma:

1. jedinstvenom adresiranju sadrţaja putem URL-a

(Uniform Resource Locator)

2. protokolima za pristup sadrţajima (http - HyperText

Transfer Protocol)

3. hipertekstualnoj organizaciji i pristupu sadrţajima

(HTML jezik)

WWW6 http://www.fpmoz.ba/index.hml

klijent

HTML=HyperText Markup Language

jezik za opis strukture dokumenta

najvaţnija osobina HTML dokumenta je

hipertekstualnost (povezivanje sadrţaja)

HTML dokument je tekstualna datoteka koja se sastoji

od HTML elemenata

Primjer HTML stranice

<td> Prva ćelija </td>

</table>

<hr />

Koncepti HTMLa

element

atribut

vrijednost atributa

oznake

često se na web stranici na isti sadrţaj primjenjuje više elemenata

takvi elementi ne smiju se preklapati već moraju biti ugnjeţđeni (eng. nested)

Ugnjeţđivanje

Ugnježđivanje

<b>Neki sadrţaj

Preklapanje

<b>Neki sadrţaj

HTML dokument <html></html>

početna i završna oznaka svakog dokumenta

svi ostali elementi moraju biti ugnjeţđeni unutar ovoga

HTML dokument dijeli se na 2 osnovna dijela

zaglavlje dokumenta <head></head>

tijelo dokumenta <body></body>

Struktura HTML dokumenta

zaglavlje dokumenta <head></head>

unutar zaglavlje unose se određeni "meta" podaci koji opisuju dokument npr. naslov dokumenta, kodna stranica, ključne riječi,...

naslov dokumenta <title></title>

meta podaci

praktikum 2, osnove HTMLa" />

meta name="author" content=“Tomo" />

content="text/html; charset=utf-8" />

Zaglavlje HTML dokumenta

<html>

<head>

<title>Prva HTML stranica</title>

</head>

<body>

Ovo je moja prva HTML stranica!

</body>

</html>

HTML dokument

Izgled u pregledniku14

naslovi (6 razina naslova <h1>-<h6>)

<h1>Ovo je naslov razine 1</h1>

odlomci <p>Ovo je odlomak</p>

prijelaz u novi redak <br />

vodoravna crta za odvajanje odlomaka <hr />

komentar <!–- Ovo je komentar -->

ne prikazuje se u web pregledniku

Elementi HTML-a

<html>

<head><title>Druga HTML stranica</title></head>

<body>

<h1>Ovo je moja druga HTML stranica</h1>

<p>HTML je izvorni jezik za prikazivanje sadržaja na webu.<br />Razvijen je 1989. godine na CERN-u Europskom laboratoriju za nukleranu fiziku u Ženevi.

<hr />

Tim Berners-Lee, istraživač na CERN-u, predložio je distribuirani informacijski sustav za pohranu informacija. Sustav je bio baziran na Hipertekstu.

</body>

</html>

HTML dokument

hiperveza je veza između HTML dokumenta i drugog sadrţaja

(drugi HTMLdokument, tekst, slika,...)

Hiperveza

Ovo je link na drugi dokument</a>

a - "sidro" (eng. anchor) href – hyperlink referenceprikazuje se kao plavi podcrtani tekst (ukoliko specifičnim stilom nije drugačije definirano)

"adresiranje" drugog dokumenta koji se poziva moţe se

provesti na različite načine

ako se drugi dokument nalazi na drugom web posluţitelju,

navodi se puna adresa posluţitelja i naziv dokumenta

ako se dokument nalazi na istom web posluţitelju i istom

direktoriju kao html stranica putanju nije potrebno navoditi

Hiperveza

<a href="http://www.unidu.hr/index.html"> Tekst linka</a>

<a href="index.html">Tekst linka</a>

hiperveza moţe pokazivati na određeno mjesto u HTML dokumentu

odredišna mjesta (knjiške oznake) moraju biti posebno imenovana vrijednošću atributa "name" <a> elementa ili"id" atributa bilo kojeg (npr. <h1>) elementa

Hiperveza

<a href="drugi_dokument.html#mjesto2"> Ovo je link na određeno

mjesto u drugom dokumentu</a>

<a name = "mjesto2">Odredište</a>

<h1 id = "mjesto2">Odredište</h1>

stranica se moţe otvoriti u novom prozoru (atr. target)

ili u određenom okviru (frame)

hiperlinkovi mogu biti posebnih vrsta:

slanje elektroničke pošte

pristup datotekama na ftp serveru

Hiperveza

Ovo je link na drugi dokument</a>

<a href="ftp://ftp.server.hr/datoteka">FTP adresa</a>

Ovaj dokument će se otvoriti u lijevom okviru</a>

<html>

<head>

<title>Primjer linkova</title>

</head>

<body>

<a href="http://www.google.com/index.html">Ovo je

link na drugi dokument</a><br />

<a href="#mjesto2">Ovo je link na dno ovog

dokumenta</a><br />

<a href="ftp://ftp.carnet.hr/README"> FTP

datoteka</a><br /><br /><br /><br /><br /><br />

<a name="mjesto2">Odredište</a>

</body>

</html>

HTML dokument

oznake za formatiranje značenja teksta24

Osnovno formatiranje teksta

<strong>Ovaj tekst je jako

naglašen</strong>

<em>Ovaj tekst je

naglašen</em>

<code>Ovo je programski

kod</code>

<cite>Ovo je citat</cite>

oznake za formatiranje fizičkog izgleda teksta25

Osnovno formatiranje teksta

<b>Ovaj tekst je

podebljan</b>

<i>Ovaj tekst je

nakošen</i>

Ovo je indeks<sub>1</sub>

Ovo je

potencija<sup>2</sup>

<tt>Ovo je font fiksne

širine</tt>

<html>

<head><title>Treća HTML stranica</title></head>

<body>

<h1>Ovo je moja treća HTML stranica</h1>

<p>HTML je izvorni jezik za <strong>prikazivanje sadržaja</strong> na webu.<br /> Razvijen je 1989. godine na CERN-u<sup>1</sup> <em> Europskom laboratoriju za nukleranu fiziku u Ženevi.</em>

<hr /><big>Tim Berners-Lee</big>, istraživač na <def>CERN-u</def>, predložio je distribuirani informacijski sustav za pohranu informacija. <br />

<code>Sustav je bio baziran na hipertekstu.</code>

</body>

</html>

HTML dokument

prikazom u pregledniku gubi se početno formatiranje sadrţaja

Osnovno formatiranje sadrţaja

<html>

<head>

</head>

<body>

///\\___

+----oOO----(_)-----------+

| I ja učim |

| osnove |

| HTML-a |

+-----------------oOO-----+

|__|__|

ooO Ooo

</body>

</html>

očuvanje formatiranja sadrţaja

oznake <pre></pre>

tekst se prikazuje fontovima fiksne širine

Osnovno formatiranje sadrţaja

<html>

<head>

</head>

<body>

///\\___

+----oOO----(_)-----------+

| I ja učim |

| osnove |

| HTML-a |

+-----------------oOO-----+

|__|__|

ooO Ooo

</pre>

</body>

</html>

liste sluţe za organizaciju sadrţaja na web stranici

poredana lista (ordered list)

<ol></ol> kreira listu

neporedana lista (unordered list)

<ul></ul> kreira listu

elementi liste (za obje vrste liste)

<li></li> elementi liste

poredana lista (eng. ordered list) je lista kod koje su elementi nabrojani jedan

ispod drugoga i svaki element označen je rednim brojem

koristi se kada je redoslijed elemenata vaţan

Poredana lista

<li>prvi element liste</li>

<li>drugi element liste</li>

<li>treći element liste</li>

neporedana lista (eng. unordered list) je lista kod koje su elementi nabrojani jedanispod drugoga, a svaki element označen je točkom

koristi se kada nije vaţan redoslijed elemenata u listi

Neporedana lista

<li>prvi element liste</li>

<li>drugi element liste</li>

<li>treći element liste</li>

Unutar <ul>/<ol> elementa smije se nalaziti samo <li> element

<ul>/<ol> ne smiju biti u istoj razini s <li> elementom

Ugnjeţđena <ul>/<ol> lista dolazi unutar <li>

Ugnjeţđivanje listi

Pogrešno

<li>ispitivanje znanja</li>

<li>seminarski </li>

<li>kolokviji</li>

<li>predavanja</li>

Ispravno<ul>

<li>ispitivanje znanja

<li>seminarski </li>

<li>kolokviji</li>

<li>predavanja</li>

znakovi koji u HTML-u imaju posebno značenje u tekstu se moraju prikazivati na poseban način, znakovnim ili numeričkim kodovima

na početku imaju znak & (ampersand), a na kraju točku-zarez

najčešće korišteni posebni znakovi:

Posebni znakovi

Za prikaz

koristiti

znakovni kod

... ili

numerički

‘ ' '

znak razmaka

Pogrešno

<html>

<head>

<title>Kod prve HTML

stranice</title>

</head>

<body>

Podebljani tekst se prikazuje

između oznaka <b> i </b>

</body>

</html>

HTML dokument

Želimo prikazati HTML kod :

HTML dokument

Želimo prikazati HTML kod:

Ispravno<html>

<head>

<title>Kod prve HTML stranice</title>

</head>

<body>

Podebljani tekst se prikazuje

između oznaka < b > i <

</body>

</html>

u HTML dokumentu mogu se ubaciti i slike

za prikaz se koristi <img> element

<img src="slika.jpg" alt="Moja prva slika"

height="160" width="160" border="2" />

src - naziv i putanja slike koja se prikazuje

alt - tekst koji opisuje sliku koji se prikazuje u slučaju ako nije moguć prikaz slike

height i width - visina i širina slike

border - definira okvir oko slike

align ("left" , "right", "bottom", "middle", "top" -

poravnanje u odnosu na odlomak

slike se mogu koristiti i kao linkovi

<img src="slika.jpg" alt="Moja prva slika"

height="159" width="143" border="2" /></a>

Prikaz slike

HTML dokument

<html>

<head><title>Primjer slike</title></head>

<body>

<img src="http://www.timdizajn.com/praktikum/slike/kosarka.jpg" alt="Prva slika"

height="160"

width="160"

border="2"

align="right"/>

<img src="http://www.timdizajn.com/praktikum/slike/Windows_8.png"

alt=“windows"

height="160"

width="160"

border="2" /></a>

</body>

</html>

prikazuju sadrţaj na strukturirani način, u recima i

stupcima

u praksi tablice se koriste za:

prikaz strukturiranih podataka

pozicioniranje sadrţaja na točno određeno mjesto na

stranici

sadrţaj se smješta u određenu ćeliju

Tablice

HTML oznake tablice <table></table> određuje tablicu

<th></th> određuje zaglavlje tablice

<tr></tr> određuje redak tablice

<td></td> određuje ćeliju tablice

<caption></caption> određuje opis (naslov) tablice

HTML oznake tablice

zaglavlje zaglavlje

ćelija ćelija

redak 1

zaglavlje

redak 2

tablica

Opis/naslov tablice

debljina okvira (u pixelima)<table border="?"> </table>

širina (u % ili pixelima)<table width="?"> </table>

u odnosu na širinu prozora preglednika

ako se ne navede tablica zauzima širinu sadrţaja

visina (u % ili pixelima)<table height="?"> </table>

u odnosu na visinu prozora preglednika

ako se ne navede tablica zauzima visinu sadrţaja

Osnovni atributi tablice

<caption>Glumci i glumice</caption>

<th>Inicijali</th>

<th>Ime i prezime</th>

<td>Ashley Judd</td>

<td>Benjamin Weir</td>

<td>Tommy Lee Jones</td>

</table>

Primjer 1 (okvir tablice)

<th>Inicijali</th>

</table>

Primjer 2 (širina i visina tablice)

<th width="60%" height="75">Inicijali</th>

</table>

Primjer 3 (širina i visina ćelije)

prazan prostor oko sadržaja ćelije (u pixelima)<table cellpadding="?"> </table>

ako se ne navede, po defaultu je 1 ili 2 pixela

ako se ţeli ukloniti treba staviti da je 0

Ime Prezime

cellpadding

razmak između ćelija (u pixelima)<table cellspacing="?"> </table>

ako se ne navede, po defaultu je 1 ili 2 pixela

ako se ţeli ukloniti treba staviti da je 0

Ime Prezime

cellspacing

horizontalno poravnanje sadržaja u ćeliji

left, center ili right

left, center ili right

vertikalno poravnanje sadržaja u ćeliji

top, middle ili bottom

top ili bottom

<th>Inicijali</th>

</table>

Primjer 4 (prostor oko sadrţaja)

<th>Inicijali</th>

</table>

Primjer 5 (razmak između ćelija)

<table>

<td><img src="pic-1a.gif" width="56"

height="102" border="0"></td>

<td><img src="pic-1b.gif" width="56"

<td><img src="pic-1c.gif" width="56"

</table>

Primjer 6 (tablica s razmacima)

<table cellspacing="0" cellpadding="0"

border="0">

</table>

Primjer 7 (tablica bez razmaka)

<caption align="bottom">Glumci i glumice</caption>

<th>Inicijali</th>

<th align="left">Ime i prezime</th>

</table>

Primjer 8 (poravnanje sadrţaja)

spojeni redovi<td rowspan="?"> </td>

broj spojenih redova

spojeni stupci<td colspan="?"> </td>

broj spojenih stupaca

Spojene ćelije tablice

<th rowspan="2">Godina</th>

<th colspan="3">Studenti</th>

<th>1. godina</th>

<th>2. godina</th>

<th>3. godina</th>

</table>

Primjer 9 (spojeni redovi ili stupci)

<th rowspan="2">Godina</th>

<th colspan="3">Studenti</th>

<th>1. godina</th>

<th>2. godina</th>

<th>3. godina</th>

<td rowspan="2" colspan="3">Nema upisanih</td>

</table>

Primjer 10 (spojeni redovi i stupci)

sluţi za interakciju korisnika

korisnik unosi podatke i pokreće odgovarajući program

primjena :

prijava korisnika za pristup web stranici

prikupljanje informacija o posjetiteljima

on-line kupovinu

sučelje prema bazi podataka

unos podataka za pretraţivanje stranice

<form></form> element

"action" atribut određuje što će se uraditi s podacima (u koji program će

se podaci proslijediti)

akcije:

slanje podataka pomoću programa za elektroničku poštu

<form method="post" action="mailto:korisnik@domena.hr"

enctype="text/plain"></form>

pozivanje izvršnog programa na posluţitelju

prijelaz na drugu html stranicu

<input /> element je osnovni element forme

vrijednost atributa "type" određuje njegovu namjenu

unos podataka <input type="text" />

polje za unos lozinke <input type="password" />

radio button <input type="radio" />

checkbox <input type="checkbox" />

ostali vaţni atributi

“name" imenuje element forme

npr svi checkbox-ovi koji pripadaju istoj skupini moraju imati istu vrijednost atributa name

"value" defaultna vrijednost elementa

"size" veličina polja na ekranu

"maxlength" maksimalna duţina sadrţaja

Elementi forme

skriveno polje

npr kada šaljete podatke na mail pomoću cgi programa u takvom podatku se

definira e-mail adresa na koju s epodaci šalju

tipka za čišćenje polja forme

tipka za proslijeđivanje podataka forme

vrijednost atributa value mijenja prikaz teksta na tipki

unos veće količine teksta

atributi: rows i cols - broj redaka i stupaca

Elementi forme (nastavak)

padajući izbornik (eng. Pull Down List)

definicija izbornika <select></select>

atribut size za broj prikazanih izbora

po defaultu size=1

ako je broj prikazanih izbora veći od 1 element se naziva izbornik s

klizajućom trakom (eng. Scrolling List)

pojedini izbor <option></option>

atribut selected za izabrani podatak

Elementi forme (nastavak)

Primjer 11 (elementi forme)62

E-mail:

Lozinka:

Čitate li informatičke časopise?<br />

DA <input type="radio" name= "cit" value="DA" checked="checked" />

NE <input type="radio" name= "cit" value="NE" />

Koje informatičke časopise čitate?<br />

Bug<input type="checkbox" name="c1" value="C1" />

Mreţa<input type="checkbox" name="c2" value="C2" />

PC chip<input type="checkbox" name="c3" value="C3" />

</form>

Izgled u pregledniku

Primjer 12 (elementi forme)

<form>

Komentar:

Čitate li informatičke časopise?

</select><br />

Studenti:

<option value="pero">Pero Perić</option>

</select>

</form>

sluţe za istovremeni prikaz više web stranica u browseru <frameset></frameset> definira skup stranica koji će

se istovremeno prikazivati u pregledniku

obavezan je jedan od atributa: ili rows ili cols navodi se širina svakog pojedinog okvira u postotku ili pikselima

moţe se navesti * - čitav preostali prostor<frameset rows="50%,30%,20"> ili

skupovi okvira se mogu međusobno ugnjeţđivati

nedostatak: stanje određenih okvira ne moţe se zapamtiti (uključiti u "favorites") preglednika

Okviri (eng. frames)

<frame ... /> - definira se stranica koja će se prikazivati u određenom okviru

atributi:

src="stranica.html" - stranica koja se otvara

name ili id - naziv okvira (ako se navede moţe se pomoću target atributa anchor elementa određena stranica otvoriti u određenom okviru

Okviri (eng. frames)

<noframes></noframes> definira izgled stranice koja će se prikazivati u browserima koji nemaju mogućnost rada s okvirima

<a href="p1.html" target="okvir1">Otvori stranicu </a>

Primjer 13 (skup okira)67

<html>

<head>

<title>Ovo je primjer korištenja okvira </title>

</head>

</frameset>

<body>

Prikazuju se 6 dokumenta s primjerima tablica.

</body>

</noframes>

</html>

Primjer 1469

<html>

<head>

</head>

</frameset>

</frameset>

<body>

Prikazuju se 5 dokumenta s primjerima tablica.

</body>

</noframes>

</html>

Primjer 15 (frameset)71

<html>

<head>

</head>

</frameset>

<body>

Prikazuju se primjeri s vjeţbi.

</body>

</noframes>

</html>

Primjer 15 (lijevi okvir)72

<html>

<body>

<h2>Primjeri</h2>

<a href="p2-1.html" target="stranica">Okvir tablice</a><br />

<a href="p2-2.html" target="stranica">Širina i visina tablice</a><br />

<a href="p2-3.html" target="stranica">Širina i visina ćelije</a><br />

<a href="p2-4.html" target="stranica">Prostor oko sadrţaja</a><br />

<a href="p2-5.html" target="stranica">Razmak između ćelija</a><br />

<a href="p2-6.html" target="stranica">Tablica s razmacima</a><br />

<a href="p2-7.html" target="stranica">Tablica bez razmaka</a><br />

<a href="p2-8.html" target="stranica">Poravnanje sadrţaja</a><br />

<a href="p2-9.html" target="stranica">Spojeni redovi ili stupci</a><br />

<a href="p2-10.html" target="stranica">Spojeni redovi i stupci</a><br />

<a href="p2-11.html" target="stranica">Elementi forme 1</a><br />

<a href="p2-12.html" target="stranica">Elementi forme 2</a><br />

<a href="p2-13.html" target="stranica">Okviri 1</a><br />

<a href="p2-14.html" target="stranica">Okviri 2</a><br />

</body>

</html>

Izgled u pregledniku

ponekad ţelimo uključiti čitavu web stranicu unutar druge

Inline frame

frameborder="1"></iframe>

atributi iframe elementasrc – stranica koja se ubacujewidth i height – širina i visina okviraframeborder – debljina linije oko okvira (0-nema okvira)marginwidth – širina praznog prostora između sadržaja i horizontalne marginemarginheight – širina praznog prostora između sadržaja i vertikalne marginescrolling (yes, no, auto) – prikazivanje klizača

Primjer 1675

<html>

<head><title>Primjer iframe</title></head>

<body>

<h1>Ovo je moja HTML stranica s iframe-om</h1>

<p>HTML je izvorni jezik za <strong>prikazivanje sadrţaja</strong> na webu.<br />

Razvijen je 1989. godine na CERN-u <em> Europskom laboratoriju za nukleranu fiziku u Ţenevi.</em>

</iframe>

<hr />Tim Berners-Lee, istraţivač na CERN-u, predloţio je distribuirani informacijski sustav za pohranu

informacija.

<code>Sustav je bio baziran na hipertekstu.</code>

</body>

</html>

na samom početku dokumenta navodi se definicija tipa HTML dokumenta npr

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

kaţe web pregledniku kojem tipu stranica pripada kako bi validatori mogli provesti kontrolu ispravnosti dokumenta XHTML dokument je XML dokument i provjera se vrši

pomoću DTD pravila

Definicija tipa XHTML dokumenta

za stranice rađene po HTML 4 standardu <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

za stranice rađene po XHTML standardu <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

za stranice sa skupom okvira (frameset) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Tipovi XHTML dokumenta

Nemate naznačen encoding, pa browseri ne znaju

kako prikazati stranicu. Encodinga koji podrţavaju

hrvatske dijakritike ima više (ISO, UTF-8 i Windows)

Odmah iza <head> upišite ovaj kod:

Ne vide mi se hrvatska slova! (š, č, ć, ž, đ)

charset=windows-1250" />

osnove html-a - tvolaric.comtvolaric.com/preuzimanja/html.pdf · poredana lista (eng. ordered list)...

Documents

ms dos -...

lista n. 1 lista n. 2 lista n. 3 lista n. 4 lista...

ureĐenje - vares.info april-maj_0.pdf · izložba...

mgr. jitka koubová...téma hodiny zlomky – převod...

Ústav dědičných metabolických poruch vfn...dokument...

uvod u raČunarstvo -...

25. drŽavno natjecanje iz geografije 2018. godine … ·...

demo...6. za početak ciklusa pritisnite gumb start/pauza....

o sindikatu...

redni broj zadatka: 1 · 2020. 10. 29. · 4 4. zadatak...

lista Întreprinderilor publice ... -...

jednostavni algoritmi i programiranje/e-student/009... ·...

računalni praktikum 1 -...

1. preuzimanje ftp programa -...

priručnik za vlasnika - opel.hr · 4 uvod opasnost,...

računarski praktikum 1 –vježba -...

€¦ · web viewv příslušném spisu je dohledán...

Ústavní péče pro mladistvé ohrožené drogovou...

analiza dostavljenih primjedbi · označen brojem) te bi...

Ústav dědičných metabolických poruch vfn · dokument...