ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

How to create an awesome website using HTML - for begginers

Updated on September 16, 2012

Introduction

So you want to make a kick butt website but you have little or no experience? Perfect!! This tutorial is just for you. This tutorial will take you step by step through the process of making a good looking website using HTML, the most basic and core of all web designing languages. I will be using my own website as example as I rebuild from scratch in this tutorial, giving you the basic tools and templates that you’ll need to make your own incredible website.

Things you will need:
1. A simple word program like WordPad or Notepad or their Mac equivalent. (Don’t use Microsoft Word or Word Processor.)
2. A web browser. I like Firefox but you can use whatever one you like and often times its best to use multiple ones as some coding may look different in different browsers.
3. A basic idea of what you would like your website to look like but that’s something that you can think about as we’ll be using my website as a template for now.

Now before we get started let's go ahead and take a peak at "Figure 1" and see the general template of the website you'll be creating in this tutorial.

Figure 1
Figure 1

Alright, now then let's get started!!

Figure 2
Figure 2

STEP ONE: MAPPING OUT YOUR WEBPAGE

First things first, open your word program and copy and paste this into it

<html>
<body>

</body>
</html>

These are code bricks; they are used to build your website. Notice how there is both an "<html>" AND an "</html>" this is called nesting. The first one, the "<html>" tells the internet that this is where this specific brick’s effect, in this case enabling html coding, starts and the second one, the "</html>" tells the internet where to stop the brick’s effect. Everything in-between a set of nested bricks like this will be affected by their properties and this applies to all brick codes, not just "<html>". It is very important to make sure that when you open a brick that you also create a close point, otherwise its effects would continue throughout your whole webpage, making it messy and confusing, and that’s not good.

Now save your document as “index.html” and exit out of it. Your file should now look something like “figure 2”. Click to open it and it should now come up in your web browser looking like "figure 3". It looks really plain now, doesn't even have words but now you can see that it's working.

Figure 3
Figure 3

Now lets start mapping out our website using tables. Right-click on your file and go to "open with", then select your word program and open it. Now insert a table in between the two "<body>" bricks. (the "<body>" bricks tells the internet that this is the body of your webpage. Like a car has a hood, a body and a truck, so does your website, only the "hood" is called a header and the "trunk" is called a footer.) the code for a simple table is

<table border="1" width="100%" height="100%">

<tr height="300">
<td colspan="2">Table Header</td>
</tr>

<tr>
<td width="20%">Menu Bar</td> <td width="100%">Main Body</td>
</tr>

</table>

This might look a little confusing to you so let me quickly explain the bricks that make a table. A table is made of vertical rows and for every nested "<tr>" and "</tr>" a row is added to the table. Now a row is made up of data cells and for every "<td>" and "</td>" within a row a data cell is added. Now both these rows ("<tr>") and data cell ("<td>") are in turn placed inside of the "<table>" and "</table>" bricks which is the outer boundaries of the table.

Now you've probably noticed that several of the bricks have widths or heights inside of them, these tell the internet how much of the browser window you want the cells and rows to take up. In this case the width and height in the "<table>" brick tells the browser to have the outer boundaries of the table to completely fill the window. Inside the top row ("<tr>") the height is telling the row to be 300 pixels tall and the "colspan" inside the cell ("<td>") is telling it to be as wide as both the cells in the row below it. This space will be our header where most people put their websites banner. And finally in the second row we have created a main body for our webpage and a side menu bar by telling the first cell in the row to be 20% of the width of the screen and the second cell to cover the remaining 80%.

Now save your file and open it in your web browser and it should look something like "figure 4". our website has now been divided into three sections, header, menu and body. It's starting to look a little bit nicer, still nothing special but we'll fix that in the next step.

Figure 4
Figure 4

STEP TWO: ADDING COLORS AND PAGES

Before starting this step you'll need to create a new folder for your web file ("index.html") and place it in there along with another new folder called "pics". The reason we do this is because in this next step you'll be linking several pictures from you "pics" folder to your webpage and you'll also be making a new html file for other sections of your website, and if they're not organized then this will start to get really messy. So do it!! Also you can either create your own pictures for this next step (I would recommend using piant.net its free, simple and good.) or you can just use the ones that I have posted at the bottom of this page.

OKAY let's add some color to this baby!! Let's start with the base background. Change your first body tag ("<body>") to this:

<body bgcolor="black">

By adding 'bgcolor="black"' to your body brick you have told your browser that you want the main body of your webpage to be black or red or whatever color you place in between the " ". So now our page has some color but it's still a little plain so lets ad a bit of a variety starting by adding a banner into the header. Remove the "table header" from in between your top row ("<tr>") and replace it with this:

<img src="pics/banner.jpg" height="300" width="100%"/>

