SlideShare a Scribd company logo
1 of 25
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

What's hot

What's hot (17)

The Difference between HTML, XHTML & HTML5 for Beginners
The Difference between HTML, XHTML & HTML5 for BeginnersThe Difference between HTML, XHTML & HTML5 for Beginners
The Difference between HTML, XHTML & HTML5 for Beginners
 
Html tag html 10 x10 wen liu art 2830
Html tag html 10 x10 wen liu art 2830Html tag html 10 x10 wen liu art 2830
Html tag html 10 x10 wen liu art 2830
 
INTRODUCTION TO HTML
INTRODUCTION TO HTMLINTRODUCTION TO HTML
INTRODUCTION TO HTML
 
Class2
Class2Class2
Class2
 
Basic knowledge on html and dhtml
 Basic knowledge on html and dhtml Basic knowledge on html and dhtml
Basic knowledge on html and dhtml
 
Html & dhtml ppt
Html & dhtml pptHtml & dhtml ppt
Html & dhtml ppt
 
Basic html
Basic htmlBasic html
Basic html
 
Xhtml 2010
Xhtml 2010Xhtml 2010
Xhtml 2010
 
Html xhtml css
Html xhtml cssHtml xhtml css
Html xhtml css
 
1 introductin to HTML
1 introductin to HTML1 introductin to HTML
1 introductin to HTML
 
Tutorial on html
Tutorial on htmlTutorial on html
Tutorial on html
 
Html book2
Html book2Html book2
Html book2
 
What is xml
What is xmlWhat is xml
What is xml
 
GFGC CHIKKABASUR(HTML)
GFGC CHIKKABASUR(HTML)GFGC CHIKKABASUR(HTML)
GFGC CHIKKABASUR(HTML)
 
Design Tools Html Xhtml
Design Tools Html XhtmlDesign Tools Html Xhtml
Design Tools Html Xhtml
 
HTML 5: Syntax
HTML 5: SyntaxHTML 5: Syntax
HTML 5: Syntax
 
Html Presentation
Html PresentationHtml Presentation
Html Presentation
 

Similar to 1 basic html

1-Basic HTML.ppt
1-Basic HTML.ppt1-Basic HTML.ppt
1-Basic HTML.pptARUNVEVO1
 
1-Basic HTML.ppt
1-Basic HTML.ppt1-Basic HTML.ppt
1-Basic HTML.pptkavi806657
 
1-Basic HTML.ppt
1-Basic HTML.ppt1-Basic HTML.ppt
1-Basic HTML.pptkavi806657
 
Web Engineering UNIT III as per RGPV Syllabus
Web Engineering UNIT III as per RGPV SyllabusWeb Engineering UNIT III as per RGPV Syllabus
Web Engineering UNIT III as per RGPV SyllabusNANDINI SHARMA
 
Web engineering notes unit 3
Web engineering notes unit 3Web engineering notes unit 3
Web engineering notes unit 3inshu1890
 
web development.pdf
web development.pdfweb development.pdf
web development.pdfBagHarki
 
WT Module-1.pdf
WT Module-1.pdfWT Module-1.pdf
WT Module-1.pdfRamyaH11
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Modelchomas kandar
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Modelchomas kandar
 
Introduction to Web Architecture
Introduction to Web ArchitectureIntroduction to Web Architecture
Introduction to Web ArchitectureChamnap Chhorn
 
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.pptxArjayBalberan1
 
Web Services Part 1
Web Services Part 1Web Services Part 1
Web Services Part 1patinijava
 
Vskills angular js sample material
Vskills angular js sample materialVskills angular js sample material
Vskills angular js sample materialVskills
 
Ncp computer appls web tech asish
Ncp computer appls  web tech asishNcp computer appls  web tech asish
Ncp computer appls web tech asishNCP
 
Introduction to HTML- Week 3- HTMLSyntax
Introduction to HTML- Week 3- HTMLSyntaxIntroduction to HTML- Week 3- HTMLSyntax
Introduction to HTML- Week 3- HTMLSyntaxMohammadRafsunIslam
 
Introduction To Web (Mukesh Patel)
Introduction To Web (Mukesh Patel)Introduction To Web (Mukesh Patel)
Introduction To Web (Mukesh Patel)Tirthesh Ganatra
 

Similar to 1 basic html (20)

1-Basic HTML.ppt
1-Basic HTML.ppt1-Basic HTML.ppt
1-Basic HTML.ppt
 
1-Basic HTML.ppt
1-Basic HTML.ppt1-Basic HTML.ppt
1-Basic HTML.ppt
 
1-Basic HTML.ppt
1-Basic HTML.ppt1-Basic HTML.ppt
1-Basic HTML.ppt
 
1-Basic HTML.ppt
1-Basic HTML.ppt1-Basic HTML.ppt
1-Basic HTML.ppt
 
Web Engineering UNIT III as per RGPV Syllabus
Web Engineering UNIT III as per RGPV SyllabusWeb Engineering UNIT III as per RGPV Syllabus
Web Engineering UNIT III as per RGPV Syllabus
 
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
 
web development.pdf
web development.pdfweb development.pdf
web development.pdf
 
