Ch6

Lesson1: Introducing XHTML and HTML

Introducing HTML and XHTML

What are HTML and XHTML? HTML is HyperText Markup Language, developed by Propellerhead scientists in the early
1990s so that they could share scientific papers over the Internet. It was based on SGML, Standard Generalized Markup
Language, because SGML wasdesigned to deal with documents and that seemed like the thing to do with the time. As
the use of HTML spread and people started using its hyperlinks feature a lot, the World Wide Web was born. Then things
got ugly.

As the World Wide Web grew and grew, it became a more popular medium and a less scientific medium and HTML's
limitations became a barrier to the web's development. People didn't want just words and pictures; they wanted
presentation and they got it and HTML was extended to meet that need. As the saying goes, check all the parks in all
your cities, you'll find no statues of any committees. As the web grew, the market demanded more presentation-
oriented features in HTML and the scientists on the HTML committees, being scientists and not graphic artists, dragged
their feet and the market said, okay, then we'll do it ourselves.

Features were born of the necessity and they were chaotic and they were useful and they were chaotic. Over time, the
Standards Committees caught up with the market and we nowhave HTML 4 and it's mostly functional and it mostly does
what it needs to do and it's still chaotic. HTML 4 works and it works well and it has serious flaws that most people will
never notice. What makes them serious is it takes a lot of computing power to take the averageHTML page and render it
in a coherent and consistent manner. That's what XHTML is for.

XHTML stands for eXtensible HyperText Markup Language. Don't let the name fool you. It's not actually extensible. The X
is there because it's based upon XML, eXtensible Markup Language. So it's technically an extension of XML, but XHTML
was not itself extensible. Think of it as HTML but with stricter rules. The strictness of XHTML is good for computers. It
makes it easier to build a program that reads the markup and renders the page or reads it to blind people or something
else.

Of course, the other side of the coin is that no one can force the whole Internet to stop using messy old HTML. So it's
really useless, right? Well, perhaps that's true, but it's really not that much harder to write strict XHTML than it is to
write sloppy HTML. So, I'm going to do my part and I'm going to show you how all of this works. Why should you use
XHTML instead of HTML? HTML is very forgiving of inconsistent and even erroneous documents. XHTML requires the
documents follow a specific and well-defined structure.

Stricter rules means less variance among browsers and more consistent results. It means your web pages will behave
more consistently on new devices and it makes it easier for developers to create wonderful new applications that
will ultimately enhance all of our lives.

Understanding versions of HTML and XHTML

There are a number of versions of HTML and XHTML available. Let's take a look at them. HTML 4.01 is the current
version of HTML. It has been in use since 1999 and it is still standard today.XHTML 1.0 is based on HTML 4.01. It is in
wide use today for working websites. It's easy to use and most sites that are XHTML use 1.0. XHTML 1.1 is a very strict
and stripped down version of XHTML.

It has no presentation features. Instead, you must rely on CSS style sheets to do all your layout. Unfortunately, not all
browsers implement CSS with sufficient consistency to make this work in all cases. So, sites that use XHTML 1.1 are still
pretty rare and for good reason. XHTML 2.0 began in 2002 and was actively in development until 2006. As of this
recording, it's been pretty much abandoned. XHTML 2.0 was designed to be a clean break from HTML with no
requirement for backward compatibility.

This never worked very well. The browser companies weren't really very interested in it. So it has substantially
failed. HTML 5 picks up where XHTML 2.0 left off, except that it is backward compatible. It has a lot of exciting new
features including XForms, which extend thecapabilities of HTML forms to include more data types, better formatting,
data validation and many other useful features. XForms has been around since 2003 and is now in its second full version,
but it is not yet adopted by any of the major browsers.

The problem is that websites are already doing what XForms is supposed to do with AJAX, Asynchronous JavaScript and
XML. So, XForms may be dead in the water. We'll see. Although it's promising and interesting for geeky types like me,
HTML 5 is not very close to implementation. A few of its features are supported by a few browsers, but not enough for it
tobe useful for a public website. This course will use XHTML 1.0 as much as possible. All things considered, it's the best
choice for a public website today.

Where it's relevant? I'll discuss how examples relate to HTML 4, but I'll always show you thestrictness to most
compatible XHTML 1.0, so that you know how to make your websites functional, compatible and attractive.
Exploring a simple XHTML page

This is the simplest possible HTML document. This is all that's required in a document in HTML. You have a title and you
have a paragraph. That's all that's really required. This is the same document in XHTML. This is the simplest possible
XHTML document. You'll notice it's got a lot more stuff. You look at this document and you look at this HTML document
and you've got to be asking yourself, why would I want to go through all this trouble when I can get away with this? That
is an excellent question.

The difference is the XHTML document is going to work more consistently across more platforms on in to the future. So
that's why we care about XHTML. The truth is writing this document is no more trouble at all than writing this
document. All you have to do is have all of this other stuff saved in a template someplace and whenever you start a new
document, you just start from that point and typing your title and your content and you're going, and so it's really
not anymore trouble at all.

So let's take a look at some of the different elements in this document. Before we do that, we need to talk a little bit
about terminology. So we are on the same page as we talk about all the different parts of this document. So, this is a
tag. It begins with a left angle bracket and it has the name of the tag inside and then it ends in a right angle bracket. This
is an end tag. It's the same as the tag except it has this slash character between the opening angle bracket and the name
of the tag.

So together, these two tags are called a beginning tag and an end tag. Inside, they have the content of the element. So
altogether, with the begin tag and the end tag and the content, it's called an element. An element includes all of those
pieces, begin, content and end. The begin tag is this one and the end tag is that one, okay? So this is the title tag, here is
the head tag and you'll notice that the head tag contains the title tag.

So everything between the beginning of the head and the ending of the head is the whole element, the head
element. The head element contains the title tag and it may contain even some other stuff. This is the body tag and the
body element contains the body of the document, including this paragraph and whatever else you might want to put in
there. Then there is the HTML element, which contains all of it. It goes all the way up here, actually, doesn't it? Yeah. So,
that's tag and that's element. A container is a type of a tag that has content.

The P element is a container. It has content. We might have another element that doesn't have content, like the
horizontal rule, hr and there is an hr tag that does not have content. It stands alone by itself. Now in XHTML, a
standalone tag that does not have content must have this littleslash before the closing angle bracket. The reason for that
is that in XHTML, all tags must be terminated. So when you have a container, it's easy; you have an end tag that
terminates the element.

If you don't have a container, if you have just a standalone tag, then it must have this little shorthand for closing. It
would be just as legal to write it this way, but nobody does. That would be just as legal. Now you have a begin tag and an
end tag. So instead, there is this shortcut, this shorthand, which says this is terminated. Now, this space between the
name and the slash is not actually required. It is traditional. So I tend to do it, but it's not required.

So that is a complete hr element. It has it's begin tag and really has its end tag built into the begin tag. So it begins and
ends all in one tag. That is a valid element that doesn't have content. Now let's take a moment and just talk about all this
stuff at the top. This stuff at the top is required and that's really all you need to know about it. What it is, how it works, is
probably not relevant. It's just required. This is what makes it valid XHTML and this is what makes it possible for it to be
read across a lot of different devices, well in to the future.

So you just cut-and-paste it, you keep it in a template, we'll talk about how to do that a little bit later. We're going to talk
a little bit about some of the components of this a little bit later, so that you'll understand the parts of it that you may
want to occasionally change, but for the most part, you just need to know that it's required and you're going to cut-and-
paste that and it's included in the Templates section of the exercise files with this course. So that's it. This is a valid
XHTML file. If you do in this way, they're going to work across devices well andconsistently and well in to the future.

Understanding the structure of an XHTML document

In our last lesson we talked about this information at the top of the document that needs to get cut and paste into each
of your documents, in order for it to be a valid XHTML. Let's take a look at what this is and exactly what it all means. This
first line is the XML declaration. You will notice it's XML; it is not XHTML. XHTML is an application of XML and this is the
version being used. So this XML declaration has the version of XML and the character encoding that's used in the
document. The version will always be 1.0 and the encoding will depend on what language thedocument is in.

For most Western languages utf-8 will work fine and that's the default. If you're using a language that uses different
types of characters then western languages, like for instance Japanese or Chinese or Russian, that uses a different set of
characters, then you may want a different character encoding. The next line is the DOCTYPE. This tells the browser what
type of document this is, which type of XHTML is being used. This one is XHTML 1.0 Transitional and that's what you'll
for most of your standard HTML documents.

The other two types are Strict and Frameset, and we'll look at those in a minute. In a Transitional document, you have
available all of the HTML 4 tags. You have Center, you have Table, you have Font and all of the presentation markup, all
the tags are available in HTML are available in XHTML 1.0 Transitional. So if we look at this document in the browser we
see that there is a yellow box and it has some text in it. So here in the document, we see that yellow box is made by the
table element and the text is inside of a paragraph element and it has the font tag for specifying the font and the size.

And that looks like this in the browser. In our strict document, you will notice that the DOCTYPE says XHTML 1.0
Strict. The Strict documents do not have available any of the presentation. The center tag is not there, the table tag is
not there, the font tag is not there. All of these things have to be done with style sheets. And so at the top of the
document we have a style sheet and then down here is the content. So that document looks like this in the browser.

There is the strict version. You see it's virtually the same as the Transitional version. There is the Transitional and there is
the Strict. You can accomplish the same things with style sheets that you can with the tables and the fonts. Finally, the
Frameset document is for documents that have frames. We'll cover frames in more detail in a later lesson. There in
nutshell, you have three frames available, frame sources. It goes red, yellow and then blue HTML. That looks like this in
the browser, having red, yellow and blue.

So those are our document types. Again, you will be using the XHTML 1.0 Transitional document type for most of your
documents.

Understanding document containers

In our last lesson, we've covered this front matter at the top of the document. Let's look at the document itself. The
HTML element, which has it's begin tag here and its end tag down here at the bottom, this contains the entire
document. It's a container. You remember a container is any HTML tag that has content in between the begin tag and
the end tag. So the HTML tag is a container, and it contains the entire document. The document itself is in two
parts. There's the head, which has the title in it and other meta-information about the document.

It could have style sheets. It could have JavaScript. Then there is the body of the document, which contains the content
of the document itself. In this case, it's got this paragraph with the formatting information wrapped around it. And that's
really it. That's the structure of a XHTML document.

Creating and using templates

So now that we've covered this structure of the XHTML document, and you know what all this stuff is that's required in
every document, I know you're not going to want to type it every time and neither am I. I'm a big fan of lazy. So what I
do is I keep around templates. Now as a starting point, I have this transitional-xhtml-template, which I actually use every
time I'm doing to build a new document from scratch, and I start with this. It's got all the stuff that's required.It's got a
placeholder for my document title, has a placeholder for where I start typing in my content.

Once I've designed a site, like for instance this one here. This is a site that we'll be using later on in the course to show
how we do layout in a complete site. And this is the template for it.After I've designed the site and I've built the front
page, I tear out the content and I create a template that's got just all the elements that are going to be consistent across
the website. And down here I've got placeholders. Here's where my main content goes, here's where my sidebar
content goes, here's where the title goes, and the rest of it is just constant.

So here's what it looks like in the browser. This is my little transitional template. This is the template for the website that
we'll be looking at in more detail later on in the course. And here's the place for the main content. Here's the place for
the sidebar content. I don't have type any of this anymore. Like I said, I'm a big fan of lazy. This is something that you can
do to make to make it possible to use well structured documents that are correct and that will work well in a variety
of browsers, and in a variety of media, and without really anymore effort than you would put into just the designing the
things once.

No more effort really than it would be just to use plain old ugly HTML, to be able use well formed XHTML that will work
across platforms and well into the future on all kinds of new devices. So use your templates. Become a fan of the lazy.

Lesson2: Text Tags

Understanding how empty space is formatted in XHTML

As we begin to talk about how XHTML deals with text, let's start with white space. White space is any kind of space, the
space character, the tab character. It's a line feed. Any kind of white space, XHTML has a special way of dealing with
it. So here we have a document and it has our front matter at the top. It has head section and a body section and it has a
couple of paragraphs and these are paragraph tags. See the p at the beginning and the end tag at the end.

Everything inside of the paragraph element is a paragraph. So this text here is in a paragraph by itself and you see in the
browser down here, we have our text editor at the top and our browser at the bottom so we can see what we are
doing. The browser down there, that's in a paragraph by itself and this other line of text is in a paragraph by itself down
here in the browser as well. So notice that the paragraph has words and it has spaces. Now if I go ahead and change this
and just add a bunch of spaces and save the document and then go down here and reload in the browser, you will notice
that the line of text does not change. All of these extra spaces are all folded into one space in the document in the
browser.

So this is what XHTML does with space, and HTML works exactly the same way. All of these spaces are folded into one
space in the browser. Now if instead of inserting a bunch of spaces, what if I insert a bunch of new lines and then save
it? So I save the document and I reload in the browser and you will notice that the line of text is exactly the same. All of
these new line characters are also folded into one space in the browser.

So this is how XHTML deals with white space. In fact, it doesn't matter what kind of white space it is or what kind
of combination of white space it is. I could have a number of spaces up here. I could have a number of new lines
down here. I could have more spaces over here and I could even break up another part of the line and all of this-- and I
save the document and I load it up in the browser and it's still just the one line of text.

So this is how HTML and XHTML deal with white space. All white space is in a row. It's adjacent to each other. It is
between pieces of text. All white spaces folded into one space character in the browser when it renders the line of text.

Using paragraph tags

Let's take a look at how XHTML and HTML handle paragraphs in a document. Here we have a document in our text
editor, the top window is the text editor, the bottom window here is the browser and this document has a paragraph in
it. It has two paragraphs actually. This paragraph here and let me scroll down so you can see the whole thing and this
paragraph over here. Now you will notice that the paragraphs are enclosed in p tags. The p tag is forparagraph and the p
tag is a container. So it has content.

The content of the container is the paragraph itself and it has a begin tag and it has an end tag and that's how a
paragraph is formed in XHTML, head HTML. So this paragraph here is displayed in the browser there and this paragraph
here is displayed in the browser here. You will notice that the browser makes a nice space between them and
formats them as separate paragraphs. So in a nutshell, that's how paragraphs work. Another thing I would like to talk
about is how we format the paragraphs in the text editor. You will notice that this paragraph here runs on and it goes
way off the screen and sometimes you'll see documents where paragraphs will go on for many, many screens wide, and
they work just fine.

That really doesn't have any impact on how it's displayed in the browser. But if you remember, when we add white
space like for instance a line break right here, this doesn't really affect how the text is displayed in the browser. I will go
ahead and I'll save this with the line break in it.You'll see it breaks after the word words and the comma there, so that
would be right there and I'll reload it in the browser and you see that that does not affect how it's displayed in the
browser. So what you can do is you can actually reformat this and I'll use a feature in my text editor, most text editors
have a feature like this, like we call it a hard wrap or something like that.

In this one, it's called Split lines and it's in the Edit menu there. So I'll go ahead and I'll click on Split lines. It wraps the
paragraph around, so that it all fits on the screen here in the Editor. I will go ahead and I'll save that and I'll reload it in
the browser. So it has no effect on how it's displayed in the browser, but it makes it readable on the screen here in my
text editor. This is something that's just nice to do. It makes it readable in the text editor and makes it a little bit more
workable if you have to use it in another environment like in a console on a server orsomething like that or you just need
to make a quick edit when you are some place else and it just makes it easier to work with and it doesn't have any effect
on how it's displayed.

So I consider a nice practice, I always wrap my paragraphs so that they fit on the screen in my text editor and they go
ahead and work just fine in the browser when I do that.

Aligning paragraphs

So in our last lesson we talked about paragraphs and how they work and how they wrap. Now let's take a look at how to
change the alignment of a paragraph. Here we have a document, a fully formed XHTML document with all the front
matter at the top and in the content of the document we have one paragraph element and it's there to there. We have
the paragraph tag and the close tag and some text in between and down here at the bottom we have this document
opened in a browser with the paragraph displaying there on the screen.
Let me just drag this back a little bit so the paragraph wraps nicely. You will notice that the paragraph is justified on the
left, it's aligned flush on the left and it's ragging on the right and this is the default alignment for a paragraph in XHTML
and HTML. So let's take a look at how to change that, I'm going to add an attribute to the paragraph here, say
align="right". So this is what an attribute looks like in XHTML. You have the attribute name, and an equal sign and the
argument of the attribute is in quotes.

I tend to use double quotes. Single quotes also work just fine. So this is how it's formed, you have the left angle bracket
and then the name of the tag, which is a p tag in this case for paragraph, and then you have some space. It can be any
amount of white space. You can have new lines here. You can have any amount of legal white space and then the name
of the attribute. In this case is align which tells the paragraph how to do its alignment and an equal sign and the
argument in quotes and in this case, the argument is the word "right" and a close angle bracket and then you have the
close tag down here with the content in the middle.

So I'm going to go ahead and save this. What we expect to have happen when we reload in the browser is that the
right side will be flush, the left side will be ragged. So I'll go ahead and hit Reload and there we have it. The right side of
the paragraph is now flush and the left side is ragged, and so that's the right alignment. There are two other alignments
available, one is called justify and what this does is this makes both sides of the paragraph flush and then we have the
left side as flush and the right side as flush.

And the other alignment is center, which makes it ragged on both sides, all of the content centered in between and
there we have center. The default option of course is left and so we saw that without any argument in the
alignment. You can also do it this way if you want to explicitly assign it. You can say align= "left" and reload in the
browser. We have that flush on the left and ragged on the right as we did with the default arrangement. And so that is
the alignment attribute to the paragraph tag and its various options.

Understanding block-level and inline tags

There are two major types of tags in HTML and XHTML. There are block level tags and inline level tags. Block levels tags
are elements that contain other elements. These include paragraphs, headings, tables, etcetera and the special generic
block element div. Inline level tags represent objects that typically occur in the line of text including I, B, image, etcetera
and the special generic inline elements span. Let's take a look at some block and inline level elements in our editor here
at the top of the screen. We see the center tag contains paragraphs and the paragraphs contain in this case an
emphasize element and in this case an image element.

Paragraphs are special in this way and that the P tag is the only block level element that cannot contain other block level
elements. Paragraphs can only contain text and inline level elements.Other block level elements can contain both block
level and inline level elements as in the case of the center tag here. Also, take note that images are inline elements. This
can be a point of confusion, so it's good to remember. Images are inline elements; they are not block level elements.

This is just an overview of block and inline level tags. As we go over individual tags in the rest of the course. We'll talk
about whether they are block level or inline level, so you can get that straight at the time.

Controlling line breaks and spaces

In our lesson on paragraphs, we talked about how the browser automatically formats a paragraph taking multiple
occurrences of white space, spaces, new lines, etcetera and folds them into one space for the purpose of formatting the
paragraph. In this lesson, we are going to talk about how to control the line breaks in the browser. Here in our Editor on
the top of the screen, we have a couple of paragraphs and we are displaying those paragraphs in the browser on the
bottom of the screen. Let me go ahead and shrink the browser down so that the paragraphs wrap a little bit.

For the purposes these lessons we can show how to control those wraps. You will notice that the first paragraph up here
extends past the Editor window with no wraps whatsoever and you will notice that down in the browser it wraps
normally. You will notice that the second paragraph is wrapped normally on the screen and it wraps normally down here
in the browser as well. So this first paragraph goes beyond the Editor window and if we break it at some place, let's
break it over here, and save it, of course this does not affect how it's rendered in the browser whatsoever.

So how do we actually get aligned to break where we intend it to? For this purpose we use the BR tag, br, and it's a
standalone tag. It does not have any content. So we use the shortcut notation here to satisfy XHTML's need for
beginning and an end tag. If we save this and reload it in the browser, you will notice that the paragraph breaks there
and yet the paragraph is still formatted as a paragraph. In other words, it has got extra space between the two
paragraphs and this is normal behavior for block elements in a browser window.

Now we'll go ahead and take that out and the paragraph is back the way it was and save, reload it in the browser so we
can see that intentional line break is done. Now how do we get a line break to not happen? You will notice that between
the words Notice and How over here that there is line break that's happened, because the browser decided that it needs
to wrapthere in order to make it into a paragraph. What if we wanted to not wrap there? If I go ahead and put in a non-
breaking space here, this is a special character entity called non-breaking space, then this will prevent a break between
these two words and these two words will be on one line, so they will get wrapped down to the next line.

Before we save this and look at how it works, let's talk about the character entity here. You notice it has an ampersand
at the beginning and a semicolon at the end and in between the ampersand and the semicolon we have letters,
nbsp. This is how you use a character entity in HTML and XHTML. The ampersand denotes the beginning of the character
entity and the semicolon is the end of it and in between you have the designation of the character entity. In this case,
it's a named entity and it's named nbsp, which stands for non-breaking space.

So go ahead and save this and reload the browser and you will see that now the paragraph does not wrap between the
words Notice and How. It doesn't break there. It only breaks before it or after it and so it takes the whole thing as a
one for here and puts it on the next line, and that's how a non-breaking space works in HTML. In fact, if you wanted this
paragraph to not wrap at all, you can select the entire line and I'm just going to select it from here to the end and
not include that space before & and use the Editor's Search and Replace feature to replace the space.

The Editor fills in whatever you have selected when you do that and replace all the spaces with non-breaking space
entities. Replace All in selection, 26 occurrences, Close. I will go ahead and Save and reload in the browser and we see
now that that paragraph doesn't break at all. It goes all the way across and you have to scroll sideways in order to
see the entire paragraphs.It puts it all on one line and that's because there aren't any spaces that it can break and all the
spaces in the paragraph are non-breaking spaces.

I am going to undo this and go ahead replace this element here with a space and character entity non-breaking space
entity, save and reload in the browser and we see that our paragraph is now back to normal. There is another way that
we can force this paragraph to not break and this is a non-standard element. It is not in the standard and it tends to
work in most of the browsers that I have seen including Internet Explorer and Firefox and all the popular browsers. But
it's not in any of the standard.

So it's an unsupported rogue non-standard element. It's called a no-break and it's spelled nobr. I'll go ahead and insert it
there and at the end of the line. So everything between those beginning and end tag will not break. So I'm going to Save
that and reload in the browser and you see we now have a non-breaking paragraph. So this is shortcut for making a non-
breaking paragraph, should you actually want one and you don't feel like search and replace all the spaces in the
paragraph.

It is not supported. It's not part of the standard. It's just one of those elements that's cropped up out of a necessity, but
was never made a part of the standard. So you can use that, if you want to and it will work in most browsers, but
just know that it's not part of the standard. So this is how you control the line breaks in a paragraph. You can use the br
element to insert a line break where you want it and you can use the nbsp character entity to prevent line breaks where
you don't want them and you can use the unsupported non- standard no-break tag to prevent line breaks for a block of
text.

