Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
9 views10 pages

Table

The document provides an overview of foundational concepts in web development, focusing on HTML elements for images and tables. It details how to insert images, create tables, and use attributes for formatting and interactivity, including image maps. Key HTML tags such as <img>, <table>, <tr>, <th>, and <td> are explained with examples.

Uploaded by

Su SuHlaing
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
9 views10 pages

Table

The document provides an overview of foundational concepts in web development, focusing on HTML elements for images and tables. It details how to insert images, create tables, and use attributes for formatting and interactivity, including image maps. Key HTML tags such as <img>, <table>, <tr>, <th>, and <td> are explained with examples.

Uploaded by

Su SuHlaing
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 10

Foundation of Web

Development

Image & Table


Insert image
• Image tab
<img src=“rose1.jpg” width =“400” height=“300”/>

• Background image
<body background=“g.jpg”>

• Image link
<a href=“index.html”><img src=“rose2.jpg></a>
Animate image

<body bgcolor="cyan">
<h2>Animated Images</h2>
<p>HTML allows moving images:</p>
<img src="programming.gif" alt="Computer man" width="100"
height="50"/>
•
</body>
HTML table tags
Tag Description

<table> Defines a table

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<caption> Defines a table caption

<colgroup> Specifies a group of one or more columns in a table


for formatting

<col> Specifies column properties for each column within a


<colgroup> element

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table


Table structure
<table>
<caption>Batch 10 students</caption>
<tr>
<th> Name</th>
<td>Mg Ba</td>
</tr>
</table>
Table width
• <h2>100% wide HTML Table</h2>
• <table width=“100%”>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>KyawZin</td>
<td>Win</td>
<td>18</td>
</tr>
<tr>
<td> SittMin</td>
<td> Naung</td>
<td>18</td>
</tr>
<tr>
<td>KhantWon</td>
<td> Yan</td>
<td>18</td>
</tr>
</table>
Table Border

• <h3> Using HTML Table Tag Attributes</h3>


• <table border =“3”>
• <tr>
<th> Name</th>
<th> Subject</th>
<th> Marks</th>
</tr>
<tr>
<td> MG Myo Min Khaing</td>
<td> HTML</td>
<td> 82</td>
</tr>
Image in table
• <table>
<tr>
<th>rose</th>
<td><img src=“rose1.jpg”/></td>
</tr>
</table>
Image map
• <map> Tag: This tag defines the image map and requires a name attribute, which is used to
associate the map with an image using the usemap attribute

<area> Tag: This tag defines a clickable area within the image map.

 shape attribute: Specifies the shape of the clickable area (e.g., rect, circle, poly).
o rect: Defines a rectangular area.

o circle: Defines a circular area.

o poly: Defines a polygon area.


Image map-
 coords attribute: Specifies the coordinates for the shape, depending on the
shape type:

o rect: Takes four values: x1,y1,x2,y2 (top-left x, top-left y, bottom-right x,


bottom-right y).

o circle: Takes three values: x,y,radius (center x, center y, radius).

o poly: Takes a series of coordinate pairs: x1,y1,x2,y2,... (x1, y1, x2, y2,
etc.).

 href attribute: Specifies the URL to navigate to when the area is clicked.

You might also like