SDF HTML Tutorial Editing Guide

The instructions that follow are for creating and editing HTML-based user-contributed tutorials. To contribute to the SDF tutorial wiki, see SDF Tutorial Wiki

Table of Contents

• Introduction
• Creating and Editing HTML Tutorials
  • Creating a New Tutorial
  • Editing an Existing Tutorial
  • Editing the FAQs
• Coding A Tutorial
  • Before You Start Coding!
  • Using Images
  • Citing References
  • Which HTML Version?
  • Coding Style
  • Tutorial Template

Introduction

Many young and very impressionable people discover SDF every day. They ask us what we might feel are stupid questions, but it's not their fault. They've grown up only knowing that hackers destroy computer networks and exploit people and their information. The solution is not to ridicule or shun these kiddiots, but to show them that there is a better and truer way.
— From the README.TXT

This guide has been introduced to help members more easily contribute to the SDF HTML Tutorials project. The first section of the guide gives brief instructions for creating or editing tutorial files using RCS for version control. The second part of the guide discusses tutorial-specific HTML coding and contains some template code.

It would behoove you to read the original README.TXT of the SDF HTML Tutorials Project in the tutorial files directory (/sys/html/tutorials). It not only expresses the aim of the project, but it also contains more detailed information on the use of RCS than is given here.

This guide assumes knowledge of basic shell use and text file editing. Familiarity with HTML is not necessary, though it may prove helpful.

Creating and Editing Tutorials

To create or edit a tutorial, change your working directory to /sys/html/tutorials in your shell on the main SDF cluster (e.g. sdf.org, not MetaArray):

$ cd /sys/html/tutorials

Creating a New Tutorial

Inside the tutorials directory, you can use echo to quickly create an empty HTML file with an RCS Id tag at the bottom. Use the umask command first to make sure that the permissions on the new file will allow the web server (and other users) to read it.

$ umask 022
$ echo -e "\n\$Id\$" > your_tutorial_filename.html

Use the command ci -u to check-in the file with RCS and leave it unlocked it so that anyone can edit it.

$ ci -u your_tutorial_filename.html

The first time you check-in a file, you will be asked for a description of it. Please write something useful.

You may now edit your tutorial using the instructions in the next section to check the file in and out of RCS.

Once your tutorial is ready for public display, please add it to the list of available tutorials so people can actually find it on the web. You must edit the index.html file in the tutorials directory to do this. When editing the index.html file, use the same check-in/check-out procedure that you do when editing a tutorial.

Editing an Existing Tutorial

Inside the tutorials directory, use the command co -l to check out the file with RCS and lock it while you make your edits.

$ co -l filename

If when using co -l you are told that the file is already locked please STOP what you are doing and wait for it to be checked back in. If it does not get checked back in, email the author and let them know you want to check out the file and edit it. You can see the latest author by running rlog filename, which will tell you which user has checked out the file (run man rlog for more details on its use).

You may now edit the file using your preferred text editor. If you save your work periodically, you can load and reload the tutorial in your web browser to see your changes. The URL for the tutorial file will be http://sdf.org/?tutorials/filename_without_extension (e.g., if you are editing /sys/html/tutorials/nmap_for_dummies.html, the URL will be http://sdf.org/?tutorials/nmap_for_dummies).

When you are finished editing the file, use the command ci -u to check the file back in with RCS and unlock it so that others may edit it.

$ ci -u filename

When you check-in a file, you will be asked to describe the changes you've made to it. Be as terse as you like, but please write something useful.

Undoing Edits Before Checking In

If, after editing a file, you wish to not check in your changes and revert to the version without your changes, simply run a checkout with an un-lock, similar to how you checked out before:

$ co -u filename

You may get a warning asking if you want to remove write privileges on the file--you *do*, so say "yes". This will reload the previous version of the file to the current folder and unlock it so others can make changes again. If you wish to try again, use the same step as above.

Editing the FAQs

Coding A Tutorial

Tutorials are coded using HTML. If you are already handy with HTML, then you are just moments away from editing your tutorial! Please read the Before You Start Coding section for some implementation specifics, and at least skim the Coding Style section before proceeding.

If you are not familiar with HTML, the W3C site has a very brief tutorial, Getting Started With HTML, which will teach you enough of the rudiments to be able to author a tutorial. In addition, the template on this page is furnished with ample comments to help HTML beginners.

If you don't have the time or inclination to learn HTML, you may still be able to contribute to the Tutorials Project.

