SlideShare a Scribd company logo
1
WWW/HTML
Tim Berners-Lee
2
What is the WWW?
A distributed document delivery system
Uses a client-server model
Main presentation language is HTML
3
Client-Server Model
Two processes (possibly networked):
 The client
 Sends requests to the server
 Blocks until reply is received
 The server
 Processes requests from clients
 Never blocks
 Can reply to several clients simultaneously
4
HTML
Hypertext Markup Language
Intended to be maximally portable
 Logical markup
 Graceful degradation of presentation
An ideal promoted by early WWW
 Used to be more honoured in the breach
 Is it getting better now?
5
Markup Languages
Markup:
 Embedded codes in documents
 Codes are called `tags’
 Codes
 Describe the structure documents
 Include instructions for processing
Markup language:
 Computer language for describing syntax of tags
 May be used with other tools to specify rendering
6
Logical Markup
Logical markup:
 Describes parts of document
 Does not specify how to render
Example:
 This is <strong>very</strong> important
 This is very important
7
Logical Markup
Presentation is client’s `decision’
When client cannot present then there
is graceful degradation
 <img alt=“image description”
src=“foo.gif”>
 Object example from Cougar
8
Some history
Gopher & the Internet Superhighway
SGML
 GML + Charles Goldfarb = SGML
 eXtensible Markup Language
HTML
XML and XHTML
9
Why HTML became XHTML
HTML was originally a SGML application
 Tags described the syntax
 A DTD could check the syntax
 Informal mapping from syntax to rendering
Multiple incompatible versions arose
 IETF moves at ’net speed not web $peed
 Tag abuse was rampant in the ’net
 They were a plague unto the users
10
Why HTML became XHTML (2)
If you think IMG is bad …
Big vendors (M$ and N$ mostly) agreed
 To start over
 To use eXtensible Markup Language
 A re-write of SGML emphasizing simplicity
 Carefully planned by CS savvy folks
 Includes hooks for future development
11
XHTML Basics
Very few real changes from HTML
But more strict
All tags are in lowercase
All tags must be closed
 Empty tags
 Paired tags
12
XHTML Basics
3 Parts to an XHTML or HTML document
 DOCTYPE
 What DTD are you using
 Head
 Meta information
 Only <title> is required
 Body
 Text to render
13
XHTML Document Structure
14
XHTML Basics
Tags
 Elements
 Attributes
Entities
 <,>,&,‘ ’
 Ö,ð,÷,©, etc.
 See example at CS4173 website
Comments
15
XHTML Tags vs. Elements
Tag is markup to represent an element
Logical vs. Presentation Elements
 TT  CODE, KBD, PRE?
 B/IT/U  EM/STRONG
Lists
 UL/OL
 DL
16
XHTML Tags vs. Elements
Block-level and in-line elements
 TABLE, P, BLOCKQUOTE, DIV, etc.
 CODE, Q, H1, SPAN, etc.
Grouping Elements
 DIV
 SPAN
One-part elements
 BR, etc.
17
XHTML Tags vs. Elements
Browser-specific tags
MARQUEE, BLINK, etc.
What happens when a browser doesn't
recognize a tag?
18
XHTML Basics
Tags may be nested but
Tags may not overlap
19
Overlap versus Nesting
20
Links — Why The WWW Is HT
‘A’ element
 HREF
 NAME
 CLASS
 REL
 TYPE
URIs and URLs
RFCs
 TITLE
 ID
 STYLE
 Anchor Text
 TABINDEX
21
Where are the tools?
HTML Tidy
 /opt/bin/tidy on borg
The validator
 http://validator.w3.org/
 http://www.cs.dal.ca/validator?
 http://www.cs.dal.ca/validate?
 http://www.cs.dal.ca:81?
22
XHTML/HTML Examples
XHTML element sampler
XHTML sample template
Both in the examples section of the website
23
For More About HTML
RFC 1866 (HTML 2.0) (at faqs.org)
Explains some of the philosophy behind HTML
HTML 4.01 (at W3C)
Last version of HTML
XHTML 1.1 (at W3C)
Modularized XHTML
So many choices!…
24
Which Standard to Follow?
Minimal standard for this course is
HTML 4.01 Transitional
Preferred standard is XHTML 1.0 or 1.1
See Picking a Rendering Mode
 By Eric Meyer
 In the Readings part of the Resources

More Related Content

PPT
basic html tutorial
PPT
1 basic html
PPT
1 basic html
PPT
BASIC HTML
PPT
1 basic html
PPT
1-Basic HTML.pptGGGGGGGGGGGGGDFDDDFGGGFF
PPT
an introduction for Basic HTML - bams.ppt
PPT
1-Basic HTML.ppt
basic html tutorial
1 basic html
1 basic html
BASIC HTML
1 basic html
1-Basic HTML.pptGGGGGGGGGGGGGDFDDDFGGGFF
an introduction for Basic HTML - bams.ppt
1-Basic HTML.ppt

