Comprehensive notes Basic HTML Elements Class 10

In this article, you will learn about the Basic HTML Elements Class 10 for the computer application subject. Let’s begin!

Basic HTML Elements Class 10

 
Basic HTML Elements Class 10
Basic HTML Elements Class 10

You have learned HTML basic, how to create a static webpage using HTML in the previous chapter.  In this chapter, you will learn HTML basic tags and formatting tags. 

HTML Basic Elements or Tags

Before starting with this topic explore the following basic terms associated with HTML.

 

Terms related to HTML

Tag or Element 

The HTML command is known as tag or element. It is written within angular brackets. For example, <HTML>, <Head>, <title> etc. 

 

Attribute

 
An attribute is a property name that adds more functionality to the content enclosed within a tag. The attribute is written next to the tag name. 
 
 

Value

Value refers to the property value which can be applied to the attribute of an HTML element. Value must be provided next to attribute with equals to (=) sign. Then written into double quotes.  
 

HTML Tag structure

An HTML tag written in the proper manner with its attributes and values is called an HTML tag structure. 
Ex. <body bgcolor=”blue”>
 
In the above example body is tag, bgcolor is attribute and “blue” is value. Every HTML tag starts with an angular bracket then tag name, then attribute (if required) then value. 
 

In the next section of Basic HTML Elements Class 10, we will discuss some basic tags. 

The <HTML> tag

This is main tag of HTML document. Every HTML code starts with <HTML> and ends with </HTML>. Then developer can write the entire code in between <HTML> and </HTML>. It tells the browser that the document is an HTML document. Along with HTML tag following attributes can be used:
 

dir Attribute

This tag specifies the direction of the text in the document. It can be either left to right or right to left. The values can be ltr (left-to-right) or rtl (right-to-left).
 
For example, 
<HTML dir="ltr">

LANG Attribute

It specifies the language used in HTML document. Mostly the value is the first two initial letters of the language used in the web page. 
 
For example,
<HTML lang="fr">
If you want to know more values for lang attribute click here.
 

The <head>  tag

It defines the head section of the HTML web page. It consists of the header information such as the title of the webpage, scripts like javascript or VBScript, styles used in the document, and description tags. This tag has no attribute. 
 

The <title> tag

It displays the title of your webpage on the title bar. It plays an important role to crawl your webpage by Google or any other search engine. The title must be descriptive, unique, and short for each document. 
For example,
<html>
<head>
<title> HTML basic tags </title>
</head>
<body>
Main content of the page goes here.
</body>
</html>
Output
The title tag in HTML - HTML Basic elements class 10
The title tag in HTML

The <body> tag

It is the main area where the user’s content will be displayed on the web page. Each and every content like text, lists, tables, images, audio, video, frames, etc. will be inserted between <html> and </html>. This element has the following attributes:
 

Background

The background attribute is used to apply or change the background image of your webpage. 
 
For example,
<html>
<head>
</head>
<body background="back-img.jpg">
Your contents goes here.
</html>
 
When you are using an image as background following points should be taken care of:
    1. The image must be copied into the same folder where you want to save your HTML file.
    2. Write an image name with an extension. Check the properties of the image to view the extension.
    3. All browsers did not support displaying a background image with this attribute. 
    4. You must ensure that the text colour and background image colour should be used in such a way that the user can read the text properly. 
    5. The image extension must be provided with your file name. 

bgcolor

html bgcolor attribute output
html bgcolor attribute output


This attribute is also related to the background color of the webpage. The value can be any color name or color code. The color code is made up of the hexadecimal code with #rrggbb format. You can use the color code for light or dark color combinations. Let’s have look on this code:
 
Note: The hexadecimal code is using 0 to 9 digits and A to F letters such as #0011DD.
<html>
<head>
<title>Background Color Demo</title>
</head>
<body bgcolor="blue">
Your contents goes here.
</html>

Output

html bgcolor attribute output (1)
html bgcolor attribute output (1)
 

Text

This attribute changes the color of text written into the webpage. The text which is not a part of any other element or formatting styles can be displayed with the given color. 
 
For example,
<html>
<head>
<title>Background Color Demo</title>
</head>
<body bgcolor="blue" text="white">
Your contents goes here.
</html>
Output
text attribute of body tag
text attribute of body tag
 

link

This attribute is used to change the color of the link text in the web page. The detailed explanation I will cover in the anchor tag section later. By default it is blue. 
 

alink

This attribute is used to change the color of an active link text. Active links are those link which is in use currently. When you click on the link and press the mouse on the link this color is displayed on the text.
 

vlink

This attribute changes the color of the visited link text. By default the visited link color is purple. 
 

The <br> Tag

HTML does not print the text as it is you write in the text editor. Suppose you want to print 5 lines in different lines, but HTML print all the contents in the same line up to the width of your browser. So if you want break the line you have to use <br> tag. br means  Break. It breaks your line and starts a new line from the next letter. Have a look at the following code and browser output:
 
<html>
<head>
<title>br demo</title>
</head>
<body>
This is my webpage.
I have created my web page using HTML.
Learning web page designing is quite interetring.
</html>
<html>
<head>
<title>br demo</title>
</head>
<body>
This is my webpage.
<br>
I have created my web page using HTML.
<br>
Learning web page designing is quite interetring.
</html>
use of br tag in HTML
use of br tag in HTML

That’s all from basic HTML elements class 10. I hope you enjoyed this article. If you have any doubts or queries feel free to ask in the comment section.

1 thought on “Comprehensive notes Basic HTML Elements Class 10”

  1. Pingback: The complete guide - HTML Forms for CBSE class 10 Computer Applications - TutorialAICSIP Computer Applications

Comment Your Views

%d bloggers like this: