LV5
- Marin Topolnjak
- Oct 17, 2022
- 2 min read
Updated: Oct 28, 2022
CILJ VJEŽBE
Učenik će moći opisati proces stvaranja i oblikovanja html dokumenata, nabrojiti osnovne elemente html-a 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
1. 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 elemenata |
<title> | početak naslova koji je isključivo u tekstnom obliku |
<body> | početak tijela html dokumenta |
<h1>-<h6> | zaglavlja, h1 označava najbitnije, h6 najmanje bitno zaglavlje |
<p> | početak paragrafa u dokumentu |
->HTML element je definiran početnom oznakom, nekim sadržajem i završnom oznakom: Sadržaj...
->Neki HTML dokumenti nemaju sadržaj (npr. 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>Marincek</title> ------------------> dio koji prikazuje preglednik (naslov)
</head>
<body>
<h1>Najjaci</h1> ---------------> dio koji prikazuje preglednik (naslov zaglavlja)
<p>Konzumacija alkohola</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.
2. HTML elementi
A. Što podrazumijeva pojam ugnježđivanja html elemenata? Navedite primjer.
- Podrazumijevamo pisanje elemenata unutar elemenata.
- Primjer:
<!DOCTYPE html>
<html>
<body>
<p> Ide gas! </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?
- Automatski dodaje margine prije i poslije paragrafa.
F. Čemu služi i kako se ispisuje 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
A. 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 (npr. za naglašavanje) |
font-family | boja paragrafa ili nekog drugog teksta (npr. za naglašavanje) |
font-size | postavlja veličinu fonta nekog paragrafa ili naslova (može služiti za naglašavanje ili odvajanje) |
text-align | poravnanje teksta (naslov u centru, tekst poravnat obostrano) |
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
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)
Comments