LISTS, IMAGES AND TABLE

Developed by : Zahid Javed

LISTS, IMAGES AND TABLE

 LISTS:-
HTML display different item in the form of
lists. Lists area used to represent text in more
readable form. Different types of lists are as follows:

1. Ordered Lists(Numbering)
2. Unordered Lists (Bullet)
3. Definition List
 ORDERED LISTS
Definition:-
An Ordered list is a list of item in which each item is marked with a
number or letter. Ordered list is also known as Numbered list. <OL>
tag is used to create an ordered list. It stands for ordered list.<LI> tag is
used with each item in the list. It stands for list item. It has no closing
tag.<OL> tag is used to close an ordered list.

Attributes:-
 Type: It specifies the number scheme for the list. The default number
scheme is 1,2,3… possible schemes are:
 ORDERED LISTS (CONT….)

 Start: It specifies the starting number of the list.

 Value: It changes the numbering sequence in the middle

of the list. It is used in <LI> tag.
Example:-

My favorite fruit are as follows:

<OL>
<LI>Mango
<LI>APPLE
</OL>
My favorite cities are as follows:
<OL TYPE=“A”>
<LI>Lahore
<LI>Karachi
</OL>
My favorite color are as follows
<OL TYPE=“i”>
<LI>Orange Link
<LI>Red
</OL>
ORDERED LISTS (CONT….)
Start vs Value

Link
ORDERED LISTS (CONT….)
Start vs Value

Link
 UNORDERED LIST
Definition:-
An unordered list is a list of item in which each item is
marked with a symbol. Unordered list is also known as
unnumbered list. <UL> tag is used to create an unordered
list. It stands for unordered list. <LI> tag is used with
each item in the list. </UL> tag is used to close an
unordered list.

Attribute:-
Type:- It specifies the type of symbol to appear with
each item of list. Possible values are FILLROUND,
SQUARE, DISC, CIRCLE. By default, it is a disc..
Example:-

<UL>
<LI>Item No.1
<LI>Item No. 2
<LI>Item No. 3
</UL>
Link
 DEFINITION LIST
Definition:-
A definition list is not a list item. It consist of
terms and description of terms. <DL> tag is used to
create a definition list. <DT> tag is used with each
term in the definition list. It stands for definition
term.<DD> tag is used with each description of the
term. It stands for definition description.
Example:-
<DL>
<DT>HTML</DT>
<DD>Hyper Text Markup Language</DD>

<DT>XML</DT>
<DD>Extensible Markup Language</DD>
</DL>

Link
 NESTED LISTS
Definition:-
A list within a list in known as nested lists. HTML can
have different types of lists. For example, an ordered list
can be nested within an unordered list.

Example:-
<OL TYPE=“SQUARE”>
<LI>Item NO.1</LI>
<LI>Item NO.2</LI>
<OL TYPE=“I” START=“3”>
<LI>Sub Item NO.1
<LI> Sub Item NO.2
</OL>
<LI>Item NO.3</LI> Link

</OL>
CUSTOM UNORDERED LIST (CSS)

Link
CUSTOM UNORDERED LIST (CSS)

Link
 Value Description
disc Default value. The marker is a filled circle
armenian The marker is traditional Armenian numbering
circle The marker is a circle
cjk-ideographic The marker is plain ideographic numbers
decimal The marker is a number
decimal-leading-zero The marker is a number with leading zeros (01, 02, 03, etc.)
georgian The marker is traditional Georgian numbering
hebrew The marker is traditional Hebrew numbering
hiragana The marker is traditional Hiragana numbering
hiragana-iroha The marker is traditional Hiragana iroha numbering
katakana The marker is traditional Katakana numbering
katakana-iroha The marker is traditional Katakana iroha numbering
lower-alpha The marker is lower-alpha (a, b, c, d, e, etc.)
lower-greek The marker is lower-greek
lower-latin The marker is lower-latin (a, b, c, d, e, etc.)
lower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.)
none No marker is shown
square The marker is a square
upper-alpha The marker is upper-alpha (A, B, C, D, E, etc.)
upper-greek The marker is upper-greek
upper-latin The marker is upper-latin (A, B, C, D, E, etc.)
upper-roman The marker is upper-roman (I, II, III, IV, V, etc.)
initial Sets this property to its default value.
https://www.w3schools.com/cssref/playit.asp?filename=playcss_ol_list-style-type&preval=katakana
inherit Inherits this property from its parent element.
WHAT ARE BITMAP AND VECTOR GRAPHICS, AND
HOW ARE THEY DIFFERENT?
A bitmap (also called "raster") graphic is created
from rows of different colored pixels that together
form an image. In their simplest form, bitmaps
have only two colors, with each pixel being either
black or white. With increasing complexity, an
image can include more colors; photograph-
quality images may have millions. Examples of
bitmap graphic formats include GIF, JPEG, PNG,
TIFF, XBM, BMP, and PCX as well as bitmap
(i.e., screen) fonts.
The image displayed on a computer monitor is also
a bitmap, as are the outputs of printers, scanners,
and similar devices. They are created using paint
programs like Adobe Photoshop.
WHAT ARE BITMAP AND VECTOR GRAPHICS, AND
HOW ARE THEY DIFFERENT?

