Let's start with some tags now.
But before we move on I would like to tell you about another good editor I found in the course of time for creating HTML and CSS Pages.
The editor is Aptana Studio 3.0. You can download this editor from the link below.
Now let's look at the tags.
HTML Headings
HTML heading can be defined with tags <h1> to <h6>.
For Example:-
<html>
<head>
<title>
Sample Webpage
</title>
</head>
<body>
<h1>
Heading 1
</h1>
<h2>
Heading 1
</h2>
<h3>
Heading 1
</h3>
<h4>
Heading 1
</h4>
<h5>
Heading 1
</h5>
<h6>
Heading 1
</h6>
</body>
</html>
<head>
<title>
Sample Webpage
</title>
</head>
<body>
<h1>
Heading 1
</h1>
<h2>
Heading 1
</h2>
<h3>
Heading 1
</h3>
<h4>
Heading 1
</h4>
<h5>
Heading 1
</h5>
<h6>
Heading 1
</h6>
</body>
</html>
See how it looks!
Now it's very important to keep in mind that in HTML there are many tags.
Some tags will be with Opening and Closing pair of Tags and some of them will be alone i.e. without any Closing Tag.
Most of the times the tags are in pair.
I will specify the tags where they don't have Closing Tags.
Paragraphs and Line Breaks
Now let's discuss about writing few things on the webpage.
Normally you can write the contents inside body tag without any other tag.
That will make your contents look weird or monotonous. Again an important thing is that you will not be able format those contents properly. it will be difficult to manage and format those contents. To avoid this problem, HTML has given us many tags.
First important tag in this list is paragraph tag.
It comes with a Pair of Tags
<p></p>
Let's have a look at an example.
<html>
<head>
<title>
Paragraph Demo
</title>
</head>
<body>
<h1>
Heading 1
</h1>
<p>
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.
You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly.
To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template.</p>
<p>
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.
You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly.
To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template.
</p>
</body>
</html>
Now, have a look at it!
Now that we have seen <p> tag we must understand how it works.
All the contents that go inside the <p> tag will ignore all the extra white spaces.
For Example, if write the <p> tag as follows it will produce the same output on browser as that of the previous one.
<p>
You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly.
To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the
Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset
commands so that you can always restore the look of your document to the original contained in your current template.
</p>
<p> tag is designed such that it will ignore all the extra white spaces. If you keep long spaces between words it will automatically convert it to single space.
All adjucent single spaces, tabs and new lines will be converted to single space and will be printed on the browser.
Now, if you explicitly want to print the text on new line what to do?
For this we have Line Break Tag
<br>
This is a tag without closing tag. It can also be written like this
<br/>
You can put this tag anywhere in the page to put a line break.
So this was all for this time.
We will see more new things in the upcoming days.
</html>
Now, have a look at it!
Now that we have seen <p> tag we must understand how it works.
All the contents that go inside the <p> tag will ignore all the extra white spaces.
For Example, if write the <p> tag as follows it will produce the same output on browser as that of the previous one.
<p>
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document.
You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.
You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.
You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly.
Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset
commands so that you can always restore the look of your document to the original contained in your current template.
</p>
<p> tag is designed such that it will ignore all the extra white spaces. If you keep long spaces between words it will automatically convert it to single space.
All adjucent single spaces, tabs and new lines will be converted to single space and will be printed on the browser.
Now, if you explicitly want to print the text on new line what to do?
For this we have Line Break Tag
<br>
This is a tag without closing tag. It can also be written like this
<br/>
You can put this tag anywhere in the page to put a line break.
So this was all for this time.
We will see more new things in the upcoming days.
