1 / 28

Internet Applications Development

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 .

aldon
Download Presentation

Internet Applications Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Internet Applications Development Lecture 4 L. ObeadAlhadreti

  2. Lecture Outline: • lists. • Images.

  3. Inserting lists

  4. 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.

  5. Ordered Lists • Example: • Jeddah • Riyadh • 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,…..).

  6. Ordered Lists • Example: <ol> <li> Jeddah <li> Riyadh <li> Mecca </ol> • Display: • Jeddah • Riyadh • Mecca

  7. By default, ordered lists use decimal sequence numbers (1, 2, 3, …) Example: • Jeddah • Riyadh • 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.

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

  9. 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: • Jeddah • Riyadh • Mecca

  10. Different types of ordered lists

  11. 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.

  12. Unordered Lists • Example: <ul> <li> Jeddah <li> Riyadh <li> Mecca </ul> • Display: • Jeddah • Riyadh • Mecca

  13. 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 typefrom defaulted symbol ”disk“ to other symbols: ”circle“ and ”square“.

  14. Example: <ultype=”square“> <li> Jeddah <li> Riyadh <li> Mecca </ul> • Display: • Jeddah • Riyadh • Mecca

  15. Unordered lists with HTML

  16. 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

  17. 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.

  18. 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

  19. Inserting images

  20. Background Image • the background attribute is used with the body element to insert a background image into a page: <body background= “welcome.jpg”> </body>

  21. 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. <imgsrc=“welcome.jpg”> • height and width attributes is used with <img> tag to specify the height and width of the images in pixel. <imgsrc=“welcome.jpg” height=”50“ width=”50“>

  22. Border attribute is used with <img> tag to specify the width of the border around an image. <imgsrc=“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). <imgsrc=“welcome.jpg” alt=”welcome to my page“>

  23. 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.

  24. Background image:IMG element; IMG attributes

  25. Images GIF: 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

  26. Questions ? Be active !

More Related