LECTURE NOTES FOR CMPE 418
advertisement
LECTURE NOTES FOR CMPE 418 Chapter on xHTML Intro What is xHTML? A reworking of HTML 4.01 to comply with XML 1.0 standard. HTML 4.01 Specification : http://www.w3.org/TR/html401 XML 1.0 Specification : http://www.w3.org/TR/REC-xml xHTML Documents: text file extension: html or htm generatable using NotePad xHTML Element: Comes in pairs of Start Tag and End Tag Start Tag: o < name > o may include attributes End Tag: </ name> The contents between the start tag and the end tag is referred to as “the inner text” of the element. Elements may be fuly embedded; overlapping is not allowed. Basic xHTML Elements: Comment element: o <!-- ... --> HTML element: o <html xmlns = "name-space-URL"> ...... </html> o The xmlns attribute identifies the standard where xHTML elements are defined. o Value of the xmlns attribute is: http://www.w3.org/1999/xhtml. Body element: o <body> .... </body> Header elements: o <h1> ... </h1> : 24 pt o <h2> ... </h2> : 18 pt o o o o <h3> ... </h3> : 14 pt <h4> ... </h4> : 12 pt <h5> ... </h5> : 10 pt <h6> ... </h6> : 8 pt Hyperlink: o <a href = "....."> ...... </a> o href could be: URL: http://www.dn.tld.cld/page.htm, or E-mailing: mailto:e-mail_address@dn.tld.cld. Image element: o <img ....... /> : tag w/out inner text. o Attributes: src = ".... " : source address of the image. width = "...." : integer width of the image in pixels, cm, in, % height = "...." : integer height of the image in pixels, cm, in, % alt = "..... " : message to be displayed when image is not displayed. Elements without inner text (empty elements): o o o o o These require no end tag, thus end marker is combined with the start tag. <br /> : break, continue from the beginning of the next line. <hr /> : horizontal rule, a full-width line is drawn. <img ... /> : image element as above. Still, these may as well be written using an end tag. Special characters: o Character Entity Reference: in the form of “&code;” for commonly used symbols, such as: &lt; :< &gt; :> &copy ; :© &frac12; : ½ o Character Entity Reference: in the form of “&#125;”, such as: &#169 :© &#174 :® &#167 :§ &#38 : & by decimal code number of the char in ASCII table &#x26 : & by hex code number of the char in ASCII table. o Character entity reference: www.w3.org/TR/REC-html40/sgml/entities.html o Or the ISO lists as dtd’s: http://www.webreference.com/xml/reference/xhtmlchars.html. Editing elements: o o o o <del> ... </del> : marks up strike-out text <sup> ... </sup> : marks up superscript text <sub> ... </sub> : marks up subscript text. ... List elements _ Unordered: o <ul> ... </ul> : forms a list with bulleted items of the layout style o <li> ... </li> : declares a list item in a list. Inner text of the item may contain an other list or an html element such as an anchor. Lists may be embedded at any debth. o List bullet type : <ul type = “...”> type = “disc” : Bullet symbol is a filled circle type = “square” : Bullet symbol is a square type = “circle” : Bullet symbol is a circle o Item bullet type : <li type = “...”> type = “disc” : Bullet symbol is a filled circle type = “square” : Bullet symbol is a square type = “circle” : Bullet symbol is a circle List elements _ Ordered: o <ol type = “....”> ... </ol> : forms a list with “numbered” items detailed in the inner text through <li> elements. o The type values and meanings are as follows: “A” : lists the items in upper case alphabet starting from “A” “a” : lists the items in lower case alphabet starting from “a” “I” : lists the items in upper case Roman numerals “i” : lists the items in lower case Roman numerals “1” : lists the items in numerical order if type attribute omitted : numeric ordering. o The ordered and unordered lists may be used in any order and at any depth o Attribute start = “....” : List starts counting from the fourth in type value. Tables Table element: <table> ... </table> : defines a table. Table rows and columns are further defined in the inner text of the table element. <tr> ... </tr> : defines a row. There are as many <tr> element as there are rows. Cells of a row (coulmns of the table) are defined in the inner text of <tr>. <td> ... </td> : marks up the contents of a table cell in the inner text. Other elements including a table may be enclosed. A simple 2x3 table with default attributes may be obtained by the following sequence of elements: <table> <tr> <td> ... </td> <td> ... </td> <td> ... </td> </tr> <tr> <td> ... </td> <td> ... </td> <td> ... </td> </tr> </table> Attributes of table element ( <table attributes... >): o Attribute border = “..” : table border thickness in pixels. o Attribute summary= “..” : summary of table contents. o Attribute width = “....” : width of table in pixels, cm, inches or in %. Caption element (like attribute): o <caption> .... </caption> : title for the table. However, to properly format a table, header section rows, body section rows, footer section rows, and header columns may be identified: o <thead> ... </thead> element: Encloses the table head section rows. A <tr> is enclosed for each row. Header data cells are marked up by <th> ... </th> elements. o <body> ... </tbody> element: Encloses the body section rows. A <tr> is enclosed for each row. Body data cells are marked up by <td> ... </td> elements. o <tfoot> ... </tfoot> element: Encloses the table foot section rows. A <tr> is enclosed for each row. Foot data cells are marked up by <td> ... </td> or <th> ... </th>elements. o <th> ... <th> element may be used anywhere in place of an <td> .. </td> element causing the content to appear in bold typeface. Spanning and Formatting Grouping columns by Colgroup element <colgroup> ...</colgroup>: o Grouping columns for formatting purpose o Element <col align = “...” span = “....”>: Attribute align : horizontal aligning: left, center, right Attribute span : # of column affected Merging cells by attributes rowspan and colspan in td/th start tag: o rowspan = “...” : vertically merge that many number of cells. o colspan = “...” : horizontally merge that many number of cells. Aligning cell content by attribute valign: Vertical alignment: top, middle, bottom, baseline. Forms Element Form <form method = “....” action = “....”> ..... </form> Attribute method : method of sending the form data to Web server: o method = “post” : appended to the browser request (covered) o method = “get” : attached to the URL (open). Attribute action : URL of the script to (receive and) process the form data. Form element inner text contains form user interface and input fields. Element (simple) Input Element input: <input type = “...” name = “...” value = “...” size = “...” maxlength = “…” Attribute types : spells the type of the field. o “hidden” : field is not visible; o “submit” : displays the Submit Button which upon clicking sends form data o “reset” : displays the Reset/Clear Button which upon clicking clears form data o “text” : input field with box displayed for user entry o “password”: the user input is displayed as stars. Attribute name : variable as name of the input field. Used for reference elsewhere. Attribute value : value of the field; or button face in the case of buttons. Attribute size : size of the input box as displayed in characters. Attribute “maxlength”: max size of the field in characters. Element (advanced) Input Element Checkbox: o Allows selecting multiple choices through checking the corresponding boxes o Form: <input type = “checkbox” name = “…” value = “…” /> o In the group, there is an input element with the same name for each value. o A choice may have been pre-selected by attribute checked = “checked”. Element Radio Button: o Allows selecting only one of the choices by checking it. o Form: <input type = “radio” name = “…” value = “…” /> o In the group, there is an input element with the same name repeated for each value. o A choice may have been pre-selected by attribute checked = “checked”. Element Select: o Drop down list of choices of which only one may be selected. o Form: <select name = “…” > option elements </select> o Each option is included through an option element within select’s inner text. o Form: <option>… </option> o One option may have been pre-selected through attribute selected = “selected”. Element Textarea: o Inserts a multi-line text area. o Form: <textarea name = “…” rows = “…” cols = “…”> …. </textarea> o An area of rows count by cols count is displayed for user entry. In-page Linking A hyperlink destination is given a label through attribute id = “…” . A reference to a destination is inserted as an Anchor element with mention of the destination id following # symbol as the value of attribute href. Clicking of such a hyperlink takes control to the place of the destination. Image Map A map is defined through an element Map and as many shapes using Area elements as required. Form: <map id = “…” > Area elements </map> Form: <area href = “…” shape = “…” cords = “…” alt = “…” /> where the attributes: o href : URL of page to be shown when the area is clicked. o shape : one of “rect” for rectangular, “poly” for polygon and “circle” o coord : coordinates to define the shape: x,y coordinates of top-left and bottom-right corners x,y coordinates of every corner for polygon, and x,y coordinate of the center of the circle and radius. The map is transparently overlayed on an image through an Image element: Form: <img src = …” width = “…” height = “…” alt = “…” usemap = “….” /> where: o Attributes width, height and “alt” are as usual with an image element. o Attribute usemap = refers to the map by # followed by the map_id. Meta Elements Specify various aspects about a document. Appears in the head section. Form: <meta name = “…” content = “…” /> name = “keywords” : content provides a list of keywords for search engine use. name = “description” : content provides a text for a search engine to display. Meta element with user defined name attribute (ie., user variable) may be used freely. Some examples follow: o <meta name="date" content="2004-03-21" /> o <meta name="keywords" content="XHML elements" /> o <meta name="description" content="XHTML, XML, tag, attribute" /> o <meta name="author" content="Atilla ELÇİ, Cmp. Eng., EMU" /> o <meta name="section" content="xhml intro" /> o <meta name="channel" content="Web Developer" /> o <meta name="GENERATOR" content="Microsoft FrontPage 5.0"> o <meta name="ProgId" content="FrontPage.Editor.Document"> o <meta name="Robots" content="noindex"> o <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> Meta elements with http-equiv attribute (ie., system variable) are used to condition a browser. Examples follow: o <meta http-equiv="Content-Type" content="text/html; charset=windows-1254" /> means that a page uses Windows 1254 (Turkish) character set. o <meta http-equiv="Content-Language" content="tr"> means that a page’s language is Turkish. Partitioning the Document Window Frameset Element Used to partition the document window into any number of frames and display a web document in each. In a frameset document, Frameset Element takes place of the Body Element. Head Element would still be present to describe page information. Form: <frameset attribute > Frame Elements No-Frames Element </frameset> Frameset Element attributes cols = “…” and rows = “…” are used to divide the window by columns and by rows respectively: o cols = “x, *”: where x is integer, two columnar frames are declared. The first is of size x columns and the second occupies the remaining columns. o rows = “x, y, *” : as above, but horizontal frames are being declared. A frameset element identifies the layout of the frames. Subsequently, each frame is to be defined further. A Frame Element is used for each frame. o Form: <frame name = “…” src = “…” /> o Attribute name assigns a name (identifier) to the frame. o Attribute src specifies URL of the page to display. Noframes Element Used to supply alternate content to display in the case if a browser does not handle Frameset Element. Form: <noframes> <body> elements to display </body> </noframes> Loading Frames While a frameset document is loaded, each frame receives its content from the page that is designated in the src attribute of the frame definition. A hyperlink should indicate the frame to load a document to. This is done by a target attribute as follows: o target = “name of the frame” o Thus, Anchor Element includes attribute target. If no target attribute is present, the new document is displayed in the same frame as the requesting document. o NB: attribute target is used even in the absence of a frameset to indicate the target window as follows: “_self” : current frame (same as the frame containing the hyperlink. “_top” : whole page “_blank” : new window “_parent” : parent frame. Nesting Frames Any frame element may be replaced by a frameset element declaring a set of frames to occupy the place of the frame thus nested framesets can be declared. Framesets may be nested to any depth. All considerations outlined above concerning frameset and loading frames are applicable in the case of nested framesets as well. xHTML Standards xHTML 1.0 : Current standard of making HTML as XML compliant. o Standard ref.: http://www.w3.org/TR/2002/REC-xhtml1-20020801 o Has three flavours: Strict : separation of marked up text and appearance (style), more like XML and less of HTML. Transitional : both strict (XML) and HTML merged. Frameset : accepts the original HTML with frames. xHTML 1.1 : xHTML 2.0 : being prepared. Will be strict in separation of text and style. References and Resources www.w3.org/TR/xhtml11/ www.w3.org/TR/2002/REC-xhtml1-20020801 validator.w3.org www.xhtml.org www.w3schools.com/xhtml/ wdvl.com/Authoring/Languages/XML/XHTML www.webreference.com/xml/reference/xhtml.html
