Creating and editing tutorials

Introduction
Creating a New Tutorial
Editing or modifying a tutorial
HTML format guidelines: Template; Title; Header; Body; Note; Code; Reference; Tables; List; Links
Using images
Using references
Example

This tutorial has been introduced to help members to more easily contribute to
the SDF Tutorials project. The SDF Tutorials utilize simple RCS Revision Control System.
The only downside is initially finding the folder location and reading the lengthy
README.TXT. By using this tutorial, you should be able to get started much quicker!
Please note, this tutorial is not meant to replace the main README.TXT and reading the main
README.TXT will provide a better understanding. More in-depth instructions for editing SDF
Tutorials can be found within the README.TXT (which can also be found on the shell at
/sys/html/tutorials/README.TXT).

Change your current directory to the tutorials directory.: cd /sys/html/tutorials
Create an empty html file with a name of your choosing.: touch new_filename.html
Change the permissions on the file so everyone can read it.: chmod a+r filename.html
Check the file in and unlock it so everyone can edit it.: ci -u new_filename.html; Check to make sure file permissions are retained by RCS on check-out (co).
If they are not, and the permissions only show user readable still,
then chmod a+r RCS/filename.html,v directly so that the file can be read by readers of the webpage.
Next, edit the main index.html page to include the newly created file.

Change your current directory to the tutorials directory.: cd /sys/html/tutorials
Check out the file and lock it while you make your edits: co -l filename.html
Edit the file using a text editor(i.e. vi, pico, nano): nano filename.html
Check the file in and unlock it so everyone can edit it.: ci -u new_filename.html

Whether after issuing the co command or simply editing a file within /sys/html/tutorials,
modifications can be viewed in real time with a browser over the internet. But remember,
changes will only be saved if you use co/ci properly! The tutorial server script generates
the page header and footer, so you only need to supply the content of the tutorial you plan to
post and the RCS $Id$ tag. You can use the following as a template:



<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/>
 
<cite>$Id$</cite>

</body></html>

This is how to to define a comment

This is the code to define a tutorial title

<h1 class="title">Here is a test for the title format.</h1>

This is the code to define a tutorial header

<h3 class="header">Here is a test for the header format.</h3>

This is the code to define a tutorial body.

<p class="body">Here is a test for the tutorial body format.</p>

This is the code to define a tutorial note section.

<p class="note"><br>Here is a test for a note/warning/tip.</p>

This is the code to define a tutorial code section.

<p class="code"><br>Here is a test for the code format.</p>

This is the code to define a tutorial reference section.

<p class="reference"><br>Here is a test for the reference format.</p>

This is the code to define a table.



<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>

This is the code to define a list. You have have two levels: the title of a section(dt) and the subsection(dd).



<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>

This is the code to define a link.



<a class="link" href="http://www.example.com">Example link</a>

No hotlinking of files from other sites: images must be uploaded to the /sys/html/tutorials/images folder
When using images tags must be clearly defined.: Incorrect

<img src="tutorials/images/example.png"/>; Correct

<img src="http://sdf.org/tutorials/images/example.png" alt="Example" height="128" width="128"/>

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

Here is the example and source of a typical tutorial.

$Id: format.html,v 1.17 2014/09/11 09:30:24 grobe0ba Exp $

Creating and editing tutorials

Creating a New Tutorial

Editing or modifying a tutorial

HTML format guidelines

Using images

Using references

Example