30 KiB

Raw Blame History Unescape Escape

Terrarium-projekti Osa 1: Johdatus HTML:ään

journey
    title Your HTML Learning Journey
    section Foundation
      Create HTML file: 3: Student
      Add DOCTYPE: 4: Student
      Structure document: 5: Student
    section Content
      Add metadata: 4: Student
      Include images: 5: Student
      Organize layout: 5: Student
    section Semantics
      Use proper tags: 4: Student
      Enhance accessibility: 5: Student
      Build terrarium: 5: Student

Sketchnote: Tomomi Imura

HTML eli HyperText Markup Language on jokaisen verkkosivun perusta, jonka olet koskaan vieraillut. Ajattele HTML:ää verkkosivujen "luurankona" – se määrittää, mihin sisältö sijoitetaan, miten se järjestetään ja mitä kukin osa edustaa. Vaikka CSS myöhemmin "pukee" HTML:n väreillä ja asetteluilla ja JavaScript tuo siihen interaktiivisuutta, HTML tarjoaa olennaisen rakenteen, joka tekee kaiken muun mahdolliseksi.

Tässä oppitunnissa luot HTML-rakenteen virtuaaliselle terraario-käyttöliittymälle. Tämä käytännön projekti opettaa sinulle HTML:n peruskäsitteitä samalla, kun rakennat visuaalisesti houkuttelevaa sisältöä. Opit järjestämään sisältöä semanttisten elementtien avulla, työskentelemään kuvien kanssa ja luomaan perustan interaktiiviselle verkkosovellukselle.

Oppitunnin lopussa sinulla on toimiva HTML-sivu, joka näyttää kasvikuvia järjestetyissä sarakkeissa ja on valmis tyyliteltäväksi seuraavassa oppitunnissa. Älä huoli, jos se näyttää aluksi yksinkertaiselta – juuri siltä HTML:n kuuluukin näyttää ennen kuin CSS lisää visuaalista viimeistelyä.

mindmap
  root((HTML Fundamentals))
    Structure
      DOCTYPE Declaration
      HTML Element
      Head Section
      Body Content
    Elements
      Tags & Attributes
      Self-closing Tags
      Nested Elements
      Block vs Inline
    Content
      Text Elements
      Images
      Containers (div)
      Lists
    Semantics
      Meaningful Tags
      Accessibility
      Screen Readers
      SEO Benefits
    Best Practices
      Proper Nesting
      Valid Markup
      Descriptive Alt Text
      Organized Structure

Ennakkokysely

📺 Katso ja opi: Tutustu tähän hyödylliseen videoesittelyyn

Projektin valmistelu

Ennen kuin sukellamme HTML-koodiin, luodaan kunnollinen työtila terraario-projektillesi. Järjestelmällisen tiedostorakenteen luominen alusta alkaen on tärkeä tapa, joka hyödyttää sinua koko verkkokehitysmatkasi ajan.

Tehtävä: Luo projektirakenne

Luo oma kansio terraario-projektillesi ja lisää ensimmäinen HTML-tiedostosi. Tässä on kaksi lähestymistapaa, joita voit käyttää:

Vaihtoehto 1: Visual Studio Code -editorin käyttö

Avaa Visual Studio Code
Klikkaa "File" → "Open Folder" tai käytä Ctrl+K, Ctrl+O (Windows/Linux) tai Cmd+K, Cmd+O (Mac)
Luo uusi kansio nimeltä terrarium ja valitse se
Explorer-paneelissa klikkaa "New File" -ikonia
Nimeä tiedostosi index.html

Vaihtoehto 2: Käytä terminaalikomentoja

mkdir terrarium
cd terrarium
touch index.html
code index.html

Mitä nämä komennot tekevät:

Luo uuden hakemiston nimeltä terrarium projektillesi
Siirtyy terraariohakemistoon
Luo tyhjän index.html-tiedoston
Avaa tiedoston Visual Studio Codessa muokattavaksi

💡 Vinkki: Tiedostonimi index.html on erityinen verkkokehityksessä. Kun joku vierailee verkkosivustolla, selaimet etsivät automaattisesti index.html-tiedostoa oletussivuksi. Tämä tarkoittaa, että URL-osoite kuten https://mysite.com/projects/ näyttää automaattisesti projects-kansion index.html-tiedoston ilman, että tiedostonimeä tarvitsee erikseen määrittää URL-osoitteessa.

