LV2
Ovdje upišite svo
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 je kratica za Hyper Text Markup Language. To je skriptni jezik i služi za kreiranje web stranica.
2. Što se pomoću html-a opisuje i što on govori pregledniku?
Pomoću HTML-a se opisuje struktura web-stranice. On govori pregledniku kako da prikaže podatke što znači da je on markup jezik koji služi za određivanje oblika i vrste podataka.
3. Nabrojite pet editora html-a koji se mogu koristiti za stvaranje web stranica. Kako obično nazivamo osnovnu html stranicu?
Notepad, Sublime Text, Atom, Notepad++ i jEdit.
IZVOĐENJE VJEŽBE
Osnovni dijelovi html dokumenta
A. Ispunite tablicu
Elemenat
Značenje i primjena
<!DOCTYPE html>
Deklaracija tipa dokumenta
<html>
Početni element html dokumenta
<head>
Element koji u sebi sadržava više elmenata
<title>
Početak naslova koji je isključivo u tekstnom obliku
<body>
Početak tijela html dokumenta
<h1>-<h6>
Zaglavlja, h1 ozznačava najbtinije, h6 najmanje bitno zaglavlje
<p>
Početak paragrafa u dookumentu
j tekst.
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.
B. Skicirajte osnovu strukturu HTML stranice (https://www.w3schools.com/html/html_intro.asp
). Označite dio koji prikazuje preglednik.
<!DOCTYPE html>
<html>
<head>
<title>OSOVINA</title> --------------------------------------------> dio koji prikazuje preglednik (naslov)
</head>
<body>
<h1>Osovina</h1> ---------------------------------------------------> dio koji prikazuje preglednik (naslov zaglavlja)
<p>I think my osovina otišla.</p> -----------------------------> dio koji prikazuje preglednik (sadržaj zaglavlja)
</body>
</html>
C. Objasnite čemu u html elementima služe atributi i gdje se pišu.
Atributi pružaju više informacija o elementima i uvijek se pišu na početnim "tagovima."
D. Istražite i objasnite kako se u pregledniku može vidjeti html kod neke web stranice (bar dva načina).
Pomoću Inspect Element (F12 ili CTRL+SHIFT+I) i CTRL+U.
Sintaksa za pisanje komentara je: <!—Ovo nije dobro -->
HTML elementi
B. Čemu služi element <br>? Što znači da je to prazan element?
Element <br> definira prekid linije i nema sadržaja.
C. Što preglednik automatski dodaje kod pisanja zaglavlja?
Automatski dodaje margine prije i poslije zaglavlja.
D. Zašto je važno koristiti elemente zaglavlja?
Važno je koristiti tako da pretraživači lakše pronađu našu stranicu.
E. Što preglednik automatski dodaje kod korištenja elementa <p>?
Automatski dodaje margine prije i poslije paragrafa.
F. Čemu služi i kako se ispisuje <hr> element?
Definira prekid tematike i ispisuje se horizontalno.
G. Objasnite <pre> element.
Definira pred formatirani tekst. Tekst unutar <pre> je prikazan u fiksiranoj širini fonta.
Atribut style
Sintaksa HTML style atributa je <tagname>. Čemu služi atribut style?
1. Ispunite tablicu:
Ime svojstva
Značenje i neke moguće vrijednosti
background-color
Boja pozadine (pomoću nje možemo naglasiti temu stranice)
color
Boja paragrafa ili nekog drugog teksta
font-family
font-size
text-align
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)