HTML-opas:

 

Tässä on perus HTML-sivu:

<!DOCTYPE html>
<html>
<head>
<title>Minä olen tämän HTML-tuotoksen/projektin otsikko</title>
</head>


<body>

<h1>Minä olen sivulla näkyvä otsikko.</h1>
<p>Ja minä olen sivun tekstiä</p>
</body>

</html>

 

HTML tag:

HTML sivu rakentuu HTML-tageista:

<tagin nimi>Web-sivulla näkyvä tagin sisältö.</tagin nimi>

 

Lisää aiheesta:

http://www.w3schools.com/html/html_intro.asp

 

 

HTML tageja:

 

Otsikkoja:

<h1>Iso otsikko eli heading1</h1>
<h2>Vähän pienempi otsikko eli heading2</h2>
<h3>Vielä vähän pienempi otsikko eli heading3</h3>

Lisää esimerkkejä:

http://www.w3schools.com/html/html_headings.asp

 

Tekstiä sivulle:

<p>Tässä on sivulle tulevaa tekstiä</p>

<p>Ja tässä vähän lisää tekstiä</p>

Lisää esimerkkejä:

http://www.w3schools.com/html/html_paragraphs.asp

 

Voit kokeilla myös erikoistekstejä:

<p>Tämä teksti on normaalia.</p>

<p><b>Tämä teksti on lihavoitu.</b></p>

 

Alla erilaisia erikoistekstivaihtoehtoja:

<b> – Lihavoitu teksti

<strong> – Tärkeä teksti

<i> – Italic teksti

<mark> – Merkattu teksti

<small> – Pieni teksti

<del> – Poistettu teksti

<sub> – Pieni alakirjoitus

<sup> – Pieni yläkirjoitus

Lisää esimerkkejä:

http://www.w3schools.com/html/html_formatting.asp

 

Voit lisätä linkkejä:

<a href=”https://kodarit.fi”>Tässä linkki Kodareiden sivuille</a>

<a href=”http://google.con”>Tässä linkki Googlen sivuille</a>

Lisää esimerkkejä:

http://www.w3schools.com/html/html_links.asp

 

Voit lisätä kuvia:

<img src=kuva.jpg” width=”104” height=”142”>

scr = kuvatiedoston nimi ja paikka mistä kuva haetaan, esim jos kuva on samassa hakemistossa, kun html-tiedosto niin voidaan antaa vaan kuvatiedoston nimi.

Kuvan koon voi antaa pikseleinä leveys( width) ja korkeus(height) kohtiin:

Jos kuva on esim kuvat kansiossa, se haetaan näin:

<img src=”/kuvat/kuva.jpg” width=”104” height=”142”>

Kuva voidaan myös hakea internetistä joltain toiselta palvelimelta, esimerkisi w3schoolin palvelimelta antamalla kuvan url-osoite:

<img src=http://www.w3schools.com/images/w3schools_green.jpg”>

Lisää esimerkkejä:

http://www.w3schools.com/html/html_images.asp

 

Voit lisätä videoita:

Jos sinulla on video samassa hakemistossa kuin html-tiedostosi:

<video width=”320” height=”240” controls>
<source src=mun_video.mp4″ type=”video/mp4”>
</video>

Voit myös lisätä Youtube-videon suoraan:

<iframe width=”420” height=”345” src=”https://www.youtube.com/embed/XGSy3_Czz8k”>

</iframe>

Lisää esimerkkejä:

http://www.w3schools.com/html/html5_video.asp

 

Voit lisätä sivulle ääntä:

<audio controls>

<source src=”oma_biisi.mp3” type=”audio/mpeg”>

</audio>

Lisää esimerkkejä:

http://www.w3schools.com/html/html5_audio.asp

 

Voit listata asioita:

<ul>
<li>Kahvi</li>
<li>Tee</li>
<li>Maito</li>
</ul>

Lisää esimerkkejä:

http://www.w3schools.com/html/html_lists.asp

 

Voit tehdä taulukon:

<table>
<tr>
<th>Etunimi</th>
<th>Sukunimi</th> 
<th>ikä</th>
</tr>
<tr>
<td>Pekka</td>
<td>Töpöhäntä</td> 
<td>12</td>
</tr>
<tr>
<td>Maija</td>
<td>Maitoparta</td> 
<td>13</td>
</tr>
</table>

Lisää esimerkkejä:

http://www.w3schools.com/html/html_lists.asp

 

Voit tehdä lomakkeen, jossa kysellään käyttäjältä jotain:

<form>
Etunimi:<br><input type=”text” name=”Etunimi”><br>
Sukunimi:<br><input type=”text” name=”Sukunimi”><br>

<input type=”radio” name=”gender” value=”male” checked>Mies<br>
<input type=”radio” name=”gender” value=”female”>Nainen<br>
<input type=”radio” name=”gender” value=”other”>Muu<br>

<input type=”submit” value=”Lähetä”>
</form>

Lisää esimerkkejä:

http://www.w3schools.com/html/html_forms.asp

http://www.w3schools.com/html/html_form_elements.asp

http://www.w3schools.com/html/html_form_input_types.asp