# Fun with HTML (tutoral)

**URL:** <https://boards.straightdope.com/t/fun-with-html-tutoral/512>\
**Category:** About This Message Board\
**Created:** [September 12, 1999, 1:03am UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512 "1999-09-12T01:03:00Z")\
**Posts on this page:** 20\
**Page:** 5

<div class="post-metadata">

**Author:** ![Imthecowgodmoo](https://avatars.discourse-cdn.com/v4/letter/i/58f4c7/32.png) [@Imthecowgodmoo](https://boards.straightdope.com/u/Imthecowgodmoo)\
**Post date:** [October 14, 1999, 5:22am UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/81 "1999-10-14T05:22:00Z")

</div>

\<img src=“[http://members.aol.com/cliftondrew/beer.jpg](http://members.aol.com/cliftondrew/beer.jpg)” alt=“cool”\>

mmmm, beer

* * *

“I’m not dumb. I just have a command of thoroughly useless information.”-- Calvin and Hobbes  
(\_\_)  
`\/-------\ `| |-----| |  
…c.c…c.c…

---

<div class="post-metadata">

**Author:** ![Atrael](https://avatars.discourse-cdn.com/v4/letter/a/6a8cbe/32.png) [@Atrael](https://boards.straightdope.com/u/Atrael)\
**Post date:** [October 14, 1999, 3:21pm UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/82 "1999-10-14T15:21:00Z")

</div>

sig line test

* * *

_[marquee]I haven’t lost my mind, I have a tape backup around somewhere.[/marquee]_

---

<div class="post-metadata">

**Author:** ![Atrael](https://avatars.discourse-cdn.com/v4/letter/a/6a8cbe/32.png) [@Atrael](https://boards.straightdope.com/u/Atrael)\
**Post date:** [October 14, 1999, 3:27pm UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/83 "1999-10-14T15:27:00Z")

</div>

hmmmmmm

* * *

_\<marquee\>I haven’t lost my mind, I have a tape backup around somewhere.\</marquee\>_

---

<div class="post-metadata">

**Author:** ![Imthecowgodmoo](https://avatars.discourse-cdn.com/v4/letter/i/58f4c7/32.png) [@Imthecowgodmoo](https://boards.straightdope.com/u/Imthecowgodmoo)\
**Post date:** [October 14, 1999, 6:19pm UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/84 "1999-10-14T18:19:00Z")

</div>

\<HTML\>\<FONT SIZE=5 PTSIZE=18 FAMILY=“SANSSERIF” FACE=“Arial” LANG=“0”\>I’m\</FONT\>\<FONT SIZE=3 PTSIZE=10\> \</FONT\>\<FONT SIZE=3 PTSIZE=10 FAMILY=“SERIF” FACE=“Times New Roman” LANG=“0”\> **going\</FONT\>\<FONT SIZE=3 PTSIZE=10 FAMILY=“SANSSERIF” FACE=“Arial” LANG=“0”\>** \* to\* \</FONT\>\<FONT COLOR="#ff0000" SIZE=7 PTSIZE=28\>test\</FONT\>\<FONT COLOR="#000000" SIZE=3 PTSIZE=10\> _ **this** _ \</FONT\>\<FONT SIZE=2 PTSIZE=8 FAMILY=“DECORATIVE” FACE=“Bauhaus 93” LANG=“0”\>and\</FONT\>\<FONT SIZE=3 PTSIZE=10 FAMILY=“SANSSERIF” FACE=“Arial” LANG=“0”\> \</FONT\>\<FONT COLOR="#0000ff" SIZE=3 PTSIZE=10\>s\</FONT\>\<FONT COLOR="#00ff40" SIZE=3 PTSIZE=10\>e\</FONT\>\<FONT COLOR="#ff8000" SIZE=3 PTSIZE=10\>e\</FONT\>\<FONT COLOR="#000000" SIZE=3 PTSIZE=10\> \</FONT\>\<FONT SIZE=6 PTSIZE=20\>if \</FONT\>\<FONT SIZE=7 PTSIZE=26\>it\</FONT\>\<FONT SIZE=6 PTSIZE=20\> \</FONT\>\<FONT SIZE=7 PTSIZE=36 FAMILY=“SERIF” FACE=“Wide Latin” LANG=“0”\>works.\</HTML\>

* * *

“I’m not dumb. I just have a command of thoroughly useless information.”-- Calvin and Hobbes  
(\_\_)  
`\/-------\ `| |-----| |  
…c.c…c.c…

---

<div class="post-metadata">

**Author:** ![Imthecowgodmoo](https://avatars.discourse-cdn.com/v4/letter/i/58f4c7/32.png) [@Imthecowgodmoo](https://boards.straightdope.com/u/Imthecowgodmoo)\
**Post date:** [October 14, 1999, 6:20pm UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/85 "1999-10-14T18:20:00Z")

</div>

eek! that got ugly

* * *

“I’m not dumb. I just have a command of thoroughly useless information.”-- Calvin and Hobbes  
(\_\_)  
`\/-------\ `| |-----| |  
…c.c…c.c…

---

<div class="post-metadata">

**Author:** ![Louie](https://avatars.discourse-cdn.com/v4/letter/l/c68b51/32.png) [@Louie](https://boards.straightdope.com/u/Louie)\
**Post date:** [October 15, 1999, 12:33am UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/86 "1999-10-15T00:33:00Z")

</div>

Hey, that cow looks better in that font. Too bad you can’t use HTML in sigs.

* * *

Smile, it makes people wonder what you are thinking.  
[Fun with HTML (tutoral)](http://www.straightdope.com/ubb/Forum2/HTML/000194.html)  
[Give someone an F.U.](http://www.straightdope.com/ubb/Forum5/HTML/000255.html)

---

<div class="post-metadata">

**Author:** ![SterlingNorth](https://avatars.discourse-cdn.com/v4/letter/s/8dc957/32.png) [@SterlingNorth](https://boards.straightdope.com/u/SterlingNorth)\
**Post date:** [October 15, 1999, 12:47am UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/87 "1999-10-15T00:47:00Z")

</div>

This is just a test!

> [@](#):
>
> All of a sudden she points at the bush next to me and exclaims, “Oh my god, there’s a hundred dollar bill!”

**SterlingNorth**

[http://www.straightdope.com/ubb/posticon.gif](http://www.straightdope.com/ubb/posticon.gif)

\<font size=“1” color="#800080"\>10-14-1999 05:10 PM\</font\>

Had this been an actual post, you may have seen a life-affirming statement!

Or maybe not!

---

<div class="post-metadata">

**Author:** ![SterlingNorth](https://avatars.discourse-cdn.com/v4/letter/s/8dc957/32.png) [@SterlingNorth](https://boards.straightdope.com/u/SterlingNorth)\
**Post date:** [October 15, 1999, 12:48am UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/88 "1999-10-15T00:48:00Z")

</div>

This is just a test!

> [@](#):
>
> All of a sudden she points at the bush next to me and exclaims, “Oh my god, there’s a hundred dollar bill!”

**SterlingNorth**

[http://www.straightdope.com/ubb/posticon.gif](http://www.straightdope.com/ubb/posticon.gif)

\<font size=“1” color="#800080"\>10-14-1999 05:10 PM\</font\>  
[/quote]

Had this been an actual post, you may have seen a life-affirming statement!

Or maybe not!

---

<div class="post-metadata">

**Author:** ![Louie](https://avatars.discourse-cdn.com/v4/letter/l/c68b51/32.png) [@Louie](https://boards.straightdope.com/u/Louie)\
**Post date:** [October 20, 1999, 5:56am UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/89 "1999-10-20T05:56:00Z")

</div>

Another “keeping this afloat” post.

One more thing. Please don’t be attempt to be annoying with all the tricks.

\<marquee behavior=“alternate”\>\<font size=7 color=“green” face=“Rage Italic”\>See what I mean???\</font\>\</marquee\>

---

<div class="post-metadata">

**Author:** ![Scarred](https://avatars.discourse-cdn.com/v4/letter/s/54ee81/32.png) [@Scarred](https://boards.straightdope.com/u/Scarred)\
**Post date:** [October 20, 1999, 7:35pm UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/90 "1999-10-20T19:35:00Z")

</div>

**just playing around**

---

<div class="post-metadata">

**Author:** ![Earl\_Snake-Hips\_Tucker](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/earl_snake-hips_tucker/32/3269_2.png) [@Earl\_Snake-Hips\_Tucker](https://boards.straightdope.com/u/Earl_Snake-Hips_Tucker)\
**Post date:** [October 25, 1999, 6:34pm UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/91 "1999-10-25T18:34:00Z")

</div>

**bold**  
_italics_  
underline  
\<strike\>strike\<strike\>

---

<div class="post-metadata">

**Author:** ![Earl\_Snake-Hips\_Tucker](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/earl_snake-hips_tucker/32/3269_2.png) [@Earl\_Snake-Hips\_Tucker](https://boards.straightdope.com/u/Earl_Snake-Hips_Tucker)\
**Post date:** [October 25, 1999, 6:38pm UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/92 "1999-10-25T18:38:00Z")

</div>

**bold** test  
_italics_ test  
underline test  
\<strike\>strike\<strike\> test

---

<div class="post-metadata">

**Author:** ![Earl\_Snake-Hips\_Tucker](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/earl_snake-hips_tucker/32/3269_2.png) [@Earl\_Snake-Hips\_Tucker](https://boards.straightdope.com/u/Earl_Snake-Hips_Tucker)\
**Post date:** [October 25, 1999, 6:42pm UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/93 "1999-10-25T18:42:00Z")

</div>

**bold** test  
_italics_ test  
underline test  
\<strike\>strike\</strike\> test

---

<div class="post-metadata">

**Author:** ![Earl\_Snake-Hips\_Tucker](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/earl_snake-hips_tucker/32/3269_2.png) [@Earl\_Snake-Hips\_Tucker](https://boards.straightdope.com/u/Earl_Snake-Hips_Tucker)\
**Post date:** [October 26, 1999, 8:35am UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/94 "1999-10-26T08:35:00Z")

</div>

\<quote\>test\</quote\>  
test  
\<q\>test\</q\>  
test

---

<div class="post-metadata">

**Author:** ![TubaDiva](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/tubadiva/32/507_2.png) [@TubaDiva](https://boards.straightdope.com/u/TubaDiva)\
**Post date:** [October 28, 1999, 4:06pm UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/95 "1999-10-28T16:06:00Z")

</div>

Back to the top!

your humble TubaDiva/SDStaffDiv  
for the Straight Dope

PS Hey Louie, wanna add Phobia’s comments re pictures to this file? Since you started this, I’m asking you first.

---

<div class="post-metadata">

**Author:** ![Louie](https://avatars.discourse-cdn.com/v4/letter/l/c68b51/32.png) [@Louie](https://boards.straightdope.com/u/Louie)\
**Post date:** [October 29, 1999, 6:05am UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/96 "1999-10-29T06:05:00Z")

</div>

I’m going to make an update to the tutoral pretty soon.

TubaDiva, are you talking about [this?](http://www.straightdope.com/ubb/Forum2/HTML/000283.html) If so, I’ll gladly put it in the update.

Louie

---

<div class="post-metadata">

**Author:** ![Louie](https://avatars.discourse-cdn.com/v4/letter/l/c68b51/32.png) [@Louie](https://boards.straightdope.com/u/Louie)\
**Post date:** [November 2, 1999, 4:27am UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/97 "1999-11-02T04:27:00Z")

</div>

Before you read the tutoral, make sure to read the UBB codes page below for more tricks.

\<A HREF=“[http://www.straightdope.com/ubb/ubbcode.html](http://www.straightdope.com/ubb/ubbcode.html)” target=\_new\>Click here to see all the UBB codes.\</A\>

UBB emoticons:

: + ) = 🙂  
: + ( = ☹  
: + D = 😃  
; + ) = 😉  
: + o = :o

\<hr\>

Here’s a reference to do all the neat things you can do with HTML.  
Just copy how the code is done and that’s all.

\<hr\>  
\<font size=5\>Part I - The Basics\</font\>

Bolding:

\<b\>words in bold\</b\>

**words in bold**

Italics:

\<i\>words in italics\</i\>

_words in italics_

Underline:

\<u\>words underlined\</u\>

words underlined

Strikeout:

\<strike\>words crossed off\</strike\>

\<strike\>words crossed off\</strike\>

Centering text:

\<p align=“center”\>centered text\</p\>

\<p align=“center”\>centered text\</p\>

Dividing line:

\<hr\>

\<hr\>

Marquee (only works in Internet Explorer):

\<marquee\>scrolling words\</marquee\>

\<marquee\>scrolling words\</marquee\>

Bouncing Marquee (only works in Internet Explorer):

\<marquee behavior=“alternate”\>bouncing words\</marquee\>

\<marquee behavior=“alternate”\>bouncing words\</marquee\>

Blinking Text (only works in Netscape Navigator):

\<blink\>blinking text\</blink\>

\<blink\>blinking text\</blink\>

\<hr\>  
\<font size=5\>Part II - Images and Hyperlinks\</font\>

To display an image:

\<img src=“web address of image goes here” alt=“alt tag goes here”\>

So to display my “thumbs up” picture with the tag “cool”, I would type down-

\<img src=“[http://members.aol.com/lou826/thumb.gif](http://members.aol.com/lou826/thumb.gif)” alt=“cool”\>

\<img src=“[http://members.aol.com/lou826/thumb.gif](http://members.aol.com/lou826/thumb.gif)” alt=“cool”\>

Some warnings about posting pictures (Thanks to Phobia and tansaaftl):  
\<blockquote\>  
\<hr\>  
Please don’t steal bandwidth from other people when you post pictures.  
To put a picture in you posts or home pages please have the pictures  
on your web server. When you link pictures that are on other people’s  
sites you steal there bandwidth allowed to them on their server.

Some people counter act this by replacing the picture with one of the  
same name that says “I steal other’s bandwidth.” If you have your  
material loading from someone else’s site they can change what your  
post displays.

Keep your picture files to a small size and use compression.  
If you post and it takes forever to load, upload and replace  
the picture with a new one that is a lot smaller.  
The links will then load the new smaller picture. Even one large  
file will make the thread cumbersum for all. A monitor only  
displays 72 dots per inch. You don’t need a high res scanned picture.

Please use compression on your images. Jpeg compression works  
quite well and will save a lot of time when people try to view your page.

Lots, if not most web surfers will click on away from a page that takes too long to load. If you want people to look at your page, keep your images as small as possible.  
\<hr\>  
\</blockquote\>

To make a hyperlink:

\<a href=“web address goes here”\>words to click on\</a\>

So if you wanted to link to The Onion, you would type down-

\<a href=“[http://www.theonion.com](http://www.theonion.com)”\>click here to read The Onion\</a\>

\<a href=“[http://www.theonion.com](http://www.theonion.com)”\>click here to read The Onion\</a\>

\<hr\>  
\<font size=5\>Part III - Fun with Fonts\</font\>

To change font type:

\<font face=“©”\>a bunch of words\</font\>

Replace © with the name of the font you want to use.  
So if you wanted to change the font to a typewriter style (Courier New),  
you would type down-

\<font face=“Courier New”\>a bunch of words\</font\>

\<font face=“Courier New”\>a bunch of words\</font\>

To change font size:

\<font size=©\>words to make bigger or smaller\</font\>

Replace © with size numbers 1 2 3 4 5 6 or 7.

\<font size=1\>size 1\</font\>  
\<font size=2\>size 2\</font\>  
\<font size=3\>size 3\</font\>  
\<font size=4\>size 4\</font\>  
\<font size=5\>size 5\</font\>  
\<font size=6\>size 6\</font\>  
\<font size=7\>size 7\</font\>

To change font color:

\<font color=“©”\>words in color\</font\>

Replace © with Red, Orange, Yellow, Green, Blue, or Purple

**\<font color=“red”\>Red\</font\>  
\<font color=“orange”\>Orange\</font\>  
\<font color=“yellow”\>Yellow\</font\>  
\<font color=“green”\>Green\</font\>  
\<font color=“blue”\>Blue\</font\>  
\<font color=“purple”\>Purple\</font\>**

\<hr\>  
\<font size=5\>Part IV - Symbols!\</font\>

These symbols can be found under the font names “Symbols”, “Wingdings” and “Webdings”.  
To use them, use the “To change font type” trick shown above.

Key:  
!"#$%&’()\*+,-./0123456789:;\<=\>?  
@ABCDEFGHIJKLMNOPQRSTUVWXYZ^\_  
`abcdefghijklmnopqrstuvwxyz{|}~  
€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ  
&nbsp;¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿  
ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞß  
àáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ

“Symbols” Symbols:

!"#$%&’()\*+,-./0123456789:;\<=\>?  
@ABCDEFGHIJKLMNOPQRSTUVWXYZ^\_  
`abcdefghijklmnopqrstuvwxyz{|}~  
€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ  
&nbsp;¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿  
ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞß  
àáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ\</font\>

Wingdings Symbols:

\<font face=“Wingdings” size=5\> !"#$%&’()\*+,-./0123456789:;\<=\>?  
@ABCDEFGHIJKLMNOPQRSTUVWXYZ^\_  
`abcdefghijklmnopqrstuvwxyz{|}~  
€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ  
&nbsp;¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿  
ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞß  
àáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ

Webdings Symbols:

!"#$%&’()\*+,-./0123456789:;\<=\>?  
@ABCDEFGHIJKLMNOPQRSTUVWXYZ^\_  
`abcdefghijklmnopqrstuvwxyz{|}~  
€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ  
&nbsp;¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿  
ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞß  
àáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ\</font\>

Hope this helps out. 🙂

\<font face=“Rage Italic” size=5\>Louie\</font\>  
\<hr\>

---

<div class="post-metadata">

**Author:** ![Louie](https://avatars.discourse-cdn.com/v4/letter/l/c68b51/32.png) [@Louie](https://boards.straightdope.com/u/Louie)\
**Post date:** [November 2, 1999, 4:30am UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/98 "1999-11-02T04:30:00Z")

</div>

> [@](#):
>
> Please don’t steal bandwidth from other people when you post pictures. To put a picture in you posts or home pages please have the pictures on your web server. When you link pictures that are on other people’s sites you steal there bandwidth allowed to them on their server.
> 
> Some people counter act this by replacing the picture with one of the same name that says “I steal other’s bandwidth.” If you have your material loading from someone else’s site they can change what your post displays.
> 
> Keep your picture files to a small size and use compression. If you post and it takes forever to load, upload and replace the picture with a new one that is a lot smaller. The links will then load the new smaller picture. Even one large file will make the thread cumbersum for all. A monitor only displays 72 dots per inch. You don’t need a high res scanned picture.
> 
> Please use compression on your images. Jpeg compression works quite well and will save a lot of time when people try to view your page.
> 
> Lots, if not most web surfers will click on away from a page that takes too long to load. If you want people to look at your page, keep your images as small as possible.

---

<div class="post-metadata">

**Author:** ![Louie](https://avatars.discourse-cdn.com/v4/letter/l/c68b51/32.png) [@Louie](https://boards.straightdope.com/u/Louie)\
**Post date:** [November 2, 1999, 4:33am UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/99 "1999-11-02T04:33:00Z")

</div>

DAMMIT WHAT AM I DOING WRONG???

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/straightdope/original/2X/e/e489c3b7d8fce19c4b355dd4fc3f88cc39c34b87.png) [@system](https://boards.straightdope.com/u/system)\
**Post date:** [November 5, 1999, 11:02pm UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/100 "1999-11-05T23:02:00Z")

</div>

\<fontface=“Wingdings”\>j\</font\>

[Previous page](https://boards.straightdope.com/t/fun-with-html-tutoral/512.md?page=4)

[Next page](https://boards.straightdope.com/t/fun-with-html-tutoral/512.md?page=6)