HTML-dokumentin rakenteen ymmärtäminen

Jokainen HTML-dokumentti noudattaa tiettyä rakennetta, jonka selaimet tarvitsevat ymmärtääkseen ja näyttääkseen sisällön oikein. Ajattele tätä rakennetta kuin virallista kirjettä – siinä on vaadittuja elementtejä tietyssä järjestyksessä, jotka auttavat vastaanottajaa (tässä tapauksessa selainta) käsittelemään sisältöä oikein.

flowchart TD
    A["<!DOCTYPE html>"] --> B["<html>"]
    B --> C["<head>"]
    C --> D["<title>"]
    C --> E["<meta charset>"]
    C --> F["<meta viewport>"]
    B --> G["<body>"]
    G --> H["<h1> Heading"]
    G --> I["<div> Containers"]
    G --> J["<img> Images"]
    
    style A fill:#e1f5fe
    style B fill:#f3e5f5
    style C fill:#fff3e0
    style G fill:#e8f5e8

Aloitetaan lisäämällä jokaisen HTML-dokumentin tarvitsema perusta.

DOCTYPE-määrittely ja juurielementti

HTML-tiedoston kaksi ensimmäistä riviä toimivat dokumentin "esittelynä" selaimelle:

<!DOCTYPE html>
<html></html>

Mitä tämä koodi tekee:

Määrittää dokumenttityypin HTML5:ksi käyttämällä <!DOCTYPE html>
Luo juurielementin <html>, joka sisältää kaiken sivun sisällön
Vakiinnuttaa modernit verkkostandardit oikeaa selaimen renderöintiä varten
Varmistaa yhtenäisen ulkoasun eri selaimissa ja laitteissa

💡 VS Code -vinkki: Vie hiiri minkä tahansa HTML-tagin päälle Visual Studio Codessa nähdäksesi hyödyllistä tietoa MDN Web Docsista, mukaan lukien käyttöesimerkit ja selainten yhteensopivuustiedot.

📚 Lisätietoa: DOCTYPE-määrittely estää selaimia siirtymästä "quirks mode" -tilaan, jota käytettiin tukemaan hyvin vanhoja verkkosivustoja. Moderni verkkokehitys käyttää yksinkertaista <!DOCTYPE html>-määrittelyä varmistaakseen standardien mukaisen renderöinnin.

🔄 Pedagoginen tarkistus

Pysähdy ja pohdi: Ennen kuin jatkat, varmista että ymmärrät:

✅ Miksi jokainen HTML-dokumentti tarvitsee DOCTYPE-määrittelyn
✅ Mitä <html>-juurielementti sisältää
✅ Kuinka tämä rakenne auttaa selaimia renderöimään sivuja oikein

Nopea itsearviointi: Voitko selittää omin sanoin, mitä "standardien mukainen renderöinti" tarkoittaa?

Välttämättömän dokumenttimetadata lisääminen

HTML-dokumentin <head>-osio sisältää tärkeää tietoa, jota selaimet ja hakukoneet tarvitsevat, mutta jota vierailijat eivät näe suoraan sivulla. Ajattele sitä "kulissien takana" olevana tietona, joka auttaa verkkosivua toimimaan oikein ja näyttämään oikein eri laitteilla ja alustoilla.

Tämä metadata kertoo selaimille, miten sivu näytetään, mitä merkistöä käytetään ja miten eri näyttökokoja käsitellään – kaikki olennaisia asioita ammattimaisen ja saavutettavan verkkosivun luomisessa.

Tehtävä: Lisää dokumentin pääosa

Lisää tämä <head>-osio avaus- ja sulkevien <html>-tagien väliin:

<head>
	<title>Welcome to my Virtual Terrarium</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

Mitä kukin elementti tekee:

Asettaa sivun otsikon, joka näkyy selaimen välilehdissä ja hakutuloksissa
Määrittää UTF-8-merkistökoodauksen tekstin oikeaa näyttämistä varten maailmanlaajuisesti
Varmistaa yhteensopivuuden Internet Explorerin modernien versioiden kanssa
Konfiguroi responsiivisen suunnittelun asettamalla näkymän laitteen leveyden mukaiseksi
Säätää alkuperäisen zoomaustason sisällön luonnollisen koon näyttämiseksi

