Scribd
Upload
1K views

ICSE VII Computers More in HTML

The document discusses various HTML tags for formatting text, inserting images and tables, and creating hyperlinks within web pages. It provides examples and explanations of tags like <FONT>, <IMG>, <TABLE>, <TR>, <TD>, <TH>, and <A> and their attributes.

Uploaded by

Sarika Joshi
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
1K views

ICSE VII Computers More in HTML

The document discusses various HTML tags for formatting text, inserting images and tables, and creating hyperlinks within web pages. It provides examples and explanations of tags like <FONT>, <IMG>, <TABLE>, <TR>, <TD>, <TH>, and <A> and their attributes.

Uploaded by

Sarika Joshi
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 24

Standard VII

Subject: Computers

©Podar Education Network Subject: Computers Topic: More in HTML


Observe the documents

Document 1 Document 2

©Podar Education Network Subject: Computers Topic: More in HTML


Observe the documents
The second Document is more attractive than
the first.

It has headings, subheadings, pictures,


paragraphs.

Similarly, we can format a web page to contain


headings, paragraphs, images, tables, etc.

Formatting a web page makes it attractive and


structured

©Podar Education Network Subject: Computers Topic: More in HTML


Changing Text type, color and size in HTML
The < FONT> tag has the following attributes : Face, Size, Color
<p><Font size=1>This is Font Size 1</Font></p>
<p><Font size=2>This is Font Size 2</Font></p> …

Using font size attribute


©Podar Education Network Subject: Computers Topic: More in HTML
Example
<p><FONT FACE=“Arial” SIZE=2 COLOR="Red"> This text is red in
colour</font></p>
<p><FONT FACE=“Century Gothic” SIZE=5 COLOR=“Green”>
This text is green in colour</font></p>

©Podar Education Network Subject: Computers Topic: More in HTML


Inserting Images
To insert an image you use the following syntax:
<IMG src= “image name”>

The src attribute is used to specify the location of


the image file

<IMG src=“koala.jpg”>
-- image file is in same folder as the html file

<IMG src=“d:\images\flower.gif”>
--image is in another folder

©Podar Education Network Subject: Computers Topic: More in HTML


Aligning the image with respect to text
• align the image to the left margin: align=“ left”
• align the image to the right margin: align=“ right”
• align the image with top of the letters in the current
line: align=“top”
• align the image with the base line of the letters in
the current line: align =“bottom”
• align the image in the middle of the page :
align=“middle”

©Podar Education Network Subject: Computers Topic: More in HTML


Inserting Images

<IMG SRC= “koala.jpg”>

<IMG SRC= “koala.jpg” ALIGN=“top”>

©Podar Education Network Subject: Computers Topic: More in HTML


Other Image attributes

Height : specifies the height of the image

Width: specifies the width of the image.

Border : a numeric value which sets the width of the


border around the image.

Alt : assigns an alternative text to be displayed if the


image is not available.

©Podar Education Network Subject: Computers Topic: More in HTML


Image types

©Podar Education Network Subject: Computers Topic: More in HTML


Example
<IMG src=“E:\Jaya\images\butterfly.jpg” align= “right”
height=200 width=300 border=1 alt= “butterfly
image”>

©Podar Education Network Subject: Computers Topic: More in HTML


Inserting Tables
1. To create the structure of the table :
< TABLE>….</TABLE>
2. To give the caption to a table.

< CAPTION> … </CAPTION>


3. To give a column heading in a table.
<TR>…</TR>
4. To give a column heading in a table:

<TH>…<TH>
5. To create a cell (or column) that stores table data inside a row.
<TD>…</TD>
©Podar Education Network Subject: Computers Topic: More in HTML
Table tag <TABLE>
It is a container element. Its attributes are as follows.
 Align
 Bgcolor
 Border
 Bordercolor Table header
Caption Table 1
 Cellpadding
 Cellspacing Adm No. Name Marks
 Height
 Width V10120 Amit 77

