Download presentation
Presentation is loading. Please wait.
1
Lists, Images, Tables and Links
Lecture 3 Kanida Sinmai
2
Lists Unordered List The first item The second item The third item
The fourth item Ordered List The first item The second item The third item The fourth item
3
Unordered HTML Lists <h2>Unordered List with Default Bullets</h2> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
4
Unordered HTML Lists Style Attribute
<ul style="list-style-type:disc"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
5
Unordered HTML Lists Style Attribute
<ul style="list-style-type:circle"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
6
Unordered HTML Lists Style Attribute
<ul style="list-style-type:square"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
7
Unordered HTML Lists Style Attribute
<ul style="list-style-type:none"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
8
Ordered HTML Lists <h2>Ordered List</h2> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
9
Ordered HTML Lists – Type Attribute
10
Ordered HTML Lists – Type 1
<ol type="1"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
11
Ordered HTML Lists – Type A
<ol type="A"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
12
Ordered HTML Lists – Type a
<ol type="a"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
13
Ordered HTML Lists – Type I
<ol type="I"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
14
Ordered HTML Lists – Type i
<ol type="i"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
15
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>
16
Nested Lists <ul> <li>Coffee</li> <li>Tea <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li>
17
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
18
Images GIF JPG PNG
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% compression 80% 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 <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” />
23
Video <!DOCTYPE html> <html> <body>
<video width="400" controls> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video> <p> Video courtesy of <a href=" target="_blank">Big Buck Bunny</a>. </p> </body> </html>
24
Audio <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
25
YouTube <iframe width="420" height="315" src=" </iframe> <iframe width="420" height="315" src=" </iframe>
26
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.
27
Tables <table style="width:100%"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <td>Eve</td> <td>Jackson</td> <td>94</td> <td>John</td> <td>Doe</td> <td>80</td> </table>
28
Table – border attribute
<table border="1" style="width:100%"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <td>Eve</td> <td>Jackson</td> <td>94</td> <td>John</td> <td>Doe</td> <td>80</td> </table>
29
Table – border style <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body>
30
Table headings <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Points</th> </tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </table>
31
Table - colspan <h2>Cell that spans two columns:</h2> <table style="width:100%"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <td>Bill Gates</td> <td> </td> <td> </td> </table>
32
Table - rowspan <table style="width:100%"> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <th rowspan="2">Telephone:</th> <td> </td> <td> </td> </table>
33
Table - caption <table style="width:100%"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <td>January</td> <td>$100</td> <td>February</td> <td>$50</td> </table>
34
Links HTML links are hyperlinks.
A hyperlink is a text or an image you can click on, and jump to another document.
35
Links - Syntax <a href="url">link text</a> url links <a href=" Google</a> Local links <a href="html_images.asp">HTML Images</a>
36
Links – target attribute
<a href=" target="_blank">Google!</a>
37
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
38
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>
39
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>
40
Image as Link <a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0"> </a>
41
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> <h2>Chapter 3</h2> <h2 id="C4">Chapter 4</h2>
Similar presentations
