HTML/xHTML

The core of the Web is a structured coding language. That langauge is the heart of what you will learn in this class.

All html tags are inclosed in greater-than and less-than signs (< and >). Every xHTML document has a head and body. The body houses all the information that is displayed in the browser window and the head of the document houses information for the browser software about the document itself (title and meta tags, for example).

HTML, or Hypertext Markup Language, is coding language used to create Web documents. A Web browser reads the HTML and translates it into the Web pages seen on a computer screen. Understanding HTML is the key to learning to create Web pages. XHTML is an acronym for "eXtensible HyperText Markup Language",  a reformulation of HTML 4.0 as an XML 1.0 application. XHTML provides the framework for future extensions of HTML and will likely to replace HTML in the future. Although we talk about HTML in this class, what we learn is mostly XHTML--it's just that "HTML" is easier to say (and spell).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of Document</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

</head>

<body bgcolor="#FFFFFF">
<h1>Hello</h1>
<hr / >
<p><span style="font-face:Trebuchet MS, Arial, Helvetica, sans-serif; font-size:12pt">This is a basic Web page. </span></p>
</body>
</html>

Critical things to remember about xhtml:

  • All the code inside < > should be lowercase.
  • All xhtml files are purely text files (ie text only) and should be saved as text only with a .htm or .html extension, no spaces and no capital letters or funky symbols such as @, $, &, etc..
  • Every tag that you open has to be closed.
  • Be hyper-aware of what you are saving, where you are saving it, and when.
  • When you are writing code for the Web, you will usually have three applications open at one time: an an application to edit the xhtml, and a couple of browsers.

Why the Web is not print

A Website or page is never really complete, it is a living, evolving document and should be treated as such

A Website will never look the same to everyone, due to Web design variables. Be aware that these variables (covered throughout the course) make it almost impossible to please everyone. As a good Web coder, however, your job is to make the work you are coding look the best to the majority of your viewing audience.

Viewing Web files

You can view Web files locally by opening them in a Web browser. You can only view Web files over the Internet if you upload them to a Web server somewhere.

The HTML code for any Web page is easy to see. Select the "view" command on the browser's menu bar and choose "page source".

Viewing the source in Internet Explorer

Viewing the source in Mozilla/Netscape

Or, right-click the mouse over any text on the Web page, and choose "view source" from the pop-up menu. (Macintosh users would, of course, apple-click to get the pop-up menu.)

 

 

 

 

printer-friendly page

Writing HTML

The easiest way to write HTML is to use a basic text editor. Text editors are simple programs that allow one to write and edit--guess what--text. Basic text editors that work well for writing HTML include Notepad or Wordpad (Windows), Pico (Unix and MacOS X; a Windows version exists), SimpleText or BBedit Lite (Mac), Gedit and Gnotepad Plus (Linux). There are also HTML editors, which are text editors with additional functionality built in for adding HTML tags to text. These can be extremely powerful tools. Commercial examples are Macromedia HomeSite (Windows) and BBEdit (MacOS). Several HTML editors, such as Arachnophilia, http://www.arachnoid.com/arachnophilia/, are among those amazing gifts from the Internet: a completely free Web editing tool. (In addition to a Windows version, there's a Java version that'll run on other platforms.) Just don't get in the habit of using it for this class; I require hand-coded pages unless I say otherwise.

Warning: By far the most powerful of the free Windows HTML editors is First Page 2000, from http://www.evrsoft.com/. It's an incredibly full-featured tool, it's free, and the download comes with a couple hundred pre-written javascripts included. However, therein lies a problem: among these javascripts is one that an author can include in an HTML page to create an unending succession of pop-up windows until the user goes stark raving mad--and the mere presence of that script within the software will set off all sorts of antivirus alerts if you download and install First Page 2000 onto a computer that has antivirus software running on it.

HTML Kit is a slightly less powerful but more user-friendly piece of free Windows software, available at http://www.chami.com/html-kit/. Its autocomplete tag generation feature makes it popular among people who are prone to leaving required attributes off html tags, and it's comparatively small size (under 4 MB) make it an acceptable download even by dial-up.

Many basic text editors and HTML editors can be found for free or cheap at Shareware.com, http://www.shareware.com or Tucows, http://www.tucows.com/.

