Skip to main content

The First HTML Document

The First HTML Document

HTML - short for Hyper Text Markup Language - is a markup language. A markup language uses a set of markup tags. In HTML they are markup using HTML tags. So, basically there is a start tag and an end tag. Each tag will have a structure like this:
<starttag>Your contents goes here</starttag>
Your contents will go in between the tags. HTML tags always comes in pairs with few exceptions. Lets take a look at this example and then we'll explain all about the tags.
<!DOCTYPE html>
  <title>Your Title</title>
  <h1>Heading 1</h1>
  <p>This is a paragraph. It can be in <strong>Bold</strong> or <em>emphasis</em>. HTML is cool</p>

Enter the above code in your text editor and save as - say first.html file. Try to identify the tags in the above html document and note them down. Open this file in your browser and you'll see something like this:

 If you have tried to identify the elements then let's break it one by one to you.

  1. The first line is the <!DOCTYPE html> this tag will tell the browser what type of document is being sent. Now, why this? The reason is HTML is now in version 5 - commonly known as HTML5. So, to identify if your site use HTML 1, 2, 3, 4 or 5 you need to declare the <!DOCTYPE html> . In previous version the declaration of DOCTYPE is more complicated and the above declaration is for HTML5. 
  2.  The next line you see the <html> tag and also at the end of the line the </html> . This tells the browser about the start and end of an HTML document. All other tags should be inside the <html>...</html>  tag. When tags are present inside another tag, it is known as nesting
  3.  After that, you'll two prominent tags - <head>...</head> and <body>...</body> tags. The <head>...</head> is the head section, where you can put other tags like the <title>...</title> . Anything that goes inside the <head>...</head> is not visible in your browser except for the title. But you'll include stylesheets, JavaScripts and meta tags there. 
  4.  Inside the <body>...</body> tag, you'll have all your content to be displayed. In the above example you'll see the <h1>...</h1>  which gives the different heading for your html. There is also the <p>...</p> tag which defines a paragraph. By now you'll notice that the  <h1>...</h1> and <p>...</p> tags will create a new line and not joined together as in a sentence. 

Now, we'll introduce you to a new term in HTML called ELEMENT. So, what is an HTML Element? Well, anything between the tags - including the contents inside is called an HTML Element. So, you have the heading element, paragraph element, body element etc. There are two types of elements in HTML - a Block element and an Inline element. Back to the above example, you'll find that the  <strong>...</strong> tag does not break the line to a new paragraph, nor does  <em>...</em> . This is because only block elements will create new paragraph while inline elements will not. Try this second example to see the difference:

Now, go ahead and try to experiment with your new knowledge. Let us know in the comments below if you have any equerries.


Popular posts from this blog

A Simple Login Class Using PHP and MySQL

Login System is always required for any web application that is dynamic. So, this is what actually happened to me. Every website I created, require some form of login system. So, I usually integrate a login system. The problem is that when I update some security features, I've to re-code for all those website. This unique problem, leads me to the creation of this tutorial inspired by the Hashing Security blog.
The idea here is to separate the login system from the rest of the application. The best way to implement this is to use a Login Class and simply integrate the class to any application you design. In this tutorial, I would like to make the login system as secure as possible, hence I would like to ensure a strong encryption of passwords. Now instead of designing my own encryption technique, I'll use a strong and reliable technique described by Crack Station - a Hashing Security blog. Hence before you start download this PasswordHash.php file from GitHub.

This Tutorial …

CSS - Styling your Website

CSS – Cascading Style Sheets is a style sheet language used for describing the look and formatting of a document written in a markup language. A CSS is a flexible way to style your pages. In this way you can concentrate on styling and forget about the contents. While someone in you team will take care in generating the contents. Again here, there are some requirement to learn CSS. They are not that different from those of HTML. Basic knowledge of using a personal computer (like creating folders and files, copy, cut, paste, edit). A basic text editor. All personal computers comes with a text editor (like Notepad for Windows, TextEdit in Mac, gedit in Linux with GNOME etc). You can also use other more advanced text editor if you have like Adobe Dream Weaver, or if you prefer the free ones just search online. But a very basic one will do. A browser – All modern PC will come with a browser in build (internet explorer for Windows, Safari for Mac). You can also download a third party brow…

A Simple Website Counter Script using PHP

Just the other day, I was asked about how to create a website counter script. Mostly the question is for PHP, so, here, instead of directing you to sophisticated scripts - especially for beginners - we'll show you how to do that in a simple and effective way starting from scratch. To solve this problem, you'll need a place to store your data - visitors no - in some place. Then when someone visit your website, just read the value form the old data and increase by 1 then display the value and replace the value in your storage place. First of all, create a file called count.dat. Open your favorite text editor and create a new PHP class for this purpose and a method to handle the data lets call this file counter.php.
class hitCounter { //Set a File Name public $fileName = "count.dat"; public function getHitCount(){ //Read the previous value of counter from file $counter = intval( trim(file_get_contents($this-&gt;fileName)) ); $counter++; //Store the ne…