V087 Sarah 87

Various components of a table Table rows


Table data

©Podar Education Network Subject: Computers Topic: More in HTML


Table row tag <TR>
<TR> stands for table row.
The following attributes can be used with <TR> tag :

ALIGN, VALIGN, BGCOLOR

Table data tag <TD>


<TD> tag is used to add content to a cell. <TH> is used for header cell.
The following attributes can be used with <TD> tag :
ALIGN, VALIGN, COLSPAN, ROWSPAN, NOWRAP AND BGCOLOR

Table
Eshana data
V10120 77
Table row Singh

Sarah
V0761 87
Mathew

©Podar Education Network Subject: Computers Topic: More in HTML


Table caption tag <CAPTION> tag
Table caption tag is used to give a caption to the table.
It has the Align attribute

Caption below the table

Table 1

Caption at the right of the table

Table 1

©Podar Education Network Subject: Computers Topic: More in HTML


Example of Table tag
<TABLE border=1 >
<CAPTION Align=“Top”> Table 1</CAPTION>
<TR BGCOLOR=”Cyan”><TH>Adm No.</TH><TH>Name</TH>
<TH>Marks</TH></TR>
<TR><TD>V10120</TD><TD>Amit</TD><TD>77</TD>
<TR> … </TR>
</TABLE>
Table 1

Adm No. Name Marks

V10120 Amit 77

V087 Sarah 87

©Podar Education Network Subject: Computers Topic: More in HTML


Adjusting Cellspacing and Cellpadding
Cell spacing
(space between
the cells)
Admission
Name Marks
No.

Eshana Border is of
V10120 77
Singh thickness 4 pixels

Sarah Cell padding


V0761 87
Mathew (space between the data
and the cell border)

<TABLE BORDER=4 CELLSPACING=20 CELLPADDING=20>

©Podar Education Network Subject: Computers Topic: More in HTML


Merging cells in a table
The Colspan attribute of <TABLE> tag is used to combine cells
across columns.
The Rowspan attribute is used to combine cells across rows.

Colspan = 2 <TABLE BORDER=4>


<TR>
Students Details Marks <TD colspan=2> Students
Details </TD>
Eshana
<TD>Marks</TD>
V10120 77 Ist
Singh <TD rowspan=3>
Term
</TR>…
Sarah <TR>…</TR>
V0761 87
Mathew <TR>…</TR>
</TABLE>
Rowspan = 3
Creating table heading Formatting table headings

©Podar Education Network Subject: Computers Topic: More in HTML


Hyperlinks in HTML

The tag used to create links is called the Anchor tag, or <A>

<A> tag has the following attributes:

1. Href : This attribute is actually responsible for creating links.


The syntax used is :
<A href=“URL”>Link text </A>

2. Name: This attribute is used to name a portion of a same


document or another document.
This portion can then be linked by using href.
<A name=“A1”>

©Podar Education Network Subject: Computers Topic: More in HTML


External Link
Links to another file or web page

<A href= “e:\jaya\balloons.html”>Click to know


more </A>

<A href= “e:\jaya\smiley.gif”>Click here to display


image </A>

<A href= “e:\documents\manual.doc”> Click to


read the manual </A>
©Podar Education Network Subject: Computers Topic: More in HTML
External Links

©Podar Education Network Subject: Computers Topic: More in HTML


Using the <A> tag to link to another file

<A href=“e:\jaya\balloons.html”>Click to know more </A>

©Podar Education Network Subject: Computers Topic: More in HTML


Internal Link
Links to another section in the same web page

<A name= “Section1”>This is beginning of


Section 1 </A>
--- This is used to name or bookmark a section

<A href= “#Section1”>Go to Section 1 </A>


--- This links to the named/bookmarked section.

©Podar Education Network Subject: Computers Topic: More in HTML


Internal Link

©Podar Education Network Subject: Computers Topic: More in HTML

You might also like