Title Slide

1
CHAPTER 2 WEB PAGE ELEMENTS
37 Slides
2
WHERE WERE GOING
3
OVERVIEW OF WEB PAGE ELEMENTS
4

• Some HTML Gotchas Dont forget to use . . .
• ltHTMLgt and ltHEADgt tags
• Height and Width attributes for ltIMGgt tags
  (manage image size)
• ALT attributes with alternate text for ltIMGgt
  tags (accessibility issues)
• ending tags for ltHEADgt, ltBODYgt, ltPgt, and
  ltCENTERgt tags
• proper codes for extended characters
• See http//www.htmlgoodies.com/ for more
  information

5
Color has a major impact on our daily lives. The
successful use of color can influence visitors to
your site(s) . . . subdued (pastel) colors for
soothing, bright colors for excitement, etc.
The size of images can dramatically affect
download times. Most monitors require an image
resolution of only 72 dots per inch (dpi) to
sharply render an image. Common web development
formats are GIF, JPEG, PNG and SVG
6

• Although they can lend vibrancy and excitement
  to your web site, be careful not to over-use
  multimedia
• Always weigh the relevance and quality of the
  multimedia against its download impact

• This is where the money is . . . gathering
  information from your web site customers /
  visitors
• Getting orders and collecting their customers
  data is what your customers want!

7

• HTML is the original
• SGML was developed by the ISO to implement
  standards for tagging
• XML allows you to create your own tags
• XHTML is the current standard
• DHTML allows greater customization based on user
  preferences, geographic location, etc. Many are
  seen in HTML ver. 4.01

• Since 1994, HTML has undergone several additive
  revisions
• XHTML is the current markup language standard

8
In the Document Object Model (DOM) hierarchy, an
HTML page is an object and the tags within it are
properties of that object
Structure in an HTML page begins with the Head
(establishes page rules and behaviors) and the
Body (establishes what the user sees)
9

• The basic structure for all HTML documents, or
  Shell, is shown above. The ltheadgt and lt/headgt
  tags identify a Shell section that may contain
• The document Title (lttitlegt lt/titlegt)
• Tags for any executable Scripts (i.e.,
  JavaScripts) in the document
• Style identifiers (i.e. Cascading Style Sheets).
  These Styles may be Embedded (internal) using the
  ltstylegt and lt/stylegt or Linked (external)
• Meta Tags - Used to provide descriptions of page
  content, expiration, etc.

10

• Elements are sets of tags with content between
  them
• Attributes modify tags and are commonly applied
  with the opening tag rather than the closing tag

• Tags should always be started with an opening
  identifier lttaggt and a closing identifier lt /taggt
• XTML requires lowercase tags so always use
  lowercase tags for consistency between pages and
  sites
• Horizontal Symmetry implies keeping all tags in
  the appropriate order

11
HTML BODY TAGS
12
Anchor tags lta href gt and lt/agt can be used used
(with the ) to define internal (relative)
document links within your page(s) or static
(absolute) external links to other sites

• When referring to objects like images in your
  web pages, it is preferred to used Relative links
  rather than Static links. Static links can fail
  when you move your web pages from site to site

Tip Always plan on using the lt heightxgt and
lt widthygt and lt altdescription of
imagegt tags for images. These attributes assure
proper image layout and resolve accessibility
issues to your site across most browsers
13
Tables lttablegt and lt/tablegt are frequently used
to control the arrangement and layout of page
elements Attributes of tables are used control
their position lt alignpositiongt, size lt
widthx()gt, border width lt borderxgt,
spacing lt cellspacingygt, or padding lt
cellpaddingzgt The lttrgt and lt/trgt tags are used
to define Table Rows and can have the attributes
lt alignxgt or lt valignygt to control row
content positioning The lttdgt and lt/tdgt tags are
used to define individual cells and/or column
placement
14
An Ordered List using the ltolgt, lt/olgt and ltligt
tags is used to establish a numerically sequenced
listing
The Unordered List is used to create bulleted
items with the ltulgt, lt/ulgt and ltligt tags
The Definition List is used in creating
glossary-type entries with the ltdlgt, lt/dlgt and
the ltdtgt tags
15

• Frames allow you to divide your web screen into
  separate functional element areas. Each defined
  area is composed of a separate HTML page
• A separate, controlling page is employed to
  define and describe the complete frameset using
  the ltframeset gt and lt/frameset gt tags. The
  ltnoframesgt tag contents will be displayed when
  the users browser does not support frames

• Attributes of the ltframeset gt tag
• rowsx
• colsy ( indicates a relative column width)
• borderz (for Netscape Ver. 3.0)
• frameborderx and framespacingy (for
  Internet Explorer)

16

• Attributes of the ltframe gt tag
• nameframe_name
• srchtml_page_name
• marginwidthx and marginheighty
• scrollingyes/no/auto and noresize (disallows
  frame resizing)
• frameborderz

17
COLOR THEORY AND DIGITAL COLOR
18

• Natural world colors are made of pigments which
  can both absorb and then reflect light
• The three primary colors, Red, Yellow and Blue
  may be combined to create their complimentary
  colors
• Complimentary colors may be combined with their
  primary opposite to create the color gray

• Digital coloration, or unnatural color
  generation, is the result of a theory known as
  Additive Synthesis
• To create colors on a computer monitor, Red,
  Green, and Blue (RGB) colored light is aimed
  toward tiny points (pixels) on the screen to
  create the remaining spectrum of blended colors

19

