It is not common that a website will be made purely of Hypertext Markup Language (HTML). This does not mean that HTML does not have a place on the world wide web. HTML is the consistent variable across all websites, being a language that most browsers can understand. Learning HTML as a foundation to website development is a good idea. Having an understanding of how the language works and how it differs to other website languages is a must. Before we start to dive into the language, we must first realize the differences between ‘server-side’ and client-side languages.

Server-side Languages 
A server-side programming language is one that runs on the server that holds all the website files. The server processes information depending on the input and serves up a website made of client side languages. The server sends the client-side code to the internet browser such as Google Chrome, Firefox or regrettably Internet Explorer. Server-side languages play an important part in the web, they allow the website to process data without leaking that data to the internet. Most websites have a database that stores sensitive information. To connect to the dataset, we use several checks and balances, such as password authentication and IP address authentication. So, the database will allow a connection and start severing data is the password is correct and the request is coming from a known IP address. Serving this data to a client’s browser would make password authentication useless. Therefore, client side languages, such as PHP, Java and Ruby serve two purposes.

  • Processing information so the client does not have to
  • Retrieving data from a database securely

Client-side Languages
After the web server has done its processing, it serves the website to the client’s browser. This website is now in human readable form and usually consists of three different languages, HTML, CSS and JavaScript. The website’s browser can interpret these languages and have an understanding of what the webmaster intended this particular page to look like. The browser represented the webmaster’s intention on the screen for the client. Because this code is now on the client’s computer, they have the ability to read through it, taking out any information that the server has presented them with. This can be extremely useful for a webmaster to debug their code, or it could be deviating for a webmaster that has not been careful in planning what their code should do.

Now that we have an understanding of the difference between client-side and server-side languages, we cannot begin to understand what HTML is. HTML is made up of pre-defined tags that are opened and closed. They can be opened and closed in the same tag, or they can be closed later on in the code. The very first tag that must be defined in your page is the <html> tag. This tag is then closed at the end of the website with its corresponding </html> tag. Please take note of the difference between the two tags, this is extremely important in HTML. The send tag that we need to define is the <head> tag and then the <body>.

Your HTML document should now look like this:

<html>
      <head>
      </head>

      <body>
      </body>
</html>

Inside the <head> and <body> tag goes your entire website. The <head> will consist of any links to style sheets and JavaScript. It will contain the website meta information such as meta descriptions and titles. The <head> will usually contain the navigation, depending on your planned layout and the website’s logo. The <body> tag will contain the rest of your website.

Inside each of these tags will be a number of other HTML tags. There are thousands of different HTML tags and all of them are easily found on the internet. A post that discusses how to use each of them is not plausible, therefore I will go through and explain just the most common HTML tags. This will give you an understanding of how to use these tags, along with an understanding of the HTML language. Once you are confident that you can use these tags, you will be able to move onto learning CSS and JavaScript.

HTML <div> Tag
Your website will be made up of several different sections. You may have a blog and for each post you have a title, a body and an image. Each of these different elements will need to have their own division. However, divisions can be nested in each other. So, the body of your article may have a &lt;div> tag inside it for the image. The image has its own <div> tag applied so it can be manipulated differently. This scenario would like a little like this:

<html>
      <head>
      </head>

      <body>
            <div>The title would go here</div>
            <div>The body may go here</div>
            </div>
      </body>
</html>

Note: The image <div> is before the body <div> closes. This is because the image is nested inside the body of the article.

HTML headings
Heading levels are present in any formatted text and HTML is no different. We need to level our headings because it gives the reader an understanding of its important and hierarchy in the article. When we are developing a website, we need to think about software that may be reading our website, such as the Google spider. Naturally, we want our website to be indexed and rank well in search engines. However, software is stupid, it has no logic like humans do. A human may be able to read your article and understand how important a paragraph is, but software cannot. To overcome this, we use heading levels, such as <h1> for heading level one and <h2> for heading level two. On our website partial, we will want the title of our article to be a heading level one, it would look like this.

<html>
      <head>
      </head>

      <body>
            <div><h1>The title of my article</h1></div>
            <div>The body may go here</div>
            </div>
      </body>
</html>

Note: The <h1> tags are nested inside the <div> that has been defined for the header. The <h1> tag is then closed with its corresponding </h1> tag.

HTML Tables
Defining a table in HTML is one of the most useful things that you can do. Tables can be used to store your menu items to display data in a logical format. An HTML table consists of several different elements, table rows, header cells and standard cells. Each of these elements is recognized across all five of the commonly used web browsers.

Firstly, a table must be defined with the <table> tags. Inside the table comes a table row, which is defined by the <tr> tags. In the row are either header cells or standard cells. Usually, you will have a header cell at the start of each table row and then standard cells below it. A two row table may look like this:

<html>
<table>
<tr>
      <th>Row one heading</th>
      <td>Row one standard cell</td>
</tr>
<tr>
      <th>Row two heading</th>
      <td>Row two standard cell</td>
</tr>
</table>

</html>

These are just a couple of many HTML tags that you can play with and use in your projects. All this can be written using notepad or a text editor such as Programmer’s Notepad and Notepad++. Playing with HTML is the best way to learn and using some CSS to enhancing the look or your website is also an excellent way to learn both languages. It is important when learning these two languages that you do not stress about knowing all the tags and syntax fluently. Getting stuck into a project and understanding how you would solve a problem is all you ever need to know.

Anchor tag
The anchor tag is how we navigate around the internet. The anchor tag is accompanied with a href attribute, telling the web browser where the hyperlink should point to. The opening <a href="yourURL.com"> is followed by the text that you want to anchor. This text can be anything, however, it is common practice to make this text meaningful. Remember, we are not just writing for humans, we are also writing for software that does not know what ‘click here’ is referring to. By giving the anchor tag some meaningful text, we are telling Google spiders how the page we are linking to relates to the one that we are linking from. An anchor tag to example.com with the text ‘example’ would look like this:

<a href="http://example.com">example</a>

Note the closing </a> at the end of the text. IF we omit this closing tag, we will hyperlink the rest of the page.

An <a> tag can have a number of other attributes defines within it, before the href attribute. The most common of these attribute is rel, where you would define nofollow. The nofollow attribute tells search engines that you are linking to this website, but you should not use my link towards their authority. You may be linking to a website because they have a horrible website and you do not want this to mean you are vouching for them to the search engines. You can do this with nofollow. An anchor tag with a nofollow attribute would look like this:

<a rel="nofollow" href="http://example.com">example</a>

Tips for using HTML

  • Use CSS to give your <div> tags a splash of color. By doing this, you will be able to see exactly where they are and how they fit with the other elements on your page.
  • Plan a page with a pencil and paper and challenge yourself to make a web page that looks like your template. Use all the tools you have at your disposal, including Google.
  • Think about what humans will be reading your page and what software may be crawling your page. Design a friendly navigation system for both these clients.
SHARE
Previous articleHow to encrypt text files with Notepad++
Next articleThe OSI model explained in simple terms
I love technology, solving problems and helping others solve problems. My blog is designed to entertain and educate, both myself and my reader.