Some common tags

-
We have discussed the basic tags and their attributes needed for an HTML document. There are several other tags, with which web page contents can be made more attractive. Some of these tags are used for formating the text contents in the body section of the HTML document and therefore they are called formating tags. Now let us see some of them, which are essential for the layout of the body content.

<H1>,<H2>,<H3>,<H4>,<H5>and<H6> - Heading tags

A heading is a word,phrase, or sentence given at the beginning of a written passage that explains what it is about. Headings are typically displayed in a larger and / or bolder fonts than normal body texts. HTML has six levels of headings from <H1> to <H6>. Here <H1>creates the biggest text and <H6> the smallest. While displaying any heading, browser adds one line before and one line after that heading. The main attribute of this tag is Align and the possible values are,

Left      : Text is aligned to the left margin.
Right    : Text is aligned to the right margin.
Center  : Text is aligned to the center of the page.

Example shows different heading types and alignments and figure shows the corresponding web page.

To illustrate different heading tags

 

  <P> tag - Creating paragraphs

The <p> tag enables us to organise the text within the <BODY> tag into paragraphs. It indicates a new paragraph and instructs the browser to add a blank line before the paragraph. Paragraphs in HTML acts much like the paragraphs in any in any word processor. The paragraph element begins with the <P> tag and with </P>tag. The Align attribute sets the alignment of the text in the paragraph with the values left, right, center or justify.

 The code given in example shows how paragraphs are designed with different alignments. Figure show the resultant web page.



In example, we can see that the source code contains three lines in the first paragraph and two lines in the second paragraph with extra space. But the web page of this code shown in figure gives a single line for the first two paragraphs. That is, the browser will remove extra space and extra lines when the page is displayed. Not that the second paragraph is right aligned and the third paragraph is aligned as justified. Any number of spaces and any number of lines count as only one space. Therefore with HTML, we cannot change the output by adding extra space or extra lines in the HTML code. But this is possible in HTML. Now let us discuss how an extra line cane be added to the text content using <BR> tag. Note that the web page obtained in large or small screens and resized windows may not match with the one given in figure.

<BR> tag - Inserting line break

The purpose of BR element is that it creates a line break within a block of text in a web page. The <BR> tag is used to break the current line of the text and continue from the beginning of the next line.  The <BR> tag is an empty tag, which means that it has on ending(closing) tag.

The HTML code in example display figure shows the resultant  page in which we can see the effect of <BR> tag and difference between <P> tag and <BR> tag.



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