Creating Effective Web Pages Creating HTML Documents


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Creating Effective Web Pages Creating HTML Documents

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