LEARNING OUTLINE Overview of Page Elements

The World Wide Web was primarily created to display text, and HTML (Hypertext Markup Language) is a text formatting language. HTML tags are the commands and instructions used by the designer to format and lay out the content of a web page. The text and tags are contained in the same file, called an HTML document. Which tags you choose and how you arrange them around the document determines how your page will look when viewed with a browser. Understanding how to use color will give you an undeniable edge in creating designs appropriate for your client's website. To understand color, it is important to understand the theory that surrounds it. Different shades and combinations of colors define how the website feels to the user. Images add identity, color, shape, and presence. They are a powerful and important aspect of the web, yet one that eludes many web designers. Using animation, sound, and video can enhance your designs. SWF animations, MIDI and WAV sounds, and QuickTime movies are just some of the multimedia options. HTML Basics

XHTML - This is the current markup language standard. HTML 4.01 - This version was released in 1999. It fixes a number of bugs in the HTML 4.0 specification. HTML 4.0 - First released in 1997, a second release was issued in 1998 with editorial corrections. HTML 3.2 - Released in 1996, it added features such as tables, applets, text-flow around images, superscripts, and subscripts, while providing backwards compatibility with the existing HTML 2.0 Standard. HTML 2.0 - This version (RFC 1866) was developed by IETF's (Internet Engineering Task Force) HTML Working Group in 1994. It set the standard for core HTML features. One aspect shared by all the markup languages is structure. The structure of HTML and its flavors is hierarchical. A hierarchy is an organized system, which can be structured in the shape of a tree or a pyramid, with each row of objects linked to objects directly beneath it. Hierarchical systems pervade everyday life. The army, for example,

which has generals at the top of the pyramid and privates at the bottom, is a hierarchical system. Similarly, the system for classifying plants and animals according to species, family, genus, and so on, is also hierarchical. As mentioned before, the key to understanding any language lies in its structure. In English, the elements in a sentence have a particular order that must be followed. For instance, the subject and verb in the sentence "The big, black dog played gleefully with the red ball." cannot be reversed. Likewise, adjectives like "big," "black," and "red" are always placed before a noun. Similar rules apply to the HTML language. The structure of an HTML document, the shell, is actually quite simple and logical. The shell is composed of general tags that define the head and body of a page and specific tags that add to the page's basic functionality. Without these tags in place, the HTML document is not a formal, proper document. The information that goes into the head of a document includes the following: Page Title - The <title> and corresponding </title> tags allow you to select a page title. This title does not appear in the body of an HTML page; in other words, when the document is viewed with a browser, this information will not be seen in the main viewing screen. Where it will appear is within the title bar of the browser's interface. This tag is not optional. Scripting - Some scripts that will be performed on a page, such as JavaScript, are embedded into the head of a document. Remember, much of the head is used for mental processes rather than visual ones. A script is a perfect example of this, as it is itself an invisible process, although its results will shape the action and behavior of a page. This tag is optional. Style - For those designers interested in adding control and style to their pages with HTML 4.01, Cascading Style Sheets can be embedded into or linked to a web page. This information will appear within the head of an HTML document. This tag is optional. Meta - The meta tags keywords and description allow web designers to provide information about the content of a page to search engines. Keywords is a comma-separated list of words describing what the website offers. The description meta tag contains a one-line descriptive sentence about the website. The

