...a tutorial for creating web pages

XV. "Standard" and "Enhanced" HTML

-- where you shall find more things you can do but with more considerations as HTML becomes less "standard" (and less simple).

NOTE: It is important to note that going forward from here you will find quite a few instances where you will come across references to older methods based on obsolete HTML standards. The reason being is that a lot of those methods have been replaced by using CSS. They are still necessary as an example to clarify the context of their use. The intention with this tutorial is to teach you bare bones HTML but as you will see going forward, it is getting close to where the two cannot be separated. CSS is a big factor in any future web design and will be something you will need to get familiar with; but after understanding core HTML.

Objectives

This lesson is going to present a bit of information to help you understand the relevance of "Web Standards". After this lesson you will be able to:

• Decide whether to use HTML that may not work for all web browsers
• View the source HTML of any web page

Lesson

In lesson 1, you were introduced to the concept of "standard" HTML. The subsequent lessons in this tutorial will show you how to use some other HTML tags that may not be viewable on all web browsers. Here, we will just review some of the related issues before you venture ahead into the "danger zone." How about a little history?

As the internet became more commonplace it became more visually appealing the use and dissemination of information now began competing against other sites for views. Moving into the early 90's, the shift in users to a more mainstream audience, changed the look and feel of the internet Mosaic - First mainstream browser developed by National Center for Supercomputing Applications (NCSA); it is the first browser able to display text and graphics simultaneously.

Web Standards

Just prior to the start of the "browser wars" of the 1990s, Tim Berners-Lee, the father of the World Wide Web, recognized that without some sort of governance, the World Wide Web would experience great challenges as competing web browsers introduced new features. One of the ways to get someone to pick your product over your competition was to offer a bunch of really cool features that the other guy didn’t offer. Standards had to be imposed in order to maintain some sort of order because primarily the browser makers were heading into many different directions with features and tags.

Around 1990, the World Wide Web was a text-based system based upon the HyperText MarkUp Language. The tags and interpretation were all built upon standards (HTML 1.0) set by an international committee. This was the key to the "Web" becoming "World Wide" because, by following the standards, the information was completely independent of the computer from which it was viewed.

Other programmers began to build web browsers that offered the same functionality as Mosaic (because they supported all of the HTML features contained within the international standards). A group that included the original developer of Mosaic formed a new company -- its mascot was "Mozilla", ("Mosaic" + "Godzilla") with a brand new web browser known as Netscape Navigator.

Netscape was faster and more reliable than the NCSA Mosaic. It had a cool mascot! Netscape grew popular quickly perhaps because it contained functionalities that included all of HTML 2.0 PLUS more tags for things that you could not do in HTML 2.0. These "extensions" or "enhancements" have caused (and still cause) a great deal of arguments between HTML purists and those that like the "extra" features that Netscape added.

The Mozilla Netscape was immensely popular and quickly grabbed 3/4 of the web-browser pie. Now, in HTML, you could include colored backgrounds to your pages, formatted tables of text, text that wrapped around the side of images, and more. You began to see web pages that said, "This page optimized for Netscape". Other browsers began to include support for the Netscape "HTML 2.0+" features. As the major online services opened up to the web, the browser market got even more crowded (and noisy).

The international commission was faced with a dilemma, as the market was largely demanding these "non-standard" tags to become part of HTML. As the rules for HTML 3.0 were being developed, they began to include most (but not all) of the tags Netscape had introduced. The standards process seemed to move to slowly for many people.

The battle grew bigger into 1996 when Microsoft introduced their own special HTML tags. Would HTML become a bigger hodge-podge of code? The recent position statement reflecting HTML 4.0 is the suggested standard that should be adopted by all web browsers. This latest evolution is meant to be a step that will provide a great deal of flexibility for future changes without them being mere "bolt-on" tags that have occurred to date. As we will see in later sections, Style Sheets (CSS) provide a very efficient means for updating an entire web site with more consistent appearances, plus new features for easily internationalizing content and providing more accessibility features for the visually impaired.

So what does this mean for you? As you develop web pages, you should consider what your readers will be using to access your pages. Perhaps you are a teacher in one school or an information department in a company that is sure all of their users will be using a particular browser. Then you can be comfortable designing and testing on only one browser. However, we consider this a short sighted approach that may down the road force you to do massive, tedious updates to your HTML coded pages.

More commonly, you will be "publishing" web pages from an Internet server and have no idea what browser is being used or even what kind of computer it is used on. You can add special warnings to your page. You can stick closer to the standards that are most widely supported on all web browsers. Even if you do use special tags, there are usually ways to have an alternative that will not cause havoc for users of other browsers.

Most importantly... do not become fixated on how the page looks on just your own computer! Your readers may have different browsers, different fonts, different text color preferences, and different monitor sizes -- all of which may cause the display to vary in size, layout or appearance from how it looks on your computer. If you can try out your web pages on different computers, stretch and shrink the browser window, switch the standard fonts.

