imported>WikikkoSysop: /* Yleistä */

2022-01-09T22:31:04Z

Yleistä

Uusi sivu

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

[https://codeguide.co Code Guide]

== Kommentointi ==
<nowiki></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]]

HTML - Muutoshistoria

imported>WikikkoSysop: /* Yleistä */