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

Images. Tables. Frames. Forms.

DMFD F2007

IT University of Copenhagen

27.02.2007

Digital Media: Communication and Design F2007

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


Index



Tables

Two typesTabular dataLayout (now we should use stylesheets)

ElementsTable: <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>[email protected]</td></tr><tr>

<td>Student 2</td><td>5</td><td>[email protected]</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





Index



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

AdvantagesAllow to have parts scrollable and other staticDisplay documents from another server

DisadvantagesEach page is formed by many documentsNot accessible for search enginesDifficult to bookmarkBad accessibility for screen readers


Index



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 dataLayout with tables

Forms:Example Implement the survey you designed last

Thursday


Questions

Documents

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