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

  • Published on
    13-Dec-2015

  • View
    212

  • Download
    0

Embed Size (px)

Transcript

  • Slide 1

1 Creating Web Pages Part 2 Slide 2 2 TOPICS Links Links Web Graphics Web Graphics Lists Lists Tables Tables Slide 3 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=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 Slide 4 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. Slide 5 5 LINKS: Type 2 Specifying the href attribute ( 1 level apart ) home.html clothing.html products.. / home.html / clothing.html Slide 6 6 LINKS: Type 2 Specifying the href attribute ( 2 levels apart ) file3.html file4.html services.. / file3.html.. / destinationsfile4.html / / Slide 7 7 LINKS: Type 2 Specifying the href attribute ( directories at same level ) shoes.html travel.html.. / shoes.html.. / services / products / Slide 8 8 LINKS: Type 3 To another location on the same page Slide 9 9 WEB GRAPHICS: The element General Syntax General Syntax Sample HTML file Sample HTML file Resulting Web page Resulting Web page Slide 10 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. Slide 11 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. Slide 12 12 WEB GRAPHICS: Other kinds of gif files Transparent Transparent Animated Animated Slide 13 13 LISTS: and LISTS: and Unordered Unordered Ordered Ordered Sample HTML codeAs displayed in browser Slide 14 14 TABLES Basic Structure Syntax HTML file Web page Slide 15 15 TABLES: colspan and rowspan Name Name Telephone Numbers Telephone Numbers Bill Gates Bill Gates 111-1111 111-1111 222-2222 222-2222 HTML file Web page Name Name Bill Gates Bill Gates Telephone Numbers Telephone Numbers 111-1111 111-1111 222-2222 222-2222

Recommended

View more >