HTML Web Design Tutorial
Hello and, welcome! This is the page to be if you would like to know, just how to make a Website or even just a Webpage. This page will give you a step by step tutorial on basic HTML. In case you are wondering HTML means, "Hyper Text Markup Language". This is one of the easiest languages to learn. Follow the directions to the letter and you should be fine but, if you need an answer to a question or anything just read the contact info. at the bottom of the page. I hope you learn alot from this tutorial. Enjoy!

Notice: This page is a tutorial mainly for Windows users, and is being thaught in Internet Explorer. Some steps may be different in other Internet Browsers, and different Operating Systems.

Table Of Contents
Chapter 1 | Chapter 2

Chapter 1-Creating an HTML document.
  1. Open a basic text editor such as "Notepad". If you do not know were it is, go to Start Menu, Programs, Accessories, and then there should be an Icon named, "Notepad", click it and open a new document. You should know that the Hyper Text Markup Language, or HTML, is the basic coding language that the internet is built on.
  2. Next you will type the following command at the top of your new
    document.

    <html>



    This command is surrounded by open carrot, and then close carrot marks like these < >. These marks surrounding something means that you are opening a command and it is inside them. The letters inside are the letters "HTML", therefore that is the command. The <html> command is telling the internet browser that this is the beginning of a HTML Document, A.K.A the "Webpage".
  3. The next thing you will do, is go to the bottom of the page in Notepad and type the command.

    <html>

    </html>


    What this does is tell the Browser that this is the end of the HTML Document. The one "Front Slash" makes all the differance. These symbols </your command here> close almost every command in the Hyper Text Markup Language.
  4. Now that you have the document started it's is pretty much like writing a letter. Meaning that when you start a letter you usually have a "head" for the letter right? Well now you are going to type in the command <head> under the <html> command and it should look like the diagram below.

    <html>
    <head>

    </head>

    </html>


    You should know that whatever you put in the <head> section before you close it, will load first before the "BODY" of your document loads. So in the heading of a letter you usually write a "title" right? So that is the next step.
  5. Next you will type the command <title> and after the "title" command you will give your webpage a title. This title will appear in the title bar of your browser on the opening of this Document. The format should look as follows. I will title my page "My Webpage!"Just to be creative. After you type your "title" close the Title first and then the "head". Should look like the one below.

    <html>
    <head>
    <title>My Webpage!</title>
    </head>

    </html>


  6. Save this document to your desktop. You must put the exention (.html) or (.htm), on the filename or else it will save it as a regular text file. Once it is saved you can open your document in Internet Explorer, look at the top of the window in the title bar and notice the "Title" on the website. It should read "My Webpage!", if so you did it right if not then go back and check your commands. They must be in order to work. Click the link below to see the change in the title bar.

    For an example click here.


    You can right click with the right mouse button on almost any web page. When you do that you will get a menu, click on the "View Source" selection. This allows you to see the code that the webpage is made with. You also view the webpage by clicking on that "View" button in the top menu bar and then clicking the "Source" selection.


  7. Did you see the words "My Webpage!" in the title bar of the new Internet Explorer winodw that opened? Good now that you have that we'll move on to the "body". Because every letter and webpage must have a body. Now under the </head> tag you are going to type in the command <body> and then go down to the bottom of the page. Above the </html> tag and type the closing command for the Body. As shown below.

    <html>
    <head>
    <title>My Webpage!</title>
    </head>
    <body>

    </body>
    </html>


  8. Now that you have a body you can give it properties. Like a background color, link color, text color, or background image. You do this by type a property inside the <body> tag. When you type a property command for example background color is bgcolor="ColorName". Lets try putting these to work for us in our page.

    <html>
    <head>
    <title>My Webpage!</title>
    </head>
    <body bgcolor="lightblue" text="darkblue" link="#0000FF" vlink="purple">

    </body>
    </html>


  9. If you save your webpage and open it in Internet Explorer you will now notice that the background is Light Blue, the Text that you can type is Dark Blue, the Link color is Bright Blue (You can also use Hex color numbers for color values), and the Visited Links or vlinks are purple. Now type something in below the <body> tag, and put the tag <H1> before you text and </H1> after your text. This will make the text size be the largest headline text.

    <html>
    <head>
    <title>My Webpage!</title>
    </head>
    <body bgcolor="lightblue" text="darkblue" link="#0000FF" vlink="purple">
    <h1>Soon I will take over the world!</h1>

    </body>
    </html>


    For an example click here.


    For more info on properties you can asign to different parts of the webpage visit the HTML Quick Reference Chart, or click HERE.


  10. Now we will put a Picture and a Link on our page in the next couple steps. And why not center everything while we're at it. First we'll center everything with the <center> command. Now everything writen after the <center> command will be centered unless you close it.

    <html>
    <head>
    <title>My Webpage!</title>
    </head>
    <body bgcolor="lightblue" text="darkblue" link="#0000FF" vlink="purple">
    <center>
    <h1>Soon I will take over the world!</h1>

    </body>
    </html>


  11. After centering everything to add a picture put it in the same folder with you HTML document. Then type in this command where ever you want the picture to so up on your page.
    <img src="FullPictureFileNameHere">
    Let's put that in over the first line of text. By using the <br> command this is just like pressing the Enter key while typing. It moves everything down to the next line in your web page. Put the image command before your first line of text. Then try leaving the <br> command out. You will notice that the image appears exactly to the left of the text. But if you put the <br> command after the image closing command and before the <h1>Soon I will take over the world!</h1> command you will see the image will be centered on the first line before the text. If you want to move it down a couple more lines just add more <br> commands. This is how your code should look now.

  12. Now to add a link to another page on your website.
    <a href="YourPageNameHere">Link To My Other Page.</a>
    This command is similar to the IMG SRC command. Inside the "" After HREF= put need to put the name or path and name to the file you want to link to. For instance most Web Servers look for a page named INDEX.HTM or INDEX.HTML. So if you want the link to point to your homepage and you are in the same folder with your homepage or file name INDEX.HTM then the link would look like this...
    <a href="index.htm">Go to the Homepage.</a>


    <html>
    <head>
    <title>My Webpage!</title>
    </head>
    <body bgcolor="lightblue" text="darkblue" link="#0000FF" vlink="purple">
    <center> <img src="logo.gif"><br>
    <h1>Soon I will take over the world!</h1>

    </body>
    </html>


  13. If you don't have your own picture handy. Click HERE and save this picture file in the same folder with the HTML document. After doing that it should look like this.

    For an example click here.

  14. Ok there you have it you have created your first basic HTML document. Feel free to play around with the code. And change it however you wish. But, come on back for the next chapter. When we learn how to use tables to contain all the information you will be posting on your website.


