Web Design - HTML Coding Tutorial - Using HTML Code

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

<Html>
<Head>
<title>Practice HTML</title>
</head>
<body>
<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>
</font>
<p><a href="http://hubpages.com/technology/Basic-Web-Design-Using-HTML">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="http://www.arspublik.com/images/2009/11/stars-born-public-domain-p.jpg">
<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.
</body>
</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.

<h1>

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>

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.

More by this Author


Comments 28 comments

Jen's Solitude profile image

Jen's Solitude 6 years ago from Delaware

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


apStumbo profile image

apStumbo 6 years ago Author

You are welcome. Anytime!


PMS9 profile image

PMS9 6 years ago from India

IN short you explain me very well, Thank you


apStumbo profile image

apStumbo 6 years ago Author

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


mappy 6 years ago

very understandable... tnx


Rickrideshorses profile image

Rickrideshorses 6 years ago from England

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


Steve Morris 6 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


wvector 6 years ago

very good hub


Susan Carter profile image

Susan Carter 6 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?


apStumbo profile image

apStumbo 6 years ago Author

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

/Users/apStumbo/Documents/HubPages/Pictures/drew.jpg

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 6 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.


shane_75 profile image

shane_75 6 years ago from Murrieta, Ca

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

~Shane


Web Designer 6 years ago

Thank you very much for the post. Very informative.


MarieChristine profile image

MarieChristine 6 years ago from USA

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


SubmissionWork profile image

SubmissionWork 6 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 ?


Fenixfan profile image

Fenixfan 6 years ago from Mississippi

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


Tammy L profile image

Tammy L 6 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. :)


Web Design Kansas City 5 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 :)


apStumbo profile image

apStumbo 5 years ago Author

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


forkhyun profile image

forkhyun 5 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.

http://e4a20buiy7ah-o7r-duexjey62.hop.clickbank.ne...


web desinging 5 years ago

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


BoyceWeb 5 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.


apStumbo profile image

apStumbo 5 years ago Author

Thank you BoyceWeb!


opuswebworks profile image

opuswebworks 5 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.


opuswebworks profile image

opuswebworks 5 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!


apStumbo profile image

apStumbo 5 years ago Author

Thanks for the input opuswebworks!


Victoria Stephens profile image

Victoria Stephens 4 years ago from London

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


Web Vertical Domains 2 years ago

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

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working