Transcript Lab 7 - The Hong Kong Polytechnic University

Lab of COMP 102
Feb. 22-23, 2012
Beginning of HTML
Document
Shenghua ZHONG
Department of Computing
The Hong Kong Polytechnic University
[email protected]
Outline






What is HTML
How to learn HTML
Characters of HTML
Create HTML Document
Components of HTML
Comments and Document Type Declaration
2
Outline






What is HTML
How to learn HTML
Characters of HTML
Create HTML Document
Components of HTML
Comments and Document Type Declaration
3
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
4
One Version, Three Flavors

Three “flavors” of XHTML

Strict



Transitional



Most stringent in its rules
Deprecated features are forbidden outright
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
5
Outline






What is HTML
How to learn HTML
Characters of HTML
Create HTML Document
Components of HTML
Comments and Document Type Declaration
6
How to Learn HTML

Learn from Internet




Learn from practice



http://www.w3.org
http://www.web-source.net/html_codes_chart.htm
http://www.htmlcodes.me/
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.
7
Outline






What is HTML
How to learn HTML
Characters of HTML
Create HTML Document
Components of HTML
Comments and Document Type Declaration
8
Characters of HTML

Why need HTML



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 (http://www.w3.org)
9
Outline






What is HTML
How to learn HTML
Characters of HTML
Create HTML Document
Components of HTML
Comments and Document Type Declaration
10
Create HTML Document

Choosing an HTML Editor


Text editors: notepad (Windows), vi or emacs (Linux), TextEdit
(Mac)
You See Is What You Get (WYSIWYG) editors


Choosing a Web Browser




KompoZer , CKEditor, Dreamweaver
Microsoft Internet Explorer (IE)
Apple Safari (http://www.apple.com/safari/)
Mozilla Firefox (http://www.mozilla.com/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: http://en.wikipedia.org/wiki/Web_hosting
11
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
http://www.comp.polyu.edu.hk/~<your COMP ID>
e.g. http://www4.comp.polyu.edu.hk/~csshzhong/
12
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



Hostname



Indicates sets of rules that dictate the movement of data over the Internet
The web uses HyperText Transfer Protocol
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
13
Validating Your Documents

W3C has created an online validation tool

Validation address


http://validator.w3.org/
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
14
Outline






What is HTML
How to learn HTML
Characters of HTML
Create HTML Document
Components of HTML
Comments and Document Type Declaration
15
The Parts of Markup: Tags,
Elements, and Attributes

Basic components of HTML

Tags



Element


The linchpin of HTML
Surrounded by angle brackets (< and >) to distinguish them from ordinary
text (the tag name must be lowercase in XHTML)
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
16
Tags in HTML

What is Tag



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”


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
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.
17
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
18
Comments of HTML Document

Comments of HTML



Specialized tag structure of HTML



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
Starts with <!--, as the opening of comment, and ends with -->
Web browsers not render any content or elements that occur
between those markers
Example
<!-- Use an h2 for subheadings -->
<h2>Adding Comments</h2>
<!-- Hiding this for testing
<h2>Adding Comments</h2>
End hiding -->
19
Outline






What is HTML
How to learn HTML
Characters of HTML
Create HTML Document
Components of HTML
Comments and Document Type Declaration
20
Document Type Declaration
(Doctype)

Three corresponding doctypes
 XHTML 1.0 Strict:


XHTML 1.0 Transitional:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN“
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN“
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
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
21