beginning of html document shenghua zhong department of computing the hong kong polytechnic...
TRANSCRIPT
Beginning of HTML Document
Shenghua ZHONGDepartment of Computing
The Hong Kong Polytechnic [email protected]
Lab of COMP 102 Feb. 22-23, 2012
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
Outline
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
Definition and History
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
5
One Version, Three Flavors
What is HTML How to learn HTML Characters of HTML Create HTML Document Components of HTML Comments and Document Type Declaration
6
Outline
Learn from Internet http://www.w3.org http://www.web-source.net/html_codes_chart.htm http://www.htmlcodes.me/
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.
7
How to Learn HTML
What is HTML How to learn HTML Characters of HTML Create HTML Document Components of HTML Comments and Document Type Declaration
8
Outline
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
Characters of HTML
What is HTML How to learn HTML Characters of HTML Create HTML Document Components of HTML Comments and Document Type Declaration
10
Outline
Choosing an HTML Editor 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 (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
Create HTML Document
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
Set Up A Personal Webpage
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
13
Introducing the URL
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
Validating Your Documents
What is HTML How to learn HTML Characters of HTML Create HTML Document Components of HTML Comments and Document Type Declaration
15
Outline
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
16
The Parts of Markup: Tags, Elements, and Attributes
What is 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 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
17
Tags in HTML
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.
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
Some Characters about Tags
Comments 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 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
19
Comments of HTML Document
<!-- Use an h2 for subheadings --><h2>Adding Comments</h2>
<!-- Hiding this for testing<h2>Adding Comments</h2>End hiding -->
What is HTML How to learn HTML Characters of HTML Create HTML Document Components of HTML Comments and Document Type Declaration
20
Outline
Three corresponding doctypes XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
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 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
Document Type Declaration (Doctype)