Tutorial 8 Creating Effective Web Pages Objectives

Tutorial 8 Creating Effective Web Pages

Objectives New Perspectives on The Internet, Seventh Edition XP

Objectives XP • Learn about Java. Script, Flash, and Shockwave • Learn about the different types of graphics that you can use in a Web page and the programs that create them • Understand the questions to ask when selecting a Web hosting service • Understand the issues involved when publishing a Web site • Learn about search engine submission and search engine optimization New Perspectives on The Internet, Seventh Edition

Understanding Markup Languages XP • Hypertext Markup Language (HTML): nonproprietary markup language that a Web browser interprets and uses to display the content as a Web page • Markup language: general term that indicates the separation of the formatting of a document and the content of a document • Standard Generalized Markup Language (SGML): metalanguage (language used to create other languages) was the standard formatting documents in a way that was not dependent on the operating system or environment on which the documents were created or viewed New Perspectives on The Internet, Seventh Edition

Understanding Markup Languages XP • Tim Berners-Lee and Robert Calliau developed the first version of HTML using SGML in 1989 • World Wide Web Consortium (W 3 C) developed specifications, or sets of standards, that identify how a browser interprets the HTML code • Specifications are voluntary, but most organizations follow the specifications as much as possible • Current specification for HTML is 401 – Since 2004, the W 3 C has been working on the fifth revision of the HTML specification New Perspectives on The Internet, Seventh Edition

Understanding Markup Languages XP • Extensible Markup Language (XML): popular markup language that began in 1998 to describe the format and structure of data • Extensible Hypertext Markup Language (XHTML) or XHTML 11: – Most recent markup language specification from the W 3 C – Combines the formatting features of HTML with a stricter syntax that works to combine HTML and XML so that Web content is more readily and easily delivered to all devices that are connected to the Internet – Compatible with the HTML 401 specification • HTML specifications not included when newer specifications are released or not included in the XHTML specification are deprecated New Perspectives on The Internet, Seventh Edition

Understanding Tags and Attributes XP • Tags: codes that indicate different elements on a Web page such as headings, paragraphs, and bulleted lists • Nested tags: tags that are included within other tags • Tags are either two-sided and require a tag at the beginning and the end of the element, or they are onesided • Some tags include attributes that specify additional information about the content to be formatted by the tag New Perspectives on The Internet, Seventh Edition

Planning an HTML Document XP • To create a Web page, use a text editor or use a program that includes features for working with Web pages and Web sites – An example of a text editor is the Notepad program that is installed with Windows – When you use a text editor to create a Web page, you type the content of the Web page and the tags that you need to format that content; you need a thorough understanding of HTML • Programs such as Microsoft Expression Web or Adobe Dreamweaver provide a graphical user interface (GUI) in which you type the content of your Web page and use toolbar buttons and menus to format that content, and then the program creates all of the necessary tags to format the Web page New Perspectives on The Internet, Seventh Edition

Planning an HTML Document New Perspectives on The Internet, Seventh Edition XP

Planning an HTML Document XP • Color is an element that depends on the user’s computer and browser to render it correctly • Web-safe color palette: collection of 216 colors that all computers render in the same way • The fonts that are available on your computer are not always the same ones that are available on other computers • A good rule for beginning Web page developers is to use fonts that are considered to be common on all computers New Perspectives on The Internet, Seventh Edition

Planning an HTML Document New Perspectives on The Internet, Seventh Edition XP

Creating an HTML Document XP • Start Notepad • Save the document with the html filename extension – Filename extensions htm and html are associated with Web pages – If you used the default filename extension for text files (txt) or any other filename extension besides htm or html, then a Web browser will not recognize your file as a Web page • Need an opening <html> tag to indicate that the file is an HTML document New Perspectives on The Internet, Seventh Edition

Creating the HTML Document Structure XP • Head section: – Begins with the <head> tag – Includes general information about the document, such as keywords that identify the document’s content for search engines and comments about the document’s creator or the date the document was last updated – Includes the nested <title> tag • Identifies the title of the Web page so the browser can display it in the title bar and page tab • Used to identify the content of the page • Appears as the default name when you use the browser to save the page as a bookmark or favorite • The <head> tag is a two-sided tag, so you must include the closing </head> tag New Perspectives on The Internet, Seventh Edition