Formatting text with phrase element tags

In this lesson we are going to talk about Phrase markup elements, which mark up your text with the intention of a
phrase, like for example, here we have an emphasized phrase, which just means it should be emphasized with the em or
this one means it should be read strongly.This makes it possible for non-visual browsers to know what to do with your
text. To read it stronger or to read it with emphasis, as opposed to the font markup elements, which tells the browser,
this one is italic and this one is bold, but it doesn't really tell a non- visual browser what to do with it.

So it's important to understand the distinction, the Phrase markup elements are covered in this lesson and the Font
markup elements are covered in our next lesson. The first Phrase markup element we are going to talk about is the
Emphasize element and all of these Phrase markup elements, as well as, their Font markup counterparts are inline-level
elements, which means that they go inline with the text rather than in blocks as the block-elements. So, this is an inline-
element and it means to emphasize em and you will notice that in the browser it's rendered with italics.

You can't count on that though. Different browsers may render it differently. If you really care, if it's italics or not, you
are encouraged to use the Font markup elements instead. The Strong element means to read it strongly and in this case
it is rendered in bold in the browser. The Q element is for quotes and you will notice in the browser it is rendered with
special curly quotes.An important note about the Q element. It is not supported by all browsers. So, be sure that you
check it in the browsers that matter to you, before committing it to the Internet.

The Code element renders in monospace text and the next few elements are interesting. The Abbreviation element
allows you to use an abbreviation, and hover your mouse for the meaning of abbreviation. So, here we have an m and
you will notice that in Firefox it puts this little dotted line under it to say you hover your mouse over here, and you hover
your mouse and you get the definition of the abbreviation. These work differently in different browsers. So, be sure to
test them in different browsers that matter to you.

Likewise, the Acronym element, we have LOM here. And we'll notice that in the title attribute we have lots of meaning,
which is the definition of the acronym. So, down here you hover your mouse over it and LOM stands for Lots of
Meaning. The next element is DFN, which stands for defining instance. So, you would use this the first time you use a
term that you want to define in a document. In this case, the Firefox browser renders it as italic and if you hover
yourmouse over it again, you get the title tag.

So, meaning and purpose there. DFN with the title tag and it's meaning and purpose. Again, this is for using a term the
first time in a document and being able to define it. The Keyboard element, kbd renders as monospace in Firefox. The
Sample element likewise. samp also renders as monospace and then finally the Var element, var, which stands for
variables, this is where you would use a variable in code or something like that and that renders as italics.

So, these are the Phrase markup elements and how they are rendered in the Firefox browser.Of course, different
browsers will render them in different way. So, be sure to test them in the browsers that matter to you before
committing your page to the Internet.

Formatting text with font markup elements

In this lesson we are going to talk about Font markup elements. These are distinct from which Phrase markup
elements. The Font markup elements define the visual style that the elements are going to be rendered on a visual
browser on the screen. The Phrase markup elements are for giving meaning to the text, like emphasized or strong or
something like that. The Font markup elements are actually depreciated in XHTML 1.0 and HTML 4.01. The HTML police,
as I affectionately call them, would prefer that we not use Font markup elements.

In reality, if you care about how your text is going to be rendered on the screen, you want to use the Font level markups
and not the Phrase level markups. The Phrase level markups do not guarantee how the phrase is going to be rendered
on the screen. If you care that it's italics, if you care that it's bold, then you use the tags that mean that. They are not
going away, as long as people are using them, they are not going to take them out of HTML and XHTML.So they are
perfectly safe to use. Browsers for visually impaired and other non-visual browsers will not necessarily know what to do
with these.

If you care about those browsers, then you want to use the Phrase level markups in addition to these or instead of
these. Let's take a look at each of these tags. These are also inline-level just like the Phrase markup tags and so they
go inline with the text and their containers and they contain the text that you are modifying. So, in this case, we have
the B tag which stands for bold and you will see that it's rendered bold in the browser down there. Here is the Big tag,
which means what it's says, big, and you will see that the text is bigger in the browser down there.

Here is the I tag for italics and you will see that it's italic in the browser down there. So, these do exactly what it is that
they say. S is for strike out. It's actually a shortcut for Strike. Strike and S are same thing. And you will see in the browser
here there is the S tag and there is the Strike tag. They do exactly the same thing. They have the same meaning. In
between we have the Small tag which makes the text smaller. There is the Strike tag. TT stands for teletype.

It's like the pretag. It preformats the text. It renders it in all monospace font. The pretag, pre, we'll cover that
later. That's a block-level tag and so you cannot use that in inline in text. This is an inline-level tag. So, use this when you
want your text to be monospaced inside of a paragraph. Finally, the U tag for underline. It underlines the text, just like
there. So, these are the Font-level tags and like I said, these are depreciated which means that the HTML police don't
like them, but they are there and they are there for good.

They're not going away. The next versions of HTML are already being designed and have them intact. So you don't have
to worry about them going away. The browsers will continue to support them, as long as people use them and these
have a purpose. They markup the text, how you want it to be rendered on the screen. If you care about how your text is
rendered on the screen, if you want something specifically to be in italic and something else specifically to be bold, then
you use these tags. If you care about the meaning and how they are rendered on a non-visual browser, then you use the
Phrase markup tags and you can use them together, if you need to.

Adding document structure with headings

Headings in HTML and XHTML add structure to your document and this is valuable for search engines and other
automated tools that might want to categorize your documents and to understand the structure of them a little bit, so
they can give you more intelligent results.Headings are valuable for this purpose. Headings are rendered a certain way in
browsers. By default, they tend to be a little bit ugly and so some people tend to not use the headings, instead
formatting paragraphs for the purpose. I am suggesting that it's a good idea to go ahead and use the headings
and format those using CSS.

In this way, your documents can have the structure that they need so that the automated tools can report on them
properly and at the same time, they then look the way that you want them to look. Let's take a look at how we can do
this. Here's our heading 1 and you'll notice that it's big and ugly and here's our heading 2. The heading 2 means that the
part of the document after the heading 2 is related to the part of the document after the most recent heading 1, and
likewise, the heading level 3, h3, means that that part of the document is related to the mostrecent h2 level of the
document.

This is how they are rendered in the browser and as you can see, they may not be exactly what you want. So, you can
change that by adding some style. We are going to go into the Style Sheets in a lot more detail in the chapter on CSS. But
let's just take a look at how you can do this in this case, so you can see what the results look like. I'll add a style
here. Let's say we want it in a Sans-Serif font and just a little bit larger than the paragraph, not a lot larger than the
paragraph. So, we'll go ahead and say font-family: sans-serif and font-size: say 125%.

So, it will be just a quarter of a percent larger than the normal paragraphs in the document. I'll go ahead and save that
and reload in the browser and we can see that looks a lot more reasonable. Now, we'll go ahead and take this style and
copy it because that's easier thantyping a lot, and we'll go ahead and paste it over here and let's maybe add some color
to this one. Let's say heading level 2 will be dark blue. So, I'll say color. I'm going to use a color like this.

That's a blue and we'll talk more about what that means in the section on CSS. I'll go ahead and save that and reload
over here and we see that that's a dark blue. It's a little bit bluish. It's not an overwhelming blue. We'll go ahead and
we'll copy this and use it as a basis for the heading level 3 and go ahead and say instead of changing the color of the text,
we are going to change the background-color of the text. Background-color like that and we'll say it's going to be a light
blue.

So, I'll make it say #ccf, which is a light blue. Go ahead and save that and load it up in the browser and we have a light
blue background now on this. So, you can see that you can do things to make it attractive or make it look how it is that
you want it to look and yet still have the structure that's important for the automated tools that might be reading your
web page. So, headings are valuable for that purpose, they are valuable for giving your documents structure and they
can be made pretty by using CSS.

We'll talk about CSS in a lot more detail in our chapter on CSS later in this course.

Formatting quotations and quote marks

In this lesson, we are going to talk about quotations and quote marks. There are two elements in play here. One is the
Blockquote element, which is a block-level element that quotes anentire block of text, and the other is the Q element
that puts quote marks around a bit of text inline. First, the Blockquote element, which you can see demonstrated
here. In the browser, you'll see it's just indented text and if I go ahead and shrink down the browser so that it wraps,
you'll see that it's indented on both sides but it's not centered or anything.

That's actually how the Blockquote element is often used. It's often used just to indent text. It's not used necessarily to
mean this is a block of quoted text. So, be aware of that and when you are using the Blockquote element, be sure to use
it to mean what it's supposed to mean and if you need to just indent text, you can use Style Sheets for that with a
regular paragraph. The new Q element and I say new, it's been around now for almost ten years but it's not actually
supported by a lot of browsers. So, it's not used very much. Be sure to check with the browsers that matter to you
before you try to use it.

It puts quote marks around a piece of text inline. So, here we have a word with quote marks around it, here, and I'll just
take those quote marks and I'll change it for the Q element and close the q here. So, that's the Q element. It's an inline
element as you see and it's being used to quote that word. So, I'll go ahead and save that and reload in the browser. So,
the nice thing is there are nice curly quotes in English. There are a couple of things about the Q tag that you need to be
aware of. One is it's supposed to be internationalized and so, if I were to sit here and put language=French then you
should get French quotes, which are one above and one below and I save that and reload it, and you see it doesn't
change anything.

So that's not fully supported in Firefox. In actuality, the tag isn't supported at all in some browsers, notably Internet
Explorer. So, if you use it, you may just not get any quotes at all. So, be sure to test it in the browsers that are important
to you before you use it. They'd be handy tag, if they were actually supported well, but unfortunately it's not. So, those
are the quoting elements. They don't actually get used for what they mean and they don't always work for what they are
supposed to work for. So, be aware of that when you try to use them.

Preserving pre-formatted text

Normally, white space is folded together and otherwise ignored. So, new lines and all that become one space and text is
formatted like this in the browser like we see here, in a paragraph. Sometimes however, you might want the text to be
formatted in a particular way,like in this example here, in my text editor. And the way you accomplish that is with the
Pre tag.So, I'll just go ahead and change these p's into pre's. That's the Pre tag. It's a block-level tag and what it does is it
displays in the browser exactly how it is in the text editor.

So, it will be monospaced and it will be indented just like this and the blank lines and everything. It will be just as it is
there in the text editor and there we have it. You will notice a couple of things. First of all, it is a block-level element and
so it will behave like that. It will separate the blocks of text out of as if they were paragraphs. Also, you'll notice, of
course, that the text is monospaced and that it's indented exactly how it is in the text editor. You'll notice that inline
formatting does work. So, here we have a U tag for underline and here you have the word as underlined in the Browser.

So, that's the Pre tag. It does just what it looks like it does. It pre-formats text exactly how it's formatted in the text
editor. It's often used for programming language code or HTML code or something like that to display code in a browser,
so that the indenting is preserved. It can also be used for wacky ASCII or poetry, like I have done here.

Selecting a typeface

This lesson is about using the font tag to change the font of text in a document. The font tag is an inline level tag. So it's
important to know that you can use it inside a paragraph. It is not proper to use it outside a paragraph and have a
paragraph contained in it. It's common and it works, but it's not correct XHTML. So let's take a look at how this
works. Here we have a paragraph, and there is a paragraph in the browser down there. Let's say that I want to change
the font of the text of the paragraph.

So I'll use a font tag here, and I say font face = and I can say "arial", which is a sans-serif font that's available in Microsoft
Windows and on other operating systems. Close the font tag here.Now you'll notice that the font tag is after the P and
the close font tag is before the close P. So that makes the font tag inside of the paragraph. You will see other
arrangements, which are not correct. Sometimes even you'll see the text straddling the paragraph like this, whereyou've
got the beginning of the paragraph outside of the font and the end of the paragraph inside of the font.

That is not correct and don't do that. So here we have the font tag done correctly and I'm going to save it and we'll
reload in the browser, and we'll see that we now have this lovely sans-serif Arial font. So some other interesting things
that you should know about the font face argument.One is that you can say sans-serif like this and then whatever is the
default sans-serif font in the user's browser is the one that will be used. And this is very, very valuable. So I save it and go
ahead and reload in the browser.

You see that we still have the Arial font and that's because Arial is the default sans-serif font in the Microsoft Window's
operating system. So that is the font that comes up. If the font is something different in the user's operating system, it
will use that one. The value of this is that not everybody's computer has the Arial font or not everybody's computer has
Helvetica or something else or maybe it's not called something or quite spelled the way that it's spelled on your
computer. So if you want a sans-serif font in your document, if you use sans-serif insteadof specifying Arial, it will come
up sans -serif in all of the places where there is a sans-serif font available in that browser, even if it's named
something different than it is in your computer.

So this is very valuable shorthand. In addition to sans-serif you can say serif and you'll always get a serif font. Save that
and reload, and the default serif font is probably Times Roman on this computer here. Or you can say monospace, like
this and you'll get whatever the defaultmonospace font is, which in this case I believe is Courier New in the
Microsoft Windows operating system. Another thing that's useful to note is that you can specify several fonts.

You can say verdana, helvetica, sans-serif, like that. It will go ahead and save that, and what this will do is it uses
Verdana if it's available, and if it's not available, it will use Helvetica. If neither of those will available, it will use whatever
sans-serif font is available. This way you can specify the one that you like and still have it default to something that is
reasonable for your document. I'll go ahead and reload this and you'll see we have Verdana available on this
computer. If I misspell Verdana, then we'll get the second one in the list here.

I use this technique for testing my lists, just to make sure I get what I expect. So I'll go ahead and save this and reload
and now we get Helvetica. If I misspell Helvetica there and save that, we'll get the default sans-serif, which probably
looks very similar. It would be the Arial font. So I believe on Microsoft Windows Helvetica is alias for Arial. So we get
exactly the same thing there. So this is how the font face tag works. You use it to specify the fonts that you want to use
to display your document.

You can give it a list of fonts and it's always a good idea to end the list with a default value for the type of a font that you
want so that if none of the ones you've specified or available, you'll at least get a serif font or sans-serif font however it
is that you want it to be in your document.Keep in mind that not everybody has their browser setup to default to a serif
font. So if you really care about your document being displayed in serif font, go ahead and specify it in a font face tag.

Selecting a type size

In the last lesson we saw how to change the font face of text using the font markup tag and now we're going to look at
how to change the size of the text using the font markup tag. So here we have the same paragraph and I'm going to go
ahead and insert a font tag. We'll use the size attribute. I'm going to close the font tag here. We'll say size = "3", 3 is the
default size.So when I save this and reload it in the browser, we won't see any change at all.

If I go ahead and make it 4, so it gets little bigger. Save, reload, there it is. If I make it 2, I'll see that it gets little
smaller. Go ahead and save that and reload. And we have now smaller text. So 3 is the default and numbers between 1
and 6 are valid. So 1 is very, very small. We'll look at 1.Save, reload. That's very, very small. And we'll look at 6, which is
very, very big.

Save here and go ahead and reload and 6 is very big. Besides using the absolute numbers, you can also use relative
numbers. If I say +1, it will make it one size larger than what it's current, which is the default. So it's just that bigger font,
it's just like 4. If I say -1, it will make it one smaller than what's in effect at this place of the document, which is the
default in this case.So it makes it smaller. So you can use relative sizes and you can use absolute sizes. I tend to like the
relative sizes more.

So I'm going to ahead and set this to + 1, and then I'm just going to show you one more thing we can do here. We can
combine the face and size attribute. So if I say face="sans-serif" and save that, you will see that we'll get a sans-serif font
that's a little bit larger than the default. So that's the font size tag, and you see you can use it also in combination with
the font face tag.Remember that the font tag is an inline tag, so it belongs inside of the paragraph not on the outside of
the paragraph.

Using ordered and unordered lists

There are three types of lists in XHTML and HTML. There is the Unordered List, the Ordered List and the Definition
List. So we'll start our discussion with the Unordered List and here an example in the text editor on the top and we have
browser on the bottom. The Unordered List is specified with the ul tag, which is container. It's a block level element and
it contains Line Items using the li container, which is also a block level container. li for the Line Item.

So you can see it's rendered down here using bullets. So you can change the types of bullets by specifying different type
up here. You say type = "disc". Disc is the default, so we'll just show that one real quick. I'll save and reload and you will
see that it doesn't change at all."circle" is like the disc only. It's open. There is circle and "square" is the other type and
you will see it's rendered here in the Firefox browser with a solid square.

These may be rendered differently in different browsers, so you might want to check the different browsers that matter
to you and see how they are rendered there. You can also nest list, and I'll show this here with a nested list. Save that
and reload and you'll notice that the nested list has these circles as a default. The outer one will have the disc as the
default and save and reload, you will see the outer one has discs.

The next level in has circles and if we nest yet another level, which we can do here easily with a little cut and paste. Copy
and I'll go ahead and paste it here and we'll indent that a little bit soit makes sense and save and you will see we have
two levels of nested items and the inner level has squares. The choices may be different, but they will try to use a
different type ofbullet for each level, and of course it will cycle them after three levels.

So that's the Unordered List. Let's take a look at the Ordered List now. The Ordered List uses the ol tag which is a block
level tag and the items are the li tag for Line Item. Here is what it looks like in the browser. You will notice it's counting 1,
2, 3, 4 and it's using standard numbers for the list. You can change the type using the type attribute and you can say "A"
for using the alphabet to number them.

You can use a lowercase "a" to get lowercase alpha, save and reload. You can use hit "I" for Roman numerals. That's an
uppercase "I" for uppercase Roman numerals and you can use a lowercase "i" for lowercase Roman numerals. You can
also spell it out. You can say upper-roman for uppercase Roman numerals, reloading there. You can say lower-roman for
lowercase Roman numerals, save that and reload.

You can say upper-alpha for uppercase alpha and save that and reload or you can say lower-alpha for lowercase
alpha. And of course, you can say a number to get the default, which is the numbers. Save and reload. You can also nest
the Ordered List just like you can with the Unordered List.

I'll go ahead and use copy/ paste to get my list here. And save that and reload. See, I closed it with the wrong tag
there. You want to close it with the same tag that you are using and then it will work as you expect. There we go. So the
outer one is numbered 1, 2, 3, 4 and the inner one is 1, 2, 3. I can change the type of the inner one if I like so that I have
some sort of a structure to my outline and of course you can do this in whatever way makes sense for you.

The Definition List is our final type of list and this is very different than the Ordered List and the Unordered List. The
Definition List is used for defining terms and it looks like this in the browser. So the outer container is dl and that's a
block level element and inside you have dt for the Definition Term and dd for defining the definition itself. You see these
are rendered in this way. The Definition Term is 1 and the definition is the first non-zero number 2, which is here and the
Definition Term and the dd is the number after 1 and so on.

There aren't any options for the rendering of the Definition List, but of course you can format it using CSS. So these are
the different types of lists. You have three types of list. You have the Unordered List, the Ordered List, and the Definition
List and they look like this in the browser, Unordered List, Ordered List, and Definition List.

Lesson3: Image Tags

Using inline images

The image tag is an inline tag in XHTML and HTML and this is essentially how it works in a paragraph. Here we have a
paragraph with some text in it and an image in the middle of the text. So here is the image and you have text before it
and text after it, and this is what it looks like in the paragraph. This paragraph has an image inline with it. So that is how
an image is used in a paragraph like that. Let's take a look at the image tag and some of its attributes.

Here we have the source attribute, which says lynda-24.png that's the file name of the image.It could also have an entire
URL in it with the HTTP and the host name and you can even load an image off of a different host than the one where
the HTML file is. We'll see examples of that later on. This is the alt attribute and this is actually required in the
specification. This provides text that will be displayed in the event that the browser cannot display the image and it's
also useful for circumstances where the browser is not a visual browser where it might be reading text to a blind person
or something like that and so the alt tag is actually required.

There are circumstances where it may not make sense even all those things considered to have whole text in which case
you can just leave it empty, you can take the text out of it and leave it empty like that or some people will omit the alt
tag and even though it's technically required by the spec, it doesn't break anything to leave it out and then we have the
title attribute and the title attribute is what's displayed when you hover the mouse over the image inthe browser, there
it says "hey! you with the mouse!" and that's what the title attribute is for. So that can be useful and I often include that
and the width and the height attribute are actually not required by the spec and I wish they were.

What the width and the height attribute do is they specify the width and the height of the image for the browser. So the
browser can layout the page before it loads the image. If we are going to a webpage and as the page is loading as the
images are slowly coming in, the whole page is kind of moving around and making way for the images as they load up,
this is what happens when you don't have the width and the height and the browser tries to layout the page and then it
finds out as it goes out to load that image, oh the image is going to take this much space here and it's got to recalculate
and re-layout the whole page.

So I like to always load up the width and the height attribute in the image tag and this allows the browser to know
before it goes out to the server to get the actual image file. It allows it to know what the dimensions of the image are, so
that it can layout the page in advance and so you get a smoother user experience because the page doesn't have to
jump around. It all looks very graceful as the images load in their proper places, all laid out in the page there. So I'd like
to include the width and the height attributes when I can with the image. Of course, the image tag is a standalone tag.

It's not a container. It doesn't have any content and so you will see this /> at the end just like allthe standalone tags that
don't have any content. This tells the XHTML that this is the end of the tag and not to expect a separate end tag. So this
is sort of the pseudo end tag syntax that we see a lot with the tags that don't have the content. So this is the image tag
and this is the basics of its attributes. So there are few more attributes that we'll see in later lessons as we learn to do
other things with the image tag.

Flowing text around an image

So as we know, the image tag is an inline tag, which means it flows with the text in a paragraph, and so here we have a
paragraph with an image tag in it and the image tag is the beginning of the paragraph and then we have some text
and the close of the paragraph. So we see it displayed in the browser down here. We have something different that we
are not used to.The text is actually flowing around the image. So if I bring this in and watch the text wraps here, it wraps
next to the image and then when it gets past the end of the image, it wraps around the image.

That's not what we have seen in the past. The way this is accomplished is with this align=left attribute and that
makes the image float to the left side of the text. You can change it to align=right and it will float to the right side of the
text. Save that and reload and there now the image is floating to the right. Go ahead and change it back to left for our
demonstration purposes and reload it. Another attribute here that you may not have seen before is the hspace attribute
and what this does is it provides this horizontal space on either side of the image, you see there is 10 pixels on the right
and there is 10 pixels on the left.

If I make this a 0, I get in there and make that a 0, go ahead and save and reload, you will see that the text now wraps
very closely to the image. It's right up against the image, there is no space there anymore, because I made the space
0. So I'm going to go ahead and make the space back to 10 for 10 and this makes 10 pixels on ether side. You will see
that the text will move away from the image 10 pixels but also the image will move over 10 pixels from the left margin as
well. Reload, we'll see that.

