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

Vektori- ja Rasterigrafiikan Ymmärtäminen

Digitaalisessa mediassa käytetään pääasiassa kahta graafista formaattia: vektorigrafiikka ja rasterigrafiikka.

Vektorigrafiikka

Vektorigrafiikka luodaan käyttämällä matemaattisia yhtälöitä, jotka perustuvat viivoihin ja muotoihin pikselien sijaan. Tämä tarkoittaa, että vektorigrafiikkaa voidaan suurentaa tai pienentää ilman laadun heikkenemistä, koska ne ovat resoluutioriippumattomia. Tavallisia vektorigrafiikan tiedostomuotoja ovat SVG. Suoritetaan seuraava esimerkki ja varmistetaan, ettei kuvan laadussa ole eroa, vaikka koko on erilainen.

index.html

Raster-grafiikka

Raster-grafiikka puolestaan luodaan käyttämällä pikseleitä ja ne ovat resoluutiosta riippuvaisia. Tämä tarkoittaa, että kun raster-grafiikkaa suurennetaan, pikselit tulevat näkyvämmiksi, mikä johtaa laadun heikkenemiseen. Yleisiä raster-grafiikan tiedostomuotoja ovat JPEG, PNG ja GIF. Suoritetaan seuraava esimerkki. Leveyden kasvaessa pikselit tulevat enemmän esille ja kuvan laatu heikkenee.

index.html

Yhteenvetona, vektorigrafiikkaa käytetään tyypillisesti logoissa, kuvituksissa ja muissa suunnitelmissa, jotka vaativat skaalautuvuutta. Sen sijaan rasterigrafiikkaa käytetään valokuvissa ja muissa suunnitelmissa, jotka vaativat korkeaa yksityiskohtaisuutta. Molemmilla grafiikkatyypeillä on kuitenkin omat vahvuutensa ja heikkoutensa.

1. Minkä tyyppinen grafiikkamuoto soveltuu parhaiten logoihin ja kuvituksiin, jotka täytyy skaalata ylös tai alas ilman laadun heikkenemistä?

2. Minkä tyyppinen grafiikkamuoto soveltuu parhaiten valokuviin ja suunnitelmiin, jotka vaativat korkeaa yksityiskohtaisuutta?

3. Voidaanko raster-grafiikoita suurentaa tai pienentää ilman laadun heikkenemistä?

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 4. Luku 4

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

Vektori- ja Rasterigrafiikan Ymmärtäminen

Digitaalisessa mediassa käytetään pääasiassa kahta graafista formaattia: vektorigrafiikka ja rasterigrafiikka.

Vektorigrafiikka

index.html

Raster-grafiikka

index.html

1. Minkä tyyppinen grafiikkamuoto soveltuu parhaiten logoihin ja kuvituksiin, jotka täytyy skaalata ylös tai alas ilman laadun heikkenemistä?

2. Minkä tyyppinen grafiikkamuoto soveltuu parhaiten valokuviin ja suunnitelmiin, jotka vaativat korkeaa yksityiskohtaisuutta?

3. Voidaanko raster-grafiikoita suurentaa tai pienentää ilman laadun heikkenemistä?

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 4. Luku 4