M O N D O  F U E G O ' S  H T M L  P R A C T I C E  B O A R D

This is a limited-access board where members of Mondo Fuego's Civilized Personal Discussion Board [http://disc.yourwebapps.com/Indices/227735.html] can practice HTML (Hyper Text Markup Language) code to enhance text, build tables, show pictures, provide links to other web pages, and embed music and/or video clips in posts. You can also use this board for technical discussions and questions. HTML code can be used only in the 'Message' section of a post, and cannot be used in the 'Author', 'Email' and 'Subject' fields on this board and on the Civilized Personal Discussion Board.

You can contact me at: MondoFuego@yahoo.com.

1. To post a picture ('.bmp', '.jpg', '.gif', etc.):

General format: <img src="URL">

Sample picture HTML: <img src="http://splinter59.canalblog.com/images/Ford_gt_405.jpg">
Note: URL (Uniform Resource Locator) = web address of a web site, picture, music cut, etc. Example: http://disc.yourwebapps.com/Indices/233789.html

2. To embed music or sound in a post ('.ram', '.ra', '.wmp', '.wma', '.mid', '.mp3', '.rmi', '.wav', etc.):

General formats:

1. <embed src="URL" autostart="true" loop="true" hidden="true"></embed>

... or ...

2. <bgsound src="URL" loop="1 ... 2 ... 3 ... etc.">

Sample music HTML: <embed src="http://www.hhdarma.addr.com/disco/df-06.rm" autostart="true" loop="true" hidden="true"></embed>
   To embed a video clip in a post ('.mpg', '.mpeg', '.wmv', etc.):

