Step #1
If you want to do anything interesting with web related coding, then HTML is the first thing that you should learn. What's more its not that hard. Just work your way through these lessons, and don't get too discouraged if you don't get it first. Remember - it isn't hard, and with a little perseverence, you will get there.
So what do you need?
Well first of all we will start with an application called notepad. This is a very basic text editor, but it is good to get started on as it comes with windows, which is what most people use. For those of you on windows here is how you find it: start>programs>accessories>notepad.
Next of all quickly click
file>save as
and save the file as "yourname.html " (Do NOT include the commas!). Also the ".html" part of this is very important, this turns it into a file your web browser understands how to read and produces your webpage.
 |
| Fig. 1 |
Don't worry about understanding it yet, just ahve fun building something quickly.
Step 1:
Type in the characters as seen in fig.1 into notepad. And I mean as exactly seen in Fig.1. Anything missing, or typed in differently and you risk this little project not working properly.
Step 2:
If you look quickly at the construction of Fig. 1 you will see that there is a <body> symbol, or tag as they are properly known. You will see that it is followed by a </body> tag. Beween these two tags I want you to insert <p></p> tags, exactly as I have written them here. Between these two tags you can now print any message that you want to the world. In the end it should look like what you see below in Fig.2.
 |
| Fig. 2 |
Go back to the folder where you saved this little notepad file as a .html. Remember we did this in step 1. It should appear with the internet explorer symbol beside it or whatever your computer's default browser is. Simply click on the file to view your new webpage.
Now lets add a few more features to your webpage. We will do this by building our own little profile.
To set things up so that you can follow along with this demonstration, open up notepad again, and follow along with the instructions laid out in How to Build a Wepage - Quick and Easy!.
Now you should find yourself looking at the basic structure of a webpage laid out in HTML. You are now ready to add to this basic structure and create your own profile! (Easy there - contain your excitment).
First of all I'll introduce you to the <h1></h1> tags. Within these tags you can display the heading of your new webpage. You can put in your own name or whatever you like but you do it like this:
<h1>Computa Browsa</h1>
 |
| Fig.1 |
To view these in your web browser see How to Build a Wepage - Quick and Easy! where it will show you how to click into your main file root and proudly view your webpage in a browser of your choice.
Now hopefully, if were able to follow along you're probably looking at your name at the top of a white page on you brower. If not, either there's something wrong with this post, oryour computer skills need brushing up!
Anyway, at this point your probably getting bored, so we desperately need to add something to the profile. For this I am going to introduce you the the <h3></h3> tags. Similar to the <h1></h1> tags, they display your headings in slightly smaller type size.
So on the next line underneath your <h1></h1> tags write in between your <h3></h3> what you want all of your headings to be. I'm going to keep mine short, and I'll put in three headings:
<h3>Age</h3>
<h3>Occupation</h3>
 |
| Fig.2 |
The HTML in your notepad window should now be looking something like Fig 2.
For the final segment of this leeson I will now introduce you to the <p></p>. I know you must be getting tired at this stage, but just bear with me, we're nearly there!
Within these tags you can place the details of the various sections of your profile. For example:
<h3>Occupation</h3>
<p>Greatest Blogger in the World!</p>
Do this for all of your headings, and your finished product should look something like Fig.3.
Now save and close your file.
 |
| Fig.3 |
Step #2
Another key piece of information in learning HTML is the use of lists. A list can be used to many purposes which you will learn about later.
The list tag we will use is the <ul></ul> tag. This creates a bullet-point list. The list elements are put into the page using <li></li> tags.
A list could therefore be formed in the following manner:
<p>What you need to know to build a web page</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
Write this code into notepad and take a look at what it makes.
Step #3
The essential feature of the internet is linking between web-pages. We'll take a look at this now.
A link is created using the <a></a> tags.
And it is created like this: <a href="http://www.computabrowsa.blogspot.com">Computabrowsa</a>
This is a link which will take a user to an external website. This also gives us the opportunity of looking at attributes for the first time. The attribute in this example is the href tag, and it is put into your tags using the method above.
For the moment just look at it and you will be introduced to other attributes at later stages of these instructions.
The other type of link is the internal link. This takes you to a link on the same page. The a tag is consstructed in the same manner as before. For this we will construct it like this: <a href="linktoanchor">Computabrowsa</a>
This will link to a page element whose id will be set as linktoanchor as follows:
<p id="linktoanchor">Computabrowsa</p>
(Note: this also introduces you to the id page attribute)
Construct the page as follows:
<p><a href="linktoanchor">Computabrowsa</a></p>
<p>Computabrowsa</p><br />
<p>Computabrowsa</p><br />
<p>Computabrowsa</p><br />
<p>Computabrowsa</p><br />
<p>Computabrowsa</p><br />
<p>Computabrowsa</p><br />
<p>Computabrowsa</p><br />
<p>Computabrowsa</p><br />
<p id="linktoanchor">Computabrowsa</p>
Run this in your browser and see if can tell how the internal links work.
The list tag we will use is the <ul></ul> tag. This creates a bullet-point list. The list elements are put into the page using <li></li> tags.
A list could therefore be formed in the following manner:
<p>What you need to know to build a web page</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
Write this code into notepad and take a look at what it makes.
Step #3
The essential feature of the internet is linking between web-pages. We'll take a look at this now.
A link is created using the <a></a> tags.
And it is created like this: <a href="http://www.computabrowsa.blogspot.com">Computabrowsa</a>
This is a link which will take a user to an external website. This also gives us the opportunity of looking at attributes for the first time. The attribute in this example is the href tag, and it is put into your tags using the method above.
For the moment just look at it and you will be introduced to other attributes at later stages of these instructions.
The other type of link is the internal link. This takes you to a link on the same page. The a tag is consstructed in the same manner as before. For this we will construct it like this: <a href="linktoanchor">Computabrowsa</a>
This will link to a page element whose id will be set as linktoanchor as follows:
<p id="linktoanchor">Computabrowsa</p>
(Note: this also introduces you to the id page attribute)
Construct the page as follows:
<p><a href="linktoanchor">Computabrowsa</a></p>
<p>Computabrowsa</p><br />
<p>Computabrowsa</p><br />
<p>Computabrowsa</p><br />
<p>Computabrowsa</p><br />
<p>Computabrowsa</p><br />
<p>Computabrowsa</p><br />
<p>Computabrowsa</p><br />
<p>Computabrowsa</p><br />
<p id="linktoanchor">Computabrowsa</p>
Run this in your browser and see if can tell how the internal links work.
