Tutorial 08 - Creating Effective Web Pages

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

Objectives Define HTML and understand how it works. Examine the tools used to create HTML documents. Understand tags, attributes, and anchors. Create an HTML document. Add graphics and links to an HTML document.

Objectives Examine Microsoft FrontPage and Macromedia Dreamweaver, two popular Web site creation and management programs. Learn about JavaScript, Flash, and Shockwave. Learn about using different types of graphics in a Web page and the programs that create them.

Objectives 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.

Understanding Markup Languages Hypertext Markup Language ( HTML ): a nonproprietary markup language that a Web browser interprets and uses to display the content as a Web page. Markup language : a general term that indicates the separation of the formatting of a document and the content of a document. Standard Generalized Markup Language ( SGML ): a metalanguage (a language used to create other languages) was the standard for formatting documents in a way that did not rely on the operating system or environment on which the documents were created or viewed before HTML.

Understanding Markup Languages The first version of HTML was developed using SGML in 1989 by Tim Berners-Lee and Robert Calliau. The World Wide Web Consortium ( W3C ) developed specifications , or sets of standards, that identify how a browser interprets the HTML code. The specifications are voluntary, but most organizations follow the specifications as much as possible. The current specification for HTML is 4.01.

Understanding Markup Languages Extensible Markup Language ( XML ): a popular markup language that began in 1998 to describe the format and structure of data. Extensible Hypertext Markup Language ( XHTML ) or XHTML 1.1 : the most recent markup language specification from the W3C 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 is compatible with the HTML 4.01 specification

Understanding Tags and Attributes HTML specifications not included when newer specifications are released or are not included in the XHTML specification are deprecated . 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 a tag at the beginning and the end of the element, or they are one-sided . Some tags include attributes that specify additional information about the content to be formatted by the tag.

Planning an HTML Document 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 or WordPad 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 FrontPage or Macromedia 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.

Planning an HTML Document A sketch of a final Web page New Perspectives on The Internet, Sixth Edition—Comprehensive Tutorial 8

Planning an HTML Document Color is an element that depends on the user’s computer and browser to render it correctly. Web-safe color palette : a 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.

Planning an HTML Document New Perspectives on The Internet, Sixth Edition—Comprehensive Tutorial 8

Creating an HTML Document Start Notepad. Save the document with the .html filename extension. The 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.

Creating the HTML Document Structure Head section : begins with the <head> tag includes general information, such as the character set used, keywords that identify the document’s content, and comments about the document’s creator or the date the document was updated includes the nested <title> tag identifies the title of the Web page so the browser can display it in the title bar 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.

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 the opening <body> tag indicates the beginning of the body section the closing </body> tag indicates the end of the body section Include the closing </html> tag as the last item in the HTML document.

Basic HTML Document Structure in Notepad New Perspectives on The Internet, Sixth Edition—Comprehensive Tutorial 8

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 the browser ignores it and does not display it in a Web page is visible when you view the HTML document in a text editor has the following syntax:  can appear anywhere in an HTML document

Inserting and Formatting Headings Identify headings with tags. use the <h1> tag for a level-one heading use the <h2> tag for a level-two heading and so on down to the <h6> tag for a level six heading Add attributes to change alignment and color of headings.

Inserting and Formatting Headings To change the alignment: in HTML, add the align attribute with the center value, for example: <h1 align="center"> the 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: <h1 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.

Headings Added to the Body Section New Perspectives on The Internet, Sixth Edition—Comprehensive Tutorial 8

Inserting and Formatting Headings 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.

Inserting and Formatting a Paragraph To insert a paragraph in an HTML document: type the opening paragraph tag <p> type the paragraph text type the closing paragraph tag </p> To change font style: enclose the text in the appropriate tags to change text to italics, use the italic tags <i> and </i> to change text to bold, use the bold tags <b> and </b>

Paragraph Added to HTML Document New Perspectives on The Internet, Sixth Edition—Comprehensive Tutorial 8

Creating a List HTML supports three kinds of lists: bulleted, numbered, and definition. 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.

Inserting a Graphic in an HTML Document 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

Inserting a Graphic in an HTML Document 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.

Inserting a Graphic in an HTML Document To use a graphic in an HTML document, you 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.

Inserting a Graphic in an HTML Document 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

Inserting a Graphic in an HTML Document Optional attributes for the <img /> tag are: height and width : describe the graphic’s height and width in pixels a 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.

Broken Link Displayed in Internet Explorer New Perspectives on The Internet, Sixth Edition—Comprehensive Tutorial 8

Using Anchors Anchor tag ( <a> ): the 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 : the page that opens when a hyperlink on a Web page is clicked. Source page : the Web page that contains a hyperlink. Bookmark : a hyperlink to a location on the same Web page as the source page.

