Wiki

Tämä sivu on vain luettavissa. Voit katsoa sen lähdekoodia, mutta et muuttaa sitä. Kysy ylläpitäjältä jos pidät tätä estoa virheellisenä.
====== Yksinkertainen html-asiakirja ======

<code html4strict>
<html>
<head>
 <title>Sivun otsikko</title>
</head>

<body>
<p>Sivulle tulevaa tekstiä.</p>
</body>
</html>
</code>


===== Elementtikohtaisesti =====

Jokaisen elementin kohdalla määritellään tyyli. Esim. <code><H1 style="font-family:serif; font-weight:bold; color:blue">Otsikko</H1></code>
===== Otsikkolohkossa =====

Jokainen käytetty tyyli määritellään otsikkolohkossa ''<STYLE> </STYLE>'' elementtien sisällä. Esimerkiksi 
<code html4strict>
<HTML>
<HEAD> 
<TITLE>Tyylittelyä</TITLE> 
<STYLE> 
P {font-family:serif} 
H1 {background:black; border:thin}
</STYLE> 
</HEAD> 

<BODY> 
Tekstiä 
</BODY> 
</HTML>
</code>

===== Erillisessä tyylitiedostossa =====

Kirjoitetaan erillinen tiedosto (vaikkapa tyyli.css), joka linkitetään tekstiin. Samaa tiedostoa voi käyttää useissa dokumenteissa ja monen sivun tyylin muuttaminen käy helposti muuttamalla tyyli.css-tiedostoa. Linkittäminen tapahtuu otsikkolohkossa <code><link href="tyyli.css" rel="stylesheet" type="text/css"> </code>

===== CSS-ohjeita =====

