1 / 48

More About HTML

More About HTML. Tables and Images. Objectives. You will be able to Create tables in HTML. Include images in your HTML page. Create links to other pages on a web page. 2. Tables. HTML tables permit you to have some control over layout while leaving some decisions to the browser.

nen
Télécharger la présentation

More About HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. More About HTML Tables and Images

  2. Objectives You will be able to • Create tables in HTML. • Include images in your HTML page. • Create links to other pages on a web page. 2

  3. Tables • HTML tables permit you to have some control over layout while leaving some decisions to the browser. • <table> ... </table> • Define rows inside a table • <tr> ... </tr> defines a row • Define cells inside a row • <td> ... </td> defines a cell within a row • <th> ... </th> defines a “table heading” cell • Put text or other HTML element into a cell • Including another table 3

  4. Example: Eyeglass Prescription http://www.cse.usf.edu/~turnerr/Web_Application_Design/Downloads/Rx.html http://www.cse.usf.edu/~turnerr/Web_Application_Design/Downloads/RxStyles.html

  5. HTML Table Example: Eyeglass Prescription <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Eyeglass Prescription</title> <link rel="Stylesheet" type="text/css" href="RxStyles.css" /> </head> <body> <table> Table Definition Here </table> </body> </html> 5

  6. Eyeglass Prescription: Heading <tr> <th>Eye </th> <th>Sphere</th> <th>Cyl</th> <th>Axis</th> <th>Prism</th> <th>Base</th> <th>PD</th> </tr> 6

  7. Eyeglass Prescription: Rows 2 and 3 <tr> <td>OD</td> <td>+1.25</td> <td>-2.50</td> <td>111</td> <td>14.50</td> <td>BI</td> <td>28.00</td> </tr> <tr> <td>OS</td> <td>+1.25</td> <td>-7.00</td> <td>121</td> <td>14.50</td> <td>BI</td> <td>28.00</td> </tr> 7

  8. Stylesheet table { font-family: Arial, Sans-Serif; border:solid 1px }

  9. The Table in Chrome 9

  10. Borders • The “border” style in the <table> tag only puts a border around the entire table. • If we want borders around the cells we have to add a style spec for <th> and <td> 10

  11. Borders for Cells 11

  12. Table with Borders on Cells 12

  13. Cell Spacing • But I really want just one line between each pair of cells. • The CSS property border-collapse controls this. 13

  14. Table with No Cell Border Spacing 14

  15. Cell Padding • But the cells seem crowded now. • To provide some margin inside each cell use the padding property on <th> and <td> 15

  16. Table with Cell Padding 16

  17. Alignment • By default anything in a cell is aligned to the left and vertically centered. • To specify alignment use • text-align (horizontal alignment) 17

  18. Table with Cell Text Alignment 18

  19. Alignment • All cells are now right aligned. • The alphabetic cells should be centered. • We can define a class for this.

  20. Alphabetic <td>

  21. Alignment for Alphabetic <td>

  22. Page in Chrome Alphabetic cells are now centered. End of Section

  23. How to Center the Table on the Page • By default the table is in the upper left corner of the page. • I would like to have it centered on the page. • text-align:center doesn’t do this. • margin:auto will make the margins on each side of the table equal. • Center the table horizontally.

  24. RxStyles.css table { font-family: Arial, Sans-Serif; border:solid 1px; border-collapse: collapse; margin:auto; }

  25. Table in Chrome End of Section

  26. Deploy Page to Server • To deploy the page, just copy it into your public.html directory on grad. • Both the .html file and the .css file • Use an SSH client program • WinSCP • Connect to grad.cse.usf.edu

  27. SSH Secure File Transfer Click here

  28. Create Directory public.html Click here If public.html already exists, just double click on its icon to make it your current directory.

  29. Create Directory public.html Note permissions.

  30. Open public.html You may get an error message saying that the directory is empty. That is OK.

  31. Copy Page Files into public.html

  32. public.html

  33. It’s on the Internet Now End of Section

  34. Images in HTML • Use the <img> tag to display an image in an HTML page. • .gif • .jpg • .png • The image is a separate file stored within the web site’s virtual directory. • Typically in /images directory 34

  35. The <img> Tag <img src="filename" alt="text" /> filename is path to image file Normally a relative address e.g. "images/xxx.jpg“ alt is text to be displayed if the image file cannot be found or cannot be displayed. Also used by page readers. 35

  36. Image Example Create a folder called images on your desktop. Download file USF_Bull.gif from the Downloads area of the class web site into images folder: http://www.csee.usf.edu/~turnerr/Web_Application_Design/Downloads/ In Visual Studio, create a new html file and save on desktop as image_example.html 36

  37. Image Example Save on desktop and double click to display file in browser. 37

  38. image_example in Chrome

  39. Deploy image_example to Server • Copy both the images folder and file image_example from the desktop to your public.html directory on grad. • View image example on the web http://www.cse.usf.edu/~turnerr/image_example.html • Replace turnerr with your own username on grad. 39

  40. Image Example on the Web 40 End of Section

  41. Creating Links Links allow a user to jump to other places by simply clicking on them. This is the hyper in hypertext! A link can go to another point in the same document or to a completely different page Anywhere in the Internet. Clicking on the link is like typing the URL into the browser’s address box. 41

  42. Links to Other Pages • A link to a page on a different site must include the full URL <a href="http://www.csee.usf.edu">Back to CSE Home Page</a> This is what the user sees as “the link”. Where to go 42

  43. File simple_link.html <head> <title>A Simple Page with a Link</title> </head> <body> <b> Click on the link below to go to the Computer Science and Engineering Home page. </b> <br /> &nbsp; <br /> <a href="http://www.cse.usf.edu">Back to CSE Home Page</a> </body> </html> 43

  44. simple_link.html in Chrome 44

  45. Links to Other Pages • A link to another page on the same site can use a relative URL • Specification in the link will be appended to the current directory. • This is usually the preferred way to write a link. • Pages can be moved to a different site, or different directory, without updating the links. 45

  46. Link to Page on the Same Site

  47. Link to Page on the Same Site

  48. After Clicking Second Link End of Presentation

More Related