Similar to 1-Basic HTML.ppt (20)

PPT
1-Basic HTML.ppt
PPT
1-Basic HTML , Introduction to Basic HTML Concepts
PPT
1-Basic HTML.ppthjhjhjjjjjjjjjjjjjjjjjjjjjjjj
PPTX
Lecture-1.pptx
PPTX
02 From HTML tags to XHTML
PDF
Cmsc 100 (web content)
PPT
PPT
Html birth &amp; evolution
PDF
Web Programming introduction
PPT
Web design internet basics
PDF
Fii Practic Frontend BeeNear - laborator 1
PPTX
CSWB 110 Tutorial1 Part A
PPTX
Web technology Unit-II Part A
PDF
Unit 4 - HTTP and the Web Services - IT
PPTX
Web Design and Programming-Lab-4-HTML-II-Exercise
PDF
Introduction to Html
PDF
CH4-HTMfdjsakla;fja;sffjdsklgsdlgsdfgdsL5.pdf
PPTX
HTML AND XML ppt.pptx
PPTX
IS221__Week1_Lecture chapter one, Web design.pptx
PDF
Introduction to Web Standards
1-Basic HTML.ppt
1-Basic HTML , Introduction to Basic HTML Concepts
1-Basic HTML.ppthjhjhjjjjjjjjjjjjjjjjjjjjjjjj
Lecture-1.pptx
02 From HTML tags to XHTML
Cmsc 100 (web content)
Html birth &amp; evolution
Web Programming introduction
Web design internet basics
Fii Practic Frontend BeeNear - laborator 1
CSWB 110 Tutorial1 Part A
Web technology Unit-II Part A
Unit 4 - HTTP and the Web Services - IT
Web Design and Programming-Lab-4-HTML-II-Exercise
Introduction to Html
CH4-HTMfdjsakla;fja;sffjdsklgsdlgsdfgdsL5.pdf
HTML AND XML ppt.pptx
IS221__Week1_Lecture chapter one, Web design.pptx
Introduction to Web Standards
Ad

More from kavi806657 (6)

PPTX
Trees — Tree Terminology – Binary Trees – Binary Search Trees – Tree Traversa...
PPTX
Stacks – Implementation of stack using array and Linked List – Applications o...
PPT
Introduction to Data Structures – Abstract Data Types- Classification of Data...
PPTX
Introduction to dynamic memory allocation – Structures–accessing structure me...
PPT
1-Basic HTML.ppt
PPT
UNIT 3.ppt
Trees — Tree Terminology – Binary Trees – Binary Search Trees – Tree Traversa...
Stacks – Implementation of stack using array and Linked List – Applications o...
Introduction to Data Structures – Abstract Data Types- Classification of Data...
Introduction to dynamic memory allocation – Structures–accessing structure me...
1-Basic HTML.ppt
UNIT 3.ppt
Ad

Recently uploaded (20)

PPTX
OOP with Java - Java Introduction (Basics)
PDF
PPT on Performance Review to get promotions
PDF
composite construction of structures.pdf
PPTX
UNIT 4 Total Quality Management .pptx
PDF
SM_6th-Sem__Cse_Internet-of-Things.pdf IOT
PPTX
Geodesy 1.pptx...............................................
PPTX
Lecture Notes Electrical Wiring System Components
PPTX
Engineering Ethics, Safety and Environment [Autosaved] (1).pptx
PDF
Model Code of Practice - Construction Work - 21102022 .pdf
PPTX
Infosys Presentation by1.Riyan Bagwan 2.Samadhan Naiknavare 3.Gaurav Shinde 4...
PDF
Evaluating the Democratization of the Turkish Armed Forces from a Normative P...
PDF
Digital Logic Computer Design lecture notes
PDF
PRIZ Academy - 9 Windows Thinking Where to Invest Today to Win Tomorrow.pdf
PPT
introduction to datamining and warehousing
PDF
Mohammad Mahdi Farshadian CV - Prospective PhD Student 2026
PPTX
CH1 Production IntroductoryConcepts.pptx
PDF
Well-logging-methods_new................
PPTX
FINAL REVIEW FOR COPD DIANOSIS FOR PULMONARY DISEASE.pptx
DOCX
573137875-Attendance-Management-System-original
PPTX
bas. eng. economics group 4 presentation 1.pptx
OOP with Java - Java Introduction (Basics)
PPT on Performance Review to get promotions
composite construction of structures.pdf
UNIT 4 Total Quality Management .pptx
SM_6th-Sem__Cse_Internet-of-Things.pdf IOT
Geodesy 1.pptx...............................................
Lecture Notes Electrical Wiring System Components
Engineering Ethics, Safety and Environment [Autosaved] (1).pptx
Model Code of Practice - Construction Work - 21102022 .pdf
Infosys Presentation by1.Riyan Bagwan 2.Samadhan Naiknavare 3.Gaurav Shinde 4...
Evaluating the Democratization of the Turkish Armed Forces from a Normative P...
Digital Logic Computer Design lecture notes
PRIZ Academy - 9 Windows Thinking Where to Invest Today to Win Tomorrow.pdf
introduction to datamining and warehousing
Mohammad Mahdi Farshadian CV - Prospective PhD Student 2026
CH1 Production IntroductoryConcepts.pptx
Well-logging-methods_new................
FINAL REVIEW FOR COPD DIANOSIS FOR PULMONARY DISEASE.pptx
573137875-Attendance-Management-System-original
bas. eng. economics group 4 presentation 1.pptx