Creating the HTML Document Structure • Body section: – Required in an HTML document after the head section – Includes the content of the Web page along with the tags needed to format that content – Opening <body> tag indicates the beginning of the body section – Closing </body> tag indicates the end of the body section • Include the closing </html> tag as the last item in the HTML document New Perspectives on The Internet, Seventh Edition XP

Basic HTML Document Structure in Notepad New Perspectives on The Internet, Seventh Edition XP

Adding a Comment to an HTML Document • In an HTML document, comments identify the author, purpose, date created or last updated, and other information as required • Comment tag: – One-sided tag – Browser ignores it and does not display it in a Web page – Visible when you view the HTML document in a text editor – Has the following syntax: •  – Can appear anywhere in an HTML document New Perspectives on The Internet, Seventh Edition XP

Inserting and Formatting Headings XP • Identify headings with tags – Use the <h 1> tag for a level-one heading – Use the <h 2> tag for a level-two heading – And so on down to the <h 6> tag for a level six heading • Add attributes to change alignment and color of headings New Perspectives on The Internet, Seventh Edition

Inserting and Formatting Headings XP • To change the alignment: – In HTML, add the align attribute with the center value, for example: <h 1 align="center"> – Center value is deprecated in XHTML – To add a code that is compatible with both HTML and XHTML, use the style attribute with the text-align: center value, for example: <h 1 style="text-align: center"> • To change the color, add a color attribute to the heading tag • When using the style attribute, you can separate multiple values with a semicolon New Perspectives on The Internet, Seventh Edition

Headings and Comment Added to the HTML Document New Perspectives on The Internet, Seventh Edition XP

Inserting and Formatting Headings XP • As you work in an HTML document, it is a good idea to check your work periodically in a Web browser to look for problems in your coding and also to make sure that the page you are creating looks correct • As you are working with your HTML document in your text editor, you can save the page and then refresh the Web page in the browser to see your updates New Perspectives on The Internet, Seventh Edition

Inserting and Formatting a Paragraph • To insert a paragraph in an HTML document: – Type the opening paragraph tag – Type the paragraph text – Type the closing paragraph tag • To change font style: – Enclose the text in the appropriate tags – To change text to italics, use the italic tags and – To change text to bold, use the bold tags and New Perspectives on The Internet, Seventh Edition XP

Paragraph Added to HTML Document New Perspectives on The Internet, Seventh Edition XP

Creating a List XP • HTML supports three kinds of lists: – Bulleted list (unordered list): contains a list of items with a bullet character to the left of each item in the list – Numbered list (ordered list): creates a list of items with sequential numbering for each item – Definition list: usually associated with terms and their definitions New Perspectives on The Internet, Seventh Edition

Creating a List New Perspectives on The Internet, Seventh Edition XP

Using Pictures in an HTML Document XP • Graphic: any file that contains a picture, such as a photograph, logo, or computer-generated image • To include a picture in a Web page, it must be stored as a file • Graphic file formats commonly used on the Web: – JPG (or JPEG) – GIF – PNG New Perspectives on The Internet, Seventh Edition

Using Pictures in an HTML Document XP • The JPG format is good for photographs and complex graphics because JPG files support up to 16 million colors • GIF files are limited to 256 colors, so they are a good choice for scanned images, line drawings, and simple graphics • PNG files are similar to GIF files, but support up to 16 million colors • Nearly all Web browsers support JPG, GIF, and PNG files; however, some older versions of browsers do not support PNG files, and as such it is not as popular on the Web as the JPG and GIF formats New Perspectives on The Internet, Seventh Edition

Using Pictures in an HTML Document XP • To use a graphic in an HTML document, reference the file location where the graphic is stored by using the one-sided <img /> tag – If the graphic is stored in the same folder (directory) as the HTML document, then the browser loads the graphic from the same folder – If the graphic is stored anywhere else, the reference to it in the HTML document must include the path to the folder or drive on which the graphic is stored New Perspectives on The Internet, Seventh Edition

Using Pictures in an HTML Document XP • Src (source) attribute: – Must be included with the <img /> tag – Defines the location of the graphic – Relative path: specifies a file’s location relative to the location of the current file – Absolute path: specifies a file’s location with absolute precision; there is no reference to the current file New Perspectives on The Internet, Seventh Edition