expires meta tag sets an expiration date for the content on that page. When a page has expired, the browser requests a new version of the page, thereby keeping people who frequent the site up to date with the most current information. This tag is optional. The body of an HTML document will include all the content information that the user will see. This will usually be the largest portion of the HTML document. Information which belongs in the body include the following: Text - The textual content of the website is placed in the body using appropriate formatting to be readable. Images - Whether using a header graphic to define a website's purpose, a photograph to enhance the text content, or a set of navigation buttons, images are an important part of the body of a document. Links - Links allow people to navigate within the website as well as go to other websites. Links always go in the body of a page. Multimedia and Special Programmed Events - Shockwave, SWFs, Java Applets, and even online video will be managed by code placed in the body of an HTML document. Image Tag Attributes There are a variety of attributes that can be added to an image tag to control the way a browser manages the image. These attributes include the following: width="x" - This allows a browser to pre-determine the width (in pixels) your image will require. The actual width of the image in pixels is used here. It is recommended that you add a width attribute for accessibility and display rendering reasons. height="x" - Along with the width attribute, the browser can prepare the necessary space for your image in advance. This controls the way your images are loaded on a page. The actual height of the image in pixels is used here. It is recommended that you add a height attribute for accessibility and display rendering reasons. To find the image's exact width and height, use your imaging program. The image size is available there. Another method is to open the graphic in Netscape Navigator. The image's dimensions are noted along the very top bar of the interface.

border="x" - To add or remove a border, use this attribute, where "x" will be a numeric value. Borders will pick up the color of your text if they are not linked. If they are linked, the border will appear in either the 11 browser default of blue for an unvisited link, purple for a visited link, or the link and vlink colors that you personally specify within the body tag or your style sheet. If you do not want a blue border appearing around your images, you must add this attribute: border=0. align="x" - You can align an image horizontally and vertically on a page by using this attribute. There are a number of ways to align your image. The default is left for a solitary object. You can also set the alignment to a value that is left or right of the default. <img src="img/guit.gif" width="200" height="284" border="0" align="right"/> When adding this attribute, the text will automatically wrap around the image. For example, using align="left" will allow the text to wrap around the right side of the image, while the image itself is aligned to the left. <img src="lt_guit.gif" align="top"/> Standard, cross-browser values for this include the following: top - This puts the image along the topmost part of the horizon. middle - The image will now be aligned with the middle or baseline of the horizon. bottom - With this value, the image will be aligned with the bottom of the horizon. There are several other browser-specific alignment values, including textop (top of highest text or image on that line); abs middle (aligns with the absolute middle of the highest surrounding text or image); baseline (same as bottom); and abs bottom (aligns the bottom of the image with the lowest image or text along the line). alt="description of image" - The powerful alt attribute allows you to describe the image to text-only browsers, tagging the image before it loads on to a page, and allows a tool-tip to appear with the description as a mouse passes over the image. hspace="x" - Horizontal space is used to add space, with a numeric value, around the horizontal axis of the image. vspace="x" - Vertical space controls the spacing of the image along the vertical axis. Frames are a powerful way to lay out websites using designated areas of the browser window to display different HTML pages at one time. This allows some elements of a website (like a navigation bar) to remain in a fixed location, while allowing other frames to scroll. Frames, like tables, are built with columns

and rows. A column is always a vertical control while a row is a horizontal one , . A deprecated element or attribute is one that has been outdated by newer versions of HTML. Although they are currently supported in modern browsers, deprecated elements may become obsolete in future versions. Many of the attributes and elements that have become deprecated over the past two years are those formatting tags which can be inserted in web pages by the use of style sheets . In general, the W3C recommends that web designers use style sheets to achieve stylistic and formatting effects rather than using HTML presentational attributes. HTML presentational attributes are deprecated when style sheet alternatives exist. Rarely Used Tags Besides the tags that have become deprecated, there are a few HTML tags that are rarely used. This lack of popularity may be due to the fact that other tags have replaced them or that web designers have found that they can accomplish the same sort of effect by using tables or other elements. HXTML

Document Type Definition DTD (Document Type Definitions) are optional for HTML documents, but they are required for XHTML documents. The DTD is used to specify rules that apply to the markup of documents of a particular type, including a set of element and entity declarations. An XHTML DTD describes in precise, computer-readable language the allowed syntax and grammar of XHTML markup. The DTD must occur as the first line in the document before the <html>. It must also be enclosed in < >. XTML

There are two approaches to converting a page to XHTML: using a text editor or a conversion program. A page can be opened in a text editor such as NotePad or SimpleText. It can then be printed out to examine the tags, elements, and attributes. After the code has been changed, make sure to save it. The other method is to use a free utility called HTML-Tidy that is available at the W3C website. This utility will automatically change HTML to conform to XHTML rules. It will also issue reports if it

