Tekstin muotoilutunnisteet

HTML tarjoaa useita tekstin muotoilutunnisteita, joiden avulla voidaan lisätä korostusta, alleviivausta tai yliviivausta tarpeen mukaan.

Tunnisteet <strong> ja <em> korostavat tekstiä. <strong>-tunniste näyttää tekstin lihavoituna, mikä ilmaisee vahvaa tärkeyttä, kun taas <em>-tunniste näyttää tekstin kursivoituna, mikä ilmaisee painotusta.

<u>-tunniste alleviivaa tekstin visuaalisen selkeyden ja tärkeän tiedon korostamiseksi. Alleviivausta kannattaa kuitenkin käyttää harkiten, jotta teksti ei muutu sekavaksi.

<s>-tunniste yliviivaa tekstin, mikä ilmaisee poistoa tai merkityksettömyyttä. Sitä käytetään yleisesti osoittamaan, että tietty teksti on poistettu tai ei ole enää voimassa.
Esimerkki:

Yllä olevassa esimerkissä:

• <strong> ja <em> -tagit korostavat tekstiä; <strong> näyttää tekstin lihavoituna ja <em> kursivoituna;
• <u>-tagi alleviivaa tekstin, korostaen sitä visuaalisesti;
• <s>-tagi yliviivaa tekstin, osoittaen poiston tai epäolennaisuuden.

Linkit

Linkit, eli hyperlinkit, mahdollistavat käyttäjien siirtymisen verkkosivujen, resurssien ja erilaisten viestintämuotojen välillä. HTML:ssä linkit luodaan <a> (anchor) -tagilla.

<a href="href-value">some text</a>

href-attribuutti <a>-tagin sisällä määrittää linkin kohteen. Se voi sisältää useita eri URL-tyyppejä, kuten:

• Absoluuttiset URL-osoitteet: Määrittävät linkitetyn resurssin koko osoitteen, mukaan lukien protokollan (esim. "https://www.example.com");
• Puhelin-URL-osoitteet: Mahdollistavat puhelun aloittamisen suoraan selaimesta linkkiä napsauttamalla. Muoto: "tel:phone-number". On tärkeää sisällyttää maatunnus ja poistaa erikoismerkit sekä välilyönnit puhelinnumerosta (esim. "tel:+123456789");
• Sähköposti-URL-osoitteet: Mahdollistavat sähköpostin kirjoittamisen linkkiä napsauttamalla. Muoto: "mailto:email-address". On tärkeää lisätä koko sähköpostiosoite mailto:-osion jälkeen (esim. "mailto:example@example.com").

Esimerkki:

Yllä olevassa esimerkissä:

• <a>-elementti luo hyperlinkkejä eri kohteisiin;
• href-attribuutti määrittää erilaisia URL-osoitteita, mukaan lukien absoluuttiset URL-osoitteet, puhelinnumerot ja sähköpostiosoitteet.

Muita hyödyllisiä attribuutteja

<a>-elementillä on useita attribuutteja, joilla voidaan määrittää hyperlinkin ominaisuuksia. Yleisiä attribuutteja ovat:

• target="_blank": Määrittää, mihin linkitetty asiakirja avataan. "_blank" avaa linkin uuteen ikkunaan tai välilehteen;
• download: Määrittää, että kohde ladataan, kun käyttäjä napsauttaa hyperlinkkiä. Tällä attribuutilla voi olla arvo, jolla määritetään resurssin tallennustiedoston nimi.

Esimerkki:

Tässä esimerkissä:

• href-attribuutti määrittää linkitetyn resurssin URL-osoitteen;
• target-attribuutti avaa linkin uuteen ikkunaan tai välilehteen.

Painikkeet

<button>-elementti luo napsautettavia painikkeita verkkosivuille. Sen avulla käyttäjät voivat olla vuorovaikutuksessa sivun kanssa esimerkiksi lähettämällä lomakkeen tai suorittamalla JavaScript-koodia. Vaikka emme keskity JavaScriptiin tässä kurssissa, on hyvä tietää, että tällainen mahdollisuus on olemassa.

Painiketyypit

• Tavallinen painike (<button type="button">): Yleiskäyttöinen painike erilaisiin toimintoihin verkkosivulla, kuten JavaScript-funktioiden käynnistämiseen tai toiselle sivulle siirtymiseen;
• Lähetä-painike (<button type="submit">): Käytetään lomakkeen sisällä lähettämään lomaketiedot palvelimelle;
• Palauta-painike (<button type="reset">): Käytetään lomakkeen sisällä palauttamaan kentät oletusarvoihin.

Esimerkki:

Yllä olevassa esimerkissä:

• Ensimmäinen painike on tavallinen painike, jossa on onclick-attribuutti, joka käynnistää ilmoituksen painettaessa;
• Toinen painike on lähetä-painike, joka lähettää lomakkeen tiedot palvelimelle;
• Kolmas painike on nollauspainike, joka palauttaa lomakekentät oletusarvoihinsa.

Videotutoriaali