OBLIKOVANJE SPLETNE STRANI S POMOČJO CSS
Oblikovanje spletne strani s pomočjo CSS-a je veliko bolj enostavno ter pregledno. Lažje je odkrivati napake, ter jih odpraviti. Isto oblikovanje lahko uporabimo pri večih naslovih, elementih, ali paragrafih. Potrebno jih je le pravilno označiti. Za lažjo predstavo in razumevanje sem priložil svojo izvorno kodo spletne strani, kjer se v oblikovanju nahajajo komentarji, kaj katera stvar pomeni. Z kode je mogoče razbrati, kako je potrebo ukaze deklarirati, iz komentarjev pa je razviden pomen. Koda, v kateri se nahaja oblikovanje je označena s krepko pisavo.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css"> /* za oblikovanje moramo odpreti ukaz style css*/
body
{
background-color:rgb(0,100,250); /* v tem ukazu spreminjamo barvo ozadja. Lahko napišemo tudi npr green...*/
}
h1
{
color:black; /*ob vpisu tega izraza spremenimo barvo naslova v črno*/
text-align:center; /*podana sintaksa pa poravna tekst na sredino*/
}
h2
{
font-family:"Comic Sans MS"; /*s pomočjo font.family ukaza spremenimo slog pisave naslova*/
color: white; /*spremenimo barvo*/
text-align: center; /*ter poravnamo na sredino*/
}
p
{
font-family:"Times New Roman"; /*spremenimo pisavo */
text-align: center; /*sredinsko poravnamo*/
font-size:22px; /*Dodamo poljubno velikost*/
}
div
{
text-align: center; /*Z div elementom ter sredinsko poravnavo sem na sredino postavil slike, ter povezave.*/
}
a
/*s tem elementom pa sem povečal velikost pisave, ter barvo, katere spadajo pod ukaz div, kjer sem uredil le poravnavo*/
{
font-size: 25px;
color: #FF0000;
}
</style>
<title>Matej Rakar</title>
</head>
<body>
<h1>Matej Rakar</h1>
<h2>Moja prva osebna spletna stran! :) </h2>
<p>Dobrodošli na moji spletni strani!</p>
<div><img src="http://www.shrani.si/f/1w/wU/4uf6PY5/jaz.jpg" alt="apple"width="300" height="400"/></div>
<p>Sem Matej Rakar, prihajam iz okolice Trebnjega, in sem študent fakultete za informacijske študije. Trenutno obiskujem 1 letnik študija in sicer program DRUŽBOSLOVNI INFORMATIK. </p>
<p>Vsi lepo pozdravljeni</p>
<div><a href="http://matejrakar.blogspot.com/">Obišči moj osebni blog</a></div>
<div><a href="mailto:matejrakar@gmail.com?subject=">Moj elektronska pošta</a></div>
<h1 onclick="this.innerHTML=':):)'">klikni na text!</h1>
</body>
<div>
<form name="input" action="http://www.google.com" method="get">
<input type="submit" value="Google" />
</form> </div>
</html>
Prilagam sliko, kako izgleda spletna stran podane izvorne kode.
Ni komentarjev:
Objavite komentar