figure ja figcaption uudelleen
Käytä figure-elementtiä kuvien lisäksi koodiin, kaavioihin ja lainauksiin
figure ja figcaption uudelleen on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.
figure muutakin kuin kuvia
<figure>-elementti ei ole tarkoitettu vain kuville — se merkitsee mitä tahansa itsenäistä sisältöä, johon päätekstissä viitataan:
- Koodiesimerkit
- Matemaattiset yhtälöt
- Kaaviot ja diagrammit
- Lainaukset
- Ääni ja video tekstityksineen
Koodiesimerkki figure-elementissä
Merkitkää koodiesimerkit figure-elementeiksi:
<figure id="code-1">
<figcaption>Listing 1: A simple JavaScript greeting function.</figcaption>
<pre><code>function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet('World'));</code></pre>
</figure>
<p>As shown in <a href="#code-1">Listing 1</a>, the function...</p>Ääni figure-elementissä
Äänellä on kuvaava kuvateksti:
<figure>
<audio controls src="podcast-episode-42.mp3">
Your browser does not support audio.
</audio>
<figcaption>Episode 42: HTML5 Deep Dive — 48 minutes.</figcaption>
</figure>Video figure-elementissä
Videolla on sen sisältöä kuvaava kuvateksti:
<figure>
<video controls width="800" height="450">
<source src="tutorial.mp4" type="video/mp4">
<source src="tutorial.webm" type="video/webm">
</video>
<figcaption>Tutorial: Building a responsive navigation menu in 10 minutes.</figcaption>
</figure>Kaavio figure-elementissä
Kaaviokuvan kuvatekstinä on tietolähde:
<figure>
<img
src="revenue-chart.png"
alt="Line chart showing revenue growth from $2M in 2020 to $8M in 2024"
width="800"
height="400"
>
<figcaption>
Figure 3: Annual revenue growth 2020-2024.
Source: Finance Department Annual Report.
</figcaption>
</figure>SVG-diagrammi figure-elementissä
SVG-diagrammilla on kuvateksti:
<figure>
<svg role="img" aria-labelledby="diagram-title" width="400" height="300">
<title id="diagram-title">Three-tier architecture diagram</title>
<!-- SVG content -->
</svg>
<figcaption>Figure 4: Client-server-database three-tier architecture.</figcaption>
</figure>Lainaus figure-elementissä
Laaja lainaus figure-elementtinä:
<figure>
<blockquote cite="https://www.w3.org/TR/html52/">
<p>The main element represents the main content of the body of a document
or application.</p>
</blockquote>
<figcaption>— W3C HTML5.2 Specification</figcaption>
</figure>alt ja figcaption uudelleen
Selvennetään ero vielä kerran:
- alt — näkymätön; korvaa kuvan ruudunlukijoille; kuvaa mitä kuvassa näkyy
- figcaption — näkyvä; antaa asiayhteyden, lähdetiedon tai numeroinnin; kuvaa mitä figure-elementti tarkoittaa
<figure>
<img src="volcano.jpg" alt="Ash plume rising 2km above Mount St. Helens">
<figcaption>Figure 7: The 1980 eruption. Source: USGS.</figcaption>
</figure>figcaption-elementin sijainti
figcaption voi olla figure-elementin ensimmäinen tai viimeinen lapsi:
<!-- Caption above the content (common for code listings) -->
<figure>
<figcaption>Listing 1: Hello World</figcaption>
<pre>...</pre>
</figure>
<!-- Caption below the content (common for images) -->
<figure>
<img src="photo.jpg" alt="...">
<figcaption>Caption below the image</figcaption>
</figure>Figure-elementtien numerointi CSS-laskureilla
Numeroikaa figure-elementit automaattisesti CSS-laskureilla:
/* In CSS: */
main {
counter-reset: figure-counter;
}
figure {
counter-increment: figure-counter;
}
figcaption::before {
content: 'Figure ' counter(figure-counter) ': ';
font-weight: bold;
}Milloin figure-elementtiä ei käytetä
Älkää ympäröikö jokaista kuvaa figure-elementillä:
- Koristeelliset kuvat (tyhjä alt) → käyttäkää vain
<img alt="">-elementtiä - Pelkästään esitystarkoituksessa olevat kuvat → CSS:n background-image
- Käyttäjäluettelon avatar-kuvat → käyttäkää vain
<img>-elementtiä - Ylätunnisteen logo → käyttäkää vain
<img>-elementtiä
Pikatarkistus
Mikä figure-elementin lapsielementti tarjoaa kaikille käyttäjille näkyvän kuvatekstin?
Kertaus: figure uudelleen
Figure-elementin tärkeimmät asiat uudelleen:
<figure>— itsenäinen sisältö, johon viitataan (kuvat, koodi, kaaviot, ääni, lainaukset)<figcaption>— näkyvä kuvateksti, ensimmäinen tai viimeinen lapsi- alt-teksti = näkymätön kuvaus; figcaption = näkyvä asiayhteys
- Numeroikaa automaattisesti CSS-laskureilla
- Kaikki kuvat eivät tarvitse figure-elementtiä
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”figure ja figcaption uudelleen” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “figure ja figcaption uudelleen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”figure ja figcaption uudelleen”?
Käytä figure-elementtiä kuvien lisäksi koodiin, kaavioihin ja lainauksiin Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”figure ja figcaption uudelleen”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä HTML Academy-oppitunnilla?
Kyllä. Jokainen HTML Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- aside: täydentävä sisältö
- figure ja figcaption uudelleen
- details ja summary: avattava käyttöliittymäkomponentti
- progress- ja meter-elementit