HTML CODING – 1

Hey People! This my first post about HTML and I will try my best to tell you about it in the easiest and most effective manner.

What is HTML? Is it a language?

HTML stand for Hyper Text Markup Language and is used to create webs pages. All the things you come across on the web, i.e, the internet is in a way related or made up of HTML.

This website you see, is handcrafted using HTML. But yes, there is a lot more to know. One can’t achieve everything just by learning HTML along.

Just like you have to know multiple languages if you are traveling across the continents, other languages like CSS and JavaScript with come along handy with us!
As this being the very first part of this series, let us first get to know how to start creating a web page.
Firstly, I want you all to make it clear that there is a huge difference between a webpage and a website.
A webpage is a .html offline fine and when you host it on the web, it gets a .com or any other such extension which allows worldwide access for all the users across the globe.

Cool, now how to create a page?

To create HTML files, you need a text editor program installed in your device.

For beginners I recommend The basic notepad which comes pre-installed in Microsoft Os. If you really enjoy making web pages and web designing, I would prefer Notepad++ as this is the one which I use and it of course, free to be used. You can download it using the link in the downloads section of this website, or else just click here.

But for this part, as for very novice users, I would consider the regular notepad.

Now that you have a text editor and a mind full of curiosity.
With that being said, let’s get started!

What are Tags? How to use?

Tags are the content holders we use in HTML to create an order or command for the file execution and customization. Tags are fixed words and can’t be changed or shall not be misspelled. But they are not case sensitive.

This means:

  • You can write <HTML> instead of <html> 
  • But you cannot write <htmls> instead of <html>

Examples of tags are: <html>, <body>, <meta> etc.

By the examples, you also come to notice that we use the <> between each and every HTML tag and yes, that is true! Tags are defined by those brackets.

To end a tag, we use front slash ‘/’ to mark an end for the it.

For example, </html> means that the coding ends here and </body> means the end of content inside body of the web page.

Also, HTML files are saved with .html extension. Just as you save your word documents as .docs and text files as .txt; we use .html after the file name.

For example, index.html, first.html, muditjhawar.html are few examples of webpages, un-crafted or un-grouped site pages.

STARTING THE CODE

Start typing the following code: (Don’t just copy-paste it. Typing it on your own is proven to decrease mistakes and helps learn faster.)

<html>
<body>
Hello World!
</body>
</html>

This coding should looks something like the following in you notepad editor:


Now go ahead and save this file. I will save it as: hello.html. You can save it by any other name but add .html after it.

Here is what you should always remember. ADDING .HTML extension every time you code in HTML language.


 Now go and open the save file. You would see a webpage popping up like this (in google chrome):

WoHoo! You’ve got it. This would means that the coding works and there are no errors, temporarily. 😉
If you can’t check back the coding again. Do you closed all the tags? Have you written it properly? Is extension correct? Question your self and I’m sure you would easily discover your mistake.

It would happen a lot! Seriously! Even I have done so many silly mistakes in the past and no doubt, I sometimes still do some.

Next, when you go back to edit the file, you need to go through the following:

  1. Right click on the saved HTML file.
  2. Hover over open with.
  3. Click on Open with tab.
  4. Select Notepad or Notepad++

Because I have Notepad++ installed so it gives me an option to directly edit it with it. If you don’t have it just click on open with and choose notepad. You will see back the screen where you edited before.

Now let us know how to change the Title of the page which is:

To do this, apply the following code:

<html>
<head> <title> TITLE </title> </head>
<body>
Hello World!
</body>
</html>

Why do we use <head> tag here?

It is because there are some important tags that shall be considered to write in the top most section. If you use the coding like this:

<html>
<title> TITLE </title>
<body>
Hello World!
</body>
</html>

There is actually no problem. This would also word the same in this case.

When you save it again, (use ctrl + s to quick save) and open the file. And you see, you can change the title easily.

But it is actually very important to add HEAD tag at professional editing stages.


In the same way you can also change body text too. Just replace the ‘Hello World!’ with any thing you like. Any sentence or even a paragraph, it would work the same.

MORE TO DO…

Now that you have learnt it, go ahead and try some of your own coding. For assignment you can create the following:

  • Create a description of your favorite hobby.
  • Write a paragraph on your family & friends.

If you created one of the above web pages, congrats! You can share them along with me – send me using email at – muditjhawar[at]gmail[dot]com and get featured in the next post.

Subscribe to the blog (use the widget in the sidebar) to make sure you don’t miss any post! Also, share along with your coding buddies!!

By best wishes are with you! 🙂

 

Leave a Reply