Komplettera Stilmallen

Den här guiden utgår från webbsidan och stilmallen som skapats i de tidigare guiderna under rubriken HTML & CSS.

Här ska stilmallen kompletteras litegrann - så att den innehåller de mest grundläggande formateringarna.

Inledning

Din Html-sida byggs ju upp av taggar som <body>, <p>, <h1> - <h6>, <ul>, <a>, <hr> osv.

Med en Stilmall kan man ge Html-taggarna speciella egenskaper och på så sätt själv styra innehållets utseende. Man kan bestämma typsnitt, textfärg, textstorlek, marginaler, bakgrundsfärg och mycket mer.

Man kan också skapa egna klasser och identiteter för att styra sidans utseende med CSS. Läs mer om det i CSS guiden.

I den här guiden heter själva webbsidan webbsida.html och utgår från HTML-dokumentet som skapats i de tidigare guiderna. Webbsidan har redan en enkel layout och i sidans huvud länkas till en extern stilmall som här heter: stilmall.css.

Så här ser grunden för HTML-dokumentet, webbsida.html, ut:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="sv">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>MIN WEBBSIDA</title>
<meta name="author" content="Namn">
<meta name="description" content="Beskrivning.">
<meta name="keywords" content="nyckelord, en fras, nyckelord">
<link rel="stylesheet" href="stilmall.css" type="text/css">
</head>
<body>

<div id="layout">

<div id="main">

<h1>Huvudrubrik</h1>
<p>Lorem...</p>
<p>Lorem...</p>
<p>Här är en lista:</p>
<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
<li>Punkt 4</li>
<li>Punkt 5</li>
</ul>
<p>Här är en länk: <a>::</a></p>

</div>

<div id="side">

<ul id="meny">
<li>» <a href="sida1.html" title="Beskrivning av länken">Sida 1</a></li>
<li>» <a href="sida2.html" title="Beskrivning av länken">Sida 2</a></li>
<li>» <a href="sida3.html" title="Beskrivning av länken">Sida 3</a></li>
<li>» <a href="sida4.html" title="Beskrivning av länken">Sida 4</a></li>
<li>» <a href="sida5.html" title="Beskrivning av länken">Sida 5</a></li>
</ul>

</div>

<br class="clear">

</div>

</body>
</html>

Om du har en stilmall som heter något annat än stilmall.css - ska du förstås skriva det namnet i koden i stället...

Här kan du testa hur sidan ser ut utan Stilmall / CSS - öppnas i ett nytt fönster!

Så här ser CSS-dokumentet - Stilmallen - ut: stilmall.css.

body {
padding: 0; margin: 0;
margin-top: 20px; margin-left: 30px;
font-size: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
background-color: #FFFFFF;
background-image: url();
background-repeat: repeat;
}

h1 {
font-family: Georgia, "Times New Roman", serif;
color: #000000;
}

.clear { clear: both; }

#layout { width: 98%; }

#side {
width: 22%;
float: left;
padding-top: 4em;
}

#main {
width: 75%;
float: right;
}

#meny {
list-style-type: none;
line-height: 1.5em;
padding: 0; margin: 0;
}

#meny a {
color: #000000;
font-weight: bold;
text-decoration: none;
}

#meny a:hover {
text-decoration: underline;
}

Här kan du testa hur sidan ser ut med Stilmall / CSS - öppnas i ett nytt fönster!

 Till Toppen 

Kommentarer

Innan webbsidan och stilmallen kompletteras vill jag bara göra dig bekant med ett finurligt sätt att strukturera din kod.

I både HTML-dokumentet och stilmallen kan man infoga kommentarer - som fungerar som parenteser - i koden. Dessa hjälper dig att hålla reda på de olika delarna när koden växer.

Så här ser en kommentar i HTML-koden ut:

<!--  -->

Exempel:

<!-- Här skrivs kommentaren -->

Så här ser en kommentar i CSS-koden ut:

/*  */

Exempel:

/* Här skrivs kommentaren */

Det som skrivs in i kommentaren syns inte på sidan - utan endast när man tittar på koden. De är till för att du själv ska kunna hålla reda på allt lite lättare.

I guiden nedan kommer koderna att struktureras med kommentarer.

