7th Class Computers HTML Working With HTML

Working With HTML

Category : 7th Class

Working With HTML



HTML stands for Hyper Text Markup Language and it is the most widely used language to design webpages. A web page is a digital page which comprises of multimedia. A group of webpages forms a website. HTML was developed with the intent of defining the structure of documents like heading, paragraphs, lists etc. HTML defines the structure and layout of a web document by using a variety of tags and attributes. When you save an HTML file, you can use either the .htm or the .html extension.



An HTML tag is a set of characters constituting a formatted command for a web page. A web page consists of various types of tags to denote the various elements in an HTML document, HTML tags consists of a left angular bracket (<), a tag name and a right angular bracket (>). Tags are usually paired (e.g., <Tag>. and </Tag>) to start and end the tag instruction. The end tag looks like the start tag except a slash (/) precedes the text within the brackets.



Some elements may include an attribute which is additional information included inside the start tag. An attribute defines the characteristics of an HTML element. For example, you can specify the alignment of text (right, left or center) by including the appropriate attribute with the image source HTML code.



Headings are used to arrange the contents in a systematic way. HTML has six levels of headings, number 1 to 6, with 1 being the largest. Headings are typically displayed in larger and / or bolder fonts than normal body text. The first heading in each document should be tagged <H>.



<Hn> Heading/sub-Heading </Hn>


Where n is a number between 1 and 6 specifying the level of the headings?


Some Tags in HTML

Every HTML document contains certain standard HTML tags. They are as follows:


v  HTML Tag

v  Head tag

v  Title tag

v  Body tag




The HTML element tells your browser that the file contains HTML coded information. The file extension .html also indicates this on HTML document and must be used. It comes in a pair <HTML> and <HTML>











The Head element identifies the first part of your HTML coded document that contains the title. It contains title tag. It also comes with opening and closing tags <HEAD> and </HEAD>











 Title Tag

The Title tag contains your document title and identifies its content in a global context. The title is typically displayed in the title bar at the top of the browser window, but not inside the window. The title is also what is displayed on someone's hotlist or bookmark list, so choose something descriptive, unique and relatively short. A title is also used to identify your page for search engines.






< Title >






Body Tag

The Second and largest part of your HMTL document is the body, which contains the content of your document (displayed within the text area of your browser window). The tags explained below are used within the body of your HTML document.



















Paragraphs may consist of a single sentence or more than one sentence including punctuation marks and blank space. Paragraph is represented by <P> .......</P> tags. End tag </P> is not essential to add as the browsers assumes the start of paragraph when <P> tag is given.



Line Break

This tag is used to change lines with no extra blank spaces. It can be used for short lines of text such as postal addresses. This tag is represented by <BR>.



National Informatics Centre <BR>

Chanakya Puri <BR>

New Delhi <BR>


Horizontal Rule

The HR (Horizontal Ruler) tag is a stand-alone, or empty document element that allows you to add horizontal rules to your web pages.


Change the height of a horizontal rule

To change the height of a horizontal rule, the size attribute value in the HR tag may be used. The value you set is the rule's height, or thickness in pixels.

Attributes of HTML:






To display the horizontal rule of specified width in pixels or percentage.


It changes the height or thickness of the Size horizontal rule


To apply background color behind the Color horizontal rule.


To set the position of the horizontal rule. It takes three values: left, right or center.

Note: Align attribute effect is noticeable only if the horizontal rule width is less than the width of browser window.


To display horizontal rule as flat solid bar rather than default 3D bar. This attribute is used without any value.


Character Formatting Attributes

We use some specific formatting attributes to highlight words, phrases or entire sentences in a paragraph or in a page. Some of them are as follows ?



  • <B> ... </B> This tag is used to set the text bold.

For example: - COMPUTER.


  • <U>... </U> This tag is used to set the text underlines.

For example: - Computer.


  • <I> ... </I> This tag is used to set the text italics.

For example: - Computer.


  • <SUB> ... </SUB> This tag is used to set the text in a subscript form.

For example: - 02, 2 is in subscript form.


  • <SUP> ... </SUP>: This tag is used to set the text in a superscript form.

For example: - In a2, 2 is in superscript form.


  • <STRIKE> ... </STRIKE> This tag is used to set the text in a strikethrough form.

For example: -  COMPUTER.



Text Alignment

Paragraph, headings or other text can be aligned using ALIGN attribute. They can be aligned in three ways:


v  Center

v  Right

v  Left


The syntax for this is as follows:


Where value can be replaced with left, right or center.


Changing Font Size and Colors

You can set or change the size and colors of the font as desired. It can be done using <FONT>tag.


Specifying Font Size

To specify size of the fonts, size attribute is used with font tag. Normally fonts are in seven sizes. It can be given a number 1 being the smallest, and 7 being the largest. By default the font size is 3.


Example <Font size = "3">


Specifying Font Colors

To change font color, we use color attribute with the font tag. We can set sixteen different colors to make fonts look attractive. They are <Font Color = “AQUA”> 


  • Black
  • White
  • Aqua
  • Blue
  • Fuchsia
  • Grey
  • Green
  • Lime
  • Maroon
  • Navy
  • Olive
  • Purple
  • Red
  • Silver
  • Yellow
  • Steal
  • Magenter
  • Indigo
  • Hotpink
  • Greenyellow
  • Medium orchid
  • Midnight blue
  • Orange
  • Orchid


And so many other 


Specifying Font Face


Font face tag is used to change the font enclosed within the <font> and </font> tags.

e.g. <font face = "comic sans">



<P> <Font size = 7 color = "AQUA" Face = "Comic Sans">

This is aqua color.


Other Topics

You need to login to perform this action.
You will be redirected in 3 sec spinner