If you have ever wondered how BooMan, susanhbu, or some of the other BooT’s here manage
to put together those beautiful Diaries, I have the answer. Well – I have part of the answer.
Here is a short primer on the HTML tags and tag elements which are supported by the version of Scoop
that is used to run the BooMan Tribune.
While I have tried to cover all of the HTML tags and tag elements that can be used to write both
Diaries and Diary Comments here on BooMan Tribune, this is by no means either an exhaustive list
of all HTML tags and tag elements, nor does this list necessarily correspond to that set of HTML
tags and tag elements supported for all Scoop sites; or all versions of Scoop.
For example, while Daily Kos supports HTML tags like <STRIKE></STRIKE>, <SMALL></SMALL>,
and <TABLE></TABLE>, these tags are not supported by BooMan Tribune. Based upon what I can
find on the Scoop site, this is not because BooMan Tribune uses an older version of Scoop, but rather
because BooMan Tribune’s version of Scoop is newer.
I have placed quite a few comments in the HTML for this Diary in an attempt to provide even more examples
of both what I am doing, and how I am doing it.
For instance, the Anchor example below is bracketed by two comments, one at the start of the example,
and one at the end. If you view the source page for this Diary you will find:
<!– BEGIN A – Anchor, Hyperlink –>
– and –
<!– END A – Anchor, Hyperlink –>
Additionally, the entire Diary is bracketed by a beginning and ending comment tag:
<!– BEGIN HTML PRIMER –>
– and –
<!– END HTML PRIMER –>
So you could choose to simply view the Diary source, cut out the text between a beginning and
ending comment tags, and save that text to a file.
If you have additional tips to add to this Diary, or you find mistakes, plus chime in. I will probably find errors
and additions myself and just edit the Diary. While I have done quite a bit of HTML,
work, I am in no way an expert. Fact is, unlike most 3GL languages, with HTML I am constantly looking things up.
With HTML, there is always something new to learn.
HTML is a page description language, not a programming language, plus, because the browsers
are always evolving, there’s just always something new.
Note:For those who may be new to HTML, it is not necessary to use the ‘HTML Formatted’ option to embed simple HTML
tags in your Diaries or Comments. Simply select ‘Auto Format’ from the Drop Down List as you normally would, and insert the
HTML tags as you would normal text. Scoop will parse out the HTML tags from the regular text, and generally it will
‘do the right thing’.
The following links will take you directly to an example for that HTML tag or element. After reading that example you can then
return to this point in the Diary simply by clicking on your browser’s ‘Back’ button. Each example also contains a link
with much more information on that particular HTML tag or element, as well as other element values for a given HTML tag.
Yes, I know there is no example for the ‘CLASS’ element. Two things here.
- The <BLOCKQUOTE></BLOCKQUOTE> tag is the same as <DIV CLASS=”blockquote”></DIV> so using
a DIV to create a block quote is analogous to shooting a fly with a shotgun:
From the BooMan Tribune Style Sheet
blockquote, .blockquote {
color: #333333;
border: 1px solid #fdbb00;
background-color: #dddddd;
padding: 5px 10px 5px 10px;
margin: 5px 15px 5px 15px;
}
- I am saving the ‘CLASS’ element for another day, may be able to do some cool stuff.
But right now, too much coffee, and not enough sleep.
I HTH (hope this helps).
DIV – Document Division
<DIV [STYLE=”Style”] [CLASS=”Class”] [ALIGN=”Alignment”]>
Document Section
</DIV>
Specifies a document division. The most often used type of DIV is a ‘blockquote’.
Type:
Result:
DIV EXAMPLE
Also see: DIV STYLE
A – Anchor, Hyperlink
<A HREF=”Target” [NAME=”Name”]>Anchor Text</A>
An Anchor, which is often reffered to as a ‘link’ or ‘hyperlink’ defines a word or other
construct in the document which acts a link to a resource (e.g. another HTML
file, or an image file, or an audio file), or another location in the current document.
Type:
<A href=”http://www.boomantribune.com”>ANCHOR EXAMPLE</A>
Result:
Also see: A NAME
DL – Definition List
<DL>
<DT>Term 1<DD>Definition 1
<DT>Term 2<DD>Definition 2
…
</DL>
Presents a list of terms, and corresponding definitions for those terms. Note that while HTML 3.2 defines
the attribute element ‘COMPACT’, this element is deprecated in HTML 4.0. The element ‘COMPACT’ is not supported
by Scoop.
Type:
<DL>
<DT>EXAMPLE TERM 1<DD>EXAMPLE DEFINITION 1
<DT>EXAMPLE TERM 2<DD>EXAMPLE DEFINITION 2
…
</DL>
Result:
- EXAMPLE TERM 1
- EXAMPLE DEFINITION 1
- EXAMPLE TERM 2
- EXAMPLE DEFINITION 2
IMG – Inline Image
<IMG SRC=”URL” [ALT=”String”]
[HEIGHT=”Integer Height”] [WIDTH=”Integer Width”]
[ALIGN=”TOP | MIDDLE | BOTTOM | LEFT | RIGHT”] [BORDER=”Integer Border Width”]
[HSPACE=”Integer Horizontal Margin”] [VSPACE=”Integer Vertical Margin”]>
Includes an inline image into the document. Note that the only value which is mandatory is ‘SRC’.
However and ‘ALT’ element is strongly recommended. Height and Width values are also recommended as
including these values will result in a page which will display faster. By default, the positioning
of the image, i.e. ‘ALIGN’, is set to the bottom relative to the current text line. A value for ‘ALIGN’ is
not required. ‘BORDER’, ‘HSPACE’, and ‘VSPACE’ values all
are zero by default. If a border, horizontal space, or vertical space is not required, there is no need
to define these elements.
Type:
EXAMPLE IMAGE<img SRC=”http://www.boomantribune.com/images/booman-frogmarch-logo-smaller.jpg” ALT=”Booman Tribune” HEIGHT=”175″
WIDTH=”175″ ALIGN=”MIDDLE” BORDER=”2″ HSPACE=”10″ VSPACE=”10″”>
Result:
EXAMPLE IMAGE
TT – Teletype (Monospaced) Text
<TT>Monospaced Text</TT>
Display text in a monospaced font. The font used is typically that font which is selected as the
default monospaced font in your browser preferences.
Type:
Result:
TT EXAMPLE
OL – Ordered (Numbered) List
<OL>
<LI> List Item 1
<LI> List Item 2
…
</OL>
Display information in the form of an ordered (numbered) list.
Type:
<OL>
<LI>EXAMPLE ITEM 1
<LI>EXAMPLE ITEM 2
</OL>
Result:
- EXAMPLE ITEM 1
- EXAMPLE ITEM 2
CITE – Citations
<CITE>Citation Text</CITE>
Display a citation or reference to other sources, such as a book title.
Typically a cite is displayed in italics, though some browsers may display cites differently.
For instance, some browsers use underlining or quotes around the citation.
Type:
<CITE>EXAMPLE CITE</CITE>
Result:
EXAMPLE CITE
CODE – Program Code
<CODE>Program Code Text</CODE>
Display program code. Typically a browser will display all text between ‘CODE’ tags
in a monospaced font. In this way a ‘CODE’ tag behaves much like a ‘TT’ tag.
Type:
<CODE>EXAMPLE CODE</CODE>
Result:
EXAMPLE CODE
I – Italicized Text
<I>Italicized Text</I>
Display text in italics.
Type:
<I>EXAMPLE ITALIC TEXT </I>
Result:
EXAMPLE ITALIC TEXT
UL – Unnumbered List
<UL>
<LI> List Item 1
<LI> List Item 2
…
</UL>
Display information in a list form (without numbering the items). Note that while HTML 3.2 defines
the elements ‘TYPE’, and ‘COMPACT’, these elements are deprecated in HTML 4.0, and are not
not supported by Scoop. All items will default to TYPE=”Circle”.
Type:
<UL>
<LI>EXAMPLE ITEM 1
<LI>EXAMPLE ITEM 2
</UL>
Result:
- EXAMPLE ITEM 1
- EXAMPLE ITEM 2
EM – Emphasized Text
<EM>Emphasized Text</EM>
Display emphasized text. The definition of what emphasis means may vary among browsers and browser platforms.
Type:
<EM>EXAMPLE EMPHASIS</EM>
Result:
EXAMPLE EMPHASIS
BR – Line Break
<BR>
Forces a line break (but not paragraph break) within a given block of text.
Type:
This is text before two line breaks.<BR><BR>This is text after two line breaks.
Result:
This is text before two line breaks.
This is text after two line breaks.
STRONG – Strong Emphasis
<STRONG>Strong Text</STRONG>
Displays strongly emphasized text. The definition of what strongly emphasized means may vary among browsers and browser platforms.
Type:
<STRONG>EXAMPLE STRONG TEXT</STRONG>
Result:
EXAMPLE STRONG TEXT
BLOCKQUOTE – Long Quotation
<BLOCKQUOTE>
Blockquote Text
</BLOCKQUOTE>
Displays a long, often copyrighted, quotation to be rendered as a block of its own
(in contrast to shorter quotations embedded into text paragraphs).
Type:
<BLOCKQUOTE>EXAMPLE BLOCKQUOTE</BLOCKQUOTE>
Result:
P – Normal Paragraph
<P>Paragraph Text</P>
Displays a normal paragraph. Note that the close paragraph tag e.g. </P>, will insert a line
feed into the document
Type:
<P>EXAMPLE PARAGRAPH TEXT</P>
Result:
B – Bold Text
<B>Bold Text</B>
Display bold text. Bold version of the current font face is used.
Type:
Result:
EXAMPLE BOLD TEXT
NAME – A Name Element
NAME=”Name”
Although the Anchor tag is normally used to link to a target which corresponds to another document,
the Anchor tag may also be used to link to a specified point in the same document. For long
Diaries, or Diaries where the author may want to use, say, a table of contents, using the NAME element
of the Anchor tag allows the author to define such an Anchor.
Example:
Table of Contents
<P><A href=”#section1″>Introduction</A></P>
<P><A href=”#section2″>Some background</A></P>
<P><A href=”#section2.1″>On a more personal note</A></P>
…the rest of the table of contents…
…the document body…
<P><A name=”section1″>Introduction</A></P>
…section 1…
<P><A name=”section2″>Some background</A></P>
…section 2…
<P><A name=”section2.1″>On a more personal note</A></P>
…section 2.1…
The top of this Diary defines the name ‘TOP’.
<A NAME=”TOP”>
Type:
Click <A HREF=”#TOP”>HERE</A> to jump to the top of the document.<BR>
Use your browser’s “Back’ button to jump back here.
Result:
Click
HERE to jump to the top of the document.
Use your browser’s “Back’ button to jump back here.
STYLE – DIV Style Element
STYLE=”Name1:Value1; … NameN:ValueN;”
Complete Diaries or sections of Diaries or Comments can be enclosed within a DIV tag.
Because the STYLE element can be used in a DIV tag, that portion of text will be formatted to
display using that ‘name:value;” data which is included in the STYLE element.
Because this topic requires some knowledge of inline styles, cascading style sheets,
and because of the sheer number of possible ‘name:value;’ pairs,
I have left most of how this is done as an excercise for the reader.
The best way to find information about what a ‘name:value;’ pair does, the possible values for
a given ‘name:value;’ pair, etc, is by searching Google.
For example, search
HTML font-size.
I have included a modified ‘STYLE’ element name values which define the DIV STYLE I have used in this Diary.
The following changes were made such that the DIV would display differently within its enclosure.
Old ‘font-size’ Value ‘font-size:12px;’
— New ‘font-size’ Value ‘font-size:18px;’
Old ‘font-weight’ Value ‘font-weight:normal;’
— New ‘font-weight’ Value ‘font-weight:normal;’
Old ‘background-color’ Value ‘background-color:#fda;’
— New ‘background-color’ Value ‘background-color:blue;’
Old ‘border-color’ Value ‘border-color:#aaa;’
— New ‘border-color’ Value ‘border-color:red;’
Old ‘border-width’ Value ‘border-width:1px;’ (all)
— New ‘border-width’ Value ‘border-width:1px 2px 3px 4px;’ (top, right, bottom, left)
Old ‘padding’ Value ‘padding: 5px 10px 5px 10px;’ (top, right, bottom, left)
— New ‘padding’ Value ‘padding:20px;’ (all)
Type:
<DIV STYLE=”width:80%;
font-family:helvetica,arial,sans-serif;
font-size:18px;
font-face:italic;
font-weight:bold;
background-color:blue;
border-width:1px 2px 3px 4px;
border-style:solid;
border-color:red;
padding:20px;
margin: 5px 15px 5px 15px;”>BLUE TEXT BOX, RED BORDER</DIV>
Result:
BLUE TEXT BOX, RED BORDER