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.
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 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:
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).
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.
If you want to know more values for lang attribute click here.
The <head> tag
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.
<html> <head> <title> HTML basic tags </title> </head> <body> Main content of the page goes here. </body> </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:
The background attribute is used to apply or change the background image of your webpage.
<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:
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 to display a background image with this attribute.
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.
The image extension must be provided with your file name.
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>
html bgcolor attribute output
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.
<html> <head> <title>Background Color Demo</title> </head> <body bgcolor="blue" text="white"> Your contents goes here. </html>
text attribute of body tag
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.
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.
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>
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>