# 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:** 1

<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: [September 12, 1999, 1:03am UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/1 "1999-09-12T01:03:00Z")

</div>

I apologize in advance if some of this stuff doesn’t work.  
I did this only in Notepad.

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.

**Part I - The Basics**

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\>

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\>

**Part II - Images and Hyperlinks**

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” alt=“cool”\>

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\>

**Part III - Fun with Fonts**

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\>**

**Part IV - Symbols!**

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

Key:  
\<font face=“Courier New”\>`1234567890-=  
~!@#$%^&\*()\_+  
ABCDEFGHIJKLM  
NOPQRSTUVWXYZ  
;’,./  
{}:"\<\>?|

Wingdings Symbols:

`1234567890-=  
~!@#$%^&\*()\_+  
ABCDEFGHIJKLM  
NOPQRSTUVWXYZ  
;’,./  
{}:"\<\>?|\</font\>

Webdings Symbols:

\<font face=“Webdings” size=6\>`1234567890-=  
~!@#$%^&\*()\_+  
ABCDEFGHIJKLM  
NOPQRSTUVWXYZ  
;’,./  
{}:"\<\>?|\</font\>

Hope this helps out. 🙂

---

<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: [September 12, 1999, 1:07am UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/2 "1999-09-12T01:07:00Z")

</div>

Yes! It all worked, except for the

[http://members.aol.com/lou826/thumb.gif](http://members.aol.com/lou826/thumb.gif)

picture. Oh well. Hope I helped you all.

Louie

---

<div class="post-metadata">

### Author: ![Ringo](https://avatars.discourse-cdn.com/v4/letter/r/779978/32.png) [@Ringo](https://boards.straightdope.com/u/Ringo)
#### Post date: [September 12, 1999, 1:44am UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/3 "1999-09-12T01:44:00Z")

</div>

\<marquee behavior=“alternate”\>Does it work?\</marquee\>

---

<div class="post-metadata">

### Author: ![Ringo](https://avatars.discourse-cdn.com/v4/letter/r/779978/32.png) [@Ringo](https://boards.straightdope.com/u/Ringo)
#### Post date: [September 12, 1999, 1:47am UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/4 "1999-09-12T01:47:00Z")

</div>

\<font size=6\>Hey Louie! Thanks!\</font\>

---

<div class="post-metadata">

### Author: ![Kamino\_Neko](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/kamino_neko/32/34_2.png) [@Kamino\_Neko](https://boards.straightdope.com/u/Kamino_Neko)
#### Post date: [September 12, 1999, 1:54am UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/5 "1999-09-12T01:54:00Z")

</div>

\<marquee behavior=“alternate”\>This could be fun!\</marquee\>

* * *

‘They couldn’t hit an Elephant from this dist…!’

Last words of General John Sedgwick

---

<div class="post-metadata">

### Author: ![rowrrbazzle](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/rowrrbazzle/32/414_2.png) [@rowrrbazzle](https://boards.straightdope.com/u/rowrrbazzle)
#### Post date: [September 13, 1999, 1:17am UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/6 "1999-09-13T01:17:00Z")

</div>

\<marquee behavior=“alternate”\>I **hate** ping-pong! :o\</marquee\>

---

<div class="post-metadata">

### Author: ![Sassy](https://avatars.discourse-cdn.com/v4/letter/s/e47c2d/32.png) [@Sassy](https://boards.straightdope.com/u/Sassy)
#### Post date: [September 13, 1999, 9:41pm UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/7 "1999-09-13T21:41:00Z")

</div>

**I have to try this**

---

<div class="post-metadata">

### Author: ![Strainger](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/strainger/32/244_2.png) [@Strainger](https://boards.straightdope.com/u/Strainger)
#### Post date: [September 13, 1999, 10:33pm UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/8 "1999-09-13T22:33:00Z")

</div>

underline?

---

<div class="post-metadata">

### Author: ![Strainger](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/strainger/32/244_2.png) [@Strainger](https://boards.straightdope.com/u/Strainger)
#### Post date: [September 13, 1999, 10:35pm UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/9 "1999-09-13T22:35:00Z")

</div>

Greek Symbols?

\<font face=“Symbol”\>abgdezhq\</font\>

---

<div class="post-metadata">

### Author: ![Strainger](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/strainger/32/244_2.png) [@Strainger](https://boards.straightdope.com/u/Strainger)
#### Post date: [September 13, 1999, 10:37pm UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/10 "1999-09-13T22:37:00Z")

</div>

\<marquee\>\<font color=“Blue”\>Cool!\</font\>\</marquee\>

---

<div class="post-metadata">

### Author: ![manhattan](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/manhattan/32/7_2.png) [@manhattan](https://boards.straightdope.com/u/manhattan)
#### Post date: [September 13, 1999, 10:40pm UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/11 "1999-09-13T22:40:00Z")

</div>

## \<marquee behavior=“alternate”\> \<font color=Red\>Louie Rocks!\</font\> \</marquee\>

Livin’ on Tums, Vitamin E and Rogaine

---

<div class="post-metadata">

### Author: ![manhattan](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/manhattan/32/7_2.png) [@manhattan](https://boards.straightdope.com/u/manhattan)
#### Post date: [September 13, 1999, 10:42pm UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/12 "1999-09-13T22:42:00Z")

</div>

Does it work in a sig?

* * *

\<marquee behavior=“alternate”\> \<font color=Green\>J E T S JetsJetsJets!\</font\>  
\</marquee\>

---

<div class="post-metadata">

### Author: ![manhattan](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/manhattan/32/7_2.png) [@manhattan](https://boards.straightdope.com/u/manhattan)
#### Post date: [September 13, 1999, 10:44pm UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/13 "1999-09-13T22:44:00Z")

</div>

What about just the color?

* * *

\<font color=Green\>J E T S JetsJetsJets!\</font\>

---

<div class="post-metadata">

### Author: ![Strainger](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/strainger/32/244_2.png) [@Strainger](https://boards.straightdope.com/u/Strainger)
#### Post date: [September 13, 1999, 11:09pm UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/14 "1999-09-13T23:09:00Z")

</div>

Manhattan, try removing the spaces between codes. Also remember to put “quotes” around the name of your font color.

---

<div class="post-metadata">

### Author: ![manhattan](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/manhattan/32/7_2.png) [@manhattan](https://boards.straightdope.com/u/manhattan)
#### Post date: [September 13, 1999, 11:12pm UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/15 "1999-09-13T23:12:00Z")

</div>

Like this?

\<marquee behavior=“alternate”\>\<font color=“Green”\>J E T S JetsJetsJets!\</font\>\</marquee\>

* * *

Livin’ on Tums, Vitamin E and Rogaine

---

<div class="post-metadata">

### Author: ![manhattan](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/manhattan/32/7_2.png) [@manhattan](https://boards.straightdope.com/u/manhattan)
#### Post date: [September 13, 1999, 11:13pm UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/16 "1999-09-13T23:13:00Z")

</div>

And now lets try the sig.

* * *

\<marquee behavior=“alternate”\>\<font color=“Green”\>J E T S JetsJetsJets!\</font\>\</marquee\>

---

<div class="post-metadata">

### Author: ![manhattan](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/manhattan/32/7_2.png) [@manhattan](https://boards.straightdope.com/u/manhattan)
#### Post date: [September 13, 1999, 11:16pm UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/17 "1999-09-13T23:16:00Z")

</div>

OK, no scrolling for me. How 'bout the color?

BTW, TubaDiva: Louie created a remarkable tutorial here. Can it be moved to the FAQ. In the alternative, can you delete all the “I’m gonna try this” posts (including mine)?

* * *

\<font color=“Green”\>J E T S JetsJetsJets!\</font\>

---

<div class="post-metadata">

### Author: ![moriah](https://avatars.discourse-cdn.com/v4/letter/m/b2d939/32.png) [@moriah](https://boards.straightdope.com/u/moriah)
#### Post date: [September 14, 1999, 1:41am UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/18 "1999-09-14T01:41:00Z")

</div>

I think the create-your-sig-screen specifically states that html and images are turned off for sigs.

Peace.

---

<div class="post-metadata">

### Author: ![Strainger](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/strainger/32/244_2.png) [@Strainger](https://boards.straightdope.com/u/Strainger)
#### Post date: [September 14, 1999, 4:52am UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/19 "1999-09-14T04:52:00Z")

</div>

What I’m wondering is why UBB created its own code for **bold** and _italics_ when it’s not a whole lot different from the HTML code. To relieve us from having to use the shift key so much, maybe?

I’m also wondering how Louie was able to list the syntax for the HTML commands without the code being executed. Additional HTML code?

BTW, thanks very much for the tutorial, Louie!!

---

<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: [September 14, 1999, 5:45am UTC](https://boards.straightdope.com/t/fun-with-html-tutoral/512/20 "1999-09-14T05:45:00Z")

</div>

> [@](#):
>
> BTW, TubaDiva: Louie created a remarkable tutorial here. Can it be moved to the FAQ. In the alternative, can you delete all the “I’m gonna try this” posts (including mine)?

I think this is a keeper. 🙂

Thank you very much, Louie.

> [@](#):
>
> What I’m wondering is why UBB created its own code for bold and italics when it’s not a whole lot different from the HTML code. To relieve us from having to use the shift key so much, maybe?

Some boards have html coding turned off; we allow both html and UBB.

your humble TubaDiva/SDStaffDiv  
for the Straight Dope

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