finds other problems. When using this method, be aware that this utility sometimes reformats the page. Changes may need to be hand coded to return pages to the original appearance. HTML-Tidy and similar applications are available for most operating systems and platforms. Color Formats

Now that you have understood the non-visible or programming part of a web page, you will learn about the visible or graphics part of a web page. Colors in the natural world are made up of pigments. Pigment is a substance that reacts to light. Without light, there is no color. Without pigment, there is no variation in color. Digital color is dealt with differently than color in the real world. Monitors and computer hardware are quite limited in their ability to deliver color to a screen. Since it is not possible for a computer to first absorb light, it must generate light. Therefore, the type of color we see on our computers is backed by a theory referred to as additive synthesis. Red, Green, and Blue color is referred to simply as "RGB." Why can the natural world make all colors from red, blue, and yellow, but computers cannot? It goes back to the difference between the ability to absorb versus the ability to transmit light and how light then interacts with what is absorbed or transmitted. If you mix red and green by using paint, you get brown paint. But when a computer mixes those same colors, the resulting color is yellow because it mixes light. The quality of color you see at your computer depends on the quality and capability of these components. If any one of these components is incompatible or unequal in its properties, the end results will not be as true and refined as possible. Graphics programs such as Photoshop use several different color modes to show how images will be displayed on a monitor or printed. Photoshop bases its color modes on established models for describing and reproducing color. Common models include RGB (red, green, blue) for monitors, CMYK (cyan, magenta, yellow, black) for printers, and HSB (hue, saturation, brightness) for both. By adjusting a graphic's hue, saturation, or brightness (called lightness in Photoshop), a web designer can make significant changes in the appearance of a graphic.

Hue is the color or tint such as red, orange, or green. Saturation (sometimes called chroma) refers to the purity of the color. Saturation represents the amount of gray in proportion to the hue, usually measured from 0% (gray) to 100% (pure color). Brightness is the relative lightness or darkness of the color, usually measured as a percentage from 0% (black) to 100% (white). Color value refers to the amount of red, green, or blue (or cyan, magenta, yellow, and black in a CMYK model) of a particular portion of a graphic. In Photoshop use the Info palette and the Color palette to see the color value of pixels as color corrections are made. A web safe color palette is a palette made up of 216 colors that will remain relatively stable from one browser to another, between platforms, and at different monitor color capacities and resolutions. It is important to use the safe palette in most instances, because it ensures cross-browser, cross-platform stability. If you use colors outside of the safe palette, you can run into problems. RGB color mode measures each color channel from 0 to 255. Each channel is an 8-bit channel, which results in the 256 increments. The amount of data used to represent a color is called its color depth. In web design, color depth is used two ways: the color depth of the monitor that displays the graphics and the color depth of a graphics file. Color is not the only web page element that sets the tone for a web page. Images also play a role in how the website will feel to the user. Images can be created by a variety of programs in many different formats or already existing images can be manipulated to suit the web designer's needs. Images are either vector-based or bitmap. A vector image is made up of lines and shapes. A bitmap image is a mosaic of small squares. A bitmap or raster image consists of a mosaic of individual squares of light called pixels. Each pixel contains color information. The pixels in a bitmap image are usually so small that when seen, the colors are blended into what appears to be a continuous tone image.

GIF is a bitmap-based graphic format. It has been the longest supported graphic file type on the web and is extremely useful for a number of graphic file applications . Like GIFs, JPEGs are also bitmap graphics. JPEGs were developed because of the limitations of GIFs. This new image format was developed by a group of photographic experts who wanted high quality compression while retaining millions of colors. The appropriate file extension for JPEG files is .jpg. PNG

PNG (Portable Network Graphics) is a file format for image compression that, in time, is expected to replace GIF. Unlike GIF, the PNG format was developed by an Internet committee expressly to be patent-free and thus free to use. SVG

