Programmeerimise algõpe: HTML standardid ja valideerimine

From Wikiversity


< Programmeerimise algõpe


HTML standardid ja valideerimine[edit]

Otsime oma kodulehelt vigu[edit]

  1. Läheme World Wide Web Consortium (W3C) HTML validaatori lehele http://validator.w3.org/ [1].
    1. Avaneb leht, kuhu on kirjutatud "Validate a document online: " jms.
      1. Kui ei ole sellist juttu, siis vajutame linki kirjaga "Validate by URI".
    2. Avaneb leht, kuhu on kirjutatud "Validate a document online: " jms.
      1. Leiame sisestusrea, mille ette on kirjutatud "Address: ". Kirjutame sinna oma kodulehe aadressi - näiteks http://www.hot.ee/vikiylikool//index.html.
      2. Vajutame nuppu, millele on kirjutatud [Check].
  2. Minu puhul avaneb leht, kuhu on kirjutatud "Errors found while checking this document " jms.
    1. Kerime lehte allapoole, kuhu on kirjutatud "Validation Output: " jms.
    2. Minu vigade loetelu on selline:
Validation Output:  2 Errors

   1. Error Line 1, Column 1: character "T" not allowed in prolog

      Tere tere!

      ✉
   2. Error Line 1, Column 11: end of document in prolog

      Tere tere!

      ✉

      This error may appear when the validator receives an empty document. Please make sure that the document you are uploading is not empty, and report any discrepancy.


Katsume vigu parandada[edit]

  1. Kerin lehte ülespoole, kuhu on kirjutatud "Notes and Potential Issues " jms.
    1. Minule tehakse sellised märkused:
Unable to Determine Parse Mode!

