INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

HTML Crash Course

5 - Putting it all together by Javrix
Posted: 11 May 01

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...

Back to HTML, XHTML & CSS FAQ Index
Back to HTML, XHTML & CSS Forum

My Archive

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close