HUOMAA!!! OPAS VAATII HTML:N JA CSS:N PERUSOSAAMISENJos et ymmärrä täysin CSS:ää tai HTML:ää, niin etsi jokin opas netistä ja opettele perusasiat taikysy minulta.
Voin myös suositella paria CSS- ja HTML-opasta:
Tässä oppaassa on tavoitteena tehdä pienikokoinen nettisivu käyttäen "<div>"-tageja, ei taulukoita "<table>".
Koetan oppaassa osoittaa, että ilman taulukotaittoakin saa aikaan toimivia, erilaisissa selaimissa toimivia nettisivuja.
Sivun ei ole tarkoitus miellyttää kaikkien sillä oppaiden lopputuloksiahan ei saisi suoraan kopioidda vaan tehdä osa
asioisat itse.
Sivu toimii 100% oheisilla selaimilla:
- Internet Explorer 6
- Mozilla Firefox (uusin)
- Opera 8.5
Pieniä bugeja löytyy näistä selaimista:
Näillä selaimilla olen sivun testannut. Mahdollisia muiden selaimien bugeja en tiedä.
Ja nyt itse sivun tekemiseen:
Lue koodi ja kommentit ymmärtäksesi mitä koodissa tehdään. (alla)
Kopoi tämä koodi tekstieditoriisi ja talenna se jollakin nimellä (*.html) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Sivun title</title>
<!-- Alle haluamasi "<meta>"-tagit -->
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<!-- Stylesheet linkit (linkki ulkoiseen .css-tiedostoon -->
<link rel="stylesheet" type="text/css" href="style.css" title="Vakio" />
<!-- "<head>"-tagi loppuu-->
</head>
<!-- Sivun rakenteellinen (<body>) osa alkaa -->
<body>
<!--
"Kääritään" kaikki sivun elementit yhden "<div>"-tagin sisään
ja nnetaan sille tunnukseksi runko (id="runko").
-->
<div id="runko">
<!-- Kääritään sivun yläosan elementit yhteen
"<div>"-tagilla ja annetaan sille tunnukseksi
yla (id="yla").
-->
<!-- Sivun yläosan käärin-div alkaa -->
<div id="yla">
<!--
Määritellään sivun yläosaan kolme erillistä elementtiä ja annetaan niille oma tunnus (id)
ja luokka (class).
-->
<div id="blogv" class="yla"><span>kotisivu.arkku.net - WeBlog V.1.0</span></div> <!-- Sivun otsikko (ylin elementti). -->
<div id="banner" class="yla"></div> <!-- Sivun mahdollinen banneri (joko taustakuvaksi CSS:llä tai käyttämällä "<img>"-tagia -->
<!--
Alla sivun navigointipalkki. Muokkaamme sen myöhemmin CSS:llä.
Voit muokata sen linkkejä haluamaksesi ("<a href="http://www.osoite.fi">Linkki</a>.
-->
<div id="navi" class="yla"><ul><li><a href="index.php?sivu=etusivu" title="Etusivu">Etusivu</a></li><li><a href="index.php?sivu=cv" title="Curriculum vitae">CV</a></li><li><a href="index.php?sivu=keskustelu" title="Keskustelu">Keskustelu</a></li><li><a href="index.php?sivu=vieraskirja" title="Vieraskirja">Vieraskirja</a></li><li><a href="index.php?sivu=linkit" title="Linkit">Linkit</a></li></ul></div>
</div>
<!-- Navigointipalkki loppuu. -->
<!-- Sivun yläkeskiosan käärin-div alkaa -->
<div id="ylakeski">
<!--
Alla uutisboksin mahdollinen otsikko ja uutisboxi.
Itse en määritellyt otsikkoelementille tyylejä enkä
sisältöä.
-->
<div id="uutheader" class="header"></div>
<div id="uutiset"><h4>Uutisia</h4><br /><p>Lorem ipsum dolor sit amet, eu consectetur ut duis, sed accumsan, sit dictumst praesent, elit cursus velit, mus turpis lectus ac eleifend. Posuere elit, accumsan nulla tempus et, vel massa erat ligula ut risus. Quis dictum porttitor, sed aptent gravida lorem sed, lacus id suspendisse, placerat mi et a. Commodo feugiat laoreet vivamus consectetuer, magna wisi debitis. Amet vulputate consequat. Turpis phasellus risus nulla non fusce nibh, fermentum amet sollicitudin nulla condimentum at eget, massa vel quisque, tempor in nullam suspendisse enim nibh in. Ut quis condimentum, pellentesque tincidunt.</p></div>
<!-- Alla otsikko varjoefektillä -->
<h1 id="varjo">WeBlog</h1><h1>WeBlog</h1>
</div>
<!-- Sivun yläkeskiosan käärin loppuu -->
<!-- Sivun alakeskiosan käärin alkaa -->
<div id="alakeski">
<!-- Sivun varsinainen sisältö alla olevien "<div>"-tagien väliin -->
<div id="sisalto"><p>Lorem ipsum dolor sit amet, eu consectetur ut duis, sed accumsan, sit dictumst praesent, elit cursus velit, mus turpis lectus ac eleifend. Posuere elit, accumsan nulla tempus et, vel massa erat ligula ut risus. Quis dictum porttitor, sed aptent gravida lorem sed, lacus id suspendisse, placerat mi et a. Commodo feugiat laoreet vivamus consectetuer, magna wisi debitis. Amet vulputate consequat. Turpis phasellus risus nulla non fusce nibh, fermentum amet sollicitudin nulla condimentum at eget, massa vel quisque, tempor in nullam suspendisse enim nibh in. Ut quis condimentum, pellentesque tincidunt.</p><p>Ac diam et lacus ut amet, auctor metus vulputate enim at justo in. Eget est sed, cras massa sed quisque, dolor fermentum, parturient venenatis nibh primis incidunt elementum. Ut placerat odit, at eros tincidunt, sagittis hendrerit aliquam vestibulum magna imperdiet, at rhoncus in est nam litora, massa etiam maecenas tincidunt. Pede aliquam sed integer pede in, vestibulum vel pretium, pellentesque suscipit mi parturient aliquam. Turpis nonummy praesent, lectus odio mi dui sit maecenas, et pede consequat sit ac posuere penatibus, velit tempor ut turpis, suscipit sollicitudin curabitur lobortis justo felis in. Sem adipiscing tempus, amet accumsan vehicula volutpat odio, id egestas tellus pellentesque mi, sit eget, arcu viverra dolor arcu iaculis.Ac diam et lacus ut amet, auctor metus vulputate enim at justo in. Eget est sed, cras massa sed quisque, dolor fermentum, parturient venenatis nibh primis incidunt elementum. Ut placerat odit, at eros tincidunt, sagittis hendrerit aliquam vestibulum magna imperdiet, at rhoncus in est nam litora, massa etiam maecenas tincidunt. Pede aliquam sed integer pede in, vestibulum vel pretium, pellentesque suscipit mi parturient aliquam. Turpis nonummy praesent, lectus odio mi dui sit maecenas, et pede consequat sit ac posuere penatibus, velit tempor ut turpis, suscipit sollicitudin curabitur lobortis justo felis in. Sem adipiscing tempus, amet accumsan vehicula volutpat odio, id egestas tellus pellentesque mi, sit eget, arcu viverra dolor arcu iaculis.</p></div>
</div>
<!-- Sivun alaosa (footer) -->
<div id="ala">
<div id="footer"><p>© 2006 sivusi.com. Kaikki oikeudet pidätetään.</p></div>
</div>
</div>
</body>
</html>
Seuraavaksi on tehtävä sivulle tyylipohja
Kopioi tämä pohja ja muokkaa sitä haluamaksesi ja tallenna se nimellä style.css (tai nimellä, jonka asetit tallentamasi HTML-tiedoston link tagin href-määreeksi) :
body{
background-color: #0000ff; /* Koko sivun taustaväri */
}
#runko{
border: 1px solid black; /* Runkoelementin (mihin kaikki muut elementit kääritty) rajan paksuus, malli ja väri */
height: 500px; /* Runkoelementin korkeus pikseleinä (500 pikseliä) */
width: 400px; /* Elementin leveys pikseleinä */
background-color: #009ce8; /* Elementin taustaväri */
padding: 0; /* Muiden elementtien ja tekstin sijoittelu tämän elementin sisällä ( 0 ) */
font-family: trebuched-ms, verdana, arial, times-new roman; /* Elementissä käytettyjen fonttien "perhe" */
font-size: 10pt; /* Elementin yleinen fonttikoko */
position: absolute; /* Määritellään tälle elementille absoluuttinen sijottelu sivulla */
left: 50%; /* 50% vasemmasta reunasta */
margin-left: -200px; /* Vedetään elementtiä 200 pikseliä takaisin päin vasempaan (puolet elementin leveydestä) */
top: 50%; /* Sama kuin left 50%, mutta sivun huipusta */
margin-top: -250px; /* Vedetään elementtiä 250 pikseliä takaisin päin ylös (puolet elementin korkeudesta) */
/* Näin saadaan elementti keskitettyä tasan sivun keskelle (+ ylämarginaali*/
}
a{
text-decoration: none; /* Asetetaan kaikkien linkkien alleviivaus ja muut korostukset (ei lihavointi) pois */
color: #0000ff; /* Kaikkien linkkien väri säädetään siniseksi */
font-weight: normal; /* Fontin "paino" normaaliksi. Muita mahdollisia arvoja ovat bold(lihavointi), ym. */
}
a:hover{
text-decoration: underline; /* Asetetaan linkeille alleviivaus, kun hiiren osoitin on päällä */
}
/*a:visited{
color: ;*/ /* Käydyn linkin väriksi joku väri (ei asetettu). */
}
#runko #yla{
font-weight: bold; /* runko-käärimen sisällä olevassa yla nimisessä käärimessä olevien tekstien "painoksi" bold (lihavointi) */
background-color: inherit; /* Asetetaan taustaväriksi, kuin äitielementillä */
width: 100%; /* 100% leveyttä äitielementin (runko) leveydestä */
}
#yla #blogv{
text-align: right; /* yla-käärimen sisällä olevan blogv-elementin sisällä oleva teksti tasataan oikealle */
}
#yla #blogv span{
margin-right: 10px; /* blogv-elementin sisällä olevalle span-elementille annetaan 10 pikselin marginaali oikealle */
}
#yla #banner{
border-top: 1px solid black; /* yla-käärimen sisällä olevalle banner-nimiselle elementille annettaan 1 pikselin raja (yläpuoli) */
border-bottom: 1px solid black; /* sama, kuin edellinen mutta alapuolelle */
background-color: #ffffff; /* taustaväriksi valkoinen */
height: 130px; /* korkeudeksi 130 pikseliä */
}
#yla #navi{
margin-bottom: 5px; /* Annetaan elementille 5 pikselin marginaali alapuolelle */
}
#navi ul{
float: left; /* Asetetaan elementti (lista) "kellumaan" oikealle */
width: 100%; /* leveydeksi 100% äitielementin leveydestä */
list-style-type: none; /* Listan esitystyyliksi none (ei mitään) */
/* Näin saadaan lista sopivaksi vaakasuoralle navigointipalkille */
border-bottom: 1px solid black; /* Elementille 1 pikselin raja pohjaan */
margin: 0; /* Asetetaan elementin marginaali nollaksi */
}
#navi ul, navi ul li{
padding: 0; /* Asetetaan listan jokaiselle osalle tekstin sijoittelu nollaksi (0 pikseliä/%/tms. reunoista) */
margin: 0; /* marginaaliksi nolla */
}
#navi ul li{
display: inline; /* Asetetaan esitystyyli vaakasuoraksi (inline) */
text-align: center; /* Tasataan tekstit (linkit) keskelle */
}
#navi ul li a{
margin: 0;
width: 20%;
float: left;
background-color: #009ce8;
text-align: center; /* IE:n bugikorjaus */
color: blue;
/*border-bottom: 2px solid transparent;*/
/*border-right: 1px solid black;*/
}
#navi ul li a:hover{
/*background-color: #74c1e8;*/
background-color: blue;
text-decoration: none;
/*border-bottom: 2px solid black;*/
color: #009ce8;
}
#ylakeski{
height: 20%;
width: 100%;
margin-left: 10px;
padding: 0px;
}
.header{
font-weight: bold;
}
#ylakeski #uutiset{
width: 45%;
height: 95%;
overflow: auto;
border: 1px solid black;
margin-top: 10px;
/*display: block;*/
background-color: #ffffff;
}
#ylakeski #uutiset{
float: left;
}
#ylakeski #uutiset p{
padding: 0;
margin-top: 0;
margin-left: 5px;
}
#ylakeski #linkki{
visibility: hidden;
float: left;
margin-left: 10px;
}
#ylakeski h4{
margin: 0px;
margin-left: 5px;
margin-bottom: 0px;
padding: 0px;
}
#ylakeski h1{
position: absolute;
top: 39%;
left: 55%;
text-align: center;
margin: 0px;
padding: 0;
font-size: 25pt;
z-index: 3;
}
#ylakeski #varjo{
color: #4b4b4b;
position: absolute;
top: 39.6%;
left: 54.4%;
margin: 0;
padding: 0;
font-size: 25pt;
z-index: 2;
}
@media aural{
#ylakeski #varjo{visibility: hidden;}
}
#ala #footer{
clear: both;
position: relative;
bottom: 0px;
}
#ala #footer p{
text-align: center;
padding: 0;
margin: 0;
}
#alakeski{
width: 100%;
height: 39%;
margin-top: 25px;
margin-bottom: 6px;
margin-left: 10px;
}
#alakeski #sisalto{
width: 95%;
height: 100%;
overflow: auto;
border: 1px solid black;
background-color: #ffffff;
}
#alakeski #sisalto p{
padding: 0;
margin-top: 0px;
margin-left: 5px;
}
/*
* Alla olevat eivät ole validia
* CSS:ää. Ne määrittävät
* overflow: auto;-määreillä
* varustettujen <div>-elementtien
* vierityspalkin ulkonäön.
* (Toimii vain Internet
* Explorerissa).
*/
div{
scrollbar-face-color:#009ce8;
scrollbar-highlight-color:#303030;
scrollbar-3dlight-color:#000000;
scrollbar-darkshadow-color:#009ce8;
scrollbar-shadow-color:#009ce8;
scrollbar-arrow-color:#0000ff;
scrollbar-track-color:#ffffff;
}
Nyt sivu on valmis. Vai onko?
Ei ole. Sivusta pitää vielä korjata pari IE:n bugia, jotta sen saisi toimimaan, kuten pitäisi:
Lisää tämä koodi tallentamasi HTML-tiedoston "<head>"-tagien väliin (mieluiten loppuun):
<!--[if gte IE 5]>
<style type="text/css">
/*<![CDATA[*/
#runko #yla, #runko #ala{
width: 410px !important;
}
#runko div{
margin-top: 0px;
}
#runko #alakeski{
margin-top: 6px !important;
}
/*]]>*/
</style>
<![endif]-->
luultavasti ihmettelet, mikä tuo on. Tietääksesi lisää lue edelleninen oppaani
IE:n tunnistaminen HTM:n ehdollisten kommenttien avulla.
Lisäys ( 9.6.06 ) :XHTML:ään div:eihin ja CSS:ään siirtymisen hyödyt:
- Koodimäärä on huomattavasti pienempi ---> Pienempi tiedostokoko, koodi selkeämpää ja latautuu nopeammin.
- Sivujesi ylläpito ja päivittäminen helpottuu.
- Sivusto on paremmin käytettävissä kaikilla päätteillä.
- Paremmat hakukonetulokset.
- Käyttämällä CSS:ää voit pitää sisällön erossa ulkoasumääreistä.
- Johtuen sivustosi selkeydestä ja keveydestä, siitä tulee suositumpi.
- Opit käyttämään paremmin CSS:ää ja
Ja tietääksenne, miksi taulukkotaitto on typerää, lukekaa tämä:
http://www.aimedia.fi/stupid_tables/.
Saamani lopputulos:
http://finwe.arkku.net/div_kotisivu_opas/test.html. Lopputuloksena on täysin validia XHTML 1.1 koodia sekä validia CSS:ää, jos vierityspalkkien ulkonäön määrittelevä koodi poistetaan CSS-tiedoston lopusta.
Jos jokin jäi epäselväksi, niin
Kysy minulta.
Kommentteja kiitos. Kommentteja etenkin h1-elementin "varjosta". Eli: toimiiko? Miltä näyttää?
Kiitos.
