Internet Applications Development Lecture 4 L. 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.Jeddah 2.Riyadh 3.Mecca …. Define an ordered list. To assign each item of the list items, tag is used. 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: Jeddah Riyadh Mecca Display: 1.Jeddah 2.Riyadh 3.Mecca Ordered Lists

–By default, ordered lists use decimal sequence numbers (1, 2, 3, …) Example: 1.Jeddah 2.Riyadh 3.Mecca –To change sequence type, use TYPE attribute in opening tag. –This attribute takes the following values ​​ : A, a, I, i, to change the sequence type.

Example: Jeddah Riyadh Mecca Display: A.Jeddah B.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: Jeddah Riyadh Mecca Display: 5.Jeddah 6.Riyadh 7.Mecca

Different types of ordered lists

Unordered Lists Example: Jeddah Riyadh Mecca …. Define an unordered list. To assign each item of the list items tag is used. 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: Jeddah Riyadh Mecca Display: Jeddah Riyadh Mecca

–By default, unordered lists use disk symbol. Example: Jeddah Riyadh Mecca –To change symbol type, use TYPE attribute in 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: Jeddah Riyadh Mecca 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: …. define an definition list. placed before each term to select it, a single tag. an explanation or comment tag, is also a single tag.

Example: ‎ ‎ HTML Hyper Text Markup Language‎ ‎ WWW World Wide Web‎‎ Display: HTML Hyper Text Markup Language WWW World Wide Web

Inserting images

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

22 Images The main tag used to insert image into page is. It is a single tag, that has many attributes. Src attribute is used with tag to specify the location of the image file. height and width attributes is used with tag to specify the height and width of the images in pixel.

23 Border attribute is used with tag to specify the width of the border around an image. Alt a attribute is used with 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).

24 Align attribute is used with 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 Images GIF: Graphic Interchange Format GIF is a file format uses a type of compression which is limited to a total of 256 colors.(2 8 =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 !