More About HTML

1
More About HTML
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
Tables

• Tables permit you to have some control over
  layout while leaving some decisions to the
  browser.
• lttablegt ... lt/tablegt
• Define rows inside a table
• lttrgt ... lt/trgt defines a row
• Define cells inside a row
• lttdgt ... lt/tdgt defines a cell within a row
• ltthgt ... lt/thgt defines a table heading cell
• Put text or other HTML element into a cell
• Including another table

4
Example Eyeglass Prescription
5
HTML Table Example Eyeglass Prescription

• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-transition
  al.dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml" gt
• ltheadgt
• lttitlegtEyeglass Prescriptionlt/titlegt
• lt/headgt
• ltbodygt
• lttable style"font-family Arial, Sans-Serif
  bordersolid 1px"gt
• Table Definition Here
• lt/tablegt
• lt/bodygt
• lt/htmlgt

6
Eyeglass Prescription Heading

• lttrgt
• ltthgtEye lt/thgt
• ltthgtSpherelt/thgt
• ltthgtCyllt/thgt
• ltthgtAxislt/thgt
• ltthgtPrismlt/thgt
• ltthgtBaselt/thgt
• ltthgtPDlt/thgt
• lt/trgt

7
Eyeglass Prescription Rows 2 and 3

• lttrgt
• lttdgtODlt/tdgt
• lttdgt1.25lt/tdgt
• lttdgt-2.50lt/tdgt
• lttdgt111lt/tdgt
• lttdgt14.50lt/tdgt
• lttdgtBIlt/tdgt
• lttdgt28.00lt/tdgt
• lt/trgt
• lttrgt
• lttdgtOSlt/tdgt
• lttdgt1.25lt/tdgt
• lttdgt-7.00lt/tdgt
• lttdgt121lt/tdgt
• lttdgt14.50lt/tdgt
• lttdgtBIlt/tdgt
• lttdgt28.00lt/tdgt
• lt/trgt

8
The Table in IE
9
Borders

• The border style in the lttablegt tag only puts a
  border around the entire table.
• If we want borders around the cells we have to
  add a style spec to each cell

10
Borders for Cells

• lttr gt
• ltth style"bordersolid 1px"gtEye lt/thgt
• ltth style"bordersolid 1px"gtSpherelt/thgt
• ltth style"bordersolid 1px"gtCyllt/thgt
• ltth style"bordersolid 1px"gtAxislt/thgt
• ltth style"bordersolid 1px"gtPrismlt/thgt
• ltth style"bordersolid 1px"gtBaselt/thgt
• ltth style"bordersolid 1px"gtPDlt/thgt
• lt/trgt
• Same for all the lttdgt tags

11
Table with Borders on Cells
12
Cell Spacing

• But I really want just one line between each pair
  of cells.
• cellspacing controls space between cells.
• Set it to 0 to eliminate space between cells.
• lttable style"font-family Arial, Sans-Serif
  bordersolid 1px"
• cellspacing"0"gt

13
Table with Zero Cell Spacing
14
Cell Padding

• But the cells seem crowded now.
• To provide some margin inside each cell use the
  cellpadding attribute
• lttable style"font-family Arial, Sans-Serif
  bordersolid 1px"
• cellspacing"0" cellpadding"5"gt

15
Table with Cell Padding
16
Alignment

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

17
text-align

• lttrgt
• lttd style"bordersolid 1px
  text-alignleft"gtODlt/tdgt
• lttd style"bordersolid 1px
  text-alignright"gt1.25lt/tdgt
• lttd style"bordersolid 1px
  text-alignright"gt-2.50lt/tdgt
• lttd style"bordersolid 1px
  text-alignright"gt111lt/tdgt
• lttd style"bordersolid 1px
  text-alignright"gt14.50lt/tdgt
• lttd style"bordersolid 1px
  text-aligncenter"gtBIlt/tdgt
• lttd style"bordersolid 1px
  text-alignright"gt28.00lt/tdgt
• lt/trgt
• Same with third row.

18
Table with Cell Text Alignment
End of Section
19
Deploy Page to Server

• To deploy the page, just copy it into your
  public.html directory on grad.
• Use an SSH client program
• SSH Secure File Transfer
• WinSCP
• Connect to grad.cse.usf.edu

20
SSH Secure File Transfer
Click here
21
Connect
Click here
22
Enter Your Password
23
Open public.html
24
public.html
25
Drag File into Window
26
Its on the Internet Now
End of Section
27
Images in HTML

• Use the ltimggt tag to display an image in an HTML
  page.
• .gif
• .jpg
• .png
• The image is a separate file stored within the
  web sites virtual directory.
• Typically in /images directory

28
The ltimggt Tag

• ltimg src"filename" alt"text" /gt
• 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

28
29
Image Example

• Create a folder called images on your desktop.
• Download file Nuala.jpg from the Downloads area
  of the class web site into images folder
• http//www.csee.usf.edu/turnerr/Web_Application_D
  esign/Downloads/Nuala.jpg
• In Visual Studio, create a new html file and save
  on desktop as image_example.html

29
30
Image Example
Save on desktop and double click to display file
in browser.
31
View image_example in Browser
32
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.csee.usf.edu/turnerr/image_example.htm
  l
• Replace turnerr with your own NetID (or username
  on grad).

33
Image Example on the Web
33
End of Section
34
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.

34
35
Links to Other Pages

• A link to a page on a different site must include
  the full URL
• lta href"http//www.csee.usf.edu"gtBack to CSE
  Home Pagelt/agt

This is what the user sees as the link.
Where to go
36
File simple_link.html

• ltheadgt
• lttitlegtA Simple Page with a Linklt/titlegt
• lt/headgt
• ltbodygt
• ltbgt
• Click on the link below to go to the Computer
• Science and Engineering Home page.
• lt/bgt
• ltbr /gt
• nbsp
• ltbr /gt
• lta HREF"http//www.cse.usf.edu"gtBack to CSE Home
  Pagelt/agt
• lt/bodygt
• lt/htmlgt

37
simple_link.html on Internet Explorer
38
Validation Failures

• Even though this page works as intended its not
  quite right.
• Look at the HTML in Visual Studio

39
Squiggly underlines indicate validation failures
40
Fixing the Problems
41
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.

42
Links to Pages on the Same Site
As an example, look at the class web site
CIS 4930 Web Application Design
43
Links to Pages on the Same Site
View the source.
44
Links to Pages on the Same Site
Links to another file in the same directory
44
45
Links to Pages on the Same Site
Links to another file in the same directory
45
End of Presentation