HTML:n Perusteet Sisällön Jäsentämiseen
Pyyhkäise näyttääksesi valikon
Seuraavaksi käsittelemme HTML:n, CSS:n ja JavaScriptin perusteet.
Käytämme talon rakentamisen analogiaa auttaaksemme sinua ymmärtämään käsitteet.
Yleiskatsaus riittää, sillä kaikki koodi luodaan ChatGPT:n avulla.
HTML on jokaisen verkkosivun perusta. Se määrittää sivuston rakenteen ja sisällön, aivan kuten seinät, ovet ja katto muodostavat talon.
HTML koostuu elementeistä, jotka yleensä esiintyvät pareittain: avaava tagi ja sulkeva tagi. Elementit muodostavat hierarkian, jossa jotkin elementit ovat sisäkkäin muiden sisällä luoden merkityksellisen sivurakenteen.
Esimerkki
Napsauta Suorita koodi nähdäksesi tuloksen:
index.html
Erilaisten HTML-tunnisteiden lisääminen
HTML:ssä voidaan käyttää erilaisia tunnisteita erilaisten sisältöjen lisäämiseen verkkosivulle. Näin voidaan lisätä tekstiä, kuvia, linkkejä ja muuta sisältöä:
Tekstin lisääminen
Tekstin lisäämiseen verkkosivulle käytetään <p>-tunnistetta kappaleille ja <h1>–<h6>-tunnisteita eri tasoisille otsikoille.
index.html
Kuvien lisääminen
Kuvien lisäämiseen käytetään <img>-tägiä. Määrittele 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>-tägiä. Määrittele kohdesivun URL href-attribuutilla.
index.html
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 sisällä jokainen listan kohta määritellään <li>-tagilla.
index.html
Lomakkeiden lisääminen
Käyttäjän syötteiden keräämiseen voidaan käyttää erilaisia lomakkeisiin liittyviä tageja, kuten <form>, <input> ja <button>.
index.html
Voimme lisätä verkkosivulle monipuolista sisältöä näiden HTML-tunnisteiden avulla, yksinkertaisesta tekstistä ja kuvista aina interaktiivisiin lomakkeisiin asti. Alta löydät verkkosivun, jossa käytetyt tunnisteet on huomioitu.
index.html
Videotutoriaali
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
HTML:n Perusteet Sisällön Jäsentämiseen
Seuraavaksi käsittelemme HTML:n, CSS:n ja JavaScriptin perusteet.
Käytämme talon rakentamisen analogiaa auttaaksemme sinua ymmärtämään käsitteet.
Yleiskatsaus riittää, sillä kaikki koodi luodaan ChatGPT:n avulla.
HTML on jokaisen verkkosivun perusta. Se määrittää sivuston rakenteen ja sisällön, aivan kuten seinät, ovet ja katto muodostavat talon.
HTML koostuu elementeistä, jotka yleensä esiintyvät pareittain: avaava tagi ja sulkeva tagi. Elementit muodostavat hierarkian, jossa jotkin elementit ovat sisäkkäin muiden sisällä luoden merkityksellisen sivurakenteen.
Esimerkki
Napsauta Suorita koodi nähdäksesi tuloksen:
index.html
Erilaisten HTML-tunnisteiden lisääminen
HTML:ssä voidaan käyttää erilaisia tunnisteita erilaisten sisältöjen lisäämiseen verkkosivulle. Näin voidaan lisätä tekstiä, kuvia, linkkejä ja muuta sisältöä:
Tekstin lisääminen
Tekstin lisäämiseen verkkosivulle käytetään <p>-tunnistetta kappaleille ja <h1>–<h6>-tunnisteita eri tasoisille otsikoille.
index.html
Kuvien lisääminen
Kuvien lisäämiseen käytetään <img>-tägiä. Määrittele 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>-tägiä. Määrittele kohdesivun URL href-attribuutilla.
index.html
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 sisällä jokainen listan kohta määritellään <li>-tagilla.
index.html
Lomakkeiden lisääminen
Käyttäjän syötteiden keräämiseen voidaan käyttää erilaisia lomakkeisiin liittyviä tageja, kuten <form>, <input> ja <button>.
index.html
Voimme lisätä verkkosivulle monipuolista sisältöä näiden HTML-tunnisteiden avulla, yksinkertaisesta tekstistä ja kuvista aina interaktiivisiin lomakkeisiin asti. Alta löydät verkkosivun, jossa käytetyt tunnisteet on huomioitu.
index.html
Videotutoriaali
Kiitos palautteestasi!
