Pages: 1

Html Reference Codes
(Click here to view the original thread with full colors/images)

Posted by: JG

HTML Tags Chart

Tag

Name

Code Example

Browser View

Nothing will show

<A - anchor <A HREF="http://www.yourdomain.com/">Visit Our Site</A> Visit Our Site

<B> bold <B>Example</B> Example

<BIG> big (text) <BIG>Example</BIG> Example

<BODY> body of document <BODY>The content of your page</BODY> Contents of your webpage

<BR> line break The contents of your page<BR>The contents of your page The contents of your page
The contents of your page

center

<CENTER>This will center your contents</CENTER>

This will center your contents

<DD>

definition description

<DL>
<DT>Definition Term
<DD>Definition of the term
<DT>Definition Term
<DD>Definition of the term
</DL>

Definition Term: Definition of the term
Definition Term: Definition of the term

<DL>

definition list

<DL>
<DT>Definition Term
<DD>Definition of the term
<DT>Definition Term
<DD>Definition of the term
</DL>

Definition Term: Definition of the term
Definition Term: Definition of the term

<DT>

definition term

<DL>
<DT>Definition Term
<DD>Definition of the term
<DT>Definition Term
<DD>Definition of the term
</DL>

Definition Term: Definition of the term
Definition Term: Definition of the term

<EM> emphasis This is an <EM>Example</EM> of using the emphasis tag This is an Example of using the emphasis tag

<EMBED> embed object <EMBED src="yourfile.mid" width="100%" height="60" align="center">

<EMBED> embed object <EMBED src="yourfile.mid" autostart="true" hidden="false" loop="false">
<noembed><bgsound src="yourfile.mid" loop="1"></noembed> Music will begin playing when your page is loaded and will only play one time. A control panel will be displayed to enable your visitors to stop the music.

<FONT> font <FONT FACE="Times New Roman">Example</FONT> Example

<FONT> font <FONT FACE="Times New Roman" SIZE="4">Example</FONT> Example

<FONT> font <FONT FACE="Times New Roman" SIZE="+3" COLOR="#FF0000">Example</FONT> Example

<FORM>

form

<FORM action="mailto:you**yourdomain.com">
Name: <INPUT name="Name" value="" size="10"><BR>
Email: <INPUT name="Email" value="" size="10"><BR>
<CENTER><INPUT type="submit"></CENTER>
</FORM>

<H1>

heading 1

<H1>Heading 1 Example</H1>

Heading 1 Example

<H2>

heading 2

<H2>Heading 2 Example</H2>

Heading 2 Example

<H3>

heading 3

<H3>Heading 3 Example</H3>

Heading 3 Example

<H4>

heading 4

<H4>Heading 4 Example</H4>

Heading 4 Example

<H5>

heading 5

<H5>Heading 5 Example</H5>

Heading 5 Example

<H6>

heading 6

<H6>Heading 6 Example</H6>

Heading 6 Example

<HEAD> heading of document <HEAD>Contains elements describing the document</HEAD> Nothing will show

<HR>

horizontal rule

<HR>

Contents of your webpage

<HR>

horizontal rule

<HR WIDTH="50%" SIZE="3">

Contents of your webpage

<HR>

horizontal rule

<HR WIDTH="50%" SIZE="3" NOSHADE>

Contents of your webpage

<HR>
(Internet
Explorer)

horizontal rule

<HR WIDTH="75%" COLOR="#FF0000" SIZE="4">

Contents of your webpage

<HR>
(Internet
Explorer)

horizontal rule

<HR WIDTH="25%" COLOR="#6699FF" SIZE="6">

Contents of your webpage

<HTML> hypertext markup language <HTML><HEAD><META><TITLE>Title of your webpage</TITLE></HEAD><BODY>Webpage contents</BODY></HTML> Contents of your webpage

<I> italic <I>Example</I> Example

<IMG> image <IMG SRC="Earth.gif" WIDTH="41" HEIGHT="41" BORDER="0" ALT="a sentence about your site">

<INPUT>

input field

Example 1:

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<INPUT type="text" size="10" maxlength="30">
<INPUT type="Submit" VALUE="Submit">
</FORM>

<INPUT>
(Internet Explorer)

input field

Example 2:

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<INPUT type="text" STYLE="color: #FFFFFF; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #72A4D2;" size="10" maxlength="30">
<INPUT type="Submit" VALUE="Submit">
</FORM>

<INPUT>

input field

Example 3:

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="2"><TR><TD BGCOLOR="#8463FF"><INPUT type="text" size="10" MAXLENGTH="30"></TD><TD BGCOLOR="#8463FF" VALIGN="Middle"> <INPUT type="image" name="submit" src="yourimage.gif"></TD></TR> </TABLE>
</FORM>

<INPUT>

input field

Example 4:

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
Enter Your Comments:<BR>
<TEXTAREA wrap="virtual" name="Comments" rows=3 cols=20 MAXLENGTH=100></TEXTAREA><BR>
<INPUT type="Submit" VALUE="Submit">
<INPUT type="Reset" VALUE="Clear">
</FORM>

