7 5 HTML Basics 2018

Zavod za industrijsko inženjerstvo INFORMACIJSKI SUSTAVI
Katedra za upravljanje proizvodnjom
HTML
HyperText Markup Language
Nositelj kolegija: Prof. dr. sc. Dragutin Lisjak

Asistenti: Dr. sc. Davor Kolar
ver. 1.0
Sažetak
 Cilj vježbi: usvojiti sintaksu HTML prezentacijskog jezika za izradu
web stranica i upoznati se s mogućnostima HTML 5 prezentacijskog
jezika
 Sadržaj:
 Uvod
 HTML struktura
 HTML tagovi
 HTML elementi / HTML atributi / HTML formatiranje
 HTML <head> dio
 HTML slike
 HTML tablice / HTML liste
 HTML <div> i <span> elementi
 HTML Forme & Inputi
 HTML iframes
 HTML entiteti
 HTML 5
2 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

Zavod za industrijsko inženjerstvo
Uvod
 prva verzija objavljena 1991. godine (neslužbena); HTML 2.0
je postala prva imenovana verzija
 1995. W3C objavljuje verziju HTML 3.0 (imao duplikaciju
nekih funkcija…npr. <b> i <strong>)
 1997. verzija HTML 4.0 (pokrenuo čišćenje standarda)
 1999. predstavljen HTML 4.01 (manje promjene od prethodne
verzije → predstavljena konačna verzija ovog jezika)
 2012. predstavljen HTML 5 – prva nova revizija standarda
HTML 4.01

Uvod
MS VS → New Project → VB → Web → ASP.NET Empty Web Site→ name:
ISOS_WEB

Uvod

Uvod
HTML verzija
HTML dokument
HTML struktura

HTML struktura
<!DOCTYPE html>
<html xmlns=http://www.w3.org/1999/xhtml>
<html>
<head>
HEAD DIO
<title> </title>
</head>
<body>
<h1>Moj prvi naslov</h1>
....... BODY DIO
<p>Moj prvi paragraf.</p>
</body>
</html>

HTML struktura
 DOCTYPE deklaracija definira tip dokumenta (nije HTML tag,
već naputak za web browser u kojoj je verziji HTML stranica
napisana)
 tekst između tagova <html> i </html> opisuje web stranicu
 tekst između tagova <head> i </head> sadržava informacije
koje nisu vidljive na kontekstu web stranice
 tekst između tagova <body> i </body> vidljiv je na kontekstu
web stranice
 tekst između <h1> i </h1> prikazan je kao naslov
 tekst između <p> i </p> prikazan je kao paragraf

HTML tagovi
 tagovi su ključne riječi okružene izlomljenim zagradama
<ime_taga>sadržaj</ime_taga>
 uobičajeno dolaze u parovima..npr. : <b> …</b>
 prvi tag je početni tag (eng. opening tag), a drugi je završni tag
(eng. closing tag)
 završnom tagu se odaje "/" (forward slash) prije imena
 postoje i tzv. samo-zatvarajući tagovi (eng. self-closing tags), npr.
<br/>
 popis svih HTML tagova:
http://www.w3schools.com/tags/default.asp

HTML elementi
 sadržavaju početni i završni tag
 sadržaj elementa je sve između tagova
 neki HTML elementi nemaju sadržaj
 većina HTML elemenata može imati atribute
Početni tag Sadržaj elementa Završni tag

<p> Ovo je paragraf </p>
<a href="default.html"> Ovo je link </a>
<h1> Ovo je naslov </h1>

HTML elementi

HTML elementi

HTML elementi

HTML atributi
 HTML elementi mogu imati atribute
 atributi pružaju dodatne informacije o elementu
 atributi su uvijek specificirani u početnom tag-u
 dolaze u paru name/value, kao npr: name="value"
 Primjer:
<a href="http://www.w3schools.com">Ovo je poveznica</a>
 HTML linkovi su definirani pomoću <a> tagova
 adresa linka je specificirana href atributom

