Poglej enojno objavo
  #1  
Staro 23.11.2005, 17:15
dragos Uporabnik dragos ni prijavljen
Obsedenec
Prikazne slike uporabnika/ce dragos
Član od: Jul 2003
Naslov: šojkeland - sam una je pa huda z nogami u luft
Sporočila: 19.243
Privzeto [moja] Šola oblikovanja spletnih strani

UVOD

Pri želji po oblikovanju lastne spletne strani, si je potrebno najprej zastaviti nekaj vprašanj:
- zakaj bi želel imeti svojo spletno stran;
- kakšen je cilj njene predstavitve;
- ali bom stran objavil v spletu;
- …

Sam sem se imel željo okusiti, kako se tej stvari streže, saj so mi bile strani, ki sem jih srečeval na spletu, mikavne in izziv še bolj izzivalen. Rekel sem si, »treba je v akcijo«.

Omenim naj, da je na »tržišču« ogromno programske opreme, s katero si olajšate ustvarjalnost in ravnotako je ogromno tehnik ustvarjanja. No, ko sem se jaz tega učil, mi je bil znan, tako opevan FrontPage, s katerim si s čarovnikovo pomočjo zmetal posamezne elemente na stran in evo »pejđ« je bil narejen.
Od FrontPage-a sem se kajkmalu poslovil, saj sem spoznal, da so si strani na spletu podobne kot jajce jajcu in slednje ni bil moj izziv.
Radovednost v meni je bila nemirna in zanimalo me je, kaj pomenijo tisti bau-baui v »špičastih oklepajih«. Res je, da je bilo potrebno seči po literaturi, iskati razlage…
Tako sem, kot sem že prej omenil, opustil FrontPage in stopil ustvarjalnim podvigom naproti z beležnico (notepad) v roki, ops na računalniku.:D

No, ko sem v svoje sive celice uskladiščil nekaj malega znanja, sem si na list naredil osnutek, kako naj bi moja stran izgledala. Toplo vam priporočam, da predhodno fajn potrenirate ukaze (tage), ki vam jih bom v nadaljevanju predstavil in se šele potem podate na pot k bolj resnemu ustvarjanju.

Za zaključek uvoda, še odgovor na vprašanje, kaj sploh potrebujem za začetek. Potrebujete le beležnico in spletni brskalnik, s katerim boste spremljali vaše testne izdelke.

Beležnica/notepad – do nje pridete:
Start/Začetek-->Programs/Programi-->Accessories/Pripomočki-->Notepad/Beležnica

Brskalnik/Explorer – do njega pridete:
Start/Začetek-->Programs/Programi-->Internet Explorer

Priporočilo: da programa nebi zaganjali po dolgem postopku, si na namizju/Desktop naredite Bližnjico/Shortcut.

Kako naredim bližnjico na namizju?
Ko pridete do zgoraj opisanega koraka za zagon programa, z desno miškino tipko kliknite nanj, izberite Properties/Lastnosti in nato Send To/Pošlji na… Desktop/namizje.

Elementi strani

Še preden začnemo z ustvarjanjem spletne strani, moramo vedeti, da se vsaka html stran prične pisat z naslednjimi tagi, ki so obvezni, da boste vašo mojstrovino sploh videli preko brskalnika.
Ti so:
Koda:
<html>
<head>
<title>...</title>
</head>

<body>
.
.
.
</body>
</html>
Poglejmo si podrobno, kaj to pomeni:
  • taga <html> in </html> označujeta začetek in zaključek "pisanja" spletne strani
  • taga <head> in </head> označujeta predel "glave" strani, kjer se vnaša razne kode za prikaz teksta strani, css stile, v glavo strani vgnezdimo tudi razne skripte, ki "poganjajo" posamezne elemente v sami strani; npr. datum in ura..., a o tem kasneje.
    Hm vprašali se boste, kaj pomeni ta <title>...</title> znotraj "glave". Karkoli boste vpisal med tema dvema tagoma, bo kasneje vidno v "tisti" modri vrstici vašega brskalnika, kjer običajno piše Microsoft Internet Explorer
  • začetni <body> in končni </body> tag omejujeta prikaz vsebine na spletni strani, kar pomeni, da vse elemente strani "postavljamo znotraj teh dveh tagov. V samem <body> tagu pa lahko določimo barvo ozadja, sliko v ozadju, barvo povezav...

