Designing Christian Web Sites




1,2,3 ABC HTML Made Easy



Below are a few HTML codes between arrows that look like this < >. Normally on a web page you do not see the print between the arrows but I have attempted to make this page so that you can see how I have made the codes and what each code does.

You should be able to copy paste any of the following codes onto your web page and have them work. Then just deleat what I have in there and type in what you want between the codes. At least it's a start until you start doing it so much you memorize the codes. Also the easiest way to learn HTML is to just start putting some on the page and see what it does, and then get it to do what you want it to.

You will notice that there are two sets of arrows around each code one is to start the code and the other is to stop it.
<CODE HERE>
</CODE HERE>
You must always start a code or what you want on your web page will not work the way you want it to. You must always stop a code or it will continue on down the whole web page.

The code is very fussy, if you make a space where a space should not be it will not work, if you leave out a space it will not work. If you write htpp instead of http or leave out letters, comas, " , #, / it will not work. With HTML upper and lowercase is not so important you can put HTML or html and get the same result. But when you get into other code such as Java script then you need to be more consistant.


HTML

Hypertext Markup Language


(The following will not show up on your page, but you need to have it anyway.)
Basic Lay out of A Web Page:

<HTML>
<HEAD>
</HEAD>
<BODY TAG>
</BODY>
</HTML>


HTML (hypertext markup language)
Basicly what you need to learn so that you can get what you want to show up on your web page.

Thus you begin each page with:
<HTML>
and end each page with:
</HTML>


HEADING

The heading is important to include if you wish your web page to show up in search engines.

<HEAD>
<TITLE>Put the title of your web page here </TITLE>
<META NAME="description" content="Write a sentance describing your page here.">
<META NAME="keywords" content="write,key,words,to,your,page,separated,by,comas,without,spaces.">
</HEAD>

This line and lines like it should have no breaks in them. When you view the source they should keep going in one straight line.

<META NAME="keywords" content="write,key,words,to,your,page,separated,by,comas,without,spaces.">


BODY

The body is the main part of your page. You begin it with a line of code or tags to chose the colors/graphics for your page.

There are many here are 3 basic ones.

BODY TAGS:

Without picture background:

<BODY BGCOLOR="#000000" text="#000000" link="#000000" vlink="#000000" alink="#000000"> Example One

With picture background:
<body BGCOLOR="#000000" text="#000000" link="#000000" vlink="#000000" alink="#000000" background="some.gif"> Example Two

With picture background fixed:
<body BGCOLOR="#000000" text="#000000" link="#000000" vlink="#000000" alink="#000000" background="some.gif" bgproperties="fixed"> Example Three

When you are finished with the main part of your page type </BODY> to stop the body.

