The Basics of Coding - What You Should Know

Before we get right into the code there are some key concepts you must remember while coding.

First of all let's define the acronym HTML so we know what it's all about.

What is HTML ?

HTML stands for Hypertext Markup Language. Simply put, it is the coding language of the internet. It is a language used to format pages on the world wide web and also to create pages for the world wide web.

Now here are a few key notes:

Saving Your Webpage

A very common question from new beginners is "How do I see my work in the web browser ?". It is such an important requirement whenever you write any piece of code and want to see the results. The answer is simple. You have to save it !

HTML files are saved with the extension ".html". For example, if you wanted to save a html document as webpage1 and you were using the notepad editor you would navigate to file and then to the save as area where you would enter webpage1.html. The internet file extension .html is recognised as an internet file and as such when you click to open that file your web browser will open. The file is read by the browser and the content displayed.

It is important to note that when you save your files and open them they are NOT on the internet even though they appear to be. They are saved on your computer just as any other file. Your browser is able to read the internet files you create without the internet. To find out how you can upload your content to the internet view the Web Tips section.

So what does this mean ? Simply, there is absolutely no need for the internet at all.

Demonstrated below are the step by step instructions for saving your file. Remember if you have any problems I would be happy to help ! Feel free to contact me regarding this or any other issues you may have by using the Contact feature on this website.

Saving your html document

Step 1:
Navigate to File (a menu option in notepad) and click it. From the drop down you now see click Save As.

Step 2:
Enter a file name (in this case the name of my file will be webpage1) and attach the .html extension.

Step 3:
Change the Save As Type field to All Files.

Step 4:
Choose the location (folder) to which you wish your html file to be saved.

Step 5:
Save your work.

Step 6:
Locate the folder you saved your file in. Open it. Here you will see your saved file.

Mandatory Tags

The mandatory tags refer to those which are found in every html document. When you start coding in notepad ensure that you always start with the opening <html> tag. The html tag defines your html document. Every html document also has a <head> tag and a <body> tag which are very important and also mandatory. The head tag contains the <title> tag and may also contain style sheet definitions (discussed in CSS). The title tag displays the title/heading of your webpage. To locate the title of your webpage look at the very top of your browser window. The title of this webpage if you look is "The Basics of Coding". Finally, the body tag contains all the content that will be displayed.

Sounds pretty simple right ? If you feel flustered not to worry you will get it soon enough. For now just take note to ensure that your HTML documents follow this general format. I've laid it out for you, take a look:


<html>
   <head> <---- head tag which contains the title and any css definitions
      <title> My First Web Page </title> <---- title of your webpage
   </head>
  
  <body>
	 This is where I will write the content of my webpage. 
  </body>
</html>

Click to see the result of the above code

Note: Every HTML document must have a head and a body. Every openinig tag must also have a coresponding closing tag.

In the previous lesson all these tags were listed as Important Tags in the Tags Table and indeed they are so. Every website you can possibly think of contains these tags and hence you may consider them to be mandatory.

Every HTML document you create from now on should contain these important tags. You can copy the code snippet or write it out yourself into a new notepad text file and save it as you learnt. You should see the same result.

Note: As we progress through each tutorial you will observe various code snippets. These snippets do not contain the important tags previously discussed but when you are coding they must be included and are necessary. They were omitted so that your focus will be directed to the area being discussed in the snippet.

The Tag Issue

Now another key point to remember is that all opened tags should have a corresponding closing tag. These tags should also be closed in the order they were opened to avoid issues. If you observe the code snippet above you would have noticed that the html, head, title and body tags each have a opening tag and a closing tag. As soon as you are finished with a tag, close it. Forgetting to close your tags can represent your content incorrectly and confuse browsers. Closing each tag in the order they were opened also avoids this confusion. Here is a example to make things clear:

<p><em><strong> Remember to close all tags in the correct order </strong></em></p>

In the above snippet the tags are closed in the corect order. The tag <strong> was opened first so it was closed first. The tag <em> was opened second so it was closed second and so on. The tag closest to the text is the one we consider to be opened first. Follow this format and you'll be "Good to Go !".

As a web programmer you will love the idea of experimenting and trying new stuff. You may try omiting the closing tags or closing tags in the wrong order. Everything may still be displayed just as you expect it to. If you however plan on actually uploading your website you may consider validating your code. Validation pinpoints little errors and raises awareness about improper coding. Closing tags incorrectly is often times one of the most common errors. Even though it may appear ok from your browser it may look entirely different on someone else's. For reasons such as this it is good practise to adapt the strategy of closing the tags in the correct order.

Depreciated Tags

HTML is a web language. Just like english it has certain constructs that are already defined for use. If you recall, tags and attributes help to customize the appearance of a webpage. There are a number of tags and attributes that you will come across which can be considered to be outdated/depreciated by the latest HTML standards. By HTML standards I mean the internationally accepted rules that conform to the HTML language.

The main point is that because of these standards some tags and attributes are now seldomly used. Reference may be made of them and you can still use them. However, the tutorials will as best as possible try to avoid certain tags and attributes because of this.

An example of a tag you may come across which is now outdated (in HTML 4.01):

<font color="blue"> Font is a tag not accepted in HTML 4.01. </font>

The <font> tag is usually used to specify the color, size and font type for text. It is depreciated in HTML 4.01. It is recommended that you use CSS styles to format text. Not to worry the tutorials in CSS have got you covered on this.

Web Gramatics

Ever heard someone say to you "Speak Properly !". Well in HTML you are required to spell certain words properly. There are certain tags and attributes that should only be spelt a certain way in order to be understood. In some countries the spelling of one word may differ from the american version of the same word. An example would be the word colour . The american spelling of the same word is color and this is the accepted spelling of the color attribute in html. If it is spelt as it was in the first instance you would not see a result. The key note here is that when coding be mindful that you use the american spelling for your tags and attributes.

Practise Excercise

Copy the following code into a new notepad text document and save it as a html file named practise. After you have done this, find the location of the file you saved and open it.

<html> 
   <head>
      <title> Practise Excercise </title>
   </head>
	
   <body> 
	This practise excercise was taken from the New2HTML.com Tutorial.  
   </body>
</html>

Now practise writing the mandatory html tags on your own and writing whatever content you want!

Now that you have an understanding of all the basics to keep in mind, lets continue with our lesson. Click the Next Lesson link below to continue to the HTML Headings section.

Previous Lesson - Tags, Elements & Attributes Next Lesson - Headings