Table of Contents
Tags
Before discussing about all the basic tags of HTML5, we should know that there are two types of tags in HTML and they are open tag and closed tag. Closed tags are those which can contain content in it, example, <p> </p>, <strong> </strong>, so it defines start and end of its content. Unlike closed tag, open tag does not contain any content, example, <br>, <hr> etc.
To understand all the basic tags of HTML, let us have an example …
<!DOCTYPE html> <!-- This tag identifies the code as 'HTML5' to the browser --> <html> <head> <title>Livedu HTML5 Tutorial</title> </head> <body> This is my First Page </body> </html>
let us save the file as index.html in a folder, as I have shown below …
After saving the, the file will look like this, in your folder. See the file takes the default browser’s icon of your system like mine (firefox).
Double click on the file, then browser will open and it will show the following output.
HTML Tag
Though It is not necessary to write the code for an HTML page between <HTML> and </HTML>, but for good practice we will use <HTML> . Think of tags as talking to the browser or, better still, giving it instructions. What you have just told the browser is ‘this is the start of an HTML document’ (<HTML>) and ‘this is the end of an HTML document’ (</HTML>). Now you need to put some matter in between these two markers.
Every HTML document is segregated into a HEAD and BODY. The information about the document is kept within <HEAD> tag, like meta data, scripts etc. The BODY contains the page content.
TITLE Tag
The only thing you have to concern yourselves with in the HEAD tag (for now) is the TITLE tag .Here the document has been given the title ‘Livedu HTML5 Tutorial’. It is a good practice to give a title to the document created.
What we have made here is a skeleton HTML document. This is the minimum required information for a web document and all web documents should contain these basic components. Secondly, the document title is what appears at the very top of the browser window.
BODY Tag
If you have a head, you need a body. All the content to be displayed on the web page has to be written within the body tag. So whether text, headlines, textbox, checkbox or any other possible content, everything to be displayed must be kept within the BODY tag.
Whenever you make a change to your document, just save it and hit the Reload/Refresh button on your browser. In some instances just hitting the Reload/Refresh button doesn’t quite work. In that case hit Reload/Refresh while holding down the SHIFT key.
Let us now look at tags in more detail. A <TAG> tells the browser to do something. An ATTRIBUTE goes inside the <TAG> and tells the browser how to do it. A tag can have several attributes. Tags can also have default attributes. The default value is a value that the browser assumes if you have not told it otherwise. A good example is the font size. The default font size is 3. If you say nothing the size attribute of the font tag will be taken to have the value 3.
The BODY tag has following attributes:
- BGCOLOUR: It can be used for changing the background color of the page. By default the background color is white.
- BACKGROUND: It is used for specifying the image to be displayed in the background of the page.
- LINK: It indicates the color of the hyperlinks, which have not been visited or clicked on.
- ALINK: It indicates the color of the active hyperlink. An active link is the one on which the mouse button is pressed.
- VLINK: It indicates the color of the hyperlinks after the mouse is clicked on it.
- TEXT: It is used for specifying the color of the text displayed on the page.
Consider the following example:
<!DOCTYPE html> <!-- This tag identifies the code as 'HTML5' to the browser --> <html> <head> <title>Livedu HTML5 Tutorial</title> </head> <body BGCOLOR="#1234567" TEXT =#FF0000> This is my First Page </body> </html>
Output
The values specified for BGCOLOR and TEXT tags indicate the color of the background of the page and that of the text respectively. These are specified in hexadecimal format. The range of allowable values in this format is from “#000000” to “#FFFFFF”. The“#” symbol has to precede the value of the color so as to indicate to the browser that has to be interpreted as a hexadecimal value. In this six digit value, the first two digits specify the concentration of the color red, the next two digits specify the concentration of the color green and the last two digits specify the Concentration of the color blue. So the value is a combination of the primary colors red, green and blue and that is why it is called RGB color. If we specify the value “#FF0000”, the color appears to be red.”#000000” gives black and “#FFFFFF” gives the color white. You also have the option of specifying the color by giving its name, like:
<BODY TEXT = “WHITE”>
You can also specify a background image instead.
Note: The image should be in the same folder as your HTML file.
<!DOCTYPE html> <html> <head> <title>Setting Background Image</title> </head> <body background="logo01.png"> Welcome to Web World!!! </body> </html>
Output:
Related Topic:
- HTML5 Introduction To Website Creation
- Installation Process of Sublime Text 3
- Formatting Tags of HTML5
;