Using Pictures in an HTML Document XP • Optional attributes for the <img /> tag are: – Height and width: describe the graphic’s height and width in pixels • Pixel is a single point in an image – Border: describes the graphic’s border size in pixels – Alt: provides alternative text that identifies the graphic’s function or description when it is loaded by a browser that either does not display pictures or reads Web page content for visually impaired users • The alt attribute is required in XHTML, so you should always include it New Perspectives on The Internet, Seventh Edition

Broken Link Displayed in Internet Explorer New Perspectives on The Internet, Seventh Edition XP

Using Anchors XP • Anchor tag (<a>): – HTML tag that creates a hyperlink – Two-sided tag – Includes the href attribute, which specifies the filename of the target page • Target or target page: page that opens when a hyperlink on a Web page is clicked • Source page: Web page that contains a hyperlink • Bookmark: hyperlink to a location on the same Web page as the source page New Perspectives on The Internet, Seventh Edition

Adding a Link to a Web Page XP • You can create a hyperlink at any time when developing a Web page • Make sure that the page to which you are linking exists and that the page exists in the correct location – To avoid problems, open the source page in a browser, and then click the hyperlink to make sure that it opens the correct page – Do the same testing after you publish the HTML document to the server New Perspectives on The Internet, Seventh Edition

Using a Web Site Management Tool XP • Most Web developers rely on options other than text editors for creating Web sites, such as Microsoft Expression Web and Adobe Dreamweaver – These standalone programs use a graphical user interface (GUI) to generate the HTML documents necessary to produce Web pages – Using a Web site management tool such as Expression Web or Dreamweaver lessens the burden on the developer to understand the syntax of all the HTML tags and attributes that create Web pages New Perspectives on The Internet, Seventh Edition

Web Page Created Using Microsoft Expression Web New Perspectives on The Internet, Seventh Edition XP

HTML Document Generated by Expression Web New Perspectives on The Internet, Seventh Edition XP

Web Page Created Using Adobe Dreamweaver New Perspectives on The Internet, Seventh Edition XP

HTML Document Generated by Dreamweaver New Perspectives on The Internet, Seventh Edition XP

Choosing Other Development Tools XP • Some Web pages include dynamic content that is beyond the capabilities of HTML • This dynamic content might be a graphic that represents the number of times a page has been viewed, an animated graphic, or an interactive product display • This type of Web page content requires more than just HTML to produce New Perspectives on The Internet, Seventh Edition

Programming with Java. Script XP • Scripting language: a programming language that is executed by a Web browser • Scripting engine: a browser feature that processes scripts by translating the code in the script into a format the browser can execute • Java. Script: – Scripting language – Originally available as part of the Netscape Navigator browser New Perspectives on The Internet, Seventh Edition

Programming with Java. Script XP • Microsoft created a compatible language called JScript, and subsequently, the language VBScript, both of which are processed by Internet Explorer • Because Java. Script is interpreted by most browsers and only the Internet Explorer browser can process scripts written in VBScript, most developers choose Java. Script to extend the functionality of a Web page • Many Web sites include resources for downloading and installing free scripts written in Java. Script in your Web pages New Perspectives on The Internet, Seventh Edition

Programming with Java. Script XP • The script itself is embedded in the head section of the HTML document – When you view the HTML document in a Web browser, the browser executes the script and displays the result of the script in the body section of the Web page – When a browser cannot execute the script (because it does not have a scripting engine to process the script), it simply displays the contents of the script as text – To avoid this situation, most scripts are enclosed in HTML comment tags so browsers that cannot execute the script will ignore the script as if it were really a comment New Perspectives on The Internet, Seventh Edition

Programming with Java. Script XP • You can use a script to: – Display a greeting based on the time of the day, or the day of the week, or a special occasion – Display a calendar or an interactive calendar that lets the user pick a date – Display the current date and time, or a countdown until a specific day and time, such as a holiday or a grand opening – Display scrolling text, a drop-down menu of selections, or animated buttons that change color or display a message when the user points to or clicks the button – Detect the user’s browser version or open a pop-up window with a message – Add functionality to a Web page, such as a simple or scientific calculator New Perspectives on The Internet, Seventh Edition

Creating Animated Content XP • Browser extensions: software that enhances the capabilities of Web browsers to perform tasks they were not originally designed to perform • Plug-ins: integrated browser software that the browser uses to display or play a specific file that you request • Helper applications: programs installed on the user’s computer that the browser starts and uses to “help” display or play a file • Add-ons: tools that enhance your browsing experience, such as toolbars that let you access a search engine without opening its Web site or programs that block pop-up ads and other windows from opening when you view a Web site New Perspectives on The Internet, Seventh Edition

