SlideShare a Scribd company logo
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, 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
25
Here endeth the lesson

More Related Content

Similar to 1-Basic HTML , Introduction to Basic HTML Concepts

Web engineering notes unit 3
Web engineering notes unit 3Web engineering notes unit 3
Web engineering notes unit 3
inshu1890
 
8023.ppt
8023.ppt8023.ppt
8023.ppt
PoojaTripathi92
 
WT Module-1.pdf
WT Module-1.pdfWT Module-1.pdf
WT Module-1.pdf
RamyaH11
 
web development.pdf
web development.pdfweb development.pdf
web development.pdf
BagHarki
 
Web topic 2 html
Web topic 2  htmlWeb topic 2  html
Web topic 2 htmlCK Yang
 
mst_unit1.pptx
mst_unit1.pptxmst_unit1.pptx
mst_unit1.pptx
michaelaaron25322
 
Over view of html
Over view of htmlOver view of html
Over view of html
Keith Borgonia Manatad
 
Ncp computer appls web tech asish
Ncp computer appls  web tech asishNcp computer appls  web tech asish
Ncp computer appls web tech asish
NCP
 
Appdev appdev appdev app devAPPDEV 1.2.pptx
Appdev appdev appdev app devAPPDEV 1.2.pptxAppdev appdev appdev app devAPPDEV 1.2.pptx
Appdev appdev appdev app devAPPDEV 1.2.pptx
ArjayBalberan1
 
Vskills angular js sample material
Vskills angular js sample materialVskills angular js sample material
Vskills angular js sample material
Vskills
 
Web Services Part 1
Web Services Part 1Web Services Part 1
Web Services Part 1patinijava
 
Introduction to Web Architecture
Introduction to Web ArchitectureIntroduction to Web Architecture
Introduction to Web ArchitectureChamnap Chhorn
 
Introduction To Web (Mukesh Patel)
Introduction To Web (Mukesh Patel)Introduction To Web (Mukesh Patel)
Introduction To Web (Mukesh Patel)
Tirthesh Ganatra
 
Introduction to HTML- Week 3- HTMLSyntax
Introduction to HTML- Week 3- HTMLSyntaxIntroduction to HTML- Week 3- HTMLSyntax
Introduction to HTML- Week 3- HTMLSyntax
MohammadRafsunIslam
 
