SlideShare une entreprise Scribd logo
1  sur  21
Télécharger pour lire hors ligne
Web Content
The 3 Components of the Web

●   Resource Identification
    –   Using URI (URN/URL)
    –   Aka Web Addressing
●   Interaction
    –   Protocol: HTTP
●   Content/Format
    –   How information/data is written
    –   HTML : basic web programmers must-know
    –   XML based formats
    –   Other formats.
    –   Specifications on how content is to be rendered.
Content Formats

●   Text                   ●   Binary
    –   HTML                   –   Graphics
    –   XML                    –   Audio/Video
    –   Plain Text             –   Java Applets
    –   CSS*                   –   Flash
    –   Javascript code*       –   Etc...
The Web Browser: Content
Renderer
●   The Client Application
    –   In charge of communication with a web server
    –   Renders the content (The browser is a document
        parser).
         ●   By parsing HTML
         ●   ....or XML
         ●   Apply stylings (default or via CSS)
    –   The Browser is the requestor, parser and renderer
Web Browser

●   Thin browser/thin client
    –   Renders only basic content: HTML, plain text
●   Thick browser/thick client
    –   Requires the help of plugins and helper applications to
        render web page content.
         ●   E.g. Java applets require a JRE configured witht the browser
         ●   E.g. Flash animation requires a Runtime environment for
             flash.
         ●   E.g. Audio/Video requires media players with codecs
HTML

●   Hypertext Markup Language
    –   A web programmer's basic content markup language.
    –   Last Version* : 4.01
    –   Update: HTML 5/XHTML 5 is under development.
    –   Markup Language
         ●   Marks up elements of the web page thru the use of tags.
    –   An Application of SGML (Standard Generalized
        Markup Language)
         ●   A metalanguage
HTML

●   Allows Authors to
      * Publish online documents with headings, text, tables,
      lists, photos, etc.
       * Retrieve online information via hypertext links, at
      the click of a button.
       * Design forms for conducting transactions with
      remote services, for use in searching for information,
      making reservations, ordering products, etc.
       * Include spread-sheets, video clips, sound clips, and
      other applications directly in their documents.
HTML Document Design
Considerations
●   Separate structure and presentation
    –   Preferable practice: HTML document contains web
        page contents only, use Style Sheets to specify
        rendering.
●   Consider universal accessibility to the web
    –   Web should be available to everyone.
    –   Authors should consider variety of browsers
         ●   E.g. Speech-based browsers, braille browsers, etc.
●   Help User Agents(Browsers) with Incremental
    Rendering
HTML (SGML) – Language of tags


             <tag>Content</tag>

                 <singleton/>


     <a>, <b>, <table>,<ol>, <hr/>, etc...

  Use tags to mark elements of the document.
HTML and Why The Shift to XML-
based Formats
●   HTML can be written in a bad way.
    –   Browsers must therefore be robust in handling “Bad
        HTML”
         ●   Implication: Browser code more complicated and larger than
             it should be.
    –   Not standardized and browsers do not impose
●   HTML is not relevant/practical in NEW
    environments where web access is made
    –   Consider the different ways to access the Internet esp.
        on “devices” with limited resources.
XML: Ultimate Web Content
Format
●   XML
    –   Extensible Markup Language
    –   A meta language as compared to SGML
    –   Simpler and “smaller” than SGML
         ●   XML is simplified SGML
    –   Strict
         ●   All XML-based documents must follow rules on well-
             formedness.
    –   Standardized Parsers
    –   Text Format
    –   Tag-based
XML: XHTML --> HTML with an X
●   XHTML 1.0
    –   Current web content trend
    –   HTML with the rules of XML plus more.
    –   Imporant Differences with HTML
         ●   XHTML elements (tags) are properly nested [Universal
             XML rule]
         ●   XHTML documents must be well-formed [Universal XML
             rule]
         ●   Tag names and attributes MUST lowercase.
         ●   XHTML elements (tags) must be closed [still on being well-
             formed].
         ●   Some HTML elements not supported, some attributes are
             required.
         ●   Doctype required.
         ●   Can be “mixed” with other XML documents.
         ●   Authors may create user-defined tags.
Proliferations of XML-based
formats
●   MathML
     –   Mathematical equations
●   CML
     –   Chemical Markup Language
