Sisalto-normal.jpg

Html5 rakenne ja periaate

periaate-normal.jpg

Tagit

<wrapper> = koko paketin kehys eli sisältää alla mainitut elementit.
<header>
<nav>
<article>
<footer>

Koodi esimerkki index.html

<!--kielen valinta-->
<!doctype html lang="FI">

<!--näin alkaa html-->
<html>

<!--head osioon voimme lisätä koodia-->
<head>
<!--utf-8 merkistö koodaus(usa)-->
<meta charset="utf-8">
<!--kotisivun otsikko, joka näkyy ikkunassa ja välilehdessä-->
<title>Ranen kotisivut</title>
<!--määritämme tyylitiedoston osoitteen-->
<link rel="stylesheet" href="tyyli.css">
</head>

<!--runko alkaa tästä-->
<body>

<!--käytämme html5 tageja-->
<!--html5 alkaa-->
<!--wrapper = koko paketin kehys-->
<div id="wrapper">

<!--header = otsikkorivi ja tässä tapauksessa kuva(yläviite)-->
  <header></header>
 
<!--otsikon alapuolella oleva vaakatason navigointi-->
<nav><a href="index.html"><img class="varjo" src="images/koti.gif"/></a><a href="galleria.html"><img class="varjo" src="images/galleria.gif"/></a><a href="yhteystiedot.html"><img class="varjo" src="images/yhteystiedot.gif"/></a><a href="palaute.html"><img class="varjo" src="images/palaute.gif"/></a></nav>
 
<!--Tähän tulee html5 dokumentin varsinainen sisältö-->
<article>


Tähän tekstiä, ehkä taulukko, kuvia, div jne.


  </article>

<!--alaviite-->
  <footer><a href="http://www.karmee.vuodatus.net" target="new">&copy; Rauno Ryynänen</a></footer>

</div>
<!--html5 on loppu-->

<!--päätämme html dokumentin koodin-->
</body>
</html>

Perus div laatikko tekstille

div_opacity-normal.jpg

koodi: tyyli.css

/* Nimetty div */

div.perus        {  
            border-color: black;
            border: solid 1px;
            background-color: silver;
            width: 500px;
            height: 300px;
            padding: 10px;
            margin-left: 0px;
            border-radius: 25px;
            opacity: 0.7;
            }

koodi: html

<div class="perus">
- En aio laittaa tähän katu- ja postiosoitetta, koska on kyseessä html5 esimerkki kotisivu.
Näin ollen harjoittelen koodaamista ja graafisen ulkoasun toteuttamista. Jos ja kun
laitan tämän mallin jakoon niin siinä tapauksessa joku voisi hyötyä niistä tiedoista.
Muutenkaan ei ole suositeltavaa tehdä niin. Verkossa liikkuu tänäpäivänä kaiken näköistä
hiipparia ja koheltajaa. Sähköpostia varten teen esimerkki osoitteen, joka ei ole oikea
yhteystieto vaan linkkiä varten tehty malli.<hr>
Ja tässä tulee se linkki sähköpostia varten:<br>
<a href="mailto:"pelleHermanni@taapero.fi">pelleHermanni@taapero.fi</a>
</div>

Ja loppu tulos

div_opacity_a-normal.jpg

Div laatikko vierityspalkilla

Opacity_kuva-normal.jpg

koodi: tyyli.css

/* Nimetty div jolla on vierityspalkki */            
div.vierita        {  
            border-color: black;
            border-radius: 25px;
            opacity: 0.7;
            border: solid 1px;
            background-color: silver;
            width: 500px;
            height: 300px;
            overflow: auto;
            padding: 10px;
            margin-left: 0px;
            }

koodi: html

<!--Teemme vierityspalkilla toimivan teksti alueen-->
 
<!--ensin määritämme css tyylin-->
<div class="vierita">
 
<i>Internet on maailmanlaajuinen tietoverkko, joka yhdistää
paikallisia tietoverkkoja toisiinsa. Internet ei siis ole
yksi lukuisista tietoverkoista, vaan nimitys tarkoittaa
kaikkien yhteen liitettyjen tietoverkkojen kokonaisuutta.</i>

<!-- teemme horisontaalisen viivan tekstin jälkeen-->
<hr>

<!--sitten teemme otsikon tekstin sekaan-->
<h3>Internetin kehitys</h3>
 

Internetin perustaa luotiin 1960-luvulla Yhdysvalloissa,  
puolustusministeriön käynnistäessä rahoituksen ARPAnet-tietoverkon
(Advanced Research Projects Agency) rakentamiseen vastauksena
Neuvostoliiton onnistuneelle Sputnik-satelliitin laukaisulle.
 
<!--teemme tyhjää tilaa tekstin alle eli rivinpalautuksen-->
<br><br>
 

<!--päätämme tekstin skrollaamisen-->
  </div>

Läpinäkyvä kuva, jonka teksti kiertää
ja reagoi hiiren osoittimeen muuttamalla väriä.

koodi: tyyli.css

/* Nimetty ja tyylitelty kuva */
img.kierto        {
            float: left;
            padding: 0px;
            border: black solid 1px;
            margin-left: 0px;
            margin-right: 15px;
            margin-bottom: 4px;
            width: 200px;
            height: 200px;
            opacity: 0.3;  
            }
 
