Writing For Photo.net
by Bob Atkins and Brian Mottershead
When writing for photo.net the best advice to follow with regard to formatting your
article is "keep it simple". Don't use any tricks to format your text such as
using multiple <br> tags for extra space, putting large amounts of non-tabular data
in tables, 1 pixel gifs or other tricks.
Ideally you'd write HTML using a simple text editor, not a Word processing program,
though as long as you can generate a plain text file, that's OK. Probably the worst
possible way to submit an article is to write it in Microsoft Word, complete with
illustrations and formatting and then save it as an HTML document. This will create
something we can't use with our style sheets and which will require extensive editing. In
fact we probably won't even try to edit it as it would be easier to work on the original
Word file than to attempt to change the HTML it creates. Even working with a Word file
will still be a pain, so unless there are some very special reasons why you have to,
don't. To paraphrase Nancy Regan, "Just say no to Microsoft Word" (at least as
far as photo.net submissions are concerned).
You can use a WYSIWIG editor like the Microsoft Frontpage Editor, but it won't produce
very clean HTML and it may need some further editing before being published on photo.net.
It's acceptable, if not ideal. Windows users can either use "Notepad" or a
dedicated HTML editor such as 1st Page 2000 from Evrsoft,
which is available for no charge as freeware.
The Simple Approach
Below is a very basic template that should be OK for most articles and should be easy
to use for those without much knowledge of HTML. It consists of headings (H1, H2, H3 etc),
paragraphs (P) and centered images (div align="center"). Articles submitted in
this format will be very easy to convert for use with the photo.net style sheet.
<html>
<head>
<title>TITLE FOR BROWSER WINDOW</title>
</head>
<body>
<h1>TITLE OF ARTICLE</h1>
<p>by Author Name</p>
<h2>SUBTITLE</h2>
<p>Paragraph</p>
<p>Paragraph</p>
<p>
<-- This will produce a centered image -->
<div align="center">
<img src="image.jpg" height="xxx" width="yyy"
alt="description">
</div>
<-- End of centered content --></p>
<p>Paragraph</p>
<h2>SUBTITLE</h2>
<p>Paragraph</p>
<p>Paragraph</p>
</body>
</html>
The More Complex Approach using Stylesheets
If you want to try using the photo.net style sheet you can find a copy at http://www.photo.net/articles.css. You can
download this (right click and "save target as" in IE) and install it on your
system. Note that it may be changed from time to time, so download the current version
before use. Use the line:
<link rel="stylesheet" type="text/css"
href="/articles.css">
to use the stylesheet in your article. This should come comewhere between the
<head> and </head> tages.
If you're comforatble with HTML and stylesheets you can use this guide and be able to
see exactly what your article will look like.
1. Prime Rule: use the HTML only for semantic markup.
That is, markup headings, paragraphs, lists, tables, links, etc, and leave the formatting
to the browser and the stylesheet. Use any of the other "semantic" tags
supported by HTML. Write text. If you have them, include images for illustration.
The author should not concern himself with layout, formatting and style issues.
Don't throw in a tag in contradiction to its semantic significance because it produces
some formatting effect that you want. For example, use <blockquote> around a long
quotation. This informs the browser and other software that, semantically, the text is a
quote, and should be formatted appropriately. Do not use this as a way to indent some text
that is not a quote, just because you happen to know that current browsers indent
blockquotes. Maybe browsers or our stylesheet won't indent blockquotes in the future, and
anyway there are better ways to indent text, if you really must.
2. The heading levels should follow the sequence H1, H2, etc. Don't start with
H2, or skip from H2 to H4 because you don't like the way H1 and H3 are rendered in
your browser by default. Don't use the heading tags around things which are
not headings just to achieve some font effect or whitespace effect. Do
use the heading levels to structure your article; and don't roll your own headings by
specifying fonts and generating line breaks and white space with <br> and empty
<p> tags. Besides defeating the stylesheet, such antics would frustrate a
browser or other software trying to use heading levels to generate a table of contents,
etc.
3. Don't use the table tag for anything other than tabular information. Don't try to
achieve layout or element positioning effects with table tags. For example,
don't use the table tag to achieve a particular arrangment of images and text.
(Exception: if you want to create a grid of images with text captions arranged underneath,
there is no easy way to do this except with a table; but consider just letting the browser
lay out a bunch of images without them being in a grid.)
4. Don't specify formatting on img tags, such as hspace, vspace, align, etc. Specify
only the height, width and alt attributes. These are not strictly necessary but they serve
as hints to the browser about how to present the page while the images are downloading so
that the layout doesn't "jump" on the screen once the image arrives.
Specify class="illustration" or class="illustration"L on
the img tag to float an image to the right or left, respectively, if you want the
text to flow around them. In rare cases, you may need to specify
style="clear:left" (or clear:right or even clear:both) on the <p> or
<h> tags near an image in order to get the flow of text around images to look right.
This is more often necessary when you position the images on the left near
headings. Most of the time, the browser will create a reasonable-looking
text flow, especially with images positioned on the right.
5. Use the <br> tag (rarely) to control line-breaking when the standard text flow
done by a browser would not be correct, such as when presenting a poem. Don't use
them to create extra white space. Similary, don't use empty <p> tags or <img>
tags with clear gifs in order to create extra white space. Spacing is the domain of
the stylesheet.
6. Don't use the <font> tag at all. Authors are at the end of the
food-chain when it comes to fonts. Currently, photo.net lets users decide on fonts,
other than specifying font-size and weights for heading levels. If that changes, it
will be because we want a particular consistent look on the site as a whole. In
either case, authors don't have any say about fonts.
7. The <body> tag should be completely empty. It is going to get
rewritten anyway by the software, so any attributes you put in it would be lost.
8. It is good to put a <p> tag at the beginning of every paragraph, even the
paragraph immediately after a <Hn> heading tag. The browser will create an
"anonymous block" in many situations where there is no <p> tag, but
these will not be styled as a paragraphs according to the style sheet. At
present, the style sheet doesn't provide any special formatting of <p> tags, so you
will probably get away with all your anonymous blocks for the time being since browsers
format them like default paragraphs. But this could be a pain for somebody in the future.
9. There are three basic templates for the "top matter" of an article. All
articles have a title and a byline, but the top matter can optionally include a photo
illustration, and a Table of Contents.
a) Title and Byline
<h1>Title</h1>
<div class="byline">by Author</div>
<div class="endtop" />
b) Image, Title and Byline
<img class="illustrationL" width="x" height="y" src=...
/>
<h1>Title</h1>
<div class="byline">by Author</div>
<div class="endtop" />
c) Title, Byline, Image, and Table of Contents
<h1>Title</h1>
<div class="byline">by Author</div>
<div class="topmatter">
<img class="illustrationL" width="x" height="y" src=...
/>
<div class="toc">
<ol>
<li><a href="#part1">....</li>
<li><a href="#part2">....</li>
</ol>
</div>
</div>
10. Don't put in breadcrumbs; this will be done by the software, which will make the
breadcrumbs part of the standard photo.net header.
11. For now you can hard code any "where to buy" links or you can leave it up to
photo.net to add that. In the future we hope to do it automatically, but for now we don't.
In conclusion, the HTML that will result from following these rules is very clean HTML,
with the exception of a few <div> style classes defined by the stylesheet and
used for formatting the top matter, etc. This should make life easier for authors --
unless they insist on using a tool that refuses to produce vanilla HTML, in which case
someone will have to spend time removing all the guff produced by their tool.
One advantage of this approach is that not only can the style be changed more easily in
the future, if necessary, but such HTML can be transformed by the software if it becomes
necessary to create page decorations such as headers, footers, breadcrumbs, navigation
bars, multi-column layouts, advertising holes, etc.
Below is an example of an article template written using the stylesheet:
<html>
<head>
<title>Title for Browser Window</title>
<link rel="stylesheet" type="text/css"
href="/articles.css">
</head>
<body>
<div class="content">
<h1>Main Title</h1>
<div class="byline">
<p>by <a
href="http://www.mywebsite.com/mylink.html">Author</a> </p>
</div>
<div class="endtop" />
<h2>Subtitle</h2>
<p>
.....then comes all the content
.....then comes the end of the content
<div class="endmatter">
<p>(C) Copyright 2003 <a
href="http://www.mywebsite.com/mylink.html">Author </a> All Rights
Reserved </p>
</div>
</div>
</body>
</html>
(C) Copyright 2003 All Rights Reserved
