CTEC2300 Lesson 7-11

Absolute Pathnames

Absolute pathnames point to files based on their absolute location on the file system. They point to the page by starting at the top level of your directory hierarchy and working downward through all the intervening directories to reach the file. Absolute pathnames always begin with a slash (/), which how they are differentiated from relative pathnames. Following the slash are all the directories in the path from the top level of the file system to the file you are linking to.

ALIGN=BOTTOM

Aligns the bottom of the image with the bottom of the line

ALIGN=MIDDLE

Aligns the center of the image with the middle of the line (usually the baseline of the text, not the actual middle of the line)

HREF-"file.html"

file.html is located in the current directory

HREF="/js/jstewart/www/file.html"

file.html is located in the directory /js/jstewart

HREF="../file.html"

file.html is located in the directory one level up from the current directory. This is also referred to as the 'parent' directory of the current directory.

HREF="files/file.html"

file.html is located in the directory, or folder, called files. The files directory is located in the current directory.

HREF="files/morefiles/file.html"

file.html is located in the morefiles directory, which is located in the files directory. The files directory is located in the current directory.

HREF="/Hard Disk 1/HTML Files/file.html"

file.html is located on Hard Disk 1 in the folder HTML Files

HREF="/j:/jstewart/www/file.html"

file.html is located on the J: disk in the directoriesjstewart/www

HREF="../../files/file.html

file.html is located two directory levels up, the in the directory files.

ALIGN=TOP

Aligns the top of the image with the topmost part of the line (which may be the top of the text or the top of another image)

Frame Attribute Affects

The FRAME attribute affects how the external border of the table is rendered. You can specify one of several different values to define which sides of the external border are visible:

Keep your images small

A smaller image takes less time to transfer over the Internet; therefore, using smaller images makes your Web page load faster and causes less frustration people trying to ready it over slow connections. To create small images, you can reduce their physical dimensions on the screen. You can also create also create smaller file sizes for your images by reducing the number of colors in an image. A four-inch black-and-white image (two colors) will likely be smaller than a four-inch full-color graphic. With most image-editing programs you can reduce the number of colors and touch it up so it looks good even with fewer colors. A good general rule to follow is to keep your page size somewhere under 65K maximum. A single 20K file takes approximately 20 seconds to load over a 14.4Kbps modem connection. So add up all your image sizes.

PRE tag examples

Another document

Table Parts

Before we get into the actual HTML code to create a table, let me define some terms so we both know what we're talking about: The caption indicates what the table is about: for example, "Voting Statistics, 1950-1994. Captions are optional The table headings label the rows, columns, or both. Table headings are usually in a larger or emphasized font. Table headings are also optional. Table cells are individual squares in the table. A cell can contain normal table data or a table heading. Table data is the values in the table itself. Here is an example

Color Specifications

Before you can change the color of any part of an HTML page, you have to know what color you're going to change it to. You can specify colors in two ways: Using one of a set of predefined color names Using a hexadecimal number representing that color Netscape and Internet explorer support indicating colors by using color name such as black, white, green, maroon, olive, navy, purple, gray, red, yellow, blue, teal, lime, aqua, fuchsia, or silver. These color names are easy to remember, and easier to figure out than the hexadecimal color values, but they are less flexible in the kinds of colors you can use. Keep in mind too, other browsers may not understand these colors, thus may not render them at all. The most flexible and most widely supported method of indicating color involves finding out the numeric value of the color. Most image-editing programs have what is called a color picker (see the Windows Paint program). The color picker will tell you the RGB (red, green, blue mix) value of a color. Each number is a value in the range of 0 to 255, with 0 0 0 being black and 255 255 255 being white. After you have your color's RGB numbers from 0 to 255, you have to convert them to hexadecimal. You can use any scientific calculator to convert between ASCII and hex to get these numbers. There are many shareware programs that will do the calculations for you. There are equally as many web sites with the values worked out. See our class home page category, "Graphics and Color." The hex value of a color is always a six character number. For example, the RGB value of 0 0 0 which is black, has a hex value of 000000. The RGB values of white 255 255 255 convert to FFFFFF. It's pretty simple to perform general conversions of RGB values to hex yourself. Here's how it is done: Divide your RGB value by 16. If the whole number portion of the quotient is between zero and nine, use that number twice. Example, 153/16 = 9.5625 so the hex value is 99. If the whole number portion of the quotient is greater than 9 then us the chart below to determine the alpha equivalent. Example, 10 = aa and 11 = bb up to 15 = ff (255/16 - 15.9375) For an RGB value of 255 0 255, the hex value would be ff00ff. Try it for yourself. it works great!

Empty Cells

Both table headings and data cells can contain any text, HTML code, or both, including links, lists, forms, and other tables. But what if you want a cell with nothing in it? That's easy. Just define a cell with a <TH> or <TD> element with nothing inside it, like this example.

ALL

Break to a line clear to both margins

LEFT

Break to an empty left margin, for left align images

RIGHT

Break to an empty right margin, for right aligned images

Cell Spacing

Cell spacing is similar to cell padding except that it affects the amount of space between cells. That is, the width of the shaded lines that separate the cells. Cell spacing is 2 by default. Here is our modified opening table tag and an example. <TABLE BORDER="4" WIDTH="100%" CELLPADDING="10" CELLSPACING="8">

ALINK

Controls the color of a link that has had the mouse button pressed on it but not released (an active link). They are often red by default.

Text

Controls the color of all the page's body text that isn't a link, including headings, body text, text inside tables, and so on.

VLINK

Controls the color of links that have been visited (the ones that are usually purple by default).

Link

Controls the color of normal, unfollowed links in the page (the ones that are usually blue by default).

Table Parts and the Table Element