If you have questions or comments
you can contact us by clicking HERE
OnSite Computer Networking OnSite Computer Repair OnSite Computer/Network Consultation Web Design (PHP, MySQL, HTML, JavaScript) free web page templates, free website templates, free website builders, build free website, create free website, website design, web design, website development, web designers, web development, web design company, web designers, web developers, computer, help, free, technical, support, information, database, hardware, software, advice, news, email, computers, terms, advice, links, how to find your source port, find the source port, source port:, destination port:, find the source and destination port, get computer help, onsite tech support, inhome computer repair, custom web design html bgcolor move from bright to dark color, networking source port,
memory cheat sheet ddr, sources of computer designing, computer for link directory, linkdirectory, port services reference search, magic valley classifieds, lhasa, puppies, source, how to put an image close to the title of a web page, php zip download lhasa apso akc puppies for sale, memory cheat sheet ddr2, party color lhasa, most visited classifieds pets sites in us breeders, notpad picture command, source-port build, source port help, lhasa apso dallas tx breeders, on-site computer service add link port services directory, internet explorer source port, find source port port knowledge, computer port services, center lightblue text, typing something in and it finds the source for you
how to find port of www.yahoo.com, computer port services, source port selection, include the color in the text in a command webpage load source port destination port, center lightblue text, how to make a link to another port html