<INPUT>

input field

Example 5:

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<CENTER>
Select an option:
<SELECT>
<OPTION >option 1
<OPTION SELECTED>option 2
<OPTION>option 3
<OPTION>option 4
<OPTION>option 5
<OPTION>option 6
</SELECT><BR>
<INPUT type="Submit" VALUE="Submit"></CENTER>
</FORM>

<INPUT>

input field

Example 6:

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
Select an option:<BR>
<INPUT type="radio" name="option"> Option 1
<INPUT type="radio" name="option" CHECKED> Option 2
<INPUT type="radio" name="option"> Option 3
<BR>
<BR>
Select an option:<BR>
<INPUT type="checkbox" name="selection"> Selection 1
<INPUT type="checkbox" name="selection" CHECKED> Selection 2
<INPUT type="checkbox" name="selection"> Selection 3
<INPUT type="Submit" VALUE="Submit">
</FORM>

<LI>

list item

Example 1:

<MENU>
<LI type="disc">List item 1
<LI type="circle">List item 2
<LI type="square">List item 3
</MENU>

Example 2:

<OL type="i">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>

Example 1:

List item 1
List item 2
List item 3

Example 2:

List item 1
List item 2
List item 3
List item 4

<LINK> link Visit our <A HREF="http://www.yourdomain.com/">site</A> Visit our site

<MARQUEE>
(Internet
Explorer) scrolling text <MARQUEE bgcolor="#CCCCCC" loop="-1" scrollamount="2" width="100%">Example Marquee</MARQUEE> Example Marquee

<MENU>

<MENU>
<LI type="disc">List item 1
<LI type="circle">List item 2
<LI type="square">List item 3
</MENU>

List item 1
List item 2
List item 3

<META> meta <META name="Description" content="Description of your site">
<META name="keywords" content="keywords describing your site"> Nothing will show

<META> meta <META HTTP-EQUIV="Refresh" CONTENT="4;URL=http://www.yourdomain.com/"> Nothing will show

<META> meta <META http-equiv="Pragma" content="no-cache"> Nothing will show

<META> meta <META name="rating" content="General"> Nothing will show

<META> meta <META name="ROBOTS" content="ALL"> Nothing will show

<META> meta <META NAME="ROBOTS" content="NOINDEX,FOLLOW"> Nothing will show

<OL>

ordered list

Example 1:

<OL>
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>

Example 2:

<OL type="a">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>

Example 1:

List item 1
List item 2
List item 3
List item 4

Example 2:

List item 1
List item 2
List item 3
List item 4

listbox option

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<CENTER>
Select an option:
<SELECT>
<OPTION>option 1
<OPTION SELECTED>option 2
<OPTION>option 3
<OPTION>option 4
<OPTION>option 5
<OPTION>option 6
</SELECT><BR>
</CENTER>
</FORM>

<P>

paragraph

This is an example displaying the use of the paragraph tag. <P> This will create a line break and a space between lines.

Attributes:

Example 1:<BR>
<BR>
<P align="left">
This is an example<BR>
displaying the use<BR>
of the paragraph tag.<BR>
<BR>
Example 2:<BR>
<BR>
<P align="right">
This is an example<BR>
displaying the use<BR>
of the paragraph tag.<BR>
<BR>
Example 3:<BR>
<BR>
<P align="center">
This is an example<BR>
displaying the use<BR>
of the paragraph tag.

This is an example displaying the use of the paragraph tag.

This will create a line break and a space between lines.

Attributes:

Example 1:

This is an example
displaying the use
of the paragraph tag.

Example 2:

This is an example
displaying the use
of the paragraph tag.

Example 3:

This is an example
displaying the use
of the paragraph tag.

<SMALL> small (text) <SMALL>Example</SMALL> Example

<STRONG> strong emphasis <STRONG>Example</STRONG> Example

<TABLE>

table

Example 1:

<TABLE BORDER="4" CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD>Column 1</TD>
<TD>Column 2</TD>
</TR>
</TABLE>

Example 2: (Internet Explorer)

<TABLE BORDER="2" BORDERCOLOR="#336699" CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD>Column 1</TD>
<TD>Column 2</TD>
</TR>
</TABLE>

Example 3:

<TABLE CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD BGCOLOR="#CCCCCC">Column 1</TD>
<TD BGCOLOR="#CCCCCC">Column 2</TD>
</TR>
<TR>
<TD>Row 2</TD>
<TD>Row 2</TD>
</TR>
</TABLE>

Example 1:

Column 1

Column 2

Example 2:

Column 1

Column 2

Example 3:

Column 1	Column 2
Row 2	Row 2

<TD>

table data

<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD>Column 1</TD>
<TD>Column 2</TD>
</TR>
</TABLE>

Column 1

Column 2

<TH>

table header

