Creating Effective Web Pages

1
Creating Effective Web Pages
Tutorial 8

• Creating HTML Documents and
• Enhancing Them with Browser Extensions

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

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

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

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

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

7
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

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

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

10
Planning an HTML Document
A sketch of a final Web page
New Perspectives on The Internet, Sixth
EditionComprehensive Tutorial 8
10
11
Planning an HTML Document

• Color is an element that depends on the users
  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.

12
Planning an HTML Document
New Perspectives on The Internet, Sixth
EditionComprehensive Tutorial 8
12
13
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 tag to indicate that the
  file is an HTML document.

14
Creating the HTML Document Structure

• Head section
• begins with the tag
• includes general information, such as the
  character set used, keywords that identify the
  documents content, and comments about the
  documents creator or the date the document was
  updated
• includes the nested 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 tag is a two-sided tag, so you must
  include the closing tag.

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

16
Basic HTML Document Structure in Notepad
New Perspectives on The Internet, Sixth
EditionComprehensive Tutorial 8
16
17
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

18
Inserting and Formatting Headings

• Identify headings with tags.
• use the tag for a level-one heading
• use the tag for a level-two heading
• and so on down to the tag for a level six
  heading
• Add attributes to change alignment and color of
  headings.

19
Inserting and Formatting Headings

• To change the alignment
• in HTML, add the align attribute with the center
  value, for example
• 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
  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.

20
Headings Added to the Body Section
New Perspectives on The Internet, Sixth
EditionComprehensive Tutorial 8
20
21
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.

22
Inserting and Formatting a Paragraph

• To insert a paragraph in an HTML document
• type the opening paragraph tag
• type the paragraph text
• type the closing paragraph tag
• To change font style
• enclose the text in the appropriate tags
• to change text to italics, use the italic tags
  and
• to change text to bold, use the bold tags and
  

23
Paragraph Added to HTML Document
New Perspectives on The Internet, Sixth
EditionComprehensive Tutorial 8
23
24
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.

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

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

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

29
Inserting a Graphic in an HTML Document

• Src (source) attribute
• must be included with the tag
• defines the location of the graphic
• relative path specifies a files location
  relative to the location of the current file
• absolute path specifies a files location with
  absolute precision there is no reference to the
  current file

30
Inserting a Graphic in an HTML Document

• Optional attributes for the tag are
• height and width describe the graphics height
  and width in pixels a pixel is a single point in
  an image
• border describes the graphics border size in
  pixels
• alt provides alternative text that identifies
  the graphics 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.

31
Broken Link Displayed in Internet Explorer
New Perspectives on The Internet, Sixth
EditionComprehensive Tutorial 8
31
32
Using Anchors

• Anchor tag ()
• 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.

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

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

35
Web Page Created in Microsoft FrontPage
New Perspectives on The Internet, Sixth
EditionComprehensive Tutorial 8
35
36
HTML Document Generated by FrontPage
New Perspectives on The Internet, Sixth
EditionComprehensive Tutorial 8
36
37
Web Page Created Using Macromedia Dreamweaver
New Perspectives on The Internet, Sixth
EditionComprehensive Tutorial 8
37
38
HTML Document Generated by Dreamweaver
New Perspectives on The Internet, Sixth
EditionComprehensive Tutorial 8
38
39
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.

40
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

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

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

43
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 users browser version or open a
  pop-up window with a message
• add functionality to a Web page, such as a simple
  or scientific calculator

44
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
  users 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.

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

47
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

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

49
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

50
Raster Graphic Created Using Windows Paint
New Perspectives on The Internet, Sixth
EditionComprehensive Tutorial 8
50
51
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.

52
Vector Graphic Created Using Adobe Illustrator
New Perspectives on The Internet, Sixth
EditionComprehensive Tutorial 8
52
53
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

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

55
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 sites pages.
• The choice of a Web hosting service is more than
  just one of affordabilityit 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.

56
Understanding Your Web Sites Technical
Requirements

• First, evaluate your Web sites 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 sites navigation structure,
  because it shows the path of navigation through
  the site

57
Sample Storyboard
New Perspectives on The Internet, Sixth
EditionComprehensive Tutorial 8
57
58
Understanding Your Web Sites 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.

59
Understanding Your Web Sites Technical
Requirements

• If your site uses Active Server Pages
  (ASP)dynamic Web pages based on the content
  stored in a databaseyoull 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 companys server does support.

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

61
Understanding Your Web Sites 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 sites server space or
  bandwidth.

62
Understanding Your Web Sites 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 companys intended audience
  and whether it will assist you with future
  questions.

63
Securing a Domain Name

• Another question you need to ask when securing a
  Web hosting service is about the Web hosting
  services 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 sites 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.

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

65
Publishing a Web Site

• Publishing your Web site means to move your files
  to the companys 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 sites 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.

66
Publishing a Web Site

• When you move your Web sites files to the Web
  server, include all of the folders and supporting
  files to the Web server, and not just the Web
  sites HTML documents.
• A common mistake is to omit the Web sites
  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.

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

68
Search Engine Submission and Optimization

• The tag is a summary of the pages
  contents that a search engine might include in
  its search results.
• A search engine indexes the page by looking at
  the keywords in the tag to identify the
  search expressions that users might type to
  locate your page.
• Search engine submission the process of
  submitting your sites 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 engines results when a user searches the
  Web using your sites keywords.

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

70
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 sites files from your local
  drive to a Web server.
• To list a Web site in search engines, create
  tags to cause your Web site to be ranked
  high in the search engine results.