HTML

Kurs wb dizajna početni nivo
Ciljevi kursa:
1. Proći kroz osnovne pojmove HTML-a i CSS-a
2. Za svaki pređeni dio teorije uraditi praktične primjere
3. Nakon pređenog teoretskog dijela započeti izradu jednostavnog statičnog
sajta koji se sastoji iz 6 raličitih stranica
4. Na 2/3 i kraju kursa testovi provjere znanja stečenog na predhodnim
predavanjima
5. Izrada one-page stranice
6. Po zavrsetku kursa dobija se zavrsni rad koji je takođe sajt i rok za njegovu
izradu jer 15 dana i koji je uslov za dobijanje diplome
HTML
Uvod u HTML
Cilj prvog predavanja:
1. Upoznavanje sa tagovima paragrafa i naslova
2. Upznavanje sa tagovima za boldan i iskošen text, prelom texta
3. Upoznavnje sa tagovima za uređene i neuređene liste
4. Atribut type
5. Upotreba naučenih tagova u konkretnim primjerima

Šta je HTML?
Na ovom kursu upoznaćemo HTML, proći većinu elemenata te stvoriti temelj

za daljnje proučavanje HTML-a i izradu web stranica.
HTML je akronim od HyperText Markup Lenguage i to je opisni jezik pomoću

kojeg kreiramo web stranice.Za kreiranje web stranica su Vam potrebni
jedan od mnogih programa za uređivanje texta (text editora) u koje
ispisujemo kodove i neki od web pretraživača poput Google Chrom ili
Mozilla Firefox u kojima se taj kod prikazuje.
Za naša predavanja koristićemo text editor Notepad++ besplatni software

za uređivanje texta a može se preuzeti sa adrese http://notepad-plus-
plus.org
HTML Elementi
Struktura HTML dokumenta je striktno definisana.Osnovni gradivni element je

HTML tag.
Tagovi su okviri koji nam daju informaciju o sadržaju koji se nalazi unutar njih.
HTML elementi se sastoje iz tri dijela:
1. Otvarajući tag
2. Zatvarajući tag
3. Sadržaj između njih
Postoje još i samozatvarajući tagovi koji nemaju sadržaj
<tag>Sadržaj</tag>
Osnovna struktura HTML dokumenta
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Ovo je onovna struktura HTML dokumenta. Početnim
<html> i deklaracijom !DOCTYPE pretraživaču govorimo
da otvara html dokument i to HTML5 dokument zbog
jednostavne i kratke deklaracije !doctype.
Zatim se otvaraju i zatvaraju tagovi head i body.
Unutar head taga upisujemo podatke bitne za pretraživača
kao što su tzv. meta tagovi kao što je opisni meta tag
(description), charset(npr. utf-8), zatim upisujemo i tag title
koji možete primijetiti kada otvarate web stranicu u tabu
otvorenog prozora pretraživača.
Body tag slijdi odmah poslije head taga i u njemu se nalazi
sve što je direktno vidljivo na stranici.
Tagovi za naslove i paragraf
 Najčešće korišteni tagovi HTML-a su tagovi za naslove i paragrafe.
 Tagovi za naslove su:

<h1>Lorem ipsum dolor sit ame</h1>
Kod naslova se mora poštovati pravilna hijerarhija naslova.Tag h1 se koristi
kao glavni naslov,h2 za podnaslove i ako se javlja potreba za daljim
grananjem texta koristimo h3 podnaslove itd.Ne možemo postaviti tag h2
ispred taga h1 ili h4 odmah poslije h1.
Tag za paragrafe je:
<p> Integer eget diam at enim interdum lacinia ac laoreet diam.

