In this article, you will learn about the Basic HTML Elements Class 10 for the computer application subject. Let’s begin!
Topics Covered
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 <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:
-
- The image must be copied into the same folder where you want to save your HTML file.
- Write an image name with an extension. Check the properties of the image to view the extension.
- All browsers did not support displaying a background image with this attribute.
- 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.
- The image extension must be provided with your file name.
bgcolor
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
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
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>
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.
[…] Dear Reader, when you are going to join any institute or company or organization or any online website subscription, you have to do registration first. In previous articles, we have discussed images in HTML, Lists in HTML, HTML formatting Tags, HTML basic elements. […]