PlayByWeb.com | Table of Contents

What Is HTML?
Italics, Bold and Underline
Strikethrough, Sub/Superscript
Changing the Font Size
Changing Font Colour
Changing the Font
Hyperlinks
Line Breaks
Scrolling Text
Inserting Images (portraits)


What is HTML?

HTML, or Hyper Text Markup Language, is the prime scripting language that is used to make web sites and web pages all across the internet. HTML is what is used to make images seen on a web page, the color of the background, allows music to be heard, or just to modify the look of text.

*** Note: HTML is USA centric and uses american spelling only for tags ***

Back to top


Italics, Bold and Underline

The first things that are learned are how to make text bold, italicized, and/or underlined. Italic text is made using the <I> and </I> tags. Putting <I> before the text that you want italicized, then putting </I> after it, you create italicized text.

<I>Italic Text</I> makes Italic Text

By putting <B> before the text that is wanted to be made bold, and then putting </B> after the text that is wanted to be bolded, it will make those bold.

<B>Bold Text</B> turns to this Bold Text

Underline is made with the <U></U> tags. Just like Bold and Italics, underline follows the same ruling of <U> before the desired text to be underlined, and </U> after that same text.

<U>Underline Text</U> becomes Underline Text

All of these can be mixed together as well.

<B><I><U>Text</U></I>/B> will make Text

Back to top


Strikethrough, Sub/Superscript

Strike through follows the same pattern as the Bold, Italics, and Underline, which is just one letter in tags. <S></S> are the tags used with strike through. <S> goes before the desired text to be struck out and </S> comes after it.

<S>Strikethrough Text</S> becomes Strikethrough Text

To create Sub script and superscript, a little more is put inside the tags. In the case of Subscript, <SUB> comes before the text desired to be lowered below the normal text line and </SUB> comes after it.

text <SUB> text to be lowered </SUB> makes text text to be lowered

Superscript is the same with only two differences. the tags <SUP> and </SUP> are used instead and the text between the two are raised.

text <SUP> text to be raised </SUP> becomes text text to be raised

NOTE: Unlike the previous HTML tags, subscript and superscript cannot work together.


Blockquote and Center ...

<CENTER> starts a selected area of text and centres is as if it were in a word prossessing program such as Microsoft Word©, or Claris Works©. It is closed with </CENTER>. Center will also mix with Bold, Italic, underline, strikethrough, etc...

<CENTER>Text</CENTER> will make

text

*** Note: Center is not supported by all browsers ***

Blockquote doesn't center the text, but rather moves it all to the middle like a small box of it. <BLOCKQUOTE> starts it, while </BLOCKQUOTE> ends it.

<BLOCKQUOTE> So What is HTML?<BR>
HTML, or Hyper Text Markup Language, is the prime programming language that is used to make web sites and web pages all across the internet. HTML is what is used to make images seen on a web page, the color of the background, allows music to be heard, or just to modify the look of text. </BLOCKQUOTE> Will create:

So what is HTML?
HTML, or Hyper Text Markup Language, is the prime programming language that is used to make web sites and web pages all across the internet. HTML is what is used to make images seen on a web page, the color of the background, allows music to be heard, or just to modify the look of text.

Blockquote can be used with center as well as the other tags that are described above.

Back to top


Changing the font size

For resizing the text, you use <FONT SIZE="size">. 1 (smallest) to 7(largest). Of course, you then close it off with </FONT> and the text to be resized is in between. The standard font size is 3. This page has font size 3 and the PlayByWeb.com links at the top and bottom of the page are font size 4.

<FONT SIZE="1"> text as size 1 </FONT> makes text as size 1

<FONT SIZE="7"> text as size 7 </FONT> makes text as size 7

Back to top


Changing the font colour

