HTML Tutorials : 1 | Create first webpage


Introduction

Today we are going to start learning html. HTML(hyper text markup language) is simple markup language that works in web browsers to display our content according to the markup tag. It is not a programming language but understandable by the all famous web browsers such as Chrome, Firefox, Opera and Safari.

All the websites has html tags to display the content in browser. Different type of content is placed between the suitable tag for it. For example if we want to show heading html, we will place our heading content in h1, h2, h3 or h4. Similarly "p" tag is used for paragraph as it is represented by letter "p". We will discuss further tags in upcoming tutorials.

As we have discussed in previous post about IDE. So we are going to use vscode for the whole series.

First Step

First of all create a folder name as html in your desktop.

After that open vscode in your system. The welcome screen will be look like as follows.

vscode welcome screen

As we can see that there is an option for "Open folder". Click on Open folder and browse to that html folder we've just created in desktop. Select that folder and open it in code editor.

Second step

Here we are going to create new file as index.html in the working folder. There are 3 option to do this. In the following picture you will see three white rectangles where we can create new file.

new file screen

  1. First option is in main screen as 'New file'.
  2. Second option is at the right next to the working folder.
  3. Third option will be dropdown when you right click in the folder area.

Keep in mind to have .html extension to help browser to read file. Because web browsers understand html files and show them.

Let's create new file and write the following code in it and save it in the work folder.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>My First HTML file</title> 
</head> 
<body> 
</body> 
</html>

This is very basic and initial structure of any web page. We will understand this code. A web browser read any file in sequence from top to bottom. So in the first line we are telling the browser that what type of file is this. After reading "<!DOCTYPE html>" browser will know that it is html file to read and display. After that we initiate html tag and set language to English by using "lang" attribute. All the code will be in the html tag. In this main tag, there are two most important tags as "<head>" and "<body>". Our web page information, such as css files and other meta information will be in head tag and the content that will be displayed in our web browser will be in body tag.

When we save this file with .html extension, we will see there is a default browser icon that will indicate that this file will be displayed in browser. Open this file in browser and you will see blank white screen in browser. Because we haven't write anything in "<body>" tag. Let's add a welcome paragraph in body.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My First HTML file</title>
</head>
<body>
    <h1>welcome to xeeratech.com</h1>
</body>
</html>

Third Step

Save this file and refresh the browser. Yooo there is a welcome message in browser.

index file output

As you can see that we have write welcome message in "h1" tag. This is because of "h1" tag that the text is very large in size. We have seen the different out put of all headings. Now add the following headings and save the file.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My First HTML file</title>
</head>
<body>
    <h1>Welcome to xeeratech.</h1>
    <h2>Welcome to xeeratech.</h2>
    <h3>Welcome to xeeratech.</h3>
    <h4>Welcome to xeeratech.</h4>
    <h5>Welcome to xeeratech.</h5>
    <h6>Welcome to xeeratech.</h6>
</body>
</html>

The above file will be displayed as follows in our browser.

all headings preview

The difference is clear in all the heading tags. We can use heading tag according to our requirement. Sometimes we need big heading and sometimes we use smaller headings as sub heading.

In this way we can write our html file using required tags. Now we will write code for to display a demo paragraph and insert an image in our web page.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My First HTML file</title>
</head>
<body>
    <h1>Welcome to xeeratech.</h1>
    <img src="https://images.unsplash.com/photo-1444464666168-49d633b86797?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=749&q=80" alt="nature image" width="300" height="150">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>

The above code will be displayed in browser as in bellow image.

different tags in file

This is the power of html. As you can see that there is no any tag displayed in browser. Actually tags are only for to tell browser that how the data will be displayed. We have use "<img src="" />" tag to display an image and paste the image path in "src" attribute.

So we have created very basic and initial web page using some tags. In the next post we will learn about html tags and their different types.

Hope this post is very useful and help you to learn html. We will share regular post to learn coding in coming days. Do subscribe to our newsletter and stay up to date.


Tipu

about the author

Tipu is web developer from Pakistan. He is very talented in developing websites in wordpress and multiple frameworks in php.

other posts by Tipu
View all Posts By Tipu

No Comments Yet!

Leave a Comment  

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