TESTING AREA for teachers - real service at plus.tuni.fi
- COMP.CS.200
- 1. HTML: perusteet
- 1.2 HTML:n perusteet
HTML:n perusteet¶
Johdanto¶
Olet (toivottavasti) jo suorittanut edellisen osan kyselyn. Tässä on muutama kysymys lisää, joiden avulla voit testata HTML-tietojasi ennen ensimmäinen HTML-dokumentin luomista.
Voit etsiä vastauksia kysymyksiin W3Schoolsista tai MDN.
Kappaleet¶
Tekstin muotoilu¶
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ä:
Aloitusohjeita ja lisätietoja löydät VSCode -dokumentaatiosta.
2. HTML-tiedostojen tarkastelu
- HTML-tiedostojen tarkastelemiseen on kaksi vaihtoehtoa:
Avaa tiedosto suoraan selaimessa tiedostoselaimen kautta.
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:
Varmista, että index.html on auki VSCode -editorissa.
Paina F5 käynnistääksesi virheenkorjauksen.
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:
Avaa pääte (terminaali).
Suorita komento: which chromium
- Asennuspolun lisääminen launch.json-tiedostoon:
Lisää runtimeExecutable-määritys launch.json-tiedoston konfiguraatio-osioon.
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"
}
]
}