Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

5 - Putting it all together

HTML Crash Course

5 - Putting it all together

by  Javrix  Posted    (Edited  )
Quick Review:
We know the basic structure of our pages, the anchor and link codes, and the image codes.

Now we're going to put them all together.

Let's take a quick look at what we have so far in our web page:

<HTML>
<HEAD>
<TITLE>My first web page</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF" TEXT="000000" LINK="00FF00" VLINK="CCCCCC" ALINK="C0C0C0">
Hey, this is my first web page!
</BODY>
</HTML>

Now let's add some links and pictures.

Let's take out the line that is "Hey, this is my first web page!" and replace it with the following code:

<A HREF="http://www.tek-tips.com">Click here to visit Tek-Tips.com!</A>

So now your page should look like this:

<HTML>
<HEAD>
<TITLE>My first web page</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF" TEXT="000000" LINK="00FF00" VLINK="CCCCCC" ALINK="C0C0C0">
<A HREF="http://www.tek-tips.com">Click here to visit Tek-Tips.com!</A>
</BODY>
</HTML>

Now let's add an image. But before we do, we don't want the image to be right next to the tek-tips line, so let's tell the page we want to move down a line before we begin.
We do this by using the <BR> code. This means break. Take a look:

<HTML>
<HEAD>
<TITLE>My first web page</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF" TEXT="000000" LINK="00FF00" VLINK="CCCCCC" ALINK="C0C0C0">
<A HREF="http://www.tek-tips.com">Click here to visit Tek-Tips.com!</A>
<BR>
Some text.
</BODY>
</HTML>

Save it and check it out.

Now let's NOT put a <BR> in our code and see what happens:

<HTML>
<HEAD>
<TITLE>My first web page</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF" TEXT="000000" LINK="00FF00" VLINK="CCCCCC" ALINK="C0C0C0">
<A HREF="http://www.tek-tips.com">Click here to visit Tek-Tips.com!</A>
Some text
</BODY>
</HTML>

Save it and check it out. See the difference?

We can even add a gap inbetween our break by using another code, <P>. This means paragraph and it will put a gap inbetween our lines:

<HTML>
<HEAD>
<TITLE>My first web page</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF" TEXT="000000" LINK="00FF00" VLINK="CCCCCC" ALINK="C0C0C0">
<A HREF="http://www.tek-tips.com">Click here to visit Tek-Tips.com!</A>
<P>
Some text.
</BODY>
</HTML>

Save it again and check it out. Pretty cool, eh?

So now let's through in our image:

<HTML>
<HEAD>
<TITLE>My first web page</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF" TEXT="000000" LINK="00FF00" VLINK="CCCCCC" ALINK="C0C0C0">
<A HREF="http://www.tek-tips.com">Click here to visit Tek-Tips.com!</A>
<P>
<IMG SRC="http://www.unitedrecruiters.com/images/calander.gif">
</BODY>
</HTML>

Save it and check it out! If you have an image of your own, go away and throw it on their.

Let's add a couple more HTML codes in our page.

We want our entire page centered, so we'll use a <CENTER> tag:

<HTML>
<HEAD>
<TITLE>My first web page</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF" TEXT="000000" LINK="00FF00" VLINK="CCCCCC" ALINK="C0C0C0">
<CENTER>
<A HREF="http://www.tek-tips.com">Click here to visit Tek-Tips.com!</A>
<P>
<IMG SRC="http://www.unitedrecruiters.com/images/calander.gif">
</CENTER>
</BODY>
</HTML>

See how it works kinda like the anchor tag, it goes from one point A to point B, and everything inbetween does what it is.
In this case, everything inbetween is centered.

Save it and check it out.

Let's look at our page a little more carefully:

<HTML>

<HEAD>
<TITLE>My first web page</TITLE>
</HEAD>

<BODY BGCOLOR="FFFFFF" TEXT="000000" LINK="00FF00" VLINK="CCCCCC" ALINK="C0C0C0">


<CENTER>

<A HREF="http://www.tek-tips.com">Click here to visit Tek-Tips.com!</A>

<P>

<IMG SRC="http://www.unitedrecruiters.com/images/calander.gif">

</CENTER>


</BODY>

</HTML>

First we have our HTML, HEAD, TITLE, /HEAD, and then our BODY tag.
Everything in the BODY tag is what is displayed on the browser.
We tell it first to be CENTERed, then we have our link to a page, we put a paragraph in it, then we have our image, and then we tell it to stop being centered.
We close up the BODY tag and close up the HTML tag.

So now you know the basics of HTML. Of course there is LOTS more things we could do, and if you're ready to explore even more, go to our next section...
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top