HTML atributi
Atribut Opis
Class Specificira jedno ili više class ime za element (referira se na class-eve u
listi stilova)
Id Specificira jedinstven id za element
Style Specificira umetnuti CSS stil za element
Title Specificira ekstra informaciju o elementu (prikazanu kao tipu alata)
 popis svih HTML atributa:

https://www.w3schools.com/tags/ref_attributes.asp

HTML atributi

HTML atributi

HTML headings:
definirani oznakama od <h1> do <h6>
HTML paragrafi:
<p>Ovo je paragraf</p>
HTML formatiranje:
<b>bold</b>
<i> italic</i>
<sub>subscripted</sub>
….

HTML formatiranje

HTML <head> dio
 <head> element je kontejner za <head> elemente
 elementi unutar <head> dijela mogu:
 uključivati skripte (npr. js skripte),
 dati instrukcije browseru gdje može pronaći listu stilova (css
stilovi),
 mogu pružati meta informacije, itd.
 popis tagova koji mogu biti dodani u <head> sekciju:
<title>, <style>, <meta>, <link>, <script>, <noscript>,
<base>

HTML <head> dio
1. HTML <title> element
 definira naziv dokumenta
 obavezan je u HTML/XHTML dokumentima

HTML <head> dio
2. HTML <base> element - specificira bazni URL
<head>
<base href="http://terraingallery.org/"
target="_blank" />
</head>
Bazni URL Otvara
linkove u
novom
prozoru
ili tab-u
Relativni URL

HTML <head> dio
3. HTML <style> element
 definira informaciju o stilu za HTML dokument; unutar
njega potrebno je specificirati kako HTML element treba
izgledati u browseru

HTML <head> dio
4. HTML <link> element - definira odnos između
dokumenta i eksternog izvora

HTML <head> dio
5. HTML <meta> element
 meta-podatci (eng. metadata) su podatci (informacije) o
podatcima
 <meta> tag pruža meta-podatke o HTML dokumentu; meta
podatci nisu prikazani na stranici, ali ih računalo čita
 meta elementi se koriste za specifikaciju opisa, ključnih riječi,
autora dokumenta, informacije o zadnjoj modifikaciji, itd.
 meta-podatke mogu koristiti preglednici (kako da prikazuju
sadržaj stranice), tražilice (ključne riječi) ili drugi web servisi
 <meta> tagovi uvijek idu unutar <head> elementa

HTML <head> dio
5. HTML <meta> element
Primjer HTML <meta> element-a:

1. Definiranje ključnih riječi za tražilice:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"/>
2. Definiranje opisa web stranice:
<meta name="description" content="Free Web tutorials on HTML and
CSS"/>
3. Definiranje autora stranice:
<meta name="author" content="Jhon Doe"/>
4. Osvježavanje dokumenta svakih 30 sekundi:
<meta http-equiv="refresh" content="30"/>
…

HTML <head> dio

HTML slike
 slike su definirane s <img> tagom koji je prazan, što znači

da sadržava samo atribute; <img> tag nema završne oznake
</img>, već je samo-zatvarajući tag
 kako bi se slika prikazala na stranici, potrebno joj je dodati
src ("source") atribut; vrijednost src atributa je URL slike
koju želimo prikazati
 sintaksa za definiranje slike:
<img src="url" alt="neki_tekst"/>

HTML slike
 <alt> atribut specificira alternativni tekst za slika, ukoliko
se slika ne može prikazati; vrijednost <alt> atributa je
autorski definiran tekst:
<img src="Slika/CNC-Milling-Machine.jpg" alt="CNC glodalica">
 height & width atributi se koriste za specificiranje visine i

širine slike; vrijednosti atributa su specificirane u
pikselima:
<img src=" Slika/CNC-Milling-Machine.jpg " alt=" CNC glodalica"
width="42" height="42">

HTML slike
Stvoriti direktorij "Slike" → desni klik → Add → Existing item

