Tutorial 8:

Tutorial 8:

Creating Effective Web Pages

New Perspectives on the Internet, 9th Edition

Objectives

• Session 8.1– Define HTML and understand how it works– Examine the tools used to create HTML

documents– Create an HTML document– Use tags, attributes, and anchors– Add images and links to an HTML document

2


Objectives

• Session 8.2– Plan the content for a Web site– 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– Understand the issues involved when publishing a Web site– Learn about search engine submission and search engine

optimization

3

Session 8.1 Visual OverviewUnderstanding HTML

New Perspectives on the Internet, 9th Edition 4


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

• Before HTML, Standard Generalized Markup Language (SGML)—a metalanguage that is used to create other languages—was the standard for formatting documents that were not dependent on the operating system or environment in which the documents were created or viewed

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

5


Understanding Markup Languages• Extensible Markup Language (XML) is another popular

markup language that is used to describe the format and structure of data

• 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

6

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 7


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

• The fonts that are available on your computer are not always the same ones that are available on other computers; use fonts that are considered to be common on all computers

8


Planning an HTML Document

9

Creating an HTML Document

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

10

• Adding a Comment to an HTML Document– A comment tag is a one-sided tag that the browser

ignores and does not display in the Web page• Inserting and Formatting Headings

– To create a level-one heading, use the <h1> tag– Attributes may be added to tags– Separate multiple attribute values with a semi-

colon

11

• Inserting and Formatting a Paragraph– Content can be added to a Web page by copying

text from a document and inserting it between and 

– Enclose text in additional tags to change to bold or italic

• Creating a List– HTML supports three kinds of lists:

• Bulleted or unordered• Numbered or ordered• Definition list

12


Using Images in an HTML Document

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

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

• The height and width attributes describe the image’s height and width in pixels; a pixel is a single point in an image

• 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

14


Using Images in an HTML Document

15

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

16

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>

• Most browsers underline hyperlinks and display them in a blue font so they are easy to identify in a Web page

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

17


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

18

Session 8.2 Visual OverviewCreating a Web Site


Evaluating Web Site Content


• A storyboard can help identify the general content for each page, the number of pages in the site, and the relationship between the site’s pages


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– They use a graphical user interface (GUI) to generate the

HTML documents for Web pages– Their toolbars and panels include tools that let you

format text, create hyperlinks, and perform other tasks that are supported by HTML and XHTML

21



• Expression Web uses styles to define text formatting, instead of the tags that you used in the HTML document you created in Notepad

• A style is a collection of formatting instructions that the Web browser applies to text



• Dreamweaver generates code that is compatible with XHTML 1.0



• 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

• These programs include:– Code snippets that create animations– Tools that let you check the entire Web site for broken

links and other problems

24


Choosing Other Development Tools

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

• Programming with JavaScript– JavaScript is a scripting language that was originally

developed as “LiveScript” by a Netscape Communications Corp. programmer

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

– A scripting engine translates the code in the script into a format that a browser can execute

25



• Programming with JavaScript (continued)– 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

26


Choosing Other Development Tools• Creating Animated Content

– Browser extensions allow a Web browser to perform tasks it was not originally designed to perform; types include:• 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

27



• Creating Animated Content (continued)– 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

28


• Choosing Image Editing and Illustration Programs– Computer-generated graphics come in two basic

varieties:• Raster graphics (also called bitmaps) are composed of

pixels• Vector graphics are composed of paths

29



• Choosing Image Editing and Illustration Programs (continued)– Raster graphics have the following file extensions:

• .bmp• .gif• .jpg• .png• .tif

30



• Choosing Image Editing and Illustration Programs (continued)– Vector graphics have the following file extensions:

• .ai• .wmf• .cdr• .dxf

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

31



• Choosing Image Editing and Illustration Programs (continued)– 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– Some programs, such as Fireworks and Photoshop,

do both, but most programs are geared primarily toward one category of graphic or the other

32



• 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

• Understanding Types of Web Servers– 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 sites33

Choosing a Web Hosting Service


• Understanding the Site’s File Size and Transfer Requirements– The amount of data that is transferred from the

Web server is known as the site’s bandwidth or data transfer

– Most companies sell server space based on a file size limit and a daily or monthly data transfer limit

– Make sure that the Web hosting service can handle current needs as well as anticipated needs

34



• Evaluating Other Services Offered by a Web Hosting Service– Other useful services offered by the Web hosting

service include site statistics, email accounts, Web site templates, Web site construction tools, database software, domain name management services, and technical support

– You must secure a domain name for your Web site; some Web hosting services include domain name registration (and renewal) as part of their service

35



• 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 control panel is a Web page that includes all the tools you need to access and manage your Web site

• 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

36

Publishing a Web Site

• The last major task in publishing a Web site is promotion• You can be proactive and use <meta> tags to teach

search engines how to list your site • 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 (SEO) 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

37

Search Engine Submission and Optimization

Search Engine Submission and Optimization


Tutorial 8:

Documents

Transcript of Tutorial 8: