ADVERTISEMENTS
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 :
- Paired
- 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.
If you like this post, you will love these :
- Starting With Five Structure HTML Tags : Lesson 3
- HTML Editors, Internet Browsers and W3C : Lesson 2
- All HTML Tags And Attributes : Lesson 4 Part1
- All HTML Tags And Attributes : Lesson 4 Part2
- Essential HTML And CSS Training Program For New Bloggers : Exclusive Tutorials On BeepTheGeek
Gaganpreet Singh on August 2, 2009 | Filed Under Series
Welcome to
{ 2 trackbacks }
{ 29 comments… read them below or add one }
Hey nice tutorial Gagan and I would love to see more CSS tutorials here.. because I’m confused with CSS in many parts !
Cheers !
u made it very simple
I wish to learn html. Think you can help me. I will keep an eye to you.
this is going to be very useful thread…..
Very useful for the beginners!
Good start..will love to see myself mastering CSS with your tutorials one day.
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 ?
Looking forward for more. Would be a great series of tutorials to follow
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.
Hi Nahjot,
thanks for the suggestion. I’ll install the plugin and edit this post…
I added your blog to bookmarks. And i’ll read your articles more often!
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!
Thanks for this tutorial. I am looking forward to the next one.
Thank you Gagan, this is a great resource and very helpful. Looking forward to the next tutorial.
Nice tutorial mate..
Publish it as ebook too at the last mate..
Thanks
hello, thank you for the tutorial
i’m waiting
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!!
Thanks for the lesson. I will learn from you, hope I will understand HTML more.
Nice introduction, bro..
Usefull for a beginner like me..and I’m waiting for the next.
Big thanks for the tutorial, bro..Very usefull for a beginner like me. I’m looking forward for the next. Good job.
Great Tutorial dude. It will be very helpful for starters.
Nice tutorials … Keep posting .. Waiting for next one !!
Wow. This is perfect for this beginning nitwit.
I’m sorry, but I think I missed the obvious. What is an example of a non-paired tag???
free tutorial.. i like this blog.. keep blogging
Great, i am on to lesson 2
im looking forward to ur next lesson…
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.
Great tutorial for begineers thanks for sharing