That's because this hspace=10, it makes 10 pixels on either side of the image, left and right.And you can use vspace for
vertical space as well. That is the image tag we used in a floating mode. This align=left or align=right makes the image
float to one side or the other of the text and makes the text wrap around it.

Breaking lines around an image

So in our last lesson we looked at how to float an image, so that the text wraps around the image and you can float an
image to either side. Here we have our example from that lesson where the text is flowing around the image. We are
just going to tweak this down here and bring this up a little bit so that we can show you how to break the text around
the image if you need to do that. So here is our paragraph and we see our image here with the align=left thatmakes the
image float to the left and the text is flowing around it.

Let's say that you wanted to break this text say after this period here and you wanted that Jez is a Gibson L6-S to start on
the line after the image and not just right here. We know that the br tag will break the text. Go ahead and insert a br tag
right here, br, and you will notice that we have the little shorthand notation there for the fact that br is not a container
and it doesn't have a separate end tag. So we have this little shorthand notation that allows that to work in XHTML.

I'll go ahead and save this and reload the browser and there we have it, the Jez, moved from here after the sentence on
the same line and moved down to the next line which is exactly what we expected to have happen, but it's not what we
want. We want this to start down here under the image. So what we need is we need an attribute in the br tag, so that
attribute is called clear. So we'll go ahead and put in here clear=left. This will break around any floating object on the
left-hand side and make the line start after the floating objects.

We'll go ahead there and we'll save and we'll reload and there we have it. Now the paragraph continues under the
image after the end of the floating object there, in that case the image. So if I change this to right of course, we won't
expect this to work, because that's going to make it clear any object floating on the right-hand side and so there we have
just like it was before. It breaks but it doesn't clear because we are asking it to clear on the right and the image is
floating on the left. Or I can say all here and it will clear any floating object, no matter which side it is floating on.

So I'll save and reload and we see that that works. So that's how the clear attribute works in the br tag. You can say
clear=left to clear floating objects on the left-hand side. You can say clear=right to clear floating objects on the right-
hand side or you can say clear=all to clear all floating objects no matter which side they are on.

Lesson4: Link Tags

Working with hyperlinks

In this chapter we are talking about hyperlinks but I'm going to start out by talking about the anchor tag which is a, and
you will see it right here. This is how we create a hyperlink in HTML.Something else is different about this chapter and I
want to talk about this really briefly here while I've got your attention. And that is that the files in the Exercise Files
folder or for this chapter, I have got them loaded up on my web server and because we are going to be talkingabout
URLs, I would like to show you how the URLs work in the browser.

That way we get live URLs, real URLs, and you can actually run the examples off of the files in my server. They have been
up there for years and they will continue to be up there, since the last time that I did a course of this title and this is a
refresh of that course. So, I have refreshed that files and they are all still up there and they will continue to be up
there. And the files are also included in the Exercise Files folders that came with this course. So, you have got it both
ways and you can follow along in your text editor. And so we'll start talking about the anchor tag at this point.

So, the Anchor tag, which is spelled a, is a inline tag and you will see that it's here inline in a paragraph, we've got a
paragraph tag wrapped around it, and it ends over here. So, we have got a begin tag and an end tag and we have got
two attributes in this one. The first attribute is the href attribute, spelled href, and that contains the URL that you are
linking to. And then I have got title attribute here also, which works just like other title attributes when you hover your
mouse over the link, it will give you a little of a text tip which will say More about Bill here.

And then the content of the a tag is the text that will be used as the link and normally on a web browser it's underlined,
of course, you can change that with CSS, but we'll be using it in a normal mode here so that we can see how this works
so. This file is loaded up on my web server and it's at this URL here, so you can type that into your browser to follow
along. Now I'm going to switch over to the browser right now, so we can see what this link looks like. So here is that
page in the browser and there is the link that we are looking at and you will notice when I hover the mouse over it, it
says More about Bill and if you look down at the bottom of the screen, you will see there is the URL that was loaded up
in the link in the a tag.

So I'm going to go ahead and click on this link and you will see that the browser loads up my homepage and there's the
URL that we clicked on. That's the URL that was in the a tag and so it loaded up this webpage which is my homepage
what it looks like today. It will probably be different by the time you look at it because I change it a lot and I'll go ahead
and I'll click on the Back link there in the browser and you will see that we are back at the page. Now you will notice
something else here, the link has changed color, this means that I have already looked at this pages.

It's the same URL with a different attribute we'll look at that a little bit later. But you will see that the link has changed
color because I have already visited that particular URL. These other links are still the other color because we haven't
visited those yet and so the link changes color. That's called the visited color and when you look at the attributes in CSS,
when we cover CSS you will see that the anchor tag has options for changing the attributes of visited and unvisited links
and things like that. So, this is the visited color and it's the unvisited color.
So switching back to the text editor, you will see that this here is what's called a URL. URL stands Uniform Resource
Locator and it's a mouthful and it doesn't really mean what it says but in any event, that's what it stands for. It's one of
those old traditional Internet things that's just what it is. And so, let's take a look at the parts of a URL, so we can
understand how a URL works. The first part of the URL is called the scheme and it's the part to the left of the colon and
in the case of webpage URLs, that will always be http.

You will see also, sometimes if you are looking at files on your local computer, you will say file:but usually the ones that
we are interested in for the purposes of XHTML and web pages we are going to say http. The next part of the URL after
the two slashes is the host name and so this would be something like bw.org for my webpage or lynda.com for hers. It
will often have www before it or something else, but that's the host name and that follows the rules of Internet
address. It can be an IP address, it can be a DNS name, but that follows those rules and that's what goes in the host part.

And then sometimes you will see a colon and a number and that's a port number, you don't see that very often
anymore. And then after all of that, you will see a slash and that's where the path goes and so if we look at this webpage
here, you will see up here in the URL we have the scheme which is http and the :// and then we have the host name
which bw.org. On my website I don't put the www before it. It was just a choice I made a long time ago and it's always
worked for me. I don't have a port number because that's just rare to see anymore, but I dohave the slash and then the
path.

And so this path, misc/xhtml-links/ hyperlinks.html, that's the path to the file that has the XHTML code in it, and so that
is called the file path. After the path, there can be a colon followed by parameters, you don't see that very often. There
can be a question mark followed by a query that you do see often for interactive sites. That has to do with the CGI spec
and how CGI parameters are passed on a URL. And often times you will see the # sign and a fragment, which takes you
to a portion of the page, we'll look at those in a little bit of detail in a later lesson in this chapter.

So those are parts of the URL and that's what a URL is made of. There are actually a few other little parts that you never
even see anymore and so we didn't bother to cover those, but it's a pretty complicated spec. But mostly what you see is
the scheme, the host, and the path and sometimes you will see query and sometimes you will see a fragment. But for
the most part that's all that you will see. So we look at this URL, we now know what these parts are, we have the
scheme and we have the host name and we have the path to the file and those are the parts that we'll be concerned
about for this lesson.

One other thing that I would like to show you about the anchor tag, before we move on to the next lesson, you will see
we have the bw.org link twice and the other one has the target=_blank attribute and so here it is with the target=_blank
attribute. What this does is it targets a blank page. When we cover frames we'll see some other uses for the target
attribute, but this special word _blank, that creates a blank page for the link. So let's look at how that is used. This is the
regular link that we clicked on before and that just takes us to the webpage and it loads it in exactly the same browser
window, but when I click on this one and I'm in Firefox, so it will make the new window in tab.

But sometimes in some browsers, it will launch an entirely separate browser window and you will see that it's loaded up
the page here in a blank Window. You see we still have the hyperlinks page loaded in the other Window and so in Firefox
it does them in tabs and in other browsers, it may just open an entirely separate window. So, that's an option that you
will often see. A lot of links on my page I tend to do that with because I want people to come back to this page without
having to use their Back button. So, I can just close this tab and that other page is still there.

It's never gone away. So that's the target=_blank attribute and you will see that a lot in anchor tags. So that's how the
anchor element works, the a element that's the parts of the URL and you have seen how the link changes on the page
when it's been visited and you have seen the target=_blank attribute.

Using relative URLs

In this lesson, we're going to talk about relative URLs and these are URLs that don't have all of the different parts and are
just relative to the current location of the file that has the link in it. In other words, you have a link like this, which does
says here.html. The browser will assume that file exists in the same location as this page here does. And so this page
exists on the web at this location. And so we'll just take this last part of it, including the host name and the path all the
way up to the file name and I'll just assume that all that part is the same and the only thing that changes is the file name
there.

So, let's take a look at this page in browser and you'll see this is loaded up on my website at pw.org and at that path and
this is hyperlinks.html. And this link here is the link we're looking at it and it just has this here.html in the link and so
when I hover my mouse over the link, you'll see the title bar at the bottom, shows the location of the page that it's going
to call up when I click on it and you'll see that location is the same as the location in the title bar, with the exception,
then instead of hyperlinks.html, it's got here.html.

So, if I click on that, you'll see that the only part that will change is this last part there. So, I'll go ahead and I'll click on
the link and sure enough all the change was that and you've got here.html, instead of hyperlinks.html. So, I'll go ahead
and go back to the previous page and you'll see that the visited link color has changed. Likewise, with Over there, this is
another link and it has a subdirectory before there part but since there is no slash at the beginning of subdirectory,
it's going to go ahead and just use this part here again and it will replace that with the subdirectory/there.html.

So to be in another directory, but it will not replace all of this all the way back to the beginning, because I didn't begin
with those slash. If I begin with the slash there, it would replace all of this. But in this case, it's just going to replace that
last part, with subdirectory, and there.html.So, I'll go ahead, I'll click on it and you'll see that now we're a
directory deeper, and we've there.html and it did exactly what we expected it to do. And this one here has a special
notation with these two dots. That means go up a directory.

So in this case, instead of just replacing this part here, it will go up a directory and replace all of this. So, we'll get this,
else.html. And actually the link has a dash X at the end of it, so it will be else-x.html and it will start at that directory up
one level. So, there we go, else-x. html and it's up a directory. So, I'll go back and now we are in our xhtml links directory
again. And finally, this one, this is a link to an image and it will just display the image and likewise it will add this
directory after the xhtml links directory here and show that image.

And that image is the parts of the URL, from our last lesson. So, that's how relative links work.Relative links work relative
to the current location, the location of the file that has the links in them and they are pretty simple once you understand
them.

Specifying a base URL

So, in our last lesson, we learned about relative URLs and in this lesson we're going to talk about how you can change
the base of the relative URL. In other words, we learned that relative URLs are relative to the location of the document
that has a link in it. But you can actually change that by using the base tag. The base tag goes in the head section and
here is the base tag here and all this does is it specifies a location that all the URLs in this document are going to be
relative to and again this file is available on my web server.

I'm actually using a local copy of it, because it can illustrate the same point. You'll notice in the browser here that this file
is on my local machine at a file URL. Yet when I hover my mouse over this link, you'll see at that bottom. It's a link on the
server and yet if you look at it in the text editor that this link, it doesn't have that whole http part of it. That's in the base
and so it takes this and it uses this as the base for the relative URL and so this relative URL will start with thexhtml-
links/another directory.

Let's look at that again in the browser, and we see in the bottom in the Status bar down there that it shows that URL
relative to the base URL at the top of the document. I'll go ahead, and I'll click on it and you'll see that the location bar in
the browser will change and it will have that location on my web server. So, I went ahead and loaded this off of the web
server,http://bw.org/misc/xhtml-links/another /yet.another.html and when I click on this link, it will actually take me
back to the version of it that's on my server there.

But it's the same file with that base URL. So that's how the base URL works. It changes the base from which the browser
will construct URLs based on a relative URL. So this relative URL is no longer relative to the location of this file, instead
it's relative to this base URL that we've specified in the base tag, in the head element.

Linking within a page using fragments

Remember when we talked about the parts of the URL? This part of the end called the fragment, this starts with the
pound sign or the hash sign. That's what this lesson is about. This is about fragments and how to address them and how
to create them in the page. So, a fragment is a part of a page. It's a link to a location within the page not necessarily at
the top.Normally, when you have a link to a web page, it brings up the page all the way scrolled to the top of the
page. Sometimes you might want to link to a page so, we scroll down a ways to aparticular part of the page and that's
called a fragment.

So, let's look at how this works in a browser. This is a list of Retail Stores and this is from a book that I wrote with
my sister Lynda a long time ago called Creative HTML Design, this was one of the examples from that book for this
particular technique. And you'll notice that there is a list of states at the top. These are two letter State Abbreviations
except for the one in Canada. Then there is a long, long list on the same page, all of these stores, and all of these
different states.So, if I go on here and I click on say Illinois, it takes me to the part of the page, you see I've scroll down
that is Illinois and these are the places we can buy those rubber stamps that we are talking about in the examples for
that book.

Now I click on the top link and this takes me wholly back to the top of the page, so that I can look for maybe another
state. So these are fragments, you will notice that the URL now because I clicked on the top link has the pound sign and
the word top and when I hover over one of these top links, you'll see down at the bottom there that the URL is the
whole URL to the page with the pound sign top at the end of it and when I hover over one of these other links, for the
states, you'll see that down at the bottom in the status line, it shows the path to the page with the pound IL at the end
of it.
So, those are the fragment links and we are at links to, if I click on this, is called the Named Anchor. This is anchor into
the page and its' done with an anchor tag. Let's take a look at how this is done in the HTML. This is the XHTML for the
same page and you'll notice it has the list of states here with these normal looking links a href= and then its got the
pound sign and the two letter code within the href attribute. And this is how you link to a part of a page, this is called a
fragment link and it's a relative URL, so it fills in the rest of the URL from where the page is located that has a link in it
and it just sticks this at the end of it in the fragment part.

If there is already fragment part, it replaces it with this and so you get a link just down to that part of the page. If we
scroll down here pass this links, you'll see the named anchors. This is a named anchor write here. See it says a
name="AK" then the end of the begin tag and then it has the end tag for the anchor. You will notice that I made a
separate end tag even though this anchor element is empty, I could have written it using the shortcut notation that we
use inother places where we have a tag with no end tag and in modern browsers that would probably work.

At the time, I wrote this page which was a number of years ago, I try that and it didn't work in a lot of the browsers and
so today, they probably work better but for this particular usage, I still write it the old way because I know that there
may be some browsers out there with a short-hand notation doesn't work. So just to review, this is the named anchor
and this is the target of a fragment link and it's an anchor tag with just the name attribute. So it doesn't have the href. It
just has the name attribute and that makes it not a link.

It makes it a target for all links. It's a named target. And over here are the fragment links, there are also an anchor tag
and a tag but this have an href attribute which makes it into a link and so the content of it, here the AK that will get
underlined that will become the part that you click onwith your mouse to go to that link. Then here you have the
fragment URL, this is a relative URL.It gets tagged on to the end of the URL of the page where the link exist and it has just
the fragment part so that it will link you down into that part of the page.

So looking out in the browser again, I can just click on that part, I'll click on AZ over here and that will take us to that part
of the page. You see we'll it scrolled down, the scroll bar over there and I click on top and it takes us back to the top of
the page. So that's how fragments and named anchors work.

Creating image links

Remember that an image is an inline element and that means that it flows as part of the text and that also means that
we get to use images for links. You'll see this a lot, you see an image in a web page and you click on that image and it
takes you some place else and everybody is happy. They can use their images as links as it should be. And so, here's an
example of how that's done. This is an XHTML file and here's a paragraph, and in that paragraph we have "This
paragraph has an image that is also a link." And in fact, you see it down here in the browser.

This paragraph has an image that is also a link. And there is the image and you can see it's got this pretty blue box
around it, which ought to tell you that that's a link. You see the browser changes when I move it over that and when I
click on it, it will take us to lynda.com because here's the anchor tag, a href=http://www.lynda.com/. So, I click on that
and there is the lynda. com web page and I'll press the Back button. It will take us back here. We'll see that the pretty
blue box is now purple because that's our visited link color.

And so that's how an image works as link. Well, there are couple things about this that I would like to change. One is the
pretty blue box. I'm not actually very fond of it. So, I'd like to get rid of that. How you do that is with the border attribute
in the XHTML. So, in the image tag, I'm going to type an attribute here, border=0 and that gets rid of the box. Go ahead
and save it and reload in the browser and the box is gone. That's actually much more attractive, I like that a lot better
and so you see when I hover my mouse over it, it's obvious that it's a link and I click onit and it takes me to lynda.com
and I click the Back button and I'm back here and everything is good.

Except, you'll notice a little dotted line around it and frankly, there is not a way to get rid of that in the Firefox
browser. But you'll notice that it extends beyond the image. The image actually ends about there and the dotted line is
actually beyond it and enclosing the space after the image. In fact, if I click outside of the image, we'll get rid of the
dotted box but you see that my cursor actually starts changing during that space. That space after the image is part of a
link and that's not really what I want. On the other side, it doesn't do that.

So this is just a quirk of the Firefox browser. Actually all the browsers have some kind of a quirk in this same area and I
can get rid of all of those quirks with the same technique. The reason that space is part of the link is I actually told it that
I wanted that space to be part of the link because after my image tag I've a new line and a couple of spaces here and
then the end of the anchor tag. You see and we remember that the browser will take all of that white spaceincluding the
new line and the spaces and folded into one space which is exactly what it's done here, so it looks all nice and spaced
out in the sentence.

But that's part of the link because I've included that in the A container. So the way to get rid of it is to take the space out
of the container to abut the image tag right up against the A tag. So I'll do that at the beginning, because even though
isn't creating that as part of the link, in other browsers do and then over here at the end, I'll go ahead and I'll close up
that space as well.And so now our image tag is right up against the anchor tag.
So the end of the begin tag, the anchor tag, there is no space between that at the beginning of the image tag and then at
the end of the image tag here, there is no space between that and the end tag for the anchor element. So, when I save
this and reload in the browser you'll see that you no longer have this problem. The space is not part of the link anymore
and if I click on the link, you'll see that dotted box is now tight around the image and it's not enclosing the space after it
anymore or the space before it.

Now the only problem with this is that this makes it necessarily longer and you know how I am.I like for things to look
good in my editor as well as on the page. So I'm going to show you how this can be pretty in the editor and on the
page. You notice if I break the line here, and I'll indent it a little bit, that space is inside of the anchor begin tag. So that
does not actually get rendered by the browser. That's part of the rules. Browser is not allowed to render anything inside
of those angle brackets. And so I can do the same thing over here and I'll actually indent that like that and so the end of
the A tag is over here right up against the image and the end of the image tag is over here right up against the end tag
for the A.

And so those spaces and those new lines while they are up on the screen in the editor and they help to make that pretty,
they are not going to be rendered by the browser. So I'll go ahead and I'll save this and I'll reload over here and we'll see
that our problem is still not a problem anymore. Those spaces are still not part of the link anymore. I can click on this
and that full square is tight around the image. So in summary, this is how you create links out of images and this is how
you make them work well in the editor and also on the page.

Lesson5: Tables

Introducing tables

Tables in XHTML and HTML are useful for showing tabular data for associating data and for aligning visual elements on a
page. And so we're going to look at some examples of some tables here and look at how tables work. In this first lesson
in this chapter, we've this example table and you'll see that it starts there on the page, the table tag, and way down here
in the lower part of the page, you'll see that it has the closed table tag. So the table tag is a container and it's a block-
level element and it creates a table.

And so within the table you've different pieces of information. Here is the caption that says My Favorite Albums and so
that associates with this here on the screen, and so your caption is useful for labeling the table as a whole. And then
we've a table row and you see it says Artist, Title and Comment. So that's this row here. So tr is for table row and it's a
container and it only exists within a table. It's not legal outside of the table. And th is a table heading element and that's
for these cells within the table, right here.

Now a table is organized into rows and columns, so you see the rows going across and the columns going vertical and
each of the individual places within each of these little cubbyholes within the table is called a table cell. And so a table
cell is one item within a table. And so here we have a table cell and here we have a table cell and here we have a table
cell and these were heading cells as they have the th tag and these are data cells here as they have the td tags. So th and
td are container elements. You see the begin tag and the end tag.

And they are also block-level elements; they are only legal within a table row and they can have text content inside of
them. So you can put text inside a td, you can put text inside a th, you cannot put text inside of tr and you cannot put
text inside a table tag. Table tags can only have captions and rows and a table row can only have headers and td data
elements. Notice here also on the tr that I've the valign=top attribute.

And what that does if I drag the browser here so that this text wraps. You see how the text wraps but the data remains
at the top of the cell. And I like it this way. It helps me to see where the cells are, especially if I don't have the borders
and we'll talk about borders in a moment.But if I take this out, you'll see that the default is for a middle alignment.  So I
can save that and reload here. You see that these cells, they are aligned to the middle and not to the top. I like them
better at the top. It's you know personal kind of a choice.

The other options are middle, which is the default. I'll save that and reload and you see that Middle is what it does there,
or you can say Bottom. And save that and reload. You can see that these are aligned to the bottom when they have
room to align. And so I tend to make it top because I like the way that looks. I think that makes more sense to me. If it
were up to me, and it's not, that would be the default. Go ahead and reload this page so that it's aligned at the top and
there we go.

Now I've turned on the border in this so that you could see the table rows and columns and so this all makes a little bit
more sense. Normally, the default's to off. So if I delete that then save it and reload, you'll see that there is no border by
default. You can also say border="0". Put that in quotes because it's XHTML and save and reload and so you can see
that's with border="0".You can also put in a different number and you get a bigger border.

So if I say border=3 and reload, you'll see we get big fat borders and with the drop shadows on them. You can see it will
more evident if I say something like border=7. That should be pretty obvious. Go ahead and reload. So that's seeing the
number of pixels and the size of the border and that's what it looks like there on the page. So border=1 is nice for being
able to see the table organization there and so that's why I've done that. Normally, I would leave border=0.
Of course, this table is not very attractive the way that it is and if you want to make it attractive, you can use CSS to
format it and in the next lesson, we'll talk about that. But this is the basics of how a table works and how you can use a
table to present tabular information.

Formatting tables with CSS

In our last lesson, we looked at how tables work in XHTML and HTML. In this lesson we're going to look at how you can
format your tables using CSS. CSS stands for Cascading Style Sheets and that's the technology that's used on the web for
formatting web pages and making them to look prettier than the default might be if you didn't have any styling at all. Of
course, a lot of which you do with CSS, you can do with attributes in XHTML and HTML. Most people recommend that
you use CSS. I'm going to tell you why CSS is better.

In a nutshell, using CSS, you can name your styles and you can then apply those styles to a number of different places
within your document. Then if you need to change them, you can simply change it in one place and that changes all
across the document. It's a lot easier to manage your styles and it's a lot easier to apply them in an organized
fashion. We'll see some examples of that in this lesson. So let's get into it. Here is the table, here in this table- css.html
document and this is our editor here on the top and this is the browser here on the bottom.