●   SVG
     –   Scalable Vector Graphics
●   SMIL
     –   Synchronized Multimedia Integration Language
●   GML
     –   G for Geographic
     –   G for Geometric
●   Etc...
XML – A Must Know

●   ...we will study XML in some greater detail in
    future discussions.
Additional Readings

●   HTML 4.01 Specification (W3C)
     –   http://www.w3.org/TR/REC-html40/cover.html
●   XHTML 1.0 The Extensible Hypertext Markup
    Language
     –   http://www.w3.org/TR/xhtml1/

●   XHTML Tutorial -- for your laboratory class
     –   http://www.w3schools.com/xhtml/default.asp

Contenu connexe

Tendances (20)

HTML
HTMLHTML
HTML
 
Drupal based Municipality Website Training: Pokhara, May 17-19, 2015
Drupal based Municipality Website Training: Pokhara, May 17-19, 2015Drupal based Municipality Website Training: Pokhara, May 17-19, 2015
Drupal based Municipality Website Training: Pokhara, May 17-19, 2015
 
Html
HtmlHtml
Html
 
Dhtml ppt (2)
Dhtml ppt (2)Dhtml ppt (2)
Dhtml ppt (2)
 
Ict html
Ict htmlIct html
Ict html
 
HTML for absolutely begginers
HTML for absolutely begginersHTML for absolutely begginers
HTML for absolutely begginers
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Dhtml chapter2
Dhtml chapter2Dhtml chapter2
Dhtml chapter2
 
Web programming and services
Web programming and servicesWeb programming and services
Web programming and services
 
Unit 2 dhtml
Unit 2 dhtmlUnit 2 dhtml
Unit 2 dhtml
 
Web Pages
Web PagesWeb Pages
Web Pages
 
Web design using html
Web design using htmlWeb design using html
Web design using html
 
Web Development - HTML, CSS, JavaScript
Web Development - HTML, CSS, JavaScriptWeb Development - HTML, CSS, JavaScript
Web Development - HTML, CSS, JavaScript
 
Html
HtmlHtml
Html
 
