Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Web 101 Third Edition by Wendy G. Lehnert & Richard L. Kopec Chapter 9: Basic Web Page Construction

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-2 Review the basics about copyright law and the Web. Learn the fundamentals of Web page design. Learn how to use Mozilla Composer to build Web pages. Learn how to add absolute URLs, relative links, mail links, and internal links using named anchors to your Web pages. Learn how to add pictures and colors to a Web page. Learning Objectives

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-3 Find out how to use tables to format your Web pages. Learn how to publish a Web page. Find out about browser-safe colors and valid image file formats. Learning Objectives

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-4 Anyone with access to the Internet can post a Web page. You can create a Web page with just a text editor. There are Web page construction tools available that allow you to create pages without understanding the underlying machinery. Taking Charge

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-5 It’s very easy to capture content (text, images, video/audio files) from the Web. These same items can just as easily be placed onto your Web page. Everything you see/hear over the Internet is copyrighted, whether it explicitly says so or not! Technically speaking, you can use content from other sources only when you have explicit permission to do so. Copyright Basics

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-6 Content from public domain sites is available for use. Some sites grant explicit to use their content, as long as it is not used in a commercial product. Most everything from a government Web site is in the public domain. Always acknowledge the source of copied material on your Web page when present. Copyright Basics

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-7 Consult Appendix D for further information about copyright law. Some material may be copylefted. Copyleft is used to remove typical copyright restrictions. Copylefted material can be studied, used, modified, and redistributed as long as the same license terms apply to redistributed material. A license is still required to do this. Copyright Basics

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-8 Think about the theme or purpose of your Web page. Think about what you want to place on your page, and the source of the material you will use. Ensure that your content is consistent with your theme. Then consider the organization of this content. Planning Your Web Page

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-9 Create a storyboard. The storyboard shows the layout of the material you plan to place on your Web page. Planning Your Web Page

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-10 Planning Your Web Page

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-11 Basic Elements –Descriptive title –Include your name and contact info ( ) –Show the creation/modification date –Use picture to highlight and emphasize the purpose of the page. –Provide navigational content if multiple pages are used. Planning Your Web Page

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-12 Design & Organization Recommendations –Put the most interesting/important info at the top of the page. –Keep the image files small and few. Use thumbnail image links to full size images if there are many. –Add alternate text to your images. Not all the Web page visitors are sighted. The alternate text will clue them in about the purpose of the picture. –Use browser-safe colors. Non-standard colors may appear differently on other systems. Planning Your Web Page

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-13 Design & Organization Recommendations –Use the default fonts. Specialty fonts may npt be installed on the viewer’s computer - so an alternate font will be used, potentially affecting the impact of your page. –Use only a few fonts. The display may become too “busy”. –Use a style sheet. Separate display info from content when possible. Simplifies cosmetic changes. –Use subtitles and headings to break up content. Planning Your Web Page

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-14 Design & Organization Recommendations –Use the spell checker! Most Web page editors include a spell checker - use it! –Preview/test your page. Nothing is more frustrating than a Web page that is incomplete because the author failed to fix display issues. Planning Your Web Page

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-15 Creating Web Pages with a WYSIWYG Editor A Web page is simply a text file written in hypertext markup language (HTML). Although any text editor can be used to create one, a Web page editor greatly simplifies the process. A free Web page editor named Composer is packaged with the Mozilla/Sea Monkey Web browsers. Usually it’s a good idea to set preferences first.

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-16 Set Composer preferences: Creating Web Pages with a WYSIWYG Editor

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-17 Set New Page preferences: Creating Web Pages with a WYSIWYG Editor

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-18 Set Toolbar preferences: Creating Web Pages with a WYSIWYG Editor

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-19 Use your storyboard Creating Web Pages with a WYSIWYG Editor

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-20 Create your new Web page by selecting “Composer” from the Mozilla Window menu drop-down list When creating a new page, immediately title and save it! This will save you some major headaches later on. Also - avoid using special characters (especially the space) in your Web page file name. These characters might cause problems later on. Creating Web Pages with a WYSIWYG Editor

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-21 Familiarize yourself with Composer Creating Web Pages with a WYSIWYG Editor

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-22 The user interface is similar to that of a word processor. Some differences –The TAB key does not insert tabs, use the indent tools to insert/remove tabs instead: –Tables are generally used to create columns of text or to precisely control the arrangement of text from one line to the next. CSS (Chapter 10) can do this too. Creating Web Pages with a WYSIWYG Editor

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-23 More differences –The web page display in edit view may differ from its appearance in browser view. Use the Preview tab (at the bottom of the page) or the Browse tool to see this. –Older browsers may condense multiple space characters into a single one. –Links of various kinds can be inserted. Creating Web Pages with a WYSIWYG Editor

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-24 Some tools: Creating Web Pages with a WYSIWYG Editor Inserts horizontal line Inserts an image Inserts a link Inserts a named anchor Inserts a table Used to set alignment

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-25 The best way to learn Composer’s Web page editing tools is to use them! Use Composer to create a new Web page with these items: –A Title –A Heading –Some text –A List (ordered or unordered) –A Horizontal Line –Experiment with the indent & alignment tools Creating Web Pages with a WYSIWYG Editor

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-26 Links are used to make your Web page “hyper” There are several different kinds of links, all created with the link tool: –Internal (aka Named) link - used to move display to a different place on the same page, requires a Named Anchor –Relative link - used to change to a different page on the same server –Absolute link - used to change to a different page on a different server –Mail link - used to create a pre-addressed mail message using Mozilla Messenger Creating Web Pages with a WYSIWYG Editor

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-27 Named Anchor & Internal Link Create the named anchor first Then use the link tool, selecting this anchor Creating Web Pages with a WYSIWYG Editor

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-28 Creating Web Pages with a WYSIWYG Editor

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-29 Creating Web Pages with a WYSIWYG Editor Relative Link: –Enter the name of the new Web page file - if it’s in the same directory as this Web page file, otherwise path info is needed too

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-30 Creating Web Pages with a WYSIWYG Editor Suggestion: keep ALL your Web page materials (images, sound files, HTML files, etc) in the SAME directory/folder. Put these files into the folder before you insert or create links to them. This will eliminate path problems later on when you upload your page to the server.

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-31 Creating Web Pages with a WYSIWYG Editor Absolute Link: –Copy the complete URL

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-32 Creating Web Pages with a WYSIWYG Editor Mail Link: –Type

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-33 Creating Web Pages with a WYSIWYG Editor Links can also be used to display image files and play sounds or video. Use short, descriptive word/phrase for your link text. Use simple, descriptive names for your named anchors. Name anchors must be placed before you can select it from the drop down list to make an internal link.

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-34 Creating Web Pages with a WYSIWYG Editor If creating a multiple page Web site, use relative links to navigate between the various pages. All pages linked relatively must reside on the same server. Use absolute links only when necessary - absolute links will change if the pages are moved to another location on the same server or another server.

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-35 Creating Web Pages with a WYSIWYG Editor Links only work in browser view. Browse your page to make sure they work! Mail links may not work if the computer you use has not been configured for , common on public access computers. Always add a mail link to Web page author and creation/modification date.

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-36 Creating Web Pages with a WYSIWYG Editor Acquire your image files in advance. Portable Network Graphics (.png) files are recommended for drawn images. Can use Joint Photographic Expert Group (.jpg) for photographs. Compuserve GIF (graphics interchange format) works too, but copyrighted. Keep the image size as small as possible - ideally less than 40 KB.

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-37 Creating Web Pages with a WYSIWYG Editor Put all images files in the same folder as the Web page that displays them before placing onto the page. Inserted images are not actually placed into the Web page file. Only the name of the file to be displayed is actually inserted. When publishing your Web page, you must also “publish” all the image files too. Use the Image tool to insert images.

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-38 Creating Web Pages with a WYSIWYG Editor

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-39 Creating Web Pages with a WYSIWYG Editor Can use the image dialog box tabs to change various properties of the image: –Alternate text (for non-sighted page visitors) –Dimensions –Wrapping/placement of adjacent text –Borders & Spacing –Link property

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-40 Creating Web Pages with a WYSIWYG Editor –Can custom-size dimensions - but not recommended, may distort image

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-41 Creating Web Pages with a WYSIWYG Editor –Wrapping/placement of adjacent text –Borders and Spacing

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-42 Creating Web Pages with a WYSIWYG Editor –Link property, converts image to a link

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-43 Creating Web Pages with a WYSIWYG Editor –Tables can be used to control the position of Web page elements relative to each other. –CSS (cascading style sheet) rules are superceding this usage, but browser support may be incomplete. –Tables are also used to show tabular information! –The table dialog box can be used to adjust table or row/column/cell parameters.

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-44 You can put anything inside a table data element (a cell), even another table. You can create borders on your Web page. Tables can be used to give Web pages a margin. Each cell, row, or column can have it’s own background color or pattern. You can extend a cell across multiple columns. You can extend a cell across multiple rows. Creating Web Pages with a WYSIWYG Editor

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-45 Creating Web Pages with a WYSIWYG Editor

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-46 Creating Web Pages with a WYSIWYG Editor

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-47 Creating Web Pages with a WYSIWYG Editor –Can join cells across rows or down columns

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-48 Creating Web Pages with a WYSIWYG Editor –Can also split joined cells

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-49 In order to make your Web page visible to the world, it must be uploaded to a Web server - this is publishing. You must also upload any files (images, sounds, videos) that you use on your page. The particular method used depends on your Internet Service Provider (ISP) or your Web page host service provider. Publishing Your Web Page

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-50 To publish your page you must –Acquire access to a Web server. –Determine the DNS address of your Web server. –Determine the pathname needed when you upload files to the server. –Upload your Web files to the Web server. Publishing Your Web Page

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-51 –Determine the URL to use to view your home page. –Fix any file protection codes that need fixing - contact your ISP for help if access to your Web page is forbidden! You can upload files with an FTP client or an HTML construction kit that has an upload function. Publishing Your Web Page

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-52 PNG, JPEG, and GIF are the most common graphics formats on the Web. JPEG is better suited for high-resolution photographs and complex graphics. GIF is better suited for line drawings and simple graphics. PNG was designed to replace the GIF format An inline image is an image that is treated like a single alphanumeric character. Image File Formats

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-53 Use the ALT attribute in the IMG tag to describe graphic elements for users who are visually challenged. Basic Web Page Graphics

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-54 There are 16,777,216 possible colors that can be used as the background for a Web page. Web-safe colors are 216 colors that can be faithfully reproduced on any computer monitor regardless of the operating system used. Web pages use hexadecimal (base 16) codes to describe colors. All About Color

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-55 A color palette is a collection of colors. 8-bit and 24-bit color describe the size of the affiliated color palette. An 8 bit palette contains 256 colors A 24 bit palette contains 16,777,216 colors. A 48 bit palette contains LOTS of colors! JPEG images use 24-bit true color. GIF images use 8-bit color. PNG supports up to 48-bit true color All About Color

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-56 A table can be used to create a graphical navigation bar. Use a general-purpose image-splitting utility (like Splitz) to split an image into rectangular sections. Insert each section into a single row table with zero border, spacing, and padding. Convert each image section into a link. Creating a Navigation Bar

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-57 You can use any PNG, JPEG or GIF file as a background for a Web page. The browser will place the image in the upper- left corner and will tile it left to right. Background Patterns

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-58 Different utilities exist for processing images for different purposes. An image viewer displays graphics files quickly and easily. Graphics editors are used to manipulate graphics files such as photos or drawings. Color samplers can find the hexadecimal code of a color in a picture. Screen shot utilities allow you to take a picture of a window on your computer. Image Processing Utilities

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-59 Remember the three C’s of Web page design: –quality Content –reader Convenience –artistic Composition. Avoid common mistakes. Write, view and test all Web pages before installing them on a Web server. Keep Web page titles short but accurate. Keep download times short. A Web Site Construction Checklist

Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 9-60 Make your pages portable! (Use relative links!) A Web Site Construction Checklist