HTML TUTORIAL



HTML tags


The tags are used for fomatting the text. Tags generally come in pairs - like <i> and like <i>. The tags tell how to format the text. Let us take a look at the example once again.

<html>
<head>
<title>Reference Designer Title </title>
</head>
<body>
My first html Page.<i>This text is italics</i>
</body>
</html>


The text between the <i> and </i> tags will be displayed in a italics font.



We will now take a look at some basic tags.


Headings


Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.

An extra blank line is automatically added before and after a heading.
<html>

<head>
<title>Understanding Header </title>
</head>

<h1> This is header h1 </h1>
<h2> This is header h2 </h2>
<h3> This is header h3 </h3>
<h6> This is smallest header h6 </h6>

</html>

If you want to experiment more, you can follow this example here

Example - Understanding headers

Paragraphs


Paragraphs are defined with <p> and </p> tags. An extra blank line is automatically added before and after the pair of the paragrapgh tag.

<html>
<head>
<title>Understanding Paragraphs </title>
</head>

<p>This is the first paragraph </p>
<p>This is second Paragraph. </p>
<p>You can also write a paragraph without a closing tag. 

<p> However, it is not a recommended practice. </p>
</html>


It is highly recommended that you keep the tags closed and paired. This is because of the XML that you will learn later and for keeping your page future safe and also to keep your code understandable.

you can follow this example here

Example - Understanding Paragraphs

Line Breaks

Line Breaks are defined with <br /> tags. The line breaks will break a line and start printing the text following it in a new line.

If you give two line breaks - it is equivalent to break the line and insert a blank line.



<html>
<head>
<title>Understanding Line breaks </title>
</head>
<p>This is the 1st line. This line is broken here <br /> and a 
next line starts </p>
<p> You can also insert two line breaks <br /> <br /> 
which is equivalent to breaking the existing line and inserting a new line.</p>
<p> A line break can also be inserted using <br> in place of <br /> 
Both are equivalent </p>


You will see some people use <br> in place od <br />. The two are interchangeable. There are no opening and closing tags for line breaks. It does not make sense.

To make your html future proof, you may however, like to use the <br /> type of line break

Try practising line breaks by making the changes in the example here

Example - Line Breaks

Comments

There is often instance when you will like to make a part of you html just for comments. A comment tag is used for this purpose. A comment will be ignored by the browser. Comments help you understand your code better at a later stage.

<p>This page explains the use of comments </p>
<!-- This is a comment -->
<p> A comment is ignored by browser </p>



A comment starts with <!-- and ends with -->. Note that there is a exclamation mark at the start of the comment but not at the end of the comment.

. Try this example here

Example - Comments