HTML-perustagit

HTML-perustagit


Kaikkein tärkeimmät tagit HTML:ssä ovat tagit jotka määrittävät otsikot, kappaleet ja rivinvaihdot.

Paras tapa oppia HTML on harjoitella esimerkkien parissa. W3C school on luonut helpon on-line html-editorin, jonka avulla voidaan editoida HTML-lähdekoodia. "Test"-painiketta klikkaamalla näet editoinnin tuloksen selaimessa.


Kokeile itse - Esimerkkejä

Erittäin yksinkertainen HTML dokumentti
Esimerkissä on erittäin yksinkertainen HTML-dokumentti, joka sisältää minimimäärän tageja. Esimerkki ilmentää kuinka body-elementin sisällä oleva tagi näytetään selaimessa. 

Yksinkertaisia kappaleita
Esimerkki näyttä kuinka kappale-elementin sisällä oleva teksti näytetään selaimessa.

(lisää esimerkkejä sivun alaosassa)


Otsikot

Otsikot määritellään <h1> - <h6> tageilla. <h1> määrittää suurimman otsikon. <h6> määrittää pienimmän otsikon.

<h1>Tämä on otsikko</h1>
<h2>Tämä on otsikko</h2>
<h3>Tämä on otsikko</h3>
<h4>Tämä on otsikko</h4>
<h5>Tämä on otsikko</h5>
<h6>Tämä on otsikko</h6>

HTML lisää automaattisesti tyhjän rivin ennen ja jälkeen otsikon.


Kappaleet

Kappaleet määritellään <p>-tagilla.

<p>Tämä on kappale</p>
<p>Tämä on toinen kappale</p>

HTML lisää automaattisesti tyhjän rivin ennen ja jälkeen kappaleen.


Rivinvaihdot

<br>-tagia käytetään kun halutaan päättää rivi, mutta ei haluta aloittaa uutta kappaletta. <br>-tagi aikaansaa pakotetun rivinvaihdon kohtaan johon se sijoitetaan.

<p>Tämä <br> on kap<br>pale rivinvaihdoilla.</p>

<br>-tagi on tyhjä (sisällötön). Sillä ei ole lopputagia.


Kommentit HTML:ssä

Kommenttitagia käytetään lisäämään kommentti HTML:n lähdekoodiin. Selain ei huomioi kommentteja. Kommentteja käytetään selittämään lähdekoodia myöhempää editointia varten.

<!-- Tämä on kommentteja -->

Huomaa, että aloitusmerkin jälkeen on huutomerkki. Tätä ei kuitenkaan ole lopussa.


Huomioita ja vinkkejä

Kun kirjoitat HTML:ää, et voi koskaan olla varma kuinka teksti näytetään lukijan selaimessa. Sivun ulkoasu vaihtelee näytön resoluutiosta ja selainikkunan koosta riippuen. Älä yritä koskaan muotoilla tekstiä tietyn näköiseksi lisäämällä siihen tyhjiä rivejä tai välilyöntejä.

HTML poistaa tekstissä olevat ylimääräiset välilyönnit. Usealla peräkkäisellä välilyönnillä on sama vaikutus kuin vain yhdellä. Uusi rivi tulkitaan HTML:ssä välilyönniksi.

Tyhjien kappaleiden <p> käyttäminen tyhjien rivien lisäämiseksi on huono käytäntö. Käytä tämän sijaan <br>-tagia.

Olet ehkä huomannut, että kappaleet voidaan kirjoittaa ilman lopputagia </p>. Älä kuitenkaan luota tähän, sillä seuraava HTML:n version ei salli lopputagien puuttumista.

HTML lisää automaattisesti tyhjän rivin ennen ja jälkeen tiettyjen elementtien kuten kappale- ja otsikko-elementit.

Tässä ohjeessa käytetään horisontaalista jakajaa <hr> erottamaan tekstin osia.


Lisää esimerkkejä

Lisää kappaleita
Esimerkki havainnolistaa eräitä kappale-elementin ominaisuuksia.

Rivinvaihto
Esimerkki havainnollistaa rivinvaihto-elementin käyttöä.

Runo-ongelmat
Esimerkki havainnollistaa tiettyjä HTML:n muotoiluongelmia.

Otsikot
Esimerkki havainnollistaa otsikkotagien käyttöä.

Keskitetty otsikko
Esimerkki havainnollistaa attribuuttien käyttöä otsikko-elementille.

Horisontaalinen jakaja
Esimerkki havainnollistaa <hr>-tagin käyttöä

Piilotetut kommentit
Esimerkki havainnollistaa kommenttielementin käyttöä.

Taustaväri
Esimerkki havainnollistaa taustavärin lisäämistä HTML-sivulle.


Perus HTML-tagit

Tagi Kuvaus
<html> Määrittelee HTML-dokumentin
<body> Määrittelee dokumentin rungon
<h1> to <h6> Määrittelee otsikkotasot 1-6
<p> Määrittelee kappaleen
<br> Lisää rivinvaihdon
<hr> Määrittelee horisontaalisen jakajan
<!--> Määrittelee kommentin

 

AttachmentSize
03perustagiharjoitus.rtf7.34 KB