Creating tables by hand is no fun. The code for tables was not necessarily designed to be easily written by hand. As such it can be confusing. You'll do a lot of experimenting, testing, and going back and forth between your browser and your code to get a table to work out right. HTML editors can help a great deal with this. But I suggest doing at least your first bunch of tables the hard way so you can get the idea how HTML tables work.

Do You Really Need this Image?

For each image you put inline on your Web page, consider why you are putting it there. What does the image add to the design? Does it provide information that could be presented with text instead? I'd it just there because you like how it looks? Try not to clutter your Web page with pretty but otherwise unnecessary images. A simple Web page with only a few iconic images is often more effective that a page that opens with an enormous graphic and continues to the trend with flashy 3D buttons, drop-shadow bullets, and psychedelic line separators.

Glossary Lists

Glossary lists are slightly different from other lists. Each list item in a glossary list has two parts: A term The term's definition Each part of the glossary list has its own tag: <DT> for the term ("definition term"), and <DD> of its definition ("definition definition"). <DT> and <DD> are both one-sided tags. The entire glossary list is indicated by the tags <DL>...</DL> ("definition list"). Glossary or Definition List Example

Relative Pathnames Examples

HREF-"file.html", HREF="files/file.html", HREF="files/morefiles/file.html", HREF="../file.html", and HREF="../../files/file.html

Absolute Pathnames Example

HREF="/js/jstewart/www/file.html", HREF="/j:/jstewart/www/file.html", and HREF="/Hard Disk 1/HTML Files/file.html"

HTML Tags

HTML defines three tags that are used to define the page's overall structure. These tags - <HTML>, <HEAD>, <BODY> - identify your page to browsers. They also provide simple information about the page such as its title or its author. The first page structure tag in every HTML page is the <HTML> tag. It indicates that the content of this file is in the HTML language. All the text and HTML commands in your HTML page should go within the beginning and ending HTML tags, like the following: <HTML> ...your page... </HTML>

Headings

Headings are used to divide sections of text, just like in a book. HTML defines six levels of headings. <H1>Mythology Through the Ages</H1> <H2>Common Mythological Themes</H2> <H2>Earliest Known Myths</H2> <H2>Origins of Mythology</H2> <H3>Mesopotamian Mythology</H3> <H3>Egyptian Mythology</H3> <H4>The Story of Isis and Osiris</H4> <H4>Horus and Set: The Battle of Good vs. Evil</H4> <H4>The Twelve Hours of the Underworld</H4> <H4>The River Styx</H4> <H2>History in Myth</H2> This header code would render in the browser as follows, Mythology Through the Ages Common Mythological Themes Earliest Known Myths Origins of Mythology Mesopotamian Mythology Egyptian Mythology The Story of Isis and Osiris Horus and Set: The Battle of Good vs. Evil The Twelve Hours of the Underworld The River Styx History in Myth Unlike titles, headings can be of an length, including many lines of text. Because headings are emphasized, though, having many lines of emphasized text can be tiring to read. Don't use headings to display text in boldface type or to make certain parts of your page stand out. Also, some search engines may extract your headings to indicate the important parts of your page. By using headings for something other than an actual heading, you may be foiling those search engines by creating strange results.

Adding Images Using HTML

If you have been struggling with all the HTML tags that have been thrown your way during the past weeks, and the challenging <TABLE> exercises, you can now breath easier. This lesson is really very easy. In this lesson you will learn about the HTML codes to add images to your Web pages. The most challenging aspect of adding images to your Web pages is finding and/or creating good images. You'll have to take other courses to learn how to create engaging graphics. There are links on our class homepage under the heading "Graphics and Color" that are very useful. It is worth your time to check them out, especially the Photoshop Crash Course. This lesson will assume you already have an image you want to put on your Web page. That image has to be in one of two formats: GIF or JPEG. Which format is best? That depends on the image. See Quakit.com's discussion of GIF vs. JPEG format. To add your image you use the <IMG> tag. The most important attribute to the <IMG> tag is SRC. The SRC attribute indicates the file name or URL of the image you want to link to. So for a GIF file named image.gif in the same directory as your HTML file, you use the following tag: <IMG SRC="image.gif"> For an image file one directory up from the current directory, use this tag: <IMG SRC="../image.gif"> For an image file in a directory titles "images" one directory up from the current directory, use this tag: <IMG SRC="../images/image.gif"> And so on, using the same rules as for page names in the HREF part of the <A> anchor tag.

the PRE tag

Most of the time, text in an HTML file is formatted based on tags. Additional white space and tabs in your HTML code is ignored. One exception to this rule is the preformatted text tag <PRE>; it actually means PREserve. Any white space that you put into text surrounded by the <PRE> and </PRE> tags is retained in the final output. The catch is that preformatted text is usually displayed in a monospaced font such as Courier. Preformatted text is excellent for displaying programming code examples, where you want to indent and format lines appropriately. You can also use the <PRE> tag to align text by padding it with spaces to create a simple table. However, the tables are displayed in a monospaced font, which makes them less than ideal. We will learn much more about tables later.

Reuse Images as Often as You Can

In addition to keeping individual images small, try to reuse the same images as often as possible on single pages and across multiple pages. For example, if you have images for bullets, use the same image for all the bullets rather than different ones.. Reusing images has a couple of significant advantages: Reusing images provides a consistency to your design across pages, part of creating an overall "look-and-feel" for our site. Even more important, reusing images means your browser has to download the image only once. After the browser has the image in memory, it can simply redraw the image multiple times without having to download the file multiple times from the server.

Linking to other Documents on the Web

