Creating Web Pages

1
Creating Web Pages

• Part 2

2
TOPICS

• Links
• Web Graphics
• Lists
• Tables

3
LINKSThe Three Types
Where you want to go Required ltagt Attribute(s) Required ltagt Attribute(s)
Where you want to go Standard Syntax Example
hreffullurl
1. To another site
hrefhttp//www.yahoo.com
2. To another page on the same site
hrefrelativepathname
hreffile1.html
3. To another location on the same page
hrefname
hrefsectiona
namesectiona
namename
Type 1 is pretty straight-forward, types 2 and 3,
however, require a little more explanation
4
LINKSType 2 Specifying the href attribute
(same directory)

• Because of the large number of files involved,
  Web sites usually need to have a hierarchical
  subdirectory structure

file1.html
file2.html
file2.html
file1.html

• To make it easier to create files on one machine
  and then upload them onto another (server)
  machine, the href pathnames in links are usually
  stated in relative, rather than absolute, terms.

• For example, if file1.html and file2.html were in
  the same directory and file1.html contained a
  link to file2.html, the href would simply be the
  name of the file (i.e.,file2.html) rather than
  being a reference to the entire path from the
  root (i.e., c\webdocs\file2.html).

5
LINKSType 2 Specifying the href attribute (1
level apart)
home.html
/
clothing.html
products
clothing.html
/
..
home.html
6
LINKSType 2 Specifying the href attribute (2
levels apart)
file3.html
/
destinations
file4.html
/
services
file4.html
/
/
..
..
file3.html
7
LINKSType 2 Specifying the href attribute
(directories at same level)
shoes.html
/
/
travel.html
..
services
travel.html
shoes.html
/
/
products
..
8
LINKSType 3 To another location on the same
page
9
WEB GRAPHICSThe ltimggt element

• General Syntax

• Sample HTML file

• Resulting Web page

10
WEB GRAPHICSBitmaps

• A raw graphic file in the form of a bitmap or a
  working file from a graphic editing tool defines
  the color of each individual pixel.

• These files are too large for the Web and should
  be avoided. (The file for the .bmp bitmap
  picture to the right is 193K.)

11
WEB GRAPHICSjpg and gif
jpg

• JPG compresses images and is best for full-color
  photographic images.

gif

• GIFs are best for line art, logos, and cartoons.

• Large image file sizes mean slow load time for
  users. Factors that determine file size include
• The size of the image.
• The type of compression.
• The amount of detail and color.

• A good rule of thumb is to keep graphic files
  smaller than 50KB.

12
WEB GRAPHICSOther kinds of gif files

• Transparent

• Animated

13
LISTSltulgt and ltolgt
Sample HTML code
As displayed in browser

• Unordered

• Ordered

14
TABLESBasic Structure
Syntax
HTML file
Web page
15
TABLEScolspan and rowspan
HTML file
Web page

• lttable border"1"gt
• lttrgt
• lttdgtNamelt/tdgt
• lttd colspan"2"gtTelephone Numberslt/thgt
• lt/trgt
• lttrgt
• lttdgtBill Gateslt/tdgt
• lttdgt111-1111lt/tdgt
• lttdgt222-2222lt/tdgt
• lt/trgt
• lt/tablegt

lttable border"1"gt lttrgt lttdgtNamelt/tdgt
lttdgtBill Gateslt/tdgt lt/trgt lttrgt lttd
rowspan"2"gtTelephone Numberslt/tdgt
lttdgt111-1111lt/tdgt lt/trgt lttrgt lttdgt222-2222lt/tdgt lt
/trgt lt/tablegt