Adding a Link to a Web Page 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.

Using a Web Site Management Tool Most Web developers rely on options other than text editors for creating Web sites, such as Microsoft FrontPage and Macromedia 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 FrontPage or Dreamweaver lessens the burden on the developer to understand the syntax of all the HTML tags and attributes that create Web pages.

Web Page Created in Microsoft FrontPage New Perspectives on The Internet, Sixth Edition—Comprehensive Tutorial 8

HTML Document Generated by FrontPage New Perspectives on The Internet, Sixth Edition—Comprehensive Tutorial 8

Web Page Created Using Macromedia Dreamweaver New Perspectives on The Internet, Sixth Edition—Comprehensive Tutorial 8

HTML Document Generated by Dreamweaver New Perspectives on The Internet, Sixth Edition—Comprehensive Tutorial 8

Choosing the Right Software Development Tool 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.

Programming with JavaScript 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 that the browser can execute. JavaScript : a scripting language originally available as part of the Netscape Navigator browser

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

Programming with JavaScript 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.

Programming with JavaScript 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

Creating Animated Content 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.

Creating Animated Content Flash : The Flash Player lets your Web browser display simple animations, user interfaces, static graphics, movies, sound, and text that was created using Macromedia Flash software. 98% 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. The latest version of Internet Explorer includes the Flash Player so users do not have to download it.

Creating Animated Content Shockwave Player : a more fully featured browser plug-in than the Flash Player lets you view animated, three-dimensional interfaces, interactive advertisements and product demonstrations, multiuser games, streaming CD-quality audio, and video that was created using Macromedia Director software uses streaming technology so you do not need to wait for an entire file to download before playing it according to Macromedia, more than 200 million Internet users use Shockwave Player to play games and view animated content

Creating Animated Content 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.

Choosing Image Editing and Illustration Programs Computer-generated graphics come in two basic varieties: raster ( bitmap ) graphics : composed of pixels also called bitmap images vector graphics : composed of paths

Raster Graphic Created Using Windows Paint New Perspectives on The Internet, Sixth Edition—Comprehensive Tutorial 8

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 Macromedia Fireworks Corel Paint Shop Pro Any image that you take using a digital camera or make using a scanner is a raster graphic.

Vector Graphic Created Using Adobe Illustrator New Perspectives on The Internet, Sixth Edition—Comprehensive Tutorial 8

Choosing Image Editing and Illustration Programs Vector graphics have the following filename extensions: .ai .wmf .cdr .dxf Vector graphics are created using: Illustrator, CorelDRAW AutoCAD programs

Choosing Image Editing and Illustration Programs 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 .

Choosing a Web Hosting Service 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.

Understanding Your Web Site’s Technical Requirements First, evaluate your Web site’s content and goals and to understand the tools that you will be using to create your pages. Storyboard : a 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

Sample Storyboard New Perspectives on The Internet, Sixth Edition—Comprehensive Tutorial 8

Understanding Your Web Site’s Technical Requirements 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.

Understanding Your Web Site’s Technical Requirements 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. If you used FrontPage to create your Web site, you need a Web hosting service that supports FrontPage Server Extensions to process pages that include dynamic objects such as forms. If you use FrontPage and the server does not support FrontPage Support Server Extensions, you need to set up FrontPage so it does not use any code in your Web pages that requires the Extensions, and in its place, insert code that the company’s server does support.

Using a Secure Server Secure sever : encrypts data. Dedicated server : a 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.

Understanding Your Web Site’s File Size and Transfer Requirements You need to 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 : the 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.

Understanding Your Web Site’s File Size and Transfer Requirements You might also want to 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.

Securing a Domain Name Another question you need to ask when securing a Web hosting service is about the Web hosting service’s policy for securing a domain name for your Web site. You can use a registrar such as InterNIC 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.

Asking about Other Services Offered by 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 are “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.

Publishing a Web Site Publishing your Web site means to move your files to the company’s Web server. Most companies will ask you to use FTP to move your files. Control panel : a Web page that you access with your Web site’s user name and password and that includes all the tools. If you are using a Web site management program such as FrontPage or Dreamweaver, you can use the tools in those programs to publish your Web site.

Publishing a Web Site 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.

Publishing a Web Site 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.

Search Engine Submission and Optimization 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 : the 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 : the 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.

Summary 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 FrontPage and Macromedia Dreamweaver are more sophisticated ways to create Web pages and manage a Web site. JavaScript can display animated content in a Web page.

Summary Image editing programs and illustration software create graphics. 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.

Tutorial 08 - Creating Effective Web Pages

More Related Content

What's hot (20)

Viewers also liked (16)

Similar to Tutorial 08 - Creating Effective Web Pages (20)

More from dpd (20)

Recently uploaded (20)

Tutorial 08 - Creating Effective Web Pages