HTML Codes

HTML Codes

Feel free to copy & save this on your own computer! None of this is copyrighted.

Some of this is from Narana, some from me. It's not all here, by far! It's mostly what codes I needed to copy for myself at one time or other. For a more complete set of html help from Narana, go to: Museums Hood board, click Hood website, MAYBE find it there. She quit CT years ago, so.. OR try- www.ziekerdanziek.com That site has EVERYTHING! :) OR see other sites that are also good at the bottom of this page.

I put here mostly simple things or things we use in Cybertown a lot.

At bottom are tables & forms html, with some extras like checkboxes, radio buttons made with html only, input, etc.

*****************************************************************

For Text & small gif effects (FX) Use your back button & click "DHTML FX & CT HTML" or use url: https://skye-hook.tripod.com/CT/HTMLHELP/Dhtml_FX_and_CThtml.htm

*** INBOX HTML CODES

A simple inbox can be done by using an image as a background, which you can do simply by taking the website url where you have saved the image, and put that into the place for backgrounds, without having to use any html at all, and without using configure. THEN YOU CAN JUST PUT TEXT IN WITHOUT USING CONFIGURE ALSO, IT'S EZ THAT WAY!

***OR:

General Inbox Configure HTML

Click configure & copy/paste this, plus CHANGE the words to yours where marked! Don't forget to click update at the bottom or it won't be entered at all!

Important Note to New Citizens about the inbox - You WANT to click that place to accept notes in HTML! You get some great inbox notes with animated gifs & animated graphics sometimes! And music! Or even cool pics & stuff. Which you won't see the good parts of if you don't click that. AND FORGET WHAT IT SAYS AT THE BOTTOM ABOUT PLEASE USE HTML OR AT LEAST < P > if you write notes there-THAT IS AN OLD MESSAGE! TECHS JUST DIDN'T REMOVE IT YET!

To enter html in a message, in CT, you MUST click the little icon above the box, which looks like this < >. If you don't, what you enter in html will be printed as text in the note, showing all the coding and etc. It will look just like what you entered, not what you meant to show up. +ALWAYS in CT in everything except posting notes in an inbox or board, YOU MUST HIT UPDATE OR IT WON”T ENTER IT! On a website, you must click save, & some sites you must click “save” and “done”.

<font size="2" color="blue">YOUR NAME HERE Inbox<br><br>Image by <a href="http://www.WHERE YOU GOT PIC.com/"target=_blank><font color="blue">NAME OF ARTIST</a></font><br>

<font size="4">Please leave a note. I'll get back to you A.S.A.P.Thanks!(OR whatever you'd like to say there.)

<br><p>

controls="console" height="45" width="70" loop="true" autostart="true" hidden="false"></embed> </font></font></center>

*** SOUND *******************************************************

Sound is already in the 1 above! Look.

<embed src=

"http://skye-hook.bravepages.com/solitude.mid"

controls="console" height="45" width="70" loop="true" autostart="true" hidden="false">

*** Code to add to a sig card, inbox, or a Hood or block meassage board-

TO MOVE TO THIS BLOCK

Can be used on your Inbox, your signature card, and places like the Hood or block message boards, Don't post it in a note on a Colony Message board, that would be considered poaching of other peoples residents.

<font color="red" face="lucida handwriting">Click <A HREF="http://www.cybertown.com/cgi-bin/cybertown/block?ID=0104030402030000" TARGET="_new">here</A> to move to this block-Ancient Castles! Or your block name.</font><br>

******************************************************************

Signature Card HTML Code

Click My Info on CT panel on the right-then Personal Info-then in signature box enter-

BUT change the words! USE YOUR OWN URL and card URL!! Click update-don't forget that!:)

********************************************************************

***BACKGROUNDS-

Most note & message places in CT now have a button you can use to pick your text and background colors, so it's best in CT to use that, unless you are entering html code. The notes & message places in CT have directions there on them. For use with html or a website you can use the following.

