HTML-Dokumentin Rakenteen Selitetty
Ensiksi tarkastellaan HTML-dokumentin rakennetta.
HTML-dokumentin rakenne
Jokaisen HTML-dokumentin tulee noudattaa yhtenäistä rakennetta. Tässä esitellyt elementit muodostavat perustan sisällön järjestämiselle, sivun rakenteen määrittelylle ja käyttäjäkokemuksen parantamiselle verkossa.
html-tunniste
<html>-tunniste on HTML-dokumentin juurielementti. Kaikki muut elementit kirjoitetaan sen sisälle. Avaava <html>-tunniste merkitsee HTML-dokumentin alkua, kun taas sulkeva </html>-tunniste merkitsee sen loppua.
Esimerkki:
<html>
<!-- Other elements go here -->
</html>
head-tunniste
<head>-tunniste sisältää HTML-dokumentin metatiedot, kuten otsikon, merkistökoodauksen sekä ulkoiset resurssit, kuten tyylitiedostot ja skriptit. Se ei sisällä käyttäjälle suoraan näkyvää sisältöä verkkosivulla.
Esimerkki:
<head>
<title>Title of the Document</title>
<meta charset="UTF-8" />
<!-- Other meta tags, links, and scripts go here -->
</head>
Selitys:
<title>-tunniste määrittää verkkosivun otsikon. Se näkyy selaimen otsikkopalkissa tai välilehdessä. Sivun otsikko antaa lyhyen yleiskuvan sisällöstä, mikä helpottaa käyttäjiä ymmärtämään sivun tarkoituksen ja navigoimaan useiden välilehtien välillä tehokkaammin;<meta charset="UTF-8">määrittää HTML-dokumentissa käytettävän merkistökoodauksen. Tämä merkistökoodaus määrittää, miten selaimet tulkitsevat ja näyttävät tekstin;- Joitakin yleisiä meta-tunnisteita ovat:
<meta name="description" content="Brief description of the page">: Tarjoaa tiiviin kuvauksen sivun sisällöstä, joka voi näkyä hakukoneiden tuloksissa;<meta name="keywords" content="keyword1, keyword2, ...">: Määrittää sivun sisältöön liittyvät avainsanat, mikä auttaa parantamaan hakukoneoptimointia (SEO);<meta name="viewport" content="width=device-width, initial-scale=1.0">: Määrittää näkymän asetukset responsiivista suunnittelua varten, varmistaen oikean mittakaavan eri laitteilla.
body-tunniste
<body>-tunniste sisältää pääasiallisen sisällön, joka näkyy käyttäjille verkkosivulla. Tämä sisältö koostuu tekstistä, kuvista, linkeistä, lomakkeista ja muista elementeistä, joiden kanssa käyttäjät voivat olla vuorovaikutuksessa sivustolla vieraillessaan. Käytännössä <body>-tunniste sisältää kaiken, mitä käyttäjät näkevät ja käyttävät selatessaan verkkosivua.
Esimerkki:
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph of text.</p>
<!-- Other content goes here -->
</body>
Dokumenttityypin määrittely
Dokumenttityypin määrittely ilmoittaa verkkoselaimelle, mitä HTML-versiota dokumentissa käytetään. Tämä määrittely varmistaa, että selain renderöi dokumentin oikein määritellyn HTML-standardin mukaisesti. HTML5-dokumenteissa doctype-määrittely on <!DOCTYPE html>.
Esimerkki:
<!DOCTYPE html>
Lopullinen rakenne
Yhteenvetona kootaan kaikki käsitellyt elementit yhteen ja yhdistetään ne 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.
Videotutoriaali
1. Mikä tunniste on HTML-dokumentin juurielementti?
2. Mitä <head>-tunniste sisältää?
3. Mitä <title>-tunniste määrittää?
4. Mikä on <body>-tunnisteen tarkoitus?
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Awesome!
Completion rate improved to 3.13HTML-Dokumentin Rakenteen Selitetty
Pyyhkäise näyttääksesi valikon
Ensiksi tarkastellaan HTML-dokumentin rakennetta.
HTML-dokumentin rakenne
Jokaisen HTML-dokumentin tulee noudattaa yhtenäistä rakennetta. Tässä esitellyt elementit muodostavat perustan sisällön järjestämiselle, sivun rakenteen määrittelylle ja käyttäjäkokemuksen parantamiselle verkossa.
html-tunniste
<html>-tunniste on HTML-dokumentin juurielementti. Kaikki muut elementit kirjoitetaan sen sisälle. Avaava <html>-tunniste merkitsee HTML-dokumentin alkua, kun taas sulkeva </html>-tunniste merkitsee sen loppua.
Esimerkki:
<html>
<!-- Other elements go here -->
</html>
head-tunniste
<head>-tunniste sisältää HTML-dokumentin metatiedot, kuten otsikon, merkistökoodauksen sekä ulkoiset resurssit, kuten tyylitiedostot ja skriptit. Se ei sisällä käyttäjälle suoraan näkyvää sisältöä verkkosivulla.
Esimerkki:
<head>
<title>Title of the Document</title>
<meta charset="UTF-8" />
<!-- Other meta tags, links, and scripts go here -->
</head>
Selitys:
<title>-tunniste määrittää verkkosivun otsikon. Se näkyy selaimen otsikkopalkissa tai välilehdessä. Sivun otsikko antaa lyhyen yleiskuvan sisällöstä, mikä helpottaa käyttäjiä ymmärtämään sivun tarkoituksen ja navigoimaan useiden välilehtien välillä tehokkaammin;<meta charset="UTF-8">määrittää HTML-dokumentissa käytettävän merkistökoodauksen. Tämä merkistökoodaus määrittää, miten selaimet tulkitsevat ja näyttävät tekstin;- Joitakin yleisiä meta-tunnisteita ovat:
<meta name="description" content="Brief description of the page">: Tarjoaa tiiviin kuvauksen sivun sisällöstä, joka voi näkyä hakukoneiden tuloksissa;<meta name="keywords" content="keyword1, keyword2, ...">: Määrittää sivun sisältöön liittyvät avainsanat, mikä auttaa parantamaan hakukoneoptimointia (SEO);<meta name="viewport" content="width=device-width, initial-scale=1.0">: Määrittää näkymän asetukset responsiivista suunnittelua varten, varmistaen oikean mittakaavan eri laitteilla.
body-tunniste
<body>-tunniste sisältää pääasiallisen sisällön, joka näkyy käyttäjille verkkosivulla. Tämä sisältö koostuu tekstistä, kuvista, linkeistä, lomakkeista ja muista elementeistä, joiden kanssa käyttäjät voivat olla vuorovaikutuksessa sivustolla vieraillessaan. Käytännössä <body>-tunniste sisältää kaiken, mitä käyttäjät näkevät ja käyttävät selatessaan verkkosivua.
Esimerkki:
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph of text.</p>
<!-- Other content goes here -->
</body>
Dokumenttityypin määrittely
Dokumenttityypin määrittely ilmoittaa verkkoselaimelle, mitä HTML-versiota dokumentissa käytetään. Tämä määrittely varmistaa, että selain renderöi dokumentin oikein määritellyn HTML-standardin mukaisesti. HTML5-dokumenteissa doctype-määrittely on <!DOCTYPE html>.
Esimerkki:
<!DOCTYPE html>
Lopullinen rakenne
Yhteenvetona kootaan kaikki käsitellyt elementit yhteen ja yhdistetään ne 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.
Videotutoriaali
1. Mikä tunniste on HTML-dokumentin juurielementti?
2. Mitä <head>-tunniste sisältää?
3. Mitä <title>-tunniste määrittää?
4. Mikä on <body>-tunnisteen tarkoitus?
Kiitos palautteestasi!