1-Basic HTML.ppt

  • 2. 2 What is the WWW? A distributed document delivery system Uses a client-server model Main presentation language is HTML
  • 3. 3 Client-Server Model Two processes (possibly networked):  The client  Sends requests to the server  Blocks until reply is received  The server  Processes requests from clients  Never blocks  Can reply to several clients simultaneously
  • 4. 4 HTML Hypertext Markup Language Intended to be maximally portable  Logical markup  Graceful degradation of presentation An ideal promoted by early WWW  Used to be more honoured in the breach  Is it getting better now?
  • 5. 5 Markup Languages Markup:  Embedded codes in documents  Codes are called `tags’  Codes  Describe the structure documents  Include instructions for processing Markup language:  Computer language for describing syntax of tags  May be used with other tools to specify rendering
  • 6. 6 Logical Markup Logical markup:  Describes parts of document  Does not specify how to render Example:  This is <strong>very</strong> important  This is very important
  • 7. 7 Logical Markup Presentation is client’s `decision’ When client cannot present then there is graceful degradation  <img alt=“image description” src=“foo.gif”>  Object example from Cougar
  • 8. 8 Some history Gopher & the Internet Superhighway SGML  GML + Charles Goldfarb = SGML  eXtensible Markup Language HTML XML and XHTML
  • 9. 9 Why HTML became XHTML HTML was originally a SGML application  Tags described the syntax  A DTD could check the syntax  Informal mapping from syntax to rendering Multiple incompatible versions arose  IETF moves at ’net speed not web $peed  Tag abuse was rampant in the ’net  They were a plague unto the users
  • 10. 10 Why HTML became XHTML (2) If you think IMG is bad … Big vendors (M$ and N$ mostly) agreed  To start over  To use eXtensible Markup Language  A re-write of SGML emphasizing simplicity  Carefully planned by CS savvy folks  Includes hooks for future development
  • 11. 11 XHTML Basics Very few real changes from HTML But more strict All tags are in lowercase All tags must be closed  Empty tags  Paired tags
  • 12. 12 XHTML Basics 3 Parts to an XHTML or HTML document  DOCTYPE  What DTD are you using  Head  Meta information  Only <title> is required  Body  Text to render
  • 14. 14 XHTML Basics Tags  Elements  Attributes Entities  <,>,&,‘ ’  Ö,ð,÷,©, etc.  See example at CS4173 website Comments
  • 15. 15 XHTML Tags vs. Elements Tag is markup to represent an element Logical vs. Presentation Elements  TT  CODE, KBD, PRE?  B/IT/U  EM/STRONG Lists  UL/OL  DL
  • 16. 16 XHTML Tags vs. Elements Block-level and in-line elements  TABLE, P, BLOCKQUOTE, DIV, etc.  CODE, Q, H1, SPAN, etc. Grouping Elements  DIV  SPAN One-part elements  BR, etc.
  • 17. 17 XHTML Tags vs. Elements Browser-specific tags MARQUEE, BLINK, etc. What happens when a browser doesn't recognize a tag?
  • 18. 18 XHTML Basics Tags may be nested but Tags may not overlap
  • 20. 20 Links — Why The WWW Is HT ‘A’ element  HREF  NAME  CLASS  REL  TYPE URIs and URLs RFCs  TITLE  ID  STYLE  Anchor Text  TABINDEX
  • 21. 21 Where are the tools? HTML Tidy  /opt/bin/tidy on borg The validator  http://validator.w3.org/  http://www.cs.dal.ca/validator?  http://www.cs.dal.ca/validate?  http://www.cs.dal.ca:81?
  • 22. 22 XHTML/HTML Examples XHTML element sampler XHTML sample template Both in the examples section of the website
  • 23. 23 For More About HTML RFC 1866 (HTML 2.0) (at faqs.org) Explains some of the philosophy behind HTML HTML 4.01 (at W3C) Last version of HTML XHTML 1.1 (at W3C) Modularized XHTML So many choices!…
  • 24. 24 Which Standard to Follow? Minimal standard for this course is HTML 4.01 Transitional Preferred standard is XHTML 1.0 or 1.1 See Picking a Rendering Mode  By Eric Meyer  In the Readings part of the Resources