1 creating web pages part 2. 2 topics links links web graphics web graphics lists lists tables...
TRANSCRIPT
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
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>