Styles, Images, and Tables

So far we have explored only how to annotate a document with headings, how to organize text into paragraphs and lists, and how to display non-standard characters. That is still pretty boring. Real web pages have graphics! Text can be in different font faces, or it can be in boldface or italics, or even a different color. Text and graphics can be organized into columns, or into even more intricate structures. This tutorial will explain how to specify the style of text, how to display graphics in your HTML file, and how to organize file elements into tables.

Although it doesn’t fit thematically with the rest of the tutorial, it makes sense to discuss intellectual property rights as well. You will be producing material that will be publicly published on the web, so so this tutorial also covers your choice of how freely to allow others to use what you create.

Styles

The most powerful way to control formatting in HTML is by using styles. Styles are an add-on to HTML that allows precise control over how text and other elements of HTML documents are displayed. Styles are used to specify all sorts of display parameters, such as font, text color, and font size. For example, to typeset an entire paragraph in red, you can specify the text color to be red in the paragraph opening tag.

This paragraph, you will notice, is rendered in red type. This was accomplished in its <p> opening tag by inserting a style attribute. The opening tag for the is paragraph is <p style="color:red">. Consequently, the browser displays all text, until the closing </p> tag, in red.

All sorts of parameters can be set by a style attribute. They all follow the syntax of property: value, where property is the name of the parameter and value is an allowed value of the property. More than one property can be set in a style attribute; properties are separated semicolons (“;”). A partial list of properties and values is:

property	meaning	values	meaning
font-weight	degree of boldface	bold	boldface
		normal	normal weight

text-align	alignment of text in a block-level structure	left	left-align
		right	right-align
		center	centered text
		justify	justified text

color	font color	red, blue, etc.	if recognized by browser
		#hex number	intensity of red, green, and blue

background-color	background color of a block-level structure	any color value	this color is #CCFFCC.

text-decoration	altertions to type	underline	underlines text
		line-through	text with strikethrough

font-family	type face	any font name + “serif” or “sans-serif”	name of font to use

Knowing exactly what property name controls which parameter and what the allowed values are is a rather complicated undertaking. A fairly complete and readable list of attributes can be found at the CSS attributes page here. I will try to limit your load to just a few essential items.

Colors

Some color names, such as red, green, blue, and cyan, are recognized by most browsers. However, colors can be specified more precisely by defining exactly how bright the red, green, and blue pixels should be (you should know why this works if you have taken my PHYS 1090 class). A color is specified by a six-digit hexadecimal (see below for what that means) number. The first two digits tell the red intensity, the middle two the green intensity, and the last two the blue intensity.

Colors and Hexadecimal Numbers

Hexadecimal (“Hex”) is a numbering system used with computers, because it translates easily to the binary system that computers themselves use. Hex is similar to the familiar decimal system, which uses ten numerals (0123456789) to represent quantities. The difference is that in Hex, there are sixteen numerals (0123456789ABCDEF).

Each decimal digit can be any one of the ten numerals 0, 1, 2, 3, 4, 5, 6, 7, 8, or 9. A two-digit number then can specify 10×10 = 100 distinct values, from 0 to 99. In the same manner, any Hex digit can be any one of the sixteen numerals 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, or F. This way, a two-digit Hex number can specify 16×16 = 256 distinct values, from 0 to FF.

So, in principle, a six-digit Hex number can specify 256×256×256 = 16,777,216 separate colors. In practice, not all of these are guaranteed to display “true” in all browsers. (As screens and computers improve, this is becoming less of a problem.) The “web-safe” colors may take only the values 00, 33, 66, 99, CC, or FF for each color, giving a much more limited (6×6×6 = 216) palette. Still, 216 colors gives a pretty good selection.

Coding Hex COlors

The color black is coded as #000000: all pixels are off. Bright blue is #0000FF: the red and green pixels are off, while the blue pixels are as bright as they get. Progressively darker blues can be obtained by decreasing the blue intensity: watch the progression as the the numbers decrease.

Mixing primary colors gives the expected results: equal but decreasing intensities of red and green give bright yellow through dark brown to eventually black:

Font Faces

Fonts can be controlled by the font-family attribute. Since not all computers carry every font, it is recommended to list a number of fonts, separated by commas, in order of descending preference. A browser rendering the file will use the highest available choice. If none of the fonts listed are available, the browser will use a default.

Using Style Attributes

How can you specify exactly what text a style should modify? So far you have seen a style inserted into a paragraph. This may not be what you want; you may want to apply a style to a group of paragraphs, to an entire document, or perhaps to only a few words or only a few letters. This is easily achieved by the <div> and <span> structures.

Both of these structures have no intrinsic formatting function. They merely group text to which you will apply some formatting. If two paragraphs are enclosed between <div> and </div> tags, any style specified in the <div> tag will be applied to all paragraphs within the division. The following paragraphs are set to be rendered in italic type, and to be right-aligned.

This is the first paragraph in the division.

This is the second paragraph in the division.

This is the third paragraph in the division.

