Beginners guide to HTML

Introduction: 

Ajax as a concept is more of interactive web development and these concepts exist much before it was first coined. With the introduction of advance internet more and more application needs in order to connect to the Internet to provide users with more room for conversation as well as progress of ideas that needs to be conceived by different users in different circumstances. It provides easier ground for web masters to create a space where a particular theme can provide static html inclusions to give examples. With the introduction of iFrame in HTML format web developers can now easily create newer elements inside same static page contents. This provides web masters for a nice collection of different set of internet connectivity where users can browse the web easily effortlessly. Ajax is very easy and with notepad one can write codes with decent knowledge about HTML, XML and HTML. There is no need for an integrated development environment (IDE) to write the ajax code as there is nothing to be compiled after jotting down in code. It is one such brilliant and wonderful part of coding anyone with basic knowledge can write down and find a fair amount of information from it. HTML is easy and there are plenty of online resources in internet where enormous amount of HTML examples is laying there and from there one can learn more about it. In this article, I will try to show you about how to go about HTML which is a requirement for developing ideas of ajax.

Hello World: 

Download “Windows Live writer” and open it in the source code and it is the mode in which one can analyze and define coding. We will start with the basic principle of coding.

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


List tags: 

Here the expression “Hello World” and it will be seen by the user, and it is enclosed with html begin and end tag. “Hello World” will be seen in the body segment so it is better to include beginning and ending of the body tag. Though many have pleaded that HTML gives way to unnecessary coding and there is no need for the body section but it is the way one can learn in detail how the code process works. Next we will go for a slightly complex algorithm of creating a simple list with my favorite cricket players and all these will be shown in bullet-points. Here, is the code and first you should understand the progress of code. Each segment start with and end with the same parameter.

<html>
<head>
<title>My Favorite Cricketers</title>
</head>
<body>
<ul>
<li>Sachin</li>
<li>Virat</li>
<li>Pujara</li>
<li>Dravid</li>
<li>Dhoni</li>
<li>Dhawan</li>
<li>Ravi jadeja</li>
<li>Varun aron</li>
</ul>
</body>
</html>


Bullet points (ol tags:) 

Html begins and ends with html, then the body begins and ends with the body and then the title of heading begins with the title and ends with the title tag and in between comes the name of title “My favorite cricketers”. Then title stays within head tags which begin and end. Then body part begins, which also ends at some point. List units start with “li” and end with and in between the name of a favorite cricket players. The heading might not be seen to outside and the visible part of coding is the body part and the contents which stays at body parts remains visible to user. “ul” tag is used to define unordered lists and it is used in a number of list tags, if “ul” tag is not used then the list tags could be seen in disorderly way. It is a bright idea to use “ul” tag just after the body tag and just before List tag. “ul” tag is used for bullet points of lists. If you want to use numbered bullet points then simply change the “ul” tag to “ol” tag. Entire names of cricketers in list tags under body segment will be seen with numbers. Here, is the change of code with “ol” tags.

<html>
<head>
<title>My Favorite Cricketers</title>
</head>
<body>
<ol>
<li>Sachin</li>
<li>Virat</li>
<li>Pujara</li>
<li>Dravid</li>
<li>Dhoni</li>
<li>Dhawan</li>
<li>Ravi jadeja</li>
<li>Varun aron</li>
</ol>
</body>
</html>

UL tags: 

Place this code in “Windows Live Writer” and change view section of it from the source to edit or preview to see bullet numbered in action. “ol” tags shows ordered lists and once you learn a bit of HTML, you will soon find out how to differentiate these settings according to demand of developer’s standard. In the above code the title element will not be visible in most cases, and this creates fundamentally different aspect as in many situations you need to show heading , sub heading to differentiate different elements within an article to give a perfect representation of coding side. By using h1 to h6 tags we could insert titles inside of web pages with ease and this will give one of perfect presentation of coding and also this will bring closer to ajax set-up. First to observe this code, most of its tags have been explained and the newer ones will be explained in this paragraph.

<html>
<head>
<title>My Favorite Cricketers</title>
</head>
<body>
<h1>A List of my favorite Cricketers</h1>
<h2>Batters:</h2>
<ul>
<li>Sachin</li>
<li>Dravid</li>
<li>Kohli</li>
</ul>
<h2>Bowlers:</h2>
<ul>
<li>Ravi jadeja</li>
<li>Varun Aron</li>
<li>Umesh Yadav</li>
<li>Amit Mishra</li>
<li>Ishanta Sharma</li>
</ul>
</body>
</html>


Understanding of codes: 

Contents of the title tag are not visible in normal document inside a web browser, but contents of h1 to h6 tags are detectable in normal web-browsers. Title under h1 tag “A list of my favorite cricketers” will be seen in a web browser with prominent. H1 tag begins and ends and then sub heading is within h2 tags and the content of sub heading remains within h2 tag and h2 tag end after sub heading ends there. Here two sub heading h2 tag namely “batters” and “bowlers” are visible and all these can be seen with lesser sizes but more prominent that list-names. It is a very interesting as well as comprehendible understanding of writing coding to become code Jockey. HTML is a powerful language but it runs with tags and decoration of the HTML language is very difficult as designing within HTML tags can be tedious. This leads to the introduction of “Cascading Style Sheets” (CSS). It gives power to the developer to control codes and create dynamic web -presence. It gives color to black and white HTML. In CSS, you need two different approaches to style one are the scope of styling and the other, is the selector.

Conclusion: 

First, you need to determine which part of the page you need to make styling and for this it is essential to define the selector. Here, the name of the tag is the selector and it has more functions than HTML tags have. In the next segment, we will learn about basics of CSS. It is a continuing process.

Related Post

This entry was posted in Computer Information Technology and tagged , , , , on by .

About Mohan Manohar Mekap

Mohan Manohar is a blogger from India who founded Ittech back in 2007. He is passionate about all things tech and knows the Internet and computers like the back of his hand.