Outline History XHTML Standards Syntax and Structure Basic Syntax

9/11/2007 Outline History Syntax and Structure Lecture 1: XHTML Text Presentation, Images, and Links (eXtensible Hypertext Markup Lists and Tables Language) Forms Wendy Liu Frames XHTML Document Validation CSC309F – Fall 2007 2 XHTML Standards XHTML 1.0 Redefinition of HTML 4.01 using XML rather than SGML Strict No deprecated elements www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd Transitional Supports deprecated elements and attributes History www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd Frameset Transitional + support for frames www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd XHTML 1.1 Modularization of XHTML 1.0 Strict XHTML 2 Working draft More structuring tags, navigation lists For this course: v1.1 + frames 4 Basic Syntax Tags are the fundamental syntactic units of HTML A pair of tags defines a container Content is what’s between the tags Container and its content defines an element All elements must have closing tags Syntax and Structure <p>This is the content of the element.</p>  <br /> (Empty content tag) Tags are case sensitive (lower case) <a>Illegal</A> <a>Correct</a> Elements must be properly nested <a><b>Illegal</a></b> <a><b>Correct</b></a> Attribute values must always be quoted <h2 id=illegal> <h2 id=“correct”> 6 1 9/11/2007 Document Structure <head> <?xml version= "1.0" encoding= "UTF-8" ?> Must contain a <title> element <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" Used for window titles, bookmark titles, search "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> engine result listings <html xmlns = Be descriptive and specific "http://www.w3.org/1999/xhtml”> Poor: <title>Introduction</title> <head> <title>Information about the document</title> Better: <title>Introduction to Bee-Keeping</title> </head> <body> Optional elements Content of the document … </body> <meta> </html> <link> 7 8 <meta> <link> Provide additional information of a document Relationship information E.g. Descriptions, keywords for search engines, Some uses refresh rates Rendered by user agents (browsers) <meta name="Author" content=“Joe Smith"> E.g. a tool-bar with a drop-down menu <meta name="keywords" lang="en" Used by search engines content="vacation, sunshine"> <head> <meta http-equiv="Expires" content="Tue, <link rel="Index" href="../index.html"/> 23 Oct 2007 14:25:27 GMT"> <link rel="Next" href="ch3.html"/> <link rel="Prev" href="ch1.html"/> Efforts underway to standardize document <link rel="Start" href="titlepage.html"/> </head> meta-data 9 10 <body> Inline versus Block Elements Displayable content Block-level elements Text, images, graphics, etc. Those appear in <body> Style attributes have been deprecated in Begin on new line favour of style sheets Contains other block-level or inline Contains two types of elements E.g. heading, paragraph Inline Inline elements Block-level The others, a.k.a. text-level elements Do not start a new line Contain other inline elements E.g. <em> Block elements cannot be nested in inline elements 11 12 2 9/11/2007 Paragraphs, Lines, and Phrase <p> organizes text into a paragraph <br /> forces a line break <hr /> draws a line below Text Presentation, Images, and Phrase elements add structural information to text Links fragments (or inline text) <em> emphasis <strong> more emphasis, usually bold <code> fragment of computer code <dfn> defining instance <cite> citation to another source <samp> sample output from programs <kbd> text entered by the user <var> instance of a variable from a program <abbr> abbreviated form, such as WWW <acronym> indicates an acronym, such as laser 14 Fancy Format Headings Subscripts and superscripts Six levels in decreasing order of importance E = mc<sup>2</sup> <h1> to <h6> H<sub>2</sub>O Visual browsers usually render more important Inserts and deletions headings in larger fonts <ins> Headings do not surround their section, only <del> the titles Use <div> for the section body Pre-formatted text <pre> Keeps spaces and line breaks as is 15 16 <div> and <span> <div> and <span> Example Offer a generic mechanism for adding <div class="section" id="forest-elephants"> <h1>Forest elephants</h1> structure to documents <p>In this section, we discuss the lesser Used for style purposes known <span class="sp1">forest</span> elephants. Attributes ...this section continues... class <div class="subsection" id="forest-habitat"> <h2>Habitat</h2> id <p>Forest elephants do not live in <div> trees...this subsection continues... </div> Define a generic block element </div> <span> Define a generic inline element 17 18 3 9/11/2007 Images <img /> Hypertext Links <a> Attributes Anchor element <a> src – insert images Pointer to other resource alt – insert alternative text (required by XHTML) <a href="www. toronto.edu">UofT</a> Non-graphical browsers Anchor within a document Browsers with images turned off <a name="chapter1"/> <img src = "comets.jpg" <a href=“index.html#chapter1"> alt = "Picture of comets" /> go to chapter 1</a> 19 20 Lists Lists may be nested Unordered lists <ul> <ul> <li> Cessna Skyhawk </li> Lists and Tables <li> Beechcraft Bonanza </li> <li> Piper Cherokee </li> </ul> Ordered lists <ol> 22 Tables Display tables of data or control the layout <table border = "border"> <caption> Fruit Juice Drinks </caption> <tr> <th> </th> <th> Apple </th> <th> Orange </th> Forms <th> Screwdriver </th> </tr> <tr> <th> Breakfast </th> <td> 0 </td> Means to collect information from <td> 1 </td> <td> 0 </td> Web client </tr> … </table> Attributes for <th> and <td> colspan and rowspan 23 4 9/11/2007 Forms Example of a Form Gather user input Communicate information from a browser to server Control or widget objects Single-line or multi-line text collections Checkboxes Radio buttons Menus Submit, Reset, and plain buttons Each control has a value Form data refers to the values of all controls in a form On submit Encode form data and send to the Web server 25 26 <form> <input> All controls appear in its content Used for text, passwords, checkboxes, radio Attributes buttons, reset and submit buttons action Attributes Required type URL of the application on the server to be called on submit Required method Choose from get (default) or post text, password, checkbox, radio, reset, submit name <form method=“get” action=“/search”> value Required for checkboxes and radio buttons Use <label> to encapsulate the control and its label 27 28 Action Buttons <select> Reset Specifies a menu Clear all controls to initial states Attributes name Submit size Code all control values into a string and send to For display purpose server 1 – drop down box (default) > 1 – scrolled list Request server to execute application specified in multiple the action attribute Allows multiple selection Plain <option> Value of an element of the list Used to choose an action No tags may be embedded 29 30 5 9/11/2007 <textarea> Multi-line text area Attributes rows Frames cols name Has implicit scrolling Multi-view presentation of documents Can add default text 31 Frames Example Frames Allow authors to display multiple documents independently In particular, an index page can be kept in parallel to a main content page A frameset element takes the place of the body element in a document Cannot have both frameset and body element 33 34 <frameset> Frameset Example Code <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Frameset//EN“ <?xml version= "1.0" encoding= "UTF-8" ?> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Frameset//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1- frameset.dtd"> Attributes <html xmlns = "http://www.w3.org/1999/xhtml"> <head> rows: defines number of rows and their <title>frames example</title> dimension </head> <frameset cols=“50%, 50%"> pixel, percentage, or asterisk <frameset rows=“50%, *"> <frame src=“A.html"> cols: similarly <frame src=“B.html"> </frameset> Must include either or both of the attributes <frame src=“C.html"> A.html </frameset> C.html </html> Can be nested B.html Content specified by <frame> 35 36 6 9/11/2007 Frameset Questions Answers What do they look like? <frameset rows="50%, 50%"> Divides the vertical space in half <frameset rows="50%, 50%"> <frameset rows="30%,70%" cols="33%,34%,33%"> Creates a 2 by 3 grid <frameset rows="30%,70%” <frameset cols="1*,250,3*"> cols="33%,34%,33%"> Divides the horizontal space to 3 parts <frameset cols="1*,250,3*"> Middle frame has a width of 250px Left one gets 25% of the remainder, and right one gets 75% <frameset rows="30%,400,*,2*"> <frameset rows="30%,400,*,2*"> First one takes 30% Second one takes 400px Third one takes 1/3 of the remainder Last one takes 2/3 of the remainder 37 38 <frame> Linking Controls The order matters Frames have names Attributes <frame name=“foo-frame“ /> <frame name=“foo-frame" src=“original.html"/> name Links can have a "target" String, to set target for links <a href=“new.html" target=“foo-frame"> src Pre-defined and reserved targets URL, source of the frame content _blank (new window) frameborder _self (same frame, default) 1 (default) or 0 _parent (the parent frameset) scrolling _top (the full body of the browser window) yes, no, or auto (default) 39 40 XHTML Validation Service http://validator.w3.org/file-upload.html XHTML Document Validation 42 7 9/11/2007 Differences between XHTML and HTML Review on your own 8.

Outline History XHTML Standards Syntax and Structure Basic Syntax

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support