Embed Size (px)
Citation preview
11
More About HTML
Tables and Images
2 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.
3 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
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 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>
6 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>
7 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>
8
Stylesheet
table
{
font-family: Arial, Sans-Serif;
border:solid 1px
}
9 9
The Table in Chrome
10 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>
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 <th> and <td>
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
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 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
35 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.
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
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
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
<a href="http://www.csee.usf.edu">Back to CSE Home Page</a>
Links to Other Pages
Where to go
This is what the user sees as “the link”.
43
<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 />
<br />
<a href="http://www.cse.usf.edu">Back to CSE Home Page</a>
</body>
</html>
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
Link to Page on the Same Site
47
Link to Page on the Same Site
48
After Clicking Second Link
End of Presentation
