1
WWW/HTML Basics
CS 4173
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, DIVDIV, etc.
 CODE, Q, H1, SPANSPAN, 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
25
Here endeth the lesson

More Related Content

PPT
basic html tutorial
PPTX
Web topic 2 html
PPT
Dynamic html (#1)
PDF
3. Web Technology Advanced HTML
PPS
PPTX
PPTX
Html9
PPTX
Html tag
basic html tutorial
Web topic 2 html
Dynamic html (#1)
3. Web Technology Advanced HTML
Html9
Html tag

What's hot (17)

PPTX
The Difference between HTML, XHTML & HTML5 for Beginners
PPTX
Html tag html 10 x10 wen liu art 2830
DOCX
INTRODUCTION TO HTML
PPTX
Class2
PPTX
Basic knowledge on html and dhtml
PPTX
Html & dhtml ppt
PPT
Basic html
PPT
Xhtml 2010
PPT
Html xhtml css
PPTX
1 introductin to HTML
PPTX
Tutorial on html
PPT
Html book2
PPTX
What is xml
PPTX
GFGC CHIKKABASUR(HTML)
PPT
Design Tools Html Xhtml
PPTX
HTML 5: Syntax
PDF
Html Presentation
The Difference between HTML, XHTML & HTML5 for Beginners
Html tag html 10 x10 wen liu art 2830
INTRODUCTION TO HTML
Class2
Basic knowledge on html and dhtml
Html & dhtml ppt
Basic html
Xhtml 2010
Html xhtml css
1 introductin to HTML
Tutorial on html
Html book2
What is xml
GFGC CHIKKABASUR(HTML)
Design Tools Html Xhtml
HTML 5: Syntax
Html Presentation
Ad

Similar to 1 basic html (20)

PPT
1-Basic HTML.ppt
PPT
1-Basic HTML.ppt
PPT
1-Basic HTML , Introduction to Basic HTML Concepts
PPT
1-Basic HTML.ppt
PPT
1-Basic HTML.ppt
PPT
1-Basic HTML.ppthjhjhjjjjjjjjjjjjjjjjjjjjjjjj
PDF
Web Engineering UNIT III as per RGPV Syllabus
PDF
Web engineering notes unit 3
PPT
8023.ppt
PPTX
WebDedignDevelopment Chapter E4 Week 4.pptx
PDF
web development.pdf
PDF
WT Module-1.pdf
PPT
Document Object Model
PPT
Document Object Model
PPTX
mst_unit1.pptx
PPTX
Introduction to Web Architecture
PPTX
Appdev appdev appdev app devAPPDEV 1.2.pptx
PPSX
Over view of html
PPT
Web Services Part 1
PDF
Vskills angular js sample material
1-Basic HTML.ppt
1-Basic HTML.ppt
1-Basic HTML , Introduction to Basic HTML Concepts
1-Basic HTML.ppt
1-Basic HTML.ppt
1-Basic HTML.ppthjhjhjjjjjjjjjjjjjjjjjjjjjjjj
Web Engineering UNIT III as per RGPV Syllabus
Web engineering notes unit 3
8023.ppt
WebDedignDevelopment Chapter E4 Week 4.pptx
web development.pdf
WT Module-1.pdf
Document Object Model
Document Object Model
mst_unit1.pptx
Introduction to Web Architecture
Appdev appdev appdev app devAPPDEV 1.2.pptx
Over view of html
Web Services Part 1
Vskills angular js sample material
Ad

More from karan saini (20)

PPT
Topology ppt
PPT
PPTX
Thestoryofmylife 140221061604-phpapp01
PPTX
Thestoryofmylife 140221061604-phpapp01 (1)
PPT
Snrg2011 6.15.2.sta canney_suranofsky
PPTX
Science
PPT
Risc and cisc eugene clewlow
PPT
Py4inf 05-iterations
PPT
Py4inf 05-iterations (1)
PPT
Periodic table1
PPTX
Maths project
PPT
Lecturespecial
PPT
Lecture 5
PPT
Lcd monitors
PPT
PPT
L11cs2110sp13
PPT
Helen keller-1226880485154369-8
PPT
Hardware
PPT
Gsm cdma1
PPTX
Final 121114041321-phpapp01
Topology ppt
Thestoryofmylife 140221061604-phpapp01
Thestoryofmylife 140221061604-phpapp01 (1)
Snrg2011 6.15.2.sta canney_suranofsky
Science
Risc and cisc eugene clewlow
Py4inf 05-iterations
Py4inf 05-iterations (1)
Periodic table1
Maths project
Lecturespecial
Lecture 5
Lcd monitors
L11cs2110sp13
Helen keller-1226880485154369-8
Hardware
Gsm cdma1
Final 121114041321-phpapp01

Recently uploaded (20)

PDF
Two-dimensional Klein-Gordon and Sine-Gordon numerical solutions based on dee...
PPTX
2018-HIPAA-Renewal-Training for executives
PPT
Galois Field Theory of Risk: A Perspective, Protocol, and Mathematical Backgr...
PDF
The influence of sentiment analysis in enhancing early warning system model f...
PDF
A comparative study of natural language inference in Swahili using monolingua...
PPT
Geologic Time for studying geology for geologist
PDF
Five Habits of High-Impact Board Members
PDF
Enhancing emotion recognition model for a student engagement use case through...
PDF
Architecture types and enterprise applications.pdf
PDF
Abstractive summarization using multilingual text-to-text transfer transforme...
PPTX
Benefits of Physical activity for teenagers.pptx
PDF
1 - Historical Antecedents, Social Consideration.pdf
PPTX
Microsoft Excel 365/2024 Beginner's training
PPTX
MicrosoftCybserSecurityReferenceArchitecture-April-2025.pptx
PDF
Zenith AI: Advanced Artificial Intelligence
PDF
A review of recent deep learning applications in wood surface defect identifi...
PDF
From MVP to Full-Scale Product A Startup’s Software Journey.pdf
PDF
Consumable AI The What, Why & How for Small Teams.pdf
PDF
TrustArc Webinar - Click, Consent, Trust: Winning the Privacy Game
PPT
Module 1.ppt Iot fundamentals and Architecture
Two-dimensional Klein-Gordon and Sine-Gordon numerical solutions based on dee...
2018-HIPAA-Renewal-Training for executives
Galois Field Theory of Risk: A Perspective, Protocol, and Mathematical Backgr...
The influence of sentiment analysis in enhancing early warning system model f...
A comparative study of natural language inference in Swahili using monolingua...
Geologic Time for studying geology for geologist
Five Habits of High-Impact Board Members
Enhancing emotion recognition model for a student engagement use case through...
Architecture types and enterprise applications.pdf
Abstractive summarization using multilingual text-to-text transfer transforme...
Benefits of Physical activity for teenagers.pptx
1 - Historical Antecedents, Social Consideration.pdf
Microsoft Excel 365/2024 Beginner's training
MicrosoftCybserSecurityReferenceArchitecture-April-2025.pptx
Zenith AI: Advanced Artificial Intelligence
A review of recent deep learning applications in wood surface defect identifi...
From MVP to Full-Scale Product A Startup’s Software Journey.pdf
Consumable AI The What, Why & How for Small Teams.pdf
TrustArc Webinar - Click, Consent, Trust: Winning the Privacy Game
Module 1.ppt Iot fundamentals and Architecture

1 basic html

  • 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, DIVDIV, etc.  CODE, Q, H1, SPANSPAN, 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

Editor's Notes

  • #15: ‘ ’s is &amp;nbsp; (the non-breaking space)