WEBnSTUDY.com
HTML i CSS Vežbe

HTML i CSS Vežba 3

Ako želite da radite u "pravom" tekst editoru, skinite arhivu sa potrebnim fajlovima za izradu ove vežbe i raspakujte je u svom folderu.

Podsetnik

Ovde smo izdvojili linkove na tekstove koji su vam potrebni kako biste mogli da rešite sve zadatke.

Izgled urađene stranice

Zadaci

Početni dokument (koji se u ovom slučaju sastoji od teksta sa nekim osnovnim HTML oznakama), 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. Od ove vežbe će vam biti potreban i CSS Panel koji se nalazi u sklopu Web Fronta.

zad-html-003-sr
  1. Kreirati osnovnu HTML strukturu u dokumentu sa HEAD i BODY odeljcima.
  2. U zaglavlju definisati kodnu stranu UTF-8
  3. U zaglavlju definisati naziv dokumenta "prica o vozovima"
  4. Delove teksta koji počinju sa:
    • Lejton Hauard III je šetao...
    • Dan je bio vetrovit...
    • Sunce se polako klonilo zapadu...
    • Lejton nije voleo kočije...
    definisati kao pasuse.
  5. Početak prvog pasusa koji glasi "Lejton Hauard III je šetao plažom" treba da bude naglašen.
  6. Dijalog "Kako ćeš da putuješ bilo kuda, ako ne jašeš niti se voziš kočijama" u petom pasusu treba da bude ispisan u drugom tonu.
  7. U sledećem pasusu, pre dijaloga "Gluposti" ubaciti prelom linije.
  8. Naslov "Dan na plaži" treba da bude glavni naslov, a "Vozovi" podnaslov.
  9. Rečenica "Vozovi su za Lejtona bili druga priča." (odmah posle podnaslova) treba da bude markirana.
  10. Red vožnje ("725 - Teretni za Kardif"...) treba da bude neuređena lista.
  11. U redu vožnje, minuti treba da budu u eksponentu.
  12. Pre pasusa "Ujak ga je i posavetovao..." ubaciti promenu teme (liniju).
  13. Umesto teksta "SLIKA" ubaciti sliku "pic-shell.jpg" iz foldera "img", širine 400, visine 260, sa alternativnim tekstom "Slika školjke".
  14. U poslednjem pasusu, tekst "Železnička stanica u pravom svetu" treba da bude link na sajt "en.wikipedia.org/wiki/Charing_Cross_railway_station".
  15. Svi pasusi teksta (ceo dokumet osim glavnog naslova) treba da budu u jedinstvenom DIV bloku.
  16. Ceo dokument treba da ima font sans-serif, boju pozadine #eee i boju teksta navy.
  17. Elemenat <div> treba da bude širine 80% i postavljen na sredinu stranice.
  18. Elemenat <h1> treba da ima gornju marginu od 0px, a veličinu fonta 28pt.
  19. Elemenat <i> treba da ima veličinu fonta 14pt, boju teal i font serif.
  20. Elemenat <img> treba da ima okvir od 8px, bele boje.
  21. Centrirati pasus sa slikom koristeći inline-stil.
  22. Dopuniti CSS formatiranja elemenata po uzoru na sliku.

Rešenje

Ako niste sigurni kako da uradite neki zadatak, kompletno rešenje možete odmah pogledati ovde...

zad-html-003-sr-res
Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.
Ovaj sajt koristi tehnologiju kolačića (cookies) radi vođenja interne statistike u cilju unapređenja korisničkog iskustva. Tako prikupljeni podaci su anonimni i nedostupni trećim licima. Vaša privatnost nije ugrožena ni na koji način.