IntroductionWelcome| 00:00 | (Music playing.)
| | 00:03 | Hi! I'm Bill Weinman and welcome
to XHTML & HTML Essential Training.
| | 00:09 | In this course, I'll show you how to
use XHTML & HTML to create and modify web pages
| | 00:14 | that will work properly across
platforms and devices, and continue to work
| | 00:18 | well into the future.
| | 00:19 | We'll start getting you up to speed by
reviewing the different versions of XHTML
| | 00:24 | and HTML, so you can choose the
version that's right for your project.
| | 00:29 | We'll go over the structure of the
document and how to create and use templates.
| | 00:33 | We'll cover how to use all the major
tags and features, paragraphs and line
| | 00:38 | breaks, phrase elements, font markup,
headings, lists, hyperlinks, and URLs,
| | 00:46 | tables, frames, and inline frames.
| | 00:50 | And when we're done with that, we'll go
over basic CSS so you can fine-tune the
| | 00:54 | look of your documents.
| | 00:56 | I've targeted this course for web
designers and coders who work with XHTML and
| | 01:01 | HTML either directly or with a WYSIWYG editor.
| | 01:04 | I'm always excited to show both new and
experienced designers the best practices
| | 01:09 | to get the job done and to get it done well.
| | 01:11 | Now let's get started with
XHTML and HTML Essential Training.
| | Collapse this transcript |
| Using the exercise files| 00:00 |
If you're a premium member of the
lynda.com Online Training Library or if you're
| | 00:04 |
watching this tutorial on a DVD ROM,
you have access to the Exercise Files used
| | 00:09 |
throughout this title.
| | 00:10 |
So this is how the Exercise Files are organized.
| | 00:13 |
You'll see I've got this folder opened
from the Desktop here and you can see
| | 00:18 |
that each of these folders corresponds
to a chapter in the course and some of
| | 00:24 |
the folders have sub-folders like this one
here and it has these different files within it.
| | 00:30 |
So it has sub-folders, then the sub-
folders are numbered according to the lesson
| | 00:35 |
within that chapter.
| | 00:36 |
And if it doesn't, like in the case of
this one, then it just has files within it
| | 00:41 |
that are numbered according
to the lessons within the chapter.
| | 00:43 |
So this makes it easy for you to follow along.
| | 00:45 |
You can open up these files in your
own text editor and follow along as I
| | 00:50 |
demonstrate the techniques
in that particular lesson.
| | 00:54 |
As a final note, this final
chapter here, the website, has a different
| | 00:57 |
organization and I'll explain that in
the first lesson within that chapter.
| | 01:02 |
If you're a monthly subscriber or an
annual subscriber to Lynda.com, but do
| | 01:06 |
not have access to the Exercise Files,
you can still follow along from scratch
| | 01:10 |
with your own assets, typing the lessons as
you see me demonstrating them on the screen.
| | 01:15 |
So there we have it.
| | 01:16 |
That's the organization of the
Exercise Files and the whole spiel about
| | 01:20 |
the Exercise Files.
| | 01:21 |
So let's get started.
| | 01:23 |
| | Collapse this transcript |
| Choosing a text editor| 00:00 | Let's talk about text editors.
| | 00:02 | As you're working with HTML and XHTML
and CSS and other computer code kinds of things,
| | 00:09 | you're going to want to be using
a text editor and not a word processor.
| | 00:15 | So here's the difference.
| | 00:17 | A word processor formats text.
| | 00:20 | It has italics and it has bold and
it has columns and it has graphics and
| | 00:26 | all kinds of stuff.
| | 00:28 | So as you type in your text,
it's not just saving the text.
| | 00:31 | It's also saving all of this formatting
information what we in the biz call meta
| | 00:36 | information along with the text.
| | 00:39 | So when you're editing code like HTML
or XHTML or CSS or a language like Perl or
| | 00:46 | PHP or C or anything that's supposed to
be just plain text, then you need a text
| | 00:52 | editor that is not a word processor.
| | 00:54 | If you use a word processor to do the
exercises in this course, it will not work.
| | 00:59 | You need to be using a text editor.
| | 01:01 | Here are your choices.
| | 01:03 | If you are on a Mac, and I use a
Mac at home, I happen to use BBEdit.
| | 01:08 | BBEdit is a fantastic text editor.
| | 01:11 | It is not free, but it has many,
many cool and useful features and
| | 01:15 | I personally love it.
| | 01:17 | Like I said, it's not free.
| | 01:18 | The same people that make BBEdit make
TextWrangler and the TextWrangler is free
| | 01:24 | and it has almost all the features of BBEdit.
| | 01:27 | It's actually a great text editor and
if you don't want to spend the money
| | 01:30 | on BBEdit, go ahead and get TextWrangler
and you'll find that it works great for you.
| | 01:35 | If you're on a PC and I work on a PC
often and when I do I use Notepad++.
| | 01:41 | I used to use another text editor
that I'd paid for that was not free.
| | 01:45 | That was a great text editor and over
the years Notepad++ has eclipsed this
| | 01:50 | other pay-for-it text
editor and Notepad++ is free.
| | 01:54 | It has many, many fantastic and useful
features and the text editor that I'm
| | 01:57 | using in this course on this video is Notepad++.
| | 02:01 | Only bad thing about Notepad++ is the
annoying animation on their homepage.
| | 02:06 | The rest of the application is
really, really cool and works very well.
| | 02:10 | So there you have it.
| | 02:11 | You must use a text editor, a plain text
editor. You cannot use a word processor
| | 02:16 | for this purpose and here
are a couple of good choices.
| | 02:19 | For the Mac, you have BBEdit and you
have TextWrangler, which is free and is
| | 02:24 | almost all of BBEdit, and you have
Notepad++ for the PC environment.
| | Collapse this transcript |
|
|
1. Introducing XHTML and HTMLIntroducing HTML and XHTML| 00:00 | What are HTML and XHTML?
| | 00:02 | HTML is HyperText Markup Language,
developed by Propellerhead scientists in the
| | 00:08 | early 1990s so that they could share
scientific papers over the Internet.
| | 00:12 | It was based on SGML, Standard
Generalized Markup Language, because SGML was
| | 00:18 | designed to deal with documents and that
seemed like the thing to do with the time.
| | 00:22 | As the use of HTML spread and people
started using its hyperlinks feature a lot,
| | 00:27 | the World Wide Web was born.
| | 00:29 | Then things got ugly.
| | 00:31 | As the World Wide Web grew and grew,
it became a more popular medium and a
| | 00:34 | less scientific medium and HTML's
limitations became a barrier to the web's development.
| | 00:40 | People didn't want just words and
pictures; they wanted presentation and they
| | 00:44 | got it and HTML was extended to meet that need.
| | 00:46 | As the saying goes, check all the
parks in all your cities, you'll find no
| | 00:51 | statues of any committees.
| | 00:53 | As the web grew, the market demanded
more presentation-oriented features in
| | 00:57 | HTML and the scientists on the HTML
committees, being scientists and not graphic artists,
| | 01:01 | dragged their feet and the
market said, okay, then we'll do it ourselves.
| | 01:05 | Features were born of the necessity and
they were chaotic and they were useful
| | 01:09 | and they were chaotic.
| | 01:11 | Over time, the Standards Committees
caught up with the market and we now
| | 01:14 | have HTML 4 and it's mostly functional
and it mostly does what it needs to do
| | 01:18 | and it's still chaotic.
| | 01:20 | HTML 4 works and it works well and it has
serious flaws that most people will never notice.
| | 01:26 | What makes them serious is it takes a
lot of computing power to take the average
| | 01:30 | HTML page and render it in a
coherent and consistent manner.
| | 01:33 | That's what XHTML is for.
| | 01:36 | XHTML stands for eXtensible
HyperText Markup Language.
| | 01:40 | Don't let the name fool you.
| | 01:41 | It's not actually extensible.
| | 01:43 | The X is there because it's based
upon XML, eXtensible Markup Language.
| | 01:48 | So it's technically an extension of XML,
but XHTML was not itself extensible.
| | 01:54 | Think of it as HTML but with stricter rules.
| | 01:57 | The strictness of XHTML is good for computers.
| | 02:00 | It makes it easier to build a program
that reads the markup and renders the page
| | 02:04 | or reads it to blind people or something else.
| | 02:07 | Of course, the other side of the
coin is that no one can force the whole
| | 02:10 | Internet to stop using messy old HTML.
| | 02:12 | So it's really useless, right?
| | 02:13 | Well, perhaps that's true, but it's
really not that much harder to write strict
| | 02:18 | XHTML than it is to write sloppy HTML.
| | 02:21 | So, I'm going to do my part and I'm
going to show you how all of this works.
| | 02:25 | Why should you use XHTML instead of HTML?
| | 02:29 | HTML is very forgiving of
inconsistent and even erroneous documents.
| | 02:34 | XHTML requires the documents follow
a specific and well-defined structure.
| | 02:40 | Stricter rules means less variance
among browsers and more consistent results.
| | 02:43 | It means your web pages will behave
more consistently on new devices and
| | 02:47 | it makes it easier for developers to
create wonderful new applications that will
| | 02:50 | ultimately enhance all of our lives.
| | Collapse this transcript |
| Understanding versions of HTML and XHTML| 00:00 |
There are a number of
versions of HTML and XHTML available.
| | 00:03 |
Let's take a look at them.
| | 00:05 |
HTML 4.01 is the current version of HTML.
| | 00:09 |
It has been in use since 1999
and it is still standard today.
| | 00:15 |
XHTML 1.0 is based on HTML 4.01.
| | 00:18 |
It is in wide use today for working websites.
| | 00:22 |
It's easy to use and
most sites that are XHTML use 1.0.
| | 00:27 |
XHTML 1.1 is a very strict and
stripped down version of XHTML.
| | 00:32 |
It has no presentation features.
| | 00:34 |
Instead, you must rely on CSS
style sheets to do all your layout.
| | 00:38 |
Unfortunately, not all browsers
implement CSS with sufficient consistency to
| | 00:43 |
make this work in all cases.
| | 00:45 |
So, sites that use XHTML 1.1 are
still pretty rare and for good reason.
| | 00:51 |
XHTML 2.0 began in 2002 and was
actively in development until 2006.
| | 00:56 |
As of this recording, it's
been pretty much abandoned.
| | 01:01 |
XHTML 2.0 was designed to be a clean
break from HTML with no requirement for
| | 01:06 |
backward compatibility.
| | 01:07 |
This never worked very well.
| | 01:09 |
The browser companies weren't
really very interested in it.
| | 01:11 |
So it has substantially failed.
| | 01:13 |
HTML 5 picks up where XHTML 2.0 left off,
except that it is backward compatible.
| | 01:19 |
It has a lot of exciting new
features including XForms, which extend the
| | 01:24 |
capabilities of HTML forms to include
more data types, better formatting, data
| | 01:28 |
validation and many other useful features.
| | 01:31 |
XForms has been around since 2003 and
is now in its second full version, but it
| | 01:36 |
is not yet adopted by any of the major browsers.
| | 01:39 |
The problem is that websites are
already doing what XForms is supposed to do
| | 01:44 |
with AJAX, Asynchronous JavaScript and XML.
| | 01:47 |
So, XForms may be dead in the water. We'll see.
| | 01:50 |
Although it's promising and interesting
for geeky types like me, HTML 5 is not
| | 01:55 |
very close to implementation.
| | 01:56 |
A few of its features are supported by
a few browsers, but not enough for it to
| | 02:00 |
be useful for a public website.
| | 02:03 |
This course will use
XHTML 1.0 as much as possible.
| | 02:07 |
All things considered, it's the
best choice for a public website today.
| | 02:11 |
Where it's relevant?
| | 02:13 |
I'll discuss how examples relate to
HTML 4, but I'll always show you the
| | 02:17 |
strictness to most compatible XHTML 1.0,
so that you know how to make your
| | 02:21 |
websites functional, compatible and attractive.
| | 02:25 |
| | Collapse this transcript |
| Exploring a simple XHTML page| 00:00 | This is the simplest possible HTML document.
| | 00:03 | This is all that's
required in a document in HTML.
| | 00:06 | You have a title and you have a paragraph.
| | 00:09 | That's all that's really required.
| | 00:11 | This is the same document in XHTML.
| | 00:14 | This is the simplest possible XHTML document.
| | 00:17 | You'll notice it's got a lot more stuff.
| | 00:19 | You look at this document and you
look at this HTML document and you've got
| | 00:23 | to be asking yourself, why would I
want to go through all this trouble when I
| | 00:27 | can get away with this?
| | 00:29 | That is an excellent question.
| | 00:31 | The difference is the XHTML document is
going to work more consistently across
| | 00:37 | more platforms on in to the future.
| | 00:40 | So that's why we care about XHTML.
| | 00:42 | The truth is writing this document is no
more trouble at all than writing this document.
| | 00:48 | All you have to do is have all of
this other stuff saved in a template
| | 00:52 | someplace and whenever you start a new
document, you just start from that point
| | 00:56 | and typing your title and your content
and you're going, and so it's really not
| | 01:00 | anymore trouble at all.
| | 01:01 | So let's take a look at some of the
different elements in this document.
| | 01:05 | Before we do that, we need to
talk a little bit about terminology.
| | 01:08 | So we are on the same page as we talk
about all the different parts of this document.
| | 01:14 | So, this is a tag.
| | 01:16 | It begins with a left angle bracket
and it has the name of the tag inside and
| | 01:21 | then it ends in a right angle bracket.
| | 01:23 | This is an end tag.
| | 01:26 | It's the same as the tag except it has
this slash character between the opening
| | 01:32 | angle bracket and the name of the tag.
| | 01:35 | So together, these two tags are
called a beginning tag and an end tag.
| | 01:41 | Inside, they have the content of the element.
| | 01:44 | So altogether, with the begin tag and the end
tag and the content, it's called an element.
| | 01:50 | An element includes all of those
pieces, begin, content and end.
| | 01:54 | The begin tag is this one and
the end tag is that one, okay?
| | 01:59 | So this is the title tag, here is the
head tag and you'll notice that the head
| | 02:03 | tag contains the title tag.
| | 02:06 | So everything between the beginning of
the head and the ending of the head is
| | 02:10 | the whole element, the head element.
| | 02:12 | The head element contains the title tag
and it may contain even some other stuff.
| | 02:17 | This is the body tag and the body
element contains the body of the document,
| | 02:22 | including this paragraph and whatever
else you might want to put in there.
| | 02:26 | Then there is the HTML
element, which contains all of it.
| | 02:30 | It goes all the way up here,
actually, doesn't it? Yeah.
| | 02:33 | So, that's tag and that's element.
| | 02:35 | A container is a type of a tag that has content.
| | 02:38 | The P element is a container. It has content.
| | 02:42 | We might have another element that
doesn't have content, like the horizontal rule,
| | 02:47 | hr and there is an hr
tag that does not have content.
| | 02:52 | It stands alone by itself.
| | 02:53 | Now in XHTML, a standalone tag that
does not have content must have this little
| | 02:59 | slash before the closing angle bracket.
| | 03:03 | The reason for that is that in
XHTML, all tags must be terminated.
| | 03:08 | So when you have a container, it's easy;
you have an end tag that terminates the element.
| | 03:13 | If you don't have a container, if you
have just a standalone tag, then it must
| | 03:17 | have this little shorthand for closing.
| | 03:20 | It would be just as legal to
write it this way, but nobody does.
| | 03:25 | That would be just as legal.
| | 03:26 | Now you have a begin tag and an end tag.
| | 03:28 | So instead, there is this shortcut, this
shorthand, which says this is terminated.
| | 03:34 | Now, this space between the name and the slash
is not actually required. It is traditional.
| | 03:41 | So I tend to do it, but it's not required.
| | 03:44 | So that is a complete hr element.
| | 03:46 | It has it's begin tag and really has
its end tag built into the begin tag.
| | 03:50 | So it begins and ends all in one tag.
| | 03:53 | That is a valid element
that doesn't have content.
| | 03:56 | Now let's take a moment and just
talk about all this stuff at the top.
| | 03:59 | This stuff at the top is required and
that's really all you need to know about it.
| | 04:03 | What it is, how it works,
is probably not relevant.
| | 04:07 | It's just required.
| | 04:08 | This is what makes it valid XHTML and
this is what makes it possible for it to
| | 04:13 | be read across a lot of
different devices, well in to the future.
| | 04:16 | So you just cut-and-paste it, you keep
it in a template, we'll talk about how to
| | 04:20 | do that a little bit later.
| | 04:21 | We're going to talk a little bit about
some of the components of this a little
| | 04:24 | bit later, so that you'll understand
the parts of it that you may want to
| | 04:28 | occasionally change, but for the most
part, you just need to know that it's
| | 04:31 | required and you're going to cut-and-
paste that and it's included in the
| | 04:34 | Templates section of the exercise
files with this course. So that's it.
| | 04:38 | This is a valid XHTML file.
| | 04:40 | If you do in this way, they're
going to work across devices well and
| | 04:44 | consistently and well in to the future.
| | Collapse this transcript |
| Understanding the structure of an XHTML document| 00:00 | In our last lesson we talked about this
information at the top of the document
| | 00:03 | that needs to get cut and paste into
each of your documents, in order for it
| | 00:07 | to be a valid XHTML.
| | 00:09 | Let's take a look at what this
is and exactly what it all means.
| | 00:12 | This first line is the XML declaration.
You will notice it's XML; it is not XHTML.
| | 00:19 | XHTML is an application of XML
and this is the version being used.
| | 00:22 | So this XML declaration has the version
of XML and the character encoding that's
| | 00:26 | used in the document.
| | 00:28 | The version will always be 1.0 and the
encoding will depend on what language the
| | 00:32 | document is in.
| | 00:33 | For most Western languages utf-8
will work fine and that's the default.
| | 00:38 | If you're using a language that uses
different types of characters then western
| | 00:41 | languages, like for instance Japanese or
Chinese or Russian, that uses a different
| | 00:46 | set of characters, then you may
want a different character encoding.
| | 00:50 | The next line is the DOCTYPE.
| | 00:51 | This tells the browser what type of document
this is, which type of XHTML is being used.
| | 00:58 | This one is XHTML 1.0 Transitional
and that's what you'll for most of your
| | 01:03 | standard HTML documents.
| | 01:05 | The other two types are Strict and
Frameset, and we'll look at those in a minute.
| | 01:10 | In a Transitional document, you have
available all of the HTML 4 tags.
| | 01:15 | You have Center, you have Table, you have
Font and all of the presentation markup,
| | 01:19 | all the tags are available in HTML
are available in XHTML 1.0 Transitional.
| | 01:26 | So if we look at this document in the
browser we see that there is a yellow box
| | 01:30 | and it has some text in it.
| | 01:32 | So here in the document, we see that
yellow box is made by the table element and
| | 01:36 | the text is inside of a paragraph
element and it has the font tag for
| | 01:41 | specifying the font and the size.
| | 01:44 | And that looks like this in the browser.
| | 01:48 | In our strict document, you will notice
that the DOCTYPE says XHTML 1.0 Strict.
| | 01:54 | The Strict documents do not have
available any of the presentation.
| | 01:57 | The center tag is not there, the table
tag is not there, the font tag is not there.
| | 02:03 | All of these things have to
be done with style sheets.
| | 02:06 | And so at the top of the document we have a
style sheet and then down here is the content.
| | 02:13 | So that document looks like this in the browser.
| | 02:15 | There is the strict version.
| | 02:17 | You see it's virtually the
same as the Transitional version.
| | 02:21 | There is the Transitional
and there is the Strict.
| | 02:25 | You can accomplish the same things
with style sheets that you can with the
| | 02:30 | tables and the fonts.
| | 02:31 | Finally, the Frameset document
is for documents that have frames.
| | 02:34 | We'll cover frames in more
detail in a later lesson.
| | 02:37 | There in nutshell, you have three
frames available, frame sources. It goes red,
| | 02:42 | yellow and then blue HTML.
| | 02:43 | That looks like this in the
browser, having red, yellow and blue.
| | 02:49 | So those are our document types.
| | 02:51 | Again, you will be using the XHTML
1.0 Transitional document type for most
| | 02:56 | of your documents.
| | Collapse this transcript |
| Understanding document containers| 00:00 |
In our last lesson, we've covered this
front matter at the top of the document.
| | 00:05 |
Let's look at the document itself.
| | 00:07 |
The HTML element, which has it's begin tag
here and its end tag down here at the bottom,
| | 00:14 |
this contains the entire
document. It's a container.
| | 00:16 |
You remember a container is any HTML
tag that has content in between the begin tag
| | 00:21 |
and the end tag.
| | 00:22 |
So the HTML tag is a container,
and it contains the entire document.
| | 00:27 |
The document itself is in two parts.
| | 00:29 |
There's the head, which has the title in it
and other meta-information about the document.
| | 00:36 |
It could have style sheets.
| | 00:37 |
It could have JavaScript.
| | 00:38 |
Then there is the body of the
document, which contains the content of
| | 00:42 |
the document itself.
| | 00:43 |
In this case, it's got this paragraph with
the formatting information wrapped around it.
| | 00:49 |
And that's really it.
| | 00:51 |
That's the structure of a XHTML document.
| | 00:54 |
| | Collapse this transcript |
| Creating and using templates| 00:00 | So now that we've covered this structure
of the XHTML document, and you know what
| | 00:04 | all this stuff is that's
required in every document,
| | 00:07 | I know you're not going to want to type it
every time and neither am I. I'm a big fan of lazy.
| | 00:12 | So what I do is I keep around templates.
| | 00:15 | Now as a starting point, I have this
transitional-xhtml-template, which I
| | 00:19 | actually use every time I'm doing to build a
new document from scratch, and I start with this.
| | 00:23 | It's got all the stuff that's required.
| | 00:25 | It's got a placeholder for my
document title, has a placeholder for where I
| | 00:29 | start typing in my content.
| | 00:31 | Once I've designed a site,
like for instance this one here.
| | 00:34 | This is a site that we'll be using
later on in the course to show how we do
| | 00:38 | layout in a complete site.
| | 00:40 | And this is the template for it.
| | 00:42 | After I've designed the site and I've
built the front page, I tear out the
| | 00:45 | content and I create a template that's
got just all the elements that are going
| | 00:48 | to be consistent across the website.
| | 00:51 | And down here I've got placeholders.
| | 00:52 | Here's where my main content goes,
here's where my sidebar content goes,
| | 00:58 | here's where the title goes, and
the rest of it is just constant.
| | 01:03 | So here's what it looks like in
the browser. This is my little
| | 01:05 | transitional template.
| | 01:06 | This is the template for the website
that we'll be looking at in more detail
| | 01:10 | later on in the course.
| | 01:11 | And here's the place for the main content.
| | 01:13 | Here's the place for the sidebar content.
| | 01:15 | I don't have type any of this anymore.
| | 01:18 | Like I said, I'm a big fan of lazy.
| | 01:20 | This is something that you can do to
make to make it possible to use well
| | 01:23 | structured documents that are correct
and that will work well in a variety of
| | 01:27 | browsers, and in a variety of media, and
without really anymore effort than you
| | 01:32 | would put into just the
designing the things once.
| | 01:35 | No more effort really than it would be
just to use plain old ugly HTML, to be
| | 01:39 | able use well formed XHTML that will
work across platforms and well into the
| | 01:43 | future on all kinds of new devices.
| | 01:45 | So use your templates.
Become a fan of the lazy.
| | Collapse this transcript |
|
|
2. Text TagsUnderstanding how empty space is formatted in XHTML| 00:00 | As we begin to talk about how XHTML deals
with text, let's start with white space.
| | 00:05 | White space is any kind of space,
the space character, the tab character.
| | 00:11 | It's a line feed. Any kind of white space,
XHTML has a special way of dealing with it.
| | 00:17 | So here we have a document and it
has our front matter at the top.
| | 00:21 | It has head section and a body section
and it has a couple of paragraphs and
| | 00:26 | these are paragraph tags.
| | 00:28 | See the p at the beginning
and the end tag at the end.
| | 00:31 | Everything inside of the
paragraph element is a paragraph.
| | 00:34 | So this text here is in a paragraph by
itself and you see in the browser down here,
| | 00:39 | we have our text editor at the
top and our browser at the bottom so we
| | 00:43 | can see what we are doing.
| | 00:44 | The browser down there, that's in a
paragraph by itself and this other line of
| | 00:48 | text is in a paragraph by itself
down here in the browser as well.
| | 00:53 | So notice that the paragraph
has words and it has spaces.
| | 00:58 | Now if I go ahead and change this and
just add a bunch of spaces and save the
| | 01:04 | document and then go down here and
reload in the browser, you will notice that
| | 01:09 | the line of text does not change. All
of these extra spaces are all folded into
| | 01:14 | one space in the document in the browser.
| | 01:18 | So this is what XHTML does with space,
and HTML works exactly the same way.
| | 01:23 | All of these spaces are folded
into one space in the browser.
| | 01:28 | Now if instead of inserting a bunch of
spaces, what if I insert a bunch of new
| | 01:33 | lines and then save it?
| | 01:39 | So I save the document and I reload in
the browser and you will notice that the
| | 01:43 | line of text is exactly the same.
| | 01:46 | All of these new line characters are
also folded into one space in the browser.
| | 01:53 | So this is how XHTML deals with white space.
| | 01:56 | In fact, it doesn't matter what kind
of white space it is or what kind of
| | 02:00 | combination of white space it is.
| | 02:02 | I could have a number of spaces up here.
I could have a number of new lines down
| | 02:07 | here. I could have more spaces over
here and I could even break up another part
| | 02:12 | of the line and all of this--
and I save the document and I load it up in the
| | 02:21 | browser and it's still
just the one line of text.
| | 02:25 | So this is how HTML and
XHTML deal with white space.
| | 02:30 | All white space is in a row.
| | 02:32 | It's adjacent to each other.
| | 02:33 | It is between pieces of text.
| | 02:35 | All white spaces folded into one
space character in the browser when it
| | 02:40 | renders the line of text.
| | Collapse this transcript |
| Using paragraph tags| 00:00 |
Let's take a look at how XHTML and
HTML handle paragraphs in a document.
| | 00:05 |
Here we have a document in our text
editor, the top window is the text editor,
| | 00:09 |
the bottom window here is the browser
and this document has a paragraph in it.
| | 00:14 |
It has two paragraphs actually.
| | 00:16 |
This paragraph here and let me scroll
down so you can see the whole thing and
| | 00:19 |
this paragraph over here.
| | 00:20 |
Now you will notice that the paragraphs
are enclosed in p tags. The p tag is for
| | 00:26 |
paragraph and the p tag is a
container. So it has content.
| | 00:30 |
The content of the container is the
paragraph itself and it has a begin tag and
| | 00:35 |
it has an end tag and that's how a
paragraph is formed in XHTML, head HTML.
| | 00:41 |
So this paragraph here is displayed in
the browser there and this paragraph here
| | 00:46 |
is displayed in the browser here.
| | 00:47 |
You will notice that the browser makes
a nice space between them and formats
| | 00:51 |
them as separate paragraphs.
| | 00:53 |
So in a nutshell, that's how paragraphs work.
| | 00:56 |
Another thing I would like to talk about is
how we format the paragraphs in the text editor.
| | 01:00 |
You will notice that this paragraph
here runs on and it goes way off the screen
| | 01:04 |
and sometimes you'll see documents
where paragraphs will go on for many, many
| | 01:09 |
screens wide, and they work just fine.
| | 01:12 |
That really doesn't have any impact
on how it's displayed in the browser.
| | 01:16 |
But if you remember, when we add
white space like for instance a line break
| | 01:21 |
right here, this doesn't really affect
how the text is displayed in the browser.
| | 01:26 |
I will go ahead and I'll save
this with the line break in it.
| | 01:29 |
You'll see it breaks after the word
words and the comma there, so that would be
| | 01:32 |
right there and I'll reload it in the
browser and you see that that does not
| | 01:37 |
affect how it's displayed in the browser.
| | 01:40 |
So what you can do is you can actually
reformat this and I'll use a feature in
| | 01:45 |
my text editor, most text editors have
a feature like this, like we call it a
| | 01:50 |
hard wrap or something like that.
| | 01:52 |
In this one, it's called Split
lines and it's in the Edit menu there.
| | 01:55 |
So I'll go ahead and I'll click on Split lines.
| | 01:58 |
It wraps the paragraph around, so that it
all fits on the screen here in the Editor.
| | 02:03 |
I will go ahead and I'll save that
and I'll reload it in the browser.
| | 02:06 |
So it has no effect on how it's
displayed in the browser, but it makes it
| | 02:09 |
readable on the screen here in my text editor.
| | 02:13 |
This is something that's just nice to do.
| | 02:15 |
It makes it readable in the text editor
and makes it a little bit more workable
| | 02:19 |
if you have to use it in another
environment like in a console on a server or
| | 02:23 |
something like that or you just need
to make a quick edit when you are some
| | 02:26 |
place else and it just makes it
easier to work with and it doesn't have any
| | 02:31 |
effect on how it's displayed.
| | 02:32 |
So I consider a nice practice, I always
wrap my paragraphs so that they fit on
| | 02:37 |
the screen in my text editor and
they go ahead and work just fine in the
| | 02:40 |
browser when I do that.
| | 02:42 |
| | Collapse this transcript |
| Aligning paragraphs| 00:00 | So in our last lesson we talked about
paragraphs and how they work and how they wrap.
| | 00:04 | Now let's take a look at how to
change the alignment of a paragraph.
| | 00:08 | Here we have a document, a fully formed
XHTML document with all the front matter
| | 00:12 | at the top and in the content of the
document we have one paragraph element and
| | 00:18 | it's there to there. We have the paragraph
tag and the close tag and some text in
| | 00:24 | between and down here at the bottom we
have this document opened in a browser
| | 00:28 | with the paragraph
displaying there on the screen.
| | 00:30 | Let me just drag this back a little
bit so the paragraph wraps nicely.
| | 00:34 | You will notice that the paragraph is
justified on the left, it's aligned flush
| | 00:39 | on the left and it's ragging on the
right and this is the default alignment for
| | 00:44 | a paragraph in XHTML and HTML.
| | 00:47 | So let's take a look at how to change
that, I'm going to add an attribute to the
| | 00:51 | paragraph here, say align="right".
| | 00:56 | So this is what an
attribute looks like in XHTML.
| | 00:59 | You have the attribute name, and an
equal sign and the argument of the
| | 01:03 | attribute is in quotes.
| | 01:05 | I tend to use double quotes.
| | 01:06 | Single quotes also work just fine.
| | 01:08 | So this is how it's formed, you have
the left angle bracket and then the name
| | 01:12 | of the tag, which is a p tag in this case
for paragraph, and then you have some space.
| | 01:17 | It can be any amount of white space.
| | 01:18 | You can have new lines here.
| | 01:19 | You can have any amount of legal white
space and then the name of the attribute.
| | 01:24 | In this case is align which tells the
paragraph how to do its alignment and an
| | 01:29 | equal sign and the argument in quotes
and in this case, the argument is the word
| | 01:34 | "right" and a close angle bracket and
then you have the close tag down here with
| | 01:40 | the content in the middle.
| | 01:41 | So I'm going to go ahead and save this.
| | 01:43 | What we expect to have happen when we
reload in the browser is that the right
| | 01:47 | side will be flush, the
left side will be ragged.
| | 01:50 | So I'll go ahead and hit
Reload and there we have it.
| | 01:52 | The right side of the paragraph is now
flush and the left side is ragged, and so
| | 01:57 | that's the right alignment.
| | 01:59 | There are two other alignments
available, one is called justify and what this
| | 02:05 | does is this makes both sides of the
paragraph flush and then we have the left
| | 02:11 | side as flush and the right side as flush.
| | 02:14 | And the other alignment is center,
which makes it ragged on both sides, all of
| | 02:19 | the content centered in
between and there we have center.
| | 02:25 | The default option of course is left and so we
saw that without any argument in the alignment.
| | 02:30 | You can also do it this way if
you want to explicitly assign it.
| | 02:33 | You can say align= "left"
and reload in the browser.
| | 02:38 | We have that flush on the left and
ragged on the right as we did with the
| | 02:41 | default arrangement.
| | 02:43 | And so that is the alignment
attribute to the paragraph tag and its
| | 02:47 | various options.
| | Collapse this transcript |
| Understanding block-level and inline tags| 00:00 | There are two major types
of tags in HTML and XHTML.
| | 00:04 | There are block level
tags and inline level tags.
| | 00:07 | Block levels tags are
elements that contain other elements.
| | 00:10 | These include paragraphs, headings,
tables, etcetera and the special
| | 00:13 | generic block element div.
| | 00:15 | Inline level tags represent objects
that typically occur in the line of text
| | 00:19 | including I, B, image, etcetera and
the special generic inline elements span.
| | 00:23 | Let's take a look at some block and
inline level elements in our editor here at
| | 00:28 | the top of the screen.
| | 00:29 | We see the center tag contains
paragraphs and the paragraphs contain in this case
| | 00:37 | an emphasize element and
in this case an image element.
| | 00:41 | Paragraphs are special in this way and
that the P tag is the only block level
| | 00:46 | element that cannot contain
other block level elements.
| | 00:50 | Paragraphs can only contain
text and inline level elements.
| | 00:54 | Other block level elements can
contain both block level and inline level
| | 00:58 | elements as in the case of the center tag here.
| | 01:02 | Also, take note that images are inline elements.
| | 01:06 | This can be a point of
confusion, so it's good to remember.
| | 01:09 | Images are inline elements;
| | 01:10 | they are not block level elements.
| | 01:13 | This is just an overview of
block and inline level tags.
| | 01:16 | As we go over individual tags in the
rest of the course. We'll talk about
| | 01:20 | whether they are block level or inline level,
so you can get that straight at the time.
| | Collapse this transcript |
| Controlling line breaks and spaces| 00:00 | In our lesson on paragraphs, we
talked about how the browser automatically
| | 00:03 | formats a paragraph taking multiple
occurrences of white space, spaces, new lines,
| | 00:08 | etcetera and folds them into one space
for the purpose of formatting the paragraph.
| | 00:12 | In this lesson, we are going to talk about
how to control the line breaks in the browser.
| | 00:16 | Here in our Editor on the top of the
screen, we have a couple of paragraphs and
| | 00:20 | we are displaying those paragraphs in
the browser on the bottom of the screen.
| | 00:24 | Let me go ahead and shrink the browser
down so that the paragraphs wrap a little bit.
| | 00:30 | For the purposes these lessons we
can show how to control those wraps.
| | 00:34 | You will notice that the first
paragraph up here extends past the Editor
| | 00:38 | window with no wraps whatsoever and you will
notice that down in the browser it wraps normally.
| | 00:45 | You will notice that the second
paragraph is wrapped normally on the screen and
| | 00:49 | it wraps normally down
here in the browser as well.
| | 00:52 | So this first paragraph goes beyond the
Editor window and if we break it at some place,
| | 00:59 | let's break it over here, and
save it, of course this does not affect how
| | 01:03 | it's rendered in the browser whatsoever.
| | 01:05 | So how do we actually get
aligned to break where we intend it to?
| | 01:09 | For this purpose we use the BR tag,
br, and it's a standalone tag.
| | 01:15 | It does not have any content.
| | 01:16 | So we use the shortcut notation here to
satisfy XHTML's need for beginning and an end tag.
| | 01:22 | If we save this and reload it in the
browser, you will notice that the paragraph
| | 01:26 | breaks there and yet the paragraph
is still formatted as a paragraph.
| | 01:30 | In other words, it has got extra space
between the two paragraphs and this is
| | 01:33 | normal behavior for block
elements in a browser window.
| | 01:37 | Now we'll go ahead and take that out
and the paragraph is back the way it was
| | 01:44 | and save, reload it in the browser so we
can see that intentional line break is done.
| | 01:48 | Now how do we get a line break to not happen?
| | 01:51 | You will notice that between the words
Notice and How over here that there is
| | 01:55 | line break that's happened, because
the browser decided that it needs to wrap
| | 01:59 | there in order to make it into a paragraph.
| | 02:02 | What if we wanted to not wrap there?
| | 02:03 | If I go ahead and put in a non-breaking
space here, this is a special character
| | 02:08 | entity called non-breaking space, then
this will prevent a break between these
| | 02:14 | two words and these two words will be
on one line, so they will get wrapped
| | 02:18 | down to the next line.
| | 02:19 | Before we save this and look at
how it works, let's talk about the
| | 02:22 | character entity here.
| | 02:23 | You notice it has an ampersand at the
beginning and a semicolon at the end and
| | 02:28 | in between the ampersand and the
semicolon we have letters, nbsp.
| | 02:32 | This is how you use a
character entity in HTML and XHTML.
| | 02:37 | The ampersand denotes the beginning of
the character entity and the semicolon is
| | 02:41 | the end of it and in between you have
the designation of the character entity.
| | 02:45 | In this case, it's a named entity
and it's named nbsp, which stands
| | 02:49 | for non-breaking space.
| | 02:52 | So go ahead and save this and reload
the browser and you will see that now the
| | 02:57 | paragraph does not wrap
between the words Notice and How.
| | 03:00 | It doesn't break there.
| | 03:02 | It only breaks before it or after it
and so it takes the whole thing as a one
| | 03:06 | for here and puts it on the next line, and
that's how a non-breaking space works in HTML.
| | 03:12 | In fact, if you wanted this paragraph
to not wrap at all, you can select the
| | 03:16 | entire line and I'm just going to
select it from here to the end and not
| | 03:21 | include that space before & and use the Editor's
Search and Replace feature to replace the space.
| | 03:29 | The Editor fills in whatever you have
selected when you do that and replace all
| | 03:34 | the spaces with non-breaking space entities.
| | 03:38 | Replace All in selection, 26 occurrences, Close.
| | 03:45 | I will go ahead and Save and reload
in the browser and we see now that that
| | 03:49 | paragraph doesn't break at all.
| | 03:51 | It goes all the way across and you
have to scroll sideways in order to see
| | 03:55 | the entire paragraphs.
| | 03:56 | It puts it all on one line and that's
because there aren't any spaces that it
| | 04:00 | can break and all the spaces in the
paragraph are non-breaking spaces.
| | 04:04 | I am going to undo this and go ahead
replace this element here with a space and
| | 04:12 | character entity non-breaking space
entity, save and reload in the browser and
| | 04:17 | we see that our paragraph is now back to normal.
| | 04:19 | There is another way that we can force
this paragraph to not break and this is a
| | 04:23 | non-standard element.
| | 04:25 | It is not in the standard and it tends
to work in most of the browsers that I
| | 04:29 | have seen including Internet Explorer
and Firefox and all the popular browsers.
| | 04:34 | But it's not in any of the standard.
| | 04:35 | So it's an unsupported
rogue non-standard element.
| | 04:39 | It's called a no-break and it's spelled nobr.
| | 04:41 | I'll go ahead and insert it
there and at the end of the line.
| | 04:48 | So everything between those
beginning and end tag will not break.
| | 04:52 | So I'm going to Save that and reload
in the browser and you see we now have a
| | 04:56 | non-breaking paragraph.
| | 04:58 | So this is shortcut for making a
non-breaking paragraph, should you
| | 05:01 | actually want one and you don't feel like
search and replace all the spaces in the paragraph.
| | 05:05 | It is not supported.
| | 05:07 | It's not part of the standard.
| | 05:08 | It's just one of those elements that's
cropped up out of a necessity, but was
| | 05:13 | never made a part of the standard.
| | 05:14 | So you can use that, if you want to and
it will work in most browsers, but just
| | 05:19 | know that it's not part of the standard.
| | 05:20 | So this is how you control
the line breaks in a paragraph.
| | 05:24 | You can use the br element to insert a
line break where you want it and you can
| | 05:28 | use the nbsp character entity to
prevent line breaks where you don't want them
| | 05:35 | and you can use the unsupported non-
standard no-break tag to prevent line breaks
| | 05:40 | for a block of text.
| | Collapse this transcript |
| Formatting text with phrase element tags| 00:00 | In this lesson we are going to talk
about Phrase markup elements, which mark up
| | 00:03 | your text with the intention of a
phrase, like for example, here we have an
| | 00:08 | emphasized phrase, which just means it
should be emphasized with the em or this
| | 00:12 | one means it should be read strongly.
| | 00:15 | This makes it possible for non-visual
browsers to know what to do with your text.
| | 00:20 | To read it stronger or to read it with
emphasis, as opposed to the font markup
| | 00:24 | elements, which tells the browser, this
one is italic and this one is bold, but
| | 00:27 | it doesn't really tell a non-
visual browser what to do with it.
| | 00:30 | So it's important to understand the
distinction, the Phrase markup elements
| | 00:34 | are covered in this lesson and the Font
markup elements are covered in our next lesson.
| | 00:38 | The first Phrase markup element we
are going to talk about is the Emphasize
| | 00:42 | element and all of these Phrase markup
elements, as well as, their Font markup
| | 00:46 | counterparts are inline-level elements,
which means that they go inline with the
| | 00:50 | text rather than in
blocks as the block-elements.
| | 00:54 | So, this is an inline-element and it
means to emphasize em and you will notice
| | 00:59 | that in the browser it's rendered with italics.
| | 01:04 | You can't count on that though.
| | 01:06 | Different browsers may render it differently.
| | 01:07 | If you really care, if it's italics or
not, you are encouraged to use the Font
| | 01:12 | markup elements instead.
| | 01:14 | The Strong element means to read it
strongly and in this case it is rendered in
| | 01:18 | bold in the browser.
| | 01:21 | The Q element is for quotes and you
will notice in the browser it is rendered
| | 01:27 | with special curly quotes.
| | 01:29 | An important note about the Q element.
| | 01:31 | It is not supported by all browsers.
| | 01:33 | So, be sure that you check it in the
browsers that matter to you, before
| | 01:36 | committing it to the Internet.
| | 01:39 | The Code element renders in
monospace text and the next few elements
| | 01:45 | are interesting.
| | 01:48 | The Abbreviation element allows you to
use an abbreviation, and hover your mouse
| | 01:53 | for the meaning of abbreviation.
| | 01:54 | So, here we have an m and you will
notice that in Firefox it puts this little
| | 01:59 | dotted line under it to say you hover
your mouse over here, and you hover your
| | 02:02 | mouse and you get the
definition of the abbreviation.
| | 02:05 | These work differently in different browsers.
| | 02:07 | So, be sure to test them in
different browsers that matter to you.
| | 02:11 | Likewise, the Acronym element, we have LOM here.
| | 02:14 | And we'll notice that in the title
attribute we have lots of meaning, which is
| | 02:18 | the definition of the acronym.
| | 02:21 | So, down here you hover your mouse over
it and LOM stands for Lots of Meaning.
| | 02:25 | The next element is DFN, which
stands for defining instance.
| | 02:29 | So, you would use this the first time you use
a term that you want to define in a document.
| | 02:34 | In this case, the Firefox browser
renders it as italic and if you hover your
| | 02:39 | mouse over it again, you get the title tag.
| | 02:42 | So, meaning and purpose there.
| | 02:44 | DFN with the title tag and
it's meaning and purpose.
| | 02:47 | Again, this is for using a term the first
time in a document and being able to define it.
| | 02:52 | The Keyboard element, kbd
renders as monospace in Firefox.
| | 02:58 | The Sample element likewise.
| | 03:00 | samp also renders as monospace and
then finally the Var element, var, which
| | 03:07 | stands for variables, this is where
you would use a variable in code or
| | 03:10 | something like that and that renders as italics.
| | 03:14 | So, these are the Phrase markup
elements and how they are rendered in
| | 03:18 | the Firefox browser.
| | 03:20 | Of course, different browsers
will render them in different way.
| | 03:22 | So, be sure to test them in the
browsers that matter to you before committing
| | 03:26 | your page to the Internet.
| | Collapse this transcript |
| Formatting text with font markup elements| 00:00 | In this lesson we are going to
talk about Font markup elements.
| | 00:03 | These are distinct from
which Phrase markup elements.
| | 00:06 | The Font markup elements define the
visual style that the elements are going to
| | 00:11 | be rendered on a visual browser on the screen.
| | 00:15 | The Phrase markup elements are for
giving meaning to the text, like emphasized
| | 00:20 | or strong or something like that.
| | 00:23 | The Font markup elements are actually
depreciated in XHTML 1.0 and HTML 4.01.
| | 00:30 | The HTML police, as I affectionately
call them, would prefer that we not use
| | 00:34 | Font markup elements.
| | 00:36 | In reality, if you care about how
your text is going to be rendered on the
| | 00:40 | screen, you want to use the Font level
markups and not the Phrase level markups.
| | 00:45 | The Phrase level markups do not
guarantee how the phrase is going to be
| | 00:49 | rendered on the screen.
| | 00:50 | If you care that it's italics, if you
care that it's bold, then you use the
| | 00:54 | tags that mean that.
| | 00:55 | They are not going away, as long as
people are using them, they are not going to
| | 00:58 | take them out of HTML and XHTML.
| | 01:01 | So they are perfectly safe to use.
| | 01:03 | Browsers for visually impaired and
other non-visual browsers will not
| | 01:07 | necessarily know what to do with these.
| | 01:09 | If you care about those browsers, then
you want to use the Phrase level markups
| | 01:14 | in addition to these or instead of these.
| | 01:17 | Let's take a look at each of these tags.
| | 01:19 | These are also inline-level just like
the Phrase markup tags and so they go
| | 01:23 | inline with the text and their containers and
they contain the text that you are modifying.
| | 01:27 | So, in this case, we have the B tag
which stands for bold and you will see that
| | 01:32 | it's rendered bold in the browser down there.
| | 01:34 | Here is the Big tag, which means what
it's says, big, and you will see that the
| | 01:39 | text is bigger in the browser down there.
| | 01:42 | Here is the I tag for italics and
you will see that it's italic in the
| | 01:47 | browser down there.
| | 01:48 | So, these do exactly what it is that they say.
| | 01:51 | S is for strike out.
| | 01:53 | It's actually a shortcut for Strike.
| | 01:55 | Strike and S are same thing.
| | 01:58 | And you will see in the browser here there
is the S tag and there is the Strike tag.
| | 02:02 | They do exactly the same thing.
| | 02:04 | They have the same meaning.
| | 02:06 | In between we have the Small
tag which makes the text smaller.
| | 02:10 | There is the Strike tag.
| | 02:12 | TT stands for teletype.
| | 02:15 | It's like the pretag.
| | 02:16 | It preformats the text.
| | 02:17 | It renders it in all monospace font.
| | 02:21 | The pretag, pre, we'll cover that later.
| | 02:24 | That's a block-level tag and so you
cannot use that in inline in text.
| | 02:29 | This is an inline-level tag.
| | 02:32 | So, use this when you want your text
to be monospaced inside of a paragraph.
| | 02:38 | Finally, the U tag for underline.
| | 02:40 | It underlines the text, just like there.
| | 02:43 | So, these are the Font-level tags
and like I said, these are depreciated
| | 02:46 | which means that the HTML police don't
like them, but they are there and they
| | 02:50 | are there for good.
| | 02:51 | They're not going away.
| | 02:53 | The next versions of HTML are already
being designed and have them intact.
| | 02:57 | So you don't have to
worry about them going away.
| | 02:58 | The browsers will continue to support
them, as long as people use them and
| | 03:02 | these have a purpose.
| | 03:03 | They markup the text, how you
want it to be rendered on the screen.
| | 03:07 | If you care about how your text is
rendered on the screen, if you want
| | 03:10 | something specifically to be in italic
and something else specifically to be
| | 03:13 | bold, then you use these tags.
| | 03:15 | If you care about the meaning and
how they are rendered on a non-visual
| | 03:18 | browser, then you use the Phrase markup
tags and you can use them together, if
| | 03:23 | you need to.
| | Collapse this transcript |
| Adding document structure with headings| 00:00 | Headings in HTML and XHTML add
structure to your document and this is valuable
| | 00:05 | for search engines and other automated
tools that might want to categorize your
| | 00:09 | documents and to understand the
structure of them a little bit, so they can give
| | 00:12 | you more intelligent results.
| | 00:14 | Headings are valuable for this purpose.
| | 00:16 | Headings are rendered a certain way in browsers.
| | 00:19 | By default, they tend to be a little
bit ugly and so some people tend to not
| | 00:24 | use the headings, instead
formatting paragraphs for the purpose.
| | 00:28 | I am suggesting that it's a good idea
to go ahead and use the headings and
| | 00:31 | format those using CSS.
| | 00:34 | In this way, your documents can have
the structure that they need so that the
| | 00:36 | automated tools can report on them
properly and at the same time, they then look
| | 00:41 | the way that you want them to look.
| | 00:43 | Let's take a look at how we can do this.
| | 00:44 | Here's our heading 1 and you'll notice that
it's big and ugly and here's our heading 2.
| | 00:49 | The heading 2 means that the part of the
document after the heading 2 is related
| | 00:53 | to the part of the document after the
most recent heading 1, and likewise,
| | 00:58 | the heading level 3, h3, means that that
part of the document is related to the most
| | 01:02 | recent h2 level of the document.
| | 01:06 | This is how they are rendered in the
browser and as you can see, they may not be
| | 01:09 | exactly what you want.
| | 01:10 | So, you can change that by adding some style.
| | 01:12 | We are going to go into the Style Sheets
in a lot more detail in the chapter on CSS.
| | 01:17 | But let's just take a look at how you
can do this in this case, so you can see
| | 01:20 | what the results look like.
| | 01:21 | I'll add a style here.
| | 01:23 | Let's say we want it in a Sans-Serif
font and just a little bit larger than the
| | 01:27 | paragraph, not a lot larger than the paragraph.
| | 01:29 | So, we'll go ahead and say
| | 01:30 | font-family: sans-serif
and font-size: say 125%.
| | 01:40 | So, it will be just a quarter of a percent
larger than the normal paragraphs in the document.
| | 01:44 | I'll go ahead and save that and reload
in the browser and we can see that looks
| | 01:50 | a lot more reasonable.
| | 01:51 | Now, we'll go ahead and take this style
and copy it because that's easier than
| | 01:58 | typing a lot, and we'll go ahead and
paste it over here and let's maybe add
| | 02:03 | some color to this one.
| | 02:04 | Let's say heading level 2 will be dark blue.
| | 02:09 | So, I'll say color. I'm
going to use a color like this.
| | 02:15 | That's a blue and we'll talk more about
what that means in the section on CSS.
| | 02:19 | I'll go ahead and save that and reload
over here and we see that that's a dark blue.
| | 02:23 | It's a little bit bluish.
| | 02:25 | It's not an overwhelming blue.
| | 02:27 | We'll go ahead and we'll copy this and
use it as a basis for the heading level 3
| | 02:34 | and go ahead and say instead of
changing the color of the text, we are going to
| | 02:38 | change the background-color of the text.
| | 02:40 | Background-color like that and
we'll say it's going to be a light blue.
| | 02:47 | So, I'll make it say #ccf,
which is a light blue.
| | 02:51 | Go ahead and save that and load it up
in the browser and we have a light blue
| | 02:57 | background now on this.
| | 02:59 | So, you can see that you can do things
to make it attractive or make it look how
| | 03:04 | it is that you want it to look and
yet still have the structure that's
| | 03:09 | important for the automated tools
that might be reading your web page.
| | 03:13 | So, headings are valuable for that
purpose, they are valuable for giving your
| | 03:16 | documents structure and they
can be made pretty by using CSS.
| | 03:20 | We'll talk about CSS in a lot more
detail in our chapter on CSS later in this course.
| | Collapse this transcript |
| Formatting quotations and quote marks| 00:00 | In this lesson, we are going to
talk about quotations and quote marks.
| | 00:03 | There are two elements in play here.
| | 00:06 | One is the Blockquote element, which
is a block-level element that quotes an
| | 00:10 | entire block of text, and the other
is the Q element that puts quote marks
| | 00:14 | around a bit of text inline.
| | 00:17 | First, the Blockquote element,
which you can see demonstrated here.
| | 00:21 | In the browser, you'll see it's just
indented text and if I go ahead and shrink
| | 00:26 | down the browser so that it wraps,
you'll see that it's indented on both sides
| | 00:31 | but it's not centered or anything.
| | 00:34 | That's actually how the
Blockquote element is often used.
| | 00:37 | It's often used just to indent text.
| | 00:38 | It's not used necessarily to
mean this is a block of quoted text.
| | 00:42 | So, be aware of that and when you are
using the Blockquote element, be sure to
| | 00:46 | use it to mean what it's supposed to
mean and if you need to just indent text,
| | 00:50 | you can use Style Sheets for
that with a regular paragraph.
| | 00:53 | The new Q element and I say new, it's
been around now for almost ten years but
| | 00:57 | it's not actually
supported by a lot of browsers.
| | 00:59 | So, it's not used very much.
| | 01:01 | Be sure to check with the browsers that
matter to you before you try to use it.
| | 01:05 | It puts quote marks
around a piece of text inline.
| | 01:09 | So, here we have a word with quote
marks around it, here, and I'll just take
| | 01:13 | those quote marks and I'll change it
for the Q element and close the q here.
| | 01:19 | So, that's the Q element.
| | 01:21 | It's an inline element as you see
and it's being used to quote that word.
| | 01:25 | So, I'll go ahead and save
that and reload in the browser.
| | 01:28 | So, the nice thing is there
are nice curly quotes in English.
| | 01:31 | There are a couple of things about
the Q tag that you need to be aware of.
| | 01:34 | One is it's supposed to be
internationalized and so, if I were to sit here and
| | 01:38 | put language=French then you should get
French quotes, which are one above and
| | 01:44 | one below and I save that and reload it,
and you see it doesn't change anything.
| | 01:48 | So that's not fully supported in Firefox.
| | 01:50 | In actuality, the tag isn't supported at all
in some browsers, notably Internet Explorer.
| | 01:56 | So, if you use it, you may
just not get any quotes at all.
| | 01:59 | So, be sure to test it in the browsers
that are important to you before you use it.
| | 02:03 | They'd be handy tag, if they
were actually supported well, but
| | 02:07 | unfortunately it's not.
| | 02:08 | So, those are the quoting elements.
| | 02:10 | They don't actually get used for what
they mean and they don't always work for
| | 02:14 | what they are supposed to work for.
| | 02:16 | So, be aware of that when you try to use them.
| | Collapse this transcript |
| Preserving pre-formatted text| 00:00 | Normally, white space is folded
together and otherwise ignored.
| | 00:04 | So, new lines and all that become one
space and text is formatted like this in
| | 00:09 | the browser like we see here, in a paragraph.
| | 00:14 | Sometimes however, you might want the
text to be formatted in a particular way,
| | 00:18 | like in this example here, in my text editor.
| | 00:22 | And the way you accomplish
that is with the Pre tag.
| | 00:23 | So, I'll just go ahead and
change these p's into pre's.
| | 00:28 | That's the Pre tag.
| | 00:29 | It's a block-level tag and what it
does is it displays in the browser exactly
| | 00:34 | how it is in the text editor.
| | 00:35 | So, it will be monospaced and it will
be indented just like this and the blank
| | 00:39 | lines and everything.
| | 00:40 | It will be just as it is there in
the text editor and there we have it.
| | 00:44 | You will notice a couple of things.
| | 00:46 | First of all, it is a block-level
element and so it will behave like that.
| | 00:50 | It will separate the blocks of text
out of as if they were paragraphs.
| | 00:54 | Also, you'll notice, of course, that
the text is monospaced and that it's
| | 00:57 | indented exactly how it is in the text editor.
| | 00:59 | You'll notice that inline formatting does work.
| | 01:03 | So, here we have a U tag for
underline and here you have the word as
| | 01:07 | underlined in the Browser.
| | 01:09 | So, that's the Pre tag.
| | 01:10 | It does just what it looks like it does.
| | 01:12 | It pre-formats text exactly how
it's formatted in the text editor.
| | 01:16 | It's often used for programming
language code or HTML code or something like
| | 01:21 | that to display code in a browser,
so that the indenting is preserved.
| | 01:25 | It can also be used for wacky
ASCII or poetry, like I have done here.
| | Collapse this transcript |
| Selecting a typeface| 00:00 | This lesson is about using the font tag
to change the font of text in a document.
| | 00:06 | The font tag is an inline level tag.
| | 00:09 | So it's important to know that
you can use it inside a paragraph.
| | 00:12 | It is not proper to use it outside a
paragraph and have a paragraph contained in it.
| | 00:17 | It's common and it works,
but it's not correct XHTML.
| | 00:22 | So let's take a look at how this works.
| | 00:24 | Here we have a paragraph, and there is
a paragraph in the browser down there.
| | 00:29 | Let's say that I want to change the
font of the text of the paragraph.
| | 00:31 | So I'll use a font tag here, and I
say font face = and I can say "arial",
| | 00:37 | which is a sans-serif font that's available in
Microsoft Windows and on other operating systems.
| | 00:44 | Close the font tag here.
| | 00:45 | Now you'll notice that the font tag is
after the P and the close font tag is
| | 00:51 | before the close P. So that makes
the font tag inside of the paragraph.
| | 00:56 | You will see other
arrangements, which are not correct.
| | 01:00 | Sometimes even you'll see the text
straddling the paragraph like this, where
| | 01:06 | you've got the beginning of the
paragraph outside of the font and the end of the
| | 01:09 | paragraph inside of the font.
| | 01:11 | That is not correct and don't do that.
| | 01:14 | So here we have the font tag done
correctly and I'm going to save it and
| | 01:19 | we'll reload in the browser, and
we'll see that we now have this lovely
| | 01:21 | sans-serif Arial font.
| | 01:24 | So some other interesting things that you
should know about the font face argument.
| | 01:28 | One is that you can say sans-serif
like this and then whatever is the default
| | 01:34 | sans-serif font in the user's
browser is the one that will be used.
| | 01:38 | And this is very, very valuable.
| | 01:40 | So I save it and go ahead
and reload in the browser.
| | 01:44 | You see that we still have the Arial
font and that's because Arial is the
| | 01:48 | default sans-serif font in the
Microsoft Window's operating system.
| | 01:52 | So that is the font that comes up.
| | 01:54 | If the font is something different in the
user's operating system, it will use that one.
| | 01:59 | The value of this is that not
everybody's computer has the Arial font or not
| | 02:04 | everybody's computer has Helvetica or
something else or maybe it's not called
| | 02:09 | something or quite spelled the way
that it's spelled on your computer.
| | 02:12 | So if you want a sans-serif font in your
document, if you use sans-serif instead
| | 02:18 | of specifying Arial, it will come up sans
-serif in all of the places where there
| | 02:22 | is a sans-serif font available in that
browser, even if it's named something
| | 02:26 | different than it is in your computer.
| | 02:27 | So this is very valuable shorthand.
| | 02:30 | In addition to sans-serif you can say
serif and you'll always get a serif font.
| | 02:35 | Save that and reload, and the default
serif font is probably Times Roman on
| | 02:40 | this computer here.
| | 02:41 | Or you can say monospace, like this
and you'll get whatever the default
| | 02:47 | monospace font is, which in this case I
believe is Courier New in the Microsoft
| | 02:52 | Windows operating system.
| | 02:55 | Another thing that's useful to note
is that you can specify several fonts.
| | 03:00 | You can say verdana,
helvetica, sans-serif, like that.
| | 03:08 | It will go ahead and save that, and what
this will do is it uses Verdana if it's
| | 03:12 | available, and if it's not
available, it will use Helvetica.
| | 03:15 | If neither of those will available, it will
use whatever sans-serif font is available.
| | 03:19 | This way you can specify the one that
you like and still have it default to
| | 03:23 | something that is reasonable for your document.
| | 03:25 | I'll go ahead and reload this and you'll see
we have Verdana available on this computer.
| | 03:30 | If I misspell Verdana, then we'll
get the second one in the list here.
| | 03:34 | I use this technique for testing my lists,
just to make sure I get what I expect.
| | 03:39 | So I'll go ahead and save this
and reload and now we get Helvetica.
| | 03:44 | If I misspell Helvetica there and save
that, we'll get the default sans-serif,
| | 03:49 | which probably looks very similar.
| | 03:51 | It would be the Arial font.
| | 03:52 | So I believe on Microsoft
Windows Helvetica is alias for Arial.
| | 03:57 | So we get exactly the same thing there.
| | 03:59 | So this is how the font face tag works.
| | 04:01 | You use it to specify the fonts that
you want to use to display your document.
| | 04:06 | You can give it a list of fonts and it's
always a good idea to end the list with
| | 04:10 | a default value for the type of a font
that you want so that if none of the ones
| | 04:15 | you've specified or available, you'll
at least get a serif font or sans-serif
| | 04:18 | font however it is that you
want it to be in your document.
| | 04:21 | Keep in mind that not everybody has their
browser setup to default to a serif font.
| | 04:26 | So if you really care about your
document being displayed in serif font, go
| | 04:29 | ahead and specify it in a font face tag.
| | Collapse this transcript |
| Selecting a type size| 00:00 | In the last lesson we saw how to
change the font face of text using the font
| | 00:04 | markup tag and now we're going to look
at how to change the size of the text
| | 00:08 | using the font markup tag.
| | 00:10 | So here we have the same paragraph and
I'm going to go ahead and insert a font tag.
| | 00:13 | We'll use the size attribute.
| | 00:16 | I'm going to close the font tag here.
| | 00:22 | We'll say size = "3", 3 is the default size.
| | 00:26 | So when I save this and reload it in the
browser, we won't see any change at all.
| | 00:31 | If I go ahead and make it 4,
so it gets little bigger.
| | 00:35 | Save, reload, there it is.
| | 00:40 | If I make it 2, I'll see
that it gets little smaller.
| | 00:43 | Go ahead and save that and reload.
| | 00:47 | And we have now smaller text.
| | 00:50 | So 3 is the default and
numbers between 1 and 6 are valid.
| | 00:54 | So 1 is very, very small. We'll look at 1.
| | 00:57 | Save, reload.
| | 01:00 | That's very, very small.
| | 01:01 | And we'll look at 6, which is very, very big.
| | 01:06 | Save here and go ahead and
reload and 6 is very big.
| | 01:10 | Besides using the absolute numbers,
you can also use relative numbers.
| | 01:14 | If I say +1, it will make it one size larger
than what it's current, which is the default.
| | 01:19 | So it's just that bigger font, it's just like 4.
| | 01:22 | If I say -1, it will make it one
smaller than what's in effect at this place of
| | 01:28 | the document, which is the default in this case.
| | 01:30 | So it makes it smaller.
| | 01:31 | So you can use relative sizes
and you can use absolute sizes.
| | 01:35 | I tend to like the relative sizes more.
| | 01:38 | So I'm going to ahead and set this to +
1, and then I'm just going to show you
| | 01:42 | one more thing we can do here.
| | 01:43 | We can combine the face and size attribute.
| | 01:46 | So if I say face="sans-serif" and
save that, you will see that we'll get a
| | 01:54 | sans-serif font that's a
little bit larger than the default.
| | 01:57 | So that's the font size tag, and you
see you can use it also in combination
| | 02:01 | with the font face tag.
| | 02:03 | Remember that the font tag is an
inline tag, so it belongs inside of the
| | 02:08 | paragraph not on the outside of the paragraph.
| | Collapse this transcript |
| Using ordered and unordered lists| 00:00 |
There are three types of
lists in XHTML and HTML.
| | 00:04 |
There is the Unordered List, the
Ordered List and the Definition List.
| | 00:10 |
So we'll start our discussion with the
Unordered List and here an example in the
| | 00:14 |
text editor on the top and
we have browser on the bottom.
| | 00:17 |
The Unordered List is specified
with the ul tag, which is container.
| | 00:21 |
It's a block level element and it
contains Line Items using the li container,
| | 00:27 |
which is also a block level container.
| | 00:29 |
li for the Line Item.
| | 00:31 |
So you can see it's
rendered down here using bullets.
| | 00:34 |
So you can change the types of bullets
by specifying different type up here.
| | 00:38 |
You say type = "disc".
| | 00:41 |
Disc is the default, so we'll
just show that one real quick.
| | 00:44 |
I'll save and reload and you will
see that it doesn't change at all.
| | 00:49 |
"circle" is like the disc only. It's open.
| | 00:53 |
There is circle and "square" is the
other type and you will see it's rendered
| | 01:01 |
here in the Firefox browser with a solid square.
| | 01:04 |
These may be rendered differently in
different browsers, so you might want
| | 01:07 |
to check the different browsers that matter
to you and see how they are rendered there.
| | 01:11 |
You can also nest list, and I'll
show this here with a nested list.
| | 01:18 |
| | 01:37 |
Save that and reload and you'll notice that
the nested list has these circles as a default.
| | 01:44 |
The outer one will have the disc as
the default and save and reload, you will
| | 01:51 |
see the outer one has discs.
| | 01:53 |
The next level in has circles and if we
nest yet another level, which we can do
| | 01:58 |
here easily with a little cut and paste.
| | 02:01 |
Copy and I'll go ahead and paste it
here and we'll indent that a little bit so
| | 02:08 |
it makes sense and save and you will
see we have two levels of nested items and
| | 02:14 |
the inner level has squares.
| | 02:16 |
The choices may be different, but
they will try to use a different type of
| | 02:20 |
bullet for each level, and of course
it will cycle them after three levels.
| | 02:24 |
So that's the Unordered List.
| | 02:25 |
Let's take a look at the Ordered List now.
| | 02:28 |
The Ordered List uses the ol tag which
is a block level tag and the items are
| | 02:34 |
the li tag for Line Item.
| | 02:36 |
Here is what it looks like in the browser.
| | 02:39 |
You will notice it's counting 1, 2, 3, 4
and it's using standard numbers for the list.
| | 02:46 |
You can change the type using the type
attribute and you can say "A" for using
| | 02:54 |
the alphabet to number them.
| | 02:56 |
You can use a lowercase "a" to get
lowercase alpha, save and reload.
| | 03:02 |
You can use hit "I" for Roman numerals.
| | 03:06 |
That's an uppercase "I" for uppercase
Roman numerals and you can use a lowercase
| | 03:11 |
"i" for lowercase Roman numerals.
| | 03:15 |
You can also spell it out.
| | 03:17 |
You can say upper-roman for
uppercase Roman numerals, reloading there.
| | 03:24 |
You can say lower-roman for lowercase
Roman numerals, save that and reload.
| | 03:31 |
You can say upper-alpha for uppercase
alpha and save that and reload or you can
| | 03:41 |
say lower-alpha for lowercase alpha.
| | 03:42 |
And of course, you can say a number to
get the default, which is the numbers.
| | 03:54 |
Save and reload.
| | 03:56 |
You can also nest the Ordered List
just like you can with the Unordered List.
| | 04:02 |
| | 04:13 |
I'll go ahead and use copy/
paste to get my list here.
| | 04:18 |
| | 04:25 |
And save that and reload.
| | 04:29 |
See, I closed it with the wrong tag there.
| | 04:31 |
You want to close it with the same
tag that you are using and then it will
| | 04:34 |
work as you expect. There we go.
| | 04:37 |
So the outer one is numbered 1, 2,
3, 4 and the inner one is 1, 2, 3.
| | 04:42 |
I can change the type of the inner one
if I like so that I have some sort of
| | 04:50 |
a structure to my outline and of course you
can do this in whatever way makes sense for you.
| | 04:55 |
The Definition List is our final type
of list and this is very different than
| | 05:02 |
the Ordered List and the Unordered List.
| | 05:04 |
The Definition List is used for defining
terms and it looks like this in the browser.
| | 05:09 |
So the outer container is dl and
that's a block level element and inside you
| | 05:14 |
have dt for the Definition Term and
dd for defining the definition itself.
| | 05:20 |
You see these are rendered in this
way. The Definition Term is 1 and the
| | 05:25 |
definition is the first non-zero number 2,
which is here and the Definition Term
| | 05:30 |
and the dd is the number after 1 and so on.
| | 05:34 |
There aren't any options for the
rendering of the Definition List, but of course
| | 05:38 |
you can format it using CSS.
| | 05:41 |
So these are the different types of lists.
| | 05:43 |
You have three types of list.
| | 05:44 |
You have the Unordered List, the
Ordered List, and the Definition List and
| | 05:49 |
they look like this in the browser,
Unordered List, Ordered List, and
| | 05:52 |
Definition List.
| | 05:54 |
| | Collapse this transcript |
|
|
3. Image TagsUsing inline images| 00:00 | The image tag is an inline tag in XHTML and HTML
and this is essentially how it works in a paragraph.
| | 00:10 | Here we have a paragraph with some text in
it and an image in the middle of the text.
| | 00:14 | So here is the image and you have text
before it and text after it, and this is
| | 00:18 | what it looks like in the paragraph.
| | 00:20 | This paragraph has an image inline with it.
| | 00:23 | So that is how an image is
used in a paragraph like that.
| | 00:27 | Let's take a look at the image
tag and some of its attributes.
| | 00:30 | Here we have the source attribute, which says
lynda-24.png that's the file name of the image.
| | 00:38 | It could also have an entire URL in it
with the HTTP and the host name and you
| | 00:43 | can even load an image off of a different
host than the one where the HTML file is.
| | 00:48 | We'll see examples of that later on.
| | 00:51 | This is the alt attribute and this is
actually required in the specification.
| | 00:56 | This provides text that will be
displayed in the event that the browser cannot
| | 01:00 | display the image and it's also useful
for circumstances where the browser is
| | 01:04 | not a visual browser where it might
be reading text to a blind person or
| | 01:07 | something like that and so the
alt tag is actually required.
| | 01:11 | There are circumstances where it may
not make sense even all those things
| | 01:14 | considered to have whole text in which
case you can just leave it empty, you can
| | 01:18 | take the text out of it and leave it
empty like that or some people will omit
| | 01:22 | the alt tag and even though it's
technically required by the spec, it doesn't
| | 01:26 | break anything to leave it out and
then we have the title attribute and the
| | 01:30 | title attribute is what's displayed
when you hover the mouse over the image in
| | 01:34 | the browser, there it says "hey!
| | 01:35 | you with the mouse!" and that's
what the title attribute is for.
| | 01:38 | So that can be useful and I often
include that and the width and the height
| | 01:43 | attribute are actually not
required by the spec and I wish they were.
| | 01:46 | What the width and the height
attribute do is they specify the width and the
| | 01:49 | height of the image for the browser.
| | 01:52 | So the browser can layout the
page before it loads the image.
| | 01:55 | If we are going to a webpage and as the
page is loading as the images are slowly
| | 01:59 | coming in, the whole page is kind of
moving around and making way for the images
| | 02:03 | as they load up, this is what happens
when you don't have the width and the
| | 02:07 | height and the browser tries to layout
the page and then it finds out as it goes
| | 02:10 | out to load that image, oh the image is
going to take this much space here and
| | 02:13 | it's got to recalculate
and re-layout the whole page.
| | 02:17 | So I like to always load up the width
and the height attribute in the image
| | 02:21 | tag and this allows the browser to
know before it goes out to the server to
| | 02:25 | get the actual image file.
| | 02:26 | It allows it to know what the dimensions
of the image are, so that it can layout
| | 02:30 | the page in advance and so you get a
smoother user experience because the page
| | 02:34 | doesn't have to jump around.
| | 02:35 | It all looks very graceful as the
images load in their proper places, all laid
| | 02:39 | out in the page there.
| | 02:39 | So I'd like to include the width and the
height attributes when I can with the image.
| | 02:45 | Of course, the image tag is a standalone tag.
| | 02:48 | It's not a container.
| | 02:49 | It doesn't have any content and so you
will see this /> at the end just like all
| | 02:54 | the standalone tags that don't have any content.
| | 02:57 | This tells the XHTML that this is
the end of the tag and not to expect
| | 03:01 | a separate end tag.
| | 03:02 | So this is sort of the pseudo end tag
syntax that we see a lot with the tags
| | 03:06 | that don't have the content.
| | 03:08 | So this is the image tag and this
is the basics of its attributes.
| | 03:11 | So there are few more attributes that
we'll see in later lessons as we learn to
| | 03:14 | do other things with the image tag.
| | Collapse this transcript |
| Flowing text around an image| 00:00 | So as we know, the image tag is an
inline tag, which means it flows with the
| | 00:05 | text in a paragraph, and so here we have
a paragraph with an image tag in it and
| | 00:10 | the image tag is the beginning of the
paragraph and then we have some text and
| | 00:14 | the close of the paragraph.
| | 00:16 | So we see it displayed in the browser
down here. We have something different
| | 00:19 | that we are not used to.
| | 00:20 | The text is actually flowing around the image.
| | 00:23 | So if I bring this in and watch the text
wraps here, it wraps next to the image
| | 00:27 | and then when it gets past the end of
the image, it wraps around the image.
| | 00:32 | That's not what we have seen in the past.
| | 00:35 | The way this is accomplished is with
this align=left attribute and that makes
| | 00:39 | the image float to the left side of the text.
| | 00:42 | You can change it to align=right and it
will float to the right side of the text.
| | 00:48 | Save that and reload and there now
the image is floating to the right.
| | 00:53 | Go ahead and change it back to left for
our demonstration purposes and reload it.
| | 01:00 | Another attribute here that you may
not have seen before is the hspace
| | 01:04 | attribute and what this does is it
provides this horizontal space on either
| | 01:08 | side of the image, you see there is
10 pixels on the right and there is 10
| | 01:11 | pixels on the left.
| | 01:12 | If I make this a 0, I get in there
and make that a 0, go ahead and save and
| | 01:20 | reload, you will see that the text
now wraps very closely to the image.
| | 01:23 | It's right up against the image, there is no
space there anymore, because I made the space 0.
| | 01:27 | So I'm going to go ahead and make the
space back to 10 for 10 and this makes 10
| | 01:33 | pixels on ether side.
| | 01:34 | You will see that the text will move
away from the image 10 pixels but also the
| | 01:38 | image will move over 10 pixels
from the left margin as well.
| | 01:42 | Reload, we'll see that.
| | 01:44 | That's because this hspace=10, it
makes 10 pixels on either side of the
| | 01:48 | image, left and right.
| | 01:50 | And you can use vspace
for vertical space as well.
| | 01:53 | That is the image tag we
used in a floating mode.
| | 01:56 | This align=left or align=right makes the
image float to one side or the other of
| | 02:01 | the text and makes the text wrap around it.
| | Collapse this transcript |
| Breaking lines around an image| 00:00 | So in our last lesson we looked at how
to float an image, so that the text wraps
| | 00:05 | around the image and you can
float an image to either side.
| | 00:07 | Here we have our example from that
lesson where the text is flowing around the
| | 00:12 | image. We are just going to tweak this
down here and bring this up a little bit
| | 00:18 | so that we can show you how to break the
text around the image if you need to do that.
| | 00:23 | So here is our paragraph and we see
our image here with the align=left that
| | 00:26 | makes the image float to the left
and the text is flowing around it.
| | 00:31 | Let's say that you wanted to break
this text say after this period here and
| | 00:34 | you wanted that Jez is a Gibson L6-S
to start on the line after the image and
| | 00:39 | not just right here.
| | 00:41 | We know that the br tag will break the text.
| | 00:45 | Go ahead and insert a br tag right here,
br, and you will notice that we have
| | 00:50 | the little shorthand notation there for
the fact that br is not a container and
| | 00:54 | it doesn't have a separate end tag.
| | 00:56 | So we have this little shorthand
notation that allows that to work in XHTML.
| | 01:02 | I'll go ahead and save this and reload
the browser and there we have it, the
| | 01:06 | Jez, moved from here after the sentence
on the same line and moved down to the
| | 01:10 | next line which is exactly what we expected
to have happen, but it's not what we want.
| | 01:14 | We want this to start down here under the image.
| | 01:18 | So what we need is we need an attribute in
the br tag, so that attribute is called clear.
| | 01:23 | So we'll go ahead and put in here clear=left.
| | 01:27 | This will break around any floating
object on the left-hand side and make the
| | 01:31 | line start after the floating objects.
| | 01:33 | We'll go ahead there and we'll save
and we'll reload and there we have it.
| | 01:37 | Now the paragraph continues under the
image after the end of the floating object
| | 01:42 | there, in that case the image.
| | 01:43 | So if I change this to right of course,
we won't expect this to work, because
| | 01:47 | that's going to make it clear any
object floating on the right-hand side and so
| | 01:52 | there we have just like it was before.
| | 01:54 | It breaks but it doesn't clear because
we are asking it to clear on the right
| | 01:58 | and the image is floating on the left.
| | 02:00 | Or I can say all here and it will
clear any floating object, no matter which
| | 02:04 | side it is floating on.
| | 02:06 | So I'll save and reload
and we see that that works.
| | 02:10 | So that's how the clear
attribute works in the br tag.
| | 02:13 | You can say clear=left to clear
floating objects on the left-hand side.
| | 02:18 | You can say clear=right to clear
floating objects on the right-hand side or
| | 02:22 | you can say clear=all to clear all
floating objects no matter which side they
| | 02:26 | are on.
| | Collapse this transcript |
|
|
4. Link TagsWorking with hyperlinks| 00:00 |
In this chapter we are talking about
hyperlinks but I'm going to start out by
| | 00:03 |
talking about the anchor tag which is a,
and you will see it right here. This is
| | 00:10 |
how we create a hyperlink in HTML.
| | 00:13 |
Something else is different about this
chapter and I want to talk about this
| | 00:16 |
really briefly here while
I've got your attention.
| | 00:18 |
And that is that the files in the
Exercise Files folder or for this chapter,
| | 00:23 |
I have got them loaded up on my web
server and because we are going to be talking
| | 00:28 |
about URLs, I would like to show
you how the URLs work in the browser.
| | 00:31 |
That way we get live URLs, real URLs,
and you can actually run the examples off
| | 00:36 |
of the files in my server. They have
been up there for years and they will
| | 00:39 |
continue to be up there, since the last
time that I did a course of this title
| | 00:42 |
and this is a refresh of that course.
| | 00:44 |
So, I have refreshed that files and
they are all still up there and they will
| | 00:47 |
continue to be up there.
| | 00:48 |
And the files are also included in the
Exercise Files folders that came with this course.
| | 00:54 |
So, you have got it both ways and you
can follow along in your text editor.
| | 00:58 |
And so we'll start talking
about the anchor tag at this point.
| | 01:02 |
So, the Anchor tag, which is spelled a,
is a inline tag and you will see that
| | 01:08 |
it's here inline in a paragraph, we've
got a paragraph tag wrapped around it,
| | 01:12 |
and it ends over here.
| | 01:13 |
So, we have got a begin tag and an end tag
and we have got two attributes in this one.
| | 01:17 |
The first attribute is the href
attribute, spelled href, and that contains the
| | 01:24 |
URL that you are linking to.
| | 01:27 |
And then I have got title attribute here
also, which works just like other title
| | 01:31 |
attributes when you hover your mouse
over the link, it will give you a little of
| | 01:34 |
a text tip which will say More about Bill here.
| | 01:37 |
And then the content of the a tag is
the text that will be used as the link
| | 01:43 |
and normally on a web browser it's
underlined, of course, you can change that
| | 01:47 |
with CSS, but we'll be using it in a normal
mode here so that we can see how this works so.
| | 01:52 |
This file is loaded up on my web
server and it's at this URL here, so you can
| | 01:55 |
type that into your browser to follow along.
| | 01:58 |
Now I'm going to switch over to the
browser right now, so we can see what
| | 02:00 |
this link looks like.
| | 02:03 |
So here is that page in the browser and
there is the link that we are looking at
| | 02:06 |
and you will notice when I hover the
mouse over it, it says More about Bill and
| | 02:09 |
if you look down at the bottom of the
screen, you will see there is the URL that
| | 02:13 |
was loaded up in the link in the a tag.
| | 02:15 |
So I'm going to go ahead and click
on this link and you will see that the
| | 02:19 |
browser loads up my homepage and
there's the URL that we clicked on.
| | 02:24 |
That's the URL that was in the a tag
and so it loaded up this webpage which is
| | 02:28 |
my homepage what it looks like today.
| | 02:30 |
It will probably be different by the
time you look at it because I change it a
| | 02:33 |
lot and I'll go ahead and I'll click on
the Back link there in the browser and
| | 02:38 |
you will see that we are back at the page.
| | 02:40 |
Now you will notice something else here,
the link has changed color, this means
| | 02:44 |
that I have already looked at this pages.
| | 02:46 |
It's the same URL with a different
attribute we'll look at that a little bit later.
| | 02:51 |
But you will see that the link has
changed color because I have already visited
| | 02:55 |
that particular URL.
| | 02:57 |
These other links are still the other
color because we haven't visited those yet
| | 03:01 |
and so the link changes color.
| | 03:03 |
That's called the visited color and when
you look at the attributes in CSS, when
| | 03:08 |
we cover CSS you will see that the
anchor tag has options for changing the
| | 03:12 |
attributes of visited and
unvisited links and things like that.
| | 03:16 |
So, this is the visited color
and it's the unvisited color.
| | 03:20 |
So switching back to the text
editor, you will see that this here is
| | 03:24 |
what's called a URL.
| | 03:25 |
URL stands Uniform Resource Locator
and it's a mouthful and it doesn't really
| | 03:31 |
mean what it says but in any
event, that's what it stands for.
| | 03:34 |
It's one of those old traditional
Internet things that's just what it is.
| | 03:38 |
And so, let's take a look at the parts of a
URL, so we can understand how a URL works.
| | 03:45 |
The first part of the URL is called the
scheme and it's the part to the left of
| | 03:49 |
the colon and in the case of
webpage URLs, that will always be http.
| | 03:56 |
You will see also, sometimes if you
are looking at files on your local
| | 03:58 |
computer, you will say file:
| | 04:01 |
but usually the ones that we are
interested in for the purposes of XHTML and web
| | 04:05 |
pages we are going to say http.
| | 04:08 |
The next part of the URL after the
two slashes is the host name and so this
| | 04:13 |
would be something like bw.org for
my webpage or lynda.com for hers.
| | 04:17 |
It will often have www before it or
something else, but that's the host name and
| | 04:23 |
that follows the rules of Internet address.
| | 04:25 |
It can be an IP address, it can be a
DNS name, but that follows those rules and
| | 04:30 |
that's what goes in the host part.
| | 04:32 |
And then sometimes you will see a colon
and a number and that's a port number,
| | 04:36 |
you don't see that very often anymore.
| | 04:38 |
And then after all of that, you will
see a slash and that's where the path
| | 04:43 |
goes and so if we look at this webpage
here, you will see up here in the URL
| | 04:48 |
we have the scheme which is http and the ://
and then we have the host name which bw.org.
| | 04:54 |
On my website I don't put the www before it.
| | 04:57 |
It was just a choice I made a long
time ago and it's always worked for me.
| | 05:01 |
I don't have a port number because
that's just rare to see anymore, but I do
| | 05:05 |
have the slash and then the path.
| | 05:06 |
And so this path, misc/xhtml-links/
hyperlinks.html, that's the path to the file
| | 05:15 |
that has the XHTML code in it,
and so that is called the file path.
| | 05:21 |
After the path, there can be a colon followed
by parameters, you don't see that very often.
| | 05:25 |
There can be a question mark
followed by a query that you do see often
| | 05:29 |
for interactive sites.
| | 05:31 |
That has to do with the CGI spec and
how CGI parameters are passed on a URL.
| | 05:36 |
And often times you will see the #
sign and a fragment, which takes you to a
| | 05:40 |
portion of the page, we'll look at
those in a little bit of detail in a later
| | 05:44 |
lesson in this chapter.
| | 05:45 |
So those are parts of the URL
and that's what a URL is made of.
| | 05:49 |
There are actually a few other little
parts that you never even see anymore and
| | 05:53 |
so we didn't bother to cover those,
but it's a pretty complicated spec.
| | 05:56 |
But mostly what you see is the scheme,
the host, and the path and sometimes you
| | 06:01 |
will see query and
sometimes you will see a fragment.
| | 06:04 |
But for the most part
that's all that you will see.
| | 06:05 |
So we look at this URL, we now know what
these parts are, we have the scheme and
| | 06:09 |
we have the host name and we have the
path to the file and those are the parts
| | 06:13 |
that we'll be concerned about for this lesson.
| | 06:16 |
One other thing that I would like to
show you about the anchor tag, before we
| | 06:19 |
move on to the next lesson, you will
see we have the bw.org link twice and the
| | 06:23 |
other one has the target=_blank
attribute and so here it is with the
| | 06:28 |
target=_blank attribute.
| | 06:30 |
What this does is it targets a blank page.
| | 06:33 |
When we cover frames we'll see some
other uses for the target attribute, but
| | 06:37 |
this special word _blank, that
creates a blank page for the link.
| | 06:43 |
So let's look at how that is used.
| | 06:45 |
This is the regular link that we clicked
on before and that just takes us to the
| | 06:48 |
webpage and it loads it in exactly the
same browser window, but when I click on
| | 06:52 |
this one and I'm in Firefox, so
it will make the new window in tab.
| | 06:56 |
But sometimes in some browsers, it
will launch an entirely separate browser
| | 07:00 |
window and you will see that it's
loaded up the page here in a blank Window.
| | 07:04 |
You see we still have the hyperlinks
page loaded in the other Window and so in
| | 07:09 |
Firefox it does them in tabs and in
other browsers, it may just open an
| | 07:13 |
entirely separate window.
| | 07:14 |
So, that's an option that you will often see.
| | 07:16 |
A lot of links on my page I tend to do
that with because I want people to come
| | 07:20 |
back to this page without
having to use their Back button.
| | 07:23 |
So, I can just close this tab
and that other page is still there.
| | 07:26 |
It's never gone away.
| | 07:27 |
So that's the target=_blank attribute
and you will see that a lot in anchor tags.
| | 07:34 |
So that's how the anchor element works,
the a element that's the parts of the
| | 07:38 |
URL and you have seen how the link
changes on the page when it's been visited
| | 07:42 |
and you have seen the target=_blank attribute.
| | 07:46 |
| | Collapse this transcript |
| Using relative URLs| 00:00 | In this lesson, we're going to talk
about relative URLs and these are URLs that
| | 00:04 | don't have all of the different parts
and are just relative to the current
| | 00:07 | location of the file that has the link in it.
| | 00:11 | In other words, you have a link
like this, which does says here.html.
| | 00:15 | The browser will assume that file exists in
the same location as this page here does.
| | 00:21 | And so this page exists on
the web at this location.
| | 00:25 | And so we'll just take this last part
of it, including the host name and the
| | 00:29 | path all the way up to the file name
and I'll just assume that all that part is
| | 00:33 | the same and the only thing that
changes is the file name there.
| | 00:36 | So, let's take a look at this page in
browser and you'll see this is loaded up
| | 00:40 | on my website at pw.org and at
that path and this is hyperlinks.html.
| | 00:46 | And this link here is the link
we're looking at it and it just has this
| | 00:49 | here.html in the link and so when I
hover my mouse over the link, you'll see
| | 00:54 | the title bar at the bottom, shows the
location of the page that it's going to
| | 00:58 | call up when I click on it and you'll
see that location is the same as the
| | 01:03 | location in the title bar, with the
exception, then instead of hyperlinks.html,
| | 01:07 | it's got here.html.
| | 01:09 | So, if I click on that, you'll see
that the only part that will change is
| | 01:13 | this last part there.
| | 01:14 | So, I'll go ahead and I'll click on the
link and sure enough all the change was
| | 01:17 | that and you've got here.html,
instead of hyperlinks.html.
| | 01:21 | So, I'll go ahead and go back to the
previous page and you'll see that the
| | 01:24 | visited link color has changed.
| | 01:27 | Likewise, with Over there, this is
another link and it has a subdirectory before
| | 01:32 | there part but since there is no slash
at the beginning of subdirectory, it's
| | 01:37 | going to go ahead and just use this
part here again and it will replace that
| | 01:41 | with the subdirectory/there.html.
| | 01:41 | So to be in another directory, but it
will not replace all of this all the way
| | 01:48 | back to the beginning, because
I didn't begin with those slash.
| | 01:50 | If I begin with the slash there,
it would replace all of this.
| | 01:53 | But in this case, it's just
going to replace that last part, with
| | 01:56 | subdirectory, and there.html.
| | 01:57 | So, I'll go ahead, I'll click on it
and you'll see that now we're a directory
| | 02:02 | deeper, and we've there.html and it
did exactly what we expected it to do.
| | 02:07 | And this one here has a
special notation with these two dots.
| | 02:11 | That means go up a directory.
| | 02:12 | So in this case, instead of just
replacing this part here, it will go up a
| | 02:16 | directory and replace all of this.
| | 02:18 | So, we'll get this, else.html.
| | 02:21 | And actually the link has a dash X at
the end of it, so it will be else-x.html
| | 02:26 | and it will start at
that directory up one level.
| | 02:28 | So, there we go, else-x.
html and it's up a directory.
| | 02:33 | So, I'll go back and now we are
in our xhtml links directory again.
| | 02:37 | And finally, this one, this is a link
to an image and it will just display the
| | 02:40 | image and likewise it will add this
directory after the xhtml links directory
| | 02:46 | here and show that image.
| | 02:47 | And that image is the parts of
the URL, from our last lesson.
| | 02:53 | So, that's how relative links work.
| | 02:56 | Relative links work relative to the
current location, the location of the file
| | 03:00 | that has the links in them and they are
pretty simple once you understand them.
| | Collapse this transcript |
| Specifying a base URL| 00:00 | So, in our last lesson, we learned
about relative URLs and in this lesson we're
| | 00:05 | going to talk about how you can
change the base of the relative URL.
| | 00:11 | In other words, we learned that
relative URLs are relative to the location of
| | 00:15 | the document that has a link in it.
| | 00:16 | But you can actually change
that by using the base tag.
| | 00:20 | The base tag goes in the head section
and here is the base tag here and all this
| | 00:25 | does is it specifies a location that
all the URLs in this document are going to
| | 00:31 | be relative to and again this
file is available on my web server.
| | 00:35 | I'm actually using a local copy of it,
because it can illustrate the same point.
| | 00:39 | You'll notice in the browser here that this
file is on my local machine at a file URL.
| | 00:45 | Yet when I hover my mouse over
this link, you'll see at that bottom.
| | 00:49 | It's a link on the server and yet if
you look at it in the text editor that
| | 00:54 | this link, it doesn't have
that whole http part of it.
| | 00:58 | That's in the base and so it takes
this and it uses this as the base for
| | 01:03 | the relative URL and so this
relative URL will start with the
| | 01:07 | xhtml-links/another directory.
| | 01:10 | Let's look at that again in the browser,
and we see in the bottom in the Status
| | 01:15 | bar down there that it shows that URL
relative to the base URL at the top of the document.
| | 01:21 | I'll go ahead, and I'll click on it and
you'll see that the location bar in the
| | 01:24 | browser will change and it will
have that location on my web server.
| | 01:28 | So, I went ahead and loaded
this off of the web server,
| | 01:30 | http://bw.org/misc/xhtml-links/another
/yet.another.html and when I click on
| | 01:38 | this link, it will actually take me back to
the version of it that's on my server there.
| | 01:41 | But it's the same file with that base URL.
| | 01:44 | So that's how the base URL works.
| | 01:46 | It changes the base from which the
browser will construct URLs based on
| | 01:52 | a relative URL.
| | 01:54 | So this relative URL is no longer
relative to the location of this file,
| | 01:58 | instead it's relative to this base URL
that we've specified in the base tag, in
| | 02:03 | the head element.
| | Collapse this transcript |
| Linking within a page using fragments| 00:01 | Remember when we talked
about the parts of the URL?
| | 00:03 | This part of the end called the fragment,
this starts with the pound sign or the hash sign.
| | 00:07 | That's what this lesson is about.
| | 00:09 | This is about fragments and how to
address them and how to create them in the page.
| | 00:15 | So, a fragment is a part of a page.
| | 00:18 | It's a link to a location within
the page not necessarily at the top.
| | 00:23 | Normally, when you have a link to a web
page, it brings up the page all the way
| | 00:27 | scrolled to the top of the page.
| | 00:29 | Sometimes you might want to link to a
page so, we scroll down a ways to a
| | 00:33 | particular part of the page
and that's called a fragment.
| | 00:36 | So, let's look at how this works in a browser.
| | 00:38 | This is a list of Retail Stores and
this is from a book that I wrote with my
| | 00:42 | sister Lynda a long time ago called
Creative HTML Design, this was one of the
| | 00:46 | examples from that book for
this particular technique.
| | 00:49 | And you'll notice that there
is a list of states at the top.
| | 00:51 | These are two letter State
Abbreviations except for the one in Canada.
| | 00:57 | Then there is a long, long list on the
same page, all of these stores, and all
| | 01:00 | of these different states.
| | 01:01 | So, if I go on here and I click on say
Illinois, it takes me to the part of the
| | 01:07 | page, you see I've scroll down that is
Illinois and these are the places we can
| | 01:10 | buy those rubber stamps that we are
talking about in the examples for that book.
| | 01:15 | Now I click on the top link and this
takes me wholly back to the top of the
| | 01:19 | page, so that I can look
for maybe another state.
| | 01:22 | So these are fragments, you will
notice that the URL now because I clicked on
| | 01:26 | the top link has the pound sign and
the word top and when I hover over one of
| | 01:31 | these top links, you'll see down at the
bottom there that the URL is the whole
| | 01:37 | URL to the page with the pound sign top
at the end of it and when I hover over
| | 01:41 | one of these other links, for the
states, you'll see that down at the bottom
| | 01:45 | in the status line, it shows the path to
the page with the pound IL at the end of it.
| | 01:50 | So, those are the fragment links and we
are at links to, if I click on this, is
| | 01:55 | called the Named Anchor.
| | 01:58 | This is anchor into the page
and its' done with an anchor tag.
| | 02:01 | Let's take a look at how
this is done in the HTML.
| | 02:05 | This is the XHTML for the same page and
you'll notice it has the list of states
| | 02:09 | here with these normal looking links a
href= and then its got the pound sign and
| | 02:16 | the two letter code within the href attribute.
| | 02:19 | And this is how you link to a part of
a page, this is called a fragment link
| | 02:23 | and it's a relative URL, so it fills in
the rest of the URL from where the page
| | 02:28 | is located that has a link in it and it just
sticks this at the end of it in the fragment part.
| | 02:32 | If there is already fragment part, it
replaces it with this and so you get a
| | 02:36 | link just down to that part of the page.
| | 02:39 | If we scroll down here pass this
links, you'll see the named anchors.
| | 02:43 | This is a named anchor write here.
| | 02:45 | See it says a name="AK" then the end
of the begin tag and then it has the
| | 02:51 | end tag for the anchor.
| | 02:53 | You will notice that I made a separate
end tag even though this anchor element
| | 02:57 | is empty, I could have written it
using the shortcut notation that we use in
| | 03:02 | other places where we have a tag with
no end tag and in modern browsers that
| | 03:06 | would probably work.
| | 03:07 | At the time, I wrote this page which
was a number of years ago, I try that and
| | 03:11 | it didn't work in a lot of the browsers
and so today, they probably work better
| | 03:15 | but for this particular usage, I still
write it the old way because I know that
| | 03:19 | there may be some browsers out there
with a short-hand notation doesn't work.
| | 03:23 | So just to review, this is the named
anchor and this is the target of a fragment
| | 03:29 | link and it's an anchor tag
with just the name attribute.
| | 03:33 | So it doesn't have the href.
| | 03:34 | It just has the name attribute
and that makes it not a link.
| | 03:37 | It makes it a target for all links.
| | 03:39 | It's a named target.
| | 03:42 | And over here are the fragment links,
there are also an anchor tag and a tag but
| | 03:47 | this have an href attribute which makes
it into a link and so the content of it,
| | 03:51 | here the AK that will get underlined
that will become the part that you click on
| | 03:56 | with your mouse to go to that link.
| | 03:58 | Then here you have the
fragment URL, this is a relative URL.
| | 04:03 | It gets tagged on to the end of the
URL of the page where the link exist and
| | 04:08 | it has just the fragment part so that it
will link you down into that part of the page.
| | 04:13 | So looking out in the browser again, I
can just click on that part, I'll click
| | 04:17 | on AZ over here and that will
take us to that part of the page.
| | 04:20 | You see we'll it scrolled down, the
scroll bar over there and I click on top and
| | 04:23 | it takes us back to the top of the page.
| | 04:25 | So that's how fragments and named anchors work.
| | Collapse this transcript |
| Creating image links| 00:00 | Remember that an image is an inline
element and that means that it flows as part
| | 00:04 | of the text and that also means
that we get to use images for links.
| | 00:08 | You'll see this a lot, you see an
image in a web page and you click on that
| | 00:12 | image and it takes you some
place else and everybody is happy.
| | 00:15 | They can use their images
as links as it should be.
| | 00:18 | And so, here's an example of how that's done.
| | 00:20 | This is an XHTML file and here's a
paragraph, and in that paragraph we have
| | 00:25 | "This paragraph has an image that is also a link."
| | 00:28 | And in fact, you see it
down here in the browser.
| | 00:31 | This paragraph has an image that is also a link.
| | 00:33 | And there is the image and you can see
it's got this pretty blue box around it,
| | 00:36 | which ought to tell you that that's a link.
| | 00:38 | You see the browser changes when I move
it over that and when I click on it,
| | 00:41 | it will take us to lynda.com
because here's the anchor tag,
| | 00:45 | a href=http://www.lynda.com/.
| | 00:50 | So, I click on that and there is the lynda.
com web page and I'll press the Back button.
| | 00:58 | It will take us back here.
| | 00:59 | We'll see that the pretty blue box is now
purple because that's our visited link color.
| | 01:03 | And so that's how an image works as link.
| | 01:06 | Well, there are couple things
about this that I would like to change.
| | 01:08 | One is the pretty blue box.
| | 01:10 | I'm not actually very fond of it.
| | 01:12 | So, I'd like to get rid of that.
| | 01:14 | How you do that is with the
border attribute in the XHTML.
| | 01:18 | So, in the image tag, I'm going to
type an attribute here, border=0 and that
| | 01:25 | gets rid of the box.
| | 01:27 | Go ahead and save it and reload
in the browser and the box is gone.
| | 01:31 | That's actually much more attractive,
I like that a lot better and so you see
| | 01:35 | when I hover my mouse over it, it's
obvious that it's a link and I click on
| | 01:39 | it and it takes me to lynda.com and I
click the Back button and I'm back here
| | 01:43 | and everything is good.
| | 01:45 | Except, you'll notice a little dotted
line around it and frankly, there is not a
| | 01:50 | way to get rid of that in the Firefox browser.
| | 01:53 | But you'll notice that it
extends beyond the image.
| | 01:56 | The image actually ends about there
and the dotted line is actually beyond it
| | 02:00 | and enclosing the space after the image.
| | 02:02 | In fact, if I click outside of the
image, we'll get rid of the dotted box but
| | 02:06 | you see that my cursor actually
starts changing during that space.
| | 02:10 | That space after the image is part of a
link and that's not really what I want.
| | 02:14 | On the other side, it doesn't do that.
| | 02:16 | So this is just a quirk of the Firefox browser.
| | 02:19 | Actually all the browsers have some
kind of a quirk in this same area and I can
| | 02:23 | get rid of all of those
quirks with the same technique.
| | 02:26 | The reason that space is part of the
link is I actually told it that I wanted
| | 02:30 | that space to be part of the link
because after my image tag I've a new line and
| | 02:36 | a couple of spaces here and
then the end of the anchor tag.
| | 02:40 | You see and we remember that the
browser will take all of that white space
| | 02:43 | including the new line and the spaces
and folded into one space which is exactly
| | 02:47 | what it's done here, so it looks all
nice and spaced out in the sentence.
| | 02:51 | But that's part of the link because
I've included that in the A container.
| | 02:58 | So the way to get rid of it is to take
the space out of the container to abut
| | 03:02 | the image tag right up against the A tag.
| | 03:04 | So I'll do that at the beginning,
because even though isn't creating that as
| | 03:09 | part of the link, in other browsers do
and then over here at the end, I'll go
| | 03:14 | ahead and I'll close up that space as well.
| | 03:17 | And so now our image tag is
right up against the anchor tag.
| | 03:22 | So the end of the begin tag, the anchor
tag, there is no space between that at
| | 03:27 | the beginning of the image tag and then
at the end of the image tag here, there
| | 03:30 | is no space between that and the
end tag for the anchor element.
| | 03:34 | So, when I save this and reload in
the browser you'll see that you no
| | 03:38 | longer have this problem.
| | 03:40 | The space is not part of the link
anymore and if I click on the link, you'll see
| | 03:44 | that dotted box is now tight around the
image and it's not enclosing the space
| | 03:51 | after it anymore or the space before it.
| | 03:53 | Now the only problem with this is that this
makes it necessarily longer and you know how I am.
| | 03:59 | I like for things to look good in
my editor as well as on the page.
| | 04:03 | So I'm going to show you how this can
be pretty in the editor and on the page.
| | 04:06 | You notice if I break the line here, and
I'll indent it a little bit, that space
| | 04:12 | is inside of the anchor begin tag.
| | 04:15 | So that does not actually
get rendered by the browser.
| | 04:17 | That's part of the rules.
| | 04:18 | Browser is not allowed to render
anything inside of those angle brackets.
| | 04:23 | And so I can do the same thing over
here and I'll actually indent that like
| | 04:30 | that and so the end of the A tag is
over here right up against the image and
| | 04:34 | the end of the image tag is over here
right up against the end tag for the A.
| | 04:39 | And so those spaces and those new lines
while they are up on the screen in the
| | 04:43 | editor and they help to make that pretty,
they are not going to be rendered by the browser.
| | 04:47 | So I'll go ahead and I'll save this and
I'll reload over here and we'll see that
| | 04:51 | our problem is still not a problem anymore.
| | 04:53 | Those spaces are still not
part of the link anymore.
| | 04:57 | I can click on this and that full
square is tight around the image.
| | 05:01 | So in summary, this is how you create
links out of images and this is how you
| | 05:07 | make them work well in the
editor and also on the page.
| | Collapse this transcript |
|
|
5. TablesIntroducing tables| 00:00 | Tables in XHTML and HTML are useful
for showing tabular data for associating
| | 00:07 | data and for aligning visual elements on a page.
| | 00:11 | And so we're going to look at some examples of
some tables here and look at how tables work.
| | 00:15 | In this first lesson in this chapter,
we've this example table and you'll see
| | 00:19 | that it starts there on the page,
the table tag, and way down here in the lower
| | 00:26 | part of the page, you'll see
that it has the closed table tag.
| | 00:29 | So the table tag is a container and it's a
block-level element and it creates a table.
| | 00:35 | And so within the table you've
different pieces of information.
| | 00:38 | Here is the caption that says My
Favorite Albums and so that associates with
| | 00:42 | this here on the screen, and so your caption
is useful for labeling the table as a whole.
| | 00:47 | And then we've a table row and you
see it says Artist, Title and Comment.
| | 00:52 | So that's this row here.
| | 00:53 | So tr is for table row and it's a
container and it only exists within a table.
| | 00:59 | It's not legal outside of the table.
| | 01:02 | And th is a table heading element and that's
for these cells within the table, right here.
| | 01:10 | Now a table is organized into rows and
columns, so you see the rows going across
| | 01:14 | and the columns going vertical and each
of the individual places within each of
| | 01:18 | these little cubbyholes within
the table is called a table cell.
| | 01:22 | And so a table cell is one item within a table.
| | 01:26 | And so here we have a table cell and
here we have a table cell and here we have a
| | 01:29 | table cell and these were heading
cells as they have the th tag and these are
| | 01:34 | data cells here as they have the td tags.
| | 01:36 | So th and td are container elements.
You see the begin tag and the end tag.
| | 01:42 | And they are also block-level elements;
they are only legal within a table row
| | 01:46 | and they can have text content inside of them.
| | 01:49 | So you can put text inside a td, you
can put text inside a th, you cannot put
| | 01:54 | text inside of tr and you
cannot put text inside a table tag.
| | 02:00 | Table tags can only have captions and
rows and a table row can only have headers
| | 02:05 | and td data elements.
| | 02:07 | Notice here also on the tr that
I've the valign=top attribute.
| | 02:14 | And what that does if I drag the
browser here so that this text wraps.
| | 02:19 | You see how the text wraps but the
data remains at the top of the cell.
| | 02:24 | And I like it this way. It helps me to
see where the cells are, especially if I
| | 02:27 | don't have the borders and we'll
talk about borders in a moment.
| | 02:29 | But if I take this out, you'll see that
the default is for a middle alignment.
| | 02:35 | So I can save that and reload here.
| | 02:38 | You see that these cells, they are
aligned to the middle and not to the top.
| | 02:41 | I like them better at the top.
| | 02:43 | It's you know personal kind of a choice.
| | 02:45 | The other options are
middle, which is the default.
| | 02:48 | I'll save that and reload and you see
that Middle is what it does there, or
| | 02:55 | you can say Bottom.
| | 02:57 | And save that and reload.
| | 02:59 | You can see that these are aligned to
the bottom when they have room to align.
| | 03:03 | And so I tend to make it top
because I like the way that looks.
| | 03:07 | I think that makes more sense to me.
| | 03:09 | If it were up to me, and it's not,
| | 03:11 | that would be the default.
| | 03:13 | Go ahead and reload this page so that
it's aligned at the top and there we go.
| | 03:17 | Now I've turned on the border in this
so that you could see the table rows and
| | 03:22 | columns and so this all
makes a little bit more sense.
| | 03:24 | Normally, the default's to off.
| | 03:26 | So if I delete that then save it and reload,
you'll see that there is no border by default.
| | 03:32 | You can also say border="0". Put that in
quotes because it's XHTML and save and reload
| | 03:42 | and so you can see that's with border="0".
| | 03:45 | You can also put in a different
number and you get a bigger border.
| | 03:48 | So if I say border=3 and reload, you'll
see we get big fat borders and with the
| | 03:55 | drop shadows on them.
| | 03:56 | You can see it will more evident
if I say something like border=7.
| | 04:00 | That should be pretty obvious.
| | 04:03 | Go ahead and reload.
| | 04:05 | So that's seeing the number of pixels
and the size of the border and that's what
| | 04:08 | it looks like there on the page.
| | 04:11 | So border=1 is nice for being able to
see the table organization there and so
| | 04:16 | that's why I've done that.
| | 04:17 | Normally, I would leave border=0.
| | 04:19 | Of course, this table is not very
attractive the way that it is and if you want
| | 04:24 | to make it attractive, you can use
CSS to format it and in the next lesson,
| | 04:28 | we'll talk about that.
| | 04:29 | But this is the basics of how a table
works and how you can use a table to
| | 04:34 | present tabular information.
| | Collapse this transcript |
| Formatting tables with CSS| 00:00 | In our last lesson, we looked at
how tables work in XHTML and HTML.
| | 00:05 | In this lesson we're going to look at
how you can format your tables using CSS.
| | 00:09 | CSS stands for Cascading Style Sheets
and that's the technology that's used on
| | 00:14 | the web for formatting web pages and
making them to look prettier than the
| | 00:17 | default might be if you
didn't have any styling at all.
| | 00:20 | Of course, a lot of which you do with CSS,
you can do with attributes in XHTML and HTML.
| | 00:26 | Most people recommend that you use CSS.
| | 00:28 | I'm going to tell you why CSS is better.
| | 00:31 | In a nutshell, using CSS, you can name
your styles and you can then apply those
| | 00:35 | styles to a number of
different places within your document.
| | 00:38 | Then if you need to change them, you
can simply change it in one place and that
| | 00:41 | changes all across the document.
| | 00:43 | It's a lot easier to manage your styles
and it's a lot easier to apply them in
| | 00:47 | an organized fashion.
| | 00:48 | We'll see some examples of that in this lesson.
| | 00:52 | So let's get into it.
| | 00:53 | Here is the table, here in this table-
css.html document and this is our editor
| | 00:59 | here on the top and this is
the browser here on the bottom.
| | 01:02 | So you can see it's the same table from
our last lesson, which looked like this
| | 01:05 | except that it's got some style applied to it.
| | 01:07 | So it's a bit more attractive and in my
opinion it's a bit easier to read as well.
| | 01:13 | So here is the XHTML file and this is
the CSS file over here in this tab and
| | 01:19 | we'll be looking at this in a little
bit of detail as we get into the lesson.
| | 01:23 | For now, let's look at the XHTML. You
see there is the table and the table ends
| | 01:27 | down here at the bottom.
| | 01:28 | It looks very much like the table
we did in our last lesson with a few
| | 01:32 | significant differences.
| | 01:34 | We have these class attributes here
for applying the styles and we'll see how
| | 01:39 | that works in just a moment.
| | 01:41 | So, here's the table and over here in
the CSS, you'll notice that we have some
| | 01:46 | style applied to the body and we have
some style applied to the table, we have
| | 01:50 | some style applied to the caption.
| | 01:52 | This is an example of
Cascading Style Sheets, CSS.
| | 01:56 | What the cascading means in CSS is
the styles apply on top of styles.
| | 02:01 | So, for example, we have some style
applied to the body, the background is
| | 02:05 | white, you see the FFF means white,
the font is set to Tahoma or Sans-serif if
| | 02:11 | Tahoma is not available on your system.
| | 02:13 | So we see that the font throughout
the document is this Tahoma font and
| | 02:17 | the font size is set too, because Tahoma
tends to be a little bit big, so I made it
| | 02:21 | a little bit smaller.
| | 02:23 | These are just my choices, of course,
you can make your own choices and your own
| | 02:26 | style sheet, but I like them like that.
| | 02:28 | So that's applied to entire document.
| | 02:31 | Even to these elements within
the document, it's still applied.
| | 02:34 | So the table itself has a border.
| | 02:37 | It has a border style.
| | 02:38 | It has a border color.
| | 02:39 | The background of the table is this
white, because that's the style that was
| | 02:43 | applied to the
background of the entire document.
| | 02:45 | If I change this from white
and make it-- well, I don't know.
| | 02:49 | Say FCC, which is sort of a
reddish color, save that and reload.
| | 02:56 | We see that applies to the entire
document and it applies to the background
| | 03:00 | of the table there.
| | 03:01 | Now there are certain table cells where
I've set the color to be grey and to be white.
| | 03:05 | Of course, those get their own styles,
but this is an example of the cascading,
| | 03:09 | because the entire document has this color.
| | 03:13 | That's also applied to the elements within
the document, like for instance in this table.
| | 03:19 | I'll change that back.
| | 03:20 | We'll see some more
examples of this as we go on.
| | 03:22 | It should be really clear by the
time we're done. Save that and reload.
| | 03:26 | Now, if we look over here at the caption,
we see it says My Favorite Albums, and
| | 03:31 | it has the caption tag.
| | 03:33 | If we look in CSS, we'll see that we
have a caption selector here on this style
| | 03:39 | and that applies to all the caption
tags that it will find in the document,
| | 03:43 | which happens to be 1.
| | 03:45 | It applies this bold style.
| | 03:46 | The font is the Tahoma font
because that was set up in the body.
| | 03:52 | If I were to change that to something
else like, oh, I don't know, Comic Sans MS,
| | 03:58 | save and reload.
| | 03:59 | Then we see the entire document
changes to Comic Sans MS including even the
| | 04:06 | caption where we have caption set to bold.
| | 04:10 | It's picking up that font from the body.
| | 04:12 | This is the cascading in Cascading Style Sheets.
| | 04:15 | Put this back to Tahoma and save and
reload and that changes it everywhere
| | 04:22 | in the document.
| | 04:23 | Now, let's take a look at the
table row and the table heading.
| | 04:32 | Now, we'll notice in the Cascading Style
Sheets, table row does not have a style
| | 04:38 | attached to it. Table heading has this
align equals left, font-weight, bold and
| | 04:45 | color equals 666, which is a medium
grey, and we'll see here that the table
| | 04:51 | heading in this row here, it's got the bold.
| | 04:54 | It's got the left-align.
| | 04:55 | You will remember in our last document,
we'll take a look at that, that the
| | 04:59 | table headings were centered.
| | 05:01 | I like them a lot better on the left.
I think they read better on the left,
| | 05:04 | they align better with the data on
the left, so they look more like the
| | 05:07 | headings on these tables.
| | 05:09 | So it has these styles applied, of
course, on top of the styles are applied to
| | 05:13 | the body of the document.
| | 05:15 | We have this row here which has the
table row class equals grey and then it's
| | 05:19 | got the data cells with their own
classes: artist, title and comment.
| | 05:23 | This is another example of cascading.
| | 05:25 | You'll see over here we have tr.grey,
tr.white and td.artist and td.title.
| | 05:32 | These are selectors with classes, so tr.
grey means a TR tag with a grey class.
| | 05:40 | We'll look over here.
| | 05:41 | We have a TR tag with a grey class.
| | 05:44 | So wherever the document sees tr class
= grey and there is another instance of
| | 05:49 | it here two rows down, then that
class will be applied from here.
| | 05:57 | tr.grey has a background
color set to this light grey.
| | 06:02 | So all the cells within that row, we have TD,
TD, TD, will all get that grey background.
| | 06:08 | You'll see here they are grey, grey, grey.
| | 06:10 | So that gets applied to these cells.
| | 06:12 | Even though these cells have their own
class, this one is artist, this one is
| | 06:17 | title, this one is comment, these data
classes get applied on top of the row
| | 06:23 | class because these elements
are within the TR container.
| | 06:30 | So the TR is wrapped around these
data cells and so this class gets applied
| | 06:36 | first because it's in the outer box
and these classes get applied on top of
| | 06:41 | that because they're inner boxes.
| | 06:43 | So it looks like this on the page. You
have the grey all the way across and then
| | 06:47 | you have this Artist class, which has
got this maroon color, this Title class,
| | 06:51 | which is italic, and this Comment class.
| | 06:55 | You see here the Comment
class has a blue color to it.
| | 06:59 | So these classes here, td.artist, td.
title, td.comment, they get applied
| | 07:03 | after the row classes.
| | 07:06 | It doesn't matter where
they are in the document here.
| | 07:08 | I could move these, let's drag them up here
and now they're above, save that and reload here.
| | 07:15 | It doesn't change.
| | 07:16 | They are still applied in the same order;
you've got the grey and you've got the other.
| | 07:21 | That's because it's not what
order they are in, in the file.
| | 07:25 | It's how they appear in the document.
| | 07:27 | It's what container contains something else.
| | 07:30 | So I'm going to put this back
just because I like it that way.
| | 07:33 | Let's save it and reload and we'll see
that this is still how we expect it to be.
| | 07:39 | So the Artist class, the Title class, the
Comment class, these apply to the fonts.
| | 07:43 | We have a color, we have italic, we
have another color and these get applied on
| | 07:48 | top of the row classes.
| | 07:50 | So in a nutshell, that's how it works.
| | 07:52 | It's really easy to do by using the
classes in this way, like for instance if I
| | 07:57 | wanted to change this grey and make it
maybe a lighter grey, I'll just type an
| | 08:01 | EEE instead and save it.
| | 08:04 | It applies in all of these different
places throughout the document. You see now
| | 08:08 | we have this very light grey.
| | 08:09 | Hopefully, you can see it on your screen.
| | 08:11 | I can barely see it on mine.
| | 08:13 | That it applies all throughout the document.
| | 08:14 | I only need to change it in one place,
or make it maybe a little bit bluish,
| | 08:19 | save that and reload.
| | 08:21 | We have a slightly bluish grey.
| | 08:22 | So change this in one place and it
applies throughout the document and that
| | 08:26 | really is the power of
Cascading Style Sheets right there.
| | 08:30 | So this is how you can format a
table to make it attractive using CSS.
| | 08:34 | You see here's what our table
looks like before, very plain.
| | 08:37 | That's the defaults for the HTML.
| | 08:39 | That's how it was originally envisioned, so
that they could put tabular data in a document.
| | 08:45 | This is what you can do using CSS to
make it more readable and more attractive.
| | Collapse this transcript |
| Aligning images with tables| 00:00 | So, we've looked at how you present
tabular data using tables, and now we're
| | 00:05 | going to look at how you align visual
elements using a table, how you assemble
| | 00:11 | pieces of an image so it
all looks like one image.
| | 00:14 | This is a very common technique.
| | 00:15 | I still prefer to do it with tables.
| | 00:17 | I think it's easier, and I think it falls
well within what tables were designed to do.
| | 00:23 | So, this is how you align
visual elements using tables.
| | 00:26 | If you're interested in how to do
this using CSS, I'm working on another
| | 00:29 | course on CSS positioning, which you
will also find on lynda.com, which will
| | 00:33 | show how to do it that way.
| | 00:35 | In this case, we are doing this
with tables, and this is how it's done.
| | 00:39 | Here we have an XHTML document
with a table, and this is the table.
| | 00:43 | You'll notice it says border=0,
cellspacing=0, cellpadding=0.
| | 00:47 | Again, you can do this part with CSS,
if you prefer, but the idea is that you
| | 00:51 | want to turn off all of that spacing
stuff that tables normally do, so that the
| | 00:55 | images butt right up against
each other and create one big image.
| | 00:59 | So, here is the nine parts of the image.
There is three rows, and each
| | 01:03 | row has three cells, and
there are all the images.
| | 01:07 | If we look at it on the
browser, these are the nine images.
| | 01:10 | If I just right-click on one of them and
say View Image, you'll see that part of
| | 01:13 | the image, and you'll see that that's
part two of the image, and go back, and
| | 01:18 | there we have the whole image.
| | 01:20 | I'm going to go ahead and turn on the
borders in the table, so that you can see that.
| | 01:24 | I'll save here in the editor and
go back to the browser and reload.
| | 01:29 | Now we have the borders turned on,
| | 01:30 | so you can see how the image is divided.
| | 01:32 | You have nine parts of the image.
| | 01:34 | This part here is entirely white, so is that.
| | 01:37 | But there are the nine parts of the
image, and you'll see this was broken apart
| | 01:40 | because it has parts that are animated GIFs.
| | 01:43 | That makes it easier, so you don't
have to animate the entire thing; you can
| | 01:48 | animate just the parts of it.
| | 01:49 | Anyway, that's how that's done.
| | 01:51 | Now, you'll notice that this has bad
version, and there is a reason for that.
| | 01:54 | Let me go ahead and turn off the border.
| | 01:55 | Again in the editor, it will save, and
now I'll reload this in the browser.
| | 02:02 | Actually, this browser no
longer shows this problem.
| | 02:04 | This is Firefox, and Firefox thinks
it's smart enough to know what I mean
| | 02:09 | instead of what I say.
| | 02:10 | So it's putting the image all close to
each other, even though in the document,
| | 02:14 | I've done it wrong and it's
not supposed to show up that way.
| | 02:18 | You'll see that the cutapart and the
cutapart (bad version) both look the same.
| | 02:22 | For some purposes, one could appreciate that.
| | 02:25 | The problem is that it hides a problem
which happens to show up in other browsers.
| | 02:28 | So I have another browser here.
This is the Internet Explorer browser.
| | 02:33 | You'll notice in Internet Explorer that
it actually shows gaps between the images.
| | 02:38 | It used to show gaps vertically as well, and in
this case it's only showing gaps horizontally.
| | 02:42 | Older versions of all the browsers used
to show gaps in between the images as well.
| | 02:47 | This is because there actually are
gaps in between the images in the HTML.
| | 02:51 | Let's take a look at the XHTML document again.
| | 02:54 | You'll notice each of my table cells,
TR for the rows, you have TDs for the
| | 02:58 | individual data cells.
| | 03:00 | Each of my cells has the TD above,
the TD below, and the image in-between.
| | 03:04 | So, what's wrong with this picture?
| | 03:05 | Well, you'll see that there is space
before the image, and there is another
| | 03:10 | space because, remember that the
browser considers a new line another space.
| | 03:14 | So we have, four, six, seven spaces or so here
| | 03:18 | that are all getting folded into one
space, because that's what the browser does.
| | 03:21 | And here after the image as
well, we have more spaces.
| | 03:25 | If we want the images to be butted
right up against each other, if we want the
| | 03:28 | images to not have any space between
them, then we need to not put any space in
| | 03:33 | the source document in the XHTML.
| | 03:35 | So, here is cutapart_good,
and these are in your exercise files.
| | 03:40 | You'll see how this is done.
| | 03:41 | We have the TR, we have the rows.
| | 03:43 | You'll see this all fits on
one page really nicely, too.
| | 03:45 | It still looks very nice.
| | 03:47 | We have the TD for the data cell, and
there is no space at all around the image.
| | 03:51 | There is the image, and it's right up
against the TD and right up against the TD.
| | 03:56 | Now, the way that tables work, this
space here should be okay, because the
| | 04:00 | browser isn't supposed to display that.
| | 04:02 | That doesn't appear anywhere on the screen.
| | 04:04 | The only content in a table that's
actually supposed to appear on the screen is
| | 04:08 | the content inside the data cells
and inside the heading cells as well.
| | 04:12 | So, the data cell--this is what you
want--has got the image in it and nothing
| | 04:17 | else whatsoever, no spaces.
| | 04:19 | So we have TD, TD, TD, all with those
spaces, no spaces in this table at all.
| | 04:25 | So if we look at the cutapart_good,
in Internet Explorer, we'll see that it
| | 04:30 | has no spaces at all.
| | 04:31 | So, that's how that's done.
| | 04:33 | So, this is how you take an image that's
in pieces and you assemble it using tables.
| | 04:38 | This is the correct way to do it.
You have your table, border off, cellspacing
| | 04:43 | off, cellpadding off and you simply put
the images in your table data rows, and
| | 04:48 | in your table data columns.
| | 04:49 | It all comes together really nicely.
| | 04:51 | It looks nice in Internet Explorer,
and it looks nice in Firefox as well.
| | 04:56 | So that's how you
assemble an image using tables.
| | Collapse this transcript |
| Reviewing an alternative solution using CSS| 00:00 | In this movie, I'll show you an
alternate approach to assembling our image using
| | 00:05 | CSS instead of tables.
| | 00:07 | Many people try to avoid using tables
for layout, preferring instead to use CSS.
| | 00:12 | Without getting into which approach
is better, they both work just fine.
| | 00:16 | I'll show you here how you can
do this same layout using CSS.
| | 00:21 | So here you see the same
exercise we had that we did tables.
| | 00:25 | This is a CSS version.
| | 00:26 | You can see that it looks exactly the
same as the version that's done with tables.
| | 00:32 | So let's take a look at the
code that makes this happen.
| | 00:34 | So this is our CSS version,
and here is the tables version.
| | 00:38 | The tables version you're already
familiar with if you did the exercise
| | 00:41 | with the tables version in this
chapter. And you'll notice that here's the
| | 00:45 | table borders, cell spacing,
cell padding, all set to 0, and your table cells--
| | 00:51 | all very easy to understand.
| | 00:53 | And then here is the CSS version, and
here is the style sheet. This is the CSS
| | 00:59 | inside of this block here, and it's
very simple; it doesn't take a lot of CSS.
| | 01:04 | And here, the structure of this
actually looks very, very similar.
| | 01:08 | So there are a few things
that we should notice about this.
| | 01:11 | Now the biggest challenge in
assembling images, and this is true for both the
| | 01:15 | CSS version and tables version, is
to ensure that the image doesn't get
| | 01:19 | disassembled when the browser window
is too small for the assembled image.
| | 01:23 | Images are in-line elements in HTML so
the browser will try to wrap them if it can.
| | 01:29 | Now for the CSS version, there are
different ways that you can do it.
| | 01:33 | My solution here was to put the images
in vertical columns with one div for each
| | 01:39 | column, and align those columns using float:
| | 01:41 | left in the CSS, and then wrap it
all up in an outer div with explicit
| | 01:47 | dimensions, the exact size of the
assembled image, and this works really great.
| | 01:51 | This makes it so that no matter how you size
the browser--and here's the CSS version here--
| | 02:01 | that image does not get broken apart;
| | 02:03 | it doesn't get wrapped. And that of
course is also true for the tables version.
| | 02:10 | So here we have something
that's working exactly the same.
| | 02:13 | The difference is that it's
organized just a little bit differently.
| | 02:16 | In the tables version, we have them
organized across because that's the way that
| | 02:22 | table rows work, so 1, 2, 3, 4, 5, 6, 7,
8, 9. That's actually the way that I
| | 02:27 | numbered the images.
| | 02:29 | For the CSS version, I have
got 1, 4, 7, 2, 5, 8 and 3, 6, 9.
| | 02:35 | These are vertical; these are all the
ones in the left column; these are all the
| | 02:38 | ones in the middle column; and these
are all the ones in the right column.
| | 02:41 | CSS works really well for column layout,
and so here instead of laying it out by
| | 02:47 | rows, I laid it out by
columns, and that made it work well.
| | 02:51 | In the CSS, for each column--and this is the
column layout here--we have a float: left and a margin:
| | 02:58 | 0 and a padding: 0.
| | 02:59 | So each column will float right up
against each other, and they'll actually stack
| | 03:03 | the first one on the left, the second
one to the right of that, and the third one
| | 03:07 | to the right of that, and that's
how float: left works in CSS.
| | 03:11 | And then there is this outer div, and
that one here is cutapartOuter. And that
| | 03:17 | outer div has the exact width and height,
and that helps it to know not to break apart.
| | 03:23 | So you'll notice that I used an ID
selector for the outer one because I know
| | 03:27 | that there is going to be just one of
those in the entire document, so I used an
| | 03:32 | ID selector for that. And for the
classes for the individual columns, I used a
| | 03:37 | class selector called cut apart column
(cutapartCol), and I used the same class
| | 03:41 | selector for each one of these.
| | 03:44 | And that allows me to really
minimize the amount of CSS that I have here.
| | 03:49 | So it's really not a lot of CSS to
make this happen, and it works really well.
| | 03:54 | Now you'll also notice that I
put the CSS inside the document.
| | 03:57 | I did that because it makes it
easier to describe here in the movie.
| | 04:01 | You can easily put this in
an external CSS style sheet.
| | 04:04 | It could be incorporated into something else.
| | 04:06 | It could be incorporated into the rest
of your site and it could be organized
| | 04:10 | just as you would with any CSS.
| | 04:12 | So that's how we get exactly these
same results using a CSS style sheet for
| | 04:16 | layout instead of using tables for
layout as we did in the previous version.
| | Collapse this transcript |
|
|
6. FramesIntroducing frames| 00:00 | Frames in XHTML and HTML are a way of
displaying multiple pages within one page.
| | 00:07 | In other words, this is a frames
document and it has different areas and each of
| | 00:12 | these areas has a separate
XHTML page being displayed in it.
| | 00:17 | When I click on the links here in
the menu side, on Info, it shows me the
| | 00:22 | information page here in the big open
part of the frames and then Contact,
| | 00:27 | it goes in this frame here, in the big frame.
| | 00:30 | Each of these that I click on is
going to show up there in that frame.
| | 00:36 | If I open one of them by itself, in
other words, here is the Info here, company
| | 00:41 | information goes here.
| | 00:42 | If I right-click on this link and say
Open Link in New Tab, then it will show
| | 00:47 | that Info page in a tab all by
itself and that's what it is here.
| | 00:52 | That's a normal HTML file.
| | 00:54 | So, if we look at this in the Editor,
here's our frames document and I brought
| | 00:58 | up the nav document here too.
| | 01:00 | This is the navigation
document on the left-hand side.
| | 01:02 | You can see it's a normal HTML file and
it's just got that unordered list with
| | 01:07 | all of the links in it, just
like you saw there in the browser.
| | 01:11 | So that's this document here.
| | 01:13 | It's just a normal HTML file or rather
an XHTML file in this case that is simply
| | 01:18 | displayed in this frame.
| | 01:19 | So, let's look at how this
works in the frames document.
| | 01:22 | This is frames document and you'll
notice that it uses a different DOCTYPE,
| | 01:26 | a different DTD, a Document Type Definition.
| | 01:28 | It uses the frameset one.
| | 01:30 | So the frameset DOCTYPE has
these frameset tags available.
| | 01:35 | So framesets have frameset
tag and it has the frame tag.
| | 01:39 | Now the frameset tag is a container,
just like any other container, you see it's
| | 01:45 | got the begin tag here
and it's got end tag there.
| | 01:48 | The frame tag is not a container, so it
has the shorthand here for not being a
| | 01:53 | container and not having a separate end tag.
| | 01:55 | The frameset contains frames and
it can also contain other framesets.
| | 01:59 | So this frameset here is
contained within this frameset here.
| | 02:03 | The frameset can also contain a no
frames part, so here is noframes and there is
| | 02:08 | the end tag for noframes.
| | 02:10 | It has a body and a normal
XHTML document within it.
| | 02:15 | That gets displayed if it's displayed
on a device or on a browser that does
| | 02:19 | not support frames.
| | 02:21 | So that noframes part if what would
display if the browser looking at the page
| | 02:25 | does not support frames.
| | 02:29 | So here is the frameset tag and you'll
notice that it has columns attribute, cols.
| | 02:33 | It's short for columns.
| | 02:37 | So that's for vertical divisions,
as you can see the comment here.
| | 02:40 | This is an XHTML comment.
| | 02:42 | I'm just going to cover this real quickly here.
| | 02:44 | XHTML comments, just like HTML comments,
they have an opening angle bracket and
| | 02:50 | an exclamation point and two dashes and a space.
| | 02:53 | That all delimits the beginning of
the comment. The space is required;
| | 02:57 | you have to have the space.
| | 02:59 | And then at the end of the comment,
it has a space and two dashes and
| | 03:03 | a closing angle bracket.
| | 03:05 | That makes a comment.
| | 03:06 | This does not get interpreted by the browser.
| | 03:08 | It doesn't get displayed on the page.
| | 03:10 | It's just a comment so that we
can help to understand the code.
| | 03:13 | So this comment says
cols for vertical divisions.
| | 03:16 | I put these things in to help myself
remember, as much as anybody else,
| | 03:20 | because I don't use frames very often,
so I want to remember how they work.
| | 03:24 | So here's the frameset for the
columns and it has a number here, 130,*.
| | 03:30 | We'll get back to that in a moment.
| | 03:31 | Within this frameset, there is a frame
that has that navigation on the left-hand side
| | 03:37 | that we saw in the browser.
| | 03:39 | Then there is another frameset.
| | 03:40 | This one says rows, this
is for horizontal division.
| | 03:43 | It's got a number here and an asterisk.
| | 03:45 | So, this frameset is for rows.
| | 03:47 | So looking at it on the browser,
the first frameset is the column, so it has
| | 03:51 | this one and it has this one,
which is another frameset.
| | 03:54 | So, it has this frame and it has this
frameset that's divided horizontally.
| | 03:58 | The second frameset has the row, so
it has this horizontal one here and
| | 04:03 | that horizontal one there.
| | 04:05 | Going back to the document, let's look
at those numbers and see what those mean.
| | 04:08 | I bet you can figure out by this time.
| | 04:09 | 130 is the number of pixels for the
first division and the frameset and then
| | 04:16 | the asterisk means use up the rest of
the space, divide it equally amongst
| | 04:19 | whatever frames are left.
| | 04:21 | So in this case we just have two, we
have the one, which is the nav.html, and so
| | 04:26 | that has that menu in it and that
is 130 pixels wide and it's vertical.
| | 04:31 | Then the next one is this frameset,
which takes up the rest of the space.
| | 04:36 | So, if we look at it again in the
browser, you see here is the 130 pixels and
| | 04:40 | there is the nav.html.
| | 04:43 | If I right-click on that and say Show Only
This Frame or Open Frame in New Tab, there it is.
| | 04:49 | There is the Navigation menu and
that's what's there in this column all by
| | 04:53 | itself, 130 pixels wide.
| | 04:56 | Then the rest of the space is
divided up by this other frameset.
| | 04:59 | Now going back to the XHTML, here is the
frameset on the right and it says rows,
| | 05:05 | 75 pixels and then an asterisk.
| | 05:09 | So, the first document is going to be
75 pixels high at the top and then the
| | 05:14 | next one is going to take
up the rest of the space.
| | 05:17 | So we'll see here in the browser.
| | 05:19 | This one here is the 75 pixels at the top and
this one is taking up the rest of the space.
| | 05:24 | So that's how the frames work.
| | 05:26 | The frameset document sets up the space
and then it specifies where all of these
| | 05:32 | documents come from.
| | 05:33 | So, looking again at the HTML, we have a
frame here with source=content/nav.html
| | 05:40 | and name=nav and then a source
here for this one, it says titlebar.
| | 05:47 | This was the one at the top of the rows
and source here for default content at
| | 05:52 | the bottom of the rows.
| | 05:53 | Now, let's take a quick look at this
nav.html and this is one other feature that
| | 05:57 | you need to know about frames.
| | 06:00 | And notice each of these links in
here, these are normal anchor tags,
| | 06:03 | a href=info.html target=content.
| | 06:08 | This is an attribute we
haven't seen before. target=content.
| | 06:12 | What this means is that this link when
it's clicked on will be displayed in the
| | 06:17 | frame that's named content.
| | 06:19 | We look back over here at the example.
| | 06:21 | We see that we have a
frame that's named content.
| | 06:25 | It has name=content.
| | 06:27 | This one is name=title bar.
| | 06:29 | This one is name=nav.
| | 06:30 | This one is name=content.
| | 06:32 | So when those links are clicked on, we
can get nav.html again, they will show up
| | 06:37 | in the content frame.
| | 06:40 | If we look at this again, the
content frame is the bottom frame.
| | 06:43 | I have a comment there.
| | 06:44 | Remember, frameset rows = 75, *.
| | 06:49 | So the first one is 75 pixels and the
next one takes up the rest of the space.
| | 06:53 | So if we look at the browser, we see
that this is the 75-pixel one and this is
| | 06:58 | the rest-of-the-space one.
| | 06:59 | So when we click on these links,
they're going to show up in this frame here
| | 07:03 | that's named content and that's where they
show up, so that's how that works. All right?
| | 07:10 | So reviewing once more, it's really very simple.
| | 07:13 | We have an outer frameset and
that frameset has two spaces in it.
| | 07:18 | It has a frame and I have another frameset.
| | 07:22 | The inner frameset has two spaces and these
are horizontal; the outer ones are vertical.
| | 07:26 | The outer one is vertical because
it says columns and the inner one is
| | 07:29 | horizontal because it says rows.
| | 07:32 | Then each of these, we have-- this one is
named title bar and that takes up 75 pixels.
| | 07:37 | This one is named content and
that takes up the rest of the space.
| | 07:41 | Then the navigation file, which is in
the left frame, that targets the content
| | 07:47 | frame for each of the links
using the target attribute.
| | 07:50 | So see, that's how it works.
| | 07:53 | That is, in a nutshell, how frames work.
| | Collapse this transcript |
| Hiding frame borders| 00:00 | In the last lesson we created this
page here, which is the frames page, and
| | 00:05 | it has these different documents in the different
frames, and we explained how all of that works.
| | 00:09 | And you'll notice that it has these
lovely borders here, when I hover the mouse
| | 00:12 | over them, the pointer changes
to something that I can drag.
| | 00:15 | So I can actually resize these borders,
and that's not necessarily what you want
| | 00:21 | when you're creating a frames document.
| | 00:23 | Most people would rather have their
frames document look like this with no
| | 00:26 | borders whatsoever, and all their pages
are nicely butted up against each other.
| | 00:30 | So they blend together and you can
even do nice things with your graphics to
| | 00:33 | make them merge, so that it looks
very coherent and then when I click on
| | 00:37 | these links, you'll see that they all
show up in the content area just all
| | 00:44 | nicely merged together.
| | 00:46 | So most people would like to
have that rather than this.
| | 00:48 | Now the problem with this is you'll
notice that it says your Frames Example (not valid),
| | 00:53 | and that's because that's the
title that I gave the document, because
| | 00:57 | there is XHTML in there
| | 00:59 | that's actually not valid XHTML and
that is necessary to get this effect.
| | 01:04 | The problem is that the XHTML standard
does not include the facility to make
| | 01:08 | these borders go away.
| | 01:09 | So here is the valid example, and this
is as close as you can get to with valid
| | 01:14 | XHTML, and you'll notice it still has
this border, and I can still grab it, and
| | 01:18 | I can still move things around which
is not at all what you want when you're
| | 01:24 | trying to get this effect here.
| | 01:26 | So just as long as you understand that
this is breaking the rules, and that it
| | 01:30 | works in every browser I've tried it in,
and the browser companies of course are
| | 01:34 | more interested in having it work
than in having it satisfy the standards
| | 01:37 | committee, and so am I, and so are you.
| | 01:41 | So we'll go ahead and I'll show you
how this works, and just understand, you
| | 01:44 | should try it in all the browsers
that matter to you and make sure that it
| | 01:47 | actually works in all those browsers.
| | 01:48 | As of this recording, it works in
all the browsers that I've tried it in.
| | 01:52 | So here is the XHTML that I'm talking
about, and this is a frameset document,
| | 01:57 | and you'll notice that the only
difference here between this one and the one
| | 02:00 | that we looked out before is that it
has this border="0" attribute, and it's
| | 02:05 | just in this one place in this frameset.
| | 02:08 | It doesn't really need to be in any of
the other framesets or any of the other
| | 02:12 | frames, or anywhere else in the document,
and really that is the entire trick.
| | 02:16 | The problem of course is that that
attribute is not defined with this tag.
| | 02:21 | And so, if you try to run it through
one of those automated validated things
| | 02:25 | that the standard committees would
like you to be using, that I haven't even
| | 02:28 | shown you where they are, you'll find
that it doesn't validate, and that's
| | 02:32 | really the only problem which is
not a problem, because it works in the
| | 02:34 | browsers, and that's what matters.
| | 02:36 | So this is how you do that.
| | 02:37 | I'm going to show you the valid version
here, which has this frameborder="0", on
| | 02:43 | each of the frames and that actually
makes it stop displaying that gray border
| | 02:48 | that we saw in this original one.
| | 02:50 | And instead, it gives you this white
border, which doesn't really help much, and
| | 02:55 | so that's what the standard version of it does.
| | 02:58 | The not valid version of it is the one
that works, and this has the Border="0"
| | 03:03 | attribute, and it looks
like this in the browser.
| | 03:06 | So that's how you make the border go
away, and as I said, it works in all the
| | 03:10 | browsers that I know of, and it is
not a part of the XHTML standard.
| | Collapse this transcript |
| Creating inline frames using iFrame| 00:00 | In this lesson we're going to talk
about iFrames, which is the kind of frames
| | 00:03 | that people actually use these days.
| | 00:05 | The other kind of frames that we've
been talking about for the rest of this
| | 00:08 | chapter, those frames that divide
up the screen into different areas,
| | 00:12 | very few people are
ctually using those anymore.
| | 00:14 | You don't see them a lot
on the Internet anymore.
| | 00:17 | They tend to mess up the search
engines and so people don't get a lot of
| | 00:20 | traffic, and they also tend to mess
up the users. They're hard to navigate.
| | 00:23 | The back button doesn't always do what
is expected to do, and so people don't
| | 00:27 | like them, and they don't use them very much.
| | 00:30 | The iFrame on the other hand is actually
very useful, and people use them quite often.
| | 00:35 | They're usually used to display some
bunch of stuff that you don't want taking
| | 00:39 | up a lot of space on the screen.
| | 00:40 | You see here we have this Standard
Disclaimer, so you'll see a privacy policy
| | 00:44 | there, or terms and
conditions, or something like that.
| | 00:47 | They have to have on the screen for
legal reasons usually, and that they don't
| | 00:51 | necessarily need to take up a lot of real
estate within, so that's what they're in.
| | 00:55 | And just for a little bit of extra fun
here in the exercise files, you'll find
| | 00:58 | my Standard Disclaimer.
| | 01:00 | One year I just sort of collected all
the disclaimers I found on box tops things
| | 01:04 | and stuck it in there.
| | 01:04 | It's kind of fun to look
at if you enjoy such things.
| | 01:07 | In any event, here is the iFrame document.
| | 01:11 | It's very simple.
| | 01:12 | You see it uses the
normal XHTML Transitional DTD.
| | 01:15 | The Doctype is the normal
one that we've been using.
| | 01:18 | We don't have to have a
special Doctype for that.
| | 01:20 | It has all the normal XHTML that you might find.
| | 01:23 | It's got this H1 tag, and the P tag,
and all of that, and here it's got an
| | 01:29 | iFrame tag, and this iFrame tag has a
begin tag and an end tag, it's a block
| | 01:33 | element, and it has its content
wherever you want to have display for browsers
| | 01:38 | that don't support the iFrame.
| | 01:39 | Then it's got a source attribute, where
you specify the file, and has width and
| | 01:45 | height, little bit of style information
here to create that nice little border
| | 01:48 | around it, and that's it.
| | 01:50 | And then it pulls up this other
XHTML file, iFrame-content, and this is
| | 01:55 | what goes inside the box, and you see that we
have that sourced with the source attribute.
| | 02:01 | It tells us where to find that, and
that's this file here, which is just
| | 02:06 | a normal XHTML file.
| | 02:08 | You'll notice it's got the normal
transitional Doctype at the top, and it has a
| | 02:11 | little bit of style information there
, and then it has the heading iFrame
| | 02:16 | Content, oh, that's the title, iFrame
Content, and that doesn't actually display
| | 02:21 | anywhere here, but that is
required by the standard.
| | 02:24 | So we go ahead and put that in.
| | 02:25 | Then it's got a body, and it's got this
heading, the Standard Disclaimer is the
| | 02:30 | heading, and then it has this paragraph.
| | 02:32 | This product is meant for educational
purposes only, blah, blah, blah, and
| | 02:36 | that goes down in here.
| | 02:37 | You'll notice that this is an
actual frame, in an actual file.
| | 02:41 | I can select with my right mouse button.
| | 02:43 | I can say let's Show Only
This Frame, or open it in a tab.
| | 02:46 | It opens in the tab, there is the title
, and there is the whole document there.
| | 02:53 | So that's how you make an iFrame,
you'll need to that if you need to display
| | 02:58 | some disclaimer, or some legalese
that you have to have in your webpage.
| | 03:02 | So you don't want to have it take up
a lot of screen real estate, use the
| | 03:06 | iFrame tag, and you use the source attribute
, and whatever other attributes you need,
| | 03:11 | and there it is.
| | 03:13 | It displays in that nice little handy
box with a nice little handy scroll bar,
| | 03:17 | so that people will look at
if they are inclined to do so.
| | Collapse this transcript |
|
|
7. FormsIntroducing forms: part 1| 00:00 | Forms in XHTML and HTML are how you provide
interactions between a user and a web server.
| | 00:07 | So they look like this. You have
places where you can type things.
| | 00:10 | You have buttons that you can press,
and you have more places you can type
| | 00:13 | things and more buttons you can press.
| | 00:15 | There are different types of elements
in a form and these are called widgets.
| | 00:20 | So you can type text into a text widget,
you can press radio buttons, and radio
| | 00:28 | buttons are the kinds of
buttons that are mutually exclusive.
| | 00:31 | In other words, I can only press one
radio button at a time in a group of
| | 00:35 | radio buttons, and they are groups together,
so that you can have one choice out of several.
| | 00:39 | Checkboxes are widgets that you can
check and uncheck at will and they do
| | 00:45 | not group together.
| | 00:46 | So you can always check as
many or as few as you like.
| | 00:50 | Then this is a submit button.
| | 00:51 | So when I'll click on this button, it
will actually submit this data to the
| | 00:55 | server, and then a program on the
server takes over, and does whatever it's
| | 00:59 | supposed to do with the data from the form.
| | 01:01 | So there are a couple of
things to understand here.
| | 01:03 | The most important is
this is a two-part process.
| | 01:05 | There is a front end and there is a back end.
| | 01:08 | The front end is the XHTML or HTML that
creates the form, and we have that here
| | 01:14 | in this text editor here, so that you
can see how to create these widgets.
| | 01:18 | This course is about the front end.
| | 01:20 | The back end is what the server does with
the data once you submit it to the server.
| | 01:25 | The back end is usually written in a
program like Perl or PHP or something else.
| | 01:31 | It accepts the data from the web
browser, from the form that the user has
| | 01:35 | filled out on the web browser using a
protocol called CGI stands for Common
| | 01:41 | Gateway Interface, and it's simply the
very small, very simple specifications
| | 01:46 | of how the browser talks to the
server and passes back and forth this
| | 01:50 | information that's in the form.
| | 01:52 | So this is about the front end.
| | 01:53 | Now obviously the form is no good
without some kind of a back end, and you need
| | 01:59 | to understand that the process of
installing a script on the back end is
| | 02:03 | something that varies from server to server.
| | 02:05 | I can give you the script, but I can't
necessarily tell you how it installs on your server.
| | 02:10 | The scripts that I have provided in
the Exercise Files are written in Perl,
| | 02:14 | and I have a separate course on Lynda.com
about how to install Perl scripts on a server.
| | 02:18 | Again, because all servers are
different, it doesn't cover all possible
| | 02:21 | situations, but it covers a lot of them.
| | 02:23 | And if you are interested in how to
do that, you can take a look at that
| | 02:26 | course using Perl with CGI, I believe it's
called, and that will teach you how to do that.
| | 02:32 | In the meantime for the purpose of
testing your form, I have installed a small
| | 02:37 | script on my server, and all it does is
it gives you back exactly what you put
| | 02:42 | into the form, so that you can
experiment with your form fields, and you can at
| | 02:45 | least design a form and
follow along in this lesson.
| | 02:49 | So I'm just going to go ahead here and
click on Send, and you will see what that
| | 02:52 | does is it just echoes back what you
have you typed in the form fields and gives
| | 02:56 | you some other information that
probably doesn't mean a whole lot, but in the
| | 02:59 | context of the server, it does.
| | 03:02 | So that is the there, so that you
can follow along in this lesson.
| | 03:06 | I've included that script in the
Exercise Files, and I have also included a mail
| | 03:10 | form script in the Exercise Files,
which if you have somebody who knows how to
| | 03:13 | install such things, you can install
that on your server and use this form to
| | 03:16 | actually send feedback to a given
email address that you provide in the form.
| | 03:20 | I'll talk a little bit about the CGI
programs in the next lesson in this
| | 03:24 | chapter, but this chapter is
really about the front end.
| | 03:27 | It's about how to do the
forms in XHTML and HTML.
| | 03:31 | So let's take a quick look at the form
here, and what it does, and how it works.
| | 03:36 | This is form in XHTML, and it starts
here with a form tag, and form tag has a
| | 03:41 | couple of attributes.
| | 03:42 | It has a method attribute, and it has an action
attribute, these are required. Method = "post".
| | 03:47 | There are two choices here.
| | 03:49 | There is get and post, and
we'll talk about those in a minute.
| | 03:52 | The action attribute gives the location
of the CGI script on your server in a URL.
| | 03:58 | In this case it's my server, bw.org
is my server, and it's this test.cgi,
| | 04:04 | and again, you are welcome to use
that just for the purpose of following
| | 04:07 | along in this lesson.
| | 04:09 | Then we have the form elements.
| | 04:12 | The forms elements are
typically like this in an input tag.
| | 04:16 | There are a few exceptions and we'll see that.
| | 04:18 | The input tag here, in this case, it's
type = "text" and that makes a text field.
| | 04:24 | So we have here this little text box,
one line of text, and that is done with
| | 04:29 | this input type = "text" and name = "Name".
| | 04:33 | We will talk in a moment about
what this name attribute does.
| | 04:37 | So here is another text box.
| | 04:39 | I'll scroll down here a little bit,
and here is our radio buttons.
| | 04:44 | So we have input type = "radio", name = "
Retail", value = "Consumer" and checked
| | 04:51 | = "checked" and then here
is another radio button.
| | 04:53 | Input type = "radio", name
= "Retail", value = "Store".
| | 04:57 | So you will notice that this one
here says checked = "checked" and all
| | 05:01 | that means is that.
| | 05:02 | That's the button that is selected by
default, and this name = "Retail", you
| | 05:07 | will see, we used the same
name in both of the radio buttons.
| | 05:10 | That's how they are grouped together.
| | 05:11 | So you can only have one radio button
selected at a time in a given group, and
| | 05:17 | the group is defined by having the same name.
| | 05:20 | So if they have the same name, only
one of them at a time is going to be
| | 05:23 | allowed to be selected.
| | 05:24 | So we'll look at this in the
browser, and here we have these two.
| | 05:29 | Now I'm going to reset this form.
| | 05:31 | If I just press Reload, it
doesn't actually reset the form.
| | 05:34 | It will reload the HTML, and it will show any
changes here, but the data remains the same.
| | 05:40 | So if I want to actually reload the form,
and reset it to its default position,
| | 05:45 | I actually have to go up into the
location bar and select it, and press the
| | 05:49 | Enter key on my keyboard,
which I'm going to do right here.
| | 05:52 | That actually resets the
form to its default state.
| | 05:55 | Different browsers work a little bit
differently, but most of them require
| | 05:58 | something like that in order to reset a form.
| | 06:00 | So now it's in its reset state, and
you will see that the Consumer button is
| | 06:04 | pressed, because I have
this checked attribute here.
| | 06:08 | If I take that out and save it, and
then I'll reset the form again by going up
| | 06:15 | to the title bar and pressing Enter.
| | 06:17 | Now you'll see that neither
of the buttons are pressed.
| | 06:19 | I need to press one. I don't have to.
| | 06:22 | I can press neither of them.
| | 06:23 | This is the only way to get
neither of them to be selected.
| | 06:26 | If I now select one, or select the
other one, there is now no other way I can
| | 06:30 | click outside of it.
| | 06:31 | It doesn't unselect it.
| | 06:32 | There is no other way to get none of
them to be selected, but there is always
| | 06:35 | going to be one at this
point, and no more than one.
| | 06:38 | So I'm going to go ahead and put that
checked back in here, and save, and we'll
| | 06:45 | go back and reset, and there we are.
| | 06:51 | Moving on, here are the checkboxes,
and again, if I want to make one of these
| | 06:55 | checked by default, I can use
that checked = "checked" syntax.
| | 06:59 | Here each of them has a
separate name you will notice.
| | 07:01 | The name attribute is different in each
one of them, and you will see that the
| | 07:04 | type = "checkbox" and that's what
makes them checkboxes like here.
| | 07:08 | You will see also that the text that's
related to both the radio buttons and the
| | 07:12 | checkboxes is separate.
| | 07:14 | It's outside of the form element.
| | 07:15 | It's done in the HTML.
| | 07:17 | So I have word consumer here
before the radio button for Consumer.
| | 07:21 | I have the word retail stored here
before the retail store, and all of these
| | 07:25 | input elements are inline level elements.
| | 07:28 | So you go right in there with the text,
and they just flow just like the text.
| | 07:32 | So that's how that works.
| | 07:34 | I just I want to show you, if I put in
here checked = "checked", you will see
| | 07:41 | that now this Hobbyist
checkbox will be selected by default.
| | 07:45 | I'll go back here to the browser,
and I'm going to reset the form by
| | 07:48 | selecting the location bar, and
pressing the Enter key, and you see now that
| | 07:52 | Hobbyist is checked by default.
| | 07:55 | I can uncheck it if I want to, and I
can check something else if I want to, but
| | 07:59 | it's checked by default, because I
had that checked = "checked" default in
| | 08:05 | there, in the XHTML.
| | 08:06 | So I'll go ahead and take that out,
and Save, and we'll move along here.
| | 08:12 | We have another text box here.
| | 08:14 | Input type = "text" and then we have one
called textarea, and that's right here.
| | 08:19 | Textarea is a container, and it creates
this text area here, which you can type
| | 08:25 | a lot of stuff into.
| | 08:26 | You can type a lot of stuff in here.
| | 08:31 | And if I just copy and paste that,
you will see that eventually it gets a
| | 08:36 | scrollbar after it fills up for a while.
| | 08:38 | So you can actually put up a
lot of stuff in a text area.
| | 08:42 | The dimensions of the textarea are
specified here with cols = "30" and rows = "5".
| | 08:49 | You can do different things
within in CSS if you like.
| | 08:52 | The contents of the container here,
you'll notice it has a begin tag and an end
| | 08:56 | tag is the default value.
| | 08:58 | So if I put in here, This is the default
for the textarea, and I click Save, and
| | 09:06 | then I go in here and reset the form by
selecting the location bar, and pressing
| | 09:10 | Enter, you will see that now I get
the default value in the textarea.
| | 09:15 | So that can be useful, if you
want it to default or something.
| | 09:18 | We'll go ahead and take
that out for now, and Save.
| | 09:23 | Finally, on this page you will see we
have this button, which submits the form.
| | 09:27 | It's the Send button down there at the bottom.
| | 09:29 | This is type = "image".
| | 09:31 | So a type = "image" acts like a submit button.
| | 09:34 | Instead, you can say type = "
submit" and I'll click Save here.
| | 09:41 | Instead of this image here, we'll get a
submit button, a normal submit button as
| | 09:46 | we would see in our operating system.
| | 09:48 | So I'm just going to press Reload, and
we'll see that the image now changes to
| | 09:52 | this submit button that says Submit Query.
| | 09:54 | That's the default text for that.
| | 09:56 | You can change that with a value attribute.
| | 09:58 | You can have it say value = "Label
goes here", and if I save that, then the
| | 10:06 | button will say label goes here when I reload.
| | 10:09 | See, label goes here.
| | 10:11 | So I'm going to go ahead and put this
back the way that it was, and that's you
| | 10:15 | create a normal submit button.
| | 10:16 | Most people prefer the image buttons
instead, so they can create their own image.
| | 10:22 | They can create their own button.
| | 10:24 | Most people prefer to do it that way.
| | 10:26 | You can even do things like
creating rollovers using CSS and a lot of
| | 10:29 | people like to do that.
| | 10:30 | Those are the major
elements available in a form.
| | 10:34 | Those are the major Form widgets available.
| | Collapse this transcript |
| Introducing forms: part 2| 00:00 | Before we finish up with this subject,
I just want to talk a little bit about
| | 00:03 | what happens when you press Send.
| | 00:06 | Now, in this case you'll see that it's
set to Action equals and this URL here.
| | 00:11 | This URL here is a test script on my
server, bw.org is my server, and this is a
| | 00:17 | test script that's available on my server.
| | 00:20 | Go ahead and feel free to use
this for testing your forms.
| | 00:24 | It doesn't really use up a
lot of resources on my server.
| | 00:27 | So as long as I'm able to provide that, I will.
| | 00:29 | When we press Send here, let's go ahead and
fill some stuff and you can see what happens.
| | 00:39 | I am that, and I am that, and I am that.
| | 00:43 | And let's see here,
Other, something else here,
| | 00:46 | and "I don't really have
any comments to write,
| | 00:53 | so I won't write anything." There.
| | 00:59 | When I press Send, it's going to send
all of this data in the special CGI format
| | 01:04 | to that text script on my server and
the text script on my server, all it does
| | 01:09 | is it takes the data that it
receives and it displays it on the screen.
| | 01:12 | So go ahead and press Send and there we have it.
| | 01:15 | It displays that on the screen, and
here it is under CGI Values and here is all
| | 01:20 | the stuff that it got in the CGI.
| | 01:22 | We can see that all the data is there
from the different widgets that I pressed,
| | 01:27 | and didn't press, and all the text
that I wrote in the various text boxes and
| | 01:32 | it's displayed in alphabetical order,
because that's just what this particular
| | 01:35 | program does and how it works.
| | 01:37 | So the Name field has my name,
Email field has my email.
| | 01:42 | These labels here on the left, these
are taken from the Name attributes.
| | 01:47 | So in the Name field, the Name
attribute says Name, and in the Email field,
| | 01:51 | the Email attributes say Email.
| | 01:53 | Next, we have the Radio buttons.
| | 01:56 | Let's take a look at the Radio buttons
in the XHTML and those are named Retail,
| | 02:00 | and remember only one of
those can be selected at a time.
| | 02:04 | So one of these says
Retail and it says Consumer.
| | 02:07 | So the value from the Consumer one gets
sent in the Retail variable and the value
| | 02:13 | from the Store one would have got sent
if I selected the Store Radio button.
| | 02:17 | But only one of these will show up
with the name Retail. So that's there.
| | 02:22 | Then we have these other variable check
boxes, Enthusiast, ProArtist, Hobbyist,
| | 02:26 | HendrixFan, and I think I
have selected three of those.
| | 02:29 | I did not select Enthusiast.
| | 02:31 | So we didn't get one for Enthusiast,
but we've got HendrixFan on, Hobbyist on,
| | 02:36 | and ProArtist on.
| | 02:40 | Then the Other field which is named Other.
| | 02:44 | So we'll see that here under Other.
| | 02:45 | Something else here.
| | 02:46 | That's what I typed.
| | 02:47 | Finally, the message field.
| | 02:49 | That's our text area.
| | 02:50 | You'll see it says the Name = Message,
and that's what I typed in there.
| | 02:55 | I said I really don't have any
comments to write, so I won't write anything.
| | 02:58 | Finally, we clicked on the graphic and
you'll notice that the graphic here gave
| | 03:03 | us the Submit variable, but it gave us
two of them. One of them says .x and one
| | 03:06 | of them says .y and this is the
standard way that Graphic Submit buttons work.
| | 03:12 | It's actually giving us the coordinates
on the graphic where I clicked the mouse.
| | 03:17 | So this can be useful in some situations.
| | 03:20 | It's very rarely actually used.
| | 03:22 | Very few people actually use it
or have an application for that.
| | 03:25 | But you can see that it's possible to
have one and there are interesting things
| | 03:28 | that can be done, like for instance you
could have a map and want to know where
| | 03:32 | somebody clicks on a map and that
would be a really easy way to do that.
| | 03:36 | So those are the different
variables and how they work.
| | 03:39 | Now, up here in the Form tag, you'll notice
that we have this Attribute Method = Post.
| | 03:45 | I said I'd get back to that
and tell you what that means.
| | 03:47 | I'm going to change this to the
other possibility, which is Method = Get,
| | 03:52 | and this will give you an example of
what it does and it will show you how
| | 03:56 | this actually works.
| | 03:57 | So I'm going to go down here
and show you what it means.
| | 04:01 | Now, I'm going to press the back arrow
on the browser and I'm back in the form
| | 04:06 | and I have all this data in it.
| | 04:07 | If I just select Reload,
it will reload the HTML.
| | 04:12 | Oh! I didn't save it though.
| | 04:13 | So I need to save that up here,
there we go. That's saved now.
| | 04:16 | And I'll select Reload and leave all
my data in there, but it will reload the
| | 04:20 | form and so when I click on Send, it
will use the Get method instead the Post
| | 04:23 | method and that's the Get method.
| | 04:26 | So what the Get method does is it
passes all of this CGI information,
| | 04:31 | it passes it in the URL.
| | 04:33 | So the results of my form
are all up here in the URL.
| | 04:38 | See that? Name = Bill Weinman,
Email = ww@internet.com, etcetera.
| | 04:45 | All that is in the URL.
| | 04:46 | What this does is it allows the user
to actually bookmark these results.
| | 04:51 | So you can hit your Bookmark button and
get back to this page with those results
| | 04:56 | already submitted to the CGI program.
| | 05:00 | So that can be useful if you're using
CGI for navigation on a site and you want
| | 05:04 | to be able to bookmark certain pages
that you've got into by pressing a button.
| | 05:08 | Most of the time though, you're going
to want to use the Post method, and
| | 05:12 | the Post method works like this.
| | 05:15 | Type post up here, and click Save, and
I'll go back to my form and I'll click Reload.
| | 05:22 | That leaves the data in here.
| | 05:23 | I'm not actually resetting the form.
| | 05:24 | I would have to put my mouse up
here and press Enter to reset the form.
| | 05:27 | So we'll just hit Reload and click
Send and now it's using the Post method.
| | 05:34 | You'll see that there is no data up in the URL.
| | 05:37 | The way the Post method works,
it's kind of like an email message.
| | 05:40 | It's not exactly an email message.
| | 05:42 | It sent directly from the browser to
the server, but it gives all that data in
| | 05:46 | the body, rather than in the address.
| | 05:48 | The Get method gives it actually
in the URL, actually in the address.
| | 05:52 | So all that data is provided.
| | 05:53 | That program works exactly the same and
all this data is still available as CGI,
| | 05:58 | but it's just not there in the URL, and
so you can't bookmark the data. You can
| | 06:03 | only bookmark the location of the CGI.
| | 06:06 | So most of the time, you are going to
prefer to use the Post method. Now, the Action.
| | 06:09 | This is where you put the URL
of the CGI program on the server.
| | 06:14 | CGI script, they are sometimes called.
| | 06:16 | It's actually a program and it's
usually written in a scripting language like
| | 06:19 | Perl or PHP or something like that.
| | 06:21 | And that's the server side of it, and
so on the front end as opposed to the
| | 06:26 | back end, you need to just specify where that is
so that you know where you're sending your data.
| | 06:31 | So that is forms in a nutshell.
| | 06:33 | That is the different elements of the form.
| | 06:35 | You have the text elements, you have the
graphic box, and the radio buttons and buttons.
| | 06:41 | This is what the Method
means and the Action means.
| | 06:45 | So this is a good overview of how forms
work and ought to be enough for you to
| | 06:49 | be able to design some forms and again
while you're designing your forms, if
| | 06:53 | you would like to go ahead and put
this in the Action, you're welcome to do
| | 06:56 | that to test your forms using this very
little script on my server that doesn't
| | 07:00 | take up much resources.
| | 07:02 | Then when you're actually ready to put
your form into action and to use your
| | 07:06 | form for a specific purpose, you'll
need a script on the back end that does the
| | 07:10 | CGI, that either sends an email or does
whatever it is that you want to be done
| | 07:14 | with your form and so you need to have
somebody with some programming skills who
| | 07:18 | is capable of doing that.
| | 07:20 | I do have another course on lynda.com
that explains the process of installing a
| | 07:24 | script that's already written on a
server and like I said, this process is very
| | 07:28 | different for different servers and
so I can't cover all of the different
| | 07:31 | possibilities in the course.
| | 07:33 | But it gives you some good guidance for
how to do that if you want to check it out.
| | 07:36 | It's using Perl with CGI and it talks
about how to do that with Perl scripts,
| | 07:41 | and so that is forms and that's how they work.
| | Collapse this transcript |
| Using CGI with forms| 00:00 |
CGI stands for Common Gateway Interface
and it's the back end of how forms work.
| | 00:07 |
Strictly speaking, it's the protocol
that the web browser uses to talk to the
| | 00:11 |
server and to send it the data
that you filled in, in the form.
| | 00:14 |
On the back end, CGI programs can
be written in a number of languages.
| | 00:19 |
They are commonly written in Perl
or PHP or ASP or something like that.
| | 00:25 |
These are languages that
are commonly used with CGI.
| | 00:28 |
I have provided in the exercise
files a couple of CGI scripts.
| | 00:33 |
One is the test script that we
saw demonstrated in the last lesson.
| | 00:37 |
It's very simple and this is provided so
that you can install it on your server.
| | 00:43 |
Now, how to install it on your server
is going to depend a lot on your server
| | 00:47 |
and there is some guidance
available in another course that I have on
| | 00:50 |
lynda.com called Using Perl with CGI
but I have provided here for your use if
| | 00:55 |
you would like to use it.
| | 00:57 |
Likewise, there is another CGI script
here called mailform.cgi and this I have
| | 01:03 |
also provided for your use if you
have a way to use it and if you have the
| | 01:08 |
skills or have somebody with the
skills to install it on your server.
| | 01:11 |
It's a very simple mail-form script,
you can put in your email address up
| | 01:16 |
here and the mail too and it will very safely
and securely go ahead and send you an email.
| | 01:23 |
I just want to make a note that
there are other scripts out there called
| | 01:26 |
mailform.cgi that do have security issues.
| | 01:30 |
So if you go to install this on your
server, your ISP may complain that Oh!
| | 01:35 |
That's an insecure script.
| | 01:37 |
You can tell them this is not the one
that's insecure and they are welcome to
| | 01:40 |
take a look at it or even to communicate
with me, and we can set their worries at ease.
| | 01:45 |
Also, on my website at cgi.bw.org,
there are a number of other CGI scripts
| | 01:51 |
including a much more sophisticated mail-
form script which you can use as an alternative.
| | 01:56 |
Again, that's more complicated to
install, and you might need some other skills
| | 02:00 |
to install that, and you can certainly
refer to my Using Perl with CGI course
| | 02:04 |
for some guidance on how to do it.
| | 02:06 |
So again, this is about the back end.
| | 02:08 |
These are scripts that
you can use on the back end.
| | 02:12 |
The purpose of the test script is simply
to test your forms and also to test the
| | 02:16 |
process of installing scripts on
your server and the mail-form script is
| | 02:20 |
available, or should you want to use it
for sending yourself email with the form
| | 02:24 |
data whenever somebody
submits a form on your website.
| | 02:28 |
| | Collapse this transcript |
|
|
8. CSSIntroducing CSS| 00:00 | CSS stands for Cascading Style Sheets
and this is the technology that's used for
| | 00:05 | formatting web pages.
| | 00:07 | This chapter is about CSS.
| | 00:09 | It's not intended to be a
complete reference on CSS.
| | 00:12 | It's intended simply to expose you
to it and show you what it looks like
| | 00:15 | and roughly how to use it so that you can
apply it to some extent in your own documents.
| | 00:21 | For a complete reference, there is
another CSS course here on lynda.com in addition to
| | 00:27 | some other more task-oriented
courses that cover CSS and many references
| | 00:31 | available at other places as well.
| | 00:33 | So this is not intended
to be a complete reference.
| | 00:35 | It's simply intended to be an overview
and to give you enough information so
| | 00:39 | that you can start to use
CSS in your own documents.
| | 00:42 | This is an example of a document which
is rendered without CSS, and this is the
| | 00:47 | same document with CSS.
| | 00:49 | You can see we have accomplished the
same formatting in both of them, so we can
| | 00:52 | look at how that's done.
| | 00:54 | Here is the no CSS version. You will
see it has got the background color and
| | 00:58 | the text color specified here in the
body tag, and here in the CSS version,
| | 01:04 | it has the same thing specified, but they
are using a Style attribute instead and
| | 01:08 | this is CSS inside the quotes, inside the
Style tag that's written in the format of CSS.
| | 01:14 | So let's just take a look at how this works.
| | 01:16 | We'll go ahead and we'll change something here.
| | 01:18 | We'll change the font of the document.
| | 01:20 | We'll choose the Font Family
attribute, Font-Family, and we'll say that
| | 01:26 | that's going to be Tahoma.
| | 01:28 | Choose that Sans-Serif one.
| | 01:28 | It will look very different
from what we have here now.
| | 01:31 | I will Save that, and go ahead and
Reload in the browser, in the CSS Body Style
| | 01:37 | version, and go ahead and hit Reload
and there we have the same document and
| | 01:41 | it's simply changed.
| | 01:42 | It's using the Tahoma font
family now. So that's it.
| | 01:47 | That will change
everything in this body container.
| | 01:50 | So the body container, it comprises
the entire document beginning to end, the
| | 01:55 | content portion of the document.
| | 01:57 | So all of that is changed to the Tahoma font.
| | 01:59 | Now, let's say we just
wanted to change the h1 tags.
| | 02:02 | Well, we can create a little style
sheet inside this document and we can use
| | 02:09 | the Style tag for that.
| | 02:13 | This is different than the Style attribute.
| | 02:15 | The Style attribute applies to one
element in one place in a document, the Style
| | 02:19 | tag applies to the entire document.
| | 02:22 | So up here, we can say h1, and that
will select all of the h1 elements in
| | 02:27 | the entire document.
| | 02:29 | We can put a style inside these
brackets here and just say color:
| | 02:33 | #006 and that will make a blue color.
| | 02:39 | So I'll save that and now all of the h1
elements, which are these headings here,
| | 02:44 | will change to blue.
| | 02:45 | Go ahead and Reload, and there you see
that they are now these dark blue that
| | 02:49 | I specified as 006.
| | 02:51 | So that's how you can change just one element.
| | 02:53 | That's just little bit of a sneak peak
of the power of CSS that allows you to
| | 02:58 | change one tag throughout the document.
| | 03:00 | So every place that tag shows up
in the document, it will be changed.
| | 03:04 | This is what CSS does, this is how it
works, and so through the rest of this
| | 03:08 | chapter, we'll be looking at how this all works.
| | Collapse this transcript |
| Understanding levels of inheritance| 00:00 | CSS stands for Cascading Style Sheets
and the word CSS refers to inheritance,
| | 00:06 | and this is about how styles inherit
their properties from one another in CSS.
| | 00:11 | So let's take a look at an example here
and see how that works and what that means.
| | 00:15 | So here we have a document that's
formatted with CSS and here we have the same
| | 00:20 | document in the text editor and you will
notice that there aren't any styles in here.
| | 00:25 | All of the styles in this document
are defined in this external style sheet
| | 00:29 | right here, which is brought in with
this link tag, and so that's in the head
| | 00:34 | element and link tag has a rel
attribute which stands for relationship and that
| | 00:41 | is set to stylesheet.
| | 00:45 | And it has a type attribute, which is
set to text/css, and it has an h attribute,
| | 00:51 | which is the location of the file,
which is here in this external CSS file.
| | 00:56 | And the style sheet is in this external
file right here, which is also loaded up
| | 01:00 | in our text editor, and there it is.
| | 01:02 | You will see that it doesn't have a lot in it.
| | 01:04 | It's not a very complicated style sheet
and that's the style sheet that's used
| | 01:08 | to format this document here.
| | 01:10 | So we'll notice that the body style has
a background-color and a color for the
| | 01:15 | text and a font-family and the h1 style
has a different font-family and so that
| | 01:21 | sets the Verdana font for these
headings and the paragraph style has yet a
| | 01:25 | different font-family, which is
Tahoma or a backup of sans-serif.
| | 01:30 | Tahoma is loaded on the system and that's
this font here, which is used for the paragraphs.
| | 01:35 | We have a couple of other styles here.
We have our first style and a highlight
| | 01:40 | style and these use class selectors.
| | 01:42 | You will notice these selectors have a
little period before them and that makes
| | 01:47 | them class selectors and those
are selected in a different way.
| | 01:51 | In other words, these tag selectors,
these mean that this style will apply to
| | 01:55 | all the p tags in this context and the
h1 likewise for the h1 heading tags and
| | 02:01 | the body of course for the
whole body of the document.
| | 02:04 | So these are tag selectors
and these are class selectors.
| | 02:08 | class selectors are applied
using the class attribute.
| | 02:12 | Let's go ahead and apply this first
class to the first paragraph of the document
| | 02:15 | and when we do that, we'll see this
first paragraph will not be indented
| | 02:19 | anymore, because this sets the text-indent to 0.
| | 02:22 | So what we are demonstrating here is
part of the inheritance, the cascading of
| | 02:27 | the Cascading Style Sheets.
| | 02:28 | What will happen is that this
paragraph will first be formatted by the body
| | 02:32 | because the paragraph is inside the
body and then it will be formatted by the
| | 02:38 | paragraph style right here with this
font-family and line height and text
| | 02:43 | height, and we'll see that's already
applied here and then after all of those
| | 02:47 | have been applied,
it will apply this first style.
| | 02:50 | So it will take the text-indent away so
that document won't have any indent for
| | 02:54 | this particular paragraph.
| | 02:56 | So let's go ahead and apply that style
to that paragraph, which is right there,
| | 03:00 | and we'll say class="first" and that
class attribute is available for most tags
| | 03:08 | in XHTML and HTML and that applies
a class based on the class selector.
| | 03:13 | So we don't put the period here, but we
just use the name of it, so it's first.
| | 03:18 | If I go ahead and save this and
reload the document, you will see that this
| | 03:23 | paragraph is no longer indented.
| | 03:26 | So the p style is still applied.
| | 03:28 | We have that line height.
| | 03:30 | We have the font and all of that.
| | 03:32 | The body style is still applied,
because the body is first in the hierarchy.
| | 03:36 | Let's take a look at the hierarchy here.
| | 03:38 | You can see the body is first, because
that encompasses the entire document and
| | 03:42 | then the h1 is applied on top of that,
so it has that color from the body but
| | 03:48 | it has the font from the h1 and the p
style is applied on top of the body,
| | 03:53 | not on top of the h1 because they are
next to each other in the hierarchy but
| | 03:57 | it's applied on top of the body because the
body is first in the hierarchy and then the p.
| | 04:02 | And then this class style
is applied on top of it.
| | 04:06 | This first style is applied on top of
what's already defined for the p because
| | 04:09 | that's later in the hierarchy.
| | 04:11 | We are applying it just to this one
paragraph, but not to this other one, and so
| | 04:15 | that's the way that it's working here.
| | 04:16 | We have the body style and then the
paragraph style and then the first class is applied.
| | 04:24 | Let's look at another example, we'll
use this highlight style, we'll see that
| | 04:27 | the highlight sets the font-weight to
bold and it sets the background-color
| | 04:31 | to this other color.
| | 04:32 | So it will look like a
highlight in the document.
| | 04:34 | We will go ahead and
highlight just a couple of words here.
| | 04:46 | So the span tag is used for
applying class to an inline element.
| | 04:50 | It's an inline tag and it's a container.
| | 04:53 | So you put content inside of it.
| | 04:55 | It has a begin tag and an end tag
and it's just there for applying class.
| | 05:00 | That's really all that the span tag is for.
| | 05:02 | It doesn't have any properties of its
own and so this allows us to apply a class
| | 05:07 | to an inline object and this text
here is inline with this paragraph.
| | 05:11 | And so when I save this, it will apply
that highlight class on top of the class
| | 05:17 | already applied to the paragraph.
| | 05:19 | And so it will use the same font and
it will use the color from the body.
| | 05:24 | Remember that the color of the text is
set in the body and so this is definitely
| | 05:28 | after that in the hierarchy and then it
will apply a background-color on top of
| | 05:33 | that and a font-weight, so it won't
change the font but it will just use a bold
| | 05:37 | version of this existing font.
| | 05:38 | So let's go ahead and
reload this in the document.
| | 05:41 | You will see, there we go.
| | 05:42 | It's bold and it's highlighted and
everything else is the same because it has
| | 05:48 | inherited all of those other styles
because that's where it is in the hierarchy.
| | 05:52 | And so this is how inheritance works
in CSS. The C in CSS is for cascading,
| | 05:58 | Cascading Style Sheets and
cascading refers to inheritance.
| | 06:02 | It refers to how the styles are
inherited from one another and applied on top of
| | 06:07 | one another within the
hierarchy of the document.
| | Collapse this transcript |
| Learning CSS syntax| 00:00 | In this chapter, we are going to look at
the syntax of CSS so you'll know how to
| | 00:03 | read the CSS that you see and
you'll be able to write your own CSS.
| | 00:08 | So here we have a document that is
formatted with CSS and here we have that same
| | 00:12 | document in the editor and
here we have the CSS style sheet.
| | 00:16 | You'll see we are using an external
style sheet that's called in right here and
| | 00:21 | there's the style sheet there.
| | 00:23 | This is the same style sheet that we
are using throughout this chapter and
| | 00:27 | so you see it is possible and
common to use an external style sheet for
| | 00:31 | multiple documents.
| | 00:33 | It makes it very easy to keep track
of the styles and the formatting across
| | 00:37 | different documents.
| | 00:39 | Before we get into the syntax of the
CSS itself, there's one subject that I'd
| | 00:43 | like to cover in the XHTML
on how the styles are applied.
| | 00:47 | There are two special tags in
XHTML and HTML called span and div.
| | 00:52 | Div is a block level element
and span is an inline element.
| | 00:58 | So they are used like this.
| | 00:59 | They don't have any properties of their own.
| | 01:03 | They are used for applying styles.
| | 01:05 | So if I say div over here and I say
style equals color blue and then I close
| | 01:14 | that down here with the end tag for div.
| | 01:23 | I'll go ahead and I'll save that.
| | 01:25 | Now this section of the document will
come up with blue text whereas the rest of
| | 01:29 | the document will have the text that's
defined in the body element in the CSS.
| | 01:34 | So I'll go ahead and I'll
reload this. There you have it.
| | 01:37 | This section is now blue and the rest of
the document still has the color that's
| | 01:40 | defined in the body element of the CSS.
| | 01:43 | So that's how div works.
| | 01:44 | Div is for applying style to a
section of a document at the block level.
| | 01:49 | In other words, these are block level elements.
| | 01:51 | The <h1> and the paragraph
are block level elements.
| | 01:54 | So I need a block element to wrap
around them so that I can have blocks
| | 01:59 | inside of that tag.
| | 02:01 | Likewise, if I wanted to do the same thing
but on the inline level, I would use <span>.
| | 02:15 | So <span> is an inline level element
that has no properties of its own but is
| | 02:20 | used for applying style.
| | 02:22 | So here we have span and a style of color red.
| | 02:24 | So the text of this word, originally,
will be red, whereas the rest of this
| | 02:30 | paragraph will still have the color
that it's inherited from this <div> element
| | 02:33 | that we just inserted.
| | 02:34 | So I'll go ahead and I'll save that
and we'll see that the word, originally,
| | 02:38 | will now turn up red and there we have it.
| | 02:41 | You'll notice that they inherit just
as you would expect them to because the
| | 02:47 | <div> element is outside and
the <span> element is inside.
| | 02:51 | So <span> inherits its properties
first from the paragraph, which is just
| | 02:55 | outside of it and then from the
<div>, which is outside of that.
| | 02:58 | So it still follows the same hierarchy
as rest of the rules for applying CSS.
| | 03:04 | So let's take a look at the style
sheet itself and we'll understand some of
| | 03:08 | the elements of how the style sheet works
and how the syntax of the style sheet works.
| | 03:14 | Here we have the words body and
h1 and p, and these are selectors.
| | 03:17 | So the selector is the first thing that
you'll see in a style in the style sheet.
| | 03:23 | There are three different kinds of selectors.
| | 03:25 | This is a tag selector and this is a
tag selector and this is a tag selector.
| | 03:29 | So these are names of tags and you don't
see any special punctuation around them.
| | 03:34 | When you see a period before the name,
as in the case of .first, and in the case
| | 03:38 | of .highlight, those are called class
selectors and those are applied using the
| | 03:44 | class attribute in XHTML.
| | 03:47 | So here, instead of using style, if I
simply said class equals highlight,
| | 03:56 | that selects the class style
using the class selector.
| | 04:00 | So I'll go ahead and save
that and we'll look at in CSS.
| | 04:03 | So we have this highlight
selector with the dot before it.
| | 04:06 | That makes it a class selector.
| | 04:08 | So we use the class attribute to select that.
| | 04:11 | So class equals highlight and
the class attribute selects that.
| | 04:17 | Notice that there's no period here.
| | 04:18 | We don't use the period in
the name on the XHTML side.
| | 04:22 | We just say the word highlight.
| | 04:24 | The period is used in the CSS just
to say that it's a class selector.
| | 04:28 | I've saved that and I'll go ahead and
reload in the browser and we see that now
| | 04:32 | it has that bold font and
the highlighting behind it.
| | 04:37 | In fact, if we wanted to,
we could apply the class selector to
| | 04:43 | any element in the HTML.
| | 04:46 | We could apply it to this <a>. We can
say class equals highlight and now the
| | 04:54 | anchor link will be highlighted in the
HTML, see there, or we could apply it
| | 05:02 | even to the entire
paragraph if we wanted to.
| | 05:10 | And then the entire paragraph would be highlighted
like that and that's a block level, so it highlights
| | 05:17 | all the way from margin to margin
which is how block levels work.
| | 05:22 | So that's the class selector.
| | 05:23 | Like I said, there are three different
types of selectors so we've seen two of them.
| | 05:26 | We've seen the tag selector and
we've seen the class selector.
| | 05:29 | Let's take a look at the third type,
which is called the id selector.
| | 05:39 | So here I've created a style and it's
called whois and it uses an id selector.
| | 05:44 | The id selector uses a pound sign
where the class selector used the period.
| | 05:50 | So that's the pound sign or the hash
mark, the tic-tac-toe looking thing that's
| | 05:53 | in the Shift+3 on my keyboard.
| | 05:56 | So that's the id selector.
| | 05:58 | So I'll go ahead and I'll save
this and we'll go into the XHTML.
| | 06:02 | Take this highlight out there.
| | 06:04 | It doesn't get too confusing.
| | 06:07 | So you see here we have
style color equals blue in div.
| | 06:10 | I'm going to go ahead and I'm going
to say id equals whois and this is how
| | 06:15 | this is typically used. I'll save this.
| | 06:17 | So now, this entire section here
with the div is going to use this whois
| | 06:23 | selector and that is an id selector.
| | 06:25 | Now the major difference between an id
selector and a class selector is that a
| | 06:30 | class selector can be used over and over
whereas an id selector can only be used once.
| | 06:35 | So I'm really only allowed to use
this at one place in a document.
| | 06:39 | If I wanted another div around this
other section here, I would have to name
| | 06:44 | that something else.
| | 06:46 | So this is used for marking up
an entire section of a document.
| | 06:49 | It might have like a main article,
it might have a sidebar, it might have
| | 06:53 | something else and you can separate
those sections of the document with id
| | 06:58 | selectors and that allows you to apply a
style to that whole section of the document.
| | 07:03 | We'll see a number of examples of this when we
look at building a website in the next chapter.
| | 07:07 | But let's just take a look
at how this works for now.
| | 07:10 | We've set up this id selector with the
class name of whois and here it is,
| | 07:14 | id whois with the id selector in the CSS.
| | 07:18 | I'll go ahead and reload the document
and you see that this is all blue,
| | 07:22 | just like we expected because
we have set it to be blue.
| | 07:25 | We can make it something else just so
you can see it and say 606 and it will be
| | 07:31 | a sort of a purple color.
| | 07:33 | We'll save that and go ahead and reload in here.
| | 07:37 | So that's sort of a burgundy color there.
| | 07:39 | That's how the id selectors work.
| | 07:41 | So those are the selectors and
there are three different kinds.
| | 07:45 | Then there's a pair of curly braces and the
curly braces actually delimit the style itself.
| | 07:51 | So all of this is within the style
and it's within these curly braces.
| | 07:55 | So that's part of the body style.
| | 07:57 | Then inside of the curly
braces, we have the style itself.
| | 08:00 | Now the style has two parts.
| | 08:03 | It has the property part, which is to
the left of the colon, and to the right of
| | 08:07 | the colon, it has the value.
| | 08:09 | So each of these styles, there is a
background-color property, a color property,
| | 08:13 | font-family property and the value
there is helvetica, the value here is #630,
| | 08:19 | the value here is #ffc.
| | 08:21 | So we have the property and the value,
property-value, property-value, and then
| | 08:27 | each property-value
combination is separated by a semicolon.
| | 08:31 | So you have a semicolon there and a
semicolon there and a semicolon there.
| | 08:35 | Now, technically, the semicolon is
not required on the last property-value
| | 08:39 | combination, but I usually include it
when I'm writing style sheets like this
| | 08:44 | and the reason is that it's just hard to
keep track of which is the last thing.
| | 08:49 | If I omit it here and I decide I want to
add a property after it and I say color
| | 08:54 | equals green then it's just not going to work.
| | 08:58 | You are not going to see the color equals green.
| | 09:00 | You also won't see the indent.
| | 09:01 | I'll go ahead and I'll save that and
I'll show that to you. This is an error.
| | 09:05 | So the reason for that is
that I eliminated this semicolon.
| | 09:09 | I didn't use it as the last one and then I
added something and I forgot to put it in there.
| | 09:14 | So if I put this back in, then we'll
see the color will become green and we'll
| | 09:19 | have the indent again.
| | 09:22 | So that's why I go ahead and I use
them anyway, even though they are not
| | 09:24 | required on the last element. They are
technically supposed to be separators.
| | 09:30 | Most people will use them as
terminators instead. In other words, they'll put
| | 09:33 | them on every line and that's the reason
for that because otherwise, you have to
| | 09:37 | keep track of it and it's just too hard to do.
| | 09:40 | So there you have it.
| | 09:41 | That is the syntax of the CSS.
| | 09:45 | You have the selector, you have the
curly braces, you have the properties and
| | 09:49 | values, you have your semicolons.
| | 09:51 | I just want to cover one other thing that's
easy to get wrong and I'm going to do this here.
| | 09:57 | I'm going to say in this div, instead of
saying id equal whois, and I'm going to
| | 10:01 | go ahead and put in a style using the
style attribute and I'm going to say color
| | 10:06 | equals green and we are going to try
and set the color here and it's not going
| | 10:11 | to work because I've made a mistake.
| | 10:12 | I made a very, very common mistake.
| | 10:15 | I am going to ahead and I'm going to
save that and we'll load it up over here
| | 10:18 | and we'll see that the color is not green.
| | 10:21 | Can you see the mistake? Aha!
| | 10:22 | I used an equal sign instead of a colon.
| | 10:25 | The colon and the space isn't
required but I like putting a space after a
| | 10:29 | colon and most people do.
| | 10:31 | Not everybody though.
| | 10:32 | You won't always see the space.
| | 10:33 | And I made this mistake because I'm so used
to in HTML and in XHTML typing an equal sign.
| | 10:38 | So often times, I'll set up a style
in my XHTML like that and I'll use an
| | 10:44 | equal sign and I won't notice and I'll save
it and I'll load it up and it won't be working.
| | 10:48 | I'll say why isn't that working and
sometimes it will take me a while before
| | 10:51 | I notice that I use an
equal sign instead of a colon.
| | 10:53 | So I'm just warning you.
| | 10:55 | Then you'll see that this works now.
| | 10:56 | I'll go ahead and load
that up and now it's green.
| | 10:58 | It works with the colon;
| | 11:00 | it does not work with the equal sign.
| | 11:02 | So that's just something that you can
be on the watch out for and it's a little
| | 11:05 | gotcha that happens a lot when you are
writing the CSS in the XHTML file using
| | 11:10 | the style attribute like that.
| | 11:12 | So there you have it.
| | 11:13 | That's the syntax of CSS.
| | 11:15 | That's how CSS works.
| | 11:16 | We also talked about the <div> and the
<span> tags, which are really useful for
| | 11:20 | applying style in a document.
| | Collapse this transcript |
| Using units of measure in CSS| 00:00 |
In this lesson we're going to talk
about units of measurement in CSS.
| | 00:04 |
CSS uses units of measurement to say
how big things are going to be, how far
| | 00:08 |
apart things are going to be.
| | 00:09 |
There are actually a lot of units of
measurement available, and we're going to
| | 00:12 |
talk about just a few of the major ones.
| | 00:14 |
For a complete reference check
with any CSS reference or with the CSS
| | 00:18 |
course here on Lynda.com.
| | 00:20 |
So here we have a document that's
formatted with CSS and this is the Style Sheet
| | 00:23 |
that's being used for this document.
| | 00:25 |
We see that we have a few things in
here that are measured already, especially
| | 00:28 |
in the P style, for the paragraph.
| | 00:31 |
We have line-height, which is set to percent.
| | 00:33 |
So that's the percent of the
size of the font in the paragraph.
| | 00:38 |
So it's set for 140%.
| | 00:40 |
If we change that to say 200%, you'll
see that it changes down here in the
| | 00:44 |
document for all the paragraphs.
| | 00:46 |
We'll Save that and Reload, and now
we have a larger separation between the
| | 00:51 |
lines, and you'll see that the bottom
of this line is about twice the height of
| | 00:55 |
the line from the bottom of this line.
| | 00:58 |
Likewise, we have the text-indent,
which is set in ems, two ems.
| | 01:01 |
Em refers to the width of the M in the font.
| | 01:06 |
So here we have an M, right there.
| | 01:09 |
So this indent is
supposed to be twice that width.
| | 01:11 |
It looks like it's a little bit more.
| | 01:13 |
One of the things that happen with
typography-based measurements on a screen is
| | 01:17 |
that the screen itself is made up of pixels.
| | 01:20 |
So any typography-based measurement
is going to have to be translated into
| | 01:24 |
pixels, and this would go also for
inches and centimeters and things like that.
| | 01:29 |
It has to get translated into pixels.
| | 01:31 |
So it's going to depend on the
dimensions of the pixels in your
| | 01:34 |
particular monitor.
| | 01:35 |
So it's always going to be a little bit off.
| | 01:38 |
So that's just the fact of life
in using raster-based media with
| | 01:43 |
something that's measured in
absolute measurements like inches or ems or
| | 01:46 |
points or anything like that.
| | 01:48 |
So that's the em measurement.
| | 01:50 |
There's also an ex measurement, which
refers to the height of a lowercase x. So
| | 01:56 |
I can say my line-height here is going to
be say 3 exes, 3ex, like that. I'll Save.
| | 02:04 |
So that's to height-based
measurement and it's based on the height of the
| | 02:07 |
lowercase letters in the document.
| | 02:09 |
I Reload, and there we have, the
space is set to one, two, three times the
| | 02:14 |
height of a lowercase x.
| | 02:16 |
So let's go ahead and set
the size of the font in points.
| | 02:20 |
Fonts are typically measured in points,
and we'll go ahead in here and we'll
| | 02:24 |
say font-size, and 12 points is the
default typically, so I'm going to go ahead
| | 02:30 |
and make it 14 points.
| | 02:32 |
So I'll make it a little bit larger.
| | 02:33 |
pt stands for points.
| | 02:36 |
I'll save and I'll reload over here in the
browser, and we see that the text is now larger.
| | 02:42 |
All of the font-based
measurements have been updated as well.
| | 02:47 |
Finally, let's talk about
doing things in size of pixels.
| | 02:50 |
I just want to say that because a
computer screen is a raster-based medium, when
| | 02:55 |
you're measuring things for a
computer screen, pixels are what matters.
| | 03:00 |
Now, there's two ways to look at this.
| | 03:01 |
One is if you want a page to look
exactly how you want it to look, measure
| | 03:06 |
things in pixels and it
will come out pretty close.
| | 03:08 |
It's not always going to be exactly the
same on everybody's monitor, and there
| | 03:11 |
is reasons for that, but it
will be really, really close.
| | 03:15 |
When you're measuring things that are
fix number of pixels and size, things like
| | 03:18 |
the dimensions of an image,
they will always be exact.
| | 03:21 |
But things like font-size tend not to
be exactly the same from device to device
| | 03:25 |
when they're measured in pixels.
| | 03:27 |
There are reasons for that, and it has
to do with how fonts are measured and
| | 03:30 |
how they're rendered.
| | 03:31 |
But the point is that if you care
about how things are going to be relative
| | 03:36 |
to fixed pixel sized objects on the screen,
you want to use pixels in your measurements.
| | 03:41 |
Now, the other side of this coin is
that for people who like to change the size
| | 03:45 |
of the fonts on their computer screen,
like older people who might have trouble
| | 03:49 |
seeing, they tend to increase the size
of the fonts on their computer screen.
| | 03:54 |
If you measure your fonts and your
Style Sheet in exact pixels, they're not
| | 03:57 |
going to be able to do that anymore.
| | 04:00 |
So that's just another
consideration to think about when you use the
| | 04:03 |
pixel measurements.
| | 04:04 |
Now that said, a lot of people like
the pixel measurements because it allows
| | 04:08 |
them to exert a lot of control
over how their page is rendered on the
| | 04:12 |
browsers that are viewing their page, and
there's something to be said for that viewpoint.
| | 04:15 |
So we're going to look at that.
| | 04:16 |
I'm going to go ahead and I'm going to
change this to 14 pixels instead of 14 points.
| | 04:21 |
You'll see how that looks
different on the screen here.
| | 04:24 |
I'm going to Save and go ahead and
Reload, and there's the 14 pixels version
| | 04:28 |
rather than the 14 points version.
| | 04:31 |
Likewise, my indent here, I can measure
that in pixels, I can go ahead and say
| | 04:35 |
200 pixels for that and save that and Reload.
| | 04:40 |
We'll see that we get this nice big
200-pixel indent there for the first
| | 04:44 |
lines of our paragraphs. There you have it.
| | 04:46 |
Those are the units of measurement in CSS.
| | 04:49 |
Those are the most common ones.
| | 04:50 |
There are a few others available.
| | 04:52 |
For a complete reference you can
check with any CSS reference or the CSS
| | 04:55 |
course here on Lynda.com.
| | 04:58 |
| | Collapse this transcript |
|
|
9. Creating a Simple Web Page from ScratchComparing table layout and CSS layout| 00:00 | In this chapter, I present a complete
web site for the purpose of demonstrating
| | 00:04 | the techniques covered in this course
in the context of a real-world project.
| | 00:09 | The web site uses tables for layout.
| | 00:12 | Because this course is about XHTML and
HTML and because it is not about CSS,
| | 00:17 | I chose to avoid CSS for the layout in
order to show how to use XHTML for this purpose.
| | 00:24 | Keep in mind that this is not
considered best practice in today's world.
| | 00:28 | Using CSS for layout is commonly
considered a better choice, and I strongly urge
| | 00:33 | you to learn how to lay out your sites using CSS.
| | 00:37 | On the other hand, understanding
legacy technologies is generally a valuable
| | 00:41 | and practical pursuit,
| | 00:42 | if for no other reason than there is a
lot of legacy technology out there and
| | 00:47 | you will likely encounter it in your work.
| | 00:49 | How often you encounter a legacy
technology will depend on how popular that
| | 00:53 | technology was, or is, and
how recently it became obsolete.
| | 00:58 | In the case of HTML table layouts, this
has been a very popular technology, and
| | 01:03 | its obsolescence is relatively
recent, and it's still in wide use today.
| | 01:08 | At the end of this chapter, I present
an alternate version of this same site
| | 01:13 | using CSS for layout instead of tables.
| | 01:16 | This is discussed in detail in my
course CSS Positioning Best Practices here in
| | 01:21 | the lynda.com Online Training Library.
| | Collapse this transcript |
| Exploring the finished web site| 00:00 | So now we've learned some XHTML and
some CSS, and let's put it to use.
| | 00:06 | What we have here is a website
that has been provided for us.
| | 00:11 | It's been designed, all the assets have
been created, all the images have been
| | 00:15 | built, and they are all sitting
in folders in our Exercise Files.
| | 00:19 | Our task is to build a website that
looks exactly like this using the techniques
| | 00:25 | that we have learned.
| | 00:26 | So this website is small. It has four pages.
| | 00:30 | They all have this basic layout, with
main content on the left and sidebar
| | 00:34 | content on the right.
| | 00:36 | This page here has got some
products on it, and this page here is about
| | 00:40 | the surfing lifestyle.
| | 00:41 | This page here has an
embedded YouTube video on it.
| | 00:45 | So our task is to duplicate this
website with what we've been given.
| | 00:49 | So we've been given all of these images.
| | 00:51 | We've been given all of this text, and we've
been given an example of what it looks like.
| | 00:55 | So this is not unlike how
oftentimes I'll get a job where the designers
| | 01:00 | have done their bit and now they want me to
put all of this together and make it work.
| | 01:04 | So let's take a look at the Exercise
Files folder and see how this is organized.
| | 01:09 | Here we have in Chapter 09 of our Exercise
Files, we have a number of different folders.
| | 01:15 | The complete-site is in folder number 01,
and so that is with Chapter 09, Lesson
| | 01:19 | 01, which is this one here.
| | 01:21 | So that has the complete-site, which
we're looking at right here, with all of
| | 01:25 | these pages and links and such in it.
| | 01:28 | Then each of the other lessons has its
own Exercise Files, so there is Lesson
| | 01:32 | 02, which is where we'll begin building
the header, Lesson 03, we'll build the
| | 01:36 | Contact menu, lesson 04,
we'll build the main menu.
| | 01:39 | So each of these has its own purpose.
| | 01:42 | Each of these has a beginning place
and an ending place, like here we have
| | 01:45 | this beginning-html.
| | 01:47 | So what you'll do is you'll save this
as heading.html, and then by the time
| | 01:52 | you're done with the lesson,
it should match the ending.html.
| | 01:55 | Likewise, in the CSS folder
you'll have a beginning and an ending.
| | 01:59 | You'll save the beginning as main.css.
| | 02:02 | In the lesson, I'll tell you all of
this so you don't have to memorize it or
| | 02:05 | write it down right now.
| | 02:06 | I'll guide you along.
| | 02:07 | I'll say okay, now we're
going to save as main.css.
| | 02:11 | So the idea is for you to follow
along with me, and by the time this is all
| | 02:16 | done, at the end of the chapter, you
will have built this website in your
| | 02:20 | machine, with your own text
editor and your own tools.
| | 02:24 | I want to thank James Williamson who
designed the original version of this
| | 02:28 | website and wrote the clever copy you see here.
| | 02:32 | So we can put that into practical
use and see how it all goes together to
| | 02:35 | build a complete website.
| | Collapse this transcript |
| Building a document header| 00:00 | Now, we are going to begin building the
website and all of the graphics and all
| | 00:05 | of the design has already been provided
for us. Our task is to take the assets
| | 00:09 | that we've been given and create
a website that looks like this.
| | 00:12 | As a beginning place, we have our
exercise files and in the chapter 02-header folder,
| | 00:20 | we have a beginning and an ending.
Ending is what the file is supposed
| | 00:24 | to look like when we are all done and
we also have a beginning and an ending
| | 00:27 | CSS and these are loaded up in our editor.
| | 00:31 | So, the first thing that we're going to
do is we're going to save both of these
| | 00:35 | files as a different name.
| | 00:37 | The point of this is so that we can do
our edits and work on the file and not
| | 00:42 | write over the original files that came
with the exercise files, so that we have
| | 00:46 | our beginning place still
if we need to go back to it.
| | 00:49 | So, the first thing we are going to do
is save this file as, I'm going to call
| | 00:52 | this one header.html because over the
next couple of lessons we are going to be
| | 00:56 | building the header portion of the website
and for the CSS file, we'll do a Save As.
| | 01:03 | CSS file is going to be called main.
css because that's how it's referenced
| | 01:08 | in all the HTML files.
| | 01:10 | So, all the HTML files can share
this main.css and in that way we are not
| | 01:15 | overwriting our original files and we
can go back, if we need to, we can do the
| | 01:18 | exercises over again, if we need to and we
still have our starting place. All right.
| | 01:23 | So let's get started.
| | 01:24 | The first thing we are going to do
here in the header.html file is change
| | 01:28 | the title and it will be Welcome
to Groundswell and we are going
| | 01:35 | to link in the external CSS.
| | 01:52 | So, this is the Link tab.
| | 01:54 | We've seen this before, because in the
head section of the XHTML, attributes are
| | 01:59 | href, which gives the location of
the CSS file, and the rel, which is the
| | 02:04 | relationship and that's called style
sheet and the type, which is text/css.
| | 02:09 | We have this little shorthand for
closing off a tag that does not have an end tag
| | 02:13 | and we'll go ahead and save
this and load it up in the browser.
| | 02:19 | We'll go here and we'll drag it from
the Explorer window and there we have it,
| | 02:29 | Welcome to Groundswell, and the content here.
| | 02:31 | Now, let's go ahead and add
some style using the style sheet.
| | 02:35 | First thing we are going to do in the
style sheet is we are going to put in our
| | 02:38 | global default styles.
| | 02:40 | So, we are going to start with a
comment. I always like to have comments
| | 02:43 | separating the sections of the
CSS, call this global styles.
| | 02:50 | Comments in CSS are separated
by these /* and */.
| | 02:57 | This syntax is taken from the C programming
language where comments are done like that.
| | 03:01 | Go ahead and start with the body.
| | 03:02 | I'll like to put a few things in the body.
| | 03:07 | I'll like to give it a default font family,
even though it will probably never be used.
| | 03:13 | It's just a good practice.
| | 03:21 | In this case, we'll give it a sans-
serif font family and we'll set up the backgrounf.
| | 03:39 | And the background here has two parts to it.
| | 03:42 | So, we're using the shortcut in CSS.
We are doing both the background color and
| | 03:47 | the background image at the same time
and so we have bbb, which is a light gray
| | 03:53 | color that kind of matches the image itself.
| | 03:56 | If for some reason the image can't load
or somebody has got images turned off on
| | 03:59 | the browser, it'll still look reasonable.
| | 04:01 | And the url for the page background
graphic, you will notice that it starts
| | 04:06 | with these two dots.
| | 04:07 | That means go up a directory.
| | 04:08 | The reason for this is that in the
external style sheet, the image location is
| | 04:14 | relative to the style sheet itself.
| | 04:16 | It's not relative to the document and
so if we look at our site organization,
| | 04:21 | here we have the document itself, this
header.html, and there is a CSS directory
| | 04:26 | which is where the CSS file is and
then there is an images directory which is
| | 04:32 | next to the CSS directory in the tree.
| | 04:34 | So, from the CSS directory, you need
to first go up a level and then go back
| | 04:40 | into that images in
order to find the banner.jpg.
| | 04:43 | So, that syntax looks like this with
the dot, dot and then the path from there.
| | 04:49 | So, first it goes up a directory and
then it goes into the images directory and
| | 04:52 | then the page background.
| | 04:54 | We'll set Margin and Padding to zero,
and this is the syntax that says it's a
| | 05:03 | shortcut for all the margins, top, right,
bottom, left setting that to zero and
| | 05:07 | likewise for the padding.
| | 05:08 | What this does is it allows us to have
everything butt up against the borders
| | 05:12 | of the browser itself.
| | 05:14 | If you look at the website, the top of
the website is all the way up at the top
| | 05:17 | and then the actual
content is centered on the page.
| | 05:21 | This allows us to have the border and
the margin set to zero, so there is no
| | 05:25 | space there at the top.
| | 05:26 | Then we'll save this and we'll
move on like that, save as I go along.
| | 05:32 | We're going to do some default margins for all
of the text block elements like p and h1 etcetera.
| | 05:49 | And this is another CSS shortcut,
when you just have two values in here.
| | 05:53 | Remember normally you put in four values,
which would be top, right, bottom and left,
| | 05:58 | which goes clockwise around the circle.
| | 06:00 | But if you just put in 2, then the
first one is the top and the bottom and the
| | 06:04 | second one is the right and the left.
| | 06:06 | So, we have 1ex top and bottom, and 1em
right and left and that gives us just a
| | 06:10 | nice little default and you
will see that looks like this.
| | 06:16 | Again, we are not going to use these
defaults but it's nice to have them just in case.
| | 06:20 | So, it gives us just a nice little
spacing at the top and spacing at the left
| | 06:24 | and there is our page background, that
lovely little flowered pattern. Go ahead
| | 06:28 | and enter some more defaults.
| | 06:48 | So, this is the default for all the
tables and again, this is going to be
| | 06:51 | a table-based layout.
| | 06:53 | You'll notice the border-collapse,
this is the one that we haven't seen
| | 06:55 | before, border-collapse.
| | 06:56 | It changes the table layout model.
| | 06:58 | There are two layout models.
| | 07:00 | There are border-collapse to
collapse and border-collapse to separate.
| | 07:03 | Separate is the default and
interestingly that will work in all browsers
| | 07:08 | except Internet Explorer.
| | 07:10 | If we leave that to its default
value or set it to separate, Internet
| | 07:13 | Explorer will break up some of our
tables, not all of them, the layout will
| | 07:17 | look disjointed and so we just set it
to collapse, which worked in all the
| | 07:21 | browsers that I have tested.
| | 07:22 | Again, like all of this, you want to test
this in any browsers that matter to you.
| | 07:25 | I'll go ahead and save and go on.
| | 07:30 | I'm going to continue to format the tables.
| | 07:33 | I'm going to set our
defaults for the rows and columns.
| | 07:42 | And again, because we are doing
layout with tables, we want to have some
| | 07:45 | reasonable defaults for
all this. margin 0, padding 0.
| | 07:48 | That allows us to have content that
goes up against the edges of the table cells,
| | 07:51 | like we need to do for things
like these images, which if you remember,
| | 07:56 | this is one image and this is a separate
image here and it's in a separate table cell
| | 08:00 | and then our content is down here,
and we want all of this to butt up to
| | 08:03 | each other without separation.
| | 08:05 | And so that margin zero and
padding zero in the table cells.
| | 08:09 | That allows us to do that.
| | 08:11 | So that's our defaults and in the next
lesson, we are going to start putting
| | 08:15 | in the header content.
| | Collapse this transcript |
| Placing a banner and a contact button| 00:00 | Continuing with the development of our
example website, in this lesson we are
| | 00:05 | going to insert the
header and the contact button.
| | 00:08 | So looking at the browser here,
basically what we are going to do is the top
| | 00:13 | half of this table cell here
with the Contact button in it.
| | 00:15 | That's what's called a Mail To link.
| | 00:18 | So when you click on this, it would
open your mail client and allow you to
| | 00:21 | send an email message.
| | 00:23 | It's a simplest form of a contact button.
| | 00:25 | So let's get started.
| | 00:27 | We have here beginning.html and our
beginning.css and this is in the 03-Contact
| | 00:33 | folder of the Chapter 09 Exercise Files.
| | 00:37 | The first thing we are going to
do is we are going to Save As.
| | 00:42 | We'll save as heading.html.
| | 00:45 | This way we don't overwrite our Exercise
Files and do the same thing with the CSS.
| | 00:54 | Save that as main.css, because that's
the name that gets used here in the XHTML.
| | 01:02 | Now we'll go ahead and
enter some content in here.
| | 01:05 | We are going to create the outer table
and we are going to create the table cell
| | 01:08 | for the Contact button.
| | 01:17 | So this table tag has an id
attribute and that creates a CSS id selector.
| | 01:26 | I'd like to close my
containers when I start them.
| | 01:39 | So this row has one cell in it.
| | 01:41 | So I've opened it and closed it and
you'll notice that for my selectors,
| | 01:45 | I'm using what's called camelCase.
| | 01:47 | And this is actually a very good
choice for CSS, because CSS doesn't allow
| | 01:51 | dashes and I happen to be one of those
people that dislikes typing underscores.
| | 01:55 | I do it when I have to and I have too
often, because other people use them.
| | 01:58 | So I like camelCase for CSS and it
allows me to have several words as very
| | 02:03 | nice descriptive selectors and so
camelCase usually uses a lowercase to begin
| | 02:09 | and it uses uppercase letters at the
beginnings of second and subsequent words.
| | 02:13 | So I have outerTable, I have
contactButton and this is what's called camelCase.
| | 02:17 | Go ahead and create a div.
| | 02:20 | We'll talk about all this
organization in a moment here and the anchor tag.
| | 02:35 | Ending my anchor tag on the second
line and that allows me to put it right up
| | 02:40 | against the image and we talked
about that in our chapter on images.
| | 03:01 | You'll notice I inserted width and
height attributes for the image and I have
| | 03:06 | those numbers already, because
all these assets were given to me.
| | 03:09 | So I have those in my notes.
| | 03:11 | It's a really good idea to always
include the width and height, if you can.
| | 03:15 | That allows the browser to layout
the page before it downloads the assets
| | 03:19 | from the server so that the page
loads without blinking and moving things
| | 03:23 | around as it goes along.
| | 03:24 | It's just a nicety and I closed the
image on the next line and closed the anchor
| | 03:29 | right after, so there is no space
between the image tag and the anchor either at
| | 03:32 | the beginning or the end.
| | 03:34 | Now as we create our CSS, you'll
see that I'm able to select this div
| | 03:39 | specifically without it having a name,
and I'll show you how we do that in the CSS.
| | 03:43 | Let's go ahead and enter some more CSS here.
| | 03:54 | So again it's a section for the
Contact button and I have got another section
| | 03:58 | before that for the outerTable.
| | 04:05 | So first the outerTable. It sets the
selector for the outerTable and it has
| | 04:11 | a margin 0, auto.
| | 04:16 | Again, we have two values.
| | 04:18 | The first value is top and bottom and
the second value is the right and left.
| | 04:21 | Selecting auto for right and left
that centers the table on the page and so
| | 04:26 | this is what creates this effect here
with it being right up against the top,
| | 04:30 | but centered horizontally on the page and
that's from having margins 0 and auto like that.
| | 04:40 | 770 pixels wide, which is the width
of all those images that are used to create the look.
| | 04:57 | And this creates the image at the top of
the page, so let's save this and take a
| | 05:02 | look at the page over here.
| | 05:04 | This image up here is actually the
background image for that header table cell
| | 05:09 | and this fff is the background color
for the whole rest of that outerTable.
| | 05:14 | So you see that all of this
white here is as a result of that.
| | 05:18 | Now let's go ahead and enter the contactButton.
| | 05:26 | There is our contact button selector,
which we typed in the XHTML so that height
| | 05:35 | is actually half the height of the image.
| | 05:38 | That image with the head of the table
there is 110 pixels high and so 55 is half
| | 05:44 | of that, because the top half of it is
what we are using for that contactButton.
| | 05:48 | The bottom half we'll do in our
next lesson for the menu there.
| | 05:57 | This is how we select that div.
| | 06:00 | Remember we put a div in the HTML
here that's inside of the contactButton,
| | 06:05 | the selector of having the contactButton
id selector followed by the div tag selector.
| | 06:11 | That means that this is any
div inside of that id selector.
| | 06:16 | So any divs inside of this, which is
here and here, which is this and this, will
| | 06:24 | be selected by that combination selector.
| | 06:27 | It's a hierarchical selector where
we have the contactButton and then div.
| | 06:31 | So that's any div inside of the
context of that contactButton selector.
| | 06:37 | 30 pixels is the height of that image.
| | 06:44 | This is a margin that basically says
no margin, top, right, bottom, and 650
| | 06:50 | pixels to left so that will move it in.
| | 06:52 | 650 pixels and it will be against the
top of the table cell, because we have our
| | 06:57 | default set to vertical align top
over here. padding=0 and then finally,
| | 07:04 | the contactButton image itself.
| | 07:10 | So again this is a hierarchical
selector that selects any image inside of that
| | 07:14 | contactButton context,
which is just the one image.
| | 07:22 | We'll set its margins to 0 and its
border to none, so it won't get highlighted
| | 07:26 | by the anchor tag around it.
| | 07:28 | So that is our CSS, we'll go ahead and load
it in the browser and see what it looks like.
| | 07:32 | So we'll drag heading.html into the
browser and you'll see that top half of the
| | 07:39 | image is visible because that's the
only table cell that we have defined and
| | 07:44 | there is our contactButton.
| | 07:46 | So by having our table cell just be 55
pixels high, we are only seeing the top
| | 07:51 | half of the image there in the browser.
| | 07:53 | If we were to just make this 110 pixels, we'd
see the whole header image. See there it is.
| | 07:58 | But we need to make it just half as
high so we can make the next table cell for
| | 08:02 | the other half for the menu.
| | 08:05 | Save that, and there we are done.
| | 08:07 | That is our Contact button.
| | 08:10 | In the next lesson, we'll do the main menu.
| | Collapse this transcript |
| Laying out a main menu| 00:00 | In this lesson we are going to create
this main menu here at the top of the page.
| | 00:06 | These are the menu links
for navigating the site.
| | 00:09 | You will notice that when I click on one,
it changes and it becomes this
| | 00:12 | other image that's grayed out, and the
mouse changes, and it's no longer has
| | 00:16 | the pointer that will indicate that it's a link,
and so for each of these we have two images.
| | 00:21 | We have the tall gray one and the
short ocean colored one with the white
| | 00:26 | lettering on it and so that's
what we'll be creating in this lesson.
| | 00:31 | So here's our beginning XHTML file and
our beginning CSS and we are going to
| | 00:36 | go ahead and as we have been in all
these lessons, we are going to save this
| | 00:40 | as with a different name, so that we don't
overwrite files in the exercise files.
| | 00:47 | Save this one as heading.html and this
one here, save it as main.css,
| | 00:57 | because that's how it's
referenced in the XHTML file.
| | 01:01 | And now we'll go ahead here in the XHTML
and we'll create the main menu table row.
| | 01:17 | And again, we'll have a div inside of
that so that we can position it easily,
| | 01:23 | and we'll go ahead and type in the menu images.
| | 01:33 | The images that end in
-current, that's the tall gray ones.
| | 01:48 | Again, I'll end my image tag on the next line.
| | 01:51 | Embed it up against the following one.
| | 01:53 | The following one has an anchor tag
around it because it's actually a link.
| | 01:56 | This first one because it's the
current page does not have a link.
| | 02:00 | I'll end the anchor tag on the next
line at the beginning of the image tag and
| | 02:07 | I'm going to do some copy and paste here,
so that we can do this more quickly.
| | 02:14 | So what I'm doing here is
I'm selecting the image, and
| | 02:17 | this is the way I work in my projects.
| | 02:19 | I'm a big fan of efficiency or one could
say I'm big fan of lazy, and so I'll do
| | 02:24 | copy and paste, rather than typing
everything out every time, and so I'm
| | 02:30 | pressing Ctrl+C on the
keyboard because I'm on a PC.
| | 02:33 | If you are on a Mac, you
would use Command+C for copy.
| | 02:37 | So I'll go ahead and Ctrl+V to paste,
and so I have copied and pasted that image
| | 02:44 | and I just have to change the name of
the image here, which is now gear.png.
| | 02:48 | It doesn't have the -current
because it's not the current page.
| | 02:52 | It has a link on it and the width
will be different, it will be 73, and
| | 02:59 | the height is 25 for the ones that aren't current.
| | 03:03 | The height is 30 for the ones that are,
and there we have that, and I'll close
| | 03:08 | the anchor tag at the end of that and
begin the next one and I'll change the
| | 03:14 | Alt tag as well, to say gear.
| | 03:15 | Now I'm going to copy and paste just all
of this and so my text editor is trying
| | 03:24 | to help me by selecting more than I
want it to, so I had to do it again there,
| | 03:27 | and so I'll just copy and paste, and
paste, because there's three of those and
| | 03:33 | so let's see here the next
one is lifestyle and its width is 100,
| | 03:45 | height is the same, and the alt is
lifestyle, and link for that is also
| | 03:52 | lifestyle, and then the
following one is for videos.
| | 04:03 | I am going to make sure
you get all the occurrences.
| | 04:06 | That's the down side of the copy and paste.
| | 04:10 | It's easier for getting parts of it
and end up with something that's say gear
| | 04:14 | on the videos page, and there we have it.
| | 04:16 | So that is our link and if we look
at this in the browser
| | 04:25 | and there is heading.html and we'll go over
here and you will see that it looks like that
| | 04:34 | and of course, that will
get better as we style it.
| | 04:37 | So let's go ahead and style it now.
| | 04:42 | Move down here to the bottom of our Style Sheet.
| | 04:45 | I'm going to enter
a section called main menu
| | 04:56 | and we used an id tag called
main menu so td#mainMenu.
| | 05:04 | And again, the height is 55 pixels
and this one, we are going to change the
| | 05:11 | vertical align to bottom.
| | 05:13 | This is the only place where we use
that in the entire document and that's why
| | 05:20 | we have our default is for top.
| | 05:23 | For this one we are going to have it
be bottom and this will select our div.
| | 05:30 | Height is 30 pixels, which
is the tallest of our images.
| | 05:40 | Margin left of 300 pixels
and padding of zero
| | 05:46 | and then finally the images themselves.
| | 05:52 | Now this will select all of the images
in the main menu context, which there are four,
| | 05:57 | and this will give them a zero
top and bottom margin, while giving them
| | 06:05 | five pixels to the right and the left,
and that's what spaces them apart and
| | 06:10 | you will see there's ten pixels in
between them because there's five pixels of
| | 06:14 | each side, and border none.
| | 06:18 | That will get rid of this border
around the ones that are anchors.
| | 06:23 | I'll go ahead and save that and then load
it up in the browser, and there we have it.
| | 06:31 | That's our menu.
| | 06:32 | So how this works, it's really very simple.
| | 06:36 | We have images with links around them,
which we know all about from the lessons
| | 06:40 | on images and links, and we have styled
it using the CSS to give it the spacing
| | 06:46 | that we wanted to have, take off the
border, and to line it up with the table cell,
| | 06:51 | and so that gives us this lovely menu.
| | Collapse this transcript |
| Creating a layout template: main body area| 00:00 | Continuing with the development of our
website, in this lesson we are going to
| | 00:03 | start building the
content portion of the webpage.
| | 00:07 | We are going to start with this middle
image. I call it the ID image, because it
| | 00:11 | changes with each of the pages, so it
sort of helps to ID the page, and then
| | 00:15 | we are going to start building
the styles for the page itself.
| | 00:19 | We are going to start with the left-
hand side, the main content in this lesson,
| | 00:23 | and in the following lesson we'll do the
right-hand side, the sidebar content, and
| | 00:27 | then we'll have a template that we can
use to begin building the pages for the
| | 00:30 | rest of the website.
| | 00:32 | So let's get started.
| | 00:33 | So I have loaded up in my text editor
here. I have the beginning.html and I
| | 00:38 | have the beginning.css from the 05-
layout-left folder in the Exercise Files,
| | 00:45 | and so we'll start by saving as,
because that's what we always do.
| | 00:49 | That gives us a working space where we're
not writing over the exercise files themselves.
| | 00:56 | This one we'll call template.html,
because that's what we are going to end up
| | 01:00 | at the end of these lessons here,
with the template for working with the rest
| | 01:04 | of the website and we'll Save As the
main.css for CSS file and so now we have
| | 01:14 | our working space setup.
| | 01:15 | So I'm going to go ahead and insert
another table row and so this is starting
| | 01:24 | to get more confusing here, all
these table row beginning and ends next to
| | 01:28 | each other like that and so what I'm
going to do is I'm going to put in a
| | 01:31 | comment, so we'll know that
this is the end of this here.
| | 01:36 | So I'm going to just say
mainMenu. I like to do this.
| | 01:40 | It helps to keep track of where you
are in the page, so I can see easily that
| | 01:44 | that's the end of that, even though
they line up and my editor is very nice.
| | 01:48 | It gives me a little line here to help
line things up, but it's nice to have that.
| | 01:52 | And then we are going to have a table
inside of this table cell
| | 02:05 | and that will end here, and again,
this is going to be a big enough table.
| | 02:12 | It's going to be a lot of stuff in
between here, so I'm just going to go ahead
| | 02:14 | and put in the comment now.
| | 02:18 | And then I'll always know where I am,
and so this table will have one row and
| | 02:24 | it will have two columns and so there
will be a column for the contentLeft.
| | 02:35 | And it will end here.
| | 02:36 | And again, I'll just put in a comment,
as there will be stuff in between there,
| | 02:44 | and it will have another
row for the content right.
| | 02:47 | I'll just go ahead and copy this,
Ctrl+C or Command+C if you're on a Mac and
| | 02:58 | instead of contentLeft
that will be contentRight.
| | 02:59 | I'll change the comment for that one
| | 03:05 | and there we have it.
| | 03:07 | We now have space for our right and
left content tables and I'm going to save
| | 03:14 | and we'll go ahead and put
in a div for our mainContent
| | 03:31 | and we'll do the sidebar in the next lesson.
| | 03:34 | And then we'll just go ahead and put in
a little bit of content here, just so we
| | 03:38 | can look at it on the screen.
| | 03:50 | All right, so we'll save this.
| | 03:52 | I'll just look it over, make sure it all
looks reasonable. There is our begin div,
| | 03:56 | and end div, or begin td
and end td, and our table.
| | 04:02 | We can see here in table row, table row
ends, table ends, this all looks like it
| | 04:07 | should work, and if we go ahead and
load this up in the browser,
| | 04:16 | drag the template.html into the
browser and there we have it.
| | 04:21 | We have a space with our main content.
This is the default font, remember that,
| | 04:26 | and so it's not lined up exactly how we
would like it to be lined up, but we are
| | 04:30 | going to take care of that in our CSS right now.
| | 04:32 | So just go ahead and do the CSS part of this.
| | 04:38 | Scroll down to the bottom.
| | 04:43 | Enter comment here.
| | 04:56 | We'll start with viewing
table cell, contentLeft,
| | 05:04 | and we want to give that
the white background color,
| | 05:12 | and a width of 505 pixels.
| | 05:17 | Now I have already measured all of
this out with the content that was given
| | 05:21 | to me by the client.
| | 05:28 | The mainContent, this is our div for
the main content, and it has padding 0 and
| | 05:37 | 15 pixels. I'll explain that
in a moment. Margin of zero.
| | 05:44 | Now it's important at this point to
understand the difference between margin and padding.
| | 05:49 | So what I'm going to do, I'm going to
save this and I'm going to go ahead and
| | 05:52 | I'm going to put a border on this,
so that you can see what it is
| | 06:01 | And this is just temporary, this is just for
illustration purposes, so you can see what
| | 06:05 | the margin and the padding is all about.
| | 06:07 | Let's look at this in the browser.
| | 06:08 | I reload here. You see this box. This
is the border that we just put in for the div,
| | 06:14 | and you see it goes all the way up
to the edge of the image above it into
| | 06:18 | the edge on the left and edge on the
bottom, and of course, the edge on the right,
| | 06:21 | but this is the
width of 505 pixels there.
| | 06:25 | Now if I put a margin on that,
let's say we put a margin of 10 pixels.
| | 06:31 | So this will put 10 pixels all the way
around, top, right, bottom, and left,
| | 06:35 | and so we'll save that and you will
see what a margin looks like, because we
| | 06:38 | have this border here.
| | 06:40 | You can see that the margin goes on
the outside and it actually increases
| | 06:45 | the size of the div.
| | 06:47 | It pushes everything out.
| | 06:48 | So it adds those 10 pixels all the way
around and the div itself is inside of
| | 06:54 | the margin, so the margin
goes outside of the content box.
| | 06:58 | Padding on the other hand goes on the
inside of the content box and so if we
| | 07:03 | make that margin zero, and let's just
make this padding something large so that
| | 07:09 | we can see it, say 50 pixels, and so
that I'll put 50 pixels on the top,
| | 07:15 | on the right,
on the bottom, and on the left.
| | 07:17 | I'm just making it really big,
so you can see what it does.
| | 07:22 | It actually increases the size of the
content box and it adds that padding on
| | 07:29 | the inside of the content box, so
that's the difference between padding and margin.
| | 07:35 | Padding and margin are: margins on the
outside, padding is on the inside, and
| | 07:39 | they both actually increase the size
of the box, so that the content on the
| | 07:44 | inside is still the
dimensions that you asked for.
| | 07:50 | So we can go ahead and make this what
we wanted it to be, which is zero and 15 pixels,
| | 07:56 | and so that's zero on the top
and the bottom and 15 pixels on the
| | 07:59 | left and the right.
| | 08:01 | Save that and we'll take off this
border, because that was just for
| | 08:04 | illustration purposes and we'll go
ahead and enter the next part of it.
| | 08:09 | So the reason I did it the way that I
did it and that will become clear in a moment.
| | 08:36 | Save that.
| | 08:37 | So this is the p tags, so all the p
tags within the mainContent context will
| | 08:42 | have this formatting and this is laid
on top of, remember that this cascades,
| | 08:46 | this is laid on top of our defaults
up here, which have these margins.
| | 08:50 | And so, the margin for the left is
getting overridden to be zero and what that
| | 08:56 | does is it puts it up against this 15
pixel padding on the div, and I make the
| | 09:01 | margin left for all of our different elements.
| | 09:04 | The reason I do that is because the
relative margin sizes for the different
| | 09:08 | sizes of text, like the heading size
and the paragraph size, they tend to be a
| | 09:12 | little bit different.
| | 09:13 | So I make them all zero and I just
use the padding in the div instead to
| | 09:18 | create that margin.
| | 09:19 | It's just a little trick.
| | 09:21 | This is the way I like to do it.
| | 09:22 | It makes my life easier.
| | 09:23 | And so I set a padding to be a
certain size on the right and left in the
| | 09:28 | mainContent and I set that margin-left
to be zero in the paragraphs and also
| | 09:34 | in the headings, and that way everything
lines up nicely, just the way that I want it.
| | 09:38 | So I'm going to go ahead and enter
some default styles for the headings.
| | 09:43 | Let me use the copy and paste, because
I don't like to type all of these.
| | 09:52 | I'll go ahead and change this one to a 2,
this one to a 3, and there we have that.
| | 10:12 | Now I made the font-family for the
paragraph for the body text, this nice serif
| | 10:17 | Georgia font, and I say serif as a
fallback, and this is the Trebuchet MS for
| | 10:24 | the sans-serif for the headings.
| | 10:27 | Again, a lot of these style
choices were made for me by the client.
| | 10:34 | And then the mainContent h1.
| | 10:40 | So what I'm able to do is I'm able to
set defaults for all of them like that and
| | 10:44 | then I can make adjustments from that
starting point in a separate style just
| | 10:48 | from mainContent h1 and this is
again is taking advantage of the cascading
| | 10:52 | property in the CSS cascading style sheets.
| | 11:14 | Again, I'm setting all the margins to
zero except that bottom margin and that
| | 11:18 | bottom margin is just going to give us
a little space between the heading and
| | 11:22 | the body paragraph, but that left margin
is set to zero just like it is here for
| | 11:26 | the paragraphs and so that will take
advantage of this 15 pixel padding on the
| | 11:31 | left-hand side and the div.
| | 11:33 | So there we have it.
| | 11:35 | This is our style for the main content
on the left-hand column and we'll go
| | 11:41 | ahead and reload here and we see that
that's exactly how we want it to look.
| | 11:45 | The only piece missing now
is that middle ID element.
| | 11:49 | Let's go ahead and add that in the HTML.
| | 11:55 | And so that gets another row right in here.
| | 12:04 | and this is our page ID image
| | 12:10 | and it gets this image source=images/home_
banner.jpg, and there will be a different
| | 12:22 | banner for each of the pages.
| | 12:24 | So there will be a gear banner for the
gear page, etcetera, and the width is our
| | 12:29 | standard 770 pixels, height is 90 pixels,
alt says Welcome to Surfing Paradise.
| | 12:41 | We'll save that and go and load up the page.
| | 12:49 | So we see I missed the equal sign
here between width and my syntax
| | 12:52 | highlighting editor makes it in red,
which makes it nice and obvious there.
| | 12:56 | So just put in that equal sign and
I'll save there, go ahead and load it up in
| | 13:01 | the browser, and there we have it.
| | 13:05 | So there is our ID image in the
middle, here is our main content.
| | 13:09 | You notice that the ID image also gives
us a little bit of a nice little extra
| | 13:13 | white space here. It has
this sort of organic look to it.
| | 13:15 | That is the part of the ID image right there.
| | 13:18 | If I right-click on this and say View
Image, you can see that that white part is
| | 13:22 | part of the image there.
| | 13:23 | So there we have it.
| | 13:24 | This is our main content on the left-
hand side and we have space over here for
| | 13:28 | the sidebar content on the right.
| | Collapse this transcript |
| Creating a layout template: sidebar area| 00:00 |
Continuing with the building of our
example website, we are going to fill in the
| | 00:05 |
default content and styles for the right-
hand side of the content portion of the
| | 00:09 |
page in this lesson.
| | 00:10 |
So we have the beginning HTML and CSS
files, from the Layout-right folder in
| | 00:16 |
the Exercise Files.
| | 00:18 |
So we'll go ahead and do the Save As
and save these as template.html and
| | 00:26 |
beginning.css we'll save that as main.css.
| | 00:31 |
| | 00:34 |
So you are all set up there and we
are going to go ahead and set up the
| | 00:39 |
contentRight portion of the page.
| | 00:43 |
This is actually pretty
straightforward here and I put in a div id="sideBar".
| | 00:50 |
| | 00:53 |
Like that and go ahead
and put in a comment here.
| | 00:59 |
| | 01:02 |
And then inside of the div we are
going to put, just like we did in the other
| | 01:08 |
program, I'm going to put in h3
because we use h3's in the sidebar,
| | 01:12 |
Sidebar Here, and sidebar content will go here.
| | 01:21 |
Go ahead and save that.
| | 01:25 |
As we load this up in the browser,
drag our template file into the browser there,
| | 01:30 |
we see our sidebar content on
the right-hand side of the page and that's
| | 01:36 |
because it's in this table cell here.
| | 01:39 |
So we have table row and we have two columns.
| | 01:42 |
We have this one and we have that one.
| | 01:43 |
So let's go ahead and format it now in the CSS.
| | 01:51 |
So this will go after the mainContent section.
| | 01:53 |
Go ahead and put in a comment here.
| | 01:55 |
This is the sidebar.
| | 01:56 |
| | 02:05 |
We'll start with the contentRight td
and again this has a background-color.
| | 02:14 |
| | 02:17 |
fff, which is white.
| | 02:20 |
This one here has a width of 265 pixels.
| | 02:23 |
Then we'll enter the sideBar div.
| | 02:28 |
| | 02:31 |
This has same padding trick,
this one set to 10 pixels.
| | 02:37 |
And then also has a border on the left-hand side.
| | 02:44 |
| | 02:47 |
Go ahead and save this.
| | 02:48 |
I'll show you in the browser
what this border is all about.
| | 02:52 |
You look at our site here, you see this
line there and you will notice that it
| | 02:57 |
doesn't go to the bottom of the page.
| | 02:58 |
It just goes to the bottom of the
sidebar and so that's accomplished by having
| | 03:02 |
it via border left on the sidebar div.
| | 03:05 |
If we reload here, we see there's our border.
| | 03:10 |
| | 03:11 |
So continue entering our styles here.
| | 03:14 |
There's our style for the
paragraphs inside the contentRight context.
| | 03:23 |
| | 03:32 |
So font. font-size is a little bit
smaller than it is in the mainContent.
| | 03:39 |
| | 03:46 |
A little bit of spacing between the lines.
| | 03:48 |
| | 03:52 |
The color is going to be a little bit off white.
| | 03:57 |
| | 04:01 |
So I have a little bit of margin in
between the paragraphs or after the
| | 04:04 |
paragraphs, but the paragraphs themselves
will be flush up against this 10 pixel padding.
| | 04:09 |
| | 04:17 |
Remember, we use h3 headings for the sidebar.
| | 04:20 |
Go ahead and copy the font-family from up here.
| | 04:26 |
| | 04:36 |
Headings are going to be this teal color
that was selected by the designers.
| | 04:41 |
| | 04:49 |
And we'll go ahead and enter those
margins there and there we have it.
| | 04:53 |
We'll save and go take a look at
it in the browser and there we go.
| | 05:03 |
That's our sidebar and that's
what our sidebar looks like.
| | 05:05 |
It's little bit smaller, it's got the
slightly gray color text and this teal
| | 05:10 |
color heading and there we have it.
| | 05:13 |
That's our formatting and
our layout for the sidebar.
| | 05:17 |
| | Collapse this transcript |
| Creating a layout template: footer content| 00:00 | Continuing with building the template
for our website, we're going to now enter
| | 00:04 | this stuff at the bottom of the
screen here, the legal stuff, the copyright
| | 00:09 | notice, Privacy Policy, and
Terms and Conditions links.
| | 00:12 | And then we'll be done with our template,
and we'll have a template that we can
| | 00:15 | use to start building our site.
| | 00:17 | In the Editor, we have the beginning.
html and css from the 07-layout-footer
| | 00:25 | folder, and we're going to go ahead
and do our traditional Save As ritual.
| | 00:31 | We are going to be calling it template.
html and we'll actually have our work in
| | 00:35 | template at the end of this lesson.
| | 00:37 | The css will be main.css. There we go.
| | 00:46 | Now, down at the bottom of the template,
we're going to put in the text for the
| | 00:52 | footer and it's like this.
| | 00:55 | It actually goes outside of that table.
| | 00:58 | The paragraph itself has an id="footer".
| | 01:06 | Inside the paragraph we're
going to have our copyright notice.
| | 01:09 | That's an XHTML entity for the copyright symbol.
| | 01:13 | Now I'm putting in a couple
of non-breaking spaces here.
| | 01:22 | The purpose of that is to give a
little bit of space between the Groundswell Surf
| | 01:26 | and the links for the Privacy
and Terms and Conditions links.
| | 01:31 | You'll notice in our page here, there's
a little bit of space there and then we
| | 01:35 | have this bar separating these two.
| | 01:38 | But this space, normally the browser
will fold all the spaces into one space,
| | 01:42 | and I want to actually have some spaces there.
| | 01:44 | So those non-breaking spaces serve to
just take up enough white space there,
| | 01:49 | on the actual screen.
| | 01:51 | Then I'm going to put in my links on
separate lines because the browser will
| | 01:54 | actually ignore that new line
and put it on the same line there.
| | 02:11 | Just type a vertical bar character
there at the end, and do the same thing for
| | 02:16 | the Terms and Conditions link.
| | 02:26 | There we have it.
| | 02:28 | So that is the XHTML portion of the footer.
| | 02:33 | If we look at that in the browser--
| | 02:36 | Let's go ahead and load this up.
| | 02:41 | This will be the template.html.
| | 02:47 | Drag that in, and we see we have the text and
the links, and now we just need to format them.
| | 02:53 | You see that lovely space there?
| | 02:55 | That's the non-breaking space characters.
| | 02:57 | Let's go ahead and enter
the style sheets for this.
| | 03:04 | Down at the bottom of the file,
go ahead and create a comment.
| | 03:17 | p#footer, and we have the Trebuchet
font-family, which I'm just going to copy
| | 03:27 | and paste from up here.
| | 03:28 | font-size: .75em.
| | 03:35 | Make it smaller, color: white.
| | 03:39 | So the text will be white here.
text-align: center.
| | 03:46 | And then the links are going to be this
other color that's already been selected again.
| | 03:53 | So that selects all the anchor
tags inside of the footer# context.
| | 04:07 | text-decoration: none.
| | 04:12 | That makes it so that the
links don't have an underline on them.
| | 04:15 | So we have some of these extra spaces.
| | 04:20 | And go ahead and save this.
| | 04:22 | Load this up in the browser. There we have it.
| | 04:28 | It's just how we wanted, white
text here, the little teal text there.
| | 04:33 | It's exactly how we wanted.
| | 04:35 | So now we have a template, which we
can use for building the rest of the
| | 04:39 | pages for our site.
| | 04:41 | So we use this as a starting point,
as we build the pages for the rest of this site.
| | Collapse this transcript |
| Building a main home page: main body content| 00:00 |
Now that we have our template built,
we can start putting content in the website.
| | 00:04 |
So, here in the home-pt1 folder in the
Exercise Files, you will see there is the
| | 00:11 |
template.html and that's the template
that we built in the last lesson and
| | 00:16 |
you will also see a text
folder here that has home.txt.
| | 00:19 |
That's the text that goes in the
page and then we have the CSS folder, of
| | 00:25 |
course, which has our beginning place
for the CSS and this is all loaded-up in
| | 00:30 |
my text editor and so here is the template.html.
| | 00:33 |
Here is our beginning.css and here is
the text file with all the text that will
| | 00:37 |
go in the home page.
| | 00:39 |
So, let's get started.
| | 00:41 |
First thing we do, of
course, is to do the Save As.
| | 00:43 |
In this case, we are
going to save it as home.html.
| | 00:47 |
So, we'll be building the left-hand side in
this lesson and the right-hand side in the next lesson.
| | 00:51 |
We are still going to call this home.html,
save that and then the beginning and
| | 00:58 |
the CSS will be saved as main.css and
the text file we are not going to be
| | 01:03 |
writing over, so we can
leave that alone at this point.
| | 01:06 |
All right, so now, let's go down here
to the place where the main content goes
| | 01:13 |
and I'll just select these two lines
and I'm going to copy everything from this point,
| | 01:18 |
all the way down to here.
| | 01:23 |
This is the end of the content for the
first half of the page, the left-hand side
| | 01:28 |
and then down here, where it says
sidebar, that's the content for the sidebar.
| | 01:31 |
We'll be dealing with that in our next lesson.
| | 01:34 |
And so I'm going to go ahead and
press Ctrl+C to copy on the PC, we'd use
| | 01:39 |
Command+C on a Mac, come over here to
home, where I have selected this and
| | 01:43 |
I'm going to press Ctrl+V to paste.
| | 01:46 |
And so, there we are done. Ha! Not really.
| | 01:50 |
Now, we need to put in our heading levels.
| | 01:53 |
I'm going to wrap the HTML around this,
so this will be a <h1> and close the
| | 02:03 |
</h1> at the end and then here we
are going to have the beginning of our
| | 02:08 |
paragraph and here goes the end of the
paragraph and then the beginning of a
| | 02:13 |
paragraph here and I'm going to be
sneaky and do copy and paste and have an end
| | 02:19 |
a paragraph and a begin a paragraph in
my copy buffer, so I press Ctrl+C to copy
| | 02:24 |
and then I paste here and I
have the ended that paragraph.
| | 02:27 |
Of course, this doesn't begin a
paragraph here, so I'll just take that and
| | 02:31 |
I'll move it down here, a little one more,
and then I can paste an end a paragraph here
| | 02:41 |
and now we have another heading.
| | 02:45 |
Now, this heading level here is going
to be <h2> and the </h2> there and
| | 02:54 |
an <h4> for this, because we are using <h3>
on the right-hand side, so this will be an
| | 02:58 |
</h4> and then we have more paragraphs.
| | 03:04 |
| | 03:06 |
Add an ending paragraph here
and this is another <h4>, </h4>, add a
| | 03:14 |
paragraph here and an
ending paragraph here.
| | 03:20 |
I didn't get to use my paste
buffer for that very much, did I?
| | 03:23 |
And this is a link
| | 03:25 |
| | 03:33 |
and the link will have this text in it here.
| | 03:35 |
So, I'll cut and paste and then just
take out this extraneous text at the end.
| | 03:43 |
| | 03:44 |
Scrolling down, I have another <h4>,
| | 03:47 |
| | 03:51 |
and another paragraph and there is a couple
| | 03:55 |
of links in this one, the one here.
| | 04:00 |
| | 04:08 |
I'll do the same Cut and Paste and you get
rid of this at end and do the same thing here.
| | 04:17 |
| | 04:24 |
I missed the equal sign.
| | 04:27 |
That's the beauty of the
syntax highlighting text editor.
| | 04:30 |
| | 04:35 |
And there we have it.
| | 04:36 |
So that's our content and
now I like to indent stuff.
| | 04:40 |
I'm just like that.
| | 04:41 |
It makes everything pretty.
But we are not quite done, are we?
| | 04:48 |
| | 04:49 |
Go ahead and indent anyway at this point
and every editor has a different way to do this.
| | 04:55 |
Once you have it highlighted,
| | 04:56 |
in this particular editor, which
is Notepad++, I'll hit the Tab key.
| | 05:00 |
I know that in BBEdit it's something like
Command+Right bracket or something like that.
| | 05:05 |
I actually use BBEdit a lot and my
fingers remember how to do it, but I don't
| | 05:10 |
always remember what it is I'm doing.
| | 05:11 |
It's just that my fingers
remember it and so anyway.
| | 05:15 |
This is going to be an unordered
list and so that ends at the bottom.
| | 05:23 |
So, I'm cutting and pasting and put
that there and then each of these has a
| | 05:29 |
<li> at the beginning and an end </li> at
the end and so I'll use copy and paste for this.
| | 05:34 |
Copy, paste, paste, paste, paste, paste.
| | 05:40 |
And copy, and paste, paste, paste, paste, paste.
| | 05:50 |
There we go.
| | 05:52 |
So, that is our content,
rather than going through all that.
| | 05:55 |
I wanted to go through it this time just
to show you what my workflow looks like
| | 05:59 |
as I do this sort of thing.
| | 06:00 |
In the subsequent lessons, for the rest of them,
I have them all HTML-ified in the text file.
| | 06:07 |
So, that will make it easier
for you to cut and paste them.
| | 06:11 |
So, now that we have this content in
here, let's just go ahead and take a look
| | 06:14 |
at it in our browser.
| | 06:15 |
We are going to do a little bit more
CSS on it, but it's not going to look too bad,
| | 06:19 |
as it is right now.
| | 06:20 |
There are a few styles
that we haven't yet installed.
| | 06:24 |
I'm going to take the home file and drag
it into the browser and there we have it.
| | 06:29 |
That's not bad.
| | 06:31 |
That's pretty close.
| | 06:32 |
There are a few things we are going to do.
| | 06:34 |
We need to enter these <h2> and <h4>
levels and these links don't quite look right,
| | 06:39 |
and we are going to do a little bit
of formatting also on this unordered list.
| | 06:44 |
So, let's go into our CSS file and
we'll scroll down here to the bottom and
| | 06:51 |
actually it's not at the bottom.
We are going into the main content part.
| | 06:55 |
All right there and we are
going to enter the <h2> level.
| | 07:01 |
So, I'm just going to copy this one
because it's just a little change from there.
| | 07:05 |
You see, I actually do this a lot in
real life, create two copies of that.
| | 07:11 |
One of them will be <h2> and one of them
will be <h4> and then we can just change them.
| | 07:18 |
So h2, font-size is 1.2em
and the color is 3C3809
| | 07:31 |
and it does not have this font-weight:bold in it
| | 07:35 |
and the margin is the same, 0.4em.
| | 07:39 |
Now the h4, it's 1.1em in size and it
is bold and the color is this gray
| | 07:49 |
and the margin, this is the bottom
margin now, it is actually -0.2em.
| | 07:57 |
So let's go ahead and take a look at all of
that and see what that looks like in the browser.
| | 08:00 |
| | 08:05 |
Oh, it's lovely.
| | 08:07 |
| | 08:09 |
And that's what
it looks like over here as well.
| | 08:12 |
Excellent!
| | 08:13 |
Now, these links aren't
right, you see the links?
| | 08:17 |
Look at what the links do
in the finished version.
| | 08:21 |
They have this orange color and they
change to gray and they get this dashed
| | 08:24 |
underline, which is
actually not an underline at all.
| | 08:27 |
It's a dashed bottom border.
| | 08:29 |
So, I'm going to go ahead and actually
in our CSS, we are going to make this
| | 08:34 |
the default anchor style and it
goes in the outer table up here.
| | 08:40 |
| | 08:44 |
And we say outerTable
a:link and outerTable a:visited.
| | 08:54 |
| | 08:57 |
That's for the visited and the
unvisited links and I'll get text-decoration:none,
| | 09:05 |
so that takes out the
underline and I'll get this color.
| | 09:13 |
And then we do outerTable a:hover
and that's the style for the mouseover.
| | 09:24 |
When your mouse is hovering over the
link, this is the style that you get there
| | 09:29 |
and it will have this color
| | 09:30 |
of 566440 and border-bottom: 1px dashed #566440.
| | 09:46 |
So, when we save this, we'll see that
our links look like we except them to see.
| | 09:52 |
There we are, see that?
| | 09:56 |
And that's how we want those to look and
so that will also happen in the sidebar
| | 10:01 |
because we put it in the outerTable level.
| | 10:04 |
Finally, what we need to do
now is this is unordered list.
| | 10:08 |
And that will go down here in the main
content, right here. #mainContent ul.
| | 10:21 |
| | 10:24 |
And that will be Georgia and font-
size 0.9em, just like in the paragraphs.
| | 10:37 |
margin-bottom.
| | 10:39 |
So it would be the spacing after the
whole list, 1.4em, and then finally the li,
| | 10:48 |
| | 10:50 |
which is the line items themselves,
those will have a margin-bottom of 0.6em.
| | 10:59 |
So, that's the spacing between those items.
| | 11:02 |
We will go ahead and save that and
look out it the browser and there now,
| | 11:08 |
our list looks like we expect our list to look.
| | 11:11 |
So, that's the left content there, that page.
| | 11:13 |
That's pretty easy once we have the
template all done. You can see that the rest
| | 11:17 |
of these pages are going to go fast.
| | 11:19 |
In our next lesson, we'll do the
sidebar content and we'll be all done with
| | 11:23 |
this main page.
| | 11:24 |
| | Collapse this transcript |
| Building a main home page: sidebar content| 00:00 | As we continue building the example website,
| | 00:04 | in our last lesson, we filled in the
left-hand side of the main homepage and
| | 00:09 | in this lesson, we'll
continue with the Sidebar Content.
| | 00:12 | So, let's get started.
| | 00:14 | Here in our editor we have our
beginning.html, which has the content for the
| | 00:19 | left-hand side that we filled in last time.
| | 00:22 | And our beginning.css, which likewise
has all of that style from the last time.
| | 00:29 | And our home.txt which has the
content here for the sidebar, which we'll be
| | 00:34 | copying, and first let's go ahead and
do our traditional Save As and saving as
| | 00:39 | home.html, because this will be the homepage.
| | 00:44 | And save the css as main.css
| | 00:51 | and our home.txt, we don't have to Save As because
| | 00:56 | we're only going to be
reading from it not writing to it.
| | 00:59 | Let's go ahead and copy this content, so I'm
pressing Ctrl+C because I'm using a PC here.
| | 01:04 | If I were using a Mac, I would use
Command+C and over here in our home.html,
| | 01:10 | we're going to scroll down to the
Sidebar Content and go ahead and press Ctrl+V
| | 01:15 | to paste and there we have it.
| | 01:17 | So, the first thing I want to do is
fill in the XHTML here, and like I said
| | 01:23 | before for the home page, we're doing
all of these manually in the future pages
| | 01:26 | because we'll have had this experience.
| | 01:28 | We're going go ahead and just cut
and paste the already HTML-ified
| | 01:32 | or Xhtml-ified text.
| | 01:34 | So, I'm going to start with this image
here and let's say img src= and there I
| | 01:39 | have that and then I'm going to
go to fill in the width and height.
| | 01:47 | I'll go ahead here and drag this over
because this Editor is kind of cool.
| | 01:52 | It allows me to do it this way. Here we go.
| | 01:55 | So that's our image tag and then this
gets an h3, because we use h3 for the
| | 02:03 | right-hand side for the sidebar and
we get paragraphs here and then paragraph
| | 02:12 | here and then we have another image.
| | 02:27 | I can just cut/paste.
| | 02:31 | That's the other way to do this.
| | 02:37 | Now, this is an h3.
| | 02:51 | And add another image.
| | 03:05 | Drag that over. That's just fun to do it that way.
| | 03:09 | And there we go.
| | 03:11 | Another h3, another
paragraph and an end paragraph.
| | 03:23 | And then we have some links here.
This is supposed to be a capital C there.
| | 03:29 | I make that a href = and end a, equal
to that part and take this part here and
| | 03:42 | stick it in there and the same thing here.
| | 04:00 | And finally, this one here.
| | 04:15 | Now, one other detail. These images are
in the images directory, so we'll just
| | 04:20 | say images here and I'll
copy that and paste it here
| | 04:27 | and paste it here, there we go.
| | 04:32 | I think our content is ready and I'll go
ahead and take all of this and indent it.
| | 04:40 | In this editor here, which is Notepad++,
I select a block of text and use the Tab key.
| | 04:46 | Different editors have
different ways of indenting.
| | 04:49 | I find it very valuable
to keep my code indented.
| | 04:53 | It helps me to find my way around
and to know what is related to what.
| | 04:58 | So we'll go ahead and save this.
| | 05:01 | Now there is some formatting we're
still going to need to do in css.
| | 05:04 | But let's just take a peek and see what
it looks like in the browser real quick.
| | 05:08 | And we'll need to drag in this file,
which is the home file in our home-part2.
| | 05:14 | Drag this into the browser and there we have it,
there is our right content. So that's great!
| | 05:20 | It looks good.
| | 05:22 | It's still not entirely done.
| | 05:24 | We need to format these images over.
| | 05:27 | If we look at our example
here we see that it's very close.
| | 05:31 | The images are indented a little bit
and the one's that our photographs have
| | 05:35 | this nice little border on them.
| | 05:37 | So we'll go ahead and do that in the
css right now and that's over here in
| | 05:41 | our css and we're going to add a
couple of styles down here in the sidebar
| | 05:47 | section right over here.
| | 05:50 | All right, so the first thing we want
to do is we want to indent those images a
| | 05:54 | little bit and so we can do this here.
| | 05:58 | So this would be the selector for the
images in the sidebar because they are
| | 06:03 | under the contentRight,
content margin 0 25 pixels.
| | 06:10 | So, this makes the top margin and the
bottom margin 0 and the left and right
| | 06:15 | margins 25 pixels, and I'll just go over
to the browser and take a look at that.
| | 06:21 | Save here and reload and there we have it.
| | 06:24 | Our images are now indented.
| | 06:27 | Now, all we need to do is to put a
border on these photographic images.
| | 06:31 | We go back into the XHTML and
we use a class selector here.
| | 06:42 | For the ones that are photographs, so this
Surf1 image of photograph, this is a product image.
| | 06:48 | So this is a photograph, so
put in a class selector here.
| | 06:53 | Now we go and put that
class in the style sheet.
| | 07:04 | So we're using a combination
of selectors here now.
| | 07:08 | This is something we haven't done before.
| | 07:10 | So, we have the ID Selector for the
contentRight ID and so all of the images
| | 07:17 | that are within that context
that also have this class selector.
| | 07:21 | So, img.photo is a class selector.
| | 07:24 | Those who'll get this additional style
and first they will apply this image
| | 07:29 | style and then they will apply the
class selector because that's where they
| | 07:33 | are in the hierarchy.
| | 07:35 | It's not because one is
after the other in the css file.
| | 07:37 | It's because hierarchically, img
gets applied before the class img.photo.
| | 07:51 | We're applying a padding of 5 pixels.
| | 07:53 | Remember padding goes inside of the
content box and it expands the content box.
| | 07:59 | And the border is a 1 pixel border,
which also expands the content box by 1 pixel.
| | 08:05 | It will happen on the outside of the
padding because the padding is inside of
| | 08:08 | the content box, like margin is outside.
| | 08:11 | So, we'll go ahead and save this and
we would expect this to create 5 pixel
| | 08:16 | padding with a dark border around.
| | 08:19 | It's not quite black here.
| | 08:20 | It's a gray border.
| | 08:22 | Go ahead and reload in the
browser and there we have it.
| | 08:25 | So these boxes got a little bigger, you saw that
and now there is this 5 pixel border around it.
| | 08:30 | That's the padding because it's not margin.
| | 08:32 | Margin would be on the outside of the border.
| | 08:34 | It's on the inside, so that's the
padding and that only happened on the ones that
| | 08:37 | we gave that class selector to the
photographs, so there we have it.
| | 08:42 | We are done with the homepage.
| | 08:44 | We have now created the main content
and the sidebar content for the home page,
| | 08:48 | and so we'll go ahead and
move on to the next page.
| | Collapse this transcript |
| Creating a page with a menu, graphics, and formatted links| 00:00 | Moving right along in building the
website, we're doing the gear page now
| | 00:05 | which is the second page in our
website and this is what it looks like.
| | 00:11 | So we have a different ID image here.
| | 00:14 | We have this little menu for the
different subcategories of gear for sale.
| | 00:20 | We have this paragraph of text and then
we have This month's special here, and
| | 00:26 | the content on the right.
| | 00:29 | So, let's get started.
| | 00:32 | Here in our text editor,
we have the empty template.
| | 00:35 | We have the beginning.css, which is
where we left off in our last lesson with
| | 00:39 | the CSS, and we have the text
that we're going to copy and paste.
| | 00:43 | This is already all XHTML-ified for us.
| | 00:49 | So here we go.
| | 00:53 | First thing we're going to do is we're
going to Save As, which is what we always do,
| | 00:58 | and in this case,
it's going to be gear.html.
| | 01:03 | That's the name of the page and then the
CSS would be main.css and the gear text
| | 01:12 | we're going to leave alone
because we're only reading from that.
| | 01:14 | We're not writing to it.
| | 01:15 | So the first thing we do is we
change the page title here and it will
| | 01:20 | be Groundswell Gear.
| | 01:22 | Then we're going to change this menu
section here, here only save this, and
| | 01:31 | we'll show you in the browser what we're doing.
| | 01:34 | Here the Gear menu item is the current
image, so it's taller, and it's gray and
| | 01:41 | it's not a link, whereas in the
previous page, it was the Home menu item.
| | 01:46 | So here it's the Gear menu item and so
we'll need to change that and this is the
| | 01:51 | easy way to do that.
| | 01:52 | I'm just going to grab this here and
I'm going to cut with Ctrl+X, that would
| | 01:59 | be Command+X on a Mac, and just move
it down one, right to here, so it's
| | 02:04 | between the end of the previous link
and the beginning of the next link and
| | 02:08 | press Ctrl+V to paste.
| | 02:11 | Then I'll change this first one to home,
and home here, and home here, and then
| | 02:21 | swap the widths, this will be 80,
and this one will be-- was it 73?
| | 02:26 | Yes, 80 there and 73 here and then this
home-current becomes gear-current, and
| | 02:39 | this home becomes gear.
| | 02:41 | So that's how easy that is.
| | 02:43 | I just swap these pieces
around and renamed them.
| | 02:49 | So I'll save.
| | 02:50 | We can look at our progress in the
browser, gear.html, and drop it in there.
| | 02:56 | There we have the Gear menu.
| | 03:00 | That looks like it works just fine.
| | 03:02 | So if I click on Home, we get the page
we did last, but when I click on gear,
| | 03:06 | we get where we are here so far.
| | 03:08 | Now, I want to change this
middle image to be the gear ID image.
| | 03:16 | The Alt text, we'll say check out our gear.
| | 03:26 | Then save that.
| | 03:27 | Now we have our gear banner, hit reload in
the browser and there is our gear banner.
| | 03:34 | Now it's time to do the content.
| | 03:38 | First, we'll cut and paste the content
from in here and so this is the main part.
| | 03:44 | Just right there, press Ctrl+C
to copy, and Ctrl+V to paste.
| | 03:50 | That's all of that.
| | 03:52 | Let's go ahead and indent
it with the rest our content.
| | 03:58 | Go ahead and save and take a look at this.
| | 04:01 | I know it's going to need some
CSS work, but that's not bad.
| | 04:06 | So, what are some of the
things we need to do here?
| | 04:08 | Well, first of all, we need to format
this so that it looks more like that,
| | 04:11 | instead of these default links.
| | 04:15 | So let's start there.
| | 04:16 | All right, so we have a class here for
the leftMenu and that will be used for
| | 04:24 | our formatting in the CSS.
| | 04:27 | So we'll go into the CSS, we'll
come down here to the bottom of the
| | 04:31 | mainContent, and we'll go ahead and do
a class selector. mainContent is the ID,
| | 04:38 | and then it is p.leftMenu.
| | 04:42 | All right, so first of all, we want
this Trebuchet font so we'll go ahead and
| | 04:51 | copy that from some place else.
| | 04:54 | And it's got a margin bottom 1.5ex,
and that will give it that space underneath it.
| | 05:07 | So I'll go ahead and I'll save
and we can look in the browser here.
| | 05:14 | So that's that nice space underneath
that helps it to look like a menu.
| | 05:18 | Now we need to change these
links so they look more like this.
| | 05:22 | See, they don't have the dashes
underneath them and they start out with the
| | 05:26 | gray and the highlight as
you hover the mouse over them.
| | 05:30 | So I'm going to change that.
| | 05:33 | So that works like this here.
| | 05:35 | Now, we have a three-
stage selector to work with.
| | 05:37 | mainContent, that's the ID selector,
p.leftMenu, that's the class selector, and
| | 05:44 | then within that we
have the a, for the anchor.
| | 05:48 | So if we look in the XHTML here so that
we have mainContent ID selector and then within
| | 05:55 | that the leftMenu class selector,
and then within that the <a> tags.
| | 06:00 | So all these <a> tags will be
selected by this selector here,
| | 06:05 | this three-stage selector.
| | 06:07 | So what we want do is change the
default color to this color here, and then in
| | 06:14 | the hover, we want to take off that border.
| | 06:17 | So I'm just going to copy this so I have
that selector and then edit the hover.
| | 06:23 | Then it will have a different color now.
| | 06:28 | It will be the #b36b00.
| | 06:30 | Again, these colors were all
selected for me by the designer.
| | 06:34 | Then border:
| | 06:36 | none and so there we have it.
| | 06:38 | So now when the mouse is hovered
over, save, the border won't be there.
| | 06:45 | It'll just change colors.
| | 06:47 | So let's look at it in
the browser here and reload.
| | 06:51 | So now we start with that dingy color,
and we get the highlight as we
| | 06:56 | move the mouse over.
| | 06:58 | All right, so that's exactly what
it looks like over here. Excellent!
| | 07:04 | Now, we want to format this part here,
because that part is not looking how--
| | 07:09 | so it needs to have all this nice space
around and it needs this formatting here,
| | 07:13 | the header, and the body, and then the
dollar amount, in this paragraph down there.
| | 07:19 | So there's quite a bit of formatting to do.
| | 07:21 | So let's get to it now.
| | 07:27 | For this part, we want to
just do a separate section.
| | 07:30 | We'll go ahead and put in a comment here,
which is the gear description section.
| | 07:42 | The right number of equal signs there.
| | 07:47 | There's a table there
I'm going to use to select by.
| | 07:52 | And here it is and it has a td, which is
the table cell with an ID gearLeftImage.
| | 07:56 | So that's just for this image here,
and that image is going to float and also
| | 08:03 | has this class, leftFloatImage.
| | 08:06 | In this case, we're really just going
to use the td gearLeftImage here and do
| | 08:11 | the formatting from there.
| | 08:12 | All right, so td#gearLeftImage and we
are just going to give it padding of 25
| | 08:24 | pixels all around and I'll go ahead and save.
| | 08:30 | Then going back over here in the XHTML,
we see that the next part is this other
| | 08:34 | table cell that's called gear description.
| | 08:36 | So I'll go ahead and enter a
selector for that and that's going to get a width,
| | 08:47 | 290 pixels, save.
| | 08:53 | Let's just take a look at what
this looks like in the browser so far.
| | 08:56 | Well, it's starting to get there.
| | 09:00 | We see that the image looks nicely
positioned there and the paragraph
| | 09:05 | looks nicely set up.
| | 09:07 | Now we just need to enter
the formatting for this.
| | 09:09 | So we have an h3 for the
heading and that's going to get some
| | 09:18 | interesting formatting.
| | 09:26 | It's going to be the Georgia font,
font-size will be 1.2em, color is the c47500 color.
| | 09:47 | It's got a bottom border there and
it's got padding at the bottom, just 0.2em.
| | 10:02 | So it's going to be a little close.
| | 10:05 | Then the margin-left, so that its flush is zero.
| | 10:10 | So let's go take a look at that heading now.
| | 10:12 | That heading should now be
really pretty. There it is.
| | 10:18 | So you see in the reference here, it's just
like that, and in there, it's just like that.
| | 10:23 | Now let's format the rest of these pieces.
| | 10:26 | Right, so we have this paragraph here,
which is going to be in the Trebuchet font,
| | 10:30 | you'll notice in the browser.
| | 10:35 | That's the Trebuchet font.
| | 10:37 | The rest of this is all the Trebuchet font.
| | 10:39 | So we can create a selector just
for all the p's in this section
| | 10:53 | and copy and paste that Trebuchet
font from up here, and there it is.
| | 11:03 | The font-size is 0.8em.
| | 11:11 | Save that and get in the browser, we have
the Trebuchet font for all the paragraphs.
| | 11:18 | Now, the price paragraph.
| | 11:27 | That has a price selector on it.
| | 11:30 | Go ahead and look in the HTML,
you'll see that there's a class=price, so
| | 11:36 | that's a class selector.
| | 11:41 | We do here is we want to right
align it and give it some font size.
| | 11:52 | Make it a little bit larger.
| | 11:54 | So go ahead and save
there and look in the browser.
| | 11:59 | There we have the price, all
large and to the right.
| | 12:03 | So that makes this whole
thing look just like this.
| | 12:12 | See that link in here?
| | 12:13 | It's the style from the rest of
the document, and that's just fine.
| | 12:16 | So that's the left side.
| | 12:17 | Now the right side should be pretty easy.
| | 12:20 | Go ahead and get the text for the right side.
| | 12:25 | I think all this formatting is already ready.
| | 12:30 | I'm just going to copy and come in here.
| | 12:34 | Select these lines and paste.
| | 12:35 | I'll go ahead and select
those lines, and indent, and save.
| | 12:47 | You'll not see anything unique
in here so that just work just fine
| | 12:51 | and there we have it.
| | 12:52 | We have product images and they're
already all nicely indented everything
| | 12:57 | because of the styles we've applied before.
| | 12:59 | So you can see how this kind of stuff just
becomes real easy once you've done it once.
| | 13:02 | This is the power of the style sheets,
with all those styles setup for that column.
| | 13:07 | So these elements that are in that
column, they just get styled right away, and
| | 13:11 | it all just looks just right.
| | 13:13 | There is our Gear page and it looks
exactly like the reference, and the link works,
| | 13:20 | get Home and back to
Gear, and there we have it.
| | 13:23 | On to the next page!
| | Collapse this transcript |
| Creating a page containing an ordered list| 00:00 | In this lesson we are going to build the
Lifestyle page as we continue to build our website.
| | 00:07 | This is what the page looks like.
| | 00:08 | There's really not too much to it.
| | 00:11 | So let's go ahead and get started.
| | 00:13 | So here we have the template.html,
which is our starting place, and our
| | 00:19 | beginning.css, which is where we
left off our css from last time, and
| | 00:24 | liftstyle.txt, which has
our fully XHTML-ified content.
| | 00:29 | So we'll start out by doing our Save As.
| | 00:33 | I'm going to Save As lifestyle.html
and save beginning.css as main.css
| | 00:46 | and lifestyle.txt, we don't need to change
it so we are not going to do a Save As there.
| | 00:50 | Then we'll start off by changing
our title, Groundswell Lifestyle.
| | 00:58 | Then we'll move on to our
links at the top of the page.
| | 01:02 | So this is the current image and that
one will go where the lifestyle image is now.
| | 01:11 | So we'll put that there and then we'll
take the lifestyle one and we'll move
| | 01:17 | that to the beginning and we'll make
that into home, and home, and home and then
| | 01:29 | we'll change the width to 84 and I'm
going to do a cut here with Ctrl+X and
| | 01:35 | you can use Command+X on a Mac.
| | 01:38 | Make that 80 of the home image and
then go over here with the width of the
| | 01:43 | home image add Paste.
| | 01:45 | Make that the width for the lifestyle
and that makes it the current one, because
| | 01:51 | it has this -current here and it
has the height of 30 for the current.
| | 01:57 | Go ahead and change the alt to "lifestyle"
and there we have our menu should be updated.
| | 02:03 | We can go ahead and check in the
browser to make sure it got done correctly.
| | 02:06 | Drag the lifestyle.html into
the browser and there we have it.
| | 02:11 | There is our Lifestyle.
| | 02:12 | Home link works and the Gear link
works and there's our Lifestyle page.
| | 02:19 | We need to change this id banner.
| | 02:22 | Down here we make this a lifestyle and
the alt text say, "live the lifestyle".
| | 02:34 | Here we go and then finally
we can put in our content.
| | 02:40 | We get that from the text file here.
| | 02:44 | Copy with Ctrl+C and Paste with Ctrl+V
and go ahead and do the indent thing
| | 02:53 | and Save and take a look at it in
the browser, Reload and there we go.
| | 02:59 | We have the banner there and we have
the "What is this surfing lifestyle?" text.
| | 03:04 | You can see that's the text from over here.
| | 03:07 | Finally, the sidebar.
| | 03:09 | Grab this from over here.
| | 03:11 | Now there is one thing in this.
| | 03:12 | We are going to need to do a
little formatting on this ordered list.
| | 03:15 | Go ahead and copy and then paste
it in our sidebar content here.
| | 03:22 | And indent. We have that.
| | 03:28 | Go ahead and save and reload in the
browser and we can see all this on the
| | 03:35 | right-hand side is fine
except for that ordered list.
| | 03:38 | If we look on, here we see the ordered
list is formatted a little bit differently.
| | 03:42 | So let's go ahead and format that.
| | 03:45 | So in our CSS we are going to go
down to the Sidebar section, way down at
| | 03:50 | the end right here.
| | 03:53 | I'll go ahead and format the ordered
list, so we have contentRight and ol.
| | 04:01 | So that's the ordered list and we are
also going to want to format the line items.
| | 04:07 | So that will be contentRight. That's li.
| | 04:11 | So the Ordered List, that gets just
margin stuff. margin .5em, 0, 1.5em, and 1em.
| | 04:25 | So that's top, right, bottom, and left.
| | 04:29 | Then the line item I'm just going to
start from this and paste that in here
| | 04:42 | and modify from that.
| | 04:44 | So this is .8em and the color is 666
and the margin is .2em for the top and
| | 04:55 | bottom and .5em for the right and left.
| | 04:59 | So that stuff should make it look exactly
like it does in here and there we have it.
| | 05:06 | Now if you are using Internet Explorer,
which is statistically a number of you are,
| | 05:11 | you will notice that this looks a
little bit different in Internet Explorer.
| | 05:14 | So I'm just going to take a
moment and talk about that.
| | 05:16 | I'll bring up Internet Explorer and drag
our document in there and take a look.
| | 05:23 | You notice this looks
significantly different in Internet Explorer.
| | 05:26 | This is because Internet Explorer
doesn't handle the left margin on
| | 05:30 | ordered lists in the same way this
Firefox and actually the rest of the
| | 05:34 | browser community does.
| | 05:36 | Rest of the browser community follows the
standard and Internet Explorer does not.
| | 05:42 | So the compromise is we can make this
look passible in Internet Explorer and
| | 05:48 | have it look okay in Firefox.
| | 05:51 | In actuality, I would love for this
margin to be a little bit farther over to
| | 05:54 | the left in Firefox.
| | 05:55 | But the truth is if you make it
farther over this way in Internet Explorer or
| | 05:59 | I make it farther to left in Firefox, one or
the other of them is going to suffer terribly.
| | 06:06 | So this is the compromise
that we have come up with here.
| | 06:09 | So that's our page.
| | 06:11 | You can certainly choose a different
compromise if you prefer and that's a
| | 06:14 | choice that every web designer has
to make when they deal with having to
| | 06:19 | support the browser that's 800-pound
gorilla in the market and you are wanting
| | 06:24 | to make their pages attractive and
work well on the browsers that actually
| | 06:29 | follow the standard.
| | 06:30 | So those are the choices we have to
make and this is the choice that I made and
| | 06:34 | you can certainly make different
choices and most people do. In any event,
| | 06:38 | there we are and that's our
Lifestyle page and next up is the Video page.
| | Collapse this transcript |
| Creating a page containing video| 00:00 | In this lesson, we're going to create
the Videos page and this is really the
| | 00:04 | final page of our website.
| | 00:06 | You'll notice that this has an
embedded YouTube video in it and as I wave
| | 00:10 | my mouse over these things, you get all
the little Flash doodads that YouTube embeds.
| | 00:15 | So we'll learn how to do that.
| | 00:17 | It's very easy to do.
| | 00:18 | It provides free hosting for your
videos and all kinds of features that would be
| | 00:23 | difficult to provide on your own.
| | 00:25 | So it's a very popular way to
embed videos in a webpage these days.
| | 00:30 | So this is our Videos page and this is
what it will look like when we're done.
| | 00:35 | So, let's get started.
| | 00:38 | Here in our text editor we have the
template file and you'll notice this is in
| | 00:44 | the Videos folder under the Exercise Files.
| | 00:47 | So here's our template, here's our
beginning.css and here's our text file.
| | 00:52 | So we'll go ahead and start with our
Save As, save as videos.html and we'll save
| | 01:01 | our CSS as main.css.
| | 01:10 | The videos.txt we do not need to save
as anything because we're not going to
| | 01:13 | write to it. We're just
going to be reading from it.
| | 01:17 | First thing we do is change the title.
| | 01:19 | That's going to say Groundswell TV.
| | 01:24 | Then we're going to do our menu, so we're
going take this image and move it down here.
| | 01:31 | Then we're going to take the link and
move it up there and change this to home
| | 01:40 | and change this to home, change this to home.
| | 01:47 | This becomes 80 and this
one down here becomes 84.
| | 01:53 | This becomes videos and finally
this becomes videos over here.
| | 01:59 | There we're done.
| | 02:03 | So we'll save that, go ahead
and test it in the browser.
| | 02:10 | So we need to load up the Videos
page in the browser and there we are.
| | 02:15 | We have our menu and everything works.
| | 02:23 | That's our Videos page.
| | 02:24 | Now we want to change our ID
banner. That's right here.
| | 02:28 | Change home_banner to videos_banner and
we'll save that and reload the browser.
| | 02:35 | There we have it, Swells & Vision.
| | 02:37 | Go ahead and put in the
alt text, "swells and vision."
| | 02:46 | Now we'll go ahead and do the content.
| | 02:49 | So we have our videos text file.
| | 02:51 | This is really going to be easy here
just a copy and paste and copy and paste.
| | 03:06 | That's really easy.
| | 03:07 | Go ahead and do the indent.
| | 03:09 | Let's take a look at this in
the browser and there we have it.
| | 03:17 | There is our Groundswell TV and there is our
Video Clips. Now there's something missing.
| | 03:21 | Oh, yeah, there is a video here. Ha-ha.
| | 03:23 | So this video is on YouTube and I've
got the YouTube page loaded up here
| | 03:26 | with the video on it.
| | 03:27 | You can see this guy surfing here.
| | 03:32 | So we want to copy and paste this.
| | 03:34 | YouTube provides this nice little Embed link
and they also provide a way to customize it.
| | 03:39 | So you see the little Gear icon there,
I'm going to click on tha,t and we get
| | 03:44 | some different options.
| | 03:45 | I always like to include
the Enable delayed cookies.
| | 03:49 | I'm going to start with that.
| | 03:53 | YouTube normally provides cookies to
the browser for some of its features and
| | 03:57 | what this does is it prevents it from
giving cookies to the browser when the
| | 04:02 | video is embedded on a page
that's not on the YouTube.com domain.
| | 04:08 | So what this does is it delays any
cookies until somebody clicks on the link
| | 04:12 | to get to YouTube.com.
| | 04:14 | So viewing the movie on your website
will not give cookies and I like that.
| | 04:20 | So I uncheck the Include related
videos, which is normally checked.
| | 04:24 | So that way at the end of the movie,
you don't get the related videos thing.
| | 04:28 | I also don't click on Show Border.
| | 04:30 | Now notice the object width is 853, so we
want it to be the smallest possible size.
| | 04:36 | You see that changes in
there when we click on this.
| | 04:39 | Now we can just copy and come over here
to our text editor and paste it in here.
| | 04:48 | It will go right here. There it is.
| | 04:52 | Oh my God! Look how long that is.
| | 04:54 | It's 464 columns wide and
that's a bit longer than what we'd like.
| | 04:59 | Now you could just leave it like this and
that would be fine and it would show up.
| | 05:03 | Let me go and show you what
that looks like on our page.
| | 05:06 | I'm just going to close the
YouTube page there now and reload this.
| | 05:09 | Before I chose just the movie, it's
going to show us this security warning.
| | 05:12 | If you're testing this in Internet
Explorer, you'll get a similar message,
| | 05:15 | but it'll look a bit different.
| | 05:16 | The security message will be at the top
of the browser window. You just need to
| | 05:20 | click on that security message
and select Allow Blocked Content.
| | 05:25 | I'm going to detour now and
show you what to do with this.
| | 05:29 | Now what this means is that you're
watching content in Flash but the content
| | 05:34 | is off on a web server someplace and the page
you're looking at is on your local computer.
| | 05:39 | So if you're following along, you'll
get this warning or something like it.
| | 05:43 | That's because the HTML that you're
looking at is on your local computer, but
| | 05:47 | the Flash content is coming from
the YouTube servers out there in the
| | 05:51 | Internet someplace.
| | 05:53 | Now if the page was loaded on a web
server someplace on the Internet, you would
| | 05:56 | not get this warning.
| | 05:57 | You'll only get this when the page is loaded
on your local network on your local computer.
| | 06:03 | So you could just click on OK and you
also get this warning, because I took a
| | 06:07 | long time and that's okay.
| | 06:09 | Do you want to abort the script? No.
| | 06:11 | So now we get the video, okay?
| | 06:13 | But if I go and reload the page
again, you get the warning again.
| | 06:16 | So I'm going to click on Settings.
I'm going to show you what to do with this.
| | 06:19 | This loads a webpage over on the
Macromedia website, which is at Adobe, and
| | 06:26 | it allows me to set an exception.
| | 06:28 | So I'm going to edit locations, add location.
| | 06:31 | This is the file on my desktop.
| | 06:33 | I'm going to go ahead and copy. I'm
pressing Ctrl+C on the PC or press Command+C
| | 06:37 | on a Mac and Ctrl+V here,
Command+V on a Mac and press Confirm.
| | 06:43 | Now I have this exception.
| | 06:44 | I have two of them in here.
| | 06:46 | One is for the other location where I have
this loaded on my computer. That's okay.
| | 06:50 | You'll only have one and then I can
close this and now whenever I hit Reload here,
| | 06:54 | I'll just get the video.
| | 06:56 | Now, back to what we were saying.
| | 06:58 | Notice how big this is on the page.
| | 07:02 | So I want to edit that down and I
also want to make that XHTML a little bit
| | 07:06 | prettier, because that matters to me.
| | 07:08 | That may not matter to you at all.
| | 07:10 | So I'm going to edit this a little bit.
| | 07:13 | Go ahead and break there and I'm
going to go ahead and break here.
| | 07:19 | You notice that this param is a closed
param, so actually I'm going to change it
| | 07:25 | to one of these because
that's allowable in XHTML.
| | 07:28 | I'm going to do the same thing here.
| | 07:31 | Now, I'm doing this because it matters to
me and for most people it may not matter.
| | 07:36 | It also makes a little bit easier to
work with and I'm going to be working
| | 07:39 | with it a little bit, because I'm not
just sort to leave anything alone if I can
| | 07:45 | do something with it.
| | 07:47 | So this just takes a moment.
| | 07:50 | We have our width and height here,
which is where I'm going with all this.
| | 07:54 | Again, with the embed you can collect that.
| | 08:01 | So now I have my content like this and
I'm going to go ahead and just because
| | 08:07 | I'm like that I'm going to intend
a little bit there. All right.
| | 08:10 | You notice that this has not
changed how it works at all. All right?
| | 08:14 | These are all things that--
all I've done is formatted it.
| | 08:18 | So when I go and look at the video in
our page again, it's still there and
| | 08:22 | it still looks just fine.
| | 08:24 | What I'm going to do is I'm going to
change the size, because it's a little big,
| | 08:27 | so I'm going to make this 420x260.
| | 08:31 | I figured out these dimensions earlier,
and these keep the same aspect ratio.
| | 08:37 | So I'll save that and I'll go
ahead and look at it in the browser.
| | 08:43 | Now that's a much more reasonable
size and now I can do a little bit of
| | 08:47 | formatting. I want to indent it a little bit.
| | 08:50 | So again we'll go back to the browser.
| | 08:52 | I'm going to put in a div
and a closed div down here.
| | 09:03 | I'll indent this and I'm going
to give it an ID, youtubeVideo.
| | 09:12 | I'll save that and go over to the
CSS, all way down here to the end.
| | 09:19 | I'm just going to create a
section for miscellaneous.
| | 09:30 | So I know the C is silent in
miscellaneous, but somehow I've always said it as
| | 09:34 | if I were Popeye. "mis-ca-llaneous."
| | 09:52 | So that will be 20 pixels at the top
and at the bottom, 0 on the right and
| | 09:57 | 30 pixels on the left.
| | 10:00 | Go ahead and save this.
| | 10:03 | We've saved that already.
| | 10:05 | Bring it up in the browser and there we have it.
| | 10:10 | So this looks exactly like it does
in our reference site. All right!
| | 10:16 | That page is now done and working just fine.
| | 10:20 | I just want to add one thing here.
| | 10:23 | The site that we've been working
with was designed by James Williamson.
| | 10:28 | So I appreciate that.
| | 10:30 | It allowed us to have some interesting
content to work with as we showed you how
| | 10:35 | to build a website using tables for
positioning and using all the techniques
| | 10:40 | that we learned in this
course on XHTML and HTML.
| | Collapse this transcript |
| Touring the finished site| 00:00 | In this movie, I'll show you the same
site that's used in the rest of this
| | 00:03 | chapter, but this version uses CSS
for positioning instead of tables.
| | 00:08 | This will be a quick overview.
| | 00:10 | If you'd like a more complete discussion,
please see my course CSS Positioning
| | 00:14 | Best Practices here on the
lynda.com Online Training Library.
| | 00:19 | So here's the site using CSS instead
of tables, and here's the same site in
| | 00:24 | our tables version.
| | 00:25 | You can see it's pretty much the same;
there are some very slight differences,
| | 00:29 | and that's mostly due to the fact that
you can get finer grained control of your
| | 00:32 | positioning with CSS than you can with tables.
| | 00:37 | And here is the code for
this. This is the CSS version.
| | 00:41 | You will notice that there are no tables in
here at all, and here is the tables version.
| | 00:49 | You see the general look
of it is very, very similar.
| | 00:53 | It's organized pretty much the same,
| | 00:55 | only one is using tables for
positioning, and one is not.
| | 01:00 | In the CSS version, we're doing our
positioning by using these div tags; for
| | 01:05 | example we have a header div tag here
and we have one for the middle banner
| | 01:11 | and we have one for the
content, and then way down here there is one
| | 01:16 | for the sideBar.
And these are using ID selectors.
| | 01:20 | ID selectors are useful. We only have
one particular instance of a thing on the
| | 01:24 | page, and then here is the CSS for it here.
| | 01:29 | In the main.css file, there is
our outerDiv, there is our banner.
| | 01:42 | As we come down here to the mainContent,
you'll see the mainContent div, and
| | 01:47 | this one has a float:
| | 01:48 | left on it, and so that's this one right
here, and you see it contains all of the
| | 01:58 | HTML for the main side of the site.
And that corresponds to this part right here
| | 02:05 | from Welcome to
Groundswell all in this left column.
| | 02:09 | And so that's aligned to the left inside
of the outer box of the content, that's
| | 02:15 | aligned to the left using this float:
| | 02:19 | left here in the CSS.
| | 02:24 | Now when we get down to the sideBar, here is
our sideBar, so you see that this says float:
| | 02:32 | right, and we look at this in the
website. That's this part over here, starting to
| | 02:37 | the right of this vertical rule and
down to the bottom. So that's that right column,
| | 02:44 | and it's floating to the right.
The left column is floating to the left.
| | 02:49 | So in a nutshell, that's really all
there is to creating columns in CSS.
| | 02:57 | These same columns in the tables
version are used using tds inside of a tr, and
| | 03:06 | so when we get down here to contentLeft,
we have a td, and when we get down here
| | 03:12 | to the sideBar, we have another td
adjacent to it, and that's what gives it the
| | 03:18 | columns in the tables version.
| | 03:20 | So here you've seen a brief overview of
an alternate way to accomplish the same
| | 03:25 | layout using CSS instead of tables.
| | 03:27 | CSS provides some real advantages,
allowing you flexibility and control that you
| | 03:33 | don't get using tables for layout.
| | 03:35 | For more about CSS, see my other courses,
CSS for Developers and CSS Positioning
| | 03:41 | Best Practices here on the
lynda.com Online Training Library.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | My goal in creating this course was
to give you the essentials of HTML and XTML,
| | 00:05 | so you can use this technology to
build websites for yourself and for your clients.
| | 00:09 | I have shown you the different
versions of HTML and XHTML and how to specify
| | 00:14 | which version you are using.
| | 00:15 | I have shown you how to construct a
basic document template, so you can create
| | 00:19 | websites with correct XHTML, without
any more trouble than using minimal HTML.
| | 00:24 | So your websites will work consistently
on a wide variety of platforms and devices.
| | 00:29 | I have covered the most common and
useful XHTML tags and CSS techniques and
| | 00:34 | I've taken you thorough the process of
applying these techniques in a real life website.
| | 00:38 | So you can move forward with confidence,
knowing that you have what it takes to
| | 00:43 | apply your knowledge in the real world.
| | 00:45 | I've really enjoyed creating this
course for you and I sincerely hope all of
| | 00:49 | this is as useful for you
as it has been fun for me.
| | Collapse this transcript |
|
|