So you can see it's the same table from our last lesson, which looked like this except that it's got some style applied to
it. So it's a bit more attractive and in my opinion it's a bit easier to read as well. So here is the XHTML file and this is the
CSS file over here in this tab and we'll be looking at this in a little bit of detail as we get into the lesson. For now, let's
look at the XHTML. You see there is the table and the table ends down here at the bottom. It looks very much like the
table we did in our last lesson with a few significant differences.

We have these class attributes here for applying the styles and we'll see how that works in just a moment. So, here's the
table and over here in the CSS, you'll notice that we have some style applied to the body and we have some style applied
to the table, we have some style applied to the caption. This is an example of Cascading Style Sheets, CSS. What the
cascading means in CSS is the styles apply on top of styles. So, for example, we have some style applied to the body, the
background is white, you see the FFF means white, the font is set to Tahoma or Sans-serif if Tahoma is not available on
your system.

So we see that the font throughout the document is this Tahoma font and the font size is set too, because Tahoma tends
to be a little bit big, so I made it a little bit smaller. These are just my choices, of course, you can make your own choices
and your own style sheet, but I like them like that. So that's applied to entire document. Even to these elements within
the document, it's still applied. So the table itself has a border. It has a border style. It has a border color. The
background of the table is this white, because that's the style that was applied to the background of the entire
document.

If I change this from white and make it-- well, I don't know. Say FCC, which is sort of a reddish color, save that and
reload. We see that applies to the entire document and it applies to the background of the table there. Now there are
certain table cells where I've set the color to be grey and to be white. Of course, those get their own styles, but this is an
example of the cascading, because the entire document has this color. That's also applied to the elements within the
document, like for instance in this table.

I'll change that back. We'll see some more examples of this as we go on. It should be really clear by the time we're done.
Save that and reload. Now, if we look over here at the caption, we see it says My Favorite Albums, and it has the caption
tag. If we look in CSS, we'll see that we have a caption selector here on this style and that applies to all the caption tags
that it will find in the document, which happens to be 1. It applies this bold style. The font is the Tahoma font because
that was set up in the body.

If I were to change that to something else like, oh, I don't know, Comic Sans MS, save and reload. Then we see the entire
document changes to Comic Sans MS including even thecaption where we have caption set to bold. It's picking up that
font from the body. This is the cascading in Cascading Style Sheets. Put this back to Tahoma and save and reload and
that changes it everywhere in the document.

Now, let's take a look at the table row and the table heading. Now, we'll notice in the Cascading Style Sheets, table row
does not have a style attached to it. Table heading has this align equals left, font-weight, bold and color equals 666,
which is a medium grey, and we'll see here that the table heading in this row here, it's got the bold.

It's got the left-align. You will remember in our last document, we'll take a look at that, that thetable headings were
centered. I like them a lot better on the left. I think they read better on the left, they align better with the data on the
left, so they look more like the headings on these tables. So it has these styles applied, of course, on top of the styles are
applied to the body of the document. We have this row here which has the table row class equals grey and then it'sgot
the data cells with their own classes: artist, title and comment. This is another example of cascading.

You'll see over here we have tr.grey, tr.white and td.artist and td.title. These are selectors with classes, so tr. grey means
a TR tag with a grey class. We'll look over here. We have a TR tag with a grey class. So wherever the document sees tr
class = grey and there is another instance of it here two rows down, then that class will be applied from here.
tr.grey has a background color set to this light grey. So all the cells within that row, we have TD, TD, TD, will all get that
grey background. You'll see here they are grey, grey, grey. So that gets applied to these cells. Even though these cells
have their own class, this one is artist, this one is title, this one is comment, these data classes get applied on top of the
row class because these elements are within the TR container.

So the TR is wrapped around these data cells and so this class gets applied first because it's in the outer box and these
classes get applied on top of that because they're inner boxes. So it looks like this on the page. You have the grey all the
way across and then you have this Artist class, which has got this maroon color, this Title class, which is italic, and this
Comment class.You see here the Comment class has a blue color to it. So these classes here, td.artist, td. title,
td.comment, they get applied after the row classes.

It doesn't matter where they are in the document here. I could move these, let's drag them up here and now they're
above, save that and reload here. It doesn't change. They are still applied in the same order; you've got the grey and
you've got the other. That's because it's not what order they are in, in the file. It's how they appear in the document. It's
what container contains something else. So I'm going to put this back just because I like it that way. Let's save it and
reload and we'll see that this is still how we expect it to be.

So the Artist class, the Title class, the Comment class, these apply to the fonts. We have a color, we have italic, we have
another color and these get applied on top of the row classes.So in a nutshell, that's how it works. It's really easy to do
by using the classes in this way, like for instance if I wanted to change this grey and make it maybe a lighter grey, I'll just
type anEEE instead and save it. It applies in all of these different places throughout the document. You see now we have
this very light grey.

Hopefully, you can see it on your screen. I can barely see it on mine. That it applies all throughout the document. I only
need to change it in one place, or make it maybe a little bit bluish, save that and reload. We have a slightly bluish
grey. So change this in one place and it applies throughout the document and that really is the power of Cascading Style
Sheets right there. So this is how you can format a table to make it attractive using CSS. You see here's what our table
looks like before, very plain. That's the defaults for the HTML. That's how it was originally envisioned, so that they could
put tabular data in a document.

This is what you can do using CSS to make it more readable and more attractive.

Aligning images with tables

So, we've looked at how you present tabular data using tables, and now we're going to look at how you align visual
elements using a table, how you assemble pieces of an image so it all looks like one image. This is a very common
technique. I still prefer to do it with tables. I think it's easier, and I think it falls well within what tables were designed to
do. So, this is how you align visual elements using tables. If you're interested in how to do this using CSS, I'm working on
another course on CSS positioning, which you will also find on lynda.com, which will show how to do it that way.

In this case, we are doing this with tables, and this is how it's done. Here we have an XHTML document with a table, and
this is the table. You'll notice it says border=0, cellspacing=0, cellpadding=0. Again, you can do this part with CSS, if you
prefer, but the idea is that you want to turn off all of that spacing stuff that tables normally do, so that the images butt
right up against each other and create one big image. So, here is the nine parts of the image. There is three rows, and
each row has three cells, and there are all the images.

If we look at it on the browser, these are the nine images. If I just right-click on one of them and say View Image, you'll
see that part of the image, and you'll see that that's part two of the image, and go back, and there we have the whole
image. I'm going to go ahead and turn on the borders in the table, so that you can see that. I'll save here in the editor
and go back to the browser and reload. Now we have the borders turned on, so you can see how the image is
divided. You have nine parts of the image. This part here is entirely white, so is that.

But there are the nine parts of the image, and you'll see this was broken apart because it has parts that are animated
GIFs. That makes it easier, so you don't have to animate the entire thing; you can animate just the parts of it. Anyway,
that's how that's done. Now, you'll notice that this has bad version, and there is a reason for that. Let me go ahead and
turn off the border. Again in the editor, it will save, and now I'll reload this in the browser. Actually, this browser no
longer shows this problem. This is Firefox, and Firefox thinks it's smart enough to know what I mean instead of what I
say.

So it's putting the image all close to each other, even though in the document, I've done it wrong and it's not supposed
to show up that way. You'll see that the cutapart and the cutapart (bad version) both look the same. For some purposes,
one could appreciate that. The problem is that it hides a problem which happens to show up in other browsers. So I have
another browser here. This is the Internet Explorer browser. You'll notice in Internet Explorer that it actually shows gaps
between the images. It used to show gaps vertically as well, and in this case it's only showing gaps horizontally.

Older versions of all the browsers used to show gaps in between the images as well. This is because there actually are
gaps in between the images in the HTML. Let's take a look at the XHTML document again. You'll notice each of my table
cells, TR for the rows, you have TDs for the individual data cells. Each of my cells has the TD above, the TD below, and
the image in-between. So, what's wrong with this picture? Well, you'll see that there is space before the image, and
there is another space because, remember that the browser considers a new line another space.

So we have, four, six, seven spaces or so here that are all getting folded into one space, because that's what the browser
does. And here after the image as well, we have more spaces. If we want the images to be butted right up against each
other, if we want the images to not have any space between them, then we need to not put any space in the source
document in the XHTML. So, here is cutapart_good, and these are in your exercise files. You'll see how this is done. We
have the TR, we have the rows. You'll see this all fits on one page really nicely, too.

It still looks very nice. We have the TD for the data cell, and there is no space at all around the image. There is the image,
and it's right up against the TD and right up against the TD. Now, the way that tables work, this space here should be
okay, because the browser isn't supposed to display that. That doesn't appear anywhere on the screen. The only content
in a table that's actually supposed to appear on the screen is the content inside the data cells and inside the heading
cells as well. So, the data cell--this is what you want--has got the image in it and nothing else whatsoever, no spaces.

So we have TD, TD, TD, all with those spaces, no spaces in this table at all. So if we look at the cutapart_good, in Internet
Explorer, we'll see that it has no spaces at all. So, that's how that's done. So, this is how you take an image that's in
pieces and you assemble it using tables. This is the correct way to do it. You have your table, border off, cellspacing off,
cellpadding off and you simply put the images in your table data rows, and in your table data columns.

It all comes together really nicely. It looks nice in Internet Explorer, and it looks nice in Firefox as well. So that's how you
assemble an image using tables.

Reviewing an alternative solution using CSS

In this movie, I'll show you an alternate approach to assembling our image using CSS instead of tables. Many people try
to avoid using tables for layout, preferring instead to use CSS.Without getting into which approach is better, they both
work just fine. I'll show you here how you can do this same layout using CSS. So here you see the same exercise we had
that we did tables. This is a CSS version. You can see that it looks exactly the same as the version that's done with tables.

So let's take a look at the code that makes this happen. So this is our CSS version, and here is the tables version. The
tables version you're already familiar with if you did the exercise with the tables version in this chapter. And you'll notice
that here's the table borders, cell spacing, cell padding, all set to 0, and your table cells-- all very easy to
understand. And then here is the CSS version, and here is the style sheet. This is the CSS inside of this block here, and it's
very simple; it doesn't take a lot of CSS.

And here, the structure of this actually looks very, very similar. So there are a few things that we should notice about
this. Now the biggest challenge in assembling images, and this is true for both the CSS version and tables version, is to
ensure that the image doesn't getdisassembled when the browser window is too small for the assembled image. Images
are in-line elements in HTML so the browser will try to wrap them if it can. Now for the CSS version, there are different
ways that you can do it. My solution here was to put the images in vertical columns with one div for each column, and
align those columns using float: left in the CSS, and then wrap it all up in an outer div with explicit dimensions, the exact
size of the assembled image, and this works really great.

This makes it so that no matter how you size the browser--and here's the CSS version here--that image does not get
broken apart; it doesn't get wrapped. And that of course is also true for the tables version. So here we have something
that's working exactly the same. The difference is that it's organized just a little bit differently. In the tables version, we
have them organized across because that's the way that table rows work, so 1, 2, 3, 4, 5, 6, 7, 8, 9. That's actually the
way that I numbered the images.

For the CSS version, I have got 1, 4, 7, 2, 5, 8 and 3, 6, 9. These are vertical; these are all the ones in the left column;
these are all the ones in the middle column; and these are all the ones in the right column. CSS works really well for
column layout, and so here instead of laying it out by rows, I laid it out by columns, and that made it work well. In the
CSS, for each column--and this is the column layout here--we have a float: left and a margin: 0 and a padding: 0.

So each column will float right up against each other, and they'll actually stack the first one on the left, the second one
to the right of that, and the third one to the right of that, and that's how float: left works in CSS. And then there is this
outer div, and that one here is cutapartOuter. And that outer div has the exact width and height, and that helps it to
know not to break apart. So you'll notice that I used an ID selector for the outer one because I know that there is going
to be just one of those in the entire document, so I used an ID selector for that. And for the classes for the individual
columns, I used a class selector called cut apart column (cutapartCol), and I used the same class selector for each one of
these.

And that allows me to really minimize the amount of CSS that I have here. So it's really not a lot of CSS to make this
happen, and it works really well. Now you'll also notice that I put the CSS inside the document. I did that because it
makes it easier to describe here in the movie. You can easily put this in an external CSS style sheet. It could be
incorporated into something else.It could be incorporated into the rest of your site and it could be organized just as you
would with any CSS. So that's how we get exactly these same results using a CSS style sheet forlayout instead of using
tables for layout as we did in the previous version.

Lesson6: Frames

Introducing frames

Frames in XHTML and HTML are a way of displaying multiple pages within one page. In other words, this is a frames
document and it has different areas and each of these areas has a separate XHTML page being displayed in it. When I
click on the links here in the menu side, on Info, it shows me the information page here in the big open part of the
frames and then Contact, it goes in this frame here, in the big frame. Each of these that I click on is going to show up
there in that frame.

If I open one of them by itself, in other words, here is the Info here, company information goes here. If I right-click on
this link and say Open Link in New Tab, then it will show that Info page in a tab all by itself and that's what it is
here. That's a normal HTML file. So, if we look at this in the Editor, here's our frames document and I brought up the nav
document here too. This is the navigation document on the left-hand side. You can see it's a normal HTML file and it's
just got that unordered list with all of the links in it, just like you saw there in the browser.

So that's this document here. It's just a normal HTML file or rather an XHTML file in this case that is simply displayed in
this frame. So, let's look at how this works in the frames document.This is frames document and you'll notice that it uses
a different DOCTYPE, a different DTD, a Document Type Definition. It uses the frameset one. So the frameset DOCTYPE
has these frameset tags available. So framesets have frameset tag and it has the frame tag. Now the frameset tag is a
container, just like any other container, you see it's got the begin tag here and it's got end tag there.

The frame tag is not a container, so it has the shorthand here for not being a container and not having a separate end
tag. The frameset contains frames and it can also contain other framesets. So this frameset here is contained within this
frameset here. The frameset can also contain a no frames part, so here is noframes and there is the end tag for
noframes. It has a body and a normal XHTML document within it. That gets displayed if it's displayed on a device or on a
browser that does not support frames.

So that noframes part if what would display if the browser looking at the page does not support frames. So here is the
frameset tag and you'll notice that it has columns attribute, cols. It's short for columns. So that's for vertical divisions, as
you can see the comment here. This is an XHTML comment. I'm just going to cover this real quickly here. XHTML
comments, just like HTML comments, they have an opening angle bracket and an exclamation point and two dashes and
a space.

That all delimits the beginning of the comment. The space is required; you have to have the space. And then at the end
of the comment, it has a space and two dashes and a closing angle bracket. That makes a comment. This does not get
interpreted by the browser. It doesn't get displayed on the page. It's just a comment so that we can help to understand
the code. So this comment says cols for vertical divisions. I put these things in to help myself remember, as much as
anybody else, because I don't use frames very often, so I want to remember how they work.

So here's the frameset for the columns and it has a number here, 130,*. We'll get back to that in a moment. Within this
frameset, there is a frame that has that navigation on the left-hand sidethat we saw in the browser. Then there is
another frameset. This one says rows, this is for horizontal division. It's got a number here and an asterisk. So, this
frameset is for rows. So looking at it on the browser, the first frameset is the column, so it has this one and it has this
one, which is another frameset. So, it has this frame and it has this frameset that's divided horizontally.

The second frameset has the row, so it has this horizontal one here and that horizontal one there. Going back to the
document, let's look at those numbers and see what those mean. I bet you can figure out by this time. 130 is the
number of pixels for the first division and the frameset and then the asterisk means use up the rest of the space, divide
it equally amongstwhatever frames are left. So in this case we just have two, we have the one, which is the nav.html,
and so that has that menu in it and that is 130 pixels wide and it's vertical.

Then the next one is this frameset, which takes up the rest of the space. So, if we look at it again in the browser, you see
here is the 130 pixels and there is the nav.html. If I right-click on that and say Show Only This Frame or Open Frame in
New Tab, there it is. There is the Navigation menu and that's what's there in this column all by itself, 130 pixels
wide. Then the rest of the space is divided up by this other frameset. Now going back to the XHTML, here is the frameset
on the right and it says rows, 75 pixels and then an asterisk.

So, the first document is going to be 75 pixels high at the top and then the next one is going to take up the rest of the
space. So we'll see here in the browser. This one here is the 75 pixels at the top and this one is taking up the rest of the
space. So that's how the frames work. The frameset document sets up the space and then it specifies where all of
these documents come from. So, looking again at the HTML, we have a frame here with source=content/nav.html and
name=nav and then a source here for this one, it says titlebar.
This was the one at the top of the rows and source here for default content at the bottom of the rows. Now, let's take a
quick look at this nav.html and this is one other feature that you need to know about frames. And notice each of these
links in here, these are normal anchor tags, a href=info.html target=content. This is an attribute we haven't seen before.
target=content. What this means is that this link when it's clicked on will be displayed in theframe that's named content.

We look back over here at the example. We see that we have a frame that's named content. It has name=content. This
one is name=title bar. This one is name=nav. This one is name=content. So when those links are clicked on, we can get
nav.html again, they will show up in the content frame. If we look at this again, the content frame is the bottom frame. I
have a comment there. Remember, frameset rows = 75, *. So the first one is 75 pixels and the next one takes up the rest
of the space.

So if we look at the browser, we see that this is the 75-pixel one and this is the rest-of-the-space one. So when we click
on these links, they're going to show up in this frame here that's named content and that's where they show up, so
that's how that works. All right? So reviewing once more, it's really very simple. We have an outer frameset and that
frameset has two spaces in it. It has a frame and I have another frameset. The inner frameset has two spaces and these
are horizontal; the outer ones are vertical.

The outer one is vertical because it says columns and the inner one is horizontal because it says rows. Then each of
these, we have-- this one is named title bar and that takes up 75 pixels. This one is named content and that takes up the
rest of the space. Then the navigation file, which is in the left frame, that targets the content frame for each of the links
using the target attribute. So see, that's how it works. That is, in a nutshell, how frames work.

Hiding frame borders

In the last lesson we created this page here, which is the frames page, and it has these different documents in the
different frames, and we explained how all of that works. And you'll notice that it has these lovely borders here, when I
hover the mouse over them, the pointer changes to something that I can drag. So I can actually resize these borders, and
that's not necessarily what you want when you're creating a frames document. Most people would rather have their
frames document look like this with no borders whatsoever, and all their pages are nicely butted up against each
other. So they blend together and you can even do nice things with your graphics to make them merge, so that it looks
very coherent and then when I click on these links, you'll see that they all show up in the content area just all nicely
merged together.

So most people would like to have that rather than this. Now the problem with this is you'll notice that it says your
Frames Example (not valid), and that's because that's the title that I gave the document, because there is XHTML in
there that's actually not valid XHTML and that is necessary to get this effect. The problem is that the XHTML standard
does not include the facility to make these borders go away. So here is the valid example, and this is as close as you can
get to with valid XHTML, and you'll notice it still has this border, and I can still grab it, and I can still move things around
which is not at all what you want when you're trying to get this effect here.

So just as long as you understand that this is breaking the rules, and that it works in every browser I've tried it in, and the
browser companies of course are more interested in having it work than in having it satisfy the standards committee,
and so am I, and so are you. So we'll go ahead and I'll show you how this works, and just understand, you should try it in
all the browsers that matter to you and make sure that it actually works in all those browsers. As of this recording, it
works in all the browsers that I've tried it in. So here is the XHTML that I'm talking about, and this is a frameset
document, and you'll notice that the only difference here between this one and the one that we looked out before is
that it has this border="0" attribute, and it's just in this one place in this frameset.

It doesn't really need to be in any of the other framesets or any of the other frames, or anywhere else in the document,
and really that is the entire trick. The problem of course is that that attribute is not defined with this tag. And so, if you
try to run it through one of those automated validated things that the standard committees would like you to be using,
that I haven't even shown you where they are, you'll find that it doesn't validate, and that's really the only problem
which is not a problem, because it works in the browsers, and that's what matters. So this is how you do that. I'm going
to show you the valid version here, which has this frameborder="0", on each of the frames and that actually makes it
stop displaying that gray border that we saw in this original one.

And instead, it gives you this white border, which doesn't really help much, and so that's what the standard version of it
does. The not valid version of it is the one that works, and this has the Border="0" attribute, and it looks like this in the
browser. So that's how you make the border go away, and as I said, it works in all the browsers that I know of, and it is
not a part of the XHTML standard.

Creating inline frames using iFrame

In this lesson we're going to talk about iFrames, which is the kind of frames that people actually use these days. The
other kind of frames that we've been talking about for the rest of thischapter, those frames that divide up the screen
into different areas, very few people are ctually using those anymore. You don't see them a lot on the Internet
anymore. They tend to mess up the search engines and so people don't get a lot of traffic, and they also tend to mess up
the users. They're hard to navigate. The back button doesn't always do what is expected to do, and so people don't like
them, and they don't use them very much. The iFrame on the other hand is actually very useful, and people use them
quite often.

They're usually used to display some bunch of stuff that you don't want taking up a lot of space on the screen. You see
here we have this Standard Disclaimer, so you'll see a privacy policy there, or terms and conditions, or something like
that. They have to have on the screen for legal reasons usually, and that they don't necessarily need to take up a lot of
real estate within, so that's what they're in. And just for a little bit of extra fun here in the exercise files, you'll find my
Standard Disclaimer. One year I just sort of collected all the disclaimers I found on box tops things and stuck it in
there. It's kind of fun to look at if you enjoy such things.

In any event, here is the iFrame document. It's very simple. You see it uses the normal XHTML Transitional DTD. The
Doctype is the normal one that we've been using. We don't have to have a special Doctype for that. It has all the normal
XHTML that you might find. It's got this H1 tag, and the P tag, and all of that, and here it's got an iFrame tag, and this
iFrame tag has a begin tag and an end tag, it's a block element, and it has its content wherever you want to have display
for browsers that don't support the iFrame.

Then it's got a source attribute, where you specify the file, and has width and height, little bit of style information here
to create that nice little border around it, and that's it. And then it pulls up this other XHTML file, iFrame-content, and
this is what goes inside the box, and you see that we have that sourced with the source attribute. It tells us where to find
that, and that's this file here, which is just a normal XHTML file. You'll notice it's got the normal transitional Doctype at
the top, and it has a little bit of style information there , and then it has the heading iFrameContent, oh, that's the title,
iFrame Content, and that doesn't actually display anywhere here, but that is required by the standard.

So we go ahead and put that in. Then it's got a body, and it's got this heading, the Standard Disclaimer is the heading,
and then it has this paragraph. This product is meant for educational purposes only, blah, blah, blah, and that goes down
in here. You'll notice that this is an actual frame, in an actual file. I can select with my right mouse button. I can say let's
Show Only This Frame, or open it in a tab. It opens in the tab, there is the title , and there is the whole document
there. So that's how you make an iFrame, you'll need to that if you need to displaysome disclaimer, or some legalese
that you have to have in your webpage.

