XHTML/CSS

2,607 views

Published on

Introduction to basic xhtml and css concepts.

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,607
On SlideShare
0
From Embeds
0
Number of Embeds
137
Actions
Shares
0
Downloads
104
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

XHTML/CSS

  1. 1. XHTML/CSS Structure and Presentation Tuesday, September 1, 2009
  2. 2. XHTML Structure http://www.daaq.net/old/xhtml/index.php http://www.w3schools.com/Xhtml/ Tuesday, September 1, 2009
  3. 3. tag based <div></div> <img /> Tuesday, September 1, 2009
  4. 4. close vs. self close Tuesday, September 1, 2009
  5. 5. close <div></div> <h1></h1> <p></p> <strong></strong> <span></span> <em></em> <a></a> Tuesday, September 1, 2009
  6. 6. self-close <img src=”” alt=”” /> <br /> <hr /> (never use this) Tuesday, September 1, 2009
  7. 7. What goes with what? division, structurally grouping div other tags together p paragraph of text headings for h1-h6 sections of content strong bold, really emphasize em italic, slightly emphasize img image a link to something Tuesday, September 1, 2009
  8. 8. attributes id, class, href, src, alt name = ”value” Tuesday, September 1, 2009
  9. 9. id no two elements can have same id think social security number <div id=”navigation”></div> Tuesday, September 1, 2009
  10. 10. class extra hooks for styling and selecting descriptors like item, content, post, message <div class=”post” id=”post-123”></div> Tuesday, September 1, 2009
  11. 11. href <a href=”http://nd.edu”>Notre Dame</a> Tuesday, September 1, 2009
  12. 12. src and alt <img src=”http://static.railstips.org/john_nunemaker.jpg alt=”John Nunemaker” /> Tuesday, September 1, 2009
  13. 13. inline vs. block Tuesday, September 1, 2009
  14. 14. inline a, img, span, strong, em http://www.daaq.net/old/xhtml/index.php?page=xhtml+inline+elements&parent=xhtml+basics Tuesday, September 1, 2009
  15. 15. block div, p, h1-h6, http://www.daaq.net/old/xhtml/index.php?page=xhtml+block+elements&parent=xhtml+basics Tuesday, September 1, 2009
  16. 16. basic structure Tuesday, September 1, 2009
  17. 17. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Tuesday, September 1, 2009
  18. 18. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> </html> Tuesday, September 1, 2009
  19. 19. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> </head> </html> Tuesday, September 1, 2009
  20. 20. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Example</title> </head> </html> Tuesday, September 1, 2009
  21. 21. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Example</title> </head> <body> </body> </html> Tuesday, September 1, 2009
  22. 22. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Example</title> </head> <body> <p>Go <a href="http://teaching.johnnunemaker.com">here</a>.</p> </body> </html> Tuesday, September 1, 2009
  23. 23. Example Tuesday, September 1, 2009
  24. 24. Paths absolute, relative, root-relative Tuesday, September 1, 2009
  25. 25. absolute http://nd.edu/aboutnd/history/ Tuesday, September 1, 2009
  26. 26. relative if we are on nd.edu/aboutnd/ and we link to history/ it would go to nd.edu/aboutnd/history/ Tuesday, September 1, 2009
  27. 27. root-relative if we are on the site nd.edu and we link to /aboutnd/history/ it would go to nd.edu/aboutnd/history/ Tuesday, September 1, 2009
  28. 28. css presentation http://www.daaq.net/old/css/index.php http://www.w3schools.com/css/ Tuesday, September 1, 2009
  29. 29. selectors id uses # div#navigation #navigation class uses . div.post .post Tuesday, September 1, 2009
  30. 30. XHTML CSS <div id=”navigation”></div> div#navigation <div id=”navigation”></div> #navigation <div class=”post”></div> div.post <div class=”post”></div> .post Tuesday, September 1, 2009
  31. 31. syntax selector { attribute:value; attribute2:value2 } Tuesday, September 1, 2009
  32. 32. examples div#navigation {background:black} div.post {width:400px; font-size:11px;} Tuesday, September 1, 2009
  33. 33. WebFile http://oit.nd.edu/shared_file_space/ http://webfile.nd.edu http://eds.nd.edu/ Tuesday, September 1, 2009

×