Daniel Koskinen danielck

## esimerkki-lomake.html
<form>
  Nimi: <input type="text" name="nimi" id="nimi" value="" />
  Sähköposti: <input type="text" name="email" id="email" value="" />
  Kommentti: <textarea name="kommentti" id="kommentti" cols="25" rows="3"></textarea>
  <input type="submit" value="Lähetä" />
</form>

## esimerkki-lomake-2.html
<form id="yhteydenotto-lomake" action="script.php" method="post">
    <input type="hidden" name="redirect" value="http://www.opera.com" />
    <ul>
        <li>
            <label for="nimi">Nimi:</label>
            <input type="text" name="nimi" id="nimi" value="" />
        </li>
        <li>
            <label for="email">Sähköposti:</label>
            <input type="text" name="email" id="email" value="" />

## html5-esimerkki.html
<!DOCTYPE html>
<html lang="fi">
<head>
	<meta charset="utf-8" />
	<!-- Varmistetaan, että sivusto näkyy mobiililaitteissa oikein -->
	<meta name="viewport" content="width=device-width">

	<!-- Varmistetaan, että HTML5-elementit toimivat vanhoissa Internet Explorer-versioissa -->
	<!--[if lt IE 9]>
	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>

## html-pohja.html
<!doctype html>

<html lang="fi">
  <head>
    <meta charset="utf-8">
    <meta name="author" content="Tekijän Nimi">
    <meta name="description" content="Sivun kuvaus: Tämä on ensimmäinen HTML-harjoitus.">
    <title>Kaksisarakkeinen sivu</title>
    <link href="fluid.css" rel="stylesheet"> <!-- Viittaus tyylitiedostoon -->
  </head>

## fluid.css
/* Asetetaan kaikkien elementtien marginaalit perustilaan,
   nopea tapa varmistaa että millään elementillä ei ole valmiiksi marginaalia.

*/
* { margin: 0; padding: 0}

/* Perustyylit taustalle ja koko asiakirjalle, näitä kannattaa olla lisää!
   mm. listat, lomakkeet, em, strong, yms yms...
 */

## css3-tyylit.css
* { margin: 0; padding: 0; font-size: 100%; }
body {
	font-family: "Helvetica Neue", Arial, sans-serif;
	line-height: 1.4;
	padding: 1.5em;
}

/* Vanhemmat selaimet eivät ymmärrä uusia HTML5-elementtejä,
   joten ne pitää muistaa erikseen määritellä block- tai inline-tyyppisiksi.
*/

## flexible-fluid-html.html
<body class="normal>
<div id="wrapper">
    <div id="header"> ... </div>
    <div id="main">
        <div id="container">
            <div id="content"> ... </div>
            <div id="primary"> ... </div>
        </div>
        <div id="secondary"> ... </div>
        <div id="tertiary"> ... </div>

## flexible-fluid-css.css
#wrapper { margin: 0 auto; }
#header {overflow: hidden;}
#container,#content,#primary,#secondary,#tertiary
  {float:left;}
#footer {clear:left;width:100%;}

/* Wide ( over 1100px ) */
.wide #container {width:60%;}
.wide #content {width:66%;}
.wide #primary {width:34%;}

## flexible-fluid-jquery.js
function checkWidth () {
    if ($(window).width() > 1400) {
        $('body').attr('class','superwide');
        $('#title').text('Wide ('+$(window).width()+')');
        }
    else if ($(window).width() > 1100) {
        $('body').attr('class','wide');
        $('#title').text('Wide ('+$(window).width()+')');
        }
    else if ($(window).width() > 800) {

## flexible-fluid-jquery-2.js
$(document).ready(function(){

    // check the window size when page loads
    checkWidth();

    // check on resize
    $(window).resize(function() {
        checkWidth();
    });
	<form>
	Nimi: <input type="text" name="nimi" id="nimi" value="" />
	Sähköposti: <input type="text" name="email" id="email" value="" />
	Kommentti: <textarea name="kommentti" id="kommentti" cols="25" rows="3"></textarea>
	<input type="submit" value="Lähetä" />
	</form>
	<form id="yhteydenotto-lomake" action="script.php" method="post">
	<input type="hidden" name="redirect" value="http://www.opera.com" />
	<ul>
	<li>
	<label for="nimi">Nimi:</label>
	<input type="text" name="nimi" id="nimi" value="" />
	</li>
	<li>
	<label for="email">Sähköposti:</label>
	<input type="text" name="email" id="email" value="" />
	<!DOCTYPE html>
	<html lang="fi">
	<head>
	<meta charset="utf-8" />
	<!-- Varmistetaan, että sivusto näkyy mobiililaitteissa oikein -->
	<meta name="viewport" content="width=device-width">

	<!-- Varmistetaan, että HTML5-elementit toimivat vanhoissa Internet Explorer-versioissa -->
	<!--[if lt IE 9]>
	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	/* Asetetaan kaikkien elementtien marginaalit perustilaan,
	nopea tapa varmistaa että millään elementillä ei ole valmiiksi marginaalia.

	*/
	* { margin: 0; padding: 0}

	/* Perustyylit taustalle ja koko asiakirjalle, näitä kannattaa olla lisää!
	mm. listat, lomakkeet, em, strong, yms yms...
	*/
	* { margin: 0; padding: 0; font-size: 100%; }
	body {
	font-family: "Helvetica Neue", Arial, sans-serif;
	line-height: 1.4;
	padding: 1.5em;
	}

	/* Vanhemmat selaimet eivät ymmärrä uusia HTML5-elementtejä,
	joten ne pitää muistaa erikseen määritellä block- tai inline-tyyppisiksi.
	*/
	<body class="normal>
	<div id="wrapper">
	<div id="header"> ... </div>
	<div id="main">
	<div id="container">
	<div id="content"> ... </div>
	<div id="primary"> ... </div>
	</div>
	<div id="secondary"> ... </div>
	<div id="tertiary"> ... </div>
	#wrapper { margin: 0 auto; }
	#header {overflow: hidden;}
	#container,#content,#primary,#secondary,#tertiary
	{float:left;}
	#footer {clear:left;width:100%;}

	/* Wide ( over 1100px ) */
	.wide #container {width:60%;}
	.wide #content {width:66%;}
	.wide #primary {width:34%;}
	function checkWidth () {
	if ($(window).width() > 1400) {
	$('body').attr('class','superwide');
	$('#title').text('Wide ('+$(window).width()+')');
	}
	else if ($(window).width() > 1100) {
	$('body').attr('class','wide');
	$('#title').text('Wide ('+$(window).width()+')');
	}
	else if ($(window).width() > 800) {
	$(document).ready(function(){

	// check the window size when page loads
	checkWidth();

	// check on resize
	$(window).resize(function() {
	checkWidth();
	});