ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

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 imageAUTHOR


      7 years ago

      Thanks for the input opuswebworks!

    • opuswebworks profile image


      7 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


      7 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 imageAUTHOR


      7 years ago

      Thank you BoyceWeb!

    • profile image


      7 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 

      7 years ago

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

    • forkhyun profile image


      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 imageAUTHOR


      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


      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


      8 years ago from USA

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

    • profile image

      Web Designer 

      8 years ago

      Thank you very much for the post. Very informative.

    • shane_75 profile image


      8 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 imageAUTHOR


      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


      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


      8 years ago from England

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

    • profile image


      8 years ago

      very understandable... tnx

    • apStumbo profile imageAUTHOR


      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


      8 years ago from India

      IN short you explain me very well, Thank you

    • apStumbo profile imageAUTHOR


      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.


    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at:

    Show Details
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the or domains, for performance and efficiency reasons. (Privacy Policy)
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)