Vježba 06: HTML stilovi, poveznice i slike

 

Vježba 6: HTML stilovi, poveznice i slike

Leon Kolarić

PRIPREMA ZA VJEŽBU

 

1. Na koje se načine u HTML-u mogu naznačiti boje (navedite bar tri različita načina)? Navedite
pet različitih imena boja.

Boje u HTML-u možemo naznačiti u obliku RGB-a, heksadecimalno i HSL-a. 

Boja  HEX RGB HSL
ljubičasta #a020f0 rgb(160,32,240) hsl(276.9°, 87.4%, 53.3%)
narančasta #ffbf00 rgb(255,191,0) hsl(44.9°, 100%, 50%)
rozna #ff69b4 rgb(255,105,180) hsl(330°, 100%, 70.6%)
zelena #39ff14 rgb(57,255,20) hsl(110.6°, 100%, 53.9%)
siva #c0c2c9 rgb(192,194,201) hsl(226.7°, 7.7%, 77.1%)

2. Što znači kratica CSS? Za što se koristi CSS?

CSS znači Cascading Style Sheets, a koristi se za koristi se za stiliziranje izgleda web stranica.

3. Kako se koristi „inline“ CSS?

Inline CSS se koristi tako da u HTML element dodamo style atribut.

4. Što su poveznice? Koje vrste poveznica znate?

Poveznice su veze između dvije web stranice. Poznajem internu i vanjsku poveznicu.

1. Stilovi boja (u zadacima koristite najmanje dva načina za označavanje boja)

A. Napravite stranicu na kojoj će biti dva teksta sa dva podnaslova o proizvoljnoj temi, proizvodu
ili predmetu: prvi će tekst govoriti o dobrim osobinama, nosit će podnaslov „Prednosti:“ i bit će
napisan crnim tekstom na bijeloj pozadini, drugi dio teksta treba nositi podnaslov „Nedostaci:“ i
govoriti o nedostacima bijelim tekstom na crnoj pozadini. U svakom odlomku treba biti bar četiri
retka teksta.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>Umijetna inteligencija</h1>

<h2>Prednosti</h2>
<p>AI može automatizirati rutinske zadatke, što povećava produktivnost.
AI sustavi mogu raditi bez prestanka, pružajući stalnu uslugu.
AI može smanjiti pogreške i povećati točnost s preciznošću.
Obrada velikih količina podataka
AI može brzo obraditi ogromne količine podataka i izvući korisne uvide.</p>

<h2 style=”background-color:black;color:white”>Nedostaci</h2>
<p style=”background-color:black;color:white”>Izgradnja i održavanje AI sustava može biti skupo.
AI može zamijeniti neke poslove, što može dovesti do gubitka radnih mjesta.
Prevelika ovisnost o AI može dovesti do smanjenja ljudskih vještina.
AI sustavi mogu biti meta hakerskih napada, što može dovesti do sigurnosnih problema.</p>

</body>
</html>

 

B. Napravite stranicu na kojoj ćete uokvireno jedno ispod drugog ispisati nazive godišnjih doba u
bojama tipičnim za pojedino godišnje doba. Upotrijebite boje za pozadinu tekstova, za tekstove i
za okvire. Boje birajte tako da svi tekstovi budu čitljivi.

 

2. HTML poveznice

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>Lokaliteti Čakovca</h1>

<p>
Čakovec je grad na sjeveru Hrvatske. Glavni je grad Međimurske županije te se smatra gradom Zrinskih.
<br>
Poznati lokaliteti:
</p>
<a href=”https://riznica.hr/” target=”_blank”>Riznica Međimurja</a>
<br>
<a href=”https://www.rustika.hr/” target=”_blank”>Restoran Rustika</a>
<br>
<a href=”https://kcc.hr/” target=”_blank”>Knjižnica “Nikola Zrinski” Čakovec</a>
<br>
<a href=”https://tsck.hr/” target=”_blank”>Tehnička škola Čakovec</a>
<br>
<a href=”https://ekom.hr/objekti/gradski-bazeni/” target=”_blank”>Gradski bazeni “Marija Ružić” Čakovec</a>
<br>

</body>
</html>

3. HTML – slike

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>Lokaliteti Čakovca</h1>

<p>
Čakovec je grad na sjeveru Hrvatske. Glavni je grad Međimurske županije te se smatra gradom Zrinskih.
<br>
Poznati lokaliteti:
</p>

<img src=”https://riznica.hr/wp-content/uploads/2021/06/foto-gdjeproslost.jpg” alt=”Slika Riznice Međimurja” style=”width:1270px;height:901px;”>
<br>
<a href=”https://riznica.hr/” target=”_blank”>Riznica Međimurja</a>
<br>
<br>
<img src=”https://trattoriarustica.hr/wp-content/uploads/2023/01/129008824_10157972815208262_6401493218549415754_n.jpg” alt=”Slika restorana Rustike” style=”width:1366px;height:768px;”>
<br>
<a href=”https://www.rustika.hr/” target=”_blank”>Restoran Rustika</a>
<br>
<br>
<img src=”https://travelcroatia.live/wp-content/uploads/2021/11/3-1024×768-1.jpg” alt=”Slika Knjižnice Nikola Zrinski Čakovec ” style=”width:1024px;height:768px;”>
<br>
<a href=”https://kcc.hr/” target=”_blank”>Knjižnica “Nikola Zrinski” Čakovec</a>
<br>
<br>

<img src=”https://tsck.hr/wp-content/uploads/2022/06/DJI_0247.jpg” alt=”Slika Tehničke škole Čakovec” style=”width:1100px;height:606px;”>
<br>
<a href=”https://tsck.hr/” target=”_blank”>Tehnička škola Čakovec</a>
<br>
<br>

<img src=”https://ekom.hr/wp-content/uploads/2020/01/bazeni-1.jpg” alt=”Slika Gradskih bazena Čakovec ” style=”width:1920px;height:1280px;”>
<a href=”https://ekom.hr/objekti/gradski-bazeni/” target=”_blank”>Gradski bazeni “Marija Ružić” Čakovec</a>
<br>
<br>

</body>
</html>