|
by superscalar 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. 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. 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.
I HTH (hope this helps).
<DIV [STYLE="Style"] [CLASS="Class"] [ALIGN="Alignment"]> Specifies a document division. The most often used type of DIV is a 'blockquote'. Type:
<DIV>DIV EXAMPLE</DIV>
Result:
DIV EXAMPLE
Also see: DIV STYLE
<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> 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:
<IMG SRC="URL" [ALT="String"] 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:
<TT>TT EXAMPLE</TT>
Result:
TT EXAMPLE
<OL> Display information in the form of an ordered (numbered) list. Type:
<OL>
<LI>EXAMPLE ITEM 1 <LI>EXAMPLE ITEM 2 </OL> Result:
<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 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> Display text in italics. Type:
<I>EXAMPLE ITALIC TEXT </I>
Result:
EXAMPLE ITALIC TEXT
<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:
<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> 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 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> 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:
EXAMPLE BLOCKQUOTE
<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:
EXAMPLE PARAGRAPH TEXT
<B>Bold Text</B> Display bold text. Bold version of the current font face is used. Type:
<B>EXAMPLE BOLD TEXT</B>
Result:
EXAMPLE BOLD TEXT
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 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="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
How'd boo do that? (An HTML Primer) | 18 comments (18 topical, 0 editorial, 0 hidden)
How'd boo do that? (An HTML Primer) | 18 comments (18 topical, 0 editorial, 0 hidden)
|
Login
We listened to PEN American Center's "State of Emergency" and found 1940s books by Curzio Malaparte only at Alibris
|
||||||||||
Booman Tribune Homepage admin@boomantribune.com powered by Scoop 
More blogs about Blogs at Technorati.
|
||||||||||||
