Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Part II
Document related concepts
Transcript
ULI101 – XHTML Basics (Part II) What is Markup Language? XHTML vs. HTML General XHTML Rules Block Level XHTML Tags XHTML Validation Markup Language Before we can talk about xHTML, we need to understand what a Markup Languages is. A markup language refers to the use of characters within a piece of information that can be used to process or identify that information in a particular way. <html> <head> <title>Some Title</title> </head> <body> <h1>Display this in a heading 1 definition</h1> <p> Display this in normal text definition.</p> </body> </html> When the above is viewed in a browser (IE or Netscape), what in fact the browser is doing is interpret the markup elements and display the content. Markup Language There are a number of different markup languages and types. To appreciate and understand why XML was developed, one has to get a general understanding of the Standard Generalized Markup Language (SGML) and its relationship with HTML. SGML is the grandfather of all markup languages. To Summarize: SGML is a very powerful language for document display. It is a very powerful language, but it is difficult to fully understand. SGML, has the advantage of creating other easier-to-use webprogramming languages like HTML, XML, and XHMTL. HTML is an easy-to-use language designed to display data, but has limitations of displaying complex data (like databases). New devices such as PDA’s and mobile phones do not have the resources to interpret HTML if written with mistakes. XHTML XHTML 1.0 brings the Web of the future to content authors today. It is a reformulation of HTML 4 in XML, bringing the rigor of XML to HTML, and can be put to immediate use with existing browsers by following a few simple guidelines. W3C's work in XHTML helps create standards that provide richer Web pages on an ever-increasing range of browser platforms including cell phones, televisions, cars, wallet-sized wireless communicators, etc... XHTML To write XHTML you need to use the XML syntax, which is slightly different from that of the HTML you use today. What are the differences? XML requires you to: include the correct DOCTYPE declaration at the beginning of the file <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> The more forgiving, more backwards-compatible version of XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> The more rigorous, more XML-style version of XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"> DTD for frames add the attribute xmlns="http://www.w3.org/1999/xhtml" to the <html> tag make element and attribute names case-sensitive. XHTML uses lowercase include end tags e.g. </p> and </li> add a / to empty elements, e.g. <br /> and <hr /> quote all attribute values, e.g. <img src="duck.jpg" alt="Duck" /> End special escape codes with semi-colon (eg. &) General XHTML Structure Here is an example of an XHTML web page using the transitional DOCTYPE: File Encoding Type DOCTYPE (Transitional) Beginning and ending HTML tags <?xml version=‘1.0 encoding=‘UTF-8’?> <!DOCTYPE html PUBLIC ‘-//W3C//DTD XHTML 1.0 Transitional//EN’ ‘http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd’> <html xmlns=‘http://www.w3.org/1999/xhtml’ xml:lang=‘en’> <head> <title>Sample Title</title> </head> <body> Contents of webpage </body> </html> XHTML Tags Commenting The purpose of commenting is to provide information for the web page designer. A comment may appear anywhere in an HTML/XHTML document and has the following format: <!-- comment --> Example: <!-- Here is a multiple line comment --> XHTML Tags <head> This is the HTML/XHTML document header. (required) The <head> tag defines an HTML/XHTML document header. The header contains information about the document rather than information to be displayed in the document. The web browser displays none of the information in the header, except for text contained by the <title> tag. You should put all header information between the <head> and </head> tags, which should precede the <body> tag. The <head> tag must contain the title tag and optionally to be covered at a later date - the base, isindex, meta, script, style, and link tags. <title> The <title> tag is contained in the heading of the web page document. This tag specifies the title of the document. The title will appear in the title bar of the browser window. In addition, automated web search tools can use the title to index documents. XHTML Tags <body> The <body> tag specifies the main content of a document. You should put all content that is to appear in the web page between the <body> and </body> tags. The <body> tag has attributes that let you specify characteristics for the document such as: The background color An image to use as a tiled background for the window The default text color, active/unvisited/visited link colors Actions to occur when the document finishes loading or is unloaded, and when the window in the document is displayed receives or loses focus. XHTML Tags <body> Attributes: <body bgcolor=“color name”> Sets the color of the document background. <body background=‘URL’> Displays an image in the document background. (can use relative or absolute pathnames) <body text=‘color’> Sets the color of normal text in document. Normal text XHTML Tags <body> Attributes: <body link=‘color’> Sets the text color of all unvisited links in the document. Unvisited Link <body alink=‘color’> Sets the text color of all links when clicked down (activated). Active Link <body vlink=‘color’> Sets the text color of all visited links in the document. Visited Link XHTML Tags In addition to empty and non-empty tags, there are also categories of tags called Block-Level tags and Inline tags. Web page body Block-Level Tags Heading Paragraph Line level elements Table Block-Level Tags (Structure) Block-Level tags are used to set up the structure of the web pages (eg. Building blocks). Block-level tags are automatically separated by a separate empty line. Block-level elements may contain in-line elements or other block- We will discuss inline tags in a later class… Block-Level Tags <h1> .. <h6> (non empty tag) Displays a heading. Level-one (h1) headings are the largest and level-six (h6) are the smallest. <p> (non-empty tag) Displays a paragraph. You can use the <p> tag to insert a line break with extra space using the <br /> tag. <blockquote> (non-empty tag) Displays an indented paragraph. Block quotes are usually used to quote passages from books, etc… Block-Level Tags <hr /> (empty tag) Used to display a line. This is useful to separate other blocks or sections of the web page. <pre> (Non-empty tag) Used to display text such as code, where characters such as new line are recognized by the browser. Other Block-Level Tags to be Covered in Course: Lists (<ul>,<ol>,<li>,<dl>,<dt>,<dd>) Tables (<table>,<tr>,<th>,<td>) Creating a Web page After you have learned how to code your web page, you will need to physically create your web page on a web server (e.g. on your Matrix account) to allow others to view your web page. In order to do this, you will need to know where to create a file that will contain your web page. Home directory Creating a Web Page Public_html On your Matrix account, there a directory called public_html, that is the “starting place” where web pages or subdirectories containing web pages are stored. Any web pages stored in a directory level higher than the public_html director will not be available to be viewed on the Internet Creating a Web Page Home directory public_html Web page files should be contained in the public_html directory or a subdirectory of public_html Web page files should be text files that end with an extension .html or .htm NOTE: Do not include the public_html directory in the pathname of the web page address (URL)… A web page called index.html will automatically load the web page if just the directory pathname is used. If no index.html file is available in the directory, then the contents of the directory will be displayed in the web browser. XHTML Validation You are required to validate your web document for XHTML 1.0 Failure to have your web document validate for XHTML1.0 will result in major assignment penalties (eg. 30%). To validate your web document: Create a web document in your Matrix account. Copy your full or absolute URL (eg. http://matrix.senecac.on.ca/~myacct/mywebpage.html) Go to http://validator.w3.org Under “Validate by URL”, paste in your full URL. If Errors, edit your webpage file in Matrix, save file, and revalidate again! If web document validates, copy code in validator to create a linked image in your web page to automatically validate.
