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.com”>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