Global Youth Voice
Computer

Class 8-Computer Notes on HTML

Computer notes on HTML

Notes By Tanuja Banerjee, Computer teacher St. Anne’s Girls” High School

HTML-Using List and creating Table

The following notes on Computer deals with HTML coding in which the students will learn about List, creating Table, linking, inserting image and use of different Tags.

Whenever we have to present any information in a precise manner, like list,we use bullets. HTML supports various elements to create list for displaying items in a specific order. A list can be defined in different styles, such as- numbers or bullet.

LIST tag- It helps us to arrange information in an organised way to increase readability and better understanding.

A list can be defined in different styles-

  • Ordered list
  • Unordered list
  • Definition list

ORDERED LIST

The Ordered list is used to display the list of items in a specific order. It is a container tag which starts with <OL> tag and finishes with </OL> tag. By default , the contents get displayed with a numbered list item.

Syntax-    <OL>          ……………..               </OL>

<LI> List Item- It is an empty element that does not require a closing tag.

Syntax-    <OL><LI> item name  </OL>

Attributes of <OL> tag

  • START- This attribute is used to give the starting point of the numbering order of the list. With START attribute , the value (positive number) must be given in double quotes. Example- START=”5”, means ordered list will start from 5.
  • TYPE- This attribute defines the type of numbering style for the ordered list items. Example- (A,B,C), (a,b,c), (I,II,III,IV), (I,ii,iii,iv),(1,2,3,4)

Eaxmple of ordered list

Computer notes on HTML
Output of the ordered list coding will appear this way

HTML Coding for Ordered List-

<HTML>
<HEAD>
<TITLE> WELCOME </TITLE>
</HEAD>
<BODY BGCOLOR= “pink” >
<FONT COLOR=”White”> The days of the week
<OL Type= “a” >
<LI> Monday
<LI> Tuesday
<LI> Wednesday
<LI> Thursday
<LI>  Friday
<LI> Saturday
<LI> Sunday
</OL>
</FONT>
</BODY>
</HTML>

UNORDERED LIST-

Unordered list is a collection of items that are not to be displayed in any special order or sequence. It is a container tag which starts with <UL>tag and finishes with </UL> tag

Syntax- <UL> ………………. </UL>

<LI> tag- Each list item in a list has to be preceded by <LI> empty tag.

Syntax- <UL><LI> item name </UL>

Type Attribute- It specifies the type of bullet that can be used with <UL> element. The three values. The three values that can be defined with <UL> tag are–

Disc  Specifies a filled circle
Circle Specifies  a non- filled circle
Square Specifies  a filled square bullet

Computer notes on HTMLComputer notes on HTML

 

DEFINITION LIST-

A definition List is used to present a list of definitions for items. It is a container tag which starts with <DL> and ends with </DL> tag.

Definition list consists of two elements-

  1. Definition Term- <DT> element is used to define the Definition Term.
  2. Definition Description- <DD> element is used for Definition Description.

Computer notes on HTMLComputer notes on HTML

MARQUEE tag

A Marquee displays a moving text message on a background. It is a container element.

Syntax- <MARQUEE> Qualities of a good student </MARQUEE>

Attributes of MARQUEE tag-

  • Width- Specifies the width of marquee.
  • Height- Specifies the height of marquee.
  • Behavior- It specifies the type of scrolling of the marquee.
  • Scrolldelay- Specifies how long to delay between each jump.
  • Scrollamount- Specifies the speed of marquee text.
  • Loop- Specifes number of times to loop.
  • Bgcolor- Specifies background colour in terms of colour name.
  • Hspace- Specifies horizontal space around the marquee.
  • Vspace- Specifies vertical space around the marquee.

 

Creating a Table in HTML

Tables arrange data in rows and columns and provide an attractive way to represent information.

Tables are created to –

  • Present information or data in a comprehensive manner
  • Make comparative analysis of data

Tables are  created using the<TABLE> tag.

Features of <TABLE> tag-

  • Each table begins with <TABLE> tag and ends with </TABLE> TAG.
  • Each row begins with <TR> (table row) tag and ends with </TR> tag. Rows  must be inside table.
  • Each row contains many columns, so each column begins with <TH> (table heading) tag ends with </TH>. Column headings must be inside row.
  • Each column contains data within the cell, so it begins with <TD> (table data) tag and ends with </TD>. Cells must be inside rows.
  • The number of <TD> tags in a single <TR> tag, defines the number of columns in a single row.

