Quick Start With HTML

Abhishek Kumar Ravi
Dec 16, 2019

12.4k
0
0
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

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 HyperText 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 an "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 the 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 an 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 on every HTML page.

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

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:

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.

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:

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 except 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 depends 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 of 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 to want your web page to 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.