ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Internet & the Web

Web Design - HTML Coding Tutorial - Using HTML Code

Updated on November 12, 2011
Flickr photo by Steve Keys
Flickr photo by Steve Keys

Web Design tutorial for HTML Code - Coding Tutorial

There are many out there who are overwhelmed by the prospect of creating their own website. Many believe that creating a website is extremely difficult: this web design tutorial will demonstrate that this is not true.

Although it is true that there are forms of web design that are very complex (and software can be quite expensive), HTML code is both understandable and useful!

Lets get started:

If you are using an HP open up the program called 'Notepad' and if you are using mac open up the program called 'Text Edit' (If you are using 'Text Edit' follow the link at the bottom of the page and follow the few simple steps to set your program for HTML - I promise it is quick and easy)

Next copy the section of HTML code below and save the file as Home.html

<title>Practice HTML</title>
<body bgcolor="blue">
<font color="white">
<h1><center>This is a practice HTML Page</center></h1>
<h2>Different functions that can be done with HTML are:</h2>
<marquee>the 'Marquee'</marquee>
<p><a href="">Links to other website or pages</a><p>
<font color="darkblue"> 'different color fonts'</font><p>
<font color="white"><font face="COMIC SANS MS"> 'different font styles'</font>
<p>Pictures <p><img src="">
<p><font color="white"><center><h3>HTML Pages are a great way for the beginning web-designer to start.<p> Web Design software uses HTML and it is extremely helpful<p> in the long run to understand the basics of HTML.

This is an extremely simple (and tacky) web page, but the HTML code within contains most everything needed to understand basic web design.

The Goal: The goal is to teach you what the HTML that you pasted into your document means and how to use it so that you can create pages of your own.

So lets start the Explanation:


Anything within these symbols <> is HTML code and anything outside is text that will show on the web page.