OBS!
Vad du skriver in i dina kommentarer och var du placerar dem - är helt upp till dig själv. Kommentarerna nedan är bara förslag!

 Till Toppen 

Mer innehåll

Innan stilmallen kompletteras ska lite mer innehåll skrivas in på själva sidan, HTML-dokumentet: webbsida.html: Fler rubriker, en avdelare och några kommentarer för att markera var de olika delarna på sidan avslutas.

Så här ser det ut då på webbsida.html:

<body>
<div id="layout">

<div id="main">

<h1>Huvudrubrik </h1>

<h2>Rubrik h2 </h2>
<p>Lorem...</p>

<h3>Rubrik h3 </h3>
<p>Lorem...</p>

<h4>Rubrik h4 </h4>
<p>Lorem...</p>

<h5>Rubrik h5 </h5>
<p>Lorem...</p>

<p>Här är en lista:</p>
<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
<li>Punkt 4</li>
<li>Punkt 5</li>
</ul>

<hr>

<p>Här är en länk: <a>::</a></p>

</div> <!-- / main -->

<div id="side">

<ul id="meny">
<li>» <a href="sida1.html" title="Beskrivning av länken">Sida 1</a></li>
<li>» <a href="sida2.html" title="Beskrivning av länken">Sida 2</a></li>
<li>» <a href="sida3.html" title="Beskrivning av länken">Sida 3</a></li>
<li>» <a href="sida4.html" title="Beskrivning av länken">Sida 4</a></li>
<li>» <a href="sida5.html" title="Beskrivning av länken">Sida 5</a></li>
</ul>

</div> <!-- / side -->

<br class="clear">

</div> <!-- / layout -->

</body>
</html>

Här kan du testa hur sidan ser ut nu - öppnas i ett nytt fönster!

 Till Toppen 

Rubriker & Text

Okej! Nu ska vi fixa till rubrikerna och texten på sidan lite. Det görs genom att man kompletterar CSS-koden i stilmall.css på några ställen.

Textstorleken

Hittills har textstorleken på sidan varit 100% vilket i de flesta webläsare motsvarar 16 pixlar. Eftersom många tycker att det är lite väl stort ska texten på sidan göras något mindre - 76%.

Så här:

/* grunder */

body {
padding: 0; margin: 0;
margin-top: 20px; margin-left: 30px;
font-size: 76%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
background-color: #FFFFFF;
background-image: url();
background-repeat: repeat;
}

I praktiken innebär det att all text mellan <body> och </body> i html-dokumentet kommer att omfattas av formateringen.

OBS!
I vissa webbläsare, som Firefox och Netscape, kommer nu också rubrikerna att krympa. Men i t.ex Internet Explorer och Opera kommer rubrikerna fortfarande att ha sin ursprungliga storlek.

Rubriker

För att alla rubriker på sidan ska få samma formatering ska de skrivas in i CSS-koden.

Så här:

/* rubriker */

h1, h2, h3, h4, h5, h6 {
font-family: Georgia, "Times New Roman", serif;
color: #000000;
}

I praktiken innebär det att alla rubriker - <h1> - <h6> i html-dokumentet kommer att omfattas av formateringen.

Brödtext

Brödtexten på sidan indelas i stycken mellan taggarna: <p> och </p>. I de allra flesta fall tjänar man på att utöka utrymmet mellan raderna - för att göra texten mer lättläst. Det ska ordnas i stilmallen.

Så här:

/* text */

p {
line-height: 140%;
}

I praktiken innebär det att all text mellan <p> och </p> i html-dokumentet kommer att omfattas av formateringen.

Här kan du testa hur sidan ser ut nu - öppnas i ett nytt fönster!

 Till Toppen 

Länkar & Avdelare

Länkar

Länkarna på sidan skrivs in med taggen: <a> och </a>. För att stajla länkarna används alltså a som selector i CSS-koden.

Men det finns också möjlighet att ange hur man vill att länken ska se ut när mus-pekaren förs över den (hover) och dessutom ge en "besökt länk" (visited) ett avvikande utseende.

Så här till exempel:

/* länkar */

a {
color: #333333;
}

a:visited, a:hover {
color: #535050;
}