SVG (Scalable Vector Graphics) is a vector graphics format written in XML. Using SVG, graphics can be coded directly into an XML document. Users need a plug-in in order to view SVG graphics and so like PNG, its use is limited for now. TIFF

TIFF (Tag Image File Format) is a bitmap graphic but it is not a web graphic format. It was once one of the most widely supported file formats for storing bit-mapped images on personal computers. TIFF files are commonly used today in desktop publishing, faxing, 3-D applications, and medical imaging applications. EPS

EPS (Encapsulated PostScript) is a vector-based graphic that is used by the PostScript language. PostScript is a programming language that describes the appearance of a printed page. It was developed by Adobe in 1985 and has become an industry standard for printing and imaging. BMP

BMP is the standard bit-mapped graphics format used in the Windows environment. By convention, graphics files

in the BMP format end with a .bmp extension. WMF

WMF (Windows Metafile Format) is a graphics file format used to exchange graphics information between Microsoft Windows applications. WMF files can hold both vector and bit-mapped images. PICT

PICT is a file format developed by Apple Computer in 1984. PICT files are encoded in QuickDraw commands and can hold both object-oriented images and bit-mapped images. All graphic programs that run on Macintosh computers support PICT. The original PICT format supported 8 colors. Modern versions of PICT, including PICT2, support 32-bit color (more than 16 million colors). PCX

Originally developed by ZSOFT for its PC Paintbrush program, PCX is a graphics file format for graphics programs running on PCs. It is supported by most optical scanners, fax programs, and desktop publishing systems. Files in the PCX format end with a ".pcx" extension.
The version of the PNG format that closely resembles GIF is PNG-8, which uses 8-bit color. Like the GIF format, PNG-8 compresses solid areas of color while preserving sharp detail. It is ideal for line art, logos, or graphics-based type. Although PNG-8 files use more advanced compression schemes than GIF which typically results in PNG-8 files being 10-30% smaller than GIF files of the same image, there are some cases where GIF compression can create a smaller file than PNG-8 compression. PNG also comes in a 24-bit version, which supports 24-bit color and thus more complex image handling. Like the JPEG format, PNG-24 preserves the broad range and subtle variations in brightness and hue found in photographs. Like the GIF and PNG-8 formats, PNG-24 preserves sharp detail, such as that in line art, logos, or illustrations with type. It also supports background transparency as well as up to 256 levels of transparency. An animation is a simulation of movement created by displaying a series of pictures or frames. Shockwave Flash (SWF) was originally developed by Macromedia. It is used to create vector-based animation programs, full-screen navigation interfaces, graphic illustrations, or simple interactivity in a resizable file format that is small enough to be downloaded by a normal modem connection. SWF creation applications give web designers the ability to import artwork using whatever bitmap or illustration tool they prefer, to create animation and special effects, and add sound and interactivity. The content is then saved as a file with a .swf file name extension.

VIDEO EXTENSIONS

AVI

The AVI (Audio Video Interleaved) format originated with the PC and is still widely available. An AVI file is a sound and motion picture file that conforms to the Microsoft Windows Resource Interchange File Format (RIFF) specification. MOV

A MOV file is sometimes also called a "QuickTime Movie." QuickTime is a multimedia development, storage, and playback technology from Apple. QuickTime files combine sound, text, animation, and video in a single file.

QT

The QuickTime video format, originally developed for Macintosh computers, is available as well for PCs. QuickTime is popular on both platforms because of its helper applications and plug-ins for both Windows and Macintosh web browsers available from Apple's website. QuickTime features both standard video as well as VR (visual reality) modes, which allow the user to see a 360-degree view of a structure or landscape. MPEG or MPG

Another format that is popular on both Macintosh and PC platforms is MPEG. It can be handled by all of the media players found on both platforms. RAM or RM

These are RealAudio file extensions. AUDIO EXTENSIONS WAV

A WAV file is an audio file format created by Microsoft that has become a standard PC audio file format for system and game sounds as well as CD-quality audio. A WAV file is identified by the file name extension .wav. Used primarily in PCs, the WAV file format has been accepted as a viable interchange medium for other computer platforms, such as Macintosh. AIFF or AIF