🤔 Pohdittavaa: Mitä tapahtuisi, jos asettaisit näkymän meta-tagin näin: <meta name="viewport" content="width=600">? Tämä pakottaisi sivun aina 600 pikselin levyiseksi, mikä rikkoisi responsiivisen suunnittelun! Lue lisää näkymän oikeasta konfiguroinnista.

Dokumentin rungon rakentaminen

<body>-elementti sisältää kaiken verkkosivusi näkyvän sisällön – kaiken, mitä käyttäjät näkevät ja minkä kanssa he ovat vuorovaikutuksessa. Vaikka <head>-osio antoi ohjeita selaimelle, <body>-osio sisältää varsinaisen sisällön: tekstiä, kuvia, painikkeita ja muita elementtejä, jotka luovat käyttöliittymän.

Lisätään rungon rakenne ja ymmärretään, miten HTML-tagit toimivat yhdessä merkityksellisen sisällön luomiseksi.

HTML-tagin rakenteen ymmärtäminen

HTML käyttää parillisia tageja elementtien määrittämiseen. Useimmilla tageilla on avaus-tagi, kuten <p>, ja sulkeva tagi, kuten </p>, joiden välissä on sisältö: <p>Hello, world!</p>. Tämä luo kappale-elementin, joka sisältää tekstin "Hello, world!".

Tehtävä: Lisää rungon elementti

Päivitä HTML-tiedostosi sisältämään <body>-elementti:

<!DOCTYPE html>
<html>
	<head>
		<title>Welcome to my Virtual Terrarium</title>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
	</head>
	<body></body>
</html>

Mitä tämä kokonaisrakenne tarjoaa:

Luo HTML5-dokumentin peruskehikon
Sisältää olennaisen metadatan oikeaa selaimen renderöintiä varten
Luo tyhjän rungon näkyvälle sisällöllesi
Noudattaa modernin verkkokehityksen parhaita käytäntöjä

Nyt olet valmis lisäämään terraarion näkyvät elementit. Käytämme <div>-elementtejä säiliöinä eri sisältöosioiden järjestämiseen ja <img>-elementtejä kasvikuvien näyttämiseen.

Kuvien ja asettelusäiliöiden käyttö

Kuvat ovat erityisiä HTML:ssä, koska ne käyttävät "itse sulkeutuvia" tageja. Toisin kuin elementit, kuten <p></p>, jotka ympäröivät sisältöä, <img>-tagi sisältää kaiken tarvittavan tiedon itsessään käyttämällä attribuutteja, kuten src kuvatiedoston polulle ja alt saavutettavuuden parantamiseksi.

Ennen kuin lisäät kuvia HTML:ään, sinun on järjestettävä projektitiedostosi oikein luomalla kuvat-kansio ja lisäämällä kasvigrafiikat.

Ensin, valmistele kuvasi:

Luo kansio nimeltä images terraario-projektikansiosi sisälle
Lataa kasvikuvat ratkaisukansiosta (yhteensä 14 kasvikuvan tiedostoa)
Kopioi kaikki kasvikuvat uuteen images-kansioosi

Tehtävä: Luo kasvien näyttöasettelu

Lisää kasvikuvat järjestettyinä kahteen sarakkeeseen <body></body>-tagien väliin:

