Jump to content

Programmeerimise algõpe: HTML tag ehk silt

From Wikiversity


< Programmeerimise algõpe


HTML tag ehk silt [1]

[edit]

HTML koodi valideerimise tunnis leidsime sellise koodinäite: 

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
        <head>

          <title>Title</title>
        </head>

        <body>
          <!-- ... body of document ... -->
        </body>

      </html>

Nagu näha koosneb HTML kood nurksulgusega piiratud üksustest ehk siltidest nagu <title>...</title>, <!-- ... --> ja <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">, mis ütlevad veebilehitsejale (prauserile ehk browserile), mida ja kuidas lehel kujutada. Neid silte on kahesuguseid.

  • Algus ja lõpusildist koosnevad paarid nagu <head> .. </head> ja <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> ... </html> piiravad mingi osa lehest ja kirjeldavad prauserile, mida selle osaga peale hakata. Näiteks <h1> Kõige suurem pealkiri </h1> ütleb, et nende märgiste vahele kirjutatud jutt peab olema eraldi real ja ülisuurte tähtedega.
    • Algussildi moodustab nurksulgudega piiratud sildi nimi (tagname) nagu <body>.
    • Lõpusildi tuletamiseks algussildist lisame sildi nime (tagname) ette tõusva (murd)joone / näiteks: </body>.

Sealjuures sildi nime järel võib olla rea lõpp või tühikud, aga selle ees mitte. Näiteks <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> võib olla kirjutatud ka mitmele reale: 

      <html 
	xmlns="http://www.w3.org/1999/xhtml" 
	lang="en" 
	xml:lang="en"
	>

Sildi nimi näitab, mida märgistega piiratud koodiga ette võtta.

  1. Näiteks <h1> Kõige suurem pealkiri </h1> ütleb, et nende märgiste vahele kirjutatud jutt peab olema eraldi real ja ülisuurte tähtedega.
  2. <h2> pealkiri </h2> ütleb, et nende märgiste vahele kirjutatud jutt peab olema eraldi real, aga pisut väiksemate tähtedega.
  3. <h3> pealkiri </h3> ütleb, et nende märgiste vahele kirjutatud jutt peab olema eraldi real, aga veel väiksemate tähtedega.

Kuna HTML standardi loojad ei olnud küllalt ettenägelikud, siis on seal üht-teist segast [2]. Meie alustame kohe rangest XHTML'ist, et hiljem ei peaks ümber õppima.

Ülesanne

[edit]
  • 1. Kui aega on, siis loe mõnd XHTML'i tutvustust (http://www.w3schools.com/xhtml/xhtml_intro.asp)!
  • 2. Igal juhul vaata XHTML siltide loetelu (http://www.w3schools.com/tags/default.asp)!
  • 3. Salvesta oma kodulehe kausta ".html" fail [3], milles oleks kasutatud muu hulgas selliseid silte:
    • <b
    • <i
    • <sub
    • <sup
    • <br
    • <hr
    • <h5
    • <p
    • <pre
    • <title
    • <!--
      • Mida prauser nõnda märgistatud tekstilõikudega teeb?
      • Paranda alati vead (, kui neid on), et failid valideeruksid [4] ! Kasuta sellist standardit:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html lang="et" xml:lang="et" xmlns="http://www.w3.org/1999/xhtml">
		<head>
			<meta http-equiv="content-type" content="text/html;charset=utf-8" />
			<title> HTML tag </title>

		</head>
		<body>
Oma kood kirjuta siia!
		</body>
	</html>



Vastused

[edit]
  • õpilane : " Minul ei õnnestu oma koodi kuidagi valideerida.

( Omast arust olen kõik õigesti teinud ja kasutanud õigeid märgendeid ning lehekülg ka töötab korralikult. Ma ei saa aru, mida ma siis valesti teen. :( Tundub, et tegemist on mingi ühe läbiva veaga, aga ma ei saa aru, milles see täpselt seisneb. :(. "


    • õpetaja : " Valideerimisel saan mina sellise veateate:
Line 13, Column 6: end tag for  "br"  omitted, but OMITTAG NO was specified 
	<…
 ✉ 
You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it  with "/>" instead of ">" . 
 Line 13, Column 1: start tag was here 
	<br>


Validaator ütleb ju, et <br> element peab lõppema nii "/>" mitte ">" ehk õige oleks <br/> .

Vaata siit: http://www.w3schools.com/tags/tag_br.asp

Differences Between HTML and XHTML

  • In HTML the <br> tag has no end tag.
  • In XHTML the <br> tag must be properly closed, like this: <br />.

Ja meie väidame prauserile, et järgime XHTML normi <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> .


  • õpilane : " Minul ei õnnestu oma koodi kuidagi valideerida.

( Omast arust olen kõik õigesti teinud ja kasutanud õigeid märgendeid ning lehekülg ka töötab korralikult. "


    • õpetaja : "

Mina näiteks ei oskagi nii vigast HTML koodi kirjutada, et ükski prauser midagi ei näitaks. Prauserid püüavad oma oskuste piires vigu parandada, et oma kasutajaile meeldida, aga nad parandavad neid erinevalt ja vigane leht hakkab järjest vähem korralikult töötama, kui me lisame CSS'i ja JavaScript'i. Tihti tulebki mõistatuslike vigade leidmiseks leht esmalt valideerida. "


Viited

[edit]
  1. ↑ IT terministandardi projekti (1998-2001) sõnastik
  2. ↑ I found some nasty typo like <p<a ...> and the validator accepted it! jj.
  3. ↑ Failinime laiend Allikas: Vikipeedia
  4. ↑ Markup Validation Service
Retrieved from "https://beta.wikiversity.org/w/index.php?title=Programmeerimise_algõpe:_HTML_tag_ehk_silt&oldid=101190"