Download presentation
Presentation is loading. Please wait.
Published byWillis Pearson Modified over 9 years ago
1
Lists, Images, Tables and Links
2
Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The second item 3.The third item 4.The fourth item
3
Unordered HTML Lists Unordered List with Default Bullets Coffee Tea Milk
4
Unordered HTML Lists Style Attribute Coffee Tea Milk
5
Unordered HTML Lists Style Attribute Coffee Tea Milk
6
Unordered HTML Lists Style Attribute Coffee Tea Milk
7
Unordered HTML Lists Style Attribute Coffee Tea Milk
8
Ordered HTML Lists Ordered List Coffee Tea Milk
9
Ordered HTML Lists – Type Attribute
10
Coffee Tea Milk Ordered HTML Lists – Type 1
11
Coffee Tea Milk Ordered HTML Lists – Type A
12
Coffee Tea Milk Ordered HTML Lists – Type a
13
Coffee Tea Milk Ordered HTML Lists – Type I
14
Coffee Tea Milk Ordered HTML Lists – Type i
15
HTML Description Lists Coffee black hot drink Mocka Late Milk - white cold drink
16
Nested Lists Coffee Tea Black tea Green tea Milk
17
Lists Summary element to define an unordered list style attribute to define the bullet style element to define an ordered list type attribute to define the numbering type element to define a list item element to define a description list element to define the description term element to define the description data Lists can be nested inside lists
18
Images GIFJPGPNG
19
GIF Graphic Interchange Format Maximum number of 256 colors Can be Animated Transparency : allow one color Interlaced : low resolution to higher – from blur, low-detail to successive layer
20
JPG JPEG (Joint Photographic Expert Group) Unlimited colors Compression : more compress, more degrade image 0% compression80% compression
21
PNG PNG (Portable Network Graphics) Without copyright limitation (that found in GIF) Vary in color: PNG-8 (256 colors) – PNG-24 (millions colors) Transparency PNG-24 - file size is larger than JPG PNG-8 - file size is lower compared with GIF
22
Images In HTML, images are defined with the tag. The tag is empty, it contains attributes only, and does not have a closing tag. The src attribute specifies the URL (web address) of the image: e.g.
23
Tables Tables are defined with the tag. Tables are divided into table rows with the tag. Table rows are divided into table data with the tag. A table row can also be divided into table headings with the tag.
24
Tables Jill Smith 50 Eve Jackson 94 John Doe 80
25
Table – border attribute Jill Smith 50 Eve Jackson 94 John Doe 80
26
Table – border style table, th, td { border: 1px solid black; border-collapse: collapse; }
27
Table headings Firstname Lastname Points Eve Jackson 94
28
Table - colspan Cell that spans two columns: Name Telephone Bill Gates 555 77 854 555 77 855
29
Table - rowspan Name: Bill Gates Telephone: 555 77 854 555 77 855
30
Table - caption Monthly savings Month Savings January $100 February $50
31
Links HTML links are hyperlinks. A hyperlink is a text or an image you can click on, and jump to another document.
32
Links - Syntax link text url links Visit Google Local links HTML Images
33
Links – target attribute Google!
34
Links - Colours By default, a link will appear like this (in all browsers): An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red
35
Links – Colours using style a:link {color:green; background-color:transparent; text-decoration:none} a:visited {color:pink; background-color:transparent; text-decoration:none} a:hover {color:red; background-color:transparent; text-decoration:underline} a:active {color:yellow; background-color:transparent; text- decoration:underline}
36
Links – Colours using style ******** You can change the default colors of links HTML Images
37
Image as Link
38
Link – create a bookmark Jump to Chapter 4 Chapter 1 This chapter explains ba bla bla Chapter 2 This chapter explains ba bla bla Chapter 3 This chapter explains ba bla bla Chapter 4 This chapter explains ba bla bla
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.