My site will soon also have a colorpicker page, or does already. Use your back button and find that in the list.

BGCOLOR="#??????" Instead of ?????? insert a hexadecimal color code. Add this attribute to the <BODY> tag. You'll get this:

If you want to have an image instead of a simple color for your background, you'll need to use this code:

BACKGROUND="http://www.url.com/image.jpg" Put the code right into the <BODY> tag. You'll get this

*** Link code

<A HREF="http://www.cybertown.com"> Click Here To Go To Cybertown</A>

A stands for Anchor. This is what starts a link. HREF stands for Hypertext REFerence. It tells the computer that this link is going somewhere.

<a href="url to open here-opens a new window" tar

get=_blank><font color="blue">TEXT</a></font><br>

*** EMAIL LINK

The code for an e-mail link follows this format:

<A HREF="mailto:you@yourdomain.com">Click Here To EMail Me</A>

You probably noticed that they look almost the same, but there is a new command: mailto:

*** Right side text

<P ALIGN="RIGHT">Your Text Goes Here</P>. What I did here is I took a <P> flag (as you remember, P stands for paragraph) and added an attribute to it ALIGN (value-right). And I ended the flag with a simple </P>.

*** Image code

*** Button code

*** Links + Marquee

The urls in examples don't exist anymore, bear that in mimd-use your own when you practice or use these.

*** Marquee

You CAN just say- <marquee> YOUR TEXT HERE</marquee>

OR-

OR-there is more,like on SheFae's inbox code on this page.

*** Link Code

Another, as for an image & give credit & link to artists page.

<font size="2" color="blue">Image by <a href="http://www..jonathonart.com/"target=_blank>Jonathon E. Bowser</a></font><br>

Last 1 above taken from- SheFae's Inbox-

I'm leaving all her code here, so you can also see how to place other parts of inbox codes tags.

<font color=#FFCCCC><div style="width:60%; filter:Glow(color=#BB00FF, strength=36)"><font size=5><i><b><u><center>SheFae</marquee>

<br>

<font size="2" color="blue">Image by <a href="http://www..jonathonart.com/"target=_blank><font color="blue">Jonathon E. Bowser</a></font><br>

<font size="4">Actually,I seldom check my inbox,so-you might try to find me instead maybe. Sorry. Try Citizens Online at top of panel.<br><p>

controls="console" height="45" width="70" loop="true" autostart="true" hidden="false"></embed>

</font>

</center>

******************************************************************

*** Visitors Name Code <$NNM> For inbox, MB, etc.

To have a visitors name show up, on inbox or whatever,use this-

after saying Hi you insert this without spaces between:

< $NNM > and each time you look into the configuration you MUST change it again to this, otherwise it says Hi & YOUR NAME, NOT THEIRS to each visitor :)

*** CHANGING IMAGE SIZE

Changes pixels amount used for image

Here's the coding for changing the dimensions of the image:

******************************************************************

More Detailed Stuff

Written by Our Beloved Ex-NL & Ex-CD, Narana

***BORDER-on a website, does NOT apply to stuff in CT. On a website, around a picture or button you have used for a link, this border aotomatically appears, but you can make it go away or change it.

After you open the page and see the graphic that you linked, you will notice a small blue border around the image. This border is default. It's always there. Some people like it, some people don't. Sometimes it can ruin the whole page effect, so let me show you how to get rid of it.

All you have to do is add a BORDER attribute to the image flag.

Here's what we've got:

OR U can put BORDER="0" at end just before the >

What we we did here is we added an attribute BORDER with a value 0. This attribute tells the computer that the border should 0 pixels.

If you change the number to 50, the border will be huge. Try practicing different sizes of border.

*******************************************************************

THE REST OF THIS IS ALL TABLES, FORMS, AND INPUT BUTTONS + HOW TO HAVE INPUT FROM OTHERS SENT TO YOUR EMAIL BOX

