Hello everyone, today we are going to dive in HTML and We are going to make our very first HTML file with some HTML Tags in it to display some information on our web page in my case I’m using google chrome as my web browser and Sublime Text as my code editor you can choose any browser and a code editor, it is totally up to you guys. So, first of all, let’s install our code editor.

 

Installing Sublime Text:

In order to install sublime text in your computer open the following URL in your web browser https://www.sublimetext.com/ and Then Click on download button present on the website 

First web page #HTML

When the software is successfully downloaded to your computer so then open the downloaded file and install sublime text. After installing the sublime text and then we have to install some extensions in it to make our coding easier and First of all, we are going to install emmet in our code editor and then install any extension/package to sublime text you can follow the following steps

  1. Click on preference in the menu bar.

Menu bar

  1. After that click Package Control located at the very bottom of the preference dropdown menu.

Package control

  1. When you click package control a popup will appear from that popup you have to click on Package Control: Install Package.Install package
  2. When you click on the install package (if you are using a fresh copy of the sublime text it will take some time depending on your internet connection) then a list of packages will be loaded which look’s something like this.

Color scheme

Now we are going to install emmet in our sublime text and then type emmet in the search bar present on the top of the list of extensions list.

Emmet

Click on the emmet which is highlighted on the above screenshot and after this, it will be installed in your sublime text in a few seconds (depending on your internet connection) and Now we are ready to create our first HTML code.

Creating and Saving a new HTML File:

First of all, create a new folder wherever you want in your computer as I created on my desktop you can create it wherever you, it is up to you.

Folder Image

Open your code editor and use this shortcut key CTRL+N (new file) and then do CTRL+S (save file) in windows in mac you could use COMMAND+N and COMMAND+S to save the blank file you just created and When you are going to save your blank file using the save file short key so a popup will appear on you which will look like this.

CTRL+S

Open the folder that you created to save your HTML files and save the file with an extension .html in my case I saved my file named learninghtml.html

Learning html.file

Double click on that file and this will be opened in your web browser and look something like this.

Web page

Now We have to create our basic HTML file structure as we learn in the previous article

HTML Structure code

I suggest you manually type it but only to save your time So, I’ll paste it down below.

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<title>Document</title>

</head>

<body>

</body>

</html>

So first of we have give a title to our web page as you can see in the above screenshot currently web browser is getting our file name and setting it as our page title and we must have to change it otherwise it will do the same thing when we upload this web page to a hosting so in order to change that we have to change the content between title tag which is the nested element of head tag. I’m going to set it as the Main Home Page so let’s change that.

<title>Main Home Page</title>

Now our webpage will look like this.

Title

Now let’s add some content to our webpage and I’m going to add the following items to my webpage 

  1. Heading 
  2. Subheading 
  3. A paragraph
  4. And a hyperLink

Heading And Sub Heading

In order to add the Main Heading, we use <h1> tag which can be used only a single time in a single webpage and there are six types of heading tags.

<h1>,<h2>,<h3>,<h4>,<h5>,<h6>

They have importance according to their number in Ascending Order and that means a smaller number has greater value and the main Heading will go in H1 tag and all other headings present on a webpage will go in h2,h3,h4 and so on. eg.

<h1>This is the Main Heading</h1>

<h2>This is the Subheading</h2>

<h3>Not an important heading</h3>

Paragraph

In HTML we can add a paragraph to our webpage using P tag eg.

<p>This is a sample paragraph for my website</p>

HyperLink

In order to add a Hyperlink in HTML So, we use A tag in which we add an HREF attribute to add the specific URL on click 

<a href=’https://www.facebook.com/itswaeez/’ target=’_blank’>Follow me on facebook</a>

Final Result

After combining all the above code snippet our code will be 

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<title>Main Home Page</title>

</head>

<body>

<h1>This is the Main Heading</h1>

<h2>This is the Subheading</h2>

<h3>Not an important heading</h3>

<p>This is a sample paragraph for my website</p>

<a href=”https://www.facebook.com/itswaeez/”>Follow me on facebook</a>

</body>

</html>

Save that code Using CTRL+S and press F5 in the browser to see the result. The final result in the browser will look like this.

Press F5

What we have learned Today

  1. How to download code editor
  2. How to install extensions to a code editor
  3. How to save HTML files 
  4. What are Heading Tags and how to use them
  5. What are P and A tags 
  6. How to run our HTML code in a browser 

If you don’t understand any part of this article or need some help from me to leave a comment below or contact me using the contact form. And the most important thing is that nothing is impossible. If I can learn this kind of stuff, you can also, just be motivated Thanks.

NOTE

Don’t forget to subscribe to my newsletter and share this article with your friend