Vaja:
Sedaj, ko smo spoznali tage za začetek oblikovanja, lahko z zgoraj opisanimi tagi naredimo vajo.

Primer:
Koda:
<html>
<head>
<title>Moja spletna stran</title>
</head>

<body>

Tukaj napišite karkoli in si stran oglejte v vašem brskalniku.

</body>
</html>
Da se boste lažje znajdli v množici map in datotek, vam svetujem, da si ustvarite novo mapo, recimo z imenom mojedelo in vanjo shranite to vajo (save as/shrani kot) in jo poimenujete index.html. Namreč, v večini primerov in zelo pravilno je, da se začetno stran tako poimenuje.
Sedaj vam sledi samo še zagon vašega brskalnika, nato File/Datoteka-->Open/Odpri poiščete vašo index.html datoteko v mapi mojedelo in gumb OK.
In kaj zagledate na strani? Stavek "Tukaj napišite karkoli in si stran oglejte v vašem brskalniku." , ki ste ga vnesli med tagoma <body>...</body>, brez kode oz. tagov.

Opis tagov

Oblikovanje strani v html (hypertext markup language) jeziku je sklop različnih tagov, ki vplivajo na izgled oblikovane strani.

<p>...</p>
označuje odstavek besedila; kar pomeni, karkoli boste napisali znotraj teh tagov, bo tvorilo odstavek.

<b>...</b>
besedilo napisano znotraj teh tagov bo na strani izgledalo kot povdarjeno.

<i>...</i>
besedilo napisano znotraj teh tagov bo na strani izgledalo napisano poševno.

<u>...</u>
besedilo napisano znotraj teh tagov bo na strani izgledalo napisano podčrtanono.

<br>
je eden izmed redkih tagov, ki ga pišemo samostojno to je brez zaključnega taga in pomeni prelom vrstice. Se pravi kadar želite drugo besedo ali stavek zapisati v novi vrstici, ga vstavite na mestu preloma vrstice.

<font>...</font>
je eden izmed tagov, kateremu lahko določimo več parametrov, saj besedilo napisano znotraj samega taga <font>...</font> nebi privzelo nobene lastnosti in bi bilo izpisano navadno. Mi pa kot oblikovalci strani, tega seveda ne želimo. Želeli bi, da bi bilo besedilo obarvano pa recimo tudi določene velikosti in določene vrste pisave.
Če želimo to doseči moramo dodati parametre za vrsto pisave, barvo besedila in velikost črk.
Recimo, da želimo besedo Pozdravljeni napisati s pisavo vrste arial, obarvana naj bo zeleno ter določene velikosti.

Zgledalo bi takole:
<font face="arial" color="green" size="3">Pozdravljeni</font>

S parametrom face smo določili vrsto pisave, s color barvo pisave in size velikost. Priporočljivo je določati vrsto pisave, ki je v garnituri windowsov. Lahko se določi tudi pisava izven Gatesove garniture, sam to je že druga zgodba, malo bolj komplicirana.
Vrednost barv za parameter color se poda v hexadecimalnih vrednostih, z izjemo nekaterih osnovnih. katere vrednost lahko napišete kot ime barve

npr. za rumeno napišete "yellow" vrednost te iste barve je v hexadecimalnem zapisu "ffff00"



...se nadaljuje



Nekoga moraš imeti rad,
pa čeprav trave, reko, drevo ali kamen,
nekomu moraš nasloniti roko na ramo,
da se, lačna, nasiti bližine,
nekomu moraš, moraš,...
(Ivan Minatti)

Nazadnje uredil dragos : 07.12.2005 ob 00:22.