Teksti, kuvat, linkit ja luettelot
Muotoile tekstiä otsikoilla ja kappaleilla, upota kuvia alt-tekstillä, luo hyperlinkkejä ja rakenna järjestettyjä ja järjestämättömiä luetteloita.
Teksti, kuvat, linkit ja luettelot on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Otsikot: h1–h6
HTML tarjoaa kuusi otsikkotasoa. Käyttäkää niitä dokumenttirakenteen luomiseen, älkää tekstin koon muuttamiseen. <h1> on sivun otsikko (kerran sivua kohden), <h2> on tarkoitettu pääosioille, <h3> alaosioille ja niin edelleen.
<h1>Frontend Development Guide</h1>
<h2>HTML Basics</h2>
<h3>Headings</h3>Kappaleet ja <br>
<p>-elementti ympäröi tekstikappaleen. Selain lisää automaattisesti tilaa sen ylä- ja alapuolelle. Käyttäkää <br>-elementtiä säästeliäästi — vain merkityksellisiin rivinvaihtoihin, kuten osoitteessa tai runossa, ei kappaleiden välisen tyhjän tilan luomiseen.
Tekstin sisäiset elementit
Käyttäkää tekstin merkityksen ilmaisemiseen sisäisiä elementtejä: <strong> tärkeälle tekstille (lihavoitu), <em> painotukselle (kursivoitu), <code> koodikatkelmille, <mark> korostetulle tekstille ja <small> pienellä painetulle tekstille.
<p>Press <kbd>Ctrl+S</kbd> to save. The <code>console.log()</code> function outputs to the <strong>Console</strong> panel.</p>Kuvat: <img>-elementti
<img>-elementti upottaa kuvan. src-attribuutti määrittää URL-osoitteen, ja alt tarjoaa vaihtoehtoisen tekstin ruudunlukijoille sekä tilanteisiin, joissa kuvan lataaminen epäonnistuu. Sisällyttäkää aina merkityksellinen alt-arvo.
<img src="/images/hero.webp"
alt="A developer typing code on a laptop"
width="800"
height="450">Hyvän alt-tekstin kirjoittaminen
Alt-tekstin tulee välittää kuvan sisältö ja tarkoitus. Koristekuville (tyhjää tilaa luovat kuvat ja yksinomaan koristeelliset kuvakkeet) käytetään alt=""-arvoa (tyhjä merkkijono), jotta ruudunlukijat ohittavat ne. Älkää koskaan kirjoittako alt="image of" — kuvailkaa vain, mitä kuva esittää.
Hyperlinkit: <a>-elementti
<a>(ankkuri) -elementti luo hyperlinkkejä. href-attribuutti määrittää kohde-URL-osoitteen. Linkkitekstin tulee kuvata kohdetta — älkää koskaan kirjoittako "napsauta tästä".
<!-- External link -->
<a href="https://mdn.mozilla.org" target="_blank" rel="noopener noreferrer">
MDN Web Docs
</a>
<!-- Internal link -->
<a href="/courses">Browse Courses</a>
<!-- Email link -->
<a href="mailto:hello@example.com">Email Us</a>target=_blank-tietoturvahuomautus
Kun avaatte linkkejä uuteen välilehteen käyttämällä target="_blank"-attribuuttia, lisätkää aina myös rel="noopener noreferrer". Ilman sitä avattu sivu voi käyttää avaavan sivun window-objektia — kyseessä on reverse tabnapping -niminen tietoturva-aukko.
Järjestämättömät luettelot: <ul>
Käyttäkää <ul>-elementtiä (järjestämätön luettelo), kun kohteiden järjestyksellä ei ole merkitystä — esimerkiksi ominaisuuksille, ainesosille tai navigointilinkeille. Jokainen kohde on <li>-elementti. Selain näyttää oletuksena luettelomerkit, mutta yleensä muotoilette ne CSS:llä.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>Järjestetyt luettelot: <ol>
Käyttäkää <ol>-elementtiä (järjestetty luettelo), kun järjestyksellä on merkitystä — esimerkiksi opetusohjelman vaiheille, sijoituksille tai ohjeille. Kohteet numeroidaan automaattisesti. Käyttäkää start- ja reversed-attribuutteja numeroinnin hallintaan.
<ol>
<li>Install Node.js</li>
<li>Create a new project</li>
<li>Run npm install</li>
</ol>Kuvausluettelot: <dl>
<dl>-elementti (kuvausluettelo) ryhmittelee termit ja niiden määritelmät tai kuvaukset. Käyttäkää sitä sanastoihin, metatietoihin (tekijä/päivämäärä) ja avain-arvo-pareihin. <dt> on termi ja <dd> on kuvaus.
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language — the structure layer.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets — the presentation layer.</dd>
</dl>Sisäkkäiset luettelot
Luetteloita voidaan sisäkkäistää hierarkioiden esittämistä varten. Sijoittakaa aliluettelo <ul> tai <ol> yläluettelon <li>-elementin sisään. Älkää sisäkkäistäkö luetteloita pelkän sisennyksen vuoksi — käyttäkää siihen CSS:ää.
Pikatarkistus
Mikä attribuutti tarjoaa ruudunlukijoille kuvan tekstimuotoisen kuvauksen?
Kertaus: tekstit, kuvat, linkit ja luettelot
Käyttäkää otsikkoelementtejä dokumentin rakenteeseen, p-elementtiä kappaleisiin, img-elementtiä merkityksellisen alt-tekstin sisältäviin kuviin, a-elementtiä kuvaavilla linkkiteksteillä navigointiin ja ul/ol/dl-elementtejä luetteloiden sisältöön. Semantiikka tekee HTML:stä saavutettavaa ja koneellisesti luettavaa.
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
- 41
- Oppitunnit
- 163
Usein kysytyt kysymykset
Onko oppitunti ”Teksti, kuvat, linkit ja luettelot” ilmainen?
Kyllä – oppitunnin ”Teksti, kuvat, linkit ja luettelot” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Teksti, kuvat, linkit ja luettelot”?
Muotoile tekstiä otsikoilla ja kappaleilla, upota kuvia alt-tekstillä, luo hyperlinkkejä ja rakenna järjestettyjä ja järjestämättömiä luetteloita. Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Teksti, kuvat, linkit ja luettelot”-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ä Frontend Academy-oppitunnilla?
Kyllä. Jokainen Frontend 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
- Dokumentin rakenne: DOCTYPE, html, head ja body
- Semanttiset tunnisteet: header, nav, main, article ja footer
- Teksti, kuvat, linkit ja luettelot
- Lomakkeet: input, label ja button