Web Design - HTML Coding Tutorial - Using HTML Code
By apStumbo
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://apstumbo.hubpages.com/hub/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.
 | Amazon Price: $53.99 List Price: $80.25 |
 | Amazon Price: $45.00 |
 | Amazon Price: $21.33 List Price: $44.99 |
 | Amazon Price: $21.86 List Price: $34.99 |
<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.
Comments
You are welcome. Anytime!
IN short you explain me very well, Thank you
Thank you PMS9 - Anytime, if you have any questions or want me to elaborate on something, just tell me.
very understandable... tnx
Really useful hub for HTML newbies like myself. Look forward to hopefully reading more. Cheers
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
very good hub
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?
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!
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.
This is easy to understand and quite informative. Great hub!
~Shane
Thank you very much for the post. Very informative.
hey ! Amazing Dude..!! its so simple and easy
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 ?
Very helpful. If you know much about javascript and flash implementation, I would love reading that also.
Thank you for refreshing my memory on html codes and even teaching me a few new things. I will definitely bookmark this hub. :)
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 :)
Thank you Web Design Kansas City! Thats a fair argument, but I thought it would be better to be thorough.
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.
your site to good .. please add some web desinging videos..
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.
Thank you BoyceWeb!
Nice intro, apStumbo. Just one note:
the code has been depreciated by W3C, it's not recommended for use in HTML anymore.
RE: My last comment.
Oops, the code didn't go through. I was referring to the depreciation of the "marquee" tag. Cheers!
Thanks for the input opuswebworks!
Very informative for the beginner user of HTML. Well written article.x
Jen's Solitude 2 years ago
Thank you for making a hub that is easy to understand. I appreciate the information.