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