In some places on your web pages you may want to refer to a page somewhere else on the Internet. We will call these remote pages (i.e. pages that are contained somewhere on the Web other than the system you're currently working on). The HTML code you use to link pages on the Web is exactly the same as the code you use for links between local pages. You still use the <A> tag with the HREF attribute, and you include some text so server as the link on your Web page. But instead of a filename or an path in the HREF, you use the URL of that page on the Web. For example: <A HREF="http://www.cern.ch/">Cern Home Page</A> <A HREF="http://www.uta.edu/library">UTA Libraries</A>

Inside the Table Element

Inside the <TABLE>...</TABLE> element, you define the actual contents of the table. Table in HTML are specified row by row, and each row definition contains definitions for all the cells in that row. So, to define a table, you start by defining the top row and each cell in turn, left to right, and then you define the second row and its cells, and so on. The columns are automatically calculated based on how many cells are in each row. The table row starts with the <TR> tag and ends with the closing </TR> tag. Your table can have as many rows as you want to and as many cells in each row as you need for your columns, but you should make sure that each row has the same number of cells so the columns line up. The cells within each table row are indicated by one of two elements: <TH>...</TH> for heading cells. Headings are generally displayed in a different way, such as a boldface font. <TD>...</TD> for data cells. TD stands for Table Data. In the example we have been using so far, the heading cells appear in the top row and are defined with the following code: <TR> <TH>Name</TH> <TH>Height</TH> <TH>Weight</TH> <TH>Eye Color</TH> </TR> This is followed by three rows of data cells, which are coded as follows: <TR> <TD>Alison</TD> <TD>5'4"</TD> <TD>140</TD> <TD>Blue</TD> </TR> <TR> <TD>Tom</TD> <TD>6'0"</TD> <TD>165</TD> <TD>Hazel</TD> </TR> <TR> <TD>Susan</TD> <TD>5'1"</TD> <TD>97</TD> <TD>Brown</TD> </TR> Let's make a slight modification to the table. Let's put the table headings along the left edge of the table instead. To accomplish this, put each <TH> in the first cell in each row, and follow it with the table data that pertains to each heading. Look at this example and view the source code.

Changing Border Colors

Internet Explorer allows you to change the colors of the tables border by using the BORDERCOLOR, BORDERCOLORLIGHT, and BORDERCOLORDARK attributes. BORDERCOLOR sets the color of the border, overriding the 3D look of the default border BORDERCOLORLIGHT sets the dark component of 3D-look borders. The dark color is placed on the right and bottom sides of the table border BORDERCOLORDARK sets the light component of 3D-look borders. The light color is placed on the left and top sides of the table border

Nesting Lists

Nesting lists put the entire list structure inside another list. Nested List Example Peppers Bell Chile Serrano Japeleno Habanero Anaheim Szechuan Cayenne

Horizontal Rules

The <HR> tag, which has no closing tag and no text associated with it, creates a horizontal line on the page. Rule lines are excellent for visually separating sections of a Web page - just before headings, for example, or to separate body text from a list of items. Here is an example of rule lines with a list.

Logical Styles

Logical Styles indicate how text is to be used, not how it is to be displayed. They don't indicate how the text is to be formatted, just how it is to be used in a document(emphasis, citation, definition). Using logical style tags, the browser determines the actual presentation of the text, be it bold, italic, or any other change in appearance. You cannot guarantee the text highlighted using these tags will always be bold or always be italic (and therefore, you should not depend on it either). This is an example that demonstrates logical tags. Compare the page appearance in Internet Explorer, Firefox, Safari, or other browsers.

Line Break

The <BR> tag breaks a line of text at the point where it appears. When a Web browser encounters a <BR> tag, it restarts the text after the tag at the left margin. The <BR> tag will not add extra white space above or below the new line or change the font or style of the current entity. You can use the <BR> tag within other elements such as paragraphs or list items. Here is an example of the <BR> tag. CLEAR is an attribute of the <BR> tag. It is used with images that have text wrapped alongside them. You'll learn about this attribute when we cover images, color, and backgrounds.

Changing the Font Face

Netscape introduced the <FONT> tag to HTML with its 1.0 browser. Microsoft's Internet Explorer extended the <FONT> tag to include the FACE attribute. FACE takes as its value a set of font names, surrounded by quotation marks and separated by commas. When a browser interprets a page with FACE in it, it will search the system for the given font names one at a time. If it can't find the first one, it tries the second, and then the third, and so on, until it finds a font that is actually installed on the system. If the browser cannot find any of the listed fonts, the default font is used instead. So, for the following example, the text would be rendered in Futura. If Futura is not available, the browser will try Helvetica; it would fall back to the default font if Helvetica is not available. <P><FONT FACE="Arial, Helvetica">Sans Serif fonts are fonts without the small "ticks" on the strokes of the characters.</FONT></P> Example of the letter T as a serif and a sans serif font: T Serif T Sans Serif If you use the FACE attribute, keep in mind that some older browsers don't support it. Also, many fonts have different names on different systems; for example, plain old Times is Times on some systems, Times Roman on others, and Times New Roman elsewhere. Because of the varying names of fonts and the lack of support for the FACE attribute in some browsers, changing the font name should be used only as an optional presentation-only feature rather that one to be relied upon in your pages.

Text Wrapping and Adjusting Space

Notice in this Love, from whom the world a globe or world begun, Hath the secret of the sun. the sun Love can tell, and love alone, Whence the million stars a star were strewn Why each atom an atom knows its own. --Robert Bridges that the bottom of the images and the top of the text match up. The <IMG> tag also includes an ALIGN attribute, which allows you to align the image upward or downward with the surrounding text or other images in the line. Here is the Love, from whom the world a globe or world begun, Hath the secret of the sun. the sun Love can tell, and love alone, Whence the million stars a star were strewn Why each atom an atom knows its own. --Robert Bridges with ALIGN attributes added to the images.

Paragraph

Now that you have a page title and several headings, you can add some ordinary paragraphs to the page. The first version of HTML specified the <P> tag as a one-sided tag. There was no corresponding </P> tag and the <P> tag indicated the end of a paragraph, not the beginning. Paragraphs in the first version of HTML looked like this: The dragon fell to the ground, releasing an anguished cry and seething in pain. The thrust of Enigern's sword proved fatal as the dragon breathed its last breath. Now Enigern was free to release Lady Aelfleada from her imprisonment in the dragon's lair.<P> In the HTML 4.0 specification (as with HTML 3.2 and HTML 2.0), the paragraph tag is revised. In these versions of HTML, the paragraph tags are two-sided (<P>...</P>), or containers. The <P> indicates the beginning of the paragraph. Also, the </P> tag is optional, but we will develop the good habit of closing </P> the paragraph tags. The previous example would look like this: <P>The dragon fell to the ground, releasing an anguished cry and seething in pain. The thrust of Enigern's sword proved fatal as the dragon breathed its last breath. Now Enigern was free to release Lady Aelfleada from her imprisonment in the dragon's lair.</P>

Font Tags

The <FONT> tag is used to control the characteristics of a given set of characters not covered by character styles such as <B> or <I>.

Changing Table Borders

The BORDER attribute is the most common attribute of the <TABLE> element. With it you specify whether or not border lines are displayed around the table, and if so, how wide the borders should be. If BORDER has a numeric value, the border around the outside of the table is drawn with that pixel width. The default is BORDER="1"; BORDER="0" suppresses the border. Here is our modified code and an example: <TABLE BORDER="10" WIDTH="100%">

Image Previews

One completely optional HTML extension (supported by both Netscape and Internet Explorer versions 4 and above) is the LOWSRC attribute to the <IMG> tag, which provides a sort of preview for the actual image on the page. You use the LOWSRC attribute just like you do the SRC attribute. Why would you use this type of preview? The image in LOWSRC is usually a lower resolution preview of the actual image. The lower resolution image will be smaller (in kilobytes) and will load very quickly and give the readers an idea of the overall effect of the page. Then, after all the layout is done, the readers can scroll around and read the text while the better images are quietly loaded in the background. (Make sure the LOWSRC image is indeed smaller; otherwise, there's no point to include it.)

Grouping the Aligning Columns

One of the table enhancements offered in HTML 4.0 is the ability to group and format columns and rows. The <COLGROUP>...</COLGROUP> element is used to enclose one or more columns in a group. This element has two attributes: SPAN defines the number of columns that the column group spans. It must have a value greater than 0. If SPAN is not defined, the <COLGROUP> element contains one column. However, if the <COLGROUP> element contains one or more <COL> elements (described next), the SPAN attribute is ignored. WIDTH defines the width for each column in the column group. Widths can be defined in pixels, percentages, and relative values. You can also specify a special width value of "0*". This value specifies that the width of each column in the group should be the minimum amount necessary to hold the contents of each cell in the column. Let's say, for example you have a table that measures 450 pixels in width and contains six columns. You want each of the six columns to be 75 pixels wide. The code would look something like this: <TABLE BORDER="1" WIDTH="450"> <COLGROUP SPAN="6" WIDTH="75"> </COLGROUP> Now you want to change the columns so the first two columns are 25 pixels wide and the last four columns are 100 pixels wide. This requires two <COLGROUP> tags: <TABLE BORDER="1" WIDTH="450"> <COLGROUP SPAN="2" WIDTH="25"> </COLGROUP> <COLGROUP SPAN="4" WIDTH="100"> </COLGROUP> What if you don't want all of the columns in a group to have the same width or have the same appearance? This is where the <COL> element comes into play. Let's say now we want to format two columns in the first group at 75 pixels each. In the second column group, we have columns at 50, 75, 75, and 100 pixels. Here's how we format the second column group with the <COL> tag: <TABLE BORDER="1" WIDTH="450"> <COLGROUP SPAN="2" WIDTH="75"> </COLGROUP> <COLGROUP > <COL SPAN="1" WIDTH="50"> <COL SPAN="2" WIDTH="75"> <COL SPAN="1" WIDTH="100"> </COLGROUP>

Ordered Lists

Ordered Lists are surrounded by the <OL>...</OL> tags. OL stands for Ordered List. Each item within the list begins with the <LI> (List Item) tag. Use ordered lists only when you want to indicate that the elements are ordered - that is, they must appear or occur in that specific order. Click here to compare ordered lists with unordered lists.

Customizing Ordered Lists with HTML 3.2

Ordered lists allow for other "attributes" to contain additional information about the tag itself. To add an attribute to a tag you follow this syntax, <tag attribute=" ">. For example, <OL TYPE="I"> Here are the ordered list attributes followed by examples: "1" Specifies standard Arabic numerals should be used to number the list. Example of Numbered List "a" Specifies lowercase letters Example of Lower-case List "A" Specifies uppercase letters Example of Uppercase List "i" Specifies lowercase Roman numerals Example of Lowercase Roman List "I" Specifies uppercase Roman numerals Example of Uppercase Roman List Using another attribute, START, you can specify what number or letter you want to start your list. For example, <OL START="4"> would start the list at number four, whereas <OL TYPE="a" START="3"> would start with the letter c and move through the alphabet from there. Typestart Example

HTML 4.0 defines these kinds of lists

Ordered lists: typically labeled with numbers Unordered lists: typically labeled with bullets Glossary lists: in which each item in the list has a term and a definition for that term, arranged so that the term is somehow highlighted or drawn out from the text All the list tags have common elements: The entire list is surrounded by the appropriate opening and closing tag for the kind of list. For example, <UL> and </UL>, or <OL> and </OL>. Each list item within the list has its own tag: <DT> and <DD> for the glossary lists, and <LI> for all other lists.

Physical Styles

Physical style tags indicate exactly the way text is to be formatted (bold, underline, and so on). Each formatting tag has a beginning and ending tag. Here is a list of the beginning tags and their definition. <B> Bold <I> Italic <TT> Monospaced typewriter font <U> Underline <S> Strikethrough <BIG> Bigger print than surrounding text <SMALL> Smaller print <SUB> Subscript <SUP> Superscript. You can nest character tags - for example, use both bold and italic for a set of characters - like the following: <B><I>text that is both bold and italic</I></B> This is an example that demonstrates physical tags. Compare the page appearance in Internet Explorer, Firefox, Safari, or other browsers.

Relative Pathnames

Relative pathnames point to files based on their locations relative to the current file. When you specify just the filename of a linked file within quotation marks, as in this example <A HREF="menu.html"> the browser looks for that file in the same directory as the current file. Both the current file presented in the browser and the file being linked to from the current file are in the same directory. This is the simplest form of a relative pathname. To specify relative pathnames, UNIX-style pathnames are used regardless of the operating system you actually have. Directory or folder names are separated with forward slashes (/), and you use two dots to refer generically to the directory above the current one (..).

BOX

Renders all four sides of the border.

BELOW

Renders only the bottom side of the border.

ABOVE

Renders only the top side of the border.

LHS

Renders the left-hand side of the border.

VSIDES

Renders the right and left sides of the border.

RHS

Renders the right-hand side of the border.

HSIDES

Renders the top and bottom sides of the border.

Changing the Font Size

The <FONT>...</FONT> tags enclose the text, and the SIZE attribute indicates the size to change the font. The values of SIZE are 1 to 7, with three being the default size. Consider the following example: <P>Bored with you plain old font? <FONT SIZE=5>Change it!</FONT></P> Select this example to view the typical font sizes for each value of SIZE. You can also specify the size in the <FONT> tag as a relative value by using the + or - characters in the value for SIZE. Because the default size is 3, you can change relative font sizes in ranges from -3 to 4, like this: <P>Change the <FONT SIZE=+2>Font</FONT> size again.</P> Here the font will be two sizes larger than the default font.

<HEAD> Tag

The <HEAD> tag specifies that the lines within the beginning and ending points of the tag are the prolog to the rest of the file. Generally, only a few tags go into the <HEAD> portion of the page. Most notably, the page title, and <META> tag information, described later. You should never put any of the text of your page into the header: <HTML> <HEAD> <TITLE> Poisonous Plants of North America.</TITLE> </HEAD> .... </HTML>

Special Characters

Say you wanted to include a line of code that looks something like the following in an HTML file: <P><CODE>if x < 0 do print i</CODE></P> Doesn't look unusual, does it? Unfortunately, HTML cannot display this line as written. Why? The problem is with the < (less-than) character. To an HTML browser, the less-than character means "this is the start of a tag." Because in this context the less-than character is not actually the start of a tag, your browser may get confused. You'll have the same problem with the greater-than character (>) because it means the end of the tag in HTML, and the ampersand (&), meaning the beginning of a character escape. HTML provides named escape codes for each of these characters and one for the double quotation mark as well: < < > > & & " " © © ® ® ´ (résumé = résumé) white space The double quotation mark escape is the mysterious one. Technically, to produce correct HTML files you should use the escape sequence " if you want to use a double quote. However, I have not noticed any browsers having problems displaying the double quotation mark when it is typed literally in an HTML file, nor have I seen many HTML files that use it. For the most part, you are probably safe using plain old " in your HTML files rather than the escape sequence.

Table Alignment

Table Alignment By default, tables are displayed on a line by themselves along the left side of the page with the text above or below the tables. However, you can use the ALIGN attribute to align tables along the left or right margins and wrap text alongside them the same way you can with images.

The DIV Tag

Text alignment is the ability to arrange a block of text such as a heading or a paragraph so that it is aligned against the left margin, right margin, or centered between the two.

Comments

Text in comments is ignored when the HTML file is parsed; comments do ot ever show up on the screen - that's why they are comments. Comment tags look like this: <!-- This is a comment --> <!-- Rewrite this section -->

Quotations

The <BLOCKQUOTE> tag is used to create a quotation. Unlike the <CITE> tag, which highlights small quotes, <BLOCKQUOTE> is used for longer quotations that should be nested inside other paragraphs.) Quotations are generally set off from regular text by indentation or some other method. As in paragraphs, you can separate lines in a <BLOCKQUOTE> using the line break tag <BR>. Here is an example of the BLOCKQUOTE tag.

Attributes of the <HR> Tag

The SIZE attribute indicates the thickness, in pixels, of the rule line. The default is 2, and this is the smallest you can make the rule line. Here is an example of the SIZE attribute. The WIDTH attribute indicates the horizontal width of the rule line. You can specify either the exact width, in pixels, or the value as a percentage of the screen width (for example 30 percent or 50 percent), which changes if you resize the window. Here is an example of the WIDTH attribute. Finally, the NOSHADE attribute shown in this example causes the browser to draw the line as a plain line without the three-dimensional shading.

Adjusting Space Around Images

The VSPACE and HSPACE attributes to he <IMG> tag allow you to adjust the amount of space around the image. Both take values in pixels; VSPACE controls the space above and below the image, HSPACE controls the space to the left and right of the image as in This is an eggplant. We intend to stay a good ways away from it, because we really don't like eggplant very much. QUIZ: Linking to external images. What does this do...? <A HREF="castle.jpg"><IMG SRC="sm-castle.jpg"></A> Castle at Sunrise Here is Castle at Sunrise Castle at Sunrise (25K JPEG file) Castle at Sunrise (49K GIF file) to accomplish the link to an external image.

Column Widths

The WIDTH attribute can be used on individual cells (<TH> or <TD>) to indicate the width of individual columns. Again, the values of the WIDTH attribute can be exact pixels or a percentage. A percentage will be taken as a percentage of the full table. Here is an example: <TABLE BORDER="1" WIDTH="100%"> <CAPTION>Vital Statistics</CAPTION> <TR> <TH WIDTH="40%">Name</TH> <TH WIDTH="20%">Height</TH> <TH WIDTH="20%">Weight</TH> <TH WIDTH="20%">Eye Color</TH> </TR> What happens if you have a table that spans 80 percent of the screen, and it includes the same header cell widths? Let's take a look.

Addresses

The address tag <ADDRESS> is used for signature-like entities on Web pages. Address tags usually go at the bottom of the Web page and are used to indicate who wrote the Web page, whom to contact for more information, the date, any copyright notices or other warnings, and anything else that seems appropriate. Addresses are often preceded with a rule line (<HR>), and the <BR> tag can be used to separate lines. Without an address or some other method of "signing" your Web pages, finding out whom wrote it, or who to contact for more information, becomes nearly impossible. Signing each of your pages by using the <ADDRESS> tag is an excellent way to make sure people can get in touch with you if the want to. Here is an example of the <ADDRESS> tag.

Cell Padding

The cell padding attribute defines the amount of space between the edges of the cells and the cell's content. By default, many browsers draw tables with a cell padding of 1 pixel. You can add more, or less, space by adding the CELLPADDING attribute to the <TABLE> element, with a value in pixels for the amount of cell padding you want. Here is our modified code and an example: <TABLE BORDER="10" WIDTH="100%" CELLPADDING="10"> A value of zero causes the cells to touch the edges of the cells content. When table appearance must be consistent across browsers, be sure to set cell padding and cell spacing attribute values. Cell spacing defines the space between the border of one cell and the border of the next. Cell padding defines the space between the border of the cell and the content within it. The assumed default for these attributes varies between browser releases. If you don't set cell spacing and cell padding values explicitly, you'll see a browser-to-browser variation. And if you're using tables from detailed layout, such as aligning pieces of a graphic, the unexpected appearance of little white lines between the table cells can be most disconcerting. Avoid this by setting cell padding and cell spacing values.

VOID

The default value. No sides of the external border are visible.

Linking to specific places within documents

The links presented thus far have been from one point in a page to another page. But what if you wanted to link to a specific place within the current page - for example, to the fourth major section down? You can do so in HTML by creating an anchor in the current page, or in a second page. The link you create in the first page will contain both the name of the file you are linking to and the name of that anchor. Then, when you follow the link with your browser, the browser will load the second page and then scroll down to the location of the anchor. (NOTE: Anchors are special places that you can link to inside documents. Links can then jump to those special places inside the page as opposed to just to the top of the page.)

<BODY> Tag

The remainder of your HTML page, including all the text and other content (links, pictures, and so on), is enclosed within the <BODY> container tags. In combination with the <HTML> and <HEAD> tags, your code looks like the following: <HTML> <HEAD> <TITLE> This is the Title.</TITLE> </HEAD> <BODY> .... </BODY> </HTML> You may notice here that each HTML tag is nested. That is, both <BODY> an </BODY> tags go inside both <HTML> tags; the same with both <HEAD> tags. All HTML container tags work this way, forming individual nested sections of text. You should be careful never to overlap tags like this: <HTML> <HEAD> <BODY> </HEAD> </BODY> </HTML> Whenever you close an HTML tag, make sure that you are closing the most recently opened tag. You'll learn more about closing tags as you go on and gain experience.

Setting Table Widths

The table in our example relied on the browser itself to decide how wide the table and column widths were going to be. There are many cases in which you want to have more control over how wide your tables and columns are, particularly if the defaults the browser comes up with are really strange. The WIDTH attribute of the <TABLE> tag element defines how wide a table (in pixels) or a percentage (such as 50 percent or 75 percent) of the current screen width, which can therefore change if the window is resized. If WIDTH is specified, the width of the columns within the table can be compressed or expanded to fit the required width. To make a table fit 100 percent screen width, you add the WIDTH attribute to the table, like this: <TABLE WIDTH="100%"> Here is a 50 percent example.

Spanning Multiple Rows or Columns

The tables we've created so far had one value per cell or had the occasional empty cell. You can also create cells that span multiple rows or columns within the table. To create a cell that spans multiple rows or columns, you add the ROWSPAN or COLSPAN attribute to the <TH> or <TD> elements, along with the number of rows and/or columns you want the cell to span. Following are examples: COLSPAN example ROWSPAN and COLSPAN example

Aligning Individual Elements

To align an individual heading or paragraph, use the ALIGN attribute to that HTML element. ALIGN has three values: LEFT, RIGHT, or CENTER. Here is an example of the ALIGN attribute aligning several headers. A slightly more flexible method of aligning text elements is to use the <DIV> tag. <DIV> stands for division. It includes several attributes, among which is ALIGN. <DIV> is used to surround a block of HTML tags of any kind, and it effects all the text inside the opening and closing <DIV>...</DIV> tags. Two advantages of using the DIV are: DIV needs to be used only once, rather that including ALIGN repeatedly in several different tags. DIV can be used to align anything (headings, paragraphs, quotes, images, tables, and so on); the ALIGN attribute is only available on a limited number of tags. This example shows how to use the DIV tag to align headers. Note that <DIV> is not itself a paragraph type. You still need regular element tags (<P>, <H1>, <UL>, <BLOCKQUOTE>, and so on) inside the <DIV>...</DIV> tags. You can also use the <CENTER>...</CENTER> tags to center a block of elements. The <CENTER> tag works identically to <DIV ALIGN=CENTER>, centering all the HTML content inside the opening and closing tags. It woks like this: <CENTER> <H1>Northridge Paints, Inc.</H1> <P>We don't just paint the town read.</P> </CENTER>

Table and Cell Color

To change a tables background color, or the background color of a row or cell, for that matter, you use the attribute BGCOLOR="" specifying the hexidecimal triplet value of the color between the quotation marks. Regarding inheritance, keep in mind that background color overrides the background color of its enclosing element. So, for example, a table background overrides the page background, a row background overrides the table's, and any cell colors override all other colors. If you nest tables inside cells, that nested table has the background color of the cell that encloses it. If you change a cells color, don't forget to change the color of the text inside it so it is readable. You can also add images to tables like this: <TD> <IMG SRC="check.gif"> </TD> Here is an example of changing cell background color and adding an image.

Changing the background color

To change the color of a page background, add the attribute BGCOLOR to the <BODY> tag. <BODY BGCOLOR="#FFFFFF"> <BODY BGCOLOR="#000000">

Links and the Link Tag

To create a link in HTML, you need two things: The name of the file (or the URL of the file) to which you want to link The text that will server as the "hot spot" - that is, the text that will be highlighted in the browser, which your readers can click on and follow the link Only the second part is actually visible on your page. When your readers select the text that points them to a link, the browser uses the first part as the place to which to "jump."

The Link Tag - <A>

To create a link in an HTML page you use the HTML link tag <A>...</A>. The <A> tag is often called the anchor tag, as it can also be used to create anchors for links. The most common use of the tag, however, is to create links to other pages. Like the simple tags you learned about in the Basics lesson, the <A> tag has some extra attributes. They look like this: <A NAME="Up" HREF="../menu.html" TITLE="The Twelve Caesars"> Of the extra attributes (in this example, NAME, HREF, and TITLE) the one you will use the most is the HREF attribute, which is short for "Hypertext REFerence." You use the HREF attribute to specify the name of the URL of the file where the link points to. The <A> tag is a container tag so it has a closing tag, </A>. All the text between the opening and closing tags will become the actual link on the screen. It will become the text your readers will click to jump to the place specified by the HREF attribute.

The <TABLE> Element

To create a table in HTML, you use the <TABLE>...</TABLE> element to enclose the table content. <TABLE> ...table caption (optional) and contents </TABLE> To demonstrate what the HTML code for a complete table looks like, here's an example of the code that created the first example above. Don't be concerned if you don't know what this all means right now. For now, notice that the table starts with a <TABLE> tag and its attributes, and ends with a </TABLE> tag: <TABLE BORDER=1> <CAPTION>Vital Statistics</CAPTION> <TR> <TH>Name</TH> <TH>Height</TH> <TH>Weight</TH> <TH>Eye Color</TH> </TR> <TR> <TD>Alison</TD> <TD>5'4"</TD> <TD>140</TD> <TD>Blue</TD> </TR> <TR> <TD>Tom</TD> <TD>6'0"</TD> <TD>165</TD> <TD>Hazel</TD> </TR> <TR> <TD>Susan</TD> <TD>5'1"</TD> <TD>97</TD> <TD>Brown</TD> </TR> </TABLE>

Should you use relative or absolute pathnames?

To link between your own pages, most of the time you should use relative pathnames instead of the absolute pathnames. Using absolute pathnames may seem easier for complicated links between lots of pages, but absolute pathnames are not portable. If you specify your links as absolute pathnames and you move your files else where on the disk, rename a directory, or move your files to a completely different web server, all your links will break, and you will have to edit all your HTML files laboriously and fix them all. Specifying relative pathnames enables you to move your pages around on your own system and to move them to other systems with little or no file modifications to fix the links. Maintaining HTML pages with relative pathnames is much easier, so the extra work of setting them up initially is often well worth the effort.

Stopping Text Wrapping

To stop wrapping text next to an image, use the break tag <BR> with the CLEAR attribute. With CLEAR you can break the line so that the next line of text begins after the end of the image. The CLEAR attribute can have one of three values: LEFT, RIGHT, and ALL Here is an Mystery Tulip Murderer Strikes Someone, or something, is killing the tulips of New South Haverford, Virginia. Residents of this small town are shocked and dismayed by the senseless vandalism that has struck their tiny town. New South Haverford is known for its extravagant displays of tulips in the springtime, and a good portion of its tourist trade relies on the people who come from as far as New Hampshire to see what has been estimated as up to two hundred thousand tulips that bloom in April and May. Or at least the tourists had been flocking to New South Haverford until last week, when over the course of three days the flower of each and every tulip in the town was neatly clipped off while the town slept. "It started at the south end of town," said Augustin Frouf, a retired ladder-maker who has personally planted over five hundred pink lily-flowered tulips. "They hit the houses up on Elm Street, and moved down into town from there. After the second night, we tried keeping guard. We tried bright lights, dogs, everything. There was always something that pulled us away, and by the time we got back, they were all gone."

Unordered Lists

Unordered Lists are surrounded by the <UL>...</UL> tags. UL stands for Unordered List. Unordered lists have the same structure as ordered lists, but rather than using and ordered numbering system, they display bulleted line items. Bulleted-list Example Customizing Unordered Lists with HTML 3.2: "disc" A disc; this is generally the default "square" Obviously an square instead of a disc. "circle" Should generate an unfilled circle on compliant browsers Unordered Type Example

The Frame attribute Values (Example)

VOID, ABOVE, BELOW, HSIDES, LHS, RHS, VSIDES, BOX, BORDER

Creating Links and Anchors

You create an anchor in nearly the same way you create a link: by using the <A> tag. If you wondered why the link tag uses an <A> instead of an <L>, now you know: <A> actually stands for Anchor. To create an anchor, substitute the HREF attribute with the NAME attribute. The name attribute takes a keyword that will be used to name the anchor. Here's an example: <A NAME="Part4">Part Four: Planting Corn</A> To create a link from one page to an anchor in another page, you add to your link a # sign and the keyword of the named anchor, like this: <A HREF="filename.html#Part4">Go to Part Four</a> This link tells the browser to load the page filename.html and then scroll down to the anchor name Part4. On the other hand, when you link within a page, you do not have another page name to refer to. Your HREF attribute points to #anchor_name, like this: <A HREF="#Part4">Go to Part Four</a>

The ALT Tag

What happens if someone is reading your page with a text-only browser, or what if they have images turned off in their browser? If you do not take this into consideration while designing your Web page, that portion of your audience might not be able to use your work. The ALT attribute in the <IMG> tag provides a text alternative to the blank [IMAGE]. The ALT attribute contains a string of text you want to use a substitute for the graphic: <IMG SRC="image.gif" ALT="a picture of my dog">

Wrapping Text Next to an image

What if you wanted to wrap multiple lines of text next to an image? You accomplish this the same way we learned to wrap text around tables; with the ALIGN=LEFT and ALIGN=RIGHT attribute. ALIGN=LEFT aligns the image to the left margin, and ALIGN=RIGHT aligns the image to the right margin, like Mystery Tulip Murderer Strikes Someone, or something, is killing the tulips of New South Haverford, Virginia. Residents of this small town are shocked and dismayed by the senseless vandalism that has struck their tiny town. New South Haverford is known for its extravagant displays of tulips in the springtime, and a good portion of its tourist trade relies on the people who come from as far as New Hampshire to see what has been estimated as up to two hundred thousand tulips that bloom in April and May. Or at least the tourists had been flocking to New South Haverford until last week, when over the course of three days the flower of each and every tulip in the town was neatly clipped off while the town slept. "It started at the south end of town," said Augustin Frouf, a retired ladder-maker who has personally planted over five hundred pink lily-flowered tulips. "They hit the houses up on Elm Street, and moved down into town from there. After the second night, we tried keeping guard. We tried bright lights, dogs, everything. There was always something that pulled us away, and by the time we got back, they were all gone." . You can put any HTML text (paragraphs, lists, headings, other images) after an aligned image.

Spot Color

When changing the text colors in a page by using attributes of the <BODY> tag, all of the text on the page is affected. Spot color is the ability to change the color of individual characters inside your page.

Cell Alignment

When you have your row and cells in place inside your table and the table properly aligned on the page, you can align the data within each cell for the best effect based on your table contents. Several options allow you to align the data within the cells both horizontally and vertically. Here is an example that explains better that an thousand words.

Logical versus Physical Styles

When you use HTML tags for paragraphs, headings, or lists, those tags affect that block of text as a whole. Character styles are tags that affect individual words or characters within other HTML entities and change the appearance of that text so it is somehow different from the surrounding text - making it bold or underline, for example.

Image Backgrounds

You can also add the BACKGROUND attribute to the <BODY> tag to change the background of a page, rather than simply a solid colored background: <BODY BACKGROUND="image.gif"> When you use an image for a background, that image is "tiled"; that is, the image is repeated in rows to fill the browser window. When you create an image for tiling, the goal is to make sure the pattern flows smoothly from one line to the next; to make the seams meet cleanly and not show. Image with seams. Example without seams. Internet explorer offers a twist on the tiled background design: a fixed tile pattern called a watermark. The idea here is that when you scroll a page, instead of everything on the page including the background scrolling by, only the page foreground (text and images) scrolls. The tiles in the background stay rooted in place. To create this effect, use the BGPROPERTIES=FIXED attribute to the BODY tag, like this: <BODY BACKGROUND="../images/image.gif" BGPROPERTIES="FIXED">

Changing Text and Link Colors

You can also add the following attributes to the <BODY> tag to change all of the text and link color of a page: <BODY BGCOLOR="#000000" TEXT="#FF9933" LINK="#FF66FF">

Grouping and Aligning Rows

You can group the rows of a table into three sections: table head, table body, and table foot. There are advantages for doing so when your pages are viewed in an HTML 4.0-compliant browser. First, this allows the body of the table to scroll independently of the head and foot of the table. Also, if your table contains several pages of rows, the table head and foot are printed at the top and bottom of each printed page. The table head, table body, and table foot sections are defined by the <THEAD...</THEAD>, <TBODY>...</TBODY>, and <TFOOT>...</TFOOT> tags.

The Dreaded <BLINK>

You won't find the <BLINK> tag listed in Netscape's official documentation of its attributes. The capability to cause text to blink was included in Netscape as a hidden, undocumented feature. The <BLINK>...</BLINK> tags causes text between them to have blinking effect. If you must use blink, use it sparingly.

<TITLE> Tag

Your <TITLE> tags always go inside the page header (the <HEAD> tags) and describe the contents of the page. The title indicates what the your Web page is about and is used to refer to that page in bookmark entries. Titles also appear in the title bar of graphical browsers such as Netscape and Microsoft Internet Explorer. Try to pick a title that is both short and descriptive of the content of the page. Although the title can be of any length, it may be cut off by the browser when it is displayed. The following are examples of good and bad title construction. Good Examples <TITLE>Poisonous Plants of North America</TITLE> <TITLE>Image Editing: A Tutorial</TITLE> <TITLE>Installing The Software: Opening the CD case</TITLE> <TITLE>James Stewart's Awesome Home Page</TITLE> Not-so-good Examples <TITLE>Part Two</TITLE> <TITLE>An Example</TITLE> <TITLE>Nigel Franklin Hobbes</TITLE> <TITLE>Minutes of the Second Meeting of the Fourth Conference of the Committee for the Preservation of English Roses, Day Four, After Lunch</TITLE>