The validator can process documents either as XML (for document types such as XHTML, SVG, etc.) or SGML (for HTML 4.01 and prior versions). For this document, the information available was not sufficient to determine the parsing mode unambiguously, because:

    * the MIME Media Type (text/html) can be used for XML or SGML document types
    * No known Document Type could be detected
    * No XML declaration (e.g <?xml version="1.0"?>) could be found at the beginning of the document.
    * No XML namespace (e.g <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">) could be found at the root of the document.

As a default, the validator is falling back to SGML mode.
  1. Lähen W3Schools'i HTML käsiraamatu lehele http://www.w3schools.com/html/default.asp [2] abi otsima.
  2. Ma polnud kodulehe loomisel "index.html" faili kirjutanud muud kui "Tere tere!", aga juba HTML'i tutvustuse avalehel leian nupu [Try it yourself >>].
    1. Vajutan seda [Try it yourself >>] nuppu.
  3. Avaneb leht, kus on nupp kirjaga [Edit and Click Me >>].
    1. Muudan nupu all vasakus sisestuskastis olevat koodi ja vajutan siis [Edit and Click Me >>] nuppu. Parempoolses ruudus olev kiri peaks muutuma.
    2. Muudan nupu all vasakus sisestuskastis olevat koodi nii, et parempoolses ruudus oleks kirjas "Tere tere!".
  4. Vahepeal salvestan arvuti töölaua kausta (desktopile) faili nimega "W3Schools.html".
    1. Kopeerin sisestuskastist HTML koodi, mille ma sinna äsja kirjutasin ja panen selle "W3Schools.html" faili sisse. Salvestan faili.
  5. Lähen [ https://epass.elion.ee/do Elion'i lehele ]. Sisestan oma "Kasutajatunnuse" ja "Salasõna" ja vajutan nuppu kirjaga [Sisene].
  6. Avaneb leht, kus on kirjas "Tellitud teenused" jm. Vajutan linki kirjaga "Sisene hot.ee-sse".
  7. Avaneb leht, kuhu on kirjutatud "Minu asjad" jm. Vajutan linki kirjaga "> Koduleht".
  8. Avaneb leht, kuhu on kirjutatud "Oled siin: Minu failid" jm. Vajutan linki kirjaga "Lisa fail".
  9. Avaneb leht, kuhu on kirjutatud "Faili asukoht:" vms. Vajutan nuppu kirjaga [Browse].
  10. Avaneb aknake, kuhu on kirjutatud "File Upload" vms. Vajutan linki kirjaga "Desktop" vm. Otsin faili nimega "W3Schools.html" ja teen tema kohal topeltklõpsu.
  11. Sulgub aknake, kuhu oli kirjutatud "File Upload" vms. Lähen tagasi aknale, kuhu oli kirjutatud "Faili asukoht:" vms. Vajutan linki kirjaga "Lisa fail".
  12. Avaneb leht, kuhu on kirjutatud "Faili üleslaadimine õnnestus" vms. Vajutan "W3Schools.html" kirjast paremal asuvale sinisele nupukesele kirjaga "i".
  13. Avaneb leht, kuhu on kirjutatud "Nimi: W3Schools.html" jms. Vajutan "URL:" kirjast paremal asuvale lingile kirjaga "http://www.hot.ee/sinuvarjunimi//W3Schools.html".
  14. Avaneb uus aken, kuhu on kirjutatud "Tere tere!" vms. Oleksin nagu jälle alguses tagasi.


Otsime veel kord vigu[edit]

  1. Kopeerin aadressiribalt aadressi.
  2. Lähen World Wide Web Consortium (W3C) HTML validaatori lehele http://validator.w3.org/ .
    1. Avaneb leht, kuhu on kirjutatud "Validate a document online: " jms.
      1. Kui ei ole sellist juttu, siis vajutan linki kirjaga "Validate by URI".
    2. Avaneb leht, kuhu on kirjutatud "Validate a document online: " jms.
      1. Leian sisestusrea, mille ette on kirjutatud "Address: ". Sisestan sinna äsja kopeeritud aadressi - näiteks "http://www.hot.ee/sinuvarjunimi//W3Schools.html".
      2. Vajutan nuppu, millele on kirjutatud [Check].
  3. Minu puhul avaneb leht, kuhu on kirjutatud "Errors found while checking this document " jms.
    1. Kerin lehte allapoole, kuhu on kirjutatud "Validation Output: " jms.
    2. Minu vigade UUS loetelu on selline:
Validation Output:  3 Errors

   1. Error Line 1, Column 1: no document type declaration; implying "<!DOCTYPE HTML SYSTEM>"

      <html>

      ✉

      The checked page did not contain a document type ("DOCTYPE") declaration. The Validator has tried to validate with a fallback DTD, but this is quite likely to be incorrect and will generate a large number of incorrect error messages. It is highly recommended that you insert the proper DOCTYPE declaration in your document -- instructions for doing this are given above -- and it is necessary to have this declaration before the page can be declared to be valid.
   2. Error Line 2, Column 6: document type does not allow element "BODY" here

      <body>

      ✉

      The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

      One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
   3. Error Line 7, Column 7: end tag for "HTML" which is not finished

      </html>

      ✉

      Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

      Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists (ul, ol, dl) require list items (li, or dt, dd), and so on.


Katsume taas vigu parandada[edit]

  1. Kerin lehte ülespoole, kuhu on kirjutatud "No DOCTYPE found! Checking with default HTML 4.01 Transitional Document Type. " jms. Vajutan linki http://validator.w3.org/docs/help.html#faq-doctype kirjaga "how to add a doctype to your document ".
  2. Avaneb leht, kuhu on kirjutatud "One should place a DOCTYPE declaration as the very first thing in an HTML document. For example, for a typical XHTML 1.0 document: " jms. Selle all on järgmine koodi näide:
      <!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>


Ülesanne[edit]

  • 1. Salvesta viimase koodinäite eeskujul oma kodulehele fail, mis läbib validaatori veatult! [3]
  • 2. Kirjuta võimalikult lühike HTML kood, milles oleks tähemärkide arvu kohta kõige rohkem vigu!


Vastused[edit]

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


    • õpetaja :

" Valideerimisel saan mina sellise veateate: "Sorry, I am unable to validate this document because on line 30 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication. The error was: utf8 "\xFC" does not map to Unicode"


Ilmselt on viga selles, et ütled prauserile nagu oleksid salvestanud selle faili utf-8 normi järgi <meta http-equiv="content-type" content="text/html;charset=utf-8" />, aga tegelikult pole.

See rida on vigane: <!-- See aga on kommentaar, mida lehek�ljel ei n�idata --!>

Alustuseks võid vigase osa ("�ljel ei n�") lihtsalt kustutada, aga tähestike küsimust käsitletakse ühes hilisemas õppetükis, mida võid soovi korral lugeda: http://beta.wikiversity.org/wiki/Programmeerimise_algõpe:_HTML_ja_tähestikud .


  • Kui ütled prauserile nagu oleksid salvestanud selle faili utf-8 normi järgi <meta http-equiv="content-type" content="text/html;charset=utf-8" />, siis pead ka faili utf-8 normi järgi salvestama.

See tähendab, et:

  1. Vajuta salvestamise eel Notepadi nuppu [File]!
  2. Vajuta linki "Save As ..."!
  3. Vali avanenud aknakese Encodingu loendist UTF-8!
  4. Vajuta salvestamiseks nuppu [Save]!


  • Kui ütled prauserile nagu oleksid salvestanud selle faili ISO normi järgi <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />, siis pead ka faili ISO normi järgi salvestama.

See tähendab, et:

  1. Vajuta salvestamise eel Notepadi nuppu [File]!
  2. Vajuta linki "Save As ..."!
  3. Vali avanenud aknakese Encodingu loendist ANSI!
  4. Vajuta salvestamiseks nuppu [Save]!

"


  • õpilane :

" valideerumist ei lase oma arvutis kontrollida."


    • õpetaja :

" Laseb küll."


  • õpilane :

" mul hakkas õiendama - ütles et sellist url'i ei saa kontrollida :S "


    • õpetaja :

" Seal on 3 linki

  1. Validate by URL
  2. Validate by File Upload
  3. Validate by Direct Input


  • Vali Validate by File Upload !

"


Viited[edit]

  1. ↑ About W3C
  2. ↑ W3Schools Home
  3. ↑ Markup Validation Service
Retrieved from "https://beta.wikiversity.org/w/index.php?title=Programmeerimise_algõpe:_HTML_standardid_ja_valideerimine&oldid=61178"