Muokataan sivua HTML

== Yleistä ==
HTML eli Hypertext Markup Language (suom. hypertekstin merkintäkieli) on merkintäkieli, jolla luodaan yleisesti verkkosivuja. Esimerkki [[Kotisivut|kotisivusta]] Wikikossa.

== Kommentointi ==
<nowiki><!-- Kommentti tähän --></nowiki>
* Huomaa, että kommentointi tapahtuu eri tavoin eri kielissä, joten jos esimerkiksi yhdistät samassa tiedostossa php- ja html-kieltä, on käytettävä kielen omaa kommentointitapaa.

== Sivun runko ==
 <!DOCTYPE html>
 <html lang="fi-FI">
 <head>
 <meta charset="utf-8">
 <title>{$title}</title>
 </head>
 <body>
 </body>

<pre>
<!DOCTYPE HTML>
<html>
<head>
<title>Sivun nimi</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<style type='text/css'/>
@media screen { }
@media print { }
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<p>Tähän sivusto</p>
</body>
</html>
</pre>

<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sivun nimi</title>
<style type="text/css" media="screen">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<p>Tähän sivusto</p>
</body>
</html>
</pre>

== Vinkkejä ==
=== Name ja Id-attribuuttien ero ===
* Name-attribuutti: Käytetään lähetettäessä kyseistä kohtaa oleva tieto, esimerkiksi lomaketieto toiselle nettisivulle. Esimerkiksi radiopainikkeiden kohdalla kaikilla on sama name-attribuutti. 
* Id-attribuutti: Määritellään kyseinen kohta, elementti, johon voidaan viitata sivun sisällä esim. CSS, JavaScript.

