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

HTML-Koodin Validointi Parhaiden Käytäntöjen Mukaisesti

Jokainen välimerkki, attribuutti ja tagi - olipa kyseessä tagin nimi, avaus- tai sulkutagi tai hakasulku - on ratkaisevan tärkeä koodissa. Kuitenkin aloittelijoille voi olla haastavaa pitää kirjaa kaikista niistä. Onneksi validaattorit ovat käytettävissä auttamaan.

Validoinnin tavoitteena on tunnistaa syntaksivirheet HTML-dokumentin merkinnässä. Validaattorit ovat ohjelmistoja, jotka voivat suorittaa nämä tarkistukset. Validoinnin jälkeen saat onnistuneen tuloksen tai luettelon ehdotetuista korjauksista.

Huomio

On tärkeää huomata, että validaattorit eivät tarkista semantiikkaa. Sen sijaan ne keskittyvät seuraaviin asioihin:

HTML-syntaksi: varmistaa, että HTML-koodi noudattaa oikeita syntaksisääntöjä;

Määrättyjen standardien noudattaminen: tarkistaa, että noudatetaan vakiintuneita HTML-standardeja, kuten HTML5;

Tagien oikeinkirjoitus: tarkistaa, ovatko tagit kirjoitettu oikein;

Attribuuttien käytön oikeellisuus: varmistaa, että attribuutteja käytetään oikein HTML-tageissa;

Tagien avaus/sulkemisen oikeellisuus: tarkistaa, että tagit on avattu ja suljettu oikein;

Tagien sisäkkäisyyden oikeellisuus: varmistaa, että tagit ovat asianmukaisesti sisäkkäin HTML-rakenteessa.

Käytetään suosittua online-validaattoria nimeltä W3C Markup Validation Service harjoittelemaan validointia. Avaa seuraava linkki uuteen välilehteen klikkaamalla sitä: Validator

Nyt validoidaan yhdessä koodinpätkä. Kopioi alla annettu koodi testitarkoituksiin:

index.html

Liitä koodi validaattorin ikkunaan avaus- ja sulkemis <body>-tagien väliin. Sitten klikkaa "Check"-painiketta.

Virheet, jotka validointityökalu tunnistaa, tulisi korjata siinä järjestyksessä kuin ne on lueteltu. Vaikka varoitusten korjaaminen on vapaaehtoista, niiden analysointi ja korkealaatuisen merkkauskielen varmistaminen on hyvä käytäntö.

Korjataan kaikki virheet koodiesimerkissä:

index.html

Tekemällä nämä muutokset voit parantaa HTML-koodin tarkkuutta ja pätevyyttä. Validaattorityökalut ovat ratkaisevan tärkeitä auttaessaan kehittäjiä tunnistamaan ja korjaamaan syntaksivirheitä HTML-merkinnässä.

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 2. Luku 10

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

HTML-Koodin Validointi Parhaiden Käytäntöjen Mukaisesti

Huomio

On tärkeää huomata, että validaattorit eivät tarkista semantiikkaa. Sen sijaan ne keskittyvät seuraaviin asioihin:

HTML-syntaksi: varmistaa, että HTML-koodi noudattaa oikeita syntaksisääntöjä;

Määrättyjen standardien noudattaminen: tarkistaa, että noudatetaan vakiintuneita HTML-standardeja, kuten HTML5;

Tagien oikeinkirjoitus: tarkistaa, ovatko tagit kirjoitettu oikein;

Attribuuttien käytön oikeellisuus: varmistaa, että attribuutteja käytetään oikein HTML-tageissa;

Tagien avaus/sulkemisen oikeellisuus: tarkistaa, että tagit on avattu ja suljettu oikein;

Tagien sisäkkäisyyden oikeellisuus: varmistaa, että tagit ovat asianmukaisesti sisäkkäin HTML-rakenteessa.

Käytetään suosittua online-validaattoria nimeltä W3C Markup Validation Service harjoittelemaan validointia. Avaa seuraava linkki uuteen välilehteen klikkaamalla sitä: Validator

Nyt validoidaan yhdessä koodinpätkä. Kopioi alla annettu koodi testitarkoituksiin:

index.html

Liitä koodi validaattorin ikkunaan avaus- ja sulkemis <body>-tagien väliin. Sitten klikkaa "Check"-painiketta.

Korjataan kaikki virheet koodiesimerkissä:

index.html

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 2. Luku 10