General format: <embed src="URL" width=(# pixels) height= (# pixels) autostart=(0 or 1) loop=(0 or 1) showcontrols=(0 or 1) volume=(# decibels)></embed>

Sample video HTML: <embed src="http://media.ebaumsworld.com/wmv/runoveraccident.wmv" width=320 height=285 autostart=1 showcontrols=1 volume=-20></embed>

3. To post a link to another web page:

General format: <a target="_blank" href="URL">Text describing link</a>

Sample link HTML: <a target="_blank" href="http://disc.yourwebapps.com/Indices/227735.html">Mondo's Board</a>
[Notes: (1) the link text "Mondo's Board" will appear underlined, indicating that it is a clickable link; (2) the 'target="_blank"' sub-command causes the linked web page to open in another window; if omitted, the linked web page will open in [on top of] the then-current window, and you will have to click the browser "Back" button to get back to the original page containing the link; (3) you can use the "embed" command with 'hidden="false"' to display a video, but it does not always work well - it is better to use a clickable link and have the video open in a new window.]

4. Text attribute commands:

Bold: <b>Text</b> - sample: Text

Underline: <u>Text</u> - sample: Text

Italics: <i>Text</i> - sample: Text

Strike-thru: <s>TEXT</s> - sample: TEXT

Subscript: H<sub>2</sub>O - sample: H2O

Superscript: πr<sup>2</sup> - sample: πr2

Multiple attributes: <b><u><i>Text</i></u></b> - sample: Text
[Note: apply attribute cancel commands (e.g., </b>) in inverse order that the attribute commands were used - i.e., use proper "nesting" of commands - it will help avoid confusion when you're trying to debug HTML.]

5. Font attribute commands:

Font size: <font size=5>Text</font> - sample: Text

Font color: <font color=red>Text</font> - sample: Text

Font face: <font face="Old English Text MT">Text</font> - sample: Text
Multiple font attributes: <font face=Playbill size=8 color=deeppink>Text</font> - sample: Text
[Notes: (1) refer to HTML color charts at MDSN HTML Reference Library for standard color names or use the hexadecimal 'rrggbb' codes at Visibone - e.g., "FF0000" = red, "00FF00" = green, "0000FF" = blue, "000000" = black, "FFFFFF" = white - there are 16,777,216 color combinations; (2) it appears that normal font size on the disc.yourwebapps.com boards is "3"; (3) the font face names can be found in Microsoft Word and numerous other places - if it is a single word {e.g., Playbill}, you don't need quotes - if it is multiple words {i.e., contains embedded spaces, e.g., "Old English Text MT"}, you need quotes; (4) you can scale the size of the font up and down with '+n' or '-n' (e.g., 'size=+2') without having to remember what the previous font size declaration was - then, the </font> command resets to the previous font size declaration.]

6. Table commands:

This basic table:
Row 1, Cell 1Row 1, Cell 2
Row 2, Cell 1Row 2, Cell 2
has the following HTML code:

<center><table width=250 border=3 cellpadding=3 cellspacing=5> <tr><td bgcolor=pink>Row 1, Cell 1</td><td bgcolor=lime>Row 1, Cell 2</td></tr> <tr><td bgcolor=teal>Row 2, Cell 1</td><td bgcolor=plum>Row 2, Cell 2</td></tr> </table></center>
Where: <center> ... </center> - centers table in field <table> ... </table> - defines table definition beginning & end width - width of table in # of pixels [optional] border - thickness of table border in # of pixels cellpadding - # of pixels between edges of table cells and cell contents cellspacing - # pixels forming border of each cell <tr> ... </tr> - defines beginning and end of a table row <td> ... </td> - defines beginning and end of a table cell or column bgcolor - background color of cell
[Note: there are numerous other sub-commands associated with tables which can be found in the reference materials provided in Section 8.]

7. Blockquote text frame commands:

This blockquote text frame has the following HTML code:

<blockquote style="background-color: turquoise; margin-left: 6; margin-right: 6; border-bottom: 10px ridge #00ff00; border-top: 10px ridge #ff00ff; border-left: 10px ridge #00ffff; border-right: 10px ridge #ffff00; padding: 2em 1em"></blockquote>
Where: <blockquote> ... </blockquote> - defines beginning and end of text frame style="..." - can contain the following text frame parameters: background-color: - background color inside frame margin-left: - left margin outside frame in mm margin-right: - right margin outside frame in mm border-bottom (-top) (-left) (right): - border width in pixels ('10px') - border style ('ridge') - border color ('#00ff00') padding: margin between inside frame wall and text in cm: - first parameter is top and bottom margin ('2em') - second parameter if left and right margin ('1em') width: - width in pixels ('600px')
[Note: there are other sub-commands associated with blockquote which can be found in the reference materials provided in Section 8.]

8. Additional HTML reference materials:

A. Microsoft MSDN Web Development Reference (note handy +/- index on left of page)
B. disc.yourwebapps.com HTML Tips & Tricks Cheat Sheet
C. HTML Dog
D. MSDN Color Chart
E. VisiBone Color Chart
F. HTML Reference Guide
G. Sizzling HTML Jalfrezi
H. Purpose & Placement of HTML Commands
I. WebMonkey
J. HTML Goodies
K. DRAAC.com HTML & Javascript Test Bed (HTML Test Site)
L. Mastering HTML 4 by Deborah & Eric Ray (this book is definitely worth buying)

9. School of "Hard Knocks":

After you have mastered the basics, you can advance your skills greatly by exploring the HTML code behind interesting web pages.

Just right-click on a web page and click 'View Source', which will bring up the web page code in ASCII-2 text format in Microsoft Notepad.

You can then browse the code or use 'Edit' ... 'Search' to find items of specific interest (e.g., 'table'). Some of the code strings will be long, and you will have to scroll horizontally to view everything. You can cut down the horizontal width of long strings by placing the cursor anywhere you like (hopefully at the intersection of a '><' pair) and pressing the 'Enter' key once - this will not cause a line break when the code is interpreted in a subsequent post or in a web browser or in a HTML code builder like Microsoft FrontPage (I forgot to mention that a line break is caused by the '<br>' command, and additional space characters are generated by the '&nbsp;' mnemonic representation or the '&#160;' numeric representation - [HTML Character Codes]).

You can cull out code that you don't want and edit the remaining code to suit your needs, and you can test the results along the way in a post on this board or with some other HTML test facility.

You can save the file as a '.txt' file for subsequent editing via Notepad or any other text editor. You can also save the file as a '.htm' file and do further editing in Microsoft FrontPage. And, you can click on your '.htm' file using Windows Explorer or Windows XP File Manager and see your code interpreted by your web browser (e.g., Microsoft Internet Explorer).

Not all web browsers will interpret sophisticated "bleeding edge" HTML code correctly, so if you are using a "dark horse" browser and you see some inexplicable strange results, you may need to update your web browser to the latest version, or switch to a different browser, or tone-down the sophistication of your HTML code to a lower common denominator.

As you are posting test HTML code here, it would be helpful to yourself and others if you put a short description of what you are doing in the 'Subject' field. Also, after you have entered your code in the 'Message' field, copy it and paste it a second time below your original code and surround it with <xmp> ... </xmp> ('example') commands so that you can see what code you entered as well as see the results.

Last, but not least, you can post questions here on this board in the 'Subject' field, and with any luck a Good Samaritan will assist you; it might help to leave an e-mail address for someone to respond to you.

~ sumcogito ~

Lease this WebApp and get rid of the ads.

1 ~ arachni_name, Thu Aug 16 11:00



1 ~ arachni_name"'`--, Thu Aug 16 11:00



1 ~ arachni_name, Thu Aug 16 11:00



1 ~ arachni_name), Thu Aug 16 11:00



1 ~ arachni_name, Thu Aug 16 11:00



1 ~ arachni_name, Thu Aug 16 11:00



1"'`-- ~ arachni_name, Thu Aug 16 11:00



1) ~ arachni_name, Thu Aug 16 11:00



1 ~ arachni_name, Thu Aug 16 11:00



1 ~ arachni_name, Thu Aug 16 11:00



1 ~ arachni_name, Thu Aug 16 11:00



1 ~ arachni_name), Thu Aug 16 11:00



1"'`-- ~ arachni_name, Thu Aug 16 11:00



1 ~ arachni_name, Thu Aug 16 11:00



1 ~ arachni_name"'`--, Thu Aug 16 11:00



1 ~ arachni_name, Thu Aug 16 11:00



1 ~ arachni_name, Thu Aug 16 11:00



1) ~ arachni_name, Thu Aug 16 11:00



1 ~ arachni_name, Thu Aug 16 10:59



1 ~ arachni_name, Thu Aug 16 10:59



1 ~ arachni_name, Thu Aug 16 10:59



1 ~ arachni_name, Thu Aug 16 10:59



1 ~ arachni_name, Thu Aug 16 10:59



1"'`-- ~ arachni_name, Thu Aug 16 10:59



1) ~ arachni_name, Thu Aug 16 10:59



Vidi ~ Vici ~ Veni