Creating Effective Web Pages Creating HTML Documents
- 1. Creating Effective Web Pages Creating HTML Documents and Enhancing Them with Browser Extensions
- 2. HTML & Web Site Management Tools Hypertext Markup Language (HTML) – a nonproprietory markup language that a Web browser interprets and uses to display the content as a Web page It is possible to create a Web site, regardless of its complexity, using just Notepad and HTML , but: You must have a thorough understanding of how to write all of the tags and attributes required to complete the Web site It is better to use popular Web site creation and management tools Microsoft FrontPage Macromedia Dreamweaver These programs use a graphical user interface (GUI) to generate the HTML documents required to produce Web pages
- 3. Limitations of HTML Some Web pages include content beyond the capabilities of HTML (static document) HTML cannot store a graphic but can include a reference to (location of) a graphic file Other nontext content of a Web page is called by a browser in a similar way An animated graphic Interactive product display Number of times a page has been viewed
- 4. Technology to Produce More Complicated Web Pages Scripting language – programming language executed by a Web browser to extend the functionality of a Web page Scripting engine – requisite feature of a browser which translates script code into a format the browser can execute JavaScript – most common (Netscape) Can be learned, but complicated Free scripts are available on many Web sites to download & install in your Web pages (more complicated ones have to be purchased)
- 5. JavaScript JavaScripts available on the Web The JavaScript Source JavaScript.com What can you do with these scripts? Display greeting based on time of day, day of week, or a special occasion Display current date and time or countdown until a specific date and time (like a holiday or grand opening) Display text scrolling, a drop-down menu of selections, or animated buttons that change color or display a message when the user points to it or clicks the button Detect user’s browser version or open a pop-up window with a message Add simple or scientific calculator
- 6. Creating Animated Content Browser Extensions – allow browser to perform tasks it was not originally designed to perform Three types of browser extensions Plug-in – a program that is a software extension of a Web browser: can only start from within a browser; not a standalone program stored on your computer Helper applications - programs installed on user’s computer that browser starts and uses to help display or play a file (spreadsheet, media player, etc.) Add-ons – tools that enhance your browsing experience, such as 1) toolbars that let you access a search engine without opening its Web site 2) programs that block pop-up ads and other windows from opening when viewing a Web site
- 7. Commonly Used Browser Extensions
- 8. Macromedia Plug-Ins (1) Flash Player Viewer is free and works easily with most Web browsers Lets browser display simple animations, user interfaces, static graphics, movies, sound, and text created using this program 98% of all internet users have Flash Player on their PCs Because of its popularity, the latest version of Internet Explorer includes Flash Player e.g. Coca Cola and BMW
- 9. Macromedia Plug-Ins (2) Shockwave Player Viewer is free and works easily with most Web browsers View animated, three-dimensional interfaces View interactive advertisements and product demonstrations View multiuser games, streaming CD-quality audio, and video created by this program Uses streaming technology Very popular to play games and view animated content e.g. Timex and Cornell University
- 10. Comparisons Between Flash and Shockwave Flash is used on a smaller scale, for items such as simple animations with sound and graphics Shockwave is used for more complex applications, such as playing an interactive game Flash animations load quickly (smaller files) Flash is simpler to use and learn, and less expensive to buy Flash is a more widely distributed plug-in Flash is delivered well to various types of mobile devices
- 11. Choosing Image Editing and Illustration Programs Computer generated graphics come in two basic varieties: Raster graphics – composed of pixels (Microsoft Paint; Adobe Photoshop; Macromedia Fireworks; Corel Paint Shop) Not possible to create layers of content Are not scalable Image editing programs Vector graphics – composed of paths (Illustrator; CorelDRAW; and AutoCAD) Scalable Can layer content (best suited for drawing objects) Illustration software (more complicated)
- 12. Choosing a Web Hosting Service (1) Best to choose a Web hosting service or Web presence provider before beginning work on a Web site Some Web sites are hosted by private (dedicated) Web servers that are managed and maintained by the organization that creates the sites Other Web sites are hosted by independent ISPs that sell shared and dedicated server space to small and medium-size businesses
- 13. Choosing a Web Hosting Service (2) Should evaluate your Web site’s content and goals and understand the tools that will be needed to create your Web pages Good idea to create a storyboard or navigation structure Should determine the type of server needed – your pages may require certain types of processing by the server and the server may not be able to support your needs Any personal or confidential information collected requires a secure server, which encrypts data Web hosting site will require you to purchase and use a dedicated server (only one Web site) Must also install a server certificate to prove to users that the site is actually secure
- 14. Choosing a Web Hosting Service (3) Evaluate amount of storage space your site will require (pictures and videos take-up a lot of space) Determine bandwidth or data transfer potential to users Hosting sites charge based on file size limits and daily or monthly data transfer limits – exceed this and fees will be higher or site may not be able to handle your Web site Ensure host site has the technical support services that you need
- 15. Choosing a Web Hosting Service (4) Use registrar, such as InterNIC , to check availability of proposed domain name – many Web hosting services offer free domain services with an annual service agreement + may provide name renewal service so your domain name does not expire Inquire about other services offered , such as site statistics, e-mail accounts for the domain name, Web site templates, Web site construction tools database software, etc.
- 16. Choosing a Web Hosting Service (5) Review Web server hosting services : Web Site Hosting Directory Web Hosting Resources
- 17. Publishing a Web Site Moving your Web site to hosting company’s Web server May have to use FTP but some companies include a built-in FTP interface that is part of your site’s control panel (Web page with all tools to access and manage your Web site) After publishing, best strategy for maintaining Web site is to make any changes to Web file stored on your PC (local Web site), then move files to the Web server This way you have a back-up of your Web site if something happens to the remote Web server If you make changes directly to remote Web server, anyone accessing site may have problems with broken links and other problems
- 18. Search Engine Submission and Optimization Promoting Web site: Be proactive and use <meta> tags (a summary of the page’s contents that a search engine might include in its search results) Search engine submission – process of submitting your site’s URL to one or more search engines so they list your site in their indexes Search engine optimization – process of fine-tuning your site so it ranks well in a search engine’s results when a user searches the Web using your site’s keywords Web sites Search Engine Watch Meta tag generator