You will see something like </HTML> throughout the page. The '/' instructs the software to end the code. (If you told it to bold a portion of text <b> but you didn't want the next word to be bold, you would put </b> just before that word.

<HTML> <Head>

These are two standard symbols that you will enter into the top of every web page you design (their function is something that you can study on your own).

<Title> </Title>

Whatever is written within these symbols will be the title of your web page. This will show up in the top bar of your web browser.

<body> </body>

This is the true meat of your web page. Everything else was preliminary, but what is in-between these symbols is the core of your page.

<body bgcolor="blue">

This sets the background color to blue. You can change what is in the quotes to change the color (lightblue, black, #0000FF - you can find different color codes by typing "HTML Color codes" in any search engine)

<Font color="white">

This changes your font color. You can also change what is in these quotes to change the color.


This stands for header. It changes the size of the text. h1 through h7 are different size texts (largest to smallest)

<center> </center>

Whatever is written within these symbols will be centered on the page

<marquee> </marquee>

Whatever appears within these symbols will scroll across the screen. If you search 'HTML Marquee codes' you will see that there are many different ways to have your text, image or link scroll.

<a href=""> </a>

This is code for a link. Whatever URL (or location on your PC) that you put in the quotations will be the location that the link will lead to. Whatever is in-between these symbols will be what appears as the link title.

<font face="COMIC SANS MS">

Font face changes your font style. There are many lists of acceptable font faces online.

<img src="">

This is the code needed to place an image on your website. The simplest way is to put a direct URL link to a picture that you like online within the quotes. If your picture is on your computer you can enter in the location of the picture (/Users/apstumbo/pictures/dad.jpg - this will show the picture titled 'dad' in my 'pictures' folder).


P is for paragraph. This skips a line on your web page. You can put as many consecutive <p><p>'s as you like to space different texts or pictures.

There are also some codes that I didn't use, but are very helpful. Some of these are:

<i></i> - italics

<b></b> - bold

<u></u> - underline

Now you have all of the necessary tools to create a web page! There are many different types of software that enhance the designing experience, but it is important to start with simple HTML coding.


    0 of 8192 characters used
    Post Comment

    • profile image

      Web Vertical Domains 4 years ago

      Nicely described ith easy steps and it is a good material for beginners.

    • Victoria Stephens profile image

      Victoria Stephens 6 years ago from London

      Very informative for the beginner user of HTML. Well written article.x

    • apStumbo profile image

      apStumbo 6 years ago

      Thanks for the input opuswebworks!

    • opuswebworks profile image

      opuswebworks 6 years ago from Oregon USA

      RE: My last comment.

      Oops, the code didn't go through. I was referring to the depreciation of the "marquee" tag. Cheers!

    • opuswebworks profile image

      opuswebworks 6 years ago from Oregon USA

      Nice intro, apStumbo. Just one note:

      the code has been depreciated by W3C, it's not recommended for use in HTML anymore.

    • apStumbo profile image

      apStumbo 6 years ago

      Thank you BoyceWeb!

    • profile image

      BoyceWeb 6 years ago

      A great post, you have made it very clear and concise for people who before would have been very daunted dealing with web 'code'. This post will give them confidence to proceed.

    • profile image

      web desinging 6 years ago

      your site to good .. please add some web desinging videos..

    • forkhyun profile image

      forkhyun 7 years ago from Korea, Canada

      Thank you for your useful info! I also would like to share about how to build a cms website by using wordpress. I found this is quite helpful too. Please check it out here.

    • apStumbo profile image

      apStumbo 7 years ago

      Thank you Web Design Kansas City! That's a fair argument, but I thought it would be better to be thorough.

    • profile image

      Web Design Kansas City 7 years ago

      Great article--it's a good place for a beginner to start learning HTML. Though I would argue that the tag has no place in a good web design :)

    • Tammy L profile image

      Tammy L 7 years ago from Jacksonville, Texas

      Thank you for refreshing my memory on html codes and even teaching me a few new things. I will definitely bookmark this hub. :)

    • Fenixfan profile image

      Jesse James 7 years ago from Crooked Letter State

      Very helpful. If you know much about javascript and flash implementation, I would love reading that also.

    • SubmissionWork profile image

      SubmissionWork 7 years ago from India

      This is certainly helpful for those people who wants to start the web design course.

      But will you please tell us step by step ... what after learning html ?

    • MarieChristine profile image

      MarieChristine 7 years ago from USA

      hey ! Amazing Dude..!! its so simple and easy

    • profile image

      Web Designer 7 years ago

      Thank you very much for the post. Very informative.

    • shane_75 profile image

      shane_75 7 years ago from Murrieta, Ca

      This is easy to understand and quite informative. Great hub!


    • Susan Carter profile image

      Susan Carter 8 years ago

      I'm using a laptop with Vista on it. I did start a new directory and the format of my picture is .jpg but it doesn't work. I tried exactly what you are telling me in your comment, but no success. Thanks anyway. I'm going to try to find someone in my network group who knows HTML and maybe they can figure out why it won't work.

    • apStumbo profile image

      apStumbo 8 years ago

      Thanks Steve Morris and wvector. I am glad to hear that you like it.

      Susan, If it pulls up a red box you have one of two problems. Either your address is wrong or your picture is in the wrong format.

      Address: Since you are not pulling a picture off the internet, your 'address' will look different than the example. Instead of looking like this: , it should look more like this: .

      The way that you find this 'address' depends if you have a mac or a pc. With a mac you go to the picture and right click. Click on 'Get Info' and look at "Where:"

      Mine shows this:/Users/apStumbo/Documents/HubPages/Pictures

      then since my picture is titled 'drew.jpg' I would change it to look like this


      If you are using a pc you should be able to see an address that looks similar to my example above at the top of the folder window. Copy that and add whatever the picture title is (for me it would be drew.jpg)

      It could be that your picture is in the wrong format. If that is the case, try using another picture in another format, or try saving your picture in another format.

      Hope this works!

    • Susan Carter profile image

      Susan Carter 8 years ago

      I can't get the code for adding a picture to work. I followed your example but it's not working. I have my pictures stored on my computer under Documents/HubPages/picture.jpg but all it pulls into my HTML document is a little square box. Can you help me?

    • profile image

      wvector 8 years ago

      very good hub

    • profile image

      Steve Morris 8 years ago

      Great to see someone actually teaching the right way to learn web design. When I was taught at Uni we spent one lesson on hand written code then moved on to Dreamweaver. It is so important to learn code and then use wysiwig editors as a tool to speed up the design process

    • Rickrideshorses profile image

      Rickrideshorses 8 years ago from England

      Really useful hub for HTML newbies like myself. Look forward to hopefully reading more. Cheers

    • profile image

      mappy 8 years ago

      very understandable... tnx

    • apStumbo profile image

      apStumbo 8 years ago

      Thank you PMS9 - Anytime, if you have any questions or want me to elaborate on something, just tell me.

    • PMS9 profile image

      PMS9 8 years ago from India

      IN short you explain me very well, Thank you

    • apStumbo profile image

      apStumbo 8 years ago

      You are welcome. Anytime!

    • Jen's Solitude profile image

      Jen's Solitude 8 years ago from Delaware

      Thank you for making a hub that is easy to understand. I appreciate the information.