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.
Most web design programs will allow the novice to build a web site without any knowledge of HTML language, but a basic understanding of HTML code can come in handy for tweaking web pages and widgets. For example, YouTube now provides options for designing how embedded videos will look on your site—you can select the border color, adjust the size of the thumbnail, and adjust the size of the video window, within limits (see Chapter 8). With a bit of understanding, you could then modify the code even more to fit your specific needs.
The Backstory
As browser markup language evolved, new needs arose. HTML-laden documents became very code-heavy. Not all browsers respond the same way to the language, and thus web pages may look very different from one browser to another. The evolution brought about XML, HTML 4, and then XHTML. HTML 4 is a markup language designed for displaying text and documents across different platforms and machines. TechTarget describes HTML 4 as:
The final version of the Hypertext Markup Language (HTML) before the Extensible Markup Language (XHTML) and remains the set of markup on which most large web sites today are based. Among new features introduced in HTML 4.0 were: 1) The cascading style sheet, the ability to control web page content at multiple levels, 2) the ability to create richer forms, 3) support for frames (which is already supported by the major browsers), 4) enhancements for tables that make it possible to use captions to provide table content for Braille or speech users, and 5) the capability to manage pages so that they can be distributed in different languages.
TechTarget definition
XML (Extensible Markup Language) is a markup language that defines a set of rules for encoding documents in a format that is readable by both humans and machines. XML is not a replacement for HTML, but is a complement to HTML. XML was created to structure, store, and transport information while HTML is designed to display data, with an emphasis on how the data looks in a browser. XHTML is a stricter and cleaner version of HTML. It stands for Extensible HyperText Markup Language. It has more rigorous standards than HTML (tags must have an end tag, and be case-sensitive). But done correctly, it allows continuity among browsers and platforms, including mobile devices.
All of these standards are set by the World Wide Web Consortium, led by Web pioneer Tim Berners-Lee. According to their web site “W3C’s primary activity is to develop protocols and guidelines that ensure long-term growth for the Web. W3C’s standards define key parts of what makes the World Wide Web work.”
HTML5 is the fifth revision of HTML and is designed to support a variety of platforms, both computer-based and mobile-based, and support audio and video without the need for third-party software. HTML5 was still under development in early 2012, with complete adoption predicted by 2014.
Getting started with HTML
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.
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) |
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) (www.sauceboss.com):
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 HTML code sections titled “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, Louisiana-style cooking.
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
(with permission of www.makemyownwebpage.com)
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. |
| 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. | |
| Images | ||
| <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. | |
| <img border=“0” src=“imagename.jpg” width=“75” height=“92” align=“left” vspace=“2”> | Example of image with size,alignment,and text space. | |
| Links | ||
| <ahref=“mailto:EMAIL”></a> | Email link | Creates a mailto link that automatically opens up the user’s default email program and inserts the email 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. |
CASCADING STYLE SHEETS
The concept of cascading style sheets (CSS) was introduced in Chapter 5. Now, we will address some of the specific code and discuss how to incorporate them into your web site. Once the style sheet is formed, it has to be linked to the HTML documents and/or code, so that is a good place to start. There are several methods for “linking up” the style sheet with the HTML language: linking to an external style sheet, embedding the CSS information in the document, inlining, importing, and a few others. To link the CSS sheet to the HTML document, the <LINK> tag is placed in the document HEAD, between the <head> and </head> tags.
<link rel="stylesheet" type="text/css" href="mystylesheet.css" media="screen"/>
The REL attribute defines the relationship between the linked file and the HTML document. The TYPE attribute is used to specify a media type—text/css for a cascading style sheet—allowing browsers to ignore style sheet types that they do not support (WDG, no date). The SCREEN command relates to your computer screen. If the CSS file is in the same folder as your HTML file then no path is required (like the example above) but if it is saved in a folder, then it must be specific, such as href="foldername/mystylesheet.css".
The alternative is to embed the style sheet within the HTML document. You must add the code to the head of the document (between the <head> and </head> tags and within the <style> and </style> tags. For example:<style media="screen" type="text/css">Insert all your style sheet commands here </style></head>
Creating the style sheet is next. There are three parts: the selector, the property, and the value. The selector which tells the browser which part of the document is affected by the command, such as (in the example: “body"). The property specifies what aspect of the layout is being specified (in the example, “color” and “background-color” are both properties). The value gives the value for the style ("blue” and “#ffff00”).
While most web design programs, especially with the use of templates, can make understanding and writing CSS code optional, it is useful to have an understanding of how it works—just in case you want to make modifications to the design code. One example of CSS code is shown in Figure 6.5. For the novice developing a web site from scratch using CSS, one approach would be to use CSS code generators. In his article “Ten Really Awesome CSS Generators,” author AJ provides description and links to write specific CSS code for functions such as buttons, borders, grids, fonts and others (http://www.aoclarkejr.com/10-really-awesome-css-generators.html).
Figure 6.5 Example of CSS style sheet code
CSS Code Generators
http://www.quackit.com/css/codes/
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 email registration form that gathers email 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 email 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 email to the appropriate person, or both. 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. Survey Monkey offers a free version, with a limit of ten questions and only displays the first 100 responses. The creative survey designer can gather a lot of information in ten questions by using the matrix multiple choice question type. Monthly plans start at $17. New to Survey Monkey is the opportunity to embed your surveys into your own web site. This has several advantages: it maintains the look and feel of your site, it keeps visitors on the site longer, and visitors are more likely to answer the survey if they can view it before committing to taking it. Survey Monkey stores the data—the filled-out forms—on its web site with convenient features for analyzing or downloading the data.
Figure 6.6 Example of forms
Another such service, Freedback, does not host the form but helps users create the form and then capture the HTML code to place on your web site. With Freedback, you can instantly receive notifications of new form submissions via email or SMS. Freedback sends the data to the email address specified on the account. The free version is advertiser-supported. Paid, ad-free packages start at $9 per month for one form.
Google Forms is the latest popular entry into the forms arena, first appearing in 2008. Google Forms is part of Google Docs and can be accessed through the user’s Google account. According to blogger Andy Seidl (2008), “Google Docs provides a flexible mechanism for email notification, sharing access with other users, online backup, and access to data in multiple formats.” The data are stored as a “Google Doc,” in spreadsheet form, and can be downloaded and manipulated like any other spreadsheet.
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 email:</B></TD><TD><INPUT TYPE="text" NAME="email"></TD><TR><TD COLSPAN="2"><INPUT TYPE="submit" VALUE="Join mailinglist!"></TD></TABLE></TD></TABLE></FORM>
Most commercial web entities want more information than just the person’s email 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 webmaster.
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.7 Join Now! form
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.
Figure 6.8 Tell-a-friend form
(courtesy of CGI4Free.com)
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.uk/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.focalpress.com/cw/Hutchison.
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 ReverbNation’s Music Player 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. Alternatively, widget creators will provide coding language that you can paste in to your own site.
For example, the web site www.flickr.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, Pinterest, Tumblr, Twitter, Blogger, and WordPress. Flickr has joined a host of other Web 2.0 services who no longer require the user to cut and paste a widget, but the widget is automatically posted to the outside account by signing in to that account with your username.
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 A typical graphic verification image board or sending emails. 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, email 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 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://www.captcha.net/
Figure 6.9 Example of widget code and embedded widget
Figure 6.10 Share features common with many Web 2.0 services
Figure 6.11 A typical graphic verification image
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-type presentation at no charge (www.glogster.com).
Steve Jobs was not a fan of Flash and refused to incorporate it into the iPhone or iPad system because it is vulnerable to attack from malware and was a power hog on mobile devices. In 2010, Jobs wrote an essay in which he stated “Symantec recently highlighted Flash for having one of the worst security records in 2009.” He also listed the battery life issues and that Flash did not support touch-screen technology and relies heavily on mouse commands.
HTML5, the open standard backed by so many companies (including Adobe) has made Flash redundant and expendable. In November 2011, Adobe announced it was abandoning plans to develop mobile Flash applications and will instead focus on HTML5 (Arthur, 2011). In preparation for the changeover from Flash to HTML5, Google launched the beta version of a service in July 2011 called Google Swiffy that will convert Flash SWF files to HTML5 versions. The software is free and available at http://www.google.com/doubleclick/studio/swiffy/.
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
Figure 6.12 Illustration of how RSS feeds update fan sites
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.
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 (W3C) 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 http://www.browsercam.com/
• 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.
These performance checks should be supplemented with human browser tests: ask friends with different hardware and software systems to test your site and report back to you before launching your site.
CONCLUSION
There is a variety of scripting codes that have been developed and evolved as web browsers and content have become more sophisticated. Now, efforts are underway for an inclusive scripting language (HTML5) that has the power and flexibility to be all things to all web users, whether on a Mac, a PC, or a mobile platform.
Glossary
AppletA 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.
BrowserA 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.
CAPTCHAA 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 scriptsCommon Gateway Interface (CGI) scripts are defined as script files executed on a web server in response to a user request. Used for user-generated forms.
Client-side JavaScript (CSJS)JavaScript that enables web pages and client browsers to be enhanced and manipulated.
Client-side programmingOccurs on the end-user side of a client-server system—these programs are executed by your browser (the client).
CSSShort 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.
FlashA 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.
JavaA 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 Java-compatible web browser.
JavaScriptA 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 tagsAuthor-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-inA 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 scriptingScripting 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 widgetsA small application that can be ported to and run on different web pages by a simple modification of the web page’s HTML.
XMLThe Extensible Markup Language is a powerful tool for creating documents using structured information. XML is a software- and hardware-independent tool for carrying information.
Bibliography
AJ (2010). Ten really awesome CSS generators. http://www.aoclarkejr.com/10-really-awesome-cssgenerators.html
Arthur, Charles (2011). Adobe kills mobile Flash, giving Steve Jobs the last laugh. http://www.guardian.co.uk/technology/2011/nov/09/adobe-flash-mobile-dead
Burns, Joe (2005, January 4). Java vs. JavaScript: HTML goodies. www.htmlgoodies.com/beyond/javascript/article.php/3470971
Conger, Cristin (2011). What is HTML5? http://news.discovery.com/tech/what-is-html5-111007.html
Dahm, Tom (2010). 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
Jobs, Steve (2010). Thought on Flash. http://www.apple.com/hotnews/thoughts-on-flash/
Kyrnin, Jennifer (2012). What is RSS? http://webdesign.about.com/od/rss/a/what_is_rss.htm
Mischook, Stefan (1996). What is Flash, when and why to use it. www.killersites.com/articles/articles_FlashUse.htm
Orr-Buttrey, Stephanie (2012). Interviews with author, February 2012
Rouse, Margaret (2005) Flash. CIO-Midmarket. http://searchcio-midmarket.techtarget.com/sDefinition/0,,sid183_gci214563,00.html
Seidl, Andy (2008). Google Docs replaces Survey Monkey. http://faseidl.com/public/item/212067.
Smith, Dori (1998). What is JavaScript? MacTech, v14, 5. www.mactech.com:16080/articles/mactech/Vol.14/14.05/WhatisJavaScript/?%2Findex.html
Smith, Mike (2008). A guide to HTML and CGI scripts. www.it.bton.ac.uk/~mas/mas/courses/html/html.html.
Taylor, Matthew James (2009). Four methods of adding CSS to HTML. http://matthewjamestaylor.com/blog/adding-css-to-html-with-link-embed-inline-and-import
TechTarget. (2005) Definition of HTML 4. http://searchsoa.techtarget.com/definition/HTML-40
Tmunotein, Ibama Supreme (2004, October 20). Client-side and server-side JavaScript. www.devarticles.com/c/a/JavaScript/Client-side-and-Server-side-JavaScript
WDG (Web Design Group). (n.d.) Linking style sheets to HTML. http://htmlhelp.com/reference/css/style-html.html
Wikipedia. (n.d.) CAPTCHA http://en.wikipedia.org/wiki/Captcha