====== Creating and editing tutorials ======

[[#Introduction|Introduction]][[#Creating a New Tutorial|Creating a New Tutorial]][[#Editing or modifying a tutorial|Editing or modifying a tutorial]][[#Tips|HTML format guidelines]][[#Template|Template]][[#Title|Title]][[#Header|Header]][[#Body|Body]][[#Note|Note]][[#Code|Code]][[#Reference|Reference]][[#Tables|Tables]][[#List|List]][[#Links|Links]][[#Using images|Using images]][[#Using references|Using references]][[#Example|Example]]

Introduction]]

This tutorial has been introduced to help members to more easily contribute to \\  the [[http://sdf.org/?tutorials|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 [[/tutorials/README.TXT|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 folderWhen 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 &amp; Dictionary:
  Author's last name, first initial. (Date). Title of Article. Title of Encyclopedia (Volume, pages). City of publication: Publishing company.

  Magazine &amp; 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 [[http://sdf.org/?tutorials/example|example]] and [[http://sdf.org/?tutorials/example_source|source]] of a typical tutorial.

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