CHAPTER 6
HTML and Scripts
HTML: THE BASICS AND WHY YOU NEED THEM
Hypertext markup language (HTML) is the predominant authoring language for the creation of web pages. HTML defines the structure and layout of a web document by using a variety of tags and attributes to denote formatting of certain text as headings, paragraphs, and lists. HTML is written in the form of tags bracketed by the greater than and less than symbols, such as <tag>. Most tags come in pairs, the opening tag is listed as <tag>, and the closing tag is </tag>, which denotes the end of the previous command. For example, if you wanted to italicize a word in a sentence, you would precede the word with the tag for italics <i> and follow the word with the end tag </i>. Failure to include the end tag would result in everything from that point forward being presented in italics. A web visitor's browser examines the HTML for instructions on how to display the graphics, text, and other multimedia components. Tutorials can be found at www.w3schools.com.
When someone types in a URL or clicks on a Web page link, the browser requests a document from a Web server via the hypertext transport protocol, or HTTP. The server then sends the document back to the user, which is displayed on the browser. The things that are contained in the document (text, photos, audio and video files, etc.) were all put there using HTML structure.
All HTML documents start with the command <html>. This lets the browser know to read and interpret the commands as HTML. The last tag on the web page should be the end tag </html>. This tag tells your browser that this is the end of the HTML document. Beneath the <html> tag at the top of the page, you will find header information between the <head> and </head> tags. This information is not displayed on the page. The head element contains information about the document, some of which helps search engines catalog and describe the site. Head tags include those shown in Table 6.1.
Here is an example of the source code for a heading for a web page head that was shown in Chapter 5 (Figure 5.1):
<!doctype html public “-//w3c//dtd html 4.0 transitional//en”>
<html><head>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”>
<meta name=“DESCRIPTION” content=“Bill Wharton (Sauce Boss) has cooked gumbo for over 140000 people for free during his high energy concerts with his band--The Ingredients”>
<meta name=“GENERATOR” content=“Mozilla/4.73C-CCK-MCD {C-UDP; EBMAPPLE} (Macintosh; U; PPC) [Netscape]”>
<meta name=“keywords” content=“blues music hot sauce gumbo slide guitar Bill Wharton datil pepper habanero Liquid Summer recipe contest Sauce Boss Jimmy Buffett Parrothead Planet Gumbo Podcast Florida Blues”>
<link rel=“stylesheet” href=“main.css” type=“text/css” media=screen><title>Sauce Boss</title>
</head>
Meta Tags
Meta tags are author-generated HTML commands that are placed in the head section of an HTML document. These tags help identify the content of the page and specify which search terms should be used to list the site on search engines. Popular meta tags can affect search engine rankings and are generally listed in the sections “Meta Keywords” and “Meta Description.” Search engines often use the description meta tag and display it in the results. A meta tag can be generated automatically by the site www.submitcorner.com. The example tag shown here will let a search engine know to categorize the above web site under blues music, slide guitar, and by the artist's other endeavor, Louisianastyle cooking.
| Table 6.1 | Source Code for Head Tags |
| Tag | Description |
| <!DOCTYPE> | Defines the document type; goes before the <html> start tag |
| <head> | Defines information about the document |
| <title> | Defines the document title |
| <base> | Defines a base URL for all the links on a page |
| <link> | Defines a resource reference |
| <meta> | Defines meta information (as in meta tags—see the text) |
The web page title is also significant and should reflect the nature of the site. The <TITLE> tag is the caption that appears on the title bar of your browser and is the name on the clickable link listed in the search engine results. (Example: <title>Sauce Boss</title>.)
Figure 6.1
Google search results for Sauce Boss, including tags. (Courtesy of Bill Wharton.)
The table shown in Figure 6.2 is from www.makemyownwebpage.com and describes the various types of meta tags. The author describes meta tags as “where the search engines go to see what your priorities are.”
Figure 6.2
Example meta tags (www.makemyownwebpage.com) by permission.
Body Tags
The body of an HTML document uses tags to format text and graphics. There are numerous tags to denote font size, color, style, and other features, and there are others that denote paragraph formatting. Figure 6.3 indicates some of the body text formatting tags commonly used, including break, alignment, and justified.
Figure 6.3
Example of page body formatting.
Other tags may denote font style and color. It is recommended that you use standard, commonly used fonts. If the web visitor's browser or computer is not set up for the fonts you have chosen for your body text, the substitution fonts may disrupt the formatting of the page and cause elements to shift out of place.
FONTS AND COLORS
HTML tags also indicate characteristics of the text appearance such as font size, color, and formatting.
In Figure 6.4, Arial and Times Roman fonts are used, along with underline, italics, bold, and font colors. The <i> tags indicate italics, <b> is for bold type, <u> is for underline, and the font tag can include, among other things, face, color, and size.
Figure 6.4
Example of font formatting.
| Table 6.2 | Commonly Used HTML Formatting Commands |
Basic Text Commands
| <br> | Break | Same as carriage return. |
| <p> | Paragraph | Carriage return plus adds a blank line. |
| <b> </b> | Bold | Text between the two tags is displayed in bold. |
| <i> </i> | Italics | Text between the two tags is displayed in italics. |
| <u> </u> | Underline | Text between the two tags is displayed in underline. |
| <font size=?></font> | Font size | Sets size of font from 1 to 7. |
| <font color=?></font> | Font color | Sets font color, using name or hex value. |
| <font face=?></font> | Font typeface | Sets the typeface such as Times Roman, Arial, Tahoma, etc. |
| <font size=“3” color=“#FF000” face=“arial”>The actual text affected by the commands</font> | Example of font size, color and face. |
| <image src=url> | Insert an image | url would be the address where the image is found and generally ends with .jpeg or .gif. |
| Image subcommands | Width = 120 | The picture width will be displayed as 120 pixels wide. |
| Height = 60 | The picture width will be displayed as 60 pixels high. | |
| Align = left | The picture will align to the left of text. | |
| ALT = “text” | Tells the browser what text to insert on the screen if the image is not available. | |
| Border = 4 | The border around the image will be 4 pixels. | |
| Hspace = 4 | The horizontal space between the image and surrounding text will be 4 pixels. | |
| Vspace = 4 | The vertical space between the image and surrounding text. |
Links
| <a href=“mailto:EMAIL”></a> | E-mail link | Creates a mailto link that automatically opens up the user’s default e-mail program and inserts the e-mail address. |
| <a href=“newpage.html”> Link to New Page</a> | Hyperlink to another site or location | The “Link to New Page” portion of the command is what is displayed on the screen as the hot link. |
Color Commands
Hex HTML colors are indicated by a six-digit series of letters and numbers but can also be indicated by a color name.
| bgcolor=“#000000” | Background color | Used to tell the browser what color of background to use. |
| text=“#ffffff” | Text color | The standard color to use on general text that follows. |
| link=“#004000” | Link color | The standard color to use on unvisited links that follow. |
| vlink=“#44aaff” | Color for visited links | |
| alink=“#ff00ff” | Color for mouse-over | As the cursor passes over the link, this is the momentary color the link changes to while the user is hovering over the link with the cursor. |
| background=“file.gif” | Background image | If you prefer to use an image as the background, this command specifies the image. |
CGI SCRIPTS
Common Gateway Interface (CGI) scripts are defined as script files executed on a web server in response to a user request. They are commonly used to process data sent when a form filled in by a user is sent back to the web server. A CGI program is executable, and is basically the equivalent of letting visitors run a program on your system. The most common form found on artist web sites is the e-mail registration form that gathers e-mail addresses from visitors so that they may be added to the mailing list. The “Tell a friend” form is another example of a GCI script.
Forms
Forms are a common and popular feature on web sites. The e-mail signup and tell-a-friend scripts mentioned later are examples of simple forms. But forms are used for all kinds of purposes, from gathering information to processing e-commerce orders. Most high-end web development programs offer some type of features for creating forms. One of the important aspects of creating a form is determining where the information will go—either stored as a database on a server or sent as an e-mail to the appropriate person. The first step involves creating the form and specifying the action to be taken upon submission (where the data go). Then, the particular form fields can be created to elicit information from the web visitor. There are also companies online who provide form or survey features. Some start with a basic, free plan with many of the more advanced features reserved for the paid plans. These services have user-friendly web sites that allow even the novice to create a form, save the data, and analyze the results. The most popular of these is Survey Monkey. The company hosts the forms on its site. Another such service, Freedback, does not host the form but helps users create the form and then capture the HTML code to place on the Freedback web site. Survey Monkey stores the data—the filledout forms—on its web site with convenient features for analyzing or downloading the data. Freedback sends the data to the e-mail address specified on the account.
Figure 6.5
Example of forms.
Guestbook Script
Here is a simple CGI script for creating a form for signup for a mailing list:
<FORM ACTION=“http://www.artistwebsite.com/mailinglist/subscribe.pl”
METHOD=“post”><INPUT TYPE=“hidden” NAME=“account”
VALUE=“hutchtom”><INPUT TYPE=“hidden” NAME=“body” VALUE=“<BODY
BGCOLOR=white TEXT=black LINK=blue VLINK=darkblue>“><INPUT
TYPE=“hidden” NAME=“action” VALUE=“subscribe”><TABLE BORDER=“2”
CELLPADDING=0 CELLSPACING=0><TR><TD><TABLE BORDER=“0”
CELLPADDING=2 CELLSPACING=0 BGCOLOR=“#eeeeee”><TR
BGCOLOR=“#cccccc”><TD><B>Your e-mail:</B></TD><TD><INPUT TYPE=“text”
NAME=“email”></TD></TR><TR><TD COLSPAN=“2”><INPUT TYPE=“submit”
VALUE=“Join mailinglist!”></TD></TR>
</TABLE></TD></TR>
</TABLE>
</FORM>
Most commercial web entities want more information than just the person's e-mail address, so more elaborate scripts ask for additional information, including demographics. This script involves storing the information in a database to be accessed by the web master.
TELL-A-FRIEND SCRIPT
The tell-a-friend script is illustrated in Figure 6.7. As a result of automated spamming programs that are abused by unscrupulous web marketers, many such forms now include a component to verify that a human is filling out the form, instead of an automated software program.
Figure 6.6
Join Now! form.
Figure 6.7
Tell-a-friend form. (Courtesy of CGI4Free.com.)
JAVA AND JAVASCRIPT
Whereas CGI is for server-side programming, often referred to as back-end programming, JavaScript is used for client-side programming, often referred to as front-end programming (although it can also be used for server side programming). Server side programming runs on the host's server, whereas client side programming runs in the user's browser. Wikipedia has the following paragraph to explain the difference:
Server-side scripting is a web server technology in which a user's request is fulfilled by running a script directly on the web server to generate dynamic HTML pages. It is usually used to provide interactive web sites that interface to databases or other data stores. This is different from client-side scripting where scripts are run by the viewing web browser, usually in JavaScript. The primary advantage to server-side scripting is the ability to highly customize the response based on the user's requirements, access rights, or queries into data stores.
According to Ibama Tmunotein in his article Client-side and Server-side JavaScript, “Server-side JavaScript is ideal for creating web applications that can be run on any platform, on any browser, and in any (programming) language.”
Java is a programming language developed by Sun. NetScape responded by creating JavaScript. Microsoft then added its own version of JavaScript to Internet Explorer, called JScript (D. Smith, 1998). The difference between Java and JavaScript is that Java can stand on its own whereas JavaScript must be placed inside an HTML document to function. JavaScript is text that is fed into a browser that can read it and then is enacted by the browser. It can be modified on the fly. Java, on the other hand, creates a “standalone” application—the Java “applet” (a small application), which is a fully contained program. Java needs to be recompiled if it is modified, and then reinserted into the web page.
RESOURCES FOR SCRIPTS
Online HTML Code Generator, http://htmlcode.discoveryvip.com
Click & Go drop down list generator,
www.webdevtips.co.0uk/webdevtips/codegen/clickgo.shtml
Meta tag and SEO generators, www.submitcorner.com
Guestbook and mailing list script generators, www.javascript.nu/cgi4free
HTML and CSS scripts, www.hypergurl.com/htmlscripts.html
Updated information available at www.WM4MB.com.
WEB WIDGETS
Web widgets are defined as a portable piece of code that an end user can install and execute within any separate HTML page. They often use DHTML, Adobe Flash, or JavaScript programming language and wrap it up in a nice user interface. Often these widgets are incorporated into social networking pages, blogs, and personal web sites, installed by the user. Not all widgets are compatible with all systems. In 2007, known as the year of the widget, the top social networking sites began to open up their platforms to widgets such as iLike, developed by third parties.
Marketers are creating new ways to use widgets to advertise and sell products. Here is how widgets such as iLike work. The widget company hosts a web site where the end user can construct the personalized parameters of the widget. The user-friendly interface allows the user to customize and personalize the widget, such as create a playlist, upload favorite photographs, and so forth. Then with a mouse click and a password, users upload the widget to their social networking page, which seamlessly and transparently adds the special feature to their social networking page or web page. This allows for content to be dynamic as the widget updates information based on the user's choices and activity—such as monitoring iTunes listening activity to create a playlist to be posted on a social networking site or whenever the user adds photos to the web site that provides the service and the widget.
Figure 6.8
OnTour widget. (Courtesy PassAlong Networks www.passalong.com.)
Fore example, the web site www.slide.com allows users to upload pictures and create slide shows that they can share with other web users. The slide.com site creates widgets that work with MySpace, Facebook, Bebo, Friendster, Orkut, Hi5, Tagged, Xanga, and the FunWall for Facebook users. Music marketers have starting using widgets to allow fans to add content to their social networking pages. One such company, PassAlong Networks, offers widgets with features that promote the artists the company is working with. These widgets can be found on the artists' web sites and allow fans to place this artist-featured content on their own sites.
CAPTCHA
In today's age of spamming, web site managers have adopted techniques to prevent automated programs from performing functions that are supposed to be performed by human visitors to the site, such as posting messages on a message board or sending e-mails. Typically, this is achieved through a CAPTCHA. CAPTCHA is a program that can tell whether its user is a human or a computer. It is a loosely contrived acronym meaning “completely automated public turing tests to tell computers and humans apart.” CAPTCHAs are graphics presented with distorted text found at the bottom of web registration forms. Many web sites use CAPTCHAs to prevent abuse from “bots,” or automated spamming programs. No computer program can read distorted text as well as humans can, so bots cannot enter sites protected by CAPTCHAs. Thus, e-mail accounts and message boards can be protected through the use of CAPTCHA programs. It can also protect forms and online polls. The process involves installing a program that can generate and grade tests—in
Figure 6.9
A typical graphic verification image.
this case, an easy test of repeating the letters and numbers that appear in the distorted graphic. The concept was developed at Carnegie Mellon's CyLab, and the code is now offered for free at http://recapture.net.
FLASH
Flash, a popular authoring software developed by Macromedia and now owned by Adobe, is used to create graphic/animation programs with navigation interfaces, graphic illustrations, and simple interactivity in a resizable file format that is small enough to stream across a normal modem connection (although most Flash content over a “normal modem connection” is disturbingly slow to load). It is platform independent and gives web designers the ability to add bells and whistles to animate any web page. Wikipedia states, “Flash technology has become a popular method for adding animation and interactivity to web pages; Flash is commonly used to create animation, advertisements, various web page components, to integrate video into web pages, and more recently, to develop rich Internet applications” (wikipedia.com). The end user must have Adobe's Flash player, a free software download, installed to run the Flash programs. Adobe sells the software program to develop Flash programs to add to web sites.
In the article “What Is Flash, When and Why to Use It,” author Stefan Mischook weighed the pros and cons of using Flash, emphasizing that it's not the best option for all applications, stating that Flash should be used “selectively to enhance an HTML-based site.” One major advantage is that there are no compatibility issues with the various browsers and platforms on the market. Aycan Gulez, in his article “Top Five Reasons for Limiting Flash Use,” stated that the Adobe Flash plug-in is installed in over 95% of web users' browsers, so just about all users can display Flash content. But, on the flip side, he emphasized the limitations of Flash including limited navigation ability (you may need to wait until it's finished loading to move on), slow load times, poor rendering of text, and the inability to print out or search through text. The general rule on Flash-heavy splash pages is to offer the web visitor the option to skip the Flash introduction.
There are other, less-expensive programs that can create the same effect, including mix-fx (www.mix-fx.com). CoffeeCup.com offers software that will create particular Flash effects. Glogster.com offers limited online templates from which you can develop a multimedia Flash presentation at no charge (www.glogster.com).
RSS FEEDS
Wikipedia describes really simple syndication (RSS) as
a family of Web feed formats used to publish frequently updated content such as blog entries, news headlines or podcasts. An RSS document, which is called a “feed,” “web feed,” or “channel,” contains either a summary of content from an associated web site or the full text. RSS makes it possible for people to keep up with their favorite web sites in an automated manner that's easier than checking them manually.
RSS was first invented by Netscape, which wanted a way to get news stories and information from other sites and have them automatically added to its site. The RSS feed starts with the XML command (Extensible Markup Language), then the RSS command, some commands for formatting, and the location (link) for the feed.
We found early on the use of RSS feed to help market and promote our clients in a unique way. Using the system to push news, tour dates, and blogs and journals to other sites and subscribers, we have developed those efforts, while the Internet as a whole has adapted its use. With the inventions of widgets and sidebars for Windows, Macs and even more so Vista, we are able to take the RSS feeds we have been using for several years and hit a whole new target easier (the desktop of the consumer). We can now send snippets of code that will show the latest news and tour information right on their desktop or email box without requiring them to install something new.
Stephanie Orr-Buttrey, www.CountryWired.com
The music business uses RSS feeds to keep fans informed of upcoming events or to provide updated content for fan-based web pages. This actually allows the “feeder” (the artist's web manager) to control content that appears on other web sites quickly and easily with one feed.
Figure 6.10
Illustration of how RSS feeds update sites.
TESTING ACROSS BROWSERS AND PLATFORMS
As illustrated in Chapter 5 on web design, a web layout that looks correct and normal on one computer may look completely different on another computer. The layout of a web site varies with the following characteristics:
- Type of browser (FireFox, Internet Explorer, Safari, etc.)
- Version of browser
- Browser settings
- Computer operating system
- Monitor resolution
In his article “Browser Compatibility Tutorial,” Tom Dahm explained why a web site looks different depending on the preceding factors. He described the browser as “a translation device … it takes a document written in the HTML language and translates it into a formatted Web page.” The standards for HTML and browser compatibility are setup by the World Wide Web consortium (W3) that publishes these standards. But as HTML evolves, the older browsers, and even some of the newer ones, fail to keep up and support all the newest bells and whistles. Generally, the newer browser versions are more standardized than the older versions. That presents problems for web designers who want to use all the latest features, some of which are not supported for the portion of web visitors who are still using the older versions.
Font availability and size can be problematic. A web site may be created in a font style that is not available to many of the site's visitors. Fonts reside on the user's computer and are put into place based on the HTML instructions. If that font is not available on that computer, the browser substitutes another font, sometimes with grave consequences. Font size can cause problems also. Many browsers allow users to customize their default font size. Some users prefer to increase font size to reduce eyestrain. This may lead to a web page that is out of proportion, with text dominating the page. It is wise to use standardized fonts when creating a web page. If unique fonts are to be used, they should be converted to graphic files (preferably GIF files) so that consistency will be maintained across platforms.
Once the web site has been created and uploaded, it is wise to check out compatibility by either visiting the site on a variety of different computer setups or using one of the online services that simulate or capture different browser experiences. Other tips include the following:
- Don't build your web site entirely with Flash, and use a dedicated web design program instead of Microsoft Word or Microsoft Publisher.
- Check your web page HTML at http://validator.w3.org or www.anybrowser.com/validateit.html.
- Check your page's/site's CSS at http://jigsaw.w3.org/css-validator.
- Check your links at http://validator.w3.org/checklink or www.anybrowser.com/linkchecker.html.
- Check your images for accessibility issues at http://juicystudio.com/services/image.php.
- Check your content for readability at http://juicystudio.com/services/readability.php.
- Check to see if your CSS's text and background colors have sufficient contrast at www.accesskeys.org/tools/color-contrast.html.
- Check how your site is viewed on different systems at www.anybrowser.com/siteviewer.html,www.anybrowser.com/ScreenSizeTest.html, or www.browsercam.com/Default2.aspx.
- Check your page's performance and web page speed at www.websiteoptimization.com/services/analyze.
- Check several things at once with www.netmechanic.com/products/HTML_Toolbox_FreeSample.shtml.
GLOSSARY
Applet — A small Java program that is cross-platform compatible and can be embedded in the HTML of a web page. Web browsers, which are usually equipped with Java virtual machines, can run the applets to perform interactive graphics, games, and so on.
Browser — A software application used to locate and display web pages. Contemporary browsers are graphical browsers, meaning they can display graphics as well as text and can present multimedia information, including sound and video, though they require plug-ins for some formats.
CAPTCHA — A program that can tell whether its user is a human or a computer. The process involves installing a program that can generate and grade tests— in this case an easy test of repeating the letters and numbers that appear in the distorted graphic that humans can read and software programs cannot.
CGI scripts — Common Gateway Interface (CGI) scripts are defined as script files executed on a web server in response to a user request. Used for usergenerated forms.
Client-side JavaScript (CSJS) — JavaScript that enables web pages and client browsers to be enhanced and manipulated.
Client-side programming — Occurs on the end-user side of a client-server system— these programs are executed by your browser (the client).
CSS — Short for cascading style sheets, a feature being added to HTML that gives both web site developers and users more control over how pages are displayed. With CSS, designers and users can create style sheets that define how different elements, such as headers and links, appear. These style sheets can then be applied to any web page.
Flash — A bandwidth-friendly and browser-independent animation technology. As long as different browsers are equipped with the necessary plug-ins, Flash animations will look the same. With Flash, users can draw their own animations or import other vector-based images (webopedia).
Hypertext markup language (HTML) — The predominant authoring language for the creation of web pages. HTML defines the structure and layout of a web document by using a variety of tags and attributes.
Java — A client-side programming language with a number of features that work well on the Web. Small Java applications are called Java applets and are downloaded from a web server and run on the user's computer by a Javacompatible web browser.
JavaScript — A server-side scripting language embedded in the HTML language of a web page that adds interactive functions to HTML pages. JavaScript is easier to use than Java, but it is not as powerful and deals mainly with the elements on the web page.
Java Virtual Machine (JVM) — An abstract computing machine, or virtual machine, is a platform-independent execution environment that converts Java byte code into machine language and executes it.
Meta tags — Author-generated HTML commands that are placed in the head section of an HTML document. These tags help identify the content of the page and specify which search terms should be used to list the site on search engines.
Plug-inx — A hardware or software module that adds a specific feature or service to a larger system.
Server-side JavaScript (SSJS) — JavaScript that enables back-end access to databases, file systems, and servers.
Server-side scripting — Scripting that runs on the server side of a client-server system. CGI scripts are server-side applications because they run on the web server compared to programs that run in the user's browser.
Web widgets — A small application that can be ported to and run on different web pages by a simple modification of the web page's HTML.
XML — The Extensible Markup Language is a powerful tool for creating documents using structured information.
REFERENCES AND FURTHER READING
Burns, Joe. (2005, January 4). Java vs. JavaScript: HTML goodies, www.htmlgoodies.com/beyond/javascript/article.php/3470971.
Dahm, Tom. Browser compatibility tutorial, www.netmechanic.com/products/Browser-Tutorial.shtml.
Gulez, Aycan. (2001). Top five reasons for limiting Flash use, www.wowwebdesigns.com/power_guides/limiting_flash_use.php.
http://en.wikipedia.org/wiki/Captcha.
Kyrnin, Jennifer. What is RSS? http://webdesign.about.com/od/rss/a/what_is_rss.htm.
Mischook, Stefan. What is Flash, when and why to use it, www.killersites.com/articles/articles_FlashUse.htm.
Smith, Dori. (1998). What Is JavaScript? MacTech, volume 14, issue (5), www.mactech.com:16080/articles/mactech/Vol.14/14.05/WhatisJavaScript/?%2Findex.html.
Smith, Mike. A guide to HTML and CGI scripts, www.it.bton.ac.uk/~mas/mas/courses/html/html.html.
Swartz, John. (2007, November 27). Widgets make a big splash on the Net. USA Today.com. www.usatoday.com/money/industries/technology/2007-11-26- widgets_N.htm.
Tmunotein, Ibama Supreme. (2004, October 20). Client-side and server-side JavaScript. www.devarticles.com/c/a/JavaScript/Client-side-and-Server-side-JavaScript.