<DIV align="center"><TABLE>
<TR>
<TH>Column 1</TH>
<TH>Column 2</TH>
<TH>Column 3</TH>
</TR>
<TR>
<TD>Row 2</TD>
<TD>Row 2</TD>
<TD>Row 2</TD>
</TR>
<TR>
<TD>Row 3</TD>
<TD>Row 3</TD>
<TD>Row 3</TD>
</TR>
<TR>
<TD>Row 4</TD>
<TD>Row 4</TD>
<TD>Row 4</TD>
</TR>
</TABLE>
</DIV>

Column 1	Column 2	Column 3
Row 2	Row 2	Row 2
Row 3	Row 3	Row 3
Row 4	Row 4	Row 4

<TITLE> document title <TITLE>Title of your webpage</TITLE> Title of your webpage will be viewable in the title bar.

<TR>

table row

<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD>Column 1</TD>
<TD>Column 2</TD>
</TR>
</TABLE>

Column 1

Column 2

<TT> teletype <TT>Example</TT> Example

<U> underline <U>Example</U> Example

<UL>

unordered list

Example 1:<BR>
<BR>
<UL>
<LI>List item 1
<LI>List item 2
</UL>
<BR>
Example 2:<BR>
<UL type="disc">
<LI>List item 1
<LI>List item 2
<UL type="circle">
<LI>List item 3
<LI>List item 4
</UL>
</UL>

Example 1:

List item 1
List item 2

Example 2:

List item 1
List item 2
- List item 3
- List item 4

MouseOver PopUps provided by:

Here is an example of changing the background color of text
white
the code is
span style="color: white; background: navy">white I left out the <> at the begining and the end

Posted by: akabezalel

Hi Jerry!

You just gave me the tools... NOW... Can you teach me how to use them?!?!?! Please!!!

Posted by: czynka

...ME TOO!!!

It looks like a mixture of Greek and Chinese to me....please explain it to those of us who are more than a little confused !!

Thanks !

Posted by: KingdomWarrior

If any of you need help understanding how to put this to use, please PM or email me at KingdomWarrior

I used to design webpages strictly by writing code. One page could take hours, now it only takes 5 to 10 mins per page (most of the time less).

I still like to use code just to keep it fresh in my head >)

Posted by: JG

Instead of emailing why not just put the post here and and let him answer the question so everyone could learn from it.

Posted by: akabezalel

Good idea except I don't know enough to have questions! Except maybe, "Where do I Start?".

The last time I wrote any code was 20 years ago when I took a "Programming Basic" Class at the local Jr. college and I managed to make a simple calendar, took me WEEKS to get it right!

I hope it can be made simple for people like me who never even managed to graduate from High School!

I do want to learn to write Code so... Where do I Start?

Posted by: KingdomWarrior

Sounds good to me

Be glad to do that - just didn't want to clog the thread.

I am having a hard time getting the info to stay in the right format here. It converts the code instead of displaying it.

I am going to make the page and upload it to my server. I am not finished with the tutorial yet, but hopefully will shortly after I eat!

Hunger pangs are distracting me LOL. What I have now are just some basics. There is much more that I will share here in a bit.

Web Design Help Web Design Help

I will open a "free" site up and give you all the link and the login info so you can practice with this. NOTE:: Do not name the page index - this will be the opening page the explaination of what we are doing here, with a link back to this page and my tutor page. Plus I will give some free tools to help get you started in designing your own web page.

My suggestion to you will be to use your screen name here to create your page.

Posted by: KingdomWarrior

Here is a free web design software - http://www.webstudio.com/ I haven't checked it out myself, but it has been recommended to me before. I think it is a 30 day trial though.

DreamWeaver is very expensive, but again, there is a free 30 or 45 day trial here - http://www.macromedia.com/software/...eaver/download/

The webhosting site is http://anointed.o-f.com

You can go to www.o-f.com to login or you can use FTP software.
Login name is anointed, passwrod is Jerry

When you create your page - please post it here so that we can look at it

It will be of help to you to do so. I will look at it and review the code and help you get better at it.

Free FTP (File Transfer Protocol) software can be found at - http://www.ftpplanet.com/downloadLE.asp?ipswitch This says for Educational purpose only. I have used this for years, as was advised by my professor. I do have the full version now which I use for business.

Create the file in Notepad, save file as "YourUsername.htm" where "YourUsername" is the name that you use here on this board.

Then open your browser and go to http://www.o-f.com and type the login name and password in or you can use the FTP software.

On FTP - Use the site http://www.anointed.o-f.com. Under profile name Type Anointed. Then login name and password. Check the box that says "save password". Leave the rest blank. Then click connect.

Find your file by clicking on the up arrow in the upper left hand corner of the viewing area, until you find the directory that it is saved in and highlight it - then click the arrow going right that is between the two screens.

It will then begin to upload.

Now to check it - type http://www.anointed.o-f.com/YourUsername.htm in the browser.

Now you have it!!!

Posted by: akabezalel

Hi!

Life has been happening at an hectic pace around here, but I still want to learn code... Finding the block of time to do it, now that can be a challenge! Don't give up on me I will get there!

Posted by: KingdomWarrior

Take your time sis!