PlayByWeb.com | Table of Contents
What Is HTML?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 ***
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
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
*** 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.
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
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'.
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)
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>
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>
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:
Scrolling Text
Marquee is text that moves across the screen. It uses the tags <MARQUEE> Marquee Text </MARQUEE>, which makes this:
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)
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>
*** Note: Marquee is not an officially supported HTML tag and will only work on a handful of browsers (including Internet Explorer). ***
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.