Quick Start With HTML

Abhishek Kumar Ravi
10y
3.8k
0
0

Article

Introduction

We will not waste time on the theory portion, instead we will be more focused on the code parts and with the most common tags.

The Hyper Text Markup Language (HTML) is a markup language. HTML is the only language a browser understands.

Software Needed

A Browser
A Text Editor

Note: I ‘m using the Sublime Text Editor, you can use any.

How to Start

Write the code in any editor (Notepad or Sublime).
Save your file with a "htm" extension (such as "anything.htm").
Then browse to that file in a web browser.

Troubleshoot

If you have something like this:

Then correct your file. Because, you haven’t saved your file in hello.htm.
Instead, you have hello.htm.txt.
If you have any problem in opening, then:

Right-click and select "Open With" then select your browser (mine is Firefox).

Basic Layout of HTML

Explanation

This is the basic format of any HTML layout page. Whatever you encode in your HTML, the HTML tags are necessary to start the page. So, it’s better to remember this format.

<!doctype html>

It is just a formal way to start a HTML page, since it tells the browser that the page is encoded in the HTML Language. So, it's better to have the habit of writing this in every HTML page.

<html>… </html>

Whatever your code is, everything is inside this tag. Or, you may say this is a Parent tag.

<head>… </head>

This is the second important tag. But, for now you can skip this tag. In terms of the future perspective you can practice this tag. For now, you just know that this is the only place where external style sheets (CSS) or Scripts are defined.

Within this tag, we declare another important tag, the Title tag, as in the following:

<title>… </title>

This tag defines the Text for the Title bar of that webpage.

Or the text that we see on the browser’s tab.

Next we have a Body tag, that is the most important tag from the design point of view.

<body>….</body>

Whatever you want to be present on the web page is put inside this tag.

Next we will move to the Hello World Program.

The code will be:

We have just added a text within the body tag.

Let’s see what the output will be.

Next, we have a Heading tag as in the following:

<h1> to <h6>

So, add a few more lines as in the following:

And the output will be:

You can now see the change.

<h1> is the biggest heading where <h6> is the smallest one.

Usually, we avoid this for so-called reasons.

Next, we go to the Paragraph <P> tag .

The <P> tag usually moves to the next line with an extra blank line.

And:

Now, you can see the line break after “Hi folks!!” and then we have an extra blank line.

Whereas,

In the Break <Br> tag, there will be a break of the line but there is no extra space within that.

That is what makes the <br> and <p> tags different from each other.

And the output of this is that before moving to other tags, we discuss some properties of the tags.

Every tag must have an opening and closing tag exect for a few independent tags like <p> or <br>.
Tags can have attributes in their opening tags.

We will discuss attributes later in this tutorial.

An Attribute is something that adds some additional information about the tag.

Next we will move to the Image <img> tag. The Image tag inserts an image/picture into your webpage.

Here, Img is the name of the tag whereas src is the name of the attribute that actually points to the name of the image (Jobs.jpg).

Note: this is only possible when the image file and HTML file are in the same folder as in the following:

If everything goes right then you have something like this:

Else, you will have this:

That tells you that you may have an error in the src of the img tag.

To avoid it, ensure you have your HTML file and Image file in the same folder.

Another way of doing this is:

fille:// denotes the local computer and, c://Jobs.jpg the actual path of the image.

If this doesn’t work then try the old way as in the following:

Since it depend upon the browser.

If you have your image on the network or the internet then:

We will now try some text formatting using a few tags. In some books, you saw <b>, <i> and <u> tags are there to make text Bold, Italic and Underline. But now they use <strong> and <em> instead of <b> and <i>.

And then it will look like:

Instead, we can use <b> and <i> as well, but we avoid these for no reason. :D

Comment in HTML

This is an essential feature in any language. So, here in HTML:

<! -- [YOUR COMMENT] -->

As in any other language, comments don’t make any difference in the HTML code.

The output will be:

In this, we have tried to put some comments, like “My Message” and “End of my Lines”.

Generally, we use comments to make others understand what the code is actually doing at that instant.

As said earlier, these lines are not interpreted by the HTML engine.

Next, we will LINK.

(One of the important parts of HTML.)
A Link will link or join two webpages together. By joining we mean, navigating from one webpage to another by a button or hyperlink.

<a href=” [LOCATION]”> [Caption of Link] </a>

So, let’s do this.

Before any explanation, I want to show you the output:

Here, "a" is the Anchor tag and "href" is the hypertext reference that is an attribute.

And this points to the Linking point / path of the web page where you want you want your web page navigate.

So, let’s move to another type of linking.

In this, we link one web page to another as in the following:

Here, Day0.htm is the web page, where it will be navigated to when the "My Page" link is clicked.

(Day1.htm)

(Day2.htm)

So, what happened here?

When we click on the "My Page" link then the HTML engine tells the browser to navigate it to the "Day0.htm" webpage (as written in the href attribute in the <a> tag).
Thus, the browser navigates to the Day0.htm page that is in the same folder.

This is the structure of my folder.

And if you encounter any error in Navigating then check your path.

Now, we are moving to some special tags.

The <table> tag creates a table (matrix).

As you all know, a table has certain columns and rows.

Let’s have an example here:

We will create this table using HTML tags as in the following:

And the output will be like:

We will now discuss the <li> List tag.

There are two type of lists.

One is an ordered list and another is an unordered list.

So, what is ordered listing?

Apple
Microsoft
Google
Facebook

This is an ordered listing where some order (number) is there.

And a sample unordered list is:

Apple
Microsoft
Google
Facebook

Here, the ordering is done by bullets or any symbol.

And the output will be:

I assume you have no problem in the above lines.

So, moving further, we have the <div> tag.

The Div tag is a type of Block tag to act as a container for other HTML tags. Apart from that, it has no special meaning.

Let’s see the output.

And it does nothing in the design. But when we use it in a large project, then it will be a handy tool to organize things well.

Finally, we have a <font> tag.

In the body tag, we defined a new attribute bgcolor (background color) with the HEX value.

(w3schools )

And in the font tag we have color and size attributes.

Note: Don’t get confused by color and colour. In HTML, color is the correct one.

Conclusion

Until now, we covered the basic HTML tags that are in HTML 4. In a later tutorial we will start with CSS and then JavaScript.

Up Next

Ebook Download

View all

Grid structure in css

Read by 1 people

Download Now!

Learn

View all