1 / 18

XHTML 1.1

XHTML 1.1. Derived from Standard Generalized Markup Language (SGML) of ISO XHTML concerned primary with content rather than presentation and style Evolution of the statandards for XHTML is controlled by World Wide Web Consortium W3C

wardjohn
Download Presentation

XHTML 1.1

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. XHTML 1.1 • Derived from Standard Generalized Markup Language (SGML) of ISO • XHTML concerned primary with content rather than presentation and style • Evolution of the statandards for XHTML is controlled by World Wide Web Consortium W3C • Style sheets (CSS) were developed to give precise specification of presentation

  2. XHTML Document Structure • Every document must begin with an xml declaration <?xml version = “1.0” encoding = “utf-8” “> • The SGML DOCTYPE command must follow <!DOCTYPE html PUBLIC “-//w3c//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

  3. XHTML Tags • Tags are the syntactical units of HTML Used to specify categories of content provides formatting: layout and presentation details Browser has default presentation for content Syntax: • < tag's name> with closing: </tag's name> • Tag's name must be all lower case Content of a tag appears between the tag and its closing A tag and its closing tag specify a container An element: a container and its content.

  4. XHTML Required Tags • Every document must include four tags: • <html> -- root element of document • Attribute xmlns (XHML name space) <html xmlns = “http://www.w3.org/1999/xhtml”> • <head> -- provides inf about document not its content • Can include meta element <meta name=”keywords” content = “gadgets, information” /> • <title> • <body> -- provides content of document

  5. XHTML Tags • Tags are inline or block • Inline: content appears on the current line • Block: content appears on new line • Tags must be nested properly: strictly enforced • A block tag can NEVER be nested directly in an inline tag • Inline tags and text cannot be nested directly in a body or form elements

  6. XHTML Hypertext • Anchor tag: <a href=”link to document”> is an inline tag. • Provides link pointing to document: • Filename • Directory path & filename • URL • Specific place in document – which must be marked • <h2 id = “gadgets”> Items for sale </h2> • <a href = “itemsforSale.html#gadgets”>Sale items</a>

  7. XHTML Basic Tags • <p> ... </p> Paragraph tag • <br /> Line break • <h1> ... </h1> Headings, can be up to 9 • <blockquote> ... </bl...> Block quote • <i>, <b>, <small>, <big>, <sub>, <sup>, <tt> Font style and sizes • <hr /> Horizontal Rule (lines) • <img src=”pictures.jpg” alt=”my picture” /> Inline image • Can have width and / or height attributes

  8. XHTML List Tags • Enumerated list <ol> ... </ol> • Itemized list (bullets) <ul> ... </ul> • List item <li> ... </li> • Definition list <dl> ... </dl> • Definition term <dt> ... <dt> • Definitions <dd> ... <dd>

  9. XHTML Tables Tags • <table border = “border”> --block tag • <caption> the title of a table • <tr> specifies a row • <th> specifies row or column heading • rowspan, columnspan attributes specify span of a table cell • <td> table data • align attribute can be left, center, or right • valign attribute can be top, or bottom • Cellpadding and cellspacing

  10. HTML Forms • Most common way to communicate from Web browser to server. • HTML has tags for Widgets which create objects on the screen-form to be filled out. • single/multiple line text • Checkboxes, • Radio buttons, • Menus, • Submit and Reset buttons.

  11. HTML Forms • Widgets are used to gather information from the user. • Each widget has a value: default or user input • Form data is composed of all the values of the widgets. • Submit button activated results in the form data being encoded and sent to the web server for processing • Reset button resets all widget values to defaults

  12. The <form ... > tag • Required attribute action --specifies URL of application to be called by submit button. <form method=post action="mailto:diaz@utulsa.edu" Enctype=text/plain > action ="http://www.cs.ucp.edu/cgi-bin/survey.pl" • Attribute method specifies one of two possible • get • post

  13. HTML Widgets • Many created with <input> tag. • Attribute type specifies kind of widget used. <input type="reset" value="Reset it!"> <input type='submit" value="Submit Form"> • Text -creates horizontal box for text input • Size attribute can change default of 20 characters • Setting maxlength causes additional input to be ignored, otherwise, box is scrolled to the left.

  14. HTML Widgets • Checkboxes -collect multi-choice input • Every item in the checkbox requires a value attribute. It is the widget's value in the form data when it is selected. • Non selected checkboxes contributes no values to the form data. • Initialized selections must have the checked attribute set to "checked." No selection is the default.

  15. HTML Widgets • Radio Buttons -only one button can be "checked" at a time. • Every button in a radio group must have the same name • If no button is selected, browser selects the first one.

  16. HTML Widgets • Menus are created with the <select > tag • Name attribute of <select> is required. • Can have multiple or single (default) selection. • Multiple selection is specified with the multiple attibute set to "multiple" • Size attribute specifies how many menu items to display (default is 1) • Size >1 or multiple specified --> pop-up menue

  17. HTML Widgets • Menus • Menu items specified with the <option> tag. Its text content is the value of the item. • Selected attribute of the <option> tag is preselected if it is set to "selected"

  18. HTML Widgets • <textarea> tag used to create text input areas. • Size of the text area is provided by<textarea> attribute: cols, and rows. • Default text included as the content of <textarea> • Scrolling is implicit if area is overfilled. • Wrap attribute can be used to force a line to wrap arround when set to "hard"

More Related