Now this is an interesting brick because it's nested inside itself so that the "/" at the end replaces the need for a stop brick. What this brick does is it load an image either from a file or from the internet and pastes it into your webpage, by typing "pics/banner.png" I am telling it to go into my "pics" file and grab my picture named "banner.jpg". If you wanted to load a picture from a website instead that could easily be done by replacing "pics/banner.jpg" with the web address or URL of the picture. (Example: http://web-adress-or-url/picture-name.jpg) and again the height and width is telling your browser ho big to make your picture, so if you want it to be its original size just delete that part from the brick, but for my purposes I want it to be this size.

Now our website is starting to look like an actual webpage with a banner and some color but we're not done yet, we still need to add a bit more variety to the sidebar and main body. Alright change the first "<td>" of your second row so that it looks like this:

<td width="15%" background="pics/leftbg2.jpg" valign="top">

We've shrunk the sidebar a bit, (if you haven't noticed a change you will when we edit the main body) added the picture "leftbg2.jpg" from our "pics" folder and made it so whatever is placed in this cell will be aligned to the top. ('valign="top"') Now replace the second cell ("<td>" not "</td>") in this row with this:

<td width="85%" background="pics/rightbg2.jpg" valign="top" align="center">

Here we have enlarged the width of the body just a tad, we've loaded a background picture from our "pics" folder and we've told the cell to make anything that we put in it align at the top ('valign="top"') and center. ('align="center"') Alternatively you could have it be aligned to the middle, ('valign="middle"') bottom, ('valign="bottom"') left ('align="left"') or right ('align="right"')

Our website is starting to look really good now!! But there are still a few more things that need to be done before it's complete. It's time to add another page to your website so first let's add some button for both the current page and any new pages you would like to add. Insert this into the menu cell and delete the "Menu Bar" text that is already there.

<a href="index.html"><img src="pics/hombtn.jpg" width="200"/></a>
<a href="profiles.html"><img src="pics/profbtn.jpg" width="200"/></a>


These are image links but we are going to use them as buttons. If you would rather have a plain text link rather than an image link just remove the image brick ("<img src="pics/hombtn.jpg" width="200"/>") and replace it with text or a different picture if you would like. Whatever you place in between the "<a href="index.html">" and "</a>" will be your link. Also notice the html names ('index.html" and "profiles.html"') in the bricks, the first is the name of the current page and will load this page when you click it, and the second is the name that I chose for my second page that we're going to create but you can change the name if you want or if you would like to link to a completely different webpage you would just replace the "profiles.html" with the web address (URL) of the page you want to link to.

Now that we have a button for our second page we'd better make it but don't worry this will be real quick, just click the "file" button in the top left corner of your word document and click "save as", name it "profiles.html", (or whatever you decide to have as your second page) and save it in the same folder as your "index.html".

Your website should now look something like "Figure 5"

Figure 5
Figure 5

And your word document should look something like this:

<html>
<body bgcolor="black">

<table border="1" width="100%" height="100%">

<tr height="300">
<td colspan="2"> <img src="pics/banner.jpg" height="300" width="100%"/> </td>
</tr>

<tr>
<td width="15%" background="pics/leftbg2.jpg" valign="top">
<a href="index.html"><img src="pics/hombtn.jpg" width="200"/></a>
<a href="profiles.html"><img src="pics/profbtn.jpg" width="200"/></a>
</td>
<td width="85%" background="pics/rightbg2.jpg" valign="top" align="center">Main Body</td>
</tr>

</table>

</body>
</html>

STEP THREE: ADDING TEXT AND PICTURES

Now you have two pages on your website, they look exactly the same but we can easily fix that. Now in your "Index.html" file we are going to experiment a little with the different things that you can do with text in HTML. Erase the "Main Body" from the second cell in the second row and replace it with this:

<h1> HOME PAGE </h1>
<h2> WELCOME </h2>
<h3> WELCOME </h3>
<h4> WELCOME </h4>
<h5> WELCOME </h5>
<h6> WELCOME </h6>
<p>This is my very first website!</p>
<font face="verdana" color="green"><p>This is my very first website!</p></font>

This is a lot of new code but it's all fairly simple. The "H" in "<h1>" stands for header or title and it comes in six different sizes. These often are used to show the name of the page you are on or. The "P" in "<p>" stands for paragraph and that's exactly what it is, a place to type a paragraph. Now the font brick is the really fun one of the group, by using 'face="verdana"' you can change the font of your text to "verdana" or what other font you have installed on your computer, but remember that people will only see the font if it's installed on their computer also, which most computers come with a decent number of fonts pre-installed. And the 'color="green"' will allow you to change the color of the text to green or any other color. Now that you know the basics of text, mess around with it a bit, find something that you like and make it yours.

Now open your "profiles.html" file and we'll go over a few of the basics of displaying pictures. Remove the "Main Body" text from here also and replace it with this:

<h1>PROFILES</h1>

<p> <img src="pics/2fsc.jpg"/> </p>

<P> Profile desciption here. </p>