Microsoft Word, Word Perfect, Open Office, and other word processors are an awful choice for creating HTML documents. Word processing programs do horrible things to HTML code. In fact, in Microsoft Word, the industry-standard word processor, the "save as HTML" feature is so infamous that Macromedia Dreamweaver, arguably the industry-standard Website authoring tool, has a top-level menu pick named "Clean up Word HTML". Linux programmers, never ones to mince words, created a utility called "De-moronizer", to do the same thing.

There are many different software programs that allow one to create Web pages without knowing HTML. These software programs are called HTML editors or WYSIWYG (pronounced wis cee wig) which stands for What You See Is What You Get. Popular commercial WYSIWYGs include Macromedia Dreamweaver, Adobe GoLive, and Microsoft Frontpage. Among the free ones, it's hard to go wrong with the Mozilla suite (http://www.mozilla.org/). Mozilla is the open-source browser previously mentioned in this class. (The browser as a stand-alone product is called Firefox, whereas the Mozilla Suite contains the browser, an impressive email client (for folks interested in switching from the more virus-prone Outlook or Outlook Express), and a quite passable WYSIWYG HTML editor.)

Veteran Web Designers often use a WYSIWYG to assist them in creating large or complex Web sites. When you're a veteran Web Designer creating a complex site, you may choose to do that, too. Not for this class, though--stick with basic HTML and a text editor. (That's a requirement, not a suggestion.)

Using a WYSIWYG is like riding a bike. It will get you there faster than walking, but eventually the bike is going to come to a stop and you are going to have to know how to walk. (Analogy stolen with permission from SSCC Librarian Pamela Wilkins.)

If you don't have a basic knowledge of HTML, you can only do what the WYSIWYG lets you do. Worse, when you need to fix something, the WYSIWYG might not be able to help. If you have a basic understanding of HTML, you should be able to figure out many problems you might encounter with your Web pages.

Besides, most WYSIWYG editors are really WYSINRWYG (pronounced wis singer wig), which stands for What You See Is Not Really What You Get). There's no substitute for testing on lots of browsers on lots of different computers with different operating systems, screen resolutions, etc

The HTML Tag

The HTML tag is the essential element in HTML. Every HTML tag is made up of < (an opening angle-bracket), > (a closing angle-bracket), and a tag name. Many tags also contain an attribute and its value. (Don't trip over the "attribute-value" language just now, we'll cover it in the next paragraph and the next page.) The HTML tags give the browser instructions for what a Web page is supposed to look like--the appearance and function of the content (text and graphics).

Generally, the tag name is an abbreviation for the tag's function. For example, the tag to make a paragraph is:

<p> text </p>

Attributes are added within a tag to extend or modify the tag's function. For example, <span> is a tag that sets aside a piece of text so you can make changes to it. The attribute style can be added to change the size of the font:

<span style ="font-size:12px">text</span>