HTML slike…

HTML tablice
 tablice su definirane <table> tagom
 tablica sadržava redove (<tr> tag), a svaki red je podijeljen
u ćelije (<td> tag).
 <td> → table data → sadržava informacije o podatcima u ćeliji;
može sadržavati tekst, linkove, slike, liste, forme, druge
tablice, itd.
 <table border="neki_broj"> atribut u tablici prikazuje granice u
tablici

HTML tablice
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>

HTML tablice
HTML tablični tagovi…
TAG OPIS
<table> Definira tablicu
<th> Definira glavnu (head) ćeliju u tablici
<tr> Definira red u tablici
<td> Definira ćeliju u tablici
<caption> Definira opis tablice (prikazuje se iznad tablice)
<colgroup> Specificira grupu za formatiranje jednog ili više
stupaca u tablici
<col> Specificira svojstva stupaca za svaki stupac unutar
<colgroup> elementa
<thead> Grupira glavni sadržaj (zaglavlje) u tablici
<tbody> Grupira sadržaj “tijela” tablice
<tfoot> Grupira sadržaj podnožja u tablici
HTML liste
a.) nesortirana lista
- nesortirana lista (eng. unorderd list) počinje s <ul> tagom; a
svaka stavka liste započinje s <li> tagom i označene su
"bulletom" (crnim kružićem)
<ul>
<li>Glodalica</li>
<li>Tokarilica</li>
</ul>
b.) sortirana lista
- započinje s <ol> tagom (eng. orderd list); a svaka stavka liste
započinje s <li> tagom i označena je brojevima
<ol>
<li>Glodalica</li>
<li>Tokarilica</li>
</ol>

HTML liste

HTML liste
c.) opisna lista
- je lista termina/imena s opisom svakog termina/imena
- <dl> (description list) tag se koristi zajedno s <dt> tagom
(definira termine/imena) i <dd> tagom (definira svaki
termin/ime)
<dl>
<dt>Glodalica</dt>
<dd>HAAS VM-3</dd>
<dt>Tokarilica</dt>
<dd>HAAS ST-20Y</dd>
</dl>

HTML liste

HTML <div> i <span> elementi
HTML BLOK elementi…
 većina HTML elemenata su definirani kao elementi u blok razini
ili elementi u razini koda
 započinju i završavaju većinom u novoj liniji (redu) kada su
prikazani u pregledniku
 primjeri: <h1>; <p>; <ul>, <table>
HTML elementi u RAZINI KODA…

 elementi u razini koda su uobičajeno prikazani u istoj liniji
(redu)
 primjeri: <b>; <td>, <a>; <img>

1. HTML <div> elementi…
 <div> element je element blok razine koji može biti korišten
kao kontejner za grupiranje drugih HTML elemenata
 nema posebnog značenja, ali budući da je blok element,
preglednik će prikazati prijelom retka prije i nakon njega
 kada se koristi s CSS-om, <div> element se koristi za određivanje
stilskih atributa u velike blokove sadržaja
 koristi se i za razmještaj dokumenata (eng. layout); zamjenjuje
stari način definiranja razmještaja koji je koristio tablice

1. HTML <div> elementi…

2. HTML <span> elementi…
 HTML <span> element je element u razini koda koji se
može koristi kao kontejner za tekst
 <span> element nema posebnog značenja
 kada se koristi zajedno s CSS-om može se koristiti za
namještanje stilskih atributa za dijelove teksta

2. HTML <span> elementi…

HTML Forme & Inputi
 forme se koriste za odabir raznih tipova korisničkih upita
 koriste se za prijenos podataka na server
 mogu sadržavati unosne elemente kao što su tekstualna polja,
checkbox, radio gumbe, gumbe za podnošenje podataka
(eng. submit), itd.
 forma također može sadržavati listu, područje teksta, fieldset
(okvir oko forme), legendu i oznaku elementa
<form>
.
input elements
.
</form>

HTML Forme & Inputi

