The Internet 8th Edition Tutorial 9 Creating Effective Web Pages.

The Internet8th Edition

Tutorial 9Creating Effective Web Pages

New Perspectives on the Internet, 8th Edition

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 images and links to an HTML document


Objectives

• Examine Web site creation and management programs

• Learn about JavaScript, Flash, and Shockwave

• Learn about the different types of images 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


Objectives

• Understand the issues involved when publishing a Web site

• Learn about search engine submission and search engine optimization


Understanding Markup Languages

• A markup language is a general term that indicates the separation of the formatting of a document and the content of a document

• The World Wide Web Consortium (W3C) establishes specifications, or sets of standards, that identify how a browser interprets the HTML code

• Extensible Markup Language (XML) is another popular markup language that is used to describe the format and structure of data


Understanding Markup Languages

• Extensible Hypertext Markup Language (XHTML), 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

• HTML specifications that are not included when newer specifications are released or are not included in the XHTML specification are referred to as deprecated


Understanding Tags and Attributes

• Tags must identify all the elements in a Web page

• Tags that are included within other tags are called nested tags

• Tags are either two-sided, such as <p></p>, or they are one-sided, such as <br/>

• Some tags include attributes that specify additional information about the content to be formatted by the tag

• Some attributes are optional, some are not


Planning an HTML Document

• You can create Web pages using a text editor or a program that includes multiple features for working with Web pages and Web sites

• The Web-safe color palette is a collection of 216 colors that all computers render in the same way


Creating an HTML Document

• The first section, called the head section, includes the <head> tag and includes general information about the document

• The second required section in an HTML document is the body section, which includes the content of the Web page along with the tags needed to format the content

• A document type declaration (DTD) is a one-sided tag that tells a browser which syntax version of a markup language your document uses


Creating an HTML Document

• A comment tag is a one-sided tag that the browser ignores and does not display in the Web page

• HTML supports three kinds of lists:

– Bulleted or unordered

– Numbered or ordered

– Definition


HTML supported lists


Using Images in an HTML Document

• In HTML, an image is any file that contains a picture such as a photograph, logo, or computer-generated file

• To include an image in a Web page, it must be stored as a file

• A relative path specifies a file’s location relative to the location of the current file

• An absolute path specifies a file’s location with absolute precision; there is no reference to the current file


Broken Link displayed in Browser


Using Anchors

• The HTML tag that creates a hyperlink is the anchor tag <a>

• The most common use of a hyperlink is to connect the different Web pages in a Web site together

• The page that opens when a hyperlink is clicked is called the hyperlink’s target or target page

• The Web page that contains the hyperlink is called the source page


Using Anchors

• The syntax of a hyperlink that connects a source page with a target page is as follows:

<a href=“default.html”>Home Page</a>

• When a hyperlink is used to link to a location on the same page, it is sometimes called a bookmark


Adding a Link to a Web Page

• You can create a hyperlink at any time during Web page development

• It’s important to make sure that the page is stored in the correct location when creating a link


Using a Web Site Management Tool

• Most Web developers rely on Web Site Management tools rather than Notepad and HTML

• Microsoft Expression Web and Adobe Dreamweaver are two Web site creation and management tools



• Web page created using Microsoft Expression Web



• Web page created using Adobe Dreamweaver



• Using a Web site management tool reduces the burden on the developer to understand the syntax of all the HTML tags and attributes that create Web pages

• Web site management tools simplify some of the tasks needed to complete a Web site


Choosing Other Development Tools

• Some Web pages include content that is beyond the capabilities of HTML, such as dynamic content

• JavaScript is a scripting language that was originally developed as “LiveScript” by Brendan Eich while he worked for Netscape Communications Corp.

• A scripting language is a programming language that is executed by a Web browser



• The most common use of JavaScript is to perform tasks that are not possible in the static world of HTML documents

• Many Web sites include resources for downloading and using free scripts written in JavaScript



• Browser Extensions allow a Web browser to perform tasks it was not originally designed to perform

• Types of browser extensions:

– Plug-in: browser uses plug-in to display or play a specific file that you request

– Helper application: programs installed on the user’s computer that the browser starts and uses to “help” display or play a file

– Add-on: includes tools that enhance the browsing experience, such as toolbars that let you access a search engine without opening its Web site



• Flash Player lets your Web browser display simple animations, user interfaces, images, movies, sound, and text that was created using Adobe Flash software

• Shockwave Player is a more fully featured browser plug-in

• Shockwave 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 Adobe Director software



• Snowcraft game that uses Shockwave Player


Choosing Image Editing and Illustration Programs

• Computer-generated graphics come in two basic varieties:

– Raster graphics are composed of pixels

– Vector graphics are composed of paths



• Graphic created using Paint, a raster graphic



• Raster graphics have the following file extensions:

– .bmp

– .gif

– .jpg

– .png

– .tif



• Graphic created using Adobe Illustrator, a vector graphic



• Vector graphics have the following file extensions:

– .ai

– .wmf

– .cdr

– .dxf

• Vector graphics are scalable, which means their edges are smooth at any resolution



• 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

• Ideally you choose a Web hosting service before you begin working on a Web site

• It’s important to understand your web site’s technical requirements when choosing a hosting service

• A storyboard of a Web site shows the pages you plan to include, separated into levels that show the relationships of the pages to each other



• Example of a storyboard for a Web site



• A secure server encrypts data, which changes it into a format that prevents unauthorized parties from being able to read or use it

• A dedicated server is a Web server that hosts only one site

• A shared server hosts several sites



• It is important to understand your Web site’s file size and transfer size

• The amount of data that is transferred from the Web server is known as the site’s bandwidth or data transfer

• You must secure a domain name for your Web site

• You should ask about other services offered by the Web hosting service


Publishing a Web Site

• After finding a Web hosting service, the next step is publishing the site

• The Web hosting service should provide the information you need to upload the Web site files

• A local Web site is a copy of the Web site stored on a hard or local drive

• The Web site stored on the Web server is called the remote Web site


Search Engine Submission and Optimization

• The last major task in publishing a Web site is promoting it

• You can be proactive and use <meta> tags to teach search engines how to list your site by the site’s primary focus

• Search engine submission is 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 is 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

• HTML is a markup language used to create Web pages

• There are multiple tools you can use to create Web pages, including Web site management tools

• Other development tools include JavaScript and image editing and illustration programs


Summary

• You must choose a Web hosting service in order to publish a Web site

• You must publish your Web site for it to be viewable on the Internet

• You can promote a Web site with search engine submission and optimization

The Internet 8th Edition Tutorial 9 Creating Effective Web Pages.

Documents