Most attributes are equal to a value, which is the part that follows the equal sign. In the example above, the tag is <span>, the attribute is style and the value is "font-size:12px". The value establishes to what degree the attribute is represented. The value should always be enclosed in quotation marks. (This is optional in the current HTML specifications, but it's required for more advanced things like Extensible Markup Language (XML). Might as well get in the habit of doing it right now.) A single tag can have multiple attributes, but each attribute can only be repeated once:

<body text ="black" bgcolor="blue">text</body>.

<tagname attribute ="value">

Tags, Attributes and Values

One of the hardest things to keep straight is the difference between tags, attributes, and values. The tag is the name of the item. An item can have many attributes (a set of characteristics), and each characteristic has a value (the details specific to it).

Think of it as something other than HTML and it might make more sense:

Tag

Attribute

Value

Cat

hair

long

 

hair-color

black

 

attitude

bad


< cat hair="long" hair-color="black" attitude="bad">


CTN160

time

night


< CTN160 time="night">


Vehicle

make

Honda

 

model

Civic

 

color

white


< Vehicle make="Honda" model="Civic" color="white">

Container Tags VS Stand Alone Tags

Most HTML tags are container tags: they have a start tag and an end tag. The content (the text that is being affected by the HTML code) goes in between the two tags. In almost all cases, the end tag will be the tag name preceded by a / forward-slash. Think of the / as an off-switch for your tag. Attributes and values are not included in the end tag.

<tagname attribute ="value">content here </tagname>

There are several tags that do not have end tags. These tags are called stand-alone tags. Generally, they do not control text; they insert something into your document. For example, the tags for a horizontal rule <hr />, image <img /> or line break <br /> all insert something into a document and do not control text. Therefore, although these tags can have attributes and values it is not necessary within HTML to close them with an end tag. However, XML (extensible markup language), which is becoming increasingly commonplace, does require closing the standalone tag via a space and a forward-slash: <hr />, <br />, <img />, etc. Including this within HTML will do no harm, though some HTML validation programs (and some teachers) might mistakenly think it's an error. Web browsers will interpret it correctly.

Remember: HTML uses forward-slashes, NOT backslashes. This ain't DOS class, folks.

 

 

 

 

 

 

 

**************************************************

Formatting text using xHTML

If you have ever used word-processing software, selected a string of text and then underlined it or made it bold, you have formatted text. The options available to you in xHTML are much like the ones you would find in any standard word-processing software. By using the appropriate tags and attributes, you can control the size, font , color and style of text in your Web pages.

Headings are displayed in bold text with line breaks and an extra space above and below the text. The size of the heading is established by the numbers 1-6. <h1> is the highest priority (hence the largest) header, <h6> is the lowest priority and is usually smaller than normal text. It is easy to mistake the number associated with headers as attributes. This is incorrect. The numbers associated with headers are actually part of the tag name. Because of this, they must be included in the closing tag.

<h1>This is &gt;h1&lt;</h1>

This is <h1>

<h2>This is &gt;h2&lt;</h2>

This is <h2>

<h3>This is &gt;h3&lt;</h3>

This is <h3>

<h4>This is &gt;h4&lt;</h4>

This is <h4>

<h5>This is &gt;h5&lt;</h5>

This is <h5>

<h6>This is &gt;h6&lt;</h6>

This is <h6>

Knowldege bonus: notice that the secret ASCII code for angle-brackets (&lt; for >, &gt; for <) had to be used here, to keep the browser from seeing <h1> and trying to interpret it rather than just showing you the characters on the screen.

Headings can also be used with the align attribute to control their alignment a Web page. The align attribute can be set to align headings either left, right or center.

<h2 align="right">Hello</h2>

Hello

The font, basically the text characters in a document, can be controlled by using the style attribute of the <span> tag.

<span style ="color:#colorvalue">

The color attribute allows control the color of the font. The value for this attribute will be a color value.

<span style ="font-family:typeface">

The face attribute allows control of the face or style of the font. One can specify any font they want, but it will only be displayed if that font is actually on the user's machine. More than one face can be specified, multiple faces are separated by a comma, the browser will display the first one available.

On a Windows computer, the default sans-serif font is "Arial" and the default serif font is "Times New Roman". On the Macintosh, the default sans-serif font is "Helvetica" and the default serif font is "Times Roman".

If, for example, you wanted the user to see a sans-serif font, you could use this container:

<span style ="font-family:Arial, Helvetica, sans-serif">This text uses a sans-serif font.</span>

A Windows computer would display the text using the Arial font, a Mac would display it using the Helvetica font, and a computer that had neither of those fonts but had a browser inclined to honor the tag would display using the system default sans-serif font, whatever that may be.

<span style="font-size:value">

Size can be controlled using point size (12pt), pixel size (12px), or the user's default type settings (1em = default, 1.5 em would be half again as big, etc.) EM is cooler, but pt and px are better-supported across browsers. Px seems to give the most consistent appearance.

<span style ="color:blue; font-family:Georgia; font-size:24pt">Hello Hello Hello</span>

Hello Hello Hello


You can assign a style to an H1 to change its looks, too. This gives you additional control over how the page looks, but still takes advantage of assigning important text to heading-level instead of paragraph-level. It's important to keep headings inside heading tags, even if you're using CSS to change how the headings look. Why is that important? Some search engines give greater emphasis to the text that's in an <h1> heading, as does text-reader software used by visually impaired people.

<h1>An H1 without additional style </h1>

Hello

<h1 style ="color:blue; font-family:Georgia; font-size:30pt">An H1 with additional style</span>

An H1 with additional style

Use <span> to change the looks of text within part of one paragraph or heading; use <div> to change multiple paragraphs or headings.

Use span for part of a paragraph

<p><span style="font-size:30pt">H</span>ere is a paragraph with a span to change part of it.</p>

Here is a paragraph with a span to change part of it.

Use div for multiple paragraphs

<div style="color: navy">
   <p>Here are lots of paragraphs in a row.</p>
   <p>And they're all navy-blue.</p>
   <p>Except for the <span style="color:green">green</span> word.</p>
   <p>How cool is that?</p>
</div>

Here are lots of paragraphs in a row.

And they're all navy-blue.

Except for the green word.

How cool is that?


There is an older method of changing the appearance of text, the <FONT> tag. It is considerably more limited than what we're learning to do. We don't use the <FONT> tag in this class, we use <span style> and other CSS options. The FONT tag has been deprecated, which means among other things it's going to be eliminated from the next set of HTML specifications.

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) are newer than HTML, and can be used in conjunction with it to make dramatic changes in how Web pages look.

