HTML, verkkosivujen perusta, määrittää niiden rakenteen ja sisällön. Sitä voi verrata talon perustuksiin, seiniin, oveen ja kattoon.

HTML koostuu olennaisesti kulmasulkeisiin (<>) sijoitetuista elementeistä, jotka esiintyvät yleensä pareittain – avaus- ja sulkutagin muodossa. Nämä elementit muodostavat hierarkkisen rakenteen, jossa jotkin elementit voivat olla sisäkkäin toisten kanssa luoden merkityksellisen asettelun.

Esimerkki:

Napsauta Suorita koodi -painiketta nähdäksesi verkkosivun toiminnassa.

Erilaisten tagien lisääminen HTML:ään

HTML:ssä voidaan käyttää erilaisia tageja erilaisten sisältöjen lisäämiseen verkkosivulle. Näin voidaan lisätä tekstiä, kuvia, linkkejä ja muuta:

Tekstin lisääminen

Tekstin lisäämiseksi verkkosivulle voidaan käyttää <p>-tagia kappaleille sekä <h1>–<h6>-tageja eri tasoisille otsikoille.

Kuvien lisääminen

Kuvien lisäämiseen käytetään <img>-tagia. Määritä kuvan lähde (src-attribuutti) ja halutessasi lisää attribuutteja kuten alt vaihtoehtoiselle tekstille sekä width ja height mitoille.

<img src="image.jpg" alt="Description of the image" width="300" height="200" />

Linkkien lisääminen

Hyperlinkkien lisäämiseen muihin verkkosivuihin tai resursseihin käytetään <a>-tagia. Määritä kohdesivun URL-osoite href-attribuutilla.

Listojen lisääminen

Järjestettyjen (numeroitujen) tai järjestämättömien (pallotettujen) listojen luomiseen käytetään vastaavasti <ol>- ja <ul>-tageja. Näiden tagien sisällä käytetään <li>-tagia jokaiselle listan kohteelle.

Lomakkeiden lisääminen

Käyttäjän syötteiden keräämiseen voidaan käyttää erilaisia lomakkeisiin liittyviä tageja, kuten <form>, <input> ja <button>.

Voimme lisätä verkkosivulle monipuolista sisältöä näiden HTML-tunnisteiden avulla, yksinkertaisesta tekstistä ja kuvista aina vuorovaikutteisiin lomakkeisiin asti. Alla on esimerkki verkkosivusta, jossa käytetään näitä tunnisteita.

Videotutoriaali