Media, Tables and Links Kanida Sinmai ksinmai@hotmail.com http://mis.csit.sci.tsu.ac.th/kanida
Images GIF JPG PNG
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
JPG JPEG (Joint Photographic Expert Group) Unlimited colors Compression : more compress, more degrade image 0% compression 80% compression
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
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 />
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="https://www.bigbuckbunny.org/" target="_blank">big Buck Bunny</a>. </p> </body> </html>
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>
YouTube <iframe width="420" height="315" src="https://www.youtube.com/embed/xgsy3_czz8k"> </iframe> <iframe width="420" height="315" src="https://www.youtube.com/embed/xgsy3_czz8k?autoplay=1"> </iframe>
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.
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>
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>
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%"> <th>firstname</th> <th>lastname</th> <th>points</th> <td>eve</td> <td>jackson</td> <td>94</td> </table>
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>555 77 854</td> <td>555 77 855</td> </table>
Table - rowspan <table style="width:100%"> <th>name:</th> <td>bill Gates</td> <th rowspan="2">telephone:</th> <td>555 77 854</td> <td>555 77 855</td> </table>
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>
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 - 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
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>
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>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>