There's a good reference on CSS at http://www.webreference.com/authoring/style/sheets/

Style sheets are composed of CSS rules. A rule consists of two main parts: a selector ('h1') and declaration ('color: blue'). The declaration has two parts, property ('color') and value ('blue').
h1 { color : blue }
Selector { property : value }

This is not too different than HTML, in which we have tags, attributes, and values.

 

HTML

 

 

TAG

 

ATTRIBUTE

=

VALUE

 

< 

img

 

align

=

"center"

 

 

 

 

src

=

"photo.jpg"

> 

 

 

 

 

CSS

 

 

SELECTOR

 

DECLARATION

 

 

 

 

PROPERTY

:

VALUE

 

 

h1

{

color

:

blue

;

 

 

 

font-size

:

18pt

}

You can group style rules with the semicolon. Place the entire declaration between curly-brackets.

There are three ways to apply CSS: locally (within part of a page, or inline), globally (across an entire page), or linked (across multiple pages, or site-wide). We've already been using CSS locally to format text.

Local (inline) CSS

(Specific to one tag in a page, uses the STYLE attribute)

You can include a style attribute in div and span elements. The block-level div element is used to enclose a division (chapter, section, etc.) of a document that you want to give a distinctive style. The span element is generally used within paragraphs. (Remember, block-level items, like <p> and <h1>, start and stop on a new line.)

<p><span style ="font-size: 24pt">T</span>his is a drop cap using the STYLE attribute to the SPAN tag.</p>

This is a drop cap using the STYLE attribute to the SPAN tag.


The <div> tag vs. the <span> tag

SPAN is small. Use it only to select a small chunk of text like a letter, word, phrase, or sentences:

  • inside a <p></p> container,
  • or a <li></li> container (these are list items; we'll cover them in a bit),
  • or a heading (h1 through h6) container.

For anything bigger than that (such as more than one paragraph, an entire list, or a whole page), use <div>.

The <div></div> tag by itself doesn't do much of anything other than identify a block of a Web page. (A block is an area that begins and ends on a separate line. The <p></p> tags are the most common example of a block tag.) However, you can encase multiple tags (including several <p></p>'s) within one <div></div> and assign an attribute and value. For example:

<p align="center">Here is some text</p>
<p align="center">And more text</p>
<p align="center">And still more</p>

could also be written:

<div align="center">
<p>Here is some text</p>
<p>And more text</p>
<p>And still more</p>
</div>

<div> is especially handy when you're using Cascading Style Sheets. You can use <div> to assign font face, color, size, etc. to a whole chunk of the document, just once, and not have to mess with repeating the same tag throughout a document the old-fashioned way people who still use the FONT tag would have to (see below):

instead of typing all this:

<P><FONT FACE="Arial">One</FONT></P>
<P><FONT FACE="Arial">Two</FONT></P>
<P><FONT FACE="Arial">Three</FONT></P>
<P><FONT FACE="Arial">Four</FONT></P>

use DIV:

<div style ="font-family:Arial">
    <p>One</p>
   <p>Two</p>
   <p>Three</p>
   <p>Four</p>
</div>


This weakness is part of why the FONT tag is being removed from the HTML specifications, and why we don't use it in this class.

However, using these inline styles in spans or divs still means you have to re-type them every time you want them repeated. Because CSS offers much better ways to write a style once and apply it many times, the only time you should ever use an inline style is for a one-time event that you don't intend to do again on your Website.

Otherwise, we use global or linked style sheets. Read on...

Global CSS

(Specific to an entire page, uses the STYLE element inside the HEAD)

It's no fun at all to have to repeat the same style over and over, in every paragraph and heading, just to get the page to look the way you want.

You can use a short piece of CSS inside the <head> container to specify how you want the text to look on an entire Web page.

<head>
<title>Style Element Example - with alternative fonts</title>
<style type ="text/css">
<!--

