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"> 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
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>
<title />My Page 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
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>
Paragraph and Text Formatting 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 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.
Heading Levels I love XHTML Heading Levels 1 through 6 Automatically places formatting on text Levels 1 through 6 <h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6> Practice <h1>I love XHTML</h1> Result: I love XHTML
Tag Nesting in Markup 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 Proper: <h1><em><strong> Some Text Here </strong></em></h1> Improper: <h1><em><strong> Some Text Here </h1></em></strong>
Indenting and Centering Text <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 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 Result: (has more text than the practice.)
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” /> Note placement of /
Images in Web Pages Image file formats XHTML Code alt Tag <img src=“zebra.gif“ alt=“zebra representing quality instruction” /> Image file formats gif, jpg, png XHTML Code <img src=“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 <img src=“mypic.jpg” alt=“Chrome Zebra” />
Specifying Colors in XHTML FF0000 00FF00 0000FF FFFFFF EE0000 00EE00 0000EE EEEEEE DD0000 00DD00 0000DD DDDDDD CC0000 00CC00 0000CC CCCCCC BB0000 00BB00 0000BB BBBBBB AA0000 00AA00 0000AA AAAAAA 990000 009900 000099 999999 880000 008800 000088 888888 770000 007700 000077 777777 660000 006600 000066 666666 550000 005500 000055 555555 440000 004400 000044 444444 330000 003300 000033 333333 220000 002200 000022 222222 110000 001100 000011 111111 000000 Colors are specified by hexadecimal values in XHTML. Review the Intro-to-Multimedia presentation if you need to review this.
Using the Font Tag (deprecated) 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 Practice <font face=“Times New Roman” size=“2” color=“#2857A5”>I still love XHTML</font> Result: I still love XHTML
Hyperlinks Creating a Text Hyperlink Element Value 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> Element <a> Attribute href – stands for horizontal reference Value External URL <a href =“http://www.czacademy.com”>Chrome Zebra Academy</a>
Image Links Link Tag Image Source Tag title Tag Complete Tag <a href=“http://www.chromezebra.com”> Image Source Tag <img src=“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 <img src=“elephant.jpg” title=“I love elephants”/></a> Complete Tag
Good Coding Practice Good Practice Exceptions: Hidden Comments: versus 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--> <html><head><title>Overview </title></head><body><h1> Looking Back</h1></body> </html> <html> <head> <title>Overview</title> </head> <body> <h1>Looking Back</h1> </body> </html> versus
Practice Practice Practice! End Practice Practice Practice!