Izradi web na temu GMO-a, koji će koristiti CSS. Možeš koristiti CSS kao u primjeru dolje, a možeš izraditi i vlastiti (ili promijeniti navedeni).
Prvo napravi praznu polaznu stranicu (index.html)
Nakon toga upiši CSS kod u stil.css (CSS designer, +, create new css file). U editoru sad imaš source code (HTML) i stil.css tabove između kojih se možeš prebacivati kod uređivanja.
Slijedi slaganje strukture HTML dokumenta.
Div je najlakše umetnuti preko izbornika insert, div, pa ID.
Div omot počinje nakon taga <body i završava prije </body
Ostali div-ovi su jedan iza drugoga. Prije podnožja treba umetnuti klasu clear. Nju najlakše umetnemo pomoću taga <hr, a može i pomoću taga <p
Izgled dokumenta nakon toga je (sa umetnutom slikom)
Kod u tom trenutku je (ovo je glavni dio koda, a ne cijeli HTML):
<link href="stil.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="omot">
<div id="zaglavlje"><img src="GMO-banner.jpg" alt=""/></div>
<div id="menu"> Content for id "menu" Goes Here</div>
<div id="sadrzaj">Content for id "sadrzaj" Goes Here</div>
<p class="clear"> </p>
<div id="podnozje">Content for id "podnozje" Goes Here</div>
</div>
</body>
Slijedi dodavanje linkova i sadržaja. Osim polazne stranice i linka na wikipediu napravite barem još jednu stranicu u kojoj će biti slike i tekst na temu GMO-a.
Izgled sa prvim dijelom sadržaja je sličan kao na slici:
@charset "utf-8";
#omot { width:auto;}
#zaglavlje{ background-color:#56AA9B;}
img { max-width: 100%; height: auto; }
#menu{
float:left;
margin-top:10px;
width:15%;
}
#sadrzaj{
float:left;
width:85%;
}
#podnozje{ background-color:#43DB50}
.clear { clear:both;}
