Presentation on theme: "Creating Pages in XHTML XHTML Tag Rules All tags must be written in lower case. Wrong: Right: All tags must be closed: or All tag values must be."— Presentation transcript:
Creating Pages in XHTML
XHTML Tag Rules All tags must be written in lower case. Wrong: Right: All tags must be closed: or All tag values must be enclosed in quotes. Wrong: Right: All tags must be properly nested. Wrong: MSJC Right: MSJC 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 Contains an opening and closing tag Tags must nest properly Opening Tag My Home Page Closing Tag Every XHTML document must have the following document structure components to render as expected and validate: This is an example of markup tags
Markup Tags This is an example of Markup tags My Page 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: Tag Type Container tags Also called non-empty tags Text is placed between the beginning and ending tag –Ending tags contain a forward slash: XHTML requires the use of container or non-empty tags
Create the Structure Open Notepad Type in the tags you see in the blue box Note: the 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.
Paragraph and Text Formatting Paragraph Elements Affect entire paragraphs or multiple paragraphs The tag –Creates a blank line below text The tag –Moves to next line Text Level Elements Bold: Italic: (for emphasis) Do not use underlines Practice
I am learning XHTML
It is fun! I know how to bold and italicize. Result: I am learning XHTML It is fun! I know how to bold and italicize.
Heading Levels Heading Automatically places formatting on text Levels 1 through 6 Practice I love XHTML 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: Some Text Here Improper: Some Text Here
Indenting and Centering Text Applies to grouped info –Use to align text or images –Values: center and right –Left is the default Note: all the heading tags support the align attribute indents text on both sides Practice Indenting and Centering Text This text is centered This text is indented on both sides. This text is indented twice using the tag twice.. Result: (has more text than the practice.)
Horizontal Rules in XHTML Tag Attributes align center, right size Measured in pixels width Measured in percent color Hexadecimal or color name Note placement of /
Images in Web Pages Image file formats gif, jpg, png XHTML Code 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
Specifying Colors in XHTML FF000000FF000000FFFFFFFF EE000000EE000000EEEEEEEE DD000000DD000000DDDDDDDD CC000000CC000000CCCCCCCC BB000000BB000000BBBBBBBB AA000000AA000000AAAAAAAA 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 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 I still love XHTML Result: I still love XHTML
Hyperlinks Creating a Text Hyperlink The 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 and tags becomes a link The syntax for using the anchor tag to create a link is as follows: linked text or image (or both) Element Attribute href – stands for horizontal reference Value External URL Chrome Zebra Academy
Image Links Link Tag Image Source Tag 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 Complete Tag
Good Coding Practice 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 Overview Looking Back Overview Looking Back versus