Ohjeet

HTML -kuvauskieli

HTML (lyhenne sanoista Hypertext Markup Language) on avoimesti standardoitu kuvauskieli, jolla voidaan kuvata hyperlinkkejä sisältävää tekstiä eli hypertekstiä. HTML-dokumenttien verkkoa internetissä kutsutaan World Wide Webiksi eli lyhyesti webiksi. Joillekin se on yhtä kuin Internet. HTML:n historia alkaa vuodesta 1989 ja se on elänyt ja kasvanut eri versioina tähän päivään ja näkyvissä olevaan tulevaisuuteen saakka. Tämän päivän versiota kutsutaan nimellä HTML5.

HTML-koodi on rakenteista tekstiä, joka muodostuu sisäkkäisistä ja perättäisistä elementeistä. 
  • Rakenteellinen merkkaus määrittää elementin tarkoituksen.
  • Esityksellinen merkkaus määrittää elementin ulkoasun, mutta ei tarkoitusta.
  • Hypertekstuaaliset merkkaukset linkittävät osia dokumentista toisiin dokumentteihin.

HTML-dokumentteja on mahdollista kirjoittaa millä tahansa tekstinmuokkaimellla, mutta käytettävissä on myös erityisiä HTML-muokkaajia. Periaatteessa HTML-koodin tulisi aina läpäistä vahvistaminen, mutta käytännössä selaimet hyväksyvät myös dokumentteja, joiden HTML-koodi ei ole standardin mukaista. Etäopintojaksolla HTML -kuvauskoodia voi kirjoittaa Notepadilla eli Muistio -ohjelmalla ja sivut voi avata millä tahansa selaimella. Kun tallennat html -koodisi, kirjoita ".txt" loppuosan tilalle ".html". 

Apua tehtäviin voi hakea myös mm. tästä HTML5 tutoriaalista.

HTML -sivun perusrakenne (kopioi tästä tai muualta harjoituksia varten)

<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>

</body>
</html>

HTML elementtejä eli tageja
Elementti (tag) Selitys Esimerkki
<html> </html> Avaa ja sulkee html-sivun  
<head> </head> Avaa ja sulkee header-osan, jossa määritetään mm. sivun otsikko ja metatiedot  
<body> </body> Avaa ja sulkee body-osan eli sivun varsinaisen rungon  
<title> </title> Selaimen ikkunassa näkyvä otsikko <title>Minun oma sivu </title>
<h1> </h1> Ylätason otsikko. Otsikkotasoja on kaikkiaan kuusi ( h1 – h6 ) <h1>Ollin kotisivu </h1>
<p> </p> Tekstikappale <p> Plaa plaa plaa. </p>
<br> Rivinvaihto  
<!-- --> Kommentti <!-- tämä on kommentti --> 
<img src="" alt=""> Kuva <img src="logo.png" alt="Juokkuelogo">
<a href="url"> </a> Linkki <a href="https://fcbayern.com/en">FC Bayern Munchen</a>
<ul>
<li>
</li>
</ul>		 Numeroimaton lista <ul>
  <li>Koira</li>
  <li>Kissa</li>
  <li>Kiraffi</li>
</ul>
<ol>
<li>
</li>
</ol>		 Numeroitu lista <ol>
  <li>Koira</li>
  <li>Kissa</li>
  <li>Mato</li>
</ol>
style="background-color:väri;" Taustaväri <body style="background-color:blue;">
style="color:blue;" Fontin väri <h1 style="color:blue;">Fanisivu</h1>
style="font-family:courier;" Fontti <p style="font-family:courier;">Hurja määrä tekstiä.</p>
style="font-size:300%;" Fontin koko <h1 style="font-size:300%;">Fanisivu</h1>
<table>
<tr>
<td>
</td>
</tr>
</table>		 Taulukko <table>
<tr>
<th>Etunimi</th>
<th>Sukunimi</th>
</tr>
<tr>
<td>Aku</td>
<td>Ankka</td>
</tr>
<tr>
<td>Hessu</td>
<td>Hopo</td>
</tr>
</table>
style="background-image: url(kuva.jpg)" Taustakuva <body style="background-image: url(kuva.jpg)">
<header> </header> Määrittää html-sivun ylälohkon  
<nav> </nav> Määrittää alueen sivun sisäiseen navigointiin  
<section> </section> Määrittää html-sivun lohkon  
<article> </article> Määrittää html-sivun itsenäisen sisältölohkon   
<footer> </footer> Määrittää html-sivun alalohkon  

HTML -sivun tekeminen Muistio -ohjelmalla

1) Avaa Muistio ja kirjoita siihen HTML -koodi. Katso mallia kuvasta 1.

2) Tallenna nimellä. Kirjoita nimen loppuosaksi ".html". Katso mallia kuvasta 2.

3) Avaa HTML -sivu selaimessa kaksoisklikkaamalla sitä. Katso kuva 3.