Welcome To HTML Tutorials : Introduction : Lesson 1

Welcome to the first lesson of HTML and CSS Tutorial program. I’ve tried to make this series as brief as possible. This does not mean that I’ll miss any part, I’ll cover each and every concept of HTML and CSS. All the points in these tutorials are important, for better understanding try not to miss any line.

HTML, Hypertext Markup Language, is a set codes that includes attributes to create online web pages. Basically HTML is made up of 2 things :

1. Tags : Performs a unique operation.
2. Attributes : Gives extra functionality to tags.

We’ll deal with a lot of tags and attributes in future lessons and the concept will be clear to you.

Understanding HTML tags and how they are written

As told above, tags are used to perform a unique operation like creating hyperlinks, adding images and videos to a web page etc. There are 2 types of tags :

  1. Paired
  2. Non Paired

Paired Tags : It includes both opening and closing tag. For example

Tag :

<h1> Heading 1 </h1>

Output :

Heading1

<H1> is called opening tag and </H1> is called closing tag.

Note : To start every HTML tag we should write it in between <> ( <> is called diamond brackets or cone brackets or chevrons ). So a tag should always be inside chevrons.

Non-Paired Tags : It only includes opening tags and does not have any closing tag.

This was just an overview we’ll learn about all the tags in detail in the next lesson.

Understanding HTML attributes and how they are written

As told above, attributes adds extra functionality to tags. Lets take the same example again, above we used H1 tag, if we want to put our heading in the center of the page we will add a center attribute to the H1 tag.

Tag

<H1 align=”center”> Heading1 </h1>

Output

Heading1

So, the align center attribute added extra function to H1 tag by placing it to center. In this way we can change the heading color and style also. These were the basics of tags and attributes, now we’ll learn about some tips on these tags and attributes.

Some tips while writing tags and attributes

1. You should write opening and closing tags together, so that you do not forget to close the tag.

2. Always try to write the codes more conveniently so that it is easy to read and understand. Here are 2 examples for you that will help you in understanding this point :

HTML codes that are hard to understand

<html><head><title>Gagan</title></head><body><h1>How are you</h1></body></html>

Same HTML codes that are easy to understand

<html>

<head>

<title> Gagan </title>

</head>

<body>

<h1>How are you</h1>

</body>

</html>

3. When we write tag inside a tag its called Nesting. For example :

<H1> <b> Gagan </b> </H1>

4. During nesting, the tag that starts first, ends last.

5. While writing attributes, always use double or single quotes. For example :

<H1 align=center> Heading1 </h1>

6. The attributes can come in any order we want but the element should come at the first position. For example :

<H1 align=”center”> Heading1 </h1>

In the above example H1 is the element tag and should always come at first position followed by attributes. You can add as many attributes you want after the element tag, but taking into consideration all the rules discussed above.

That’s all for now, in the next lesson I’ll tell you about various HTML editors, browsers and how to start our first HTML document.

Related Posts via Categories

31 Comments

  1. Hey nice tutorial Gagan and I would love to see more CSS tutorials here.. because I’m confused with CSS in many parts ! :D

    Cheers !

  2. aR says:

    I wish to learn html. Think you can help me. I will keep an eye to you.

  3. alok says:

    this is going to be very useful thread…..

  4. Shafar says:

    Very useful for the beginners! :)

  5. [...] posted here: Welcome To HTML Tutorials : Introduction : Lesson 1 | BeepTheGeek Share and [...]

  6. vbb says:

    Good start..will love to see myself mastering CSS with your tutorials one day.

  7. Rajeel says:

    Hey Gagan,

    It’s a great tutorial.We are hoping more such tutorials from you.I hope that his series will go on ………….. ,won’t it ?

  8. Bapun says:

    Looking forward for more. Would be a great series of tutorials to follow ;)

  9. Navjot Singh says:

    A Suggestion, try using Some syntax highlighter plugin for WordPress, it formats the HTML code nice, makes it easier to copy for the newbies and its highlighting the code makes html more understandable.

  10. Clemento says:

    I added your blog to bookmarks. And i’ll read your articles more often!

  11. Dreamgirl says:

    Thanks for this introduction Gagan!
    Since I know NOTHING about HTML I’m so glad you start out from scratch! I’ll follow you and hopefully I’ll learn more during the next couple of weeks!

    Have a great summer!

  12. Jacki Alcorn says:

    Thanks for this tutorial. I am looking forward to the next one.

  13. Mike says:

    Thank you Gagan, this is a great resource and very helpful. Looking forward to the next tutorial.

  14. Nice tutorial mate..
    Publish it as ebook too at the last mate..
    Thanks

  15. stella says:

    hello, thank you for the tutorial :)
    i’m waiting :D

  16. Nice and easy tutorial. I know HTML as I studied it in skl. Would subscribe to the feeds and see how the CSS tutorial are!!

  17. afandi says:

    Thanks for the lesson. I will learn from you, hope I will understand HTML more.

  18. Pras says:

    Nice introduction, bro..
    Usefull for a beginner like me..and I’m waiting for the next.

  19. Pras says:

    Big thanks for the tutorial, bro..Very usefull for a beginner like me. I’m looking forward for the next. Good job.

  20. Nihar says:

    Great Tutorial dude. It will be very helpful for starters.

  21. frosty says:

    Nice tutorials … Keep posting .. Waiting for next one !!

  22. Wow. This is perfect for this beginning nitwit.

  23. sunsail says:

    I’m sorry, but I think I missed the obvious. What is an example of a non-paired tag???

  24. free tutorial.. i like this blog.. keep blogging

  25. Nomar says:

    Great, i am on to lesson 2

  26. ZaaRz says:

    im looking forward to ur next lesson… :)

  27. Man I always hate coding..Thanks to this basic tutorial ..Atleast I’m reading them and understanding them..
    I use it all the time but never tried learning or understanding them..
    I hope to see more insight on next tutorials….

    A list on Most used attributes and Tags will also be very useful and helpful.

  28. Great tutorial for begineers thanks for sharing

  29. [...] HTML Tutorial Series via Beep the Geek. HTML is the most basic part of structuring web pages. You’ll need to understand a little HTML and the logic behind it if you want to move up to CSS and PHP and some other stuff I don’t pretend to know a lot about. You’ll be surprised by how much you can fake it if you know a little HTML. [...]

Leave a Reply