body { background: white; background-image: url(mybackground.jpg) }
h1 { color: blue; font-size: 18pt; font-family: Arial, Helvetica, sans-serif; font-weight: bold }
p { color: green;
font-size: 12pt;
font-family: Geneva, Arial, Helvetica, sans-serif }
a { text-decoration: none; color: red }
-->
</style>
</head>

Notice that html comment tag <!-- and --> that's nested immediately inside the <style> container. What's that for? Older browsers that can't interpret the style tag would just ignore it and print the code inside the tag directly onto the page. Those older browsers will honor the HTML comment tag, though, so if the browser cannot understand the <style> container it'll understand the comment container and won't ouput raw code onto the page. Newer browsers see that opening <style> tag, and know to interpret everything inside the <style> container as CSS, not HTML. Those browsers will ignore the HTML comment tag nested inside the <style> container, but will correctly parse the CSS. Clever, eh?

This example style sheet declaration in the <head> of the document sets all h1's to blue and all paragraphs to green. It sets font size and family. The power of global style sheets? One change to the CSS code in the <style> container, and everything in the page changes.

Of course, the global style is resident in every page, so that's one change per page. Wouldn't it be easier to do one change per SITE? Read on.

 

Linked CSS

(Used across multiple pages, uses the LINK element)

The real power of style sheets comes when you link to an external file. The file contains the same rules you'd normally place in the STYLE block at the top of a page.

body { background: white; color: brown } /* "color" here controls the color of the text on the page */
h1 { font-size: 18pt; font-family: Arial, Helvetica, sans-serif; font-weight: bold }
p { font: 12pt Arial; text-indent: 0.5in }
p.initial:first-letter { font-size: 200%; } /* Use <p class="initial">...</p> to get this to work */
a:link { color: red } /* unvisited links */
a:visited { color: blue } /* visited links */
a:active { color: yellow } /* active links */

Copy these rules into a new file and name it style.css. To link a page to this style sheet just place the following line in the <head> element of the HTML page. You should see some significant changes when you reload the page in a browser.

<head>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

In the LINK element the REL attribute defines the type of link. The rel="stylesheet" is the key, it links the current page to the referenced file. The beauty of linked style sheets is that you can change the look of thousands of pages by changing one file. This is a big time saver for intranet or large site webmasters.

 

Making Space

Adding space on a page

Space is more than just the Final Frontier. White space on a Web page helps set apart images and headers and makes text more readable. The spacing tags in HTML can also be used to align various elements on a page to the left, right or center of the screen.

Paragraphs and line breaks help to control the spacing in your Web document and operate much like the carriage return on a typewriter or the "return" or "enter" key on a keyboard.

The <p>, or paragraph, container tag <p> ...</p>, puts text into a container so you can assign styles or make use of the of the align attribute (align=center, left or right). A <p>...</p> container will place a space above and below the text.

<p align ="right">HTML is so much fun I'm going to devote my life to it.</p>

HTML is so much fun I'm going to devote my life to it.

<p align="left">Well, not really; I just said that so I'd get a good grade in the class.</p>

Well, not really; I just said that so I'd get a good grade in the class.

<p align="center">When <i>what</i> freezes over?</p>

When what freezes over?

A line break <br /> will start text on the following line. Unlike the <p> tag it will not add any additional space and can be used multiple times. Because the <br /> tag only inserts a break and does not format text, it is a stand-alone tag and does not need to be closed.

Two useful tags for positioning text on the page are the <div> tag and the <blockquote> tag. Both are block-level items, which means they can cover multiple paragraphs or headings, but cannot be used nested inside a <p> or h1-h6 container.

  • The <div>, or page division, tag allows you to move or align text, graphics or tables on a page when combined with the align attribute and its values (left, right or center). It also sets aside a block of the page so you can assign some CSS to it.
  • Text enclosed in <blockquote> tags will be indented slightly from the margins and displayed with spaces above and below, much like a paragraph. Nesting multiple <blockquote> tags increases the indent.

<div align ="center">I am learning many different ways to format text in HTML.</div>

I am learning many different ways to format text in HTML.

<blockquote>I am getting a headache from all this.</blockquote>

I am getting a headache from all this.

<blockquote><blockquote> <blockquote>I am getting a headache from all this.</blockquote> </blockquote> </blockquote>

I am not only getting a headache from all this, I'm feeling claustrophobic.

