Kurssisisältö

HTML:n Perusteet

1. Verkkokehityksen Ymmärtäminen

Tervetuloa HTML:n ja Web-kehityksen Parin Mikä on Internet?Kuinka Internet Toimii?Ymmärrä, Miten Verkkosivustot Toimivat Frontend- ja Backend-Kehitys Selitettynä

2. HTML-Tunnisteet ja -Attribuutit

HTML-Tunnisteiden Ymmärtäminen Työskentely HTML-Attribuuttien Kanssa Ymmärrä Parilliset ja Yksittäiset Tunnisteet HTML:ssä Tekstin Merkintä ja Muotoilu HTML:ssä Haaste: Luo Ensimmäinen Verkkosivusi Kappale Haaste: Rakenna Henkilökohtainen Esittelysivu Haaste: Suunnittele Elokuvan Esittelysivu Linkkien ja Painikkeiden Käyttäminen HTML:ssä Haaste: Luo Linkkejä Suosittuihin Verkkosivustoihin HTML-Koodin Validointi Parhaiden Käytäntöjen Mukaisesti

3. HTML-Dokumentin Rakenne

Hyvin Jäsenneltyjen Verkkosivujen Salaisuudet HTML-Dokumentin Rakenteen Ymmärtäminen Asiakirjan Pään Rooli Asiakirjan Virtauksen ja Asettelun Hallinta Haaste: Rakenna HTML-Dokumentti Oikein Kehittäjätyökalujen Käyttäminen HTML:n Tarkasteluun ja Virheenkorjaukseen

4. Työskentely Median ja Taulukoiden Kanssa

Kuvien Lisääminen HTML:ään Haaste: Työskentele Kuvien Kanssa Työskentely Klikattavien Kuvien, Kuvatekstien ja Optimoinnin Kanssa Vektori- ja Rasterigrafiikan Ymmärtäminen Äänen ja Videon Upottaminen Rikasta Mediaa Sisältöä Varten Haaste: Upota Ääni ja Video HTML:ään Taulukoiden Luominen ja Jäsentäminen HTML:ssä Haaste: Suunnittele Toimiva HTML-taulukko

5. HTML-Lomakkeet ja Käyttäjän Syöte

Johdanto HTML-Lomakkeisiin Lomakkeiden Luomisen Perusteet HTML:ssä Käyttämällä Nimilappuja Paremman Lomakkeen Saavutettavuuden Takaamiseksi Lomakkeiden Parantaminen Syöteattribuuteilla Erilaisten Syöttötyyppien Tutkiminen HTML:ssä Haaste: Luo Lomake Syötteillä ja Nimikkeillä Työskentely Textarea-Elementin Kanssa Monirivistä Syöttöä Varten Using the Select Element for Avattavissa Valikoissa Datalist-Elementin Käyttäminen Ennalta Määritettyihin Syötevihjeisiin Lomake-Elementtien Ryhmittely Paremman Rakenteen Saavuttamiseksi

Taulukoiden Luominen ja Jäsentäminen HTML:ssä

Taulukot ovat hyödyllisiä monimutkaisten suhteiden esittämisessä järjestämällä sisältö soluiksi. Ne ovat erityisen tehokkaita esittämään taulukkomuotoista dataa, kuten kuljetusaikatauluja, kalentereita, palkkakorvauksia, ottelutuloksia, taloudellisia tapahtumia, ravintolamenuja, hinnastoja ja muuta tietoa, joka luonnollisesti sopii taulukkomuotoon, kuten Google Sheets.

Luodaksesi taulukoita HTML:ssä, käytä seuraavia pääelementtejä:

<table>: määrittelee taulukon verkkosivulla;
<tr>: määrittelee rivin taulukossa;
<th>: määrittelee otsikkosolun rivissä. Otsikkosolut ovat tyypillisesti lihavoituja ja keskitettyjä;
<td>: määrittelee tavallisen datan solun rivissä.

Käydään läpi vaiheet, joilla luodaan taulukko menulle:

Vaihe 1: Aseta HTML-rakenne

Aloita luomalla sivullesi perus HTML-rakenne:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- The link to the styles -->
  </head>
  <body>
    <!-- Table code will go here -->
  </body>