<p> <img src="pics/bkn.jpg" border="2"/> </p>

<P> Profile desciption here. </p>

<p> <img src="pics/untitled.jpg" border="5" style="border-color:blue"/> </p>

<P> Profile desciption here. </p>

We've already covered a bit about images but now we've added to nice little features, a border ('border="5"') and a border color ('style="border-color:blue"') which will allow you to have a nice bit of variety. Right now the bricks are set to load my pictures so just replace the file name ("untitled.jpg") with the name or URL of the pictures you want to load. Also notice that there are "<p>" bricks on either side of everything, not only are these bricks used for writing paragraphs but they can also be used space out your picture, which would otherwise be aligned side by side.

Now your home page ("index.html") should look something like "Figure 6" and the word document should look something like this:

<html>
<body bgcolor="black">

<table border="1" width="100%" height="100%">

<tr height="300">
<td colspan="2"> <img src="pics/banner.jpg" height="300" width="100%"/> </td>
</tr>

<tr>
<td width="15%" background="pics/leftbg2.jpg" valign="top"><a href="index.html">
<img src="pics/hombtn.jpg" width="200"/></a>
<a href="profiles.html"><img src="pics/profbtn.jpg" width="200"/></a>
</td>
<td width="85%" background="pics/rightbg2.jpg" valign="top" align="center">
<h1> HOME PAGE </h1>
<h2> WELCOME </h2>
<h3> WELCOME </h3>
<h4> WELCOME </h4>
<h5> WELCOME </h5>
<h6> WELCOME </h6>
<p>This is my very first website!</p>
<font face="verdana" color="green"><p>This is my very first website!</p></font>
</td>
</tr>

</table>

</body>
</html>

Figure 6
Figure 6

And your second page should look something like "figure 7" and the word document should look something like this:

<html>
<body bgcolor="black">

<table border="1" width="100%" height="100%">

<tr height="300">
<td colspan="2"> <img src="pics/banner.jpg" height="300" width="100%"/> </td>
</tr>

<tr>
<td width="15%" background="pics/leftbg2.jpg" valign="top">
<a href="index.html"><img src="pics/hombtn.jpg" width="200"/></a>
<a href="profiles.html"><img src="pics/profbtn.jpg" width="200"/></a>
</td>
<td width="85%" background="pics/rightbg2.jpg" valign="top" align="center">
<h1>PROFILES</h1>

<p> <img src="pics/2fsc.jpg"/> </p>

<P> Profile desciption here. </p>

<p> <img src="pics/bkn.jpg" border="2"/> </p>

<P> Profile desciption here. </p>

<p> <img src="pics/untitled.jpg" border="5" style="border-color:blue"/> </p>

<P> Profile desciption here. </p>

</td>
</tr>

</table>

</body>
</html>

Figure 7
Figure 7

Well, now that you know the basics play around with it until you find something that you like and if you're having trouble or have a question just ask me and I'll do my best to answer. This isn't the only template for making a website, there are many different ways, but this is the technique that I have come to like best. And now the next step, after you get your website the way you like it, would be to buy a domain name and pay to have your sight hosted by a site like godaddy.com but I'll save that for another day. Thanks for reading; I hope that this was helpful.

- Bluemana

Pictures for step two

Click thumbnail to view full-size
save as banner.jpgsave as hombtn.jpgsave as leftbg2.jpgsave as profbtn.jpgsave as rightbg2.jpg
save as banner.jpg
save as banner.jpg
save as hombtn.jpg
save as hombtn.jpg
save as leftbg2.jpg
save as leftbg2.jpg
save as profbtn.jpg
save as profbtn.jpg
save as rightbg2.jpg
save as rightbg2.jpg

Comments

    0 of 8192 characters used
    Post Comment

    • iefox5 profile image

      iefox5 4 years ago

      I need to learn some basic website knowledge. HTML is the first thing.

    • bluemana profile image
      Author

      Bret Phillips 4 years ago from Utah

      Yeah, I mean there are many ways to go about building a website, but I would definitely recommend learning HTML it is an invaluable skill for anyone serious about creating a webpage and it’s fairly simple, plus once you get the basics down it’s really just a lot of fun.

    • smga22 profile image

      smga22 4 years ago from Dhaka, Bangladesh

      It is a never ending stuff. Great information provided.

    • bluemana profile image
      Author

      Bret Phillips 4 years ago from Utah

      Thanks, I put a lot of work into it.

    • smga22 profile image

      smga22 3 years ago from Dhaka, Bangladesh

      Useful Information. Thanks for sharing this Hub.

    • Syeda Zainab profile image

      kashif 22 months ago from Rawalpindi, Pakistan

      Very good hub.

      Visit the page to get more information about web development.

      http://entertainment7899.blogspot.com/search/label...

    • profile image

      Jayy 8 months ago

      my text is not showing up under my pictures

    Click to Rate This Article