Internet Applications Development

Lecture 4L. Obead Alhadreti

Lecture Outline:

• lists.• Images.

Inserting lists

• HTML contains a set of tags for organizing the data in lists using several options.

• There are two main types of lists: ordered lists and unordered lists.

• There is a special type of lists known as definition list.

Ordered Lists• Example:

1. Jeddah2. Riyadh 3. Mecca

• <OL>….</OL> Define an ordered list.• To assign each item of the list items, <li> tag is used. <li> tag is a single tag written in the beginning of the line

for each item.• Every Item in an Ordered list begins with a sequence

number.• By Default, Ordered lists use decimal sequence numbers

(1,2,3,…..).

• Example:<ol><li> Jeddah<li> Riyadh<li> Mecca</ol>

• Display:1. Jeddah2. Riyadh 3. Mecca

Ordered Lists

– By default, ordered lists use decimal sequence numbers

(1, 2, 3, …)Example:

1. Jeddah2. Riyadh 3. Mecca

– To change sequence type, use TYPE attribute in <OL> opening tag.

– This attribute takes the following values : A, a, I, i, to change the sequence type.

• Example:<ol type=”A“><li> Jeddah<li> Riyadh<li> Mecca</ol>

• Display:A. JeddahB. Riyadh C. Mecca

– To change the start of the numbering in the order lists, you need to insert the start attribute in the opening tag of the order list.

• Example:<ol start=”5“><li> Jeddah<li> Riyadh<li> Mecca</ol>

• Display:5. Jeddah6. Riyadh 7. Mecca

Different types of ordered lists

Unordered Lists• Example:

• Jeddah• Riyadh • Mecca

• <UL>….</UL> Define an unordered list.

• To assign each item of the list items <li> tag is used. <li> tag is a single tag written in the beginning of the line

for each item.

• By Default, unordered lists use disk symbol.

Unordered Lists

• Example:<ul><li> Jeddah<li> Riyadh<li> Mecca</ul>

• Display:• Jeddah• Riyadh • Mecca

– By default, unordered lists use disk symbol .

Example:

• Jeddah• Riyadh • Mecca

– To change symbol type, use TYPE attribute in <UL> opening tag.

– This attribute takes the following values : ”circle“ and ”square“ to change the symbol type from defaulted symbol ”disk“ to other symbols: ”circle“ and ”square“.

• Example:<ul type=”square“><li> Jeddah<li> Riyadh<li> Mecca</ul>

• Display: Jeddah Riyadh Mecca

Unordered lists with HTML

Definition Lists

• As the name suggests, we use them when we want to include a list of terms following each one of them an explanation or comment.

• Example:

HTML Hyper Text Markup Language

WWW World Wide Web

Definition Lists

• To insert definition list, we need to use three types of tags:

• <DL>….</DL> define an definition list.

• <DT> placed before each term to select it, a single tag.

• <DD> an explanation or comment tag, is also a single tag.

• Example:

<DL><DT> HTML <DD> Hyper Text Markup Language<DT> WWW <DD> World Wide Web

</DL>

• Display:

HTML Hyper Text Markup LanguageWWW World Wide Web

Inserting images

Background Image

• the background attribute is used with the body element to insert a background image into a page:

< body background= “welcome.jpg>”/< body>

22

Images

• The main tag used to insert image into page is <img>.

• It is a single tag, that has many attributes.

• Src attribute is used with <img> tag to specify the location of the image file.

<img src=“welcome.jpg”>

• height and width attributes is used with <img> tag to specify the height and width of the images in pixel.

<img src=“welcome.jpg” height=”50“ width=”50“>

23

• Border attribute is used with <img> tag to specify the width of the border around an image.

<img src=“welcome.jpg” border=”5“>

• Alt a attribute is used with <img> tag to provide alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

<img src=“welcome.jpg” alt=”welcome to my page“>

24

• Align attribute is used with <img> tag to specify the alignment of an image with the text. It has the following attributes: top, middle, bottom for the vertical alignment, and right and left for the horizontal alignment.

26

Background image:IMG element; IMG attributes

27

ImagesGIF: Graphic Interchange Format

• GIF is a file format uses a type of compression which is limited to a total of 256 colors.(28=256); which means each pixel has eight bits signifying its color.

Ex. bckgrnd.gif• When to Use GIFs:

– Any graphics that uses few lines, such as a cartoon.– Images with few colors.

JPEG: Joint Photograph Experts Group• A compression method used that allow high quality

compression which retaining millions of colors.Ex. list.jpg

• It is used when there are a lot of colors.

Ibrahim Al-Atoum

Questions ?Be active !