Peninsula Fly Fishers — Editors' Do-It-Yourself — PFF Article Template Annotated

PFF Article Template Annotated

Begin by reading HTML Basics For Editors if you are new to writing web pages.

When you are ready to write a PFF article from a template, go to PFF Article Template. You'll find a template to copy and some instructions.

Legend
This color background denotes HTML tags or CSS code.
This color background denotes code values to be provided by the user of the template.
This color background denotes the visible text in the body of the document.
Code and User Input Explanatory Remarks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"> This tells the browser what kind of document follows and which set of rules to use to display it. This line might break where you are reading it now, but it must be one one unbroken line in the code. It must be first. It must be alone on that first line. Don't remove this line of code.
<html> This tag tells the browser that an HTML document is starting. Don't remove this line of code.
<head> This tag begins the section of the document which contains information about the document. What is written in the head is hidden from view. Don't remove this line of code.
<meta name="filename" content="XXXXXXXXXX"> Meta tags are information about the information. The code author can invent any meta tags he requires. This one contains the filename of this document. The user of this template should substitute the actual filename for "emailCSPA.html".
<meta name="author" content="XXXXXXXXXX"> The author of the page code, not the author of the visible contents.
<meta name="date" content="XXXXXXXXX"> Meta data is data about the main data. There are some standard meta data categories. You may also make up any that serve your needs.
<title>Peninsula Fly Fishers – XXXXXXXXXX</title> The text between the title tags is displayed in the browser window title bar (the very top). The title is read by some javascripts to write to the web page. Peninsula Fly Fishers – (including a space after –) must always be just as it is here. Replace the XXXXXX only with the specific page title. Don't remove this line of code.
<style type="text/css"> All documents in the PFF collection (except some very early ones) use CSS to style and lay out the web page. The external CSS document fetched by this style tag provides those rules. Don't remove this. Even if you are inexperienced, you can probably read through these rules and figure out what's going on. Strangely, these rules are not HTML. They are an island of CSS. It's sort of like the Vatican within Italy. CSS has a different syntax than that of HTML and has to be letter perfect to work. It is not tolerant of sloppiness, as HTML is. CSS is not really hard, though. Get a book or do online searches for what you need. Don't remove this line of code.
@import url(http://www.peninsulaflyfishers.org/PFF.css); This line calls for the external stylesheet that contains most of the rules for style and layout. It must be exactly as it is written, and it must be the first rule in the style tag. Other style rules, specific to the page being written may be added after this @import rule. Don't remove this line of code.
</style> This tag ends the style rules. Don't remove this line of code.
<script type="text/javascript" src="http://www.peninsulaflyfishers.org/PFF.js"> All documents in the PFF collection (except some very early ones) use javascript to write parts of the web page. The external javascript document fetched by this script tag provides those parts. Don't remove this line of code.
</script> This tag ends the scripts. Don't remove this line of code.
</head> This tag ends the section of information about the page (which doesn't display). Don't remove this line of code.
<body> The visible parts of the web page are contained in this section, the body. Don't remove this line of code.
<div class="envelope"> This division holds all of the content. Special rules about style and layout are applied through this division's class. Don't remove this line of code.
<script type="text/javascript"> This script writes the breadcrumb navigation detail at the top of each page. Don't remove these lines of code.
breadcrumb();
</script>
<div class="contents"> This tag begins a division which holds most of the content. Special rules about style and layout are applied through this division's class. Don't remove this line of code.
<h1 class="article"> This tag writes the article's title. Don't remove this line of code.
XXXX ARTICLE TITLE HERE XXXXX Replace this with the actual article's title.
<br> This tag (a line break) places the following content on the next line.
<span class="h1"> This tag beins a defined section with special display rules (smaller type) for a sub-title.
XXXX ARTICLE SUB-TITLE HERE XXXXX Replace this with the actual sub-title. If there is no sub-title, remove the code from the <br> tag to the </span> tag.
</span> This tag ends the smaller type sub-title section.
</h1> This tag ends the article headline. Don't remove this line of code.
<h2 class="author"> This tag begins a headline naming the article's author.
by <script type="text/javascript">writeEname(first_last)</script> This script writes the author's name as an email link. Where it says first_last in the script, write, for example, dennis_kellett. If the script doesn't produce a name on the web page, data for that name needs to be added to PFF.js. Ask the webmaster to do that.
</h2> This tag ends the author headline.
<img src="XXXXXX"
style="display:block; margin-left:auto; margin-riight;auto; width:XXXpx; height:XXXpx;">
alt="XXXXX">		 This tag calls an image file to display on the web page. This is the standard, centered-image layout used on PFF pages. Enter the images' filepath after src=". Enter the width and height values. The webmaster or photo editor can help. Write a description of the image for the alt attribute. Repeat this code wherever an image is wanted in the article.
more about images
<img src="XXXXX"
style="display:block; width:XXpx; height:XXpx; float:left;"
alt="XXXXX">		 This tag calls an image file to display on the web page. This image will go to the left margin. Content following it will flow around the image on the right. To stop the following content from flowing around the image, use clear:left;. Getting what you want is sometimes tricky. Ask the webmaster for help.
<img src="XXXXX"
style="display:block; width:XXpx; height:XXpx; float:right;"
alt="XXXXX">		 This tag calls an image file to display on the web page. This image will go to the right margin. Content following it will flow around the image on the left. To stop the following content from flowing around the image, use clear:right;. Getting what you want is sometimes tricky. Ask the webmaster for help.
<p class="publishDate">Month Year</p> All articles should have the date on which they are published on the PFF website.
<h3 class="subtitle">XXXX SUBTITLE HERE XXXX</h3> Sub-headings use this code. Repeat this code for every sub-head in the article.
<p>XXXXXXX PARAGRAPH HERE XXXXXXXX</p> All paragraphs must be started and stopped with these tags. Repeat this code for every paragraph in the article.
<span style="background-color:#ff6;">
XXXX HIGHLIGHTED TEXT XXXX</span>		 Small portions of text will be highlighted yellow when placed between the span tags. Use this wherever required in the article.
<div class="tempNote"> This tag begins a section with a grey background color, and different type and margins from the rest of the page. It is used for special notices.
<p>XXXX SPECIAL NOTICE HERE XXXX</p> Write the special notice between these paragraph tags. You may use more than one paragraph.
</div><!-- /tempNote --> This tag ends the special notice section.
You may want to use lists, tables, or links in your web page. Refer to pages devoted to these elements elsewhere in the "Editors'-Do-It-Yourself".
<!-- POP-UP WINDOW SCRIPT --> The automatic pop-up blockers common because of abuse by businesses may interfere with this script! Javascript must be letter perfect. The text input may require the escaping of reserved characters. Ask the webmaster for help if you need to do this.
<script type="text/javascript">
function fenestrate(){
var nuWin = window.open("","","resizable,scrollbars");
nuWin.document.write('<html style="background-color:#f3f3b6\;">
<head><title>XXXXXXXX</title>
<style type="text/css">@import url(http://www.peninsulaflyfishers.org/PFF.css)\;</style>
</head><body style="padding:13px\;">
<h3 class="subtitle" style="background-color:#fff\;">');
// PUT THE SPECIFIC TEXT HERE
nuWin.document.write('XXXX WINDOW TITLE XXXX</h3>
<p>XXXX PUT TEXT HERE XXXXX</p>');
nuWin.document.write('</body></html>');
nuWin.resizeTo('300', '270');
nuWin.document.close();
}
</script>
<script type="text/javascript">writeEname(first_last)</script> These scripts write email links to web pages. They scramble the email address to prevent evil spambots from spreading our email addresses to spammers.

For these scripts to work, data on the email address must be placed in PFF.js. Ask the webmaster to do this if the script doesn't work.

The first script writes the addressee's name to the page. The second script writes the addressee's email address to the page.
<script type="text/javascript">writeEddress(first_last)</script>
</div> <!-- /contents --> This tag ends the divison with the id of content. The style rules applied to this divison through its class end here. Don't remove this line of code.
<script type="text/javascript"> This script writes the links across the bottom of the page. Don't remove these lines of code.
writeBottomNav();
</script>
</div> <!-- /envelope --> This tag end the division with the id of envelope. The style rules applied to this divison through its class end here. Don't remove this line of code.
</body> This tag closes the body of the .html document. This marks the end of the visible portion of the page. Don't remove this line of code.
</html> This tag tells the browser the the .html page ends here. Don't remove this line of code.