IF YOU DON'T REALLY WANT TO USE OR LEARN THIS PART YET, FEEL FREE TO JUST SAVE IT OR WHOLE PAGE TO YOUR OWN COMPUTER. None of this page is copyrighted.

***TABLES

Alphabet

A B C

D E F

G H I

Looks interesting? You will be able to do it all by yourself in less than 10 minutes. This is the code of the table above:

<CAPTION><FONT COLOR="#FFFFFF">Alphabet</FONT></CAPTION>

<TBODY>

<TR>

<TR>

<TR>

It looks really complicated, but it's not. Let me show you all the tags that I used. You'll see how easy it is very soon.

<TABLE> This command basically starts the table. This command is very easy to remember.

<CAPTION></CAPTION> This command places a caption right on the top of the table. In a while you'll be able to make advanced captions.

<TR></TR> This command is used when you want to begin a new Table Row. So, far all these commands are very easy to understand and remember.

<TD></TD> means Table Data. You have to put <TD> in front of every piece of information. Remember that you need to close every piece with </TD>

Border tells the table how large the border will be. Size is measured in pixels.

CellSpacing dictates the amount of space between cells.

CellPadding dictates the amount of space between cell contents and the cell border.

At the end of the table we place </TABLE>

Now it makes perfect sense, doesn't it? Now let's try to create a new table by ourselves.

Put a <TABLE BORDER="#" CELLSPACING="#" CELLPADDING="#"> tag at the beginning.

Place <CAPTION> and type Alphabet. Now close it with </CAPTION>

The next thing we want to do is to start a new row. Type <TR>

The next step is to fill out data. Press Enter, and write <TD>A</TD> Remember these commands? Don't forget to use a closing flag.

Continue typing: <TD>B</TD><TD>C</TD> Three rows is enough for now. Close this row using </TR>tag.

Click Enter and start another row. <TR><TD>D</TD><TD>E</TD><TD>F</TD> Close this row with </TR>, and do the last row.

Close it with a </TABLE> tag and you're done. Save this document and view it in the browser.

Want to put a few links in the table? Here's how. Instead of just <TD>Text</TD> add a link flag. <TD><A HREF="http://www.url.com">My Home Page</A></TD>

Placing An Image:

Want to place an image in the table? Use this code.

Aligning Text:

Aligning text in cells is almost exactly the same as aligning any other text. All you have to do is add another attribute to the Table Data. What do you get? This:

<TD ALIGN="MIDDLE">Text</TD> Try putting left or right instead of middle. It will also work. Did you notice that we use the same formats in almost every piece of HTML that we've learned? If you know these flags, it'll be very easy for you to add some in something more sophisticated.

Cell Background:

There is another very cool thing that you can do in table cells. You can add a background to only one, two, or if you want all of the cells. Here's an example of what I'm talking about:

Cell 1 Cell 2 Cell 3

Cell 4 Cell 5 Cell 6

Cell 7 Cell 8 Cell 9

Do you see it now? It's pretty amazing. All you've got to do is add BGCOLOR="#??????" to the <TD> tag. Together you'll get <TD BGCOLOR="#??????"> But you have to do the same thing for each cell you want to 'paint'. You can even insert your own picture-backgrounds. If you want to add an image instead of BGCOLOR="#??????" add BACKGROUND="http://www.url.com/graphic.gif" to the <TD> tag.

**** FORMS

Part IX: Forms

There are two types of forms. The first one is very simple. It's the one that's we are going to build in this chapter. It uses a hidden mailto: command, but you don't see it (at first). The other type is a CGI form. It uses a special CGI/PERL script to send the forms to your e-mail address. To create one, you need to know the basics of CGI. Although, a lot of sites do offer FREE CGI-supported forms, it's still VERY useful to know how to build a form.

So, let's start a new form. The very first command that you'll have to write is this:

What does it do? It does two things:

