365 lines
10 KiB
HTML
Executable File
365 lines
10 KiB
HTML
Executable File
<html>
|
|
<head>
|
|
<link href="format.css" rel="stylesheet" type="text/css" />
|
|
<link href="http://eamonnw.metapath.org/do_not_delete_960.css" rel="stylesheet" type="text/css">
|
|
<title>The Making of SDF Tutorials</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container_12"><div class="grid_11 prefix_1">
|
|
<h1 class="title">Creating and editing tutorials</h1>
|
|
|
|
<dl>
|
|
<dt><a class="link" href="#Introduction">Introduction</a></dt>
|
|
<dt><a class="link" href="#Creating a New Tutorial">Creating a New Tutorial</a></dt>
|
|
<dt><a class="link" href="#Editing or modifying a tutorial">Editing or modifying a tutorial</a></dt>
|
|
<dt><a class="link" href="#Tips">HTML format guidelines</a></dt>
|
|
<dd><a class="link" href="#Template">Template</a></dd>
|
|
<dd><a class="link" href="#Title">Title</a></dd>
|
|
<dd><a class="link" href="#Header">Header</a></dd>
|
|
<dd><a class="link" href="#Body">Body</a></dd>
|
|
<dd><a class="link" href="#Note">Note</a></dd>
|
|
<dd><a class="link" href="#Code">Code</a></dd>
|
|
<dd><a class="link" href="#Reference">Reference</a></dd>
|
|
<dd><a class="link" href="#Tables">Tables</a></dd>
|
|
<dd><a class="link" href="#List">List</a></dd>
|
|
<dd><a class="link" href="#Links">Links</a></dd>
|
|
<dt><a class="link" href="#Using images">Using images</a></dt>
|
|
<dt><a class="link" href="#Using references">Using references</a></dt>
|
|
<dt><a class="link" href="#Example">Example</a></dt>
|
|
</dl>
|
|
|
|
<p class="header"><a name="Introduction">Introduction</a></p>
|
|
|
|
<p class="body">
|
|
This tutorial has been introduced to help members to more easily contribute to <br/>
|
|
the <a class="link" href="http://sdf.org/?tutorials">SDF Tutorials</a> project. The SDF Tutorials utilize simple RCS Revision Control System. <br/>
|
|
The only downside is initially finding the folder location and reading the lengthy <br/>
|
|
README.TXT. By using this tutorial, you should be able to get started much quicker! <br/>
|
|
Please note, this tutorial is not meant to replace the main README.TXT and reading the main <br/>
|
|
README.TXT will provide a better understanding. More in-depth instructions for editing SDF <br/>
|
|
Tutorials can be found within the <a class="link" href="/tutorials/README.TXT">README.TXT</a> (which can also be found on the shell at <br/>
|
|
/sys/html/tutorials/README.TXT).<br/>
|
|
</p>
|
|
|
|
<h3 class="header"><a name="Creating a New Tutorial">Creating a New Tutorial</a></h3>
|
|
<p class="body">
|
|
<dl>
|
|
<dt>Change your current directory to the tutorials directory.</dt>
|
|
<dd><p class="code"><br/>cd /sys/html/tutorials</p></dd>
|
|
<dt>Create an empty html file with a name of your choosing.</dt>
|
|
<dd><p class="code"><br/>touch new_filename.html</p></dd>
|
|
<dt>Change the permissions on the file so everyone can read it.</dt>
|
|
<dd><p class="code"><br/>chmod a+r filename.html</p></dd>
|
|
<dt>Check the file in and unlock it so everyone can edit it.</dt>
|
|
<dd><p class="code"><br/>ci -u new_filename.html</p></dd>
|
|
<dd><p class="note"><br/>Check to make sure file permissions are retained by RCS on check-out (co).<br/>
|
|
If they are not, and the permissions only show user readable still, <br/>
|
|
then chmod a+r RCS/filename.html,v directly so that the file can be read by readers of the webpage.<br/>
|
|
Next, edit the main index.html page to include the newly created file.<br/></p></dd>
|
|
</dl>
|
|
</p>
|
|
|
|
<h3 class="header"><a name="Editing or modifying a tutorial">Editing or modifying a tutorial</a></h3>
|
|
<p class="body">
|
|
<dl>
|
|
<dt>Change your current directory to the tutorials directory.</dt>
|
|
<dd><p class="code"><br/>cd /sys/html/tutorials</p></dd>
|
|
<dt>Check out the file and lock it while you make your edits</dt>
|
|
<dd><p class="code"><br/>co -l filename.html</p></dd>
|
|
<dt>Edit the file using a text editor(i.e. vi, pico, nano)</dt>
|
|
<dd><p class="code"><br/>nano filename.html</p></dd>
|
|
<dt>Check the file in and unlock it so everyone can edit it.</dt>
|
|
<dd><p class="code"><br/>ci -u new_filename.html</p></dd>
|
|
</dl>
|
|
</p>
|
|
|
|
<h3 class="header"><a name="Tips">HTML format guidelines</a></h3>
|
|
<p class="body">
|
|
Whether after issuing the co command or simply editing a file within /sys/html/tutorials, <br/>
|
|
modifications can be viewed in real time with a browser over the internet. But remember, <br/>
|
|
changes will only be saved if you use co/ci properly! The tutorial server script generates <br/>
|
|
the page header and footer, so you only need to supply the content of the tutorial you plan to <br/>
|
|
post and the RCS $Id$ tag. You can use the following as a template:<br/>
|
|
</p>
|
|
|
|
<a name="Template"></a>
|
|
<pre class="code"><br/>
|
|
<html>
|
|
<head>
|
|
<style type="text/css">
|
|
.title{
|
|
background-color:#ffffff;
|
|
font-size:30px;
|
|
color:#2a2a2a;
|
|
}
|
|
|
|
.header{
|
|
background-color:#ffffff;
|
|
font-size:20px;
|
|
color:#2a2a2a;
|
|
}
|
|
|
|
.body{
|
|
background-color:#ffffff;
|
|
font-size:15px;
|
|
color:#2a2a2a;
|
|
}
|
|
|
|
.reference{
|
|
border: 1px dotted #000;
|
|
text-align: left;
|
|
padding: 5px;
|
|
padding: 15px 30px 15px;
|
|
background:#CCC url('http://sdf.org/tutorials/images/ref.png') 5px 5px no-repeat;
|
|
color: #000;
|
|
margin: 10px 5px;
|
|
}
|
|
|
|
.link { text-decoration:none }
|
|
|
|
.superscript{
|
|
font-size:10px;
|
|
vertical-align:top;
|
|
}
|
|
|
|
.subscript{
|
|
font-size:10px;
|
|
vertical-align:bottom;
|
|
}
|
|
|
|
.note{
|
|
border: 1px dotted #000;
|
|
text-align: left;
|
|
padding: 5px;
|
|
padding: 15px 30px 15px;
|
|
background: #DC143C url('http://sdf.org/tutorials/images/note.png') 5px 5px no-repeat;
|
|
color: #FFF;
|
|
margin: 10px 5px;
|
|
}
|
|
|
|
.code{
|
|
border: 1px dotted #000;
|
|
text-align: left;
|
|
padding: 5px;
|
|
padding: 15px 30px 15px;
|
|
background:#2F4F4F url('http://sdf.org/tutorials/images/code.png') 5px 5px no-repeat;
|
|
color: #00FF00;
|
|
margin: 10px 5px;
|
|
font-family: monospace;
|
|
}
|
|
|
|
table.table {
|
|
border-width: 0px;
|
|
border-spacing: 0px;
|
|
border-style: none;
|
|
border-collapse: collapse;
|
|
background-color: #1E90FF;
|
|
}
|
|
|
|
table.table th {
|
|
border-width: 1px;
|
|
padding: 1px;
|
|
border-style: inset;
|
|
border-color: white;
|
|
background-color: #A0522D;
|
|
-moz-border-radius: ;
|
|
padding: 10;
|
|
}
|
|
|
|
table.table td {
|
|
border-width: 1px;
|
|
padding: 1px;
|
|
border-style: inset;
|
|
border-color: white;
|
|
background-color: #FFEBCD;
|
|
-moz-border-radius: ;
|
|
padding: 5;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
YOUR CODE HERE<br/>
|
|
|
|
<br/><br/>
|
|
<cite>$Id$</cite><br/>
|
|
</body></html>
|
|
</pre>
|
|
|
|
<br/>
|
|
<p class="body">
|
|
<a name="Comment"></a>
|
|
This is how to to define a comment<br/>
|
|
</p>
|
|
<p class="code"><br/>
|
|
<!-- This is a comment -->
|
|
</p>
|
|
|
|
<p class="body">
|
|
<a name="Title"></a>
|
|
This is the code to define a tutorial title<br/>
|
|
</p>
|
|
<p class="code"><br/>
|
|
<br/>
|
|
<h1 class="title">Here is a test for the title format.</h1>
|
|
</p>
|
|
|
|
<p class="body">
|
|
<a name="Header"></a>
|
|
This is the code to define a tutorial header<br/>
|
|
</p>
|
|
<p class="code"><br/>
|
|
<br/>
|
|
<h3 class="header">Here is a test for the header format.</h3>
|
|
</p>
|
|
|
|
<p class="body">
|
|
<a name="Body"></a>
|
|
This is the code to define a tutorial body.<br/>
|
|
</p>
|
|
<p class="code"><br/>
|
|
<br/>
|
|
<p class="body">Here is a test for the tutorial body format.</p>
|
|
</p>
|
|
|
|
<p class="body">
|
|
<a name="Note"></a>
|
|
This is the code to define a tutorial note section.<br/>
|
|
</p>
|
|
<p class="code"><br/>
|
|
<br/>
|
|
<p class="note"><br>Here is a test for a note/warning/tip.</p>
|
|
</p>
|
|
|
|
<p class="body">
|
|
<a name="Code"></a>
|
|
This is the code to define a tutorial code section.<br/>
|
|
</p>
|
|
<p class="code"><br/>
|
|
<br/>
|
|
<p class="code"><br>Here is a test for the code format.</p>
|
|
</p>
|
|
|
|
<p class="body">
|
|
<a name="Reference"></a>
|
|
This is the code to define a tutorial reference section.<br/>
|
|
</p>
|
|
<p class="code"><br/>
|
|
<br/>
|
|
<p class="reference"><br>Here is a test for the reference format.</p>
|
|
</p>
|
|
|
|
<p class="body">
|
|
<a name="Tables"></a>
|
|
This is the code to define a table.<br/>
|
|
</p>
|
|
<pre class="code"><br/>
|
|
<table class="table">
|
|
<tr>
|
|
<th>Table Header 0</th>
|
|
<th>Table Header 1</th>
|
|
<th>Table Header 2</th>
|
|
</tr>
|
|
<tr><!-- This is column 1 -->
|
|
<th>Table DATA</th>
|
|
<td>TABLE DATA</td>
|
|
<td>TABLE DATA</td>
|
|
</tr>
|
|
<tr><!-- This is column 2 -->
|
|
<th>Table DATA</th>
|
|
<td>TABLE DATA</td>
|
|
<td>TABLE DATA</td>
|
|
</tr>
|
|
<tr><!-- This is column 3 -->
|
|
<th>Table DATA</th>
|
|
<td>TABLE DATA</td>
|
|
<td>TABLE DATA</td>
|
|
</tr>
|
|
</table>
|
|
</pre>
|
|
|
|
<p class="body">
|
|
<a name="List"></a>
|
|
This is the code to define a list. You have have two levels: the title of a section(dt) and the subsection(dd).
|
|
</p>
|
|
<pre class="code"><br/>
|
|
<dl>
|
|
<dt>Section 1</dt>
|
|
<dd>Section 1.1</dd>
|
|
<dd>Section 1.2</dd>
|
|
<dd>Section 1.3</dd>
|
|
<dt>Section 2</dt>
|
|
<dd>Section 2.1</dd>
|
|
<dt>Section 3</dt>
|
|
<dd>Section 3.1</dd>
|
|
<dd>Section 3.2</dd>
|
|
<dt>Section 4</dt>
|
|
<dd>Section 4.1</dd>
|
|
<dd>Section 4.2</dd>
|
|
</dl>
|
|
</pre>
|
|
|
|
<p class="body">
|
|
<a name="Links"></a>
|
|
This is the code to define a link.
|
|
</p>
|
|
<pre class="code"><br/>
|
|
<a class="link" href="http://www.example.com">Example link</a>
|
|
</pre>
|
|
|
|
<br/>
|
|
<a name="Using images"></a>
|
|
<h3 class="header">Using images</h3>
|
|
<dl>
|
|
<dt>No hotlinking of files from other sites: images must be uploaded to the /sys/html/tutorials/images folder</dt>
|
|
<dt>When using images tags must be clearly defined.</dt>
|
|
<dd>
|
|
<br/>
|
|
Incorrect<br/>
|
|
<p class="code">
|
|
<br/>
|
|
<img src="tutorials/images/example.png"/><br/>
|
|
</p>
|
|
</dd>
|
|
<dd>
|
|
Correct<br/>
|
|
<p class="code">
|
|
<br/>
|
|
<img src="http://sdf.org/tutorials/images/example.png" alt="Example" height="128" width="128"/><br/>
|
|
</p>
|
|
</dd>
|
|
</dl>
|
|
|
|
<br/>
|
|
<a name="Using references"></a>
|
|
<h3 class="header">Using references</h3>
|
|
<pre class="reference">
|
|
Book:
|
|
Author's last name, first initial. (Publication date). Book title. Additional information. City of publication: Publishing company.
|
|
|
|
Encyclopedia & Dictionary:
|
|
Author's last name, first initial. (Date). Title of Article. Title of Encyclopedia (Volume, pages). City of publication: Publishing company.
|
|
|
|
Magazine & Newspaper Articles:
|
|
Author's last name, first initial. (Publication date). Article title. Periodical title, volume number(issue number if available), inclusive pages.
|
|
|
|
Online periodical:
|
|
Author's name. (Date of publication). Title of article. Title of Periodical, volume number, Retrieved month day, year, from full URL
|
|
|
|
Online document:
|
|
Author's name. (Date of publication). Title of work. Retrieved month day, year, from full URL
|
|
</pre>
|
|
|
|
<br/>
|
|
<a name="Example"></a>
|
|
<h3 class="header">Example</h3>
|
|
<p class="body">
|
|
Here is the <a class="link" href="http://sdf.org/?tutorials/example">example</a> and <a class="link" href="http://sdf.org/?tutorials/example_source">source</a> of a typical tutorial.
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<cite>$Id: format.html,v 1.17 2014/09/11 09:30:24 grobe0ba Exp $</cite>
|
|
</div></div></body></html>
|