HTML Forme & Inputi
HTML tagovi formi… Opis
<form> Definira HTML formu za korisnički unos

<input> Definira kontrolu za unos
<textarea> Definira kontrolu za unos teksta u više redova (područje tekta)
<label> Definira "naljepnicu" teksta za unos

<fieldset> Grupno povezane elemente forme (radi okvir oko cjelina u formi)
<select> Definira padajući meni

<optgroup> Definira grupo povezanih opcija u padajućem meniu
<option> Definira opcije u padajućem izborniku
<button> Definira unosni gumb (submit,…)
<datalist> Definira listu predefiniranih opcija za unos kontrola
<keygen> Definira ključ-par polje za generiranje koji se koristi za obrasce (forme)
<output> Definira rezultat kalkulacija

HTML iframes…
 iframe se koristi za prikazivanje web stranice unutar web
stranice
 sintaksa:
<iframe src="URL"></iframe>

HTML entiteti
 neki znakovi su rezervirani u HTML-u (npr. <>) te trebaju
biti zamijenjeni sa znakovima entiteta
 Primjeri…
a.) znak manje vrijednosti se piše pomoću znakova:
&lt ili &#60
b.) za dodavanje razmaka u tekst koristi se znak &nbsp →
non-breaking space (ukoliko dodamo 10 razmaka u tekst,
browser će maknuti njih 9 prije prikazivanja stranice - u
takvim slučajevima se korist &nbsp)

HTML entiteti
REZULTAT OPIS IME entiteta BROJ entiteta
non-breaking space
< Znak za manje < <
> Znak za više > >
& ampersand & &
¢ cent ¢ ¢
£ funta £ £
¥ yen ¥ ¥
€ euro € €
§ section § §
© copyright © ©
® registered trademark ® ®
™ trademark ™ ™

HTML5
 prva nova revizija standarda HTML 4.01

 nastao u suradnji W3C-a i Web Hypertext Application
Technology Working Group (WHATWG)
 donosi brojne nove mogućnosti, kao npr. reprodukcija
videa na stranicama bez korištenja Adobe flasha ili
Microsoft silverlighta-a, drag&drop, mogućnost
upravljanja pomoću tipkovnice, itd.

HTML 5 – Primjer 1






7 5 HTML Basics 2018

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

7 5 HTML Basics 2018

Uploaded by

Copyright:

Available Formats

Zavod za industrijsko inženjerstvo INFORMACIJSKI SUSTAVI

Katedra za upravljanje proizvodnjom

Nositelj kolegija: Prof. dr. sc. Dragutin Lisjak

2 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

3 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

4 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

5 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

6 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

7 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

8 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

9 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

Početni tag Sadržaj elementa Završni tag

10 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

11 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

12 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

13 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

14 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

 popis svih HTML atributa:

15 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

16 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

17 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

18 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

19 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

20 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

21 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

22 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

23 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

24 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

25 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

Primjer HTML <meta> element-a:

26 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

27 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

 slike su definirane s <img> tagom koji je prazan, što znači

28 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

 height & width atributi se koriste za specificiranje visine i

29 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

30 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

31 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

32 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

33 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

35 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

36 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

37 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

38 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

HTML elementi u RAZINI KODA…

39 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

40 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

1. HTML <div> elementi…

41 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

42 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

43 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

44 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

45 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

<form> Definira HTML formu za korisnički unos

<label> Definira "naljepnicu" teksta za unos

<select> Definira padajući meni

46 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

47 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

48 / 55 Informacijski sustavi Fakultet strojarstva i brodogradnje

> Znak za više &gt; &#62;

& ampersand &amp; &#38;

¢ cent &cent; &#162;

£ funta &pound; &#163;

¥ yen &yen; &#165;

> Znak za više > >

& ampersand & &

¢ cent ¢ ¢

£ funta £ £

¥ yen ¥ ¥

€ euro € €

§ section § §

© copyright © ©

® registered trademark ® ®

™ trademark ™ ™