1 / 14

SOME BASICS of XHTML

SOME BASICS of XHTML. CIS67 Foundations for Creating Web Pages Professor Al Fichera. Rev. August 25, 2010 — All HTML code brought to XHTML standards. Must Use a DOCTYPE. All documents must have a DOCTYPE . Note: This has been covered in the Using DOCTYPE lecture.

dolan
Download Presentation

SOME BASICS of XHTML

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. SOME BASICS of XHTML CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. August 25, 2010—All HTML code brought to XHTML standards.

  2. Must Use a DOCTYPE • All documents must have a DOCTYPE. • Note: This has been covered in the Using DOCTYPE lecture. Professor Al Fichera – CIS67 http://profal2.com

  3. All Markup In Lower-Case Only • All markup tags needs to be in lowercase • For example the <P> </P> tags need to be <p> </p>; • Cannot use <FONT...> only <font...> • Every markup tag needs to have some kind of corresponding ending tag as shown above. Professor Al Fichera – CIS67 http://profal2.com

  4. All Markup Tags Must Close • Tags that never had ending tags before such as: • <hr> Horizontal Rule; • <br> Break; • <img... Image; • <meta... Meta tags, • Now must have a trailing space and then the closing slash: • <hr />; <br />; <img... />; <link... />; <input... />; and <meta... /> • The ... ellipsis means there is additional content before the closing part of the tag. Professor Al Fichera – CIS67 http://profal2.com

  5. Form Element Tags Must Close • Form element tags need to be properly closed now, such as: • The <option> needs the </option> • The <select> needs </select>; • So in other words, any markup tag you open, you must close. Professor Al Fichera – CIS67 http://profal2.com

  6. All Attribute Values in Double Quotes • Every attribute value must be in double quotes " ": • For the height="100"width="65" alt="description here". • In other words anything that follows an equals sign = must have its value enclosed with double quotes " ". Professor Al Fichera – CIS67 http://profal2.com

  7. Use Proper Nesting of Markup Tags • Proper nesting of tags, do not mix the sequence at all: • Notice <p><strong>STOP</p></strong> is NOT acceptable at all, must be in mirror order • Use <p><strong>STOP</strong></p> Professor Al Fichera – CIS67 http://profal2.com

  8. Use Mirrored Order to Close Tags • If you need more help on this, think of each markup tag as a number, <1><2><3>STOP</3></2></1>, you see in a mirrored order. Professor Al Fichera – CIS67 http://profal2.com

  9. Ampersands Must Be Coded • No ampersands (&) allowed within an attribute value, you must use it's character reference: • If you intend to use the ampersand you must type &amp; that will show on the page as an ampersand & • The reason for this is ampersands are used sometimes in markup language. • This also goes for Quotes as well. • To see this (") type this &quot; Professor Al Fichera – CIS67 http://profal2.com

  10. No Empty Markup Tags Allowed • Markup tags that would work before but don't any more: • The <p> tag to create a next paragraph break now needs to contain something, even if it is only a non-breaking space character and a closing tag. • <p>&nbsp;</p> will provide that next paragraph empty space in your XHTML document, create more and your space will grow deeper. • Note: &nbsp; equals a non-breaking space character that actually glues Web page elements together. In other words if the two elements can’t fit at the end of a line, it will move both to the beginning of a new line. Professor Al Fichera – CIS67 http://profal2.com

  11. Name Tag Has Been Changed • The Nameattribute usually attributed to the image tag <img… /> has changed to become an ID tag. • This is now important to you, why? Because you are using XHTML 1.0 and an appropriate doctype at the top of the document. Professor Al Fichera – CIS67 http://profal2.com

  12. The ID Attribute Has Been Added • The ID attribute needs to be added if you are using the name attribute. • To be backwards compatible with older browsers use both: • <imgsrc="myimage.gif" id="my_image" name="my_image" /> Professor Al Fichera – CIS67 http://profal2.com

  13. No Shortcuts for Attributes • Attributes cannot be shortened, e.g., in a form element: • <input type="checkbox" value="yes" name="agree" ID="agree" checked>the checked is wrong, it must be written as checked="checked". Professor Al Fichera – CIS67 http://profal2.com

  14. Lecture Wrap Up • So that about wraps it up on what some of the basics of XHTML are. • Everything that has been changed as seen in this lecture was not needed back in the old HTML 3.0 or 4.0 days. • Research the Web for more on Markup Language to add to your knowledge base. Professor Al Fichera – CIS67 http://profal2.com

More Related