1 Creating Web Pages Part 2

2 TOPICS Links Links Web Graphics Web Graphics Lists Lists Tables Tables

3 LINKS: The 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 to go Required Attribute(s) Standard Syntax Example href=“ href=“file1.html” href=“#sectiona” name=“sectiona” Type 1 is pretty straight-forward, types 2 and 3, however, require a little more explanation …

4 LINKS: Type 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 Because of the large number of files involved, Web sites usually need to have a hierarchical subdirectory structure 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”). 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”). file1.html file2.html file1.html file2.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. 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.

5 LINKS: Type 2 – Specifying the href attribute ( 1 level apart ) home.html clothing.html products.. / home.html / clothing.html

6 LINKS: Type 2 – Specifying the href attribute ( 2 levels apart ) file3.html file4.html services.. / file3.html.. / destinationsfile4.html / /

7 LINKS: Type 2 – Specifying the href attribute ( directories at same level ) shoes.html travel.html.. / shoes.html.. / services / products /

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

9 WEB GRAPHICS: The element General Syntax General Syntax Sample HTML file Sample HTML file Resulting Web page Resulting Web page

10 WEB GRAPHICS: Bitmaps These files are too large for the Web and should be avoided. (The file for the.bmp bitmap picture to the right is 193K.) These files are too large for the Web and should be avoided. (The file for the.bmp bitmap picture to the right is 193K.) 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. 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.

11 WEB GRAPHICS: jpg and gif JPG compresses images and is best for full-color photographic images. JPG compresses images and is best for full-color photographic images. GIFs are best for line art, logos, and cartoons. 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: Large image file sizes mean slow load time for users. Factors that determine file size include: The size of the image.The size of the image. The type of compression.The type of compression. The amount of detail and color.The amount of detail and color. jpg gif A good rule of thumb is to keep graphic files smaller than 50KB. A good rule of thumb is to keep graphic files smaller than 50KB.

12 WEB GRAPHICS: Other kinds of gif files Transparent Transparent Animated Animated

13 LISTS: and LISTS: and Unordered Unordered Ordered Ordered Sample HTML codeAs displayed in browser

14 TABLES Basic Structure Syntax HTML file Web page

15 TABLES: colspan and rowspan <tr> Name Name Telephone Numbers Telephone Numbers </tr><tr> Bill Gates Bill Gates </tr></table> HTML file Web page <tr> Name Name Bill Gates Bill Gates </tr><tr> Telephone Numbers Telephone Numbers </tr><tr> </tr></table>