1. COMP.CS.200
  2. 1. HTML: perusteet
  3. 1.1 Sukella HTML:ään

Sukella HTML:ään

Johdanto

Näissä lyhyissä harjoituksissa opimme HTML:n perusteet. Se saattaa kuulostaa hieman pelottavalta, jos sinulla ei ole lainkaan tai hyvin vähän ohjelmointikokemusta, mutta HTML:n kirjoittaminen ei itse asiassa ole ohjelmointia, vaan pikemminkin merkintöjen kirjoittamista!

Aiomme tarjota linkkejä kaikkiin tarvittaviin resursseihin ja tietoihin harjoituksista. Sinun on vain ensin luettava linkin takana olevat tiedot ja sitten vastaa lyhyeen tietokilpailuun.

Harjoitukset

Otsikot

Kuinka monta otsikkotasoa on saatavilla HTML:ssä?

Miten määrittelisit tason kaksi otsikon, jossa on teksti “Hei maailma!”?

Kuinka luot vaakasuuntaisen säännön HTML:ään?

Miten määrittelisit ykköstason otsikon, jonka sisältö on “Tampereen yliopisto”?

Kappaleet

Mikä tunniste määrittää kappaleen HTML:ssä?

Kuinka luot kappaleen, jossa on teksti “Hello World”?

Miten aloittaisit uuden rivin <p>-tunnisteen sisällä?

Miten luot kappaleen, jonka rivillä 1 on teksti “Hello” ja rivillä 2 “World”?

Tekstin muotoilu

Kuinka luot lihavoitun tekstin “TUNI”?

Kuinka luot tekstin “TUNI” kursiivilla?

Kuinka luot pienen tekstin “TUNI”?

Kuinka luot merkityn/korostetun tekstin TUNI?

Kuinka luot tilatun tekstin “TUNI”?

Tekstieditori

Kurssin henkilökunta suosittelee käyttämään [Visual Studio Code (VSCode)](https://code.visualstudio.com/#alt-downloads) -editoria. Se on laajalti käytetty, ilmainen ja avoimen lähdekoodin tekstieditori, jonka käyttökelpoisuutta voi parantaa monilla hyödyllisillä laajennuksilla.

1. VSCode -asennus

Lataa ja asenna VSCode seuraavasta linkistä:

Lataa VSCode

Aloitusohjeita ja lisätietoja löydät VSCode -dokumentaatiosta.

2. HTML-tiedostojen tarkastelu

HTML-tiedostojen tarkastelemiseen on kaksi vaihtoehtoa:

  1. Avaa tiedosto suoraan selaimessa tiedostoselaimen kautta.

  2. Käytä VSCoden sisäänrakennettuja työkaluja, mikä on suositeltavaa.

Suositus: Asenna Live Server -laajennus, joka mahdollistaa automaattisen esikatselun selaimessa.

3. Laajennusten asentaminen

Avaa laajennukset: Napsauta VSCoden vasemman reunan Laajennukset-välilehteä (Extensions). Etsi ja asenna: Suosittelemme Live Server -laajennusta ja tutustumista Debugger- ja Run & Debug -työkaluihin.

4. Ensimmäinen HTML-tiedosto

Kun VSCode on asennettu ja tarvittavat laajennukset ovat käytössä, luo uusi tiedosto nimeltä “index.html” ja kopioi siihen seuraava koodi:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hello World -sivu</title>
</head>
<body>
  <h1>Hei maailma!</h1>
</body>
</html>

Tiedoston suorittaminen:

  1. Varmista, että index.html on auki VSCode -editorissa.

  2. Paina F5 käynnistääksesi virheenkorjauksen.

  3. Valitse avautuvasta valikosta “Chrome” selaimeksi.

Huomautus: Jos VSCode avaa automaattisesti launch.json-tiedoston, kopioi ja liitä sinne seuraava sisältö:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch index.html",
      "type": "chrome",
      "request": "launch",
      "file": "${workspaceFolder}/index.html",
      "runtimeExecutable": "/snap/bin/chromium"
    }
  ]
}

Tämä määrittää Chrome-selaimen virheenkorjauksen ja näyttää editoitavan tiedoston Chromella.

Index.html:n käynnistäminen

Kun olet tallentanut launch.json-tiedoston (tarvittaessa) ja valinnut “Käynnistä Chrome”, Chrome-selaimen pitäisi avautua ja ladata index.html-tiedosto.

Avaaminen Live Serverillä

Editointi-ikkunassa avaa valikko oikealla hiirennäppäimellä. Valitse “Open with Live Server”. Editoitava sivu avautuu selaimessa.

Käyttöjärjestelmäkohtaiset ohjeet

Windows-käyttäjät: Ohjeet toimivat yleensä sellaisenaan.

Linux-käyttäjät: Jos käytät Chromium-selainta, sinun on ehkä määritettävä sen asennuspolku launch.json-tiedostossa.

  • Chromiumin asennuspolun löytäminen:

    1. Avaa pääte (terminaali).

    2. Suorita komento: which chromium

  • Asennuspolun lisääminen launch.json-tiedostoon:

    1. Lisää runtimeExecutable-määritys launch.json-tiedoston konfiguraatio-osioon.

    2. Muista käyttää oikeaa JSON-syntaksia.

Esimerkki:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Käynnistä index.html",
      "type": "chrome",
      "request": "launch",
      "file": "${workspaceFolder}/index.html",
      "runtimeExecutable": "/snap/bin/chromium"
    }
  ]
}

Kysely: Tekstieditorin asennus

Onnistuitko asentamaan editorin ja katsomaan index.html-tiedoston selaimessa?

Palautusta lähetetään...