HTML Basics

Hello guys…! This is the second tutorial of Web Development tutorials pack. Shall we start our journey to be a web developer? Okay, you may have heard about so many languages that should to be learned by a web developer. But believe me guys, we don’t need all of them to develop websites. We just need a few of those languages to develop websites. Actually, there are only two languages you MUST LEARN to develop a basic, eye catching and professional website. Those languages are HTML and CSS. With these two languages, we can develop a website easily. And also those are the most fundamental languages in the Web Development concern. Means, we can learn them without putting much effort. So today, I will start the tutorial with HTML Basics.

(In this tutorial, I will use HTML5)

HTML Tags

HTML elements are the main components of an HTML document. These elements are represented by  Tags. Almost all the tags come in pairs which we call Start Tag (opening tag) and End Tag (closing tag). But, there are few tags in HTML don’t have a end tag. They can be closed in the start tag.  Since these element have no content, we call them Empty Tags.

Let me explain the difference between start tags, end tags and empty tags. All of them are enclosed within angle braces. There are no any other special case when representing a start tag. But when you represent an end tag, you should put a forward slash (/) after the opening angle brace and before the tag name. To represent a empty tag, you should add a space as well as a forward slash after the tag name. Please see following examples.

(Although, HTML5 doesn’t need to close tags, it’s a good practice to close all the tags you have opened in an html document. And also these tags are not case sensitive. But usually, we use lowercase)

Examples for

  • Start Tags : <p>, <html>, <strong>, <body>
  • End Tags : </p>, </html>, </strong>, </body>
  • Empty Tags : <br />, <hr />

HTML Declaration

HTML Declaration should be done in the first line of your html document. It represents the document type and it helps browser to identify the html version. You can do the HTML5 declaration as follows.

<!DOCTYTPE html>

Extensions of an HTML document.

When you save an HTML document, you can use html or htm as the extension. See the following examples of html document names. Both of them are correct.

  • index.html
  • index.htm

Basic Structure of HTML document

Generally, all the HTML documents have the following structure.

<!DOCTYPE html>
<html>
   <head>
      <title></title>
   </head>
   <body>
   </body>
</html>

You can see the declaration first.(You have already learned about HTML declaration). After the declaration, you can see the <html> tag. It is used to say the browser “This is an HTML document”. Then the <head> tag. We can put the page title, meta details, styles and some other details into <head> and </head> tags. You can see <title> tags have already been added and we can put a page title between those <title> and </title>. You will learn about other thing that we can put into the <head> tags in the future tutorials. And finally you can see the <body> and </body> tags. Between these tags, you can put any content you want to display in the browser.

My first HTML document

If you are a newbie to HTML, I recommend  you to use a text editor like notepad to start your Web Developer Dream. Definitely, it will make you a better web developer who knows basic practices of HTML very well. Okay… Open your favorite text editor and start to type following code. (Use TAB key in your keyboard to add indentations as in the following example. Believe me, Adding indentations is a good practice. For an HTML document of few tags may not want these indentations. But think about an HTML document which have hundreds of tags and hundreds of lines. If you hadn’t use indentation in such a huge HTML document, definitely you will mess up when you want to find out where the end tag of a particular start tag.)

<!DOCTYPE html>
<html>
   <head>
      <title>My First HTML Document</title>
   </head>
   <body> 
      <h1>Hello World</h1>
   </body>
</html>

Ok. Now save it as an html document (Remember the file extension should be html or htm). And then open the document in a web browser (Sometimes you will be able to open the document in a browser by double clicking on the html file. But sometimes you will have to open the document in a browser by using this method : right click on the html file -> Select Open with -> Select the browser you want). That is the homework for this week and the result should be as follows.

 

I think that’s enough for today. The third article of this web development tutorials pack will be published on next Tuesday.

Do not hesitate to use the comment area below. Put your suggestions and ask your questions there. And If you think this tutorial is valuable, please share this with your friends and I request you to subscribe Aiten Tutorials.

Leave a Reply

Your email address will not be published. Required fields are marked *