Scribd
Upload
42 views

Webch 2

The document provides information on various HTML tags for adding images, tables, lists, and other elements to web pages. It discusses the <img> tag and its attributes like src, alt, width, and height. It also covers HTML table tags like <table>, <tr>, <td>, <th>, as well as attributes for cellpadding, cellspacing, colspan, and rowspan. Finally, it discusses the <ul>, <ol>, and <dl> list tags for creating unordered, ordered and definition lists.

Uploaded by

kanenus college
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
42 views

Webch 2

The document provides information on various HTML tags for adding images, tables, lists, and other elements to web pages. It discusses the <img> tag and its attributes like src, alt, width, and height. It also covers HTML table tags like <table>, <tr>, <td>, <th>, as well as attributes for cellpadding, cellspacing, colspan, and rowspan. Finally, it discusses the <ul>, <ol>, and <dl> list tags for creating unordered, ordered and definition lists.

Uploaded by

kanenus college
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/ 42

WEB PROGRAMMING

Chapter 2
IMG tag
 You can insert any image in your web page by using <img> tag. Following is the
simple syntax to use this tag.

<img src="Image URL" ... attributes-list/>

• The <img> tag is an empty tag, which means that, it can contain only list of
attributes and it has no closing tag.

• Attributes of HTML img tag


• The src and alt are important attributes of HTML img tag. All attributes of HTML
image tag are given below.
Img tag…
src
• It is a necessary attribute that describes the source or path of the image.
alt
• The alt attribute defines an alternate text for the image, if it can't be displayed.
The value of the alt attribute describe the image in words. 
width
• It is an optional attribute which is used to specify the width to display the image.
Height
It specifies the height of the image. 
Cont…
• <img src="animal.jpg" height="180" width="300" alt="animal ima
ge">  
• Test it N
Use of alt attribute

• We can use alt attribute with  tag. It will display an alternative text in case if
image cannot be displayed on browser.
• Following is the example for alt attribute:
• <img src="animal.png" height="180" width="300" alt="animal ima
ge“>
Set image location
• To insert an image in your web, that image must be present in your same folder
where you have put the HTML file.
• But if in some case image is available in some other directory then you can access
the image like this:

• <img src="E:/images/
animal.png" height="180" width="300" alt="animal image">  
Image border
• By default, image will have a border around it, you can specify border thickness in
terms of pixels using border attribute.
• A thickness of 0 means, no border around the picture.

• <img src="test.png" alt="Test Image" border="3">

Image Alignment
• By default, image will align at the left side of the page, but you can use align
attribute to set it in the center or right.

• <img src="test.png" alt="Test Image" border="3" align="right">


Use <img> tag as a link

• We can also link an image with other page or we can use an image as a link. To do
this, put <img> tag inside the <a> tag.
• <a href=https://www.webprogramming.com/what is
html><img src=“web.jpg” height=“100” width=“100”></a> 
Image Maps
• The HTML <map> tag defines an image map.
• An image map is an image with clickable areas. The areas are defined with one or
more <area> tags.

•<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="com
puter.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phon
e.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee
.htm">
</map>
Cont…
•The usemap value starts with a hash tag # followed by the name of the image
map, and is used to create a relationship between the image and the image map.

•The <map> element is used to create an image map, and is linked to the image by


using the required name attribute:
•<map name="workmap">

• The name attribute must have the same value as the <img>'s usemap attribute


• Area ;A clickable area is defined using an <area> element.
shape
•You must define the shape of the clickable area, and you can choose one of these
values:

 rect - defines a rectangular region


 circle - defines a circular region
 poly - defines a polygonal region
 default - defines the entire region
Continued…
Html tables
• The HTML tables allow web authors to arrange data like text, images, links, other
tables, etc. into rows and columns of cells.

