1 Creating Web Pages Part 2. 2 TOPICS Links Links Web Graphics Web Graphics Lists Lists Tables Tables.

11

Creating Web PagesCreating Web Pages

Part 2Part 2

22

TOPICSTOPICS

LinksLinks

Web GraphicsWeb Graphics

ListsLists

TablesTables

33

LINKS:LINKS:The Three TypesThe Three Types

1. To another site:

2. To another page on the same site:

3. To another location on the same page:

href=“fullurl”

href=“relativepathname”

href=“#name”

name=“name”

Where you want Where you want to goto go

Required <a> Attribute(s)Required <a> Attribute(s)

Standard SyntaxStandard Syntax ExampleExample

href=“http://www.yahoo.com”

href=“file1.html”

href=“#sectiona”

name=“sectiona”

Type 1 is pretty straight-forward, types 2 and 3, however, require a little more explanation …

44

LINKS:LINKS:Type 2 – Specifying the href attribute (Type 2 – Specifying the href attribute (same directorysame directory))

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

For example, if file1.html and file2.html were in the same directory and 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 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 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”).entire path from the root (i.e., “c:\webdocs\file2.html”).

file1.html

file2.html file1.html

file2.html

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

55

LINKS:LINKS:Type 2 – Specifying the href attribute (Type 2 – Specifying the href attribute (1 level apart1 level apart))

home.html

clothing.html

products

.. / home.html

/ clothing.html

66

LINKS:LINKS:Type 2 – Specifying the href attribute (Type 2 – Specifying the href attribute (2 levels apart2 levels apart))

file3.html

file4.html

services

../ file3.html.. /

destinations file4.html/ /

77

LINKS:LINKS:Type 2 – Specifying the href attribute (Type 2 – Specifying the href attribute (directories at same leveldirectories at same level))

shoes.html

travel.html

travel.html.. /

shoes.html.. /

services /

products/

88

LINKS:LINKS:Type 3 – To another location on the same pageType 3 – To another location on the same page

99

WEB GRAPHICS:WEB GRAPHICS:The <img> elementThe <img> element

General SyntaxGeneral Syntax

Sample HTML fileSample HTML file

Resulting Web pageResulting Web page

1010

WEB GRAPHICS:WEB GRAPHICS:BitmapsBitmaps

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

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

1111

WEB GRAPHICS:WEB GRAPHICS:jpg and gifjpg and gif

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

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

Large image file sizes mean Large image file sizes mean slow load time for users. slow load time for users. Factors that determine file Factors that determine file size include:size include:• The size of the image.The size of the image.• The type of The type of

compression.compression.• The amount of detail The amount of detail

and color.and color.

jpg gif

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

1212

WEB GRAPHICS:WEB GRAPHICS:Other kinds of gif filesOther kinds of gif files

TransparentTransparent

Animated Animated

1313

LISTS:LISTS:<ul> and <ol><ul> and <ol>

UnorderedUnordered

OrderedOrdered

Sample HTML code As displayed in browser

1414

TABLESTABLESBasic StructureBasic Structure

SyntaxSyntax HTML fileHTML file Web pageWeb page

1515

TABLES:TABLES:colspan and rowspancolspan and rowspan

<table border="1"><table border="1"><tr><tr> <td>Name</td><td>Name</td> <td <td colspan="2"colspan="2">Telephone Numbers</th>>Telephone Numbers</th></tr></tr><tr><tr> <td>Bill Gates</td><td>Bill Gates</td> <td>111-1111</td><td>111-1111</td> <td>222-2222</td><td>222-2222</td></tr></tr></table></table>

HTML fileHTML file Web pageWeb page

<table border="1"><table border="1"><tr><tr> <td>Name</td><td>Name</td> <td>Bill Gates</td><td>Bill Gates</td></tr></tr><tr><tr> <td <td rowspan="2"rowspan="2">Telephone Numbers</td>>Telephone Numbers</td> <td>111-1111</td><td>111-1111</td></tr></tr><tr><tr> <td>222-2222</td><td>222-2222</td></tr></tr></table></table>