Voit itse lisätä ja muuttaa sisältöä muokkaa-painikkeiden avulla

Ennen tallennusta suositellaan ottamaan kopio muokkausruudusta (ctrl-a -> ctrl-c)

 Olet itse vastuussa tämän teoksen käytöstä aiheutuvista vahingoista Lue lisää.

HTML

Wikikko - kansan taitopankkista
Siirry navigaatioon Siirry hakuun

Yleistä[muokkaa]

HTML eli Hypertext Markup Language (suom. hypertekstin merkintäkieli) on merkintäkieli, jolla luodaan yleisesti verkkosivuja. Esimerkki kotisivusta Wikikossa.

Code Guide

Kommentointi[muokkaa]

<!-- Kommentti tähän -->

  • 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[muokkaa]

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

<!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>

<!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>

Vinkkejä[muokkaa]

Name ja Id-attribuuttien ero[muokkaa]

  • 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[muokkaa]

Tagit[muokkaa]

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

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

Päivämäärä[muokkaa]

<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>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

Esimerkit[muokkaa]

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


 <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>

Lomake[muokkaa]

Textarea[muokkaa]

Taulukko[muokkaa]

Mobiiliystävällinen taulukko[muokkaa]

  • Bootstrap -esimerkit
https://mdbootstrap.com/docs/jquery/tables/responsive/
  • Esimerkki 1
https://medium.com/allenhwkim/mobile-friendly-table-b0cb066dbc0e

// 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])
    );
  });
}

Taulukko toisen taulukon sisällä[muokkaa]

nesting 


<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

Sivun tekstikoon muuttaminen[muokkaa]

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

Article ja Section[muokkaa]

  • 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

    .

    • <article> sisällä on <section>
  • Section ...

Div[muokkaa]

  • Määrätystä kohdasta
    ja
    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:
    html-koodi tähän

Span[muokkaa]

  • Määrätystä kohdasta ja 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: teksti tähän
Noudettu kohteesta ”https://wikikko.info/w3/index.php?title=HTML&oldid=214”