HTML-Dokumentin Rakenteen Selitys
HTML-dokumentti noudattaa johdonmukaista rakennetta, joka koostuu muutamasta keskeisestä elementistä.
<html>-elementti
Jokaisen sivun juurielementti. Kaikki sisältö sijoitetaan avaus-<html>- ja sulku-</html>-tunnisteiden sisään.
<html>
<!-- Other elements go here -->
</html>
<head>-elementti
Sisältää sivun tiedot, jotka eivät näy käyttäjälle. Näihin kuuluvat otsikko, metatiedot sekä viittaukset tyylitiedostoihin tai skripteihin.
<head>
<title>Title of the Document</title>
<meta charset="UTF-8" />
<!-- Other meta tags, links, and scripts go here -->
</head>
Yleisiä elementtejä <head>-osiossa:
<title>: selainvälilehdellä näkyvä teksti;<meta charset="UTF-8">: määrittää merkistökoodauksen;<meta name="description">: lyhyt sivun kuvaus;<meta name="viewport">: tarvitaan responsiiviseen suunnitteluun.
<body>-elementti
Sisältää kaiken sivulla näkyvän sisällön: tekstin, kuvat, linkit, lomakkeet jne.
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph of text.</p>
<!-- Other content goes here -->
</body>
Dokumenttityypin määrittely
Ilmoittaa selaimelle, että sivu tulee renderöidä HTML5-standardin mukaisesti.
<!DOCTYPE html>
Koko rakenteen esimerkki
Yhteenvetona yhdistetään kaikki käsitellyt elementit yhdeksi HTML-dokumentiksi.
<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
<meta charset="UTF-8" />
<!-- Other meta tags, links, and scripts go here -->
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph of text.</p>
<!-- Other content goes here -->
</body>
</html>
Alla näet, miltä HTML-dokumentti näyttää verkkoselaimessa.
1. Mikä tunniste on HTML-dokumentin juurielementti?
2. Mitä <head>-tunniste sisältää?
3. Mitä <title>-tagi määrittelee?
4. Mikä on <body>-tagin tarkoitus?
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Mahtavaa!
Completion arvosana parantunut arvoon 2.86HTML-Dokumentin Rakenteen Selitys
Pyyhkäise näyttääksesi valikon
HTML-dokumentti noudattaa johdonmukaista rakennetta, joka koostuu muutamasta keskeisestä elementistä.
<html>-elementti
Jokaisen sivun juurielementti. Kaikki sisältö sijoitetaan avaus-<html>- ja sulku-</html>-tunnisteiden sisään.
<html>
<!-- Other elements go here -->
</html>
<head>-elementti
Sisältää sivun tiedot, jotka eivät näy käyttäjälle. Näihin kuuluvat otsikko, metatiedot sekä viittaukset tyylitiedostoihin tai skripteihin.
<head>
<title>Title of the Document</title>
<meta charset="UTF-8" />
<!-- Other meta tags, links, and scripts go here -->
</head>
Yleisiä elementtejä <head>-osiossa:
<title>: selainvälilehdellä näkyvä teksti;<meta charset="UTF-8">: määrittää merkistökoodauksen;<meta name="description">: lyhyt sivun kuvaus;<meta name="viewport">: tarvitaan responsiiviseen suunnitteluun.
<body>-elementti
Sisältää kaiken sivulla näkyvän sisällön: tekstin, kuvat, linkit, lomakkeet jne.
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph of text.</p>
<!-- Other content goes here -->
</body>
Dokumenttityypin määrittely
Ilmoittaa selaimelle, että sivu tulee renderöidä HTML5-standardin mukaisesti.
<!DOCTYPE html>
Koko rakenteen esimerkki
Yhteenvetona yhdistetään kaikki käsitellyt elementit yhdeksi HTML-dokumentiksi.
<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
<meta charset="UTF-8" />
<!-- Other meta tags, links, and scripts go here -->
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph of text.</p>
<!-- Other content goes here -->
</body>
</html>
Alla näet, miltä HTML-dokumentti näyttää verkkoselaimessa.
1. Mikä tunniste on HTML-dokumentin juurielementti?
2. Mitä <head>-tunniste sisältää?
3. Mitä <title>-tagi määrittelee?
4. Mikä on <body>-tagin tarkoitus?
Kiitos palautteestasi!
