Essential HTML tags

-
Let us have a detailed discussion on the essential tags  required to create web pages. The tags, their use, associated attributes and their values, and their appearance in the browser window will be illustrated in this section.

<HTML>-starting an HTML page

The entire HTML document is bounded by a pair of <HTML> and </ HTML> tags. The <HTML> tag identifies the document as an HTML document. In general <HTML> is always the first tag in an HTML  page and the</HTML> is the last tag. Everything else in the web page is in between these two tags. That is,the Head section and the body section lie inside the <HTML>and </HTML> tags. It is a container tag pair. The main attributes of the <HTML> tag are Dir and Lang.

Dir

The Dir attribute of <HTML> tag specifies the direction of the text to be displayed on the web page. This attribute can have values either Ltd (left-to-right) or rtl (right-to-left).By default, the value of this attribute is l t r. The value r t l  is used when languages like Arabic, Hebrew, Chinese etc. are used for content presentation. For example, <HTML Dir= "rtl"> specifies that the document is to be read from right-to-left.

lang

The Lang attribute of <HTML> tag specifies the language we have generally used within the document. The value "in" is used for English language and "it" is used to specify Italian language.

For example, the code <HTML Dir = "at" > specifies that the language used in the HTML document is Arabic language. Some common language codes used with lang attribute are given in Table


SL.No Code language 
1EnEnglish
2FrFrench
3DeGerman
4ItItalian
5ElGreak
6EsSpanish
7ArArabic
8JaJapanese
9HiHindi
10RuRussian

<HEAD>-Creating head

It contains the head of an HTML document, which holds information about the document such as its title, scripts used, style definitions, etc. The tag pair <HEAD> and </HEAD>declares the head section. It is also a container tag pair <HEAD>and </HEAD> declares the head section. It is also a container tag pair.

<TITLE>-Creating a title  

It is a container tag pair that contains the title of the HTML document, which will appear in the web browser's title bar. The search engine uses the Title to identify the page. The tag pair<TITLE> and </TITLE> is used inside the tag pair <HEAD> and </HEAD> to mention the document title.

<BODY>-Creating a body

The body tag pair <BODY> and </BODY> specifies the document body section. This section contains the content to be displayed in the browser window. Hence, all other tags, which define the document content are given in the body section. Before discussing these tags, let us discuss various attribute of <BODY> tag.

Background

This attribute sets an image as background for the documents body. This attribute of <BODY> tag makes the page more attractive. The general format is:

<BODY Background = "URL of the picture">
 
The HTML code given in example shows the sky as the background image of a web page.
 

The web page is displayed as showing in figure.

Bgcolor

This attributes specifies a color for the background of the document body. For example , <BODY Bgcolor = "yellow" > will display the background in yellow color.

The value of Bgcolor attribute can be given in two ways. 
 
  • Color_name-specifies the background color with a colour name (like"red","grey" etc.)
  • Hex_number- specifies the background color with a hexadecimal code (like "#ff6080","#303030" etc.). Each hexadecimal code will be preceded with a hash sing#. 
The six digit number and letter combinations represent colours by given their RGB (Read,Green,Blue) value. Of the six digits represent the amount of red, the second two digits represent the amount of green, and the last digits represent the amount of blue as a hexadecimal value in the range00 - FF. For example, #000000 is black, #FF0000 is bright red, #00FF00 is bright green, and #FFFFFF is white (fully saturated with all the three colours). We can try various color combinations according to our choice of hex number.

Text

This attribute specifies the color of the text content in the page. By default the browser displays  the text in black colour on a white/grey background. We have already discussed how to change the background colour using Bgcolor attribute. Simillarly the colour of the text can be changed using the attribute text. For example, <BODY Text ="yellow" > shows the text in yellow colour. Like Bgcolor, the value of text attribute can be given as a colour name or hexadecimal code. For example, Text = "Blue" or Text = "#00FFDD" etc.

Link,Alink and Vlink

A hyperlink is an element, a text or an image that we can click on, and jump into another document or another section of the same document. A hyperlink points to a whole document or to a specific element within a document. We will discuss hyperlink in detail later in this chapter.

Link:  This attribute specifies the colour of the hyperlinks that are not visited  by
           the viewer. The default colour for link attribute is blue.

Alink: It specifies the colour of the active hyperlink. The link remains active only             for the moment the mouse is clicked on it. Hence at the time of selection  
            the colour  of the link will be changed to Alink value. The default  Alink
            colour is green.

Vlink: It specifies the colour of the hyperlink which is already visited by the
            viewer. the default colour for Vlink is purple.

Comments

Post a Comment

Popular posts from this blog

List in HTML

-
Image
While presenting information, the facility of listing can make it more communicative. List are of different types. We are familiar with numbered lists and bulleted lists.  HTML offers several mechanisms for specifying lists of information. All lists must contains one or more list elements. There are three kinds of list in HTML- unordered lists, ordered lists and definition lists. Unordered list Unordered lists or bulleted lists display a bullet or other graphic in front of each item in the list. We can created an unordered list with the tag pair <UL> and </UL> . Each item in the list is presented by using the tag pair <LI> and </LI> . Unordered lists are used when a set of items can be placed in any order. The code in example presents some hardware components of a computer in bulleted list. The corresponding web page is showing in figure. We can customise unordered lists by setting the Type attribute to three diffrent values: Disc (default valu
Read more

Basic concept of HTML documents

-
Image
Basic structure of an HTML document Sample HTML document to illustrate the structure of a web page <HTML>       <HEAD>           <TITLE> This is the title of web page </TITLE>       </HEAD>       <BODY>            Hello, Welcome to the world of web page!       </BODY> </HTML> You can see some of the words in the upper case within a pair of angle brackets < and >. These are HTML tags. It is not necessary that tags be written in the upper case. HTML is not case sensitive. We can use either the upper or lower case or even a mix of the two. In this book, we follow the style of using the upper case for HTML tags and sentence case for attributes to distigush them from other words or text. All HTML pages begin with the tag <HTML>  and end with tag </HTML> . There are mainly two sections in an HTML document namely head section and body section. The <HEAD>  tag  is used to define the head section.
Read more

Inserting image

-
Image
Images always make content presentation more more attractive and communicate. Now versions of HTML come with many web development feature, but the code required for adding images is simple. HTML provides a tag <IMG> to insert images in HTML pages. The following is the simple way of using this tag: <IMG SRC = "picture1.jpg" > The <IMG> tag is an empty tag and it has many attributes. SRC is the main attribute and it specifies the file name of the image to be inserted. We can use JPEG, PNG or GIF image files based on our needs, but make sure that the correct filename with the extension is specified using SRC attribute. If the image file is not in the current working directory, we have to specify the path of the file or the URL where the file is available. Setting space for the image We can set the space in web page for the image by specifying the values for the Width and Height attributes. The value are given in terms of either pixels or percentage
Read more