Creating Content for the club website – Lesson 2

• Hyperlinks
• Images
• Outlines
• Tables
• Floats
• div/span
• Stylesheets
• Microformats
• Headings

Callsign	Frequency
WA4TFZ	146.760Mhz
WA4DND	146.730Mhz

You can use some, but not all HTML markup in your posts/stories on the club website. Just below the box where you type your content, you will see a collapsed section title labelled “Input format”. There are currently two setttings: too restrictive (“Filtered HTML” and too permissive (“Full HTML”). Even the “Full HTML” setting doesn’t pass your stuff through unmolested and we need to work around some misbehaviour.

This markup will let you do stuff like insert hypertext links, images, outlines, tables, block quotes, and code samples. But Before I show you how to use HTML markup do these things, there is some tedious background info to cover.

HTML is a special type of markup that is both machine readable and human readable. HTML markup generally consists of putting markup around text like this:

<tag>text</tag>

where <tag> is called the start tag and </tag> is the matching end tag – with a forward slash preceeding the tag name. Whatever “tag” does to the content, it does to everything between the start tag and the end tag. In a few cases, there is no content in the middle so the end tag can be eleminated with a special form of start tag like this: <tag />. Tags can be nested:

 <tag1>hello, <tag2>world</tag2>, hello</tag1>

Escaping characters

Now, since the “<” and “>” characters have special meaning we need a way to type them. Turns out these can be represented with character entities. When you want “<” you type “&lt;” and when you want “>” you type “&gt;”. Ok, but now & is another special character, and we need a way to type it. “&amp;”. So, there are three characters we can’t type without special treatment. This is a small price to pay for human readable markup but it can get pretty annoying at times. Especially when you are typing a tutorial in how to write HTML or when you are typing commands for a computer program. There is ordinarly a way around this using the magic <![CDATA[ … ]]> markup, which causes the special characters inside to be taken litterally. Unfortunately, this doesn’t work in plain HTML (as opposed to XHTML) or Drupal 6. For those of you with access to a un*x/linux command line environment, including the Mac OS X shell, or cygwin or andLinux on windoze, the following alias will filter the “<“, “>”, and “& characters in HTML markup or text. Otherwise, skip over this example.

alias htmlfilt="sed -e 's/&/\&amp;/g' -e 's/</\&lt;/g' -e 's/>/\&gt;/g'"
$ echo "<tag>text</tag>" | htmlfilt
&lt;tag&gt;text&lt;/tag&gt;

Put this in your .bashrc file or equivalent to make it permanent. Or make a shell script with similar content.

$ echo "text" | htmlfilt
<tag>text</tag>

Ok, enough scary stuff. Back to tags. More complicated tags have attributes.

<tag attribute1="value1" attribute2="value2">content</tag>

We will use these attributes to do things like set the width and height of an image.

Handling of white space

One of the things about HTML is that white space (spaces, tabs, carriage returns, line feeds, newlines, etc.) is treated specially. In text, any amount of whitespace is normally equivalent to a single space. This lets you format your text with HTML tags to be readable. A markedup line may be longer than a rendered line and you want to be able to wrap it to fit on your screen nicely and be able to indent nested tags to reflect the structure of your document, etc.
An HTML paragraph is enclosed in <p> tags:
Markup:

<p>This is a paragraph.   This is only a paragraph.</p>

Or

<p>This is a paragraph.   
This is only a paragraph.</p>

Or:

<p>This is a paragraph.   This 
is only a paragraph.</p>

Rendered, they all should look the same:

This is a paragraph. This is only a paragraph.

(I magically put the box around it and scrunched the width to make it wrap.).

However, drupal breaks this handling of whitespace. There is a whitespace filter. It can be turned off at the administrative level in a klunky way. This filter is based on the idea that you are too dumb or too lazy to insert simple paragraph tags, and explicit line break tags (<br />), where needed, in your text. This is a common form of condescension among forum and blog software. It saves you a small amount of trouble but creates substantial trouble later. So, with the whitespace filter on, you can type paragraph tags but you don't need to. But do not put line breaks in the middle of your paragraphs because they will be turned into <br /> tags. This means your lines may be shorter than you intended and they will not reformat nicely on other size screens/windows.

Avoid picking up bad habits

One more thing about HTML. There are lots of sites and books out there that will tell you to do stupid things. When you try to get too fancy, you will end up making a mess of things. Most people who think they are hotshot web designers make terrible sites that break when you view them on different screen/window sizes, different types of devices, different screen sizes, different operating systems, different browsers, etc. THIS IS NOT PAPER. You are making content to be viewed on a wide variety of devices. Desktops, Laptops, Netbooks, Dump cell phones, smart phones, PDAs, MIDs, tablets, portable game stations, home game consoles, internet appliance, glass teletypes, ham radios, blu-ray players, DVR, set-top boxes, connected TV, car stereo/DVD player/GPS, wearable computer, etc. I have even browsed the web on a 1980s vintage landline desk telephone (an ancient Nortel Display Phone). Your text might be cut and pasted into fldigi and transmitted on 20m across the country during a disaster. You screens don't just vary in size and resolution there are monochrome screens, greyscale screens, screens with a limited color pallet, and full color screens. CRTs, LCDs, Plasma, e-ink/e-paper, DLP projectors, etc. And most will be out of color calibration if they even display color. Some screens can display boldface and italic, some can not. Some may have set default background colors different than you expect. Some have set a very small font so they can fit more on the screen or a very large one. Some of your readers will be color blind, have poor eyesight, be dyslexic, or be blind. They can't read red on green(red on green). Actually, I can't either, and I am not color blind; it is poor contrast and illegible unless I double the font size. And that might be marginally readable on some screens and not on others.

Here are three identical paragraphs of lorem ipsum (typesetter's giberish sample text). Each displayed in a box (simulating a screen window) of the same width. But I have altered them to simulate the kind of formatting problems that result when someone tries to do things their way.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non auctor tortor. In sit amet dapibus neque. Nulla acilisi. Proin quis dui consequat lacus interdum molestie ut eu velit. Nunc vel malesuada ligula, eget scelerisque orci. In id consequat turpis. Integer id eleifend nibh. Integer commodo nisl a nisi venenatis sagittis. Donec eget laoreet lacus, sed placerat massa. Proin a enim luctus orci laoreet laoreet. Duis sollicitudin, elit at tristique porttitor, dui nunc mollis massa, vel eleifend elit felis vitae libero. Nam dui ligula, rhoncus sit amet elit non, tincidunt egestas nunc.

You can, on many browsers, change the text size by hitting ctrl-alt-plus and ctrl-alt-minus and change the window size by dragging the corner. Do that while reading a web page and see how it affects the formatting. You might notice that my lesson 1 page doesn't handle a small width window as well as it should when displayed standalone and even worse when it is on the front page. But then, neither do the stories that had no formatting. That is because my web design is trapped inside drupal's poor web design. Don't make it worse. But my lesson 1 is readable on my cell phone which ignores some of the stupid instructions from drupal entirely. Lesson 2 may have some issues because I am deliberately illustrating a few bad things.

One thing they got partly right with the original versions of HTML is they made it abstract rather than a typsetting language. Then Microshaft, and to a lesser extent, Netscrape, and others came and tried to make it into a typsetter/word processor and made a mess of things. In spite of the fact that computer experts had demonstrated a decade earlier that this was a dumb way to do things. Eventually, the pendulum swung the other way and the formatting was separated from the content again but there is still lots of dreck remaining. If you are writing a citation, the dumb way to do it is to markup the title with italic formatting. The smart person's way to do it is to markup the title up as a title and tell the system that all titles are to be displayed in italics. Then you can change your citations to conform to the APA style guide, the MLA style guide, or the Chicago style guide. Not only that, your citations can, in theory, be automatically extracted by a database or search engine. Now, in the case of citations, HTML is still a mess. Markup languages such as docbook and TEI-Lite are actually better illustrations of what HTML should have been. HTML has some facilities for abstract markup but there is a lack of standardization in how to markup a bibliographic citation, a name, a year, a mailing address, a hamradio callsign, a frequency, a telephone number, a voltage measurement, a silent key obituary, a model number, a UPC code, a price, a button, a lattitue/longitude,. a resume, a recipe, a compent refdes, etc. But the wikipedia Microformat article shows some quasi-standard ways to mark up some things.

Remember: Keep it Simple Stupid!. Just because you can do something doesn't mean that you should.

Strong and emphasized

By now you know that it cannot be assumed that the device your page is being displayed on can display italics or boldface. So, instead, HTML came with strong and emphasized. These often display as bold and italic. On many VT-100 and similar terminals, there is no italic and bold may or may be available as a brighter intensity. So these might be displayed as inverse video or a different brightness or color. There are actually bold and italic tags but these are deprecated.


By now you know that it cannot be assumed that the device your page is being displayed on can display italics or boldface. So, instead, HTML came with <strong>strong</strong> and <em>emphasized</em>.


Hyperlinks

Ok, lets make a hyperlink. Every web page or image on the web, and many other objects, is supposed to have a URL (uniform resource locator) that
describes unambiguously how to get there. Hypertext is text which includes links to other documents or objects. The easiest way, since your text is probably going through the drupal url filter is just to type the URL.
http://www.arrl.org/
Drupal will convert this into a hyperlink. But we can do better. Try this example:
Markup:

Join the <a href="http://www.arrl.org/">
American Radio Relay League (ARRL)</a> today.

Rendered:

Join the American Radio Relay League (ARRL)today.

Note that due to the drupal linebreak filter, there are no carriage returns in that example even though it may wrap to fit on your screen. The <a> tag stands for anchor and can be used to mark either end of a hypertext link. The end where one document links to another document or a specific place inside a document for other pages to link to. The "href" attribute stands for hypertext reference and contains the URL of the page or object being linked to. In between the start and the end tags is the text that will be turned into a link. Notice that the link does not display in this form. Sometimes you want the link to be visible so people who have only a paper copy will have the URL but frequently we just link some relevent words in a sentence. Make your link as specific as appropriate. If this wasn't supposed to be a simple example, I might have linked not to the ARRL website but the specific page on the ARRL site where you can join the ARRL since my example text was about joining. And you can even link to specific places within a page if someone has provided anchors for you to link to but it can take some work to find those, when they are even there, unless the page you are linking to has a table of contents with internal links.

Images

Ok, lets insert an image with just the essentials, using a small image that is already on the website:

<img src="https://www.albemarleradio.org/sites/default/files/logo.png" 
width="95" height="80" alt="AARC website resistor/capacitor logo"  />

The <img> tag embeds an image; it contains no text or other html content so it is a self closing tag with the slash before the trailing greater than sign. The "src" attribute gives the URL from which to retrieve the image. The width and height give the width or height the image should be displayed at; this may be smaller or larger than the original size but it is usually undesirable to change the aspect ratio (width:height ratio) and you often want to use the actual image resolution. I use the "identify" command from the imagemagick software package to determine the size but there are many other software packages that will do this. In the firefox web browser, you can right click on an image and select "view image info" to see the width and height. The width and height didn't used to be enclosed in quotes but current practice is to put quotation marks around numerical attributes. The "alt" attribute is not optional; it contains text for blind people that at least roughly describes what the image is and helps provide information that would otherwise be missing to readers without the image. Non-blind people using non-graphical browsers such as "lynx" will also see the alt text. By the way, this image is transparent, meaning it has no background color so it can merge seamlessly with the page. It will render badly on, for example, a dark blue background.
. In general, specifying a foreground or background color without specifying the other can lead to unpleasant surprises as the unspecified color is subject to change.

Before you can embed an image, you need to host that image. You can link to images that are already on our website on another page or in our photo gallery.
Be careful of images that are on other peoples websites. They may vanish on you. There are copyright issues (you need permission). Sometimes there is a blanket license. Good permissive licenses are: "public domain", "CC-0", "CC-BY", "BSD license (without advertising clause)", "MIT License", etc. Examples of bad licenses are GPL, gnu free documentation license, and CC-BY-SA. These are viral licenses that dictate that any derivative works are made available under their terms. Others restrict commercial use or modification. You can search for images using google image search or http://search.creativecommons.org/ but while they have some capability to search by license, they don't have non-viral search criteria, though you can filter out some of the images with no blanket license. The openclipart library is a good source of public domain images as are many government websites. And, it is considered bad form to hotlink to an image on someone elses site without permission. Every time your page is loaded, their server has to serve up the image, so you are stealing service. And you are displaying their image without their content and possibly even without credit. So, give credit where credit is due and host your own images. You can use hosting services like photobucket but your images can disappear here when photobucket goes out of business. You can upload to our photo gallery but that requires a separate login which you might not have yet and it is a bit more time consuming. But the simple way is to host your image as a file attachment on your story/page. When you are editing a page, there is an unexpanded heading "File Attachments" a few inches below the box were you enter your page/story text. Upload a file from your computer to make an attachment. Once you do so, the URL for that file will appear below the listing for that file. Copy and paste it into your <img> tag "src" attribute. While you are in the listing, you may want to uncheck the box that says "list"; this way your file wont be included in the list of files the reader sees at the bottom of your page/story.

Making an image link to somewhere: this is easy, embed the <img> tag inside a <a> hypertext link tag. An image of a Yeasu VX-7R transceiver could link to the Yeasu website VX-7R page. Or a low resolution image could link to a high resolution version of the same image.

<a href="http://openclipart.org/detail/105565/walkie-talkie-by-netalloy"><img src="https://www.albemarleradio.org/sites/default/files/netalloy_walkie_talkie.png" width="95" height="80" alt="drawing of two walkie talkies" /></a>

Thumbnail or reduced size images can be created using imagmagick convert. You generally want a smaller image file not just html that squeezes an big image (that is slow to download) into a small space.

Making an image float to the right of the text, by itself. Add style="float: right" as an attribute to the <img> tag. Note that the image to be floated goes before the text which will be wrapping around it.


<img src="https://www.albemarleradio.org/sites/default/files/netalloy_walkie_talkie.png" width="95" height="80" alt="drawing of two walkie talkies" style="float: right; "/>


Drawing Credit: Netalloy at openclipart.org

Making an image float to the right of the text, with a photo credit or caption. Enclose the img tag in <span> that floats right and include the text inside the span. In this case I also set the width of the span because the text was significantly wider than the image. I also used a style="clear: right" on the box which displayed the code below since it had a width set somewhere that caused it to not play well with floats. Give Hal conflicting instructions and he might maroon you in deep space.

<span style="float:right; width: 100px">
<img src="https://www.albemarleradio.org/sites/default/files/netalloy_walkie_talkie.png" width="95" height="80" alt="drawing of two walkie talkies" />
Drawing Credit: Netalloy at openclipart.org
</span>


Some useful cross-platform command line image tools: identfy, convert, and mogrify (like convert but overwrites the original file) from the imagemagick toolkit. exiftool to set/view image comments, copyrights, license, location, geotag, etc. Use a for or foreach loop in your command interpreter to easily apply a command to every file.

DOS: for %i in (*.jpg) do identify %i 
linux/mac: for i in *.png; do identify $i; done

Gimp is a free cross-platform photo editor and there is a free book to tell you how to use it.

Lists

Unnumbered lists: "ul" stands for "unnumbed list". And "li" stands for "list item". Replace the <ul> tag with <ol>, for "ordered list", and you will get a numbered list and there are options to make lettered lists, etc. List can be nested. If you nest an <ul> tag (with its subordinate <li> tags) inside a <li> , you will produce an indented nested list - i.e. an outline.

<ul>
   <li>Hyperlinks</li>
   <li>Images</li>
   <li>Outlines</li>
    <li>Tables</li>
    <li>Floats</li>
</ul>

By the way, list items containing a hypertext link (<a&ft;) are a very handy way to make lists of links. A title goes inside the link and additonal comments can follow outside the link.

Tables

<table border="3">
  <tr><th>Callsign</th><th>Frequency</th></tr>
  <tr><td>WA4TFZ</td><td>146.760Mhz</td></tr>
  <tr><td>WA4DND</td><td>146.730Mhz</td></tr>
</table>

"tr" stands for "table row". "td" stands for "table data" (cells). "th" stands for "table heading" and is a special case of "td".

Beware: any text inside a table tag that is not inside the td/th tags will be pushed to the top of the table. If you put carriage returns inside your table so you can read your markup, as I did above, these will be converted to
tags. On a table with many rows, this will lead to an embarassingly large space above the table. So you should probably edit the table in a text editor (not a word processor) and paste it. If you need to use a GUI program to type your table, try kompozer. It won't generate clean html but it will not be as bad as many other programs. There is a online csv2wp converter (program also available for download, requires php) that will convert CSV files to html tables. The output is very clean but it has line breaks that will need to be removed to avoid the drupal bug mentioned above. You will need to run the output through the tr -d "\n" command (linux, mac os x, cygwin, andLinux, etc.) or similar to delete the newlines/carriage returns. Oh, and don't accidently paste a 23megabyte CSV file into the text entry field for one of these online converters; you will lose your browser session. If you don't have "tr", you can use an online converter. With the csv2html programs, you can save data from a spreadsheet program in csv format and not have to deal with the atrocious html they generate with lots of gratuitous formatting.

Remember that tables are for tabular data. In the past, people abused them for formatting purposes. Sometimes because they actually needed to be able to format things specially but often to preform unnecessary formatting. Style sheets can now do the formatting.

Here were the linux commands I used to clean up a table generated by Komposer. The first sed expression removes some unnecesssary markup, the second removes indentation, and the tr command removes newlines.

 cat positions.html | sed -e 's/ style="vertical-align: top;"//g' -e 's/^ *//' | tr -d "\n"

<div> and <span> and embedded stylesheet.

Div and span are generic block level and inline level elements. These are the poor mans version of make your own tags. Normally, these have an arbitrary "class" attribute. Stylesheet patterns match the class attributes to apply styles to specific elements.

This example starts with an embedded CSS stylesheet where we define how to format various classes of div and span tags. Stylesheets aren't limited to div and span tags but that is all we are using in this example. CSS stands for Cascading Stylesheets and it is a succinct language for describing how to format things. In CSS, you can have style information in multiple stylesheets, inside the HTML document, and even inside individual tags (as we did when we floated images). We could have a stylesheet for the entire albemarleradio.org website and then we could have a separate stylesheet for tutorial articles that may override some settings in the sitewide sheet.

The stylesheet defines a small unofficial microformat for marking up some things relating to ham radio. And, no, I didn't create a style for every class I used for mark up, just most of them.
Skip over the style sheet and look at the input and output first.


<style type="text/css">
div.qso_summary { outline-width: 2px; outline-style: solid; }
span.callsign { font-weight: bold; font-size: 140%}
span.frequency { font-weight: bold; font-size:120%; }
span.brand { font-style: italic; }
span.model { font-weight: bold; }
span.device { outline-width: 1px; outline-style: solid; }
span.club { font-weight: bold; }
</style>



<div class="qso_summary">On <span class="date">2013-07-11</span>, I talked to <span class="callsign">W2HD</span> and <span class="callsign">W2PVY</span> on <span class="frequency">146.760Mhz</span> during the <span class="hamnet">AARC Monday Night Info Net</span> to thank them for the <span class="device"><span class="brand">ICOM</span> <span class="model">IC-T2H</span> hand-held transceiver</span> which I won in the <span class="club">AARC</span> raffle.</div>

Section Headings

Section headings were something they screwed up when they originally created HTML. In another markup language called docbook, they had a section tag and inside the section tag the first tag was a title tag and you could nest sections inside each other. In HTML, you markup section headings instead of sections. Simple enough but it doesn't clearly delineate the sections and the sections aren't as easy to operate on as a unit with standardized tools. HTML has a number of section heading tags named: <H1>, <H2>, <H3>, <H4>, <H5>, and <H6>. Lower numbered tags are for more major sections. H1 is normally used once in a document to actually display the page title at the top of the page. So, normally we would start with H2 for our sections. But we are trapped inside drupal. Our story could be displayed on its own or on the front page. If on the front page, then each stories title is marked up with <H2>, so H2 has already been used. So we should start with H3. Or we could use our own docbook style div elements and a stylesheet.

<h3>Section Headings</h3>
<p>blah, blah, blah</p>
<h3>Blockquotes</h3>
<p>blah, blah, blah</p>

This is actually the first time I have messed with section headings in drupal. One quirk I notice is that drupal uses the h3 section heading to introduce your teaser preview and full preview sections.

I have used my own embedded style sheet to make the section headings more prominent.

<style type="text/css">
     h3 { border: solid; border-width: medium; clear: both; background: silver ; padding: 8px; border-style: ridge}
      h4 { border: solid; border-width: thin; clear: both; background: silver; padding: 4px; border-style: inset }
      h5 { border: solid; border-width: thin; clear: both; background: silver; padding: 0px  }
</style>

Blockquotes

When you are quoting someone else and it is a large quote, you can use a block quote. This will normally be indented and is sometimes enclosed in a box and or given a different background color, depending on the stylesheets used in your environment.


<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non auctor tortor. In sit amet dapibus neque. Nulla acilisi. Proin quis dui consequat lacus interdum molestie ut eu velit. Nunc vel malesuada ligula, eget scelerisque orci. In id consequat turpis. Integer id eleifend nibh.

</blockquote>


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non auctor tortor. In sit amet dapibus neque. Nulla acilisi. Proin quis dui consequat lacus interdum molestie ut eu velit. Nunc vel malesuada ligula, eget scelerisque orci. In id consequat turpis. Integer id eleifend nibh.

Code blocks

Small inline snippets of code are inclosed in <code> tags. This may affect the font used to display them such that they stand out from ordinary text. There are a number of examples of this embedded in this paragraph. Longer blocks of code can be enclosed in <pre> tags as well as a <code> tag, much like the lorem ipsum code was enclosed above. "pre" stands for preformatted. And it suspends the normal formatting rules for white space and line breaks so you line boundaries and indentation are the way you wanted them. But html tags are still processed and the less than, greater than, and ampersand characters still need to be escaped. On some sites, the stylesheet puts the code in a scrolling window. Because you are suspending the normal reformatting, your code will not rewrap when the window is resized which would normally be a bad thing for code samples. So sometimes they will go off the right side of the screen and you need to use the scrollbar. In writing this tutorial, I actually enclosed some html samples in blockquote instead of pre tags since I wanted it to reformat inside the narrow window that drupal gives us. And yes, the left sidebar menus really do detract from displaying code samples, tables, and larger images.

Using a stylesheet hack, I have given code fragments a lightgreen highlight in this document.

Pitfalls

• Forgetting to close a tag
• Forgetting to close a quotation mark
• closing tags in the wrong order
• using a start tag when you meant to use an end tag
• using = instead of : inside stylesheets.

These tend to result in symptoms like entire sections of your page disappearing, signicicant portions of you page being indented or formated incorrectly, etc.

Tested

This lesson has been viewed in over a dozen web browsers:

• Firefox 21.0 linux
• Google Chrome 28.0.1500.70 (Official Build 209565) OS Linux
• Lynx Version 2.8.8dev.9 (12 Jun 2011). Text based browser, images don't display, naturally. table displayed but slightly larger ones tend not to do well.
• Links 2.6 linux. Text based browser very similar to lynx. Did not display alt text for images but did do a better job of displaying small tables.

  Konqueror: 4.8.5 (4.8.5)

• Midori 0.4.3 linux
• kompozer version 0.8b3 (20081229) linux. This is a web page editor, not browser, using its preview mode. Tables won't float so it drops them inline or in once case underneath the example code that generated the table. Tables aren't something I would normally float
• NetSurf 2.8 (18th September 2011)
• uzbl 0.0.0~git.2011 linux
• amaya 11.4.4 (Jan 11 2012) linux. This is an editor which trys to work as a browser but has never been very good at real webstites. It tries to put the whole site in the left sidebar on this page or any other page on this site; more accuately, it tries to display it so the right edge is aligned with the edge of the sidebar and most of the page is off the left side of the screen. Actually puts the title on top of the left sidebar menu. If I delete all the drupal meta info and sidebar stuff it actually does a fair job of displaying the page. It doesn't handle the floated table but it floats the images and the unnumbered list. It does the green highlight but doesn't always get it lined up right. The float left on the first paragraph it fails to indent the first line of the paragraph.
• Opera mini 7.1.32056. Rumor touch cell phone (J2ME). Best of the non-smart-phones until superseded by rumor reflex. Does very well. Does styles including the green highlight on code and the grey boxes around section headings. The floating div that contains the table gets inlined while other floats float properly. The tables do not display as rows and columns, but are readable, but opera mini doesn't handle tables. Actually usable. Rumor touch has 3" 240x400 screen.
• Opera mini 7.1.32052 on Rumor Reflex cell phone (J2ME). Like above but does handle tables properly, including floating the floating table, even though it is a slightly older version of opera. However, this phone has about 5 times as much memory.
• Netfront 3.5.1. Rumor touch cell phone. Several years old. Unfortunately, it tries a little two hard and honors drupals request to put the left sidebar in a separate column, thing makes a very valient attempt to display this website in a 1" wide column. Does better than a desktop browser in some ways. The tiny tables render ok. It actually tries to do some floats and manages to float an unnumbered list next to the code that generates it. Actually usable.
• Arachne 1.95 DOS based browser. Went without updates for 8 years then another 4. This is apparently the version that is 4 years old. Running offline under freedos inside dosemu without a network connection configured so images weren't displayed (empty boxes in their place). Stylesheets basically ignored, images inline, tables formated properly. Actually rather usable if it had a network interface.
• Sorry, I think I got rid of the 1980s displayphone in a move but the page would display fairly well on it since it was used as a VT-100 terminal to a linux machine runing lynx. Text based but usable. If you run into one at a hamfest, it would be a cool companion to your TNC.

Floating the table as I did to show on the teaser that we would be making tables is not something I would recommend because it does cause some problems. I was actually surprised it worked at all.

embedding a PDF

I just used the following code to embed a PDF on another story. It will try the object first and if the browser can't display that it will use fall back to the png (which was created using imagemagick convert mapwpolice.pdf mapwpolice.png).


<object data="https://www.albemarleradio.org/sites/default/files/mapwpolice.pdf" width="800" height="1100" type="application/pdf" alt="PDF map of bike route" > <img src="https://www.albemarleradio.org/sites/default/files/mapwpolice.png" width="612" height="792" alt="PNG preview of PDF map of bike route" /></object>

This worked on firefox and google chrome and midori, netsurf, and uzbl fell back to the png. Opera mini on my cell phone fell back to the image and displayed it as a thumbnail which could be opened by itself. I could also click on the pdf in the file attachment list and launch a pdf viewer app (polaris document viewer J2ME). konqueror embedded the pdf but appears to have put it on top of the fallback image. kompozer fell back to the image in both edit and preview mode. Google chrome also allowed the use of the <embed> tag but firefox would complain about a missing plugin and the embed tag does not have fallback while embed allows you to attempt a variety of formats until you find one the browser can handle. Note that sizing is an issue. This will tend to spill over past the right margin, particularly if you resize the window or have a small screen. You can't use width="100%" because that doesn't set a suitable height and trying to use CSS to stipulate "width: 100%; height=auto;" doesn't work because the pdf doesn't have a well defined size and you can end up scrolling in a 1.5" high window. Best to have an actual link to the pdf to fall back to. Also remember that PDF is virtual paper and does not play well with small screens, people who need enlarged type (you can enlarge PDF but words won't wrap), doesn't work on non-graphical screens, etc. Lynx did not display the pdf or the png and fell back to the alt text, as expected. But you couldn't click on the alt text to launch an external viewer application as you could with other images (though if you are using lynx you might not have a screen that can support images); it did let me click on the attachment, though, and launch a pdf viewer.

Note that we could provide an object tag instead of an img tag inside the outer object tag and then do rich text markup in place of the alt text but the img tag is understood by much older browsers.

Don't forget to provide a link to the PDF file if embedding so it can still be accessed when falling back to the image. If it is a listed attachment, that will suffice. It is often useful to provide alternate formats.

Behave yourself

Due to drupal 6 limitations, we have two choices: give you insufficient privileges or too many. I would like to be able to fine tune them but that is not an option. So we have to trust our members to behave themselves. No javascript, java, flash, or malicious code, please. A youtube embed or google maps embed will probably be ok, though.

Addendum

Users without admin priviledges won't see some of the options described in these tutorials when editing a page.

Be very careful about including embedded style sheets in the section above the fold, as these can affect other articles on the front page. For example, this page styled <h3> which affected another story.