Tue, October 15, 2019

Basic HTML Coding

I want to make this series of learning, quick and very practical. You should get a good overview of how to do basic hand coding of web pages. If you need to tweak your own site a little, this series will help you. If you want more help, at the end of each lesson I will place a link to a site or two that offers free in-depth tutorials.

Let’s start . . .

HTML – what is it? It is the language that tells the computer you are setting up a web page. All basic web content starts within this basic structure.

OK, you will have to do something here. If you are on a Windows based computer, go to your START button, click on ALL PROGRAMS, then on ACCESSORIES and open the program called NOTEPAD. I suggest this program for starters because it keeps all formatting of text out and let’s you code by yourself without the program changing things. (If you do not have this program or are on Mac, just find a basic word processing program and make sure you can change the extension or file type.)

In the page that you opened put the text from this graphic. 

basic html sample

You will have to type it, but it is a great way to see how it really works and understand coding better.

After you have done this, go to ‘save file as’ under your file menu. Under save as type, there is a drop down menu where you will want to click on ‘All File Types.” Then, put the title as: test.html or test.htm (the ‘l’ is not necessary)

After you have saved it, do not close this document. Go to your Documents or wherever you saved this file and double click it. You should have a web page. Play with that document by changing something, saving it and refreshing the web page you created.

Here is a break down of what is on the page so you can understand what you are doing:

HTML tell the computer it is a web page.

HEAD is what goes at the top of the page and includes things like background and title.

BODY is where your webpage goes. All text and graphics go here.

H1 means it is a heading. (try H2 or H3, what happens??)

UL is a set up for a list. (What if there are three of these and a line without the UL in front of it?? Remember to put the next line outside of the closing tag.

LI means it is a list item. (Try adding some list items then put one right in the middle without the list item open and close. What happens?

NOTE: Look at the third line. The ‘function’ of TITLE is enclosed in brackets that you may know as the greater than and less than signs.

This tells the computer that you are programming something. The end of that line is has /TITLE. The slash tell the computer that the programming is finished with that section. Everything has a / to close it, except BR and HR tags. Put them on your page and see what they do between the less than and greater than brackets. You may want to put three or four BR tags. And make sure you put them all in the BODY section.

We will expand the basics a bit on Lesson Two

Share This :

Twitter Delicious Facebook Digg Stumbleupon Favorites More

Comments are closed.


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