see html: an overview, if you're unfamiliar with html tags
Check out the Easter Egg samples of the html code for this page, and the accompanying css code.
HTML tags
the basic tags with which we might concern ourselves
<a>anchor
this tag wraps around data to link to the file referenced in the anchor tag
<body>body
the content section of the web page
<br />line-break
inserts a line break in text
<div>division
a section of a page which has a specific purpose; the workhorse of the proper, css-driven website.
<dl>definition list
a list-type for defining terms, which has two components: the list term, <dt>, and the definition: <dd>
<dd>definition
the tag for the definition of the term in a definition list
<dt>definition term
this tag is for the term to be defined, in a definition list
<embed>embed
this tag wraps around a media file to embed in the page, such as a video clip
<h1> — <h6>headings
for providing structure to a document; often used for styling text
<head>head
contains information for the browser, and meta data about the webpage
<html>html
tells the browser which language type to decode
<img />image
links to and inserts an image from a directory
<li>list-item
a list item for an ordered or unordered list
<link />link
this tag wraps around a file used by the browser to assist in processing the page, such as a stylesheet (css file), or script (javascript file)
<meta />meta data
information about the page, including keywords, usually for search engine databases to index
<ol>ordered list
a numbered list
<p>paragraph
a block of text; a paragraph
<span>span
this tag wraps around content, usually to give it a "hook" for styling with css
<table>table
inserts a table; formerly the positioning strategy for old-school graphic web design, the table's role for rendering tabular data has been restored
<td>table-cell
wraps around the data in a cell in the table
<th>table-heading
the table heading; used to explain the relationship of the data in the table
<tr>table-row
wraps around each row in the table
<title>title
the title of the webpage; search engines use it to index the page in the database, and browswers usually render it on the window or tab
<ul>unordered list
a list, with no order
<!-- ~~ -->comment
insert a comment in the html (replace " ~~ " above), which the browser will ignore
Easter Egg
here's a sample of the code for this web page.
Check out the css code sample, too.
<a> |
anchor | this tag wraps around data to link to the file referenced in the anchor tag |
<body> |
body | the content section of the web page |
<br /> |
line-break | inserts a line break in text |
<div> |
division | a section of a page which has a specific purpose; the workhorse of the proper, css-driven website. |
<dl> |
definition list | a list-type for defining terms, which has two components: the list term, <dt>, and the definition: <dd> |
<dd> |
definition | the tag for the definition of the term in a definition list |
<dt> |
definition term | this tag is for the term to be defined, in a definition list |
<embed> |
embed | this tag wraps around a media file to embed in the page, such as a video clip |
<h1> — <h6> |
headings | for providing structure to a document; often used for styling text |
<head> |
head | contains information for the browser, and meta data about the webpage |
<html> |
html | tells the browser which language type to decode |
<img /> |
image | links to and inserts an image from a directory |
<li> |
list-item | a list item for an ordered or unordered list |
<link /> |
link | this tag wraps around a file used by the browser to assist in processing the page, such as a stylesheet (css file), or script (javascript file) |
<meta /> |
meta data | information about the page, including keywords, usually for search engine databases to index |
<ol> |
ordered list | a numbered list |
<p> |
paragraph | a block of text; a paragraph |
<span> |
span | this tag wraps around content, usually to give it a "hook" for styling with css |
<table> |
table | inserts a table; formerly the positioning strategy for old-school graphic web design, the table's role for rendering tabular data has been restored |
<td> |
table-cell | wraps around the data in a cell in the table |
<th> |
table-heading | the table heading; used to explain the relationship of the data in the table |
<tr> |
table-row | wraps around each row in the table |
<title> |
title | the title of the webpage; search engines use it to index the page in the database, and browswers usually render it on the window or tab |
<ul> |
unordered list | a list, with no order |
<!-- ~~ --> |
comment | insert a comment in the html (replace " ~~ " above), which the browser will ignore |
It's all there; I copied it from my text editor (Notetab Pro 6.1), replaced all the > angle brackets with <, which html uses to render such a bracket, so my code samples would look like code.
I rendered it really f*cking tiny,, so it would all fit in. A lot of typing, yes, to hand-code all that, but also a lot of clever copy-and-pasting strategies, and copy-and-replace, and keyboard shortcuts, and the clever html tag insertion utilities found in Notetab Pro 6.1.
<?xml version="1.0"?>
<!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">
<head>
<title>corax design :: html tags</title>
<link rev="made" href="mailto:factotum@coraxdesign.com" />
<meta name="generator" content="NoteTab Pro 6.1" />
<meta name="author" content="barton cole" />
<meta name="description" content="" />
<meta name="keywords" content="html tags, list, html tag list, html tags, html" />
<link rel=stylesheet href="../css/cd-style-091209.css" type="text/css" media=all>
<link rel="stylesheet" type="text/css" href="../css/ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="../css/ddsmoothmenu-v.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="../js/ddsmoothmenu.js">
/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
ddsmoothmenu.init({
mainmenuid: "smoothmenu2", //Menu DIV id
orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
//customtheme: ["#804000", "#482400"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>
</head>
<body>
<div id="wrapper">
<div id="logo">
<a href="http://www.coraxdesign.com/index.htm"><img src="../images/coraxDesignIconOrngGrey128.png" /></a>
<a href="http://www.coraxdesign.com/index.htm"><img src="../images/cDtestLogo2.png" /></a>
</div><!--end"logo"-->
<div id="header">
<h2 class="huge">html: standard <tags></h2>
<!-- menu follows
updated 013010 21:41:31 barton cole-->
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="../index.htm">home</a></li>
<li><a href="manifesto.htm">manifestos</a>
<ul>
<li><a href="html-manifesto.htm">html: an overview</a></li>
<li><a href="css-manifesto.htm">css: an overview</a></li>
<li><a href="franklin-manifesto.htm">...to franklin</a></li>
<li><a href="#">html: <tags></a></li>
</ul>
</li>
<li><a href="../work.htm">the work</a><ul>
<li><a href="../web.htm">web</a><ul>
<li><a href="../art-sites.htm">art sites</a><ul>
<li><a href="../notes/23crows-note.htm">23 crows</a></li>
<li><a href="../notes/argyle9-note.htm">argyle9</a></li>
<li><a href="../notes/geniusweirdo-note.htm">geniusweirdo.org</a></li>
<li><a href="../notes/emptyspandotinfo-note.htm">emptyspan.info</a></li>
</ul></li>
<li><a href="../info-sites.htm">information sites</a><ul>
<li><a href="../notes/jtcg-note.htm"title="jasmineconsultinggroup.com">jtcg</a></li>
<li><a href="../notes/delwell-note.htm">debby elwell, lmft</a></li>
<li><a href="../notes/owntheroom-note.htm"title="modernsorcery.net; Firesign Theater Legend,Peter Bergman">Own the Room™</a></li>
<li><a href="../notes/crr-note.htm">café round road</a></li>
<li><a href="../notes/coraxdesign-note.htm">corax design</a></li>
<li><a href="../notes/bartoncole-note.htm">barton cole</a></li>
<li><a href="../notes/ironystrikes-note.htm">irony strikes</a></li>
<li><a href="../notes/jonitakanikos-note.htm">joni takanikos</a></li>
<li><a href="../notes/umw-note.htm">under milk wood</a></li>
</ul></li>
<li><a href="../parked.htm">parked domains</a><ul>
<li><a href="../notes/birdjoint-note.htm">birdjoint</a></li>
<li><a href="../notes/douglasssquirrel-note.htm">douglass squirrel</a></li>
<li><a href="../notes/emptyspan-note.htm">emptyspan.org</a></li>
<li><a href="../notes/jsanchez-note.htm">joseph sanchez</a></li>
<li><a href="../notes/soulrepo-note.htm">soulrepo</a></li>
<li><a href="../notes/wingnut23-note.htm">wingnut23</a></li>
<li><a href="../notes/asib-note.htm">a scandal in bohemia</a></li>
<li><a href="../notes/zencrow-note.htm">zencrow</a></li>
</ul></li>
</ul>
<li><a href="../print/print.htm">print</a><ul>
<li><a href="../print/posters.htm">posters and handbills</a><ul>
<li><a href="../print/UMW-art.htm">UMW</a></li>
<li><a href="../print/shelter-art.htm">"shelter"</a></li>
<li><a href="../print/misc-art.htm">other</a></li>
</ul></li>
<li><a href="../album/album.htm">album art</a><ul>
<li><a href="../album/strange.htm">strange beauty</a></li>
</ul></li>
</ul></li></ul></li></li>
<li><a href="../about/about-main.htm">about</a><ul>
<li><a href="../about/about-main.htm#who">who are we?</a></li>
<li><a href="../about/about-main.htm#where">where are we?</a></li>
<li><a href="../about/about-main.htm#campus">our campus</a></li>
<li><a href="../about/about-faq.htm">faq</a></li>
</ul></li>
<li ><a href="../cd-sitemap.htm">quick links</a>
<ul class="quick-links">
<li><a href="http://www.23crows.com"target="blank"title="go to 23crows.com">23 crows</a></li>
<li><a href="http://www.argyle9.com"target="blank"title="go to argyle9.com">argyle9</a></li>
<li><a href="http://www.bartoncole.com"target="blank"title="go to bartoncole.com">barton cole</a></li>
<li><a href="http://www.birdjoint.com"target="blank"title="go to birdjoint.com">birdjoint</a></li>
<li><a href="http://www.caferoundroad.com"target="blank"title="go to caferoundroad.com">cafe round road</a></li>
<li><a href="#"title="here you are, already">corax design</a></li>
<li><a href="http://www.debbyelwell.com"target="blank"title="go to debbyelwell.com">debby elwell, lmft</a></li>
<li><a href="http://www.douglassquirrel.info"target="blank"title="go to douglassquirrel.info">douglas squirrel</a></li>
<li><a href="http://www.emptyspan.info"target="blank"title="go to emptyspan.info">emptyspan.info</a></li>
<li><a href="http://www.emptyspan.org"target="blank"title="go to emptyspan.org">emptyspan.org</a></li>
<li><a href="http://www.geniusweirdo.org"target="blank"title="go to geniusweirdo.org">geniusweirdo.org</a></li>
<li><a href="http://www.ironystrikes.com"target="blank"title="go to ironystrikes.com">irony strikes</a></li>
<li><a href="http://www.jasmineconsultinggroup.com"target="blank"title="go to jasmine takanikos consulting group">jtcg</a></li>
<li><a href="http://www.jonitakanikos.com"target="blank"title="go to jonitakanikos.com">joni takanikos</a></li>
<li><a href="http://www.josephsanchez.org"target="blank"title="go to josephsanchez.org">joseph sanchez</a></li>
<li><a href="http://www.soulrepo.com"target="blank"title="go to soulrepo.org">soulrepo</a></li>
<li><a href="http://www.emptyspan.info/umw/index.htm"target="blank"title="gunder milk wood resource site">under milk wood</a></li>
<li><a href="http://www.ascandalinbohemia.org"target="blank"title="go to ascandalinbohemia.org">a scandal in bohemia</a></li>
<li><a href="http://www.wingnut23.com"target="blank"title="go to wingnut23.com">wingnut23</a></li>
<li><a href="http://www.zencrow.com"target="blank"title="go to zencrow.com">zencrow</a></li></ul></li>
<li><a href="../cd-sitemap.htm">sitemap</a></li></ul>
<!-- end menu -->
<br style="clear: left" />
</div>
</div><!--end"header"-->
<div id="nav-menu">
</div><!--end"nav-menu" rename this when we know what it is 091209-->
<div id="search">
</div><!--end"search"-->
<div id="breadcrumbs">
<a href="../index.htm">home</a> » <a href="manifesto.htm">manifestos</a> » <a href="#">html: tags</a>
</div><!--end"breadcrumbs"-->
<div id="left">
<div id="contact">
<a href="#" id="designanchor"></a>
<span class="factotum">barton cole</span><br />
web and multi-media design<br />
<a href="mailto:factotum@coraxdesign.com" class="mail-link"title="send me a note">factotum@coraxdesign.com</a><br />
box 953<br />
langley, wa<br />
98260 usa<br />
</div><!--end"contact"-->
<div id="supp-1">
</div><!--end"supp-1"-->
</div><!--end"left"-->
<div id="content" >
<h4>see <em><a href="html-manifesto.htm">html: an overview</a></em>, if you're unfamiliar with html tags</li>
<h2>HTML tags</h2>
<h3>the basic tags with which we might concern ourselves</h3>
<table border="1" cellspacing="0" cellpadding="2" width="100%" class="html">
<tr>
<td><a href="#anchor"><code><a></code></a></td>
<td><a href="#anchor">anchor</a></td>
<td>this tag wraps around data to link to the file referenced in the anchor tag </td>
</tr>
<tr>
<td><a href="#body"><code><body></code></a></td>
<td><a href="#body">body</a></td>
<td>the content section of the web page</td>
</tr>
<tr>
<td><a href="#break"><code><br /></code></a></td>
<td><a href="#break">line-break</a></td>
<td>inserts a line break in text/td>
</tr>
<tr>
<td><a href="#division"><code><div></code></a></td>
<td><a href="#division">division</a></td>
<td>a section of a page which has a specific purpose; the workhorse of the proper, css-driven website.</td>
</tr>
<tr>
<td><a href="#def-list"><code><dl></code></a></td>
<td><a href="#def-list">definition list</a></td>
<td>a list-type for defining terms, which has two components: the list term, <code><dt></code>, and the definition: <code><dd></code></td>
</tr>
<tr>
<td><a href="#definition"><code><dd></code></a></td>
<td><a href="#definition">definition</a></td>
<td>the tag for the definition of the term in a definition list</td>
</tr>
<tr>
<td><a href="#def-term"><code><dt></code></a></td>
<td><a href="#def-term">definition term</a></td>
<td>this tag is for the term to be defined, in a definition list</td>
</tr>
<tr>
<td><a href="#embed"><code><embed></code></a></td>
<td><a href="#embed">embed</a></td>
<td>this tag wraps around a media file to embed in the page, such as a video clip</td>
</tr>
<tr>
<td><a href="#heading"><code><h1> — <h6></code></a></td>
<td><a href="#heading">headings</a></td>
<td>for providing structure to a document; often used for styling text</td>
</tr>
<tr>
<td><a href="#head"><code><head></code></a></td>
<td><a href="#head">head</a></td>
<td>contains information for the browser, and meta data about the webpage</td>
</tr>
<tr>
<td><a href="#html"><code><html></code></a></td>
<td><a href="#html">html</a></td>
<td>tells the browser which language type to decode</td>
</tr>
<tr>
<td><a href="#image"><code><img /></code></a></td>
<td><a href="#image">image</a></td>
<td>links to and inserts an image from a directory</td>
</tr>
<tr>
<td><a href="#list-item"><code><li></code></a></td>
<td><a href="#list-item">list-item</a></td>
<td>a list item for an ordered or unordered list</td>
</tr>
<tr>
<td><a href="#link"><code><link /></code></a></td>
<td><a href="#link">link</a></td>
<td>this tag wraps around a file used by the browser to assist in processing the page, such as a stylesheet (css file), or script (javascript file)</td>
</tr>
<tr>
<td><a href="#meta"><code><meta /></code></a></td>
<td><a href="#meta">meta data</a></td>
<td>information about the page, including keywords, usually for search engine databases to index</td>
</tr>
<tr>
<td><a href="#ord-list"><code><ol></code></a></td>
<td><a href="#ord-list">ordered list</a></td>
<td>a numbered list</td>
</tr>
<tr>
<td><a href="#paragraph"><code><p></code></a></td>
<td><a href="#paragraph">paragraph</a></td>
<td>a block of text; a paragraph</td>
</tr>
<tr>
<td><a href="#span"><code><span></code></a></td>
<td><a href="#span">span</a></td>
<td>this tag wraps around content, usually to give it a "hook" for styling with css</td>
</tr>
<tr>
<td><a href="#table"><code><table></code></a></td>
<td><a href="#table">table</a></td>
<td>inserts a table; formerly the positioning strategy for old-school graphic web design, the table's role for rendering tabular data has been restored</td>
</tr>
<tr>
<td><a href="#table-cell"><code><td></code></a></td>
<td><a href="#table-cell">table-cell</a></td>
<td>wraps around the data in a cell in the table</td>
</tr>
<tr>
<td><a href="#table-heading"><code><th></code></a></td>
<td><a href="#table-heading">table-heading</a></td>
<td>the table heading; used to explain the relationship of the data in the table</td>
</tr>
<tr>
<td><a href="#table-row"><code><tr></code></a></td>
<td><a href="#table-row">table-row</a></td>
<td>wraps around each row in the table</td>
</tr>
<tr>
<td><a href="#title"><code><title></code></a></td>
<td><a href="#title">title</a></td>
<td>the title of the webpage; search engines use it to index the page in the database, and browswers usually render it on the window or tab</td>
</tr>
<tr>
<td><a href="#unord-list"><code><ul></code></a></td>
<td><a href="#unord-list">unordered list</a></td>
<td>a list, with no order</td>
</tr>
<tr>
<td><a href="#comment"><code><!-- ~~ --></code></a></td>
<td><a href="#comment">comment</a></td>
<td>insert a comment in the html (replace "<code> ~~ </code>" above), which the browser will ignore</td>
</tr>
</table
</div><!--end"content"-->
<div id="resources">
<dl class="tags">
<dt><a name="anchor"><code><a></code></a><h4>anchor</h4></dt><dd>the anchor is what the web is all about, hyper-linking (this is all hypertext, remember) to other documents and resources, like the penultimate factotum.
<ul class="breakdown">
<li><h6>sample html:</h6>
<code class="sample">
<span class="num">01.</span><span class="highlight"><a</span> href= "http://→ www.google.com" target="blank"<span class="highlight">> </span>google<span class="highlight"></a></span> is a popular search engine.
</code>
<span class="note">note the closing tag;<br />see <a href="html-manifesto.htm">html: an overview</a>, if you're confused about anchors and how they work.</span></li>
<li><h6>rendered html:</h6>
<span class="rendered">
<a href="http://www.google.com"target="blank">google</a> is a popular search engine.</span></li></ul></dd>
<dt><a name="body"><code><body></code></a><h4>body</h4></dt><dd>the content section of the html document (the <a href="#head">head</a> section being the other), which is rendered by the browser and is available to the user.<ul class="breakdown">
<li><h6>sample html:</h6>
<code class="sample">
<span class="num">01.</span><span class="note"><html></span><br />
<span class="num">02.</span><span class="note"><head></span><br />
<span class="num">03.</span><span class="note"><<em>meta data</em>></span><br />
<span class="num">04.</span><span class="note"><<em>meta data</em>></span><br />
<span class="num">05.</span><span class="note"><<em>meta data</em>></span><br />
<span class="num">06.</span><span class="note"></head></span><br />
<span class="num">07.</span><span class="highlight"><body></span><br />
<span class="num">08.</span><span class="note">well-structured</span><br />
<span class="num">09.</span><span class="note"> and semantic</span><br />
<span class="num">10.</span><span class="note">content goes</span><br />
<span class="num">11.</span><span class="note">in here...</span><br />
<span class="num">12.</span><span class="highlight"></body></span><br />
<span class="num">13.</span><span class="note"></html></span><br />
</code>
</li>
<li><h6>rendered html:</h6><span class="rendered">take a look at any web page to see it.</li></ul></dd>
<dt><a name="break"><code><br /></code></a><h4>line-break</h4></dt><dd>inserts a line-break; html text is displayed inline by default, and doesn't preserve line-breaks unless coded.
<ul class="breakdown">
<li><h6>sample html:</h6></li>
<code class="sample">
<span class="num">01.</span> <span class="note">so much depends</span> <span class="highlight"><br /></span><span class="note">upon</span> <span class="highlight"><br /></span><span class="note">a red wheel</span> <span class="highlight"><br /></span><span class="note">barrow</span> <span class="highlight"><br /></span><span class="note">glazed with rain</span> <span class="highlight"><br /></span><span class="note">water</span> <span class="highlight"><br /></span><span class="note">beside the white</span> <span class="highlight"><br /></span><span class="note">chickens.</span></code>
<li><h6>rendered html:</h6></li>
<span class="rendered">so much depends<br />upon<br />a red wheel<br />barrow<br />glazed with rain<br />water<br />beside the white<br />chickens.</span></ul></dd>
<dt><a name="division"><code><div></code></a><h4>division</h4></dt><dd>a section of a page which has a specific purpose; the workhorse of the proper, css-driven website.
<ul class="breakdown">
<li><h6>sample html:</h6></li>
<code class="sample">
<span class="num">01.</span><span class="highlight"><div</span> <span class="note">id="navigation"</span><span class="highlight">></span><br />
<span class="num">02.</span><span class="note"><ul></span><br />
<span class="num">03.</span><span class="note"><li><a href="#">home </a></li></span><br />
<span class="num">04.</span><span class="note"><li><a href="#">about </a></li></span><br />
<span class="num">05.</span><span class="note"><li><a href="#">profile </a></li></span><br />
<span class="num">06.</span><span class="note"></ul></span><br />
<span class="num">07.</span><span class="highlight"></div></span>
</code>
<li><h6>rendered html:</h6></li><span class="rendered">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">profile</a></li>
</ul>
</span>
<span class="note">the significance of the <code><div></code> might be a bit obscure, here, but bear in mind that in <em>this</em> website, the navigation is in its own <code><div></code>, the ghosty credits and disclaimer way over on the left? a <code><div></code>. the sitework link at the bottom right is a <code><div></code>. The entire page is broken, structurally, into divisions.</span>
</ul>
</dd>
<dt><a name="def-list"><code><dl></code></a><h4>definition-list</h4></dt><dd>a list-type for defining terms, which has two components: the list term, <code><dt></code>, and the definition: <code><dd></code><span class="note">— this list is coded as a definition list</span>
<ul class="breakdown">
<li><h6>sample html:</h6></li>
<code class="sample">
<span class="num">01.</span><span class="highlight"><dl></span><br />
<span class="num">02.</span><span class="note"><dt>Fiat</dt></span><br />
<span class="num">03.</span><span class="note"><dd>an economy Italian car</dd></span><br />
<span class="num">04.</span><span class="note"><dt>Volkswagen</dt></span><br />
<span class="num">05.</span><span class="note"><dd>an economy German car</dd></span><br />
<span class="num">06.</span><span class="note"><dt>Datsun</dt></span><br />
<span class="num">07.</span><span class="note"><dd>an economy Japanese car</dd></span><br />
<span class="num">08.</span><span class="highlight"></dl></span><br />
</code>
<li><h6>rendered html:</h6></li></ul>
<span class="rendered">
<dl>
<dt>Fiat</dt><dd>an economy Italian car</dd>
<dt>Volkswagen</dt><dd>an economy German car</dd>
<dt>Datsun</dt><dd>an economy Japanese car</dd>
</dl>
</span>
</dd>
<dt><a name="definition"><code><dd></code></a><h4>definition</h4></dt><dd>the tag for the definition of the term in a definition-list
<ul class="breakdown">
<li><h6>sample html:</h6></li>
<code class="sample">
<span class="num">01.</span><span class="note"><dl></span><br />
<span class="num">02.</span><span class="note"><dt>Fiat</dt></span><br />
<span class="num">03.</span><span class="highlight"><dd></span>an economy Italian car<span class="highlight"></dd></span><br />
<span class="num">04.</span><span class="note"><dt>Volkswagen</dt></span><br />
<span class="num">05.</span><span class="highlight"><dd></span>an economy German car<span class="highlight"></dd></span><br />
<span class="num">06.</span><span class="note"><dt>Datsun</dt></span><br />
<span class="num">07.</span><span class="highlight"><dd></span>an economy Japanese car<span class="highlight"></dd></span><br />
<span class="num">08.</span><span class="note"></dl></span><br />
</code>
<li><h6>rendered html:</h6></li></ul>
<span class="rendered">
<dl>
<dt>Fiat</dt><dd>an economy Italian car</dd>
<dt>Volkswagen</dt><dd>an economy German car</dd>
<dt>Datsun</dt><dd>an economy Japanese car</dd>
</dl>
</dd>
<dt><a name="def-term"><code><dt></code></a><h4>definition-term</h4></dt><dd>this tag is for the term to be defined, in a definition-list<ul class="breakdown">
<li><h6>sample html:</h6></li>
<code class="sample">
<span class="num">01.</span><span class="note"><dl></span><br />
<span class="num">02.</span><span class="highlight"><dt></span>Fiat<span class="highlight"></dt></span><br />
<span class="num">03.</span><span class="note"><dd>an economy Italian car</dd></span><br />
<span class="num">04.</span><span class="highlight"><dt></span>Volkswagen<span class="highlight"></dt></span><br />
<span class="num">05.</span><span class="note"><dd>an economy German car</dd></span><br />
<span class="num">06.</span><span class="highlight"><dt></span>Datsun<span class="highlight"></dt></span><br />
<span class="num">07.</span><span class="note"><dd>an economy Japanese car</dd></span><br />
<span class="num">08.</span><span class="note"></dl></span><br />
</code>
<li><h6>rendered html:</h6></li></ul>
<span class="rendered">
<dl>
<dt>Fiat</dt><dd>an economy Italian car</dd>
<dt>Volkswagen</dt><dd>an economy German car</dd>
<dt>Datsun</dt><dd>an economy Japanese car</dd>
</dl>
</span>
</dd>
<dt><a name="embed"><code><embed></code></a><h4>embed</h4></dt><dd>this tag wraps around a media file, such as a video clip, to embed it in the page
<ul class="breakdown">
<li><h6>sample html:</h6></li>
<code class="sample">
<span class="num">01.</span><span class="note"><h6>YouTube sample clip</h6></span><br />
<span class="num">02.</span><span class="highlight"><embed</span> src=<em>"filepath/name/ext." <span class="note">... and here, data for the browser, such as the type of file, the dimensions to render it on the page, whether to loop it, etc."</span></em><span class="highlight">></span><br />
<span class="num">03.</span><span class="highlight"></embed></span>
</code>
<li><h6>here's a sample of <code><embed></code>code:
:</h6></li>
<code class="sample ">
<span class="note">
<span class="num">01.</span><span class="highlight"><embed</span> src="http://static.slidesharecdn.com /swf/ssplayer2.swf? doc=parsonstrend assignment-100209092625-phpapp02 &stripped_title=analyzing-trends-field-research-assignment"type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="335"<span class="highlight">></span><br />
<span class="num">02.</span><span class="highlight"></embed></span></code></span>
<p>
You don't have to worry too much about knowing the code to go inside the <code><embed></code> tags; generally, when you locate a file to embed, the code will be provided with it; you just have to paste it in your html between the <code><body></code> tags, pretty much. Nothing to it.</p>
<li><h6>rendered html:</h6></li><span class="rendered">
<h6>YouTube sample clip</h6>
<img src="../images/miscImages/Youtube_64x64.png" />
</dd>
</ul>
<dt><a name="heading"><code><h1> — <h6></code></a><h4>headings</h4></dt><dd>for providing structure to a document<code>*</code>; often used for styling text -- consider them like headlines and sub-headings, introducing paragraphs.
<span class="note"><code>*</code>A page is laid out rather like a newspaper, with the <code><divs></code> representing the articles. Properly, the <code><divs></code> have a hierarchy of headings, sub-headings, and paragraphs, just like well-written and presented articles.</span>
<ul class="breakdown">
<li><h6>sample html:</h6></li>
<code class="sample">
<span class="num">01.</span><span class="highlight"><h1></span><span class="note">
largest heading</span><span class="highlight"></h1></span><br />
<span class="num">02.</span><span class="highlight"><h2></span><span class="note">
next largest</span><span class="highlight"></h2></span><br />
<span class="num">03.</span><span class="highlight"><h3></span><span class="note">
large heading</span><span class="highlight"></h3></span><br />
<span class="num">04.</span><span class="highlight"><h4></span><span class="note">
medium heading</span><span class="highlight"></h4></span><br />
<span class="num">05.</span><span class="highlight"><h5></span><span class="note">
small heading</span><span class="highlight"></h5></span><br />
<span class="num">06.</span><span class="highlight"><h6></span><span class="note">
smallest heading</span><span class="highlight"></h6></span><br />
</code>
<li><h6>rendered html:</h6></li><span class="rendered">
<h1>largest heading</h1>
<h2>next largest</h2>
<h3>large heading</h3>
<h4>medium heading</h4>
<h5>small heading</h5>
<h6>smallest heading</h6>
</span>
</ul>
</dd>
<dt><a name="head"><code><head></code></a><h4>head</h4></dt><dd>contains information for the browser, and meta data about the webpage
<ul class="breakdown">
<li><h6>sample html:</h6></li>
<code class="sample">
<span class="num">01.</span><span class="note"><html></span><br />
<span class="num">02.</span><span class="highlight"><head></span><br />
<span class="num">03.</span><span class="note"><<em>meta data</em>></span><br />
<span class="num">04.</span><span class="note"><<em>meta data</em>></span><br />
<span class="num">05.</span><span class="note"><<em>meta data</em>></span><br />
<span class="num">06.</span><span class="highlight"></head></span><br />
<span class="num">07.</span><span class="note"><body></span><br />
<span class="num">08.</span><span class="note"><em>well-structured </em></span><br />
<span class="num">09.</span><span class="note"><em> and semantic </em></span><br />
<span class="num">10.</span><span class="note"><em>content goes</em></span><br />
<span class="num">11.</span><span class="note"><em>in here...</em></span><br />
<span class="num">12.</span><span class="note"></body></span><br />
<span class="num">13.</span><span class="note"></html></span><br />
</code>
<li><h6>rendered html:</h6></li>
<span class="rendered">
There's really nothing to see, folks -- but rest assured, the <code><head></code> tag is hard at work at every website you visit. It opens the section which contains all the meta-data, telling the browser what sort of file types are to be found, so it knows how to respond, and providing keywords and other indexing data, for the search engine spider-bots to collect and file, trawling the web while we sleep.</span></ul>
</dd>
<dt><a name="html"><code><html></code></a><h4>html</h4></dt><dd>tells the browser which language type to decode
<ul class="breakdown">
<li><h6>sample html:</h6></li>
<code class="sample">
<span class="num">01.</span><span class="highlight"><html></span><br />
<span class="num">02.</span><span class="note"><head></span><br />
<span class="num">03.</span><span class="note"><<em>meta data</em>></span><br />
<span class="num">04.</span><span class="note"><<em>meta data</em>></span><br />
<span class="num">05.</span><span class="note"><<em>meta data</em>></span><br />
<span class="num">06.</span><span class="note"></head></span><br />
<span class="num">07.</span><span class="note"><body></span><br />
<span class="num">08.</span><span class="note"><em>well-structured </em></span><br />
<span class="num">09.</span><span class="note"><em> and semantic </em></span><br />
<span class="num">10.</span><span class="note"><em>content goes</em></span><br />
<span class="num">11.</span><span class="note"><em>in here...</em></span><br />
<span class="num">12.</span><span class="note"></body></span><br />
<span class="num">13.</span><span class="highlight"></html></span><br />
</code>
<li><h6>rendered html:</h6></li></ul>
<span class="rendered">Again, not much to see -- rather a bit of the old <em>deus ex machina</em>; if that <code><html></code> tag hadn't been there, the browser wouldn't know how to interpret the code.</span>
</dd>
<dt><a name="image"><code><img /></code></a><h4>image</h4></dt><dd>links to and inserts an image from a directory
<ul class="breakdown">
<li><h6>sample html:</h6></li>
<code class="sample">
<span class="num">01.</span><span class="note"><h4>Green Fly on Barberry</h4></span><br />
<span class="num">02.</span><span class="highlight"><img</span> src="images/green-fly.jpg" /<span class="highlight">></span><br />
<span class="num">03.</span><span class="note">you can see my reflection on the back of that fly.</span>
</code>
<li><h6>rendered html:</h6></li></ul>
<span class="rendered">
<h4>Green Fly on Barberry</h4>
<img src="../images/green-fly-68sq.jpg" /><br />
you can see my reflection on the back of that fly.
</span>
</dd>
<dt><a name="list-item"><code><li></code></a><h4>list-item</h4></dt><dd>a list item for an ordered or unordered list
<ul class="breakdown">
<li><h6>sample html:</h6></li>
<code class="sample">
<span class="num">01.</span><span class="note">to make apple pie, you'll need:</span><br />
<span class="num">02.</span><span class="note"><ul></span><br />
<span class="num">03.</span><span class="highlight"><li></span><span class="note">apples</span><span class="highlight"></li></span><br />
<span class="num">04.</span><span class="highlight"><li></span><span class="note">pastry</span><span class="highlight"></li></span><br />
<span class="num">05.</span><span class="highlight"><li></span><span class="note">a rolling pin</span><span class="highlight"></li></span><br />
<span class="num">06.</span><span class="highlight"><li></span><span class="note">sugar and tapioca</span><span class="highlight"></li></span><br />
<span class="num">07.</span><span class="highlight"><li></span><span class="note">cinnamon and butter</span><span class="highlight"></li></span><br />
<span class="num">08.</span><span class="highlight"><li></span><span class="note">a pie plate</span><span class="highlight"></li></span><br />
<span class="num">09.</span><span class="highlight"><li></span><span class="note">a knife</span><span class="highlight"></li></span><br />
<span class="num">10.</span><span class="highlight"><li></span><span class="note">an oven</span><span class="highlight"></li></span><br />
<span class="num">11.</span><span class="note"></ul></span><br />
</code>
<li><h6>rendered html:</h6></li></ul>
<span class="rendered note">
to make apple pie, you'll need:<br />
<ul class="standard">
<li>apples</li>
<li>pastry</li>
<li>a rolling pin</li>
<li>sugar and tapioca</li>
<li>cinnamon and butter</li>
<li>a pie plate</li>
<li>a knife</li>
<li>an oven</li>
</ul>
</span>
</dd>
<dt><a name="link"><code><link /></code></a><h4>link</h4></dt><dd>this tag wraps around a file used by the browser to assist in processing the page, such as a stylesheet (css file), or script (javascript file) -- <code><link></code> tags are generally found in the <code><head></code> section of the markup
<ul class="breakdown">
<li><h6>sample html:</h6></li>
<code class="sample">
<span class="num">01.</span><span class="note"><html></span><br />
<span class="num">02.</span><span class="note"><head></span><br />
<span class="num">03.</span><span class="note"><meta data</span>><br />
<span class="num">04.</span><span class="note"><meta data</span>><br />
<span class="num">05.</span><span class="note"><meta data</span>></span><br />
<span class="num">06.</span><span class="highlight"><link</span> <span class="note">rel=stylesheet href="css/style.css" type="text/css" media=screen</span><span class="highlight">></span><br />
<span class="num">07.</span><span class="note"></head></span><br />
<span class="num">08.</span><span class="note"><body></span><br />
<span class="num">09.</span><span class="note">well-structured </span><br />
<span class="num">10.</span><span class="note">and semantic </span><br />
<span class="num">11.</span><span class="note">content goes</span><br />
<span class="num">12.</span><span class="note">in here...</span><br />
<span class="num">13.</span><span class="note"></body></span><br />
<span class="num">14.</span><span class="note"></html></span><br />
</code>
<li><h6>rendered html:</h6></li></ul>
<span class="rendered"><p>Well, once again, not much to see here. But if that <code><link></code> tag hadn't been there? The page wouldn't have retrieved and parsed the css stylesheet, and the site would look much different without it. If you're able, with your browser, to "disable styles," try it, to see what I mean about the importance of the stylesheet.</p><p>The text in the <code><link /></code> tag tells the browser to link to a document and run it; instructions about the file location and type are included in the tag:
<dl>
<dt><code>rel=stylesheet</code></dt><dd>this states the "relation" of the document to the current html file being rendered.</dd>
<dt><code>href="css/style.css"</code></dt><dd>this is the "reference" information, telling the browser in which directory to find the linked file; in this case, the file is "style.css," in the "css" directory.</dd>
<dt><code>type="text/css"</code></dt><dd>this tells the browser the type of file -- perhaps javascript, which is common, but in this case, it's a text file, and a Cascading Style Sheet document. The browser then knows to apply the styles in the css document to the related tags in the html document.</dd>
<dt><code>media=screen</code></dt><dd><p>This tells the browser the medium to which the styles should be applied; in this case, it's to the "screen" medium, the conventional and default way in which browsers render html files, and to which a Cascading Style Sheet document is generally applied.</p><p>
However, "print" styles are frequently applied, to enable a user to print only the pertinent information from the page, and not print the navigation, which, in the <code>media=print</code> css file, could be styled to be hidden, to not display, to display off-page, etc.
</p></dd>
</dl>
</p></span>
</dd>
<dt><a name="meta"><code><meta /></code></a><h4>meta data</h4></dt><dd>information about the page, including keywords, usually for search engine databases to index
<ul class="breakdown">
<li><h6>sample html:</h6></li>
<code class="sample">
<span class="num">01.</span><span class="note"><html></span><br />
<span class="num">02.</span><span class="note"><head></span><br />
<span class="num">03.</span><span class="highlight"><meta</span> <span class="note">name="keywords" content="html tags, list, html tag list, html tags, html, tags" </span><span class="highlight">/></span><br />
<span class="num">04.</span><span class="highlight"><meta</span> <span class="note">name="generator" content="NoteTab Pro 6.1" </span><span class="highlight">/></span><br />
<span class="num">05.</span><span class="highlight"><meta</span> <span class="note">name="description" content="list of standard and common html tags" </span><span class="highlight">/></span><br />
<span class="num">06.</span><span class="note"></head></span><br />
<span class="num">07.</span><span class="note"><body></span><br />
<span class="num">08.</span><span class="note">well-structured </span><br />
<span class="num">09.</span><span class="note">and semantic </span><br />
<span class="num">10.</span><span class="note">content goes</span><br />
<span class="num">11.</span><span class="note">in here...</span><br />
<span class="num">12.</span><span class="note"></body></span><br />
<span class="num">13.</span><span class="note"></html></span><br />
<li><h6>rendered html:</h6></li></ul>
<span class="rendered">Of course, if it's in the <code><head></code> of the document, you're not going to see what's there -- or rather, the data in the <code><head></code> enables your browser to have the best shot at rendering the content for you. The <code><meta /></code> tags contain data that not only tells the browser what sort of file it is, and thus how to render it, but also has data for search engines to index, such as the keywords: in the example above, I used some of the <code><meta /></code> tags from this page. Once the spider-bots have found and indexed those keywords, this page will enter the search engine rankings when one searches using those keywords, such as "html tags."
</dd>
<dt><a name="ord-list"><code><ol></code></a><h4>ordered-list</h4></dt><dd>a numbered list
<ul class="breakdown">
<li><h6>sample html:</h6></li>
<code class="sample">
<span class="num">01.</span><span class="note"><h5>to survive in the wild</h5></span><br />
<span class="num">02.</span><span class="note">you'll need:</span><br />
<span class="num">03.</span><span class="highlight"><ol></span><br />
<span class="num">04.</span><span class="note"><li>boots</li></span><br />
<span class="num">05.</span><span class="note"><li>a sweater</li></span><br />
<span class="num">06.</span><span class="note"><li>a hat</li></span><br />
<span class="num">07.</span><span class="note"><li>a knife</li></span><br />
<span class="num">08.</span><span class="note"><li>savvy</li></span><br />
<span class="num">09.</span><span class="highlight"></ol></span><br />
</code>
<li><h6>rendered html:</h6></li></ul>
<span class="rendered note">
<h5>to survive in the wild</h5>
you'll need:
<ol class="standard">
<li>boots</li>
<li>a sweater</li>
<li>a hat</li>
<li>a knife</li>
<li>savvy</li>
</ol>
</span>
<span class="note">Note that the numbers for the list were generated by the browser, knowing what to do with an ordered list. An unordered list gets bullets, as you may have noticed above, in the note about <code><li></code>, and as you will see again below, when we get to <code><ul></code>.
</span>
</dd>
<dt><a name="paragraph"><code><p></code></a><h4>paragraph</h4></dt><dd>a block of text; a paragraph; used in semantic markup to structure the html document into logical sections; paragraphs are the building block of <code><divs></code>, mostly (that, and lists)(in my opinion)(but then, it's my website, isn't it?).
<ul class="breakdown">
<li><h6>sample html:</h6></li>
<code class="sample">
<span class="num">01.</span><span class="note"><body></span><br />
<span class="num">02.</span><span class="highlight"><p></span><span class="note">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </span>
<span class="highlight"></p></span><br />
<span class="num">03.</span><span class="highlight"><p></span><span class="note">Aenean sit amet libero aliquet mi volutpat faucibus.</span><span class="highlight"></p></span><br />
<span class="num">04.</span><span class="note"></body></span>
</code>
<li><h6>rendered html:</h6></li></ul>
<span class="rendered">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Aenean sit amet libero aliquet mi volutpat faucibus.</p>
</span>
</dd>
<dt><a name="span"><code><span></code></a><h4>span</h4></dt><dd>this tag wraps around content, usually to give it a "hook" for styling with css.<br />
The <code><span></code>, and often the "empty" <code><span></code>, is one of the css-oriented developer's best hat-tricks (take a look at <a href="css-manifesto.htm">css: an overview</a>, for a look at the utility of css).
Essentially, a <code><span></code> tag goes around text which might need special styling (which, according to standards and logic, you don't specify in the html markup. <br />
For example, in the code samples shown here, the pertinent tag in the sample is, in my own markup, wrapped in a <code><span></code> tag with the class of "highlight."
<ul class="breakdown">
<li><h6>sample html:</h6></li>
let's say the sample tag here is <code><body></code>, in my markup for this little sample (actually, it's almost scary looking, the actual markup necessary to render what <em>looks</em> like html -- otherwise, the browser will try to render it! I'll throw in a sample of my convoluted markup for these samples, down below):
<code class="sample">
<span class="num">01.</span><span class="note"><html></span><br />
<span class="num">02.</span><span class="note"><head></span><br />
<span class="num">03.</span><span class="note"></head></span><br />
<span class="num">04.</span><span class="highlight"><span </span>class="highlight"<span class="highlight">></span><span class="highlight "><body></span><span class="highlight"></span></span> <br />
<span class="num">04.</span><span class="highlight"><span </span>class="highlight"<span class="highlight">></span><span class="highlight "></body></span><span class="highlight"></span> </span><br />
<span class="num">05.</span><span class="note"></html></span><br />
</code>
<li><h6>a spot of my actual markup:</h6></li></ul>
<span class="rendered">
<span class="num">04.</span><span class="highlight">$lt;span </span>class="highlight"< span class="highlight">$gt;< /span><span class="highlight">$lt;body$gt;</span><span class="highlight">$lt;/span$lg;</span> <br />
</span>
</dd>
<dt><a name="table"><code><table></code></a><h4>table</h4></dt><dd>inserts a table; formerly the positioning strategy for old-school graphic web design, the table's role for rendering tabular data has been restored (that's worth an exclamation point!).
<ul class="breakdown">
<li><h6>sample html:</h6></li>
<code class="sample">
<span class="num">01.</span><span class="highlight"><table</span> <span class="note">border="1" width="100%"</span><span class="highlight">></span><br />
<span class="num">02.</span><span class="note"><tr></span><br />
<span class="num">03.</span><span class="note"><td> A</td></span><br />
<span class="num">04.</span><span class="note"> <td>B</td></span><br />
<span class="num">05.</span><span class="note"><td>C</td></span><br />
<span class="num">06.</span><span class="note"></tr></span><br />
<span class="num">07.</span><span class="note"><tr></span><br />
<span class="num">08.</span><span class="note"> <td>X</td></span><br />
<span class="num">09.</span><span class="note"><td>Y</td></span><br />
<span class="num">10.</span><span class="note"><td>Z</td></span><br />
<span class="num">11.</span><span class="note"></tr></span><br />
<span class="num">12.</span><span class="highlight"></table></span><br />
</code>
<li><h6>rendered html:</h6></li></ul>
<span class="rendered">
<table border="1" width="100%">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>X</td>
<td>Y</td>
<td>Z</td>
</tr>
</table>
</span>
</dd>
<dt><a name="table-cell"><code><td></code></a><h4>table cell</h4></dt><dd>wraps around the data in a cell in the table
<ul class="breakdown">
<li><h6>sample html:</h6></li>
<code class="sample">
<span class="num">01.</span><span class="note"><table border="1" width="100%"></span><br />
<span class="num">02.</span><span class="note"><tr></span><br />
<span class="num">04.</span><span class="highlight"><td></span>A<span class="highlight"></td></span><br />
<span class="num">05.</span><span class="highlight"> <td></span>B<span class="highlight"></td></span><br />
<span class="num">06.</span><span class="highlight"><td></span>C<span class="highlight"></td></span><br />
<span class="num">07.</span><span class="note"></tr></span><br />
<span class="num">08.</span><span class="note"><tr></span><br />
<span class="num">09.</span><span class="highlight"> <td></span>X<span class="highlight"></td></span><br />
<span class="num">10.</span><span class="highlight"><td></span>Y<span class="highlight"></td></span><br />
<span class="num">11.</span><span class="highlight"><td></span>Z<span class="highlight"></td></span><br />
<span class="num">12.</span><span class="note"></tr></span><br />
<span class="num">13.</span><span class="note"></table></span><br />
</code>
<li><h6>rendered html:</h6></li></ul>
<span class="rendered">
<table border="1" width="100%">
<tr>
<td> A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>X</td>
<td>Y</td>
<td>Z</td>
</tr>
</table>
</span>
</dd>
<dt><a name="table-heading"><code><th></code></a><h4>table heading</h4></dt><dd>the table heading; used to explain the relationship of the data in the table</dd>
<ul class="breakdown">
<li><h6>sample html:</h6></li>
<code class="sample">
</code>
<li><h6>rendered html:</h6></li></ul>
<span class="rendered">
</span>
</dd>
<dt><a name="table-row"><code><tr></code></a><h4>table row</h4></dt><dd>wraps around each row in the table
<ul class="breakdown">
<li><h6>sample html:</h6></li>
<code class="sample">
<span class="num">01.</span><span class="note"><table border="1" width="100%"></span><br />
<span class="num">02.</span><span class="highlight"><tr></span><br />
<span class="num">03.</span><span class="note"><td> A</td></span><br />
<span class="num">04.</span><span class="note"> <td>B</td></span><br />
<span class="num">05.</span><span class="note"><td>C</td></span><br />
<span class="num">06.</span><span class="highlight"></tr></span><br />
<span class="num">07.</span><span class="highlight"><tr></span><br />
<span class="num">08.</span><span class="note"> <td>X</td></span><br />
<span class="num">09</span> <span class="note"><td>Y</td></span><br />
<span class="num">10.</span><span class="note"><td>Z</td></span><br />
<span class="num">11.</span><span class="highlight"></tr></span><br />
<span class="num">12.</span><span class="note"></table></span><br />
</code>
<li><h6>rendered html:</h6></li></ul>
<span class="rendered">
<table border="1" width="100%">
<tr>
<td> A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>X</td>
<td>Y</td>
<td>Z</td>
</tr>
</table>
</span>
</dd>
<dt><a name="title"><code><title></code></a><h4>title</h4></dt><dd>the title of the webpage; search engines use it to index the page in the database, and browswers usually render it on the window or tab
<ul class="breakdown">
<li><h6>sample html:</h6></li>
<code class="sample">
<span class="num">01.</span><span class="note"><html></span><br />
<span class="num">02.</span><span class="note"><head></span><br />
<span class="num">03.</span><span class="highlight"><title></span>corax design :: html tags<span class="highlight"></title></span><br />
<span class="num">04.</span><span class="note"><<em>meta data</em>></span><br />
<span class="num">05.</span><span class="note"><<em>meta data</em>></span><br />
<span class="num">06.</span><span class="note"><<em>meta data</em>></span><br />
<span class="num">07.</span><span class="note"></head></span><br />
<span class="num">08.</span><span class="note"><body></span><br />
<span class="num">09.</span><span class="note"><em>well-structured </em></span><br />
<span class="num">10.</span><span class="note"><em> and semantic </em></span><br />
<span class="num">11.</span><span class="note"><em>content goes</em></span><br />
<span class="num">12.</span><span class="note"><em>in here...</em></span><br />
<span class="num">13.</span><span class="note"></body></span><br />
<span class="num">14.</span><span class="note"></html></span><br />
</code>
<li><h6>rendered html:</h6></li></ul>
<span class="rendered">
take a look at the top of your browser window, or at the tab, to see the title appear, from this page's code.
</span>
</dd>
<dt><a name="unord-list"><code><ul></code></a><h4>unordered-list</h4></dt><dd>a list, with no order
<ul class="breakdown">
<li><h6>sample html:</h6></li>
<code class="sample">
<span class="num">01.</span><span class="note">to make apple pie, you'll need:</span><br />
<span class="num">02.</span><span class="highlight"><ul></span><br />
<span class="num">03.</span><span class="note"><li>apples </li></span><br />
<span class="num">04.</span><span class="note"><li>pastry </li></span><br />
<span class="num">05.</span><span class="note"><li>a rolling pin </li></span><br />
<span class="num">06.</span><span class="note"><li>sugar and tapioca </li></span><br />
<span class="num">07.</span><span class="note"><li>cinnamon and butter </li></span><br />
<span class="num">08.</span><span class="note"><li>a pie plate </li></span><br />
<span class="num">09.</span><span class="note"><li>a knife </li></span><br />
<span class="num">10.</span><span class="note"><li>an oven </li></span><br />
<span class="num">11.</span><span class="highlight"></ul></span><br />
</code>
<li><h6>rendered html:</h6></li></ul>
<span class="rendered note">
to make apple pie, you'll need:<br />
<ul class="standard">
<li>apples</li>
<li>pastry</li>
<li>a rolling pin</li>
<li>sugar and tapioca</li>
<li>cinnamon and butter</li>
<li>a pie plate</li>
<li>a knife</li>
<li>an oven</li>
</ul>
</span>
</dd>
<dt><a name="comment"><code><!-- ~~ --></code></a><h4>comment</h4></dt><dd>insert a comment in the html (replace "<code> ~~ </code>" above), which the browser will ignore
<ul class="breakdown">
<li><h6>sample html:</h6></li>
<code class="sample">
<span class="num">01.</span><span class="note"><body></span><br />
<span class="num">02.</span><span class="note"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p></span><br />
<span class="num">03.</span><span class="highlight"><!-- </span>I think there's a short paragraph missing 021110 bc <span class="highlight"> --></span><br />
<span class="num">04.</span><span class="note"><p>Aenean sit amet libero aliquet mi volutpat faucibus.</p></span>
<span class="num">05.</span><span class="note"></body></span>
</code>
<li><h6>rendered html:</h6></li></ul>
<span class="rendered">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Aenean sit amet libero aliquet mi volutpat faucibus.</p>
</span>
</dd>
</dl>
</div><!--close"resources"-->
</div><!--end"wrapper"-->
<div id="credits"class="credits">
unless otherwise specified, all the contents of this website are for your personal and non-commercial use (and certainly, for your enjoyment).<br />——<br />however, you may not modify, copy, distribute, transmit, display, perform, reproduce, publish, license, create derivative works from, transfer, or sell any information or services obtained from this website, except under specified, and likely academic circumstances, as for research, or to quote brief examples in a review or search term result, unless explicitly specified.<br />——<br /><!-- | -->all material, however derivative of contemporary culture, has been envisioned, articulated, created, designed, generated, written, illustrated, produced, directed, hand-coded inspired, and hauled, gasping, up on the sandy shore, by <br /><a href="http://www.coraxdesign.com"target="blank">andy corax</a> and <a href="http://www.bartoncole.com"target="blank">barton cole</a>, unless otherwise noted.<br />——<br /><!-- | -->powered by <a href="http://en.wikipedia.org/wiki/CSS"target="blank"class="ex-link">css</a>, <a href="http://jquery.com/"target="blank">jquery</a>, and <a href="http://www.coraxdesign.com"target="blank">corax design</a><br />all content © 2007 - 2010 <a href="http://www.caferoundroad.com"target="blank">caféroundroad</a><br />all rights reserved
</div><!--end"credits"-->
<div id="sitework">sitework »<br /><a href="http://www.coraxdesign.com"target="blank" title="Corax Design :: we'll build, host, and manage your site, and we're all genius-weirdos!">coraxdesign.com</a>
</body>
</html>
back to the top ↑ of the page.
The css (Cascading Style Sheet) for this page
used to style the html tags
/*stylesheet for xxxxxxxxxx.xxx
created by:
date:
email: factotum@coraxdesign.com
website: http://www.coraxdesign.com
*/
/*
Directory of this file:
> Base CSS
> working borders/backgrounds
> global
> box properties
> colors
> links
> fonts
> images
> lists
> tables
> forms
> miscellaneous classes
> sitework
END Directory
*/
/*================Base CSS=====================
This file simply removes old-schoolstyling on most HTML elements in order to reduce the need to later override them. copied from source css www.freakswhocare.org
*/
h2,h3,h4,h5,h6,pre,code,p {font-size: 1em;}
ul,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input {margin: 0; padding: 0;}
a img,:link img,:visited img {border: none;}
address {font-style: normal;}
/* a {text-decoration:none;} */
ul {list-style-type:none;}
/*---END Base CSS--------------------END*/
/* working borders/backgrounds =========
#wrapper {background:black;}
#logo {background:blue;}
#header {background:transparent url("..images/transBack1.png") top left repeat;}
#nav-menu{background:red;}
#search {background:white;}
#breadcrumbs {background:white;}
#left {background:#3d3e41;}
#contact {background:red;}
#credits {background:blue;}
#supp-1 {background: green;}
#content {background:white;}
#resources {background:orange;}
==END working borders/backgrounds END===*/
/*== global ------------------------------*/
body {
background:#1d1e21;
font:1em trebuchet, arial, helvetica, sans-serif;
}
h1 {font-size:2.5em;}
h2 {font-size:1.8em;}
h3 {font-size:1.5em;}
h4 {font-size:1.3em;}
h5 {font-size:1.15em;}
h6 {font-size:1em;}
/*---- END global ==========END*/
/*==
box properties: position, margins, padding
----*/
#wrapper {
position:relative;
width:800px;
height:1000px /*auto*/;
top:0;
left:50%;
margin-left:-400px;
min-width:800px;
}
#logo {
position:fixed;
width:150px;
height:200px;
top:0;
left:50%;
margin-left:-390px;
margin-top:0px;
padding:0;
}
#header {
background:black;
z-index:5;
position:fixed;
width:630px;
height:60px;
top:0;
left:50%;
margin-top:0px;
padding-top:3px;
margin-left:-220px;
}
#header {background:transparent url("..images/transBack1.png") top left repeat;}
#nav-menu {
}
#search {
}
#breadcrumbs {
z-index:20;
}
#left {
position:fixed;
width:150px;
height:auto;
top:0;
left:50%;
margin-left:-390px;
margin-top:210px;
padding:.5em;
}
#credits {
position:fixed;
width:10em;
bottom:0;
left:0;
margin-bottom:.5em;
margin-left:.5em;
line-height:.85em;
font-size:.65em;
}
#supp-1 {
position:static;
margin-top:2em;
margin-left:-.5em;
border-top:8px solid #1d1e21;
height:20px;
width:100%;
padding:0em .5em;
}
#content {
position:absolute;
display:block;
width:50%;
height:auto;
top:0;
left:50%;
margin-left:-220px;
margin-top:58px;
padding:1em;
line-height:1.4em;
background:#f4f4d8;
color:#333333;
}
#resources {
position:fixed;
width:186px;
left:50%;
margin-top:93px;
margin-left:210px;
height:400px;
overflow:auto;
padding:.5em;
}
#breadcrumbs{
position:fixed;
width:175px;
left:50%;
margin-top:58px;
margin-left:210px;
height:28px;
line-height:1.15em;
padding:0em 1em;
background:#cccccc;
}
/*----
END box properties: position, margins, padding END
================= ==============================*/
/*==
colors
----*/
#content {background:#ffffff;}
.sample {
display:block;
background:#d8d8d8;
width:95%;
height:auto;
margin:.25em .3em;
padding:.25em;
color:#414141;
}
#left {background:#3d3e41;color:#ffbb00;}
#header {background:#3d3e41;}
#resources {background:#3d3e41;}
/*----
END colors END
================= ==============================*/
/*==
links
----*/
a {text-decoration:none;
}
#content a{font-weight:bold;}
#content a:link {color:#574438;}
#content a:visited {color:#8a7551;}
#content a:hover {color:#ed810e;}
#content a:active {color:#333333;}
#supp-1 a {font-weight:bold;font:1.5em arial, helvetica, sans-serif;line-height:27px;padding-right:2em;}
#supp-1 a:link {color:#574438;background:transparent url("../images/arrow-right-ffa500.png") center right no-repeat;}
#supp-1 a:visited {color:#8a7551;background:transparent url("../images/arrow-right-ffa500.png") center right no-repeat;}
#supp-1 a:hover {color:#ed810e;background:transparent url("../images/arrow-right-ffa500-hover.png") center right no-repeat;}
#supp-1 a:active {color:#333333;}
#contact a:link{color:orange;}
#contact a:visited {color:#666666;;}
#contact a:hover{color:white;}
#contact a:active{color:red;}
#credits a:visited {color:#333333;}
#credits a:hover {color:#ed8a09;}
#credits a:active {color:white;}
#credits {color:#333333; /*this is in here, rather than fonts, as it's */
/* obscure until hovered-over... */
}
#credits a:link {color:#333333;
}
#credits:hover a:link {
color:#ffbb00;
}
#credits:hover a:visited {
color:#ffbb00;
}
#credits:hover a:hover{
color:#ed8a09;
}
#credits:hover a:active{
color:red;
}
#credits:hover {
color:#ffffff;
}
#resources a {font-weight:bold;}
#resources a:link {color:#f5d316;}
#resources a:visited {color:#f5d316;}
#resources a:hover {color:#bbb;}
#resources a:active {color:yellow;}
.old-school a {text-decoration:underline;}
.old-school a:link {color:blue;}
.old-school a:hover {color:blue;}
.old-school a:visited {color:purple;}
.old-school a:active {color:blue;}
.old-school a img {border:1px solid blue;}
code a {text-decoration:none;}
code a:link {color:blue;}
code a:hover {color:#ffbb00;}
code a:visited {color:blue;}
#content td a:link code {color:blue;}
#content td a:visited code {color:blue;}
#content td a:hover code {color:#ffbb00;}
#content td a:active code {color:#333333;}
#resources a {font-size:.8em;}
a.wiki {line-height:16px;margin-left:8px;padding:2px;padding-left:22px;background:white url("../images/wikipediaGlobe16px.png") 2px 50% no-repeat;border:1px solid #a69393;display:inline-block;width:auto;}
#resources a code {display:block;font-size:2.5em;background:transparent;color:#ffbb00;margin-top:.5em;padding-top:.5em;}
#resources code.sample {font-size:1.1em;background:white;color:black;padding:.25em;}
#resources code.sample .highlight {color:blue;}
#resources .rendered {display:block;border:1px dotted #ffbb00;padding:.25em;}
#resources code.sample .note {display:inline;margin-bottom:0em;padding-bottom:0em;padding-left:0em;}
ul.quick-links a.ex-link1 {
background:transparent url("../images/exlink1.png") no-repeat left 50%;
padding-left:1.5em;
}
ul.quick-links a:hover.ex-link1 {
background:transparent url("../images/exlink-blink.gif") no-repeat left 50%;}
a.ex-link1 {
background:transparent url("../images/exlink1.png") no-repeat right 50%;
padding-right:1.1em;
}
a:hover.ex-link1 {
background:transparent url("../images/exlink-blink.gif") no-repeat right 50%;}
a.mail-link {padding-left:18px;background:transparent url("../images/mail.png") top left no-repeat;font-size:.85em;font-weight:normal;}
a:hover.mail-link {padding-left:18px;background:transparent url("../images/mailB.png") top left no-repeat;font-size:.85em;font-weight:normal;}
.old-school code a {text-decoration:none;}
/*----
END links END
================= ==============================*/
/*==
fonts
----*/
#content {font:.8em arial, helvetica, sans-serif;
color:#333333/*#e5e5e5 #414141*/;
letter-spacing:.05em;
line-height:1.4em;}
}
p {margin:.5em 0em;
line-height:1.4em;}
#resources .rendered p {margin:.5em 0em;}
code {display:inline;
position:relative;
white-space:normal;
font-size:1.1em;
color:#414141;
width:auto;
font-weight:bold;
background:#d8d8d8;
padding:0px 3px;
}
#content table code {background:transparent;}
code.total.tiny {background:white;font-size:.6em;line-height:.6em;white-space:pre;white-space:wrap;z-index:0;}
code.css {white-space:pre;}
code strong {color:#b30000;}
code .num {color:green}
h3.purple {
font:40px impact;
color:purple;
}
#resources {
font-size:.8em;
line-height:1.1em;
letter-spacing:.05em;
color:#eeeeee;}
#left {font-size:.8em;}
#contact {
font-size:1em;
font-weight:bold;
}
.factotum {
font-size:1.5em;
}
#breadcrumbs {
font-size:.7em;
}
.tiny {
font-size:.5em;
}
.note {
display:block;
padding:.15em;
font-size:.8em;
letter-spacing:.0em;
line-height:.9em;}
ul.services.flow .note {
display:block;
padding:.15em;
font-size:.85em;
letter-spacing:.05em;
line-height:.9em;
}
#content h1 {
font:2.5em garamond, "times new roman", serif;
font-weight:bold;
padding:.5em .5em;
text-align:center;
}
#content h1, h2, h3, h4, h5, h6 {
padding:.25em;
margin:.25em;
line-height:1em;
}
#resources h1, h2, h3, h4, h5, h6 {
font-family:garamond, "times new roman", serif;
font-weight:bold;
line-height:.9em;
margin:.25em;
padding:.25em;
}
#resources h1 {
font-size:2.5em;
}
#resources h2 {
font-size:2.2em;
}
#resources h3 {
font-size:1.8em;
}
#resources h4 {
font-size:1.5em;
}
#resources h5 {
font-size:1.3em;
}
#resources h6 {
font-size:1.1em;
line-height:1em;
}
blockquote {font-size:.9em;margin:.5em 1.5em;padding:0em 1em;min-height:60px;}
h2.huge {font-size:3.5em;font-family:trebuchet, arial, helvetica, sans-serif;top:0;margin-top:0;text-transform:none;color:#777777;padding-left:10px;padding-top:10px;}
.note {font-size.8em;width:80%;}
/*----
END fonts END
================= ==============================*/
/*==
images
----*/
#credits {
background:transparent url("../images/Q-mark-ghostA.png") bottom left no-repeat;
}
#credits:hover {
background-image:none;
}
.question {background:transparent url("../images/question.png") right center no-repeat;}
.answer {background:transparent url("../images/answer.png") right top no-repeat;}
img.sample1 {border:3px solid black;margin:10px;}
img.sample2 {
margin:10px;
padding:15px;
border-top:1px solid #ccc;
border-right:1px solid #333;
border-bottom: 1px solid #333;
border-left: 1px solid #ccc;
}
img.sample3 {
margin:10px;
padding:15px;
border-top:1px solid #ccc;
border-right:1px solid #333;
border-bottom: 1px solid #333;
border-left: 1px solid #ccc;
background:#f9f4f4;}
#breadcrumbs {
background:black url("../images/30pxRndCrnr-f4f4d8-1d1e21-right.gif") right center no-repeat;
padding-top:2px;
}
#breadcrumbs .round {
position:relative;
height:auto;
width:auto;
margin-left:-12px;
padding-left:12px;
background:white url("../images/20pxRndRectWtBlk-left.gif") left top no-repeat;
}
#content img {margin:1em;margin-left:0em;}
#content img.franklin {
clear:left;
float:left;
margin:1em 0em;
position:relative;
left:50%;
margin-left:-75px;
}
/* here's the CSS for drop shadows; the images are in /image/shadow */
.shadowed {background:white url("../images/shadow/dropShad-ffffff.jpg") right bottom no-repeat;}
.shadowed-rt {background:white url("../images/shadow/dropShad-topright-ffffff.jpg") right -60px no-repeat;}
.shadowed-lb {padding-right:40px;padding-bottom:40px;background:white url("../images/shadow/dropShad-btmleft-ffffff.jpg") -60px bottom no-repeat;}
#content.splash {
background:white url("../images/philoBack.jpg") top left repeat;
}
#content blockquote {
padding-left:60px;background:transparent url("../images/quote-open-A.png") top left no-repeat;
}
#content blockquote div{
padding-right:60px;background:transparent url("../images/quote-close-A.png") bottom right no-repeat;
}
#resources blockquote {
padding-left:60px;background:transparent url("../images/quote-open-B.png") top left no-repeat;
}
#resources blockquote div{
padding-right:60px;background:transparent url("../images/quote-close-B.png") bottom right no-repeat;
}
.tlc {background:transparent url("../images/corner/tlc-1d1e21.png") top left no-repeat;}
.trc {background:transparent url("../images/corner/trc-1d1e21.png") top right no-repeat;}
.brc {background:transparent url("../images/corner/brc-1d1e21.png") bottom right no-repeat;}
.blc {background:transparent url("../images/corner/blc-1d1e21.png") bottom left no-repeat;}
#content img.thumb {
margin:.15em;
float:left;
}
.figure { /*accompanies two classes below to make for captioned images */
float:left;
position:relative;
background:transparent url("../images/50trans.png") top right repeat;
margin-bottom:1.5em;
}
#content img.thumb.caption-added {display:block;margin:1em .75em;}
.caption {
position:absolute;
bottom:-1em;
left:0;
}
/*----
END images END
================= ==============================*/
/*==
lists
----*/
ul .quick-links li {
font-size:.9em;
display:block;
line-height:8px;
}
ul.sitemap {
line-height:.8em;
font:.9em serif;
}
ul.sitemap h4{
margin:.05em 0em;
}
ul.sitemap li {
line-height:.8em;
padding-left:.3em;
}
ul.sitemap li ul li {
padding-left:.65em;
}
ul.sitemap li ul li ul li {
padding-left:.95em;
}
ul.sitemap li ul li ul li ul li{
padding-left:1.25em;
}
ul.sitemap a:hover {text-decoration:underline;}
#content dl dt {
font-weight:bold;
}
#content dl dd {
font-weight:normal;
text-transform:italic;
margin-left:2em;
}
#content dl ul {
margin-left:1em;}
#content dl ul li {
margin-top:.25em;
padding-left:15px;
background:transparent url("../images/check-bullet-tiny.png") 0px 2px no-repeat;
}
#resources ul.tools li {
margin:.25em;
padding-left:15px;
background:transparent url("../images/check-bullet-yellow-tiny.png") 0px 2px no-repeat;
}
#resources ul.flow {
margin-top:1em;
margin-left:1.5em;
list-style-image:url("../images/yel-rect-bullet.png");
}
#resources ul.breakdown {
margin-left:1.5em;
list-style-image:url("../images/yel-rect-broken-bullet.png");
}
#resources ul.flow li, #resources ul.breakdown li {
padding-top:.15em;
}
#content ul.flow {
margin-top:1em;
margin-left:1.5em;
list-style-image:url("../images/yel-rect-bullet.png");
}
#content ul.breakdown {
margin-left:1.5em;
list-style-image:url("../images/yel-rect-broken-bullet.png");
}
#content ul.flow li, #resources ul.breakdown li {
padding-top:.15em;
}
dl.glossary dt {
font-weight:bold;
font-size:1.3em;
margin:.35em 0em;
font-family:garamond, "times new roman", serif;
padding-left:1em;
background:transparent url("../images/yel-rect-bullet.png") center left no-repeat;
}
dl.glossary dd {
margin-left:1.5em;
}
#resources dl dd code {line-height:.8em;color:#ffbb00;padding:0;background:transparent;}
#resources .rendered dl {
font-size:.9em;
}
#resources .rendered dt {font-weight:bold;}
#resources .rendered dd {margin-left:1em;}
#resources .rendered ul.standard {list-style:square;padding-left:2em;}
#resources .rendered ol.standard {list-style:decimal;padding-left:2em;}
/*----
END lists END
================= ==============================*/
/*==
tables
----*/
/* insert styles here */
/*----
END tables END
================= ==============================*/
/*==
forms
----*/
/* insert styles here */
/*----
END forms END
================= ==============================*/
/*==
miscellaneous classes
----*/
.left {float:left;}
.right {float:right;}
.clear-both {clear:both;}
.clear-left {clear:left;}
.clear-right {clear:right;}
.vertical-spacer {
display:block;
height:11em;
background:t5ansparent;
width:auto;
}
.shrinkwrapped {float:left;}
#content p {clear:both;
margin-top:.85em;}
h2.question {padding:.25em;}
h4.answer {padding:.25em;}
/*========================KWICKS styles===============*/
/* This css file serves as a template for styling your kwicks. Feel free to modify, but please make note of the comments - some of them are important. */
body {
background-color: #1d1e21;
padding: 50px;
}
.kwicks {
/* recommended styles for kwicks ul container */
list-style: none;
position: relative;
margin: 0;
padding: 0;
}
.kwicks li{
/* these are required, but the values are up to you (must be pixel) */
width: 125px;
height: 100px;
/*do not change these */
display: block;
overflow: hidden;
padding: 0; /* if you need padding, do so with an inner div (or implement your own box-model hack) */
}
.kwicks.horizontal li {
/* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */
margin-right: 5px; /*Set to same as spacing option. */
float: left;
}
.kwicks.vertical li{
/* This is optional and will be disregarded by the script. However, it should be provided for non-JS enabled browsers. */
margin-bottom: 5px; /*Set to same as spacing option. */
}
#kwick_1 {
background-color: #53b388;
}
#kwick_2 {
background-color: #5a69a9;
}
#kwick_3 {
background-color: #c26468;
}
#kwick_4 {
background-color: #bf7cc7;
}
.kwicks.horizontal #kwick_4 {
margin-right: none; /* cancel margin on last kiwck (if you set a margin above) */
}
.kwicks.vertical #kwick_4 {
margin-bottom: none; /* cancel margin on last kiwck (if you set a margin above) */
}
.menu_list {
width: 150px;
}
.menu_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
margin:1px;
font-weight:bold;
background: #eef4d3 url(left.png) center right no-repeat;
}
.menu_body {
display:none;
}
.menu_body a{
display:block;
color:#006699;
background-color:#EFEFEF;
padding-left:10px;
font-weight:bold;
text-decoration:none;
}
.menu_body a:hover{
color: #000000;
text-decoration:underline;
}
/*========================KWICKS styles=======END=====*/
/*----
END miscellaneous classes END
================= ==============================*/
/*======================================= SITEWORK======*/
/* install this html outside the wrapper div;
just before the </body> tag:
<div id="sitework">
sitework »<br /><a href="http://www.coraxdesign.com"target="blank" title="Corax Design :: we'll build, host, and manage your site, and we're all genius-weirdos!">coraxdesign.com</a>
</div><!--close"sitework"-->
*/
#sitework {
position:fixed;
height:auto;
width:auto;
bottom:10px;
right:20px;
font:.7em verdana, trebuchet, arial, helvetica, sans-serif;
color:#666666;
background:transparent url(images/50trans.png)top left repeat;
padding:0px 2px 0px 2px;
}
#sitework a {
margin-top:-10px;
display:block;
line-height:22px;
height:16px;
padding-right:20px;
background:transparent url(http://www.coraxdesign.com/images/16TargetSpriteGryYel.jpg) bottom right no-repeat;
text-decoration:none;
color:#666666;
font-weight:bold;
font-variant:small-caps;
}
#sitework a:link {color:#666666;}
#sitework a:visited {color:#666666;}
#sitework a:hover {color:#ff8800;background:transparent url(http://www.coraxdesign.com/images/16TargetSpriteGryYel.jpg) top right no-repeat;}
#sitework a:active {color:#cccccc;}
#sitework a img {border:1px solid transparent;}
/*===========================================end SITEWORK==*/
