<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><title>OTL2HTML Webpage Demonstration</title> <!-- $Revision: 1.40 $ --> <!-- $Date: 2005/03/01 00:34:46 $ --> <!-- $Author: noel $ --> <style type="text/css"> /* copyright notice and filename */ body { font-family: helvetica,arial,sans-serif; font-size: 10pt; background-color: #888888; } /* title at the top of the page */ H1 { border: 1px solid blue; font-family: helvetica,arial,sans-serif; font-size: 14pt; font-weight: bold; text-align: left; color: black; background-color: #ddddee; padding-left: 10px; padding-bottom: 10px; padding-top: 10px; } H2 { font-family: helvetica,arial,sans-serif; font-size: 12pt; font-weight: bold; text-align: left; color: black; } H3 { font-family: helvetica,arial,sans-serif; font-size: 12pt; text-align: left; color: black; } H4 { font-family: helvetica,arial,sans-serif; font-size: 12pt; text-align: left; color: black; } H5 { font-family: helvetica,arial,sans-serif; font-size: 10pt; text-align: left; color: black; } /* outline level spacing */ OL { padding-bottom: 8pt; margin-left: -20px; } /* global heading settings */ LI { font-family: helvetica,arial,sans-serif; color: black; font-weight: normal; list-style: lower-alpha; margin-left: -5px; padding-top: 4px; } /* level 1 heading overrides */ LI.L1 { font-size: 12pt; font-weight: bold; list-style: none; } /* level 2 heading overrides */ LI.L2 { font-size: 10pt; font-weight: bold; list-style: none; } /* level 3 heading overrides */ LI.L3 { font-size: 10pt; list-style: none; } /* level 4 heading overrides */ LI.L4 { font-size: 10pt; list-style: none; } /* level 5 heading overrides */ LI.L5 { font-size: 10pt; list-style: none; } /* level 6 heading overrides */ LI.L6 { font-size: 10pt; list-style: none; } /* level 7 heading overrides */ LI.L7 { font-size: 10pt; list-style: none; } /* level 1 bullet heading overrides */ LI.LB1 { font-size: 12pt; font-weight: bold; list-style: disc; } /* level 2 bullet heading overrides */ LI.LB2 { font-size: 10pt; font-weight: bold; list-style: disc; } /* level 3 bullet heading overrides */ LI.LB3 { font-size: 10pt; list-style: disc; } /* level 4 bullet heading overrides */ LI.LB4 { font-size: 10pt; list-style: disc; } /* level 5 bullet heading overrides */ LI.LB5 { font-size: 10pt; list-style: disc; } /* level 6 bullet heading overrides */ LI.LB6 { font-size: 10pt; list-style: disc; } /* level 7 bullet heading overrides */ LI.LB7 { font-size: 10pt; list-style: disc; } /* level 1 numeric heading overrides */ LI.LN1 { font-size: 12pt; font-weight: bold; list-style: decimal; } /* level 2 numeric heading overrides */ LI.LN2 { font-size: 10pt; font-weight: bold; list-style: decimal; } /* level 3 numeric heading overrides */ LI.LN3 { font-size: 10pt; list-style: decimal; } /* level 4 numeric heading overrides */ LI.LN4 { font-size: 10pt; list-style: decimal; } /* level 5 numeric heading overrides */ LI.LN5 { font-size: 10pt; list-style: decimal; } /* level 6 numeric heading overrides */ LI.LN6 { font-size: 10pt; list-style: decimal; } /* level 7 numeric heading overrides */ LI.LN7 { font-size: 10pt; list-style: decimal; } /* body text */ P { font-family: helvetica,arial,sans-serif; font-size: 9pt; font-weight: normal; color: black; } /* preformatted text */ PRE { font-family: fixed; font-size: 9pt; font-weight: normal; color: black; } TABLE { margin-top: 1em; font-family: helvetica,arial,sans-serif; font-size: 12pt; font-weight: normal; border-collapse: collapse; } TH { border: 1px solid black; padding: 0.5em; background-color: #eeddee; } TD { border: 1px solid black; padding: 0.5em; background-color: #ddeeee; } CODE { background-color: yellow; } TABLE.TAB1 { margin-top: 1em; font-family: helvetica,arial,sans-serif; font-size: 12pt; font-weight: normal; border-collapse: collapse; } TABLE.TAB2 { margin-top: 1em; font-family: helvetica,arial,sans-serif; font-size: 11pt; font-weight: normal; border-collapse: collapse; } TABLE.TAB3 { margin-top: 1em; font-family: helvetica,arial,sans-serif; font-size: 10pt; font-weight: normal; border-collapse: collapse; } TABLE.TAB4 { margin-top: 1em; font-family: helvetica,arial,sans-serif; font-size: 10pt; font-weight: normal; border-collapse: collapse; } TABLE.TAB5 { margin-top: 1em; font-family: helvetica,arial,sans-serif; font-size: 10pt; font-weight: normal; border-collapse: collapse; } TABLE.TAB6 { margin-top: 1em; font-family: helvetica,arial,sans-serif; font-size: 10pt; font-weight: normal; border-collapse: collapse; } DIV.Menu { float: left; border: 1px solid blue; background-color: #e6add8; padding-right:10px; text-align: left; width: 25%; } DIV.TopMenu { border: 1px solid blue; background-color: #e6add8; padding-right:10px; margin-bottom: 15px; text-align: Center; } DIV.News { float: left; border: 1px solid green; background-color: #ade6d8; padding-left: 3px; padding-right: 8px; text-align: left; width: 69%; margin-bottom: 15px; margin-left: 15px; } Div.Main { float: left; border: 1px solid green; background-color: white; padding-left: 3px; padding-right: 8px; text-align: left; width: 69%; margin-bottom: 15px; margin-left: 15px; } IMG { border: none; } </style></head> <body> <div class="DocTitle"> <h1>OTL2HTML Webpage Demonstration</h1> </div> <div class="MainPage"> <div class="Menu"> <ol> <li class="L2" ><strong>Home</strong> <li class="L2" ><a href="demo1.html">About</a> <li class="L2" ><a href="demo2.html">Usage</a> <li class="L2" ><a href="demo3.html">Party Report</a> <li class="L2" ><a href="mailto:noel@noels-lab.com">Contact</a> <li class="L2" >Links <ol> <li class="L3" ><a href="http://www.vimoutliner.org">Vim Outliner</a> <li class="L3" ><a href="http://www.troubleshooters.com">Troubleshooters.com</a> <li class="L3" ><a href="http://www.sourceforge.net">SourceForge.Net</a> <li class="L3" ><a href="http://www.freshmeat.net">FreshMeat.Net</a> <li class="L3" ><a href="http://www.python.org">Python</a> <li class="L3" ><a href="http://www.apache.org">Apache</a> <li class="L3" ><a href="http://www.thinkgeek.com">Think Geek</a> <li class="L3" ><a href="http://www.cnn.com">CNN</a> <li class="L3" ><a href="http://www.linuxmag.com">Linux Magazine</a> <li class="L3" ><a href="http://www.linuxjournal.com"><img src="ljlogo.png" alt="ljlogo.png"></a> </ol> </ol> </ol> </div> <div class="News"> <ol> <li class="L1" >News <ol> <li class="L2" >December 1, 2004 <ol> <li class="L3" >OTL2HTML.PY Tool Gets Twisted Upgrade <p class="P3" >Noel Henson's python-based otl2html.py tool gets a rather serious but twisted upgrade. Mr. Henson claims that the tool can now take an outline and generate a surprisingly nice-looking web page. The extension would allow for entire websites to be developed using the world renowned <a href="http://www.vimoutliner.org">Vim Outliner</a>. </p> <p class="P3" > -- anonymous </p> </ol> <li class="L2" >November 28, 2004 <ol> <li class="L3" >Hyperlinks and Images Are Added to OTL2HTML.PY <p class="P3" >In the same spirit as <a href="http://txt2tags.sf.net">TXT2TAGS</a>, otl2html.py can now process and include hyperlinks and images into the html files it creates. The hyperlinks can be to web pages, ftp sites, mail-tos or any other standard URL. The images can be included as just images or as hyperlinks. Check out the LJ logo in the menu. </p> <p class="P3" > -- anonymous </p> </ol> </ol> </ol> </div> <div class="Main"> <ol> <li class="L1" >Main <ol> <p class="P2" >Using VO to generate pages like this is surprisingly simple. A simple .otl file and the otl2html.py script is all you need. To see the file that generated this page, <a href="demo.otl">click here</a>. By the way, a heading that stars with "_" won't show on the page. You can see examples of this in the aforementioned file. To invoke the otl2html.py tool enter the following from the command line: </p> <li class="L2" >Example <ol> <pre class="PRE3" > otl2html.py -D -s webpage.css demo.otl > demo.html </pre> </ol> <p class="P2" >Have fun with this upgraded and potentially cool tool. </ol> </ol> </div> </body></html>