XHTML/CSS

XHTML/CSS Structure and Presentation Tuesday, September 1, 2009

XHTML Structure http://www.w3schools.com/Xhtml/ http://www.daaq.net/old/xhtml/index.php Tuesday, September 1, 2009

tag based <div></div> <img /> Tuesday, September 1, 2009

close vs. self close Tuesday, September 1, 2009

close <div></div> <h1></h1> <p></p> <strong></strong> <span></span> <em></em> <a></a> Tuesday, September
1, 2009

self-close <img src=”” alt=”” /> <br /> <hr /> (never
use this) Tuesday, September 1, 2009

What goes with what? div division, structurally grouping other tags
together p paragraph of text h1-h6 headings for sections of content strong bold, really emphasize em italic, slightly emphasize img image a link to something Tuesday, September 1, 2009

attributes id, class, href, src, alt name = ”value” Tuesday,
September 1, 2009

id no two elements can have same id think social
security number <div id=”navigation”></div> Tuesday, September 1, 2009

class extra hooks for styling and selecting descriptors like item,
content, post, message <div class=”post” id=”post-123”></div> Tuesday, September 1, 2009

href <a href=”http://nd.edu”>Notre Dame</a> Tuesday, September 1, 2009

src and alt <img src=”http://static.railstips.org/john_nunemaker.jpg alt=”John Nunemaker” /> Tuesday, September
1, 2009

inline vs. block Tuesday, September 1, 2009

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

block div, p, h1-h6, http://www.daaq.net/old/xhtml/index.php?page=xhtml+block+elements&parent=xhtml+basics Tuesday, September 1, 2009

basic structure Tuesday, September 1, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Tuesday,
September 1, 2009

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Tuesday, September 1, 2009

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> </html> <head> </head> <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Tuesday, September 1, 2009

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> </html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Example</title>
<head> </head> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Tuesday, September 1, 2009

<head> </head> <body> </body> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Tuesday, September 1, 2009

<head> </head> <body> </body> <p>Go <a href="http://teaching.johnnunemaker.com">here</a>.</p> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Tuesday, September 1, 2009

Example Tuesday, September 1, 2009

Paths absolute, relative, root-relative Tuesday, September 1, 2009

absolute http://nd.edu/aboutnd/history/ Tuesday, September 1, 2009

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

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

css presentation http://www.daaq.net/old/css/index.php http://www.w3schools.com/css/ Tuesday, September 1, 2009

selectors id uses # div#navigation #navigation class uses . div.post
.post Tuesday, September 1, 2009

<div id=”navigation”></div> div#navigation XHTML CSS <div class=”post”></div> div.post <div class=”post”></div>
.post <div id=”navigation”></div> #navigation Tuesday, September 1, 2009

syntax selector { attribute:value; attribute2:value2 } Tuesday, September 1, 2009

examples div#navigation {background:black} div.post {width:400px; font-size:11px;} Tuesday, September 1, 2009

WebFile http://webﬁle.nd.edu http://eds.nd.edu/ http://oit.nd.edu/shared_ﬁle_space/ Tuesday, September 1, 2009

XHTML/CSS

XHTML/CSS

John Nunemaker
PRO

More Decks by John Nunemaker

Other Decks in Research

Featured

Transcript

XHTML/CSS Structure and Presentation Tuesday, September 1, 2009

XHTML Structure http://www.w3schools.com/Xhtml/ http://www.daaq.net/old/xhtml/index.php Tuesday, September 1, 2009

tag based <div></div> <img /> Tuesday, September 1, 2009

close vs. self close Tuesday, September 1, 2009

close <div></div> <h1></h1> <p></p> <strong></strong> <span></span> <em></em> <a></a> Tuesday, September

self-close <img src=”” alt=”” /> <br /> <hr /> (never

What goes with what? div division, structurally grouping other tags

attributes id, class, href, src, alt name = ”value” Tuesday,

id no two elements can have same id think social

class extra hooks for styling and selecting descriptors like item,

href <a href=”http://nd.edu”>Notre Dame</a> Tuesday, September 1, 2009

src and alt <img src=”http://static.railstips.org/john_nunemaker.jpg alt=”John Nunemaker” /> Tuesday, September

inline vs. block Tuesday, September 1, 2009

inline a, img, span, strong, em http://www.daaq.net/old/xhtml/index.php?page=xhtml+inline+elements&parent=xhtml+basics Tuesday, September 1,

block div, p, h1-h6, http://www.daaq.net/old/xhtml/index.php?page=xhtml+block+elements&parent=xhtml+basics Tuesday, September 1, 2009

basic structure Tuesday, September 1, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Tuesday,

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> </html> <head> </head> <!DOCTYPE html PUBLIC

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> </html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Example</title>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> </html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Example</title>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> </html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Example</title>

Example Tuesday, September 1, 2009

Paths absolute, relative, root-relative Tuesday, September 1, 2009

absolute http://nd.edu/aboutnd/history/ Tuesday, September 1, 2009

relative if we are on nd.edu/aboutnd/ and we link to

root-relative if we are on the site nd.edu and we

css presentation http://www.daaq.net/old/css/index.php http://www.w3schools.com/css/ Tuesday, September 1, 2009

selectors id uses # div#navigation #navigation class uses . div.post

<div id=”navigation”></div> div#navigation XHTML CSS <div class=”post”></div> div.post <div class=”post”></div>

syntax selector { attribute:value; attribute2:value2 } Tuesday, September 1, 2009

examples div#navigation {background:black} div.post {width:400px; font-size:11px;} Tuesday, September 1, 2009

WebFile http://webﬁle.nd.edu http://eds.nd.edu/ http://oit.nd.edu/shared_ﬁle_space/ Tuesday, September 1, 2009