HTML Tutorial #2 - Basics of HTML

Hello All,

In our last tutorial we saw the HTML Tutorial #1 -Overview of HTML. In this, we are going to see the basics of HTML Let’s start.

 HTML Documents:

All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

<!DOCTYPE html>
<html>
<body>

  <h1>My First Heading</h1>
  <p>My first paragraph. </p>

</body>
</html>

The <!DOCTYPE> declaration represents the document type and helps browsers to display web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case sensitive.

 

HTML Heading Tags:

Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.

<h1> defines the most important heading. <h6> defines the least important heading:

Example:

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>

Output:

This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6

 

HTML Paragraph Tag:

HTML paragraphs are defined with the <p> tag:

Example:

<body>

      <p>Here is a first paragraph of text. </p>

      <p>Here is a second paragraph of text. </p>

      <p>Here is a third paragraph of text. </p>

</body>

 

Output:

Here is a first paragraph of text. Here is a second paragraph of text. Here is a third paragraph of text.

 

Line Break Tag:

Whenever you use the <br /> element, anything following it starts from the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them.

Example:

   <body>

      <p>Hello<br />

         Welcome to everyone. <br />

         Thanks<br />

         Team. </p>

   </body>

 

Output:

Hello Welcome to everyone. Thanks Team.

 

Centering Content:

You can use <center> tag to put any content in the center of the page or any table cell.

Example:

   <body>

      <p>This text is not in the center. </p>

      <center>

         <p>This text is in the center. </p>

      </center>

   </body>

 

Output:

This text is not in the center. This text is in the center.

 

Horizontal Lines:

Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly.

Example:

   <body>

      <p>This is paragraph one and should be on top</p>

      <hr />

      <p>This is paragraph two and should be at bottom</p>

   </body>

 

Output:

This is paragraph one and should be on top This is paragraph two and should be at bottom

HTML Links:

HTML links are defined with the <a> tag:

The link's destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements.

This href attribute is used to redirect to some other page / URL.

Example:

<a href=" https://techtoknow-webdevelopment.blogspot.com">This is a link</a>

Output:

This is a link

 

HTML Images:

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as attributes:

Example:

<img src="techtoknow-webdevelopment.blogspot.jpg" alt="techtoknow-webdevelopment.blogspot.com" width="104" height="142">

Output:

Please practice the above learnings using any text editor and see your achievements in any of the browsers (chrome, edge, Firefox) 👍👍

Open the saved HTML file in browsers and right-click in the HTML page and select "View Page Source" (in Chrome) or "View Source" (in Edge), or similar in other browsers. This will open a window containing the HTML source code of the page. 

We will see the HTML Elements, Attributes & Styles in our next tutorial – HTML Elements & Attributes.