HTML is an acronym for Hyper Text Markup Language.
It is also the extension of its own type (.html) (.htm)

This tutorial is for those who know nothing about it at all, or have a breif background of it. For this purpose, we are going to be designing webpages with notepad regardless of the other 3rd party software you can use such as Dreamweaver or Microsoft Frontpage.

Key: Anything explained as (name =) in parenthesis indicates its relating to a parameter. You will see as we move along.

I am going to teach you the basics, so you can possibly expand and design your own webpage. I do say that with this skill of making a webpage, also comes the talent of making images. Here at TN (tutorial ninjas) we have pride in GIMP. A free image manipulation program (aka make images). Tutorials on how to use GIMP are soon to come. For now, lets begin the HTML tutorial.

Part 1: As you already know, HTML is an acronym and a file extension (.html). It also comes as (.htm) which is JUST a file extension meaning hyper text markup. The extension of the file depends on what code your document can process. For instance you can not make a .HTML file and expect it to perform PHP code. For this purpose, I am going to put the meaning of all of the used extensions and acronyms at the end of this post. Please remember for reference.

Tip!
By default, Microsoft Frontpage for instance will use the default file extension of (.htm). As you grow to the language, it may become preference to save your standard html files as (.php).

All parts of a HTML document begin with things called tags. They are expressed between left & right carrots (< and >). All webpage documents begin with <HTML> and end with </HTML>. The trailing “/” in the ending tag tells the preprocessor “im done!”.

Lots of webpage design through notepad, or any designer is common sense. For instance, if you want the background to be a color you say <body bgcolor=”00FF00″>. This gives us a lime green background. Take note when adding extra parameters to a tag, such as bgcolor, we do not close the tag with the extra parameters. Instead we end it with the base name. To close the tag shown above, we use </body>.

Recap:
1. All webpages start with <html> and end with </html>.
2. Head is a required tag. It comes RIGHT after <html> and closes right before <body>. I will explain more about this in the next part.
3. Any tag that contains extra parameters, will end with its base name.

Part 2: Your webpage will have a name. All web pages have names. In the <head> tag, we add our pre tags! For instance Meta tags which will not be mentioned about. Check google for info on a “meta tag generator”.

The <title> tag is included in all webpages, it tells the webbrowser the name of the webpage. The title is a “one liner” tag. Meaning we will start it on one line and end it on the same line, with no other tags!
Ex. <title>Tutorial Ninjas - Sample Webpage!</title>

In most often order, these tags appear in this order: (not all tags need to be used in a single HTML document, this is standard appearance order of them)

  1. <head>
    1. meta
    2. title
    3. link
    4. style
  2. </head>

For more information on pre tags please google the tags listed above. Google is your friend :)

Part 3: The body of your webpage is the source of information. This is the place where you share all of what you want to share with your webpage visitor, hypothetically speaking of course. Not all webpages are made to go on the internet.

After all, I mentioned regardless of what text editor you use to make a webpage, it still makes logic sense. Body… meaning entire structure. This is the “meat” of our page. Less after all these little sayings, these are sub-parts of the body.

In the body (main part of the HTML document), we have things like tables, images, links, new lines, separators, embeds, and many other tags. For the purpose of this tutorial I am going to tell you the basics. In the end of part 3 you should know how to make a simple HTML document. Later, we will provide full examples so you can understand even better.

Tables have many sub-classes. For now, to make a table we type <table>, then make our column and/or rows. To make columns we use the tag <tr>. To put rows in the columns inside of the <tr> tag we put <td>. I know, its sounding choppy, blurry, confusing. Bare with me. It all comes down to applying it. Keep in mind you have MANY parameters that you can use in a table tag! For instance setting the “cellpadding” and “cellspacing” will each render a different appearance. If you do not specify the cellpadding and or spacing it will appear differently than if you added the tag cellpadding=0 instead of not defining it at all. Here, before it becomes clear as mud.. this is how we can make something two columns by two rows.

<table width=”550″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″>
<tr>
<td>This is column 1, row 1. (Top row) </td>
<td>This is column 2, row 1. (Top row) </td>
</tr>
<tr>
<td>This is column 1, row 2. (Bottom row) </td>
<td>This is column 2, row 2. (Bottom row) </td>
</tr>
</table>

Hopefully that example has cleared up about tables. Its all practice and a bit of getting used to. Now we move onto some miniature things.

