Osnove HTML-a

Osnove HTML-a
Predstavi se i prezentiraj
HTML jezik
▪ HTML ili Hyper Text Markup Language je
prezentacijski, opisni jezik namijenjen izradi
mrežnih stranica s pomoću HTML oznaka.
▪ Mrežni preglednici te oznake tumače i stvaraju
prikaz stranice na koji smo naviknuli – upravo je to
razlog zašto se prikaz mrežne stranice u mrežnim
preglednicima katkad može razlikovati.
2
Povijest HTML-a
▪ 1991. Razvio ga je Tim Berners
Lee
▪ 1993. Prva verzija HTML-a,
pojava prvih web stranica bez
slika
▪ 1995. HTML 3.0 – mogućnost
definicije tablica
▪ 1997. HTML 4.0 Prva web stranica, 1991.
▪ 2014. HTML 5.0 – zadnja verzija

3
HTML oznake
▪ naredbe mrežnom pregledniku koje određuju
kako će se prikazati sadržaj mrežne stranice
▪ navodimo ih unutar znakova < i >, npr. <html>
▪ oznake najčešće dolaze u parovima – početna
i završna oznaka
▪ završnu oznaku prepoznajemo po znaku -
kosa crta, npr. </html> <img>
▪ neke oznake imaju samo početnu oznaku, npr.
<img>
4
Struktura HTML dokumenta
zaglavlje dokumenta
<head></head>
<html></html>
početna i završna
oznaka svakog tijelo dokumenta
dokumenta
<body></body>
5
Struktura HTML dokumenta
▪ zaglavlje – označeno je oznakom
<HEAD> i sadržava informacije o
naslovu stranice te o osnovnim
obilježjima stranice
▪ tijelo stranice– označeno je oznakom
<BODY> - sadržaj stranice prikazan u
mrežnom pregledniku
6
Stvaranje HTML dokumenata
Mrežnu stranicu možemo izraditi koristeći:
▪ vizualne HTML uređivače – u svakom trenutku pokazuju
kako će mrežna stranica izgledati u mrežnom pregledniku
(WYSIWYG – What You See Is What You Get). To su
uređivači poput programa: CARNet CMS, Microsoft
Sway ili Adobe Dreamweaver.
▪ upisivanjem naredbi HTML jezika u tekstualnom
uređivaču poput Bloka za pisanje - pregled mrežne
stranice u obliku HTML kôda.
7
Stvaranje HTML dokumenta
▪ Za stvaranje HTML dokumenata (web
stranica) koristit ćemo besplatan uređivač
koda Notepad++
▪ Notepad++ je naprednija verzija Notepad-a
(Blok za pisanje) te podržava pisanje nekoliko
programskih jezika
▪ Radi u Windows okruženju
▪ Preuzmi Notepad++ sa stranice
https://notepad-plus-plus.org/downloads/ te ga
instaliraj na svoje računalo
8
Notepad++
▪ Izgled sučelja i struktura HTML dokumenta
9
Notepad++
▪ Prije početka rada, u izborniku odaberi karticu Jezici →
HTML
10
Pisanje koda u Notepad-u++
▪ Prilikom pisanja HTML koda
mogu se koristiti uvlake, što
je i poželjno zbog
preglednosti samog
programa, ali program će
raditi i bez uvlaka dok god
su html oznake (tagovi)
pravilno napisane
▪ Uvlaku je najjednostavnije
napraviti pritiskom na tipku
Tab
11
Osnovne HTML oznake
12
Primjer
▪ Izradi HTML web
stranicu kojoj ćeš za
naslov postaviti „Osnove
HTML-a”.
▪ Unutar tijela stranice
postavi naslov Dobro
došli! veličine <h1> te
tekst u novom odlomku
„Ovo je moja prva web
stranica”.
13
Spremanje i pokretanje dokumenta
▪ Datoteka → Spremi kao
▪ Datoteku nazovi index i
provjeri da je format
datoteke Hyper Text
Markup Language (HTML)
▪ Program pokreni na
stvorenu ikonicu imena
index
▪ Otvara se u mrežnom
pregledniku
14
Primjer - rješenje
15
Zadatak 1
▪ Nadogradi prethodni primjer
tako što ćeš ispod naslova
Dobro došli dodati i:
▪ „Manji naslov” veličine <h2>
▪ „Još manji naslov” veličine <h3>
▪ „Najmanji naslov” veličine <h4>
▪ Spremi promjene i provjeri
rezultat
16
Zadatak 1 - rješenje
17
Zadatak 2
▪ Dogradi prethodni zadatak
▪ Naslov „Dobro došli!” ukosi koristeći
oznaku <i> (italic)
▪ „Manji naslov” podcrtaj koristeći oznaku
<u> (underline)
▪ Odlomak „Ovo je moja prva web
stranica” podebljaj koristeći oznaku
<strong> ili <b>.
▪ Spremi stranicu i provjeri promjene
18
19
Atributi
▪ Pojedine HTML oznake sadrže atribute koji dodatno
opisuju svojstva oznake
20
Zadatak 3
▪ Izradi novi zadatak koristeći html strukturu stranice
▪ Dodaj naslov stranice (<title>) „Pas”
▪ Koristeći naslov veličine 1 (<h1>) koji je poravnat po sredini,
napiši „Pas”
▪ U odlomku ispod naslova napiši „Psi su bili prve domaće
životinje među sisavcima. Ljudi su ih pripitomili prije otprilike
12 000 godina. Sve pasmine potječu od vuka” te ga poravnaj
obostrano.
▪ Spremi stranicu pod imenom pas.html te provjeri rezultat
21
22
Zadatak 4
▪ Ispod odlomka dodajte sliku psa koristeći html oznaku <img>
▪ Na tražilici pronađi sliku psa po želji (poželjno jpg ili png sliku)
▪ Kako bi se dodala slika, unutar <img> upotrijebi atribut src te unutar
njega zalijepi gornju poveznicu slike
▪ <img src=‘ovdje zalijepi poveznicu slike’>
▪ Poravnajmo sliku po sredini
▪ Oznaka <img> ne može primiti atribut align=‘center’, ali će se slika
poravnati po sredini ako je stavimo unutar oznaka <center></center>
▪ Slika se može poravnati i tako da je stavimo unutar paragrafa koji je
atributom centriran <p align=‘center’><img src=‘ ‘>…</p>
23
Zadatak 4 - rezultat
24
25
Zadatak 5
▪ Nadogradi zadatak 4
▪ Ispod slike dodaj novi odlomak koji poravnaj po sredini, a u
njega poveznicu (URL) koja vodi na adresu Wikipedije o
domaćem psu
▪ <p align=‘center’><a href=‘link’>Više o domaćim
psima</a></p>
26
27
Zadatak 5 – konačan izgled stranice
28
Domaći rad
▪ Preuzmi i instaliraj Notepad++
▪ Koristeći HTML jezik, izradi web stranicu koja će:
▪ Za naslov veličine H2 imati tvoje ime i prezime, centrirano po sredini
▪ U novim odlomcima, sve centrirano po sredini, napiši
Mjesto rođenja: tvoje mjesto
Godinu rođenja: tvoju godinu rođenja
Omiljenu knjigu: tvoju omiljenu knjigu
Sport: sport koji treniraš (ako treniraš)
Omiljeni video: Naziv videa te postavi link na njega
Omiljeno jelo: Naziv jela te ispod postavi sliku jela (po sredini), ne
preveliku
▪ Spremi zadatak pod imenom domaci.html te ga pošalji na Loomen
29
Osnove HTML-a
Predstavi se i prezentiraj

Osnove HTML-a

Uploaded by

Document Information

Original Title

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

Osnove HTML-a

Uploaded by

Copyright:

Available Formats

Osnove HTML-a

▪ 2014. HTML 5.0 – zadnja verzija

You might also like