Attributes of Table Tag-

BORDER–      Specifies the thickness of the border of a table.

Syntax- <TABLE BORDER= 3>

BORDERCOLOR– It specifies the colour of table border using colour name/code.

Syntax- <TABLE BORDER=3 BORDERCOLOR= “BLUE”>

BGCOLOR– Specifies the background colour of the table.

Syntax- < TABLE BORDER=3 BGCOLOR= “WHITE”>

CELLPADDING– It specifies distance between the edge of cell & its contents in pixels

Syntax- <TABLE BORDER=3 BORDERCOLOR=”BLUE” BGCOLOR= “WHITE” ALIGN= “CENTER” CELLPADING=”10”>

CELLSPACING– It specifies the minimum distance adjacent cells in pixels

Syntax- <TABLE BORDER=3 BORDERCOLOR= “BLUE” BGCOLOR= “WHITE” ALIGN=”CENTER” CELLSPACING=”10”>

ALIGN –This attribute specifies the alignment of the table on the page.

Syntax- <TABLE BORDER=3 BORDERCOLOR=”BLUE” BGCOLOR=”WHITE” ALIGN=”CENTER” CELLPADDING=”10”

HEIGHT- It specifies the overall height of the table to fit the data in it.

WIDTH- Specifies the overall height of the table to fit the data in it.

Syntax- <TABLE BORDER=1 BGCOLOR=”WHITE” HEIGHT=300 WIDTH=400

 

HTML coding to create a table-Computer notes on HTML

<HTML>

<HEAD>

<TITLE> Create a Table </TITLE>

</HEAD>

<BODY TOPMARGIN= “50” LEFTMARGIN=”50” BGCOLOR= “Pink”>

<TABLE BORDER= 3 BORDERCOLOR=”Blue”>

<TR>

<TH>S.No.</TH><TH>Name</TH><TH> Grades</TH>

</TR>

<TR>

<TD>1</TD><TD>Bindu</TD><TD>A </TD>

</TR>

<TR>

<TD>2 </TD><TD>Yogesh</TD><TD> A+ </TD>

</TR>

<TR>

<TD> 3 </TD><TD>Sakshi</TD><TD> A</TD>

</TR>

</TABLE>

</BODY>

</HTML>

 

HYPERLINKS IN HTML-

While surfing internet , we have seen highlighted words or images on the web pages. When we click on any of them, it takes us to another web page or part. These links take us directly to other pages or even to specific parts of a given page are called Hyperlinks.

Hyperlinks

Hyperlinks allow web users to navigate between websites by clicking on text and images.

A link is specified using anchor tag <A>.

A(anchor) – This tag is used to mark the text as hypertext link, to link one page to another. Anything written between the opening <A> tag and closing </A> t ag is used as text of the link. When a user clicks on that link it will reach to the linked document.

Attribute of <A> tag-

HREF ( HypertextREFerence)- This attribute of <A> tag stores the reference of the document that is to be linked. The text that appears on the hyperlink is enclosed between the starting tag <A> and ending tag </A>.

Syntax- <A Href= “Document name”> Hyperlink Text </A>

Inserting Images- To add an image in web page use <IMG> tag.

Computer notes on HTML

Attributes of <IMG> tag-

  • SRC- Gives image filename in double quotes with complete path. SRC(Source) attribute gives the exact and complete location of the image file on the disk, otherwise the image may not appear on the page.
  • BORDER- Makes a border of specified width around the image.
  • HEIGHT- It specifies the height of the image.
  • WIDTH- It specifies the horizontal width of the image.
  • ALT- Displays alternate text if image cannot be displayed.
  • ALIGN- Aligns the image
  • VSPACE- Adding space around the top and bottom of the image.
  • HSPACE- Adding space around the left and right of the image.
Click here to revise your previous topic- Understanding HTML
Advertisements

Related posts

Notes on Computer- MS Excel 2007

GYV Correspondent

Computer Class 7 – Software & Types

GYV Correspondent

MCQ on Computer Hardware JAC Class 7

GYV Correspondent

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More