<div id="page">
	<div id="left-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant1" src="../../../../translated_images/plant1.d87946a2ca70cc4316bda6e6c3af7210fbe9ada5539a7885141a9ce0efaf7be3.fi.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/plant2.8daa1606c9c1ad896bb171212c7d1d882e504b76b8ec3a2d1c337d775cf50dc3.fi.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/plant3.8b0d484381a2a2a77c5c06ad97ab6ae5b7023da8c6c7678b0183bc0e46ea17a7.fi.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/plant4.656e16ae1df37be2af5f4e7b5ab6c5decc432c3d3ec2eb98b904ddbecad49db0.fi.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/plant5.2b41b9355f11ebccd62d327f5f14e56531ecda9c6f970bc89e386ee9f0273bb0.fi.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/plant6.3d1827d03b6569946be13ae5da1f32947ae56732638a43757a7c616a6adccc5d.fi.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/plant7.8152c302ac97f621a6c595bdf3939103568f9efc7d3b06a0f02a1ea66f479de0.fi.png" />
		</div>
	</div>
	<div id="right-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant8" src="../../../../translated_images/plant8.38d6428174ffa850a47cd1b81d528fa528adda7d23f3ae0bb42f4a27356ca5e6.fi.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/plant9.f0e38d3327c37fc29cd2734d48d20c2cf69300898ece6d46708829e02ce540e3.fi.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/plant10.b159d6d6e985595f56d86b4b38061b8e7b4c9969c210c199fe967269cf935e7f.fi.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/plant11.2a03a1c2ec8ea84ef3a80c06cc6883f3960fbb669f2c0b0bd824ba33d7eb7d32.fi.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/plant12.60e9b53e538fbaf3e5797ebf800acb483baf5639e6cf378292ac2321ab8a5ea9.fi.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/plant13.07a51543c820bcf57f67a9a6c0acbd6211ff795e2e67a42a9718224534e95fab.fi.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/plant14.6e486371ba7d36ba3520d9828887993cb4c3edad8bdd8ff9b1b315717ff8cb63.fi.png" />
		</div>
	</div>
</div>

Vaihe vaiheelta, mitä tässä koodissa tapahtuu:

Luo pääsivun säiliön id="page", joka sisältää kaiken sisällön
Määrittää kaksi sarakesäiliötä: left-container ja right-container
Järjestää 7 kasvia vasempaan sarakkeeseen ja 7 kasvia oikeaan sarakkeeseen
Käärii jokaisen kasvikuvan plant-holder-diviin yksittäistä sijoittelua varten
Käyttää yhtenäisiä luokkanimiä CSS-tyylittelyä varten seuraavassa oppitunnissa
Määrittää jokaiselle kasvikuville yksilölliset ID:t JavaScript-vuorovaikutusta varten myöhemmin
Sisältää oikeat tiedostopolut, jotka osoittavat kuvat-kansioon

🤔 Pohdittavaa: Huomaa, että kaikilla kuvilla on tällä hetkellä sama alt-teksti "plant". Tämä ei ole ihanteellista saavutettavuuden kannalta. Näytönlukijan käyttäjät kuulisivat "plant" 14 kertaa peräkkäin tietämättä, mitä kukin kuva esittää. Voisitko keksiä parempia, kuvaavampia alt-tekstejä jokaiselle kuvalle?

📝 HTML-elementtityypit: <div>-elementit ovat "block-level" ja vievät koko leveyden, kun taas <span>-elementit ovat "inline" ja vievät vain tarvittavan leveyden. Mitä luulet tapahtuvan, jos vaihtaisit kaikki nämä <div>-tagit <span>-tageiksi?

🔄 Pedagoginen tarkistus

Rakenteen ymmärtäminen: Käy läpi HTML-rakenteesi:

✅ Voitko tunnistaa pääsäiliöt asettelussasi?
✅ Ymmärrätkö, miksi jokaisella kuvalla on yksilöllinen ID?
✅ Kuinka kuvailisit plant-holder-divien tarkoitusta?

Visuaalinen tarkistus: Avaa HTML-tiedostosi selaimessa. Sinun pitäisi nähdä:

Yksinkertainen lista kasvikuvista
Kuvat järjestettyinä kahteen sarakkeeseen
Yksinkertainen, tyylittelemätön asettelu

Muista: Tämä yksinkertainen ulkoasu on juuri sitä, miltä HTML:n kuuluukin näyttää ennen CSS-tyylittelyä!

Kun tämä merkintä on lisätty, kasvit näkyvät näytöllä, vaikka ne eivät vielä näytä viimeistellyiltä – siihen tarvitaan CSS seuraavassa oppitunnissa! Tällä hetkellä sinulla on vankka HTML-perusta, joka järjestää sisältösi oikein ja noudattaa saavutettavuuden parhaita käytäntöjä.

Semanttisen HTML:n käyttö saavutettavuuden parantamiseksi

