Presentation on theme: "Beginning of HTML Document"— Presentation transcript:
1Beginning of HTML Document Lab of COMP Feb , 2012Beginning of HTML DocumentShenghua ZHONGDepartment of ComputingThe Hong Kong Polytechnic University
2Outline What is HTML How to learn HTML Characters of HTML Create HTML DocumentComponents of HTMLComments and Document Type Declaration
3Outline What is HTML How to learn HTML Characters of HTML Create HTML DocumentComponents of HTMLComments and Document Type Declaration
4Definition and History What is HTMLHyperText Markup Language (HTML) is the main markup language for web pagesHTML elements are the basic building-blocks of webpagesHistory of HTMLFirst publicly available description of HTML was called "HTML Tags”First mentioned on the Internet by Berners-Lee in late 1991HTML 4.01, was to be the final, complete specification for the HTML languageA new kid called eXtensible HTML, or XHTML, joined the class in 2000HTML5 is intended to subsume not only HTML 4, but XHTML 1 and DOM Level 2 HTML as well, is still under development
5One Version, Three Flavors Three “flavors” of XHTMLStrictMost stringent in its rulesDeprecated features are forbidden outrightTransitionalA bit more relaxed than StrictAllowing some outdated features to still lingerFramesetonly to situations when frames are being used to lay out a web page
6Outline What is HTML How to learn HTML Characters of HTML Create HTML DocumentComponents of HTMLComments and Document Type Declaration
7How to Learn HTML Learn from Internet Learn from practice Learn from practiceText ->HTMLHTML WYSIWYG editor, For example: KompoZer and CKEditor , DreamweaverLearn from book “Beginning Html With CSS and XHTML : Modern Guide and Reference” , David Schultz and Craig Cook, 2007. “Head first HTML with CSS & XHTML by Elisabeth”, Freeman, Eric Freeman, 2006.
8Outline What is HTML How to learn HTML Characters of HTML Create HTML DocumentComponents of HTMLComments and Document Type Declaration
9Characters 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 webHTML give plain unstructured text the sort of structure human beings rely on to read itFreedom and RuleFreedomA free, open standard, not owned or controlled by any company or individualNo license to purchase or specialized software required to author your own HTML documentsAnyone is free to create and publish web pagesRuleCertain rules need to be followed when you author documents in HTMLTechnical specifications for all official versions are freely available from the W3C at its website (http://www.w3.org)
10Outline What is HTML How to learn HTML Characters of HTML Create HTML DocumentComponents of HTMLComments and Document Type Declaration
11Create 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) editorsKompoZer , CKEditor, DreamweaverChoosing a Web BrowserMicrosoft Internet Explorer (IE)Apple Safari (http://www.apple.com/safari/)Mozilla Firefox (http://www.mozilla.com/firefox)Hosting Your Web SiteWeb space provided by your Internet service provider (ISP)Free web space, but are often supplemented by advertisingPaying for web hosting, as little as $10 (US) per monthMore information:
12Set Up A Personal Webpage All COMP students may set up their personal homepagesSteps of set up homepageDonwload a free shareware “winscp”Connect to your personal directory by winscpHost 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 passwordCreate a directory named "public_html" in /webhome/csxxxxxx/Put your homepage file to the folder /webhome/csxxxxxx/public_htmlChange the permissions of the file and folder, make the html files readable to othersVisit your personal webpage by URLCOMP ID>e.g.
13Introducing the URLEvery file or document available on the web resides at a unique address called a Uniform Resource Locator (URL)The Components of a URLProtocolIndicates sets of rules that dictate the movement of data over the InternetThe web uses HyperText Transfer ProtocolHostnameThe name of the site from which the browser will retrieve the fileThe web server’s true address is a unique numeric Internet Protocol (IP) addressPathSpecify the directory on the web server that holds the requested document
14Validating Your Documents W3C has created an online validation toolValidation addressValidation methodEnter the location of a page on the webUpload a file from your computerPaste your markup directly into a form on the website
15Outline What is HTML How to learn HTML Characters of HTML Create HTML DocumentComponents of HTMLComments and Document Type Declaration
16The Parts of Markup: Tags, Elements, and Attributes Basic components of HTMLTagsThe linchpin of HTMLSurrounded by angle brackets (< and >) to distinguish them from ordinary text (the tag name must be lowercase in XHTML)ElementThe twin tags and everything between themAttributeElement’s opening tag can carry attributes to provide more information about elementAn attribute consists of an attribute name followed by an attribute value
17Tags in HTML What is Tag Why utilize Tag Why call it “Tag” For example Tag is the encoded markers of HTMLTag is surrounded and differentiated bits of text, which indicates how to “mark up” the text by the function and purposeWhy utilize TagTags can be interpreted by computer softwareTags themselves are not displayed and are distinct from the actual content they envelopWhy call it “Tag”Just as a price tag displays the cost of an itemFor exampleThe 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.
18Some Characters about Tags Nesting elementsElements can be nested, each one residing within its containing elementEach closing tag appears in the correct order to close an inner element before close its container<p><em>Hello, world!</p></em>White spaceIgnore any extra line breaks and carriage returnsCollapse multiple spaces into a single space
19Comments of HTML Document Notes are not displayed in a browser but can read when viewing the original markupComments can include background, instruction on how to update a document, or a recorded history of changesSpecialized tag structure of HTMLStarts with <!--, as the opening of comment, and ends with -->Web browsers not render any content or elements that occur between those markersExample<!-- Hiding this for testing<h2>Adding Comments</h2>End hiding --><!-- Use an h2 for subheadings --><h2>Adding Comments</h2>
20Outline What is HTML How to learn HTML Characters of HTML Create HTML DocumentComponents of HTMLComments and Document Type Declaration
21Document Type Declaration (Doctype) Three corresponding doctypesXHTML 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 DoctypeA full, correct doctype tells a modern browser the entire document is well formed and authored according to web standardsThe browser can render the page in a mode intended to comply with the established standards for markup and CSSThe mode known as compliance mode or strict mode