Vector (also known as "object-oriented")

graphics are constructed using mathematical
formulas describing shapes, colors, and
placement. Rather than a grid of pixels, a
vector graphic consists of shapes, curves,
lines, and text which together make a picture.

Examples of vector graphic formats are PICT,

EPS, and WMF as well as PostScript and
TrueType fonts.
WHAT ARE BITMAP AND VECTOR GRAPHICS, AND
HOW ARE THEY DIFFERENT?
 TYPES OF IMAGE IN HTML
Different image formats supported by HTML are as
follows:

1.Graphic Interchange Format(GIF):-

Graphic interchange Format uses a compression
technique that preserves all color information for the image.
It uses a maximum of 256 colors. GIF format is best for
displaying images like logos, icons and buttons. A GIF file
fewer number of colors has smaller file size and allows
greater compression. However, the use of GIF format is
limited because of color depth limitation.

GIF images are in two different versions. These are GIF 87 and
GIF 89a format.
GIF 89a is newer and has the following features:
 IMAGE IN HTML (GIF FILE)
 Interlacing: Interlacing is a capability that enables the
browser to display the image as it loads. Interlace images
are slightly larger.

 Transparency: GIF89a format can be used to set a single

color to be transparent. It will allow the background color.

 Animated GIF’s: GIF89a image can also be animated

using special software. Animated GIF images are actually a
number of GIF images saved in single file.
2. Joint Photographic Expert Group (JPEG):-
Joint Photographic Expert Group is a good format
image. It contain millions of color. It does not provide the
option of transparency or interlacing. It allows to specify
the degree of compression to create a balance between
image quality and file size. A new addition to JPEG format
is progressive JPEG. Pro-JPEG’s provide superior
compression and give a wider range of quality setting.
3. Limited Support or Non-Supported Image Format:-
 The following image formats are supported by some computers but
not all. These are not recommended to be include d in HTML
pages.

 Portable Network Graphic(PNG): Portable Network graphic

is good for combination of text and graphic within one image. It
was specially designed foe use on web. However it is not popular
because of lack of browser support.

 BMP: BMP stands for bitmap picture it is most commonly used in

windows environment. It provide high quality image. It produce
large file size. That’s why it is not use on internet.

 TIFF: TIFF stands for Tagged image File Format. It is widely

supported format to store bitmap images. It is commonly used in
desktop publishing, 3D Application and Medical imaging
application.

 PCX: It was originally developed by ZSOFT for PC Paint brush

program. It is a graphic file format for graphics programs running
on PC’s.
 USING IMAGES IN HTML
Definition:-
A web page may contain different types of graphics.
Graphics makes website more attractive and interesting.
HTML can be used to add static or animated graphics in
websites. The most popular types of images used in web
pages are .gif , png and .jpg. <IMG> tag is used to insert
image in web page and has no end tag.

Moving Images and Sound

JPG and BMP images are static; GIF and PNG files can
be simple animations. You can use audio and even video
clips on your web pages.
 USING IMAGES IN HTML
Attributes:-
 SRC: it specifies the name and path of image to be
displayed. Only name of the image is specified if image is
stored in the same directory in which web page is stored.
Otherwise, complete path of image is specified.

 ALT: It specifies the text to be displayed if the browser cannot

display image.

<!DOCTYPE html>
<html>
<body>

<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" >
</body>
</html>
 USING IMAGES IN HTML
Attributes:-
 ALIGN: It specifies the alignment of image. Possible
alignments are as follows:

Left The image is aligned to the left of the screen

Right The image is aligned to the right of the screen

It also specifies the text alignment with respect to the image.

Possible alignments are as follows:
Top The text is written at the top next to the image
Bottom The text is written at the bottom next to the image
Middle The text is written at the middle next to the image
IMAGE WITH TEXT DATA

Link
 Border: It specifies the size of border around the image.
The possible values are 1,2,3 and so on. The default value
is 0.

 Width: It specifies the width of the image in pixels.

 Height: It specifies the height of the image in pixels.

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