Semanttinen HTML tarkoittaa HTML-elementtien valitsemista niiden merkityksen ja tarkoituksen, ei vain ulkonäön perusteella. Kun käytät semanttista merkintää, kommunikoit sisältösi rakenteen ja merkityksen selaimille, hakukoneille ja apuvälineille, kuten näytönlukijoille.

flowchart TD
    A[Need to add content?] --> B{What type?}
    B -->|Main heading| C["<h1>"]
    B -->|Subheading| D["<h2>, <h3>, etc."]
    B -->|Paragraph| E["<p>"]
    B -->|List| F["<ul>, <ol>"]
    B -->|Navigation| G["<nav>"]
    B -->|Article| H["<article>"]
    B -->|Section| I["<section>"]
    B -->|Generic container| J["<div>"]
    
    C --> K[Screen readers announce as main title]
    D --> L[Creates proper heading hierarchy]
    E --> M[Provides proper text spacing]
    F --> N[Enables list navigation shortcuts]
    G --> O[Identifies navigation landmarks]
    H --> P[Marks standalone content]
    I --> Q[Groups related content]
    J --> R[Use only when no semantic tag fits]
    
    style C fill:#4caf50
    style D fill:#4caf50
    style E fill:#4caf50
    style F fill:#4caf50
    style G fill:#2196f3
    style H fill:#2196f3
    style I fill:#2196f3
    style J fill:#ff9800

Tämä lähestymistapa tekee verkkosivustoistasi saavutettavampia vammaisille käyttäjille ja auttaa hakukoneita ymmärtämään sisältöäsi paremmin. Se on modernin verkkokehityksen perusperiaate, joka luo parempia kokemuksia kaikille.

Semanttisen sivuotsikon lisääminen

Lisätään kunnollinen otsikko terraario-sivullesi. Lisää tämä rivi heti avaus-<body>-tagin jälkeen:

<h1>My Terrarium</h1>

Miksi semanttinen merkintä on tärkeää:

Auttaa näytönlukijoita navigoimaan ja ymmärtämään sivun rakennetta
Parantaa hakukoneoptimointia (SEO) selkeyttämällä sisällön hierarkiaa
Lisää saavutettavuutta näkövammaisille tai kognitiivisista eroista kärsiville käyttäjille
Luo parempia käyttäjäkokemuksia kaikilla laitteilla ja alustoilla
Noudattaa verkkostandardeja ja parhaita käytäntöjä ammattimaisessa kehityksessä

Esimerkkejä semanttisista vs. ei-semattisista valinnoista:

Tarkoitus	✅ Semanttinen valinta	❌ Ei-semanttinen valinta
Pääotsikko	`<h1>Otsikko</h1>`	`<div class="big-text">Otsikko</div>`
Navigointi	`<nav><ul><li></li></ul></nav>`	`<div class="menu"><div></div></div>`
Painike	`<button>Paina tästä</button>`	`<span onclick="...">Paina tästä</span>`
Artikkelin sisältö	`<article><p></p></article>`	`<div class="content"><div></div></div>`

🎥 Katso käytännössä: Katso miten näytönlukijat vuorovaikuttavat verkkosivujen kanssa ymmärtääksesi, miksi semanttinen merkintä on tärkeää saavutettavuuden kannalta. Huomaa, kuinka oikea HTML-rakenne auttaa käyttäjiä navigoimaan tehokkaasti.

Terraariosäiliön luominen

Lisätään nyt HTML-rakenne itse terraariolle – lasisäiliölle, johon kasvit lopulta sijoitetaan. Tämä osio havainnollistaa tärkeää konseptia: HTML tarjoaa rakenteen, mutta ilman CSS-tyylittelyä nämä elementit eivät vielä näy kunnolla.

Terraarion merkintä käyttää kuvaavia luokkanimiä, jotka tekevät CSS-tyylittelystä intuitiivista ja helposti hallittavaa seuraavassa oppitunnissa.

Tehtävä: Lisää terraarion rakenne

Lisää tämä merkintä viimeisen </div>-tagin yläpuolelle (ennen sivusäiliön sulkevaa tagia):