So you don't want to have it take up a lot of screen real estate, use the iFrame tag, and you use the source attribute ,
and whatever other attributes you need, and there it is. It displays in that nice little handy box with a nice little handy
scroll bar, so that people will look at if they are inclined to do so.

Lesson7: Forms

Introducing forms: part 1

Forms in XHTML and HTML are how you provide interactions between a user and a web server. So they look like this.
You have places where you can type things. You have buttons that you can press, and you have more places you can
type things and more buttons you can press. There are different types of elements in a form and these are called
widgets. So you can type text into a text widget, you can press radio buttons, and radio buttons are the kinds of buttons
that are mutually exclusive.

In other words, I can only press one radio button at a time in a group of radio buttons, and they are groups together, so
that you can have one choice out of several. Checkboxes are widgets that you can check and uncheck at will and they
do not group together. So you can always check as many or as few as you like. Then this is a submit button. So when I'll
click on this button, it will actually submit this data to the server, and then a program on the server takes over, and does
whatever it's supposed to do with the data from the form. So there are a couple of things to understand here.

The most important is this is a two-part process. There is a front end and there is a back end.The front end is the XHTML
or HTML that creates the form, and we have that here in this text editor here, so that you can see how to create these
widgets. This course is about the front end. The back end is what the server does with the data once you submit it to the
server. The back end is usually written in a program like Perl or PHP or something else. It accepts the data from the web
browser, from the form that the user has filled out on the web browser using a protocol called CGI stands for
Common Gateway Interface, and it's simply the very small, very simple specifications of how the browser talks to the
server and passes back and forth thisinformation that's in the form.

So this is about the front end. Now obviously the form is no good without some kind of a back end, and you need to
understand that the process of installing a script on the back end issomething that varies from server to server. I can
give you the script, but I can't necessarily tell you how it installs on your server. The scripts that I have provided in the
Exercise Files are written in Perl, and I have a separate course on Lynda.com about how to install Perl scripts on a
server. Again, because all servers are different, it doesn't cover all possible situations, but it covers a lot of them.

And if you are interested in how to do that, you can take a look at that course using Perl with CGI, I believe it's called,
and that will teach you how to do that. In the meantime for the purpose of testing your form, I have installed a
small script on my server, and all it does is it gives you back exactly what you put into the form, so that you can
experiment with your form fields, and you can at least design a form and follow along in this lesson. So I'm just going to
go ahead here and click on Send, and you will see what that does is it just echoes back what you have you typed in the
form fields and gives you some other information that probably doesn't mean a whole lot, but in the context of the
server, it does.

So that is the there, so that you can follow along in this lesson. I've included that script in the Exercise Files, and I have
also included a mail form script in the Exercise Files, which if you have somebody who knows how to install such things,
you can install that on your server and use this form to actually send feedback to a given email address that you provide
in the form.I'll talk a little bit about the CGI programs in the next lesson in this chapter, but this chapter is really about
the front end. It's about how to do the forms in XHTML and HTML. So let's take a quick look at the form here, and what
it does, and how it works.

This is form in XHTML, and it starts here with a form tag, and form tag has a couple of attributes. It has a method
attribute, and it has an action attribute, these are required. Method = "post". There are two choices here. There is get
and post, and we'll talk about those in a minute. The action attribute gives the location of the CGI script on your server in
a URL. In this case it's my server, bw.org is my server, and it's this test.cgi, and again, you are welcome to use that just
for the purpose of following along in this lesson.

Then we have the form elements. The forms elements are typically like this in an input tag.There are a few exceptions
and we'll see that. The input tag here, in this case, it's type = "text" and that makes a text field. So we have here this little
text box, one line of text, and that is done with this input type = "text" and name = "Name". We will talk in a moment
about what this name attribute does. So here is another text box.

I'll scroll down here a little bit, and here is our radio buttons. So we have input type = "radio", name = " Retail", value =
"Consumer" and checked = "checked" and then here is another radio button. Input type = "radio", name = "Retail", value
= "Store". So you will notice that this one here says checked = "checked" and all that means is that. That's the button
that is selected by default, and this name = "Retail", you will see, we used the same name in both of the radio buttons.

That's how they are grouped together. So you can only have one radio button selected at a time in a given group,
and the group is defined by having the same name. So if they have the same name, only one of them at a time is going
to be allowed to be selected. So we'll look at this in the browser, and here we have these two. Now I'm going to reset
this form. If I just press Reload, it doesn't actually reset the form. It will reload the HTML, and it will show any changes
here, but the data remains the same.

So if I want to actually reload the form, and reset it to its default position, I actually have to go up into the location bar
and select it, and press the Enter key on my keyboard, which I'm going to do right here. That actually resets the form to
its default state. Different browsers work a little bit differently, but most of them require something like that in order to
reset a form. So now it's in its reset state, and you will see that the Consumer button is pressed, because I have this
checked attribute here. If I take that out and save it, and then I'll reset the form again by going up to the title bar and
pressing Enter.

Now you'll see that neither of the buttons are pressed. I need to press one. I don't have to. I can press neither of
them. This is the only way to get neither of them to be selected. If I now select one, or select the other one, there is now
no other way I can click outside of it. It doesn't unselect it. There is no other way to get none of them to be selected, but
there is always going to be one at this point, and no more than one. So I'm going to go ahead and put that checked back
in here, and save, and we'll go back and reset, and there we are.

Moving on, here are the checkboxes, and again, if I want to make one of these checked by default, I can use that
checked = "checked" syntax. Here each of them has a separate name you will notice. The name attribute is different in
each one of them, and you will see that thetype = "checkbox" and that's what makes them checkboxes like here. You will
see also that the text that's related to both the radio buttons and the checkboxes is separate. It's outside of the form
element. It's done in the HTML. So I have word consumer here before the radio button for Consumer. I have the word
retail stored here before the retail store, and all of theseinput elements are inline level elements.

So you go right in there with the text, and they just flow just like the text. So that's how that works. I just I want to show
you, if I put in here checked = "checked", you will see that now this Hobbyist checkbox will be selected by default. I'll go
back here to the browser, and I'm going to reset the form by selecting the location bar, and pressing the Enter key, and
you see now that Hobbyist is checked by default. I can uncheck it if I want to, and I can check something else if I want to,
but it's checked by default, because I had that checked = "checked" default inthere, in the XHTML.

So I'll go ahead and take that out, and Save, and we'll move along here. We have another text box here. Input type =
"text" and then we have one called textarea, and that's right here.Textarea is a container, and it creates this text area
here, which you can type a lot of stuff into.You can type a lot of stuff in here. And if I just copy and paste that, you will
see that eventually it gets a scrollbar after it fills up for a while.

So you can actually put up a lot of stuff in a text area. The dimensions of the textarea are specified here with cols = "30"
and rows = "5". You can do different things within in CSS if you like. The contents of the container here, you'll notice it
has a begin tag and an end tag is the default value. So if I put in here, This is the default for the textarea, and I click Save,
and then I go in here and reset the form by selecting the location bar, and pressing Enter, you will see that now I get the
default value in the textarea.

So that can be useful, if you want it to default or something. We'll go ahead and take that out for now, and Save. Finally,
on this page you will see we have this button, which submits the form.It's the Send button down there at the
bottom. This is type = "image". So a type = "image" acts like a submit button. Instead, you can say type = " submit" and
I'll click Save here. Instead of this image here, we'll get a submit button, a normal submit button as we would see in our
operating system.

So I'm just going to press Reload, and we'll see that the image now changes to this submit button that says Submit
Query. That's the default text for that. You can change that with a value attribute. You can have it say value = "Label
goes here", and if I save that, then the button will say label goes here when I reload. See, label goes here. So I'm going to
go ahead and put this back the way that it was, and that's you create a normal submit button. Most people prefer the
image buttons instead, so they can create their own image.

They can create their own button. Most people prefer to do it that way. You can even do things like creating rollovers
using CSS and a lot of people like to do that. Those are the major elements available in a form. Those are the major Form
widgets available.

Introducing forms: part 2

Before we finish up with this subject, I just want to talk a little bit about what happens when you press Send. Now, in
this case you'll see that it's set to Action equals and this URL here. This URL here is a test script on my server, bw.org is
my server, and this is a test script that's available on my server. Go ahead and feel free to use this for testing your
forms. It doesn't really use up a lot of resources on my server. So as long as I'm able to provide that, I will.When we
press Send here, let's go ahead and fill some stuff and you can see what happens.

I am that, and I am that, and I am that. And let's see here, Other, something else here, and "I don't really have any
comments to write, so I won't write anything." There. When I press Send, it's going to send all of this data in the special
CGI format to that text script on my server and the text script on my server, all it does is it takes the data that it receives
and it displays it on the screen.

So go ahead and press Send and there we have it. It displays that on the screen, and here it is under CGI Values and here
is all the stuff that it got in the CGI. We can see that all the data is there from the different widgets that I pressed, and
didn't press, and all the text that I wrote in the various text boxes and it's displayed in alphabetical order, because that's
just what this particular program does and how it works. So the Name field has my name, Email field has my
email. These labels here on the left, these are taken from the Name attributes.

So in the Name field, the Name attribute says Name, and in the Email field, the Email attributes say Email. Next, we have
the Radio buttons. Let's take a look at the Radio buttons in the XHTML and those are named Retail, and remember only
one of those can be selected at a time. So one of these says Retail and it says Consumer. So the value from the
Consumer one gets sent in the Retail variable and the value from the Store one would have got sent if I selected the
Store Radio button.

But only one of these will show up with the name Retail. So that's there. Then we have these other variable check boxes,
Enthusiast, ProArtist, Hobbyist, HendrixFan, and I think I have selected three of those. I did not select Enthusiast. So we
didn't get one for Enthusiast, but we've got HendrixFan on, Hobbyist on, and ProArtist on. Then the Other field which is
named Other. So we'll see that here under Other. Something else here. That's what I typed.

Finally, the message field. That's our text area. You'll see it says the Name = Message, and that's what I typed in there. I
said I really don't have any comments to write, so I won't write anything. Finally, we clicked on the graphic and you'll
notice that the graphic here gave us the Submit variable, but it gave us two of them. One of them says .x and one of
them says .y and this is the standard way that Graphic Submit buttons work. It's actually giving us the coordinates on the
graphic where I clicked the mouse. So this can be useful in some situations.

It's very rarely actually used. Very few people actually use it or have an application for that. But you can see that it's
possible to have one and there are interesting things that can be done, like for instance you could have a map and want
to know where somebody clicks on a map and that would be a really easy way to do that. So those are the different
variables and how they work. Now, up here in the Form tag, you'll notice that we have this Attribute Method = Post. I
said I'd get back to that and tell you what that means. I'm going to change this to the other possibility, which is Method
= Get, and this will give you an example of what it does and it will show you how this actually works.

So I'm going to go down here and show you what it means. Now, I'm going to press the back arrow on the browser and
I'm back in the form and I have all this data in it. If I just select Reload, it will reload the HTML. Oh! I didn't save it
though. So I need to save that up here, there we go. That's saved now. And I'll select Reload and leave all my data in
there, but it will reload the form and so when I click on Send, it will use the Get method instead the Post method and
that's the Get method. So what the Get method does is it passes all of this CGI information, it passes it in the URL.
So the results of my form are all up here in the URL. See that? Name = Bill Weinman, Email = ww@internet.com,
etcetera. All that is in the URL. What this does is it allows the user to actually bookmark these results. So you can hit
your Bookmark button and get back to this page with those results already submitted to the CGI program. So that can be
useful if you're using CGI for navigation on a site and you want to be able to bookmark certain pages that you've got into
by pressing a button.

Most of the time though, you're going to want to use the Post method, and the Post method works like this. Type post
up here, and click Save, and I'll go back to my form and I'll click Reload. That leaves the data in here. I'm not actually
resetting the form. I would have to put my mouse up here and press Enter to reset the form. So we'll just hit Reload and
click Send and now it's using the Post method. You'll see that there is no data up in the URL. The way the Post method
works, it's kind of like an email message.

It's not exactly an email message. It sent directly from the browser to the server, but it gives all that data in the body,
rather than in the address. The Get method gives it actually in the URL, actually in the address. So all that data is
provided. That program works exactly the same and all this data is still available as CGI, but it's just not there in the URL,
and so you can't bookmark the data. You can only bookmark the location of the CGI. So most of the time, you are going
to prefer to use the Post method. Now, the Action. This is where you put the URL of the CGI program on the server.

CGI script, they are sometimes called. It's actually a program and it's usually written in a scripting language like Perl or
PHP or something like that. And that's the server side of it, and so on the front end as opposed to the back end, you
need to just specify where that is so that you know where you're sending your data. So that is forms in a nutshell. That is
the different elements of the form. You have the text elements, you have the graphic box, and the radio buttons and
buttons. This is what the Method means and the Action means.

So this is a good overview of how forms work and ought to be enough for you to be able to design some forms and again
while you're designing your forms, if you would like to go ahead and put this in the Action, you're welcome to do that to
test your forms using this very little script on my server that doesn't take up much resources. Then when you're actually
ready to put your form into action and to use your form for a specific purpose, you'll need a script on the back end that
does the CGI, that either sends an email or does whatever it is that you want to be done with your form and so you need
to have somebody with some programming skills who is capable of doing that.

I do have another course on lynda.com that explains the process of installing a script that's already written on a server
and like I said, this process is very different for different servers and so I can't cover all of the different possibilities in the
course. But it gives you some good guidance for how to do that if you want to check it out. It's using Perl with CGI and it
talks about how to do that with Perl scripts, and so that is forms and that's how they work.

Using CGI with forms

CGI stands for Common Gateway Interface and it's the back end of how forms work. Strictly speaking, it's the protocol
that the web browser uses to talk to the server and to send it the data that you filled in, in the form. On the back end,
CGI programs can be written in a number of languages. They are commonly written in Perl or PHP or ASP or something
like that. These are languages that are commonly used with CGI. I have provided in the exercise files a couple of CGI
scripts.

One is the test script that we saw demonstrated in the last lesson. It's very simple and this is provided so that you can
install it on your server. Now, how to install it on your server is going to depend a lot on your server and there is some
guidance available in another course that I have on lynda.com called Using Perl with CGI but I have provided here for
your use if you would like to use it. Likewise, there is another CGI script here called mailform.cgi and this I have also
provided for your use if you have a way to use it and if you have the skills or have somebody with the skills to install it on
your server.

It's a very simple mail-form script, you can put in your email address up here and the mail too and it will very safely and
securely go ahead and send you an email. I just want to make a note that there are other scripts out there
called mailform.cgi that do have security issues. So if you go to install this on your server, your ISP may complain that
Oh! That's an insecure script. You can tell them this is not the one that's insecure and they are welcome to take a look at
it or even to communicate with me, and we can set their worries at ease.

Also, on my website at cgi.bw.org, there are a number of other CGI scripts including a much more sophisticated mail-
form script which you can use as an alternative. Again, that's more complicated to install, and you might need some
other skills to install that, and you can certainly refer to my Using Perl with CGI course for some guidance on how to do
it. So again, this is about the back end. These are scripts that you can use on the back end. The purpose of the test script
is simply to test your forms and also to test the process of installing scripts on your server and the mail-form script
is available, or should you want to use it for sending yourself email with the form data whenever somebody submits a
form on your website.

Lesson8: CSS
Introducing CSS

CSS stands for Cascading Style Sheets and this is the technology that's used for formatting web pages. This chapter is
about CSS. It's not intended to be a complete reference on CSS.It's intended simply to expose you to it and show you
what it looks like and roughly how to use it so that you can apply it to some extent in your own documents. For a
complete reference, there is another CSS course here on lynda.com in addition to some other more task-oriented
courses that cover CSS and many references available at other places as well.

So this is not intended to be a complete reference. It's simply intended to be an overview and to give you enough
information so that you can start to use CSS in your own documents. This is an example of a document which is
rendered without CSS, and this is the same document with CSS. You can see we have accomplished the same formatting
in both of them, so we canlook at how that's done. Here is the no CSS version. You will see it has got the background
color and the text color specified here in the body tag, and here in the CSS version, it has the same thing specified, but
they are using a Style attribute instead and this is CSS inside the quotes, inside the Style tag that's written in the format
of CSS.

So let's just take a look at how this works. We'll go ahead and we'll change something here.We'll change the font of the
document. We'll choose the Font Family attribute, Font-Family, and we'll say that that's going to be Tahoma. Choose
that Sans-Serif one. It will look very different from what we have here now. I will Save that, and go ahead and Reload in
the browser, in the CSS Body Style version, and go ahead and hit Reload and there we have the same document and it's
simply changed. It's using the Tahoma font family now. So that's it.

That will change everything in this body container. So the body container, it comprises the entire document beginning to
end, the content portion of the document. So all of that is changed to the Tahoma font. Now, let's say we just wanted to
change the h1 tags. Well, we can create a little style sheet inside this document and we can use the Style tag for
that. This is different than the Style attribute. The Style attribute applies to one element in one place in a document, the
Style tag applies to the entire document.

So up here, we can say h1, and that will select all of the h1 elements in the entire document.We can put a style inside
these brackets here and just say color: #006 and that will make a blue color. So I'll save that and now all of the h1
elements, which are these headings here, will change to blue. Go ahead and Reload, and there you see that they are
now these dark blue that I specified as 006. So that's how you can change just one element.

That's just little bit of a sneak peak of the power of CSS that allows you to change one tag throughout the document. So
every place that tag shows up in the document, it will be changed. This is what CSS does, this is how it works, and so
through the rest of this chapter, we'll be looking at how this all works.

Understanding levels of inheritance

CSS stands for Cascading Style Sheets and the word CSS refers to inheritance, and this is about how styles inherit their
properties from one another in CSS. So let's take a look at an example here and see how that works and what that
means. So here we have a document that's formatted with CSS and here we have the same document in the text editor
and you will notice that there aren't any styles in here. All of the styles in this document are defined in this external style
sheet right here, which is brought in with this link tag, and so that's in the headelement and link tag has a rel attribute
which stands for relationship and that is set to stylesheet.

And it has a type attribute, which is set to text/css, and it has an h attribute, which is the location of the file, which is
here in this external CSS file. And the style sheet is in this external file right here, which is also loaded up in our text
editor, and there it is. You will see that it doesn't have a lot in it. It's not a very complicated style sheet and that's the
style sheet that's used to format this document here. So we'll notice that the body style has a background-color and a
color for the text and a font-family and the h1 style has a different font-family and so thatsets the Verdana font for these
headings and the paragraph style has yet a different font-family, which is Tahoma or a backup of sans-serif.

Tahoma is loaded on the system and that's this font here, which is used for the paragraphs.We have a couple of other
styles here. We have our first style and a highlight style and these use class selectors. You will notice these selectors
have a little period before them and that makes them class selectors and those are selected in a different way. In other
words, these tag selectors, these mean that this style will apply to all the p tags in this context and the h1 likewise for
the h1 heading tags and the body of course for the whole body of the document.

So these are tag selectors and these are class selectors. class selectors are applied using the class attribute. Let's go
ahead and apply this first class to the first paragraph of the documentand when we do that, we'll see this first paragraph
will not be indented anymore, because this sets the text-indent to 0. So what we are demonstrating here is part of the
inheritance, the cascading of the Cascading Style Sheets. What will happen is that this paragraph will first be formatted
by the body because the paragraph is inside the body and then it will be formatted by the paragraph style right here
with this font-family and line height and text height, and we'll see that's already applied here and then after all of
those have been applied, it will apply this first style.
So it will take the text-indent away so that document won't have any indent for this particular paragraph. So let's go
ahead and apply that style to that paragraph, which is right there, and we'll say class="first" and that class attribute is
available for most tags in XHTML and HTML and that applies a class based on the class selector. So we don't put the
period here, but we just use the name of it, so it's first. If I go ahead and save this and reload the document, you will see
that this paragraph is no longer indented.

So the p style is still applied. We have that line height. We have the font and all of that. The body style is still applied,
because the body is first in the hierarchy. Let's take a look at the hierarchy here. You can see the body is first, because
that encompasses the entire document and then the h1 is applied on top of that, so it has that color from the body but it
has the font from the h1 and the p style is applied on top of the body, not on top of the h1 because they are next to
each other in the hierarchy but it's applied on top of the body because the body is first in the hierarchy and then the p.

And then this class style is applied on top of it. This first style is applied on top of what's already defined for the p
because that's later in the hierarchy. We are applying it just to this one paragraph, but not to this other one, and
so that's the way that it's working here. We have the body style and then the paragraph style and then the first class is
applied. Let's look at another example, we'll use this highlight style, we'll see that the highlight sets the font-weight to
bold and it sets the background-color to this other color. So it will look like a highlight in the document.

We will go ahead and highlight just a couple of words here. So the span tag is used for applying class to an inline
element. It's an inline tag and it's a container. So you put content inside of it. It has a begin tag and an end tag and it's
just there for applying class. That's really all that the span tag is for. It doesn't have any properties of its own and so this
allows us to apply a class to an inline object and this text here is inline with this paragraph.

And so when I save this, it will apply that highlight class on top of the class already applied to the paragraph. And so it
will use the same font and it will use the color from the body.Remember that the color of the text is set in the body and
so this is definitely after that in the hierarchy and then it will apply a background-color on top of that and a font-weight,
so it won't change the font but it will just use a bold version of this existing font. So let's go ahead and reload this in the
document. You will see, there we go.

It's bold and it's highlighted and everything else is the same because it has inherited all of those other styles because
that's where it is in the hierarchy. And so this is how inheritance works in CSS. The C in CSS is for cascading, Cascading
Style Sheets and cascading refers to inheritance. It refers to how the styles are inherited from one another and applied
on top ofone another within the hierarchy of the document.

Learning CSS syntax

In this chapter, we are going to look at the syntax of CSS so you'll know how to read the CSS that you see and you'll be
able to write your own CSS. So here we have a document that is formatted with CSS and here we have that
same document in the editor and here we have the CSS style sheet. You'll see we are using an external style sheet that's
called in right here andthere's the style sheet there. This is the same style sheet that we are using throughout this
chapter and so you see it is possible and common to use an external style sheet for multiple documents.

It makes it very easy to keep track of the styles and the formatting across different documents.Before we get into the
syntax of the CSS itself, there's one subject that I'd like to cover in the XHTML on how the styles are applied. There are
two special tags in XHTML and HTML called span and div. Div is a block level element and span is an inline element. So
they are used like this. They don't have any properties of their own.

They are used for applying styles. So if I say div over here and I say style equals color blue and then I close that down
here with the end tag for div. I'll go ahead and I'll save that. Now this section of the document will come up with blue
text whereas the rest of the document will have the text that's defined in the body element in the CSS.

