Upload
aldon
View
42
Download
0
Tags:
Embed Size (px)
DESCRIPTION
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 . - PowerPoint PPT Presentation
Citation preview
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 !