Fortunately, the original design for HTML has a very open and forgiving set of rules -- if a browser encounters a tag it does not know how to deal with or display, it simply ignores these tags.

For example, let's say my browser supports the <drip>...</drip> which is a it is fictitious tag. This tag would make all text inside appears normal and then slowly "drip" toward the bottom of the page, a fancy effect for my home page:
<drip><h2 align=center>Welcome</h2></drip>
which would work like a charm on my home made browser because it has been programmed to understand how to display the <drip>...</drip> tags. On another browser however that does not support this feature; you would see nothing but static text:

Welcome

If your browser doesn't support this tag it may just skip over it completely and show the underlying text. It's a brilliant concept, isn't it?

Peeking at the Source

If you have not learned this already, the best secret for learning how to design web pages is to ... "creatively borrow". We are not advocating stealing HTML! But, if you find a web page design that you like, or find yourself asking, "How did they do that?" the easy thing to do is to look at their HTML code! It is sitting there waiting for you to look at.

This is one of the best responses to the question, "Why should I learn all HTML when I can just use a visual editor such as “Dreamweaver"? You cannot learn much from other websites if you depend upon a helper application to make your web pages. But... if you can "peek under the hood" of a web page and examine its HTML, you can understand and perhaps re-purpose interesting design techniques. With the advent of CSS it is getting a little more difficult because you also have to be able to access the Style Sheet in order to make heads or tails of what you see. (There will be more info on CSS later) The exact menu names for doing this are different depending on which web browser and version you are using. Typically, your web browser menu will have an item called View from which you can select Source or Page Source. When you select this, it will display the HTML source code corresponding to the URL of the current page in view, and display this HTML code for you to see butt naked and in all of its glory.

Another way to grab the HTML source of a page in view is to select Save as... from the File menu of your browser.

The simplest way to get to the HTML source is to access the right click-context menu-- right mouse click for Windows and Unix users, control-click for Macintosh users-- on any blank area of a web page and select View Source. It will open the source code in a new window, complete with line numbers for you to view or save.

As practice, see how quickly you can see and save the HTML source code for this lesson page.

As we go on into these more advanced lessons, the instructions will get a bit longer and more complicated. But you've gotten this far!

More Information

XVI. Colorful and Textured Backgrounds

Do not settle for that drab old grey page! Put a bold c o L O r or textured pattern behind the text.

NOTE: This is one of the situations discussed earlier where it was said that you will come across obsolete material. For the purpose of illustration you will spend some time with this material to understand color schemes and you will still do the assignments as listed to gain familiarityThe actual application differs now, mainly because of the mainstream use of CSS (Cascading Style Sheets). Therefore the use of font colors, backgrounds and other things relevant to the presentation are done in CSS for the sake of central organization and efficiency.

Objectives

• Create a solid color background for a web page.
• Calculate the hexadecimal code for a color value.
• Change the color of text and hypertext link items.
• Create a textured background from a graphic file.

Lesson

The background of your page should be just that -- in the background. As you add different colors or even patterns, keep in mind that it should not interfere with the readability of text. But don't take these words for gospel; draw your own conclusions from an example of what happens when you do not think about the impact of a noisy background.

For the pages of this tutorial, you have used a solid white color that makes for a clean and non-interfering (even if not dramatic) backdrop. No, it is not very exciting, but it is readable.

With some modifications to the <body> tag (introduced way back in lesson 2), you can add a solid color background to your web page. But before you do the fancy color stuff, you must first understand RGB color values and their "hexadecimal" representation.

Color Schemes

RGB

In a web browser, you have at your disposal many system colors to color text and backgrounds. Each color is identified by its Red- Green- Blue (RGB) values, three numbers that range from 0 to 255, each of which represents the intensity of the Red, Green, or Blue component of the desired color. Maximum values of all three (R=255, G=255, B=255) produce the color white and minimal values (R=0, G=0, B=0) produce black. All other colors are represented by a different range of RGB triplets. RGB values can also be written in percentages. The example 000, 128, 255 would be written as 0%, 50%, 100%

Hexadecimal Notation

Hex is tricky until you get used to it.. Rather than identifying a color as something like "102,153,255" each number is converted from base 10 (normal everyday numbers, digits from 0,1,2,3,4,5,6,7,8,9) representation to hexadecimal, base 16 (digits from 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). The alpha-numeric values (A-F) represent the values 10, 11, 12, 13, 14, and 15.