So I'll go ahead and I'll reload this. There you have it. This section is now blue and the rest of the document still has the
color that's defined in the body element of the CSS. So that's how div works. Div is for applying style to a section of a
document at the block level. In other words, these are block level elements. The <h1> and the paragraph are block level
elements. So I need a block element to wrap around them so that I can have blocks inside of that tag.Likewise, if I
wanted to do the same thing but on the inline level, I would use <span>.

So <span> is an inline level element that has no properties of its own but is used for applying style. So here we have span
and a style of color red. So the text of this word, originally, will be red, whereas the rest of this paragraph will still have
the color that it's inherited from this <div> element that we just inserted. So I'll go ahead and I'll save that and we'll see
that the word, originally, will now turn up red and there we have it. You'll notice that they inherit just as you would
expect them to because the <div> element is outside and the <span> element is inside.

So <span> inherits its properties first from the paragraph, which is just outside of it and then from the <div>, which is
outside of that. So it still follows the same hierarchy as rest of the rules for applying CSS. So let's take a look at the style
sheet itself and we'll understand some of the elements of how the style sheet works and how the syntax of the style
sheet works. Here we have the words body and h1 and p, and these are selectors. So the selector is the first thing that
you'll see in a style in the style sheet.
There are three different kinds of selectors. This is a tag selector and this is a tag selector and this is a tag selector. So
these are names of tags and you don't see any special punctuation around them. When you see a period before the
name, as in the case of .first, and in the caseof .highlight, those are called class selectors and those are applied using
the class attribute in XHTML. So here, instead of using style, if I simply said class equals highlight, that selects the class
style using the class selector.

So I'll go ahead and save that and we'll look at in CSS. So we have this highlight selector with the dot before it. That
makes it a class selector. So we use the class attribute to select that. So class equals highlight and the class attribute
selects that. Notice that there's no period here.We don't use the period in the name on the XHTML side. We just say the
word highlight. The period is used in the CSS just to say that it's a class selector. I've saved that and I'll go ahead and
reload in the browser and we see that now it has that bold font and the highlighting behind it.

In fact, if we wanted to, we could apply the class selector to any element in the HTML. We could apply it to this <a>. We
can say class equals highlight and now the anchor link will be highlighted in the HTML, see there, or we could apply
it even to the entire paragraph if we wanted to. And then the entire paragraph would be highlighted like that and that's
a block level, so it highlights all the way from margin to margin which is how block levels work.

So that's the class selector. Like I said, there are three different types of selectors so we've seen two of them. We've
seen the tag selector and we've seen the class selector. Let's take a look at the third type, which is called the id
selector. So here I've created a style and it's called whois and it uses an id selector. The id selector uses a pound sign
where the class selector used the period. So that's the pound sign or the hash mark, the tic-tac-toe looking thing that'sin
the Shift+3 on my keyboard.

So that's the id selector. So I'll go ahead and I'll save this and we'll go into the XHTML. Take this highlight out there. It
doesn't get too confusing. So you see here we have style color equals blue in div. I'm going to go ahead and I'm going to
say id equals whois and this is how this is typically used. I'll save this. So now, this entire section here with the div is
going to use this whois selector and that is an id selector. Now the major difference between an id selector and a class
selector is that a class selector can be used over and over whereas an id selector can only be used once.

So I'm really only allowed to use this at one place in a document. If I wanted another div around this other section here, I
would have to name that something else. So this is used for marking up an entire section of a document. It might have
like a main article, it might have a sidebar, it might have something else and you can separate those sections of the
document with id selectors and that allows you to apply a style to that whole section of the document.We'll see a
number of examples of this when we look at building a website in the next chapter.

But let's just take a look at how this works for now. We've set up this id selector with the class name of whois and here it
is, id whois with the id selector in the CSS. I'll go ahead and reload the document and you see that this is all blue, just like
we expected because we have set it to be blue. We can make it something else just so you can see it and say 606 and it
will be a sort of a purple color. We'll save that and go ahead and reload in here. So that's sort of a burgundy color there.

That's how the id selectors work. So those are the selectors and there are three different kinds. Then there's a pair of
curly braces and the curly braces actually delimit the style itself.So all of this is within the style and it's within these curly
braces. So that's part of the body style.Then inside of the curly braces, we have the style itself. Now the style has two
parts. It has the property part, which is to the left of the colon, and to the right of the colon, it has the value. So each of
these styles, there is a background-color property, a color property, font-family property and the value there is
helvetica, the value here is #630, the value here is #ffc.

So we have the property and the value, property-value, property-value, and then each property-value combination is
separated by a semicolon. So you have a semicolon there and a semicolon there and a semicolon there. Now,
technically, the semicolon is not required on the last property-value combination, but I usually include it when I'm
writing style sheets like thisand the reason is that it's just hard to keep track of which is the last thing. If I omit it here
and I decide I want to add a property after it and I say color equals green then it's just not going to work.

You are not going to see the color equals green. You also won't see the indent. I'll go ahead and I'll save that and I'll
show that to you. This is an error. So the reason for that is that I eliminated this semicolon. I didn't use it as the last one
and then I added something and I forgot to put it in there. So if I put this back in, then we'll see the color will become
green and we'll have the indent again. So that's why I go ahead and I use them anyway, even though they are
not required on the last element. They are technically supposed to be separators.

Most people will use them as terminators instead. In other words, they'll put them on every line and that's the reason
for that because otherwise, you have to keep track of it and it's just too hard to do. So there you have it. That is the
syntax of the CSS. You have the selector, you have the curly braces, you have the properties and values, you have your
semicolons. I just want to cover one other thing that's easy to get wrong and I'm going to do this here. I'm going to say in
this div, instead of saying id equal whois, and I'm going to go ahead and put in a style using the style attribute and I'm
going to say color equals green and we are going to try and set the color here and it's not going to work because I've
made a mistake.

I made a very, very common mistake. I am going to ahead and I'm going to save that and we'll load it up over here and
we'll see that the color is not green. Can you see the mistake? Aha! I used an equal sign instead of a colon. The colon and
the space isn't required but I like putting a space after a colon and most people do. Not everybody though. You won't
always see the space. And I made this mistake because I'm so used to in HTML and in XHTML typing an equal sign. So
often times, I'll set up a style in my XHTML like that and I'll use an equal sign and I won't notice and I'll save it and I'll load
it up and it won't be working.

I'll say why isn't that working and sometimes it will take me a while before I notice that I use an equal sign instead of a
colon. So I'm just warning you. Then you'll see that this works now. I'll go ahead and load that up and now it's green. It
works with the colon; it does not work with the equal sign. So that's just something that you can be on the watch out for
and it's a little gotcha that happens a lot when you are writing the CSS in the XHTML file using the style attribute like
that. So there you have it. That's the syntax of CSS. That's how CSS works. We also talked about the <div> and the
<span> tags, which are really useful for applying style in a document.

Using units of measure in CSS

In this lesson we're going to talk about units of measurement in CSS. CSS uses units of measurement to say how big
things are going to be, how far apart things are going to be.There are actually a lot of units of measurement available,
and we're going to talk about just a few of the major ones. For a complete reference check with any CSS reference or
with the CSS course here on Lynda.com. So here we have a document that's formatted with CSS and this is the Style
Sheet that's being used for this document. We see that we have a few things in here that are measured already,
especially in the P style, for the paragraph.

We have line-height, which is set to percent. So that's the percent of the size of the font in the paragraph. So it's set for
140%. If we change that to say 200%, you'll see that it changes down here in the document for all the paragraphs. We'll
Save that and Reload, and now we have a larger separation between the lines, and you'll see that the bottom of this line
is about twice the height of the line from the bottom of this line. Likewise, we have the text-indent, which is set in ems,
two ems. Em refers to the width of the M in the font.

So here we have an M, right there. So this indent is supposed to be twice that width. It looks like it's a little bit
more. One of the things that happen with typography-based measurements on a screen is that the screen itself is made
up of pixels. So any typography-based measurement is going to have to be translated into pixels, and this would go also
for inches and centimeters and things like that. It has to get translated into pixels. So it's going to depend on the
dimensions of the pixels in your particular monitor. So it's always going to be a little bit off.

So that's just the fact of life in using raster-based media with something that's measured in absolute measurements like
inches or ems or points or anything like that. So that's the em measurement. There's also an ex measurement, which
refers to the height of a lowercase x. So I can say my line-height here is going to be say 3 exes, 3ex, like that. I'll Save. So
that's to height-based measurement and it's based on the height of the lowercase letters in the document.

I Reload, and there we have, the space is set to one, two, three times the height of a lowercase x. So let's go ahead and
set the size of the font in points. Fonts are typically measured in points, and we'll go ahead in here and we'll say font-
size, and 12 points is the default typically, so I'm going to go ahead and make it 14 points. So I'll make it a little bit
larger.pt stands for points. I'll save and I'll reload over here in the browser, and we see that the text is now larger.

All of the font-based measurements have been updated as well. Finally, let's talk about doing things in size of pixels. I
just want to say that because a computer screen is a raster-based medium, when you're measuring things for a
computer screen, pixels are what matters. Now, there's two ways to look at this. One is if you want a page to look
exactly how you want it to look, measure things in pixels and it will come out pretty close. It's not always going to be
exactly the same on everybody's monitor, and there is reasons for that, but it will be really, really close.

When you're measuring things that are fix number of pixels and size, things like the dimensions of an image, they will
always be exact. But things like font-size tend not to be exactly the same from device to device when they're measured
in pixels. There are reasons for that, and it has to do with how fonts are measured and how they're rendered. But the
point is that if you care about how things are going to be relative to fixed pixel sized objects on the screen, you want to
use pixels in your measurements. Now, the other side of this coin is that for people who like to change the size of the
fonts on their computer screen, like older people who might have trouble seeing, they tend to increase the size of the
fonts on their computer screen.

If you measure your fonts and your Style Sheet in exact pixels, they're not going to be able to do that anymore. So that's
just another consideration to think about when you use the pixel measurements. Now that said, a lot of people like the
pixel measurements because it allowsthem to exert a lot of control over how their page is rendered on the browsers
that are viewing their page, and there's something to be said for that viewpoint. So we're going to look at that.I'm going
to go ahead and I'm going to change this to 14 pixels instead of 14 points. You'll see how that looks different on the
screen here.

I'm going to Save and go ahead and Reload, and there's the 14 pixels version rather than the 14 points version. Likewise,
my indent here, I can measure that in pixels, I can go ahead and say 200 pixels for that and save that and Reload. We'll
see that we get this nice big 200-pixel indent there for the first lines of our paragraphs. There you have it. Those are the
units of measurement in CSS. Those are the most common ones. There are a few others available.For a complete
reference you can check with any CSS reference or the CSS course here on Lynda.com.

Lesson9: Creating a Simple Web Page from Scratch

Comparing table layout and CSS layout

In this chapter, I present a complete web site for the purpose of demonstrating the techniques covered in this course in
the context of a real-world project. The web site uses tables for layout. Because this course is about XHTML and HTML
and because it is not about CSS, I chose to avoid CSS for the layout in order to show how to use XHTML for this
purpose. Keep in mind that this is not considered best practice in today's world. Using CSS for layout is commonly
considered a better choice, and I strongly urge you to learn how to lay out your sites using CSS.

On the other hand, understanding legacy technologies is generally a valuable and practical pursuit, if for no other reason
than there is a lot of legacy technology out there and you will likely encounter it in your work. How often you encounter
a legacy technology will depend on how popular that technology was, or is, and how recently it became obsolete. In the
case of HTML table layouts, this has been a very popular technology, and its obsolescence is relatively recent, and it's
still in wide use today.

At the end of this chapter, I present an alternate version of this same site using CSS for layout instead of tables. This is
discussed in detail in my course CSS Positioning Best Practices here in the lynda.com Online Training Library.

Exploring the finished web site

So now we've learned some XHTML and some CSS, and let's put it to use. What we have here is a website that has been
provided for us. It's been designed, all the assets have been created, all the images have been built, and they are all
sitting in folders in our Exercise Files.Our task is to build a website that looks exactly like this using the techniques that
we have learned. So this website is small. It has four pages. They all have this basic layout, with main content on the left
and sidebar content on the right.

This page here has got some products on it, and this page here is about the surfing lifestyle.This page here has an
embedded YouTube video on it. So our task is to duplicate this website with what we've been given. So we've been
given all of these images. We've been given all of this text, and we've been given an example of what it looks like. So this
is not unlike how oftentimes I'll get a job where the designers have done their bit and now they want me to put all of
this together and make it work. So let's take a look at the Exercise Files folder and see how this is organized.

Here we have in Chapter 09 of our Exercise Files, we have a number of different folders. The complete-site is in folder
number 01, and so that is with Chapter 09, Lesson 01, which is this one here. So that has the complete-site, which we're
looking at right here, with all of these pages and links and such in it. Then each of the other lessons has its own Exercise
Files, so there is Lesson 02, which is where we'll begin building the header, Lesson 03, we'll build theContact menu,
lesson 04, we'll build the main menu. So each of these has its own purpose.

Each of these has a beginning place and an ending place, like here we have this beginning-html. So what you'll do is
you'll save this as heading.html, and then by the time you're done with the lesson, it should match the
ending.html. Likewise, in the CSS folder you'll have a beginning and an ending. You'll save the beginning as main.css. In
the lesson, I'll tell you all of this so you don't have to memorize it or write it down right now. I'll guide you along. I'll say
okay, now we're going to save as main.css. So the idea is for you to follow along with me, and by the time this is all done,
at the end of the chapter, you will have built this website in yourmachine, with your own text editor and your own tools.

I want to thank James Williamson who designed the original version of this website and wrote the clever copy you see
here. So we can put that into practical use and see how it all goes together to build a complete website.

Building a document header

Now, we are going to begin building the website and all of the graphics and all of the design has already been provided
for us. Our task is to take the assets that we've been given and create a website that looks like this. As a beginning place,
we have our exercise files and in the chapter 02-header folder, we have a beginning and an ending. Ending is what the
file is supposed to look like when we are all done and we also have a beginning and an ending CSS and these are loaded
up in our editor.

So, the first thing that we're going to do is we're going to save both of these files as a different name. The point of this is
so that we can do our edits and work on the file and not write over the original files that came with the exercise files, so
that we have our beginning place still if we need to go back to it. So, the first thing we are going to do is save this file as,
I'm going to callthis one header.html because over the next couple of lessons we are going to be building the header
portion of the website and for the CSS file, we'll do a Save As.
CSS file is going to be called main. css because that's how it's referenced in all the HTML files.So, all the HTML files can
share this main.css and in that way we are not overwriting our original files and we can go back, if we need to, we can do
the exercises over again, if we need to and we still have our starting place. All right. So let's get started. The first thing
we are going to do here in the header.html file is change the title and it will be Welcome to Groundswell and we are
going to link in the external CSS.

So, this is the Link tab. We've seen this before, because in the head section of the XHTML, attributes are href, which
gives the location of the CSS file, and the rel, which is the relationship and that's called style sheet and the type, which is
text/css. We have this little shorthand for closing off a tag that does not have an end tag and we'll go ahead and save
this and load it up in the browser. We'll go here and we'll drag it from the Explorer window and there we have
it,Welcome to Groundswell, and the content here.

Now, let's go ahead and add some style using the style sheet. First thing we are going to do in the style sheet is we are
going to put in our global default styles. So, we are going to start with a comment. I always like to have
comments separating the sections of the CSS, call this global styles. Comments in CSS are separated by these /* and
*/. This syntax is taken from the C programming language where comments are done like that. Go ahead and start with
the body.

I'll like to put a few things in the body. I'll like to give it a default font family, even though it will probably never be
used. It's just a good practice. In this case, we'll give it a sans- serif font family and we'll set up the backgrounf. And the
background here has two parts to it. So, we're using the shortcut in CSS. We are doing both the background color
and the background image at the same time and so we have bbb, which is a light gray color that kind of matches the
image itself.

If for some reason the image can't load or somebody has got images turned off on the browser, it'll still look
reasonable. And the url for the page background graphic, you will notice that it starts with these two dots. That means
go up a directory. The reason for this is that in the external style sheet, the image location is relative to the style sheet
itself. It's not relative to the document and so if we look at our site organization, here we have the document itself, this
header.html, and there is a CSS directory which is where the CSS file is and then there is an images directory which
is next to the CSS directory in the tree.

So, from the CSS directory, you need to first go up a level and then go back into that images in order to find the
banner.jpg. So, that syntax looks like this with the dot, dot and then the path from there. So, first it goes up a directory
and then it goes into the images directory and then the page background. We'll set Margin and Padding to zero, and this
is the syntax that says it's a shortcut for all the margins, top, right, bottom, left setting that to zero and likewise for the
padding.

What this does is it allows us to have everything butt up against the borders of the browser itself. If you look at the
website, the top of the website is all the way up at the top and then the actual content is centered on the page. This
allows us to have the border and the margin set to zero, so there is no space there at the top. Then we'll save this and
we'll move on like that, save as I go along. We're going to do some default margins for all of the text block elements like
p and h1 etcetera.

And this is another CSS shortcut, when you just have two values in here. Remember normally you put in four values,
which would be top, right, bottom and left, which goes clockwise around the circle. But if you just put in 2, then the first
one is the top and the bottom and thesecond one is the right and the left. So, we have 1ex top and bottom, and 1em
right and left and that gives us just a nice little default and you will see that looks like this. Again, we are not going to use
these defaults but it's nice to have them just in case.

So, it gives us just a nice little spacing at the top and spacing at the left and there is our page background, that lovely
little flowered pattern. Go ahead and enter some more defaults. So, this is the default for all the tables and again, this is
going to be a table-based layout. You'll notice the border-collapse, this is the one that we haven't seen before, border-
collapse. It changes the table layout model. There are two layout models. There are border-collapse to collapse and
border-collapse to separate. Separate is the default and interestingly that will work in all browsers except Internet
Explorer.

If we leave that to its default value or set it to separate, Internet Explorer will break up some of our tables, not all of
them, the layout will look disjointed and so we just set it to collapse, which worked in all the browsers that I have
tested. Again, like all of this, you want to test this in any browsers that matter to you. I'll go ahead and save and go
on. I'm going to continue to format the tables. I'm going to set our defaults for the rows and columns. And again,
because we are doing layout with tables, we want to have some reasonable defaults for all this. margin 0, padding 0.

That allows us to have content that goes up against the edges of the table cells, like we need to do for things like these
images, which if you remember, this is one image and this is a separate image here and it's in a separate table cell and
then our content is down here, and we want all of this to butt up to each other without separation. And so that margin
zero and padding zero in the table cells. That allows us to do that. So that's our defaults and in the next lesson, we are
going to start putting in the header content.
Placing a banner and a contact button

Continuing with the development of our example website, in this lesson we are going to insert the header and the
contact button. So looking at the browser here, basically what we are going to do is the top half of this table cell here
with the Contact button in it. That's what's called a Mail To link. So when you click on this, it would open your mail client
and allow you to send an email message. It's a simplest form of a contact button. So let's get started. We have here
beginning.html and our beginning.css and this is in the 03-Contact folder of the Chapter 09 Exercise Files.

The first thing we are going to do is we are going to Save As. We'll save as heading.html. This way we don't overwrite our
Exercise Files and do the same thing with the CSS. Save that as main.css, because that's the name that gets used here in
the XHTML. Now we'll go ahead and enter some content in here. We are going to create the outer table and we are
going to create the table cell for the Contact button.

So this table tag has an id attribute and that creates a CSS id selector. I'd like to close my containers when I start
them. So this row has one cell in it. So I've opened it and closed it and you'll notice that for my selectors, I'm using
what's called camelCase. And this is actually a very good choice for CSS, because CSS doesn't allow dashes and I happen
to be one of those people that dislikes typing underscores. I do it when I have to and I have too often, because other
people use them. So I like camelCase for CSS and it allows me to have several words as very nice descriptive selectors
and so camelCase usually uses a lowercase to begin and it uses uppercase letters at the beginnings of second and
subsequent words.

So I have outerTable, I have contactButton and this is what's called camelCase. Go ahead and create a div. We'll talk
about all this organization in a moment here and the anchor tag. Ending my anchor tag on the second line and that
allows me to put it right up against the image and we talked about that in our chapter on images. You'll notice I inserted
width and height attributes for the image and I have those numbers already, because all these assets were given to
me. So I have those in my notes.

It's a really good idea to always include the width and height, if you can. That allows the browser to layout the page
before it downloads the assets from the server so that the page loads without blinking and moving things around as it
goes along. It's just a nicety and I closed the image on the next line and closed the anchor right after, so there is no space
between the image tag and the anchor either at the beginning or the end. Now as we create our CSS, you'll see that I'm
able to select this div specifically without it having a name, and I'll show you how we do that in the CSS.

Let's go ahead and enter some more CSS here. So again it's a section for the Contact button and I have got another
section before that for the outerTable. So first the outerTable. It sets the selector for the outerTable and it has a margin
0, auto. Again, we have two values. The first value is top and bottom and the second value is the right and left.

Selecting auto for right and left that centers the table on the page and so this is what creates this effect here with it
being right up against the top, but centered horizontally on the page and that's from having margins 0 and auto like
that. 770 pixels wide, which is the width of all those images that are used to create the look. And this creates the image
at the top of the page, so let's save this and take a look at the page over here. This image up here is actually the
background image for that header table cell and this fff is the background color for the whole rest of that outerTable.

So you see that all of this white here is as a result of that. Now let's go ahead and enter the contactButton. There is our
contact button selector, which we typed in the XHTML so that height is actually half the height of the image. That image
with the head of the table there is 110 pixels high and so 55 is half of that, because the top half of it is what we are using
for that contactButton. The bottom half we'll do in our next lesson for the menu there.

This is how we select that div. Remember we put a div in the HTML here that's inside of the contactButton, the selector
of having the contactButton id selector followed by the div tag selector. That means that this is any div inside of that id
selector. So any divs inside of this, which is here and here, which is this and this, will be selected by that combination
selector.

It's a hierarchical selector where we have the contactButton and then div. So that's any div inside of the context of that
contactButton selector. 30 pixels is the height of that image. This is a margin that basically says no margin, top, right,
bottom, and 650 pixels to left so that will move it in. 650 pixels and it will be against the top of the table cell, because we
have ourdefault set to vertical align top over here. padding=0 and then finally, the contactButton image itself.

So again this is a hierarchical selector that selects any image inside of that contactButton context, which is just the one
image. We'll set its margins to 0 and its border to none, so it won't get highlighted by the anchor tag around it. So that is
our CSS, we'll go ahead and load it in the browser and see what it looks like. So we'll drag heading.html into the browser
and you'll see that top half of the image is visible because that's the only table cell that we have defined and there is our
contactButton.