<div id="terrarium">
	<div class="jar-top"></div>
	<div class="jar-walls">
		<div class="jar-glossy-long"></div>
		<div class="jar-glossy-short"></div>
	</div>
	<div class="dirt"></div>
	<div class="jar-bottom"></div>
</div>

Tämän terraarion rakenteen ymmärtäminen:

Luo pääterraariosäiliön, jolla on yksilöllinen ID tyyl
Määrittää erilliset elementit kullekin visuaaliselle komponentille (yläosa, seinät, multa, pohja)
Sisältää sisäkkäisiä elementtejä lasin heijastusefektejä varten (kiiltävät elementit)
Käyttää kuvailevia luokkanimiä, jotka selkeästi kertovat kunkin elementin tarkoituksen
Valmistelee rakenteen CSS-tyylittelyä varten, joka luo lasiterraarion ulkonäön

🤔 Huomaatko jotain?: Vaikka lisäsit tämän merkinnän, et näe mitään uutta sivulla! Tämä havainnollistaa täydellisesti, kuinka HTML tarjoaa rakenteen, kun taas CSS tuo ulkonäön. Nämä <div>-elementit ovat olemassa, mutta niillä ei ole vielä visuaalista tyylittelyä – se tulee seuraavassa oppitunnissa!

flowchart TD
    A[HTML Document] --> B[Document Head]
    A --> C[Document Body]
    B --> D[Title Element]
    B --> E[Meta Charset]
    B --> F[Meta Viewport]
    C --> G[Main Heading]
    C --> H[Page Container]
    H --> I[Left Container with 7 plants]
    H --> J[Right Container with 7 plants]
    H --> K[Terrarium Structure]
    
    style A fill:#e1f5fe
    style B fill:#fff3e0
    style C fill:#e8f5e8
    style H fill:#f3e5f5

🔄 Pedagoginen tarkistus

HTML-rakenteen hallinta: Ennen kuin etenet, varmista että osaat:

✅ Selittää HTML-rakenteen ja visuaalisen ulkonäön eron
✅ Tunnistaa semanttiset ja ei-semanttiset HTML-elementit
✅ Kuvailla, miten oikea merkintä parantaa saavutettavuutta
✅ Tunnistaa koko dokumenttipuun rakenteen

Ymmärryksen testaaminen: Kokeile avata HTML-tiedostosi selaimessa, jossa JavaScript on pois päältä ja CSS poistettu. Näet näin luomasi puhtaan semanttisen rakenteen!

GitHub Copilot Agent -haaste

Käytä Agent-tilaa suorittaaksesi seuraavan haasteen:

Kuvaus: Luo semanttinen HTML-rakenne kasvien hoito-ohjeiden osioon, joka voidaan lisätä terraarioprojektiin.

Ohje: Luo semanttinen HTML-osio, joka sisältää pääotsikon "Kasvien hoito-ohjeet", kolme alaotsikkoa "Kastelu", "Valon tarpeet" ja "Maan hoito", joista jokainen sisältää kappaleen kasvien hoitoon liittyvää tietoa. Käytä asianmukaisia semanttisia HTML-tageja, kuten <section>, <h2>, <h3> ja <p> sisällön rakenteistamiseen.

Lisätietoja agent-tilasta löydät täältä.

HTML:n historian tutkimushaaste

Tietoa verkkokehityksen evoluutiosta

HTML on kehittynyt merkittävästi sen jälkeen, kun Tim Berners-Lee loi ensimmäisen verkkoselaimen CERNissä vuonna 1990. Jotkut vanhat tagit, kuten <marquee>, ovat nyt vanhentuneita, koska ne eivät toimi hyvin modernien saavutettavuusstandardien ja responsiivisen suunnittelun periaatteiden kanssa.

Kokeile tätä:

Kääri <h1>-otsikkosi väliaikaisesti <marquee>-tagiin: <marquee><h1>Minun terraarioni</h1></marquee>
Avaa sivusi selaimessa ja tarkkaile vieritysefektiä
Mieti, miksi tämä tagi on vanhentunut (vihje: ajattele käyttäjäkokemusta ja saavutettavuutta)
Poista <marquee>-tagi ja palaa semanttiseen merkintään

Pohdintakysymykset:

Miten vierivä otsikko voisi vaikuttaa käyttäjiin, joilla on näkövamma tai liikeherkkyys?
Mitkä modernit CSS-tekniikat voisivat saavuttaa samanlaisia visuaalisia efektejä saavutettavammin?
Miksi on tärkeää käyttää nykyisiä verkkostandardeja vanhentuneiden elementtien sijaan?

Tutustu lisää vanhentuneisiin ja poistettuihin HTML-elementteihin ymmärtääksesi, miten verkkostandardit kehittyvät parantaakseen käyttäjäkokemusta.

Oppitunnin jälkeinen kysely

Kertaus ja itseopiskelu

Syvennä HTML-tietämystäsi

HTML on ollut verkkosivujen perusta yli 30 vuoden ajan, kehittyen yksinkertaisesta dokumenttien merkintäkielestä monimutkaiseksi alustaksi interaktiivisten sovellusten rakentamiseen. Tämän kehityksen ymmärtäminen auttaa arvostamaan moderneja verkkostandardeja ja tekemään parempia kehityspäätöksiä.

Suositellut oppimispolut:

HTML:n historia ja kehitys
- Tutki aikajanaa HTML 1.0:sta HTML5:een
- Selvitä, miksi tietyt tagit poistettiin käytöstä (saavutettavuus, mobiiliystävällisyys, ylläpidettävyys)
- Tutki uusia HTML-ominaisuuksia ja ehdotuksia
Semanttisen HTML:n syväluotaus
- Tutustu HTML5:n semanttisten elementtien täydelliseen listaan
- Harjoittele tunnistamaan, milloin käyttää <article>, <section>, <aside> ja <main>
- Opi ARIA-attribuuteista saavutettavuuden parantamiseksi
Moderni verkkokehitys
- Tutustu responsiivisten verkkosivujen rakentamiseen Microsoft Learnissa
- Ymmärrä, miten HTML integroituu CSS:n ja JavaScriptin kanssa
- Opi verkkosuorituskyvyn ja SEO:n parhaista käytännöistä

Pohdintakysymykset:

Mitkä vanhentuneet HTML-tagit löysit, ja miksi ne poistettiin käytöstä?
Mitä uusia HTML-ominaisuuksia ehdotetaan tuleviin versioihin?
Miten semanttinen HTML edistää verkkosivujen saavutettavuutta ja SEO:ta?

⚡ Mitä voit tehdä seuraavan 5 minuutin aikana

Avaa DevTools (F12) ja tarkastele suosikkisivustosi HTML-rakennetta
Luo yksinkertainen HTML-tiedosto peruselementeillä: <h1>, <p> ja <img>
Vahvista HTML:si W3C HTML Validator -työkalulla verkossa
Kokeile lisätä kommentti HTML:si sisään käyttämällä

🎯 Mitä voit saavuttaa tämän tunnin aikana

Suorita oppitunnin jälkeinen kysely ja kertaa semanttisen HTML:n käsitteet
Rakenna yksinkertainen verkkosivu itsestäsi käyttäen oikeaa HTML-rakennetta
Kokeile eri otsikkotasoja ja tekstin muotoilutageja
Lisää kuvia ja linkkejä harjoitellaksesi multimedia-integraatiota
Tutki HTML5-ominaisuuksia, joita et ole vielä kokeillut

📅 Viikon mittainen HTML-matka

Suorita terraarioprojektin tehtävä semanttisella merkinnällä
Luo saavutettava verkkosivu käyttäen ARIA-tunnisteita ja rooleja
Harjoittele lomakkeiden luomista eri syöttötyypeillä
Tutki HTML5 API:ita, kuten localStorage tai geolocation
Opiskele responsiivisia HTML-malleja ja mobiiliystävällistä suunnittelua
Tarkastele muiden kehittäjien HTML-koodia parhaiden käytäntöjen oppimiseksi

🌟 Kuukauden mittainen verkkosivujen perusta

Rakenna portfoliosivusto, joka esittelee HTML-osaamistasi
Opi HTML-mallinnusta esimerkiksi Handlebars-kehyksellä
Osallistu avoimen lähdekoodin projekteihin parantamalla HTML-dokumentaatiota
Hallitse edistyneitä HTML-käsitteitä, kuten mukautettuja elementtejä
Integroi HTML CSS-kehysten ja JavaScript-kirjastojen kanssa
Mentoroi muita, jotka opettelevat HTML:n perusteita