• the HTML tables are created using the <table> tag in which the <tr> tag is used to
create table rows and <td> tag is used to create data cells.
Table…
• <!DOCTYPE html>
• <html>
• <head>
• <title>HTML Tables</title>
• </head>
• <body>
• <table border="1">
• <tr>
• <td>Row 1, Column 1</td>
• <td>Row 1, Column 2</td>
• </tr>
• <tr>
• <td>Row 2, Column 1</td>
• <td>Row 2, Column 2</td>
• </tr>
• </table>
• </body>
• </html>
Continued…

• This will produce the following result:

• Here, the border is an attribute of <table> tag and it is used to put a border
across all the cells. If you do not need a border, then you can use border="0".
Table heading
• Table heading can be defined using <th> tag. This tag will be put to replace <td>
tag, which is used to represent actual data cell.
• Normally you will put your top row, otherwise you can use <th> element in any
row
• <!DOCTYPE html>
• <html>
• <head>
• <title>HTML Table Header</title>
• </head>
<body>
• <table border="1">
• <tr>
• <th>Name</th>
• <th>Salary</th>
• </tr>
• <tr>
• <td>Ramesh Raman</td>
• <td>5000</td>
• </tr>
• <tr>
• <td>Shabbir Hussein</td>
• <td>7000</td>
• </tr>
• </table>
• </body>
• </html>
Continued…
• This will produce the following result:
Cellpadding and Cellspacing Attributes
• There are two attributes called cellpadding and cellspacing which you will use
to adjust the white space in your table cells.

• The cellspacing attribute defines the width of the border, while cellpadding
represents the distance between cell borders and the content within a cell.
• <!DOCTYPE html>
• <html>
• <head>
• <title>HTML Table Cellpadding</title>
• </head>
<body>
• <table border="1" cellpadding="5" cellspacing="5">
• <tr>
• <th>Name</th>
• <th>Salary</th>
• </tr>
• <tr>
• <td>Ramesh Raman</td>
• <td>5000</td>
• </tr>
• <tr>
• <td>Shabbir Hussein</td>
• <td>7000</td>
• </tr>
• </table>
• </body>
• </html>
Colspan and Rowspan Attributes

• You will use colspan attribute if you want to merge two or more columns into a
single column. Similar way you will use rowspan if you want to merge two or
more rows.
Continued…
• <!DOCTYPE html>
• <html>
• <head>
• <title>HTML Table Colspan/Rowspan</title>
• </head>
• <body>
• <table border="1">
• <tr>
• <th>Column 1</th>
• <th>Column 2</th>
• <th>Column 3</th>
• </tr>
• <tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell
• 3</td></tr>
• <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
• <tr><td colspan="3">Row 3 Cell 1</td></tr>
• </table>
• </body>
• </html>
Continued…
• This will produce the following result
Table background
• bgcolor attribute - You can set background color for whole table or just for one
• cell.
• background attribute - You can set background image for whole table or just for
• one cell.
• You can also set border color also using bordercolor attribute.
• <!DOCTYPE html>
• <html>
• <head>
• <title>HTML Table Background</title>
• </head>
• <body>
• <table border="1" bordercolor="green" bgcolor="yellow">
• <tr>
• <th>Column 1</th>
• <th>Column 2</th>
• <th>Column 3</th>
• </tr>
• <tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell
• 3</td></tr>
• <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
• <tr><td colspan="3">Row 3 Cell 1</td></tr>
• </table>
• </body>
• </html>
Continued…

Column 1 Column 2 Column 3


HTML Table Background

Row 1 Cell 2 Row 1 Cell 3


Row 1 Cell 1
Row 2 Cell 2 Row 2 Cell 3

Row 3 Cell 1
Table height and width
• You can set a table width and height using width and height attributes.
• You can specify table width or height in terms of pixels or in terms of percentage
of available screen area.
• <!DOCTYPE html>
• <html>
• <head>
• <title>HTML Table Width/Height</title>
• </head>
• <body>
• <table border="1" width="400" height="150">
• HTML
• 56
• <tr>
• <td>Row 1, Column 1</td>
• <td>Row 1, Column 2</td>
• </tr>
• <tr>
• <td>Row 2, Column 1</td>
• <td>Row 2, Column 2</td>
• </tr>
• </table>
• </body>
• </html>
Continued…
• This will produce the following result