<div style="font-style:italic; text-align:right"> <p>This is the first paragraph in the division.</p> <p>This is the second paragraph in the division.</p> <p>This is the third paragraph in the division.</p> </div>

The <span> structure is used for text groups smaller than paragraphs. For example, to display just these words in cyan bold italic, the following structure was used:

<span style="color:#00CCCC; font-weight:bold; font-style:italic">these words</span>

Even when you specify all this control, you may still be surprised by formatting not turning out quite the way you intended. For instance, if you specify in a <div> that all enclosed text is to be orange, it may display as some other color if the formats of the elements contained in the <div> specify some other text color. You will have to deal with those problems as they arise.

Graphics

Nowadays, web pages are seldom just text. You want to see graphics on a web site! It turns out that the graphics are not actually part of the HTML file. The HTML file is always just plain text. It references graphics files using the <img> tag. For example, the picture below was referenced and positioned using the following code:

<p style="text-align:center"> <img src="http://www.barransclass.com/shared_pix/tree.jpg" alt ="a tree" width="327" height="217"> </p>

The attributes of the <img> tag specify the parameters of the image. The most important attribute is src, which is the address and name (URL) of the image file. Not critical to the display, but considered good practice, is alt, which specifies text to be substituted if the image is not found or cannot be displayed. (This can be important for blind people accessing the web, for instance.) The width and height attributes tell the size of the image, in pixels. This is not needed, but if the information is provided, the browser knows exactly how much space to allot to the image. If the image is slow to load, the page will not rearrange after the picture finally shows up.

Any graphics file available to your browser can be displayed in an HTML file. It does not need to be on your own web site. However, referencing a picture on someone else’s web site without permission, known as hot linking, is considered very rude. It basically constitutes theft of their bandwidth, because the website owner is paying for the download, and not getting any credit, every time someone views your page.

Tables

The most powerful way to align and arrange elements on a web page is through the use of tables. Tables are structures made of rows, and within the rows, headings or data. Data in different rows are vertically aligned.

A table itself is bracketed a <table></table> tag pair. Each row of a table is bracketed by a <tr></tr> tag pair. Within each row, each column heading is bracketed by a <th></th> tag pair, and the contents of each data cell is bracketed by a <td></td> tag pair. This is best explained by an example.

Mode of travel	Characteristics
planes	fast, expensive, cramped
trains	slow, expensive, roomy
automobiles	smell like stale popcorn

<p style="text-align:center"> <table> <thead> <tr> <th>Mode of travel</th> <th>Characteristics</th> </tr> </thead> <tbody> <tr> <td>planes</td> <td>fast, expensive, cramped</td> </tr> <tr> <td>trains</td> <td>slow, expensive, roomy</td> </tr> <tr> <td>automobiles</td> <td>smell like stale popcorn</td> </tr> </tbody> </table> </p>

The <thead></thead> and <tbody></tbody> bracketing tag pairs denote the heading and body of the table, respectively. Although using them is good practice, it is not necessary. There is no difference in how the document displays either way.

The real power of tables is that any HTML elements, not just text, can be placed inside cells. Graphics, paragraphs, and headings can all be organized and aligned using tables. However, this can get quite complicated. For the purposes of this class, you may wish to use tables to present text or data. On the other hand, you may not need to. Sophisticated constructions are at your own risk.

Rights

The web is full of accessible information. That’s a lot of the reason that we like it; a cornucopia of wonders is just a click away. However, lots of people put that information there for us to find, and they had a variety of reasons for putting it there. Is it all right for someone to copy a web page and post it to the web as his own web page? How about if he changes it a little bit first? Is it all right if he credits the original web page, or names the original author? To what extent is one permitted to use or modify the web content someone else created?

In the United States, copyright law is unambiguous: the copyright holder of intellectual property owns the rights to it. For a long time. This means that the copyright holder is the only entity allowed to do things like reproduce, display, or make derivatives of the work. Material on the internet is not exempt. (For more details about the rights and rules, see the pdf copyright basics pamphlet from the U.S. Copyright Office.)

The copyright holder is either the creator of the work, or the entity who hired the creator to create it. The copyright holder may choose to allow others to exercise some of the rights of the copyright, but its is a choice. Simply publishing material on the web does not waive copyright to it.

Creative Commons

That said, a lot of the strength of the internet community is that it allows rapid exchange of information and ideas. Knowledge and culture are advanced when people work with other people’s ideas. People who post their copyrighted material on the web may want others to work with it—but they may also want others to credit their contribution. Creative Commons has developed a set of licences that cover the different degrees of control a copyright holder may wish to maintain. The licenses are described at their About Licenses page.

Since you will be creating material that will be published on the web, you will be a copyright holder. To protect your rights, and to make it clear to any users what you are willing to allow them to do with your content, you should decide how you wish to license your work. Read through the descriptions of the Creative Commons licenses, and think about what conditions you want applied to the material you create.

Styles, Images, Tables, and Rights

Dress up Your File