Tutorial 8 - Creating Effective Web Pages

50 %
50 %
Information about Tutorial 8 - Creating Effective Web Pages
Education

Published on November 9, 2008

Author: dpd

Source: slideshare.net

Tutorial 8 Creating Effective Web Pages

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 Examine Web site creation and management programs New Perspectives on The Internet, Seventh Edition

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

Examine Web site creation and management programs

Objectives Learn about JavaScript, 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

Learn about JavaScript, 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

Understanding Markup Languages 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 for 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

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 for formatting documents in a way that was not dependent on the operating system or environment on which the documents were created or viewed

Understanding Markup Languages Tim Berners-Lee and Robert Calliau developed the first version of HTML using SGML in 1989 World Wide Web Consortium ( W3C ) 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 W3C has been working on the fifth revision of the HTML specification New Perspectives on The Internet, Seventh Edition

Tim Berners-Lee and Robert Calliau developed the first version of HTML using SGML in 1989

World Wide Web Consortium ( W3C ) 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 W3C has been working on the fifth revision of the HTML specification

Understanding Markup Languages 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 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 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

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

Compatible with the HTML 401 specification

HTML specifications not included when newer specifications are released or not included in the XHTML specification are deprecated

Understanding Tags and Attributes 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 one-sided Some tags include attributes that specify additional information about the content to be formatted by the tag New Perspectives on The Internet, Seventh Edition

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

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

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

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 : 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

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

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

Creating an HTML Document 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

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

Creating the HTML Document Structure 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

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

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

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

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

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: <!-- comment --> Can appear anywhere in an HTML document New Perspectives on The Internet, Seventh Edition

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:

<!-- comment -->

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 New Perspectives on The Internet, Seventh Edition

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=&quot;center&quot;> 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=&quot;text-align: center&quot;> 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

To change the alignment:

In HTML, add the align attribute with the center value, for example: <h1 align=&quot;center&quot;>

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=&quot;text-align: center&quot;>

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 and Comment Added to the HTML Document New Perspectives on The Internet, Seventh Edition

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 New Perspectives on The Internet, Seventh Edition

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> New Perspectives on The Internet, Seventh Edition

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, Seventh Edition

Creating a List 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

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

Creating a List New Perspectives on The Internet, Seventh Edition

Using Pictures 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 New Perspectives on The Internet, Seventh Edition

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

Using Pictures 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 New Perspectives on The Internet, Seventh Edition

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

Using Pictures in an HTML Document 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

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

Using Pictures 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 New Perspectives on The Internet, Seventh Edition

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

Using Pictures in an HTML Document 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

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

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

Using Anchors 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

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

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 New Perspectives on The Internet, Seventh Edition

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

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

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

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

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

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

Choosing Other Development Tools 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

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 : Scripting language Originally available as part of the Netscape Navigator browser New Perspectives on The Internet, Seventh Edition

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 :

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 New Perspectives on The Internet, Seventh Edition

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 New Perspectives on The Internet, Seventh Edition

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 New Perspectives on The Internet, Seventh Edition

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 New Perspectives on The Internet, Seventh Edition

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 New Perspectives on The Internet, Seventh Edition

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

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

Creating Animated Content Shockwave Player : More fully featured browser plug-in than Flash Player Lets you view animated, 3D 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

Shockwave Player :

More fully featured browser plug-in than Flash Player

Lets you view animated, 3D 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

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 New Perspectives on The Internet, Seventh Edition

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 New Perspectives on The Internet, Seventh Edition

Computer-generated graphics come in two basic varieties:

Raster ( bitmap ) graphics :

Composed of pixels

Also called bitmap images

Vector graphics :

Composed of paths

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

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

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

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

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 New Perspectives on The Internet, Seventh Edition

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 New Perspectives on The Internet, Seventh Edition

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 New Perspectives on The Internet, Seventh Edition

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

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

Sample Storyboard New Perspectives on The Internet, Seventh Edition

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

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

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

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

Understanding Your Web Site’s File Size and Transfer Requirements 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

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

Understanding Your Web Site’s File Size and Transfer Requirements 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

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

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

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 New Perspectives on The Internet, Seventh Edition

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

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 New Perspectives on The Internet, Seventh Edition

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 New Perspectives on The Internet, Seventh Edition

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 : 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

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

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 Expression Web and Adobe Dreamweaver are more sophisticated ways to create Web pages and manage a Web site JavaScript can display animated content in a Web page Image editing programs and illustration software create graphics New Perspectives on The Internet, Seventh Edition

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

JavaScript can display animated content in a Web page

Image editing programs and illustration software create graphics

Summary 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

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

Add a comment

Related presentations

Related pages

Presentation "XP New Perspectives on The Internet, Sixth ...

Presentation on theme: "XP New Perspectives on The Internet, Sixth Edition— Comprehensive Tutorial 8 1 Creating Effective Web Pages Creating HTML ...
Read more

Tutorial - Developing websites with Kentico 8 - Kentico 8 ...

Kentico 8 Tutorial. ... shows you how to create web pages, ... Site development overview Page: Creating pages using the portal engine Page: ...
Read more

HTML Tutorial - Lesson 8 - PageTutor

Award winning HTML and Javascript tutorials. ... you want to make a Web Page! Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 ...
Read more

Creating Effective Web Design for Your Visitors

... having an effective web page ... Creating a sitemap helps ... There are several other things which are debatable in your article regarding Effective ...
Read more

HTML Completed Assignments

TUTORIAL 1 Creating Web Pages with HTML: ... Product Report Page Case Problem 4: My Home Page: TUTORIAL 3 ... Opera Composer's Web Site: TUTORIAL 8
Read more

Creating Effective Landing Pages - WebsiteTips.com Web ...

Creating Effective Landing Pages, by Michael Bloch. How to create, write effective landing pages for your website, for your online advertising campaign.
Read more

ASP.NET Tutorial 6- Create a Login website - Login page ...

... asp.net Validating User Input in ASP.NET Web Pages Sites ... 8:43. by ... ASP.NET Tutorial 1- Introduction and Creating Your First ASP ...
Read more

Tutorial on Building a Website

Creating Your Site/Pages . ... This is a great site to get free Web design templates. ... It will open this web page locally on your computer.
Read more