WT Module-1.pdf
WT Module-1.pdfWT Module-1.pdf
WT Module-1.pdf
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 
mst_unit1.pptx
mst_unit1.pptxmst_unit1.pptx
mst_unit1.pptx
 
Introduction to Web Architecture
Introduction to Web ArchitectureIntroduction to Web Architecture
Introduction to Web Architecture
 
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
 
Over view of html
Over view of htmlOver view of html
Over view of html
 
Web Services Part 1
Web Services Part 1Web Services Part 1
Web Services Part 1
 
Vskills angular js sample material
Vskills angular js sample materialVskills angular js sample material
Vskills angular js sample material
 
Ncp computer appls web tech asish
Ncp computer appls  web tech asishNcp computer appls  web tech asish
Ncp computer appls web tech asish
 
Introduction to HTML- Week 3- HTMLSyntax
Introduction to HTML- Week 3- HTMLSyntaxIntroduction to HTML- Week 3- HTMLSyntax
Introduction to HTML- Week 3- HTMLSyntax
 
Introduction To Web (Mukesh Patel)
Introduction To Web (Mukesh Patel)Introduction To Web (Mukesh Patel)
Introduction To Web (Mukesh Patel)
 

More from karan saini

Thestoryofmylife 140221061604-phpapp01
Thestoryofmylife 140221061604-phpapp01Thestoryofmylife 140221061604-phpapp01
Thestoryofmylife 140221061604-phpapp01karan saini
 
Thestoryofmylife 140221061604-phpapp01 (1)
Thestoryofmylife 140221061604-phpapp01 (1)Thestoryofmylife 140221061604-phpapp01 (1)
Thestoryofmylife 140221061604-phpapp01 (1)karan saini
 
Snrg2011 6.15.2.sta canney_suranofsky
Snrg2011 6.15.2.sta canney_suranofskySnrg2011 6.15.2.sta canney_suranofsky
Snrg2011 6.15.2.sta canney_suranofskykaran saini
 
Risc and cisc eugene clewlow
Risc and cisc   eugene clewlowRisc and cisc   eugene clewlow
Risc and cisc eugene clewlowkaran saini
 
Py4inf 05-iterations
Py4inf 05-iterationsPy4inf 05-iterations
Py4inf 05-iterationskaran saini
 
Py4inf 05-iterations (1)
Py4inf 05-iterations (1)Py4inf 05-iterations (1)
Py4inf 05-iterations (1)karan saini
 
Helen keller-1226880485154369-8
Helen keller-1226880485154369-8Helen keller-1226880485154369-8
Helen keller-1226880485154369-8karan saini
 
Final 121114041321-phpapp01
Final 121114041321-phpapp01Final 121114041321-phpapp01
Final 121114041321-phpapp01karan saini
 

More from karan saini (20)

Topology ppt
Topology pptTopology ppt
Topology ppt
 
Tibor
TiborTibor
Tibor
 
Thestoryofmylife 140221061604-phpapp01
Thestoryofmylife 140221061604-phpapp01Thestoryofmylife 140221061604-phpapp01
Thestoryofmylife 140221061604-phpapp01
 
Thestoryofmylife 140221061604-phpapp01 (1)
Thestoryofmylife 140221061604-phpapp01 (1)Thestoryofmylife 140221061604-phpapp01 (1)
Thestoryofmylife 140221061604-phpapp01 (1)
 
Snrg2011 6.15.2.sta canney_suranofsky
Snrg2011 6.15.2.sta canney_suranofskySnrg2011 6.15.2.sta canney_suranofsky
Snrg2011 6.15.2.sta canney_suranofsky
 
Science
ScienceScience
Science
 
Risc and cisc eugene clewlow
Risc and cisc   eugene clewlowRisc and cisc   eugene clewlow
Risc and cisc eugene clewlow
 
Py4inf 05-iterations
Py4inf 05-iterationsPy4inf 05-iterations
Py4inf 05-iterations
 
Py4inf 05-iterations (1)
Py4inf 05-iterations (1)Py4inf 05-iterations (1)
Py4inf 05-iterations (1)
 
Periodic table1
Periodic table1Periodic table1
Periodic table1
 
Maths project
Maths projectMaths project
Maths project
 
Lecturespecial
LecturespecialLecturespecial
Lecturespecial
 
Lecture 5
Lecture 5Lecture 5
Lecture 5
 
Lcd monitors
Lcd monitorsLcd monitors
Lcd monitors
 
Lab3
Lab3Lab3
Lab3
 
L11cs2110sp13
L11cs2110sp13L11cs2110sp13
L11cs2110sp13
 
Helen keller-1226880485154369-8
Helen keller-1226880485154369-8Helen keller-1226880485154369-8
Helen keller-1226880485154369-8
 
Hardware
HardwareHardware
Hardware
 
Gsm cdma1
Gsm cdma1Gsm cdma1
Gsm cdma1
 
Final 121114041321-phpapp01
Final 121114041321-phpapp01Final 121114041321-phpapp01
Final 121114041321-phpapp01
 

Recently uploaded

CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024The Digital Insurer
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdflior mazor
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco
 

Recently uploaded (20)

CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 

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

  1. ‘ ’s is &amp;nbsp; (the non-breaking space)