• RGB Color Management
• (ala Additive Synthesis)
• Created on the monitor by mixing different
  amounts of colored light
• RGB White 255, 255, 255 or the maximum amount
  of light from each source color

CMYK Color Management (frequently used for
Printed output) Grayscale is another Color
Management Scheme
20
GRAPHICS, AUDIO, ANIMATION AND INTERACTIVITY
21
Above are hexadecimal color examples ranging from
White (FFFFFF) to Black (000000) with various
colors between

• Decimal values from 0 to 255 represent the full
  color-and-light range for Red, Green, and Blue
• Above, Red is shown with a decimal value of 102.
  Green is shown with decimal 102. Blue is shown
  with decimal 255 (the maximum value)
• Hence, the RGB color here is 102, 102, 255
• The hexadecimal equivalent is 6666FF

There are 216 so-called Web Safe colors
commonly employed for stability with different
browsers. Dithering is used when a direct color
match is not available
22

• Bitmap, or Raster images are made up of a
  collection of tiny, pixel-sized squares.
• Vector graphics are comprised of lines and
  shapes called Bezier Curves
• Vector graphics are superior for use with high
  quality artwork or text
• Vector graphics automatically adjust to the
  resolution of the monitor. Because of this you
  can stretch or shrink a graphic image with no
  loss of sharpness
• Great for Logos, Charts, Graphs, Maps, Cartoons,
  etc.

23
Two Categories of Compression Lossy So named
because some data loss is expected during
compression / decompression Lossless Image
detail is preserved. Larger file sizes
24

• GIF Images (jiff or giff - Who cares?)
• Bitmap based (Raster) image format using
  lossless compression
• Used for
• Line Drawn images
• Simple images with limited colors
• Simple animations and/or transparency
  requirements
• Limited to 256 colors or patterns

25

• JPEG Images (jay-peg) - Joint Photographic
  Expert Group
• Uses a different Lossy compression algorithm than
  GIF Images
• Used for
• Images with lots of colors (like photographs)
• Images with gradient fills and light sources

26

• PNG
• Developed to replace GIF
• Patent-free images
• Lossless compression
• SVG
• Vector graphics format
• Users need a plug-in
• Smaller files sizes
• Complex animations

TIFF Not for the Web! EPS Used for Printed
Pages BMP Bitmapped Graphics WMF Windows
Metafile Format PICT Macintosh Compatible PCX
From PC Paintbrush Graphics Files
27

• Analog signals are continuous streams of
  information
• Digital signals are discreet signals and are
  best represented by either an on or off state
• Digitizing is the process of converting an
  analog media, whether video, audio, or other
  motion input, to digital formats

Digital Animation is created with a series of
pictures or frames You will be learning how to
create digital animations with Adobes LiveMotion
28
Macromedias Shockwave Flash player is a
commonly used vector-based animation
viewer/creator Its compact file compression makes
for efficient and scalable graphics files that
download quickly and retain their high
resolution LiveMotion allows you to create vector
animations and save them in a Shockwave Flash
(.SWF) format
29
Digital Formats AVI - Audio Video Interleave.
Adobe Premier can be used to generate .avi
files MOV - Apples QuickTime movie
file QuickTime VR - Apples enhanced 3-D for
displaying multimedia images MPEG - (Moving
Picture Experts Group) Developed by the ISO for
digital audio and video formats
Digital Audio Formats WAV - Created by
Microsoft. Uses uncompressed raw audio
data AIFF - Audio Interchange File Format.
Popular Macintosh format. .aif files for
PC MIDI - Musical Instrument Digital Interface.
Very small file sizes. Primarily used for audio
cards designed to play the digital signals
stored on them MP3 - MPEG-1, Audio Layer-3. Very
small file sizes with outstanding sound quality
30
Realtime at-the-moment-of-demand playing of
media Play your media NOW! Tune in to live
events, get feature length movies over your LAN,
designed for one-to-many distribution,
stop/start/pause/replay events on demand,
unauthorized duplication protection
Real Audio/Video - Streaming audio and video
requires the RealPlayer and a RealAudioVideo
Server Windows Media Player - handles a variety
of media file types, i.e. .wav, .avi, .mov,
.mpeg, .aif, and MP3 QuickTime - Reqires a
Macintosh Operating System server ver. 9.0
31

• HTML Forms allow the user to interact with your
  web site
• Require server-side programs and scripts to
  collect user input
• Can be used with a database to store user input
• PDF forms, like HTML Forms can be used to
  collect user data interactively

32
(No Transcript)
33
Client side scripting is interpreted by the
clients browser. JavaScript (Netscape Sun
Microsystems) adds rollover buttons, pop-up
windows, animations, and detects a users
browser. This is not the same as the Java
Programming Language VBScript (Microsoft) works
best with Internet Explorer and Microsofts
Internet Information Server (IIS). Its close
native operation within IE is seen by many as a
functional flaw.
34
Server Side Scripting Executed on the Server
computer to process input from online forms.
Examples CGI (Common Gateway Interface) - A set
of standards which employs other programming and
scripting languages like Perl ASP (Active Server
Page) - An alternative to CGI, this powerful
server-based application development tool
supports VBScript, Java, and JavaScript ColdFusion
- A suite of server-based web application
development tools ColdFusion uses its own version
of markup (CFML). Quickly becoming one of the
most popular PHP (Personal Home Page), JSP (Java
Server Pages ), and SSI (Server Side Includes)
are additional Server Side Applications
35
(No Transcript)
36
WHERE WEVE BEEN
37
THE END! ?