Dynamic html (#1)
Dynamic  html (#1)Dynamic  html (#1)
Dynamic html (#1)
Haider Habeeb
 
Html book2
Html book2Html book2
Html book2
Diksha Garg
 
Html presantation
Html presantationHtml presantation
Html presantation
Adityaroy110
 
Web Concepts - an introduction - introduction
Web Concepts - an introduction - introductionWeb Concepts - an introduction - introduction
Web Concepts - an introduction - introduction
clement swarnappa
 
DevNext - Web Programming Concepts Using Asp Net
DevNext - Web Programming Concepts Using Asp NetDevNext - Web Programming Concepts Using Asp Net
DevNext - Web Programming Concepts Using Asp NetAdil Mughal
 
What is html xml and xhtml
What is html xml and xhtmlWhat is html xml and xhtml
What is html xml and xhtml
FkdiMl
 

Similar to 1-Basic HTML , Introduction to Basic HTML Concepts (20)

Web engineering notes unit 3
Web engineering notes unit 3Web engineering notes unit 3
Web engineering notes unit 3
 
8023.ppt
8023.ppt8023.ppt
8023.ppt
 
WT Module-1.pdf
WT Module-1.pdfWT Module-1.pdf
WT Module-1.pdf
 
web development.pdf
web development.pdfweb development.pdf
web development.pdf
 
Web topic 2 html
Web topic 2  htmlWeb topic 2  html
Web topic 2 html
 
mst_unit1.pptx
mst_unit1.pptxmst_unit1.pptx
mst_unit1.pptx
 
Over view of html
Over view of htmlOver view of html
Over view of html
 
Ncp computer appls web tech asish
Ncp computer appls  web tech asishNcp computer appls  web tech asish
Ncp computer appls web tech asish
 
Appdev appdev appdev app devAPPDEV 1.2.pptx
Appdev appdev appdev app devAPPDEV 1.2.pptxAppdev appdev appdev app devAPPDEV 1.2.pptx
Appdev appdev appdev app devAPPDEV 1.2.pptx
 
Vskills angular js sample material
Vskills angular js sample materialVskills angular js sample material
Vskills angular js sample material
 
Web Services Part 1
Web Services Part 1Web Services Part 1
Web Services Part 1
 
Introduction to Web Architecture
Introduction to Web ArchitectureIntroduction to Web Architecture
Introduction to Web Architecture
 
Introduction To Web (Mukesh Patel)
Introduction To Web (Mukesh Patel)Introduction To Web (Mukesh Patel)
Introduction To Web (Mukesh Patel)
 
Introduction to HTML- Week 3- HTMLSyntax
Introduction to HTML- Week 3- HTMLSyntaxIntroduction to HTML- Week 3- HTMLSyntax
Introduction to HTML- Week 3- HTMLSyntax
 
Dynamic html (#1)
Dynamic  html (#1)Dynamic  html (#1)
Dynamic html (#1)
 
Html book2
Html book2Html book2
Html book2
 
Html presantation
Html presantationHtml presantation
Html presantation
 
Web Concepts - an introduction - introduction
Web Concepts - an introduction - introductionWeb Concepts - an introduction - introduction
Web Concepts - an introduction - introduction
 
DevNext - Web Programming Concepts Using Asp Net
DevNext - Web Programming Concepts Using Asp NetDevNext - Web Programming Concepts Using Asp Net
DevNext - Web Programming Concepts Using Asp Net
 
What is html xml and xhtml
What is html xml and xhtmlWhat is html xml and xhtml
What is html xml and xhtml
 

More from DrZeeshanBhatti

Oracle SQL - Aggregating Data Les 05.ppt
Oracle SQL - Aggregating Data Les 05.pptOracle SQL - Aggregating Data Les 05.ppt
Oracle SQL - Aggregating Data Les 05.ppt
DrZeeshanBhatti
 
Les04 Displaying Data from Multiple Tables.ppt
Les04 Displaying Data from Multiple Tables.pptLes04 Displaying Data from Multiple Tables.ppt
Les04 Displaying Data from Multiple Tables.ppt
DrZeeshanBhatti
 
Les03 Single Row Functions in Oracle and SQL.ppt
Les03 Single Row Functions in Oracle and SQL.pptLes03 Single Row Functions in Oracle and SQL.ppt
Les03 Single Row Functions in Oracle and SQL.ppt
DrZeeshanBhatti
 
Les02 Restricting and Sorting Data using SQL.ppt
Les02 Restricting and Sorting Data using SQL.pptLes02 Restricting and Sorting Data using SQL.ppt
Les02 Restricting and Sorting Data using SQL.ppt
DrZeeshanBhatti
 
Les01 Writing BAsic SQL SELECT Statement.ppt
Les01 Writing BAsic SQL SELECT Statement.pptLes01 Writing BAsic SQL SELECT Statement.ppt
Les01 Writing BAsic SQL SELECT Statement.ppt
DrZeeshanBhatti
 
Introduction to Oracle SQL Database Systems.ppt
Introduction to Oracle SQL Database Systems.pptIntroduction to Oracle SQL Database Systems.ppt
Introduction to Oracle SQL Database Systems.ppt
DrZeeshanBhatti
 

More from DrZeeshanBhatti (6)

Oracle SQL - Aggregating Data Les 05.ppt
Oracle SQL - Aggregating Data Les 05.pptOracle SQL - Aggregating Data Les 05.ppt
Oracle SQL - Aggregating Data Les 05.ppt
 
Les04 Displaying Data from Multiple Tables.ppt
Les04 Displaying Data from Multiple Tables.pptLes04 Displaying Data from Multiple Tables.ppt
Les04 Displaying Data from Multiple Tables.ppt
 
Les03 Single Row Functions in Oracle and SQL.ppt
Les03 Single Row Functions in Oracle and SQL.pptLes03 Single Row Functions in Oracle and SQL.ppt
Les03 Single Row Functions in Oracle and SQL.ppt
 
Les02 Restricting and Sorting Data using SQL.ppt
Les02 Restricting and Sorting Data using SQL.pptLes02 Restricting and Sorting Data using SQL.ppt
Les02 Restricting and Sorting Data using SQL.ppt
 
Les01 Writing BAsic SQL SELECT Statement.ppt
Les01 Writing BAsic SQL SELECT Statement.pptLes01 Writing BAsic SQL SELECT Statement.ppt
Les01 Writing BAsic SQL SELECT Statement.ppt
 
Introduction to Oracle SQL Database Systems.ppt
Introduction to Oracle SQL Database Systems.pptIntroduction to Oracle SQL Database Systems.ppt
Introduction to Oracle SQL Database Systems.ppt
 

Recently uploaded

Enhancing Research Orchestration Capabilities at ORNL.pdf
Enhancing Research Orchestration Capabilities at ORNL.pdfEnhancing Research Orchestration Capabilities at ORNL.pdf
Enhancing Research Orchestration Capabilities at ORNL.pdf
Globus
 
Lecture 1 Introduction to games development
Lecture 1 Introduction to games developmentLecture 1 Introduction to games development
Lecture 1 Introduction to games development
abdulrafaychaudhry
 
Cyaniclab : Software Development Agency Portfolio.pdf
Cyaniclab : Software Development Agency Portfolio.pdfCyaniclab : Software Development Agency Portfolio.pdf
Cyaniclab : Software Development Agency Portfolio.pdf
Cyanic lab
 
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...
Juraj Vysvader
 
Webinar: Salesforce Document Management 2.0 - Smarter, Faster, Better
Webinar: Salesforce Document Management 2.0 - Smarter, Faster, BetterWebinar: Salesforce Document Management 2.0 - Smarter, Faster, Better
Webinar: Salesforce Document Management 2.0 - Smarter, Faster, Better
XfilesPro
 
Designing for Privacy in Amazon Web Services
Designing for Privacy in Amazon Web ServicesDesigning for Privacy in Amazon Web Services
Designing for Privacy in Amazon Web Services
KrzysztofKkol1
 
Visitor Management System in India- Vizman.app
Visitor Management System in India- Vizman.appVisitor Management System in India- Vizman.app
Visitor Management System in India- Vizman.app
NaapbooksPrivateLimi
 
Globus Compute Introduction - GlobusWorld 2024
Globus Compute Introduction - GlobusWorld 2024Globus Compute Introduction - GlobusWorld 2024
Globus Compute Introduction - GlobusWorld 2024
Globus
 
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
Shahin Sheidaei
 
Developing Distributed High-performance Computing Capabilities of an Open Sci...
Developing Distributed High-performance Computing Capabilities of an Open Sci...Developing Distributed High-performance Computing Capabilities of an Open Sci...
Developing Distributed High-performance Computing Capabilities of an Open Sci...
Globus
 
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoamOpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam
takuyayamamoto1800
 
Explore Modern SharePoint Templates for 2024
Explore Modern SharePoint Templates for 2024Explore Modern SharePoint Templates for 2024
Explore Modern SharePoint Templates for 2024
Sharepoint Designs
 
Globus Compute wth IRI Workflows - GlobusWorld 2024
Globus Compute wth IRI Workflows - GlobusWorld 2024Globus Compute wth IRI Workflows - GlobusWorld 2024
Globus Compute wth IRI Workflows - GlobusWorld 2024
Globus
 
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?
XfilesPro
 
BoxLang: Review our Visionary Licenses of 2024
BoxLang: Review our Visionary Licenses of 2024BoxLang: Review our Visionary Licenses of 2024
BoxLang: Review our Visionary Licenses of 2024
Ortus Solutions, Corp
 
GlobusWorld 2024 Opening Keynote session
GlobusWorld 2024 Opening Keynote sessionGlobusWorld 2024 Opening Keynote session
GlobusWorld 2024 Opening Keynote session
Globus
 
Corporate Management | Session 3 of 3 | Tendenci AMS
Corporate Management | Session 3 of 3 | Tendenci AMSCorporate Management | Session 3 of 3 | Tendenci AMS
Corporate Management | Session 3 of 3 | Tendenci AMS
Tendenci - The Open Source AMS (Association Management Software)
 
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...
Anthony Dahanne
 
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdfDominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
AMB-Review
 
Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...
Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...
Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...
informapgpstrackings
 

Recently uploaded (20)

Enhancing Research Orchestration Capabilities at ORNL.pdf
Enhancing Research Orchestration Capabilities at ORNL.pdfEnhancing Research Orchestration Capabilities at ORNL.pdf
Enhancing Research Orchestration Capabilities at ORNL.pdf
 
Lecture 1 Introduction to games development
Lecture 1 Introduction to games developmentLecture 1 Introduction to games development
Lecture 1 Introduction to games development
 
Cyaniclab : Software Development Agency Portfolio.pdf
Cyaniclab : Software Development Agency Portfolio.pdfCyaniclab : Software Development Agency Portfolio.pdf
Cyaniclab : Software Development Agency Portfolio.pdf
 
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...
 
Webinar: Salesforce Document Management 2.0 - Smarter, Faster, Better
Webinar: Salesforce Document Management 2.0 - Smarter, Faster, BetterWebinar: Salesforce Document Management 2.0 - Smarter, Faster, Better
Webinar: Salesforce Document Management 2.0 - Smarter, Faster, Better
 
Designing for Privacy in Amazon Web Services
Designing for Privacy in Amazon Web ServicesDesigning for Privacy in Amazon Web Services
Designing for Privacy in Amazon Web Services
 
Visitor Management System in India- Vizman.app
Visitor Management System in India- Vizman.appVisitor Management System in India- Vizman.app
Visitor Management System in India- Vizman.app
 
Globus Compute Introduction - GlobusWorld 2024
Globus Compute Introduction - GlobusWorld 2024Globus Compute Introduction - GlobusWorld 2024
Globus Compute Introduction - GlobusWorld 2024
 
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
 
Developing Distributed High-performance Computing Capabilities of an Open Sci...
Developing Distributed High-performance Computing Capabilities of an Open Sci...Developing Distributed High-performance Computing Capabilities of an Open Sci...
Developing Distributed High-performance Computing Capabilities of an Open Sci...
 
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoamOpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam
OpenFOAM solver for Helmholtz equation, helmholtzFoam / helmholtzBubbleFoam
 
Explore Modern SharePoint Templates for 2024
Explore Modern SharePoint Templates for 2024Explore Modern SharePoint Templates for 2024
Explore Modern SharePoint Templates for 2024
 
Globus Compute wth IRI Workflows - GlobusWorld 2024
Globus Compute wth IRI Workflows - GlobusWorld 2024Globus Compute wth IRI Workflows - GlobusWorld 2024
Globus Compute wth IRI Workflows - GlobusWorld 2024
 
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?
How Does XfilesPro Ensure Security While Sharing Documents in Salesforce?
 
BoxLang: Review our Visionary Licenses of 2024
BoxLang: Review our Visionary Licenses of 2024BoxLang: Review our Visionary Licenses of 2024
BoxLang: Review our Visionary Licenses of 2024
 
GlobusWorld 2024 Opening Keynote session
GlobusWorld 2024 Opening Keynote sessionGlobusWorld 2024 Opening Keynote session
GlobusWorld 2024 Opening Keynote session
 
Corporate Management | Session 3 of 3 | Tendenci AMS
Corporate Management | Session 3 of 3 | Tendenci AMSCorporate Management | Session 3 of 3 | Tendenci AMS
Corporate Management | Session 3 of 3 | Tendenci AMS
 
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...
 
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdfDominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
Dominate Social Media with TubeTrivia AI’s Addictive Quiz Videos.pdf
 
Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...
Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...
Field Employee Tracking System| MiTrack App| Best Employee Tracking Solution|...
 

1-Basic HTML , Introduction to Basic HTML Concepts

  • 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