Skip to content

Instantly share code, notes, and snippets.

@revisualize

revisualize/gist:f772db38f688f424fb9f

Last active August 29, 2015 14:05
Show Gist options
  • Save revisualize/f772db38f688f424fb9f to your computer and use it in GitHub Desktop.
Save revisualize/f772db38f688f424fb9f to your computer and use it in GitHub Desktop.
Download ZIP
Example XHTML code for a Facebook note
Raw
gistfile1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
Joseph A. Tracy's Assignement Three
</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta name="author" content="Joseph A. Tracy" />
<meta name="copyright" content="Joseph A. Tracy 2012" />
<meta name="description" content="Assignement 3, Joseph Tracy." />
<meta name="keywords" content="sample web document demo" />
<!-- pink: #d47271 ... purple: #220E31 -->
<style type="text/css">
body {
background-color:#220E31;
background: #d7d7d7 url('./images/purple_pink_explosion.jpg') no-repeat center top;
padding: 0 0 0 15%;
font-family: Verdana, Arial;
}
#header {
color: #ffffff;
height: 100px;
padding: 0 0 0 50px;
font-family: Verdana, Arial;
font-size: 12pt;
display:table-cell;
vertical-align: middle;
text-align: left;
}
#header font {
font-size: 30pt;
}
table {
border-collapse: collapse;
}
tr, th, td {
border-collapse: collapse;
padding: 0;
margin: 0;
}
.assign {
border-collapse: collapse;
background: #ffffff;
width: 100px;
font-weight: 600;
text-align: center;
vertical-align: middle;
}
#assignment_box tr {
background: #ffffff;
}
#top_nav {
border-collapse: collapse;
height: 60px;
vertical-align: middle;
font-family: Verdana, Arial;
}
#top_nav_left {
background: #ffffff;
border-top-left-radius: 15px;
vertical-align: middle;
}
.top_nav_middle {
background: #ffffff;
vertical-align: middle;
}
#top_nav_right {
background: #ffffff;
border-top-right-radius: 15px;
vertical-align: middle;
width: 100px;
}
#top_nav a:link { color: #4F4F4F; text-decoration:none; }
#top_nav a:active { color: #339966; text-decoration:underline; }
#top_nav a:visited { color: #4F4F4F; text-decoration:none; }
#top_nav a:hover { color: #336699; text-decoration:underline; }
img#first_cat {
border-top-left-radius: 15px;
}
img#second_cat {
border-top-right-radius: 15px;
}
#footer {
color: #9e9e9e;
font-family: Verdana, Arial, sans-serif;
font-size: 8pt;
text-align: right;
}
#footer a:link { color: #6699cc; text-decoration:none; }
#footer a:active { color: #339966; text-decoration:underline; }
#footer a:visited { color: #6699cc; text-decoration:none; }
#footer a:hover { color: #336699; text-decoration:underline; }
#f_menu {
padding: 2px 0px 3px 10px;
margin: 0;
color: #000;
}
#f_menu ul {
text-align: center;
margin-left: 0;
padding-left: 0;
}
#f_menu li {
list-style-type: none;
padding: 0 2px 0 2px;
display: inline;
font-size: 10pt;
}
</style>
</head>
<!-- http://super-designs.deviantart.com/art/Tierheim-Kunterbunt-Re-Design-312330035 -->
<body>
<div id="header">
joseph tracy
<br />
<font>assignment three</font>
</div>
<table>
<thead>
<tr id="top_nav">
<th id="top_nav_left"><a href="../index.html" title="Home">Home</a></th>
<th class="top_nav_middle"><a href="http://validator.w3.org/check/referer">Validate</a></th>
<th class="top_nav_middle"><a href="http://super-designs.deviantart.com/art/Tierheim-Kunterbunt-Re-Design-312330035" title="Inspired by Tierheim Kunterbunt - Re-Design by ~Super-Designs" target="_new">^Inspire</a></th>
<th class="top_nav_middle"><a href="mailto:%73%63%63%63%5f%77%65%62%31%31%30@%72%65%76%69%73%75%61%6c%69%7a%65%64%2e%63%6f%6d" title="Contact">Contact</a></th>
<th colspan="3" id="top_nav_right">&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="9" colspan="2" style="background: #ffffff;">
<img src="./images/cat01.jpg" alt="Sleeping Cat Picture" title="Sleeping Cat Picture" id="first_cat" />
</td>
<td rowspan="10" colspan="2" style="background: #ffffff;">
<img src="./images/cat02.jpg" alt="Cute Cat Picture" title="Cute Cat Picture" id="second_cat" />
</td>
<td colspan="3" class="assign">
Assign:
</td>
</tr>
<tr class="assign">
<td>
<a href="../a2/index.html" title="Assignment 2">2</a>
</td>
<td><a href="../a3/index.html" title="Assignment 3">3</a></td>
<td><a href="../a4/index.html" title="Assignment 4">4</a></td>
</tr>
<tr class="assign">
<td>
<a href="../a5/index.html" title="Assignment 5">5</a>
</td>
<td>
<a href="../a6/index.html" title="Assignment 6">6</a>
</td>
<td>
<a href="../a7/index.html" title="Assignement 7">7</a>
</td>
</tr>
<tr class="assign">
<td colspan="3">
<a href="../final/index.html" title="Assignment 8 - Final">Final</a>
</td>
</tr>
<tr class="assign">
<td colspan="3">
<a href="../extra/index.html" title="Extra 1">Extra1</a>
</td>
</tr>
<tr class="assign">
<td colspan="3">
<a href="../extra/index.html" title="Extra 2">Extra2</a>
</td>
</tr>
<tr class="assign">
<td colspan="3">
<a href="../extra/index.html" title="Extra 3">Extra3</a>
</td>
</tr>
<tr class="assign">
<td colspan="3">
<a href="../extra/index.html" title="Extra 4">Extra4</a>
</td>
</tr>
<tr>
<td colspan="3" style="background: #ffffff; border-bottom-right-radius: 15px;">
&nbsp;
</td>
</tr>
<tr>
<td colspan="2" style="background: #292929; color: #ffffff; font-size: 14pt; text-align: center; vertical-align: middle;">
My real assignment three is
<a href="./a3tabletemplate.html" title="Assignment Three Table Template" target="_new">
^here.
</a>
</td>
<td style="height: 90px;">
&nbsp;
</td>
</tr>
<tr>
<td colspan="4" style="background: #ffffff; padding: 10px; text-align: center; vertical-align: middle;">
<p style="width: 500px; margin: 0 auto 0 auto;">
This is some extra text to fill in for my assignement three: table page layout.
This exercise contains several colspans and a few rowspans.
</p>
</td>
</tr>
<tr>
<td colspan="4" style="background: #ffffff;">
<br />
<hr style="width: 90%; color: #ffffff; background-color: #ffffff; " />
</td>
</tr>
<tr>
<td colspan="4" style="background: #ffffff; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; padding-left: 10px; padding-right: 10px;">
<div style="float: left; ">
<a href="http://validator.w3.org/check?uri=referer" title="W3C Markup Validation Service">
<img style="border: 0; height: 25px;"
src="http://www.w3.org/Icons/valid-xhtml10-blue"
alt="Valid XHTML 1.0 Transitional" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer" title="W3C CSS Validation Service">
<img style="border: 0; height: 25px"
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="Valid CSS!" /></a>
</div>
<div id="footer">
<ul id="f_menu">
<li><a href="../index.html" title="Home">Home</a></li>
<li><a href="../a2/index.html" title="Assignment 2">A2</a></li>
<li><a href="../a3/index.html" title="Assignment 3">A3</a></li>
<li><a href="../a4/index.html" title="Assignment 4">A4</a></li>
<li><a href="../a5/index.html" title="Assignment 5">A5</a></li>
<li><a href="../a6/index.html" title="Assignment 6">A6</a></li>
<li><a href="../a7/index.html" title="Assignement 7">A7</a></li>
<li><a href="../final/index.html" title="Assignment 8 - Final">A8 Final</a></li>
<li><a href="../extra/index.html" title="Extra 1">Extra1</a></li>
<li><a href="../extra/index.html" title="Extra 2">Extra2</a></li>
<li><a href="../extra/index.html" title="Extra 3">Extra3</a></li>
<li><a href="../extra/index.html" title="Extra 4">Extra4</a></li>
</ul>
&copy;copyright 2012 joseph a. tracy [ www.revisualized.com ]
<a href="mailto:%73%63%63%63%5f%77%65%62%31%31%30@%72%65%76%69%73%75%61%6c%69%7a%65%64%2e%63%6f%6d" title="Contact">Contact</a> | <a href="../disclaimer.html" title="Disclaimer">Disclaimer</a>
<br />
Validate: [<a href="http://validator.w3.org/check/referer" title="W3C Validator">xhtml</a>] :: [<a href="http://jigsaw.w3.org/css-validator/check/referer" title="W3C Validator">css</a>]
</div>
<br />
</td>
</tr>
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment