Introduction to HTML

Introduction to HTML, getting started for the first chapter in the HTML series.

Navneet Vyas
30 January 2018 | Navneet Vyas
   

Welcome

We are starting this new series for those people who really don’t know even about the basics of web designing and they want to create their own website. For those who really want to learn HTML, this series will briefly help you through that, so that you can start creating your own website.

HTML is a very simple language to work with and there is no complicated programming logic behind it. All it requires is a bit of typing and creativity to get started.

What is HTML?

HTML is a language that is used for creating and designing web pages. HTML is easy to learn and you will enjoy it. The HTML stands for Hyper Text Markup Language, which was invented by Tim Berners-Lee in 1989 in CERN, the European Laboratory for Particle Physics in Geneva, Switzerland.

So this was a short introduction to HTML. Now we will start exploring it.

How to create an HTML file for your first webpage?

Here is a simple process to create an HTML file:

  1. Choose a text editor to work
  2. Write and save your HTML file with a .html extension
  3. Open the file on your web browser

In step 1 choose a friendly text editor to work. The text editor which I prefer the most is Notepad++ because it is free and got tons of features, best for HTML work, you can download Notepad++ by clicking here. You can also use other text editors as you like.

So after selecting the text editor. Open it and write something like this

Example pic

Step 2 save this file with filename.html this .html extension show that the file is of HTML type.

save

Step 3 Now you can view this HTML page by opening it in with a web browser, like Chrome or Firefox. And the result would be something like this:

page

So this is all about the environment setup to work with HTML files.

Now we will start with some cool stuff.

How to actually write a web page in HTML?

Here is a sample code of a normal html page:

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

This is a normal syntax or procedure to write an HTML code. In HTML all the elements of a web page are represented by tags.

Let’s study each of above in brief.

Here the first line we see is <!DOCTYPE>. This is not an HTML tag in particular, but an instruction to the web browser about the version of HTML and here we are using HTML5 so we write <!DOCTYPE html>. Its declaration is not case sensitive and it must appear once at the top position of the page.

The next tag is <html> this tag is the root tag of an HTML page. This tag shows that from here your HTML code starts.

Then we have <head> tag, which is called as the Head section of your HTML page which will contain all the meta information or the website related information like the title of a page, the styling of page and all the links of fonts etc are written in this head section which we will study in detail later.

The next tag is <body> which is called as the Body the web page itself which contain all the elements which are visible on your web page in this section we define all the elements like headings, buttons, paragraph and much more which we will study it further.

But…

What about these </head> , </body> and </html> tag?

So at the start of this article, we studied that HTML is a Markup Laguage so everything you write is structured with these HTML tags <>, and these HTML tags are ended with the / sign like this </> this tag so is used to end any tag so we end the head, body and HTML section by these tags </head>, </body> and </html> respectively. And the other example is <button> and </button> which we are about to study in the next article.

So this is all about the introduction to HTML. From the next posts, we will study about head and body section in brief and also some different tags of HTML, their uses and how they work with some practical examples.

Please comment down below if you have any issue and share as much as you like.




       
outboxcraft logoOutboxcraft
Sitemap