Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item...

Lecture 3Kanida Sinmai

[email protected]://mis.csit.sci.tsu.ac.th/kanida

Lists, Images, Tables and Links

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

Unordered HTML Lists<h2>Unordered List with Default Bullets</h2>

<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul>

Unordered HTML Lists• Style Attribute

<ul style="list-style-type:disc"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul>


<ul style="list-style-type:circle"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul>


<ul style="list-style-type:square"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul>


<ul style="list-style-type:none"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul>

Ordered HTML Lists<h2>Ordered List</h2>

<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>

Ordered HTML Lists – Type Attribute

<ol type="1"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>

Ordered HTML Lists – Type 1

<ol type="A"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>

Ordered HTML Lists – Type A

<ol type="a"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>

Ordered HTML Lists – Type a

<ol type="I"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>

Ordered HTML Lists – Type I

<ol type="i"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>

Ordered HTML Lists – Type i

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>

Nested Lists<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li></ul>

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

Images

GIF JPGPNG

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

JPGJPEG (Joint Photographic Expert Group)• Unlimited colors• Compression : more compress, more degrade image

0% compression 80% compression

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

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” />

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.

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>

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>

Table – border style<html><head><style>table, th, td { border: 1px solid black; border-collapse: collapse;}</style></head><body>

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>

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>

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>

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>

Links• HTML links are hyperlinks.• A hyperlink is a text or an image you can click on, and jump to another

document.

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>

Links – target attribute<a href="http://www.google.com/" target="_blank">Google!</a>

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

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>

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>

Image as Link<a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0"></a>

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 id="C4">Chapter 4</h2><p>This chapter explains ba bla bla</p>

Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item...

Documents

Transcript of Lists, Images, Tables and Links. Lists Unordered List The first item The second item The third item...