HTML Basic Elements

Computer Applications class 10 – HTML Basic Tags

HTML Computer Applications 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. 

    1. HTML Basic tags
    2. Terms related to HTML
      1. Tag or Element
      2. Attribute
      3. Value
      4. HTML tag structure
    3. The <html> tag
      1. dir attribute
      2. lang attribute
    4. The <head> tag
    5. The <title> tag
    6. The <body> tag
      1. background attribute
      2. bgcolor attribute
      3. text attribute
      4. link attribute
      5. alink attribute
      6. vlink attribute
    7. The <br> tag

HTML Basic 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. 

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, script 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
The title tag in 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:
    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 to display a background image with this attribute. 
    4. You must ensure that the text color and background image color 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

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
html bgcolor attribute 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
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>
Output
br tag in HTML
code without br tag in 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>
Output
use of br tag in HTML
use of br tag in HTML

1 thought on “HTML Basic Elements”

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

Comment Your Views

%d bloggers like this: