Nastavni predmet SKRIPTNI JEZICI I WEB PROGRAMIRANJE
Naslov cjeline HTML
Naslov jedinice Vježba 5: Sintaksa i osnovni elementi HTML-a
CILJ VJEŽBE
Učenik će moći opisati proces stvaranja i oblikovanja html dokumenata, nabrojiti osnovne elemente
html-a <html>, <body>, <head>, <p>, <h1>-<h6>, <br>, <b>, <hr>, <i>. <!– –>, primijeniti osnovne
elemente html za prikaz web stranice, ispravno upotrebljavati sintaksu html dokumenata, otvarati,
podešavati i spremati html dokumente
PRIPREMA ZA VJEŽBU
Odgovorite na pitanja pisano u bilježnicu
– 1. Objasnite kraticu html. Za što se koristi taj jezik?
HTML (HyperText Markup Language) je prezentacijski jezik za izradu web-stranica. Njime se oblikuje sadržaj i stvaraju hiperveze hippertekst dokumenta.
– 2. Što se pomoću html-a opisuje i što on govori pregledniku?
HTML opisuje kako će se nešto prikazati u web-pregledniku. HTML govori pregledniku kako prikazati hipertekst dokument.
– 3. Nabrojite pet editora html-a koji se mogu koristiti za stvaranje web stranica. Kako obično nazivamo osnovnu html stranicu?
Atom, Notepad ++, Sublime Text, Visual Studio Code, Adobe Dreamweaver CC.
IZVOĐENJE VJEŽBE
- Osnovni dijelovi html dokumenta
- Ispunite tablicu
| Elemenat | Značenje i primjena |
| <!DOCTYPE html> | Deklarira verziju HTML-a u kojoj je dokument pisan |
| <html> | Definira putanju HTML dokumenta |
| <head> | Sadrži informacije o dokumentu |
| <title> | Daje dokumentu ime |
| <body> | Definira tijelo HTML dokumenta |
| <h1>-<h6> | Definira zaglavlje za HTML |
| <p> | Definira odlomak |
– HTML element je definiran početnom oznakom, nekim sadržajem i završnom oznakom:
<tagname>Sadržaj…</tagname>
– Neki HTML dokumenti nemaju sadržaj (npr. <br> elemenat). Takvi se elementi zovu prazni. Prazni
elementi nemaju završnu oznaku.
- Skicirajte osnovu strukturu HTML stranice (https://www.w3schools.com/html/html_intro.asp ). Označite dio koji prikazuje preglednik.
- Objasnite čemu u html elementima služe atributi i gdje se pišu
Atributi pružaju dodatne informacije o elementima. Atributi su uvijek navedeni u početnoj oznaci.
- Istražite i objasnite kako se u pregledniku može vidjeti html kod neke web stranice (bar dva načina).
Kada se nalazimo na nekoj web – stranici možemo pritisnuti tipku F12 na tipkovnici te dobrati kategoriju Elements koja prikazuje html strukture te stranice.
Sintaksa za pisanje komentara je: <!—Ovdje upišite komentar –>
- HTML elementi
– A. Što podrazumijeva pojam ugnježđivanja html elemenata? Navedite primjer.
Stavljanje jednog unutar drugog elementa.
<head>
<body>
<div>
<p>…..
– B. Čemu služi element <br>? Što znači da je to prazan element?
<br> je prekid jedne linije koda. Prazan element znaći da je element sa jednostavnom funkcijom pa ne koristimo pune riječi.
– C. Što preglednik automatski dodaje kod pisanja zaglavlja?
Dodaje ime stranice u pretraživačku liniju.
– D. Zašto je važno koristiti elemente zaglavlja?
Da bi stranica imala svoje ime i svoju posebnost.
– E. Što preglednik automatski dodaje kod korištenja elementa <p>?
Automatski dodaje jednu praznu liniju.
– F. Čemu služi i kako se ispisuje <hr> element?
Koristi se za promjenu teme u HTML-u, Prikazuje se horizontalno i odvaja tematske jedinice
– G. Objasnite <pre> element.
Ostavlja uneseni tekst kako je upisan bez formatiranja.
- Atribut style
} Sintaksa HTML style atributa je <tagname style=”svojstvo(CSS):vrijednost(CSS);”>. Čemu služi
atribut style?
Za ubacivanje css-a u html
} 1. Ispunite tablicu:
Ime svojstva Značenje i neke moguće vrijednosti
background-color boja pozadine, npr: „red”, „#ff0000”, „rgb(255, 0, 0)”
color boja, npr: „red”, „#ff0000”, „rgb(255, 0, 0)”
font-family font, npr: „Serif”
font-size velicina fonta, npr: „22px”
text-align mjesto gdje će se prikazati tekst, npr: „center”
}
3
- HTML oblikovanje – elementi koji ispisuje posebne oblike teksta
- <b> – podebljani tekst
- <strong> – važan tekst
- <i> – ukošeni tekst
- <em> – naglašeni tekst
- <mark> – označeni tekst
- <small> – umanjeni tekst
- <del> – obrisani tekst
- <ins> – ubačeni tekst
- <sub> – indeks
- <sup> – potencija
- Praktičan rad
} Napravite web stranicu odabranog pjesnika, pjevača ili grupe. Web stranica sadrži:
} 1. nekoliko detalja iz života (mali članak od nekoliko odlomaka, na hrvatskom jeziku).
} 2. naslove i tekstove tri odabrane pjesme (može biti i na stranom jeziku)
Komentari