Nye funksjonar i HTML5!

http://minerva.hivolda.no/~kennethi/mid126/html5/html5test.html

 

 

Posted in MID126 | Leave a comment

Stildefinisjon, tre ulike måtar.

Nr 1

Attributt-nivå:

http://minerva.hivolda.no/~kennethi/mid126/stildefinisjon/attributt.html

Her blir stilen definert i html-koda.

 

Nr 2

Dokument-nivå:

http://minerva.hivolda.no/~kennethi/mid126/stildefinisjon/dokument.html

Her blir stilen definert i CSS-kode som ligg innebygd i HTML dokumentet.

 

Nr 3

Site-nivå:

http://minerva.hivolda.no/~kennethi/mid126/stildefinisjon/site.html

Her blir stilen definert i eit eige CSS dokument som er lenkja saman med HTML dokumentet.

Posted in MID126 | Leave a comment

The Holy Grail of webdesign; lists and columns

 

 

http://minerva.hivolda.no/~kennethi/mid126/Holy%20Grail/holy_grail_batman.html

Denne sida har heile designen sin styrt av CSS, HTML dokumentet inneheld berre sjølve teksta og lenke-informasjon. Dersom ein åpnar sida utan bruk av stilark vil den sjå slik ut:

http://minerva.hivolda.no/~kennethi/mid126/Holy%20Grail/holy_grail_batman_nocss.html

 

 

Lat oss ta ein kikk på CSS dokumentet;

@charset "utf-8";
/* CSS Document */

#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}

“@charset “utf-8″” let meg bruke diverse teikn som ikkje eksisterar i engelsk, som Æ Ø Å.

“#container” er den ytterste boksa eller rektangelet på sida, den held sida saman, som veggane på eit hus.

#top
{
padding: 0.5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}

		#navlist
		{
		padding: 5px 0px 0px 5px;
		margin-left: 0;
		border-bottom: 5px solid #778;
		font: bold 12px Verdana, sans-serif;
		}

		#navlist li
		{
		list-style: none;
		margin: 0;
		display: inline;
		}

		#navlist li a
		{
		padding: 5spx 6em;
		margin-left: 3px;
		border: 1px solid #778;
		border-bottom: none;
		background: #DDE;
		text-decoration: none;
		}

		#navlist li a:link { color: #448; }
		#navlist li a:visited { color: #667; }

		#navlist li a:hover
		{
		color: #000;
		background: #AAE;
		border-color: #227;
		}

		#navlist li a#current
		{
		background: white;
		border-bottom: 3px solid white;
		}

“#top” er den øverste lista på sida, den inneheld navigasjonsbaren med lenkjer til dei andre sidene på nettstaden. Men sidan denne sida ikkje er ein del av ein “ekte” nettstad, førar ikkje lenkjane nokon plass.

“#navlist” sett opp ein navigasjonsbar/list og bestem plasseringa til denne lista innanfor “#top” samt fonten som skal brukast.

“#navlist li” bestem at det skal lagast ei liste av innhaldet.

“#navlist li a” bestem korleis kvar enkelt del av lista (tabs) skal sjå ut.

“#navlist li a:link { color: #448; }”  kva farge som skal være på lenkjene i lista.

“#navlist li a:visited { color: #667; }”  kva farge som skal brukast på dei lenkjene du alt har vore innom.

“#navlist li a:hover”  informajson om korleis den tabben ein held pila over skal sjå ut.

“#navlist li a#current” korleis den tabben ein er på skal sjå ut.

 

#leftnav
{
	/*Dinne styre sjølve teksta */
float: left;
width: 200px;
margin: 0;
padding: 1em;
}

Som kommentaren seier, styrer denne delen kun sjølve teksta på venstresida av nettstaden. der er også ein lik, men omvendt, versjon for teksta på høgre side, med forskjell i pikselbreidd.

#content
{

margin-left: 220px;
border-left: 2px solid gray;
margin-right: 200px;
border-right: 2px solid gray;
padding: 1em;
/*max-width: 36em;*/
}

Dette er den midtre, kvite, delen. Den med mest tekst. Den har ikkje noko å seie for sjølve teksta, men plasseringa. Det er også verdt å nemne at dei to vertikale linjene som delar opp sida blir styrt av denne taggen.

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}

Til slutt har vi denne taggen som styrar den nederste delen av sida, den grå boksa på botnen.

 

 

 

 

 

 

 

 

Posted in MID126 | Leave a comment