</html>

Vaihe 2: Määritä taulukko

Lisää <body>-elementin sisään <table>-tagi taulukon määrittämiseksi:

<table>
  <!-- Table content will go here -->
</table>

Vaihe 3: Lisää taulukon otsikko (Valinnainen)

Jos haluat antaa taulukolle otsikon, voit käyttää <caption>-tagia:

<table>
  <caption>New menu</caption>
  <!-- Table content will go here -->
</table>

Vaihe 4: Luo taulukon otsikot

Seuraavaksi lisää taulukon otsikot <thead>-elementin sisään. Jokainen otsikko määritellään käyttämällä <th>-tagia:

<table>
  <caption>New menu</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Meal</th>
      <th>Price</th>
    </tr>
  </thead>
  <!-- Table content will go here -->
</table>

Vaihe 5: Täytä taulukko tiedoilla

Käytä <tbody>-elementtiä sulkemaan taulukkorivit ja <td>-tageja määrittämään solut, jotka sisältävät tiedot:

<table>
  <caption>New menu</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Meal</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Appetizer</td>
      <td>Garlic Shrimps</td>
      <td>8$</td>
    </tr>
    <tr>
      <td>Pasta</td>
      <td>Lobster Linguine Noodles</td>
      <td>16$</td>
    </tr>
    <tr>
      <td>Sandwich</td>
      <td>Lobster Tail Sandwich</td>
      <td>11$</td>
    </tr>
  </tbody>
</table>

Koko koodi

Ole hyvä ja käytä hetki aikaa tarkastellaksesi kaikkia elementtejä huolellisesti varmistaaksesi, että niiden suhde on selvä.

index.html

index.css

Huomautus

Oletuksena HTML-taulukoilla ei ole erityistä visuaalista tyyliä. Mukauta taulukon ulkoasua lisäämällä CSS-tyylejä erilliseen CSS-tiedostoon tai HTML-tiedoston <head>-osiossa olevaan <style>-tagiin.

Ei kuitenkaan ole tarpeen syventyä CSS:ään tässä vaiheessa, sillä nykyinen painopiste on vain HTML:ssä.

Jos haluat nähdä, miltä taulukko näyttää ilman CSS-tyylitystä, voit poistaa rivin 4: <link rel="stylesheet" href="index.css" />, joka tuo CSS-tyylit.

Jos haluat oppia lisää CSS:stä, harkitse CSS Fundamentals kurssia.

1. Mikä HTML-elementti määrittää taulukon verkkosivulla?

2. Mikä HTML-elementtiä käytetään määrittämään rivi taulukossa?

3. Mikä on `<th>`-elementin tarkoitus HTML-taulukossa?

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 4. Luku 7

Kysy tekoälyä

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Kurssisisältö

HTML:n Perusteet

1. Verkkokehityksen Ymmärtäminen

Tervetuloa HTML:n ja Web-kehityksen Parin Mikä on Internet?Kuinka Internet Toimii?Ymmärrä, Miten Verkkosivustot Toimivat Frontend- ja Backend-Kehitys Selitettynä

2. HTML-Tunnisteet ja -Attribuutit

3. HTML-Dokumentin Rakenne

4. Työskentely Median ja Taulukoiden Kanssa

5. HTML-Lomakkeet ja Käyttäjän Syöte

Taulukoiden Luominen ja Jäsentäminen HTML:ssä

Luodaksesi taulukoita HTML:ssä, käytä seuraavia pääelementtejä:

<table>: määrittelee taulukon verkkosivulla;
<tr>: määrittelee rivin taulukossa;
<th>: määrittelee otsikkosolun rivissä. Otsikkosolut ovat tyypillisesti lihavoituja ja keskitettyjä;
<td>: määrittelee tavallisen datan solun rivissä.

Käydään läpi vaiheet, joilla luodaan taulukko menulle:

Vaihe 1: Aseta HTML-rakenne

Aloita luomalla sivullesi perus HTML-rakenne:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- The link to the styles -->
  </head>
  <body>
    <!-- Table code will go here -->
  </body>
</html>

Vaihe 2: Määritä taulukko