🎯 HTML-osaamisen aikajana

timeline
    title HTML Learning Progression
    
    section Foundation (5 minutes)
        Document Structure: DOCTYPE declaration
                         : HTML root element
                         : Head vs Body understanding
        
    section Metadata (10 minutes)
        Essential Meta Tags: Character encoding
                           : Viewport configuration
                           : Browser compatibility
        
    section Content Creation (15 minutes)
        Image Integration: Proper file paths
                         : Alt text importance
                         : Self-closing tags
        
    section Layout Organization (20 minutes)
        Container Strategy: Div elements for structure
                          : Class and ID naming
                          : Nested element hierarchy
        
    section Semantic Mastery (30 minutes)
        Meaningful Markup: Heading hierarchy
                         : Screen reader navigation
                         : Accessibility best practices
        
    section Advanced Concepts (1 hour)
        HTML5 Features: Modern semantic elements
                      : ARIA attributes
                      : Performance considerations
        
    section Professional Skills (1 week)
        Code Organization: File structure patterns
                         : Maintainable markup
                         : Team collaboration
        
    section Expert Level (1 month)
        Modern Web Standards: Progressive enhancement
                            : Cross-browser compatibility
                            : HTML specification updates

🛠️ HTML-työkalupakin yhteenveto

Tämän oppitunnin jälkeen sinulla on:

Dokumenttirakenne: Täydellinen HTML5-perusta oikealla DOCTYPE:lla
Semanttinen merkintä: Merkitykselliset tagit, jotka parantavat saavutettavuutta ja SEO:ta
Kuvien integrointi: Oikea tiedostojen organisointi ja alt-tekstin käyttö
Layout-kontit: Strateginen divien käyttö kuvailevilla luokkanimillä
Saavutettavuustietoisuus: Ymmärrys ruudunlukijan navigoinnista
Modernit standardit: Nykyiset HTML5-käytännöt ja tieto vanhentuneista tageista
Projektin perusta: Vahva pohja CSS-tyylittelylle ja JavaScript-interaktiivisuudelle

Seuraavat askeleet: HTML-rakenteesi on valmis CSS-tyylittelyä varten! Rakentamasi semanttinen perusta tekee seuraavasta oppitunnista paljon helpomman ymmärtää.

Tehtävä

Harjoittele HTML:ää: Rakenna blogin mallinnus

Vastuuvapauslauseke:
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua Co-op Translator. Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.

30 KiB Raw Blame History Unescape Escape

Terrarium-projekti Osa 1: Johdatus HTML:ään

Ennakkokysely

Projektin valmistelu

Tehtävä: Luo projektirakenne

HTML-dokumentin rakenteen ymmärtäminen

DOCTYPE-määrittely ja juurielementti

🔄 Pedagoginen tarkistus

Välttämättömän dokumenttimetadata lisääminen

Tehtävä: Lisää dokumentin pääosa

Dokumentin rungon rakentaminen

HTML-tagin rakenteen ymmärtäminen

Tehtävä: Lisää rungon elementti

Kuvien ja asettelusäiliöiden käyttö

Tehtävä: Luo kasvien näyttöasettelu

🔄 Pedagoginen tarkistus

Semanttisen HTML:n käyttö saavutettavuuden parantamiseksi

Semanttisen sivuotsikon lisääminen

Terraariosäiliön luominen

Tehtävä: Lisää terraarion rakenne

🔄 Pedagoginen tarkistus

GitHub Copilot Agent -haaste

HTML:n historian tutkimushaaste

Oppitunnin jälkeinen kysely

Kertaus ja itseopiskelu

⚡ Mitä voit tehdä seuraavan 5 minuutin aikana

🎯 Mitä voit saavuttaa tämän tunnin aikana

📅 Viikon mittainen HTML-matka

🌟 Kuukauden mittainen verkkosivujen perusta

🎯 HTML-osaamisen aikajana

🛠️ HTML-työkalupakin yhteenveto

Tehtävä

30 KiB

Raw Blame History Unescape Escape