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

Linkkien ja Painikkeiden Käyttäminen HTML:ssä

Linkki

<a>-tagia käytetään luomaan hyperlinkkejä, jotka mahdollistavat käyttäjien siirtymisen eri verkkosivujen välillä. Kun käyttäjä napsauttaa linkkiä, selain lähettää pyynnön palvelimelle linkkiin liittyvästä sivusta ja näyttää vastauksen näytöllä. href-attribuutti auttaa määrittämään kohdesivun URL-osoitteen.

index.html

Linkin attribuutit

target

Oletuksena linkki avautuu samassa selainvälilehdessä. target-attribuutti antaa meille mahdollisuuden muuttaa tätä käyttäytymistä. Avataksesi linkin uudessa välilehdessä, käytä target="_blank".

index.html

download

download-attribuuttia voidaan käyttää HTML <a>-tagin kanssa määrittämään, että kohderesurssi tulisi ladata sen sijaan, että se näytettäisiin selaimessa. Kun download-attribuuttia käytetään, selain kehottaa käyttäjää tallentamaan tiedoston määritetyllä tiedostonimellä. Esimerkiksi, jos sinun täytyy luoda elementti seuraavalla toiminnallisuudella: kun käyttäjä napsauttaa linkkiä, selain lataa "myfile.pdf"-tiedoston osoitteesta https://example.com/ ja kehottaa käyttäjää tallentamaan sen tiedostonimellä myfile.pdf.

index.html

href

href-attribuuttia käytetään paitsi navigoimaan muihin sivuihin, myös luomaan linkkejä sähköpostiosoitteisiin, puhelinnumeroihin ja tiettyihin osioihin.

index.html

Lisäksi href-attribuuttia voidaan käyttää navigoimaan tiettyihin osioihin verkkosivulla. Luodaksesi ankkuritagin, määritä id-attribuutti (yksilöllinen tunniste) haluttuun osioon, johon haluamme vierittää. href-attribuutti saa arvon, joka alkaa #-symbolilla, jota seuraa id-arvo.

Tutustutaan seuraavaan esimerkkiin, joka on esitetty CodeSandbox-muodossa. Tämä alusta mahdollistaa koodin tarkastelun ja antaa sinun tutkia koodin toiminnallisuutta.

Huomio

Ota hetki aikaa tarkastellaksesi toiminnallisuutta klikkaamalla linkkejä ja seuraamalla, kuinka live-sivu vierittää tiettyihin osioihin. Kiinnitä lisäksi huomiota a-tagin ja h2-tagin attribuutteihin.

Näyttääksesi koodin, vedä liukusäädintä koodisandboxin vasemmalla puolella. Tämä paljastaa olemassa olevan koodin editorin sisällä.

Painike

HTML:n <button>-tagia käytetään luomaan klikattava painike, joka voi laukaista toiminnon, kuten lomakkeen lähettämisen, JavaScript-funktion suorittamisen, kuten ponnahdusikkunan avaamisen ja sulkemisen, tai mobiilivalikon vaihtamisen. Oletuksena <button>-tagilla on type-attribuutti, ja sen arvo on submit. Kuitenkin usein sinun täytyy määrittää type="button".

index.html

Yhteenveto

<a>-tagia käytetään hyperlinkkien luomiseen muihin verkkosivuihin, asiakirjoihin tai resursseihin. Sen sijaan <button>-tagia käytetään vuorovaikutuksen luomiseen verkkosivulla, tapahtuman käynnistämiseen tai toiminnon suorittamiseen. On tärkeää olla sekoittamatta niiden tarkoituksia.

1. Mikä on `<a>`-tagin ensisijainen tehtävä?

2. Voitko käyttää `<button>`-tagia lomakkeen lähettämiseen?

3. Mikä on `<a>`-tagin ja `<button>`-tagin pääasiallinen ero?

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 2. Luku 8

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

Linkkien ja Painikkeiden Käyttäminen HTML:ssä

Linkki

index.html

Linkin attribuutit

target

index.html

download

index.html

href

href-attribuuttia käytetään paitsi navigoimaan muihin sivuihin, myös luomaan linkkejä sähköpostiosoitteisiin, puhelinnumeroihin ja tiettyihin osioihin.

index.html

Tutustutaan seuraavaan esimerkkiin, joka on esitetty CodeSandbox-muodossa. Tämä alusta mahdollistaa koodin tarkastelun ja antaa sinun tutkia koodin toiminnallisuutta.

Huomio

Ota hetki aikaa tarkastellaksesi toiminnallisuutta klikkaamalla linkkejä ja seuraamalla, kuinka live-sivu vierittää tiettyihin osioihin. Kiinnitä lisäksi huomiota a-tagin ja h2-tagin attribuutteihin.

Näyttääksesi koodin, vedä liukusäädintä koodisandboxin vasemmalla puolella. Tämä paljastaa olemassa olevan koodin editorin sisällä.

Painike

index.html

Yhteenveto

1. Mikä on `<a>`-tagin ensisijainen tehtävä?

2. Voitko käyttää `<button>`-tagia lomakkeen lähettämiseen?

3. Mikä on `<a>`-tagin ja `<button>`-tagin pääasiallinen ero?

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 2. Luku 8

HTML:n Perusteet

Linkkien ja Painikkeiden Käyttäminen HTML:ssä

Linkki

Linkin attribuutit

target

download

href

Painike

Yhteenveto

1. Mikä on <a>-tagin ensisijainen tehtävä?

2. Voitko käyttää <button>-tagia lomakkeen lähettämiseen?

3. Mikä on <a>-tagin ja <button>-tagin pääasiallinen ero?

HTML:n Perusteet

Linkkien ja Painikkeiden Käyttäminen HTML:ssä

Linkki

Linkin attribuutit

target

download

href

Painike

Yhteenveto

1. Mikä on <a>-tagin ensisijainen tehtävä?

2. Voitko käyttää <button>-tagia lomakkeen lähettämiseen?

3. Mikä on <a>-tagin ja <button>-tagin pääasiallinen ero?

1. Mikä on `<a>`-tagin ensisijainen tehtävä?

2. Voitko käyttää `<button>`-tagia lomakkeen lähettämiseen?

3. Mikä on `<a>`-tagin ja `<button>`-tagin pääasiallinen ero?

1. Mikä on `<a>`-tagin ensisijainen tehtävä?

2. Voitko käyttää `<button>`-tagia lomakkeen lähettämiseen?

3. Mikä on `<a>`-tagin ja `<button>`-tagin pääasiallinen ero?