So by having our table cell just be 55 pixels high, we are only seeing the top half of the image there in the browser. If we
were to just make this 110 pixels, we'd see the whole header image. See there it is. But we need to make it just half as
high so we can make the next table cell forthe other half for the menu. Save that, and there we are done. That is our
Contact button. In the next lesson, we'll do the main menu.
Laying out a main menu

In this lesson we are going to create this main menu here at the top of the page. These are the menu links for navigating
the site. You will notice that when I click on one, it changes and it becomes this other image that's grayed out, and the
mouse changes, and it's no longer hasthe pointer that will indicate that it's a link, and so for each of these we have two
images. We have the tall gray one and the short ocean colored one with the white lettering on it and so that's what we'll
be creating in this lesson.

So here's our beginning XHTML file and our beginning CSS and we are going to go ahead and as we have been in all these
lessons, we are going to save this as with a different name, so that we don't overwrite files in the exercise files. Save this
one as heading.html and this one here, save it as main.css, because that's how it's referenced in the XHTML file. And
now we'll go ahead here in the XHTML and we'll create the main menu table row.

And again, we'll have a div inside of that so that we can position it easily, and we'll go ahead and type in the menu
images. The images that end in -current, that's the tall gray ones. Again, I'll end my image tag on the next line. Embed it
up against the following one. The following one has an anchor tag around it because it's actually a link. This first one
because it's the current page does not have a link. I'll end the anchor tag on the next line at the beginning of the image
tag and I'm going to do some copy and paste here, so that we can do this more quickly.

So what I'm doing here is I'm selecting the image, and this is the way I work in my projects. I'm a big fan of efficiency or
one could say I'm big fan of lazy, and so I'll do copy and paste, rather than typing everything out every time, and so
I'm pressing Ctrl+C on the keyboard because I'm on a PC. If you are on a Mac, you would use Command+C for copy. So I'll
go ahead and Ctrl+V to paste, and so I have copied and pasted that image and I just have to change the name of the
image here, which is now gear.png.

It doesn't have the -current because it's not the current page. It has a link on it and the width will be different, it will be
73, and the height is 25 for the ones that aren't current. The height is 30 for the ones that are, and there we have that,
and I'll close the anchor tag at the end of that and begin the next one and I'll change the Alt tag as well, to say gear. Now
I'm going to copy and paste just all of this and so my text editor is trying to help me by selecting more than I want it to,
so I had to do it again there, and so I'll just copy and paste, and paste, because there's three of those and so let's see
here the next one is lifestyle and its width is 100, height is the same, and the alt is lifestyle, and link for that is
also lifestyle, and then the following one is for videos.

I am going to make sure you get all the occurrences. That's the down side of the copy and paste. It's easier for getting
parts of it and end up with something that's say gear on the videos page, and there we have it. So that is our link and if
we look at this in the browser and there is heading.html and we'll go over here and you will see that it looks like that and
of course, that will get better as we style it.

So let's go ahead and style it now. Move down here to the bottom of our Style Sheet. I'm going to enter a section called
main menu and we used an id tag called main menu so td#mainMenu.And again, the height is 55 pixels and this one, we
are going to change the vertical align to bottom. This is the only place where we use that in the entire document and
that's why we have our default is for top.

For this one we are going to have it be bottom and this will select our div. Height is 30 pixels, which is the tallest of our
images. Margin left of 300 pixels and padding of zero and then finally the images themselves. Now this will select all of
the images in the main menu context, which there are four, and this will give them a zero top and bottom margin, while
giving them five pixels to the right and the left, and that's what spaces them apart and you will see there's ten pixels in
between them because there's five pixels of each side, and border none.

That will get rid of this border around the ones that are anchors. I'll go ahead and save that and then load it up in the
browser, and there we have it. That's our menu. So how this works, it's really very simple. We have images with links
around them, which we know all about from the lessons on images and links, and we have styled it using the CSS to give
it the spacing that we wanted to have, take off the border, and to line it up with the table cell, and so that gives us this
lovely menu.

Creating a layout template: main body area

Continuing with the development of our website, in this lesson we are going to start building the content portion of the
webpage. We are going to start with this middle image. I call it the ID image, because it changes with each of the pages,
so it sort of helps to ID the page, and thenwe are going to start building the styles for the page itself. We are going to
start with the left- hand side, the main content in this lesson, and in the following lesson we'll do the right-hand side, the
sidebar content, and then we'll have a template that we can use to begin building the pages for the rest of the website.

So let's get started. So I have loaded up in my text editor here. I have the beginning.html and Ihave the beginning.css
from the 05- layout-left folder in the Exercise Files, and so we'll start by saving as, because that's what we always
do. That gives us a working space where we're not writing over the exercise files themselves. This one we'll call
template.html, because that's what we are going to end up at the end of these lessons here, with the template for
working with the rest of the website and we'll Save As the main.css for CSS file and so now we haveour working space
setup.

So I'm going to go ahead and insert another table row and so this is starting to get more confusing here, all these table
row beginning and ends next to each other like that and so what I'm going to do is I'm going to put in a comment, so
we'll know that this is the end of this here. So I'm going to just say mainMenu. I like to do this. It helps to keep track of
where you are in the page, so I can see easily that that's the end of that, even though they line up and my editor is very
nice.

It gives me a little line here to help line things up, but it's nice to have that. And then we are going to have a table inside
of this table cell and that will end here, and again, this is going to be a big enough table. It's going to be a lot of stuff in
between here, so I'm just going to go ahead and put in the comment now. And then I'll always know where I am, and so
this table will have one row and it will have two columns and so there will be a column for the contentLeft.

And it will end here. And again, I'll just put in a comment, as there will be stuff in between there,and it will have another
row for the content right. I'll just go ahead and copy this, Ctrl+C or Command+C if you're on a Mac and instead of
contentLeft that will be contentRight. I'll change the comment for that one and there we have it.

We now have space for our right and left content tables and I'm going to save and we'll go ahead and put in a div for our
mainContent and we'll do the sidebar in the next lesson. And then we'll just go ahead and put in a little bit of content
here, just so we can look at it on the screen. All right, so we'll save this. I'll just look it over, make sure it all looks
reasonable. There is our begin div, and end div, or begin td and end td, and our table.

We can see here in table row, table row ends, table ends, this all looks like it should work, and if we go ahead and load
this up in the browser, drag the template.html into the browser and there we have it. We have a space with our main
content. This is the default font, remember that, and so it's not lined up exactly how we would like it to be lined up, but
we are going to take care of that in our CSS right now. So just go ahead and do the CSS part of this.

Scroll down to the bottom. Enter comment here. We'll start with viewing table cell, contentLeft, and we want to give
that the white background color, and a width of 505 pixels. Now I have already measured all of this out with the content
that was given to me by the client.

The mainContent, this is our div for the main content, and it has padding 0 and 15 pixels. I'll explain that in a moment.
Margin of zero. Now it's important at this point to understand the difference between margin and padding. So what I'm
going to do, I'm going to save this and I'm going to go ahead and I'm going to put a border on this, so that you can see
what it is And this is just temporary, this is just for illustration purposes, so you can see what the margin and the padding
is all about.

Let's look at this in the browser. I reload here. You see this box. This is the border that we just put in for the div, and you
see it goes all the way up to the edge of the image above it into the edge on the left and edge on the bottom, and of
course, the edge on the right, but this is the width of 505 pixels there. Now if I put a margin on that, let's say we put a
margin of 10 pixels.So this will put 10 pixels all the way around, top, right, bottom, and left, and so we'll save that and
you will see what a margin looks like, because we have this border here.

You can see that the margin goes on the outside and it actually increases the size of the div. It pushes everything out. So
it adds those 10 pixels all the way around and the div itself is inside of the margin, so the margin goes outside of the
content box. Padding on the other hand goes on the inside of the content box and so if we make that margin zero, and
let's just make this padding something large so that we can see it, say 50 pixels, and so that I'll put 50 pixels on the
top, on the right, on the bottom, and on the left.

I'm just making it really big, so you can see what it does. It actually increases the size of the content box and it adds that
padding on the inside of the content box, so that's the difference between padding and margin. Padding and margin are:
margins on the outside, padding is on the inside, and they both actually increase the size of the box, so that the content
on theinside is still the dimensions that you asked for. So we can go ahead and make this what we wanted it to be, which
is zero and 15 pixels, and so that's zero on the top and the bottom and 15 pixels on the left and the right.

Save that and we'll take off this border, because that was just for illustration purposes and we'll go ahead and enter the
next part of it. So the reason I did it the way that I did it and that will become clear in a moment. Save that. So this is the
p tags, so all the p tags within the mainContent context will have this formatting and this is laid on top of, remember
that this cascades, this is laid on top of our defaults up here, which have these margins. And so, the margin for the left is
getting overridden to be zero and what that does is it puts it up against this 15 pixel padding on the div, and I make
the margin left for all of our different elements.

The reason I do that is because the relative margin sizes for the different sizes of text, like the heading size and the
paragraph size, they tend to be a little bit different. So I make them all zero and I just use the padding in the div instead
to create that margin. It's just a little trick. This is the way I like to do it. It makes my life easier. And so I set a padding to
be a certain size on the right and left in the mainContent and I set that margin-left to be zero in the paragraphs and
also in the headings, and that way everything lines up nicely, just the way that I want it.
So I'm going to go ahead and enter some default styles for the headings. Let me use the copy and paste, because I don't
like to type all of these. I'll go ahead and change this one to a 2, this one to a 3, and there we have that. Now I made the
font-family for the paragraph for the body text, this nice serif Georgia font, and I say serif as a fallback, and this is the
Trebuchet MS forthe sans-serif for the headings.

Again, a lot of these style choices were made for me by the client. And then the mainContent h1. So what I'm able to do
is I'm able to set defaults for all of them like that and then I can make adjustments from that starting point in a separate
style just from mainContent h1 and this is again is taking advantage of the cascading property in the CSS cascading style
sheets. Again, I'm setting all the margins to zero except that bottom margin and that bottom margin is just going to give
us a little space between the heading and the body paragraph, but that left margin is set to zero just like it is here for the
paragraphs and so that will take advantage of this 15 pixel padding on the left-hand side and the div.

So there we have it. This is our style for the main content on the left-hand column and we'll goahead and reload here
and we see that that's exactly how we want it to look. The only piece missing now is that middle ID element. Let's go
ahead and add that in the HTML. And so that gets another row right in here. and this is our page ID image and it gets this
image source=images/home_ banner.jpg, and there will be a different banner for each of the pages.

So there will be a gear banner for the gear page, etcetera, and the width is our standard 770 pixels, height is 90 pixels,
alt says Welcome to Surfing Paradise. We'll save that and go and load up the page. So we see I missed the equal sign
here between width and my syntaxhighlighting editor makes it in red, which makes it nice and obvious there.

So just put in that equal sign and I'll save there, go ahead and load it up in the browser, and there we have it. So there is
our ID image in the middle, here is our main content. You notice that the ID image also gives us a little bit of a nice little
extra white space here. It has this sort of organic look to it. That is the part of the ID image right there. If I right-click on
this and say View Image, you can see that that white part is part of the image there. So there we have it. This is our main
content on the left- hand side and we have space over here for the sidebar content on the right.

Creating a layout template: sidebar area

Continuing with the building of our example website, we are going to fill in the default content and styles for the right-
hand side of the content portion of the page in this lesson. So we have the beginning HTML and CSS files, from the
Layout-right folder in the Exercise Files. So we'll go ahead and do the Save As and save these as template.html
and beginning.css we'll save that as main.css.

So you are all set up there and we are going to go ahead and set up the contentRight portion of the page. This is actually
pretty straightforward here and I put in a div id="sideBar". Like that and go ahead and put in a comment here. And then
inside of the div we are going to put, just like we did in the other program, I'm going to put in h3 because we use h3's in
the sidebar,Sidebar Here, and sidebar content will go here.

Go ahead and save that. As we load this up in the browser, drag our template file into the browser there, we see our
sidebar content on the right-hand side of the page and that'sbecause it's in this table cell here. So we have table row
and we have two columns. We have this one and we have that one. So let's go ahead and format it now in the CSS. So
this will go after the mainContent section.

Go ahead and put in a comment here. This is the sidebar. We'll start with the contentRight td and again this has a
background-color. fff, which is white. This one here has a width of 265 pixels. Then we'll enter the sideBar div. This has
same padding trick, this one set to 10 pixels.And then also has a border on the left-hand side.

Go ahead and save this. I'll show you in the browser what this border is all about. You look at our site here, you see this
line there and you will notice that it doesn't go to the bottom of the page. It just goes to the bottom of the sidebar and
so that's accomplished by having it via border left on the sidebar div. If we reload here, we see there's our border. So
continue entering our styles here. There's our style for the paragraphs inside the contentRight context.

So font. font-size is a little bit smaller than it is in the mainContent. A little bit of spacing between the lines. The color is
going to be a little bit off white. So I have a little bit of margin in between the paragraphs or after the paragraphs, but
the paragraphs themselves will be flush up against this 10 pixel padding. Remember, we use h3 headings for the
sidebar. Go ahead and copy the font-family from up here.

Headings are going to be this teal color that was selected by the designers. And we'll go ahead and enter those margins
there and there we have it. We'll save and go take a look at it in the browser and there we go. That's our sidebar and
that's what our sidebar looks like. It's little bit smaller, it's got the slightly gray color text and this teal color heading and
there we have it. That's our formatting and our layout for the sidebar.

Creating a layout template: footer content

Continuing with building the template for our website, we're going to now enter this stuff at the bottom of the screen
here, the legal stuff, the copyright notice, Privacy Policy, and Terms and Conditions links. And then we'll be done with
our template, and we'll have a template that we can use to start building our site. In the Editor, we have the beginning.
html and css from the 07-layout-footer folder, and we're going to go ahead and do our traditional Save As ritual.

We are going to be calling it template. html and we'll actually have our work in template at the end of this lesson. The
css will be main.css. There we go. Now, down at the bottom of the template, we're going to put in the text for the footer
and it's like this. It actually goes outside of that table. The paragraph itself has an id="footer".

Inside the paragraph we're going to have our copyright notice. That's an XHTML entity for the copyright symbol. Now I'm
putting in a couple of non-breaking spaces here. The purpose of that is to give a little bit of space between the
Groundswell Surf and the links for the Privacy and Terms and Conditions links. You'll notice in our page here, there's a
little bit of space there and then we have this bar separating these two. But this space, normally the browser will fold all
the spaces into one space, and I want to actually have some spaces there.

So those non-breaking spaces serve to just take up enough white space there, on the actual screen. Then I'm going to
put in my links on separate lines because the browser will actually ignore that new line and put it on the same line
there. Just type a vertical bar character there at the end, and do the same thing for the Terms and Conditions link. There
we have it. So that is the XHTML portion of the footer. If we look at that in the browser-- Let's go ahead and load this up.

This will be the template.html. Drag that in, and we see we have the text and the links, and now we just need to format
them. You see that lovely space there? That's the non-breaking space characters. Let's go ahead and enter the style
sheets for this. Down at the bottom of the file, go ahead and create a comment. p#footer, and we have the Trebuchet
font-family, which I'm just going to copy and paste from up here.

font-size: .75em. Make it smaller, color: white. So the text will be white here. text-align: center.And then the links are
going to be this other color that's already been selected again. So that selects all the anchor tags inside of the footer#
context.

text-decoration: none. That makes it so that the links don't have an underline on them. So we have some of these extra
spaces. And go ahead and save this. Load this up in the browser. There we have it. It's just how we wanted, white text
here, the little teal text there. It's exactly how we wanted. So now we have a template, which we can use for building the
rest of thepages for our site.

So we use this as a starting point, as we build the pages for the rest of this site.

Building a main home page: main body content

Now that we have our template built, we can start putting content in the website. So, here in the home-pt1 folder in the
Exercise Files, you will see there is the template.html and that's the template that we built in the last lesson and you will
also see a text folder here that has home.txt. That's the text that goes in the page and then we have the CSS folder,
of course, which has our beginning place for the CSS and this is all loaded-up in my text editor and so here is the
template.html.

Here is our beginning.css and here is the text file with all the text that will go in the home page.So, let's get started. First
thing we do, of course, is to do the Save As. In this case, we are going to save it as home.html. So, we'll be building the
left-hand side in this lesson and the right-hand side in the next lesson. We are still going to call this home.html, save that
and then the beginning and the CSS will be saved as main.css and the text file we are not going to bewriting over, so we
can leave that alone at this point.

All right, so now, let's go down here to the place where the main content goes and I'll just select these two lines and I'm
going to copy everything from this point, all the way down to here. This is the end of the content for the first half of the
page, the left-hand side and then down here, where it says sidebar, that's the content for the sidebar. We'll be dealing
with that in our next lesson. And so I'm going to go ahead and press Ctrl+C to copy on the PC, we'd use Command+C on a
Mac, come over here to home, where I have selected this and I'm going to press Ctrl+V to paste.

And so, there we are done. Ha! Not really. Now, we need to put in our heading levels. I'm going to wrap the HTML
around this, so this will be a <h1> and close the </h1> at the end and then here we are going to have the beginning of
our paragraph and here goes the end of the paragraph and then the beginning of a paragraph here and I'm going to be
sneaky and do copy and paste and have an end a paragraph and a begin a paragraph in my copy buffer, so I press Ctrl+C
to copy and then I paste here and I have the ended that paragraph.

Of course, this doesn't begin a paragraph here, so I'll just take that and I'll move it down here, a little one more, and then
I can paste an end a paragraph here and now we have another heading. Now, this heading level here is going to be <h2>
and the </h2> there and an <h4> for this, because we are using <h3> on the right-hand side, so this will be an </h4> and
then we have more paragraphs.

Add an ending paragraph here and this is another <h4>, </h4>, add a paragraph here and an ending paragraph here. I
didn't get to use my paste buffer for that very much, did I? And this is a link and the link will have this text in it here. So,
I'll cut and paste and then just take out this extraneous text at the end. Scrolling down, I have another <h4>, and
another paragraph and there is a couple of links in this one, the one here.
I'll do the same Cut and Paste and you get rid of this at end and do the same thing here. I missed the equal sign. That's
the beauty of the syntax highlighting text editor. And there we have it. So that's our content and now I like to indent
stuff. I'm just like that. It makes everything pretty. But we are not quite done, are we? Go ahead and indent anyway at
this point and every editor has a different way to do this.

Once you have it highlighted, in this particular editor, which is Notepad++, I'll hit the Tab key. I know that in BBEdit it's
something like Command+Right bracket or something like that. I actually use BBEdit a lot and my fingers remember how
to do it, but I don't always remember what it is I'm doing. It's just that my fingers remember it and so anyway. This is
going to be an unordered list and so that ends at the bottom. So, I'm cutting and pasting and put that there and then
each of these has a <li> at the beginning and an end </li> at the end and so I'll use copy and paste for this.

Copy, paste, paste, paste, paste, paste. And copy, and paste, paste, paste, paste, paste.There we go. So, that is our
content, rather than going through all that. I wanted to go through it this time just to show you what my workflow looks
like as I do this sort of thing. In the subsequent lessons, for the rest of them, I have them all HTML-ified in the text file.

So, that will make it easier for you to cut and paste them. So, now that we have this content in here, let's just go ahead
and take a look at it in our browser. We are going to do a little bit more CSS on it, but it's not going to look too bad, as it
is right now. There are a few styles that we haven't yet installed. I'm going to take the home file and drag it into the
browser and there we have it. That's not bad. That's pretty close. There are a few things we are going to do. We need to
enter these <h2> and <h4> levels and these links don't quite look right, and we are going to do a little bit of formatting
also on this unordered list.

So, let's go into our CSS file and we'll scroll down here to the bottom and actually it's not at the bottom. We are going
into the main content part. All right there and we are going to enter the <h2> level. So, I'm just going to copy this one
because it's just a little change from there. You see, I actually do this a lot in real life, create two copies of that. One of
them will be <h2> and one of them will be <h4> and then we can just change them.

So h2, font-size is 1.2em and the color is 3C3809 and it does not have this font-weight:bold in it and the margin is the
same, 0.4em. Now the h4, it's 1.1em in size and it is bold and the color is this gray and the margin, this is the bottom
margin now, it is actually -0.2em.

So let's go ahead and take a look at all of that and see what that looks like in the browser. Oh, it's lovely. And that's what
it looks like over here as well. Excellent! Now, these links aren't right, you see the links? Look at what the links do in the
finished version. They have this orange color and they change to gray and they get this dashed underline, which is
actually not an underline at all. It's a dashed bottom border. So, I'm going to go ahead and actually in our CSS, we are
going to make this the default anchor style and it goes in the outer table up here.

And we say outerTable a:link and outerTable a:visited. That's for the visited and the unvisited links and I'll get text-
decoration:none, so that takes out the underline and I'll get this color. And then we do outerTable a:hover and that's the
style for the mouseover.

When your mouse is hovering over the link, this is the style that you get there and it will have this color of 566440 and
border-bottom: 1px dashed #566440. So, when we save this, we'll see that our links look like we except them to
see. There we are, see that? And that's how we want those to look and so that will also happen in the sidebar because
we put it in the outerTable level.

Finally, what we need to do now is this is unordered list. And that will go down here in the main content, right here.
#mainContent ul. And that will be Georgia and font- size 0.9em, just like in the paragraphs.

margin-bottom. So it would be the spacing after the whole list, 1.4em, and then finally the li,which is the line items
themselves, those will have a margin-bottom of 0.6em. So, that's the spacing between those items. We will go ahead
and save that and look out it the browser and there now, our list looks like we expect our list to look.

So, that's the left content there, that page. That's pretty easy once we have the template all done. You can see that the
rest of these pages are going to go fast. In our next lesson, we'll do the sidebar content and we'll be all done with this
main page

Building a main home page: sidebar content

As we continue building the example website, in our last lesson, we filled in the left-hand side of the main homepage
and in this lesson, we'll continue with the Sidebar Content. So, let's get started. Here in our editor we have our
beginning.html, which has the content for the left-hand side that we filled in last time. And our beginning.css, which
likewise has all of that style from the last time. And our home.txt which has the content here for the sidebar, which we'll
becopying, and first let's go ahead and do our traditional Save As and saving as home.html, because this will be the
homepage.

And save the css as main.css and our home.txt, we don't have to Save As because we're only going to be reading from it
not writing to it. Let's go ahead and copy this content, so I'm pressing Ctrl+C because I'm using a PC here. If I were using
a Mac, I would use Command+C and over here in our home.html, we're going to scroll down to the Sidebar Content and
go ahead and press Ctrl+V to paste and there we have it.

