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>, <!-- -->.
Moći će primijeniti osnovne elemente html za prikaz web stranice, ispravno upotrebljavati sintaksu html dokumenata, otvarati,
podešavati i spremati html dokumente
Priprema za vježbu:
Zadatak 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.
Zadatak 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.
Zadatak 3: Nabrojite pet editora html-a koji se mogu koristiti za stvaranje web stranica. Kako obično nazivamo osnovnu html stranicu?
Editori: Notepad, Sublime Text, Atom, Notepad++ i jEdit.
Vježba:
1. Osnovni dijelovi html dokumenta:
A. Ispunite tablicu:
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: <!--Ovdje upišite komentar-->
-
Primjer: <!--I think my osovina otišla.-->
2. HTML elementi
A. Što podrazumijeva pojam ugnježđivanja html elemenata? Navedite primjer.
Podrazumijevamo pisanje elemenata unutar elemenata.
Primjer:
<!DOCTYPE html>
<html>
<body>
<p> Otišla mi je osovina! </p>
</body>
</html>
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.
3. Atribut style
-
Sintaksa HTML style atributa je <tagname style="svojstvo(CSS):vrijednost(CSS);">. Čemu služi
atribut style?
A. Ispunite tablicu:
4. 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
5. Praktičan rad
-
A. 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)Rješenje: