1 / 17

Creating Pages in XHTML

Creating Pages in XHTML. XHTML Tag Rules. All tags must be written in lower case. Wrong: <HR> Right: <hr> All tags must be closed: <p> </p> or < br /> All tag values must be enclosed in quotes. Wrong: <table border=1> Right: <table border=" 1">

tynice
Download Presentation

Creating Pages in 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. Creating Pages in XHTML

  2. XHTML Tag Rules • All tags must be written in lower case. • Wrong: <HR> • Right: <hr> • All tags must be closed: • <p> </p> or<br/> • All tag values must be enclosed in quotes. • Wrong: <table border=1> • Right: <table border="1"> • All tags must be properly nested. • Wrong: <strong><em>MSJC</strong></em> • Right: <strong><em>MSJC</em></strong> • There must be a DOCTYPE declaration. • NOTE: this does not follow the lowercase and closing tag rules

  3. XHTML Tags • Form • Uses wickets • Lower-case only • <body></body> • Contains an opening and closing tag • Tags must nest properly • Every XHTML document must have the following document structure components to render as expected and validate: • <!DOCTYPE > • <html> • <head> • <title> • </title> • </head> • <body> • </body> • </html> <strong> My Home Page </strong> Opening Tag Closing Tag <body>This is an example of markup tags</body>

  4. Markup Tags • Tag Type • Container tags • Also called non-empty tags <body>This is an example of Markup tags</body> • Text is placed between the beginning and ending tag • Ending tags contain a forward slash: </body> • XHTML requires the use of container or non-empty tags • Alternative Non-Empty tag • Alternative notation for stand-alone non-empty tags • Place the slash ( / ) after the element name (before the closing wicket), rather than before the element name like in a standard closing tag: <title />My Page

  5. Create the Structure • Open Notepad • Type in the tags you see in the blue box • Note: the <!DOCTYPE> tag is upper case (this is not a typo!) • Save the file as template.htm • Remember to put the .htm on the end! • You can reuse this file and not have to create the structure every time. Just remember to save it with a new name. • <!DOCTYPE > • <html> • <head> • <title> • </title> • </head> • <body> • </body> • </html>

  6. Paragraph Elements Affect entire paragraphs or multiple paragraphs The <p> tag Creates a blank line below text The <br /> tag Moves to next line Text Level Elements Bold: <strong></strong> Italic: <em> </em> (for emphasis) Do not use underlines Paragraph and Text Formatting Practice <p>I am learning XHTML</p> It is fun!<br/> I know how to <strong> bold</strong> and <em> italicize</em>. Result: I am learning XHTML It is fun! I know how to bold and italicize.

  7. Heading Automatically places formatting on text Levels 1 through 6 <h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6> Heading Levels Practice <h1>I love XHTML</h1> Result: I love XHTML

  8. Nest Tags The order on one end must be the opposite on the other. Improper code nesting Browsers may not render code XHTML will fail to validate Tag Nesting in Markup Proper: <h1><em><strong> Some Text Here </strong></em></h1> Improper: <h1><em><strong> Some Text Here </h1></em></strong>

  9. <p></p> Applies to grouped info <p align=“center”> </p> Use to align text or images Values: center and right Left is the default <h1 align=“center”></h1> Note: all the heading tags support the align attribute Result: (has more text than the practice.) Indenting and Centering Text Practice <h1>Indenting and Centering Text</h1> <p align="center">This text is centered</p> <blockquote><strong>This text is indented on both sides.</strong></blockquote> <blockquote><blockquote><strong>This text is indented twice using the tag twice.</strong>.</blockquote> </blockquote> • <blockquote> </blockquote> • indents text on both sides

  10. Note placement of / Horizontal Rules in XHTML • Tag • <hr /> • Attributes • align • center, right • size • Measured in pixels • width • Measured in percent • color • Hexadecimal or color name <hr align = “center” size=“4” width =“50%” color=“ green” />

  11. Image file formats gif, jpg, png Images in Web Pages <img src=“zebra.gif“ alt=“zebra representing quality instruction” /> • XHTML Code • <imgsrc=“mypic.jpg” /> • Remember to use the correct extension (jpg, gif or png) • alt Tag • Include the alt attribute with a corresponding value • Required to validate as XHTML • Allows browsers and screen-readers to read the image description to the viewer <imgsrc=“mypic.jpg” alt=“Chrome Zebra” />

  12. Specifying Colors in XHTML Colors are specified by hexadecimal values in XHTML. Review the Intro-to-Multimedia presentation if you need to review this.

  13. Deprecated Tag Means that is no longer a standard The new standard is to use Cascading Style Sheets instead. This course does not cover CSS, therefore you will work with the font tag for this assignment. Form – container tag <font> </font> Attributes size – several ways to specify this x-small to xx-large points size =“10pt” pixels size =“10px” color Use hex face Specifies the font style (spelling is critical) Will work if the other viewing computer has it installed Using the Font Tag (deprecated) Practice <font face=“Times New Roman” size=“2” color=“#2857A5”>I still love XHTML</font> Result: I still loveXHTML

  14. Creating a Text Hyperlink The <a> tag creates hyperlinks (anchor tag) A container tag that encompasses the text or image (or both) to be used as a link Anything placed between the <a> and </a> tags becomes a link The syntax for using the anchor tag to create a link is as follows: <a href="URL"> linked text or image (or both) </a> Hyperlinks • Element • <a> • Attribute • href – stands for horizontal reference • Value • External URL <a href =“http://www.czacademy.com”>Chrome Zebra Academy</a>

  15. Image Links • Link Tag • <a href=“http://www.chromezebra.com”> • Image Source Tag • <imgsrc=“elephant.jpg” alt=“I love elephants”/> • title Tag • Include the title attribute when using an image to link • Required to validate as XHTML • Allows browsers and screen-readers to read the image description to the viewer <imgsrc=“elephant.jpg” title=“I love elephants”/></a> • Complete Tag • <a href=“http://www.chromezebra.com”> <imgsrc=“elephant.jpg” title=“I love elephants”/></a>

  16. Good Practice Code is easily read by others Code is well organized Code contains levels Exceptions: Random spaces may generate problems Test the code in multiple browsers Hidden Comments: Use comments to annotate code or document changes <!--Text between these brackets will not appear on the screen--> versus <html> <head> <title>Overview</title> </head> <body> <h1>Looking Back</h1> </body> </html> Good Coding Practice <html><head><title>Overview </title></head><body><h1> Looking Back</h1></body> </html>

  17. End Practice Practice Practice!

More Related