Download presentation
Presentation is loading. Please wait.
1
1 More About HTML Tables and Images
2
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.
3
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
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
55 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"> Eyeglass Prescription Table Definition Here
6
66 Eyeglass Prescription: Heading Eye Sphere Cyl Axis Prism Base PD
7
77 Eyeglass Prescription: Rows 2 and 3 OD +1.25 -2.50 111 14.50 BI 28.00 OS +1.25 -7.00 121 14.50 BI 28.00
8
8 Stylesheet table { font-family: Arial, Sans-Serif; border:solid 1px }
9
99 The Table in Chrome
10
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
11 Borders for Cells
12
12 Table with Borders on Cells
13
13 Cell Spacing But I really want just one line between each pair of cells. The CSS property border-collapse controls this.
14
14 Table with No Cell Border Spacing
15
15 Cell Padding But the cells seem crowded now. To provide some margin inside each cell use the padding property on and
16
16 Table with Cell Padding
17
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
18 Table with Cell Text Alignment
19
19 Alignment All cells are now right aligned. The alphabetic cells should be centered. We can define a class for this.
20
20 Alphabetic
21
21 Alignment for Alphabetic
22
22 Page in Chrome Alphabetic cells are now centered. End of Section
23
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
24 RxStyles.css table { font-family: Arial, Sans-Serif; border:solid 1px; border-collapse: collapse; margin:auto; }
25
25 Table in Chrome End of Section
26
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
27 SSH Secure File Transfer Click here
28
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
29 Create Directory public.html Note permissions.
30
30 Open public.html You may get an error message saying that the directory is empty. That is OK.
31
31 Copy Page Files into public.html
32
32 public.html
33
33 It’s on the Internet Now End of Section
34
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
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
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
37
37 Image Example Save on desktop and double click to display file in browser.
38
38 image_example in Chrome
39
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.
40
40 Image Example on the Web End of Section
41
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
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
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
44 simple_link.html in Chrome
45
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
46 Link to Page on the Same Site
47
47 Link to Page on the Same Site
48
48 After Clicking Second Link End of Presentation
Similar presentations
