Presentation is loading. Please wait.

Presentation is loading. Please wait.

Beginning of HTML Document

Similar presentations


Presentation on theme: "Beginning of HTML Document"— Presentation transcript:

1 Beginning of HTML Document
Lab of COMP Feb , 2012 Beginning of HTML Document Shenghua ZHONG Department of Computing The Hong Kong Polytechnic University

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 Learn from practice
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 Freedom and Rule
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 Choosing a Web Browser
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:

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 COMP ID> e.g.

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 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 What is Tag Why utilize Tag Why call it “Tag” For example
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 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.

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
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 <!-- Hiding this for testing <h2>Adding Comments</h2> End hiding --> <!-- Use an h2 for subheadings --> <h2>Adding Comments</h2>

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


Download ppt "Beginning of HTML Document"

Similar presentations


Ads by Google