HTML -kuvauskieli

2020-04-22T18:51:00+03:00

HTML (lyhenne sanoista Hypertext Markup Language) on avoimesti standardoitu kuvauskieli, jolla voidaan kuvata hyperlinkkejä sisältävää tekstiä eli hypertekstiä. HTML-dokumenttien verkkoa internetissä kutsutaan World Wide Webiksi eli lyhyesti webiksi. Joillekin se on yhtä kuin Internet. HTML:n historia alkaa vuodesta 1989 ja se on elänyt ja kasvanut eri versioina tähän päivään ja näkyvissä olevaan tulevaisuuteen saakka. Tämän päivän versiota kutsutaan nimellä HTML5.

HTML-koodi on rakenteista tekstiä, joka muodostuu sisäkkäisistä ja perättäisistä elementeistä.

Rakenteellinen merkkaus määrittää elementin tarkoituksen.
Esityksellinen merkkaus määrittää elementin ulkoasun, mutta ei tarkoitusta.
Hypertekstuaaliset merkkaukset linkittävät osia dokumentista toisiin dokumentteihin.

HTML-dokumentteja on mahdollista kirjoittaa millä tahansa tekstinmuokkaimellla, mutta käytettävissä on myös erityisiä HTML-muokkaajia. Periaatteessa HTML-koodin tulisi aina läpäistä vahvistaminen, mutta käytännössä selaimet hyväksyvät myös dokumentteja, joiden HTML-koodi ei ole standardin mukaista. Etäopintojaksolla HTML -kuvauskoodia voi kirjoittaa Notepadilla eli Muistio -ohjelmalla ja sivut voi avata millä tahansa selaimella. Kun tallennat html -koodisi, kirjoita ".txt" loppuosan tilalle ".html".

Apua tehtäviin voi hakea myös mm. tästä HTML5 tutoriaalista.

HTML -sivun perusrakenne (kopioi tästä tai muualta harjoituksia varten)

<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>

</body>
</html>

HTML elementtejä eli tageja

Elementti (tag)	Selitys	Esimerkki
<html> </html>	Avaa ja sulkee html-sivun
<head> </head>	Avaa ja sulkee header-osan, jossa määritetään mm. sivun otsikko ja metatiedot
<body> </body>	Avaa ja sulkee body-osan eli sivun varsinaisen rungon
<title> </title>	Selaimen ikkunassa näkyvä otsikko	<title>Minun oma sivu </title>
<h1> </h1>	Ylätason otsikko. Otsikkotasoja on kaikkiaan kuusi ( h1 – h6 )	<h1>Ollin kotisivu </h1>
<p> </p>	Tekstikappale	<p> Plaa plaa plaa. </p>
<br>	Rivinvaihto
<!-- -->	Kommentti	<!-- tämä on kommentti -->
<img src="" alt="">	Kuva	<img src="logo.png" alt="Juokkuelogo">
<a href="url"> </a>	Linkki	<a href="https://fcbayern.com/en">FC Bayern Munchen</a>
<ul> <li> </li> </ul>	Numeroimaton lista	<ul> <li>Koira</li> <li>Kissa</li> <li>Kiraffi</li> </ul>
<ol> <li> </li> </ol>	Numeroitu lista	<ol> <li>Koira</li> <li>Kissa</li> <li>Mato</li> </ol>
style="background-color:väri;"	Taustaväri	<body style="background-color:blue;">
style="color:blue;"	Fontin väri	<h1 style="color:blue;">Fanisivu</h1>
style="font-family:courier;"	Fontti	<p style="font-family:courier;">Hurja määrä tekstiä.</p>
style="font-size:300%;"	Fontin koko	<h1 style="font-size:300%;">Fanisivu</h1>
<table> <tr> <td> </td> </tr> </table>	Taulukko	<table> <tr> <th>Etunimi</th> <th>Sukunimi</th> </tr> <tr> <td>Aku</td> <td>Ankka</td> </tr> <tr> <td>Hessu</td> <td>Hopo</td> </tr> </table>
style="background-image: url(kuva.jpg)"	Taustakuva	<body style="background-image: url(kuva.jpg)">
<header> </header>	Määrittää html-sivun ylälohkon
<nav> </nav>	Määrittää alueen sivun sisäiseen navigointiin
<section> </section>	Määrittää html-sivun lohkon
<article> </article>	Määrittää html-sivun itsenäisen sisältölohkon
<footer> </footer>	Määrittää html-sivun alalohkon

HTML -sivun tekeminen Muistio -ohjelmalla

2020-04-22T18:49:20+03:00

1) Avaa Muistio ja kirjoita siihen HTML -koodi. Katso mallia kuvasta 1.

2) Tallenna nimellä. Kirjoita nimen loppuosaksi ".html". Katso mallia kuvasta 2.

3) Avaa HTML -sivu selaimessa kaksoisklikkaamalla sitä. Katso kuva 3.

Ohjeet

HTML -kuvauskieli

HTML -sivun tekeminen Muistio -ohjelmalla