Lisää <body>-elementin sisään <table>-tagi taulukon määrittämiseksi:

<table>
  <!-- Table content will go here -->
</table>

Vaihe 3: Lisää taulukon otsikko (Valinnainen)

Jos haluat antaa taulukolle otsikon, voit käyttää <caption>-tagia:

<table>
  <caption>New menu</caption>
  <!-- Table content will go here -->
</table>

Vaihe 4: Luo taulukon otsikot

Seuraavaksi lisää taulukon otsikot <thead>-elementin sisään. Jokainen otsikko määritellään käyttämällä <th>-tagia:

<table>
  <caption>New menu</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Meal</th>
      <th>Price</th>
    </tr>
  </thead>
  <!-- Table content will go here -->
</table>

Vaihe 5: Täytä taulukko tiedoilla

Käytä <tbody>-elementtiä sulkemaan taulukkorivit ja <td>-tageja määrittämään solut, jotka sisältävät tiedot:

<table>
  <caption>New menu</caption>
  <thead>
    <tr>
      <th>Category</th>
      <th>Meal</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Appetizer</td>
      <td>Garlic Shrimps</td>
      <td>8$</td>
    </tr>
    <tr>
      <td>Pasta</td>
      <td>Lobster Linguine Noodles</td>
      <td>16$</td>
    </tr>
    <tr>
      <td>Sandwich</td>
      <td>Lobster Tail Sandwich</td>
      <td>11$</td>
    </tr>
  </tbody>
</table>

Koko koodi

Ole hyvä ja käytä hetki aikaa tarkastellaksesi kaikkia elementtejä huolellisesti varmistaaksesi, että niiden suhde on selvä.

index.html

index.css

Huomautus

Oletuksena HTML-taulukoilla ei ole erityistä visuaalista tyyliä. Mukauta taulukon ulkoasua lisäämällä CSS-tyylejä erilliseen CSS-tiedostoon tai HTML-tiedoston <head>-osiossa olevaan <style>-tagiin.

Ei kuitenkaan ole tarpeen syventyä CSS:ään tässä vaiheessa, sillä nykyinen painopiste on vain HTML:ssä.

Jos haluat nähdä, miltä taulukko näyttää ilman CSS-tyylitystä, voit poistaa rivin 4: <link rel="stylesheet" href="index.css" />, joka tuo CSS-tyylit.

Jos haluat oppia lisää CSS:stä, harkitse CSS Fundamentals kurssia.

1. Mikä HTML-elementti määrittää taulukon verkkosivulla?

2. Mikä HTML-elementtiä käytetään määrittämään rivi taulukossa?

3. Mikä on `<th>`-elementin tarkoitus HTML-taulukossa?

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 4. Luku 7

HTML:n Perusteet

Taulukoiden Luominen ja Jäsentäminen HTML:ssä

Vaihe 1: Aseta HTML-rakenne

Vaihe 2: Määritä taulukko

Vaihe 3: Lisää taulukon otsikko (Valinnainen)

Vaihe 4: Luo taulukon otsikot

Vaihe 5: Täytä taulukko tiedoilla

Koko koodi

1. Mikä HTML-elementti määrittää taulukon verkkosivulla?

2. Mikä HTML-elementtiä käytetään määrittämään rivi taulukossa?

3. Mikä on <th>-elementin tarkoitus HTML-taulukossa?

HTML:n Perusteet

Taulukoiden Luominen ja Jäsentäminen HTML:ssä

Vaihe 1: Aseta HTML-rakenne

Vaihe 2: Määritä taulukko

Vaihe 3: Lisää taulukon otsikko (Valinnainen)

Vaihe 4: Luo taulukon otsikot

Vaihe 5: Täytä taulukko tiedoilla

Koko koodi

1. Mikä HTML-elementti määrittää taulukon verkkosivulla?

2. Mikä HTML-elementtiä käytetään määrittämään rivi taulukossa?

3. Mikä on <th>-elementin tarkoitus HTML-taulukossa?

3. Mikä on `<th>`-elementin tarkoitus HTML-taulukossa?

3. Mikä on `<th>`-elementin tarkoitus HTML-taulukossa?