18
Creating Effective Web Pages Creating HTML Documents and Enhancing Them with Browser Extensions

Creating Effective Web Pages Creating HTML Documents

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Creating Effective Web Pages Creating HTML Documents

Creating Effective Web Pages

Creating HTML Documents

and Enhancing Them with

Browser Extensions

Page 2: Creating Effective Web Pages Creating HTML Documents

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

Page 3: Creating Effective Web Pages Creating HTML Documents

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

Page 4: Creating Effective Web Pages Creating HTML Documents

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)

Page 5: Creating Effective Web Pages Creating HTML Documents

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

Page 6: Creating Effective Web Pages Creating HTML Documents

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

Page 7: Creating Effective Web Pages Creating HTML Documents

Commonly Used Browser Extensions

Page 8: Creating Effective Web Pages Creating HTML Documents

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

Page 9: Creating Effective Web Pages Creating HTML Documents

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

Page 10: Creating Effective Web Pages Creating HTML Documents

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

Page 11: Creating Effective Web Pages Creating HTML Documents

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)

Page 12: Creating Effective Web Pages Creating HTML Documents

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

Page 13: Creating Effective Web Pages Creating HTML Documents

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

Page 14: Creating Effective Web Pages Creating HTML Documents

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

Page 15: Creating Effective Web Pages Creating HTML Documents

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.

Page 16: Creating Effective Web Pages Creating HTML Documents

Choosing a Web Hosting Service (5)

Review Web server hosting services: Web Site Hosting Directory Web Hosting Resources

Page 17: Creating Effective Web Pages Creating HTML Documents

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

Page 18: Creating Effective Web Pages Creating HTML Documents

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