To display an image in your webpage, we will use the <img> tag. It is very basic!

Tip!
Common sense is part of webdesign. We will be using the “src” parameter which basically says SOURCE. This is where we are getting the image from! Width and height are a standard of almost any HTML tag. A piece of this was already shown in the table example above!

The image tag, very easy. It can easily be shown with the example below:

image tag

This will display a winter Google logo. The source is specifing “where we are getting the image from”. The width and height, althought not really necessairy, are always good to specify. If you noticed the />, this closes the image tag within itself. You are welcome to use the standard method of </img>, but this is simplified.

If your really curious to see the google logo, and because its a holiday season now… this is what happens when we use the following image tag explained in the example.

There it is!

Now that we know how to make images, lets find out how to make an image a link!

First off, the tag for links in general is <a>. This has many parameters, the most commonly used one is (a href=). We also have (a name=) and other nifty ones. For now href is what were most concered about. Here is a simple text example, most likely answering a possibly posing question to you too.

Code:

text link

Renders (becomes):

Click here to go to google.com!

If you apply simple knowledge from image tags, we can make an image a link. For simple means of explanation, anything within the <a> and </a> tag will be linked text. Anything outside of the <a> tag will not be linked! To link our wintery google image above to google, look at the following example.

Code:

image link

Renders:

Click here to go to google!

So there we have covered so far tables, images, links. Now lets move onto some other basics, this in list form.

  • To make text or a table or anything centered/aligned you eather will use (align=), <div>, or <center>.
  • To make a new line you will use the <br> tag. This has no extra parameters as far as I have learned. It does not have an ending tag because it simply means new line. This is commonly referred to as a break. Example: <br />.
  • To make what we call a separator or a line, we use the <hr> tag. This is much like the break, because it has not many parameters and is most often closed within itself. Example: <hr />.
  • An embed (listed earlier) is just what it says. Were going to take an object and embed (put it into) the webpage. For instance a flash element (such as a .swf file). If you are into little web gadgets, games, or anything like that, they use embeds to get them into the page. I strongly advise if you plan on doing this, using some kind of a generator you can find on google. Most often referred to also as an <object> tag.

Other easy to use pre formatted tags such as lists are fun and easy to use. They help organize your information presented in a simple manner.

If you havent noticed already, throughout this tutorial I have been using unordered and ordered information lists. Here is how we make them:

Definitions:

<ul> means unordered list
<ol> means ordered list

The difference is the way the list is displayed. If using an ordered list we are following 1, 2, 3 order. If using an unordered list we are following bullets (there is no order, except in appearance).

To code an ordered list for example, we will start it off with <ol> for ordered list. Inside our ordered list we have list items. These are coded as <li>.

Code:

Ordered list form:

<ol>
<li>This is list item number 1.
<li>This is list item number 2.
<li>This is list item number 3.
</ol>

Unordered list form:

<ul>
<li>This is a list item.
<li>This is another list item.
<li>This is the final list item.
</ul>

Renders:

Ordered list form (appears as):

  1. This is list item number 1.
  2. This is list item number 2.
  3. This is list item number 3.

Unordered list form (appears as):

  • This is a list item.
  • This is another list item.
  • This is the final list item.

There you have your ordered, and unordered list basics.

To quickly sum up what we have learned:

    • The required parts of an HTML document and what effect file extensions have on the document.
    • The header tag, which has many branches.
    • Lots of tags have extra parameters which help us make the look we want to see in our website.
    • Display an image.
    • Link an image, or text.
    • Make a table, columns, and rows with information in them.
    • Display ordered and unordered lists.
    • Extra goodies such as: divs, breaks, and separators.

After these long 3 hours of typing this tutorial, it is now time for myself to go to sleep. It is my duty to teach you about your technologys and what you want to and need to know about them.

Stay tuned for more tutorials coming on Tutorial Ninjas during the month of December, and dont forget to tell your friends about us!

2 Responses to “The Basics of HTML coding”
  1. [...] There are some of the popular computer manufactures logos. Each one has a different marketing scheme, some for and some against their consumers intelligence. Depending on what you want to get for the best bang for the buck is up to you. Now before I ramble on more and more, and make this page longer than my Basics of HTML Coding (JOKING!!!) post, I will start with the beef. [...]

  2. Leon says:

    ha! beat me to it. oh well. i’ll just have to do a programming tutorial on something else then. Dang. HTML is so easy too… argh.

  3.  
Leave a Reply