1 / 21

Beginning of HTML Document

Lab of COMP 102 Feb . 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

chessa
Download Presentation

Beginning of HTML Document

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

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

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

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

  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 http://www.comp.polyu.edu.hk/~<your COMP ID> e.g. http://www4.comp.polyu.edu.hk/~csshzhong/

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

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

  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 <!-- Hiding this for testing <h2>Adding Comments</h2> End hiding --> <!-- Use an h2 for subheadings --> <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 <!--, as the opening of comment, and ends with --> • Web browsers not render any content or elements that occur between those markers • Example

  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“ "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

More Related