lists, images, tables and links. lists unordered list the first item the second item the third item...
TRANSCRIPT
![Page 1: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/1.jpg)
Lecture 3Kanida Sinmai
[email protected]://mis.csit.sci.tsu.ac.th/kanida
Lists, Images, Tables and Links
![Page 2: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/2.jpg)
ListsUnordered List• The first item• The second item• The third item• The fourth item
Ordered List1. The first item2. The second item3. The third item4. The fourth item
![Page 3: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/3.jpg)
Unordered HTML Lists<h2>Unordered List with Default Bullets</h2>
<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul>
![Page 4: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/4.jpg)
Unordered HTML Lists• Style Attribute
<ul style="list-style-type:disc"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul>
![Page 5: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/5.jpg)
Unordered HTML Lists• Style Attribute
<ul style="list-style-type:circle"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul>
![Page 6: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/6.jpg)
Unordered HTML Lists• Style Attribute
<ul style="list-style-type:square"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul>
![Page 7: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/7.jpg)
Unordered HTML Lists• Style Attribute
<ul style="list-style-type:none"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul>
![Page 8: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/8.jpg)
Ordered HTML Lists<h2>Ordered List</h2>
<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>
![Page 9: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/9.jpg)
Ordered HTML Lists – Type Attribute
![Page 10: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/10.jpg)
<ol type="1"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>
Ordered HTML Lists – Type 1
![Page 11: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/11.jpg)
<ol type="A"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>
Ordered HTML Lists – Type A
![Page 12: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/12.jpg)
<ol type="a"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>
Ordered HTML Lists – Type a
![Page 13: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/13.jpg)
<ol type="I"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>
Ordered HTML Lists – Type I
![Page 14: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/14.jpg)
<ol type="i"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>
Ordered HTML Lists – Type i
![Page 15: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/15.jpg)
HTML Description Lists<dl> <dt>Coffee</dt> <dd>black hot drink</dd> <dd>Mocka</dd> <dd>Late</dd>
<dt>Milk</dt> <dd>- white cold drink</dd></dl>
![Page 16: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/16.jpg)
Nested Lists<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li></ul>
![Page 17: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/17.jpg)
Lists Summary• <ul> element to define an unordered list• style attribute to define the bullet style• <ol> element to define an ordered list• type attribute to define the numbering type• <li> element to define a list item• <dl> element to define a description list• <dt> element to define the description term• <dd> element to define the description data• Lists can be nested inside lists
![Page 18: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/18.jpg)
Images
GIF JPGPNG
![Page 19: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/19.jpg)
GIFGraphic 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
![Page 20: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/20.jpg)
JPGJPEG (Joint Photographic Expert Group)• Unlimited colors• Compression : more compress, more degrade image
0% compression 80% compression
![Page 21: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/21.jpg)
PNGPNG (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
![Page 22: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/22.jpg)
Images• In HTML, images are defined with the <img> tag.• The <img> 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:
<img src="url" alt="some_text” />e.g.<img src="wrongname.gif" alt="HTML5 Icon”/>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128” />
![Page 23: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/23.jpg)
Tables• Tables are defined with the <table> tag.• Tables are divided into table rows with the <tr> tag.• Table rows are divided into table data with the <td> tag.• A table row can also be divided into table headings with the <th> tag.
![Page 24: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/24.jpg)
Tables <table style="width:100%"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr></table>
![Page 25: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/25.jpg)
Table – border attribute<table border="1" style="width:100%"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr></table>
![Page 26: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/26.jpg)
Table – border style<html><head><style>table, th, td { border: 1px solid black; border-collapse: collapse;}</style></head><body>
![Page 27: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/27.jpg)
Table headings<table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Points</th> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr></table>
![Page 28: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/28.jpg)
Table - colspan<h2>Cell that spans two columns:</h2><table style="width:100%"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr></table>
![Page 29: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/29.jpg)
Table - rowspan<table style="width:100%"> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr></table>
![Page 30: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/30.jpg)
Table - caption<table style="width:100%"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr></table>
![Page 31: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/31.jpg)
Links• HTML links are hyperlinks.• A hyperlink is a text or an image you can click on, and jump to another
document.
![Page 32: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/32.jpg)
Links - Syntax<a href="url">link text</a>
url links<a href="http://www.google.com/">Visit Google</a>
Local links<a href="html_images.asp">HTML Images</a>
![Page 33: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/33.jpg)
Links – target attribute<a href="http://www.google.com/" target="_blank">Google!</a>
![Page 34: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/34.jpg)
Links - ColoursBy 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
![Page 35: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/35.jpg)
Links – Colours using style<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}</style>
![Page 36: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/36.jpg)
Links – Colours using style<head><style>********</style></head><body><p>You can change the default colors of links</p><a href="html_images.asp" target="_blank">HTML Images</a> </body></html>
![Page 37: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/37.jpg)
Image as Link<a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0"></a>
![Page 38: Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item The fourth item Ordered List 1.The first item 2.The](https://reader035.vdocuments.us/reader035/viewer/2022081513/56649e7c5503460f94b7f0d9/html5/thumbnails/38.jpg)
Link – create a bookmark
<p><a href="#C4">Jump to Chapter 4</a></p>
<h2>Chapter 1</h2><p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2><p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2><p>This chapter explains ba bla bla</p>
<h2 id="C4">Chapter 4</h2><p>This chapter explains ba bla bla</p>