1 More About HTML Tables and Images. 22 Objectives You will be able to Create tables in HTML....
-
Upload
cornelia-goodman -
Category
Documents
-
view
222 -
download
1
Transcript of 1 More About HTML Tables and Images. 22 Objectives You will be able to Create tables in HTML....
![Page 1: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/1.jpg)
11
More About HTML
Tables and Images
![Page 2: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/2.jpg)
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.
![Page 3: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/3.jpg)
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
![Page 4: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/4.jpg)
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
![Page 5: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/5.jpg)
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>
![Page 6: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/6.jpg)
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>
![Page 7: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/7.jpg)
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>
![Page 8: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/8.jpg)
8
Stylesheet
table
{
font-family: Arial, Sans-Serif;
border:solid 1px
}
![Page 9: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/9.jpg)
9 9
The Table in Chrome
![Page 10: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/10.jpg)
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>
![Page 11: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/11.jpg)
11 11
Borders for Cells
![Page 12: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/12.jpg)
12 12
Table with Borders on Cells
![Page 13: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/13.jpg)
13 13
Cell Spacing
But I really want just one line between each pair of cells.
The CSS property border-collapse controls this.
![Page 14: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/14.jpg)
14 14
Table with No Cell Border Spacing
![Page 15: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/15.jpg)
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>
![Page 16: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/16.jpg)
16 16
Table with Cell Padding
![Page 17: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/17.jpg)
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)
![Page 18: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/18.jpg)
18 18
Table with Cell Text Alignment
![Page 19: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/19.jpg)
19
Alignment
All cells are now right aligned.
The alphabetic cells should be centered.
We can define a class for this.
![Page 20: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/20.jpg)
20
Alphabetic <td>
![Page 21: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/21.jpg)
21
Alignment for Alphabetic <td>
![Page 22: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/22.jpg)
22
Page in Chrome
Alphabetic cells are now centered.
End of Section
![Page 23: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/23.jpg)
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.
![Page 24: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/24.jpg)
24
RxStyles.css
table
{
font-family: Arial, Sans-Serif;
border:solid 1px;
border-collapse: collapse;
margin:auto;
}
![Page 25: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/25.jpg)
25
Table in Chrome
End of Section
![Page 26: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/26.jpg)
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
![Page 27: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/27.jpg)
27
SSH Secure File Transfer
Click here
![Page 28: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/28.jpg)
28
Create Directory public.html
Click here
If public.html already exists, just double click on its icon to make it your current directory.
![Page 29: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/29.jpg)
29
Create Directory public.html
Note permissions.
![Page 30: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/30.jpg)
30
Open public.html
You may get an error message saying that the directory is empty.
That is OK.
![Page 31: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/31.jpg)
31
Copy Page Files into public.html
![Page 32: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/32.jpg)
32
public.html
![Page 33: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/33.jpg)
33
It’s on the Internet Now
End of Section
![Page 34: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/34.jpg)
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
![Page 35: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/35.jpg)
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.
![Page 36: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/36.jpg)
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
![Page 37: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/37.jpg)
37 37
Image Example
Save on desktop and double click to display file in browser.
![Page 38: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/38.jpg)
38
image_example in Chrome
![Page 39: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/39.jpg)
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.
![Page 40: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/40.jpg)
40
Image Example on the Web
End of Section
![Page 41: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/41.jpg)
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.
![Page 42: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/42.jpg)
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”.
![Page 43: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/43.jpg)
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
![Page 44: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/44.jpg)
44 44
simple_link.html in Chrome
![Page 45: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/45.jpg)
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.
![Page 46: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/46.jpg)
46
Link to Page on the Same Site
![Page 47: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/47.jpg)
47
Link to Page on the Same Site
![Page 48: 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.](https://reader035.fdocuments.us/reader035/viewer/2022062409/56649f1e5503460f94c35de6/html5/thumbnails/48.jpg)
48
After Clicking Second Link
End of Presentation