1 More About HTML Tables and Images
22 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.
33 Tables HTML tables permit you to have some control over layout while leaving some decisions to the browser.... Define rows inside a table... defines a row Define cells inside a row... defines a cell within a row... defines a “table heading” cell Put text or other HTML element into a cell Including another table
4 Example: Eyeglass Prescription
55 HTML Table Example: Eyeglass Prescription <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Eyeglass Prescription Table Definition Here
66 Eyeglass Prescription: Heading Eye Sphere Cyl Axis Prism Base PD
77 Eyeglass Prescription: Rows 2 and 3 OD BI OS BI 28.00
8 Stylesheet table { font-family: Arial, Sans-Serif; border:solid 1px }
99 The Table in Chrome
10 Borders The “border” style in the tag only puts a border around the entire table. If we want borders around the cells we have to add a style spec for and
11 Borders for Cells
12 Table with Borders on Cells
13 Cell Spacing But I really want just one line between each pair of cells. The CSS property border-collapse controls this.
14 Table with No Cell Border Spacing
15 Cell Padding But the cells seem crowded now. To provide some margin inside each cell use the padding property on and
16 Table with Cell Padding
17 Alignment By default anything in a cell is aligned to the left and vertically centered. To specify alignment use text-align(horizontal alignment)
18 Table with Cell Text Alignment
19 Alignment All cells are now right aligned. The alphabetic cells should be centered. We can define a class for this.
20 Alphabetic
21 Alignment for Alphabetic
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 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
35 The Tag 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.
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: In Visual Studio, create a new html file and save on desktop as image_example.html
37 Image Example Save on desktop and double click to display file in browser.
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 Replace turnerr with your own username on grad.
40 Image Example on the Web 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.
42 A link to a page on a different site must include the full URL Back to CSE Home Page Links to Other Pages Where to go This is what the user sees as “the link”.
43 A Simple Page with a Link Click on the link below to go to the Computer Science and Engineering Home page. Back to CSE Home Page 43 File simple_link.html
44 simple_link.html in Chrome
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.
46 Link to Page on the Same Site
47 Link to Page on the Same Site
48 After Clicking Second Link End of Presentation