So, the first thing I want to do is fill in the XHTML here, and like I said before for the home page, we're doing all of these
manually in the future pages because we'll have had this experience.We're going go ahead and just cut and paste the
already HTML-ified or Xhtml-ified text. So, I'm going to start with this image here and let's say img src= and there I have
that and then I'm going to go to fill in the width and height. I'll go ahead here and drag this over because this Editor is
kind of cool. It allows me to do it this way. Here we go.

So that's our image tag and then this gets an h3, because we use h3 for the right-hand side for the sidebar and we get
paragraphs here and then paragraph here and then we have another image. I can just cut/paste. That's the other way to
do this. Now, this is an h3. And add another image.

Drag that over. That's just fun to do it that way. And there we go. Another h3, another paragraph and an end
paragraph. And then we have some links here. This is supposed to be a capital C there. I make that a href = and end a,
equal to that part and take this part here andstick it in there and the same thing here.

And finally, this one here. Now, one other detail. These images are in the images directory, so we'll just say images here
and I'll copy that and paste it here and paste it here, there we go. I think our content is ready and I'll go ahead and take
all of this and indent it. In this editor here, which is Notepad++, I select a block of text and use the Tab key.

Different editors have different ways of indenting. I find it very valuable to keep my code indented. It helps me to find
my way around and to know what is related to what. So we'll go ahead and save this. Now there is some formatting
we're still going to need to do in css. But let's just take a peek and see what it looks like in the browser real quick. And
we'll need to drag in this file, which is the home file in our home-part2. Drag this into the browser and there we have it,
there is our right content. So that's great! It looks good.

It's still not entirely done. We need to format these images over. If we look at our example here we see that it's very
close. The images are indented a little bit and the one's that our photographs have this nice little border on them. So
we'll go ahead and do that in the css right now and that's over here in our css and we're going to add a couple of styles
down here in the sidebar section right over here. All right, so the first thing we want to do is we want to indent those
images a little bit and so we can do this here.

So this would be the selector for the images in the sidebar because they are under the contentRight, content margin 0
25 pixels. So, this makes the top margin and the bottom margin 0 and the left and right margins 25 pixels, and I'll just go
over to the browser and take a look at that. Save here and reload and there we have it. Our images are now
indented. Now, all we need to do is to put a border on these photographic images.

We go back into the XHTML and we use a class selector here. For the ones that are photographs, so this Surf1 image of
photograph, this is a product image. So this is a photograph, so put in a class selector here. Now we go and put that class
in the style sheet.So we're using a combination of selectors here now. This is something we haven't done before.

So, we have the ID Selector for the contentRight ID and so all of the images that are within that context that also have
this class selector. So, img.photo is a class selector. Those who'll get this additional style and first they will apply this
image style and then they will apply the class selector because that's where they are in the hierarchy. It's not because
one is after the other in the css file. It's because hierarchically, img gets applied before the class img.photo.

We're applying a padding of 5 pixels. Remember padding goes inside of the content box and it expands the content
box. And the border is a 1 pixel border, which also expands the content box by 1 pixel. It will happen on the outside of
the padding because the padding is inside ofthe content box, like margin is outside. So, we'll go ahead and save this and
we would expect this to create 5 pixel padding with a dark border around. It's not quite black here. It's a gray border.

Go ahead and reload in the browser and there we have it. So these boxes got a little bigger, you saw that and now there
is this 5 pixel border around it. That's the padding because it's not margin. Margin would be on the outside of the
border. It's on the inside, so that's the padding and that only happened on the ones that we gave that class selector to
the photographs, so there we have it. We are done with the homepage. We have now created the main content and the
sidebar content for the home page, and so we'll go ahead and move on to the next page.

Creating a page with a menu, graphics, and formatted links

Moving right along in building the website, we're doing the gear page now which is the second page in our website and
this is what it looks like. So we have a different ID image here. We have this little menu for the different subcategories of
gear for sale. We have this paragraph of text and then we have This month's special here, and the content on the
right. So, let's get started.

Here in our text editor, we have the empty template. We have the beginning.css, which is where we left off in our last
lesson with the CSS, and we have the text that we're going to copy and paste. This is already all XHTML-ified for us. So
here we go. First thing we're going to do is we're going to Save As, which is what we always do, and in this case, it's
going to be gear.html.
That's the name of the page and then the CSS would be main.css and the gear text we're going to leave alone because
we're only reading from that. We're not writing to it. So the first thing we do is we change the page title here and it
will be Groundswell Gear. Then we're going to change this menu section here, here only save this, and we'll show you in
the browser what we're doing.

Here the Gear menu item is the current image, so it's taller, and it's gray and it's not a link, whereas in the previous page,
it was the Home menu item. So here it's the Gear menu item and so we'll need to change that and this is the easy way to
do that. I'm just going to grab this here and I'm going to cut with Ctrl+X, that would be Command+X on a Mac, and just
move it down one, right to here, so it's between the end of the previous link and the beginning of the next link and press
Ctrl+V to paste.

Then I'll change this first one to home, and home here, and home here, and then swap the widths, this will be 80, and
this one will be-- was it 73? Yes, 80 there and 73 here and then this home-current becomes gear-current, and this home
becomes gear.

So that's how easy that is. I just swap these pieces around and renamed them. So I'll save. We can look at our progress in
the browser, gear.html, and drop it in there. There we have the Gear menu. That looks like it works just fine. So if I click
on Home, we get the page we did last, but when I click on gear, we get where we are here so far. Now, I want to change
this middle image to be the gear ID image.

The Alt text, we'll say check out our gear. Then save that. Now we have our gear banner, hit reload in the browser and
there is our gear banner. Now it's time to do the content. First, we'll cut and paste the content from in here and so this is
the main part. Just right there, press Ctrl+C to copy, and Ctrl+V to paste.

That's all of that. Let's go ahead and indent it with the rest our content. Go ahead and save and take a look at this. I
know it's going to need some CSS work, but that's not bad. So, what are some of the things we need to do here? Well,
first of all, we need to format this so that it looks more like that, instead of these default links. So let's start there. All
right, so we have a class here for the leftMenu and that will be used for our formatting in the CSS.

So we'll go into the CSS, we'll come down here to the bottom of the mainContent, and we'll go ahead and do a class
selector. mainContent is the ID, and then it is p.leftMenu. All right, so first of all, we want this Trebuchet font so we'll go
ahead and copy that from some place else. And it's got a margin bottom 1.5ex, and that will give it that space
underneath it.

So I'll go ahead and I'll save and we can look in the browser here. So that's that nice space underneath that helps it to
look like a menu. Now we need to change these links so they look more like this. See, they don't have the dashes
underneath them and they start out with thegray and the highlight as you hover the mouse over them. So I'm going to
change that. So that works like this here. Now, we have a three- stage selector to work with.

mainContent, that's the ID selector, p.leftMenu, that's the class selector, and then within that we have the a, for the
anchor. So if we look in the XHTML here so that we have mainContent ID selector and then within that the leftMenu
class selector, and then within that the <a> tags.So all these <a> tags will be selected by this selector here, this three-
stage selector. So what we want do is change the default color to this color here, and then in the hover, we want to take
off that border.

So I'm just going to copy this so I have that selector and then edit the hover. Then it will have a different color now. It
will be the #b36b00. Again, these colors were all selected for me by the designer. Then border: none and so there we
have it. So now when the mouse is hovered over, save, the border won't be there. It'll just change colors.

So let's look at it in the browser here and reload. So now we start with that dingy color, and we get the highlight as
we move the mouse over. All right, so that's exactly what it looks like over here. Excellent! Now, we want to format this
part here, because that part is not looking how-- so it needs to have all this nice space around and it needs this
formatting here, the header, and the body, and then the dollar amount, in this paragraph down there.

So there's quite a bit of formatting to do. So let's get to it now. For this part, we want to just do a separate section. We'll
go ahead and put in a comment here, which is the gear description section. The right number of equal signs
there. There's a table there I'm going to use to select by. And here it is and it has a td, which is the table cell with an ID
gearLeftImage.

So that's just for this image here, and that image is going to float and also has this class, leftFloatImage. In this case,
we're really just going to use the td gearLeftImage here and do the formatting from there. All right, so td#gearLeftImage
and we are just going to give it padding of 25 pixels all around and I'll go ahead and save.

Then going back over here in the XHTML, we see that the next part is this other table cell that's called gear
description. So I'll go ahead and enter a selector for that and that's going to get a width, 290 pixels, save. Let's just take a
look at what this looks like in the browser so far. Well, it's starting to get there.

We see that the image looks nicely positioned there and the paragraph looks nicely set up.Now we just need to enter
the formatting for this. So we have an h3 for the heading and that's going to get some interesting formatting. It's going
to be the Georgia font, font-size will be 1.2em, color is the c47500 color.
It's got a bottom border there and it's got padding at the bottom, just 0.2em. So it's going to be a little close. Then the
margin-left, so that its flush is zero. So let's go take a look at that heading now. That heading should now be really pretty.
There it is.

So you see in the reference here, it's just like that, and in there, it's just like that. Now let's format the rest of these
pieces. Right, so we have this paragraph here, which is going to be in the Trebuchet font, you'll notice in the
browser. That's the Trebuchet font. The rest of this is all the Trebuchet font. So we can create a selector just for all the
p's in this section and copy and paste that Trebuchet font from up here, and there it is.

The font-size is 0.8em. Save that and get in the browser, we have the Trebuchet font for all the paragraphs. Now, the
price paragraph. That has a price selector on it. Go ahead and look in the HTML, you'll see that there's a class=price,
so that's a class selector.

We do here is we want to right align it and give it some font size. Make it a little bit larger. So go ahead and save there
and look in the browser. There we have the price, all large and to the right. So that makes this whole thing look just like
this. See that link in here? It's the style from the rest of the document, and that's just fine.

So that's the left side. Now the right side should be pretty easy. Go ahead and get the text for the right side. I think all
this formatting is already ready. I'm just going to copy and come in here. Select these lines and paste. I'll go ahead and
select those lines, and indent, and save.You'll not see anything unique in here so that just work just fine and there we
have it.

We have product images and they're already all nicely indented everything because of the styles we've applied
before. So you can see how this kind of stuff just becomes real easy once you've done it once. This is the power of the
style sheets, with all those styles setup for that column. So these elements that are in that column, they just get styled
right away, and it all just looks just right. There is our Gear page and it looks exactly like the reference, and the link
works, get Home and back to Gear, and there we have it.

On to the next page!

Creating a page containing an ordered list

In this lesson we are going to build the Lifestyle page as we continue to build our website. This is what the page looks
like. There's really not too much to it. So let's go ahead and get started.So here we have the template.html, which is our
starting place, and our beginning.css, which is where we left off our css from last time, and liftstyle.txt, which has our
fully XHTML-ified content. So we'll start out by doing our Save As.

I'm going to Save As lifestyle.html and save beginning.css as main.css and lifestyle.txt, we don't need to change it so we
are not going to do a Save As there. Then we'll start off by changing our title, Groundswell Lifestyle. Then we'll move on
to our links at the top of the page.So this is the current image and that one will go where the lifestyle image is now.

So we'll put that there and then we'll take the lifestyle one and we'll move that to the beginning and we'll make that into
home, and home, and home and then we'll change the width to 84 and I'm going to do a cut here with Ctrl+X and you
can use Command+X on a Mac. Make that 80 of the home image and then go over here with the width of the home
image add Paste.

Make that the width for the lifestyle and that makes it the current one, because it has this -current here and it has the
height of 30 for the current. Go ahead and change the alt to "lifestyle" and there we have our menu should be
updated. We can go ahead and check in the browser to make sure it got done correctly. Drag the lifestyle.html into the
browser and there we have it. There is our Lifestyle. Home link works and the Gear link works and there's our Lifestyle
page.

We need to change this id banner. Down here we make this a lifestyle and the alt text say, "live the lifestyle". Here we
go and then finally we can put in our content. We get that from the text file here. Copy with Ctrl+C and Paste with Ctrl+V
and go ahead and do the indent thing and Save and take a look at it in the browser, Reload and there we go.

We have the banner there and we have the "What is this surfing lifestyle?" text. You can see that's the text from over
here. Finally, the sidebar. Grab this from over here. Now there is one thing in this. We are going to need to do a little
formatting on this ordered list. Go ahead and copy and then paste it in our sidebar content here. And indent. We have
that. Go ahead and save and reload in the browser and we can see all this on the right-hand side is fine except for that
ordered list.

If we look on, here we see the ordered list is formatted a little bit differently. So let's go ahead and format that. So in our
CSS we are going to go down to the Sidebar section, way down atthe end right here. I'll go ahead and format the ordered
list, so we have contentRight and ol. So that's the ordered list and we are also going to want to format the line items. So
that will be contentRight. That's li.
So the Ordered List, that gets just margin stuff. margin .5em, 0, 1.5em, and 1em. So that's top, right, bottom, and
left. Then the line item I'm just going to start from this and paste that in hereand modify from that. So this is .8em and
the color is 666 and the margin is .2em for the top and bottom and .5em for the right and left.

So that stuff should make it look exactly like it does in here and there we have it. Now if you are using Internet Explorer,
which is statistically a number of you are, you will notice that this looks a little bit different in Internet Explorer. So I'm
just going to take a moment and talk about that. I'll bring up Internet Explorer and drag our document in there and take
a look. You notice this looks significantly different in Internet Explorer. This is because Internet Explorer doesn't handle
the left margin on ordered lists in the same way this Firefox and actually the rest of thebrowser community does.

Rest of the browser community follows the standard and Internet Explorer does not. So the compromise is we can make
this look passible in Internet Explorer and have it look okay in Firefox. In actuality, I would love for this margin to be a
little bit farther over to the left in Firefox.But the truth is if you make it farther over this way in Internet Explorer or I
make it farther to left in Firefox, one or the other of them is going to suffer terribly.

So this is the compromise that we have come up with here. So that's our page. You can certainly choose a different
compromise if you prefer and that's a choice that every web designer has to make when they deal with having
to support the browser that's 800-pound gorilla in the market and you are wanting to make their pages attractive and
work well on the browsers that actually follow the standard. So those are the choices we have to make and this is the
choice that I made and you can certainly make different choices and most people do. In any event, there we are and
that's our Lifestyle page and next up is the Video page.

Creating a page containing video

In this lesson, we're going to create the Videos page and this is really the final page of our website. You'll notice that this
has an embedded YouTube video in it and as I wave my mouse over these things, you get all the little Flash doodads that
YouTube embeds. So we'll learn how to do that. It's very easy to do. It provides free hosting for your videos and all kinds
of features that would be difficult to provide on your own. So it's a very popular way to embed videos in a webpage
these days. So this is our Videos page and this is what it will look like when we're done.

So, let's get started. Here in our text editor we have the template file and you'll notice this is inthe Videos folder under
the Exercise Files. So here's our template, here's our beginning.css and here's our text file. So we'll go ahead and start
with our Save As, save as videos.html and we'll save our CSS as main.css.

The videos.txt we do not need to save as anything because we're not going to write to it. We're just going to be reading
from it. First thing we do is change the title. That's going to say Groundswell TV. Then we're going to do our menu, so
we're going take this image and move it down here. Then we're going to take the link and move it up there and change
this to homeand change this to home, change this to home.

This becomes 80 and this one down here becomes 84. This becomes videos and finally this becomes videos over
here. There we're done. So we'll save that, go ahead and test it in the browser. So we need to load up the Videos page in
the browser and there we are. We have our menu and everything works.

That's our Videos page. Now we want to change our ID banner. That's right here. Change home_banner to
videos_banner and we'll save that and reload the browser. There we have it, Swells & Vision. Go ahead and put in the alt
text, "swells and vision." Now we'll go ahead and do the content. So we have our videos text file. This is really going to
be easy here just a copy and paste and copy and paste.

That's really easy. Go ahead and do the indent. Let's take a look at this in the browser and there we have it. There is our
Groundswell TV and there is our Video Clips. Now there's something missing. Oh, yeah, there is a video here. Ha-ha. So
this video is on YouTube and I've got the YouTube page loaded up here with the video on it. You can see this guy surfing
here. So we want to copy and paste this. YouTube provides this nice little Embed link and they also provide a way to
customize it.

So you see the little Gear icon there, I'm going to click on tha,t and we get some different options. I always like to include
the Enable delayed cookies. I'm going to start with that.YouTube normally provides cookies to the browser for some of
its features and what this does is it prevents it from giving cookies to the browser when the video is embedded on a
page that's not on the YouTube.com domain. So what this does is it delays any cookies until somebody clicks on the
link to get to YouTube.com.

So viewing the movie on your website will not give cookies and I like that. So I uncheck the Include related videos, which
is normally checked. So that way at the end of the movie, you don't get the related videos thing. I also don't click on
Show Border. Now notice the object width is 853, so we want it to be the smallest possible size. You see that changes in
there when we click on this. Now we can just copy and come over here to our text editor and paste it in here.

It will go right here. There it is. Oh my God! Look how long that is. It's 464 columns wide and that's a bit longer than
what we'd like. Now you could just leave it like this and that would be fine and it would show up. Let me go and show
you what that looks like on our page. I'm just going to close the YouTube page there now and reload this. Before I chose
just the movie, it's going to show us this security warning. If you're testing this in Internet Explorer, you'll get a similar
message, but it'll look a bit different. The security message will be at the top of the browser window. You just need
to click on that security message and select Allow Blocked Content.

I'm going to detour now and show you what to do with this. Now what this means is that you're watching content in
Flash but the content is off on a web server someplace and the page you're looking at is on your local computer. So if
you're following along, you'll get this warning or something like it. That's because the HTML that you're looking at is on
your local computer, but the Flash content is coming from the YouTube servers out there in the Internet
someplace. Now if the page was loaded on a web server someplace on the Internet, you would not get this warning.

You'll only get this when the page is loaded on your local network on your local computer. So you could just click on OK
and you also get this warning, because I took a long time and that's okay. Do you want to abort the script? No. So now
we get the video, okay? But if I go and reload the page again, you get the warning again. So I'm going to click on Settings.
I'm going to show you what to do with this. This loads a webpage over on the Macromedia website, which is at Adobe,
and it allows me to set an exception.

So I'm going to edit locations, add location. This is the file on my desktop. I'm going to go ahead and copy. I'm pressing
Ctrl+C on the PC or press Command+C on a Mac and Ctrl+V here, Command+V on a Mac and press Confirm. Now I have
this exception. I have two of them in here. One is for the other location where I have this loaded on my computer. That's
okay.You'll only have one and then I can close this and now whenever I hit Reload here, I'll just get the video. Now, back
to what we were saying.

Notice how big this is on the page. So I want to edit that down and I also want to make that XHTML a little bit prettier,
because that matters to me. That may not matter to you at all. So I'm going to edit this a little bit. Go ahead and break
there and I'm going to go ahead and break here. You notice that this param is a closed param, so actually I'm going to
change it to one of these because that's allowable in XHTML.

I'm going to do the same thing here. Now, I'm doing this because it matters to me and for most people it may not
matter. It also makes a little bit easier to work with and I'm going to be working with it a little bit, because I'm not just
sort to leave anything alone if I can do something with it. So this just takes a moment. We have our width and height
here, which is where I'm going with all this. Again, with the embed you can collect that.

So now I have my content like this and I'm going to go ahead and just because I'm like that I'm going to intend a little bit
there. All right. You notice that this has not changed how it works at all. All right? These are all things that-- all I've done
is formatted it. So when I go and look at the video in our page again, it's still there and it still looks just fine. What I'm
going to do is I'm going to change the size, because it's a little big, so I'm going to make this 420x260. I figured out these
dimensions earlier, and these keep the same aspect ratio.

So I'll save that and I'll go ahead and look at it in the browser. Now that's a much more reasonable size and now I can do
a little bit of formatting. I want to indent it a little bit. So again we'll go back to the browser. I'm going to put in a div and
a closed div down here. I'll indent this and I'm going to give it an ID, youtubeVideo.

I'll save that and go over to the CSS, all way down here to the end. I'm just going to create a section for
miscellaneous. So I know the C is silent in miscellaneous, but somehow I've always said it as if I were Popeye. "mis-ca-
llaneous." So that will be 20 pixels at the top and at the bottom, 0 on the right and 30 pixels on the left. Go ahead and
save this.

We've saved that already. Bring it up in the browser and there we have it. So this looks exactly like it does in our
reference site. All right! That page is now done and working just fine. I just want to add one thing here. The site that
we've been working with was designed by James Williamson. So I appreciate that. It allowed us to have some interesting
content to work with as we showed you how to build a website using tables for positioning and using all the
techniques that we learned in this course on XHTML and HTML.

Touring the finished site

In this movie, I'll show you the same site that's used in the rest of this chapter, but this version uses CSS for positioning
instead of tables. This will be a quick overview. If you'd like a more complete discussion, please see my course CSS
Positioning Best Practices here on the lynda.com Online Training Library. So here's the site using CSS instead of tables,
and here's the same site in our tables version. You can see it's pretty much the same; there are some very slight
differences, and that's mostly due to the fact that you can get finer grained control of your positioning with CSS than you
can with tables.

And here is the code for this. This is the CSS version. You will notice that there are no tables in here at all, and here is the
tables version. You see the general look of it is very, very similar. It's organized pretty much the same, only one is using
tables for positioning, and one is not. In the CSS version, we're doing our positioning by using these div tags; for example
we have a header div tag here and we have one for the middle banner and we have one for the content, and then way
down here there is one for the sideBar. And these are using ID selectors.
ID selectors are useful. We only have one particular instance of a thing on the page, and then here is the CSS for it
here. In the main.css file, there is our outerDiv, there is our banner. As we come down here to the mainContent, you'll
see the mainContent div, and this one has a float:left on it, and so that's this one right here, and you see it contains all of
the HTML for the main side of the site. And that corresponds to this part right here from Welcome to Groundswell all in
this left column.

And so that's aligned to the left inside of the outer box of the content, that's aligned to the left using this float: left here
in the CSS. Now when we get down to the sideBar, here is our sideBar, so you see that this says float: right, and we look
at this in the website. That's this part over here, starting to the right of this vertical rule and down to the bottom. So
that's that right column, and it's floating to the right. The left column is floating to the left.

So in a nutshell, that's really all there is to creating columns in CSS. These same columns in the tables version are used
using tds inside of a tr, and so when we get down here to contentLeft, we have a td, and when we get down here to the
sideBar, we have another td adjacent to it, and that's what gives it the columns in the tables version.

So here you've seen a brief overview of an alternate way to accomplish the same layout using CSS instead of tables. CSS
provides some real advantages, allowing you flexibility and control that you don't get using tables for layout. For more
about CSS, see my other courses, CSS for Developers and CSS Positioning Best Practices here on the lynda.com Online
Training Library.