Tutorial 8 Creating Effective Web Pages

1
Tutorial 8Creating Effective Web Pages
2
Objectives
3
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

4
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

5
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

6
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

7
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

8
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

9
Planning an HTML Document
10
Planning an HTML Document

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

11
Planning an HTML Document
12
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 lthtmlgt tag to indicate that the
  file is an HTML document

13
Creating the HTML Document Structure

• Head section
• Begins with the ltheadgt tag
• Includes general information about the document,
  such as keywords that identify the documents
  content for search engines and comments about the
  documents creator or the date the document was
  last updated
• Includes the nested lttitlegt 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 ltheadgt tag is a two-sided tag, so you must
  include the closing lt/headgt tag

14
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 ltbodygt tag indicates the beginning of the
  body section
• Closing lt/bodygt tag indicates the end of the body
  section
• Include the closing lt/htmlgt tag as the last item
  in the HTML document

15
Basic HTML Document Structure in Notepad
16
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
• lt!-- comment --gt
• Can appear anywhere in an HTML document

17
Inserting and Formatting Headings

• Identify headings with tags
• Use the lth1gt tag for a level-one heading
• Use the lth2gt tag for a level-two heading
• And so on down to the lth6gt tag for a level six
  heading
• Add attributes to change alignment and color of
  headings

18
Inserting and Formatting Headings

• To change the alignment
• In HTML, add the align attribute with the center
  value, for example lth1 align"center"gt
• 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 lth1
  style"text-align center"gt
• 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

19
Headings and Comment Added to the HTML Document
20
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

21
Inserting and Formatting a Paragraph

• To insert a paragraph in an HTML document
• Type the opening paragraph tag ltpgt
• Type the paragraph text
• Type the closing paragraph tag lt/pgt
• To change font style
• Enclose the text in the appropriate tags
• To change text to italics, use the italic tags
  ltigt and lt/igt
• To change text to bold, use the bold tags ltbgt and
  lt/bgt

22
Paragraph Added to HTML Document
23
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

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

26
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

27
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 ltimg /gt 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

28
Using Pictures in an HTML Document

• Src (source) attribute
• Must be included with the ltimg /gt 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

29
Using Pictures in an HTML Document

• Optional attributes for the ltimg /gt tag are
• Height and width describe the graphics height
  and width in pixels
• 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

30
Broken Link Displayed in Internet Explorer
31
Using Anchors

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

32
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

33
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

34
Web Page Created Using Microsoft Expression Web
35
HTML Document Generated by Expression Web
36
Web Page Created Using Adobe Dreamweaver
37
HTML Document Generated by Dreamweaver
38
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

39
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

40
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

41
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

42
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

43
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

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

46
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

47
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

48
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

49
Graphic Created Using Windows Paint
50
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

51
Graphic Created Using Adobe Illustrator
52
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

53
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

54
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

55
Understanding Your Web Sites Technical
Requirements

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

56
Sample Storyboard
57
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
• 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

58
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

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

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

61
Securing a Domain Name

• When securing a Web hosting service, ask about
  the Web hosting services 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 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

62
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

63
Publishing a Web Site

• Publishing your Web site means moving your files
  to the companys Web server
• Most companies will ask you to use FTP to move
  your files
• Control panel Web page you access with your Web
  sites 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

64
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

65
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

66
Search Engine Submission and Optimization

• The ltmetagt 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 ltmetagt tag to identify the
  search expressions that users might type to
  locate your page
• Search engine submission process of submitting
  your sites 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 engines results when a user searches the
  Web using your sites keywords

67
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

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