Lv17.

LV17. CSS model okvira, tekst, ikone

Petar Lovaković, Filip Marangunić 3.A

Priprema

1. Što je font? Kako se fontovi mogu podijeliti? Po čemu se mogu razlikovati?

- Font je skup znakova (slova, brojeva, interpunkcijskih znakova itd.) istog stila, dizajna i veličine. Oni se koriste za prikazivanje teksta na računalima, tiskanje ili drugim medijima.

- Podjela fontova:

- Serife i bezserifi: Fontovi s serifima imaju male izbočene "ušiće" ili "nogice" na krajevima slova, dok su bezserifi fontovi ravni i nemaju takve dodatke.

- Fiksni i proporcionalni: Fiksni fontovi imaju jednaku širinu za svako slovo, dok su proporcionalni prilagođeni širini samog slova.

- Bold, italic, underline: Različiti stilovi fontova koji se koriste za dodavanje naglaska ili naglašavanja određenih dijelova teksta.

- Monospaced i proporcionalni: Monospaced fontovi imaju jednaku širinu za svaki znak, dok proporcionalni prilagođavaju širinu znaka.

- Script, sans-serif, slab serif: Različiti stilovi fontova s različitim karakteristikama dizajna.

- Razlike među fontovima:

- Veličina: Fontovi mogu imati različite veličine, što utječe na čitljivost i izgled teksta.

- Debljina: Fontovi se mogu razlikovati po debljini linija, od tankih do debelih.

- Stilovi: Fontovi mogu imati različite stilove kao što su normalni, bold, italic, underline itd.

- Dizajn: Različiti fontovi mogu imati različite dizajnerske elemente, poput oblika slova, serifa, itd.

2. Što znate o “obiteljima” fontova? Navedite neke.

- Obitelj fontova obuhvaća različite stilove, debljine i varijante istog osnovnog dizajna fonta. Obitelji fontova često uključuju regularne stilove, bold, italic, bold italic, light, medium i slično. Neki poznati primjeri obitelji fontova uključuju:

- Helvetica: Obitelj fontova koja je bezserifa i poznata po svojoj jednostavnosti i čistom dizajnu.

- Times New Roman: Serifna obitelj fontova koja se često koristi u tiskanim medijima, kao što su knjige i novine.

- Arial: Bezserifna obitelj fontova koja je slična Helvetica-i i često se koristi u digitalnim medijima.

- Garamond: Serifna obitelj fontova s elegantnim i klasičnim stilom, često korištena u tiskarskoj industriji.

- Roboto: Moderan sans-serif font razvijen od strane Google-a, prilagođen za digitalne medije.

- Courier New: Monospaced serifni font često korišten za programiranje i tiskanje teksta u fiksnim stupcima.

Vježba

1.

2.

3.

Zadnji zadatak

<!DOCTYPE html>

<head>

<style>

body {

font-family: 'Arial', sans-serif;

margin: 20px;

font-size: 60px;

color: #333;

background-color: #FFEB3B;

}

h1{

text-aling: center;

font-size: 70px}

.text-with-icons {

display: flex;

align-items: center;

justify-content: center;

flex-wrap: wrap;

color: #009688;

}

.icon {

font-size: 60px;

margin: 5px;

color: #E91E63;

}

.fa-car {

color: #FFC107;

}

.fa-sun {

color: #FF9800;

}

.fa-water {

color: #2196F3;

}

.fa-tree {

color: #4CAF50;

}

.fa-chair {

color: #8B4513;

}

.fa-circle {

color: #1E90FF;

}

</style>

<title>Dječja Stranica</title>

<h1>Petar Lovaković i Filip Maragunić - Žarko ide u pustolovinu</h1>

</head>

<body>

<p>U ulici, pored <i class="icon fas fa-home"></i>, vidio je <i class="icon fas fa-car"></i> i <i class="icon fas fa-tree"></i>.</p>

<p>Na travi, blizu <i class="icon fas fa-water"></i>, sjedila je <i class="icon fas fa-cat"></i>.</p>

</div>

<p>U logoru, pored <i class="icon fas fa-tree"></i><i class="icon fas fa-tree"></i>, vidio je <i class="icon fas fa-dog"></i> i <i class="icon fas fa-cat"></i>.</p>

</div>

<p>Na travi, blizu logora, sjedio je <i class="icon fas fa-horse"></i>.</p>

</div>

<p>Nakon što je vidio <i class="icon fas fa-horse"></i>, Žarko je sjeo na <i class="icon fas fa-chair"></i> i gledao je <i class="icon fas fa-sun"></i>.</p>

</div>

<p>Sunce je bilo jako toplo, pa je odlučio otići na plažu uz <i class="icon fas fa-water"></i>.</p>

</div>

<p>Na plaži se igrao s <i class="icon fas fa-circle"></i>.</p>

</div>

<p>Umoran od igre, sjedio je na <i class="icon fas fa-chair"></i> i uživao u prekrasnom zalasku <i class="icon fas fa-sun"></i>.</p>

</div>

</body>

</html>