There are three image formats used on web pages, all of which compress information: gif, jpeg and png. It is desireable to compress images, because otherwise the size of the image will slow the page loading. Jpeg and Gif are lossy images.This means that some information is lost when the image is compressed. In the case of gif, color information is lost, making it good for line drawings and cartoons, but bad for images where color depth and gradations are important. In jpeg, color information is retained, but image detail is lost. This matters less for colorful pictures like landscapes or portraits, but makes jpeg a bat format for line drawings and charts, where detail is important. The last format, png, uses a clever algorithm to compress information, and produces the highest quality images. Unfortunately, as the newest format, it is not supported by older versions of browsers.
There are other interesting things that can be done with images. For example, gif and jpeg can be interlaced and made progressive, respectively. This creates a neat effect wherein the image gradually fills into the picture on the page. This also speeds up the overall page loading. Gif images can also be animated, which can be a fun thing to see on a web site (though again, you pay a price in time to load). Images can have sections made transparent, to make them blend seemlessly with the page background. You can also set borders around images to make them pop out, and create image maps, which are "hot" areas on the image that can be clicked on to move to a different web site.
There are two ways to insert multimedia into a web site. The first and most common is to use plug-ins. Plug-ins are small extensions to browsers that are used to extend a browser's capabilities. They must be downloaded when a browser first encounters a multimedia object, because the browser doesn't have the native support for Flash, RealAudio or other multimedia types. The disadvantage to this approach is that older versions of browsers may not have the interface to allow easy installation of plug-ins. Getting all the necessary capabilities downloaded can be time consuming and frustrating, and may not be worth the effort to the user of an older browser.
The other method of loading multimedia that is still used on occassion is the Java applet. The difficulty with this approach is that successful use requires the loading of a Java Virtual Machine. This has proven to be very inconsistent across patforms. A work-around is to develop browser-sniffing scripts, but this is a time consuming and expensive effort, requiring a lot of programmer work. Java applets are no longer commonly used for this reason.
There are two types of scripts that can be used on the web: server-side, which are scripts that are run by the web server, and client-side, which are run by the user agent. There are advatages and disadvantages to each.
Server-side scripts, also know as CGI (Common Gateway Interface) scripts, add load to the local server, and so may be restricted by the system administrator of your server. Server scripts generally don't influence the client. Some server-side scripts run without generating any output to the client at all. Perl, Python and Java are examples of server-side scripting languages. The script resides on the server and is called by code in the HTML. Server scripts can be useful for collecting information - for example, how many times a site was visited.
Client-side scripts are run by client software. They impose no load on the server, but the client's system must support the scripting language being used. Javascript, Jscript and VBScript are some examples of client-side scripting languages, with Javascript being the most popular. These scripts are typically embedded in the HTML and therefore easily viewed by the client user. They generally can't read or write to either the server or client file system. As examples of client-side scripts, I have added two short javascripts to my CSIS139.html page. The first displays today's date, and the second the current time (as read off the user's computer).
Cascading style sheets use several concepts that need to be understood in order to be successful at working with them. The following concepts must be understood: selectors, names, classes and identifiers.
Selectors are the simplest concept to understand. The selector is the element that the style should be applied to. For example, in this simple style rule ( h1 {color: red;} ) the color style is being applied to the heading 1 element. In the previous example, h1 is also the element (heading 1)'s name. CSS has the capability to apply a style to several named items in the selector (ex. h1, h2 h3 {color: red;} ). Each element in the HTML script that matches a named item in the selector will have the associated style applied to it. There is also a universal selector (the * symbol) that will cause the style to be applied to every tag.
CSS also provides the ability to match an element by class. This allows you to apply the style only to those items that also are in the given class. In the text, they use the example of a web page with both light and dark backgrounds. If the designer wishes to use white text when the background is dark, he can define a style for the paragraph element as shown: p.darkarea {foreground-color: white;} . The first part of the selector is the element name, and the part after the period is the class. This paragraph applies a class that defined the background as navy and the text as white.
Lastly, styles can be applied to identifiers. These are items specified with the id attribute. To do this, there must be a # sign in the selector. The text provides the following example, which will match any tag that has an id attribute of comment: #comment {background-color: green;} .
HTML documents have an internal structure and hierarchy, that is determined by the nesting of elements within the body of the text. Within these hierarchies, styles can be defined that are inherited by the children of the top-level element. For example, styles applied to the body element would apply to the complete document. Styles applied to a table element would apply to all the subelements of that table. Inheritance is the default, unless a lower-level element has the same attribute defined differently.
Cascading style sheets have a set of pseudo-classes defined that can be used to modify attributes of elements in an HTML document. Using these pseudo-classes allows the designer to modify an element without explicitly tagging it with the style. Examples of pseudo-classes are the :first-child pseudo-class and the :lang pseudo-class.
Cascading style sheets allow you to set properties for ordered and unordered lists, that can then be applied universally to your pages. In CSS, you are not constrained to use the standard list tags. CSS supports the list-item value of the display property, which can make any element a list item.
You can also use the list-style shortcut property to set list properties with one property assignment. Here is an example of a list that I am using predefined styles and items for. The "my-list" class defines an ordered list using lower-case letters inside as ordering format. the "my-item" class just defines a list item.Gloria Magid
13810 Riverhead Court
San Diego CA 92129
Element positioning allows the web designer to specify where a defined element is rendered on his/her web page. The normal positioning model is static positioning. This places the item inline or within its respective block. The next element postioning type is relative positioning . This method is used to move an item from its normal position to a new position relative to the normal position where it would be otherwise.
This paragraph is an example of relative positioning. A third form of positioning is absolute positioning. In this form, the positioning is relative to the viewport, instead of to the normal position in the document. The last positioning type is fixed positioning. This type of positioning causes the element to be fixed in the viewport. It will not scroll when the document is scrolled. My version of Internet Explorer (6.0) does not support fixed positioning, but in the Firefox browser, the image at the top of this journal is in the fixed position and will stay in place as this document is scrolled.
Web sites are formatted for browsing, not printing. In order to make a page print properly, CSS has developed formatting rules that define the size, margins etc. of printed versions of a web page. Unfortunately, many browsers do not yet support these features, though some features, like page break properties, are supported. CSS also has provisions for handling widows and orphans, which are page breaks at odd places that leave a single line of text at the top or bottom of a page. The property allows the web designer to define the minimum number of lines for the top or bottom of a page.
Printed page handling in web browsers is still in the early stages, but the developer can use page breaks to help make the printed version of a web page look clean and organized.
Javascript is the most popular scripting language in use on the web. It was developed originally by Netscape, but is now supported by IE, Opera and other browsers as well. Javascript is an object-oriented scripting language, which means that it allows you to manipulate variables and objects on your web page. It's most frequent use is for validating data entered into web forms.
Javascript has some limitations. A tough one is that each browser may have its own subset of javascript that it supports, so behaviors may be different on different browsers. Also, javascript cannot manipulate anything on the client computer, orexecute any operations outside of the browser.
The main ingredients to a javascript programs are variables (defined with data types such as strings, integers,etc.), operators to act on the data, and control structures that direct the flow of the script based on conditions of the input data. As stated in the first paragraph, Javascript is used most often to acccess data in document objects.
Server-side scripting languages permit web sites to have more dynamic content, by allowing access to common databases, doing detailed form validation, and maintaining user statistics. All of these functions run on the web server rather than the user's machine. Three of the main server side scripting languages in use today are CGI (Common Gateway Interface), ASP (Activer Server Pages), and PHP (Hypertext Preprocessor). Each has its plusses and minuses. CGI is actually a way for languages to talk to a web server. Several CGI-capable languages exist, including C and Perl. These languages are grouped together into a class because they all use the standard interface, and have the capability to read from standard input, write to standard output, and read from environment vairables. Different languages within the class may have their own strengths and weaknesses.
ASP works with Microsoft's .NET platform and ActiveX controls. ASP works a lot like a standard CGI language, but it is limited to running on Microsoft servers.
The final scripting language I will discuss today is PHP. PHP was developed specifically for web automation, and has the most robust set of features. It is based on open source tecnology and can coexist with raw HTML in the same file. It's disadvantages include numerous security issues and loose structure. PHP is available on Windows and Linux , and requires that the PHP processor be installed on the server. PHP would be my language of choice for server side development because of its rich feature set and the fact that it can run on both Windows and Linux servers.
Web pages are developed using markup languages, which provide a set of rules that a document must follow in order for the software processing the document to read it correctly. There are several markup language specifications in use on the web. XML (Extensible Markup Language), for example. was introduced to address inconsistencies in markup. It is a subset of SGML (Standard Generalized Markup Language), as is HTML. SGML is very powerful, because it lets users create structured documents that are human readable and portable. XML is a less complex subset of SGML, that allows developers to create useful sites after mastering a few basic rules. It has few rules, but those rules are strictly adhered to.
HTML has its own set of rules, called Document Type Definition (DTD). Browsers do not strictly enforce DTD rules, so while you can create a custom DTD, the finished product may not look exactly as envisioned. DHTML (Dynamic HTML) is a combination of HTML and CSS, and is used to create dynamic web page effects. DHTML works by either applying CSS properties or by using javascript to manipulate HTML elements.
Web page editors/HTML editors come in three flavors: strict HTML editors, WYSIWYG (what you see is what you get) editors, and those that let you do both. In addition, editors come that are associated with particular web environments (Mozilla Composer), and they can range in price anywhere from free to several hundred dollars (Dreamweaver or Frontpage). And of course, you can always use a simple text editor like Notepad.
The advantage to a WYSIWYG editor is that you can bring a page up very quickly, without having to know much about the underlying HTML. Of course, these pages limit you to including only those features in your web site that the editor supports. An HTML editor, on the other hand, does not limit you, and it offers some helpful items like identifying open elements, so you don't forget to close a tag. The down side to these editors is that you have to stop what you're doing, save your page and open it in a browser to see if it looks the way you are hoping/expecting that it will.
The ideal choice, to my way of thinking, is an editor that lets you do both, providing both an HTML editor and a view of how your page looks as you are developing it. Again, there are both free (Trellian Web Page) and commercial examples (Dreamweaver). Which you choose depends upon how confident you are about figuring the tool out on your own, as these types of web editors tend to be feature rich, and therefore may have user interfaces that are complicated and non-intuitive. Still, if you are strapped for cash, many of the freeware and shareware examples offer a lot of capability.
Meta tags are tags inserted into the head area of your web page. They are used to communicate information that the human user is not concerned with, but that search engines etc. may use. The following list defines some useful meta tags. Tags followed by * are HTTP-EQUIV. Tags without the * are name metatags.
Of all the tags I found, the most useful still appears to be the description tag, because it is the most commonly used by search engines.
The web development process provides a blueprint for creating a site that meets the designer's goals. The process consists of the same basic steps that any software development should follow:
In traditional software design, someone else has identified the target market, done the market analysis, and made the determination that the software you are being asked to create meets a business need. When designing a site for him/herself, the web designer must complete at least a high level market analysis to make sure that the site he/she is planning to build will be attractive to the audience he wishes to bring to his site. Failure to complete this step may result in web pages that do not generate the traffic and/or sales the web designer is hoping for.
Once the market analysis has been done, the developer should use a site map and other tools (including UML, flow charts etc.) to develop a site structure. Content must then be developed to put on the site. Only after sructure and content are developed and site theme is selected should the developer begin site construction. The completed site must be tested before being deployed, to ensure that the end user does not become frustrated by broken links, empty graphics or other site errors.
The web designer should monitor how effective his site is in attracting visitors, generating sales etc. Access logs and similar tools may be helpful in this area. Finally, the developer should maintain the site, ensuring both that it continues to work as web technology evolves, and that the content remains fresh.
If all the steps in the design process are followed, the web developer is much more likely to create a site that achieves his goals.
There are several ways to design a web site that make it more accessible to people with disabilities. Some of them include the following.
Localization is the process of having several mirrored copies of a web site, in different languages. This is a necessary step for sites that cater to an international pool of users. It is not necessarily pratical for small sites, or sites of predominantly local interest. If the decision is made to translate a site to one or more additional languages, it is wise to identify native speakers who can do the translations. Word for word translations often miss the intent of the original message, and may actually say something undesireable instead.
Unicode tables are used to map code values to characters. It is important to use the right encoding tables, and not to mix encodings, which leads to incompatibilities. The web designer should be consistent in his use of codes. ISO-8859-1 is recommended over ASCII. It is a subset of Unicode and is recognized by most browsers. It is the standard of choice for Westen audiences.