Although not technically a spacing tag, the <hr /> (horizontal rule) tag can be used to divide Web pages or set off titles and headers. An <hr /> will generally be displayed as a shaded rule the width of the page and will always be on its own line. Attributes can be used to control the thickness, width, shading and alignment (although the results differ widely depending on the user's browser). Because the <hr /> tag only inserts an element and does not format text, it is a stand-alone tag and does not need a closing tag.

<hr align ="right" />
Can be aligned left, right or center.


<hr size ="20" />
A pixel value that controls thickness


<hr width ="50%" />
can be either pixel or percentage


<hr noshade />
Creates a solid line, no value.


Adding space in your code

Since a browser will ignore multiple spaces within the html code, you can use indentations, blank lines, etc. to make your code easier to read.

Good

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Title of Document</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

</head>

<body bgcolor="#FFFFFF">

<h1>Hello</h1>

<hr / >

<p><span style="font-face:Trebuchet MS, Arial, Helvetica, sans-serif; font-size:12pt">This is a basic Web page. </span></p>

</body>

</html>

Not so good

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>Title of Document</title><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /></head><body bgcolor="#FFFFFF"> <h1>Hello</h1> <hr / > <p><span style="font-face:Trebuchet MS, Arial, Helvetica, sans-serif; font-size:12pt">This is a basic Web page. </span></p> </body> </html>

Both these examples will show up exactly the same in a browser. However, the top one will be much easier for you to maintain (and for me to grade).

Programming instructors are pretty rigorous about demanding that you indent your code. For hand-typed html in Notepad, though, all that indenting would be a nightmare, especially when you edit the code and change the length of a line, thus requiring you to un-indent and re-indent everything to make it line up. That could quickly lead to insanity on your part, particularly if you've got some complex html going on.

For this class, I'm not requiring strict and consistent indentation in the code; I just ask that you do what you can, within reason, to make your html code easy to read. Web editing software will automatically handle the indentations for you, so in future classes when you move on to working with that software, the indenting issue becomes considerably easier.

 

Unix/Linux

Despite the best wishes of our friends at Microsoft, most Web servers use the Unix operating system, or its cousin, Linux. It's wise (and financially rewarding) to know a few basic Unix commands. There's a good list at http://www.utexas.edu/learn/pub/unix.html. Some Linux/Unix knowledge can considerably enhance your starting salary.

Want a chance to practice some of these on either a Unix or Linux computer?

  • On the South Seattle Community College campus, we have a couple of labs with Linux computers; TC119 and TC127. Contact the Tech Ed department at 764.5365 for open hours.
  • Would you rather try this on your Windows computer, from the comfort of your own home, without the challenge of actually installing a new operating system on your computer? Try an emulator program that will run on a Windows PC. One such free program for Windows computers is Cygwin, http://sources.redhat.com/cygwin/.
  • Way more fun than Cygwin, which only gets you a command-prompt, is a full-fledged Linux operating system that runs from a CD. Burn a CD of Slax Linux, http://slax.linux-live.org/, and just turn your computer on with the CD in the drive and you're running a completely different OS on your computer, with no messy partitioning or formatting or anything else that'll upset Windows. (Of course, you'll need to save any work on a floppy or thumb drive; since you're not running the machine off its hard drive you can't save anything to it.)
  • Got a Mac with MacOS X? You're in luck, Mac OS X already has access to a Unix shell via the Terminal. In fact, Mac OS X is Linux/Unix, with the Apple user interface running on top of it in much the same way Windows runs on DOS. (Yes, I know that Windows 2000 and XP don't run on DOS anymore, at least not exactly--opinions vary.)

So, if you're feeling ambitious, try to pick up a little Linux knowledge. It'll be good for you.

Don't get caught doing this! A cautionary tale from Userfriendly.org.

Making Lists

Lists can help you organize and present information in HTML documents. Various list tags and their attributes allow one to choose from several different types of lists in HTML. There are three types of list, each with their own tag:

  • ordered (numbered) list <ol>...</ol>,
  • unordered (bulleted) list <ul>...</ul>, and
  • definition list<dl>...</dl>.

Each item in a list is separated by a line break and has a special tag to denote it as a list item. Lists may be nested within a list, provided they are closed properly.

Ordered List

<ol>
<li>cat </li>
<li>dog</li>
<li>bird</li>
</ol>

1.     cat

2.     dog

3.     bird

