Extensible HyperText Markup Language (XHTML)

In our first version of our online portfolio for the I.T. Minor (which can be found at http://www.ualr.edu/slcrump/portfolio/ ) we built in XHTML 1.0 Transitional code, an example of this code is as follows:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221;
lang=”en” xml:lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Scott Crump, IT Minor Portfolio Website</title>
<meta name=”author” content=”Scott L. Crump” />
<meta name=”keywords” content=”UALR, University of Arkansas at Little Rock, IT Minor online portfolio for Scott L. Crump, XHTML 1.0 Transitional, Projects Learned Examples”/>
<meta name=”description” content=”The online portfolio for Scott L. Crump with regard to the UALR IT Minor, Lime Class.” />
<link rel=”stylesheet” type=”text/css” media=”all” href=”assets/style/screen.css” /> </head>
<body id=”top”>
<div id=”container”>
<div id=”skipto”>
Skip to <a href=”#content”>Content</a> |
<a href=”#navigation”>Navigation</a>
</div>
<div id=”header”>
<h1><a href=”index.html”>Scott L. Crump – IT Minor Online Portfolio</a></h1>
</div>
<div id=”content”>
<h2> Properly Marking up an HTML Document </h2>
<p> This is a paragraph. Often times designers will use “Dummy Text” as a placeholder in a document. An example of that text follows…Lorem ipsum dolor sit amet…</p>
<h3>This is a Subsection of the Primary Content (Subsection I)</h3>
<p> This is a paragraph. Often times designers will use “Dummy Text” as a placeholder in a document. An example of that text follows…Lorem ipsum dolor sit amet…</p>
<p>This is a list of instructions.</p>
<ol>
<li> Instruction 1  </li>
<li>Instruction 2  </li>
<li>Instruction 3  </li>
</ol>
<p>This is a list of items to purchase at the grocery store.  </p>
<ul>
<li>Ramen  </li>
<li>Cheetos  </li>
<li>Jolt  </li>
<li>Bread</li>
</ul>
<dl>
<dt>&nbsp;</dt>
</dl>
<h4>This is a Subsection of Subsection I  </h4>
<p>This is a Quote. Content precedes design. Design in the absence of content is not design, it’s decoration. From Designing with Web Standards by Jeffery Zeldman.  </p>
<h3>This is a Subsection of the Primary Content (Subsection II)  </h3>
<p>This is a paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
</div>
<div id=”navigation”>
<ul id=”main-nav”>
<li><a href=”index.html” title=”Main Page”>Home</a></li>
<li><a href=”contact.html” title=”Contact Form”>Contact</a></li>
<li><a href=”about.html” title=”About the Author”>About</a>
<ul>
<li><a href=”resume1.html” title=”Resume One”>Resume One</a></li>
<li><a href=”resume2.html” title=”Resume Two”>Resume Two</a></li>
</ul>
</li>
<li><a href=”projects.html” title=”IT Minor Projects, Examples of Work”>Projects</a>
<ul>
<li><a href=”access.html” title=”Microsoft Access”>Access</a></li>
<li><a href=”excel.html” title=”Microsoft Excel”>Excel</a></li>
<li><a href=”powerpoint.html” title=”Microsoft PowerPoint”>PowerPoint</a></li>
<li><a href=”word.html” title=”Microsoft Word”>Word</a></li>
<li><a href=”javascript.html” title=”JavaScript Coding”>JavaScript</a></li>
<li><a href=”css.html” title=”Cascading Style Sheet Coding”>CSS</a></li>
<li><a href=”dreamweaver.html” title=” Adobe Dreamweaver”>Dreamweaver</a></li>
<li><a href=”fireworks.html” title=”Adobe Fireworks”>Fireworks</a></li>
<li><a href=”wordpress.html” title=”Wordpress.org”>Wordpress</a></li>
<li><a href=”writing.html” title=”Writing Sample”>Writing Sample</a></li>
<li><a href=”colophon.html” title=”Colophon”>Colophon</a></li>
</ul>
</li>
</ul>
</div><!–#navigation–>

<div id=”Footer”>
<h6>&copy;2012 Scott Crump | <a href=”mailto:slcrump@ualr.edu”>slcrump@ualr.edu</a> | <a href=”#top”>Back To Top</a></h6>
<!–W3C CSS Validator Emblem Hyperlink Code starts here–>
<p><a href=”http://jigsaw.w3.org/css-validator/check/referer”&gt;
<img
src=”http://jigsaw.w3.org/css-validator/images/vcss-blue&#8221;
alt=”Valid CSS!” style=”border:0;width:88px;height:31px” />
<!–W3C CSS Validator Emblem Hyperlonk Code ends here–>

<!–W3C XHTML1.0 Validator Emblem Hyperlink Code starts here–>
</a><a href=”http://validator.w3.org/check?uri=referer”><img
src=”http://www.w3.org/Icons/valid-xhtml10&#8243; alt=”Valid XHTML 1.0 Transitional” width=”88″ height=”31″ /></a></p>
<!–W3C XHTML1.0 Validator Emblem Hyperlink Code ends here–>
<h6><a href=”http://ualr.edu/”>University of Arkansas at Little Rock</a> | <a href=”http://ualr.edu/eit”>College of Engineering and Information Technology</a> | <a href=”http://ualr.edu/informationscience”>Information Science Department</a> | <a href=”http://ualr.edu/informationtechnology/”>Information Technology Minor Program</a></h6>
</div>
<!–#footer–>
</div><!–container–>
</body>
</html>

As you can see from this example each section has an opening and a closing tag such as the opening tag <title> and the closing tag </title>.  For a tag function to work it must always have an opening and a closing tag.

Some tags have self-closing tags such as <meta name=”author” content=”Scott L. Crump” />.

For a tutorial on the W3C standards for XML check out this link:
http://www.w3.org/standards/xml/

Once you have marked your code and populated it with the information you wish to present, it is always a good idea to validate your code using the W3C Validation Service which can be found at http://validator.w3.org/

 

 

Advertisements