Beginning of HTML Document

Shenghua ZHONGDepartment of Computing

The Hong Kong Polytechnic Universityzsh696@gmail.com

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)