In a numbered list, the attribute START may be used to start listing with a certain number. The attribute TYPE may be used to specify A, a, I, i indicating upper and lowercase letter and roman numerals.

Unordered List

<ul>
<li>cat </li>
<li>dog</li>
<li type="square">bird</li>
</ul>

  • cat
  • dog
  • bird

 

In a bulleted list, the attribute TYPE may be used to specify disc, circle and square (to display different styles of bullets). TYPE can also be used within the individual <li> tags to change the shape of a particular bullet.

Definition List

<dl>
<dt>cat</dt>
<dd>a purring house pet</dd>
<dt>dog</dt>
<dd>Man's best friend</dd>
<dt>bird</dt>
<dd>a flying creature</dd>
</dl>

cat

a purring house pet

dog

Man's best friend

bird

a flying creature

In a list of terms and definitions <dt> is used to denote definition term, and <dd> is used to denote definition.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Creating Links

One of the really big deals about HTML is its ability to link relative information and pages together using hyperlinks. The tag for linking things in a Web page is <a>...</a> The <a> tag defines an anchor or place to be linked within a document. The <a>.....</a>  tag is almost never seen without one or more of its accompanying attributes. On a Web page, a link is usually displayed as underlined text and will take a user to a preset location when clicked.

The most commonly used attribute for an anchor tag is HREF, used to specify the URL to be linked to. The text enclosed between the opening <a> and closing </a> tags will be the clickable text.

Linking to a Local file

