Images. Tables. Frames. Forms.

Images. Tables. Frames. Forms. DMFD F2007 IT University of Copenhagen 27.02.2007

Goals of the lecture • Display images and other media • Present tabular data • Use frames for the layout of the web page • Implement forms to collect information

Index • Images and other media • Tables • Frames • Forms

Images • <img /> • Inline element • <img src=“URL” alt=“text” /> • <img src=“URL” alt=“text” width=“number” height=“number” /> • Ex: • <img src=“http://www1.itu.dk/graphics/ITU-library/Internet/Design/Logo/inter_big_logo_eng.gif” width=“400” height=“44” alt=“ITU” />

Images II • Bottom of image aligned with text • Alternative text is required • Recommended to use width and height • Better in CSS • Not recommended to resize an image

Images III • Presentational attributes (deprecated) • align=“position” • top, middle, bottom • left, right • border=“number”

Images IV • Image maps • Multiple links in the same image • Client-side: info in the document • Server-side: info in the server (discouraged)

Embedded media • Movies, Flash, Java applets… • object: recommended for all media • applet: Java applets, deprecated • embed: non-standard

Object • <object><param />…</object> • Place media objects in the web document • Videos (QuickTime, WMP, Flash) • Flash animations • Images • Not fully supported by all browsers • <param> used to specify runtime settings

Object II <object type="application/x-shockwave-flash" data="http://www.youtube.com/v/UTSdUOC8Kac" width="425" height="350" id="VideoPlayback"> <param name="movie" value="http://www.youtube.com/v/UTSdUOC8Kac" /> <param name="allowScriptAcess" value="sameDomain" /> <param name="quality" value="best" /> <param name="bgcolor" value="#FFFFFF" /> <param name="scale" value="noScale" /> <param name="salign" value="TL" /> <param name="FlashVars" value="playerMode=embedded" /> </object>

Embed • <embed>…</embed> • Created by Netscape for plug-in media • Non-standard, but very popular • <noembed>…</noembed> used to provide alternative content

Embed II <object width="425" height="350"> <param name="movie" value="http://www.youtube.com/v/JR_naKxLEPc"></param> <param name="wmode" value="transparent"></param> <embed src="http://www.youtube.com/v/JR_naKxLEPc" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed> </object>

Tables • Two types • Tabular data • Layout (now we should use stylesheets) • Elements • Table: <table>…</table> • Row: <tr>…</tr> • Element in a row (cell): <td>…</td>

Tables II • Example <table> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>

Tables III • Table headers • <th>…</th> • Summary or caption • <table summary=“…”>…</table> • <table><caption>Title of the table</caption>…</table>

Tables IV <table summary=“Students enrolled in the course, group they belong to, and e-mail”> <caption>Students in the course</caption> <tr> <th>Name</th><th>Group</th><th>e-mail</th> </tr> <tr> <td>Student 1</td><td>3</td><td>name1@itu.dk</td> </tr> <tr> <td>Student 2</td><td>5</td><td>name2@itu.dk</td> </tr> </table>

Tables V • Column span • <td colspan=“2”> • The cell occupies two cells in the same row • Row span • <td rowspan=“2”> • The cell occupies two cells in the same column

Layout tables • Use only the basic elements: table, tr, td • Avoid nesting tables • Keep the structure and markup simple • Avoid empty rows/cells

Frames • Divide the window into subwindows • Each subwindow displays a different document • Each subwindow is scrollable independently

Frames II • Main document contains frames Title Menu Main document

Frames III • Frameset • <frameset>…</frameset> • Substitutes <body> • Frame • <frame src=“URL” /> <frameset cols=“*,*”> <frame src=“menu.html” name=“menu” /> <frame src=“content.html” name=“main” /> </frameset>

Frames IV • Advantages • Allow to have parts scrollable and other static • Display documents from another server • Disadvantages • Each page is formed by many documents • Not accessible for search engines • Difficult to bookmark • Bad accessibility for screen readers

Forms • Used to transmit information to the server • Uses: • Search box, sign up, surveys… • Information is processed by an application in the server (cgi, php, asp…) • <form action=“URL”>…</form>

Forms II <form action=“/cgi-bin/action.cgi” method=“post”> <p> First name: <input type=“text” name=“firstname” /><br /> Last name: <input type=“text” name=“lastname” /><br /> </p> <input type=“submit” value=“Search” />

Forms III: form controls • Single line • Password • Checkboxes • Radio buttons • Submit and reset buttons • File upload

Forms IV input type=“text” input type=“radio” input type=“checkbox” input type=“submit” input type=“reset”

Today’s assignment • Tables: • Present tabular data • Layout with tables • Forms: • Example • Implement the survey you designed last Thursday

Questions

Images. Tables. Frames. Forms.