I praktiken innebär det att alla länkar får en mörkgrå färg. Vid "hover" och om länken redan är besökt blir färgen ljusgrå.

Avdelare

Om man inte anger annat visas en avdelare på sidan i någon obestämbar grå nyans och utseendet varierar beroende på vilken webbläsare sidan beskådas med. Men det går att ange färgen med CSS så att det ser likadant ut i alla webbläsare genom att ge avdelaren en kantlinje med bestämd färg.

Så här:

/* avdelare */

hr { border: thin solid #000000; }

I praktiken innebär det att alla avdelare: <hr> i html-dokumentet kommer att omfattas av formateringen.

Här kan du testa hur sidan ser ut nu - öppnas i ett nytt fönster!

 Till Toppen 

Bakgrundsbild

Vill du ha en bakgrundsbild på sidan skrivs den in med body som selector i CSS-koden - eftersom bakgrunden ska gälla hela sidan.

Bakgrundsbilden heter här: bg.gif och är placerad i samma mapp som html-dokumentet och stilmallen.

Så här ser bilden ut:

bakgrund

Så här skrivs bakgrundsbilden in i Stilmallen:

/* grunder */

body {
padding: 0; margin: 0;
margin-top: 20px; margin-left: 30px;
font-size: 76%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
background-color: #FFFFFF;
background-image: url(bg.gif);
background-repeat: repeat;
}

Testa hur sidan ser ut nu - öppnas i ett nytt fönster!

Hoppsan! Texten gick inte att läsa...

Alltså måste man fixa till detta genom att ange bakgrundsfärg i blocket: layout med: background-color (här vit bakgrundsfärg).

När vi ändå är igång skapar vi lite luft kring innehållet i blocket med: padding och ger hela blocket en kantlinje med border.

/* layout */

#layout {
width: 98%;
padding: 20px;
background-color: #FFFFFF;
border: 2px solid #000000;
}

Här kan du testa hur sidan ser ut nu - öppnas i ett nytt fönster!

Centering & Marginaler

Kanske tycker du att sidan skulle se snyggare ut om marginalerna runt om blocket med innehållet var jämna? Det går att ordna till genom att centrera innehållet och justera sidans marginaler!

Så här:

/* grunder */

body {
padding: 0; margin: 0;
margin-top: 30px; margin-bottom: 30px;
font-size: 76%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
background-color: #FFFFFF;
background-image: url(bg.gif);
background-repeat: repeat;
}

- - -

/* layout */

#layout {
width: 90%;
margin: 0 auto; /* centrerar innehållet */
padding: 20px;
background-color: #FFFFFF;
border: 2px solid #000000;
}

Så här funkar det:

CSSFörklaring

body {

Startar den css-kod som har body som selector.

margin-top: 30px; margin-bottom: 30px;

Sidans marginaler endast över och under. Mäts i pixlar.

}

Avslutar den css-kod som har body som selector.

- - -

- - -

#layout {

Startar den css-kod som har blocket layout som selector.

width: 90%;

Här anges bredden på blocket. Värdet 90% = 90% av webbläsrfönstret.

margin: 0 auto;

Centrerar blocket med innehållet. Skapar jämna marginaler åt höger och vänster.

}

Avslutar den css-kod som har blocket layout som selector.

Testa hur sidan ser ut nu - öppnas i ett nytt fönster!

 Till Toppen 

Avslutningsvis

KLAPPAT OCH KLART!

Om du tragglat dig igenom alla guiderna under rubriken: HTML & CSS - har du nu en komplett webbsida som är korrekt konstruerad! Nu kan du bygga vidare på egen hand!

Här hittar du koderna i sin helhet - öppnas i ett nytt fönster!

Läs vidare om hur html-kod är uppbyggd i HTML-guiden.

Läs vidare om hur CSS-kod fungerar i CSS-guiden.

Lär dig mer om hur man skapar Layouter och få Design-tips under rubriken: LAYOUT & DESIGN.

Information om Grafik och Tips om Grafikprogram hittar du under rubriken: GRAFIK.

Annat smått och gott som är bra att känna till om hemsidor finns under rubriken: HEMSIDEGUIDE.

Lycka till!

 Till Toppen