/* Liittyy edelliseen otsikkoon */
img.kierto:hover    {
            opacity: 1.0;
            }

koodi: html

<img class="kierto" src="kuvat/arpanet.jpeg"/>

galleria_videot-normal.jpg

Html videon lisääminen

<embed src="videon osoite" width="400" height="300"></embed>

Html5 videon lisääminen

<video width="400" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Selaimesi ei tue HTML5 videota.
</video>

galleria_kuvat-normal.jpg

<!--tämän slideshow kuvagallerian .js tiedostot yms. omistaa John Cobb-->

Kuvagallerian olisi voinut myös tehdä <table> tagin voimin.

ladatut tiedostot: bjgs.css, demo.css, bjgs-1.3.js, bjgs-1.3.min.js, jquery.secret-source.min.js.

<!--head osaan laitamme jQuery osoitteet mistä haetaan-->

<head>

   <!-- bjqs.css contains the *essential* css needed for the slider to work -->
    <link rel="stylesheet" href="bjqs.css">

    <!-- some pretty fonts for this demo page - not required for the slider -->
    <link href='http://fonts.googleapis.com/css?family=Source+Code+Pro|Open+Sans:300' rel='stylesheet' type='text/css'>

    <!-- demo.css contains additional styles used to set up this demo page - not required for the slider -->
    <link rel="stylesheet" href="demo.css">

    <!-- load jQuery and the plugin -->
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="js/bjqs-1.3.min.js"></script>
</head>

<!--article osaan teemme itse slideshow kuvagallerian-->

<article>

<h1>Galleria - kuvat</h1>
 <div id="container">

      <!--  Outer wrapper for presentation only, this can be anything you like -->
      <div id="banner-slide">

        <!-- start Basic Jquery Slider -->
        <ul class="bjqs">
          <li><a href=""><img src="img/ilves.jpg" title="Ilves">
    </a></li>
          <li><img src="img/pingviini.jpg" title="Pingviinit"></li>
          <li><img src="img/puu.jpg" title="Koivu"></li>
        </ul>
        <!-- end Basic jQuery Slider -->

      </div>
      <!-- End outer wrapper -->
      
      <!-- attach the plug-in to the slider parent element and adjust the settings as required -->
      <script class="secret-source">
        jQuery(document).ready(function($) {
          
          $('#banner-slide').bjqs({
            animtype      : 'slide',
            height        : 300,
            width         : 500,
            responsive    : true,
            randomstart   : false
          });
          
        });
      </script>

    </div>

</article>

palaute-normal.jpg

lisää rivi tyyli.css:än sisään

/* Poistamme teksti alueelta nurkasta suurennus ominaisuuden */
textarea        {
               resize: none;
            }

koodi: html

<article>

<form action="demo_form.asp" name="postia" method="get">
 <fieldset name="Send">
  <legend><h1>Palaute:</h1></legend>

<p>Aihe:
<select name="Aihe">
  <optgroup label="Sisältö" name="Sisalto">
    <option value="Kuvat">Kuvat</option>
    <option value="Kirjoitukset">Kirjoitukset</option>
  </optgroup>
  <optgroup label="Ulkoasu" name="Ulkoasu">
    <option value="Grafiikka">Grafiikka</option>
    <option value="Yleisilme">Yleisilme</option>
  </optgroup>
</select></p>

<p>
  Nimi:<input type="text" name="nimi"><br>
  S&auml;hk&ouml;posti:<input type="text" name="sahkoposti"><br>
</p>

<p><b>500 merkkiä on maksimi</b></p>
<textarea caption="Palaute:" rows="8" cols="60" maxlength="500" name="kirjoitus">
T&auml;h&auml;n voit kirjoittaa.
</textarea>
</p>

<p>

 <input type="submit" value="L&auml;het&auml;">
  <input type="reset">

</p>

 </fieldset>
</form>
  </article>

etusivu_alapalkki-normal.jpg

Yläpalkki/ Yläviite - vaakatason navigointi

big-normal.jpg

koti-normal.jpg  galleria-normal.jpg  yhteystiedot-normal.jpg  palaute-normal.jpg

Kuten ylhäällä näkyy niin palkki kootaan palasista eli pienemmistä kuvista.

koodi: html ja <head> tagin jälkeen

<head>
<style type="text/css"> .varjo:hover{opacity:0.5;}</style>
 </head>

koodi: html

<!--otsikon alapuolella oleva vaakatason navigointi-->

<nav><a href="index.html"><img class="varjo" src="images/koti.gif"/></a><a href="galleria.html"><img class="varjo" src="images/galleria.gif"/></a><a href="yhteystiedot.html"><img class="varjo" src="images/yhteystiedot.gif"/></a><a href="palaute.html"><img class="varjo" src="images/palaute.gif"/></a></nav>

Tässä esimerkissä on käytetty css:ää, mutta hover elementin voi tehdä myös rollover-imagena.

Alapalkki/ Alaviite

koodi: tyyli.css

/* Teemme alaviitteen */
footer            {
            width: auto;
            height: auto;
            background-color: #4B0082;
            text-align: center;
            padding: 5px;
            }

koodi: html

<footer><a href="http://www.karmee.vuodatus.net" target="new">&copy; Rauno Ryynänen</a></footer>

Olisimme voineet tehdä alapalkin myös kuvana.