Beginning of HTML Document

Lab of COMP 102Feb. 22-23, 2012 Beginning of HTML Document Shenghua ZHONG Department of Computing The Hong Kong Polytechnic University zsh696@gmail.com

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

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

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

How to Learn HTML • 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.

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)

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 • 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

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/

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

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

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

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. • 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

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

Comments of HTML Document   <h2>Adding Comments</h2> • 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  • Web browsers not render any content or elements that occur between those markers • Example

Document Type Declaration (Doctype) • 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

Beginning of HTML Document