HTML i CSS Vežba 2
Osim što ćemo provežbati sve što smo učili prošli put, u ovoj vežbi ćemo naučiti i kako da zadamo kodni raspored strane, napravićemo razliku između blok i inline elemenata kreiraćemo listu i ubaciti našu prvu sliku u dokument. Naučićemo i nešto o putanjama do resursa, odnosno kao da zadamo sliku ili link do nekog fajla koji se ne nalazi na istoj lokaciji kao naš dokument.
Usput ćemo naučiti još neke CSS atribute koji se odnose na podešavanje fonta.
Preuzmite arhivu sa potrebnim fajlovima za izradu ove vežbe i raspakujte je u svom folderu za vežbu. Zadatak radite tako što menjate fajl index.html.
Šta vežbamo?
Ovde je dat kratak pregled novih tema koje obrađujemo u ovom zadatku.
Kodna strana dokumenta
Prva stvar koja bi trebala da se nađe u zaglavlju dokumenta je informacija o korišćenoj kodnoj strani. U današnje vreme skoro da nema potrebe za ijednom drugom kodnom stranom osim UTF-8, koja omogućava da u istom dokumentu koristimo sva moguća nacionalna pisma definisana u UNICODE standardu. Više o tome u lekciji Kodna strana HTML dokumenta.
<html>
<head>
<meta charset="UTF-8">
...
</head>
...
Prelom linije i promena teme
Prelom linije koristimo kada želimo da tekst "nasilno" pređe u sledeći red, ali ne želimo da "pokidamo" pasus. Takođe na nekim mestima možemo ubaciti horizontalnu liniju koja označava promenu teme u tekstu. Ovo su jednodelni elementi koji se samo "ubace" na neko mesto u tekstu - ne mogu sadržati deo dokumenta. Pročitajte o tome u lekciji Prelom i nova tema.
<p>
Tekst pasusa i u njemu <br> prelazak u novi red.
...
</p>
<hr>
<p>Horizontalna linija označava promenu teme u tekstu.</p>
Liste
U HTML-u možemo kreirati više tipova listi, a onovne su neuređena <ul> i uređena (numerisana) <ol> lista. Unutar bilo koje od ovih lista možemo smestiti <li> stavke. Listama se bavimo u lekciji HTML liste.
<ul>
<li>prva stavka neuređene liste</li>
<li>druga stavka</li>
<li>treća stavka</li>
</ul>
<ol>
<li>prva stavka uređene liste</li>
<li>druga stavka</li>
<li>treća stavka</li>
</ol>
Slike
Priznaćete da Internet sajt bez slika i ne izgleda baš spektakularno. Slike se relativno lako ubacuju. Koristimo jednodelni <img> element koji ima četiri važna parametra:
- src - putanja do slike
- width - širina slike u pikselima
- height - visina slike u pikselima
- alt - alternativni tekst ako se slika ne prikaže (opis slike)
<img src="slika.jpg" width="400" height="250" alt="Opis slike" />
O slikama pročitajte u lekciji Korišćenje grafike u HTML-u.
Blok i inline elementi
Prema načinu prikaza na stranici, razlikujemo dva osnovna tipa elemenata: blok i inline. Blok elementi se ređaju jedan ispod drugog i ako im se ne zada širina, uvek se rašire koliko god mogu. U ove elemente spadaju naslovi, pasusi, liste, tabele... Inline elementi "teku" sa tekstom i mogu biti prelomljeni preko više linija teksta. Njima na primer ne možemo definisati širinu, jer je ni ne mogu imati. U ove elemente spadaju linkovi, naglašen tekst, specifičan tekst i sl.
Postoji i treći tip elemenata, inline-block. U pitanju je element koji ima svoje dimenzije, ali se takav kreće sa tekstom kao jedno veliko slovo. U ovaj tip elemenata spadaju slike. Nešto kasnije ćemo naučiti kako da pomoću CSS-a promenimo tip prikaza bilo kom elementu. U međuvremenu, trebalo bi da znamo da postoje "generički" blok element <div> i inline element <span>.
<div>
Opšti blok element.
</div>
<span>Opšti inline element.</span>
Osnove CSS-a
Veliki broj CSS atributa zahteva vrednosti koje se zadaju u obliku mernih jedinica. Ove merne jedinice mogu biti apsolutne - pikseli (px - tačkice ekrana), pointi (pt), milimetri (mm), ali i relativne - element (em - veličina fonta elementa) ili root element (rem - veličina fonta <body> elementa).
Posebna relativna merna jedinica su procenti (%). Oni se definišu kao "procenat od nečega" što zavisi od atributa do atributa.
Merne jedinice se uvek zadaju odmah uz broj, bez razmaka.
font-size: 12pt;
border-width: 4px;
width: 80%;
O svemu ovome pročitajte u lekciji CSS merne jedinice.
Atributi fonta i teksta
U današnjoj vežbi ćemo se upoznati sa još nekim CSS atributima vezanim za font i tekst.
- font-family - zadajemo font kojim će biti ispisan tekst
- font-size - zadajemo veličinu slova
- font-variant - običan ili small-caps ispis
- text-transform - ovde možemo da zadamo transformaciju teksta u velika ili mala slova
font-family: sans-serif;
font-family: "Calibri", "Arial", sans-serif;
font-size: 12pt;
font-variant: small-caps;
text-transform: uppercase;
Ovi atributi su opisani u lekcijama: CSS atributi fonta i CSS atributi teksta.
Podsetnik
Ako ste zaboravili neku od tema koju smo provežbali prošli put, ovde možete da se podsetite.
- HTML
- CSS
Zadaci
Početni dokument (koji se u ovom slučaju sastoji od "suvog" teksta), možete otvoriti u Web Frontu na START platformi i odmah vežbati u njemu. Da se ne biste stalno prebacivali između stranica, tamo se nalaze i svi zadaci. Vežbu radite tako što menjate početni dokument, sledeći zadatke.
- Kreirati osnovnu HTML strukturu u dokumentu sa HEAD i BODY odeljcima.
- U zaglavlju definisati kodnu stranu UTF-8
- U zaglavlju definisati naziv dokumenta "Web sajtovi" (bez navodnika)
- Delove teksta koji počinju sa:
- Osnova svakog web sajta...
- Ove veštine predstavljaju...
- Web sajtove danas kreiramo...
- HTML (HyperText Markup Language) je...
- Sa druge strane...
- SLIKA
- Pomoću JavaScripta možemo...
- Naslov "Kreiranje web sajta" treba da bude glavni naslov, a naslovi "HTML - sadržaj", "CSS - izgled" i "JavaScript - interaktivnost" podnaslovi.
- Prva rečenica prvog pasusa ("Osnova svakog web sajta je njegov sadržaj.") treba da bude naglašena.
- Odmah posle te prve rečenice ubaciti prelom linije.
- Delove teksta koji glase:
- "Content is the king" (prvi pasus)
- "HyperText Markup Language" (četvrti pasus)
- "Cascade StyleSheets" (peti pasus)
- Lista ("informaciona arhitektura, dizajn sadržaja, optimizacija za pretraživače") treba da bude definisana kao uređena lista.
- Umesto teksta "SLIKA" ubaciti sliku "pic-sunset-street.jpg" iz foldera "img", širine 600, visine 360, sa alternativnim tekstom "Ulica u sumrak".
- Pre pasusa "Web sajtove danas kreiramo..." ubaciti promenu teme (liniju).
- Prvi pasus, lista i drugi pasus treba da budu u jedinstvenom DIV bloku.
- Delovi teksta "HTML (HyperText Markup Language)" iz četvrtog i "CSS (Cascade StyleSheets)" iz petog pasusa treba da budu obeleženi SPAN elementom.
- Cela stranica (<body>) treba da ima boju pozadine #334, boju teksta #fff i font sans-serif.
- Glavni naslov <h1> treba da ima veličinu fonta trostruko veću od osnovnog fonta, boju teksta #fea i da bude ispisan kao small-caps.
- Elemenat <div> treba da ima boju pozadine #644.
- Lista <ol> treba da ima veličinu fonta 1.2em, font serif, ispisan kurzivno.
- Pasus "Web sajtove danas kreiramo..." treba da bude ispisan podebljano i velikim slovima.
- <span> elementi treba da imaju boju pozadine #557.
- Pasus sa slikom treba da bude centriran.
Rešenje
Ako niste sigurni kako da rešite neki zadatak, rešenje možete odmah pogledati ovde...