To change the colour of the text, you use <FONT COLOR="colour name"> text </FONT>. While there are many names for colours, you may have to use a hexadecimal number to make them. (eg. #FF00FF)

<FONT COLOR="red"> text in red </FONT> makes text in red

Here is a partial list of colour names:

*** NOTE: Silver blends in with the background color of the PBW page and will not be visible when posted. Dark Colours will show up best. ***

red

darkred

green

black

blue

darkblue

silver

gray

gold

yellow

tan

orange

pink

purple

violet

magenta

indigo

teal

white

brown


The list of colors can go on. Try any that are not mentioned here and see if they work. Remember to exclude spaces between words like 'dark' and 'blue'.

Back to top


Changing the font

Font face is a little trickier and isn't recommended to be used considering that the other viewers of the page that it is used on may not have that font available to them on their computer. Thus, they will not be able to see it. Fonts such as Arial, Times New Roman, Courier New, System, and Symbol are normally available across PC users (Helvetica is similar to Arial for Mac users)

<FONT FACE="font type"> text </FONT> are the tags used to make a different font for the text in between the two tags.

Arial: This is Arial.

Symbol: This is symbol. (This is symbol)

Back to top


Hyperlinks (Anchors)

Hyperlinks create a way to move to either another site, open another site, or move somewhere on the current site.

<A HREF="web address"> text to click on </A>

PlayByWeb.com

If you want to open up another window to a different site, you add TARGET="_blank" inside the anchor tag. It will look similiar to this:

<A HREF="web address" TARGET="_blank"> text to click on </A>

PlayByWeb.com in a new window

Back to top


Line breaks

<HR> creates a line break. It makes a line that separate two sections of text of objects. <HR> also comes with attributes that can be added for other effects.


This is the normal <HR> line. By adding size into play, one can change the height of the line.

<HR SIZE="size">

(SIZE="1")

(SIZE="5")

Width can also be a factor and can be added with size as well.

<HR WIDTH="size"<>

<HR WIDTH="300">


or <HR WIDTH="50%">


As you can see, the lines work out as if centered, they can be modified with the ALIGN attribute. With PBW, you may mess things up if you make the width over 500. It is best to use percentage widths on the posting boards (100% will go across the entire post area).

<HR SIZE="5" WIDTH="100">


There is also <HR NOSHADE>, which creates a line without a shadow.

Example:


Back to top


Scrolling Text

Marquee is text that moves across the screen. It uses the tags <MARQUEE> Marquee Text </MARQUEE>, which makes this:

Marquee Text

This form is the standard, which is also known as scroll. By changing the behavior, you can make it slide or alternate directions. (Examples below should be moving if supported by your browser)

<MARQUEE BEHAVIOR="slide"> Marquee Text </MARQUEE>

<MARQUEE BEHAVIOR="alternate"> Marquee Tex t</MARQUEE>

Another thing that you can do is change the background color of the marquee.

<MARQUEE BGCOLOR="color" BEHAVIOR="style"> Marquee Text </MARQUEE>

An example with blue background color, red text, and alternate:

<MARQUEE BGCOLOR="blue" BEHAVIOR="alternate"><FONT SIZE="5" COLOR="red"> Marquee Text </FONT></MARQUEE>

Marquee Text

*** Note: Marquee is not an officially supported HTML tag and will only work on a handful of browsers (including Internet Explorer). ***

Back to top


Inserting images (Portraits)

Images are controlled with the Image Source tags. This is done simply by using this tag:

<IMG SRC="Image URL address">

The images URL Address is where you find the image at. Do find the image URL, you must first find the image you want on the internet. When found, right click the image and select properties. Highlight all of the web address, which is right next to where it should say "Address (URL):" Copy this and then paste in within the Image tag. for example, the image of Vincent Valentine that is supplied by Playbyweb: its web address is http://www.playbyweb.com/ports/1681.jpg.

Always remember that whatever image you use in a post will be downloaded each and every time you check that page. Players without high speed access will not appreciate large image downloads every time they check thier post. Images over 500 pixels wide will also not display well and will have different (bad) effects depending on a users browser

*** Never link to an image without permission or use copyrighted materials! ***

<IMG SRC="http://www.playbyweb.com/ports/1681.jpg">

The result is this:

Images can also be modified with attributes. Alignment, width, and height are just a few you can use. There is an exception, however. Many images found across the web are not allowed to be used outside of their domain. This means that if you try to use an image from some free host sites (like an Angelfire site or a place that is similar), the image will only show up as a box with a red 'X' within it. The same happens if you try using the address of a file from your computer if it is not set up as a web host.

Back to top



PlayByWeb.com | Table of Contents