The Internet 8th Edition Tutorial 9 Creating Effective Web Pages

New Perspectives on the Internet, 8 th 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

New Perspectives on the Internet, 8 th Edition 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

New Perspectives on the Internet, 8 th Edition Objectives Understand the issues involved when publishing a Web site Learn about search engine submission and search engine optimization

New Perspectives on the Internet, 8 th Edition 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

New Perspectives on the Internet, 8 th Edition 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

New Perspectives on the Internet, 8 th Edition 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, or they are one-sided, such as Some tags include attributes that specify additional information about the content to be formatted by the tag Some attributes are optional, some are not

New Perspectives on the Internet, 8 th Edition 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

New Perspectives on the Internet, 8 th Edition Creating an HTML Document The first section, called the head section, includes the 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

New Perspectives on the Internet, 8 th Edition 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

New Perspectives on the Internet, 8 th Edition HTML supported lists

New Perspectives on the Internet, 8 th Edition 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

New Perspectives on the Internet, 8 th Edition Broken Link displayed in Browser

New Perspectives on the Internet, 8 th Edition Using Anchors The HTML tag that creates a hyperlink is the anchor tag 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

New Perspectives on the Internet, 8 th Edition Using Anchors The syntax of a hyperlink that connects a source page with a target page is as follows: Home Page When a hyperlink is used to link to a location on the same page, it is sometimes called a bookmark

New Perspectives on the Internet, 8 th Edition 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

New Perspectives on the Internet, 8 th Edition 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

New Perspectives on the Internet, 8 th Edition Using a Web Site Management Tool Web page created using Microsoft Expression Web

New Perspectives on the Internet, 8 th Edition Using a Web Site Management Tool Web page created using Adobe Dreamweaver

New Perspectives on the Internet, 8 th Edition Using a Web Site Management Tool 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

New Perspectives on the Internet, 8 th Edition 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

New Perspectives on the Internet, 8 th Edition Choosing Other Development Tools 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

New Perspectives on the Internet, 8 th Edition Choosing Other Development Tools 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

New Perspectives on the Internet, 8 th Edition Choosing Other Development Tools 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

New Perspectives on the Internet, 8 th Edition Choosing Other Development Tools Snowcraft game that uses Shockwave Player

New Perspectives on the Internet, 8 th Edition 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

New Perspectives on the Internet, 8 th Edition Choosing Image Editing and Illustration Programs Graphic created using Paint, a raster graphic

New Perspectives on the Internet, 8 th Edition Choosing Image Editing and Illustration Programs Raster graphics have the following file extensions: –.bmp –.gif –.jpg –.png –.tif

New Perspectives on the Internet, 8 th Edition Choosing Image Editing and Illustration Programs Graphic created using Adobe Illustrator, a vector graphic

New Perspectives on the Internet, 8 th Edition Choosing Image Editing and Illustration Programs Vector graphics have the following file extensions: –.ai –.wmf –.cdr –.dxf Vector graphics are scalable, which means their edges are smooth at any resolution

New Perspectives on the Internet, 8 th Edition Choosing Image Editing and Illustration Programs 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, 8 th Edition 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

New Perspectives on the Internet, 8 th Edition Choosing a Web Hosting Service Example of a storyboard for a Web site

New Perspectives on the Internet, 8 th Edition Choosing a Web Hosting Service 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

New Perspectives on the Internet, 8 th Edition Choosing a Web Hosting Service 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

New Perspectives on the Internet, 8 th Edition 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

New Perspectives on the Internet, 8 th Edition Search Engine Submission and Optimization The last major task in publishing a Web site is promoting it You can be proactive and use 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

New Perspectives on the Internet, 8 th Edition 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

New Perspectives on the Internet, 8 th Edition 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