Pellentesque non molestie nulla, eget molestie ex. Nam blandit tellus a
malesuada. Donec auctor porta iaculis. Vivamus porttitor lacinia
semper. Quisque aliquam odio quis interdum convallis. Nam placerat
lectus ac justo posuere efficitur. Nam ut elementum eros. Curabitur
sed tincidunt erat.</p>
Još neki tagovi koji se koriste za tekst: Zadatak: izrada prve web stranice
<!DOCTYPE html>
<br> samozatvarajući tag za prelom teksta <html>
<head>
<b></b> tag za podebljanje teksta(bold) <meta charset="utf-8"/>
</head>
<strong></strong> tag za podebljan naglašen <body>
tekst <h1>Moja prva web stranica</h1>
<p>Ovo je moja<strong>prva web
<i></i> tag za iskošen tekst(italic) stranica</strong><br>i ovdje pišem sav
sadržaj koji želim prikazati.</p>
<em></em> tag za naglašen iskošen tekst <h2><em>Škola HTML-a</em></h2>
</body>
</html>
Liste
Pod pojmom liste podrazumjevamo jednostavno odvajanje sadržaja u smislene
cjeline pa pored svoje osnovne namjene nabrajanja mogu poslužiti i za
struktuiranje mnoštva različitih sadržaja na web stranicama.
Elementi koji označuju početak izavršetak lista su :
1) <ol></ol> za uređenu listu
2)<ul></ul> za neuređenu listu
Nakon što se lista otvori, svaki član liste mora biti obilježen sa tagom li :
<li>Naziv člana ili cijeli sadržaj</li>.
Uređene liste su liste čije se stavke označavaju nekim tipom rednih
elemenata,najčešće brojevima,rimskim brojeima ili slovima alfabeta.
Neuređene liste su liste čije se stavke označavaju raznim elementima koje
nazivamo bulitima za razliku od uređenih lista ne potencira se redosljed elemenata.
Zadatak:napraviti svoju listu najdražih filmova i pjesama.Neka filmovi budu u
uređenoj a pjesme u neuređenoj listi
<!DOCTYPE html>
<html>
<head>
<title>liste</title>
<meta charset="utf-8"/>
</head>
<body>
<h1>Moja prva web stranica</h1>
<p>Ovo je moja<strong>prva web stranica
</strong><br/>i ovdje pišem sav sadržaj koji želim prikazati.</p>
<h2><em>Škola HTML-a</em></h2>
<ol>
<li>Film 1</li>
<li>Film 2</li>
<li>Film 3</li>
</ol>
<ul>
<li>Pjesma 1</li>
<li>Pjesma 2</li>
<li>Pjesma 3 </li>
</ul>
</body>
</html>
Ugniježđene liste
Ugniježđene liste za razliku od predhodnih imaju više nivoa kao na primjer:
<ul>
<li>prvi</li>
<li>drugi
<ul>
<li>drugi1</li>
<li>drugi2</li>
<li>drugi3</li>
</ul>
</li>
<li>treći</li>
</ul>
Zadatak: Samostalno uraditi uređenu listu u koju je ugniježđena neuređena lista sa sadržajem po
izboru
HTML atributi
 Atributi obezbjeđuju dodatne informacije o HTML elementima.
 Svi HTML elementi mogu imati atributeAtributi daju dodatne informacije o
 Atributi obično dolaze u ime/vrijednost parovima kao npr : ime='vrijednost'
 HTML5 standard ne zahtjeva mala slova kod imena atributa. Atribut naziv
može biti napisan i malim i velikim slovima, NAZIV/naziv/Naziv. W3C
preporuka je uptreba malih slova u HTML-u.
 HTML5 standard ne zahtjeva navodnike oko vrijednosti atributa. W3C
preporuka je upotreba navodnika u HTML-u.
 Dupli navodnici oko vrijednosti atributa su najčešći u HTML-u, ali jednostruki
navodni znakovi se također mogu koristiti.
Simbol koji se prikazuje ispred stavki liste može se definisati
pomoću CSS opisa li kroz HTML atribut type.
Za sada ćemo se zadržati na HTML varijanti.
Atribut type za neuređene liste može imati sljedece

vrijednosti:
circle-krug
disc-puni krug
square-kvadrat
Za uređene liste može biti:
A-velika slova
a-mala slova
I-veliki rimski brojrvi
i-mali rimski brojevi
Primjer upotrebe atributa type:

<ol type=“a”>
<li>prvi</li>
<li>drugi</li>
<li>treći</li>
</ol>
Danas smo naučili:
1. Tagovi paragrafa, naslova
2. Upznavanje sa tagovima za boldan i iskošen text, prelom texta
3. Upoznavnje sa tagovima za uređene i neuređene liste
4. Atribut type

HTML

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

HTML

Uploaded by

Copyright:

Available Formats

Kurs wb dizajna početni nivo

2. Upznavanje sa tagovima za boldan i iskošen text, prelom texta

3. Upoznavnje sa tagovima za uređene i neuređene liste

5. Upotreba naučenih tagova u konkretnim primjerima

Na ovom kursu upoznaćemo HTML, proći većinu elemenata te stvoriti temelj

HTML je akronim od HyperText Markup Lenguage i to je opisni jezik pomoću

Za naša predavanja koristićemo text editor Notepad++ besplatni software

Struktura HTML dokumenta je striktno definisana.Osnovni gradivni element je

 Najčešće korišteni tagovi HTML-a su tagovi za naslove i paragrafe.

 Tagovi za naslove su:

Tag za paragrafe je:

<p> Integer eget diam at enim interdum lacinia ac laoreet diam.

Za sada ćemo se zadržati na HTML varijanti.

Atribut type za neuređene liste može imati sljedece

Za uređene liste može biti:

Primjer upotrebe atributa type:

1. Tagovi paragrafa, naslova

2. Upznavanje sa tagovima za boldan i iskošen text, prelom texta

3. Upoznavnje sa tagovima za uređene i neuređene liste

You might also like