Search

XHTML/CSS

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    Favorites, Groups & Events

    XHTML/CSS - Presentation Transcript

    1. XHTML/CSS Structure and Presentation Tuesday, September 1, 2009
    2. XHTML Structure http://www.daaq.net/old/xhtml/index.php http://www.w3schools.com/Xhtml/ Tuesday, September 1, 2009
    3. tag based <div></div> <img /> Tuesday, September 1, 2009
    4. close vs. self close Tuesday, September 1, 2009
    5. close <div></div> <h1></h1> <p></p> <strong></strong> <span></span> <em></em> <a></a> Tuesday, September 1, 2009
    6. self-close <img src=”” alt=”” /> <br /> <hr /> (never use this) Tuesday, September 1, 2009
    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. attributes id, class, href, src, alt name = ”value” Tuesday, September 1, 2009
    9. id no two elements can have same id think social security number <div id=”navigation”></div> Tuesday, September 1, 2009
    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. href <a href=”http://nd.edu”>Notre Dame</a> Tuesday, September 1, 2009
    12. src and alt <img src=”http://static.railstips.org/john_nunemaker.jpg alt=”John Nunemaker” /> Tuesday, September 1, 2009
    13. inline vs. block Tuesday, September 1, 2009
    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. 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. basic structure Tuesday, September 1, 2009
    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. <!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. <!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. <!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. <!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. <!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. Example Tuesday, September 1, 2009
    24. Paths absolute, relative, root-relative Tuesday, September 1, 2009
    25. absolute http://nd.edu/aboutnd/history/ Tuesday, September 1, 2009
    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. 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. css presentation http://www.daaq.net/old/css/index.php http://www.w3schools.com/css/ Tuesday, September 1, 2009
    29. selectors id uses # div#navigation #navigation class uses . div.post .post Tuesday, September 1, 2009
    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. syntax selector { attribute:value; attribute2:value2 } Tuesday, September 1, 2009
    32. examples div#navigation {background:black} div.post {width:400px; font-size:11px;} Tuesday, September 1, 2009
    33. WebFile http://oit.nd.edu/shared_file_space/ http://webfile.nd.edu http://eds.nd.edu/ Tuesday, September 1, 2009

    + John NunemakerJohn Nunemaker, 2 months ago

    custom

    254 views, 0 favs, 2 embeds more stats

    Introduction to basic xhtml and css concepts.

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 254
      • 195 on SlideShare
      • 59 from embeds
    • Comments 0
    • Favorites 0
    • Downloads 23
    Most viewed embeds
    • 58 views on http://teaching.johnnunemaker.com
    • 1 views on http://johnnunemaker-3.harmonyapp.com

    more

    All embeds
    • 58 views on http://teaching.johnnunemaker.com
    • 1 views on http://johnnunemaker-3.harmonyapp.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags

    -->
    Search
    RSS Feed
    What's new?

    © 2009 SlideShare Inc. All Rights Reserved