Originally developed for the Macintosh, AIFF (Audio Interchange File Format) is a very popular file format for audio on the Macintosh and is the basic format for CD audio. It uses an extension of .aif on a PC. MIDI

MIDI is not a music format but a protocol (set of rules) that determines the transmission format between electronic musical instruments and computers. MP3

MPEG-1 Layer 3 (MP3) is currently the most popular audio format available.

AU

This is the audio file format common to most Sun Unix workstations. SND

This is a legacy sound format used on both Windows and Macintosh platforms STREAMING MEDIA Advantages of streaming There are many advantages to direct streaming, as opposed to simply posting a movie to the website and having people download it. Instant play - With streaming, people can see your media play right away. There are no lengthy downloads. Live events - Streaming is the only way to distribute live events such as news coverage and sporting events over the web. Long-form media - Streaming media are not limited to file sizes that make a reasonable download. Long-form media such as feature films and concerts that would make multi-gigabyte downloads can stream effortlessly. Multicasting - Many viewers can tune into one stream, a process called multicasting. Random access - Viewers can pause, fast forward, or otherwise interact with prerecorded movies and play only the parts they want. Distribution control - Streaming allows you to maintain control over the distribution and copyright of your media.

RealAudio/Video RealAudio/Video is a format that supports streaming and live webcasts. Windows Media Windows Media Server is a set of digital media components. QuickTime Streaming Streaming is accomplished within a Mac OS X Server using QuickTime Streaming Server. Forms are the oldest and most flexible method of allowing users to interact with the website and, ultimately, the client. Unlike more static HTML methods, forms depend upon a relationship between the user and the page as well as scripts residing on the web server. Like forms, PDFs (Portable Document Format) can be interactive elements built into your website. PDF is a file format that captures formatting information making it possible to send and receive formatted documents as they were intended.

TOPIC SUMMARY In this chapter, you were introduced to the main technical concepts for creating web pages. Although most of your work will be done using web design tools, you should be able to understand and write HTML code. Now that you have completed this chapter, you should have a good idea of how HTML works. You also learned how color is displayed on monitors, how to generate colors, and what you should consider when choosing colors. In addition, you learned about the different types of image formats, their ideal uses, and their limitations. This chapter also explored multimedia formats including digital audio, digital video, digital animation, and streaming media. The options available to you are vast. Your understanding of each technology, how they work, and how they can be applied will help you choose the best formats for your website design. Finally, you learned that interactive elements are an important part of a website since they engage users. It is better to have users play an active role as opposed to a passive role. This chapter discussed the use of HTML to create interactive elements as well as the various scripting, both client side and server side, that is used to include those interactive elements on web pages. Now that you have a foundation of how HTML works, you are ready to examine some of the tools used to generate HTML and graphics.

POINT OF INTEREST 2.4 Color Formats 2.4.1 Subtractive color 2.4.2 Additive synthesis 2.4.3 Computer delivery color 2.4.4 Color spaces 2.4.5 Hue, Saturation, Brightness 2.4.6 Color value 2.4.7 Hexadecimal colors 2.4.8 Web safe colors Gamma 2.4.9 2.4.10 Color depth options 2.5 Image Formats 2.5.4 Graphic Interchange Format (GIF) 2.5.5 Joint Photographic Experts Group (JPEG) 2.5.6 Portable Network Graphic (PNG) and Scalable Vector Graphic (SVG) 2.5.10 Creating photo realistic images 2.5.11 Creating GIF animations 2.5.12 Creating PNG-8 files 2.5.13 Creating PNG-24 files 2.6 Multimedia Formats 2.6.2 Digital animation 2.6.3 Shockwave Flash (SWF) Digital video 2.6.4 2.6.5 Video formats 2.7 Interactive Elements 2.7.1 HTML forms Form elements and attributes 2.7.2 2.7.6 Java applets 2.7.7 Java and JavaScript: understanding the difference