Izdelali bomo spletno stran, ki bo imela naslednja polja: glavo, dva vzporedna stolpca in črto na dnu.

Uporabili bomo plavajočo postavitev strani, kar pomeni, da bomo širino polj označili v odstotkih. Širino bi lahko določili tudi v pikah, kar bi pomenilo, da je širina strani fiksna in se ne prilagaja velikosti zaslona, zato je plavajoča postavitev praviloma boljša.


Glava

Levo – 20 % širine Desno – 80 % širine

Dno

< !DOCTYPE html>
< html lang = "sl">

< head>
< meta charset = "UTF-8">
< title>dvaStolpca< /title>
< link rel="stylesheet"
type="text/css"
href="dvaS.css" />
< /head>

< body>
< div id = "glava">
< h1>Tukaj napišemo besedilo, ki se bo prikazalo na vrhu strani (glava).< /h1>
< /div>

< div id = "levo">
< h2>Levi stolpec< /h2>
< p>Tukaj napišemo besedilo, ki se bo prikazalo v levem stolpcu.< /p>
< /div>

< div id = "desno">
< h2>Desni stolpec< /h2>
< p>Tukaj napišemo besedilo, ki se bo prikazalo v desnem stolpcu.< /p>
< /div>

< div id= "dno">
< h3>Tukaj napišemo besedilo, ki se bo prikazalo v spodnji vrstici.< /h3>
< /div>

< /body>
< /html>

V 5. lekciji smo si pogledali celotno kodo preproste spletne strani. Ponovimo osnovne pojme.

1. < !DOCTYPE HTML>: ta vrstica pove brskalniku, da dokument vsebuje kodo HTML.

2. Ukaz < html lang = "sl">: ta vrstica brskalniku pove, da uporabljamo slovenski jezik.

3. Ukaz < html> začne, ukaz < /html> pa konča spletno stran. Znotraj teh dveh ukazov je koda za celotno spletno stran.

4. Ukaza < head> in < /head> označujeta poseben del spletne strani, ki ga v slovenščini imenujemo glava. V njem so tehnična navodila za izdelavo spletne strani.

5. Ukaz < meta charset = "UTF-8">: ta vrstica brskalniku pove, kateri nabor znakov naj uporablja. Naboru znakov, ki ga uporabljamo, se imenuje UTF-8. To je vse, kar moramo vedeti o naboru znakov.

6. Ukaz < title>dvaStolpca< /title>: v tej vrstici določimo naslov spletne strani. V našem primeru je naslov "dvaStolpca".

7. Ukaz < link rel="stylesheet"
type="text/css"
href="dvaS.css" />

Zgornje tri vrstice brskalniku povedo, da se podatki CSS ne nahajajo v datoteki HTML, ampak v posebni datoteki dvaS.css. Ukaz < link> pove, da je koda CSS v drugi datoteki. rel="stylesheet" je edina oblika povezave, ki jo bomo kadarkoli uporabili in jo zato avtomatično dodamo. Ukaz type = "text/css" določa stil. Ta je zmeraj test/css. Ukaz href pove, kako se imenuje datoteka, v kateri je zapisana koda CSS. Pri daljših spletnih straneh je zmeraj priporočljivo, da je koda CSS zaradi preglednosti v ločeni datoteki.

8. Med ukazoma < body> in < /body> zapišemo dejansko vsebino spletne strani.

Div je običajno poimenovanje za element ali polje. V tem primeru smo vsakemu polju dodali id in ne razred. To je zato, ker bomo vsak id uporabili samo enkrat, razred se pa lahko večkrat ponavlja. Elementi id se imenujejo glava, levo, desno in dno.

Zgornjo kodo spletne strani lahko pretipkamo v urejevalnik besedil, ki zapiše kodo v čisti obliki. Poimenovanje datoteke moramo zaključiti s .html.

Če nato v Raziskovalcu kliknemo na to datoteko, jo bo brskalnik odprl in videli bomo svojo spletno stran.

Nadaljujemo s kodo CSS. Zapišemo jo v ločeno datoteko in nato posnamemo pod imenom dvaS.css. Datoteko CSS lahko uporabimo ali predelamo tudi za druge spletne strani, kar nam olajša delo.

#glava {
border: 3px double black;
}

#levo {
float: left;
width: 20%;
}

#desno {
float: left;
width: 75%
border-left: 3px double gray;
}

#dno {
clear: both;
text-align: center;
border-top: 3px double gray;
}

Analizirajmo datoteko CSS.

1. Za #levo smo določilo float:left, kar pomeni, da bo element postavljen na levi strani.

2. width: 20% − širino smo določili na 20 % celotne širine spletne strani.

3. Tudi za #desno smo tudi določili float:left kar pomeni, da bo element postavljen desnoi v isto vrsto.

4. Za #desno smo določili širino 75% in ne 80% Zakaj? Nujno je, da je vmes med levo in desno škatlo malo praznega prostora. V nasprotnem primeru bi spletna stran izgledala grdo.

5. Za #dno smo določili clear: both, ker pomeni, da ne bo nobenega plavajočega elementa na levo ali desno. Spodnja vrstica mora zavzeti celotno širino spletne strani.

Ko boste obe datoteki posneli v isto mapo lahko zaženete html datoteko z brskalnikom in vaša spletna stran se bo odprla v brskalniku.

Za vajo spreminjajte HTML in CSS datoteko in si z brskalnikom oglejte spremembe.