1. Beginning of HTML Document
Lab of COMP Feb , 2012
Beginning of HTML Document
Shenghua ZHONG
Department of Computing
The Hong Kong Polytechnic University

2. Outline What is HTML How to learn HTML Characters of HTML
Create HTML Document
Components of HTML
Comments and Document Type Declaration

3. Outline What is HTML How to learn HTML Characters of HTML
Create HTML Document
Components of HTML
Comments and Document Type Declaration

4. Definition and History
What is HTML
HyperText Markup Language (HTML) is the main markup language for web pages
HTML elements are the basic building-blocks of webpages
History of HTML
First publicly available description of HTML was called "HTML Tags”
First mentioned on the Internet by Berners-Lee in late 1991
HTML 4.01, was to be the final, complete specification for the HTML language
A new kid called eXtensible HTML, or XHTML, joined the class in 2000
HTML5 is intended to subsume not only HTML 4, but XHTML 1 and DOM Level 2 HTML as well, is still under development

5. One Version, Three Flavors
Three “flavors” of XHTML
Strict
Most stringent in its rules
Deprecated features are forbidden outright
Transitional
A bit more relaxed than Strict
Allowing some outdated features to still linger
Frameset
only to situations when frames are being used to lay out a web page

6. Outline What is HTML How to learn HTML Characters of HTML
Create HTML Document
Components of HTML
Comments and Document Type Declaration

7. How to Learn HTML Learn from Internet Learn from practice
Learn from practice
Text ->HTML
HTML WYSIWYG editor, For example: KompoZer and CKEditor , Dreamweaver
Learn from book
[1] “Beginning Html With CSS and XHTML : Modern Guide and Reference” , David Schultz and Craig Cook, 2007.
[2] “Head first HTML with CSS & XHTML by Elisabeth”, Freeman, Eric Freeman, 2006.

8. Outline What is HTML How to learn HTML Characters of HTML
Create HTML Document
Components of HTML
Comments and Document Type Declaration

9. Characters of HTML Why need HTML Freedom and Rule
HTML is the computer coding language used to convert ordinary text into active text for display and use on the web
HTML give plain unstructured text the sort of structure human beings rely on to read it
Freedom and Rule
Freedom
A free, open standard, not owned or controlled by any company or individual
No license to purchase or specialized software required to author your own HTML documents
Anyone is free to create and publish web pages
Rule
Certain rules need to be followed when you author documents in HTML
Technical specifications for all official versions are freely available from the W3C at its website (

10. Outline What is HTML How to learn HTML Characters of HTML
Create HTML Document
Components of HTML
Comments and Document Type Declaration

11. Create HTML Document Choosing an HTML Editor Choosing a Web Browser
Text editors: notepad (Windows), vi or emacs (Linux), TextEdit (Mac)
You See Is What You Get (WYSIWYG) editors
KompoZer , CKEditor, Dreamweaver
Choosing a Web Browser
Microsoft Internet Explorer (IE)
Apple Safari (
Mozilla Firefox (
Hosting Your Web Site
Web space provided by your Internet service provider (ISP)
Free web space, but are often supplemented by advertising
Paying for web hosting, as little as $10 (US) per month
More information:

12. Set Up A Personal Webpage
All COMP students may set up their personal homepages
Steps of set up homepage
Donwload a free shareware “winscp”
Connect to your personal directory by winscp
Host name:
rocket.comp.polyu.edu.hk (in comp network)
csdoor.comp.polyu.edu.hk (outside comp network)
User name: your COMP ID (csxxxxxx, such as: csshzhong), password: your COMP password
Create a directory named "public_html" in /webhome/csxxxxxx/
Put your homepage file to the folder /webhome/csxxxxxx/public_html
Change the permissions of the file and folder, make the html files readable to others
Visit your personal webpage by URL
COMP ID>
e.g.

13. Introducing the URL
Every file or document available on the web resides at a unique address called a Uniform Resource Locator (URL)
The Components of a URL
Protocol
Indicates sets of rules that dictate the movement of data over the Internet
The web uses HyperText Transfer Protocol
Hostname
The name of the site from which the browser will retrieve the file
The web server’s true address is a unique numeric Internet Protocol (IP) address
Path
Specify the directory on the web server that holds the requested document

14. Validating Your Documents
W3C has created an online validation tool
Validation address
Validation method
Enter the location of a page on the web
Upload a file from your computer
Paste your markup directly into a form on the website

15. Outline What is HTML How to learn HTML Characters of HTML
Create HTML Document
Components of HTML
Comments and Document Type Declaration

16. The Parts of Markup: Tags, Elements, and Attributes
Basic components of HTML
Tags
The linchpin of HTML
Surrounded by angle brackets (< and >) to distinguish them from ordinary text (the tag name must be lowercase in XHTML)
Element
The twin tags and everything between them
Attribute
Element’s opening tag can carry attributes to provide more information about element
An attribute consists of an attribute name followed by an attribute value

17. Tags in HTML What is Tag Why utilize Tag Why call it “Tag” For example
Tag is the encoded markers of HTML
Tag is surrounded and differentiated bits of text, which indicates how to “mark up” the text by the function and purpose
Why utilize Tag
Tags can be interpreted by computer software
Tags themselves are not displayed and are distinct from the actual content they envelop
Why call it “Tag”
Just as a price tag displays the cost of an item
For example
The text between <html> and </html> describes the web page.
The text between <body> and </body> is the visible page content.
The markup text '<title>Hello HTML</title>' defines the browser tab title.
The beginning is indicated by the opening tag, <p>, and the paragraph ends with a </p> closing tag.

18. Some Characters about Tags
Nesting elements
Elements can be nested, each one residing within its containing element
Each closing tag appears in the correct order to close an inner element before close its container
<p><em>Hello, world!</p></em>
White space
Ignore any extra line breaks and carriage returns
Collapse multiple spaces into a single space

19. Comments of HTML Document
Notes are not displayed in a browser but can read when viewing the original markup
Comments can include background, instruction on how to update a document, or a recorded history of changes
Specialized tag structure of HTML
Starts with <!--, as the opening of comment, and ends with -->
Web browsers not render any content or elements that occur between those markers
Example
<!-- Hiding this for testing
<h2>Adding Comments</h2>
End hiding -->
<!-- Use an h2 for subheadings -->
<h2>Adding Comments</h2>

20. Outline What is HTML How to learn HTML Characters of HTML
Create HTML Document
Components of HTML
Comments and Document Type Declaration

21. Document Type Declaration (Doctype)
Three corresponding doctypes
XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN“ "
XHTML 1.0 Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ "
XHTML 1.0 Frameset:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN“ "
The advantage of Doctype
A full, correct doctype tells a modern browser the entire document is well formed and authored according to web standards
The browser can render the page in a mode intended to comply with the established standards for markup and CSS
The mode known as compliance mode or strict mode