• To contribute to the HTML tutorials, write a new tutorial (or a section, correction, addendum, etc.) in plain text and tack a note in bboard:<TUTORIALS>. One of your MetaARPA colleagues may just volunteer to HTMLize your work for you.
• You may also find it easier to contribute to the SDF Tutorial Wiki Project. Email membership@sdf.org for editing privileges, then look here for details on editing.

  Before You Start Coding!

  SDF tutorial files contain HTML code, but they are not complete HTML documents. When they are served to web browsers, the site's index.cgi wraps them in the site-wide navigation header and footer. The code in tutorial files represents the contents of a <body> element, and must not contain the following elements/tags:

  • <html>, </html>
  • <head>, </head>
  • <meta>
  • <base>
  • <body>, </body>

  Tutorial files will also contain an RCS $Id tag, which will look something like: $Id:filename.html,v 1.11 2011/01/01 11:11:11 username Exp $. There is no need to edit this, as it is automatically generated by RCS. It is best to leave it as the last line of the file.

  Using Images

  Do not hotlink images from other sites. Put a copy of any image files you wish to use in /sys/html/tutorials/images, and make sure their permissions allow the web server to read them (chmod a+r will do this).

  Always provide a description of the image for users of text-based browsers and the visually impaired in the alt attribute of the <img> tag.

  Incorrect:

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

  Correct:

  <img src="http://sdf.org/tutorials/images/example.png" 
       alt="Image of a Blickensderfer No. 5 typewriter">

  Citing References

  In the event that you rely heavily upon a source in your tutorial, particularly if you use any direct quotations from it, you should cite the work properly.

  Include a heading for "References", or "Notes" in your tutorial (typically at the end) and use a numbered list (<ol>) to enumerate your sources in the Chicago Style for Notes.

  <h2 id="notes">Notes</h2>
  <ol>
    <li id="bartles">James Bartles, <cite>Boogers For Breakfast</cite> 
    (Sacramento: Wine Cooler Press, 1979), 74.</li>
    <li id="moribund">Delron Moribund, "Crossover Calisthenics", <cite>
    Travesties of Better Judgement</cite> 64 (2009): 56-60.</li>
  </ol>
  

  Then, where the sources are cited in the text of your tutorial, use a superscript (<sup>) number or a number in parenthesis hyperlinked to the appropriate list item.

  <p>The secret to a proper nose-goblin ganache is in the picking<sup><a 
    href="#bartles">1</a></sup>. (...)</p>

  Or,

  <p>Without adequate stretching beforehand, you are certain to suffer a 
  Ludmilian haemorrhage(<a href="#moribund">2</a>). (...)</p>

  There are further examples of this in the code template below.

  Which HTML Version?

  The current W3C recommendation is HTML 5. In most respects, the core elements of HTML haven't changed since the mid 1990s; some tags have been added, and some removed. To maximize backwards compatibility, you might restrict yourself to the following elements, which have gone unchanged since 1996:

  • Structural Elements
    • <h1>, ..., <h6>
  • Grouping/Block-Level Elements
    • <p>
    • <pre>
    • <ul>,<ol>, <dl> and their subordinates
    • <blockquote>
    • <hr>
    • <table> and its subordinates
    • and, of course, <div>
  • Text-level/Inline Elements
    • <br>
    • <a>
    • <img>
    • <code>, <samp>, and <kbd>
    • <sup> and <sub>
    • <strong>, <small>, and <em>
    • <i>, <b>, <u>, and <s>
    • <dfn>, <var>, and <cite>

  Many closing tags are optional, but for code clarity they can be nice. Stay away from XHTML self-closing tag forms, however (ie. <br/>, <hr/>, <img src="some_url"/>, et cetera).

  Coding Style

  You can do a lot with HTML and CSS. You can do even more if you throw Javascript into the mix.

  But don't.

  SDF tutorials are a resource for all users, and the means by which the tutorials will be accessed are as diverse as the users themselves. Some will be reading with text-based browsers over telnet connections, some may be disabled and require the use of a screen-reader. If your tutorial makes heavy use of CSS or — god forbid — Javascript, then you're not taking the needs of all users into consideration.

  Furthermore, the tutorials are a collaborative effort. You may be the first author to work on a tutorial, but you probably won't be the last. If your tutorial is a hairball of style attributes and idiosyncratic tag/element usage, it only makes it harder for the next author to edit/expand — particularly if they're not as well-versed in web coding as you are.

  Please try as much as possible to use plain HTML when coding tutorials. Everything you should need to write a clear tutorial is already in the language:

  • Structure your tutorial using headings (<h1>,<h2>,...,<h6>), and stay away from using <div>s.
  • Use paragraphs (<p>) for blocks of prose, and preformatted blocks (<pre>) for source code listings, sample console output, or wherever else whitespace needs to be retained and a monospaced font used.

  Rather than use styled <span> tags or other generic grouping elements, use semantic tags which describe the text you want to differentiate from body text. If the user's browser supports the tag, it will be presented differently.

  • For important text, use <strong>.
  • For emphasis, use <em>.
  • For the names of commands, file names, or source code listings, use <code>.
  • For example console text, use <samp> inside a <pre> block.
  • And so-on...

  There is a usage summary of text-level semantic elements for the current W3C recommendation (HTML 5). It's handy. Not all tags are supported by all browsers, but a semantically tagged tutorial is more useful — and easier to style — than a document full of custom styled spans.

  HTML Template

  The code below may be used as a template if you are creating a new tutorial, or re-writing one from scratch. You don't have to use it; it is merely provided as a convenience.

  The text contained between the <!-- and --> tokens are comments, and may be discarded.

  
  <!-- SDF Tutorial Template
  ======================================================================
  Use of this code is entirely optional. It is provided as a sample of
  coding style, and a quick way to start a new tutorial for users who
  may be beginners with HTML. -->
  
  <style type="text/css">
    @import url('https://sdf.org/tutorials/tutorials.css');
  </style>
  
  <!-- The title of the tutorial should be the only level-1 header
  (<h1>) in the document. -->
  <h1>Title of Tutorial</h1> 
  
  <!-- For longer tutorials, a table of contents is nice. Shorter
  tutorials (like this one) really don't need it, so this section can be
  omitted. Replace the <ul> tags with <ol> tags for a numbered list. -->
  <ul>
    <li>
      <a href="#section-1">Section Heading</a>
      <!-- to get an indented section of the list, we simply embed a
      list inside of a list item -->
      <ul>
        <li>
          <a href="#subsection-1">Subsection Heading</a>
        </li>
      </ul>
    </li>
    <li><a href="#section-2">Another Section Heading</a></li>
    <li><a href="#notes">Notes</a></li>
  </ul>
  
  <!-- This is the beginning of a section. It starts with a level-2
  heading (<h2>) and has been given an 'id' attribute so that it may be
  linked to. -->
  <h2 id="section-1">Section Heading</h2>
  
  <!-- Remember to always contain your paragraphs in <p> tags. For
  strings of code, filenames, commands, etc., which appear inside of a
  paragraph, wrap them in <code> tags to differentiate them from the
  rest of the paragraph's text. -->
  <p>By issuing the <code>sac -nar</code> command, your spirit animal
  will be changed to the narwhal.</p>
  
  <!-- For entire blocks of code, place the <code> inside of a <pre>
  instead of a <p>. Text inside of a <pre> has its whitespace characters
  (space, tab, carriage-return) interpreted literally, unlike text
  inside of a <p>. -->
  <pre><code>10 PRINT "DO YOU EAT BOOGERS?"
  20 INPUT X
  30 IF X="YES" THEN PRINT "YOU'RE A GOOD MAN, CHARLIE BROWN.": END
  40 IF X="NO" THEN PRINT "WHAT, YOU THINK YOU'RE BETTER THAN ME?"
  </code></pre>
  
  <!-- For sample program output, console sessions, etc., use <samp>
  inside a <pre> block. -->
  <pre><samp>$ finger man@arms
  Login: man                                 Name: Duncan
  Directory: /eternia/heroic_warriors/man    Shell: /bin/bashasaurus
  No mail.
  Plan: Make Orko clean-up the mess he left in my workshop.
  </samp></pre>
  
  <!-- This sub-section begins with a level-3 heading (<h3>). HTML
  provides tags for sections nested six levels deep (tags <h1>
  through <h6>). If you need to nest sections seven or more levels deep
  ...you might consider restructuring your tutorial! -->
  <h3 id="subsection-1">Subsection Heading</h3>
  
  <!-- For VERY IMPORTANT TEXT, make it <strong>. To add emphasis to a
  word or phrase, use <em>. -->
  <p><strong>Do not forget to flush the buffer</strong>. If you do, the
  smell will be <em>intolerable</em>.</p>
  
  <h2 id="section-2">Another Section Heading</h2>
  
  <!-- This paragraph gives an example of two styles of footnote
  referencing. Both are hyperlinked to corresponding list items (<li>)
  in the Notes section below. -->
  <p>The Honeywell 6080 can be induced to perform a samba by pressing
  the button labeled "Samba" on the operator's
  console<a href="#fn1"><sup>1</sup></a>. That mainframe's forté,
  however, is the foxtrot(<a href="#fn2">2</a>), but the inducement of
  that particular step is beyond the scope of this tutorial.</p>
  
  <!-- Here is a sample footnotes section. In this example, we're using
  footnotes to cite a reference, but this same style can be used for
  footnotes of any kind. Your tutorial may not require any footnotes. If
  it doesn't, feel free to snip this entire section out. -->
  <h2 id="notes">Notes</h2>
  
  <!-- We're using an ordered list (<ol>) so that the notes are
  automatically numbered. A single reference is cited twice in the
  tutorial. As you can see, you may use an abbreviated form of citation
  for subsequent references to a single work. -->
  <ol>
    <li id="fn1">Zurgone Vemliat, <cite>Mainframe Dancing Habits</cite> 
    (Milwaukie: Brewers' Press, 1988), 96.</li>
    <li id="fn2">Vemliat, <cite>Mainframe</cite>, 112.</li>
  </ol>
   
  <!-- At the very end, here, is the RCS Id tag. Let it be, my friend. -->
  $Id: tutorial_editing.html,v 1.32 2025/03/05 01:17:09 peteyboy Exp $
  
  

  To see how this template looks when rendered, visit http://sdf.org/?tutorials/tutorial_template.