It tells your computer that you are starting a form

It also tells that all information should be sent to the following e-mail address.

P.S. mailto: commands in forms will NOT work on everyone's computer. Please be aware of it!

Fields

There are five basic form fields that you can use. I'll explain all of them.

The Text Box:

Top of Form 1

Bottom of Form 1

The text box is the most basic field. It's very simple. It allows only one line of text. Here's the coding for it: <INPUT TYPE="TEXT" NAME="name" SIZE="25">

Let's take this code apart:

Input Type alerts the computer that a form field is going to be placed here and type says what kind of form field is going to be placed.

Name is how you name the box. When you get a form with the results in your e-mail, you are going to see only text. The name will help you to determine what information goes where.

Size denotes how many characters you can type in this box. Usually it's from 30 to 60.

The Text Area Box::

This field is almost the same as the one that we discussed before except it's larger. Here's the coding for it: <TEXTAREA NAME="name" COLS="40" ROWS="5"></TEXTAREA> The code, as you have probably noticed, is slightly different from the one above. Let's take it apart:

TEXTAREA command tells the computer that now a text area box is going to be placed.

Name same as in the previous box

Rows tells the computer how many rows the box is going to be

Cols tells the computer how many columns the box is going to be

Notice that there is an closing tag in this command: </TEXTAREA>. It is very important to use the closing tag in this form field, otherwise it won't work.

The Checkbox:

- - -

Checkboxes allows users to check a few choice boxes. Try checking them.

Here's the coding for each checkbox: <INPUT TYPE="CHECKBOX" NAME="Check Box #">

There is nothing much to take apart that we don't already know. As you noticed all the commands are already explained above.

The Radio Button:

- - -

The radio button is very similar to the checkbox, except this allows only one field to be checked. Try it.

Here's the code: <INPUT TYPE="RADIO" NAME="Radio Button">

Menu Select:

Last but definitely not least, this field allows you to choose one item from the menu. Very useful and interesting.

Here's the coding:

This code seems to be a little more complicated than the others, but after you read the descriptions you are going to understand each and every part.

<SELECT> this is the type of a form field. It tells the computer that now there's going to be a Select Menu field

NAME same as previous form fields

SIZE tells how many items you want to be shown. Try inserting different numbers and see what happens

<OPTION> denotes another item or line that you want to put in the menu

</SELECT> is the closing tag. Use it to finish the menu.

Submit and Reset Buttons:

These are the final buttons. The submit button allows users to actually send all this information to the e-mail address that you put in the beginning. The reset button will allow users to erase all information, in case they want to fill it out again or if they made some mistakes. These buttons are still inactive, so if you want you can press them but nothing will happen.

Here's the code for submit button:

Here's the code for the reset button:

Easy? Now end the whole form with the closing tag:

</FORM>

More Input

If you tried to create a little form, and then viewed the received info in your mailbox, you should've noticed that the text comes in one long line and that the words are separated by an addition sign (+). Of course, you can read it, but it's a real pain. If you want the text to arrive in a normal, readable format you have to add the following code to the <FORM>flag. Here's the code:

ENCTYPE="text/plain"

This simple code tells your computer to mail this text in text-only format. Try it now and see if it works.

P.S. There is more to forms than I've told you. For example, you can use CSS style sheets to create slightly different fields than you expected.

Exercise: The assignment for today is pretty obvious. Add a small feedback form to your site. Ask the visitor for their name, e-mail, short biography, and 2 more custom questions. Direct the mail to your e-mail address. That's all.

********************************************************************

A place online with good html help is-

The HTML Quick Reference Guide

http://www.cc.ukans.edu/~acs/docs/other/HTML_quick.shtml

AND "JAVA"

http://java.sun.com/

OR I like-

NCSA A Beginners Guide To HTML

Has a very good html primer you can download in a zip file & install using winzip. It's kinda long, but is great for creating nice websites.