Tue, October 15, 2019

Basic HTML Coding (part 2)

If you did not do lesson one, you may be a bit confused.

You should already have a document set up. You will want to open your text document. Right click on test.htm, “open with,” “notepad.” It should look like this or whatever parts you changed.

basic html sample

We are going to take the next step of programming, but skipping some ‘old school’ programming and going right to some things that will make since on your pages you will be working with. We are going to work with STYLE to change how our web page looks: background and text, plus we will include some graphics and links.

Are you ready??

(STYLE tags are already programmed with the closed tags /BODY and /P.  Don’t forget to close all tags by putting a slash on anything that you add.)

Go to the BODY  line and make it look like this:

Go to one of your the P lines and make it look like this:

What happened when you saved it and looked at it as a web page? (Remember to save it everytime you change ANYTHING!)

Play with these tags:

What happens if you change 20px to 10px or 30px?
What happens when you change arial to courier or times?
What happens when you change white to yellow or red to blue?

Here are the basics for this kind of coding. You must separate elements with a semincolon (;). You must have an equals (=) after style and you much have all the definitions between quote marks (“).

Now you may want something centered, the easiest way is just to put the tags of CENTER and /CENTER surrounding the section you want centered. Or you can put it in the  function like this:

You can even center you heading like this:

OK, let’s try a link:

If you changed the color of your background, you may want to change it back to white so you can see the link well.

‘A’ means anchor and ‘HREF’ means reference point which is the webpage that you want to access. Don’t forget to close the tag with or you may create your whole page as a link. The words or image between your A HREF and /A tags, is your link.

Many programs will do this for you, but if you know how it works you can tweak your page to be the way you want it. Make sure to include the ‘http://’ unless you are accessing something from the same folder taht your webpage is in.

Let’s move on to graphics . .For now, we will access a grapic online at feedburner.com (By the way, if you have not signed up for FeedBurner do it and subscribe to us!)

Did you see the graphic on your page? Images do not need a close tag because you are just accessing a graphic.

‘IMG’ is the image. ‘SRC’ is the source or where to get it. It is pretty simple overall.

Try a graphic from your computer. You will need to find a simple graphic and make sure it is in the same folder as your test.htm. Make sure you know what kind of graphic it is, like gif or jpg. Put the name and type between the quote marks (img src=“example.jpg”) where example.jpg is the name and file type on your computer.

Watch out, you may need to have example.JPG or .gif or .GIF. Upper and lower case are important.

What happens if you put the image tag in the middle of your link tags?

If you do this, you may want to tweak the image programming a little bit like this: 

The border is set at zero because you may not want a border on your link which a lot of browsers automatically create. If you want a thick border make the number larger.

As you can see, you can change the width and height by adjusting the numbers.  However, you can just use the height and it should keep the ratio of the graphic.  It is helpful if you want a graphic to be a specific size.

By the way, the sizes are based on pixel.  Your computer screen is made of pixels. 100 means 100 picels high. 

If you want more help on HTML coding, go to this web page: http://www.w3schools.com/html/default.asp

They have online tutorials for every part of html. They even have interactive codes that you can change on their page and see what happens. I would suggest inserting the code on your page that you created and working from there because that will give you a better understanding of coding. If you use their page only, you may not know how it actually fits on a page.

Work your way through their tutorials using your page and you will become a pro in no time.

I hope these couple of articles gave you a good start on your journey towards hand coding your own pages. I am always amazed as to what can happen when teens learn to code. The whole world online opens up. You were created to create: it is in your ‘code.’

Share This :

Twitter Delicious Facebook Digg Stumbleupon Favorites More


  1. Teen Business Central » Blog Archive » Basic HTML Coding

Related Posts


Photos on flickr


Listen to this song that
Idiosyncratic Al did for us:


He is 21, so that is close enough to a teen to be on this page!

Quotes and Tweets