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-Tunnisteet ja -Attribuutit
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 2. Luku 11

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

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

Challenge: Luo linkkejä suosittuihin verkkosivustoihin

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 2. Luku 11
some-alt