Images and Tables

1. Images and Tables

2. Displaying Image <img src="URL or location of the file" /> <IMG SRC="mypic.gif" align=top height=50 width=40 /> Attributes: SRC="mypic.gif" – Name of the picture file SRC="pic/mygif.jpg" – Name of file found in pic directory Optional ALIGN="bottom", "middle", "top" • ALIGN tells the browser how to align the image with the neighboring text. HEIGHT="n" or WIDTH="n" • HEIGHT and WIDTH specify the display height and width (in pixels) for the image.

3. Image Links • Use the <a></a> tags to define the start and ending of an anchor <a href=http://www.espn.com/ >ESPN Home</a> <a href=http://www.espn.com/ > <img src="pic/espn.gif"/></a> <a href=http://www.mu.edu/ > <img src="http://www.mu.edu/pic/mu.gif" /></a>

4. HTML - Other Links • HTML - Email Links <a href="mailto:ow@mu.edu?subject=Feedback"> Send me a Message</a> • HTML – Download document <a href=https://marqone.busadm.mu.edu/~tow/resume.pdf>My Resume</a> or <a href="resume.pdf">My Resume</a>

5. HTML - Images • Use the <img /> tag to place an image • <img src="mypic.gif" /> • Determining the source of image • src=http://www.mu.edu/pics/union.gif • src="union.gif" • src="pictures/union.gif" • src="../pictures/union.gif" • HTML – Image Height and Width • <img src="union.gif" height="50" width="100"/>

6. Controlling the Font and Size My text <font size= +2>resize the text</FONT> text My text <font size= -2>resize the text</FONT> text <font size=2>define the font size</font> <font size=2 face="arial" color="red">define the font face</font> <font face="arial, helvetica">browser will try Arial first, then Helvetica if Arial is not present</font>

7. Basic tags <TABLE> defines a table in HTML</TABLE> <CAPTION>the title of the table</CAPTION> <TR>a row within a table</TR> <TH>a table header cell</TH> <TD>a table data cell with the text aligned left and centered vertically</TD> Attributes BORDER - appearing in the TABLE tag ALIGN - can appear in CAPTION, TR, TH, or TD values: left, center, and right, e.g. align=center. VALIGN - can appear inside a TR, TH, or TD values: top, middle, bottom. WIDTH=<value_or_percent> Table

8. A Table Template • <TABLE border=1> <!-- start table --> • <TR> <!-- start first row --> • <TH> first header cell contents </TH> • <TH> last header cell contents </TH> • </TR> <!-- end first row --> • <TR> <!-- Start the second row --> • <TD> second row, first cell contents </TD> • <TD> second row, last cell contents </TD> • </TR> <!-- end of second row --> • <TR> <!-- Start last row --> • <TD> last row, first cell contents </TD> • <TD> last row, last cell contents </TD> • </TR> • </TABLE> <!-- end table -->

9. Images - ex3.html • Create a table with 3 rows and 3 columns. • Add an image or words into each cell.

10. Other things to define the “table” <table border=0 width=600 height=200 cellspacing=0 cellpadding=5> <td width=400 height=40 bgcolor=#B4F864 align="center"> <td colspan="2"> <td rowspan="2"> Try with different attribute values to get what you want.

11. Other things to define the “table” <td colspan="2"> <td rowspan="2">

12. Other things to define the “table” <td rowspan="2"> <table> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td rowspan="2"> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table>

13. Other things to define the “table” <td colspan="2"> <table> <tr> <td> </td> <td colspan="2"></td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table>

14. ex4.html

15. Ex4.html