Fun with HTML (tutoral): The Fixed Sequel

system · November 2, 1999, 4:12am

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

Click here to see all the UBB codes.

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>
Part I - The Basics

Bolding:

words in bold

Italics:

words in italics

Underline:

words underlined

Strikeout:

<strike>words crossed off</strike>

Centering text:

centered text

Dividing line:

<hr>

Marquee (only works in Internet Explorer):

<marquee>scrolling words</marquee>

Bouncing Marquee (only works in Internet Explorer):

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

Blinking Text (only works in Netscape Navigator):

<blink>blinking text</blink>

<hr>
Part II - Images and Hyperlinks

To display an image:

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

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”>click here to read The Onion</a>

<hr>
Part III - Fun with Fonts

To change font type:

a bunch of words

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-

a bunch of words

To change font size:

words to make bigger or smaller

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

size 1
size 2
size 3
size 4
size 5
size 6
size 7

To change font color:

words in color

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

Red
Orange
Yellow
Green
Blue
Purple

<hr>
Part IV - Symbols!

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{|}~
€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ
¡¢£¤¥¦§¨©ª«¬®¯°±²³´µ¶·¸¹º»¼½¾¿
ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞß
àáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ

“Symbols” Symbols:

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

Wingdings Symbols:

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

Webdings Symbols:

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

Hope this helps out.

Louie
<hr>
[Note: This message has been edited by TubaDiva]

system · November 2, 1999, 7:49pm

Louie, this is very very cool. Thank you – and everyone else that contributed.

Not to be rude, but I’m gonna delete all the “test” posts from this thread. Please don’t add any more. Start another thread if you need to.

If this is perfect, I’ll close the thread to any further replies and we’ll leave it as is. Ready, Louie?

your humble TubaDiva/SDStaffDiv
for the Straight Dope

[Note: This message has been edited by TubaDiva]

Louie · November 3, 1999, 5:20am

Well, in that case, thanks. But can you at least figure out what’s causing the vertical scrolling and fix it?

Louie · November 3, 1999, 5:26am

Okay, found the problem. (highlight the whole page to see it) On the last line of the “Symbol” characters, there’s a bunch of spaces after it making it go all the way to the right. Take those off and I hope the vertical scrolls will go away.

Momotaro · November 3, 1999, 7:42am

Isn’t the problem the centered text?

*** Come and delete me ***

Louie · November 3, 1999, 8:13am

TubaDiva, you edited the wrong thing. Oh well, I’ll post the corrected thing later on.

Louie

This HTML isn’t fun

Louie · November 3, 1999, 8:29am

Okay, the true sequal came out, please delete this thread.

Louie

Fun with HTML (tutoral): The *Fixed* Sequel

Fun with HTML (tutoral): The Fixed Sequel