Media, Tables and Links. Kanida Sinmai

Size: px

Start display at page:

Download "Media, Tables and Links. Kanida Sinmai"

Ezra McKenzie
5 years ago
Views:

1 Media, Tables and Links Kanida Sinmai

2 Images GIF JPG PNG

3 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

4 JPG JPEG (Joint Photographic Expert Group) Unlimited colors Compression : more compress, more degrade image 0% compression 80% compression

5 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

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

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

8 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>

9 YouTube <iframe width="420" height="315" src=" </iframe> <iframe width="420" height="315" src=" </iframe>

10 Tables Tables are defined with the <table> tag. Tables are divided into table rows with the 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.

11 Tables <table style="width:100%"> <td>jill</td> <td>smith</td> <td>50</td> <td>eve</td> <td>jackson</td> <td>94</td> <td>john</td> <td>doe</td> <td>80</td> </table>

12 Table border attribute <table border="1" style="width:100%"> <td>jill</td> <td>smith</td> <td>50</td> <td>eve</td> <td>jackson</td> <td>94</td> <td>john</td> <td>doe</td> <td>80</td> </table>

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

14 Table headings <table style="width:100%"> <th>firstname</th> <th>lastname</th> <th>points</th> <td>eve</td> <td>jackson</td> <td>94</td> </table>

15 Table - colspan <h2>cell that spans two columns:</h2> <table style="width:100%"> <th>name</th> <th colspan="2">telephone</th> <td>bill Gates</td> <td> </td> <td> </td> </table>

16 Table - rowspan <table style="width:100%"> <th>name:</th> <td>bill Gates</td> <th rowspan="2">telephone:</th> <td> </td> <td> </td> </table>

17 Table - caption <table style="width:100%"> <caption>monthly savings</caption> <th>month</th> <th>savings</th> <td>january</td> <td>$100</td> <td>february</td> <td>$50</td> </table>

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

19 Links - Syntax <a href="url">link text</a> url links <a href=" Google</a> Local links <a href="html_images.asp">html Images</a>

20 Links target attribute <a href=" target="_blank">google!</a>

21 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

22 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; textdecoration:underline} </style>

23 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>

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

25 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>

HTML Text Formatting. HTML Session 2 2

HTML Text Formatting. HTML Session 2 2 HTML Session 2 HTML Text Formatting HTML also defines special elements for defining text with a special meaning. - Bold text - Important text - Italic text - Emphasized text