Welcome to my Basic HTML class or should I say Your Basic HTML
class? After all, I did make this for you so that you can learn how to use HTML (Hypertext Markup Language).
The instructions below are very simple step by step instructions on basic HTML. If you follow these instructions carefully you will have your first page up in no time.
- <HTML>
- <HEAD>
- <TITLE>Welcome to my Homepage</TITLE>
- </HEAD>
- <BODY>
This is where you add your background, all of your text, graphics, and any thing else you want to put on this page.
- </BODY>
- </HTML>
Of course you will want to have a background on your homepage and this is added to the body tag. There are 2 ways to add your background to your web page. The first 1 looks like this.
<BODY BACKGROUND="THE FILENAME OF THE BACKGROUND GIF" or JPG">
The other way to add a background to your homepage is like this;
<BODY BGCOLOR="THE NAME OR NUMBER OF THE COLOR GOES HERE">
To see the colors and the color codes that you can add as your BODY BGCOLOR background just go
HERE
We are going to start off with the <BODY BACKGROUND tags first.
- <HTML>
- <HEAD>
- <TITLE>Welcome to my Homepage</TITLE>
- </HEAD>
- <BODY BACKGROUND="http://add the url of the background you want here, jpg"> Example;
"https://members.tripod.com/gifs123/backs1/blue1.jpg">
- </BODY>
- </HTML>
Lets take a look at what we have so far. Just go here
As you can see, all we have so far is a background. Now we can
add everything else we want to our homepage.
We will start by adding what we call a HEADER to the top of our page. You will find instructions on how to do this down below but for now we will just go ahead and add this to our page. Lets call this "Welcome to my first Homepage" ok? Of course you will want to center this on your homepage so that it will look neat. The code will look like this.
- <HTML>
- <HEAD>
- <TITLE>My first Homepage.</TITLE>
- </HEAD>
- <BODY BACKGROUND="https://members.tripod.com/gifs123/back1/blue1.jpg" Text="Black" Link="Blue" Vlink="Firebrick">
- <CENTER>
- <BR>
- <BR>
- <H1>Welcome to my first Homepage</H1>
- <a href="https://members.tripod.com/~Willing2Help/">Bruce's WebTV Help Pages</a>
- <a href="https://members.tripod.com/~Willing2Help/">Bruce's Text Headers</a>
- </CENTER>
- </BODY>
- </HTML>
Lets go here to look at our homepage now and to see what we added.
You may have noticed that I added this <BR> new tag in the last HTML coding. There are 2 tags like this. The <BR> is used to break the text to the very next line. Then there is the <P> tag which is used to start another
paragraph.
Although I have a tutorial for adding music to your page that you can find on the front page of my HTML Classroom lets add some music here to our page so you can see where to add the code.
You will also notice that I added 2 more tags and work them into our homepage.
<FONT SIZE="?"> is the size you want your text to be. You will learn how to do all of this below. <FONT COLOR or TEXT COLOR="?"> is of course the color you want your text to be.
- <HTML>
- <HEAD>
- <TITLE>Welcome to my first Homepage</TITLE>
- </HEAD>
- <BODY BACKGROUND="https://members.tripod.com/gifs123/back1/blue1.jpg" Text="Black" Link="Blue" Vlink="Firebrick">
- <EMBED SRC="http://URL and filename for midi" autostart="true">
- <FONT SIZE="3">
- <CENTER>
- <BR>
- <BR>
- <H1>Welcome to my first Homepage</H1>
- <BR>
- <BR>
- </FONT>
- </CENTER>
- </BODY>
- </HTML>
You can view the results by going here
If you wanted to have just a plain solid color background then this is how I like to write the code. It gives you a different color for the background, text, link, and vlink.
<BODY BGCOLOR="#000000" TEXT="#FFFAF0" LINK="#FFD700" VLINK="#800080">
You can go to this page Example Page to see what I am talking about and what it will look like.
If your wondering why you should use so many colored text on your homepage right? Well I will try to explain it to you here.
Text color: This is the basic text color that you want on your page.
Link color: This is the color of a link before being clicked on.
VLINK color: This is the color the text will change to, after the link has been visited.
There are backgrounds out now that have become very popular with WebTV users and they are called Corner Backgrounds. If you would like to these corner background you can go to Jo'sClassy Backs
The code to add these backgrounds to your email signature box goes like this;
<noembed>
<body background="URL of Corner Background" bgcolor="any color" text="any color">
</noembed>
You will not see the image when you are writing the email, but it will be there when the email is opened.
The font tag is used to change color, size, and text. For an example;
<font color="color name"></font>
Changed color to Red
Changed color to Gold
Changed color to Yellow
Changed color to Orange
There are 2 ways to change the size of your text on your homepage and both of these methods are very simple.
<font size="number here"></font>
Changed the text size to 1
Changed the text size to 2
Changed the text size to 3
Change the text size to 4
Changed the text size to 5
Changed the text size to 6
Changed the text size to 7
<h?>Substitute ? for the number</h?>
Change the text size to 1
Change the text size to 2
Change the text size to 3
Change the text size to 4
Change the text size to 5
Change the text size to 6
To change the style of text on your page just add these simple
tags to your code.
<i>For Italic</i>
Welcome to my homepage
<b>For Bold</b>
Welcome to my homepage
<tt>For Typewriter</tt>
Welcome to my homepage
<u>For Underlined</u>
Welcome to my homepage
<strike>For Strike</strike>
Welcome to my homepage
<marquee>Your words go here</marquee>
Add color to your marquee
<marquee bgcolor="#??????">Words Go Here</marquee>
Change the direction of your marquee
<marquee direction="right">Your Text</marquee>
Here is how you can make a bouncing marquee
<marquee behavior="alternate">Words Here</marquee>
Here is how you can add
<marquee scrollamount="400" scrolldelay="300">Words Go Here</marquee>
Don't get carried away with this though because it can drive you crazy.
Thats about it for Simple HTML for your homepage. I have also made tutorials for adding music and graphics to your website. I hope you check those out also.
