Internet Applications Development Lecture 4 L. Obead Alhadreti
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
• <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. 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 <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. 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:
<ol start=”5“>
<li> Jeddah
<li> Riyadh
<li> Mecca
</ol>
• Display:
5. Jeddah
6. 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 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:
<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 !
Related Documents
