Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Challenge: Luo linkkejä suosittuihin verkkosivustoihin | HTML-Lomakkeet ja Käyttäjän Syöte
HTML:n Perusteet

Challenge: Luo linkkejä suosittuihin verkkosivustoihin

Pyyhkäise näyttääksesi valikon

Tavoite

Luo houkutteleva verkkosivu, jossa on järjestämätön lista (<ul>) ja linkit (<a>) kolmeen suosittuun verkkosivustoon. Tärkeää on, että nämä linkit avautuvat uuteen välilehteen, mikä parantaa käyttökokemusta ja mahdollistaa kohteiden tutkimisen vaivattomasti.

Tehtävä

Käytä seuraavia elementtejä luodaksesi innostavan verkkolöytöretken:

  1. Luo järjestämätön lista, jossa on kolme kohtaa käyttämällä <ul>-elementtiä.
  2. Jokaisessa listan kohdassa tulee olla linkki (<a>) suosittuun verkkosivustoon sekä sen nimi.
  3. Listan tulee sisältää seuraavat kohteet:
    • "Apple" – Linkki Applen sivustolle: https://www.apple.com/;
    • "Amazon" – Linkki Amazonin sivustolle: https://www.amazon.com/;
    • "Netflix" – Linkki Netflixin sivustolle: https://www.netflix.com/.
index.html

index.html

Vihje
expand arrow
  1. Käytä <ul>-tagia luodaksesi järjestämättömän listan;
  2. Käytä <li>-tagia luodaksesi listaelementit jokaiselle verkkosivuston linkille;
  3. Käytä <a>-tagia luodaksesi linkit ja määritä verkkosivuston URL-osoite href-attribuutilla;
  4. Jotta linkit avautuvat uuteen välilehteen, lisää target="_blank"-attribuutti <a>-tagin sisälle.
Ratkaisu
expand arrow
<ul>
  <li>
    <a href="https://www.apple.com/" target="_blank">Apple</a>
  </li>
  <li>
    <a href="https://www.amazon.com/" target="_blank">Amazon</a>
  </li>
  <li>
    <a href="https://www.netflix.com/" target="_blank">Netflix</a>
  </li>
</ul>
Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 1. Luku 12

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Osio 1. Luku 12
some-alt