Dynamic html (#1)
Dynamic  html (#1)Dynamic  html (#1)
Dynamic html (#1)
 
Dhtml
DhtmlDhtml
Dhtml
 
Web Designing
Web DesigningWeb Designing
Web Designing
 
Xhtml
XhtmlXhtml
Xhtml
 
Xhtml and html5 basics
Xhtml and html5 basicsXhtml and html5 basics
Xhtml and html5 basics
 

En vedette (11)

Chapter2c
Chapter2cChapter2c
Chapter2c
 
Chapter1b
Chapter1bChapter1b
Chapter1b
 
Cmsc 100 xhtml and css
Cmsc 100 xhtml and cssCmsc 100 xhtml and css
Cmsc 100 xhtml and css
 
Chapter2a
Chapter2aChapter2a
Chapter2a
 
Chapter2b
Chapter2bChapter2b
Chapter2b
 
Chapter2a
Chapter2aChapter2a
Chapter2a
 
linked list (CMSC 123)
linked list (CMSC 123)linked list (CMSC 123)
linked list (CMSC 123)
 
Chapter1c
Chapter1cChapter1c
Chapter1c
 
Cmsc 100 (web programming in a nutshell)
Cmsc 100 (web programming in a nutshell)Cmsc 100 (web programming in a nutshell)
Cmsc 100 (web programming in a nutshell)
 
Chapter2d
Chapter2dChapter2d
Chapter2d
 
Chapter1a
Chapter1aChapter1a
Chapter1a
 

Similaire à The 3 Components and Formats of Web Content

Similaire à The 3 Components and Formats of Web Content (20)

Xml
XmlXml
Xml
 
HTML AND XML ppt.pptx
HTML AND XML ppt.pptxHTML AND XML ppt.pptx
HTML AND XML ppt.pptx
 
Introduction To Web (Mukesh Patel)
Introduction To Web (Mukesh Patel)Introduction To Web (Mukesh Patel)
Introduction To Web (Mukesh Patel)
 
Lecture3 introduction towebpages
Lecture3 introduction towebpagesLecture3 introduction towebpages
Lecture3 introduction towebpages
 
Java Web Services
Java Web ServicesJava Web Services
Java Web Services
 
Unit 01 (1).pdf
Unit 01 (1).pdfUnit 01 (1).pdf
Unit 01 (1).pdf
 
HTML_DOM
HTML_DOMHTML_DOM
HTML_DOM
 
WEB TECHNOLOGY:Web Essentials and Markup Language HTML
WEB TECHNOLOGY:Web Essentials and Markup Language HTMLWEB TECHNOLOGY:Web Essentials and Markup Language HTML
WEB TECHNOLOGY:Web Essentials and Markup Language HTML
 
Introduction to XML
Introduction to XMLIntroduction to XML
Introduction to XML
 
Differences between HTML and XML.pdf
Differences between HTML and XML.pdfDifferences between HTML and XML.pdf
Differences between HTML and XML.pdf
 
Html and Xhtml
Html and XhtmlHtml and Xhtml
Html and Xhtml
 
The XML Forms Architecture
The XML Forms ArchitectureThe XML Forms Architecture
The XML Forms Architecture
 
Xhtml
XhtmlXhtml
Xhtml
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
00 introduction
00 introduction00 introduction
00 introduction
 
Markup For Dummies (Russ Ward)
Markup For Dummies (Russ Ward)Markup For Dummies (Russ Ward)
Markup For Dummies (Russ Ward)
 
Html Concept
Html ConceptHtml Concept
Html Concept
 
Web Development From the Ground Up, a Series for Novice ...
Web Development From the Ground Up, a Series for Novice ...Web Development From the Ground Up, a Series for Novice ...
Web Development From the Ground Up, a Series for Novice ...
 
WEB Module 1.pdf
WEB Module 1.pdfWEB Module 1.pdf
WEB Module 1.pdf
 
Html xhtml css
Html xhtml cssHtml xhtml css
Html xhtml css
 

Dernier

Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Educationpboyjonauth
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAssociation for Project Management
 
Presiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsPresiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsanshu789521
 
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...Marc Dusseiller Dusjagr
 
MENTAL STATUS EXAMINATION format.docx
MENTAL     STATUS EXAMINATION format.docxMENTAL     STATUS EXAMINATION format.docx
MENTAL STATUS EXAMINATION format.docxPoojaSen20
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactdawncurless
 
Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfSanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfsanyamsingh5019
 
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17Celine George
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingTechSoup
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxNirmalaLoungPoorunde1
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxheathfieldcps1
 
How to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptxHow to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptxmanuelaromero2013
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introductionMaksud Ahmed
 
Arihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdfArihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdfchloefrazer622
 
Alper Gobel In Media Res Media Component
Alper Gobel In Media Res Media ComponentAlper Gobel In Media Res Media Component
Alper Gobel In Media Res Media ComponentInMediaRes1
 
Concept of Vouching. B.Com(Hons) /B.Compdf
Concept of Vouching. B.Com(Hons) /B.CompdfConcept of Vouching. B.Com(Hons) /B.Compdf
Concept of Vouching. B.Com(Hons) /B.CompdfUmakantAnnand
 
Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon ACrayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon AUnboundStockton
 

Dernier (20)

Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Education
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across Sectors
 
Presiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsPresiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha elections
 
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
 
MENTAL STATUS EXAMINATION format.docx
MENTAL     STATUS EXAMINATION format.docxMENTAL     STATUS EXAMINATION format.docx
MENTAL STATUS EXAMINATION format.docx
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
 
Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfSanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdf
 
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptx
 
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdfTataKelola dan KamSiber Kecerdasan Buatan v022.pdf
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 
How to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptxHow to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptx
 
Model Call Girl in Bikash Puri Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Bikash Puri  Delhi reach out to us at 🔝9953056974🔝Model Call Girl in Bikash Puri  Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Bikash Puri Delhi reach out to us at 🔝9953056974🔝
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
Arihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdfArihant handbook biology for class 11 .pdf
Arihant handbook biology for class 11 .pdf
 
Alper Gobel In Media Res Media Component
Alper Gobel In Media Res Media ComponentAlper Gobel In Media Res Media Component
Alper Gobel In Media Res Media Component
 
Concept of Vouching. B.Com(Hons) /B.Compdf
Concept of Vouching. B.Com(Hons) /B.CompdfConcept of Vouching. B.Com(Hons) /B.Compdf
Concept of Vouching. B.Com(Hons) /B.Compdf
 
Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon ACrayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon A
 

The 3 Components and Formats of Web Content

  • 2. The 3 Components of the Web ● Resource Identification – Using URI (URN/URL) – Aka Web Addressing ● Interaction – Protocol: HTTP ● Content/Format – How information/data is written – HTML : basic web programmers must-know – XML based formats – Other formats. – Specifications on how content is to be rendered.
  • 3. Content Formats ● Text ● Binary – HTML – Graphics – XML – Audio/Video – Plain Text – Java Applets – CSS* – Flash – Javascript code* – Etc...
  • 4. The Web Browser: Content Renderer ● The Client Application – In charge of communication with a web server – Renders the content (The browser is a document parser). ● By parsing HTML ● ....or XML ● Apply stylings (default or via CSS) – The Browser is the requestor, parser and renderer
  • 5. Web Browser ● Thin browser/thin client – Renders only basic content: HTML, plain text ● Thick browser/thick client – Requires the help of plugins and helper applications to render web page content. ● E.g. Java applets require a JRE configured witht the browser ● E.g. Flash animation requires a Runtime environment for flash. ● E.g. Audio/Video requires media players with codecs
  • 6. HTML ● Hypertext Markup Language – A web programmer's basic content markup language. – Last Version* : 4.01 – Update: HTML 5/XHTML 5 is under development. – Markup Language ● Marks up elements of the web page thru the use of tags. – An Application of SGML (Standard Generalized Markup Language) ● A metalanguage
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13. HTML ● Allows Authors to * Publish online documents with headings, text, tables, lists, photos, etc. * Retrieve online information via hypertext links, at the click of a button. * Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc. * Include spread-sheets, video clips, sound clips, and other applications directly in their documents.
  • 14. HTML Document Design Considerations ● Separate structure and presentation – Preferable practice: HTML document contains web page contents only, use Style Sheets to specify rendering. ● Consider universal accessibility to the web – Web should be available to everyone. – Authors should consider variety of browsers ● E.g. Speech-based browsers, braille browsers, etc. ● Help User Agents(Browsers) with Incremental Rendering
  • 15. HTML (SGML) – Language of tags <tag>Content</tag> <singleton/> <a>, <b>, <table>,<ol>, <hr/>, etc... Use tags to mark elements of the document.
  • 16. HTML and Why The Shift to XML- based Formats ● HTML can be written in a bad way. – Browsers must therefore be robust in handling “Bad HTML” ● Implication: Browser code more complicated and larger than it should be. – Not standardized and browsers do not impose ● HTML is not relevant/practical in NEW environments where web access is made – Consider the different ways to access the Internet esp. on “devices” with limited resources.
  • 17. XML: Ultimate Web Content Format ● XML – Extensible Markup Language – A meta language as compared to SGML – Simpler and “smaller” than SGML ● XML is simplified SGML – Strict ● All XML-based documents must follow rules on well- formedness. – Standardized Parsers – Text Format – Tag-based
  • 18. XML: XHTML --> HTML with an X ● XHTML 1.0 – Current web content trend – HTML with the rules of XML plus more. – Imporant Differences with HTML ● XHTML elements (tags) are properly nested [Universal XML rule] ● XHTML documents must be well-formed [Universal XML rule] ● Tag names and attributes MUST lowercase. ● XHTML elements (tags) must be closed [still on being well- formed]. ● Some HTML elements not supported, some attributes are required. ● Doctype required. ● Can be “mixed” with other XML documents. ● Authors may create user-defined tags.
  • 19. Proliferations of XML-based formats ● MathML – Mathematical equations ● CML – Chemical Markup Language ● SVG – Scalable Vector Graphics ● SMIL – Synchronized Multimedia Integration Language ● GML – G for Geographic – G for Geometric ● Etc...
  • 20. XML – A Must Know ● ...we will study XML in some greater detail in future discussions.
  • 21. Additional Readings ● HTML 4.01 Specification (W3C) – http://www.w3.org/TR/REC-html40/cover.html ● XHTML 1.0 The Extensible Hypertext Markup Language – http://www.w3.org/TR/xhtml1/ ● XHTML Tutorial -- for your laboratory class – http://www.w3schools.com/xhtml/default.asp