$30 off During Our Annual Pro Sale. View Details »

Introduktion till webbutveckling HT12: föreläsning 2

Fredrik Ohlin
September 10, 2012

Introduktion till webbutveckling HT12: föreläsning 2

For the Swedish university course Introduction to Web Development: .

(Published under a Creative Commons BY license.)

Fredrik Ohlin

September 10, 2012
Tweet

More Decks by Fredrik Ohlin

Other Decks in Technology

Transcript

  1. Introduktion till
    webbutveckling
    F2: HTML

    View Slide

  2. Idag
    (Kort praktisk info)
    Grundläggande byggstenar i HTML
    HTML som standard
    Spara och publicera webbdokument

    View Slide

  3. Labbgrupper publicerade
    (grupp 1: efternamn A-K, grupp 2:
    efternamn L-Ö)
    Salar för 11/9: Grupp 1: C119, Grupp
    2: C121
    Ny på programmet?
    Fråga i pausen om något är osäkert!

    View Slide

  4. Andrea Resmini
    Gästföreläsning
    Ons 12/9, 14:30. U305.

    View Slide

  5. View Slide

  6. http://www.flickr.com/photos/adactio/6800969243/

    View Slide

  7. Webbsidans tre lager
    Innehåll
    HTML
    CSS
    JavaScript

    View Slide

  8. innehåll
    + syntax
    + semantik
    HTML

    View Slide

  9. View Slide

  10. En webbsida
    Webbsida
    Vad webbläsaren visar genom att
    rendera ett HTML-dokument
    HTML-dokument
    Innehåll uppmärkt enligt HTML
    HTML-fil
    Ett HTML-dokument sparat i en textfil.

    View Slide

  11. Ett HTML-dokument
    En serie nästlade element
    vars ordning avgör strukturen
    och vars typ och egenskaper
    beskriver innehållet
    Kan representeras med ett
    dokumentträd

    View Slide

  12. Vad är ett element?
    Komponent med vilka HTML-dokument är
    uppbyggda.
    Är av en viss typ (elementets namn).
    Kan ha egenskaper (attribut) och/
    eller innehåll
    Definieras med ”taggar”.
    Ex: Huvudrubrik

    View Slide

  13. Mah
    Strukturkod
    (elementnamn)
    Attribut med värde
    Strukturkod
    Innehåll
    Starttagg Sluttagg

    View Slide

  14. View Slide

  15. Typsik dokumentstruktur
    - rotelementet
    - dokumenthuvud, för data
    om dokumentet
    - dokumenttitel
    - för innehåll i dokumentet

    View Slide

  16. Typsik dokumentstruktur
    http://www.flickr.com/photos/daniello/422213306/




    Mitt dokument





    View Slide

  17. Dokumentträdet
    http://reference.sitepoint.com/html/page-structure

    View Slide

  18. DOM
    https:/
    /
    addons.mozilla.org/sv-
    SE/firefox/addon/6622/

    View Slide

  19. Exempel
    (Enkelt HTML-
    dokument.)

    View Slide

  20. innehåll
    + syntax
    + struktur
    + strikta regler
    HTML

    View Slide

  21. Formell beskrivning a dokumentstruktur
    Dokument deklarerar vilken DTD som
    används
    …och förväntas upprätthålla reglerna i
    denna DTD (validera)
    Document Type Definition

    View Slide

  22. DTD
    Vem som helst kan skapa en DTD, men
    webbens standarder administreras av
    W3C.
    En DTD kan beskriva
    dokumentstrukturen för alla SGML-
    baserade språk, som HTML & XML.
    En DTD är inte trivial att läsa.

    View Slide

  23. Recommended DTDs to use in your Web document
    http://www.w3.org/QA/2002/04/valid-dtd-list.html

    View Slide

  24. Vilka element
    kan användas?

    View Slide

  25. Svar 1: Något
    referensverk
    Developing with Web Standards
    http://reference.sitepoint.com/html
    http://dev.opera.com/articles/view/1-
    introduction-to-the-web-standards-
    cur/#toc

    View Slide

  26. Svar 2:
    Språkets specifikation

    View Slide

  27. HTML 4.01
    Strict
    HTML 4.01
    Transitional
    XHTML 1.0
    Strict
    XHTML 1.0
    Transitional
    XHTML 1.1
    XHTML 2
    HTML5

    View Slide

  28. View Slide

  29. XML
    • eXtensible Markup Language
    • Utbyggbar och förenklad efterträdare till
    SGML
    • Man är (i princip) fri att välja namn på
    element

    View Slide



  30.        
                   XSLT  Cookbook
                   Sal  Mangano
           
           
                   Skriv  med  XML
                   Åsa  Blom
         

    http://sv.wikipedia.org/wiki/XML#Syntax

    View Slide

  31. XHTML
    • Omformulering av HTML i XML.
    • Syntaxregler från XML, element och
    strukturregler från HTML.
    • XHTML 1.1 har rekommendationsstatus,
    men XHTML 1.0 är vanligare.

    View Slide

  32. Skillnad?
    • Dokument följer samma struktur; använder
    samma element.
    • Det går att vara lika strikt med HTML.
    • Den utökade funktionalitet som XML ger har
    dåligt webbläsarstöd.

    View Slide

  33. Framtid?
    • 2 juli 2009 meddelade W3C att
    arbetsgruppen för XHTML2 inte
    fick förnyat uppdrag.
    • XML används ”överallt”, men framtiden för
    XHTML är oviss
    • ...men 1.0 är standard i många system.

    View Slide

  34. HTML5
    While the HTML syntax described in this
    specification bears a close resemblance to
    SGML and XML, it is a separate language with
    its own parsing rules.
    http://dev.w3.org/html5/spec/single-page.html

    View Slide

  35. HTML5
    • Inte baserat på SGML, men bakåtkompatibelt.
    • Kan skrivas med HTML-syntax eller XML-syntax.
    Se även: http://www.w3.org/QA/2008/01/html5-is-html-and-xml.html
    • Innehåller många nya element för att beskriva
    innehåll och struktur:
    • , <figure>, , , , …

    View Slide

  36. HTML 4.01
    Strict
    HTML 4.01
    Transitional
    XHTML 1.0
    Strict
    XHTML 1.0
    Transitional
    XHTML 1.1
    XHTML 2
    HTML5

    View Slide

  37. Har jag skrivit rätt?
    W3C tillgängliggör en tjänst som
    kontrollerar om ett dokument är
    giltigt enligt använd standard.
    http://validator.w3.org/
    Vissa verktyg har inbyggd
    funktionalitet för att göra samma
    kontroll.

    View Slide

  38. Webbpublicering

    View Slide

  39. Ev. demo av
    webshare

    View Slide

  40. Teckenkodning

    View Slide

  41. Teckenkodning
    • Regler för hur symboler (tecken) ska
    representeras [av en dator].
    • ”Teckenuppsättning” är synonymt inom
    HTTP (och därmed HTML).
    • En vanlig teckenkodning är ASCII, med stöd
    för 128 tecken, inkl engelska alfabetet.

    View Slide

  42. http:/
    /www.jimprice.com/ascii-0-127
    .gif

    View Slide

  43. ( http://joeyh.name/blog/entry/unicode_eye_chart/ )

    View Slide

  44. Teckenkodning
    • Webbserverns ansvarar för att ”berätta”
    vilken typ av innehåll som skickas.
    • Detta innefattar vilken teckenkodning.
    • Många gånger påverka webbserverns
    inställningar.
    • Ett HTML-dokument bör specificera med
    vilken teckenuppsättning det är sparat.

    View Slide

  45. View Slide

  46. Så, ”helt enkelt”:
    1.Välj teckenkodning att spara
    HTML-dokumentet med.
    2.Ange samma teckenkodning i
    HTML-dokumentet.

    View Slide

  47. Om labb 1

    View Slide

  48. Att läsa
    • Developing with Web Standards
    kap. 1-3
    • Introduktionsartiklarna länkade i labb 1

    View Slide