Creating Animated Content New Perspectives on The Internet, Seventh Edition XP

Creating Animated Content XP • Flash: – The Flash Player lets your Web browser display simple animations, user interfaces, static graphics, movies, sound, and text that was created using Adobe Flash software – 96% of all Internet users have the Flash Player installed on their computers, so many Web developers regularly use Flash to develop content that is more visually interesting and appealing to their site visitors – Latest version of Internet Explorer includes the Flash Player so users do not have to download it New Perspectives on The Internet, Seventh Edition

Creating Animated Content XP • Shockwave Player: – More fully featured browser plug-in than Flash Player – Lets you view animated, 3 D interfaces, interactive advertisements and product demonstrations, multiuser games, streaming CD-quality audio, and video that was created using Director software – Uses streaming technology so you do not need to wait for an entire file to download before playing it – According to Adobe, more than 200 million Internet users use Shockwave Player to play games and view animated content New Perspectives on The Internet, Seventh Edition

Creating Animated Content XP • Flash is much less expensive to purchase than Director (the program used to create Shockwave files), and Flash Player is a much more widely distributed plug-in than Shockwave Player • Flash is the more attractive choice for creating animation in a Web page, unless the more robust features of Director are required for creating games and extensive applications • Flash is also delivered well to various types of mobile devices, which is an important consideration given the developments and future expansion in wireless Internet devices New Perspectives on The Internet, Seventh Edition

Choosing Image Editing and Illustration Programs XP • Computer-generated graphics come in two basic varieties: – Raster (bitmap) graphics: • Composed of pixels • Also called bitmap images – Vector graphics: • Composed of paths New Perspectives on The Internet, Seventh Edition

Graphic Created Using Windows Paint New Perspectives on The Internet, Seventh Edition XP

Choosing Image Editing and Illustration Programs • Raster graphics have the following filename extensions: – – – bmp gif jpg png tif • Raster graphics are created using: – – Paint Adobe Photoshop Adobe Fireworks Corel Paint Shop Pro • Any image that you take using a digital camera or make using a scanner is a raster graphic New Perspectives on The Internet, Seventh Edition XP

Graphic Created Using Adobe Illustrator New Perspectives on The Internet, Seventh Edition XP

Choosing Image Editing and Illustration Programs • Vector graphics have the following filename extensions: – ai – wmf – cdr – dxf • Vector graphics are created using: – Illustrator, – Corel. DRAW – Auto. CAD programs New Perspectives on The Internet, Seventh Edition XP

Choosing Image Editing and Illustration Programs XP • Raster graphics are the choice for photographs and graphics with different levels of shading • Vector graphics are the choice when you need to create drawings that require lines and curves to create different shapes • Raster graphics require the use of a category of programs called image editing programs • Vector graphics require the use of a category of programs called illustration software New Perspectives on The Internet, Seventh Edition

Choosing a Web Hosting Service XP • Choose a Web hosting service or a Web presence provider to host a Web site before you begin work on creating the Web site’s pages • The choice of a Web hosting service is more than just one of affordability—it is important to understand what services the company offers and the software it uses to host sites • It is important to have a thorough understanding of what is involved in upgrading your server space and services in case your initial plan changes over time New Perspectives on The Internet, Seventh Edition

Understanding Your Web Site’s Technical Requirements XP • First, evaluate your Web site’s content and goals and understand the tools that you will be using to create your pages • Storyboard: – Sketch of the Web site that shows the pages that you plan to include, separated into levels that show the relationships of the pages to each other – Also called the site’s navigation structure, because it shows the path of navigation through the site New Perspectives on The Internet, Seventh Edition

Sample Storyboard New Perspectives on The Internet, Seventh Edition XP

Understanding Your Web Site’s Technical Requirements XP • If you have pages that process information, such as collecting data supplied by the user in a form and storing it in a database or other file or sending the results of that form to an e-mail address, the Web server must collect the data and save it in the specified format • The Web server must rely on a server extension or a script to process the data collected in the form • If your site uses Active Server Pages (ASP)—dynamic Web pages based on the content stored in a database—you’ll need to store the site on a Windows-based Web server because the Unix and Linux Web servers do not support ASP New Perspectives on The Internet, Seventh Edition