A local file, or relative URL, is relative to another document. A local file appears as the file name and extension, and can also include a directory.
<a href="filename.html">Name of Link</a> (link to a file in the same directory as the page you're on)
<a href="ctn160/filename.html">Name of Link</a>  (link to a file in a subdirectory of the one you're currently in)
<a href="../filename.html">Name of Link</a>  (link to a directory above the one you're currently in
<a href="../college/filename.html">Name of Link</a>  (link goes one level above the directory you're currently in, then goes to a file inside another directory)

If you're visually inclined, keep reading, there are pictures below that show the same relationships.

Linking to an External File

An external file, or absolute URL, is a file existing on a completely different server. The entire name and address for the URL must be used, including the scheme, http:// .
<a href="http://www.whatever.com/">Name of Link</a> 

In long Web pages, it can be useful to link to sections within the Web page. This can be achieved by naming fragments of the document and linking to them. Linking to a section of the document is a two-step process:

  1. First, name the section of the document where you want the user to land after they click on the hyperlink.
  2. Now, link to the document section using the named value preceded by the # sign as the destination URL.

Naming a section

Linking to a named section


<a name ="name"></a>

The value "name" refers to whatever name you wish to give the section. The name should be one word and lower case, and should never contain spaces or symbols. The section enclosed in the tag will be the point of text that is to be linked to. It's like putting a room number outside your door. If you're sent to room 319 and there aren't numbers on the doors, you'll not find your way.

This tag is invisible in the browser window and is only used to give the hyperlink an "anchor point" so the browser knows where to go when the link is followed.

<a href="#name">Name of Section</a>

The actual location to link to is always preceded by a # sign and should be the exact same as the value for the <a name >. The text enclosed in the tag will be the actual clickable link. This method of linking is commonly used to provide a link back to the top of a document or for internal navigation.

Example:

<p><a name="partone"></a>This is part one. It contains lots of stuff.</p>

<p>Here's part two. Whoopee.</p>

<p>Here's part three. More excitement to follow.</p>

<p>Here's a commercial for Husky Deli ice cream.</p>

<p><a href="#partone">Go back to part one.</a></p>

 

 

 

 

 

The mailto: value

The href attribute of the <a> tag (usually used to initiate another Web interaction, as in
<a href ="http://www.opaldata.com/the_end/">click this to go to the End of the Internet</a>)
not only leads to files or Websites, but can also (if the browser allows it) launch the browser's email program if you use the mailto: value, as in

<a href ="mailto:aboss@cascadia.ctc.edu">email aboss@cascadia.ctc.edu</a>

Bear in mind, if the computer is a shared one it's likely the browser has no email program--the ones in the library don't--then clicking this tag won't let the user send email. That's why it's good to also include your email address in the hotlinked text. Of course, putting your email anywhere on the page sends a big invitation to spammers, so be prepared. It's wise to set up a disposable, free email account (gmail, hotmail, yahoo, etc.) to publicize on the Web, rather than opening up your personal email to every spam king on the planet.

 

 

Terms and concepts to know

HTML
XHTML
Tag
attribute
value
nesting
container
stand alone 
<HEAD>
<BODY>
<TITLE>
WYSIWYG
BGCOLOR
LINK
ALINK
VLINK

BACKGROUND
W3C
CSS
< P>
<LI>
<UL>
<OL>
<STYLE>
<HR>
<BR>
<A>
<DD>
<DT>
<DL>
Linking
Naming a Fragment

Browsing Exercises: Go to http://www.yahoo.com or another popular destination on the WWW. Using the view menu on your browser display the source code for this Web page. Locate the <HTML>, <HEAD>, <TITLE> and <BODY> tags for this page.

Some hands-on work:

Create an html page about yourself that includes the following elements within the HTML document itself.

1.   Text that represents a headline (ie larger text with a specific font)

2.   Text that represents a subhead

3.   Three paragraphs of content that use italics, bold and underlined text

4.   Specific fonts for use in the headline and body of the document

5.   One horizontal rule

6.   Deliberate alignment with all paragraphs and headlines

7.   Deliberate color and font choices for the text and the background of the document (these should represent your personality in some way)

Save this page, you'll be doing more work on it later, then uploading it and sending me the URL.


Readings

Web Monkey Guides : Intro to HTML
http://hotwired.lycos.com/webmonkey/96/53/
index0a.html?tw=authoring

About.com: How to Build a Simple Web Page
http://webdesign.about.com/compute/webdesign/library/
howto/htbuildapage.htm

Webpage Design for Designers: Typography
http://www.wpdfd.com/wpdtypo.htm

Setting Type Online Some Notes on Typographic Design for the Web
http://www.ddj.com/documents/s=2682/nam1012432091/

Look Ma! 15 Fonts
http://hotwired.lycos.com/webmonkey/html/96/46/index2a.html

So, What Size and Type of Font Should I Use on My Website?
http://psychology.wichita.edu/surl/usabilitynews/2S/font.htm


More information

HTML

Bare Bones Guide to HTML 

HTML Compendium

CSS

CSS Reference
http://builder.com.com/5100-31-5071268.html

Cascading Style Sheets
http://www.webreference.com/authoring/style/sheets/

For those who have way too much time on their hands and want more information and practice, here's a resource listed in the February 1, 2002 Internet Scout Report:

Advanced CSS Layouts: Step by Step
http://www.webreference.com/authoring/style/sheets/layout/advanced/
Most Web sites are designed with HTML tables, which can be an arduous task. Making sites that are accessible and standards-compliant requires a separation of markup and content, and CSS is the best way to accomplish this. This Web page by Rogelio Vizcaino Lizaola and Andy King offers a step-by-step CSS layout tutorial on how to create WebReference table-like layouts (that behave well with small window sizes and large fonts), while avoiding some of the bugs and problems discovered in other implementations. Target browsers include all of the generation five and greater browsers on both Windows and Macintosh platforms

 

Copyright Internet Scout Project, 1994-2002. http://scout.cs.wisc.edu/

Color

Color grid: This page, from Web color expert Lynda Weinman, has a chart that shows all the Web-safe colors and their hex values, so you can pick some colors to experiment with.


Unix

Cygwin, Unix emulator for Windows PCs,
http://sources.redhat.com/cygwin/

Unix commands: basic list for beginners:
http://www.utexas.edu/learn/pub/unix.html

User Friendly, the comic strip:
http://www.userfriendly.org/
The User Friendly Productivity Virus occurs when people read the Cartoon Archive for the first time. Individuals, MIS departments and entire offices have ceased productivity for an entire day while the UF strips are read from day one.

http://www.linux-unix-info.com
This free online tutorial will teach you about the Linux file system useful commands, text editors, data manipulation, shell programming, accesing DOS and Windows Files from Linux and much more.


Shareware

Tucows,
http://www.tucows.com/

Shareware.com,
http://www.shareware.com/


Well, it seemed like a good idea at the time...

Netscape thought it would be cool if text could blink, so they invented the <blink></blink> tag.

Thankfully, neither of these made it into HTML 4 specs.


Miscellaneous stuff

AdAware (see if your software is collecting information on you and sending it to advertisers),
http://www.lavasoftusa.com

All Your Base Are Belong To Us: take one old video game with a hilariously badly translated introduction, add equal parts talent and mischief, and voila!--conspiracy!