# 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

Introduction

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

### Creating a New Tutorial

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.

### Editing or modifying a tutorial

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

### HTML format guidelines

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

### Using images

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

### Using references

    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

### Example

Here is the example and source of a typical tutorial.

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