Käy katsomassa osoitteesta [[http://www.2kmediat.com/css/liite_mediatyyppi_screen.asp]] mahdollisia selektoreita ja niiden arvoja. Osoitteesta [[http://kuler.adobe.com/#create/fromacolor]] löytyy Adoben Kuler-työkalu, jolla saa toisiinsa sointuvia värejä. Käytä työkalun antamia HEX-arvoja ja laita niiden eteen #-merkki, siis esimerkiksi värin red tilalle #ff0000.

Jos koneessasi ei ole flashia, niin voit käyttää

   * http://www.ficml.org/jemimap/style/color/wheel.html
   * http://www.colorschemer.com/online.html
   * http://johndyer.name/lab/colorpicker/

Lisää CSS-ominaisuuksia löytyy osoittteesta http://www.edu.haapavesi.fi/~moversti/html/tyyliarkit.php

===== Valikkosivujen tekeminen =====


<code html4strict>
<html>
<head>
	<title>Otsikko</title>
</head>

<style>
div.header{font-size: 5em;
	background-color: red;
	border: thin solid green;}
div.navigointi{
	float: left;
	width: 250px;
}
div.navigointi ul {
	list-style: none;
	width: 100px;
	
}
div.navigointi ul li{
	border: thin solid blue;
}
div.navigointi ul li a{
	width: 300px;
}
div.navigointi ul li a:hover{
	background-color: silver;
}
div.sisalto{
	margin-left: 250px;
}
</style>

<body>

<div class="header">
Sivun otsikko
</div>

<div class="navigointi">
<ul>
<li><a href="#">Linkki1</a></li>
<li><a href="#">Linkki2</a></li>
</ul>
</div>

<div class="sisalto">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis adipiscing risus et magna tempor iaculis. Nullam mattis magna a dui dapibus a dictum urna suscipit. Nunc consectetur, nisi sed malesuada luctus, nibh ipsum bibendum tellus, non pulvinar magna tellus eu neque. Maecenas vitae commodo lectus. Vestibulum nec dui metus, elementum accumsan massa. Sed mauris sem, iaculis a interdum in, mattis ac lorem. Nam laoreet accumsan tincidunt. Aliquam eget neque magna. Pellentesque luctus cursus tempus. In hac habitasse platea dictumst. In vehicula elementum est, vel laoreet velit pretium in. Nunc quis lorem non enim eleifend porta. Nam lobortis nisi lacus. Fusce eu est quis sem sodales convallis. Sed metus nibh, faucibus nec pretium vitae, tincidunt vitae purus.

Mauris tempus nunc ac justo porta tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel lectus neque, vel aliquet ipsum. Phasellus malesuada dapibus sapien at ultricies. Etiam laoreet felis quis mi consectetur non pulvinar neque consequat. In hac habitasse platea dictumst. Sed sit amet congue sem. Donec rutrum consectetur velit, sit amet vulputate elit consectetur at. Nulla feugiat placerat ipsum, id luctus neque rutrum eget. Maecenas vulputate ullamcorper tellus, id dignissim sem gravida vel.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce fringilla, erat nec viverra euismod, mi justo eleifend felis, quis cursus tellus nibh vitae leo. In iaculis enim odio. Suspendisse pretium arcu eu tortor imperdiet ut molestie nunc porttitor. Fusce nec lectus nisl, ut volutpat est. Aenean pulvinar orci sed dui rutrum interdum. Suspendisse potenti. Sed luctus, quam a fringilla porttitor, urna urna volutpat erat, nec sagittis urna nulla eget magna. Aliquam rutrum erat vel lorem mollis eu auctor nunc varius. Proin tincidunt, metus in convallis viverra, dolor sapien pretium enim, ut adipiscing elit mauris sed erat. Suspendisse aliquet, tortor at ullamcorper tempor, augue erat posuere neque, vestibulum sagittis diam ligula et augue. Donec adipiscing, diam at pellentesque cursus, urna nibh tincidunt lorem, et sagittis est tortor quis nibh. Sed posuere congue facilisis. Sed eleifend tempor risus, sed porttitor orci gravida sit amet. Donec eu justo mauris. Sed ipsum enim, consectetur et congue quis, sagittis ut metus. Donec fermentum arcu in dolor viverra nec aliquet urna auctor. Quisque fermentum ullamcorper arcu, ac pharetra purus eleifend a. Morbi ut lectus urna.

Vestibulum vel molestie felis. Aliquam erat volutpat. Praesent congue egestas lacinia. In quis elit eu sapien mattis sagittis. Donec mollis, felis in lobortis porttitor, enim risus porttitor leo, quis ultrices odio tellus nec dolor. Fusce in nibh adipiscing nulla adipiscing tincidunt in et nulla. Vivamus bibendum sodales eros nec varius. Curabitur sed aliquet mauris. Vivamus vulputate lorem nec felis porta tincidunt. Fusce id nisl vel elit porta euismod. Donec vitae sem nunc, sed condimentum orci. Sed dapibus nisl id ante ornare vitae rutrum ipsum tempor. Phasellus at dui ante, id porta augue. Nulla mollis suscipit convallis. Donec eget quam varius sem egestas malesuada. Proin egestas ullamcorper odio, sed rutrum massa laoreet nec.

Mauris placerat ante vel lorem volutpat condimentum. Donec ac sapien id risus faucibus sodales. Vestibulum nec ipsum leo, a ornare felis. Cras nec nisl mattis nibh tempus tristique vel quis enim. Vivamus luctus dictum justo viverra pellentesque. Donec rutrum, diam in suscipit consequat, lorem arcu vestibulum est, quis convallis nulla est id eros. Duis adipiscing fringilla nunc quis sodales. Pellentesque iaculis magna quis ligula congue vitae aliquet arcu tincidunt. Suspendisse vitae sapien id lacus sollicitudin suscipit id vitae turpis. Suspendisse et lectus non sapien euismod adipiscing. Quisque porta pulvinar quam ac molestie. Maecenas non mi id erat porta vehicula id in tortor. Proin nec mi in turpis posuere tempus. Suspendisse lacinia adipiscing libero, vitae feugiat tortor viverra at. Donec eu est sollicitudin nulla semper blandit vitae nec diam. Sed tristique facilisis quam sit amet convallis. Etiam id malesuada ligula. Proin lobortis arcu id turpis venenatis molestie. In tristique porttitor blandit. 
</div>

<div class="footer">
&copy; Markus Översti
</div>

</body>

</html>
</code>

<code html4strict>
<html>
<head>
<title>Sivurakenteen harjoittelua...</title>

<style>
	body{
		background-color: silver;
		font-family: Helvetica, Arial, sans-serif; //vs serif
	}
	.otsikko{
		width: 100%;
		text-align: center;
		font-size: 20px;
		color: red;
		font-variant: bold;
	}
	.navigointi{
		float: left;
	}
	
	.navigointi ul{
		list-style: none;
	}
	.navigointi ul li{
		width: 200px;
		height: 30px;
		border: thin solid black;
		padding-left: 5px;
		padding-top: 5px;
	}
	.navigointi ul li:hover{
		background-color: red;
	}
	.navigointi ul li a{
		width: 200px;
		text-decoration: none;
	}
	.navigointi ul li a:hover{
		text-decoration: none;
		background-color: red;
	}
	
	.sisalto{
		margin-left: 255px;
		padding-top: 10px;
		font-size: 1.1em;
		line-height: 1.4em;
	}
	.sisalto p{
		padding-bottom: 10px;
	}
	.footer{
		border-top: 2px solid blue;
		color: green;
		text-align: right;
		padding-top: 5px;
		font-style: italic;
	}
</style>

</head>

<body>

<div class="otsikko">
Otsikko
</div>

<div class="navigointi">
	<ul>
		<li><a href="#">Linkki</a></li>
		<li><a href="#">Linkki</a></li>
		<li><a href="#">Linkki</a></li>
	</ul>
</div>

<div class="sisalto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse risus enim, congue sed lobortis vitae, scelerisque nec quam. Nullam tempor vehicula nulla ut vehicula. Maecenas eros elit, dapibus id malesuada ut, facilisis a arcu. Vestibulum sit amet vestibulum leo. Aenean pharetra, nulla vitae fermentum porta, massa dui cursus nisi, sit amet pulvinar mi justo et lacus. Sed in dignissim magna. Donec in erat odio. In hac habitasse platea dictumst. Maecenas ut ligula quam, quis mattis arcu. Nulla ligula augue, fringilla id vehicula at, feugiat a nisi. Vivamus aliquam cursus eros et convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>

<p>Donec tempus elementum suscipit. Fusce interdum, risus ac ultricies vulputate, dolor urna ornare urna, a congue massa ligula in diam. Suspendisse vitae leo magna. Morbi consequat tortor at libero fringilla et faucibus ligula mollis. Proin varius vehicula lectus eu auctor. Vivamus scelerisque mollis varius. Duis mattis tortor quis tortor consectetur malesuada. Aliquam sollicitudin pellentesque eros. Maecenas massa nisl, consectetur vel sagittis id, accumsan ut nisi. Quisque egestas sapien a neque sollicitudin eu ullamcorper enim dictum. Nam consequat nisi sit amet orci mattis nec ornare neque consequat. Nulla nulla nisi, feugiat et venenatis id, convallis ut nunc. Praesent tincidunt fermentum nibh, nec ultricies diam ornare et. Sed at est et elit vehicula hendrerit ut vitae dolor. Curabitur ultricies enim nec nisi gravida gravida.</p>

<p>Donec pellentesque rutrum enim, in tincidunt orci faucibus non. In hac habitasse platea dictumst. Suspendisse aliquam, augue sit amet malesuada scelerisque, purus sapien convallis magna, id dictum arcu justo id orci. Donec gravida quam sit amet risus tempus tincidunt. Mauris elementum nulla id magna congue dictum eu quis ligula. Maecenas sodales dignissim tempor. Pellentesque dui magna, molestie a consectetur porta, iaculis eu purus. Curabitur vitae pulvinar ipsum. Sed gravida tortor quis justo vestibulum id bibendum lacus posuere. Integer ac nisl sit amet augue aliquam commodo. Quisque imperdiet facilisis odio, ut vehicula urna pharetra porta. Nullam quis lorem blandit mi commodo ullamcorper. Cras consequat sodales porta.</p>

<p>Sed dapibus, est sed posuere commodo, diam urna suscipit ligula, ac molestie urna libero eget nunc. Nullam et erat non sem consequat gravida. In sit amet lectus eu tortor tincidunt facilisis eget vitae libero. Etiam nunc purus, rutrum et posuere a, fringilla a mi. Maecenas felis tortor, porta at aliquet sit amet, egestas a nisl. Nunc accumsan vehicula purus vitae interdum. Vestibulum at nulla id erat pellentesque suscipit in non tortor. Integer vulputate lorem at augue rhoncus eu tincidunt augue vehicula. Donec varius leo a felis blandit at egestas ante porta. Morbi sollicitudin urna in metus laoreet at rhoncus felis blandit. Integer lorem erat, laoreet id elementum ac, vulputate quis enim.</p>

<p>Praesent varius ultrices sapien, et pretium risus mattis vel. Duis ac enim eu lacus accumsan euismod ut nec tortor. Pellentesque sed felis sit amet magna ullamcorper ultrices nec blandit lectus. Ut tincidunt, elit in cursus rutrum, mi metus tempus lacus, non fermentum elit ipsum a diam. Duis imperdiet euismod dapibus. Pellentesque dui turpis, auctor vitae vulputate a, dictum id est. Proin augue nulla, posuere sed ullamcorper in, rhoncus vitae lacus. Donec vel placerat magna. Ut semper bibendum leo, in porttitor arcu placerat non. Vestibulum quis nulla felis, sed dictum urna. Mauris ac feugiat libero. Praesent diam magna, lobortis quis dapibus ut, auctor vitae quam. Sed ullamcorper vulputate lobortis. Donec tincidunt mauris sed nisl sodales sollicitudin. Cras dui odio, rhoncus quis placerat sed, porta ut sem. Suspendisse tincidunt aliquet diam quis pretium. Vivamus nec aliquet diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam vehicula quam ultrices orci consequat imperdiet. </p>
</div>

<div class="footer">
	26.3.2010 &copy; Markus Översti
</div>

</body>
</html>
</code>