Download presentation
Presentation is loading. Please wait.
1
Basics of XHTML What Lies Beneath
2
Why learn XHTML code? better understanding of what is going on in the background of a web page troubleshooting when things aren’t working the way they should adjusting/adding effects or behaviors not offered by web page editor makes you sound very tech-savvy in front of your less tech-savvy peers
3
XHTML code versus HTML? transition to higher level coding
standardized practices (W3C) interacts with other web elements more standardized between browsers simpler in many ways NO empty tags to remember NO empty attributes to remember
4
XHTML DOC TYPES Statement goes before opening HTML tag
XHTML STRICT No deprecated tags XHTML TRANSITIONAL Recognizes deprecated tags XHTML FRAMESET Use for framed sites I will get you the code for this at a later date!!!
5
It’s not as… hard confusing boring …as it may look!
6
Tags (Page Elements) found between angle brackets < >
opening < > for all attributes with values may exist closing </ > for all in XHTML uses forward slash affected content goes in between tags <b>Hello</b>
7
Attributes add format to text or object within tags
use alone or in a series add to the opening tag (element) <body bgcolor= > separate attributes with a space corresponding value in quotes (preferred) <body bgcolor=“#ffcc00”> no spaces within attribute and its value
8
Things to remember… lowercase is required in XHTML tags can be nested
<h1><i>Welcome</i></h1> allows for additional options close tags in opposite order than opening spacebar spaces and paragraph returns are meaningless while writing code use for visual assistance in Notepad/WordPad document
9
Basic Document Tags <html></html>
first and last tag in html document <head></head> first section defines site, advanced editing, writing scripts <title></title> visible in browser title bar and in Favorites/Bookmarks listing <body></body> rest of page visible content
10
Basic Body Tags Backgrounds Formatted text Headers
in the <body> tag bgcolor=“#rrggbb” background=“filename” Formatted text <b></b> bold <i></i> italic <u></u> underline <font></font> size=“1-7” color=“#rrggbb” Headers <h1></h1> 1=larger, 6=smaller assumes paragraph return Paragraph (skip line) <p> , </p> is no longer optional align=“ ” left, center, right. Line break (no space) <br></br>
11
Adding Graphics gif, jpg browser safe colors
gif has transparency browser safe colors 216 cross platform RGB mode hexadecimal color codes (e.g., #ff00ff) 2 for red, 2 for green, 2 for blue 0= low intensity, F=high intensity, 16 levels low resolution, fast loading 72 – 96 dpi <img src=“filename”>
12
Linking Link to URL Anchors Link to Anchor uniform resource locator
locations outside of page <a href=“ Anchors locations on page <a name=“findme”></a> Link to Anchor <a href=“#findme”></a>
13
Tables visible or invisible, great for layout
<table></table> width= border= align= <tr> <td></td> cells in a row </tr> rows <table border=“0” width=“600” align=“center”> <tr><td>Image 1</td><td>Image 2</td></tr> <tr><td>Image 3</td><td>Image 4</td></tr> <tr><td>Image 5</td><td>Image 6</td></tr></table>
14
Other Tags <marquee></marquee>
scrolling or sliding text attributes include: behavior=, direction=, scrollamount=, loop=, align=, width= plus more (see online hand-out) <blockquote></blockquote> indents a body of text equally on left and right sets off a section of text from the rest <hr></hr> horizontal rule physical graphic line across page attributes include: color=, size=, width=, noshade
Similar presentations
