Saimme tämän HTML5 & CSS3 sarjan ensimmäisessä osassa sivun rungon valmiiksi. Sisällön lisäämiseen ryhdytään seuraavaksi. Lisää aloittavan ja lopettavan body-tagien väliin seuraavat rivit:

<h1>Tervetuloa websivulleni!</h1>
<p>Tässä vähän koodailin aikani
kuluksi ja tein tällaisen websivun.
Ne tekee jotka osaa, muut vaan katselee.</p>

Jatkossakin, jollen erikseen pyydä, lisää kaikki koodi body-tagien väliin. Asiat näkyvät sivulla juuri siinä kohdassa/siinä järjestyksessä mihin olet ne koodissa sijoittanut.

Sivun avaaminen selaimessa

Tallenna työ ja avaa selaimessa. Selainten Tiedosto/Avaa komennot ovat nykyään vaikka missä, joten helpointa on paikallistaa tiedosto resurssienhallinnassa, napsauttaa tiedostoa hiiren oikealla ja antaa avautuvassa valikossa komento ”Avaa sovelluksessa”. Valitse sitten listasta haluamasi (tai joku löytyvä) selain. Suosittelen vahvasti hommaamaan ainakin käytetyimmät selaimet koneellesi, jotta voit testata sivujasi niillä. Eri selaimet esittävät sivun hieman eri tavoin.

Tältä pitäisi tuloksen suurinpiirtein näyttää:

Huomaat heti, että otsikkosi on isompi kuin alla oleva rivi. Se johtuu siitä, että se on ympäröity otsikko tagilla, isoimmalla sellaisella eli <h1>:llä. Käytä otsikkoja hierarkkisesti, siten että h1 on tärkein, h2 sitä vähemmän tärkeä, h3 kakkosta vähemmän tärkeä jne tarvittaessa aina h6:een asti ja niin usein kuin tarvitset.

Alempi rivi on ympäröity <p> eli kappale tagilla. Sekä otsikkoa että kappaletta seuraa aina tyhjä rivi.

Validointi

Ennen kuin jatketaan, muutama sana validoinnista. Validointi on prosessi, jossa tarkistetaan, että dokumentti, eli kirjoittamasi koodi vastaa virallista standardia. Jos sivullesi annetaan tarkastuksessa vihreää valoa, näkyy se oikein kaikissa selaimissa, jotka tukevat standardia. Linkistä pääset W3C:n validaattoriin. Siellä on kolme tapaa tarkistaa sivu, joko kirjoittamalla palvelinosoitteen (URI), lataamalla html-tiedoston (File upload) tai liittämällä koodi suoraan sivulle (direct input).

Sinulla on koodi tallennettuna tiedostoksi, kokeile File Uploadia! Jos kaikki on kunnossa, saat ilmoituksen:

Tekstin muotoilu

Lisää nyt koodiisi muutama muu otsikkotaso, esim: <h2>Tässä otsikko</h2><h3>Tässä otsikko</h3><h6>Tässä otsikko</h6> ja pari lyhyttä tekstikappaletta. Lihavoidaan sitten ensimmäisen kappaleen kaksi ekaa sanaa (”Tässä vähän”) ympäröimällä ne <strong></strong> tagilla.

Kokeile myös alleviivausta <ins> ja kursivointia <em>. Testaa ehtiessäsi mitä tapahtuu kun käytät sanoihin <small>, <sub>, <sup> ja <mark> tageja.

Paljoa muuta ei sitten tekstin muotoilemiseksi voi HTML:n avulla tehdä, eikä ole tarkoituskaan. Edellä mainitut erilaiset korostukset voisi tehdä myös CSS:n avulla, joka on tarkoitettu ulkoasun määrittelyyn siinä missä HTML sisällön määrittelyyn.

Listat

HTML:ssa on kolme erilaista listaa käytössä tiedon organisoimiseen: Järjestetty, Järjestämätön ja Määritelmälista.

Järjestämätön on lista, jossa listattavien asioiden edessä on jokin merkki (pallo/disc, ympyrä/circle, tai neliö/square.) Lista aloitetaan ja lopetetaan ul-tagilla ja listattavat asiat ympyröidään li-tagilla. Listan merkin saa vaihdettua type-attribuutilla. Oletuksena käytetään palloa.

<ul type="disc">
<li>Nappi</li>
<li>Penni</li>
<li>Onni</li>
</ul>

Järjestetty lista tehdään ol- tagien väliin ja kuten merkkilistassa jokainen listattava asia laitetaan li-tagiin. Jokaisen listassa olevan asian edessä on numero, kirjain (suuret=”A”, pienet=”a”), tai roomalaiset numerot (suuret=”I”, pienet=”i”). Listan merkkiä voidaan vaihtaa type-attribuutilla. Oletuksena käytetään numerointia.

<ol>
<li>Onni</li>
<li>Nappi</li>
<li>Penni</li>
</ol>

Voit laittaa listoja myös sisäkkäin:
<h2>Parhaat eläinten nimet</h2>
   <ul>   
      <li>
<h3>Koirat</h3>
          <ol>
<li>Onni</li>
<li>Nappi</li>
          </ol>
      </li>
      <li>
<h3>Kissat</h3>
          <ol>
<li>Killi</li>
<li>Pablito</li>
</ol>
          </li>
    </ul>  

Tuloksena:
 

Määritelmälista on lista, jossa on määriteltävä asia ja sen alla asian määritelmä. Lista ympäröidään dl-tagilla, määritettävä asia dt-tagilla ja määritelmä dd-tagilla.

<dl>
<dt>Hevonen</dt>
<dd>Kavioeläin</dd>
<dt>Dinosaurus</dt>
<dd>Sukupuuttoon kuollut lisko</dd>
</dl>


Tässä taas kaikki tältä erää. Kolmannessa osassa lisätään linkkejä.