html1 uvod u html
TRANSCRIPT
UVOD U HTML
OPEN1
UVOD U HTML HTML - HyperText Markup Language HTML nije pravi programski jezik
Programski jezici podrazumijevaju obradu podataka(C,C++,JAVA,C#...)
Sastoji se od tagova Tagovi su naredbe koje se nalaze između <>
Npr. <ime_taga> Većinu tagova je potrebno „zatvoriti“ korištenjem
</ime_taga> Između <ime_taga> i </ime_taga> može se
nalaziti kod,tekst... 2
UVOD U HTML Nakon imena taga,obično se navode osobine
<tag osb1=“Vrij1“ osb2=“Vrij2“>Dodatni tekst</tag> Sa tagovima mi ustvari govorimo browseru gdje
želimo da nam prikaže određeni objekat(slika,tekst...) te koje osobine taj objekat ima.
Npr. <slika1 pozicija=donji desni ugao> </slika1> <paragraf1 tip=bold>Prvi paragraf</paragraf1>
Naravno ove naredbe nisu validne u HTML-u ali pokazuju kako HTML funkcioniše
3
UVOD U HTML Tagovi se mogu pisati velikim ili malim slovima
ili kombinovano. Browseri ignorišu razliku malih i velikih slova u
nazivima tagova. Takođe se ne uzima u obzir ni postojanje
višestrukih praznih redova (za prelaz u novi red koristite tag <BR>, a ne taster Enter), višestrukih bjelina - blanko, tabulator,...,.
4
STRUKTURA HTML DOKUMENTA Osnovni tag koji govori pregledniku da se radi o
HTML dokumentu jeste HTML tag <HTML>
.......sve ostalo......
</HTML> 5
STRUKTURA HTML DOKUMENTA Slijedeći,za HTML bitan tag jeste HEAD U <HEAD> sekciji može da se navede
naziv(title), tip dokumenta, kodni raspored, jezik, ključne reči,..
HEAD tag se uvijek nalazi unutar HTML taga <HTML>
<HEAD> .......
</HEAD> .........
</HTML>6
STRUKTURA HTML DOKUMENTA Tag <BODY> predstavlja glavni dio stranice.U
ovom tagu navodimo sve što će se prikazati na web stranici.
Uvijek se navodi unutar HTML i ispod HEAD taga:
<HTML> <HEAD> </HEAD> <BODY> </BODY>
</HTML>7
KONAČNA STRUKTURA HTML DOKUMENTA <HTML> <HEAD> Opis osnovnih podataka o dokumentu </HEAD> <BODY> Zadati sadržaj dokumenta </BODY> </HTML>
8
VJEŽBA 1:ZDRAVO SVIJETE Napisati HTML kod u Notepadu tako da se kao
rezultat dobije stranica kao na slici
9
RJEŠENJE:ZDRAVO SVIJETE Želimo da browser prikaže „Zdravo
svijete“.Prema tome,ukucamo „Zdravo svijete“ između tagova <BODY> </BODY>:
Na slici vidimo da je naslov(gornji ugao stranice) „Moja prva stranica“.
Naslov se definiše tagom <TITLE>.Potrebno ja zatvoriti ovaj tag sa </TITLE>. Ovaj tag je potrebno smjestiti između HEAD tagova
<HEAD> <title>Moja prva stranica</title> </HEAD> 10
KONAČNO RJEŠENJE:ZDRAVO SVIJETE <HTML> <HEAD> <title>Moja prva stranica</title> </HEAD> <BODY> Zdravo svijete </BODY> </HTML>
Ovako napisan dokument snimimo kao index.html(umjesto index možemo pisati bilo koje drugo ime).File->Save As...->
File name: index.html Save as type : All files SAVE Otvorimo snimljen fajl sa bilo kojim browserom i dobijemo našu
prvu web stranicu.11
KOMENTAR VJEŽBE 1 Nismo rekli browseru na koji način će prikazati
ovaj tekst.On će to učiniti po ličnom nahođenju,tj. onako kako je programiran.
12
TAGOVI ZA RAD SA TEKSTOM(H,P,PRE,BR)
Za rad sa tekstom koristi se više tagova.Jedna grupa tagova su h tagovi.
Koriste se za specificiranje različitih naslova.Postoji 6 ovih tagova(h1,h2,...,h6),gdje je h1 naslov najvišeg nivoa.
Primjer h tag: <h1>OPEN</h1> <h4>OPEN</h4>
Probajte primjer 13
TAGOVI ZA RAD SA TEKSTOM(H,P,PRE,BR) Često korišten tag je i <p> tag. Služi za specifikaciju paragrafa. Osobina ovog taga je ta što ne formatira tekst.
Primjer p tag: <p>Edin Dzeko Juventus Manchester city AMD ATI</p>
Probati i komentarisati rezultat 14
TAGOVI ZA RAD SA TEKSTOM(H,P,PRE,BR) Tag <pre> služi za unos preformatiranog teksta. Primjer pre tag:
<pre>Edin Dzeko Juventus Manchester city AMD ATI</pre>
Probati i komentarisati rezultat
15
TAGOVI ZA RAD SA TEKSTOM(H,P,PRE,BR) Tag <br> Služi za prelazak u slijedeći red. Postavlja se samo na jednom mjestu i to u obliku: <br />
Primjer br tag: <p>Edin Dzeko Juventus <br /> Manchester city AMD Nvidia</p> 16
VJEŽBA 2 Kreirati web stranicu prikazanu na slici dole. Prvih šest linija teksta su naslovi poredani korištenjem h tagova. Slijedeće dvije rečenice razdvojiti koristeći br tag. Zadnju rečenicu ispisati korištenjem h taga najvišeg prioriteta. Sav tekst mora biti unutar tagova.
17
RJEŠENJE VJEŽBE 2 <HTML> <HEAD><title>Zdravo</title></HEAD> <BODY> <h1>Bosna i Hercegovina</h1> <h2>OPEN</h2> <h3>Cevapi</h3> <h4>Burek iz Pekare Tusanj</h4> <h5>Kurs web programiranja</h5> <p>Kurs web programiranja <br/>Kurs web dizajna </p> <p>A sta da radim Kada odu prijatelji moji Kada ode djevojka na koju bacam oci
I tako redom dan za danom ... </p> <pre> AMD jednostavno ima bolje procesore od Intela.</pre>
<h1>Zivio OPENSOURCE pokret!</h1>
</BODY></HTML>18
POBROJANE I NEPOBROJANE LISTE
Tag <ul> služi za formiranje nepobrojane liste.
Tag <ol> služi za formiranje pobrojane liste.
<li> specificira novi element unutar pobrojane ili nepobrojane liste.
19
POBROJANE I NEPOBROJANE LISTE Primjer ul tag: <ul> <li>AMD</li> <li>INTEL</li> <li>Nvidia</li> <li>Ati</li> <li>Asus</li> <li>Hitachi</li> <li>WD</li> </ul> Probati i komentarisati rezultat 20
POBROJANE I NEPOBROJANE LISTE Primjer ol tag: <ol> <li>INFO</li> <li>Bug</li> <li>PcPlay</li> <li>PcGamer</li> <li>Hacker</li> <li>Mreza</li> </ol> Probati i komentarisati rezultat 21
22