Using a Secure Server • Secure sever: encrypts data • Dedicated server: Web server that hosts only one site • Shared server: hosts several sites • If you plan to use a secure server, you need to install a server certificate to prove to users that the site is actually secure New Perspectives on The Internet, Seventh Edition XP

Understanding Your Web Site’s File Size and Transfer Requirements XP • Consider the amount of traffic your site will receive and the sizes of the files that users will download from the Web server • Bandwidth or data transfer: amount of data that is transferred from the Web server – Most companies sell server space based on a file size limit and a daily or monthly data transfer limit – When you exceed either of these limits, you might incur extra fees from the Web hosting service or your Web hosting service might not be able to increase your Web site’s server space or bandwidth New Perspectives on The Internet, Seventh Edition

Understanding Your Web Site’s File Size and Transfer Requirements XP • Make sure that the company you select to host your site has technical support services available to you when you need them, especially if you are a new Web site developer • When you talk to people at the Web hosting service, try to get a sense of the level of support and service that it provides • When you view the online help resources, you can get a sense of the company’s intended audience and whether it will assist you with future questions New Perspectives on The Internet, Seventh Edition

Securing a Domain Name XP • When securing a Web hosting service, ask about the Web hosting service’s policy for securing a domain name for your Web site – You can use a registrar such as Register. com to enter your proposed domain name and check its availability – If the domain name you want is available, see if the Web hosting service can purchase it as part of your hosting agreement and assist you to establish the company as the Web site’s host – When you renew your Web site hosting contract, ask the company if it provides domain name renewal service so it will automatically renew your domain for you New Perspectives on The Internet, Seventh Edition

Asking about Other Services Offered by XP the Web Hosting Service • Items, such as site statistics, e-mail accounts for the domain name you registered, Web site templates, Web site construction tools, and database software “value added” by most companies • You might need to pay an extra service fee to obtain detailed site traffic reports, but this information is very valuable when analyzing who is coming to your site and which pages they are viewing New Perspectives on The Internet, Seventh Edition

Publishing a Web Site XP • Publishing your Web site means moving your files to the company’s Web server • Most companies will ask you to use FTP to move your files • Control panel: Web page you access with your Web site’s user name and password that includes all the tools • If you are using a Web site management program, you can use the tools in those programs to publish your Web site New Perspectives on The Internet, Seventh Edition

Publishing a Web Site XP • When you move your Web site’s files to the Web server, include all of the folders and supporting files to the Web server, and not just the Web site’s HTML documents – A common mistake is to omit the Web site’s supporting files, such as pictures and multimedia files – If your HTML documents include relative links to supporting files, include the supporting files in the same folders as the HTML documents – If your HTML documents include absolute links, make sure that the location of the absolute link is available New Perspectives on The Internet, Seventh Edition

Publishing a Web Site XP • After you publish a Web site for the first time, make any changes to the copy that you stored on your local drive, and then move those files to the Web server • If something happens to the Web site stored on the Web server (the remote Web site), you will be able to publish the files from the copy of the Web site on your hard or other local drive (the local Web site) • If you make changes to pages stored on the server and someone is viewing those pages at the same time that you are editing them, they will have problems with broken links and other problems while you are editing the page New Perspectives on The Internet, Seventh Edition

Search Engine Submission and Optimization XP • The <meta> tag is a summary of the page’s contents that a search engine might include in its search results • A search engine indexes the page by looking at the keywords in the <meta> tag to identify the search expressions that users might type to locate your page • Search engine submission: process of submitting your site’s URL to one or more search engines so they will list your site in their indexes • Search engine optimization: process of fine-tuning your site so that it ranks well in a search engine’s results when a user searches the Web using your site’s keywords New Perspectives on The Internet, Seventh Edition

Summary XP • Markup languages are used to create Web pages • Text editors are one way to create a simple Web page that includes a graphic, a heading, a paragraph with formatted text, a bulleted list, and a hyperlink • Programs such as Microsoft Expression Web and Adobe Dreamweaver are more sophisticated ways to create Web pages and manage a Web site • Java. Script can display animated content in a Web page • Image editing programs and illustration software create graphics New Perspectives on The Internet, Seventh Edition

Summary XP • The Flash Player and the Shockwave Player are two programs that are popular for displaying animated content • Consider all the issues when selecting a Web hosting service • Move all of your Web site’s files from your local drive to a Web server • To list a Web site in search engines, create <meta> tags to cause your Web site to be ranked high in the search engine results New Perspectives on The Internet, Seventh Edition