Why? Hexadecimal is more easily and more efficiently understood by computers. So for the color example above, we would write in hexadecimal as "6699FF". In this example, "66" is the Red value, "99" the Green, and "FF" the Blue. Hex always begins with an octothorpe (#) and is then followed by hexadecimal digits, called a hex triplet (it's a triplet because of the set of the three RGB colors-red, green, and blue). This described the traditional Hex-6 but there is also a variation called a Hex-3. All it is a truncated version of the aforementioned, it is shorthand, which is available to use when the two values for a color character match, (#a3b is equivalent to #aa33bb). So in the example of #008800, the hex-3 notation would be #080.

HSL (Hue Saturation and Lightness/Luminance)

The hue-saturation-lightness color scheme offers a way to look at the color wheel that can be more intuitive when working with colors of a similar hue or tonality. Hue is a number from 0 to 360 representing a radial position on the color wheel (0 or 360=red, 120=green, 240=blue). Saturation is a percentage value from 0 to 100 percent with values closer to 0 percent approaching desaturated, or gray. Lightness or sometimes referred to as Luminance, is again a percentage value from 0 to 100 percent, where 0 percent is black and 100 percent is white.

Color Keywords

The HTML 4 specifcation defned the following 17 color keywords and their corresponding hex values: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. Several (131 to be exact) more commonly supported color keywords, such as pink, plum, deepskyblue, and firebrick, originally defned in the SVG specifcation, were added in CSS3, bringing the number of color keywords to 147.

Viewing Colors (ArtWeaver)

One way to get familiar with color values is by using the software program Artweaver and choosing the color wheel (example on right). It will allow you to view the values for different colors and also the values for those colors in different color schemes such as RGB, Web Colors (Hexadecimal), HSL and CMYK.

Viewing Colors (Microsoft Paint)

Similarly it can be done using MSPaint by going to the menu bar and choosing the following (Colors>Edit Colors>Define Custom Colors>>). MSPaint will only give you the HSL and standard RGB values.

Solid Color Backgrounds

For your Favorite Cars Web pages, the first thing we will do is add a color background to the index.html file. The HTML format for adding a solid color background involves modifying the <body> tag to read:

Where XXXXXX is the hexadecimal representation (indicated by the # sign at the beginning) of the desired color.

If you recall, the image used for the heading has a silhouette of a Ferrari on a white background -- so if we were to use the same black color for the background of the web page, the picture would not merge well into the page:

1. Open the index.html file in your text editor.
2. Find the <body> tag and change it to: <body bgcolor=#000000>
3. Save it as index_16.html and Load your HTML file in your web browser. If you did things correctly, your browser should have changed the background to a solid black. But you may have noticed that the header graphic is now partially still white and you cannot see your text! Why? Well, the default color for text is also black, so you now have black text on a black background! Fortunately, there are some other options to fix that; but first of change the background color:

• BGCOLOR = the color of the background (default is grey)
• TEXT = the color of normal body text (default is black)
• LINK = the color of an item that is a hypertext link (default is blue)
• VLINK = the color of a hypertext item recently visited (default is purple)

You can now add some of these other color values by changing the tag to read:

This will provide a black background, pale yellow text, light aqua blue hypertext, and red hypertext to visited links.

NOTE: the order of the items in the <BODY> tag does not matter You should now modify the <body> tags in all of your HTML files (fast and easy to do by copying and pasting the above example for the new <body> tag).

While you are at it, change the header image, find the file named "ferrari _458_bl.png" in your "images" folder and use it to replace the current header image. The new tag should read:

Textured Backgrounds

Solid colors add some variety to web pages -- but you can go even farther by adding a textured background. You use a small image file (GIF or JPEG) and the browser will "tile" the web page with repeated copies of the image. Some of the things you should keep in mind are:

• file size: Adding a background texture will require that an additional graphic file be downloaded. It is suggested that the image files be less than 20k in size.
• readability: Be selective! Many background texture files are more distracting than enhancing for readability. Try to use background textures that are very light (with dark text) or very dark (with light text). Select for high contrast with the text and its background.

In this part of the lesson, you will get a chance to experiment with a couple of different background images. The HTML format for adding a background image file is:

Where bgfile.gif is the name of the image file (this can be a full URL or a relative file path -- see lesson 9a).

Since the index.html file has a header graphic to spruce up the page you will need to try the background images out and see how it matches up to the header graphic.

For the sake of this tutorial not having online access, the images you will need are provided for you. Below are the names of two background files. Each one of these already exists in your images folder. You only have to refer to the name of the file when using it:

Try the Veyron_bg.jpg background and note what happens, the following is the HTML:

After trying the above, change it to Check_bg.png by using the HTML below.

Now change the text colors for your page as we did in the above example to red with the random squares background. Also change the header graphic back to white.

NOTE: Most web browsers have the ability to change the default text colors -- sometimes a user may have the preferences set for colors that will interfere with the ones you have selected. Therefore, it is suggested that when using any background tags (solid color or texture file) that you include the "normal" colors -- black for text, blue for hypertext links, and purple for recent links: <BODY TEXT=#000000 VLINK=#660099 LINK=#0000FF>