Oppiskele Parillisten ja Yksittäisten HTML-tunnisteiden Ymmärtäminen

HTML käyttää kahta erilaista tagia: parillisia tageja ja yksittäisiä (itse sulkeutuvia) tageja. Molemmilla on oma roolinsa verkkosivun rakenteessa.

Parilliset tagit

Parillisilla tageilla on avaus- ja sulkutagi. Ne ympäröivät sisältöä, ryhmittelevät elementtejä ja määrittelevät merkityksen tai rakenteen.

Syntaksi:

<tag_name>Some content</tag_name>

Tässä on esimerkki parillisten tagien käytöstä:

index.html

Tässä esimerkissä:

<section>...</section>: ryhmittelee toisiinsa liittyvän sisällön;
<h1>...</h1>: lisää otsikon osioon;
<p>...</p>: sisältää kappaleen, joka selittää, että useimmat HTML-tagit esiintyvät pareittain.

Yksittäiset tagit

Yksittäisillä tageilla ei ole sulkevaa tagia. Niitä käytetään, kun sisäistä sisältöä ei tarvita ja kaikki toiminnallisuus määritellään attribuuttien avulla.

Syntaksi:

<tag_name />

Tässä on esimerkki yksittäisten tagien käytöstä:

index.html

Tämä koodi sisältää kaksi elementtiä:

<input />: luo tekstinsyöttökentän. Attribuutti placeholder=" name" näyttää vihjetekstin kentän sisällä;
<img />: näyttää kuvan hedelmistä.
- alt="Fruits": teksti, joka näytetään, jos kuvaa ei voida ladata;
- width ja height: määrittävät kuvan mitat;
- src: määrittää kuvan URL-osoitteen.

Tägien sisäkkäisyys

Tägien tulee olla sisäkkäin oikein, kuten maatuskanuket, jokaisen sulkevan tägien vastatessa avaus-tägiä oikeassa järjestyksessä.

Tässä esimerkki sisäkkäisistä tägistä:

<tag1>
  <tag2>
    <tag4>...</tag4>
    <tag5>...</tag5>
  </tag2>
  <tag3>
    <tag6>...</tag6>
  </tag3>
</tag1>

Tarkastellaan seuraavaa kelvollista esimerkkiä:

index.html

Tämä koodi näyttää kappaleen, jossa on linkki ja korostettua tekstiä:

<p>...</p>: ympäröi koko kappaleen;
<a href="https://privacy.com">...</a>: luo klikattavan linkin tietosuojakäytäntöön;
<strong>...</strong>: lihavoi sanan "website" korostusta varten.

Yhteenveto

Parilliset tagit ympäröivät sisällön käyttäen <tag> ja </tag>.

Yksittäiset tagit (itse sulkeutuvat) eivät sisällä sisäistä sisältöä.

Oikea sisäkkäisyys varmistaa kelvollisen ja luettavan HTML:n.

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 2. Luku 3

Kysy tekoälyä

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Suggested prompts:

Can you give more examples of paired and single tags?

What are some common mistakes with tag nesting?

Can you explain the difference between <strong> and <em> tags?

Pyyhkäise näyttääksesi valikon

HTML käyttää kahta erilaista tagia: parillisia tageja ja yksittäisiä (itse sulkeutuvia) tageja. Molemmilla on oma roolinsa verkkosivun rakenteessa.

Parilliset tagit

Parillisilla tageilla on avaus- ja sulkutagi. Ne ympäröivät sisältöä, ryhmittelevät elementtejä ja määrittelevät merkityksen tai rakenteen.

Syntaksi:

<tag_name>Some content</tag_name>

Tässä on esimerkki parillisten tagien käytöstä:

index.html

Tässä esimerkissä:

<section>...</section>: ryhmittelee toisiinsa liittyvän sisällön;
<h1>...</h1>: lisää otsikon osioon;
<p>...</p>: sisältää kappaleen, joka selittää, että useimmat HTML-tagit esiintyvät pareittain.

Yksittäiset tagit

Yksittäisillä tageilla ei ole sulkevaa tagia. Niitä käytetään, kun sisäistä sisältöä ei tarvita ja kaikki toiminnallisuus määritellään attribuuttien avulla.

Syntaksi:

<tag_name />

Tässä on esimerkki yksittäisten tagien käytöstä:

index.html

Tämä koodi sisältää kaksi elementtiä:

<input />: luo tekstinsyöttökentän. Attribuutti placeholder=" name" näyttää vihjetekstin kentän sisällä;
<img />: näyttää kuvan hedelmistä.
- alt="Fruits": teksti, joka näytetään, jos kuvaa ei voida ladata;
- width ja height: määrittävät kuvan mitat;
- src: määrittää kuvan URL-osoitteen.

Tägien sisäkkäisyys

Tägien tulee olla sisäkkäin oikein, kuten maatuskanuket, jokaisen sulkevan tägien vastatessa avaus-tägiä oikeassa järjestyksessä.

Tässä esimerkki sisäkkäisistä tägistä:

<tag1>
  <tag2>
    <tag4>...</tag4>
    <tag5>...</tag5>
  </tag2>
  <tag3>
    <tag6>...</tag6>
  </tag3>
</tag1>

Tarkastellaan seuraavaa kelvollista esimerkkiä:

index.html

Tämä koodi näyttää kappaleen, jossa on linkki ja korostettua tekstiä:

<p>...</p>: ympäröi koko kappaleen;
<a href="https://privacy.com">...</a>: luo klikattavan linkin tietosuojakäytäntöön;
<strong>...</strong>: lihavoi sanan "website" korostusta varten.

Yhteenveto

Parilliset tagit ympäröivät sisällön käyttäen <tag> ja </tag>.

Yksittäiset tagit (itse sulkeutuvat) eivät sisällä sisäistä sisältöä.

Oikea sisäkkäisyys varmistaa kelvollisen ja luettavan HTML:n.

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 2. Luku 3