== Apuohjelmia ==
* [https://validator.w3.org W3C Markup Validation Service]: Tarkastaa html-koodin. 
* [http://htmlpurifier.org HTML Purifier]: PHP-pohjainen suodatin, puhdistaa html-koodin epäilyttävästä XSS-koodista ja siistii koodin.

== Tagit ==
Tagit kirjoitetaan aina <- ja >-merkkien väliin. Aloitetaan <tagi> ja lopetetaan </tagi> Ohessa muutamia HTML-tageja...

<table border="1" align="center" style="border: 1px solid Black;">
<tr> <td> '''Tagi''' </td> <td> '''Selitys''' </td> </tr>
<tr> <td> BODY </td> <td> Aloittaa sivuston näkyvän osion. </td> </tr>
<tr> <td> B </td> <td> Lihavoi tekstin </td> </tr>
<tr> <td> I </td> <td> Kursivoi tekstin </td> </tr>
<tr> <td> U </td> <td> Alleviivaa tekstin </td> </tr>
<tr> <td> FONT </td> <td> Asettaa fontin, esimerkkinä FONT COLOR="Väri" FACE="FontinNimi". </td> </tr>
<tr> <td> H </td> <td> H(numero 1-6), tekee "otsikkotekstin" </td> </tr>
<tr> <td> A </td> <td> A href="URL"   Tekee linkin. Teksti tagien väliin. </td> </tr>
<tr> <td> SMALL </td> <td> Tekee pienenpientä tekstiä </td> </tr>
<tr> <td> STRONG </td> <td> Nimensä mukaan tekee <strong> VAHVAA </strong> tekstiä. </td> </tr>
<tr> <td> IMG </td> <td> IMG src="kuvanimi.muoto". Ei vaadi lopetustagia ( </jotain> ) </td> </tr>
<tr> <td> TEXTAREA </td> <td> Tekee tekstilaatikon. Koko määritellään cols="kirjaimet vaaka" rows="rivit" -lisäkkeillä.</td></tr>

</table>

== Päivämäärä ==
<pre>
<form action="https://sivu-johon-siirrytään-kun-lomake-lähetetään.php">
<label for="start">Syötä päivämäärä:
<input type="date" id="paivamaara" name="paivamaara"
       value="2019-12-24"
       min="2019-12-20" max="2020-12-19" required></label>
<p><button>Lähetä</button></p>
</form>
</pre>
: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

== Esimerkit ==
Ohessa "Eetu Esimerkin" kotisivumalli. Voit nähdä sen toimivana osoitteessa [http://kaffila.comoj.com/wikikkoon/eetuesimerkki.html http://kaffila.comoj.com/wikikkoon/eetuesimerkki.html] tai voit liittää sen muistioon ja tallentaa nimellä index.html ja avata sen selaimellasi.

 <nowiki>

 <html>
    <head>
       <title> Sivuston otsikko </title>
    </head>
 
    <body>
        <table border="1" width="500" align="center">
            <tr>
                 <td>
                     <h2> Eetu Esimerkin kotisivu </h2>
                     Hei, olen Eetu Esimerkki ja tämä on minun
                     kotisivuni. <br> <br>
                     <b> Yhteystiedot: </b>
                     E-Mail: <a href="mailto:eetu.esimerkki@koomail.fi">eetu.esimerkki[at]koomail.fi</a> <br>
                     Puh: 06-12312312 <br>
                     <br> Viihdy sivustollani! <br>
                 </td>
            </tr>
        </table>
    </body>
 </html>

 </nowiki>

== Lomake ==
* Vinkkejä mobiiliystävälliseen lomakkeeseen: https://www.smashingmagazine.com/2018/08/best-practices-for-mobile-form-design

=== Textarea ===
* Tekstin mukaan säätyvä alue: https://codepen.io/vsync/pen/frudD

== Taulukko ==
* Esimerkkejä taulukoista https://www.w3.org/Style/Tables/examples
* Taulukon sisäviivat CSS: https://www.lifewire.com/add-internal-lines-to-table-with-css-3469872 
* Taulukon lajittelu sarakkeen mukaan: JavaScript-vaihtoehtona https://www.w3schools.com/howto/howto_js_sort_table.asp
** Jos arvot tuodaan tietokannasta voi sarakkeen otsikkorivistä tehdä linkin, joka lataa saman sivun uudestaan ja uusi tietokantahaku sisältää lajittelun. 
* Table-layout: https://css-tricks.com/almanac/properties/t/table-layout

=== Mobiiliystävällinen taulukko ===
* Bootstrap -esimerkit
: https://mdbootstrap.com/docs/jquery/tables/responsive/

* Esimerkki 1
: https://medium.com/allenhwkim/mobile-friendly-table-b0cb066dbc0e

<pre>

// CSS
@media screen and (max-width: 600px) {
  table thead {
    display: none;
  }
  table td {
    display: flex;
  }
  
  table td::before {
    content: attr(label);
    font-weight: bold;
    width: 120px;
    min-width: 120px;
  }
}

// JavaScript
window.setMobileTable = function(selector) {
  // if (window.innerWidth > 600) return false;
  const tableEl = document.querySelector(selector);
  const thEls = tableEl.querySelectorAll('thead th');
  const tdLabels = Array.from(thEls).map(el => el.innerText);
  tableEl.querySelectorAll('tbody tr').forEach( tr => {
    Array.from(tr.children).forEach( 
      (td, ndx) =>  td.setAttribute('label', tdLabels[ndx])
    );
  });
}

</pre>

=== Taulukko toisen taulukon sisällä ===
nesting

<pre>

<table> Uloin taulukko
<tr> Uloimman taulukon ensimmäinen rivi
<td>teksti</td> Ensimmäisen rivin ensimmäinen sarake
<td> Ensimmäisen rivin toinen sarake
    <table> Sisempi taulukko
    <tr><td>teksti</td></tr> Sisemmän taulukon ensimmäinen rivi
    </table> Sisemmän taulukon lopetus
</td> Ensimmäisen rivin toisen sarakkeen lopetus
</tr> Ensimmäisen rivin lopetus
</table> Uloimman taulukon lopetus

</pre>

== Sivun tekstikoon muuttaminen ==
: https://davidwalsh.name/change-text-size-onclick-with-javascript
: https://www.pair.com/support/kb/resize-sites-font-jquery

== Article ja Section ==
* Article, form ja table määrittävät sen sisällön. Div ja span eivät kerro sen sisällöstä. 
* Article on itsenäinen osa sivua. Esimerkiksi foorumin kommentti. Viitataan css: article. Html-koodissa voidaan ilmaista <article class='jotain'> Sisältää usein tagit <h> ja <p>. 
** <article> sisällä on <section>
* Section ...

== Div ==
* Määrätystä kohdasta <div> ja </div> välissä muodostetaan oma "lohkonsa", jolle voidaan kohdistaa eri toimenpiteitä ja muotoiluja. 
* Huomaa, että div-osion jälkeen syntyy rivinvaihto, joten jos rivinvaihtoa ei haluta, on käytettävä esim. span
* css-koodissa div-osioon viitataan: .osionnimi { css muotoilu tähän; }
* html-koodissa div-osio nimetään seuraavasti: <div class="osionnimi"> html-koodi tähän </div>

== Span ==
* Määrätystä kohdasta <span> ja </span> välissä muodostetaan oma "osionsa", jolle voidaan kohdistaa eri toimenpiteitä ja muotoiluja. 
* Huomaa, että span-osion jälkeen ei ole rivinvaihtoa, joten span voidaan käyttää esim. tekstin keskellä, johon div ei sovellu
* css-koodissa span-osioon viitataan: .osionnimi { css muotoilu tähän; }
* html-koodissa span-osio nimetään seuraavasti: <span class="osionnimi"> teksti tähän </span>

[[Luokka:Tietokoneet]]