Alternatively, you can use the width and height attributes
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

 HSPACE: It specifies the amount of space to left and

right side of image in pixels.

 VSPACE: It specifies the amount of space to top and

bottom of the image in pixels.
Example:-
<img src="pic.jpg" width="313" height="264" border="2" >

<img src="pic.jpg" width="313" height="264" border="2"

align="left" alt="Image not found">

Link
 Example:-
 Images on Another Server
 Some web sites store their images on image servers.
 Actually, you can access images from any web address in the
world:

<!DOCTYPE html>
<html>
<body>

<img src="http://www.pakworkers.com/wp-content/uploads/2013/09/GC-
University-Faisalabad-Logo.jpg" alt=“gcuf.edu.pk"
style="width:104px;height:142px;">

</body>
</html>

Link
 Example:-
 Using an Image as a Link
 To use an image as a link, simply nest the <img> tag inside the
<a> tag:

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;border:0;">
</a>
Example:- Background Image Using HTML

 HTML <body> background Attribute

<body background="BGPattern.png">
<h1>Hello world!</h1>
</body>

Link
 Example:-
 Background Image using CSS
 To add a background image on an HTML element, use the CSS
property background-image:

<body style="background-image:url('BGPattern.png')">

<h2>Background Image</h2>

</body>
 ANOTHER EXAMPLE:-
!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("BGPattern.png");
}
</style>
</head>
<body>

<h1>Hello World!</h1>

</body>
</html>
 Another Example:-
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("plants1.png"), url("sunflowers.png");
background-color: #cccccc;
}
</style>
</head>
<body>

</body>
</html>

Link
Link
 Another Example:-
<!DOCTYPE html>
<html>
<body>
<h2>Background Image</h2>
<p style="background-image:url('skies.jpg')">
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for this paragraph.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behave.
</p>
</body> To add a background image on
</html> a paragraph
 TABLE
Definition:-
Tables are a very important tag in the HTML language.
A table consist of rows and column. The data in a table
is more readable. There are three main elements in
HTML for building tables.

These are <TABLE>, the table row <TR> and table

cell<TD>.
<TH> tag is used to define the header row of the table.

row <TR> cell<TD>.

TABLE

Link
Example Of Table:-
<html
<body>
<table border="1">
<tr><th>Name</th><th>Telephone</th><th>Address</th></tr>
<tr><td>Jawad</td><td>0322-6229905</td><td>Faisalabad</td></tr>
<tr><td>Ali</td><td>0321-7678247</td><td>Faisalabad</td></tr>
</table>
</body>
</html

Link
TABLE ATTRIBUTES
Attributes:-
TABLE
 ALIGN: it specifies the horizontal alignment of the table.
Possible alignments are left, right, and center.
 BORDER: It specifies the thickness of the border of the table

<table align="Left" border=1>

<table align=“Right" border=1>

<table align=“center" border=1>

Link
 HTML <TD> CELL
 The <td> tag defines a standard cell in an HTML table.

An HTML table has two kinds of cells:

 Header cells - contains header information (created with the <th>
element)
 Standard cells - contains data (created with the <td> element)

 The text in <th> elements are bold and centered by default.

 The text in <td> elements are regular and left-aligned by default.
 HTML <TR> <TD> ALIGN ATTRIBUTE
The align attribute specifies the horizontal alignment of the content in a cell.

HTML <tr align="right"> Link

CSS syntax: <td style="text-align:right">

 TABLE
Attributes:-
 VALIGN: : it specifies the vertical alignment of the
table. Possible alignments are top, middle and bottom

HTML <tr valign="right">

Link
CSS syntax: <td style=“vertical-align:right">
 TABLE
Attributes:-
 CELLPADING: It specifies the distance between data
in the cell and cell boundaries.

<table cellpadding="pixels">
Link
Value Description
The space between
pixels the cell wall and
the cell content
 TABLE
Attributes:-
 CELLSPACING: It specifies the spacing between
adjacent cells of the table.

Link
 TABLE
Attributes:-
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.

Link
 TABLE
Attributes: Colspan and Rowspan Attributes
Attributes:-
<BGCOLOR=“red” >
we add a different background color to the first row,
which happens to be the table header row.
Attributes:-
<BGCOLOR=“red” >
CSS syntax: <table style="background-color:red">
<table bgcolor="#00FF00"> http://htmlcolorcodes.com/

<td bgcolor="#FF0000">January</td> Link

<td bgcolor="#00FF00">$100</td>
Attributes:- Width and Height
PAGE STRUCTURE USING TABLE
PAGE STRUCTURE USING TABLE
PAGE STRUCTURE USING TABLE
CREATE A TABLE AS GIVING STRUCTURE