Mitä on HTML-kieli?

2021-01-28T08:33:38+02:00

HTML-elementit

Elementeillä on aina aloitus ja lopetus, joiden välissä on varsinainen elementin sisältö. Esim.

<title>Kotisivuntekokurssi </title>

<title> on aloituselementti.
</title> on lopetuselementti. Lopetuselementissä on aina /-merkki.

Elementtien välillä ja tekstin keskellä saa olla vapaasti välilyöntejä tai rivinvaihtoja.

Esimerkki todella yksinkertaisesta kotisivusta:

<html>
<head>
<title>Sivustoa kuvaava otsikko</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Dokumentin pääotsikko</h1>
<p>Tähän tekstiä...</p>
</body>
</html>

html-elementti on dokumentin juurielementti. Kaikki varsinaiset elementit tulevat tämän elementin sisälle.
head-elementti sisältää kaiken tiedon dokumenttiin liittyvästä tiedosta.
title-elementti sisältää jonkin hyvin dokumenttia kuvaavan otsikon. Otsikon pitää olla järkevä, vaikka se otettaisiin erilleen koko dokumentista. Otsikko näkyy myös selaimen otsikkorivillä, kun sivu on avattuna selaimessa.
meta charset UTF-8 kannattaa lisätä head-elementin sisään, jotta sivulle saadaan käyttöön erilaiset merkit ja esimerkiksi kirjaimet A ja Ö.
body-elementti sisältää kaiken varsinaisen WWW-sivulla näkyvän ja dokumentin runkoon kuuluvan informaation.
h1-elementti on korkeimman otsikkotason elementti. Jokaisella sivulla pitäisi aina olla vain ja ainoastaan yksi h1-elementti, joka kertoo koko dokumentin pääotsikon. Tämä on siis poikkeus tekstinkäsittelyyn, jossa ensimmäisen tason otsikkoja voi olla useita.
p-elementti merkitsee tekstikappaleen.

HTML-koodi kirjoitetaan siis index.html- tiedostoon ohjelmalla nimeltä Atom. Nettisivun voi nähdä Internet-selaimessa klikkaamalla kansiossa olevaa index.html tiedostoa ja aukaisemalla sen selaimella.

Harjoitus

2020-01-15T12:49:56+02:00

1. Luo omaan kansioosi uusi kansio nimeltä "HTML". Tähän kansioon tehdään harjoitukset ja lopullinen työ.

2. Avaa Atom ja avaa uusi tiedosto. Tallenna tiedosto kansioosi nimellä index.html

3. Kopioi yllä käsitelty esimerkki todella yksinkertaisesta kotisivusta ja tallenna tiedosto. Paina yhtäaikaa ctrl+shift+h, jolloin atom aukaisee erillisen esikatseluikkunan. Tutki sivua ja vertaa sitä kopioimaasi koodiin.

4. Laita title-elementin sisällöksi Pasi-Anssi. Hakukoneet löytävät parhaiten title-elementissä olevan tekstin, jolloin sen on syytä olla perusmuodossa.

6. Muokkaa sivun pääotsikkoa (h1). Kirjoita otsikkoon myös Pasi-Anssi.

7. Kirjoita lyhyt parin lauseen kuvaus siitä, mitä Pasi-Anssi harrastaa ja tekee vapaa-aikana. Käytä mielikuvista. Muokkaat siis p-elementtiä.

8. Laita väliotsikoksi (h2) Yhteystiedot ja keksi Pasi-Anssin osoite, puhelinnumero ja sähköpostiosoite. Yhteystiedot saat jaettua siististi omille riveilleen br-elementin avulla

Esim.
<p>Henri Leinonen<br />
Sydän-Laukaan koulu<br />
565456545</p>

Testaa sivun toimivuus Internet-selaimessa!

Harjoitus 1

Mitä on HTML-kieli?

Harjoitus