Table Caption
The caption tag will serve as a title or explanation for the table and it shows up at
the top of the table.
Continued…

• <!DOCTYPE html>
• <html>
• <head>
• <title>HTML Table Caption</title>
• </head>
• <body>
• <table border="1" width="100%">
• <caption>This is the caption</caption>
• <tr>
• <td>row 1, column 1</td><td>row 1, column 2</td>
• </tr>
• <tr>
• <td>row 2, column 1</td><td>row 2, column 2</td>
• </tr>
• HTML
• 57
• </table>
• </body>
• </html>
Html lists
• HTML offers web authors three ways for specifying lists of information. All lists
must contain one or more list elements. Lists may contain:
 <ul> - An unordered list. This will list items using plain bullets.
 <ol> - An ordered list. This will use different schemes of numbers to list your
items.
 <dl> - A definition list. This arranges your items in the same way as they are
arranged in a dictionary.
HTML Unordered Lists
• An unordered list is a collection of related items that have no special order or sequence. This list is created by
using HTML <ul> tag. Each item in the list is marked with a bullet.
• example
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
Continued…
HTML Unordered List Beetroot
• Ginger
• Potato
• Radish
Continued…
The type Attribute
• You can use type attribute for <ul> tag to specify the type of bullet you like. By
default,
• it is a disc. Following are the possible options:
• <ul type="square">
• <ul type="disc">
• <ul type="circle">
HTML Ordered Lists

• If you are required to put your items in a numbered list instead of bulleted,
then HTML
• ordered list will be used. This list is created by using <ol> tag. The numbering
starts at
• one and is incremented by one for each successive ordered list element
tagged with <li>.

• Example;
Continued…
• <!DOCTYPE html>
• <html>
• <head>
• <title>HTML Ordered List</title>
• </head>
• <body>
• <ol>
• <li>Beetroot</li>
• <li>Ginger</li>
• <li>Potato</li>
• <li>Radish</li>
• </ol>
• </body>
• </html>
Continued…
HTML Ordered List
1. Beetroot
2.Ginger
3.Potato
4.Radish
Continued…
• The type Attribute
• You can use type attribute for <ol> tag to specify the type of numbering you
like. By default, it is a number. Following are the possible options:
• <ol type="1"> - Default-Case Numerals.
• <ol type="I"> - Upper-Case Numerals.
• <ol type="i"> - Lower-Case Numerals.
• <ol type="a"> - Lower-Case Letters.
• <ol type="A"> - Upper-Case Letters.
Continued…
The start Attribute
You can use start attribute for <ol> tag to specify the starting point of numbering
you need. Following are the possible options:

• <ol type="1" start="4"> - Numerals starts with 4.


• <ol type="I" start="4"> - Numerals starts with IV.
• <ol type="i" start="4"> - Numerals starts with iv.
• <ol type="a" start="4"> - Letters starts with d.
• <ol type="A" start="4"> - Letters starts with D.
HTML Definition Lists

• HTML and XHTML supports a list style which is called definition lists where
entries are listed like in a dictionary or encyclopedia. The definition list is the
ideal way to present a glossary, list of terms, or other name/value list.

• Definition List makes use of following three tags.


 <dl> - Defines the start of the list
 <dt> - A term
 <dd> - Term definition
 </dl> - Defines the end of the list
Example
• <!DOCTYPE html>
• <html>
• <head>
• <title>HTML Definition List</title>
• </head>
• <body>
• <dl>
• <dt><b>HTML</b></dt>
• <dd>This stands for Hyper Text Markup Language</dd>
• <dt><b>HTTP</b></dt>
• <dd>This stands for Hyper Text Transfer Protocol</dd>
• </dl>
• </body>
• </html>
Continued…
• This will produce the following result:
• HTML
This stands for Hyper Text Markup Language

• HTTP
This stands for Hyper Text Transfer Protocol

You might also like