(Note: The above codes should not wrap (go down to the next line) inside of your file manager, the codes should be in a continuous line across the page. In example one on my computer it does not wrap, to show you what I mean. If you have a smaller screen, or have the font (text) larger then it may go down to the next line, but if you copy paste them on your note pad it should go straight across with no breaks in the lines. Otherwise it will not work with some browswers.


What you may wish to include in the body:

TEXT SIZES

<h1>Size One</h1>


<h2>Size Two</h2>


<h3>Size Three</h3>


<h4>Size Four</h4>


<h5>Size Five</h5>

<h6>Size Six</h6>


TYPES OF TEXT

<b>Bold</b>

<STRONG>Strong</STRONG>

<BIG>Big</BIG>

<i>italic</i>

<blink>Netscape only</blink>

<PRE>Exactly as typed
               on the page
                        In typwriter font</PRE>

<PRE><B>You can add other
                  code such as bold or even sizes also
                    to the above code, here I made it
                           bold.</B></PRE>

<SMALL>Small</SMALL>

Down<SUB>DOWN</SUB>Down

UP<SUP>UP <SUP>UP

<DEL>line through</DEL>

<U>underline</U>


SPECIAL TEXT
<FONT FACE="Hancock">Hancock</FONT>

With Size
<FONT FACE="Bookman Old Style" SIZE=4>
Bookman Old Style</FONT>

With color
<FONT FACE="Iglesia-Light" SIZE=6 COLOR="#ff7c80">
Iglesia-Light
</FONT>

More Fonts to try for fun


AAAAAHHHH You are losing me! I want something simpler! HELP!

It's ok Click here :)


MAKING TEXT APPEAR ON THE PAGE AS YOU WANT IT:

<BR> makes a break between lines
<BR><BR>=<P>
alot of <BR><BR><BR><BR> will make more space between the lines.

<P> inserts a space between lines

Use <P>  </P> for blank lines making alot of <P><P><P> won't work

will make a space between words or you can indent paragraphs with it.

<P ALIGN="right"> Aligns test right</P>

<P ALIGN="center"> Aligns text Center</P>

<P ALIGN="left"> Aligns text left </P>

ALSO:

<center>Centers Text</center>


LISTS

Numbered List
<ol>
<li>item one
<li>item two
<li>item three
</ol>

Will make the Numbers for you like this:

  1. item one
  2. item two
  3. item three
  4. item four

Bullet List
<ul>
<li>item one
<li>item two
<li>item three
</ul>

Will make a list with dots in front of it like this:

Text or Defintion List
<dl>
<dt>God
<dd>The Father Who created all things and made a plan for His creation.
<dt>Jesus
<dd>The Word who became flesh, so that we could be reunited with God.
<dt>Holy Ghost
<dd>The Helper Jesus sent to fill born again believers to enable them to further His work after He returned to His Father.
<dt>Man
<dd>Created by God, and given a choice to either reject or accept Him.
<dt>Satan
<dd>The angel of light who chose to be his own god, and now is the father of the dead.
</dl>

Will create a list like this:

God
The Father Who created all things and made a plan for His creation.
Jesus
The Word who became flesh, so that we could be reunited with God.
Holy Ghost
The Helper Jesus sent to fill born again believers to enable them to further His work after He returned to His Father.
Man
Created by God, and given a choice to either reject or accept Him.
Satan
The angel of light who chose to be his own god, and now is the father of the dead.


LINES, BARS, RULES

<hr>Makes a single line across the page.



(like I have used on this page)



<hr size=10 align=left noshade width=50%>


You can change the size and width of the line by changing the numbers.
You can place it to the left, center or right by changing "align=".
If you take out no shade the line will have no color.

(Note: Lines can also be made from graphics).


Begining on the page now you will find code like <a href="http:// etc"> and <img src="http:// etc"> this is an address (some call it the addy, url etc). If you look at the top of your screen you should see a white box, and before it you will see the word "Address".

That would be the address for this page:
http://.....123ABC_HTML_MadeEasy.html
Each page on the internet has a different address. In the code you must put the address you need between the "quote marks", so what you wish to do will work. I have named them http://address/.


LINKS

(USING TEXT AS LINK)
<a href="http://address/Back.html">Some Other Place</a>

(USING PICTURE AS LINK)
<a href="http://address/Back.html"><img src="http://address/SOMEOT.gif" height=100 width=100 alt="Name of picture etc." border=0></a>

someot.gif

(USING PICTURE AND TEXT AS LINK)
<img src="http://address/SOMEOT.gif" height=100 width=100 alt="Some other page" border=0><a href="http://address/Back.html>Some Other Place</a>

Some other pageSome Other Place

(LINK WITHIN YOUR PAGE)
<a href="#Bottom">
Bottom of Page </a> (Put this where you want the link to start)

<a name="Bottom"> (Put this where you want the link to go to)


This code is used to make indexes and other links on the same page. This page is an example See Index.


E-MAIL

TO E-MAIL RIGHT FROM PAGE
E-Mail <A HREF="mailto:YourE-Mail@Here">YourE-Mail@Here</A>
This is my e-mail:
E-Mail iyohi@hotmail.com

TO E-MAIL USING PICTURE
<A HREF="mailto:YourE-Mail@Here"><img src="http://address/e-mail.gif" alt="YourE-Mail@Here" border=0></A>


AHHHH!!!! I don't get it! HTML is too HARD! I just want a web page! It's ok :) Relax :) Smile. Go to one of the following places and they will add the code for you as you work:

OurChurch.Com

Tripod
Hint: pick Quick Page

Angel Fire
Pick Angelfire's Basic Editor

Geo Cities
Pick Intel.com Web Page Wizard or Basic Home Page Editor


Make a hyperlink to your next page.

NEXT
Stop anything you have not already stoped above like </CENTER> or </H4>.

Then stop the body
</BODY>

And lastly stop the HTML
</HTML>

NEXT


Designing Christian Web SitesHTML
Designing Christian Web SitesTables
Designing Christian Web SitesFrames
Designing Christian Web SitesForms
Designing Christian Web SitesGraphics
Designing Christian Web SitesMusicDesigning Christian Web Sites
Designing Christian Web SitesMain Page
Designing Christian Web SitesSite IndexDesigning Christian Web Sites
























<a name="Bottom">
Back to a (LINK WITHIN YOUR PAGE)