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
Can you explain more about the purpose of each HTML tag?
How do I use the Inspect tool in my browser?
What are some common mistakes to avoid when creating an HTML document?
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!
