IntroductionWelcome| 00:04 | Hi! I'm Bill Weinman and welcome
to HTML Essential Training.
| | 00:09 | In this course we will
explore the HTML language.
| | 00:12 | I'll start by showing you the basic syntax
of HTML including the structure of an
| | 00:16 | HTML document and how its
tags and attributes work.
| | 00:19 | I'll show you how to write text,
lists, tables, forms, and all the latest
| | 00:25 | features in HTML5 so you can build
attractive and compelling websites.
| | 00:29 | I'll show you how to use CSS and how
to embed images and other media to keep
| | 00:34 | your websites relevant
and keep your users engaged.
| | 00:37 | I'll show you how to use HTML forms on
your websites so your users can interact
| | 00:41 | and participate in your online experience.
| | 00:44 | We will be covering these topics
and much more so that you have all the
| | 00:48 | resources you need to fully take
advantage this powerful technology.
| | 00:52 | Now let's get started
with HTML Essential Training.
| | Collapse this transcript |
| Using the exercise files| 00:00 | The exercise files are designed for you to
follow along with the lessons as I present them.
| | 00:05 | You'll need to copy the Exercise Files
folder to a location on your machine where
| | 00:10 | you can use it, for
example in your Desktop folder.
| | 00:13 | Here in the Exercise Files folder
you'll find a folder for each of the
| | 00:16 | chapters in the course.
| | 00:18 | For each of the lessons, you'll make a
working copy of one or more of these files
| | 00:23 | and work with that copy.
| | 00:25 | That way if you need to start over,
you'll have the original file available to
| | 00:28 | make another working copy.
| | 00:30 | In order to edit a file, you'll
need to open it in your text editor.
| | 00:35 | You may do this in one of two ways.
| | 00:38 | Depending on your operating system and
on how your editor is installed, you
| | 00:43 | may be able to right-click or Ctrl+
Click on a Mac on the file and select Open
| | 00:49 | With and select your editor.
| | 00:52 | Alternately, you can open your editor
and select Open from the File menu and
| | 00:57 | navigate to your exercise files and
select the file and click on Open.
| | 01:03 | Likewise, in order to view the file in your
browser, you may open it in one of the same two ways.
| | 01:08 | You may right-click on it or Ctrl+
Click on a Mac and select your browser
| | 01:14 | from the context menu.
| | 01:16 | Alternately, you may open your browser
and select Open from the File menu and
| | 01:22 | then navigate to your file
and select it and click Open.
| | 01:27 | The exercise files are designed for
you to follow along with the lessons as I
| | 01:31 | present them or you may easily
follow along and create files of your own.
| | Collapse this transcript |
| What you need to know about this course| 00:00 | There are a lot of subjects that are
closely related HTML that are outside the
| | 00:04 | scope of this course like
JavaScript, CSS, CGI, and web design.
| | 00:09 | At some points out of necessity, I will
touch on some of these other subjects as needed.
| | 00:14 | There is even a chapter in here on CSS,
but ultimately it's just to support the
| | 00:19 | effort to teach the subject
of this course which is HTML.
| | 00:23 | In order to take this course and to
follow along with the exercises, you'll need
| | 00:27 | to have a good text editor.
| | 00:28 | There are a couple of
important distinctions here.
| | 00:31 | A word processor is not a text editor.
| | 00:35 | Yes, a word processor is used to edit text,
but it simply will not work for this purpose.
| | 00:40 | Editing text is only part of
what a word processor does.
| | 00:43 | It also formats text and
this is where the problem lies.
| | 00:47 | When a word processor saves a file it
saves a lot of formatting information
| | 00:51 | along with the file,
| | 00:53 | and that's what makes it
unsuitable for this purpose.
| | 00:56 | And HTML file like most programming
languages is a very specific thing.
| | 01:01 | When you add anything to it that is not HTML,
| | 01:03 | it simply will not work.
| | 01:05 | Likewise, and this is another vital
distinction, an HTML editor is not a text editor.
| | 01:12 | After you're finished with this course,
if you want to use Dreamweaver, GoLive
| | 01:17 | or some other WYSIWYG
HTML editor, go right ahead.
| | 01:20 | But it won't help you learn HTML.
| | 01:22 | The purpose of this course is to learn HTML.
| | 01:25 | So we will be typing HTML
directly into a text editor.
| | 01:28 | One more important distinction; neither
Notepad on the PC nor Text Edit on the
| | 01:34 | Mac are really capable of
editing plain text files.
| | 01:38 | Do not attempt to use either of
these editors for this purpose.
| | 01:41 | I'll be using TextWrangler on a Mac.
| | 01:44 | If you want a PC you may want to try Notepad++.
| | 01:48 | These are both free and they're both fully
capable text editors suitable for this purpose.
| | 01:53 | You'll want to have several
different web browsers available.
| | 01:56 | I try to have all the recent versions
of all the major browsers available as
| | 02:00 | well as a few old versions.
| | 02:02 | Unfortunately, different browsers
support different features and some of them
| | 02:06 | even support the same features differently.
| | 02:09 | This course was recorded at a
particular point in time and by the time you view
| | 02:13 | it, even if it's just a few weeks or
months later, the browser landscape will
| | 02:18 | have likely changed.
| | 02:20 | It's important to know how your webpages
will work in different environments and
| | 02:24 | the only way to know that is to test it.
| | 02:26 | Keep a lot of different browsers
around and try these features on them to see
| | 02:30 | how they behave differently.
| | 02:31 | This practice will serve
you well for the long term.
| | 02:34 | I tend to keep a list of
current resources on my website.
| | 02:38 | Here you'll find links to the standards,
reference sites, and resources about
| | 02:42 | what HTML features work in what browsers.
| | 02:45 | I suggest you check it out from time
to time in order to stay up-to-date with
| | 02:49 | the current state of HTML.
| | Collapse this transcript |
|
|
1. OverviewWhat is HTML?| 00:00 | HTML is the lingua franca of the web.
| | 00:04 | That is, it's the language that makes
it possible for various computers to
| | 00:07 | communicate with each other.
| | 00:08 | These computers may be on different
networks, in different countries, different
| | 00:12 | platforms, different operating systems,
desktops, mobiles, tablets, et cetera.
| | 00:16 | HTML is the common tongue.
| | 00:19 | It's what makes all of this possible.
| | 00:20 | HTML stands for Hypertext Markup Language.
| | 00:24 | Hypertext refers to the ability to create
links to other pages and other web resources.
| | 00:30 | Markup means that it's used for
creating pages of formatted text along with
| | 00:35 | images and other resources embedded in the page.
| | 00:38 | HTML was originally based on older
markup language called SGML, Standard
| | 00:43 | Generalized Markup Language.
| | 00:45 | The most recent versions of
HTML are no longer tied to SGML.
| | 00:50 | The ability to create hyperlinks
is a fundamental capability in HTML.
| | 00:54 | This is what makes the web a web.
| | 00:57 | Links can be used for many purposes and
while they were revolutionary when Tim
| | 01:01 | Berners-Lee created HTML in the
early 1990s, today this functionality is
| | 01:06 | largely taken for granted,
| | 01:07 | but without it we would have no web
and the Internet would likely still be a
| | 01:11 | geeky thing that most
people would have never heard of.
| | 01:14 | This is actually what makes HTML special
and why it's still in wide use 20 years later.
| | 01:20 | There are several
versions of HTML in common use.
| | 01:23 | The good news is all of the modern
browsers support all versions of HTML.
| | 01:28 | In fact, they go to a
great deal of trouble to do so.
| | 01:31 | Legacy HTML support is usually
referred to as quirks mode and will support
| | 01:36 | virtually anything that looks like
HTML, but keep in mind quirks mode will
| | 01:40 | result in pages that render
differently on different browsers.
| | 01:44 | So for consistent results you will want
to use good clean and consistent syntax
| | 01:49 | and the most current version of HTML
that is supported by your target platforms.
| | 01:53 | HTML 2.0 was ratified in 1995.
| | 01:56 | It was the first standardized
version of HTML and was designed to
| | 01:59 | codify existing practice.
| | 02:01 | It was released as an
Internet RFC and numbered 2854.
| | 02:06 | HTML 3.2 was the first version of
HTML to be ratified by the World Wide Web
| | 02:11 | Consortium or the W3C.
| | 02:13 | Like HTML 2, it was designed to
formalize existing best practice.
| | 02:18 | It was ratified in 1997.
| | 02:20 | HTML 4.1 was released the next year to
clean up some issues with 4.0 and HTML
| | 02:26 | 4.01 is as of the time of this
recording the latest standard version of HTML.
| | 02:31 | 14 years after the ratification HTML
4 HTML5 is still a work in progress.
| | 02:38 | Well, it's not really that simple.
| | 02:40 | When the W3C voted to stop working on
new versions of HTML in 2004, the Mozilla
| | 02:46 | foundation and Opera software formed
a new group called WHATWG or The Web
| | 02:52 | Hypertext Application Technology Working
Group to work on a new standard version of HTML.
| | 02:58 | Meanwhile the W3C was working on XHTML
2.0 intended to drive web development
| | 03:04 | into a more standards compliant world.
| | 03:06 | The web development community did not
respond well to this effort and the W3C
| | 03:11 | dropped XHTML 2 in 2009 and began
working with the WHATWG on HTML5 instead.
| | 03:19 | HTML5 is actually a group of related
technologies of which HTML is just one part.
| | 03:24 | These technologies include a number of
DOM or Document Object model interfaces.
| | 03:29 | They're typically accessed with
JavaScript including web workers, geolocation,
| | 03:33 | drag-and-drop, offline
storage, and much, much more.
| | 03:37 | The WHATWG and W3C versions of the full
HTML specifications do not always agree
| | 03:43 | and do not even have the same list of
technologies included, but they do agree
| | 03:47 | on the HTML markup and that's the
part of the specifications that we are
| | 03:52 | concerned with in this course.
| | 03:54 | This course covers HTML5.
| | 03:56 | In particular this course is
about the HTML markup part of HTML5.
| | 04:00 | This is the part of the specifications that
the WHATWG and W3C agree on and
| | 04:06 | it is supported by the latest
versions of all the major browsers on both
| | 04:09 | desktops and mobile devices.
| | Collapse this transcript |
| Examining the structure of an HTML document| 00:00 | A complete HTML document
has several important parts.
| | 00:04 | Let's take a look at what some of them are.
| | 00:06 | I'll start by making a
working copy of structure.html here.
| | 00:09 | I am pressing Command+C
and Command+V on this Mac.
| | 00:12 | You would use Ctrl+C and Ctrl+V on
a PC and I'm renaming the copy to be
| | 00:18 | structure-working, and I am
going to open it in my text editor.
| | 00:22 | I am using TextWrangler here on this Mac.
| | 00:25 | You can use whatever text editor
you like on a Mac or on a PC, or on any
| | 00:30 | platform, as long as it's a plain text
editor and not a word processor or an HTML editor.
| | 00:35 | So this is a minimal document with a
number of typical elements that you'll see
| | 00:39 | in a lot of HTML documents.
| | 00:42 | This is not the minimum allowable document.
| | 00:44 | It's just a small document with some
basic elements that you will probably want
| | 00:47 | to include in most of your HTML documents.
| | 00:49 | The purpose here is to have a
discussion about the structure of an HTML
| | 00:53 | document and many of these subjects
will be covered in more detail throughout
| | 00:57 | the rest of this course.
| | 00:58 | So here on the first line, we
have the DOCTYPE declaration.
| | 01:01 | The purpose of this is to tell the
browser what version of HTML to be expecting
| | 01:06 | in the rest of the document.
| | 01:08 | If you've seen DOCTYPE declarations before,
you'll notice that this one is very, very simple.
| | 01:13 | This is the way the DOCTYPE
declaration is supposed to look in an
| | 01:16 | HTML5 compliant document.
| | 01:18 | HTML4 and other versions of HTML have
a much more complicated DOCTYPE that
| | 01:22 | includes a DTD and things like that.
| | 01:25 | Because HTML has now been divorced
from SGML, we don't need a DTD; a DTD is
| | 01:31 | actually no longer even a valid
thing to do, and so, the purpose of this
| | 01:34 | DOCTYPE declaration has become just
to tell the browser, don't use Quirks
| | 01:39 | mode, use Standards mode.
| | 01:40 | This is a standards compliant document.
| | 01:43 | So the DOCTYPE element looks like this.
| | 01:45 | It has a left angle bracket, an
exclamation point, the word DOCTYPE in all
| | 01:49 | caps, and the word HTML separated by a space
in all lowercase and a right angle bracket.
| | 01:56 | It should be the very first thing in
your document before any comments, even
| | 02:00 | before any white space.
| | 02:02 | If it's not the very first thing,
it will work in some browsers.
| | 02:06 | It won't work in other browsers.
| | 02:07 | In particular, many versions of
Internet Explorer will fall back into Quirks
| | 02:12 | mode if that DOCTYPE is not
the very first thing in the file.
| | 02:15 | So you just put it at the very top
before any of your comments or anything else.
| | 02:19 | You get used to putting it there
and it'll do its job across the board.
| | 02:23 | The next thing in this document is a
comment, and you'll see that here on line
| | 02:27 | two, a comment is introduced by a left
angle bracket, and an exclamation point
| | 02:33 | followed by two dashes and a space.
| | 02:35 | And this is all very important,
so it's all of these pieces here.
| | 02:39 | Leaving out any of these pieces will
make it work as a comment in some browsers
| | 02:44 | and in some browsers, they won't know
it's a comment and they'll try to do
| | 02:47 | something else with it.
| | 02:48 | So it's a good idea just to always do
your comments like this with all five of
| | 02:52 | those characters, the left angle
bracket, the exclamation point, the two
| | 02:56 | dashes and the space.
| | 02:57 | And then at the end of the comment,
you have these four characters, a space
| | 03:02 | followed by two dashes
and a right angle bracket.
| | 03:05 | And again, some browsers might not
insist on the space. Some browsers might
| | 03:09 | allow white space in between some of
these things, but the point is, is that if
| | 03:13 | you want it to be interpreted as a
comment across the board, just always do it
| | 03:17 | that way and it will always work.
| | 03:19 | You can have all kinds of space and
multiple lines and things like that inside
| | 03:23 | your comment, so this all
works just fine like that.
| | 03:26 | The one thing you will want to avoid is
anywhere in your comment having two dashes.
| | 03:31 | I am going to put this in here and
you'll see that even this editor stops
| | 03:35 | interpreting the rest of the document
as an HTML document when it sees those
| | 03:38 | extra two dashes inside of the comment.
| | 03:41 | The reason for that is mired in legacy
with SGML, but the point is, is that it
| | 03:47 | confounds the parsers in a lot of
browsers, and so you'll just want to not use
| | 03:52 | two dashes right next to each
other within any of your comments.
| | 03:55 | So I am going to go ahead and get rid
of all this extra white space that we
| | 04:01 | introduced, and save it, and now we
have just our little one line comment.
| | 04:06 | Now the rest of this document
starting with this HTML tag on line four, and
| | 04:11 | going all the way down to the close
HTML tag on line 22, the rest of this
| | 04:17 | document is a tree of elements, called
a DOM tree, Document Object Model tree.
| | 04:23 | At the root of the tree is the HTML
element and you'll notice here we have an
| | 04:27 | opening tag, and tags in HTML they
have this left angle bracket and then the
| | 04:31 | name of the tag, and then any
attributes, and then a right angle bracket.
| | 04:38 | And so this tag here is an HTML tag,
and you will notice down here on line 22,
| | 04:42 | is what's called an end tag or a closing tag.
| | 04:45 | And it looks just like the HTML tag except
it has this little slash before the word html.
| | 04:50 | And so the name of this tag is HTML
and the beginning tag is formed like
| | 04:55 | that, which is the left angle bracket
and the word html, and then whatever
| | 04:58 | else goes inside there, the
attributes, and then a closing angle bracket, a
| | 05:02 | right angle bracket.
| | 05:03 | An end tag looks like this, with a
left angle bracket followed by a slash,
| | 05:08 | that's a forward slash, and the name of
the tag and then a closing angle bracket
| | 05:14 | and an end tag will never have any attributes.
| | 05:17 | So it will always be just like that,
the name of the tag followed by the
| | 05:20 | right angle bracket.
| | 05:21 | So that makes this head element a container.
| | 05:25 | So everything from the opening tag
to the end tag, including everything
| | 05:30 | in between is all part of that HTML element.
| | 05:34 | So the contents of the element includes
this head element, which starts there and
| | 05:38 | ends there, and this body element,
which starts there and ends there, and the
| | 05:42 | contents of head includes all of
these elements, meta, title, link, and the
| | 05:47 | contents of the body element includes
these two elements, h1 and p, and the head
| | 05:54 | element and the body element are
both children of the HTML element.
| | 05:59 | And so they are branches on the tree.
| | 06:01 | You could consider the HTML element to
be the root of the tree or the trunk of
| | 06:05 | the tree and head and body to be sibling
children or branches at the same level.
| | 06:12 | And so the parent of the head element
is HTML and its children are meta, title,
| | 06:18 | and link, and body can
be considered its sibling.
| | 06:22 | So the head element is where you put things
that are head matter inside of the document.
| | 06:26 | These are things that apply to the
entire document and so they include this meta
| | 06:31 | tag which gives an
information about the document.
| | 06:35 | There is the title tag which describes
the title that's going to go in the Title
| | 06:39 | Bar of the browser, and this link tag,
which links other related documents, in
| | 06:43 | this case, a CSS document, a style sheet,
and even though I've specified this
| | 06:48 | style sheet here, it's not actually in
the folder and so it won't load, and we'll
| | 06:52 | see as we bring this up in a browser
later on that that's not going to affect
| | 06:56 | the document. That missing CSS
file is just going to be ignored.
| | 06:59 | And then inside the body we have an h1
element which defines a header and that
| | 07:04 | will be displayed bold, and the p
element which describes a paragraph.
| | 07:09 | So let's take a look at this in our
browser, and here's Firefox, and I am just
| | 07:15 | going to say File > Open.
| | 07:16 | I am going to navigate to my exercise
files in Chapter 01, and here's
| | 07:20 | structure-working.html.
| | 07:21 | This is the document we are looking
at, and I am going to open that up.
| | 07:25 | You see here is our title
HTML Document Structure.
| | 07:27 | If I look at it in the editor, there it
is in the title element, HTML Document
| | 07:32 | Structure, so that shows up here in the
Title Bar of the browser, and here's our
| | 07:36 | h1 element and our p element,
and those are right here h1 and p.
| | 07:43 | So these are the major parts of an
HTML document and many of these topics are
| | 07:47 | discussed in detail
throughout the rest of this course.
| | Collapse this transcript |
| Understanding tags and containers| 00:00 | Tags form the basis of most HTML, so
let's take a moment and see how they work.
| | 00:05 | Let's make a working copy of structure.html
from Chapter 01 folder
| | 00:10 | in our exercise files.
| | 00:11 | I am going to name that structure-working.html,
and I am going to open it in my text editor.
| | 00:19 | I am using TextWrangler here on this Mac.
| | 00:22 | You can use any text editor that you
like or any platform that you like as long
| | 00:26 | as this is not a word
processor or an HTML editor.
| | 00:29 | You want to make sure it's a text
editor that doesn't add anything, any weird
| | 00:33 | formatting characters or
something to the document.
| | 00:36 | So this is a simple HTML document and you
will notice that it has a number of tags in it.
| | 00:42 | The DOCTYPE at the top looks like
a tag and is actually not a tag.
| | 00:47 | That's just the DOCTYPE declaration as
its own syntax, its own format and its
| | 00:51 | own rules, and that's not what
we're talking about here in this movie.
| | 00:55 | So for example, let's take a
look at this title tag here.
| | 01:00 | So the tag itself consists of the left
angle bracket and the name of the tag,
| | 01:06 | which is the word title, and a right
angle bracket, and that creates the tag
| | 01:11 | that's called title.
| | 01:13 | You will notice that there is another
tag here that looks just the same except
| | 01:17 | that it has this extra little slash
character there between the left angle
| | 01:21 | bracket and the name of the tag, and
that's called an end tag, and so the
| | 01:26 | title element is everything from the
beginning of the title begin tag to the
| | 01:30 | end of the title end tag, and everything in
between including the contents of the element.
| | 01:36 | So the element itself is that whole thing.
| | 01:40 | So the title element is what we call a
container because it has a begin tag and
| | 01:44 | an end tag and it has contents.
| | 01:47 | In contrast, this meta tag
up above is not a container.
| | 01:51 | It's what's called a standalone tag and
so you see it starts with the left angle
| | 01:55 | bracket and it has the name of the
tag, and then it has some attributes and
| | 02:00 | values and we'll get into that later.
| | 02:02 | And then instead of an end tag,
it has this shortcut over here.
| | 02:06 | We are going to talk about that a little bit.
| | 02:09 | The other way to do this would be like
this, with a begin tag and an end tag and
| | 02:15 | nothing in between. So that makes
it an empty tag, and that's fine.
| | 02:19 | You can certainly do it that way, but
borrowed from XML and from SGML, is this
| | 02:26 | shortcut with a slash and a right angle
bracket and that means this is an empty
| | 02:31 | tag and let's just pretend that
it has an end tag and no content.
| | 02:36 | Now technically in HTML,
that's not even required.
| | 02:41 | You could just do this.
| | 02:42 | Just have the meta tag like that,
without any end tag and without any shortcut,
| | 02:47 | and that's perfectly acceptable. It's
perfectly legal and it works just fine in HTML.
| | 02:53 | I tend to go the extra mile and use the
shortcut because occasionally what HTML
| | 02:59 | I write, may end up in the context of
XHTML, which is an XML version of HTML, and
| | 03:06 | it's almost exactly the same as HTML,
only it's stricter about some things.
| | 03:12 | And so I tend to do those some things
that it's stricter about even in my HTML,
| | 03:17 | just to make it less trouble if and when I ever
have to use this same code in an XHTML context.
| | 03:23 | It doesn't cost me anything
to type the extra characters.
| | 03:26 | It doesn't cost me anything to
remember a few extra rules, and so I just do it
| | 03:31 | and it makes it easier for me in the long run.
| | 03:33 | The HTML standard has a word for this.
| | 03:36 | It's called Polyglot code.
| | 03:37 | It's code that will work in either context, in
either the HTML context or the XHTML context.
| | 03:44 | Now the other thing we'll notice
about this meta tag is that it has what's
| | 03:49 | called an attribute.
| | 03:50 | The attribute in this case is charset,
C-H-A-R-S-E-T, and the value is UTF-8,
| | 03:57 | and you notice it has an equals sign
here, so the name of the attribute is
| | 04:01 | followed by an equals sign and the value,
and you notice that I have the value in quotes.
| | 04:07 | So tags have attributes to provide
necessary information for implementing the
| | 04:11 | tag whatever that tag may be. In this case,
this meta tag is here to describe the
| | 04:16 | character set of the document and the
character set of the document is UTF-8, and
| | 04:20 | so we have the name of the tag meta,
the name of the attribute charset and the
| | 04:25 | value for that attribute which is UTF-8.
| | 04:28 | You'll notice that I have
quotes around the string UTF-8.
| | 04:34 | The quotes are technically optional in HTML.
| | 04:37 | I could do it like this and it would be
perfectly legal HTML and it would work,
| | 04:42 | and the browser would recognize it,
and everything would be hunky-dory.
| | 04:45 | But I tend to use the quotes and again
this is one of these Polyglot things.
| | 04:50 | It makes it legal in the XHTML context.
| | 04:54 | In XHTML, the quotes are not
optional. They are required.
| | 04:57 | The only other rule about the quotes
is that if you use the quotes, your
| | 05:01 | beginning quote and your
ending quote have to be the same.
| | 05:04 | I can't use a double quote to begin
with and a single quote to end with.
| | 05:08 | That won't work. Instead, if I am using
a double quote at the beginning, I have
| | 05:13 | to use double quote at the end, or as in
the case of this language attribute up
| | 05:17 | here, if I am using a single code at the
beginning, I have to use a single quote at the end.
| | 05:23 | So just like with the shortcut end tag,
I pretend that these quotes are a rule.
| | 05:29 | I always try to remember to put them in
and sometimes I actually do forget, but
| | 05:33 | I always try to remember to put them
in because it's going to make my job
| | 05:37 | easier in other contexts.
| | 05:39 | So again I am using the Polyglot
rules, which is HTML, but with the more
| | 05:43 | stricter rules that make it legal XHTML as well.
| | 05:47 | Tags are the basis of HTML so it's
important to understand how they are
| | 05:51 | properly constructed.
| | 05:52 | Using good form and creating your tags
will go a long way toward making your
| | 05:56 | HTML portable across devices, contexts,
and even time as future versions of
| | 06:02 | HTML are developed.
| | Collapse this transcript |
| Exploring content models in HTML5| 00:00 | In previous versions of HTML there
were two basic categories of elements;
| | 00:04 | Block Elements, to find areas of a
document and Inline Elements would flow with text.
| | 00:10 | In HTML5 this concept is expanded
into several overlapping categories.
| | 00:15 | Content models define what types of
content are expected in certain contexts.
| | 00:20 | A given element may only have content that
matches the requirements of its content model.
| | 00:25 | An element's content model may include
zero or more categories of content, and
| | 00:30 | an element may also belong
to zero or more categories.
| | 00:34 | In HTML5 there are seven content models.
| | 00:37 | These content models overlap each other,
that is, some elements may belong to more
| | 00:42 | than one Content model.
| | 00:44 | Most elements that are used in the
body of a document are Flow Content.
| | 00:48 | This includes text, paragraphs, headings,
lists, hyperlinks, images, embedded
| | 00:53 | media, and well just about everything.
| | 00:55 | You'll notice in our Venn diagram the
Flow Bubble encompasses almost all the
| | 01:00 | other bubbles except part of the metadata.
| | 01:03 | Phrasing Content includes the text
of the document as well as elements
| | 01:07 | that markup that text.
| | 01:09 | This includes images, hyperlinks,
form elements, text markup like B and I
| | 01:13 | elements, and pretty much
anything else you can put in a paragraph.
| | 01:17 | Heading Content includes the heading
elements, h1 through h6, and the new h group element.
| | 01:24 | Sectioning Content includes the new
sectioning elements; article, aside, nav, and section.
| | 01:30 | Embedded Content is content that
imports another resource into the document or
| | 01:35 | content that is otherwise inserted into
the document; this includes video, audio,
| | 01:39 | flash, other plug-ins as well as
images, canvas, and even math objects.
| | 01:45 | Interactive Content is content
that is specifically intended for user
| | 01:49 | interaction like hyperlinks, form
elements, menus, and even media if it has
| | 01:55 | the controls attribute.
| | 01:56 | Metadata Content is content that sets
up the presentation or behavior of the
| | 02:01 | rest of the content, or that sets up the
relationship of the document with other
| | 02:05 | documents, or that conveys
other out-of-band information.
| | 02:09 | These seven content categories represent
the bulk of the content models used in HTML5.
| | 02:15 | Understanding these will help you to
write conforming documents that'll be
| | 02:19 | portable and maintainable well into the future.
| | Collapse this transcript |
| Looking at obsolete elements| 00:01 | HTML5 specifies a number of
elements and attributes as obsolete.
| | 00:05 | The specification does not use the
word deprecated for these features because
| | 00:08 | browsers must still support them and
because they're already in wide use.
| | 00:13 | Instead, they're referred to as obsolete
and we're encouraged to stop using them.
| | 00:18 | This is a list of obsolete elements.
| | 00:20 | The functionalities of many of these
elements are better accomplished with CSS
| | 00:24 | and others have been replaced
with new elements or new features.
| | 00:28 | For example, the applet element has been
replaced with the embed and object elements.
| | 00:33 | The frames feature has been replaced
with iframe, and many of these features are
| | 00:37 | better accomplished with CSS including
basefont, big, blink, center, and font.
| | 00:42 | Like the list of obsolete elements, many
of these obsolete attributes are better
| | 00:47 | accomplished with CSS.
| | 00:48 | For example, the name attribute on
the a element has a target for URL
| | 00:52 | fragments, is better accomplished with
the id attribute which is also used as a
| | 00:57 | unique identifier by CSS.
| | 01:00 | The link, alink, vlink, text and bgcolor
attributes on the body element and also
| | 01:05 | in tables are better accomplished with CSS.
| | 01:08 | The align attribute on many
elements is better accomplished with CSS.
| | 01:13 | Cellspacing and cellpadding attributes
for the table element along with most
| | 01:17 | table formatting is
better accomplished with CSS.
| | 01:21 | A complete list of obsolete features
along with rationales and conforming
| | 01:25 | alternative features can be found
on the WHATWG website at this URL.
| | Collapse this transcript |
|
|
2. Fundamentals of HTMLUnderstanding whitespace and comments| 00:00 | Whitespace is a term that describes a
class of characters that do not typically
| | 00:04 | display on a screen or a page.
| | 00:06 | This includes spaces, tabs, new lines,
and a few other more obscure characters.
| | 00:11 | Let's take look at how HTML handles whitespace.
| | 00:14 | We'll start by making a
working copy of whitespace.html.
| | 00:18 | And I'm going to name this whitespace-working.html,
and I am going to open it in my text editor.
| | 00:26 | I'm also going to open in a browser so
we'll just go ahead right now and open
| | 00:30 | this in the browser.
| | 00:32 | And you see it just has a couple of lines of
text and the title text example up at the top.
| | 00:38 | And if we look in the HTML file we
see there is our title tag on line 7 and
| | 00:43 | these two paragraphs on line 13 and line 16.
| | 00:45 | Now you'll notice that there is
actually two lines of blank space between the
| | 00:49 | paragraphs, on lines 14 and 15, and yet
when you look at it in the browser there
| | 00:55 | is really just one line of space between them.
| | 00:57 | In fact, I can come in here and I can do
that and put in a bunch of lines of space,
| | 01:02 | I'll save that and reload in the
browser, and you see it doesn't change at all.
| | 01:06 | So this is a hint of how
HTML handles whitespace.
| | 01:10 | You'll notice whitespace
throughout this document.
| | 01:12 | You see there is a blank space here.
| | 01:14 | There is a blank line here.
| | 01:16 | There is blank spaces in front of a lot
of these tags so that they are indented,
| | 01:20 | so that we have some structure in our document.
| | 01:23 | And in fact I can just insert a whole
bunch of spaces right here, when I save
| | 01:27 | this and reload it, you'll notice
nothing changes in the document.
| | 01:30 | So HTML treats whitespace in a very special way.
| | 01:35 | For the most part it takes as many
sequential items of whitespace as you can
| | 01:39 | throw at it, be they spaces or new lines
or tabs, and it folds them all into one
| | 01:47 | space just as if I had just done that.
| | 01:49 | It makes no distinction between
vertical space and horizontal space, in other
| | 01:54 | words, new lines, spaces, tabs,
are all treated exactly the same.
| | 01:58 | It also does a couple of
other interesting things.
| | 02:00 | I am going to go ahead and close up
some of the space here, and you'll notice
| | 02:05 | this space here between the opening
<p> tag and the first letter of the
| | 02:11 | paragraph. In fact, I could put that on
a different line and I could indent it
| | 02:15 | and I can do the same over here,
and it'll treat it exactly the same.
| | 02:19 | In this case, at the beginning of a line
of text, it actually removes all of that
| | 02:24 | space as if there were
there no space there whatsoever.
| | 02:27 | You'll notice in our document here, I am
going to hit Reload, you'll notice that
| | 02:31 | there is absolutely no space at all at
the beginning of that paragraph, just the
| | 02:36 | indent that's the normal
default for the browser.
| | 02:40 | You'll also notice that
comments are treated as whitespace.
| | 02:43 | I can come in here in the middle of
this paragraph and I can put in a bunch of
| | 02:48 | blank lines and I can put in a comment,
and I save that in reload it and you'll
| | 02:52 | notice that nothing changes in our document.
| | 02:54 | Now there may be cases where you
actually want the whitespace to display and
| | 02:59 | let's just put in a bunch of whitespace here.
| | 03:02 | We'll save this, and I'm going to
change this <p> tag to say pre, P-R-E, so
| | 03:08 | we're pre instead of p.
| | 03:11 | So pre stands for Pre-Formatted Text,
and if I save this and reload it in the
| | 03:15 | browser you'll notice that now our
text is exactly as we formatted at there.
| | 03:19 | All of those blank spaces are being
displayed, and you'll also notice that the
| | 03:24 | text is displayed in a fixed space font
as opposed to the default proportional
| | 03:31 | space font that you'll get with a <p> tag.
| | 03:33 | So if you actually want to be able to
display the whitespace you have a way to do that.
| | 03:38 | So HTML handles whitespace differently
than you might be used to with a word
| | 03:42 | processor or layout tools.
| | 03:44 | Sequential whitespace is typically
all folded into one space, and a special
| | 03:48 | element called pre is provided to
display whitespace if you need it.
| | Collapse this transcript |
| Displaying text with paragraphs| 00:01 | In HTML, paragraphs are
typically used to display text.
| | 00:04 | Let's go ahead and make a working copy
of paragraph.html and I'll rename this to
| | 00:12 | paragraph-working.html and I am
going to open it in my text editor.
| | 00:15 | And I am going to go ahead
and also open it in my browser.
| | 00:19 | I'm using Firefox here.
| | 00:21 | And I'm just going to move the
browser over to the right side of the screen
| | 00:25 | and drag the editor over here a little bit, so
we can see both of these things at the same time.
| | 00:32 | I am going to go up here and I am going
to turn on Soft Wrapping in my editor so
| | 00:36 | that you can see this.
| | 00:37 | So here we can see we have a couple of
paragraphs down here and one of them is a
| | 00:41 | little longer than the other one.
| | 00:42 | And paragraphs are created with the p element.
| | 00:47 | So you notice there is a begin tag
and an end tag and the element is named
| | 00:51 | p, just one letter p.
| | 00:53 | And over here in the browser that's
displaying as two separate paragraphs, one
| | 00:56 | of them is there and one of them is there.
| | 00:59 | And paragraphs are typically displayed
with some blank space between them, of
| | 01:03 | course that can all be modified using CSS.
| | 01:06 | The content of a paragraph is
typically text, but it may also contain any
| | 01:11 | inline content, for example, I could
take the word formatted here and I could
| | 01:16 | make it into a link.
| | 01:17 | I am just going to put it on a separate line.
| | 01:20 | I am going to type a href= and just an
empty link at this point and close the a
| | 01:25 | tag at the end there, and I am going to
save that and come over here into the
| | 01:29 | browser and reload it, and you
see we get a little link there.
| | 01:33 | And so that a element is considered inline
content and so it's allowed inside a paragraph.
| | 01:38 | We'll discuss inline versus block
content later in this chapter, but for now
| | 01:42 | just understand that inline content
is typically what goes in a paragraph.
| | 01:46 | It's also possible to put text outside
of a paragraph, so I can just come up
| | 01:50 | here and I can say this is a paragraph of text.
| | 01:54 | And many browsers will treat that
very similar to an actual paragraph.
| | 02:00 | This is not recommended.
| | 02:01 | It's much easier to format text when
it's within the paragraph element or
| | 02:05 | another block element.
| | 02:06 | I am going to go ahead
and delete that and save it.
| | 02:10 | In previous versions of HTML, it
was common to format paragraphs using
| | 02:14 | attributes on the <p> tag.
| | 02:16 | For example, I could say align="right"
like that, and if I save that and reload
| | 02:24 | it in the browser, you'll notice that
this paragraph is now right-aligned and
| | 02:28 | it's ragged on the left.
| | 02:30 | And if I do this with the other
paragraph instead you can see it a little bit
| | 02:35 | easier because that one is a longer paragraph.
| | 02:37 | So you can see we have that ragged left
there and now this paragraph is ragged
| | 02:41 | right because I took that out.
| | 02:43 | Now formatting paragraphs this way
still works, of course because browsers are
| | 02:48 | designed to accept legacy HTML, but
it's not recommended and it's actually
| | 02:52 | considered obsolete with
the latest version of HTML.
| | 02:55 | The better way to do this is with CSS.
| | 02:57 | I am just going to show you this
right now even though we'll cover CSS in a
| | 03:02 | little more detail later on.
| | 03:03 | If I say style= and I can say "text-align:
| | 03:09 | right" like that, and if I save that
and come over here to the browser and
| | 03:13 | reload, see nothing changes.
| | 03:14 | It's still right-aligned.
| | 03:17 | So CSS is a former, flexible, and
consistent way to do this and we'll cover some
| | 03:22 | basic CSS later in the course, or you
can see my CSS for Developers course for
| | 03:27 | more detail about CSS.
| | 03:29 | So paragraphs are created with the p element.
| | 03:31 | Using the p element, it's easy to
create paragraphs and to format them using CSS.
| | Collapse this transcript |
| Applying style| 00:00 | Generally speaking, formatting text and
other elements is best accomplished with CSS.
| | 00:05 | This course is really about HTML, but
for better or worse, HTML has abandoned
| | 00:10 | many of its formatting and presentation
features and has become dependent upon
| | 00:14 | CSS for these capabilities.
| | 00:17 | There's a brief primer on CSS later in
this course and I have a more complete
| | 00:21 | course on this subject in the lynda.com
online training library called CSS for
| | 00:25 | Developers, but at this point there are a few
things you need to know about CSS and styles.
| | 00:31 | Let's start by making a working copy
of style.html and I'll name my copy
| | 00:37 | as style-working.html.
| | 00:40 | I am going to open it in my text editor,
and I am going to go ahead and also
| | 00:45 | open it in my browser, and there we
have, side-by-side, we have the text
| | 00:50 | editor on the left here and you notice I have Line
Wrapping on, and so we can see all of this.
| | 00:56 | And we have same document opened in the browser, and
| | 01:00 | you notice that the browser
is displaying this document.
| | 01:03 | It's just got a header and a couple of
paragraphs and it's displaying it with
| | 01:06 | all of its default styling, its
default formatting for the browser.
| | 01:09 | We haven't added any style to this yet.
| | 01:11 | So we'll go ahead and add some style,
and so here in our exercise files in the
| | 01:16 | Chap02 folder we have a file called main.css.
| | 01:20 | I am going to open that
in my text editor as well.
| | 01:23 | I am just going to show it to you real quick.
| | 01:26 | It's a pretty simple stylesheet.
| | 01:27 | It basically just resets things so that
they have a different set of defaults,
| | 01:31 | but a more consistent set of
defaults than those of the browser.
| | 01:34 | This way it will display the same way
in a number of different browsers on a
| | 01:38 | number of different platforms.
| | 01:40 | So if I want to link that stylesheet in
I come in here in my HTML document and
| | 01:45 | in the head section I am going to
put it right after the title element.
| | 01:49 | I am going to type link rel="stylesheet"
type="text/css" href="main.css" and I'm
| | 02:10 | going to close the element with
the shortcut for an empty element.
| | 02:14 | I am going to save that.
| | 02:16 | So the most common way for an HTML file
to incorporate styles is to link to an
| | 02:22 | external CSS stylesheet.
| | 02:24 | And this link tag is the way that that's done.
| | 02:27 | So the link tag goes in the head section,
inside of the head element and that's the syntax.
| | 02:34 | The rel attribute has stylesheet, which
tells that the relationship between this
| | 02:39 | document and the document that's
being included is that it's a stylesheet.
| | 02:44 | And the type is text/css
which is the Mime type for CSS.
| | 02:48 | You just always going to
use that string for type.
| | 02:50 | And href refers to where the location
of the file is, and in this case it's
| | 02:56 | main.css in the same folder
as the style-working.html file.
| | 03:01 | So we'll save that and then we are
going to bring up the browser and press
| | 03:05 | Reload, and you see that our
document now changes in it.
| | 03:09 | Now it has the style from the stylesheet.
| | 03:12 | So you see the text is in a different
font and the header is in a different
| | 03:17 | font, and that's because
it's using this stylesheet.
| | 03:20 | Now for some purposes it may be more
convenient to put the stylesheet within the document.
| | 03:25 | You can do this with the style
element also within the head.
| | 03:29 | So I am going to go ahead and I am going
to take out this link and I am going to
| | 03:34 | say style and close style.
| | 03:35 | So we have a style element that's a
container and inside of here I am just
| | 03:40 | going to say p and color: green.
| | 03:43 | And again, we'll learn more about CSS
later on in this course and there are
| | 03:47 | other courses on lynda.com
that teach you about CSS.
| | 03:50 | So if I go ahead and save this and
reload in the browser, you'll see that we're
| | 03:55 | back in the original formatting
except that now these paragraphs are green
| | 03:59 | because I told it that all of the
p elements will have green text.
| | 04:04 | Now instead I can say that the h1
elements should have green text, and so I just
| | 04:09 | change that to h1, and I save this, and
reload in the browser, and you see now
| | 04:13 | the heading has green text. Or I am going to
go ahead and put that back to the p element,
| | 04:18 | sometimes it's more convenient to
apply the style to an individual element.
| | 04:23 | So you can use the style attribute for this.
| | 04:25 | if I come down here to the h1 element
and I say style= and I can say color and
| | 04:31 | make it blue, and if I save that and
reload, now the header is blue and all of
| | 04:37 | the other text in the paragraphs is green.
| | 04:39 | On the other hand, and I am just
going to undo that for a moment,
| | 04:43 | you may want to apply a style to a
number of elements, so you can use the class
| | 04:47 | attribute like this.
| | 04:48 | Come up here and I'm going to just change
this and I am going to say .blue and color all in
| | 04:55 | blue like that, and all elements support the
style and class attributes.
| | 05:00 | So I can just come down here and I can
say class="blue" like that, and I can
| | 05:05 | maybe do the same on the h1.
| | 05:07 | I can say class equals blue,
and it will apply this style.
| | 05:11 | It's named blue with a dot,
the dot is a class selector.
| | 05:14 | So whenever we use class, it matches
with anything with the dot that has the
| | 05:19 | same name, so that's blue and
this is blue and this is blue.
| | 05:22 | So when I save this and come over here
to the browser and reload, we see that we
| | 05:26 | get the header and that
first paragraph are in blue.
| | 05:29 | On the other hand, you may want
to style just a particular element.
| | 05:33 | So I am going to come in here and I am
going to use an ID selector which is the
| | 05:38 | pound sign and I am going to say x01.
| | 05:41 | What an ID selector does, let me give
this a font-style of italic and save that.
| | 05:47 | What an ID selector does is it allows
you to select an individual element;
| | 05:51 | an ID selector can only be applied
to one element, whereas class could be
| | 05:56 | applied to a number of different elements.
| | 05:59 | So this is class blue and this is class blue.
| | 06:02 | If I have an ID that says x01, only one
element in the entire document can have that ID.
| | 06:09 | So here I say id=x01 and when I reload
this that paragraph is still blue because
| | 06:14 | it's got the class="blue," but it now
has italic because it's that id="x01"
| | 06:20 | which is only that
element and it's set to italic.
| | 06:23 | So I am going to go ahead and I am going
to remove all of these styles, and I am
| | 06:28 | going to save the document.
| | 06:29 | I am going to show you a couple of
special tags that are designed to allow style
| | 06:33 | to be applied to ranges of a document.
| | 06:35 | So the div tag, I am just going to
come up here and I am going to say div.
| | 06:40 | The div tag is a block level element.
| | 06:42 | I am going to end it down here.
| | 06:44 | So all of these elements inside of
this div are going to be part of the div
| | 06:48 | element now and I can just
say style="color: blue".
| | 06:54 | And now I am applying a
style to a block of the document.
| | 06:58 | So div is a block level element.
| | 07:00 | I'm going to Save that and reload here
in the document, and you can see we have
| | 07:05 | blue there and blue there.
| | 07:06 | We'll cover more about what block level
and inline level means later on in the
| | 07:10 | course, but for now you'll want to
see the div and span; span is the inline
| | 07:15 | level version of this, are
commonly used for applying style.
| | 07:20 | And I am going to take this text and I
am going to put that within a span tag.
| | 07:25 | I am going to say style="font-style: italic"
and close the span here.
| | 07:32 | So span is inline level, so you can put
it in the middle of a paragraph, whereas
| | 07:37 | with div, which is block level, you cannot.
| | 07:39 | So if I save that and reload over here,
you'll see that those words, wrapped at
| | 07:44 | the margins and with a blank line
separating the--are now in italic.
| | 07:49 | So we'll learn more about block and
inline level elements later on in this chapter.
| | 07:54 | Applying style with CSS is a
fundamental skill for HTML documents these days.
| | 07:59 | As you can see, HTML has a flexible set
of features for supporting CSS styles.
| | Collapse this transcript |
| Using block and inline tags| 00:00 | HTML provides two distinct
display modes; block and inline.
| | 00:04 | Let's start by looking at inline elements.
| | 00:06 | I'll make a working copy of
inline.html and rename the copy to
| | 00:12 | inline-working.html.
| | 00:13 | I am going to open that in my text editor
and see it's just a paragraph of Lorem Ipsum,
| | 00:20 | and in the middle of that is an image
tag. It'll just display a small picture of a
| | 00:26 | rock inline, and so this is called Inline mode.
| | 00:29 | I am going to go ahead and reduce the
width of this and I am going to turn on
| | 00:34 | Wrapping there, and we'll open it also
in the browser using Firefox, so we can
| | 00:40 | see both of these side-by-side.
| | 00:43 | And there you can see in the
browser there is the image inline with the
| | 00:47 | paragraph, so it flows with the paragraph.
| | 00:49 | You see it's a little taller than the
characters in the paragraph and so it
| | 00:53 | makes some space for itself.
| | 00:55 | But because the image element is an
inline element, it just flows with the text
| | 01:01 | and that's what inline means.
| | 01:03 | Inline elements are elements
that flow inline with text.
| | 01:06 | There are other examples of inline
elements, for example, we can come in here
| | 01:12 | and we can make a link.
| | 01:13 | I am just going to take this word
Pellentesque and make it a link.
| | 01:18 | It's not linking to anything, but if I
save that and reload in the browser, you
| | 01:22 | see that that is now a link and my
cursor changes when it hovers over it.
| | 01:27 | So the a element for creating
links is also an inline element.
| | 01:34 | The b and i elements are inline,
so I want to make this bold here.
| | 01:38 | That's a container.
| | 01:40 | And I am going to make this part here
italic with an i element, and save that,
| | 01:47 | and come over here and reload, and you see
there is our bold and there is our italic.
| | 01:51 | So those are also inline
elements and they flow with the text.
| | 01:55 | It's possible to change an
inline element to a block display.
| | 01:59 | If I come in here to the image and
move this down to the next line, I am
| | 02:04 | going to say style=. I am going to say display:
| | 02:10 | block and that changes the display
mode of this element to block mode.
| | 02:13 | If I save that and reload, you'll notice
that that image is now on a line by itself.
| | 02:18 | It actually interrupts the paragraph,
because a block mode element is not
| | 02:22 | allowed inside a paragraph. A
paragraph can only have inline elements.
| | 02:27 | And so because the browser sees that
block element, it ends the paragraph, and
| | 02:32 | then it starts another paragraph after it.
| | 02:35 | So now that it's a block element,
let's go ahead and bring in a bigger
| | 02:38 | picture of the rock.
| | 02:39 | If I take out -small there I'll get a
bigger picture. I'll save that and reload, and
| | 02:44 | there is a bigger of the rock.
| | 02:45 | And now I can actually make that float to
the right and have the text wrap around it.
| | 02:51 | By inside of my style here I
just say semicolon and float, colon
| | 02:56 | right, and I can terminate that with
another semicolon, and I come over here
| | 03:00 | and reload, and now you see that it floats to
the right and the paragraph wraps around it.
| | 03:05 | That's because I have this
float right and it's in block mode.
| | 03:08 | So if you have an image or another
inline level element that you want to treat
| | 03:12 | as block level, it's possible to do this,
and it's not an uncommon thing to do.
| | 03:16 | Now let's take a look at an
example of a block level element.
| | 03:19 | I am going to go ahead and I am going
to close this, and I am going to close
| | 03:24 | that, and we'll come over here to block.html,
and I'll make a working copy and
| | 03:30 | block-working.html, open that in my text editor.
| | 03:35 | We can see that here we have, instead
of paragraphs we have divs, and there's
| | 03:40 | one div, an outer div here, and if I
collapse that you'll see that that goes all
| | 03:44 | the way down to the body, so it ends here.
| | 03:49 | In the middle of that div is another
div, and this is why I am not using a
| | 03:53 | paragraph here, because a div is allowed
to have other divs, and other block level
| | 03:56 | elements inside of it. A
paragraph is not allowed to do that.
| | 03:59 | And so there is a div in the middle and
an outer div and a bunch of Lorem Ipsum
| | 04:04 | in each part of that.
| | 04:06 | And so we'll go ahead and we'll
shrink this and turn on Soft Wrap.
| | 04:11 | I am going to go ahead
and open that in my browser.
| | 04:14 | And you can see I've highlighted this
middle div in yellow, and you can see that
| | 04:19 | it says div style="background: yellow" and that
makes it highlighted like this in yellow.
| | 04:26 | So div is a block level element, and
this is an unusual usage of div and
| | 04:31 | normally we would use paragraphs for
this, but because we're just demonstrating
| | 04:35 | block level elements, it's
just a convenient way to do that.
| | 04:38 | And we have this div in the middle of
the divs, and so you see that it takes up a
| | 04:42 | vertical space by itself; block
level elements take up vertical space.
| | 04:46 | They don't just flow with things.
| | 04:48 | They take up vertical space.
| | 04:49 | Like I changed the image to block level,
| | 04:52 | I can do the same thing with div,
I can change this to inline level.
| | 04:55 | Within the stylesheet I can say; display: inline;
| | 05:01 | and save that, and when I reload, you
see now it's flowing with the text.
| | 05:06 | So it's no longer taking up vertical space.
| | 05:08 | It's taking up inline space. It just
flows with the text right like that with
| | 05:12 | the rest of the text as you would expect to
say of an image or a link or bold or something.
| | 05:17 | So if I undo this, I am just pressing
Command+Z on this Mac or Ctrl+Z on a PC to
| | 05:23 | undo that, and I am going to change this instead.
| | 05:26 | I am going to say span instead of div.
| | 05:28 | So span is like div, but it's inline.
| | 05:31 | I save that and reload over here.
| | 05:33 | You see it's still inline like that.
| | 05:35 | If I change this back to div, it will
now be block level, save and reload.
| | 05:41 | Now it's block level again.
| | 05:43 | So div is naturally a block level element
and span is naturally a inline level element.
| | 05:48 | So I can take this div and I can
float it to the right. I can say float: right.
| | 05:54 | And I also need to give it a width that's smaller
than the width that's there, so if I say width:
| | 05:59 | 100 pixels, now it will be a hundred
pixels wide and it will float to the right,
| | 06:05 | and you see all the other text wraps
around it, just like we did with the image.
| | 06:09 | So block level elements take up vertical space.
| | 06:11 | They are designed to contain
other block and inline level elements.
| | 06:16 | The exception to that is paragraphs.
| | 06:18 | Paragraphs cannot contain
other block level elements.
| | 06:21 | Inline level elements flow with text.
| | 06:23 | They are designed to flow and to contain
other inline level elements that also flow.
| | 06:28 | We'll see more examples of block and
inline elements as we go through the
| | 06:32 | rest of the course.
| | Collapse this transcript |
| Displaying characters with references| 00:00 | Some characters have special meaning in
HTML so they cannot be used directly in
| | 00:04 | a document, other characters may
be unavailable on your keyboard.
| | 00:08 | Character References allow you to
include these characters in your document.
| | 00:12 | These references are often referred to as
character entities, but that's a misnomer.
| | 00:17 | It's a subtle distinction that
character entities are SGML declarations and
| | 00:22 | HTML5 is no longer tied to SGML
or its document type definitions.
| | 00:27 | So these are called Character References
because they refer to characters not SGML entities.
| | 00:32 | There are five characters that are
particularly problematic in HTML.
| | 00:36 | You'll need these often.
| | 00:38 | The less than and greater
than characters are named < and >
| | 00:47 | or you can use the numeric entities
decimal 60 or 62, or hexadecimal 3C and 3E.
| | 00:54 | All of these References are introduced
by an ampersand and terminated with a
| | 00:59 | semicolon, and the Numeric References
have a number sign or a pound sign and the
| | 01:04 | Hexadecimal References also have letter x.
| | 01:08 | Because the ampersand is used to
introduce a reference, the ampersand itself is
| | 01:13 | problematic and you can put ampersand
in your document by typing the &
| | 01:20 | or by using the Numeric References.
| | 01:22 | The quote marks, the single quote which
is sometimes called an apostrophe, or the
| | 01:27 | double quote, can also be problematic
when you want to include them in quoted
| | 01:32 | content, like the value of an attribute.
| | 01:36 | There are huge numbers of
other characters available.
| | 01:38 | In previous versions of HTML there were
a few hundred named references, in HTML5
| | 01:43 | there are about 2000.
| | 01:44 | Here is a small sampling.
| | 01:47 | Let's make a working copy of references.html
and I'm going to rename that to
| | 01:52 | references-working.html.
| | 01:54 | Now I'll open that in my text editor and you
can see we have a little bit of CSS at
| | 02:01 | the top there and then
we have the body of the document.
| | 02:05 | And if I open this in the browser, see
what it looks like here, Firefox, and there
| | 02:10 | are our HTML character references.
| | 02:12 | And this is the styling that's in the CSS there.
| | 02:15 | I'm just highlighting these paragraphs
that have the character references in them.
| | 02:19 | So in the first display paragraph you'll
notice that it's in this monospace font,
| | 02:24 | that's because I've it
wrapped in the code element.
| | 02:27 | And then I'm using Character References
less than and greater than, both at the
| | 02:30 | beginning and the end in order
to display this HTML snippet here.
| | 02:34 | So I have a paragraph and it says,
Content goes here, but you'll notice that
| | 02:38 | that's not actually getting interpreted
in the document because I'm using these
| | 02:43 | character references instead.
| | 02:45 | If I had actually put in the less than
and greater than sign, and let's just go
| | 02:48 | ahead and do that here, so I'm
replacing these Character References with the
| | 02:52 | actual less than and greater than signs.
| | 02:55 | You'll see that this gets interpreted as
a paragraph, and when I reload over here
| | 03:01 | I just get this separate
paragraph that says, Content goes here.
| | 03:05 | It's really not showing it the
way that I wanted it to be shown.
| | 03:08 | So I'll go ahead and I'll put those
Character References back and save it and
| | 03:12 | reload it, and now I'm able to display
an actual snippet of HTML in an HTML
| | 03:16 | document without those
characters getting interpreted.
| | 03:19 | So that's one of the major uses of
Character References and you'll see that used
| | 03:23 | a lot to display characters that
would otherwise be interpreted.
| | 03:27 | There are, as it says here, many other
interesting characters available. Like I
| | 03:31 | said there are about 2000 of the named
entities and even more available as numeric
| | 03:36 | entities; virtually all of Unicode is
available numeric entities, assuming that
| | 03:40 | your target browser and
character encoding will display it.
| | 03:44 | These are just a few.
| | 03:45 | I've some accented a characters here,
and you see those are those ones there.
| | 03:50 | I have a couple of ligatures, AE
ligature, uppercase and lowercase.
| | 03:54 | I have this approximate and
approximately equals to signs and they are here,
| | 03:59 | approximate and approximately equals to,
and I've some Greek letters. I have
| | 04:04 | Alpha, Beta, Delta, Gamma, Omega and Mu,
and there they are in their character entities.
| | 04:10 | I also have some other symbols Copyright,
Registered Trademark, paragraph and @
| | 04:16 | sign, dollar sign, cent sign, euro sign;
| | 04:19 | some of these are available on keyboards,
obviously we usually have the @ sign available.
| | 04:24 | Its character entity is commercial at c-o-m-m-a-t,
dollar, cent and Euro depending
| | 04:30 | on where you're in the world.
| | 04:31 | Some of those will be available and
some of those will not be available on your
| | 04:35 | keyboard; the male, female
sign, some other symbols.
| | 04:38 | And then down here on the last line I
have some script versions of regular Latin
| | 04:43 | Characters and you notice also have horizontal
ellipse, that's this h-e-l-l-i-p and
| | 04:49 | that's what all of those look like.
| | 04:51 | Of course there are many, many more.
| | 04:52 | There is a complete list of the HTML5
named references available on WHATWG
| | 04:57 | website, of course you can use Numeric
References for any Unicode characters.
| | 05:02 | And it's always a good idea to make
sure that your target audience has a good
| | 05:06 | chance of displaying whatever
characters you include in your documents.
| | Collapse this transcript |
|
|
3. Metadata and the Document HeadExploring the front matter of HTML| 00:00 | The head section of an HTML document
is like the front matter of a book.
| | 00:04 | It's where the
information about the document goes.
| | 00:07 | The meta information that describes
things about the document that support
| | 00:11 | how it's rendered, how it's navigated,
how it's assembled and otherwise how
| | 00:15 | the document works.
| | 00:16 | Let's make a working copy of head.html out
of the Chap03 folder of the exercise files.
| | 00:22 | I am going to call this head-working.html,
and I am going to go ahead and open
| | 00:28 | this in my text editor here.
| | 00:30 | And you see down here right after the
HTML tag, you see this head tag, and there
| | 00:36 | is the end tag down there.
| | 00:37 | So that's the entire head
section of the document right there.
| | 00:41 | Things that go in the head section are
considered to be in the metadata content model;
| | 00:46 | these include the title element, meta,
link, script, style and base elements.
| | 00:53 | In this example, here on line 6, we have
a meta tag, in this case for informing
| | 00:58 | the browser what character set
is being used in this document.
| | 01:01 | Meta can serve many purposes.
| | 01:03 | We'll cover a little more
of it later in this chapter.
| | 01:05 | The title element beginning on line 7
is for setting the title of the document.
| | 01:11 | The title element is required in HTML
even if it's empty, and there may only
| | 01:15 | be one title element.
| | 01:17 | In the early days of the web people
used to put multiple title elements in the
| | 01:21 | document in order to animate the title.
| | 01:23 | This is no longer supported
by any of the modern browsers.
| | 01:26 | It was fun while it lasted.
| | 01:28 | The link element is used to create a
relationship with other documents, and here
| | 01:33 | we've a link element on line 10.
| | 01:36 | In this case, we're using it to bring
in a stylesheet and this is its most
| | 01:40 | common use, in fact, I don't think I've seen
it used for anything else in the long time.
| | 01:45 | It's possible to link other HTML pages
and set up relationships of forward and
| | 01:49 | back and such, but most browsers don't
support that anymore and nobody ever used
| | 01:54 | those features very much in the first place.
| | 01:56 | So the head section of the document
is where information about the document
| | 02:00 | lives. This metadata is critical for
describing your document to the browser, to
| | 02:04 | search engines, and to other
automated processes that may need to use it.
| | Collapse this transcript |
| Applying CSS to your document| 00:00 | The link tag is used for linking to an
external style sheet, but you can also
| | 00:04 | define local styles right your HTML file.
| | 00:06 | Let's start by making a working copy
of style.html here in the Chap03 folder
| | 00:12 | of the exercise files.
| | 00:13 | I am going to rename this style-working.html
and I'm going to open it in my text editor here.
| | 00:21 | So what we have is a simple
document with some Lorem ipsum down here.
| | 00:24 | Lorem ipsum is random Latin text that
is designed to be not distracting, to look
| | 00:31 | enough like text for use in laying out
documents, and not enough like text to be
| | 00:37 | distracting in itself.
| | 00:38 | And let's go ahead and open this in the
browser so we can see what it looks like.
| | 00:43 | We see this is already
styled with our style sheet.
| | 00:46 | Here in the document you can
see rel="stylesheet" main.css.
| | 00:51 | So let's go ahead and open main.css as well.
| | 00:54 | And here's our CSS, you can
see it's a very simple CSS file.
| | 01:00 | This is really what I call a CSS reset.
| | 01:03 | It's just setting the defaults so
that my document will look the same in
| | 01:08 | various different browsers on various
different platforms, or as close to the same as it can.
| | 01:12 | Now we'll look at this in the browser.
| | 01:14 | You'll notice that, yes it's styled and
it's not the default, and it's got the
| | 01:19 | font that I asked for everything,
but it actually doesn't look very good.
| | 01:22 | The first thing that jumps out at me
is that the paragraph text, the lines
| | 01:26 | are too close together.
| | 01:27 | There is not enough leading in
typesetting; leading is the space between lines.
| | 01:33 | And so I want to go and fix that,
but I don't want to change my main.css
| | 01:38 | because I like this.
| | 01:39 | It has function for me across the entire
site or across in this case the entire course.
| | 01:44 | So I'm not going to change that, instead
want I'm going to do is I'm going to go
| | 01:49 | here into my HTML file and here's
where we linked to the external style sheet,
| | 01:54 | and we know how to do that using the link tag.
| | 01:56 | The other thing we can do here, right
up here in the head, is we can put in a
| | 01:59 | style tag and it looks like this, and
that allows us to put a style sheet right
| | 02:04 | here in the HTML document.
| | 02:06 | And so the first thing I'm going to do
is, I'm going to say for my p elements,
| | 02:11 | I want to increase the line-height, and
I know that I've got the line-height set
| | 02:14 | to 1 in my main.css.
| | 02:17 | So I'm going to put 1.2 and we'll learn
more about CSS later in the course, or if
| | 02:22 | you want to learn more about CSS, I
strongly suggest you take my CSS course, CSS
| | 02:27 | for Developers here on the
lynda.com online training library.
| | 02:31 | So we'll save this and we'll bring it
up in the browser, and I'll reload the
| | 02:35 | browser and you see now it
gave us a little bit of air.
| | 02:38 | There is little bit of spacing between
lines and it actually looks a whole lot better.
| | 02:43 | I just like to do one more thing,
make this look a little bit more bookish.
| | 02:47 | I'm going to take this first
line of the first paragraph.
| | 02:49 | I am going to make it all small caps because I
see that in books sometimes and I think it's cool.
| | 02:55 | And so I'm just going to say p.first:
first-line, and so .first means that it's a
| | 03:02 | class, so I'm going to have to call out that
first paragraph and give it a class of first.
| | 03:08 | That's a class selector.
| | 03:09 | I'm going to come in here and I'm
going to say font-variant: small caps.
| | 03:14 | And then I'm going to come
down to my first paragraph,
| | 03:18 | I'm going to say, class="first".
| | 03:21 | So any paragraph with the class="first",
which is this .first here, and then
| | 03:27 | this pseudo-selector of first-line means
it will just apply to the first line of
| | 03:32 | the paragraph and I'll give a small caps.
| | 03:34 | So I'm going to save that, come over
here to the browser and hit reload, and you
| | 03:38 | use our first line there is in small
caps, caps in small caps, and then the rest
| | 03:42 | of it is in mixed case,
like it's supposed to be.
| | 03:45 | So while you'll usually use a link tag
to employ an external stylesheet, you'll
| | 03:50 | sometimes want a few simple styles
specific to given document. The style element
| | 03:55 | in the head section is an
excellent way to accomplish this.
| | Collapse this transcript |
| Adding scripting elements| 00:00 | The script element is used for
including scripting language code in your HTML.
| | 00:05 | It's most commonly used with JavaScript.
| | 00:07 | You may put the code inline or
you may link to an external file.
| | 00:11 | Let's make a working copy of javascript.html,
and we'll rename our working copy
| | 00:16 | to be javascript-working.
| | 00:20 | I'll open that in my text editor and
you'll see this is a very simple file, a
| | 00:24 | little bit more down here.
| | 00:27 | So all this does is it has a little
JavaScript function here that counts once a
| | 00:33 | second and it puts the
output in this ElementById output.
| | 00:37 | And if you'd like more details on
JavaScript and how to write good JavaScript, I
| | 00:42 | strongly suggest you take Simon
Allardice's excellent JavaScript Essential
| | 00:46 | Training course here on lynda.com.
| | 00:48 | So without going into a lot of details
about the JavaScript, let's talk about
| | 00:52 | the script element.
| | 00:54 | So here you see the script
element, and you'll notice I have
| | 00:56 | type="text/javascript".
| | 00:59 | Over the years there've been a number
of different things that a person could
| | 01:03 | put in the script element to
indicate what the language is of the script.
| | 01:07 | Now the truth is, is that 99 times out of
100, the language is going to be JavaScript.
| | 01:12 | I have yet to see anybody put another
language in the script element in an HTML
| | 01:17 | file on a public-facing web server.
Perhaps in some intranets or something, there
| | 01:22 | is something else, but I've not seen it.
| | 01:24 | So we say type="text/javascript"
that's the mime type for JavaScript.
| | 01:29 | That's the standard.
| | 01:30 | It's been the standard way to
do this for a number of years.
| | 01:34 | So inside of the script element, the
content of the script element is the JavaScript.
| | 01:38 | And again, there is a lot of things that
people will put around the JavaScript to
| | 01:43 | obscure it from browsers
that might not understand it.
| | 01:46 | But the truth is, on the modern
Internet, there aren't any browsers anymore that
| | 01:50 | won't understand some simple JavaScript.
| | 01:52 | So on some extreme cases perhaps there
are some things you might need to do, but
| | 01:56 | in most cases there is not.
| | 01:58 | You'll notice down here in the h2
element I have a span element and the span
| | 02:04 | element has an id attribute and
the id attributes says "output".
| | 02:08 | Now we've seen the id attribute used
for CSS ID selectors, but in this case
| | 02:14 | we're using the same id attribute to
select the element for the JavaScript.
| | 02:19 | So we have e = document.getElementById
("output") and now this e variable is
| | 02:28 | that element and we can use a property
on that inner HTML to actually change
| | 02:34 | the contents of that output element,
and that output element is span in this
| | 02:38 | case, and it has a 0 there, but it'll have
different numbers as we increment our counter.
| | 02:44 | So let's go ahead and save
this and open it in the browser.
| | 02:47 | I am going to open this in Firefox, and
there we have it, and you see, there it
| | 02:52 | is, counting away 1, 2, 3, 4, et cetera.
| | 02:54 | As I said, this id attribute is often
used for stylesheets, and in fact I can
| | 03:01 | come in here and I can say style
and I can use it as a CSS selector.
| | 03:07 | And now I can do things to that output
element, like for instance I can change
| | 03:11 | its color, make it a little bit reddish.
| | 03:14 | I can give it a background
color and I can give it a border.
| | 03:18 | When I save this and load it up in the
browser, I'll just hit Reload here. See we
| | 03:22 | start at 0 again when I reload, and there it is.
| | 03:25 | It's got its border.
| | 03:26 | It's got its yellow
background and it has the reddish text.
| | 03:30 | So we see how to do this with
JavaScript inside of the document, but more often
| | 03:35 | than not your JavaScript is going
to be in a separate JavaScript file.
| | 03:40 | So the script element is actually
a little bit quirky in this way.
| | 03:44 | It's going to look like this, and
you'll notice that I have the end tag and I
| | 03:50 | have empty content, so why don't
I just do it like this instead?
| | 03:54 | Because that we know is the
shortcut for an empty tag.
| | 03:57 | Well, the reason we don't do that is
that that doesn't work. It doesn't work
| | 04:01 | in several browsers that I've tried,
in fact off the top of my head I seem
| | 04:06 | to remember it worked in one or two browsers,
but I don't remember which ones they were.
| | 04:10 | It definitely does not work in Firefox.
| | 04:12 | So in this case and in this case alone,
you need to actually use the begin tag
| | 04:17 | and the end tag, and it needs to be
completely empty. You can't do that.
| | 04:22 | It needs to be completely empty.
| | 04:24 | So you notice my source says count.js.
| | 04:27 | If we can open up count.js in our
text editor and you can see it's exactly
| | 04:32 | the same code, and when I load this in my
browser you'll notice that it works just great.
| | 04:39 | So the script element is used to include
code in a scripting language in your HTML.
| | 04:44 | It's most commonly used with JavaScript.
| | 04:46 | You may learn more about JavaScript in
Simon Allardice's excellent JavaScript
| | 04:51 | Essential Training course here on lynda.com.
| | Collapse this transcript |
| Using the meta tag| 00:00 | The meta tag is used for describing
aspects of your HTML document for the
| | 00:05 | benefit of the various
processors that will use it.
| | 00:08 | It's meta because it's
effectively data about data.
| | 00:11 | This is data that will not be
displayed on your page, but can be used by the
| | 00:16 | various processes that use your page
like the web server that delivers it or
| | 00:20 | the user's web browser.
| | 00:22 | Let's make a working copy of head.html
and I am going to rename this working
| | 00:27 | copy to be head-working.html
and open it in my text editor.
| | 00:33 | And you'll notice right here on line 6
we have a meta tag. The tag name is meta
| | 00:39 | and the attribute is
charset and the value is UTF-8.
| | 00:43 | So this is one very common use of the meta tag.
| | 00:46 | It describes the charset being used
by this document so the browser can
| | 00:51 | display it properly.
| | 00:53 | Another very common use of the meta tag,
and I'm just going to add one here, is to
| | 00:57 | simulate HTTP headers, and this is
done with the attribute http-equiv, like
| | 01:04 | that. It's short for equivalent, but
just the abbreviation is spelled out there,
| | 01:08 | http-equiv, and I am going to give
this something called a refresh header and
| | 01:16 | I'll give it content.
| | 01:18 | So what this will do is it will wait 3
seconds and then redirect this page to another page.
| | 01:23 | Let's go ahead and open it in the
browser so you can see what this does.
| | 01:27 | Go head and open this in Firefox.
| | 01:29 | You'll notice it waits 3 seconds
and then it redirects to my homepage.
| | 01:35 | Let me go ahead and open it again
so you can see this happen again.
| | 01:39 | It's in our Chapter 03 head-working.
| | 01:42 | So it shows our a page and it
waits 3 seconds and then it redirects.
| | 01:46 | Of course you can change this to a 0,
and it won't wait at all, it'll go
| | 01:51 | ahead and just redirect immediately.
| | 01:53 | And that can be useful if a page is
moved or something like that, and you
| | 01:56 | don't have sufficient access to the server to
be able to actually put in a server redirect.
| | 02:02 | But sometimes, like for instance on my
page, I have a little thing called BillyDos.
| | 02:06 | It's an old thing that I did.
| | 02:07 | It's just an animated GIF that makes
it look like an old IBM PC, and it runs
| | 02:12 | this whole animation and this takes, I
don't know, a fixed number seconds, I
| | 02:16 | don't remember exactly, and when it's
all done it redirects to my homepage.
| | 02:20 | So there are a number of uses for that.
| | 02:23 | So how this tab works is it
basically tells the browser act as if you had
| | 02:28 | received this header from the server.
| | 02:30 | It doesn't actually do anything on
the server, the server doesn't actually
| | 02:33 | read your HTML file.
| | 02:35 | But it tells a browser, pretend you've
got this header from the server along
| | 02:39 | with the other http headers.
| | 02:41 | Another common use of this is, I'm
just going to copy and paste this so we
| | 02:45 | can type in another one to say
"content-type" and this will mimic a
| | 02:50 | "content-type" header.
| | 02:52 | Again if you don't have enough access
to your server to be able to get the
| | 02:55 | server to actually send one
of the type that you want,
| | 02:59 | you can tell your browser to act as if
you had received this header, and then
| | 03:04 | you would no longer need this
charset meta tag as we have on line 6.
| | 03:09 | Another common application is to
create fields that may be used by a search
| | 03:13 | engine to help it find your page.
| | 03:15 | We'll talk more about
that later in this chapter.
| | 03:18 | So the meta tag is used to describe
various aspects of your HTML page.
| | 03:22 | It's commonly used for setting the
character set and other properties with the
| | 03:26 | page and also for helping search
engines to properly categorize your page.
| | 03:31 | We'll talk more about
that usage in the next movie.
| | Collapse this transcript |
| Optimizing your page for search engines| 00:00 | The concept of search engine
optimization is an interesting and widely
| | 00:04 | misunderstood subject.
| | 00:06 | There are people who will tell you that
they can increase the search ranking of
| | 00:10 | your page so that your page will show
up higher in the search engine listings.
| | 00:13 | For the most part, this is not true.
| | 00:16 | Any technique that could effectively
subvert search engine algorithms today
| | 00:21 | will not work tomorrow because the
engineers at the big search engine company
| | 00:25 | will update their algorithms to defeat those
techniques, so at best it's a moving target.
| | 00:30 | For example, the keywords metatag was
originally designed to help the search
| | 00:34 | engines by allowing content
authors to categorize their content.
| | 00:38 | But this feature was abused so badly
that the search engines had to stop using
| | 00:43 | it, so it largely ignored
today by the major search engines.
| | 00:47 | So the SCO folks got wise and started
abusing the title tag instead just putting
| | 00:52 | the same garbage they used put in
a keywords tag in the title tag.
| | 00:56 | You'll see this lot around the Internet,
but the search engine algorithms now of
| | 01:00 | course ignore this too.
| | 01:02 | The goal of the search engine is
to provide useful results for users.
| | 01:06 | They want to categorize your page
correctly and they want to rank it according
| | 01:10 | to its actual popularity.
| | 01:12 | So the techniques that work to make it
easy for the search engine to read your
| | 01:15 | page will result in better
categorization, making it easier for those users who
| | 01:20 | like your page to find it.
| | 01:22 | And once those users find your page
you'll become popular, because you
| | 01:25 | attracted the right users.
| | 01:27 | When your page is more popular, the
search engine will recognize it is having
| | 01:31 | more quality hits and will rank it
higher pushing it up toward the top of the
| | 01:35 | list in relevant searches.
| | 01:37 | HTML5 has a good set of tags for
making it easier for the search engines to
| | 01:42 | read and understand your page.
| | 01:44 | We'll be taking a closer look at
these tags later in this course.
| | 01:47 | So the best form of search engine
optimization is to create good content and
| | 01:52 | optimize your site so that both users
and search engines will be able to find
| | 01:57 | it, use it, and ultimately like it.
| | Collapse this transcript |
|
|
4. TextControlling line breaks and spaces| 00:00 | Normally your browser will decide
where to wrap lines in a paragraph based on
| | 00:04 | the size of the viewport and
the dimensions of each character.
| | 00:07 | You may force a line break using the <br> tag.
| | 00:11 | Let's go ahead and make a working copy
of text.html, call this text-working.html
| | 00:18 | and I'll open it in my text editor.
| | 00:21 | I am going to go head and open this in
the browser as well, and there you can
| | 00:26 | see the entire file for those of
you who are typing along at home.
| | 00:29 | So here we have some text, and you see in
the browsers just some Lorem ipsum, and
| | 00:34 | it's wrapping naturally.
| | 00:36 | Now let's say that I just want to
add a line break right after that
| | 00:39 | first sentence here.
| | 00:40 | I am going to go ahead and turn
wrapping on here, and so there is the end of
| | 00:45 | the first sentence.
| | 00:46 | I'm just going to put in a line break.
| | 00:48 | And of course that is ignored by HTML.
| | 00:51 | It's just wrapped together
with all of the other whitespace.
| | 00:54 | So if I really want it to be a new
line, I can put in a <br> tag, and br is an
| | 01:01 | empty tag, it doesn't have any content, so I
use this empty tag shortcut with the slash,
| | 01:06 | and the right angle bracket, and when I
| | 01:08 | save that and reload it in the browser,
now we got a line break right after that
| | 01:13 | period there, right where I put in the <br> tag.
| | 01:15 | You'll notice since line break is
not a paragraph break, the paragraph
| | 01:19 | continues, the paragraph break you
recognized by the fact that there's an extra
| | 01:23 | blank line in between.
| | 01:25 | This just actually breaks the line.
| | 01:27 | If I were to put in two of them,
then I can make it look like a paragraph
| | 01:32 | break, but it's still not, still the
end of our paragraph is down here at
| | 01:36 | the closing of the <p> tag.
| | 01:39 | So that's really all there is to it.
| | 01:40 | It's that easy to put a
line breaks in your paragraphs.
| | 01:44 | Now the browser also controls the
spacing between words, intelligently folding
| | 01:50 | consecutive whitespace into single spaces.
| | 01:53 | If you want to insert extra spaces,
you can do so with a named entity called
| | 01:57 | NBSP, for Non Breaking Space.
| | 02:00 | And that looks like this.
| | 02:01 | I'm just going insert on right here, nbsp;
| | 02:04 | like that, and I'm going to save that
and reload, and watch this space here as I
| | 02:09 | hit the Reload button. Oh! I am sorry.
| | 02:11 | It was this one up here. I pointed at
the wrong space, but right there you see
| | 02:15 | now we have more space.
| | 02:16 | I can enter few of those and
come over here and hit Reload.
| | 02:19 | Now watch that right space up there. Boom!
| | 02:22 | See it just moves over.
| | 02:23 | And so this allows us to actually
enter spaces and use spaces in places where
| | 02:29 | HTML might not otherwise
have as much space as we want.
| | 02:33 | So normally your browser does a good
job of managing line breaks and spaces
| | 02:36 | between words. If you want to insert
your own line breaks and line spaces, it's
| | 02:41 | easy to do with <br> and the
Non Breaking Space entity.
| | Collapse this transcript |
| Exploring phrase elements| 00:00 | Phrase elements are designed to
mark up parts of text according to their
| | 00:03 | usage. Your browsers will render them in a
particular way, but that's not really the point.
| | 00:08 | Including your text with phrase
elements helps the browser know more about the
| | 00:11 | meaning of the markup.
| | 00:12 | So we can do something intelligent,
even in cases where it's not being
| | 00:16 | displayed on the screen.
| | 00:17 | Let's make a working copy of
pharse.html and I'll rename this
| | 00:23 | phrase-working.html.
| | 00:25 | I am going to open that in my text editor.
| | 00:28 | I'll just scroll down here for
folks who are typing along at home.
| | 00:32 | And let's go ahead and open this in the browser.
| | 00:35 | I'm just going to right-click on this
and open in Firefox, and there we are.
| | 00:40 | So you see we have a number phrase
elements here, <em> is for Emphasize and you
| | 00:45 | see that it's rendered like this in the browser.
| | 00:47 | Strong is rendered like this in the
browser, <dfn> for Define a term is also in
| | 00:53 | italics in this browser, and the way
that these are displayed in this browser
| | 00:57 | they may be different in a different browser.
| | 00:59 | And of course, the actual presentation,
you can modify with CSS, and so you
| | 01:04 | can make Emphasize bold and red if you
wanted to, or make Strong larger if you wanted to.
| | 01:10 | These are just the way it is with
this browser displays them by default.
| | 01:14 | <code> is for Code Listings.
<samp> is for Sample Text.
| | 01:19 | You'll notice in this browser that
that's also in fixed space font. <kbd> is for
| | 01:25 | Keyboard, and <var> is for Variables.
| | 01:29 | So these phrase elements are designed to
mark up parts of text according to their usage.
| | 01:33 | Remember, you can always use CSS to
style these according to your preferences.
| | 01:38 | Use this markup elements to convey the
meaning of the markup, rather than the presentation.
| | Collapse this transcript |
| Using font markup elements| 00:00 | Sometimes you just need to tell the
browser to render something a certain way.
| | 00:03 | You can of course use CSS for this
and often that's the best choice.
| | 00:08 | HTML does, however, provide a few
simple font-markup elements for cases where
| | 00:12 | you just need something simple.
| | 00:13 | So let's make a working copy of font-
markup.html and I am going to rename that
| | 00:19 | to font-markup-working, and I'll open that,
and I am just going to go ahead and open
| | 00:25 | that also in the browser.
| | 00:27 | And here we've a number of font markup elements.
| | 00:30 | We have <b> for Bold and <i> for
Italic and <u> for Underline.
| | 00:34 | You see those look like
that they're in the browser.
| | 00:36 | There is a <sub> for a Subscript, there
is <sup> for Superscript, and those look
| | 00:43 | like that in the browser.
| | 00:45 | There's also small and there's
Strikeout and Delete and Strikeout is just the
| | 00:50 | <s> character by itself.
| | 00:52 | So you want to use these
font markup elements with care.
| | 00:55 | These elements are available for
convenience and expedience, but CSS will
| | 01:00 | usually offer more power,
flexibility, and consistency.
| | Collapse this transcript |
| Highlighting text with mark| 00:00 | HTML provides a new inline element
called mark for highlighting text.
| | 00:05 | Let's make a working copy of text.html
here in the Chap04 folder, in
| | 00:11 | your exercise files.
| | 00:12 | Let me name this text-working.html,
and open it up in the text editor.
| | 00:18 | We'll go ahead and open this up also in
the browser, so we can see these side
| | 00:23 | by side, and open this up,
so you can see the whole thing.
| | 00:27 | And we have just a little bit a
Loren ipsum in a simple HTML file.
| | 00:31 | Now let's say that I want to highlight this
text here, which in the browser is this text here.
| | 00:38 | And all I need to do, here I'm going
to put it on a line by itself, just to let
| | 00:43 | this stand out, is put the tag <mark>
around it like that, and we'll come over in
| | 00:48 | the browser and hit Reload, and we
see our text is now highlighted, just as
| | 00:54 | if we have used a yellow highlighter
on our screen, except we don't have to
| | 00:58 | clean it off later.
| | 00:59 | Of course, if you want to, you can
install this with CSS, you can say style= or
| | 01:03 | you can put this in a external style
sheet, and then I'll come over here and hit
| | 01:07 | Reload and we see it's now green.
| | 01:09 | If I want to, I can even make the text
white for the green background, and now
| | 01:15 | it's highlighted with white on green.
| | 01:17 | So the new mark element
is for highlighting text.
| | 01:20 | This is distinct from the <em>
or <strong>, which are for emphasis.
| | 01:24 | You can easily modify the
presentation of this feature using CSS.
| | Collapse this transcript |
| Adding headings| 00:00 | The heading elements are
available in six levels.
| | 00:03 | Let's go ahead and a take a quick look at this.
| | 00:05 | Make a working copy of headings.html
and name that headings-working.html.
| | 00:10 | I am going to open that in my text
editor, and you can see here we have
| | 00:15 | the different headings.
| | 00:16 | Headings is a block level element and
it can also include other block level
| | 00:22 | elements, and here you see we
have these six levels of headings.
| | 00:26 | Let's take a look at what
those look like in the browser.
| | 00:29 | Go ahead open that in Firefox and there
you see there is one Heading 1, Heading 2,
| | 00:34 | Heading 3, 4, 5, 6, and they
get progressively smaller.
| | 00:37 | Of course you can, and it is very
common to reformat these with CSS.
| | 00:43 | They could all be the same
size and be different colors.
| | 00:45 | Some of them could have borders on them.
| | 00:47 | There's all kinds of things
you can do with these with CSS,
| | 00:51 | but to go ahead and use the different
Heading levels, helps your page to get
| | 00:56 | properly index and helps it to be readable in
different mediums that they not be visual mediums.
| | 01:02 | So for example, if I wanted to take
this, say Heading 3, and go ahead and put a
| | 01:08 | paragraph in it, save that and reload
it in the browser, you see there I've
| | 01:13 | Heading 3 and I have another
paragraph in the Heading, and it becomes
| | 01:16 | formatted like that.
| | 01:17 | Of course, you can change
that behavior in CSS as well.
| | 01:21 | But this demonstrates that the Heading
| | 01:23 | is a block level element and other
block level elements are allowed within
| | 01:29 | this block level element.
| | 01:30 | So there are six levels of
heading elements available.
| | 01:33 | They can be styled with CSS to make
them work with the look of your document.
| | Collapse this transcript |
| Using quotations and quote marks| 00:00 | Quotation marks can of course be added
using your keyboard, but smarter quotes
| | 00:04 | are available using the q element.
| | 00:06 | Let's go ahead and a make a
working copy of quotes.html and name that
| | 00:14 | quotes-working.html, and I'll go ahead
and open that in my text editor, and you
| | 00:18 | can see I have a little bit of CSS up
here at the top and I'll talk about that
| | 00:23 | in a couple of minutes.
| | 00:24 | And otherwise, we've some Lourem ispum
down here in a couple paragraphs, bring
| | 00:29 | this in smaller, and turn on wrapping,
and we will go ahead and open this in
| | 00:34 | the browser as well.
| | 00:36 | So you'll notice here I've this <q>
element right there, and over here in the
| | 00:41 | browser you see we have these quote marks
for it, and I can't even select it with my
| | 00:45 | cursor, because it's not actually selectable.
| | 00:49 | You see the cursor selection goes
around it, but these are smarter quotes.
| | 00:52 | You see we have the curly left quote
and the curly right quote, and what's
| | 00:56 | interesting here is if I come in here
in the middle and I put another <q> around
| | 01:00 | just this word here, it uses nested
quote rules to use single quotes for that.
| | 01:05 | So there is the 'quis' word and you see
it's got single quotes and we've got the
| | 01:09 | double quotes around the outside.
| | 01:11 | How these quotes are presented is
controlled by this stylesheet up here, and
| | 01:16 | it's notable that if I didn't have the
stylesheet up here, different browsers
| | 01:20 | work in different ways.
| | 01:21 | Firefox will use the smart curly quotes,
Chrome and Safari and the other WebKit
| | 01:27 | browsers will use straight quotes;
different browsers do this in different ways.
| | 01:31 | And so by specifying it in your CSS like this,
then you can control how the quotes happen.
| | 01:39 | So for example, if I come in here and
this paragraph and I set the language to
| | 01:44 | French, say and now when I
reload this in the browser, you notice
| | 01:48 | that my quotes are now French style quotes.
| | 01:51 | I have the angle quotes around the
outside and I've got the curly quotes around
| | 01:55 | the inside, and I can
actually control that inside of here.
| | 01:59 | If I set the language to de for German, I
save that and come over here and reload,
| | 02:04 | you see now we have the low quote at the
beginning and the high quote at the end,
| | 02:09 | and they are also backwards of your
American English, and we have the single
| | 02:14 | version of that on the inside quotes.
| | 02:16 | If I set it for British English, I say en-gb;
| | 02:21 | you notice I've that defined up here.
| | 02:23 | In Britain, they use single quotes for
the outer quotes and double quotes for the
| | 02:28 | inner quotes, and this is all
controlled here in this CSS.
| | 02:33 | You'll also notice I've a block quote
element down here. Block quote as its name
| | 02:37 | implies is a block level quote
and it for quoting blocks of text.
| | 02:41 | And most browsers will just indent
that on both sides, some of them will also
| | 02:46 | put them in italics, and again, you
can control that behavior in CSS as well.
| | 02:51 | So HTML5 has a lot of options for
quotes, especially when combined with CSS.
| | 02:55 | Both the Q element and the block quote
element are available for in line and
| | 03:00 | block oriented quotes respectively.
| | Collapse this transcript |
| Exploring preformatted text| 00:00 | The <pre> tag can be used to
display preformatted text in HTML.
| | 00:04 | Let's go ahead and make a working copy
of pre-1.html; couple of examples here,
| | 00:11 | and we'll call this pre-1-working and
I'll open that in my text editor, and you
| | 00:17 | notice that I have down here some
preformatted text that I would like it to be
| | 00:22 | displayed exactly like that.
| | 00:24 | And so we bring it up in the browser.
| | 00:27 | You see that it's not
doing what I had asked for.
| | 00:29 | It's just displaying it as a regular paragraph.
| | 00:32 | I want it to look like this.
| | 00:33 | So let's just change this <p> tag to <pre>, and I am
going to come down here and do the same there.
| | 00:38 | I am going to save that and reload in
the browser, and now you see that my text
| | 00:42 | is displayed exactly as I intended it.
| | 00:46 | So poetry is one application of this.
| | 00:49 | Let's go ahead and look at another
application. Make a working copy of
| | 00:53 | pre-2.html, call that pre-2-working.html,
open that in my text editor and here
| | 01:01 | we have an example that is formatting code.
| | 01:04 | Here I have some C code and here I
have some HTML code, and you will notice I
| | 01:09 | am using some named entities for some
of the characters that would otherwise
| | 01:12 | give us trouble in HTML.
| | 01:14 | So let's go ahead and look at this in
the browser, open that in Firefox, and you
| | 01:20 | see it's displaying exactly as we intended.
| | 01:22 | Here's a little main function, the
Hello World in C, and here's some HTML.
| | 01:28 | So in cases where we want to display
code and want it to display with all of
| | 01:33 | its formatting, all of its indents and all,
this is a great technique for doing that.
| | 01:39 | So the <pre> tag can be very useful for
displaying text in its natural formatting.
| | Collapse this transcript |
| Formatting lists| 00:00 | HTML provides several tags for displaying lists.
| | 00:04 | Let's go ahead and make a working copy
of lists.html, and I'll name this copy
| | 00:09 | lists-working.html, open that in my
text editor, and you can see we have some
| | 00:16 | lists down here, various types.
| | 00:18 | I will go ahead and display
this in the browser as well.
| | 00:22 | So up at the top here, we have an
ordered list, see it's displayed as 1, 2, 3,
| | 00:27 | One, Two, Three, and that's created
with the <ol> tag which is of course a block
| | 00:33 | level container, and each of the items
with the <li> tag which are actually in-line
| | 00:39 | level containers and that
creates this ordered list.
| | 00:43 | The unordered list is created exactly
the same way except with <ul> as the outer
| | 00:48 | container and <li> as the inner container,
and it just comes up with these bullets.
| | 00:54 | And in fact, if I were to nest another
one inside of it, and I'll just go ahead
| | 00:59 | and indent this so we can see that
it's nested, and save that, and come over to
| | 01:05 | browser and reload it,
| | 01:06 | you see we get a different type of
bullet. And if I go ahead and paste yet
| | 01:10 | another one inside of those, you will
see we get a different type of bullet
| | 01:14 | again, and likewise if I nest the ordered
list, in this case I just get numbers again.
| | 01:22 | But if I wanted to do this
differently, if I wanted to have say Roman
| | 01:25 | numerals or something like that, it's
actually possible in CSS to change the
| | 01:32 | way that these behave.
| | 01:34 | So we'll talk more about lists later on,
and we'll see some more examples of how
| | 01:40 | we can format these.
| | 01:41 | Let's just talk about this one final
type of list down here at the bottom, and
| | 01:45 | this is the definition list.
| | 01:46 | You see its--dl is the outer container
and we have inner containers of <dt> and <dd>,
| | 01:52 | so that's the term and the definition.
| | 01:55 | And so we have one is the first non-
zero number, two is the number after one,
| | 02:00 | three to get ready, four, now go, cat, go!
| | 02:03 | And these are formatted like this.
| | 02:06 | Now I tend to indent these dds under
the dts and you'll see some people will
| | 02:11 | format it more like this.
| | 02:13 | Of course, the indenting
is entirely ignored by HTML.
| | 02:17 | It's just going to display the same either way.
| | 02:19 | So HTML list elements can be very
flexible especially when combined with CSS, and
| | 02:24 | we will revisit this
subject later in this course.
| | Collapse this transcript |
| Forcing text direction| 00:00 | English is a left-to-right language
and I need to preface this discussion by
| | 00:04 | saying that I have no experience
typing in a right-to-left language.
| | 00:08 | I did learn a little Hebrew when I was a
kid, but I wrote that with a pencil and
| | 00:13 | frankly, I don't remember any of it.
| | 00:15 | Let's start by making a working copy
of text.html and we'll rename that to
| | 00:20 | text-working.html and
open that in the text editor.
| | 00:24 | We have seen this before.
| | 00:26 | It's just a HTML document with some
Lorem Ipsum in it, and we'll go ahead and
| | 00:30 | open this in browser, and there is the
document in our browser and you see that
| | 00:37 | it's all left-to-right. This is Latin.
| | 00:39 | It's being displayed left-
to-right like normal Latin.
| | 00:42 | Now what I am going to do is I am
going to take this sentence here, and that's
| | 00:46 | this sentence over here, and I'm going
to change that to right-to-left as if it
| | 00:51 | were being written in a right-to-left language.
| | 00:53 | The letters in the text editor
still is still left-to-right, but if I
| | 00:58 | were typing this in a text
editor, that was designed to work in
| | 01:00 | right-to-left language,
| | 01:02 | those letters would still be
sequential in the file and so sequential in the
| | 01:07 | file means in this editor, that
they are displayed left-to-right.
| | 01:09 | So I am going to go ahead and I am
going to use the <bdo> tag which stands for
| | 01:14 | bidirectional override, and I am
going to say dir="rtl" for right-to-left.
| | 01:19 | I am going to come down here at the end
of the sentence, and I'm going to give
| | 01:22 | it the end tag for <bdo>.
| | 01:24 | All right, save that and reload in
the browser, and now you will notice
| | 01:29 | something interesting.
| | 01:30 | The first word in the sentence is this
Aliquam and you'll notice that that is up
| | 01:35 | here on this line, right?
| | 01:38 | And then the rest of the sentence quis
nulla turpis is now down here on the next
| | 01:45 | line and even the highlighting is
all messed up here with the period.
| | 01:49 | So if I bring this out wider, you'll
see that now that whole sentence is all
| | 01:55 | right-to-left like that, but as I let
the browser wrap it, it wraps it like it
| | 02:00 | would a sentence that was written in a
right-to-left language with the first
| | 02:05 | word on the line above and the
subsequent words on the line below all in what we
| | 02:09 | would look at as being a reversed order.
| | 02:12 | And this is actually the
behavior that we would expect
| | 02:15 | if we really think about it, because
if I was writing this in Hebrew or in
| | 02:18 | Arabic or in another right-to-left
language, that would be the way that it
| | 02:22 | would get typeset, right?
| | 02:23 | So let's come down here to the next
paragraph and do something different with this <p> tag.
| | 02:28 | On the <p> tag, I am just going to say
dir="rtl" and we'll go ahead and we'll
| | 02:33 | reload this, so see at first glance, it
just looks like it just flushed it right
| | 02:38 | and it didn't really change anything,
all the words are still left-to-right.
| | 02:41 | But we'll notice this period that's supposed
to be over here, is now over here at the left.
| | 02:46 | So it is trying to do some logical reordering.
| | 02:49 | So if I combine that with the <bdo>, and I
will close that tag down here and then
| | 02:56 | reload, you see that now it's
starting to make a little bit more sense.
| | 03:00 | The language is now right-to-left and
the punctuation is also right-to-left.
| | 03:05 | So what the dir="rtl" and the <bdo>
tag do, is they work within the Unicode
| | 03:12 | algorithm and within the language
algorithm, and in combination with the browser,
| | 03:16 | they tried to make this work intelligently.
| | 03:19 | Obviously, if we were writing in an
actual right-to-left to language, it would
| | 03:23 | all make a whole lot more sense.
| | 03:24 | So HTML has these tools for displaying
right-to-left languages and as you can
| | 03:30 | see they're pretty easy to use.
| | 03:31 | Support for these features varies
among browsers, and if you really need to
| | 03:35 | understand how to work this in a
particular language, I strongly suggest that
| | 03:40 | you open up a page that's written in
that language already and you select View
| | 03:44 | Source and see how it's
done in your target language.
| | Collapse this transcript |
| Suggesting word-break opportunities| 00:00 | HTML provides two techniques for
breaking words, the soft hyphen and the <wbr> tag.
| | 00:07 | Let's make a working copy of text.html
and we'll rename this text-working.html
| | 00:13 | and I'll open it in my text editor here,
and you notice I have got Word Wrap on
| | 00:19 | and we have seen this before.
| | 00:21 | It's just a file with a couple
of Lorem Ipsum paragraphs in it.
| | 00:25 | We'll go ahead and open this in the
browser and there we see the text displayed.
| | 00:29 | Now let's say that this paragraph
here, the one that starts with all
| | 00:34 | Aliquam quis, et cetera,
| | 00:37 | let's just pretend that was all one long word.
| | 00:40 | So I am going to take out all these
spaces and I am going to take out the period
| | 00:45 | because one word sentences.
| | 00:46 | You know what they tell you.
| | 00:48 | And I am going to reload this in the
browser, and you see now we just have this
| | 00:52 | long word and it leaves all that space there.
| | 00:55 | If I open up the window far enough,
it all goes on that line and if I start
| | 00:59 | closing it down, it goes in the other
line and it just leaves this ugly space.
| | 01:03 | So there's a couple of things I can do here.
| | 01:06 | I can insert what are called soft
hyphens and this is a named entity s-h-y, like
| | 01:12 | that, soft hyphen or shy, and I am just
going to put it in some places that seem
| | 01:19 | to make sense to me, and I'll save that
and I'll come along here and reload this
| | 01:25 | in my browser, and now you see as I
change the width of the browser, it's
| | 01:30 | actually wrapping parts of
that word and hyphenating it.
| | 01:33 | So that soft hyphen has
really solved our problem there.
| | 01:38 | Another technique instead of the soft
hyphen is to use something called the <wbr>
| | 01:43 | tag and that stands for word break and it's a
word break suggestion and it looks like this.
| | 01:48 | It's an empty element.
| | 01:50 | So I'm using that empty element
shortcut at the end and I am just going to
| | 01:54 | replace all of these soft hyphens with
the <wbr> tag, and you see what this does
| | 01:59 | now, I'll go over here and reload in the
browser, is it does the same wrapping, but
| | 02:03 | it does it without adding the hyphen.
| | 02:05 | So as I change the width of the window,
you see it's breaking the word, but it's
| | 02:10 | not inserting the hyphen.
| | 02:12 | So that's a word break suggestion and
that might actually be useful if you have
| | 02:18 | a word like this that's the name of an
object in JavaScript, and if I want to
| | 02:24 | suggest where that breaks, I can just
say <wbr> in the places where I think it
| | 02:30 | makes sense to break that word, and
then when I reload this, you see it breaks
| | 02:35 | that word in intelligent places.
| | 02:38 | So these two techniques provide ways to
break words with and without a hyphen,
| | 02:42 | you will want to keep in mind that
either of these techniques is likely to
| | 02:46 | disrupt text to speech applications.
| | Collapse this transcript |
| Annotating East Asian languages| 00:00 | Ruby characters are annotation marks
that are used to show pronunciation in some
| | 00:05 | East Asian languages like Chinese and Japanese.
| | 00:08 | Let's make a working copy of asian.html
and we'll call this asian-working.html.
| | 00:16 | I'll open that in the text editor, and
you can see we have couple of examples
| | 00:21 | here showing the first one has some
Japanese annotation marks and the second one
| | 00:27 | has some Chinese annotation marks, and
in each of these examples I have it both
| | 00:32 | with Unicode characters and
with named and numbered entities.
| | 00:36 | So if your browser isn't displaying
the Unicode versions properly, you can
| | 00:41 | uncomment the other
version and that should work.
| | 00:45 | Let's go ahead and open this in the
browser so you can see what this looks like.
| | 00:49 | And in this case, I am
going to be using Google Chrome.
| | 00:52 | Here you will notice that we have a
couple of different versions of the
| | 00:55 | ideograms for kanji or hanzi in
Chinese; kanji is Japanese and hanzi is
| | 01:00 | Chinese, and it's the same word in both
and it means Chinese character, and in
| | 01:06 | both of these cases, they are
annotated and in the top case it's annotated in
| | 01:11 | Japanese with the hiragana and in
the bottom case it's annotated in the
| | 01:15 | Chinese with the Pinyin.
| | 01:17 | Now I just learned all of
that by reading about it.
| | 01:21 | I don't actually speak either of these
languages, but I'll show you how we can
| | 01:25 | do this in the HTML.
| | 01:27 | I am just going to turn on the wrapping here.
| | 01:30 | So the <ruby> tag is a container that
contains all of its text including the
| | 01:34 | actual characters and the annotations.
| | 01:37 | The rt container contains the
annotation itself and the rp container
| | 01:44 | contains some extra text that's only
displayed in the case where the browser
| | 01:49 | does not support Ruby.
| | 01:50 | So for example, if I open this same
page up in Firefox, Firefox does not
| | 01:57 | actually support the Ruby, and you see that
in this case, it shows these rp characters.
| | 02:04 | So I have rp with the parentheses on
either side of the rt with the actual ruby,
| | 02:10 | and so this allows the Ruby to be
shown next to the character, and it's in
| | 02:16 | parentheses to set it apart from
the character that's being annotated.
| | 02:21 | So the same happens down here in the
Chinese example and this is simplified
| | 02:26 | Chinese with the pinyin reading next to
it, and if we look at this in Chrome, we
| | 02:32 | see that the pinyin is above it
because Chrome supports the Ruby.
| | 02:35 | So it's really as simple as that.
| | 02:37 | So the <ruby> tag is an easy way in
HTML to add Ruby characters to East
| | 02:42 | Asian characters.
| | Collapse this transcript |
|
|
5. A CSS PrimerIntroducing CSS| 00:00 | CSS stands for Cascading Style Sheets.
| | 00:03 | This is the language that's used to add
presentation styling to HTML documents.
| | 00:09 | CSS is a powerful and flexible way to
add format to a webpage for presentation.
| | 00:15 | Using CSS, it's relatively easy to
take a simple page of text and images and
| | 00:20 | format it to present as
a fully polished webpage.
| | 00:24 | CSS has a simple syntax that consists
of selectors, properties and values that
| | 00:29 | together make up style rules.
| | 00:32 | CSS rules are able to cascade in
ways that give the developer fine-grained
| | 00:37 | control over how each
element of a page is formatted.
| | 00:41 | This chapter is just an introduction to CSS.
| | 00:43 | It should give you enough knowledge to
follow along with the examples in this course.
| | 00:48 | For more information see my course
CSS for Developers here in the lynda.com
| | 00:53 | online training library.
| | Collapse this transcript |
| Understanding CSS placement| 00:00 | CSS styles could be applied to a
HTML document in several different ways.
| | 00:05 | Let's make a working copy of css.html
and I'll go ahead and rename this
| | 00:10 | as css-working.html.
| | 00:14 | Open that in my text editor and you can
see this is a very simple HTML document.
| | 00:20 | It's got a <h1> element and a few paragraphs.
| | 00:24 | And paragraphs are just full lorem ipsum
so you can put whatever you like in them.
| | 00:28 | Let's go ahead and open this in the
browser and that's how it displays.
| | 00:32 | Now you'll notice that here at the top of the
document I'm actually linking in a stylesheet.
| | 00:38 | So let's go ahead and open
that as well. That's main.css.
| | 00:42 | It's a very simple stylesheet
with just a few styles in it.
| | 00:46 | This is what I call a reset.
| | 00:48 | It's basically giving me a
baseline to start styling a document from.
| | 00:53 | If we come back over here in our editor
and we just comment out this stylesheet
| | 00:58 | so that it's not loaded, if I come back
into the browser and hit reload, you'll
| | 01:03 | see this is what the document looks
like without the stylesheet and if I put
| | 01:08 | the stylesheet back in, save and reload, this
what the document looks like with the stylesheet.
| | 01:13 | So it's basically applying some simple
styles to this document, it's setting some
| | 01:18 | fonts, it's setting some line-heights and
such, and you can see the line-height is
| | 01:22 | not actually very attractive.
| | 01:23 | It's just there as a reset, as a consistent
starting place to format the document from.
| | 01:30 | So using the <link> tag you may apply
a stylesheet stored in a separate file.
| | 01:35 | This is sometimes called an external
stylesheet and these styles are applied to
| | 01:39 | the entire document.
| | 01:40 | You can also apply style by typing it
right into the HTML file using the <style> tag.
| | 01:48 | So I can correct that line-height like this.
| | 01:51 | I can say I want it to be 140% of the
size of the font, and now we come back
| | 01:56 | into the browser and reload you see that the
line-height is changed for all the <p> elements.
| | 02:03 | That's the paragraphs in the document.
| | 02:06 | The <style> element goes in the head
section and these styles are also applied to
| | 02:11 | the entire document.
| | 02:12 | It's also possible to apply styles to
individual elements and you do this with
| | 02:16 | the style attribute.
| | 02:18 | So if I come in here and
I say style=font-family:
| | 02:23 | monospace, and I save that and
come over to the browser and reload.
| | 02:28 | Now this first paragraph the
entire paragraph is in a monospace font.
| | 02:32 | You may have different fonts on your
computer so this font may come up using a
| | 02:37 | different font, but it will use a
monospace font and it ought to be monospaced.
| | 02:42 | So the style attribute allows you to apply
styles to individual elements in your document.
| | 02:48 | There are also a couple of elements
that are designed specifically to apply
| | 02:52 | style to sections of the document.
| | 02:54 | If we come up here above this <h1>
element and I'll put in a <div> tag, and I'm going
| | 03:01 | to close that <div> tag after this
<p>, so this <div> is a block level element
| | 03:07 | and it contains now both
this <h1> and <p> elements.
| | 03:13 | So if I apply styles to this <div>
element like this; <div style="color: #933;".
| | 03:23 | If I apply that style there it's
going to give us a reddish color, and if I
| | 03:28 | reload over here you see these two
elements now have this reddish color.
| | 03:32 | So I've applied style to two different
elements all with one style using this <div> tag.
| | 03:38 | So <div> is block level.
| | 03:39 | There is also an inline level
equivalent called <span> and I'm just going to
| | 03:44 | take a little bit of a sentence here out of
this second paragraph, and I am going to
| | 03:48 | put a <span> around it.
| | 03:50 | So now my style will apply
just to those four Latin words.
| | 03:54 | When I say style=color, I
am going to do the same red.
| | 03:59 | When I come over here and reload
we see there is these four words.
| | 04:03 | I close it and they all go up on one line there.
| | 04:07 | There they are, and those words
are now in that same reddish color.
| | 04:11 | So using <div> for blocks and <span>
for inline level, you can apply style to
| | 04:16 | sections of the document.
| | 04:18 | So let's go ahead and remove these and
we'll talk about how styles are applied
| | 04:23 | on top of the each other.
| | 04:24 | Elements tend to inherit
properties from their parents.
| | 04:28 | So if I specify a font-family in a
paragraph any tags inside that paragraph will
| | 04:33 | inherit that font-family unless
I specify a font for that tag.
| | 04:38 | For example, if come in here and I
put <a> element here, and I'll just close
| | 04:43 | that at the end of this sentence, and let's say
I do the same thing in the next paragraph.
| | 04:50 | So the default formatting of <a> or
whatever I have in my global level
| | 04:54 | style sheets will apply.
| | 04:56 | Now I'll go ahead and I'll reload
this and you see that these elements
| | 05:00 | inherit the font from the paragraph, because
I've not specified a font for the <a> element.
| | 05:07 | So the one up here in the monospace
paragraph gets a monospace font, and the one
| | 05:11 | down here in the serifed
font gets the same serifed font.
| | 05:16 | Now if I come back up here into our
global stylesheet up here and I say <a> and
| | 05:22 | I apply a font I'll say
font-family: sans-serif.
| | 05:27 | Now both of these will be in the same font.
| | 05:30 | When I reload here you'll see they're
both in the same sans-serif font, because
| | 05:35 | I've actually specified
the font for that element.
| | 05:38 | So if I don't specify one just inherits
whatever is there and that's actually a
| | 05:43 | value called inherent.
| | 05:44 | And if I do specify one then even
though I've specified later a font for this
| | 05:50 | <p> element, it's not overwriting that,
because that's got its own font defined.
| | 05:55 | The other thing you need to realize is
that styles defined in later context take
| | 06:01 | precedence over those
defined in earlier context.
| | 06:04 | For example, I've this stylesheet here
that defines a line-height for paragraphs
| | 06:11 | of one times the size of a font, and
here in the document I've specified a
| | 06:18 | line-height of 140%.
| | 06:21 | Because this one is defined after
this one, the later one takes precedence.
| | 06:26 | If I take this <link> element and I
move it to after the <style> element and I
| | 06:31 | reload, now my line-height is narrow
again, because the style defined in a later
| | 06:37 | context is overriding the style
defined in an earlier context.
| | 06:41 | So there are several ways to apply CSS
styles and there are rules as to how they cascade.
| | 06:47 | Use consistent practices in your
documents and this will make it easier for you
| | 06:52 | to maintain your web pages later on.
| | Collapse this transcript |
| Exploring CSS syntax| 00:00 | The language of CSS is really pretty simple.
| | 00:02 | Let's make a working copy of css.html,
and I'm going to rename this to
| | 00:08 | css-working.html, and we
open that in the text editor.
| | 00:14 | And let's scroll through it real slowly for
those of you who are typing along at home.
| | 00:19 | Of course, these paragraphs all just
contain a bunch of Lorem ipsum, so you won't
| | 00:23 | need to type that exactly. Just
any text whatsoever will work fine.
| | 00:26 | And we'll go ahead and we'll open this
in the browser as well, and we see this
| | 00:30 | has my reset stylesheet applied to it, so the
text is really close together, but it is styled.
| | 00:36 | And here's the stylesheet
declaration and you'll notice that the
| | 00:41 | stylesheet itself, go ahead and open
that up so you can see it, is just this
| | 00:45 | very simple reset stylesheet.
| | 00:47 | But for now, we're going to go ahead and
type in a style element here so that we
| | 00:54 | can just type some CSS into this
document and look at the syntax of CSS.
| | 00:58 | A CSS rule consists of a selector
followed by a block of declarations.
| | 01:02 | So let's create a selector
here and a block of declarations.
| | 01:07 | So these curly braces here create a block and
there is three declarations inside this block;
| | 01:13 | there is font-family, font-size and
line-height, and there is a selector, and
| | 01:20 | the selector in this case is a
element selector and it's called p.
| | 01:23 | So this will select all of the <p>
elements in this document, and so these are
| | 01:28 | these paragraphs down here.
| | 01:29 | There are three of them.
| | 01:31 | And if we save this and look in
the browser, we'll hit Reload.
| | 01:35 | You see that these paragraphs now change.
| | 01:37 | They have this font and this size and
this line spacing just as we declared
| | 01:42 | it in our p selector.
| | 01:44 | So this whole thing is called a
rule and this is the selector.
| | 01:48 | It is the letter p there and that
selects all the elements that are called p.
| | 01:53 | Instead, I can use a class selector.
| | 01:56 | I can say .foo like this, and it will only now
select elements that have a class called foo.
| | 02:03 | So if I reload this in the browser
you'll see that's none of these elements, and I
| | 02:07 | can come down here and I can, say
take this middle one, and I can say,
| | 02:11 | class="foo" and save that and reload
it in the browser, and now that middle
| | 02:19 | paragraph there gets that style
applied to it, because it's now class foo.
| | 02:24 | In fact, I can do the same thing with
this h1 element and save that and reload
| | 02:29 | it, and now also gets the class foo.
| | 02:33 | You notice it's still bold because I
didn't change the boldness within this.
| | 02:38 | There's no declaration for font-weight, but
it got the font-size and the line spacing.
| | 02:44 | Now if I only want this to apply to <p>
elements that are of class foo, I can put
| | 02:48 | a p in front of it and say, p.foo.
| | 02:51 | Now when I reload that, header is back to
normal, but the paragraph is still styled.
| | 02:56 | It's also something called an ID
selector, so let's create an ID selector.
| | 03:02 | So the pound sign or the number sign,
Shift+3, that little Hash mark there, that
| | 03:07 | is the ID selector, and here
I've just created an ID called p1.
| | 03:12 | So now nothing applies anymore.
| | 03:15 | And if I come down here and I say id="p1",
save that and reload it, now that
| | 03:23 | paragraph which has this id of P1 is now styled.
| | 03:27 | So the rule about ID selectors is
that there can only be one element in a
| | 03:31 | document with a particular ID selector.
| | 03:33 | Another way to say this is that an ID
selector can only be used once on one element.
| | 03:39 | So if I were to come up here to this h1
and I were to say, id="p1", that would
| | 03:46 | be illegal, so I'm not going to do that.
| | 03:49 | On the other hand if I take the ID
selector out of this p, and save that,
| | 03:53 | you'll see it still doesn't work because we've
said that this ID selector is on a <p> element.
| | 03:58 | So if I reload this, that's still not working.
| | 04:02 | On the other hand, if I take out the p
from the selector now we're selecting
| | 04:06 | anything with this id p1,
now it applies that h1 element.
| | 04:10 | Oftentimes ID selectors are done this way.
| | 04:14 | I tend to like to also use the element name.
| | 04:17 | It's not necessary. It's not required.
| | 04:20 | It is allowed.
| | 04:21 | It just helps me to know when I'm
looking at the style sheet what it is that I'm
| | 04:25 | looking at. I'm looking at a <p> element.
I'm looking at a h1 element or whatever.
| | 04:29 | There is also something
called Descendent Selectors.
| | 04:32 | I tend to use these now and then.
| | 04:34 | If I were to select like this, I'm
going to take out this id down here, I'm
| | 04:38 | going to go ahead and I'm going to put an <a>
element inside of this paragraph and save that.
| | 04:45 | Now I'm just selecting <a> elements
that are descendent from <p> elements.
| | 04:51 | So if I reload this, you'll see that
everything else is still in the old font
| | 04:57 | except for this <a> element.
| | 04:58 | This link is now in the sans-serif
font and then that size and all of that.
| | 05:04 | On the other hand if I put an <a> element
inside of this h1 element and save that,
| | 05:10 | that does not get applied.
| | 05:12 | Of course, it still gets the a.
It's still becomes a link.
| | 05:15 | You see it's still formatted like this header.
| | 05:18 | That's because this descendent selector,
this only applies to <a> elements that
| | 05:22 | are descendent from <p> elements.
| | 05:24 | So it's inside of a <p> element someplace.
| | 05:26 | There is another type of a descendent
selector that has this right angle bracket.
| | 05:32 | That's actually the child selector.
| | 05:34 | It only works for elements that are
direct descendents, so it will still work
| | 05:38 | for this <a> element because
it's a direct descendent.
| | 05:41 | On the other hand, if I were to put
this <a> element inside of something
| | 05:45 | else, like just a span, now it will
no longer apply, because it's not a
| | 05:50 | direct descendent anymore. It's not a child.
| | 05:52 | But if I take that little right angle
bracket out, now it will apply because
| | 05:57 | it is a descendent.
| | 05:58 | It's just not a direct child.
| | 06:00 | There's also something called pseudo selectors.
| | 06:03 | I know there are a lot of selectors
that play here, but we're going to take a
| | 06:06 | minute and look at them all, and this
is the last one we're going to look at.
| | 06:09 | There is actually a lot more, but these are the
primary ones, something called a pseudo selector.
| | 06:14 | And if I use a colon and the word hover here,
that's a pseudo selector that applies
| | 06:19 | to <a> elements and I'll save
that and load it up in the browser.
| | 06:24 | Now you see that that link is in the
same font and everything as the rest of
| | 06:30 | the paragraph, but when I hover my
cursor over it, you see it changes and that's
| | 06:34 | because this pseudo selector is for
when the cursor hovers over the element.
| | 06:40 | And so you'll see that used quite a bit.
| | 06:42 | So those are the major types of selectors.
| | 06:44 | Let's take a look now at the declarations.
| | 06:47 | And I'm just going to make
this for all the paragraphs again.
| | 06:50 | I'm going to come in here and take out
some of this extra stuff that we've added.
| | 06:55 | Save that and reload, and
let's look at the declarations.
| | 06:59 | Remember that this is a declaration,
and declaration has several parts.
| | 07:03 | It has the property name, in this case
font-family is the property name, and it
| | 07:08 | has the value, in this
case sans-serif is the value.
| | 07:12 | The property name and the value are
separated by a colon and terminated with a semicolon.
| | 07:18 | Now in current versions of CSS,
semicolons are separators which means that
| | 07:23 | technically this last one is not required.
| | 07:26 | And if I delete that and reload the page
you see everything is still working just fine.
| | 07:31 | On the other hand, if I delete one of
these other semicolons and reload, now it's
| | 07:35 | not working anymore.
| | 07:36 | So technically as of today,
these semicolons are separators.
| | 07:42 | Unfortunately current versions of the
CSS3 specification as of the date that I'm
| | 07:46 | recording this show a change where
semicolons would become terminators.
| | 07:51 | So this would no longer be legal.
| | 07:53 | It would now be required to have this
semicolon at the end of the last declaration.
| | 08:00 | Personally, I think it should have
been this way in the first place, but
| | 08:03 | unfortunately it's been the other way
for so long that there is a lot of code
| | 08:08 | out there that does things like this, where one-
liners of CSS have no semicolon. I don't know why.
| | 08:15 | I tried always putting the semicolon
anyway, because otherwise I might say, well
| | 08:20 | you know, I want to add a few more
things to this, and so I'm going to add a
| | 08:25 | font-family and blah, blah, blah, and
all of a sudden I'm actually missing a
| | 08:29 | semicolon where it's required.
| | 08:30 | So I really always try to put in the
semicolon because it's just a good idea and
| | 08:36 | it really doesn't take that much
effort, although sometimes I forget.
| | 08:39 | And when I forget it still works,
and therein lies the problem.
| | 08:43 | There's a tremendous amount of code
out there that doesn't use the semicolon.
| | 08:47 | So I'm actually hoping that the people
who are making the specification change
| | 08:51 | their mind and make it a separator
again, but in case they don't, you need to
| | 08:55 | know that that semicolon may
in the future become required.
| | 08:58 | It may also become required in places
like this, where I will have to put in the
| | 09:04 | semicolon even in a style attribute in the HTML.
| | 09:08 | So it's just worth knowing and it's
worth getting into that habit of putting the
| | 09:12 | semicolons at the end of every declaration.
| | 09:15 | It's allowed as it is today and it
may become required in the future.
| | 09:19 | Just like in HTML white space is
ignored in CSS, so this, and I'm just going to
| | 09:26 | delete this other one because
we're not actually using it.
| | 09:29 | So this is actually perfectly legal CSS.
| | 09:33 | I can even take out these spaces here.
| | 09:36 | I can make this entire thing with no spaces.
| | 09:39 | There are some places where spaces are
required like in descendent selectors and
| | 09:42 | things like that, but for the most part
space is completely ignored in CSS, and
| | 09:48 | you'll see that this works exactly.
| | 09:50 | We now have a green
header because I put the color
| | 09:52 | green there in that style.
| | 09:54 | Comments in CSS look like this:
| | 09:57 | they are just like in the C language
or in C-derived languages, a /* to start
| | 10:04 | the comment and an */ to end the comment.
| | 10:08 | There are no line-oriented comments in CSS.
| | 10:11 | If you do that it's not a comment.
| | 10:13 | It's actually ID selector;
| | 10:15 | if you do that, it's not a
comment, it's just a syntax error.
| | 10:19 | This makes it a comment, and so if we
load this up, now we'll see that CSS is
| | 10:25 | not being applied anymore.
| | 10:26 | So the language of CSS is really pretty simple.
| | 10:29 | It's easy to learn and it's
actually pretty easy to use as well.
| | Collapse this transcript |
| Understanding CSS units of measure| 00:00 | CSS values may be expressed in a
number of different units of measure.
| | 00:04 | Some of these units of measure only
apply to some types of values, but you
| | 00:07 | need to know them all.
| | 00:09 | The percent sign is for relative
percentage, in this case the width of this
| | 00:13 | element would be 100% of the width of
its containing element. PT is for points.
| | 00:19 | It's a typographic measurement.
| | 00:21 | There are 72 points in an inch and
12 points is one pica, which is pc.
| | 00:28 | An em is another typographic measurement.
| | 00:30 | It's equal to current font size.
| | 00:33 | So if you've got a 12 point font,
1 em is 12 pts.
| | 00:36 | If your font is set to 32
points than 1 em will be 32 points.
| | 00:42 | Em originally meant the
width of a lowercase letter m.
| | 00:45 | Today it pretty much always means the
size of font and in CSS it's defined to
| | 00:50 | mean the size of a font.
| | 00:52 | In CSS the size of an X is
defined to be half the size of an em.
| | 00:58 | In typography originally an X was
the height of the lowercase letter x.
| | 01:03 | An inch is the imperial inch size
and this tends to be a relative size.
| | 01:09 | It has to do with the way that
your graphics environment is set up.
| | 01:13 | It's rarely exactly actually an inch,
because computer monitors don't tend to be
| | 01:18 | setup in any way that a computer could
really know what an inch is going to be
| | 01:23 | on that screen, especially when you're
dealing with web pages and you have no
| | 01:26 | idea what type of environment your
web page is going to be displayed in.
| | 01:31 | Likewise with centimeters and millimeters.
| | 01:35 | So cm is centimeter and mm is millimeter.
| | 01:39 | This one px is pixels.
| | 01:42 | So this particular width would be 600
pixels wide and pixels you can pretty much
| | 01:48 | count on being one to one.
| | 01:49 | 1 pixel is going to be 1 pixel.
| | 01:52 | Unfortunately, this is becoming less
true. At the time that this is being
| | 01:57 | recorded Apple has just released their
retina display MacBook Pro and on the
| | 02:02 | when retina display MacBook Pro in its
default configuration, 1 pixel is actually
| | 02:07 | 2 pixels in dimension.
| | 02:09 | So 1 pixel is 2 pixels wide and 2 pixels high.
| | 02:12 | So we're coming to a place where an
even pixels is going to be a relative
| | 02:17 | measurement rather than an absolute measurement.
| | 02:19 | But this much is probably sure, and from
where I sit I don't how all of this is
| | 02:24 | going to unfold, but I think it makes
sense that if you have an image on the
| | 02:29 | screen that's 600 pixels wide and 600
pixels tall and you want to line it up
| | 02:32 | with an element that your defining your CSS
to be 600 pixels wide and 600 pixels tall,
| | 02:38 | those two elements ought
to be exactly the same size.
| | 02:41 | So pixels are good for making things
that are a certain size to match other
| | 02:47 | graphical elements that are a fixed size.
| | 02:49 | So CSS uses a concise list of units
to specify the sizes of objects on the screen.
| | 02:57 | It's good to understand these units
so that you can have consistent results
| | 03:01 | with your CSS projects.
| | Collapse this transcript |
| Some CSS examples| 00:00 | Let's take a look at an example of a
fully-functioning page formatted with CSS.
| | 00:05 | Here in the Scissors directory, under
Chapter 5 in your exercise files,
| | 00:09 | you'll find scissors.html.
| | 00:11 | I will go ahead and make a working copy
of that and we'll name it -working.html.
| | 00:17 | I'll open that in the text editor.
| | 00:19 | I am going to page through for those of
you who are typing along at home, and
| | 00:23 | most of the text in here is just Lorem
ipsum, so you can really put whatever you
| | 00:28 | like there, and the rest of
this is all pretty straightforward.
| | 00:31 | You'll notice that these stylesheet
links are commented out, and so when we
| | 00:36 | load this up in the browser, it won't
have any formatting at all, and that's
| | 00:40 | what it looks like.
| | 00:41 | And if we go ahead and put the
stylesheets back in, save that and Reload in
| | 00:46 | the browser, now we have this fully-formatted
page that actually looks pretty presentable.
| | 00:51 | So the point here is that we've
separated the HTML from the presentation.
| | 00:57 | So in the HTML file, we're mostly
concerned with the content and we have
| | 01:01 | all this Lorem ipsum, and
| | 01:03 | we have the sidebar. We have all of the
text, we have the menu and very little
| | 01:07 | else, and we use the
stylesheets for the presentation.
| | 01:11 | So let's take a look at the stylesheets.
| | 01:13 | Main.css; this is the same one we've
been using throughout this course, it's
| | 01:17 | really just a reset, and it just has a
few styles in it to put things in a known
| | 01:22 | state as a starting point for the specific CSS.
| | 01:25 | And in rps.css, RPS stands
for Rock, Paper, Scissors.
| | 01:29 | If you notice in the HTML document
that's the name of the company, Rock Paper
| | 01:34 | Scissors Corporation.
| | 01:36 | So in the rps.css, this is actually
quite a bit longer, and I am going to page
| | 01:40 | through this also for those of
you who are typing along at home.
| | 01:43 | Now we're going to look at
this in a lot more detail.
| | 01:46 | So first we set the body background color,
and you notice in the document that's
| | 01:50 | this brownish color out here.
| | 01:51 | Then we set some defaults for the paragraph.
| | 01:53 | They have a line height of 1.4 times
the size of the font and color black, and
| | 01:59 | we set defaults for the header
elements, h1, 2, h3, h4, h5, et cetera.
| | 02:04 | They all get this font and this color
and these margins, and you'll notice that
| | 02:08 | h2 gets a different size and a different color.
| | 02:12 | Then we have our links a and a:hover,
we have a clear style, and we have a
| | 02:19 | formatting style for right-flushed images.
| | 02:21 | Then we have formatting for figures, and
that's not actually used in this example.
| | 02:26 | That'll be used later on in the course,
and we have formatting for the nav.
| | 02:31 | The nav section is the menu at the top
here and you'll notice that it goes all
| | 02:35 | the way out left-to-right, and you see
the width is 100% for the nav section,
| | 02:40 | and if we look here in the HTML, you'll see
our nav section right here and that's our menu.
| | 02:44 | Id="top-menu" and you see nav#top-menu.
| | 02:49 | And under top-menu with descendent
selectors we're formatting <ul> and <ul> <li> and
| | 02:54 | <ul> <li> <a>, and so <ul> is as list-style-type: none;
| | 03:00 | for the unordered list, and you see our
unordered list here has the links in it
| | 03:05 | for the menu, and those links are in
<li> elements, and so our <li> elements has
| | 03:11 | margin and padding set to 0, but the
rest of the formatting is all done in the
| | 03:15 | <a> element, and you see we have the <a>
element here and that has the actual link in it.
| | 03:20 | So when we look at this in the browser,
you see there is the <a> elements, and
| | 03:24 | they are in block mode and they are
100 pixels wide, and on hover they
| | 03:28 | get this bottom border set.
| | 03:30 | That's not actually a text underline.
| | 03:31 | That's the bottom border, and so if we
look in our CSS, 100 pixels wide,
| | 03:37 | font, the font color, the bottom border.
| | 03:41 | You notice that I set the bottom
border to be the same as the background
| | 03:45 | color, and then on the hover it changes,
and this makes so that the dimensions
| | 03:50 | of the box doesn't change.
| | 03:51 | If I didn't have this bottom border
line here, then the dimension of the box
| | 03:55 | would change when I hover the mouse over it.
| | 03:57 | And so that's all the formatting necessary
to turn that <ul> element into a nice menu.
| | 04:03 | Moving right along, we have our header
section, so we see descendent selectors
| | 04:07 | for header h1 and header p and that does the
formatting for the elements inside of here.
| | 04:13 | The rest of it is all formatted globally
like the image and the h1 and h2 and p,
| | 04:19 | a lot of their defaults are set,
and a few things are just changed.
| | 04:22 | For this we've got a margin-top.
| | 04:24 | That allows this border up here to
be flushed up with the menu, setting
| | 04:29 | margin-top to 0, and for the paragraph
we set some other formatting so that it
| | 04:35 | looks nice in this context.
| | 04:36 | That's that paragraph there.
| | 04:38 | Maindiv is actually outside of all of this.
| | 04:42 | It starts here and if I collapse this
in the editor, you see it goes all the
| | 04:45 | way down to the footer.
| | 04:47 | It's really all of this document, and
the whole purpose of maindiv here is to
| | 04:51 | give us this nice cream background
that goes behind all of the elements,
| | 04:56 | including the sidebar and everything.
| | 04:57 | So it's really just a formatting thing,
and since it's a formatting thing, it
| | 05:01 | doesn't have a semantic tag.
| | 05:03 | We're just using a div, and inside of
that is our header and our article and our
| | 05:07 | aside, and all of this,
and so that's right here.
| | 05:12 | We have the header, we have the
article, and we have the aside, and that's
| | 05:16 | actually this part right here. It's the aside.
| | 05:19 | So the article gets its formatting,
it's got its width, it's got its margins,
| | 05:23 | it's floating left, and some
formatting with descendent selectors for the
| | 05:27 | headers and the paragraphs and
such, and then we have the aside.
| | 05:31 | And again, we have formatting for
the whole aside, you notice it's got
| | 05:35 | this class selector about, and that would
allow me to have different asides if I wanted to.
| | 05:41 | But you'll notice here we have class="about"
for the aside and we're using
| | 05:45 | descendent selectors again to give it
this different formatting for the h1, h2,
| | 05:50 | p and then the sections under the aside as well.
| | 05:53 | You'll notice that inside here we have sections.
| | 05:55 | We could have used class selectors for
these, but this aside just has sections
| | 05:59 | that are all the same, and this allows
us to do some formatting specifically
| | 06:03 | for those sections.
| | 06:04 | You'll notice that each section has
this border-top and that looks like this on
| | 06:09 | the screen, so these are the sections.
| | 06:11 | They have the border-top at the top
of them, also lighter colored borders.
| | 06:15 | And when we format the footer,
it's got a background of 333.
| | 06:19 | That's very dark and so it looks almost
black, but not quite, it's kind of dark
| | 06:23 | gray, and it's got a descendent
selector for the paragraph to format that text
| | 06:29 | down there, and details is something
that we'll cover in another chapter.
| | 06:32 | So really it's a lot of typing,
but it's all very simple and all very
| | 06:36 | straightforward, and all that
straightforward formatting allows us to create
| | 06:41 | a really beautiful page with its
presentation completely distinct from the content.
| | 06:47 | So we want to go in here
and we want to change content.
| | 06:50 | We want to add a section.
| | 06:51 | If I wanted to come down here and say for
example, I wanted to add a section to my aside.
| | 06:56 | I am just going to duplicate
this and it'll be exactly the same.
| | 06:59 | We come in here and reload this document
here, and we now have a whole other section.
| | 07:04 | It's all formatted exactly the
same and it just fits in perfectly.
| | 07:08 | If I wanted to add paragraphs in the
article or even to add an entire extra
| | 07:15 | article, I just select all of that, I
copy it, I put in another article, I
| | 07:19 | give it different content, and you'll notice
that we now have this whole other article down here.
| | 07:26 | So it really becomes very simple to
maintain this, once you separate the content
| | 07:30 | from the presentation.
| | 07:31 | So notice how in this example
the HTML is simple and uncluttered.
| | 07:35 | You can easily see where everything is
and it should be easy to edit and maintain.
| | 07:39 | Likewise, the CSS is clear and
distinct, by separating content from
| | 07:43 | presentation, the document becomes
easier to read and easier to maintain.
| | Collapse this transcript |
|
|
6. ImagesUsing images| 00:00 | Images are a major part of most website designs.
| | 00:02 | While the web is not exclusively a
visual medium, it is primarily so and images
| | 00:08 | are a valuable part of that equation.
| | 00:10 | Let's make a working copy of images.html
and I am going to call this
| | 00:15 | images-working.html and open it in my text
editor, and you see here here's the whole file.
| | 00:22 | It's got some Lorem Ipsum in it and it
has here, starting on line 17, an image
| | 00:28 | tag and let's go through
that image tag real quick.
| | 00:31 | It has several attributes.
| | 00:33 | It starts with a source attribute, s-r-c,
and it tells the browser the source of
| | 00:38 | the image, where to go on the server to
pick up the image, and in this case, it
| | 00:43 | has a relative URL.
| | 00:45 | We'll talk about relative URLs in the
next chapter, but this basically specifies
| | 00:50 | a subdirectory called images and a file
in that subdirectory called scissors.png,
| | 00:56 | and this image has a width of 240
pixels and a height of 240 pixels.
| | 01:02 | I always specify the width and the
height of an image and I'll tell you why.
| | 01:07 | If you're on a slow Internet connection,
and I have to assume that some of the
| | 01:12 | people that come to visit my websites
will be on a slow Internet connection.
| | 01:16 | It may load the page and then it may
take it a while to get around to load in
| | 01:21 | the images and when it does load the
images, then the page can jump around as
| | 01:26 | it figures out the size of the spaces that
are going to be required for the various images.
| | 01:30 | And you'll see text shift this way and
that way and you might even be trying to
| | 01:35 | click on a link and it jumps out of
the way under your mouse or another link
| | 01:39 | jumps in the way, and all of a sudden
you are clicking on something you didn't
| | 01:43 | mean to and you have to go back and
wait all over again for the page to load.
| | 01:47 | It can be a problem and when you
specify the width and the height of all of the
| | 01:52 | objects on your page, then as soon as
the HTML is loaded, the browser knows how
| | 01:56 | to lay out the page, in most cases it
will go ahead and do that and as the
| | 02:01 | images fill in, things
won't jump around as much.
| | 02:03 | And so I always specify the width and
height of my images for that reason.
| | 02:08 | Next, we see the Alt attribute and the
Title attribute, and the Alt attribute is
| | 02:16 | text that will display if the browser
is not able to load the image, or if the
| | 02:21 | browser is able to load the image, but
it takes a while for it to get around to
| | 02:25 | it, and the title attribute specifies
text that will show up in a tooltip, when
| | 02:30 | you hover your mouse over the image.
| | 02:32 | Let's go ahead and load this page up in
our browser, load it in Firefox here, and
| | 02:37 | there is the picture of a pair of
scissors, and you will notice when I hover my
| | 02:42 | cursor over the image, I get a little
tooltip that says running with these is
| | 02:46 | not recommended, and if we look in
our source code here, you see the title
| | 02:51 | attribute "Running with
these is not recommended."
| | 02:54 | I put that TITLE attribute in capitals.
| | 02:56 | I usually do that in lower case.
| | 02:58 | Of course this is HTML and either is acceptable.
| | 03:01 | I may save it this way so it may show
up in lowercase on your computer when you
| | 03:06 | load the exercise files.
| | 03:07 | But you see that title says "Running with
these is not recommended" and that's the
| | 03:11 | text that shows up when I hover
my cursor over these scissors.
| | 03:15 | So it's important to understand the
distinction between the Alt attribute and
| | 03:18 | the Title attribute.
| | 03:19 | The alt attribute is what shows
up when the image can't be loaded.
| | 03:22 | If I just misspell the name of this
file here, I'll put an extra s in it and
| | 03:27 | reload this, you'll see that the image
doesn't show up because it can't load it.
| | 03:31 | It doesn't have the right file name
and instead this alt text shows up and
| | 03:35 | actually if I hover my cursor over
that, I still get the title text.
| | 03:40 | And so that's the purpose of Alt text.
| | 03:42 | If for some reason the image is not
available or for browsers that aren't visual
| | 03:46 | browsers for people that are visually
impaired, then that Alt text will be
| | 03:51 | displayed or read or in
some way given to the user.
| | 03:55 | The Title attribute on the other hand
is for this extra information and in this
| | 04:00 | case it shows up in a tooltip and
that's how it works on most visual browsers.
| | 04:04 | So HTML's image tag is both simple and powerful.
| | 04:08 | We'll cover much more about HTML's image
related features in the rest of this chapter.
| | Collapse this transcript |
| Flowing text around an image| 00:00 | The HTML image tag is normally an inline
element, but sometimes we want to float
| | 00:05 | text around an image.
| | 00:06 | Here is how this is done.
| | 00:08 | Let's start by making a working copy of
images.html and I am going to name this
| | 00:13 | images-working.html and
open it in my text editor.
| | 00:16 | Here you see just a simple HTML file.
| | 00:20 | It's got an image and it's got some
paragraphs with some Lorem Ipsum in them, and
| | 00:24 | if we open this in a browser, you
will see that it looks like that.
| | 00:28 | The image is standing by itself, but that's not
because it's a block level element. It's not.
| | 00:34 | It's an inline level element, but it
just doesn't have any text around it.
| | 00:38 | It's here separate from
the text in the paragraph.
| | 00:40 | So the paragraph actually begins after
it which is why it displays the way that
| | 00:45 | it does on the screen.
| | 00:46 | Now if I want this text to flow around
the image, there is a couple of different
| | 00:51 | ways that I can do this.
| | 00:53 | In old HTML4 and earlier this
was done with an align attribute.
| | 00:58 | I would say align="left" like that,
and I could put this back on the line
| | 01:05 | there if I like, but of course HTML
ignores all of that whitespace that
| | 01:08 | doesn't actually matter.
| | 01:10 | And if I save this and reload in the
browser, you'll see that now the text
| | 01:14 | flows around the image.
| | 01:16 | There is no margin between them.
| | 01:18 | It's not very attractive, but this is
how it used to be done and there are other
| | 01:22 | attributes to put some space between
them, and it was all a little bit cumbersome
| | 01:26 | and didn't work very well.
| | 01:28 | Now this still works and you're
certainly allowed to do it this way.
| | 01:32 | All the modern browsers support legacy
code, but there is a correct way to do
| | 01:37 | it, and technically in HTML5, the align
attribute is obsolete and instead we
| | 01:43 | will use a stylesheet.
| | 01:44 | So I am just going to put a style
right here in the HTML for this tag and I
| | 01:49 | am going to say float: left, like that.
| | 01:52 | When I save that and reload it in
the browser, you see it accomplishes
| | 01:56 | exactly the same thing.
| | 01:58 | And if I like, I can say float: right, and reload,
and now it floats off to the right.
| | 02:04 | But because the paragraph is flushed
left, I am going to leave it on the left
| | 02:08 | so that we can see this ugly border right here,
and we can see that that's not working very well.
| | 02:12 | I am going to show you what we can do with this.
| | 02:13 | Again using CSS, this becomes very easy.
| | 02:16 | I can say margin-right: 10px
and I can say margin-bottom: 5px,
| | 02:24 | and when we load this up in the
browser, we see now we have a nice little
| | 02:28 | margin around the image.
| | 02:29 | I can even put a little border
around it. I can say border:
| | 02:33 | solid black 1px, and give it a padding
of 2 pixels so there is a little space
| | 02:39 | between the border and the image, and
when I reload it, now we have a rather
| | 02:43 | attractive looking image with a nice
little border around it and a good amount
| | 02:47 | of margin around it as well.
| | 02:48 | So you can easily do a lot of
things to make this image look good.
| | 02:52 | It's worth noting that any time you add
a float, either with the align attribute
| | 02:56 | or with the float property in CSS, that
the image actually converts to being a
| | 03:01 | block level element.
| | 03:02 | So now it is block level.
| | 03:04 | It is no longer inline.
| | 03:05 | Of course this is a lot of stuff to type
and if you are going to type this much,
| | 03:09 | you are going to want to be able to
reuse it, so I am going to go ahead and copy
| | 03:12 | this and I am going to come up here
and I am going to create a style, and I am
| | 03:17 | going to call this style float-img.
| | 03:20 | I am going to put a dot in front of it to make
it a class and I'll take all
| | 03:23 | that stuff that I copied and
| | 03:24 | I am just going to--and now we have
a nice class for this float image and I
| | 03:29 | can come down here and I can
take all of this and I can just say
| | 03:33 | class="float-img" like that, and
confirm that that's what I named it and save
| | 03:40 | this and reload it in the browser, and
you see that it looks exactly the same.
| | 03:45 | Now if I want to, I can make it float
right, and there it is, and if I want
| | 03:50 | to, I can come down here and I can take
all of this and I can copy it, and have
| | 03:56 | another image, say this one will be
paper, picture of paper, and I can say
| | 04:04 | "Running with this is recommended", and we
come over here and load it in the browser.
| | 04:09 | Well notice it's not quite exactly right.
| | 04:12 | We now have two of them and one of
them is to the left of it and the
| | 04:17 | wrapping around isn't right.
| | 04:18 | That's because they're both floating
right, and the way to fix this and we are
| | 04:22 | going to talk about this a little
bit more later, but we can say clear:
| | 04:25 | right and then each one of these floats
will start on a line by itself, and so
| | 04:31 | now it's doing exactly what it is that
we meant for it to do, and I can change
| | 04:36 | this margin-right to margin-left so
that that looks better, and now it's
| | 04:39 | floating right and it's got a
nice little margin next to it.
| | 04:42 | So you can see that formatting images
for display with CSS is easy and powerful.
| | 04:48 | For more foregrounding options, see my
CSS for Developers course here on the
| | 04:52 | lynda.com online training library.
| | Collapse this transcript |
| Breaking lines around an image| 00:00 | When text is floating around an image,
sometimes you'll need to force some text
| | 00:05 | to start after the image, say for
heading or for some other purpose.
| | 00:08 | Let's make a working copy of image
-float.html, and we'll call this
| | 00:13 | image-float-working.html.
| | 00:16 | I'll open that in my text editor.
| | 00:18 | You'll notice a few things here.
| | 00:20 | Up at the top, we have a style for
floating right an image, and then down here
| | 00:25 | we have an image that uses that class
float-right, and we have some text to
| | 00:32 | float around the image.
| | 00:33 | So let's go ahead and load this up in
the browser and there we have our image of
| | 00:37 | the scissors with text floating around it.
| | 00:39 | Now if we want to break the text so
that say this paragraph here starting with
| | 00:44 | Ut non ante, if we want that to start
after the image and to break that floating
| | 00:51 | around it, there is a couple
of different ways to do that.
| | 00:54 | So that's right here.
| | 00:56 | Now in previous versions of HTML, it
was common to use the <br> tag for this and
| | 01:01 | you would do something like this, br
clear="right" and if I save that and load
| | 01:07 | it up in the browser, you'll see that
that paragraph now starts after the image.
| | 01:12 | That clear="right", it says
anything that's floating on the right.
| | 01:16 | Let's clear that before we start this paragraph.
| | 01:19 | So this obviously still works because
browsers are designed to support legacy
| | 01:24 | code, but this is actually considered
obsolete in HTML5 because the use of a lot
| | 01:31 | of different attributes to do these
kinds of things was originally the
| | 01:34 | philosophy behind HTML and HTML was
getting really, really big and it wasn't
| | 01:38 | doing the job, and so stylesheets
with CSS was developed and now it's much
| | 01:44 | preferable and much more flexible
to do these kinds of things with CSS.
| | 01:48 | So instead I can just take this <p> tag and I can
say style= and I can say clear: right, like that.
| | 01:56 | If I save this and load it in the browser,
you'll see I get exactly the same result.
| | 02:02 | So using the CSS clear property works great.
| | 02:04 | There are three possible values for
clear left, right, and both, and I'll often
| | 02:10 | create a class for this and
this actually works really great.
| | 02:13 | You see up here I have a class
that's called .clear and it has clear:
| | 02:18 | both in it, and so instead of this, I
can just say class="clear" and now I can
| | 02:25 | use it in different parts.
| | 02:26 | I can use it on different elements, and
I can use it in different places in my
| | 02:30 | HTML and it'll still work exactly the same.
| | 02:33 | I hit Reload and that
still works exactly the same.
| | 02:36 | In fact, if I wanted to use a <br> for
this, now I can. I can close my <p> here and
| | 02:42 | I can say br class="clear" and I can
load this up in the browser and I have
| | 02:49 | exactly the same result.
| | 02:51 | So the CSS property clear is used to
clear a floating object like an image.
| | 02:56 | This gives you the control to start
text after the floating object like the
| | 03:00 | image instead of flowing around it.
| | Collapse this transcript |
| Aligning images| 00:00 | In the book Creative HTML Design that
Lynda and I wrote back in the '90s, we
| | 00:04 | presented an example of an image that had
been chopped up and reassembled using HTML tables.
| | 00:10 | This was a common technique in those
days because it allowed parts of the image
| | 00:14 | to be used in different ways.
| | 00:15 | This movie presents some HTML5
compatible way to accomplish the same thing today.
| | 00:20 | If we open this folder called
cutapart in the Chap06 folder of the exercise
| | 00:25 | files you'll see two versions of this example.
| | 00:28 | One version uses tables and this is
basically the way that we did this back in the '90s.
| | 00:34 | It's a little bit different than our
original example, because some of the
| | 00:37 | tags and attributes are better
defined today in HTML5, than they were back
| | 00:41 | then, but this is valid HTML5, and
it uses a combination of tables and
| | 00:47 | stylesheets to accomplish this.
| | 00:48 | I am just going to open this up in the
browser and you'll see what looks like an
| | 00:53 | image, but you will notice it's made
up of 12 different images that are all
| | 00:58 | summed up together in a table.
| | 00:59 | And if we look back here in this folder,
under images you see here are these 12 images.
| | 01:04 | I am going to use the QuickView feature
here on this Mac and we can look at each
| | 01:09 | of these images as I scroll down the list.
| | 01:11 | And you see these are all the
different parts of that one image.
| | 01:15 | And then here's the whole image.
| | 01:17 | So that's the table's version.
| | 01:18 | What I am going to show you now
is the HTML5-ish way to do this.
| | 01:24 | And there it is in the browser,
and here it is in our text editor.
| | 01:29 | It's actually a little bit simpler. It's
a little bit smaller, it has a few less
| | 01:33 | lines of code, and you can
see it's actually very clear.
| | 01:36 | All we have here is a set of divs and
the images, and everything else is done in
| | 01:41 | the CSS and really just
with a couple of lines of CSS.
| | 01:45 | And here it is in the
browser, exactly the same result.
| | 01:48 | In each of these images if I do a view
image, you will see they are all the little
| | 01:52 | pieces of the image.
| | 01:53 | So here's how this works.
| | 01:54 | We have a div with a class called cutapart.
| | 01:57 | And that's really only used for context.
| | 02:00 | In CSS, I am using descendent
selectors, so where crow is a descendent of
| | 02:06 | cutapart, this style will be
applied which basically just has a clear.
| | 02:10 | And where image is a descendent of
cutapart, it changes the image to block mode
| | 02:16 | and floats it to the left.
| | 02:17 | Actually if I just float it to the
left, it will make it block mode anyway.
| | 02:21 | I just put this in also to remind
myself that that's what it's doing.
| | 02:26 | And that's all there is to it.
| | 02:28 | So in each of these div class crow,
we have a number of images and these
| | 02:34 | images float left, and then they clear, and the
clear happens because the clear is in the crow.
| | 02:41 | So when the next crow shows up, we get a clear.
| | 02:44 | And then a number of images that are
floating left, and when you float objects
| | 02:48 | next to each other, all in the same
direction, they stack up in that direction.
| | 02:52 | And so all this is doing is it's
stacking up image, image, image, image, image
| | 02:57 | and then image, image, image, image,
like that in these different rows.
| | 03:01 | You can see it a little better.
| | 03:03 | If I go ahead and put a border on the
image and we reload this, you can see each
| | 03:08 | of the images now has this red border
and you can see all the pieces of them.
| | 03:12 | So these four stack up in the first crow,
these four stack up in second crow and
| | 03:17 | these four stack up in the third crow.
| | 03:18 | Now this technique does have one problem.
| | 03:22 | We'll go ahead and take that
border off and reload over here.
| | 03:25 | If I come up here after all of this and
I say <p> this is a paragraph of text.
| | 03:32 | And I save that and load it up;
| | 03:34 | you will notice that the text comes up
here in the last crow, because the last
| | 03:39 | crow is floated to the left.
| | 03:41 | And so what this requires is a clear. Now
I could create a class up here
| | 03:47 | called clear, and then I can put that
class on this paragraph and that would
| | 03:52 | actually solve the problem.
| | 03:54 | And I hit a Reload here and we
see now the paragraph is down there.
| | 03:57 | The problem with this solution
is that it's not consistent enough.
| | 04:01 | It's not repeatable enough.
| | 04:02 | It would be easy for me to forget to put
this clear in and to forget why this is
| | 04:07 | a problem and to end up
having to reinvent the wheel.
| | 04:10 | What I really need is something
that I can put inside of here.
| | 04:13 | So what I've done, and I actually do
this in most of my stylesheets, because I
| | 04:18 | come across this kind of problem often enough.
| | 04:20 | I create a class called clear that does this.
| | 04:24 | It makes it possible for me to have
an object like a paragraph or a div or
| | 04:29 | something and I'll usually--I am just
going to take this out of here and I am
| | 04:34 | going to close this
paragraph like I am supposed to.
| | 04:37 | I am going to come up in here
and I am going to just say
| | 04:41 | <p class="clear" empty.
| | 04:43 | And now all I have to do is remember to
put that in every time I do this pattern,
| | 04:48 | and you'll see that it works perfectly.
| | 04:50 | I will Reload this and there is my paragraph.
| | 04:53 | And in this case, I have a normal
paragraph here and it's got the leading
| | 04:57 | above it just like I would expect and it
actually looks exactly like it's supposed to look.
| | 05:01 | So now we have a good repeatable
pattern, it's got a manageable amount of
| | 05:05 | CSS, and it solves the whole problem and allows
us to assemble our images in a very simple way.
| | 05:12 | So this technique can be handy for
manipulating parts of an image, say with
| | 05:16 | animation or rollovers.
| | 05:17 | It also demonstrates just how powerful
the combination of HTML and CSS can be
| | 05:22 | when used thoughtfully.
| | Collapse this transcript |
| Mapping links in an image| 00:00 | HTML provides a feature to define
regions of an image as links to different URLs.
| | 00:06 | This is called an image map.
| | 00:08 | Let's make a working copy of imagemap.html.
| | 00:13 | I am going to call this imagemap-working.
| | 00:15 | I'll open this in my text editor and
you can see it's a very small file.
| | 00:20 | It just has an image and an image map, and
we'll get into the details of this in a minute.
| | 00:26 | Let's go ahead and open this in the
browser, and you can see here's our scissors
| | 00:31 | image and this one is a little bit different.
| | 00:34 | And if you want to copy of this, it's in
the images folder here if you have the
| | 00:38 | exercise files; there's scissorsimagemap.png,
and here is the original Photoshop
| | 00:42 | file that I used to create this.
| | 00:46 | And this has a couple of different regions.
| | 00:48 | You'll notice that if I just put my
cursor there, it says "Running with these is
| | 00:52 | not recommended" like we expected.
| | 00:54 | If I put my cursor over the square,
I get one that says rectangular area.
| | 00:58 | If I put my cursor over the circle and
you'll notice that the cursor, the hot
| | 01:03 | area is actually circular.
| | 01:06 | I put my cursor there.
| | 01:07 | It says circular area.
| | 01:08 | And if I put my cursor over the
scissors, it says "Poly area for scissors" and
| | 01:14 | this is actually shaped like the scissors.
| | 01:17 | You'll notice that I've defined a
polygon shape that goes around the scissors,
| | 01:24 | and that's all defined in here.
| | 01:25 | So here's the way that this works.
| | 01:26 | We have our normal <image> tag and it has
this new attribute called usemap, and it
| | 01:32 | gives a fragment address for the <map>.
| | 01:35 | And that fragment address is
introduced by a hash mark, a pound sign, a number
| | 01:40 | sign and then the name of the map.
| | 01:42 | And so down here we have a map and map
is a container. See it has an end tag and
| | 01:49 | it has a name attribute that names the map,
and that matches up with this usemap
| | 01:54 | attribute in the <image> tag so
that's how the <image> tag finds the map.
| | 01:59 | Now the map has area elements
inside of it, and the area element is an
| | 02:04 | <empty> tag so it has this little <empty> tag shortcut
at the end and it has a number of attributes.
| | 02:10 | It has an attribute that names this shape.
| | 02:12 | A shape can be a rectangle with r-e-c-t.
| | 02:15 | It can be a circle.
| | 02:16 | It can be poly for a polygon.
| | 02:18 | And depending on which shape you use,
your coordinates are going to be in
| | 02:21 | a different format.
| | 02:22 | For rectangle, you're defining 2 points,
the upper left and lower right point
| | 02:28 | and you'll draw the
rectangle based on those two points.
| | 02:30 | And each of these points is in x y format.
| | 02:33 | So 50 here is the number pixels from
the left side of the area and this other
| | 02:38 | 50 is the number of pixels from the top of
the area, and then you have an alt attribute.
| | 02:43 | And just like the alt attribute in an
image, this used for cases where the
| | 02:48 | browser is not rendering this properly.
| | 02:50 | And you have a title
attribute just like with the image.
| | 02:54 | This will display when you hover
over it or it will be used in
| | 02:57 | a descriptive context.
| | 02:59 | And then href is the link to whatever
is being linked at, in this case is this
| | 03:04 | rectangle.htm, and you'll notice
that I don't actually have one.
| | 03:08 | If I click on this I will
get a little error message.
| | 03:11 | So the same for circle, except with
the circle we've the first two are the
| | 03:16 | coordinates of the center of the circle.
| | 03:18 | So it's 150 pixels from the left and
25 pixels from the top of the image, and
| | 03:23 | the third is the radius of the circle,
not the diameter with the radius.
| | 03:28 | That's the distance from the center of
the circle to the outside of the circle.
| | 03:33 | And then poly is actually very
simple, but it looks very complicated.
| | 03:37 | This is just a sequence of x-y
coordinates, x,y,x,y,x,y,x,y,x,y and
| | 03:44 | these coordinates must go around the
polygon in order, and it can be in either
| | 03:50 | direction; clockwise, counter clockwise.
However you want it. They just have to be in sequence.
| | 03:55 | So that if you were to draw a line from
each of those and from the last one back
| | 03:59 | to the first one, you'd have the
polygon that you're trying define.
| | 04:02 | So that's all there is to it.
| | 04:04 | That's how this works.
| | 04:05 | That's what this looks like.
| | 04:06 | You can see I can pretty much trace the
edges of these and they do exactly what
| | 04:11 | I'd expect them to do.
| | 04:12 | Same with the circle there, and even
with the polygon, so the image map feature
| | 04:18 | allows you to define
regions of an image as links.
| | 04:21 | You can define rectangular areas,
circular areas, and even polygons.
| | 04:25 | This is a powerful and flexible feature.
| | Collapse this transcript |
|
|
7. HyperlinksUnderstanding URLs| 00:00 | Before we can talk about hyperlinks,
we first need to talk about URLs.
| | 00:05 | URL stands for Uniform Resource Locator.
| | 00:08 | It's a way of specifying the
location of a resource on the Internet.
| | 00:13 | A resource can be a web page, an image or
file of some kind, or really any kind of service.
| | 00:19 | It doesn't always even map to a
particular object on a particular server.
| | 00:22 | It's really just an address.
| | 00:25 | A URL looks like this, and it's
got a number of different parts.
| | 00:28 | The scheme specifies the protocol in use.
| | 00:32 | Most URLs for web pages
will be either HTTP or HTTPS.
| | 00:35 | A scheme is always followed by
the :// combination of characters.
| | 00:42 | Host is the host name or IP address
for the host server that contains the
| | 00:47 | resource that you're specifying.
| | 00:48 | Port is the TCP port number.
| | 00:52 | It defaults to the default port number for
the protocol specified in the scheme field.
| | 00:56 | You normally can omit this and the colon before it.
| | 01:00 | The path field is the path to
the object you're specifying.
| | 01:03 | Typically, this looks like a UNIX file
path, and it tends to follow those rules.
| | 01:08 | It always begins with a slash.
| | 01:10 | Keep in mind this is a forward slash as
in a UNIX file path; it is never a backslash
| | 01:16 | like you'd find in a Windows file path.
| | 01:18 | Although many servers will allow the backslash,
it is always correct to use a forward slash.
| | 01:23 | The query string will be paths
to software running on the server.
| | 01:27 | It's typically used for CGI queries.
| | 01:29 | It can provide a number of name-value pairs.
| | 01:33 | The fragment identifier is used to jump to
a location within a page or other resource.
| | 01:38 | Let's look at some examples.
| | 01:40 | These URLs specifies a host name, and
the path is the single slash character
| | 01:45 | indicating the root directory.
| | 01:47 | This is often the default if you omit the path.
| | 01:50 | This URL specifies a host name and a path.
| | 01:53 | The path in this case is /contact/.
| | 01:57 | This indicates the default resource in
the contact directory at the bw.org host.
| | 02:03 | This is called a relative URL.
| | 02:05 | This specifies the contact
directory on the current host.
| | 02:09 | If you put this URL in a link in a
document, the browser will complete it to
| | 02:13 | include the host name of the
host for the current document.
| | 02:16 | This is another form of a relative URL.
| | 02:20 | In this case, the web browser will
complete it with the host name and directory of
| | 02:24 | the current document.
| | 02:25 | We will take a look at some examples
of relative URLs later in this chapter.
| | 02:29 | Understanding the parts of a URL and how
relative URLs work is an important part
| | 02:34 | of understanding HTML.
| | 02:36 | You'll need this in order to
construct links that work in a variety
| | 02:39 | of environments.
| | Collapse this transcript |
| Working with hyperlinks| 00:00 | In HTML you create a hyperlink with the a tag.
| | 00:04 | Let's make a working copy of
links.html, and I'll call the copy
| | 00:09 | links-working.html and
open it in my text editor.
| | 00:14 | Very simple, small, HTML page.
| | 00:15 | It's got a paragraph and it's got a link.
| | 00:18 | Go ahead and open this in the browser.
| | 00:21 | You notice that the file that's
opened here is on the desktop. The URL is a
| | 00:27 | file URL like that.
| | 00:29 | So what that means is that
this URL is not on a server.
| | 00:33 | This file is not on a server.
| | 00:35 | It's on my file system, so
that's why we have a file URL.
| | 00:38 | And there is a link here, and you'll
notice the helper text at the bottom of
| | 00:42 | the screen, so down here we get this
little hyper text when I hover my mouse over it.
| | 00:47 | It has an HTTP URL, so it says
http://ldc.bw.org, and if we look here in the
| | 00:55 | HTML file, you see here's a link to--we
have <a href=, and there is that URL that
| | 01:00 | was showing up at the bottom of the screen.
| | 01:02 | You see it down there at
the bottom of the screen?
| | 01:03 | That's exactly the same.
| | 01:06 | So if I click on this, it loads up that
page on my web site, and that URL is ldc.bw.org.
| | 01:13 | Now, this is Firefox, and it obscures
parts of the URL. If I put my cursor up here--
| | 01:19 | and that still doesn't do it.
| | 01:21 | In some browsers, if you put your cursor
up there, it will show you the whole URL
| | 01:23 | with the HTTP and everything.
| | 01:25 | Here it's just showing you the
part of it that goes after the HTTP.
| | 01:30 | So that's not helping us much,
but that's what it looks like.
| | 01:33 | So the a link, a stands for anchor, and
that's a historical reference really.
| | 01:38 | A tags aren't so much anchors
any more as they are just links.
| | 01:42 | Used to have a dual purpose, and one
of those purposes has been completely
| | 01:46 | deprecated out of HTML.
| | 01:47 | But it looks like this.
| | 01:49 | It has the name of the tag, which is a;
the href attribute, which specifies the
| | 01:56 | URL where the link goes;
and so it's as simple as that.
| | 02:00 | And if we come back to the page here and
we reload, we can click on that link and
| | 02:05 | it takes us where we want to go.
| | 02:07 | There is one attribute
I'd like to show you here.
| | 02:10 | It's the target attribute.
| | 02:12 | You can specify the name of a named
window that's been opened and created with
| | 02:17 | JavaScript, or you can say _blank.
| | 02:20 | And if I save this now, it will open
it in a blank page, and in Firefox that
| | 02:25 | usually means a tab. Let me reload here
and go ahead and click on that, and so
| | 02:29 | it's opened this page in a new tab and
it's left that alone in the old tab.
| | 02:34 | In some browsers it will
actually open it in new window.
| | 02:37 | Now the a tag is actually an inline tag,
but it's unique in that it will allow
| | 02:42 | block-level content. And so if I take
out this whole paragraph here and instead,
| | 02:50 | in between this a tag I
can put block-level content.
| | 02:53 | I can do something like section, and I
can give it a little bit of style, and
| | 02:57 | inside of that, I can have an h1 tag
and I can have paragraph tags, and all of
| | 03:03 | this can be inside of an a element.
| | 03:07 | You know, when I save this and reload
it in the browser, all of that is now this
| | 03:11 | link and I can click anywhere in there
and it will bring me to the target page.
| | 03:16 | The a element by itself is very
powerful, and it may look and work in many
| | 03:21 | different ways,
especially when combined with CSS.
| | 03:23 | We'll see more examples of
this in the rest of this chapter.
| | Collapse this transcript |
| Using relative URLs| 00:00 | Relative URLs are URLs that don't
specify a complete host and path. Let's go
| | 00:05 | ahead and open up relative.html.
| | 00:08 | I'm not going to make a working copy
here because we're not going to be changing
| | 00:10 | anything, but I want to
show it to you in the editor.
| | 00:13 | And here we have a normal little HTML document.
| | 00:16 | You'll notice that this link here,
instead of having a whole URL, it just has a
| | 00:21 | file name, page1.html.
| | 00:23 | So what happens with that is that the browser
comes along and it says, oh, a relative URL.
| | 00:29 | So it'll construct a complete URL and
it'll use this as the basis of that, and
| | 00:35 | so what it does is it says,
well, where did I get this document?
| | 00:37 | I got this document on
this host and at this path.
| | 00:40 | I am going to take that host and path
all the way up to the file name and I am
| | 00:44 | going to replace the file
name with whatever is here.
| | 00:46 | So we have a path here.
| | 00:48 | Let me go ahead and open this in the
browser so you can see what that looks like.
| | 00:52 | It's a file path. See, it starts with
the file scheme and then it's got this
| | 00:57 | path/users/billweinman blah, blah, blah,
all the way up to Chap07/relative.html.
| | 01:04 | So what the browser will do is it says,
I'm looking for this page1.html in the
| | 01:10 | path where the current document is,
and so just take this relative.html and
| | 01:15 | it'll replace that with page1.html.
| | 01:18 | And if I hover my mouse over this,
you'll notice down here at the bottom of the browser,
| | 01:22 | you'll see that constructed URL.
It's everything up to Chap07 and it's page1.html.
| | 01:29 | So when I click on that, I
get this page1 document.
| | 01:32 | Let's take a look at that.
| | 01:33 | We'll open that in our text editor,
page1.html, and we see here, it's the same
| | 01:39 | document basically,
and we have a couple of things.
| | 01:42 | We have a link to, and here it is, a
link to page2, but you'll notice that
| | 01:47 | this has a subdirectory.
| | 01:49 | Again it's a relative URL.
It doesn't begin with a slash.
| | 01:52 | It doesn't begin with HTTP or anything
like that, and it says subdir/page2.html.
| | 01:58 | So the browser will go through the same process.
| | 02:01 | It'll take the current
path to this page1.html that
| | 02:05 | it's opened up and it's found this URL
in, and it'll replace page1.html with
| | 02:10 | whatever it sees here, which starts
with "subdir/page2.html." So if we look at
| | 02:15 | this in the browser, see, we have our
current path has everything up to Chap07.
| | 02:21 | And if I hover with this page 2, you
see down here at the bottom it says
| | 02:24 | Chap07/subdir/page2.
| | 02:27 | And if we look here in our file system, you see
we have a subdir, and there is the page2.html.
| | 02:33 | So when I click on this link,
it brings up that page2. And let's just bring
| | 02:38 | that up in the editor, and we can look at that.
And you'll notice a couple of things in here.
| | 02:43 | One is the style sheet.
| | 02:45 | You'll notice back in our other
documents, if I bring up page1.html, you notice
| | 02:51 | our style sheet here, it says main.css
in the href. And if I bring up page2
| | 02:57 | you'll notice it says ../main.css, and the
link back to page1 has ../page1. So this ..
| | 03:07 | is a special thing. Actually, it comes
from UNIX file systems, and it means the
| | 03:11 | directory of the previous
level relative to this document.
| | 03:15 | In other words, when we look up here at
this whole path up to page 2 and we see
| | 03:20 | that the current directory is
subdir, what it'll do is it sees that ..
| | 03:25 | so it takes one out, and it'll go back to
Chap07, and it'll construct that URL, so
| | 03:29 | you see the URL says Chap07 page1.html
down there at the bottom of the screen
| | 03:35 | and here it says ../page1.
| | 03:37 | The same thing for the CSS, because our
CSS file is in the previous directory.
| | 03:42 | See, it's right there.
| | 03:43 | So this href for the CSS works exactly
the same way, and you can have relative
| | 03:49 | URLs there too as well.
We've been doing that all along.
| | 03:52 | If we look at the URL in page1, it just
says main.css. That's a relatively URL.
| | 03:57 | It means in the current directory.
| | 03:59 | So let's go ahead and click on our
back-to-page-1 link, and you see now
| | 04:03 | we're back in Chap07 and click on
original document. See, now we are back at
| | 04:08 | the original document.
| | 04:09 | So relative URLs are a great way to
refer to objects within the same file space.
| | 04:13 | Be careful though; it takes some effort
to maintain relative links as you move
| | 04:17 | your documents around on your site.
| | Collapse this transcript |
| Specifying a base URL| 00:00 | HTML has a feature that allows you to
specify a different base URL for use in
| | 00:05 | resolving relative URLs.
| | 00:07 | Let's make a working copy of
base.html, and we'll call our working copy
| | 00:12 | base-working.html, and we'll
open that in the text editor.
| | 00:19 | And we have a relatively small file.
| | 00:20 | And if we open this up in the browser,
you notice there's a link to page 1.
| | 00:27 | And you'll notice, if you look at this
link, it just says page1.html. And if you
| | 00:32 | look here at our current URL in the
location bar, it shows that we're in local
| | 00:37 | file system, Chapter 7, base-working.html.
But if I hover over this and you look
| | 00:43 | down here at the bottom, it says
it's looking for it on my server,
| | 00:46 | ldc.bw.org/html-chap07/page1, like that.
| | 00:52 | And that's because of this base tag here.
| | 00:55 | So what the base tag does is it gives
the document some place else to base
| | 01:00 | its relative URLs from.
| | 01:02 | So when the browser sees this relative
URL, instead of saying, well, where is my
| | 01:08 | document and let me build the URL based
on that, it's going to build it based on
| | 01:13 | this location instead.
| | 01:14 | And this location is on a
different server, in a different state.
| | 01:19 | So when I click on this,
you'll notice that it brings up this page from my
| | 01:24 | server instead:
ldc.bw.org/html-chapter07/page01.
| | 01:29 | And when I link to page 2, see,
it's all there on the server.
| | 01:33 | Back to page 1. Even when we link back
to the original document, we're not in
| | 01:38 | our original document on the local file system;
| | 01:40 | it's on the server instead.
| | 01:42 | So this is a very powerful feature.
It can be a source of confusion;
| | 01:48 | it can be a source of problems when
you're trying to figure out what's
| | 01:51 | wrong with something.
| | 01:52 | I recommend that if you ever use this feature--
and frankly, I've never actually used it--
| | 01:58 | if you ever use it, you do so very
carefully and you document it very
| | 02:02 | thoroughly, so that whoever comes
along after you to try to figure out what
| | 02:05 | happened, will know.
| | 02:07 | The base element allows you to
specify the base URL for use in
| | 02:11 | resolving relative links.
| | 02:13 | This can be handy for development
purposes, but I strongly recommend against
| | 02:17 | using it in a production environment.
| | Collapse this transcript |
| Linking within a page| 00:00 | In HTML it is possible to link to a
part of a page, causing the browser to
| | 00:06 | scroll to that point.
| | 00:07 | Let's open up fragments.html.
| | 00:08 | We're not making a working copy
because we're not really going to edit this.
| | 00:12 | This is a very large document.
| | 00:14 | It is about 207 Kbytes, and it has 4798--
or 99, if you count the blank line at the
| | 00:24 | end--lines of HTML in it.
| | 00:26 | So it is a very large file.
| | 00:29 | And when we open it in the browser here,
you notice that it's just a very long file.
| | 00:35 | There is a lot of stuff in there. What this is,
| | 00:39 | it's a list of countries and cities with
their populations inside of the countries.
| | 00:45 | Now I got this out of a public
domain database and I wrote a little script
| | 00:48 | that generated the HTML.
| | 00:49 | I did not actually type all these
4,700 and some odd lines of HTML.
| | 00:55 | So how do you navigate
around a file that's this big?
| | 00:58 | Well, the way you do this is with fragments.
| | 01:00 | Remember we talked about URLs,
there is a piece of the URL at the end
| | 01:05 | that's introduced by a hash mark or a
pound sign or a number sign, like this, and
| | 01:10 | that's actually a link.
| | 01:12 | You notice it's in the a link
tag to a place within a file.
| | 01:16 | And at the other end of that--we
scroll down here to one of our cities--
| | 01:20 | you see this id element; that is the target.
| | 01:24 | Of course id is also used as a
selector in CSS, so this is a convenient
| | 01:29 | double use for this.
| | 01:30 | In earlier versions of HTML the a tag
would be used. It would do something like
| | 01:36 | this, a name="BOL."
And the target would be to that.
| | 01:43 | But it was an inconvenient use of a.
It was an overloading of a. It was such a very
| | 01:48 | different use of it that it didn't make
a lot of sense. And we already have this
| | 01:52 | other unique identifier available for
CSS called id, so it made a lot of sense
| | 01:57 | to use that instead.
| | 01:58 | So in HTML5, that other use
of the a tag is obsolete.
| | 02:04 | It's no longer allowed. Well, of course it
still works because browsers are very
| | 02:09 | liberal in what they accept, but the
use of the id attribute is standardized.
| | 02:14 | So let's see how this works.
| | 02:15 | We'll come over here in the browser and we'll
just click on one of these. Let's say Canada.
| | 02:21 | When I click on Canada you notice it's
scrolled down partway through the file,
| | 02:26 | and it takes me to the Canada id.
| | 02:29 | You notice my URL now has this entire URL.
| | 02:32 | Let's find Canada here.
| | 02:34 | This actually qualifies as a relative
URL. So the browser is going to take the
| | 02:40 | rest of the URL and tag this on the end
of it and that's what's it done up here.
| | 02:45 | The URL now reads the whole file URL
to the location of the file with #CAN
| | 02:51 | at the end of it. And if we do a find in
here for CAN in quotes, so it can find it,
| | 02:57 | there is our h1 id=CAN,
and that's where we found it in the file.
| | 03:03 | Now notice that there is this link
to top here and it's the same thing: a
| | 03:08 | href="#top." And that will take us, if
| | 03:11 | we go back up to the beginning of the
file, you'll notice that the first thing
| | 03:15 | here, this outer div, has an id of top.
And it's the very first thing in the
| | 03:21 | file, so when I click on that, it takes
us all the way up to the top of the file
| | 03:23 | you notice that our fragment analysis has #top.
| | 03:26 | So scrolling around in this file would
be really difficult, to put it mildly.
| | 03:29 | I mean, this is a huge file. If I
was going to try and find something in
| | 03:33 | particular, well, I'd have to
use a search for it really.
| | 03:36 | Fragments make this possible.
It makes it doable. It makes it easy.
| | 03:41 | Now I'm not recommending that you put
200K files out on the web, but sometimes
| | 03:45 | there is a legitimate need to do
something like that, or even a file with a
| | 03:50 | hundred lines in it, using fragments
makes it a lot easier to navigate. And if
| | 03:55 | you pay attention to the URLs that
you see, I'm sure you'll find some sites
| | 03:59 | actually using this feature.
| | 04:00 | So fragments are used for
linking to a section of a page.
| | 04:03 | In this example, I've showed you a very
large file that becomes navigable only by
| | 04:07 | using the fragments.
| | 04:09 | This is a common usage for this technique.
| | Collapse this transcript |
| Using image links| 00:00 | It's very common to use images as links.
| | 00:03 | Let's look at how this is done.
We will make a working copy of links.html.
| | 00:07 | I'm going to call this copy links-working.html
and I am going to open this in my editor.
| | 00:14 | You will notice here's a link,
and this link is a text link.
| | 00:18 | If I open this in the browser, you
will see that it looks just like that, and
| | 00:23 | it's got this little text link. And if I
click on that, it takes you to my page
| | 00:28 | on my server. And that's
exactly what we would expect.
| | 00:31 | Now if I change this to an image and do
this, img src ="images/paper-small.png,"
| | 00:47 | that's a file in our exercise
files in the images subdirectory here.
| | 00:51 | And if I save this and take a look at
it in the browser, hit Reload, we have
| | 00:57 | this nice little image of a
piece of paper from my desk.
| | 01:00 | And you notice that when I hover the
mouse over it, the mouse pointer changes
| | 01:05 | into a little cartoons glove
hands pointing at something.
| | 01:08 | And if I click on that,
it takes me to the target of our link.
| | 01:12 | So, that's easy enough.
| | 01:14 | There are a couple things we
need to know about this though.
| | 01:16 | For example, if I'm being cool and I
want to put all of this on separate lines--
| | 01:23 | maybe my image tag is going to be a
little bit long or maybe I just like to
| | 01:28 | organize my code like this--
| | 01:30 | I would like for that to work, because
that actually looks pretty cool to me.
| | 01:35 | So if I reload this in the browser,
you'll notice right there, there is a little
| | 01:40 | purple underline, and it would be blue
if we hadn't clicked on the link already.
| | 01:45 | What it is is you remember how
HTML handles space, so all of this
| | 01:50 | whitespace here is being folded into
one space character and that space
| | 01:55 | character is inside of the link,
| | 01:58 | so it's being underlined as if it were
a text link. Because if I were to just
| | 02:03 | type some text here and save that and
reload, you see that comes up underlined
| | 02:07 | and in purple, and that becomes part of our link.
| | 02:10 | So instead, what we have
here is just this whitespace.
| | 02:13 | Now some browsers will do this; some
browsers won't. Some browsers are smart
| | 02:17 | enough to say, oh, you didn't
really mean to put a space there.
| | 02:21 | But fortunately there's a way for us to
tell the browser we really didn't mean
| | 02:24 | to put a space there, and that's like this.
| | 02:27 | I take the end of that image tag and I
just move it down to the next line and
| | 02:31 | put it right before the </a>.
| | 02:34 | And when I reload the page,
our little anomaly is gone.
| | 02:38 | Now it's also possible on some browsers for
the other side of the image to get one of those.
| | 02:42 | So I can do the same thing here.
| | 02:44 | I can take that begin tag and I can put
it over here, and in fact, some browsers
| | 02:49 | even want the whole opening image.
| | 02:51 | They don't want a space between that beginning
of the angle bracket and the name of the tag.
| | 02:56 | And I can take all of that stuff and I
can put it up on that line above, if I
| | 03:00 | want to, and this still works just fine.
| | 03:03 | Now there's another potential problem
here, and what I am going to do is I am
| | 03:06 | going to open this in a
very old version of Firefox
| | 03:10 | so you can see this. Most modern
browsers don't have this problem, but there are
| | 03:13 | still some old browsers out there that do,
so you need to be aware of it.
| | 03:17 | So I am going to close Firefox here, and
I am going to go ahead and I am going to
| | 03:20 | open this with Firefox 1.5.
| | 03:25 | Now you'll notice that my image has
this whole purple box around it, and in the
| | 03:30 | olden days of the web, that was
considered pretty cool, because it meant this is
| | 03:35 | a link and it made it obvious
to people that that was link.
| | 03:38 | And today, we mostly don't want that,
because frankly, it's ugly, and it
| | 03:43 | doesn't look right.
| | 03:44 | So what I do is I create a style. And in
that style, with CSS, I say, "a img" like
| | 03:53 | this, which means all of the image tags
that are descendents of a tags will have
| | 03:58 | this style in it, and I say
border-style: none, like that.
| | 04:04 | Now when I reload this, you notice
that the little blue box is gone.
| | 04:09 | Now, just so you know--I am going to
comment this out and reload and you see
| | 04:15 | our blue box is back--
| | 04:16 | there is another way to do this. and
the other way to do this is with another
| | 04:20 | attribute to the image tag called border
="0" like that. and when I save that and
| | 04:25 | reload it, you will notice that our
border is gone. And that's actually the way
| | 04:29 | that we used to do in the days
when this browser was current.
| | 04:32 | But this is actually
obsoleted by the current HTML5.
| | 04:36 | On the other hand, if you're looking
to support really old browsers, you may
| | 04:41 | come across some really old browsers
that don't support CSS, and if you want
| | 04:45 | those to work right, well, then you are
going to want to use an older version of
| | 04:49 | HTML, because they probably don't
support HTML5 either, and you're going to want
| | 04:53 | to know about this border="0".
| | 04:54 | So border="0," that's the old way that
it was done from a HTML4 and before that,
| | 05:01 | but the new way to do it of course
is with style sheets. And we use the image
| | 05:06 | tag as descendent of the a tag
and simply this border-style:
| | 05:10 | none, and that works just fine.
| | 05:13 | So using images as links
is a very common technique.
| | 05:16 | HTML makes it easy to support this
design decision. Be sure to test your code on
| | 05:21 | a number of different platforms and
browsers, as there are some potential
| | 05:25 | discrepancies with how the links are rendered.
| | Collapse this transcript |
|
|
8. ListsExploring list types| 00:00 | HTML provides support for
three basic types of lists.
| | 00:04 | Let's take look at them.
| | 00:05 | Start by making a working copy of
lists.html, and I'll rename this to
| | 00:10 | lists-working.html. And I'm going to
open it in my text editor, and here we have
| | 00:17 | a simple HTML file with the
three different types of HTML lists.
| | 00:21 | Let's also go ahead and open this in the
browser, and here we have these lists in the browser.
| | 00:27 | So the first type of list here is the
ordered list. And you see it's contained
| | 00:32 | in the ol element, and each of the
items in the list are li elements. And that's
| | 00:38 | the same with the unordered list, use
the li elements in both the ordered lists
| | 00:42 | and the unordered lists.
| | 00:43 | So your ordered list is ol
and the unordered list is ul.
| | 00:47 | Now if we look at this in the browser--
and I can make these side by side here--
| | 00:52 | you see that in the browser, the ordered
list has 1, 2, 3 and the unordered list
| | 00:57 | has these bullets. And then down here
we have what's called a definitions list
| | 01:02 | or a descriptions list.
| | 01:04 | In previous versions of HTML, this was
called a definition list, and in HTML5 it's
| | 01:08 | called a description list.
| | 01:10 | It's effectively a list of
sets of names and values.
| | 01:14 | So in this case we have dt, which we can
think of is the term, and it's One; and dd,
| | 01:21 | which we can think of as the
description or the definition, and it says, The
| | 01:25 | first non-zero number; and so we have
one, two, three, four and we have these
| | 01:30 | descriptions of one, two, three, four.
| | 01:33 | In the ordered list, we can specify the type
of ordering, and there is a few options here.
| | 01:39 | We can say type=1 and we get the same
kind of list that we've been looking at here.
| | 01:44 | If I reload it,
it just says 1, 2, 3.
| | 01:47 | Now if I change this, I say a, with a
lowercase a, we reload it, we'll see now it
| | 01:52 | says a, b, c. And I can use a capital A
if I like and reload that and we have now
| | 01:59 | capital A, B, C, or I can create roman numerals.
| | 02:03 | If I say lowercase i, we get
lowercase roman numerals and if I put it in an
| | 02:08 | uppercase I, we get uppercase roman numerals.
| | 02:12 | In the unordered list, the type
attribute is considered obsolete in HTML5.
| | 02:17 | In previous versions of HTML, it would
work just like this. And of course, this
| | 02:21 | still works in our browser.
| | 02:23 | We can say disc and that is
exactly the same as what we have here.
| | 02:28 | We can say type=square and we get a
square for the bullets. And if we say
| | 02:34 | type=circle, we get a circle for the
bullets. But in HTML5 this is actually
| | 02:42 | obsoleted, and we are
supposed to use CSS for this.
| | 02:45 | Instead, I can say style=. And I can say
list-style-type, and I can say disc, and
| | 02:55 | we get the disc, which is the default; or
I can say square, and we get the square;
| | 03:00 | or I can say circle, and we get the circle.
| | 03:03 | In fact, I can use this as an ordered
list, and I can say type=decimal, and when I
| | 03:12 | reload this, we now have 1, 2, 3, like an
ordered list. Or I can say lower-alpha
| | 03:18 | and et cetera, or there are even other options.
| | 03:21 | I can say katakana and I get Japanese
katakana, or I can say Armenian, and I get Armenian.
| | 03:31 | So there are many options here. And in
fact, you can use this in the ordered
| | 03:36 | list as well, so there's really no
longer any need to use the type attribute,
| | 03:42 | even in the ordered lists.
| | 03:44 | HTML provides support for these three
basic types of lists, and we'll cover more
| | 03:48 | about this feature in the rest of this chapter.
| | Collapse this transcript |
| List elements in depth| 00:00 | The list elements are really very flexible.
| | 00:02 | Let's take a look at some
details on how these work.
| | 00:06 | We're going to make a
working copy of lists.html.
| | 00:09 | I am going to rename this as lists-working.
| | 00:11 | I am going to open this in my text
editor here, and I am going to go ahead and
| | 00:18 | open it also in the browser.
| | 00:20 | So here we have a simple document, with the
three different types of HTML lists in it.
| | 00:27 | The first thing I want to show you is
that it is possible to nest these lists.
| | 00:32 | So if I take this whole ordered list and
I just make a copy of it, and I'll make
| | 00:39 | another copy of it, right there
in the middle of the existing list--
| | 00:43 | of course I'm just indenting them so
that it's clear; that doesn't affect
| | 00:47 | how they are rendered--
| | 00:48 | and if I go ahead and reload this, you
see we now have three different lists
| | 00:52 | and they are nested within each other.
And you notice that they each start over at 1.
| | 00:56 | So if I wanted to, I could come over
here and I could put start="5" on this
| | 01:01 | second ol, and when I reload over
here, you'll see it's 5, 6, and 7.
| | 01:06 | The inner one is still starting at 1, 2, and 3.
| | 01:09 | If I wanted to, there I could say
type="i" and start="7" and save that and
| | 01:17 | reload, and you see now we have
7, 8, 9 in roman numerals for that inner one.
| | 01:23 | So there is really a lot of flexibility
in how this works with the nested lists.
| | 01:28 | And if I nest the unordered lists,
see, we get this other behavior here, and I
| | 01:34 | reload this, you'll see that we have
the discs and the circles and the squares
| | 01:39 | for the different levels
of nested unordered lists.
| | 01:42 | So I am going to go ahead and remove
that nesting, and I'm going to include now
| | 01:48 | our CSS reset so you can see
another interesting aspect of these.
| | 01:53 | So I am just going to expand this
so you can see the whole line there.
| | 01:57 | I have included our CSS style sheet that
does resets, and when I reload this, you
| | 02:04 | see that these are still
formatted very much like they were before.
| | 02:08 | And that's because if we look at our
CSS reset file here, you notice I really
| | 02:14 | don't do much to the lists.
| | 02:17 | The only thing in here is for the ordered
list, unordered list, and the li elements.
| | 02:24 | I've got margin, padding, border,
font-size--those things reset.
| | 02:27 | I am not doing anything actually
specifically about the lists; instead, I am
| | 02:32 | going to come in here and I am
going to add a little reset here.
| | 02:36 | Let's say style. And normally when I
use my resets in a website, I'll have
| | 02:41 | something like this in here.
| | 02:42 | I am going to say dl, dt, dd, ol,
ul, li, and so that's all of the
| | 02:50 | list-related elements.
| | 02:52 | I am going to come in here, and I am going
to set the margin and the padding, and
| | 02:56 | the border, all to 0.
| | 02:58 | When I save this and I reload in
the browser, now, that's interesting.
| | 03:02 | Of course we expected them all to have
no margin, no border, and no padding.
| | 03:08 | What might have been unexpected is
that all of the bullets and those kinds of
| | 03:13 | things have disappeared.
| | 03:15 | Otherwise, it's a great place to start,
because it normalizes the display across
| | 03:19 | the platform, so that's what a reset is for.
| | 03:21 | But with the bullets and the
numbering disappeared, that's not right.
| | 03:25 | What's actually happened is they're still there;
| | 03:27 | they're just outside of the margin.
| | 03:28 | I am going to show you why here.
| | 03:30 | I am going to go ahead and I am going
to put a div around all of these list
| | 03:35 | elements, and I am just going to call it outer.
| | 03:38 | And I am going to come up
here into our style sheet.
| | 03:41 | I am going to say outer, and so
that's the id selector, say margin-left:
| | 03:45 | 50px, and I am going to give it a border.
Put this on a separate line; do this right.
| | 03:53 | And now when I reload over here, we'll
have them inside this div, and it has
| | 03:58 | this indent, and you'll notice that outside of
the margin we've got our numbers and our bullets.
| | 04:04 | Now, that may seem weird, but that is the
default on all the browsers that I know of.
| | 04:09 | Of course there is no guarantee that
that's the default on all of them, so
| | 04:13 | we can't specify it.
| | 04:15 | So we can come out here and we're
going to say for ol and ul elements,
| | 04:18 | list-style-position: inside.
| | 04:23 | Now, there's two possible values here--
outside and inside--and outside is the
| | 04:28 | default. And when I change it to inside,
now all of those numbers and bullets
| | 04:33 | are inside of the margin.
| | 04:36 | And when I scroll back down here--I
am just going to take out this div.
| | 04:40 | We don't need it anymore. And I
can take out the styling for the div.
| | 04:46 | Save this and reload.
| | 04:47 | Now this might be more of what we expect;
| | 04:50 | we have the numbers and we have the
bullets displayed, even with our margins set to 0.
| | 04:54 | Now, you don't have to do this.
| | 04:56 | You can set that list-style position
to outside, and if I just change this to
| | 05:01 | outside and reload, you'll see there
is our default. But if you want to have
| | 05:06 | those within the margins of whatever
containers you're putting this in, you
| | 05:11 | might want to set it to inside.
| | 05:13 | So, just for display purposes and to
make this line up with things, we're going
| | 05:17 | to go ahead and put a margin-left.
| | 05:19 | I am going to say 1ex, which is the
default that I have for these other elements
| | 05:24 | here. And so it lines up nicely with our header.
| | 05:27 | And now let's take a look at
some of the possibilities here.
| | 05:30 | So I am going to go ahead and I am
going to put some class names in here. I am
| | 05:33 | going to say class for the ordered list--
I am just going to call it ordered--
| | 05:37 | and a class for the unordered list as unordered.
| | 05:40 | And come back up here into our
style sheet and I am going to say for the ordered
| | 05:44 | list, say list-style-type,
I am going to say lower-alpha.
| | 05:49 | Let's make this a little
bit wider here so it all fits.
| | 05:52 | And we can actually move this over a
little bit. And this is just for our
| | 05:56 | purposes of being able to experiment here.
| | 05:58 | So I save that and reload it, and now
we have lowercase alpha and I can say
| | 06:03 | upper-alpha. Then I'll have uppercase alpha.
| | 06:06 | I can say lower-roman and we
have the lowercase roman numerals.
| | 06:11 | I can say upper-roman, and we
have the uppercase roman numerals.
| | 06:16 | Now let's look at some of these other options.
| | 06:18 | I can say katakana. We get Japanese.
| | 06:21 | There is really a lot of them available.
| | 06:24 | There's also katakana-
iroha. Save this and reload.
| | 06:30 | Different type of katakana.
| | 06:32 | There's hiragana and also hiragana-iroha.
| | 06:37 | There's Armenian. Reload that.
| | 06:40 | You can do decimal with a leading 0, like
that (decimal-leading-zero). There's georgian.
| | 06:45 | There's really a lot of them.
| | 06:47 | Or if we like, we can even use an image.
| | 06:49 | We can say list-style-image.
| | 06:50 | I am going to do this for the unordered list.
| | 06:56 | These same things work for both the
ordered and the unordered list, but images
| | 07:02 | are more common for the unordered list
because they'll replace the bullets.
| | 07:10 | So that's url(images/scissors-small.png.
And that's an image that we have in
| | 07:16 | our exercise files, and you see it's a small
thumbnail size of my little scissors picture.
| | 07:21 | So we again have 1, 2, 3 for the ordered list
and our unordered list now has these images.
| | 07:26 | That's a great feature if you want
to create your own types of bullets.
| | 07:29 | So you can see that there are
many, many options available.
| | 07:33 | Of course you can and likely will apply
other CSS properties to your list elements.
| | 07:38 | Formatting your list with CSS is a
very powerful way of presenting lists in
| | 07:42 | your documents.
| | Collapse this transcript |
| Using text menus with unordered lists| 00:00 | Besides the obvious applications for
lists, one common usage is for menus.
| | 00:05 | HTML used to have a menu element,
but it was rarely used for its intended
| | 00:09 | purpose, and unordered lists have
become very common way to do this.
| | 00:13 | Let's make a working copy of
menu.html and I am going to rename this to
| | 00:18 | menu-working.html, open it in my text editor.
| | 00:22 | I am also going to open it in the
browser here so you can see what it looks like.
| | 00:26 | And here we see at the top, we have
a very common-looking menu bar going
| | 00:31 | across the top of the page, and there would
of course be content down here underneath it.
| | 00:35 | It's got these little rollovers that draw
a little line under the one that's being pointed out.
| | 00:39 | It's all very common and rather attractive.
| | 00:41 | It's done entirely in CSS.
| | 00:43 | There are no images involved,
| | 00:45 | although of course you can use
images, and in many cases images would give
| | 00:50 | you better results.
| | 00:51 | And so you're certainly encouraged to do
that where the application calls for it.
| | 00:56 | Let's just page through this HTML file
real quickly for those of you who are
| | 01:00 | typing along at home.
| | 01:01 | You'll notice down here at the bottom, we have
a ul element, and it has a number of li
| | 01:07 | elements and links with the a element.
| | 01:11 | Very simple looking and this is not
really what you would expect that to
| | 01:15 | look like, is it? You would expect it to be
a bulleted list because it's a ul element.
| | 01:20 | Well, this is all done in CSS,
and it's not really that hard to do.
| | 01:24 | So, the first thing you will notice is
this top menu, and that's an ID selector.
| | 01:29 | And down here in the HTML, you see this ID
selector says top-menu for the nav element.
| | 01:34 | The nav element is an HTML5 semantic element.
| | 01:38 | It works exactly like div; in fact, if
I were to change this to div, you'ldd see it
| | 01:43 | works exactly the same. I will
reload over here. No difference at all.
| | 01:47 | We use nav because it's, semantically,
this is navigation.
| | 01:51 | This is the classic use for the
nav element, and this is navigation.
| | 01:55 | And so we've styled the nav element to
fit all the way across the page with the
| | 01:59 | width, give it a height of 33 pixels
to match these a elements so that it
| | 02:04 | stretches all the way across and
it gives us this nice blue bar;
| | 02:08 | margin 0, padding 0 so that it
goes all the way to the edges.
| | 02:12 | And then, we have the ul element, which
has the menu class, and if we look down
| | 02:17 | here in our HTML, we see class="menu."
| | 02:20 | And that's set to block display.
Of course the ul element is already block
| | 02:24 | display, but this is just in case
it's been changed elsewhere in CSS.
| | 02:27 | List-style-type equals none. Width 600
pixels, we know that each element is 100
| | 02:35 | pixels because that's set here
in the descendent a selector.
| | 02:38 | And so, width 600 pixels, margin:
0 auto, that centers it.
| | 02:42 | If we didn't have the width set, or if we
didn't have that auto, it wouldn't be centered here.
| | 02:46 | I will go ahead and delete the width
and save it and you'll see that it's
| | 02:50 | no longer centered.
| | 02:51 | And I will flush this off to the left,
and as I change the size, it's always at
| | 02:56 | the left, and always stays in the same place.
| | 02:58 | When I put that width property back,
you will see that now it's centered and no
| | 03:00 | matter how wide the window is,
it's always centered. So that margin:
| | 03:05 | 0 auto is actually a little
CSS trick to center things.
| | 03:08 | Now, for each li element, you notice we
use a descendent selector from ul menu to
| | 03:13 | li so it doesn't affect other
li elements within the document.
| | 03:18 | We set margin to 0 and padding to 0.
| | 03:21 | And then we actually format each
element with the descendent selector a,
| | 03:27 | descendent of li,
descendent of the menu class of ul.
| | 03:31 | The first thing we do is we set
it to block mode and float: left.
| | 03:34 | Of course, once it's set to float:
| | 03:36 | left, it's already going to be
block mode, but I always do this anyway,
| | 03:40 | set both of them when I set the float left.
| | 03:42 | And that way, it's just a visual
reminder to me that I am setting something to
| | 03:46 | block mode that might not
otherwise be block mode.
| | 03:49 | If I were to delete those two lines,
you'll notice that now it's starting to
| | 03:53 | look more like a list.
| | 03:54 | These are now vertically stacked.
| | 03:56 | And it's that float:
| | 03:58 | left and block mode that
allows them to stack this way.
| | 04:02 | Each one is floating left to the right of
the one before it, and that allows them
| | 04:07 | to display like this.
| | 04:09 | So, once we've got them in block
mode, we treat them as block elements.
| | 04:12 | We've got a max height, we've got a
width, we've got margin and padding, and
| | 04:16 | then we set the font and the
font-size, and the text-align:
| | 04:20 | center within each of these blocks.
| | 04:23 | You see that the actual word is centered there.
| | 04:26 | And that's all there is to it.
| | 04:29 | The final step is the hover, and so we
have the hover pseudo-selector on the a
| | 04:34 | element and we are still
descendent in that same tree.
| | 04:38 | And we set a bottom border with
that same red color as the text.
| | 04:43 | So we get that bottom border comes
up as we move the pointer across.
| | 04:49 | So, that's really all there is to it.
| | 04:50 | It's very straightforward; a little
bit of CSS, and you have a beautiful
| | 04:57 | functional menu out of a ul element.
| | 05:00 | Of course, you can use images, you can
set background images, you can do all
| | 05:04 | kinds of things, anything virtually
that you can do in CSS to make this fit the
| | 05:09 | look that you're going for, that your
designers have set for you, for your site.
| | 05:14 | Using CSS, it's possible to create a
wide variety of menu looks and styles.
| | 05:18 | For more details on this technique,
see my course Creating Dynamic Menus on the
| | 05:23 | lynda.com online training library.
| | Collapse this transcript |
|
|
9. Structural, Contextual, and Semantic ElementsIntroduction to HTML semantics| 00:00 | HTML5 introduces a number of
block-level semantic elements for organizing the
| | 00:05 | content of a webpage.
| | 00:07 | These are block-level elements with no
inherent presentation properties, just like div.
| | 00:12 | It's how they are designed to be used
that makes them distinct.
| | 00:16 | These elements are designed to create
structure for your document so that it
| | 00:19 | makes sense not only to the reader,
but to other processes that may need to
| | 00:23 | understand the structure of your
document, like search engines, archival
| | 00:26 | processes, non-visual browsers for the
blind, or even future AI processes that we
| | 00:32 | haven't even thought of yet.
| | 00:34 | The point is that it should be possible
for a relatively unsophisticated machine
| | 00:39 | to create an outline of your document
so it knows which parts are relevant for
| | 00:43 | a particular purpose.
| | 00:44 | Take this hypothetical
document structure for example.
| | 00:48 | From this diagram, it should be easy to
see that we have a fairly typical web page.
| | 00:52 | It had a header, a footer, a section
with a couple of articles, and a sidebar.
| | 00:56 | We can see that clearly
because it's all labeled for us.
| | 01:00 | That's the point of semantic markup;
| | 01:02 | you're creating labels that make it obvious
what parts of your page serve what purpose.
| | 01:07 | Of course, each of these semantic
segments may also have its own semantic segments.
| | 01:12 | This is common and encouraged.
| | 01:14 | If an article has a header, a footer,
its own navigation, it's entirely
| | 01:18 | appropriate to indicate them
with their own semantic elements.
| | 01:22 | It's helpful to think of these elements in
terms of how they affect the document outline.
| | 01:26 | HTML5 defines a specific algorithm for
creating an outline, and these elements are
| | 01:32 | defined in terms of how
they affect that outline.
| | 01:35 | The major sectioning elements are listed here.
| | 01:38 | This is the list of elements that
are intended to be used where you would
| | 01:41 | otherwise use a div.
| | 01:43 | The section element represents a
generic section of the document.
| | 01:47 | It's not a generic container for styling
purposes like div; rather, it's intended
| | 01:52 | to indicate a semantic section of the
document that is not otherwise covered by
| | 01:56 | another sectioning element.
| | 01:58 | The article element represents a
self-contained composition within a document.
| | 02:02 | The HTML5 specification says this could
be a forum post, a magazine or newspaper
| | 02:08 | article, a blog entry, a user-submitted
comment, an interactive widget or gadget,
| | 02:14 | or any other independent item of content.
| | 02:17 | The nav element represents a section of
the page that contains a set of links to
| | 02:21 | other pages or other resources.
| | 02:24 | Don't think that you need to put all
links or groups of links in a nav element.
| | 02:28 | Keep in mind that this is about the
document outline and nav elements are
| | 02:32 | excluded from a document outline.
| | 02:34 | The aside element represents a part of
the page that is tangentially related
| | 02:39 | to the content around it, like a sidebar or
pull quotes, or other semi-related content.
| | 02:45 | This set of semantic elements are not
sections, but are used within sections.
| | 02:49 | These elements are designed to
describe parts of a section for the benefit of
| | 02:53 | document outlines, summaries, and other tools.
| | 02:56 | The header element is for
the header part of the section.
| | 02:58 | This is very different from the head element.
| | 03:01 | The header element contains
content that is displayed.
| | 03:05 | The specification says the header
element represents a group of introductory
| | 03:09 | or navigational aids.
| | 03:11 | In practice, you'll want to use this
where there's a group of elements in the
| | 03:14 | header of a section.
| | 03:15 | If your section has a single h1 tag
or an h group with nothing else in the
| | 03:19 | header, there's no need for a header container.
| | 03:22 | A footer element typically contains
information about its section, like author
| | 03:27 | information, links to related
content, copyright, things like that.
| | 03:31 | It's typically at the end of a
section, but it doesn't have to be.
| | 03:35 | hgroup is used to group heading tags together.
| | 03:38 | When a number of heading tags are
grouped in an hgroup element, the first
| | 03:42 | example of the highest-ranking heading
will be used as the text for the entire group.
| | 03:46 | For example, the outline text for
this hgroup would be Dr. Strangelove;
| | 03:51 | the subtitle would be displayed on the page
but ignored for the purposes of the outline.
| | 03:56 | These semantic elements make it possible to
create a consistent outline of your document.
| | 04:02 | This can help automated processes
like search engines or browsers for the
| | 04:05 | visually impaired make
better sense of your websites.
| | Collapse this transcript |
| Exploring an example| 00:00 | Let's take a look at an example of a page
that uses a lot of the semantic markup elements.
| | 00:05 | Let's make a working copy of
scissors.html, and we will go ahead and rename this
| | 00:10 | to -working and open it in the text editor.
| | 00:14 | And let's go ahead and open this as well in
our browser, so we can see what that looks like.
| | 00:20 | So here we have mostly a lot of
Lorem Ipsum, and it's just a page
| | 00:25 | advertising scissors.
| | 00:26 | Yo'llu notice this has a couple of CSS
sheets, and I am going to go ahead and
| | 00:31 | open those and show them to you; they're not
really the focus of what we are looking at here.
| | 00:36 | We have the main.css. which is why Reset
css that we have been using throughout
| | 00:39 | this course. Very simple.
| | 00:41 | And then there is the rps.css. RPS
stands for Rock Paper Scissors, which is the
| | 00:48 | name of the fictional
company that created this web page.
| | 00:51 | You can see that at the bottom there.
| | 00:53 | And this is the specific CSS. You will
notice that this is a lot longer; it's 216 lines.
| | 01:00 | And you don't need to type all this in.
It's in the exercise files.
| | 01:03 | But you can see that all of the
presentation, all of the formatting is done here.
| | 01:08 | It's just the content that's in the
HTML file, and the HTML file, as a result, is
| | 01:13 | very simple and straightforward.
| | 01:15 | You see we have a nav section at the
top here, and this is our menu, and it's a
| | 01:20 | simple unordered list, which makes it
very easy to edit and view in the HTML, and
| | 01:27 | yet it creates this lovely little menu
at the top, and that's all done in CSS.
| | 01:32 | But we called it out with nav.
Of course we could've used the div here and it
| | 01:36 | would have worked exactly the same, and
it would have looked exactly the same on
| | 01:40 | the screen, but using nav tells
automated processes this is the navigation
| | 01:43 | element; don't put this in the outline.
| | 01:45 | We do have a div here, and this is
the only div in the entire file, and its
| | 01:50 | purpose is to create this nice
cream-colored box around here visually.
| | 01:55 | It has absolutely no meaning
semantically and so it doesn't need to have a
| | 02:00 | section or article or one of those others.
| | 02:03 | Notice if I collapse this,
this is bulk of the document.
| | 02:06 | You know, the document now becomes
pretty much very small at that point.
| | 02:10 | See, there is the whole body of the
document, and I expand this and all of our
| | 02:15 | content is in there and all of our
content has that nice cream background around
| | 02:18 | it. So that's entirely presentation
and that's the reason I used a div there.
| | 02:22 | Header is used for this section up
here, and article is used for the story of
| | 02:30 | scissors, which is all this Lorem Ipsum here.
| | 02:32 | And then this section over here
is in the aside; that's a sidebar.
| | 02:37 | And if I scroll down here, we see aside.
aside has its own header, and that's this
| | 02:44 | part up here, About These
Scissors Quality is everything!
| | 02:47 | These are amazing scissors, by the way.
| | 02:49 | So the header has the About These
Scissors and Quality is everything, and These
| | 02:53 | are amazing scissors is actually in
a paragraph outside of the header.
| | 02:56 | So how you organize these things, I
could have put the other paragraph inside of
| | 03:00 | the header, outside of the header.
| | 03:01 | It just depends on what I
want the outline to look like;
| | 03:03 | a lot of this is really subjective.
| | 03:06 | And then we have sections.
| | 03:07 | These aren't articles, because they are
not a lot of prose that you would put in
| | 03:12 | an RSS feed or anything.
| | 03:14 | These are just little items within
this sidebar, so I put them in sections.
| | 03:18 | And inside of each of these sections is an
h group, because I have two headers in there.
| | 03:24 | And you'll notice when we make an
outline--and we'll look at outlines later on
| | 03:28 | in this course--that only the highest-
ranking header actually shows up in the outline.
| | 03:32 | And so I have a number of sections
there, and then I have another little div. I
| | 03:37 | thought I only had one. I do have two.
| | 03:39 | This one again is presentational.
| | 03:40 | Because everything here is floating in
the CSS--and again its presentational; it has
| | 03:45 | to do with the CSS--
| | 03:46 | if I take that out--and I'll go ahead
and I'll take that out right now and I'll
| | 03:51 | save that and reload it--you'll
notice that my little cream box disappears.
| | 03:55 | That's because all the content inside of that
box is floating, and it has no actual height.
| | 04:01 | And so this div with the clear in it,
it forces that and that other ones
| | 04:07 | the bottom of the other div,
so it's really just this one here.
| | 04:10 | That's the bottom of the div from way up above.
| | 04:12 | So that forces this outer div
box to have some height to it.
| | 04:18 | And then down here we have the
footer, and the footer has our little
| | 04:20 | copyright information.
| | 04:22 | It could have a lot of stuff.
| | 04:24 | It could be one of those fat footers
that you see on websites these days with a
| | 04:26 | one million links to other sections
of this massive corporate website.
| | 04:31 | It can be whatever looks like a footer
to you from the perspective of how you
| | 04:35 | want your document outline to look.
| | 04:37 | So this example shows how to use the
sectioning and other semantic markup elements.
| | 04:42 | These elements are not about display;
this document would look exactly the same
| | 04:45 | if we use div elements
for all of these sections.
| | 04:49 | But this document will outline properly
and automated processes will be able to
| | 04:53 | understand how it's organized.
| | Collapse this transcript |
| Marking up figures and illustrations| 00:00 | The figure element just for
representing figures in a document.
| | 00:03 | Let's take a look at how this works.
| | 00:05 | I'm going to go working copy of scissors.html.
| | 00:08 | I'll call this -working, and I'm going
to open it up in my text editor, and I'm
| | 00:14 | going to also open it up in the browser.
| | 00:17 | So here's our scissors document, and
let's go ahead and add another illustration.
| | 00:24 | So I'm going to come down here in the
stories of scissors, and I'm going to come
| | 00:28 | down to the second paragraph, and
I'm going to add a figure here.
| | 00:33 | And this looks like this.
| | 00:34 | To give it the figure tag and inside
of the figure tag, I'm going to put an
| | 00:41 | image, and we also want to give this a caption.
| | 00:43 | So we use the fig caption element for
that, and up here in our figure element, we
| | 00:49 | want to give it an id attribute.
| | 00:50 | I am going to call this one fig1, and a class.
| | 00:54 | So the id, we could use that and if we
wanted to, in CSS or in JavaScript or as
| | 01:02 | the target of a fragment identifier, and
that identifies this particular figure.
| | 01:07 | So you are usually going to
want to do that with the figure.
| | 01:10 | In this case we're not actually using
that. But we do have this set up in CSS a
| | 01:15 | little bit, and we'll look at that in a moment.
| | 01:16 | For now let's go ahead and reload
our page, and you see there's figure.
| | 01:21 | And it's all nicely formatted with CSS.
| | 01:24 | We see, there's our caption and
everything, and it all looks exactly like we
| | 01:28 | would like it to look.
| | 01:30 | So let's go ahead and look at the CSS for this.
| | 01:32 | That's in rps.css. And we are going
to come down here, and there's figure.
| | 01:39 | So all of the figures in the document
will have this border and the padding and
| | 01:44 | the background color and all of that,
and you can see we actually have a little
| | 01:48 | bit of a lighter cream-colored
background color to set it apart from the
| | 01:52 | background of the document. And we
have this border around it, and we have the
| | 01:57 | .left class selector to tell it to float left.
| | 02:00 | We can have them float right if we want.
| | 02:03 | That wouldn't work well here
because we have something else over there.
| | 02:06 | Then we format the fig caption,
and it's as simple as that.
| | 02:10 | Give it a font-family,
| | 02:10 | font-size, center, and padding, just
like we would any other text in CSS.
| | 02:16 | So you can see that formatting this is
really simple, just like any other CSS
| | 02:20 | in your document, and the figure element
is for representing figures in your document.
| | 02:24 | Use this for illustrations, diagrams,
photos, or any other content that's
| | 02:29 | illustrative in nature
and perhaps uses a caption.
| | Collapse this transcript |
| Creating collapsible details| 00:00 | HTML5 introduces a new feature for
collapsible content called details.
| | 00:05 | Let's take look a look at how this works.
| | 00:07 | Let's make a working copy of scissors.html,
and I am going to rename that to
| | 00:14 | scissors-working.html and open that in
my text editor, and I am also going to
| | 00:20 | open rps.css in my text editor.
| | 00:22 | I am also going to open this in my
browser, but this time I am going to open it
| | 00:26 | in Google Chrome instead of in Firefox,
because this is actually a feature that
| | 00:31 | is not working in Firefox.
| | 00:33 | In fact, as of this recording, Google
Chrome is the only browser that supports
| | 00:37 | this future, and Safari, starting with
version 6.0 which will ship with Mountain
| | 00:42 | Lion as I am recording this, which
should be in the next week or two,
| | 00:46 | that is also supporting this feature.
| | 00:47 | So by the time you see this, you should
be able to try this feature in either
| | 00:52 | Safari or Chrome, and the people at Mozilla
are working on getting it working in Firefox.
| | 00:57 | So let's go ahead and
see how this feature works.
| | 01:00 | I am going to come down here in my
document and I'm going to make these last two
| | 01:05 | paragraphs collapsible. And so if we
look at this in the browser, that's this
| | 01:09 | paragraph here and this paragraph here.
| | 01:12 | And the way this works,
we use the details tag for this.
| | 01:17 | So I say details, and I am going to
come down to the end of the paragraph.
| | 01:22 | I am going to put in a closing details.
| | 01:24 | And so now anything
inside of that gets collapsed,
| | 01:27 | although I also add inside of it a
summary element like this. And I'm going to go ahead
| | 01:35 | and copy these and put these
in for the next one as well.
| | 01:39 | Then I'll go here. And this next one says
Paper Beats Rock. This one will say
| | 01:44 | Rock Beats Scissors, which is especially
controversial because this is scissors' page.
| | 01:49 | So I am going to save this, and we'll go
over here to the browser and hit Reload
| | 01:55 | and you'll see, we now have these two
paragraphs that have been collapsed and
| | 01:58 | they have little disclosure
triangles next to them. And if I click on that
| | 02:03 | disclosure triangle, it
exposes the collapsed paragraph.
| | 02:06 | And I'll do the other one, and
you see that works pretty well.
| | 02:10 | It's got this little highlight thing around it.
| | 02:12 | I hope they get rid of that, but
other than that, these work really well.
| | 02:16 | Now, let's take a look at how this works
in Firefox, which is a browser that does
| | 02:21 | not support this feature, so that you
can see, what happens is we have these
| | 02:26 | nicely styled summary elements.
| | 02:29 | If we look in our style sheet and come
all the way down here to the bottom where
| | 02:34 | I did this, I have detailed summary.
| | 02:36 | So that's a descendent selector for
summary as a descendent of details.
| | 02:40 | It's just formatting that
summary is all that it's doing, so it's
| | 02:44 | just formatting this.
| | 02:45 | And so it looks just fine in the
browser that doesn't support the feature.
| | 02:50 | You don't even notice that
there's anything missing.
| | 02:53 | It's just that these
paragraphs aren't collapsed.
| | 02:55 | And in the browser that does support it,
| | 02:58 | you've got these nice disclosure triangles.
| | 03:00 | Now if I want these to
default to open rather than closed.
| | 03:05 | Well, that's pretty simple;
| | 03:07 | it's just a matter of using the
open attribute on the details element.
| | 03:12 | So I just say open like that, and I'll go
ahead and also put that in the other one here.
| | 03:18 | I save this and when I reload in Chrome,
you see that these elements now default to open.
| | 03:24 | We have this little disclosure triangle
that tells you I can close that if I want to.
| | 03:30 | In the future, you'll also be able to
apply CSS transitions to these elements.
| | 03:34 | That's not working in any
browser yet, that I've tested.
| | 03:38 | So the new details feature
provides collapsible content in HTML5.
| | 03:42 | As I am recording this, it's still in
development, and it's only working in
| | 03:45 | some browsers, but it promises to be a
useful feature as it gets deployed in
| | 03:50 | more environments.
| | Collapse this transcript |
|
|
10. Audio, Video, and Other ObjectsEmbedding audio| 00:00 | HTML5 provides a simple and powerful feature
for embedding audio files in your web pages.
| | 00:06 | Let's make a working copy of audio.html,
and I'm just going to rename this to
| | 00:11 | audio-working.html, open this in my text
editor, and I'm also going to open it in
| | 00:18 | a browser, and there is our Firefox browser.
| | 00:20 | You can see there's our
little audio file.
| | 00:24 | (music playing)
| | 00:28 | And we'll go ahead and open this also
in Chrome so you can see that one, and
| | 00:33 | there is our audio file.
(music playing)
| | 00:41 | Now here in our HTML file, you see we have
a little bit of JavaScript here at the top.
| | 00:46 | We'll get back to that. And then the
rest of the file is really very simple.
| | 00:50 | There is our header, there is our
audio, and there is the little form with the
| | 00:55 | buttons at the bottom, and we'll show
you those a little bit later as well.
| | 00:59 | The first thing I want you to notice
about this is that this audio control here,
| | 01:03 | we have an audio container, and it
contains these source tags, and each of these
| | 01:10 | source tags refers to a different
file with a different media type.
| | 01:13 | And so we have an aac file, we have an
mpeg file, and we have an ogg vorbis file.
| | 01:19 | And so those are three
different encodings of the same media.
| | 01:24 | And the reason for that is that
different browsers support different encodings.
| | 01:28 | So for example, this Firefox browser,
if we come up here to the Tools menu and
| | 01:33 | go into Web Developer > Web Console,
we see this it failed to load the aac or
| | 01:40 | the mpeg, the m4a or mp3 files,
and those were the first two.
| | 01:46 | And so what it did load is the ogg file.
If we come back here up to the Tools
| | 01:50 | menu and go to Page Info and come over
here to Media, you see that song.ogg got
| | 01:55 | loaded and here's the preview of it.
(music playing)
| | 02:04 | So we can close this, and we can
close this, and let's look at the same
| | 02:08 | effect here in Chrome.
| | 02:10 | In Chrome we can go in the
View > Developer > Developer Tools and we can see
| | 02:16 | under Resources, if we click on the
Resources tab--it usually comes up at first
| | 02:20 | under Console--but if you click on
the Resources tab and under Frames and
| | 02:25 | audio-working.html, that's our file there.
| | 02:29 | You see in this XHR > song.MP3.
thats the one that got loaded.
| | 02:34 | And so if we come back over here into our
source file, you see that that's the second one.
| | 02:39 | So it wasn't able to load the aac,
and instead it loaded the mp3 file.
| | 02:44 | This is without any JavaScript or
anything; it's just loading that.
| | 02:47 | These controls that you see on the
screen, this here or in Firefox, this here,
| | 02:52 | this is enabled with this controls attribute.
| | 02:55 | And if I take that out and save it and
reload it, you see there's no control anymore.
| | 03:02 | And so the only way to control it
in that case is with JavaScript.
| | 03:05 | And so I've provided a few buttons here.
| | 03:07 | Let's go over and see this in
Chrome. We have the same effect.
| | 03:10 | I'll reload this. You see the controls
are gone and so we just have these buttons.
| | 03:15 | And these are the buttons here, and you
see onclick, play, pause and rewind.
| | 03:20 | And up here in our JavaScript,
these are really simple:
| | 03:24 | play, pause and rewind just
sets the currentTime to 0.
| | 03:29 | And so this audio element is just
loaded with .document.getElementById, with the
| | 03:33 | Id, and audio1 is the id that we
set over here in the audio tag.
| | 03:38 | And so once that's loaded, all you have
to do is call play, pause, or set the
| | 03:43 | currentTime to 0 on that object.
| | 03:46 | And there are actually quite a few
different things that you can do with it.
| | 03:48 | So you can create your own buttons and
make this all fit with the look of your
| | 03:54 | website and these buttons just work.
(music playing)
| | 04:10 | And it works exactly the same in Firefox.
(music playing)
| | 04:20 | So there's a couple of other attributes.
| | 04:22 | There's an autoplay attribute.
| | 04:24 | If I save that and load this back
up and reload it in the browser,
| | 04:30 | tou see it just starts playing.
(music playing)
| | 04:33 | And put the controls back on.
| | 04:37 | There is also a loop attribute. If I
save that and reload this--
| | 04:44 | I am going to drag this out towards
the end of the song here, and see it just
| | 04:49 | starts back from the origin or beginning.
(music playing)
| | 04:52 | So you cannot style this controller with
CSS, but you can leave off the controls
| | 04:57 | attribute and create a custom audio
player using JavaScript and whatever other
| | 05:02 | elements fit in with the design of your site.
| | 05:04 | Of course you can make much more
sophisticated controls, and you've probably seen
| | 05:08 | examples of that around the Internet.
| | 05:11 | By providing a selection of
different encodings in the source tags, it's
| | 05:15 | possible to support all of the
modern browsers with your audio media.
| | Collapse this transcript |
| Embedding video| 00:00 | HTML5 provides a simple and powerful
feature for embedding video in your web pages.
| | 00:06 | Let's make a working copy of this
video.html file here in the Chap10 folder of
| | 00:11 | your exercise files.
| | 00:13 | We will rename to video-working.html,
and I am going to open that in the text
| | 00:19 | editor, and we'll get to
this JavaScript in a minute.
| | 00:22 | You will see this file is actually very simple.
| | 00:24 | It has header and the video
and a form with some buttons.
| | 00:29 | Let's go ahead and open this in the browsers.
| | 00:32 | I am going to open this
in both Firefox and Chrome.
| | 00:35 | So there is, in Firefox, and you can see
I can just press play.
| | 00:39 | (video playing)
| | 00:47 | And I can open this in Google Chrome, and we
see there is the same video file.
| | 00:54 | (video playing)
| | 01:02 | And if we go back over here to our
editor, you will see that it works exactly
| | 01:06 | like the audio version,
| | 01:07 | if you have looked at that movie.
There is a video tag and inside of that
| | 01:10 | container, there are three different
source tags, and each of those is loading a
| | 01:15 | different file with a different encoding.
| | 01:17 | There is MP4, there is
webm, and there's ogg video.
| | 01:21 | There's also this paragraph for
browsers that don't support the feature.
| | 01:24 | So what happens is the browser looks
through this, and it looks at these media
| | 01:29 | types, and it selects the
first one that it supports.
| | 01:33 | So if we go over here to Firefox and
we come up here to the Tools menu and
| | 01:38 | select Web Developer > Web Console, you
see we have this message here that says,
| | 01:44 | "video/mp4 is not supported."
| | 01:47 | So it skips that file.
| | 01:48 | And if it skipped that file, it would
have selected the webm file, because it
| | 01:52 | didn't give us a message about failing
with the webm file. And so if we come back
| | 01:56 | over here to Tools > Page Info, select
Media, you see that the webm file is the
| | 02:02 | one that it selected, and here it is, down here.
| | 02:09 | So this is a webm file, and if I come
over to the Google Chrome browser, we can
| | 02:18 | go through a similar exercise
and find out which file it loaded.
| | 02:21 | Come down here to the Developer >
Developer Tools, and in the Resources tab--it
| | 02:28 | sometimes starts up in the
console or one of these others.
| | 02:30 | We select the Resources tab and under
frames, video-working.html and you see
| | 02:36 | under this XHR, if it's not opened up, that
it selected the m4v file. And we see that
| | 02:42 | that is the first one in the list.
| | 02:45 | So this is a great feature for being
able to provide a number of different
| | 02:48 | encodings so that you can support all
the different browsers in your audience.
| | 02:52 | So there's a couple of other
attributes here to video tag.
| | 02:56 | You notice that we have width and height,
and we can actually set that to scale
| | 03:01 | our media if we want to. We can make
this 430 and we can make this 240, and now
| | 03:06 | all of a sudden, it's going to
load up a lot smaller in our window.
| | 03:13 | And it scales it on the fly.
(video playing)
| | 03:16 | And the same thing works of course in Chrome.
(video playing)
| | 03:20 | This should really work in any browser.
| | 03:27 | We can also select the autoplay attribute.
| | 03:31 | If I save that and reload this in
my browser, you will see it starts
| | 03:36 | playing right away.
(video playing)
| | 03:48 | And there's also a loop. So if I save
that and bring that up in the browser, and
| | 03:52 | again, this works in all the browsers as well.
| | 03:55 | I bring this out towards the
end, buffering a little bit.
| | 03:59 | You can see it's getting towards
the end, and it loops right around.
| | 04:03 | I can also get rid of the controls altogether.
| | 04:05 | If I take out controls--I am just
going to take all those out and just put in
| | 04:10 | autoplay--and when I hit reload--
(video playing)
| | 04:13 | So you see our controls
are gone now from the video.
| | 04:21 | So the only way to control is to
provide our own controls, and of course, this
| | 04:25 | is the same in Google Chrome.
(video playing)
| | 04:28 | So there are no controls available anymore.
| | 04:33 | The only way we can control this
is by providing our own controls.
| | 04:36 | So you can provide your own
controls very, very simply. And again, this
| | 04:41 | works exactly the same as it does
with the audio tag, and this is exactly
| | 04:45 | the same JavaScript;
| | 04:46 | I've just changed the name
of the variable to video.
| | 04:49 | So we get the video object with
getElementById, and the id is video1, and you see
| | 04:54 | that the ID here is video1 in our
video tag, and then we just provide these
| | 04:59 | functions. And there's a few of them available.
| | 05:02 | There is actually a few
more than these available.
| | 05:04 | So we have play, we have pause, and we
have rewind by setting the current time
| | 05:08 | to 0, And these are attached.
| | 05:10 | These buttons just simply like this
onclick, and calling those functions.
| | 05:15 | So these buttons just work fine.
(video playing)
| | 05:17 | I can rewind and start again.
(video playing)
| | 05:29 | So just like with the audio element,
you can't actually style the controller
| | 05:34 | with CSS, but you can provide your own
controls. And that allows you to use all
| | 05:39 | of your HTML and CSS skills to provide
controls that fit perfectly in with the
| | 05:44 | design of your site.
| | 05:45 | So the video tag is a very simple and powerful
way to embed video elements in your web pages.
| | 05:52 | By providing a selection of
different encodings in the source tags, it's
| | 05:55 | possible to support all of the modern browsers.
| | Collapse this transcript |
|
|
11. HTML5 Data ElementsCreating ad-hoc Document Object Model (DOM) data with the data-* attribute| 00:00 | HTML5 has a new feature that allows you to
set arbitrary data attributes in any element.
| | 00:05 | Let's take a look at how this works.
| | 00:07 | Make a working copy of
data-attributes.html. I'm going to call this
| | 00:11 | data-attributes-working.html.
| | 00:15 | I am going to open that in the text editor.
| | 00:18 | You notice up here at the top I've got
some JavaScript in the script element
| | 00:22 | there, and then down here in the body of
the document, we've got some html that's
| | 00:28 | using these data- this and that
attributes, we'll talk about that in a moment.
| | 00:35 | Let's go ahead and open this in the
browser, and you'll notice we've got these
| | 00:39 | lines of text from our HTML.
| | 00:41 | So the way this works is you can
basically embed any data that you want in
| | 00:46 | any tag that you want, using data-
and whatever you want to call it as the
| | 00:51 | name of the attribute, and then putting
whatever you want to in the value of the attribute.
| | 00:57 | So in this case I've got data-aka,
and The White Album is the data in the
| | 01:02 | attribute. And this is all wrapped around
in an a element, a link, that says The Beatles.
| | 01:08 | So it says The Beatles record an
album called The Beatles, and I have this
| | 01:12 | data-aka with the commonly also
known as name of the album called The
| | 01:18 | White Album--and if you're Beatle fan like
I am, you know exactly what I'm talking about.
| | 01:22 | So up here in the JavaScript, you'll
notice I've a function called aka, and it
| | 01:28 | gets called here in this onclick aka,
and this means a reference to the element
| | 01:33 | that has the onclick attribute in it.
| | 01:35 | And basically, I'm just setting up an
alert with dataset aka from that element.
| | 01:41 | And so dataset will have these various
elements in it, and you notice that it's
| | 01:47 | calling a property called aka and
that is the name after the data-.
| | 01:53 | And then whatever is after that dash
becomes the name of the property in
| | 01:57 | the dataset object.
| | 01:58 | So if we come over here to our browser
and we click on The Beatles, you see I
| | 02:03 | get a little alert that
says aka The White Album.
| | 02:06 | So it's actually reading that data
from the data-aka attribute and making it
| | 02:12 | available inside of the JavaScript.
| | 02:14 | So as you can imagine, you can
do all kinds of things with this.
| | 02:17 | Like for example, I have this other one, and this
is on a button as opposed to an anchor element.
| | 02:24 | It could really be on a span if I
wanted to be and it would work just fine, and
| | 02:29 | I'll show you that in a minute.
| | 02:30 | But here I've got data-missile-type,
data-missile-payload, data-missile-sound
| | 02:35 | and onclick=fire, so click here to fire
the missile and when I click here, I get
| | 02:39 | Firing the rocket with
photon torpedo payload Ka-Boom!
| | 02:43 | And you see its rocket is the type, and
payload is photon torpedo, and the sound is Ka-Boom.
| | 02:50 | And so up here in my JavaScript,
I'm basically getting all of these--
| | 02:54 | missileType, missilePayload,
missilesSound--and I am putting them all together
| | 02:58 | into this alert string.
| | 02:59 | So as you can imagine, if you had a game
or something, you could put all kinds of
| | 03:04 | properties in there. You could
change them around in your JavaScript.
| | 03:08 | You can parse them with your JavaScript and
you can do whatever it is that you want to do.
| | 03:12 | You'll also notice something else
interesting here--and I did this on purpose so
| | 03:16 | that I could show you this feature.
| | 03:18 | These attributes have hyphens in
the name, so its missile-type,
| | 03:20 | missile-payload, missile-sound. And
you'll notice that in the JavaScript it's in
| | 03:27 | camelcase missileType with a capital T,
missilePayload with a capital P, and
| | 03:32 | missileSound with a capital S.
| | 03:34 | As part of the speck, when you use a
hyphen in your attribute names, they get
| | 03:39 | converted into camelcase in the JavaScript.
| | 03:42 | And that's because hyphens aren't
legal as names of properties in JavaScript.
| | 03:49 | And so I did it this way
on purpose just to show you.
| | 03:51 | It's also true that these data
attributes will work on any element.
| | 03:56 | If I change button here to span--and I'm
going to change the close also to span
| | 04:01 | and I'll save this and I'll
reload it here in the browser--
| | 04:04 | you see that now we just have the word Fire.
| | 04:06 | It's not a button any more.
| | 04:08 | And you'll notice that my cursor is
not even changing to the pointy cursor; it
| | 04:12 | is just remaining the text cursor. But still,
if I click on it, I still get that alert box,
| | 04:17 | because in HTML5, the onclick attribute
works for anything. It doesn't actually
| | 04:23 | have to be a button element or a
link element or anything like that.
| | 04:28 | And so I still get this Firing the
rocket with a photon torpedo payload Ka-Boom!
| | 04:33 | So it takes perhaps a little bit of
imagination, but this is obviously a
| | 04:38 | very useful feature, and it's
currently supported by the latest versions of
| | 04:42 | all the major browsers.
| | 04:43 | You'll want to have a fallback in case
it's not supported by legacy browsers
| | 04:47 | that may be visiting your site.
But this could be an exciting feature to
| | 04:51 | experiment with and to implement.
| | Collapse this transcript |
| Displaying relative values with meter| 00:00 | HTML5 provides a new element for
displaying static value in a range.
| | 00:05 | The meter element is currently
supported by the Google Chrome browser and will
| | 00:08 | soon also be supported by Safari 6.0,
when that comes out within the next few
| | 00:14 | weeks as I've recorded this.
| | 00:15 | Let's go ahead and make a working copy of
meter.html, and we'll open this in our text editor.
| | 00:22 | And you can see normal, HTML document, and
it has a few of these meter elements in
| | 00:28 | it. And I've gone ahead and filled in
all the attributes on those, but these
| | 00:33 | first couple are very, very simple.
| | 00:35 | You can do it with just a value, or you
can have minimum or maximum or give it
| | 00:40 | a range in a value.
| | 00:41 | And I'm going to show you what
these look like in the browser.
| | 00:44 | I'm going to go ahead and open it in
Google Chrome, and there is the first two.
| | 00:47 | Notice we have 2 out of 10, right.
| | 00:50 | So it's got a minimum of 0, a maximum of
10, and the value of 2, and so the meter is
| | 00:54 | actually just 20% filled up.
| | 00:57 | The next one says .6, so that's 60%.
And then these here, these are the ones with
| | 01:04 | a value. They have minimum of 0, maximum of 100.
| | 01:07 | They're all the same. Low of 10, high
of 80, optimum of 47. And I've styled them
| | 01:12 | to be 400 pixels wide, so this is
kind of how you'll normally do this.
| | 01:16 | And they have these values, and I've
displayed the values in text after so you
| | 01:20 | can see what they are.
| | 01:21 | 9 is less than that low value,
so you see it comes up amber.
| | 01:25 | 32, 47, and 80 are all within that range
of 10 to 80, which is the low and high.
| | 01:33 | You notice that 47 is optimum, and
that attribute is not really changing the
| | 01:38 | display here in Google Chrome.
And then these other ones are outside of the
| | 01:42 | range. You have 81, which is higher
than 80, so it shows up amber, and then 100,
| | 01:46 | 101, 110, those all show up the same, and
they're really out of bound altogether.
| | 01:51 | Well, 100 is the maximum value, but the
other ones are higher than the maximum,
| | 01:56 | and so those are all showing up as amber.
| | 01:58 | I wanted to also show you what this
looks like in Firefox, which does not
| | 02:02 | support this particular feature, and
you notice that it just shows the text.
| | 02:07 | 2 out of 10, 60%, this is the text
that is inside of the container.
| | 02:12 | This is the content of the meter element.
| | 02:14 | 2 out of 10, 60 and then if we scroll over
here, we have 9 of 100, 32 of 100 like that.
| | 02:21 | And so these are all just
displaying what's inside of the element.
| | 02:25 | Most browsers will display what's
inside of an element, even if that element is
| | 02:29 | not supported by the browser.
| | 02:32 | So they won't do the function that that
element is designed to do, but they'll
| | 02:36 | show you the text as like an alternative text.
| | 02:40 | And so by putting values inside of
that, you're basically giving alternative
| | 02:45 | content to browsers that
don't support the feature.
| | 02:48 | The use of the meter element is
not recommended for a progress meter;
| | 02:52 | there's a progress element provided
for that purpose, and we'll discuss that
| | 02:56 | in the next movie.
| | Collapse this transcript |
| Creating dynamic progress indicators| 00:00 | While the meter element is
recommended for displaying a static value, the
| | 00:04 | progress element is recommended
for displaying a progress bar.
| | 00:08 | Let's go ahead and make a
working copy of progress.html.
| | 00:11 | I'm going to rename this
to be progress-working.html.
| | 00:15 | I'll go ahead and open that, and you
see up here at the top we have some
| | 00:20 | JavaScript, and a little bit of a
style sheet for setting the width of the
| | 00:25 | progress bar, and then down here
we have the progress bar itself.
| | 00:29 | The attributes of the progress bar are
just as they are for the meter element, and
| | 00:34 | we have the Progress--the name of tag.
We have an ID here, which we're using to
| | 00:38 | identify the element in our JavaScript.
| | 00:41 | The value, we have a max.
| | 00:43 | If it's not specified, the minimum is 0.
And here we have the contents of the progress bar.
| | 00:49 | This is what will display for
browsers that don't support this feature.
| | 00:52 | And currently, this feature, as I'm
recording this, is supporting the latest
| | 00:56 | versions of all the major browsers
except Internet Explorer, and I understand
| | 00:59 | that the next version of Internet
Explorer--which should be available a few
| | 01:03 | months after I record this--
| | 01:05 | it's supposed to support this feature.
| | 01:06 | So this alternate content here,
you notice it has a span with an id, because I'm
| | 01:11 | actually updating this
number as well in the JavaScript.
| | 01:14 | So let's take a look at the JavaScript.
| | 01:16 | Most of my JavaScript looks like this.
| | 01:18 | I have window.onload at the bottom.
| | 01:19 | Window.load gets fired after everything is
loaded up in your browser, and it calls init.
| | 01:24 | And I put this at the bottom so that
all of this stuff is already defined, and
| | 01:28 | I don't have any forward references in
my code. And so it calls a init up here,
| | 01:33 | which basically just initializes these
two variables--progressBar and textValue--
| | 01:37 | and it uses document
getElementById to load them with these elements.
| | 01:42 | And so progressBar gets loaded with the
progressBar element, and the textValue
| | 01:47 | gets loaded with this span element here,
so I can update that 0. And then it sets
| | 01:53 | a timer to call update
progress every 50 milliseconds.
| | 01:56 | And update progress simply counts this
value, starting at 0--pValue starts at 0--
| | 02:02 | and it increments every time it's
called. And if it's greater than 100, it
| | 02:06 | resets it to 1, and then it updates
the value of the progressBar and the
| | 02:10 | content of text value.
| | 02:12 | So let's look at this in the browser here.
| | 02:14 | We're going to look at this in Firefox,
because it's supported in all the
| | 02:18 | different browsers, and you see there
is our progressBar counting from 0 to 100
| | 02:22 | over and over again.
| | 02:23 | Now, here's an interesting thing about this.
| | 02:26 | This will work exactly the same
if I change progress to meter.
| | 02:31 | Of course, meter isn't supported in
Firefox, so we'll see our alternate content
| | 02:36 | there. And I'm going to go ahead and
take progress out of my style up here, and
| | 02:39 | just let the idp1 be for either element.
| | 02:43 | And so if I save this and open it up in
Firefox, you'll notice that we just get
| | 02:48 | that counting number, because
Firefox doesn't support the meter element.
| | 02:52 | On the other hand, if I open this in
Google Chrome, it works just fine, and it
| | 02:57 | just shows a meter element.
| | 02:59 | So the only distinction between the
meter element and the progress bar, at least
| | 03:04 | from a visual standpoint--and I'm
going to go ahead and put this back to the
| | 03:08 | progress bar and I'll reload it, and we
see we have this progress bar with this
| | 03:12 | little animated thing.
| | 03:13 | I'm sure it has a different look
in different operating systems.
| | 03:15 | This is what it looks like on a Mac.
So that's the only functional difference.
| | 03:20 | The other difference is semantic, and
again, HTML5 is all about semantics; at
| | 03:24 | least it's very much about semantics.
| | 03:26 | And so the semantics or the meter
element is it's a value, and the semantics of
| | 03:31 | the progress element is that it is a
progress. That doesn't mean that the meter
| | 03:35 | element can't change, because obviously it can.
| | 03:37 | But what it means is that it's not
being used as a progress bar, and that that
| | 03:42 | semantic difference is going to,
in some contexts, make a difference.
| | 03:47 | So this is the progress element and as
of this recording, current versions of
| | 03:51 | all the major browsers support the
progress element except Microsoft Internet
| | 03:54 | Explorer, although IE version 10--which
should be out in the next few months as
| | 03:59 | I'm recording this--is expected to support it.
| | Collapse this transcript |
|
|
12. HTML5 MicrodataOverview of HTML5 microdata| 00:00 | Microdata is a HTML5 specification for
adding rich semantics to web content.
| | 00:06 | This is a finer grained semantics than
can be achieved with the semantic tags
| | 00:10 | used by HTML itself.
| | 00:13 | Microdata is designed to provide
machine-readable labels to allow scripts to
| | 00:17 | provide services that are customized
to the page, or enable content from a
| | 00:22 | variety of sources to be processed by
a single script in a consistent manner.
| | 00:27 | Microdata supports the use of
vocabularies to define name-value pairs to assign
| | 00:32 | values to properties.
| | 00:33 | You may define your own vocabularies
for your own purposes or use one of the
| | 00:37 | publicly available vocabularies,
such as those at schema.org.
| | 00:42 | Currently, none of the major
browsers support microdata natively.
| | 00:45 | Other than private uses, the only
current real-world usage for microdata is
| | 00:50 | Google's support for
microdata in their search engines.
| | 00:53 | Google operates a page for testing
microdata as part of their webmaster tools.
| | 00:58 | We will take a look at this in the next movie.
| | 01:01 | Microdata is a new feature in HTML5,
Currently, it's used by Google to enhance
| | 01:05 | indexing in its search engine.
| | Collapse this transcript |
| Exploring an example with microdata| 00:00 | This is an example of a very simple
microdata vocabulary called Thing.
| | 00:04 | You can find this schema.org/Thing,
with a capital T.
| | 00:09 | You notice that it has very few names:
additional type, description, image, name and URL;
| | 00:16 | it's a very simple microdata
vocabulary for describing a thing.
| | 00:20 | So we're going to go ahead and use this
microdata vocabulary to describe our scissors.
| | 00:25 | We're not actually going to edit this
file; it's already set up, so I'm just going
| | 00:30 | open it in the text
editor so that you can see it.
| | 00:33 | It's mostly exactly the same
document that we've seen before.
| | 00:36 | It has the scissors. You see, I've
added a paragraph describing the scissors.
| | 00:40 | But other than that, it's exactly the same.
| | 00:42 | It's got all of this Lorem Ipsum.
| | 00:44 | And it's got in this aside sidebar,
| | 00:48 | I've also added just these attributes--
itemscope, itemtype, itemprop--to add the
| | 00:54 | microdata to the existing content.
| | 00:57 | And so when we look at this in the browser,
| | 01:00 | we see it's exactly the same page except
I've got this added paragraph to it
| | 01:04 | describing the scissors. Other than
that, nothing has changed. You see the sidebar
| | 01:07 | looks exactly the same.
| | 01:08 | Now if we come up here at the top, we
take a look at where I've actually added
| | 01:12 | stuff, in the main div I have item scope.
item scope means this is the scope of
| | 01:17 | the microdata, and item type
refers to the microdata vocabulary.
| | 01:23 | We have itemprop image, itemprop name,
itemprop description, and those are just attributes.
| | 01:30 | I'm not changing any content. I'm just using
existing content, so it really doesn't
| | 01:35 | do anything to the content whatsoever.
| | 01:37 | If I come down here into the sidebar,
you see I have itemscope on each of these
| | 01:41 | sections, and it points to that same
thing vocabulary. And I have itemprop name
| | 01:47 | for the h1, and itemprop description for the
paragraph. And I did that for each of these.
| | 01:54 | So let's go ahead and test this microdata.
| | 01:56 | I'm going to open another tab here in
the browser. I'm just going to type in
| | 02:00 | http://www.google.com/
webmasters/tools/richsnippets.
| | 02:11 | Rich snippets is Google's name for
microdata and in their Webmasters tools they
| | 02:16 | have this rich snippets testing tool
for testing your microdata to see how a
| | 02:22 | search engine would interpret it.
| | 02:23 | And so I come back here to my HTML file.
| | 02:27 | I'm just going to select the entire
file and press Copy on my keyboard, paste
| | 02:31 | it into this text box here on the Google
Webmaster tools page, and I'm going to click on Preview.
| | 02:37 | And so now they have parsed our microdata
and they've come up with these items down here.
| | 02:44 | So for each of these items, it's got the
type is the schema.org/thing vocabulary.
| | 02:50 | You notice they're spelling it with
a lowercase t; it's actually spelled with an
| | 02:54 | uppercase T, and it doesn't work if
you use lowercase t in your source file.
| | 02:58 | And so it finds the image of the scissors.
| | 03:01 | It finds the name of the scissors.
| | 03:03 | It finds a description of the scissors.
| | 03:05 | Scissors are cutting-edge technology.
| | 03:06 | They use there cutting edges to cut things.
They are scissors. They're orange. They rule.
| | 03:11 | And it also finds for each of these
items the blades, the handles, the colors.
| | 03:15 | And so this is all just because I
put that microdata in the file.
| | 03:18 | It doesn't change the content at all;
it's just adding attributes to the existing tags.
| | 03:24 | Microdata is a new technology.
| | 03:26 | It shows some promise for being able to
help with search engine results and other
| | 03:29 | application that require a script to
know more about a web page that may be
| | 03:33 | discernible from normal markup.
| | 03:35 | This is a simple example of how it
could be applied to show a search engine
| | 03:39 | more about a web page.
| | Collapse this transcript |
|
|
13. Document OutlinesUnderstanding outlines| 00:00 | The HTML5 outlining algorithm is a
great way to check the structure of your
| | 00:04 | document to make sure that it's
understandable by scripts, search engines, and
| | 00:08 | other automated processes.
| | 00:10 | The outlining algorithm uses the
sectioning content model to discover the
| | 00:15 | sections of your document and then
uses of set rules to create an outline.
| | 00:20 | The Mozilla organization maintains a
page with an excellent description of the
| | 00:24 | outlining algorithm.
| | 00:25 | For example, if we take the relevant
structure from the scissors page, we could
| | 00:31 | run it through the outlining
algorithm to produce this outline.
| | 00:35 | There are a few resources available
to produce outlines from your pages.
| | 00:39 | The h5o project on Google code has
collected a few, including a Chrome extension.
| | 00:44 | There is also a public
outliner script available html5.org.
| | 00:47 | We will experiment with a few
of these tools in the next movie.
| | Collapse this transcript |
| A demonstration of outlining| 00:00 | Let's take a look at a few tools for
testing the outline structure of a web page.
| | 00:03 | We will use the Scissors page for
these tests, as it has a known structure.
| | 00:08 | So I have the Scissors page opened up
here in my browser, and I've got it opened
| | 00:11 | up from the Chapter 13
folder in the exercise files.
| | 00:14 | And I have also loaded it up in my editor here.
| | 00:17 | And coming back to the browser, I have
also loaded this outliner page, and what
| | 00:22 | this does is it will take any HTML
source--either from a hard disk or from a URL,
| | 00:28 | or you can paste it in here--
and it will give you an outline.
| | 00:32 | So, I am just going to paste
it in here from my text editor.
| | 00:36 | So I am going to select all and
copy and select all and paste.
| | 00:40 | I am going to click Outline this!
| | 00:42 | and now we have the outline
that we expect from this page.
| | 00:47 | You notice at the top is Scissors, and
if you go to our source here, you see
| | 00:51 | right here in header, the first h1
it sees in this h group is Scissors.
| | 00:56 | So, that's the top.
| | 00:57 | It's got this untitled section, and that's our
nav section here, which does not have a title.
| | 01:02 | It has The Story of Scissors, and
that's right here, in our first article, The
| | 01:09 | Story of Scissors, and then
it has About These Scissors.
| | 01:12 | And if we go down after this article,
we see this aside, and it has a header, and
| | 01:19 | it says About These Scissors.
| | 01:21 | And then under that, inside of the
aside, we have these three sections which
| | 01:26 | have h groups with Blades, Handles, and Color.
| | 01:30 | And you see those are indented under About
These Scissors: Blades, Handles, and Color.
| | 01:35 | So we've got an accurate outline from this tool.
| | 01:39 | So that's one way you can do this.
| | 01:41 | Another way you can do this is using
the tools at Google code, and I've loaded
| | 01:45 | that up actually in the Chrome browser,
because one of these that I want to show
| | 01:49 | you is this Chrome extension,
which actually works pretty well.
| | 01:53 | So, we are going to load that up.
| | 01:55 | So, this is at code.google.com/p/h5o,
and that's letter o, for HTML5 outliner.
| | 02:02 | I am going to click on Chrome
Extension here, and it loads up this Chrome
| | 02:06 | Extension page, and it gives me an
opportunity. It describes it here, and it
| | 02:10 | gives me an opportunity to add it to Chrome.
| | 02:12 | So, I am going to go ahead and click
Add to Chrome, and I am going to give it
| | 02:16 | permission, and it says, Outliner
has been added to Chrome. All right!
| | 02:20 | So every time it sees a page now,
it gives you this opportunity to outline it,
| | 02:25 | if it can outline it.
| | 02:26 | So, for example, if I go to google.com--I
am going to open this in a separate tab--
| | 02:32 | it has this little outliner
thing, and there's not much there.
| | 02:35 | It has an account option.
| | 02:36 | So, that's not really a conforming page
that's going to give us very much information.
| | 02:40 | If I try to open the Scissors page from
disk, well notice it opens it up, but
| | 02:45 | it doesn't give us the
opportunity to outline it.
| | 02:46 | It doesn't seem to work on
files from your hard disk.
| | 02:48 | You have to actually open it from a web server.
| | 02:51 | So I have gone ahead and I've
loaded this up on a web server, at
| | 02:54 | html5.bw.org/esst/chapter13. And here's
our Scissors page from there, and you see
| | 03:03 | it's got the little Outliner icon.
| | 03:05 | And if I click on this, I get an outline, and
there's our outline exactly as we saw it before.
| | 03:11 | Now, there are a couple
of cool differences here.
| | 03:13 | One is you will notice the Untitled section.
It says it's a NAV, and that's kind of nice.
| | 03:18 | And if I click on it, you see it
highlights it and blinks it there on the page.
| | 03:23 | If I click on Scissors at the
top, it blinks the entire page.
| | 03:26 | If I click on The Story of Scissors,
see it clicks on that; it actually scroll
| | 03:31 | to it and blinks it.
| | 03:33 | If I click on About These Scissors, it
scrolls and it blinks the entire sidebar there.
| | 03:39 | Of course it scrolls it under itself.
| | 03:40 | And if I click on Blades--I wasn't doing all
the scrolling before--and Handles and Color,
| | 03:48 | you see it blinks those, and
unfortunately, it scrolls them in a way that
| | 03:51 | you can't see them.
| | 03:52 | Of course, on most computers, you are
going to have a lot more room than this,
| | 03:55 | and you will be able to open it up
wider so that you can see the parts that you are clicking on.
| | 04:00 | So, that's pretty nice.
That does a good job.
| | 04:03 | And finally, if you come back here to
this page, you will notice that there's
| | 04:08 | also this Bookmarklet, and I am going to go
ahead and I am going to load that up in Firefox.
| | 04:12 | So, I am going to copy this, and I am
going to go back to Firefox, and I am
| | 04:16 | going to open this up in a separate tab.
And so here's that same page, separate
| | 04:20 | tab and we have this bookmarklet.
| | 04:22 | Now, the way this works is you click
on this and it brings you to a Download
| | 04:26 | page, and you have a number of different choices;
you've got an Opera extension.
| | 04:29 | You've got the Bookmarklet.
| | 04:30 | You have some Minified JavaScript that
you can include in your own applications.
| | 04:35 | So, FireBug extension, it says very
experimental, and there's an older version
| | 04:39 | of the Bookmarklet for Internet Explorer.
| | 04:41 | The version I am going to show you does
not work in Internet Explorer, and there
| | 04:45 | are some reasons why that doesn't work.
| | 04:46 | In any event, the bookmarklet, if I
click on this, I get this Download page, and
| | 04:51 | if I click on that, you notice that
it gives me an opportunity to save it.
| | 04:55 | That's because it has it set as a text file,
not as an HTML file in the Content type.
| | 05:00 | And so I am just going to go ahead and
I am going to save this, and I am going
| | 05:05 | to Show in Finder, and there it is.
| | 05:07 | Now, when I come back here to Firefox,
I can open this up, I can go to my home,
| | 05:13 | and I can go to my Downloads,
and there it is, outliner.html.
| | 05:16 | And it gives me an opportunity to
drag this link to my Favorites bar, which
| | 05:22 | I have closed here.
| | 05:23 | So I am going to, in my Bookmarks bar,
I am going to go ahead, I am going
| | 05:26 | to drag that there.
| | 05:27 | And now, when I open up the Scissors page--
and this is from the file on my desktop--
| | 05:32 | I click on this and it gives me the outline.
| | 05:34 | And again, it gives me the
Untitled NAV, The Story of Scissors.
| | 05:38 | This is actually from the same source code
that the Google Chrome Extension is from.
| | 05:43 | So it has the same type of an outline.
| | 05:45 | Unfortunately, it doesn't do
the nice little blinking thing.
| | 05:47 | It does scroll to them though.
| | 05:49 | So here, you have a number of
different tools you can use for examining the
| | 05:53 | outlines of your web pages.
| | 05:56 | These tools are a good starting point for
experimenting with the outlines of your pages.
| | 06:00 | Take the time to experiment.
Try different structures.
| | 06:03 | Understanding how HTML5 outlines work
will go a long way toward creating well-
| | 06:08 | structured HTML5 documents.
| | Collapse this transcript |
|
|
14. TablesTable basics| 00:00 | Tables are a very useful feature in HTML.
| | 00:03 | Let's take a look at how they work.
| | 00:04 | We will start by making a working copy
of tables.html here in the chapter 14
| | 00:10 | folder in your exercise files, and I
will rename that tables-working,HTML.
| | 00:15 | I am going to open that in my text editor.
| | 00:18 | We will just scroll through this for
the benefit of folks who are typing along
| | 00:22 | at home, and in a moment we
will explain all of that.
| | 00:25 | Let's open it in the browser here.
And that's what the table looks like.
| | 00:30 | Now you can see that it's not very
recognizable in its native state.
| | 00:34 | One of the first things that I always
like to do when I am designing a table is
| | 00:38 | to turn on the borders so I can see
where all the rows and columns are.
| | 00:42 | So I am going to come in here and I'm
going to create a style, and all it's
| | 00:47 | going to do is say table and td and th.
| | 00:51 | I will explain what all of that
is in just a moment here. Border: 1px, solid black.
| | 00:58 | Now when I reload this in the
browser, you see we get borders up,
| | 01:02 | so we can see where the dimensions
of all the elements of the table are.
| | 01:07 | So now let's go ahead--and let me see how
much of this I can see on the screen at
| | 01:10 | the same time as I can see the code.
That's always useful.
| | 01:15 | So now let's take a look at
the table and see how it works.
| | 01:17 | We have a table element, which starts
right there, and it ends all the way down
| | 01:21 | there on line 56, and that
contains the entire table.
| | 01:25 | So if we are looking at the table over
here in the browser, you see that outer line.
| | 01:29 | That's a table, and it actually also
includes this line above this that says
| | 01:33 | Some Favorite Albums.
| | 01:34 | That's called a caption, and that's
the first element inside the table.
| | 01:37 | It needs to be before there are any rows
of data, and these tr elements are the rows.
| | 01:44 | The first thing you have in there is
a caption, if you have a caption, and
| | 01:47 | there's a CSS option
| | 01:48 | I will show you later that can make it
show up on the bottom instead of on the top.
| | 01:52 | Then we have the rows, and you see
here these tr elements and if I collapse
| | 01:57 | that, you see that it's that much.
It's from line 27 to line 31. That's one row.
| | 02:01 | So that's everything here:
Title, Artist, Comment.
| | 02:05 | So there are a total five of them.
| | 02:07 | There's that one and then there's this
one, that one, that one, and that one,
| | 02:11 | and those are all the rows of the
table. And the row contains cells, and there
| | 02:17 | are two types of cells.
| | 02:18 | They are the header cells, which are
default formatted bold like these ones up
| | 02:23 | there, and there are the data cells.
| | 02:25 | So the header cells are th elements, and
data cells are td elements. And these are
| | 02:31 | all containers, and what they
contain is the content of the cell.
| | 02:34 | So th element contains the word
Title, and you see it up there;
| | 02:39 | this th element contains the word
Artist, and you see it there; and this th
| | 02:42 | element contains the word
Comment, and you can see that there.
| | 02:46 | And these are the td element.
| | 02:48 | So that's table data. That's the one
over here it says Electric Ladyland, and
| | 02:52 | there's table data, and there's table data.
| | 02:55 | So it's all organized on the
screen here in rows and columns.
| | 02:58 | So the tr elements contain a row, and
then each of these cells inside the row are
| | 03:03 | organized horizontally into columns.
| | 03:06 | So you have rows and columns and
rows and columns and rows and columns.
| | 03:09 | Now you'll notice that the
formatting on the table is still pretty rough.
| | 03:14 | One of the first things that I notice
when I look at this is that each of these
| | 03:18 | elements has its own border, rather than
sharing borders with the elements that
| | 03:23 | are next to them. And this is actually,
in my view, this is unsightly, and I
| | 03:27 | wouldn't have this be the default
if I were the king of the world.
| | 03:30 | But I am not and that is the default.
| | 03:33 | So let's see how to change it, because
you are going to probably want to change
| | 03:37 | this, one of the first things you
do every time you format a table.
| | 03:39 | So I come in here and I go on my CSS
and I use a table selector, like that, and I
| | 03:46 | say border-collapse and I change it to
collapse. And when I save this and come
| | 03:50 | over here into the browser and reload,
you will notice that now all of those
| | 03:53 | borders are collapsed,
| | 03:54 | so each of these cells in the table
shares a border with the cell next to it
| | 04:00 | in each direction. And that, to me, looks more
like what a table is supposed to look like.
| | 04:04 | So the default value for the border-
collapse property is separate, like that.
| | 04:11 | So if I save that and reload, you see
we get the other behavior, and if I put it
| | 04:16 | back to collapse and reload, you see we get
the behavior that we are looking for here.
| | 04:20 | Now while I am in the table selector, I am
going to go ahead and also change the font.
| | 04:25 | I like a sans-serif font for my tables.
And tahoma is one in particular that I
| | 04:31 | think is very attractive for this purpose.
| | 04:33 | Now that table is starting to
look a lot better. See, I got a bug.
| | 04:39 | I need to take out that closing
bracket there, because my border-collapse
| | 04:43 | wasn't working, and there.
That's much better.
| | 04:46 | Another thing I like to do to my
tables is I like to have them have alternate
| | 04:49 | colors for each row.
| | 04:52 | So the way you do that--
| | 04:53 | so I am going to come down here into
the table itself and for each of these
| | 04:58 | rows, I am going to give it a class.
And I am going to name them odd and even,
| | 05:03 | so the odd rows will be one color and
the even rows will be another color.
| | 05:08 | Then I come up here in to the CSS and
I say tr. Remember tr is our rows, odd background color.
| | 05:18 | #ddf;. And then I am going to do the
same thing for even and call that one #def,
| | 05:24 | and then I want to create
one also for the header rows.
| | 05:28 | You notice I don't need a class for
this row because these header cells, they
| | 05:31 | have a different element name.
| | 05:34 | So I am going to say th background-color #cef.
| | 05:40 | Now when I save this and reload it in the
browser, you see we now have different colors.
| | 05:43 | We have this slightly brighter blue
for the header row, and then we have these
| | 05:48 | alternating colors for the other rows.
| | 05:49 | Now I want to show you a few other
things we can do in formatting, in particular
| | 05:55 | margins and padding.
| | 05:57 | If you're not familiar with the box
model in CSS, you will want to take a look
| | 06:01 | at my CSS for Developers course here on
lynda.com. But margins happen outside of
| | 06:06 | the borders, and padding
happens inside of the borders.
| | 06:09 | That's the long and short of it.
| | 06:11 | So if I say td margin 3pt, you would
expect this margin to be outside of the
| | 06:17 | borders, but since the borders are
collapsed, it actually doesn't work at all.
| | 06:20 | It doesn't change anything.
| | 06:22 | If I change this border collapse to separate,
now you'll see that that has some effect.
| | 06:26 | I am going to go ahead and turn the border off
| | 06:30 | so we can start seeing these effects a
little bit better, and I will reload this.
| | 06:35 | So if I make this border collapse again,
you will see that those margins go away.
| | 06:40 | So instead, I am going to give a padding.
| | 06:43 | Padding happens inside of the borders,
and when I reload, now you see we have a
| | 06:46 | little bit more room for
each of these table elements.
| | 06:50 | Finally, you see the caption
defaults to above the table.
| | 06:54 | If we want that caption to go below
instead, we can style the caption with a
| | 06:59 | property called caption-side, and
its possibilities are top and bottom.
| | 07:03 | It doesn't have left and right.
| | 07:05 | So I am just going to say bottom here,
and we will save that and reload and we
| | 07:09 | see that the captioning now comes at the bottom.
| | 07:11 | So we have a pretty
decent-looking table at this point.
| | 07:14 | In HTML5, all of the table formatting
options have been removed from the HTML,
| | 07:19 | so we are encouraged to
use CSS to format our tables.
| | 07:23 | As you can see, the CSS formatting
options for the tables are very powerful
| | 07:27 | and rich and flexible.
| | Collapse this transcript |
| Exploring the semantic parts of a table| 00:00 | HTML5 provides a few
semantic elements just for tables.
| | 00:04 | Let's go ahead and make a working copy
of tables-semantic.html and rename that
| | 00:10 | with a -working at the end
and open that in my text editor.
| | 00:15 | I'm going to go ahead and scroll
through this for the benefit of those who are
| | 00:18 | typing along at home.
| | 00:20 | Why don't we open this in the browser
as well and see what it looks like?
| | 00:24 | And the first thing we'll look at is
you'll notice that the table itself has
| | 00:29 | changed a little bit from our last movie.
| | 00:31 | We have a few new sections here.
| | 00:32 | We have thead, which is wrapped around
this row with the th elements in it.
| | 00:38 | And there is a new tfoot,
which is wrapped around a new row.
| | 00:42 | It just says Column 1, Column 2, and Column 3.
| | 00:45 | And then tbody is wrapped
around all of the other rows.
| | 00:49 | So each of these elements only has rows
for content, and the thead section must
| | 00:56 | be the first thing in the table
after a caption, if there is a caption.
| | 01:00 | And tfoot can either be at the top
or at the bottom, and tbody can be
| | 01:06 | anywhere after the thead.
| | 01:07 | For the most part, these have no
presentation meaning, except that the tfoot
| | 01:12 | element always ends up at
the bottom of the table.
| | 01:16 | So you notice, even though I have it
here above the tbody in this document, it's
| | 01:20 | still showing up at the end of the table.
| | 01:23 | Using these elements has a couple of
simple advantages, but for the most part,
| | 01:27 | it's really for the benefit of scripts
and other automated processes to help
| | 01:32 | them to better understand
the structure of your table.
| | 01:35 | If for example, I used td elements
here in the header, instead of the ths,
| | 01:40 | you'll notice if I reload this document
in the browser, that now those headers
| | 01:45 | look just like the rest of the table.
| | 01:47 | I could, if I wanted to, come into
the style and I could use a descendent
| | 01:52 | selector and say thead td, and then I
could style those particular td cells
| | 01:59 | without styling the rest of them.
For example, I could say font-weight:
| | 02:03 | bold and I could say text-align: center;
| | 02:08 | and then when I reload the document,
you see those are bold and centered again
| | 02:12 | just like they were before.
| | 02:13 | But for the most part, these are
sectioning elements, much like section and
| | 02:19 | article or for the rest of a document
for a non-table part of a document, and
| | 02:25 | these are for the benefit of scripts to
help the scripts and other processes to
| | 02:29 | better understand the structure of your table.
| | Collapse this transcript |
| Grouping columns| 00:00 | Using the colgroup and col elements,
you can apply styles to columns and groups
| | 00:05 | of columns in your tables.
| | 00:07 | Let's make a working copy of
table-semantic.html, and we'll go ahead and see
| | 00:13 | how this feature works.
| | 00:14 | I'll call this one -working,
open that in the text editor.
| | 00:18 | I'm just going to page through this
real quick for those of you who are typing
| | 00:22 | along at home. And we'll go ahead
and open this in our browser as well.
| | 00:28 | And let's take a look at how this feature works.
| | 00:31 | If we come down here into the table and
right after caption and before thead--
| | 00:37 | and this element always must go
after caption if there is any,
| | 00:40 | otherwise right at the top of the table
before any thead, tbody, tfoot, tr elements.
| | 00:47 | And we come in here and we can type colgroup.
| | 00:49 | I'll put an end tag also. And inside
the colgroup we get columns, which are
| | 00:56 | indicated with the col element.
| | 00:59 | I'm just going to give them class as well.
| | 01:01 | I'll go ahead and copy and paste,
because that will make this go faster.
| | 01:06 | So what we have here is a colgroup element,
which is a way of grouping columns together.
| | 01:11 | See, the rows are already grouped together,
because we have these </tr> elements.
| | 01:15 | So it's possible to style
a row just by styling tr.
| | 01:19 | But there is no other way to style a column.
| | 01:21 | If I wanted to style a column, I would
have to put a Column 1 class on all of
| | 01:26 | the Column 1 elements.
| | 01:28 | But if I don't want to do
that, there wasn't any way to that.
| | 01:31 | So colgroup was invented to style columns.
| | 01:35 | So col, the first one represents this
first column; the second one represents
| | 01:40 | the second column; and the third
one represents this third column.
| | 01:44 | So now I can go and style these
because I've given them class names:
| | 01:48 | col1, col2, and col3.
| | 01:50 | So I can style those class names
with the class selector--col1--and let's
| | 01:55 | just give it a background color.
And I will make copies of these and give
| | 02:00 | them different colors.
| | 02:01 | Now when I save this and reload my
browser, you notice these columns now
| | 02:06 | have their own colors.
| | 02:07 | You notice that the footer is not styled,
because the footer already has a color in it.
| | 02:12 | If I take that color out of the footer
and save that and reload, you'll see the
| | 02:16 | footer gets the color as well.
| | 02:18 | So the position of the col elements
within the colgroup element are used to
| | 02:23 | represent the position of the column.
| | 02:24 | So the first col element represents the
first column in the table, and likewise.
| | 02:29 | On the other hand, it's possible for a
col element to represent more than one
| | 02:34 | adjacent columns, by using the span attribute.
| | 02:37 | So if I say span=2 and then take out
one of these other columns, when I reload,
| | 02:43 | now that first col element
represents two adjacent columns.
| | 02:48 | That allows you to style groups of
columns rather than just individual columns.
| | 02:53 | So the colgroup feature is very useful
for applying style to columns or groups
| | 02:57 | of columns in your tables.
| | Collapse this transcript |
|
|
15. FramesFrames overview| 00:00 | HTML frames is a feature that has evolved a
great deal from its origins in HTML version 3.
| | 00:06 | There are two distinct versions of HTML frames.
| | 00:10 | The legacy frame specification from
HTML3 and 4 has been obsoleted in HTML5.
| | 00:16 | There are still a lot of sites
around that use the legacy frames model,
| | 00:19 | so I'll be covering that in this
chapter, even though it's obsolete in HTML5.
| | 00:24 | The more recent iframes model for
in-line frames has been retained in HTML5.
| | 00:30 | While its usage is very different
from the legacy frames, you can still
| | 00:33 | accomplish the same layouts
and much more, using iframes,
| | 00:38 | although for many purposes even
iframes are no longer necessary, as the same
| | 00:42 | functionality is available using CSS.
| | 00:45 | HTML has a long-standing history of
supporting frames for embedded content.
| | 00:49 | In the rest of this chapter, I'll show
you some examples of how frames work.
| | Collapse this transcript |
| Using traditional frames| 00:00 | The legacy frame specification from
HTML3 and 4 has been obsoleted in HTML5.
| | 00:07 | We're going to cover it here so you
can recognize it when you see it.
| | 00:10 | If you don't expect to be maintaining
old legacy websites, then feel free to
| | 00:13 | skip the rest of this movie.
| | 00:15 | Let's make a working copy of
frameset.html, and I'll rename this to
| | 00:19 | frameset-working.html.
| | 00:23 | This file actually loads some of the
files from this frame subdirectory, and
| | 00:27 | these are all very simple
HTML files, as we'll see.
| | 00:31 | Open up frameset-working.html in the
text editor and as you can see, this is a
| | 00:36 | very short document.
| | 00:37 | You'll notice that it doesn't have a
doc type at the top, because this is not
| | 00:41 | actually legal HTML5, so we don't
want the browser to think that it is.
| | 00:46 | We've a title here in the head section
and after that the head section, you'll
| | 00:51 | notice that there's no body; instead of
a body we have a frame set, and a frame
| | 00:55 | set contains a frame. It can
also contain other frame sets.
| | 01:00 | So we open this in the browser.
| | 01:02 | You see that this document has these
three frames, and each of these frames is
| | 01:09 | actually opening an HTML file
from this frame subdirectory.
| | 01:14 | So the first frame here is f1, the
second one is f2, and this third one is f3.
| | 01:19 | And if I right-click on this f1, you
see it says This Frame, and I can View
| | 01:24 | Frame Source, and there is that document.
| | 01:27 | It says Frame One in it.
| | 01:29 | So let's look at the syntax of these
tags. The frameset tag has a cols attribute or
| | 01:36 | a rows attribute, and then inside
quotation marks it has a specification for
| | 01:42 | how those columns are laid out.
| | 01:44 | In this case, the right column is taking
up 75% of the space, and the left column
| | 01:49 | is taking whatever is left.
| | 01:50 | That asterisk means evenly divide up
whatever is left, so you could have more
| | 01:55 | than one of them, and it
would evenly divide them.
| | 01:58 | So as I change the size of this window,
you notice that the right-hand side
| | 02:04 | continues to take up 75% of
however much space that is.
| | 02:08 | So it has got those two columns: 75%
on the right and whatever is left on the
| | 02:13 | left. And then left to right,
we load up those columns.
| | 02:16 | So the first column is a frame, and it
has a source file (src) of this f1.html,
| | 02:21 | so that's this frame here,
Frame One. That's f1.html.
| | 02:26 | And the second column has a frameset
with the rows, and the rows are 100 pixels
| | 02:32 | and whatever is left.
| | 02:34 | So as I change the height of this
window, you see that that top frame
| | 02:38 | remains the same size.
| | 02:39 | It is always 100 pixels, and whatever
is left is taken up by Frame Three.
| | 02:44 | So we have these files--f2 and f3--and
those are taking up the rows. The first
| | 02:49 | one is the top row and the
second one is the next row down.
| | 02:53 | And then we close our
frameset elements, and that's it.
| | 02:57 | So you might notice one other thing
about this is that there is this horrible-
| | 03:01 | looking border things. And you can
actually use those to drag around these
| | 03:05 | borders, which is a pretty bad idea actually.
| | 03:08 | Let me reload this and make them default again.
| | 03:10 | So mostly I think you're going to want
to get rid of those borders, because they
| | 03:14 | don't serve any useful purpose.
| | 03:16 | They serve a rather nasty non-
useful purpose and they are ugly.
| | 03:20 | So the way to get rid of them is
with the frame border attributes.
| | 03:24 | So here on frameset, I am just
going to say frameborder="0".
| | 03:31 | When I save this and reload it, you
notice that all the frameborders go away.
| | 03:36 | In some older browsers, that won't quite
get rid of all the frameborders; you'll
| | 03:40 | need to also put that same
attribute down here on this other frameset.
| | 03:44 | And so I am going to go ahead and do
that anyway and hit Reload over here.
| | 03:47 | Now we don't have these borders.
| | 03:48 | I can't grab them and change their
size, and they're working exactly as they
| | 03:53 | are supposed to work.
| | 03:54 | It's also worth noting that there is
no CSS equivalent of that frameborder=0.
| | 04:00 | Because this tag is so old and not part
of any recent specification, CSS simply
| | 04:08 | does not have a selector
for selecting a frameset.
| | 04:10 | So the code I've shown you in
this movie is considered obsolete.
| | 04:15 | It still works in modern browsers,
because the browsers all go to great lengths
| | 04:19 | to support legacy code.
| | 04:20 | But this is not standard HTML, and
you should not use this feature in any
| | 04:24 | new code.
| | Collapse this transcript |
| Exploring inline frames using iframe| 00:00 | The modern version of frames is the iframe element.
| | 00:03 | iframe is for more flexible than
framesets, and it can be styled using CSS.
| | 00:08 | Let's make a working copy of
iframe.html, and we will call this iframe-working
| | 00:15 | and open it in the text editor.
| | 00:18 | You notice--we'll scroll down here--
| | 00:21 | it's got a lot of Lorem Ipsum in it,
and you can see when we open this in the
| | 00:25 | browser, that all of our
text wraps around this iframe.
| | 00:28 | So this iframe is actually floating.
| | 00:30 | And this iframe is an entirely
scrollable thing, and that is actually, if we look
| | 00:35 | in the source code here,
| | 00:36 | it's frames f4.html. And if we open
that up in our text editor, go into
| | 00:42 | frames > f4.html, you'll see that frames f4
has or whole bunch of Lorem Ipsum in it.
| | 00:48 | So what's happening here is that is
outer document is the iframe-working.html
| | 00:55 | and inside this little box here is an
entirely scrollable and stylable other
| | 01:02 | document, called f4.html.
| | 01:04 | So the entire thing is this iframe
equals f4.html. It's a container,
| | 01:10 | so I could put something that says
"Your browser is dysfunctional," and that
| | 01:16 | would only shows up were people who have a
browser that doesn't support this iframe standard.
| | 01:21 | So as I reload this, you'll see that
that doesn't show up at all.
| | 01:25 | That's where you would put whatever
content you're going to have for the people
| | 01:29 | that don't support iframe.
| | 01:31 | These days most modern browsers know
exactly what to do with that, so I don't
| | 01:33 | even bother putting
anything in there in anymore.
| | 01:36 | But I think you're supposed to.
| | 01:38 | So our style here, basically, I've got
our iframe with an id selector, frame1,
| | 01:42 | set it to block mode, and have it float
right, give it a width and height, and
| | 01:48 | margins and padding and
border and there you have it.
| | 01:52 | That's really all there is to it.
| | 01:54 | So the iframe element is for more flexible
than framesets, and it can be styled using CSS.
| | 02:00 | It's recommended that you use iframe
for any frames applications that you may
| | 02:04 | have, now and in the future.
| | Collapse this transcript |
| Simulating frames with CSS| 00:00 | This is an example that simulates
the effect of an iframe using CSS.
| | 00:05 | The main functional difference is
that the contents of the frame is no
| | 00:08 | longer in a separate file.
| | 00:10 | Let's make a working copy of CSS frame.html.
| | 00:12 | I'm going to name this with
a -working at the end.
| | 00:16 | And we'll go ahead and open
that up in the text editor.
| | 00:19 | And here you see we've got some
styling up here in this style element,
| | 00:23 | snd down here we have a div that says
id="frame1", and that's what's getting
| | 00:29 | styled up in the CSS.
| | 00:31 | The contents of that frame1 is what we
had in a separate file in the other example.
| | 00:36 | So, all that is in the div, and there
is the end of the div, and now here's our
| | 00:41 | paragraph that gets wrapped around it.
| | 00:43 | This is all just a bunch of Lorem Ipsum.
| | 00:45 | If we open this up in the browser,
you'll see that this looks exactly the same
| | 00:50 | as our iframe example.
| | 00:53 | The one difference is this box is just
a little bit wider because the scrollbar
| | 00:56 | actually seems to add to the width of
the box, whereas the scrollbar is inside
| | 01:01 | the box in the iframe example.
| | 01:03 | If I open up the iframe example here,
see, the box is a little bit narrower,
| | 01:08 | whereas in this one the
box is a little bit wider.
| | 01:11 | That, and the fact that all this
content now needs to be in the same file--it's
| | 01:15 | no longer in a separate file--
those are the only differences here.
| | 01:19 | All the content being in the same file
can be an advantage in some circumstances
| | 01:23 | because it requires less
roundtrips to the server.
| | 01:26 | So, it might be just to shade faster.
And of course if you're getting lots and
| | 01:30 | lots of hits, that can add up.
| | 01:32 | The other difference here is that all
the styling that happened in the other
| | 01:36 | document is now happening here.
| | 01:37 | So, our background color, our font family,
font size, all of that is happening here.
| | 01:42 | The one trick is this overflow property.
| | 01:46 | If I take that out and save this and
then reload the browser here, you'll see
| | 01:51 | that all of that text now flows outside
of the box and the scrollbar goes away.
| | 01:58 | If I come back here and undo and reload
again, you see now our frame has all
| | 02:04 | that in it, and we get the scrollbar.
| | 02:06 | So, that's really all that there is to it.
| | 02:09 | This is a technique whereby you
don't need frames at all, and you can get
| | 02:12 | exactly the same effect as an iframe.
| | 02:15 | So, this example shows that it's
possible to simulate this effect.
| | 02:19 | If you have reason to keep the contents
of the frame in a separate file, you can
| | 02:23 | do so using a server-side
include or you may simply use iframe.
| | Collapse this transcript |
|
|
16. FormsIntroducing forms| 00:00 | The forms interface is
extremely important in HTML.
| | 00:03 | It's how HTML does interactivity.
| | 00:06 | There are quite a few new features in
HTML5, but the fundamental idea has not
| | 00:11 | changed since the first web browsers.
| | 00:12 | You still have text fields,
buttons, and controls.
| | 00:16 | Let's make a working copy of
forms.html, and we are going to call
| | 00:20 | this forms-working.html.
| | 00:21 | I am going to open this in the text editor.
| | 00:24 | There are basically two
ways to use forms in HTML.
| | 00:27 | Traditionally, they were mostly used to
interface with a process on a server using CGI.
| | 00:33 | Today, they are just as often used to
interface with JavaScript running in the client.
| | 00:38 | Most of our examples in this chapter
will be interacting with JavaScript
| | 00:41 | locally, in the browser.
| | 00:43 | This is really for convenience so that
you may follow along with the exercises
| | 00:47 | without requiring a server.
| | 00:49 | Some of the exercises later in the
chapter will use a server, and I provided
| | 00:53 | examples of a simple CGI script in PHP,
Python, and Perl for you to see how that works.
| | 00:59 | You notice up at the top of
this file we use this forms.css.
| | 01:03 | That's some styling for these forms.
| | 01:04 | We will take a look at that in a moment.
| | 01:06 | We also have forms.js, which is the
JavaScript that we will be using throughout
| | 01:11 | most of this chapter in order to look
at the results of our forms. And then we
| | 01:16 | have this symbol form.
| | 01:18 | It has a text field, a password field,
some checkboxes, some radio buttons
| | 01:22 | and a submit button.
| | 01:25 | Then we have a div down here at
the bottom for where the results go.
| | 01:28 | So let's take a look at this in the browser.
| | 01:30 | We will look at this example in
Firefox, but will be using different browsers
| | 01:36 | throughout this chapter.
| | 01:38 | So this is what it looks like in
Firefox, and when I type something in here--and
| | 01:43 | I will type in too in the
password, press the big red button;
| | 01:46 | you can tell it's a big red button
because it's labeled Big Red Button--and you
| | 01:50 | see there are all of our results.
| | 01:52 | Now an important note here: if you are
using a browser that doesn't support the
| | 01:57 | forms validation API, you will get a
little notice at the top here that your
| | 02:00 | browser doesn't support the forms
validation API. And most of these exercises
| | 02:05 | will work just fine;
| | 02:06 | just the validation features won't
work, and we do use those and look at those
| | 02:10 | throughout the chapter.
| | 02:11 | The reason for that is the forms
validation API is really incredibly useful.
| | 02:16 | It will save you a lot of JavaScript
work in your applications, and it soon will
| | 02:20 | be supported on the latest
versions of all the browsers.
| | 02:23 | Right now, the only one that it's not
really working on, the latest version of
| | 02:27 | as of this recording, is Internet Explorer.
| | 02:29 | It is slated to be implemented in
Internet Explorer 10 though, so if you're
| | 02:34 | watching this course after Internet Explorer
10 comes out, then it should work just fine.
| | 02:39 | Just to give me an example,
fortunately, all the browsers here on this Mac
| | 02:43 | support the interface, but I've
got an old version of Firefox.
| | 02:46 | So I am just going to close this
version of Firefox, and I am going to open up
| | 02:49 | this old version of Firefox, so that
you can see what this looks like with a
| | 02:53 | browser that doesn't support this API.
| | 02:55 | So here it is, in an old version of
Firefox, and if I bring up the About, you will
| | 03:01 | see it's Version 1.5.07. And if I just
type some stuff in here--one, two--you
| | 03:07 | see everything works as we expect,
because these are forms elements that have
| | 03:11 | been around since the very beginning of forms.
| | 03:13 | When I press the Big Red Button, you
see I get this red notice, "This platform
| | 03:17 | does not support the HTML5 validation
API," and we still get all of our values.
| | 03:22 | We just won't get red messages
when the validation doesn't work.
| | 03:25 | So if you have a browser that doesn't
support the HTML5 forms validation API,
| | 03:30 | this is what you'll see, and that should
be just fine. And that includes versions
| | 03:34 | of Internet Explorer up to the version 9.
| | 03:36 | So I'm going to close this and just
open it up in Google Chrome so you can see
| | 03:42 | what that looks like. And here is
Google Chrome and if I type in one, two, and
| | 03:47 | press the Big Red Button, you see
that all works exactly as we expect.
| | 03:52 | So here in our HTML, you see at the top
here, we have a div outer and a div form.
| | 03:58 | The outer is actually not
visible on the screen here.
| | 04:02 | It's just there for positioning so
that we can center these two elements, and
| | 04:05 | it contains them also so that when I shrink
it down, they don't go one on top of the other.
| | 04:10 | They stay side to side.
| | 04:12 | Then we have the form, and that's the
one on the left. And then we have the
| | 04:17 | results, and that's the one on the
right. And if we look at the CSS, so our
| | 04:22 | forms.css here, this is mostly
just my reset CSS that I have used
| | 04:26 | throughout this course.
| | 04:27 | It's got a few little changes in it,
and most of that is down here at the bottom.
| | 04:32 | You see outer has a width of 800
pixels and a margin that centers it and
| | 04:37 | positions it five pixels from the top.
And then the form and the results, they
| | 04:42 | both float left, and that allows them to
do this nice little stacking trick where
| | 04:47 | one floats to the left first and then
the next one floats to left right next to
| | 04:51 | it. And it sets its background color.
And then we have just a few other stylings
| | 04:56 | the results we wanted in this
monospace fonts so it comes up looking rational
| | 05:00 | for a programmer, and so we
can see the spacing of things.
| | 05:03 | And that's really all there is to that CSS.
| | 05:07 | Let's take a look at the JavaScript now.
| | 05:08 | This is forms.js, and this is the
JavaScript that we are using throughout this
| | 05:13 | course for most of you exercises.
And like so much of my JavaScript, it really
| | 05:19 | starts at the bottom, and that's
just the way that it works well for me.
| | 05:23 | So window.onload = init, that just means
that it waits for everything to load up
| | 05:28 | in the browser before it calls init,
and then it calls init. And of course it
| | 05:32 | needs these elements to exist before it's going to
do its initialization; that's why it has
| | 05:36 | to wait for the onload event.
| | 05:38 | So it sets up our results and form
elements, and it checks to see if we have
| | 05:42 | the validation API.
| | 05:43 | Checking to see if you have the
validation API is a simple matter of checking
| | 05:48 | to see if you have this validity object
and its type is actually an object, and
| | 05:55 | I'm checking that on just the
first of the form elements on my eForm.
| | 06:00 | Remember, eForm is this object here
which is found by this f1 element id, and
| | 06:07 | that is in our HTML right here.
| | 06:09 | So that's this form element.
| | 06:10 | So it checks for the first element and
checks if it has this validity object and
| | 06:15 | if it does, then we have
the forms validation API.
| | 06:17 | Now, whenever we press this button or
press Enter in the form, it returns the
| | 06:23 | results of this display function, and
the display function is this one here.
| | 06:28 | It clears the output, which will clear this here.
| | 06:31 | You remember, when you first
loaded it, it said Results go here.
| | 06:34 | So we want to clear that, or if we press
the button several times with different
| | 06:38 | values, we want it to clear
and show us our new values.
| | 06:42 | And it checks if you don't have
validation, it puts up that error message. And it
| | 06:45 | resets a global OK flag so that it will
go ahead and validate again, and then it
| | 06:51 | just steps through the form elements.
| | 06:52 | If you don't have validation, it just
displays the output, and if you do, it
| | 06:56 | actually checks the validity,
and it's as simple as that.
| | 06:59 | There is a display value function, which
does different things for radio buttons
| | 07:03 | and checkboxes and things like that,
just so that it gets the intelligible
| | 07:07 | values out of these things.
| | 07:08 | You can look through that if you want
to see how that's done, and here's how
| | 07:11 | we check the validity.
| | 07:13 | We actually just check this valid
property from the validity object, and if it's
| | 07:17 | true then it's valid and if it's not
true, then we display an error message.
| | 07:21 | It's really as simple as that.
| | 07:23 | It's a very simple API.
| | 07:24 | There's a few other things too it,
but that's the simple way to use it, at
| | 07:28 | least for our purposes. And then
these are just our output routines for
| | 07:31 | displaying an output.
| | 07:33 | As an error, it uses this class error,
which turns it red in our CSS and otherwise,
| | 07:38 | it just displays a
paragraph with the output string.
| | 07:40 | So this is a very simple JavaScript,
and it works great for our purposes, so that
| | 07:46 | when we fill in our forms
we get intelligent results.
| | 07:50 | Now while I've got this form up, I just
want to show you a few new attributes we
| | 07:55 | have in the forms API.
| | 07:56 | I am going to switch back to our forms
here, and you'll notice this autofocus.
| | 08:01 | When I load up the form for the first time,
it puts the cursor right there in that text box,
| | 08:06 | so I don't have to run any
JavaScript rigmarole anymore.
| | 08:10 | I just put that attribute in and it
will autofocus right on that element.
| | 08:14 | There is also a required attribute.
| | 08:18 | So if I say required here in my text
form and I save this and reload it in the
| | 08:22 | browser, now this text element is required.
| | 08:25 | If I leave it blank and press the Big
Red Button, you see we get an error.
| | 08:30 | It says, "Please fill out this text field,"
and that's all from the validation API.
| | 08:34 | There's also a lovely new
placeholder attribute, and it looks like this.
| | 08:39 | If I save that and reload, you see we
have this little placeholder now that
| | 08:44 | says your name. And the minute you
start typing, the placeholder goes away and
| | 08:49 | the value gets replaced. And if you just leave
it blank, of course the your name is not used.
| | 08:56 | It's not the same as putting in a value.
| | 08:58 | Again, this is something we had to do
all kinds of rigmarole before in order to
| | 09:03 | put in a default value of some sort or
a placeholder and have JavaScript that
| | 09:08 | would detect the minute you type
something in and take that out and replace it,
| | 09:12 | and it was a whole big rigmarole.
We don't have to do that anymore.
| | 09:15 | We have this lovely placeholder attribute.
| | 09:18 | And finally, there is a readonly attribute.
| | 09:21 | So if I actually put a value in here,
because this doesn't make sense without a value--
| | 09:25 | say value = foo bar baz, and readonly--
| | 09:31 | now when I reload this, you see we have
that value in there, but you can't type
| | 09:36 | anything in it, and yet the value shows up.
| | 09:39 | So this is useful for places where
you might want to have a value that only
| | 09:44 | under some circumstances it becomes
editable, and your JavaScript can switch
| | 09:48 | that flag on and off.
| | 09:50 | Most of the forms interface in HTML
will work with either JavaScript or CGI.
| | 09:54 | In JavaScript, you access the values
of forms elements using the standard
| | 09:58 | document object model interface.
| | 10:00 | You can learn more about JavaScript here
on the lynda.com online trading library
| | 10:05 | in Simon Allardice's excellent
JavaScript Essential Training.
| | 10:10 | CGI stands for the Common Gateway Interface.
| | 10:12 | This is the protocol that forms use to
communicate with a script on a web server.
| | 10:17 | You can learn more about CGI here on
lynda.com online training library in my own
| | 10:22 | CGI Essential Training.
| | Collapse this transcript |
| Using text elements| 00:00 | In HTML5, the number of different types
of text elements for forms has grown.
| | 00:05 | Only a few are supported in all the
browsers, but it's worthwhile to take a
| | 00:09 | look at those we can.
| | 00:11 | Let's make a working copy of
text-elements.html, and I am going to name this
| | 00:15 | text-elements-working.html, and I am
going to open it in my text editor here.
| | 00:21 | And you'll see we have our
style sheet and JavaScript
| | 00:24 | we are using throughout this chapter.
And here we have our forms element, and at
| | 00:29 | the bottom, it's just as it
is in the rest of the chapter.
| | 00:34 | In our form, we have a
number of different elements.
| | 00:37 | So let's go ahead and bring this us up
in the browser, and I am going to start
| | 00:42 | by bringing it up in Chrome so you can
see what all of these are supposed to
| | 00:43 | look like, because it actually
implements all of these. And I am also going to
| | 00:48 | bring it up in Firefox, so you can see
what it looks like there where a lot of
| | 00:53 | these elements are not implemented.
| | 00:56 | Most of these elements are implemented
with the input tag, and the input tag in
| | 01:01 | HTML is overloaded with a lot of
different types of form elements.
| | 01:06 | The default is text, and so if I
actually take this out and save this and just
| | 01:13 | say input name ="text1" autofocus, and
I reload this in my browser, you see I
| | 01:19 | still have that text element.
| | 01:22 | So what's interesting about that fact
is that for one of these elements, like
| | 01:26 | for instance the date element, which is
supported in Chrome, but not in Firefox,
| | 01:32 | is that it simply defaults to a regular text
element, and I can type whatever I want in there.
| | 01:37 | So the default is type="text" and if
you put in a type that is not supported,
| | 01:43 | the standard says you're supposed to
default to text--and that's exactly what
| | 01:47 | every browser I've ever seen does.
| | 01:50 | And so with all of these different
types that are--new, date, color, email,
| | 01:55 | number, range, search--it just defaults to text.
| | 01:59 | So most of these are not supported in
Firefox, so they just come up as text elements.
| | 02:06 | Each of these has a name,
and you can also give it a value.
| | 02:09 | If I say here value="foo",
that gives it a default value.
| | 02:14 | So when I bring it up--I am going to
stick with Chrome here for a while, but it
| | 02:17 | works the same in Firefox--
| | 02:19 | when I reload this, you see it has that
foo value in it. And it still gets the
| | 02:23 | autofocus, because I have the autofocus
attribute here. And that default value,
| | 02:29 | if I press the Return key on my keyboard, it will
go ahead and submit the form of the JavaScript.
| | 02:34 | You see that that value is what
comes up there in the text1 field.
| | 02:37 | So the name is text1, and the
value is whatever you type into it.
| | 02:41 | If I type something else into it here,
you see that that value comes up as what I typed in.
| | 02:46 | So we'll go ahead and take that out.
| | 02:48 | We will look at the password field here.
| | 02:50 | So we have type="password" and
name="password1". And so the difference with a
| | 02:56 | password field is when you type into
it, what you are typing is obscured.
| | 03:00 | And when I press Return, that value
actually gets sent to whatever process it is.
| | 03:05 | If it's JavaScript or if it's CGI, that
value gets sent so that it can process
| | 03:10 | that value and check the password or do
whatever it's going to do with it. Input type="date".
| | 03:14 | Now I've done a few things here.
| | 03:16 | Type="date" has a datepicker and so in
Google Chrome, I can actually--there is
| | 03:22 | the month, so I can select a
different month from the dropdown.
| | 03:25 | It's got this whole datepicker thing;
here's different years.
| | 03:27 | And I select one, and there is February 11, 2015.
| | 03:32 | Notice that it's formatting it according to
the locale in my system setting for my computer,
| | 03:37 | so it will do that.
| | 03:39 | Actually, on my laptop, I've changed
the setting for this so it shows year,
| | 03:43 | month, day because I am a programmer,
and I like to be really specific, and this
| | 03:46 | to me is really vague.
| | 03:48 | If you're in Europe, it will probably
be month, day, year as opposed to day,
| | 03:52 | month, year, how we have here.
| | 03:54 | But on Firefox you will notice that it
just comes out as a regular text field,
| | 03:59 | because Firefox doesn't support that.
| | 04:01 | So this gives me an
opportunity to show you another feature.
| | 04:04 | If I type something in here that is not
a date and I submit it, you notice that
| | 04:09 | I get a little error that says, "Please
match the requested format: YYYY-MM-DD,"
| | 04:13 | and that's because here in the
code, I've put in this pattern.
| | 04:17 | Pattern is a new attribute in HTML5
that allows you to use a regular expression
| | 04:23 | to give it a pattern for what sort of
input is expected, and then the validation
| | 04:28 | API will actually check it against that pattern.
| | 04:31 | And I use the title attribute so that I
have a little tooltip that says this is
| | 04:36 | the format that's expected there.
| | 04:38 | So now if I type in an actual date,
you notice that as soon as that is matching,
| | 04:43 | that the little red outline goes away.
| | 04:45 | If I put in too many then I get the
red outline again, and when I enter that
| | 04:50 | I now get the valid.
| | 04:51 | So it makes the validation
easier is all that that is.
| | 04:54 | That's just an interface to the validation API.
| | 04:57 | Next up is the color element, and so we
have type="color", name="color1", and I
| | 05:03 | gave it a value here for a starting color.
| | 05:05 | And so when I bring this up in Google
Chrome and I reload, you notice that that
| | 05:10 | bluish color, that's the color
that I specified here, 369 in hex.
| | 05:16 | And if I change this and I like this
little reddish color there and now when I
| | 05:21 | submit the form--press the Big Red
Button--you notice that our color is aa1723.
| | 05:26 | That's the color that I
selected from the color picker.
| | 05:29 | And of course on whatever platform
you're testing this on, your color
| | 05:32 | picker will be different.
That's the Mac color picker,
| | 05:35 | so it's just interfacing into the
operating system to get whatever color
| | 05:38 | picker is available there.
| | 05:40 | The email element, this actually
works on both of these platforms.
| | 05:44 | If I type something in here that is not an
email address, I will get a little error.
| | 05:47 | It's just a validation thing.
| | 05:49 | It says, "Please enter a
comma-separated list of email addresses."
| | 05:52 | And you'll notice that I have
here the multiple attribute.
| | 05:56 | If I take that out and I save and I
reload over here and I type in an invalid
| | 06:00 | email address, it will say,
"Please enter an email address."
| | 06:04 | If I try to enter actually a valid
email address, because X is a valid
| | 06:08 | domain--it's just isn't one that actually
exists on the Internet, but it could
| | 06:12 | exist on my local network.
| | 06:13 | I could set up a local DNS
server and make that work.
| | 06:16 | And so that's a valid email
address, and that validates.
| | 06:20 | If I put in here ,y@y,
that's not a valid email address.
| | 06:25 | But if I come back here and put back in
the multiple attribute, now that's accepted.
| | 06:30 | If I reload here and say x@x, y@y, it
now validates. And you notice it even took
| | 06:38 | out the space, and that's making it
easier for my remote process to parse that.
| | 06:43 | Next up is the number type. This has a
number and I gave it min="1" max="5" value="1".
| | 06:51 | And that gives me a little number
chooser here on Google Chrome. And on Firefox
| | 06:56 | it's just a text field, and it doesn't
validate as number, and I can put in Xs
| | 07:00 | here and it validates just fine.
| | 07:02 | That's not implemented in Firefox.
| | 07:04 | And this number chooser, you notice
that it implements my minimum and maximum.
| | 07:07 | It won't let me go below one,
and it won't let me go above 5.
| | 07:11 | Likewise, the range, this is the range
type, and it gives me this range chooser
| | 07:16 | here, and you notice that it's in steps of 10.
| | 07:19 | I have min="0" max="100" step="10" value="20".
| | 07:24 | So it starts out at 20, which is right
about there, and if I wanted to, I could
| | 07:28 | put in some JavaScript over
here that would show the value.
| | 07:32 | And if I change this to all the way maximum,
press the Big Red Button, then I get 100.
| | 07:37 | If I put it down a couple of notches, I'll get 80.
| | 07:40 | If I change this step="1" or take it
out altogether, save that, and reload, now
| | 07:46 | you see it's continuous,
and it doesn't step like that.
| | 07:49 | And if I press the Big Red Button--I
happened to hit a round number there, didn't I?
| | 07:54 | But I can get any number that I want here.
| | 07:56 | That range element is also
not implemented in Firefox.
| | 08:00 | The search element is really just
like a text field, only it's formatted to
| | 08:05 | look like a search box.
| | 08:06 | So if I type something in here,
it's formatted according to whatever the
| | 08:10 | operating system has for a search box widget.
| | 08:13 | It's even got that little X
there for deleting what's there.
| | 08:16 | And that's implemented in Chrome,
and it's not implemented in Firefox at all.
| | 08:21 | The URL element is just like a
textbox, only it validates as a URL.
| | 08:27 | So if I just put in foo bar baz,
it'll say Please enter a URL.
| | 08:31 | So I have to put in a valid URL.
| | 08:35 | I can say this is my website and it
will accept that. Or actually any valid URL--
| | 08:39 | which of course even x:x is a valid URL.
| | 08:43 | And this also is implemented in Firefox.
| | 08:46 | So if I say foo bar baz, this is
easy to implement because it's just
| | 08:51 | a validation routine.
| | 08:52 | And again, x:x. And the HTML
specification even gives an algorithm for
| | 08:57 | validating this stuff,
so it makes it really easy.
| | 09:00 | And finally, text area, this is an
element that's been around since the very
| | 09:04 | beginning, and so of course it's
implemented equally everywhere. foo bar baz,
| | 09:09 | and I can just paste a bunch of those
in, and it goes on and on and on, and I can
| | 09:16 | press the Big Red Button.
I got this big bunch of text there.
| | 09:17 | And that's what the text area is for,
and that works just exactly the same in
| | 09:22 | pretty much any browser.
They are formatted a little differently here.
| | 09:25 | You notice that in Chrome it's got the
same font as the rest of the elements.
| | 09:29 | In Firefox this is an old tradition.
| | 09:32 | These used to always be
formatted as monospace text.
| | 09:35 | And so Firefox still does
that for traditional reasons.
| | 09:38 | You are going to want to style
all of this stuff in real life.
| | 09:42 | So those are the text elements.
| | 09:44 | There are actually a lot more of them,
and not all of them are implemented yet
| | 09:48 | in any of the browsers I've tested,
and some of them only work in a limited
| | 09:51 | number of browsers.
| | 09:53 | So I would consider most of these new
ones to be experimental, with the exception
| | 09:57 | of text, password, and text area.
| | 10:01 | If you need your forms to work well in
a variety of environments, I suggest you
| | 10:04 | test it well or limit yourself to
just the text and password and text area
| | 10:08 | elements and perhaps the email element for now.
| | Collapse this transcript |
| Using checkboxes and radio buttons| 00:00 | Checkboxes and radio buttons are used to
allow a user to select from the set of options.
| | 00:06 | Checkboxes are either on or off; radio
buttons are mutually exclusive controls.
| | 00:11 | Let's take a look at these elements.
| | 00:12 | Make a working copy of checkboxes.html,
and I'm going to name this checkboxes-working.html.
| | 00:20 | Open this in my text editor, and scroll
down here to the form. You'll notice at
| | 00:26 | the top we're using the same forms.css and
forms.js we're using throughout this chapter.
| | 00:31 | And here's our form.
| | 00:34 | You'll notice we have input again, the
same input tag getting overloaded again.
| | 00:39 | This time it's type=
"checkbox" and type= "radio".
| | 00:42 | Let's go ahead and open this in a
browser so you can see what it looks like.
| | 00:45 | I'm going to open this in Firefox.
| | 00:47 | This feature is been around since the
very beginning of HTML forms, and so it
| | 00:52 | works pretty much the same in every browser.
| | 00:55 | And if I click the Big Red Button you
see my checkboxes on, off, on, and radio
| | 01:00 | button is selected number two of those.
| | 01:03 | So let's take a look at the HTML for this.
| | 01:04 | You notice that my checkbox is very
simple--input type="checkbox", name= and
| | 01:11 | then the name for the
individual checkbox option.
| | 01:14 | There is an optional checked
attribute, which means it a little default
| | 01:18 | to its checked state.
You see I've got that on two of them.
| | 01:21 | So if we look in the browser here, we see
two of these are checked by default, and
| | 01:25 | they show up as on in the results.
| | 01:27 | And one of them has auto focus, and so
you notice when I load this that that one
| | 01:33 | is a little bit highlighted.
And I don't even need to click it;
| | 01:37 | I can just press the spacebar on my
keyboard and press the Tab key to navigate
| | 01:42 | between them and press Enter to
submit, and there we have that.
| | 01:47 | The radio buttons are a little bit different.
| | 01:50 | You'll notice that it's still
the input tag, type="radio".
| | 01:54 | You notice that all the three of these
have the same name. That's how they get
| | 01:58 | grouped together, because
they're mutually exclusive.
| | 02:00 | If I press one of them the other
one's get unpressed. Only one of them in a
| | 02:05 | group can be pressed at a time, and
the way they're grouped is by having the
| | 02:09 | same name. And then the each have
different values, so that we can tell in our
| | 02:14 | results which one is the one that got pressed.
| | 02:17 | And you notice that I can use the same
checked attribute to say which one is the
| | 02:21 | default. When I reload this page,
it will always go back to the second one.
| | 02:25 | So that's checkboxes and radio buttons.
| | 02:28 | Checkboxes and radio buttons are
common features and have been around since the
| | 02:32 | beginning of the forms interface.
| | 02:33 | This feature is supported by
all browsers that support forms.
| | Collapse this transcript |
| Creating selection lists and dropdown lists| 00:00 | Select lists are another common
feature for selecting from a list of options.
| | 00:05 | Let's make a working copy of
select.html, and we'll see how this works.
| | 00:09 | I'll rename this to select-working.html
and open it up my text editor.
| | 00:16 | So you notice up here at the top we
are using the same forms.css and forms.js
| | 00:21 | that we've been using throughout this chapter.
| | 00:24 | And here we have our actual form, and
you'll notice that this select element is
| | 00:29 | actually implemented with a select tag.
| | 00:31 | It doesn't overload the input tag like so
many of the other elements in HTML forms do.
| | 00:36 | The select tag is a container, and it
contains option tags, and these option
| | 00:41 | tags are also containers.
| | 00:43 | You notice they have end tags, and they
have content, and that content is the text
| | 00:48 | label for the dropdown list.
| | 00:50 | Let's take a look at the dropdown list.
| | 00:51 | We are going to open this in a
browser. And in this case, I'm going to use
| | 00:56 | the Firefox browser.
| | 00:57 | This particular element works
in all the different browsers.
| | 01:00 | And here's this text. It says "Select a Cat,"
and you'll notice that the first element
| | 01:05 | in my list says "Select a Cat." And it has
the selected attribute, which means that
| | 01:11 | it will always be selected upon
startup, and it also says disabled, which means
| | 01:15 | that you cannot actually select it.
| | 01:17 | So you will notice that as I move my
cursor here, I can't get back to Select a Cat.
| | 01:23 | I have to select one of the other
cats, and that's because it says disabled.
| | 01:28 | And you notice that each of these
cats--these are all fictional cats from
| | 01:32 | literature and other sources--
| | 01:34 | and you'll notice that they have the
name of the cat inside the content of the
| | 01:39 | option and then a short name as the value.
| | 01:42 | So when I select one of these and I hit
the Big Red Button, you notice that the
| | 01:46 | value comes up just saying hat.
| | 01:48 | So The Cat in the Hat, his value is just hat.
| | 01:52 | Now if I delete The Cat in the Hat
text from the option, then when I reload
| | 01:58 | this, you will notice that it
comes up with an empty spot there.
| | 02:02 | In older browsers, it would actually
use the short name in the selection list.
| | 02:07 | That's not always the case though, so
you want to make sure that you always have
| | 02:11 | some content here for your selection list.
| | 02:14 | And there it's back,
and it says The Cat in the Hat.
| | 02:18 | There are two distinct ways
that this list can be formatted.
| | 02:21 | There is the dropdown list like this
that we are all familiar with, and if I put
| | 02:25 | in a size here, if I say size="5" and
save this and reload it in the browser,
| | 02:30 | now it actually gets formatted as a
scrolling list instead of a dropdown list.
| | 02:36 | And I can still select
anything I want to from the list.
| | 02:41 | There's also a multiple attribute,
which will allow me to select multiple
| | 02:46 | items from the list.
| | 02:47 | If I put in that multiple attribute
and I go ahead and reload this,
| | 02:51 | now I can--on my Mac I am holding
down the Command key; on a PC or another
| | 02:56 | platform you usually hold down the Ctrl
key--and you can select multiple items.
| | 03:01 | When I press the Big Red
Button here, you see I get select
| | 03:03 | cheshire, bigglesworth, cat.
| | 03:06 | It's actually sending to the
JavaScript an array with multiple values.
| | 03:11 | And with CGI, it will send complete separate
elements with a name value pair with same name.
| | 03:18 | One other interesting feature of the
multiple is I can take out this size now
| | 03:22 | and it will always default to the
scrolling list, and it'll default to a size of four.
| | 03:28 | So, because I have multiple selected,
multiple just doesn't work very well with
| | 03:33 | the dropdown interface.
| | 03:35 | And when you're using the scrolling
list, you probably most of the time, are
| | 03:39 | not going to want this
disabled selected item at the top.
| | 03:42 | So I will go ahead and delete that
for now, and we can reload this, and we
| | 03:45 | see that that's gone.
| | 03:47 | One more feature that you need to
know about here: when your lists get very
| | 03:51 | long, sometimes you are going to want to
segment them, and so there's an optgroup
| | 03:54 | element which is useful for
that, and it looks like this.
| | 03:58 | I say <optgroup label="Literature" because
these are cats from literature, this first group.
| | 04:04 | And then down at the end of that
section, I close the optgroup, and now all of
| | 04:09 | these options inside of that
optgroup container are in a section.
| | 04:13 | So I might want to have another section
for the cats from film and another one
| | 04:18 | for the cats from television and
another one for cats from comics.
| | 04:22 | I would like to do a little bit of formatting.
| | 04:25 | Even when I am doing something that I
think is going to be temporary, I have gotten
| | 04:28 | to the place where I just format it
anyway, because now and then these things
| | 04:31 | end up being permanent and I come back
and it's formatted all wacky and it's
| | 04:35 | just not that hard to do.
| | 04:38 | So I will go ahead and I will save
this and I'll bring this up in the browser,
| | 04:40 | and you notice that our cats are now in
groups: Literature, Film, Television and Comics.
| | 04:47 | If the size were bigger,
say size="6", save that and reload, and now that's
| | 04:54 | starting to look really good.
| | 04:55 | It also looks good in the dropdown
version. Save that and reload and we can see
| | 05:00 | that we have all of our cats
segmented in our optgroups.
| | 05:05 | So the select list is another feature
that's been around since the beginning of
| | 05:08 | the HTML forms interface.
| | 05:09 | This feature is supported by
all browsers that support forms.
| | Collapse this transcript |
| Submit and button elements| 00:00 | Form buttons are used to initiate an action.
| | 00:03 | Let's make a working copy of
buttons.html here from your Chap16 folder in
| | 00:09 | the exercise files.
| | 00:11 | I am going to rename that to buttons-working.
| | 00:13 | I am going to open that in the text
editor, and I am also going to go ahead and
| | 00:18 | open that in the browser here.
I am going to use Firefox for this.
| | 00:21 | This works exactly the same in any browser.
| | 00:24 | You notice here, in our HTML, we're
loading the same forms.css and forms.js we've
| | 00:30 | been using throughout this chapter.
| | 00:33 | And here's our form, and you will notice
a couple of things about our form that
| | 00:36 | are a little bit different.
| | 00:38 | First of all, it has this action
attribute, and the action attribute has the URL
| | 00:42 | of a script on one of my servers.
t.bw.org is one of my servers.
| | 00:47 | That's my test server,
and it's password-protected.
| | 00:50 | You will not be able to use this resource
in your working with the exercise files.
| | 00:55 | So what I've done here I've included
three different versions of this script--
| | 00:58 | one in PHP, one in Perl, and one in
Python--and the Python one also has this
| | 01:03 | little bwCGI library that it requires.
| | 01:05 | So I've included all of that in the
exercise files, so you should be able to
| | 01:09 | load this up on your own server.
| | 01:12 | And just about every server available is
going to support at least one of those languages;
| | 01:16 | actually, it will mostly
support all of those languages.
| | 01:20 | Although some of them might be using
an older version of Python, and this
| | 01:21 | one uses Python 3, but it's
really the same script in all of these different languages.
| | 01:27 | If you don't have a server available,
you can load one up on your desktop, and
| | 01:31 | there's an excellent course on
lynda.com called Installing Apache, MySQL, and
| | 01:35 | PHP that will show you how to install
one of these packages like XAMPP or MAMP
| | 01:40 | or one of those on your desktop.
| | 01:42 | I personally prefer the XAMPP one, X-A-M-P-P,
but any of those will work for this purpose.
| | 01:47 | So that allow you to test this, but
actually, if you're watching this part of
| | 01:51 | this course, you are probably
implementing forms in some way, and you probably
| | 01:56 | already have a server or some test
environment for testing CGI, and you can use
| | 02:01 | that with one of these scripts that
I provided to follow along with this
| | 02:04 | particular exercise.
| | 02:06 | So in the action attribute is where
you put the URL for whatever the script
| | 02:10 | resource is; in this case, it's
the cgi-test.php script on my server.
| | 02:16 | You will notice also that our
onsubmit attribute has changed.
| | 02:20 | We're now returning
submitDisplay instead of just display.
| | 02:23 | I just want to show you this in
the script here so you can see.
| | 02:27 | I am going to load up our forms.js
and scroll down here to the bottom here.
| | 02:31 | And you see submitDisplay, it actually
calls display, but then it returns this
| | 02:36 | flag, whether or not the validation happened.
| | 02:39 | If we look at what happens here in our forms,
both of these are flagged as being required.
| | 02:45 | So if I press the Big Red Button, I get
errors that say to Please fill out this field.
| | 02:49 | But if I fill them in, it will
actually call the CGI script.
| | 02:54 | It actually submits to my server.
| | 02:56 | So, what this does, if the JavaScript
returns false, it does not go ahead and
| | 03:02 | submit the script to the action URL;
and if it returns true, then it does.
| | 03:08 | And so our JavaScript throughout the
rest of the course is just always returning
| | 03:12 | false because there isn't any
external resource to be called.
| | 03:15 | And in this case it's actually
returning the actual results of the validation,
| | 03:20 | so that it knows whether or
not to submit it to the script.
| | 03:22 | So that's actually something that's
good for you to know when you're writing
| | 03:25 | your own JavaScripts so that you
understand how to control whether or not it
| | 03:29 | gets submitted to the external resource or not.
| | 03:32 | One other thing that you'll notice
here is that the method="post", and when
| | 03:36 | method="post" all of these variables
are submitted to the server in a way that
| | 03:41 | is not immediately
visible to you as the developer.
| | 03:44 | They're sent as the body of
the request behind the scenes.
| | 03:48 | If we change this to method="get"--and
those are the two choices here for method--
| | 03:53 | when it submits this resource--I am
going to go ahead and I am going to
| | 03:58 | reload this by putting my cursor up
on the Location bar rather than just
| | 04:01 | hitting the Reload button--
| | 04:02 | when you reload by putting your cursor
on the Location bar and pressing the
| | 04:06 | Enter key on your keyboard,
it actually resets the form.
| | 04:10 | If I just reload by pressing this
button, it will leave values here.
| | 04:14 | I am going to go ahead and put the values
back in, foo bar, and press the Big Red Button.
| | 04:19 | And now you'll notice that all of those
variables--text1, password1, submit1--are
| | 04:24 | now passed on the URL, and so that's
these text1, password1, submit1. Those are
| | 04:30 | all now passed on the URL
because we're in get mode.
| | 04:33 | Sometimes that can be useful for testing;
sometimes that's useful if you want to
| | 04:38 | actually allow your users to bookmark
a certain position or a certain result,
| | 04:43 | like a search engine result.
| | 04:45 | You notice that search engines typically
use the get mode. Other times it's just
| | 04:49 | long and distracting, and you run the
danger of somebody bookmarking something
| | 04:53 | that you might not want them to.
| | 04:55 | So you need to be aware
of the distinction there.
| | 04:57 | This is get mode, and this is post mode.
| | 05:00 | Reload exercise again, and foo bar,
press the Big Red Button, and this is post
| | 05:06 | mode, where all of that does
not show up on the URL bar.
| | 05:09 | I am going to make this a little bit
bigger here so we can see these values.
| | 05:13 | Most of this stuff is things that
you're not necessarily concerned about. These
| | 05:17 | are useful for debugging something.
| | 05:20 | You notice we have environment variables.
| | 05:22 | But here, these are the CGI values.
| | 05:24 | This is the stuff that's
the result of your form.
| | 05:26 | You notice that my form has
three elements and they have names:
| | 05:29 | text1, password1, and submit1. And so
these are getting sent to the script,
| | 05:35 | and the script is returning the name and
the value. Tthese are called name-value pairs.
| | 05:40 | So this is a really useful script for
debugging your CGI and how your forms
| | 05:45 | interact with the server.
| | 05:46 | So I recommend that you keep a copy of this.
| | 05:47 | This is the PHP version, and I am
just going to show you the other ones.
| | 05:51 | Here is the pl version, go ahead and reload,
and submit again, and here's the pl version.
| | 05:59 | You see that says cgi-test.pl in the
URL bar and it says pl version here.
| | 06:05 | You notice that this one is using Perl,
and it does exactly the same thing, and
| | 06:10 | the same with the Python version, show
you that. And we'll go back and reload
| | 06:18 | and enter data, and here's the Python version.
| | 06:19 | You see it says py up there in the
URL bar. and I am going to make this a
| | 06:24 | little bigger for you.
| | 06:26 | And we can see, it has exactly the
same results, only here it says Python
| | 06:30 | version instead of Perl or PHP.
| | 06:32 | So, all these scripts are available
for you for your testing purposes.
| | 06:36 | Now, I just want to show you a
couple of other things about the
| | 06:39 | buttons themselves.
| | 06:40 | HTML also provides a Reset button, and
I'm just doing this so that I can make a
| | 06:46 | quick copy of this line.
| | 06:47 | I'm going to call this one Reset and
its value is going to be Reset Button, and
| | 06:52 | it doesn't have any onclick, and
I am going to name this reset1.
| | 06:57 | When I save this and reload it in the
browser--come up here and do the full
| | 07:01 | reload--you notice we now have a
Big Red Button and a Reset Button.
| | 07:04 | So if I type in some values here and I
hit the Reset Button, it clears my form.
| | 07:10 | And because these are both required
values, it's also highlighting them in red.
| | 07:14 | But this is a button for clearing the
form, and this has been part of HTML since
| | 07:19 | the very beginning of forms.
| | 07:20 | And for the most part, the only
purpose it serves is to annoy people.
| | 07:24 | It resets the form to its original state,
which is often unnecessary, and it just
| | 07:29 | tends to annoy users who press it by accident.
| | 07:31 | There's usually other better
ways to allow somebody to go back.
| | 07:34 | In fact, usually if you have a
multipage form, you have a Go Back button.
| | 07:38 | And if you have a single page form,
you don't really necessarily need a Reset Button.
| | 07:42 | I am telling you about it because
it's there and you're going to see it
| | 07:45 | sometimes, you're going to want to
know how it works, but for most part, I'm
| | 07:48 | really not recommending that you use it.
| | 07:51 | The one other type of button I want to
show you is the one that's just called
| | 07:54 | Button and it's not a Submit button.
| | 07:57 | So I am just going to change the type of
this to button and reload this page again.
| | 08:02 | And when I type in my form and press
the button, you notice that even though I
| | 08:08 | still have this submitDisplay and I
haven't changed anything else here, it does
| | 08:12 | not submit the form to the
server in the background.
| | 08:16 | This is a button that just acts as a button,
and its only purpose is to call JavaScript.
| | 08:20 | And so in this case, I am calling this
submitDisplay, and so it's doing its job,
| | 08:26 | but it's not doing anything else.
| | 08:27 | It's not actually
submitting the form to the server.
| | 08:30 | So this is commonly used in JavaScrip-
only applications, so it's something that
| | 08:34 | you also need to know about.
| | 08:37 | Forms buttons are used to initiate action.
| | 08:39 | Of course, you can also initiate
action using DOM events, but the button user
| | 08:43 | interface is intuitive and
familiar, and should not be overlooked.
| | Collapse this transcript |
| Using an image as a submit button| 00:00 | Most operating systems have good-
looking buttons, and they've spent a lot of
| | 00:04 | time and resources to make them look
good, but sometimes they just don't fit in
| | 00:08 | with the design of your website.
| | 00:10 | So let's make a working copy of buttons.html,
and we'll see how you can use your
| | 00:15 | own images for your buttons in your forms.
Change this to buttons-working.html.
| | 00:21 | I'm going to open it in my text editor.
And I'm going to go ahead and open this
| | 00:24 | in the browser as well, and there it is.
| | 00:27 | You notice we're using the same
forms.css and forms.js we're using
| | 00:31 | throughout this chapter.
| | 00:33 | And here in our form, I'm just going to
take out this action because we don't
| | 00:35 | actually need the server for this.
And that means I'm going to change this to
| | 00:41 | return display, and I'm going to change
this to return display. And I'm going to
| | 00:45 | save this and go ahead and reload it
in the browser and fill in the form and
| | 00:50 | press the Big Red Button, and there we
have a result there, and it's not going
| | 00:54 | out to the test server at all.
| | 00:56 | So you notice that the Big Red Button here,
| | 00:58 | you can tell it's a big red button
because it says Big Red Button, but perhaps
| | 01:02 | you would like it to
actually look like a big red button.
| | 01:05 | So here's how we do that.
| | 01:07 | Here is the input tag that has our
submit button in it, and I'm going to change
| | 01:12 | this submit, type= "submit" to type= "image".
| | 01:16 | I'm going to give it a location with
the source attribute, src=, and I'm going
| | 01:20 | to move that down to the
other line to make it readable.
| | 01:25 | Let's say src= "images/brb.png".
| | 01:30 | So that's a relative URL that's on the
same resource as the html file itself.
| | 01:36 | And if we look in the finder here, we
see our images directory, and in there we
| | 01:40 | have brb.png, and that's what
we've put here in our source.
| | 01:45 | And so let's go ahead and
look at this in a browser.
| | 01:48 | We'll come back into the browser here
and press Reload and now our Big Red
| | 01:52 | Button actually looks like a big red button.
| | 01:55 | And I'm going to put in a password
because it won't like it if I don't do that.
| | 01:59 | And I'm going to press the Big
Red Button and there is our results.
| | 02:03 | So that was pretty easy, huh?
| | 02:04 | That ought to make the designers happy.
| | 02:06 | So using a graphic for a button can be
a great way to make your forms fit in
| | 02:10 | with the design of your site, and as
you can see, it's pretty easy to do.
| | Collapse this transcript |
| Keeping context with the hidden element| 00:00 | One of the main problems with the way
we bpages, work and indeed a problem with
| | 00:04 | the HTTP protocol, is that it's stateless.
| | 00:08 | Every time you send a form response
to a server it's a completely new
| | 00:11 | connection and the server has no
indication of the context of your session.
| | 00:15 | There is typically no identifying
information in the connection to indicate that
| | 00:19 | it's related to another recent connection.
| | 00:22 | To make matters even worse, there
could be a number of users using different
| | 00:26 | sessions on the same resource, all from
the same IP address or a proxy server.
| | 00:31 | Of course, this is why HTTP cookies
were invented, but for many uses there's
| | 00:36 | a simpler solution.
| | 00:37 | HTML form supports an invisible element
called hidden, sometimes called hidden fields.
| | 00:43 | Let's see how this works.
| | 00:44 | I am going to make a working copy of
forms.html and we are going to rename this
| | 00:49 | to forms-working.html.
| | 00:51 | I am going to open this in the text editor here.
| | 00:54 | You'll notice it's using the same
forms.css and forms.js that we've
| | 00:58 | been using throughout this chapter.
And I'm going to go ahead and open this in
| | 01:03 | our browser as well, and
we'll open this with Firefox.
| | 01:06 | Here's our little form, and you notice
that it has a text field, a password
| | 01:11 | field, some checkboxes,
and a set of radio buttons.
| | 01:15 | And when I fill it out and press the
Big Red Button, you'll notice that we get
| | 01:20 | all of those values.
| | 01:21 | Now we can add to this, and I'm just
going to put it down here, and it's not going
| | 01:26 | to go in a paragraph or anything
because it doesn't actually display.
| | 01:28 | We can put in some hidden elements.
| | 01:29 | And these are constructed, again, with
input. In this case, it's type="hidden," and
| | 01:35 | we can give it a name.
| | 01:37 | Let's call this one userid and a
value="12345," and I'm just going to copy
| | 01:44 | this, give it a few more here. Let's see. We'll have
a page and an action and a color, blue, right?
| | 01:54 | Now when I save this and come back over
here to our browser--I'm going to reload
| | 01:59 | and I'm just going to
press the Big Red Button here--
| | 02:02 | you'll notice that these hidden fields, we
actually get these named/value pairs, and
| | 02:06 | that works the same obviously when you
submit it to a CGI script on a server.
| | 02:10 | And so using these hidden fields,
you could keep track of a session.
| | 02:15 | You can keep track of userid. And the
other great thing about them as opposed to
| | 02:19 | the cookies, is that these are entirely
not persistent, so when this session is
| | 02:25 | done, these are gone and
nobody is keeping track of anybody.
| | 02:29 | Of course, if you want to on the
other end, you can keep a database.
| | 02:33 | You can have a cookie for your userid.
| | 02:35 | I mean you can use a combination of
technologies, but these are a beautiful
| | 02:38 | way of just keeping context of a session
between pages in a CGI scripting application.
| | 02:46 | So, hidden fields are great way to keep
context in this session. Unlike cookies,
| | 02:50 | they can be coded right in your
HTML and they're not persistent.
| | 02:53 | They can be generated by a script, and
they work really well for keeping track
| | 02:57 | of CGI sessions.
| | Collapse this transcript |
| Setting tab order| 00:00 | As you use an HTML form, pressing the
Tab key on your keyboard will typically
| | 00:05 | take you from one field to the next.
| | 00:07 | Let's make a working copy of forms.html,
and we'll take a look at this effect.
| | 00:12 | I'll rename the copy to forms-working.html,
and I am going to open that in my
| | 00:19 | text editor. And you'll notice here up
at the top, we have the forms.css, the
| | 00:23 | forms.js, and here we have our actual form.
| | 00:27 | I'm going to go ahead and take a
bunch of this out and just make a bunch of
| | 00:31 | text fields, because that's an easier
way to demonstrate this: text1, text2,
| | 00:35 | text3, text4. I am going to name them
over here Text 1, 2, 3, 4. And we don't
| | 00:47 | need autofocus on most of these. Save that,
and we'll go ahead and load this up in a browser.
| | 00:52 | Use Firefox for this,
and there is our four text fields.
| | 00:56 | And you'll see when I press the Tab
key, there, Tab, Tab, and I can press
| | 01:02 | Shift+Tab to go backwards,
Shift+Tab, Shift+Tab, Shift+Tab.
| | 01:07 | Usually this is exactly
the behavior that you want.
| | 01:10 | The tab order is exactly the same as the
order the elements are entered in the script.
| | 01:14 | This can be changed, however, using the
tab index attribute. So if I come along
| | 01:20 | here and I say tabindex--and I'm just going
to do a little copy and paste here and
| | 01:26 | change this to 1, 2, 3, 4, in that
order, and I'll save that and reload this
| | 01:33 | in the browser--and now you'll notice when I
press Tab and press Tab again and Tab again,
| | 01:39 | if I press Tab again I get to the button.
| | 01:42 | When I press Shift+Tab it
goes back in that same new order.
| | 01:46 | So as you can see, for the most part, this
is not necessarily a good idea, but for
| | 01:50 | those rare occasions where it makes
sense to change the tab order of the
| | 01:53 | elements on the page the
tabindex attribute does the job nicely.
| | 01:58 | Be careful, however; users tend to
expect the Tab key to take them to the next
| | 02:02 | element on the page, so
changing this can be disconcerting.
| | Collapse this transcript |
| Preloading an autocomplete list using the datalist feature| 00:00 | Most browsers support some form of
autocomplete for fields that you enter on a page.
| | 00:06 | Let's take a working copy of
dataset.html, and I am going to rename that to
| | 00:10 | dataset-working, open that in my text
editor, and we'll go ahead and open this in
| | 00:16 | the browser as well.
| | 00:18 | Open Firefox for this, and you'll
notice I am just going to press the down
| | 00:22 | arrow here in this Text 1 field, and
you see I've already got a couple of
| | 00:28 | different things in this in the past.
And there they are, in my autocomplete
| | 00:31 | list. aAd so if I just press the O
letter, you see now I get the first one of
| | 00:36 | them, and I can just select
that and it will fill it in for me.
| | 00:38 | So if I type a few different things in
here--I'll just type a three here and
| | 00:42 | I'll type a four here and a five here
and a seven here--and if I go back up here
| | 00:49 | and type in something else--nine, foo,
baz, blah, blah--now we've got a few
| | 00:57 | different things in here and I am going
to put my cursor up here on the URL Bar
| | 01:01 | and press Enter, and that
resets and reloads the whole page.
| | 01:04 | Now when I press my down arrow there,
I get a number of different options, and
| | 01:08 | when I press my down arrow here, I get a
number of different options on each of these.
| | 01:13 | So that's called auto-complete.
Most browsers have some form of that available.
| | 01:16 | If I come back in here to my HTML and
in my form, I can come in here and I can
| | 01:23 | say, for the entire form
actually, autocomplete="off".
| | 01:26 | If I save that and come over and reload,
| | 01:28 | now you will notice I am pressing my down
arrow and autocomplete is not on for any of these.
| | 01:34 | On the other hand, I can do this just
for one element if I want to. Let me do it
| | 01:39 | just for the first one, save that and
reload, and now you notice there is no
| | 01:44 | autocomplete on the first one.
I am pressing the down arrow.
| | 01:46 | If I go to the second one, I do
have autocomplete, and the third one, I
| | 01:50 | have autocomplete, just the first one that
I don't. So I can do this for the whole form.
| | 01:55 | I can do it just for a particular element.
| | 01:57 | I can turn it off for the whole form
if I want to, and I can turn it on for a
| | 02:01 | particular element if I want to.
| | 02:04 | So I will just turn it on for the
second one, and it's off for everything else.
| | 02:07 | I reload, it's off there.
It's on here and it's off there and it's off there.
| | 02:13 | It's also possible to pre-fill your
own list of autocomplete options using
| | 02:18 | HTML5's new datalist feature.
| | 02:20 | So you'll see I am taking out all of
those autolist attributes, and you see down
| | 02:25 | here I have this datalist, id="cats,"
and it has a bunch of options. And if I
| | 02:31 | come up here in my first field or in
any of my fields actually, I am going to
| | 02:35 | say, list="cats" and cats is the
id of the list that I want to use.
| | 02:43 | So I save this and come back over to my
browser, and I am going to do the whole
| | 02:48 | reset thing by putting my cursor in
the URL bar and press Enter. And now if I
| | 02:53 | press by down arrow, you will notice
that I have my autocomplete options up
| | 02:58 | there at the top, but I also have these
other options down here, which are the
| | 03:01 | ones from my datalist.
| | 03:03 | And if I just start typing, you see it
gives me some choices, and there they are.
| | 03:09 | You notice that one of these options has
a value inside the option, its contents
| | 03:14 | in the option container, and I
just want to talk about this briefly.
| | 03:19 | This isn't a feature that has been
implemented very much, but I've seen it in
| | 03:23 | a few places and some of them
actually do this. And I think it's a bad idea,
| | 03:27 | for a couple of reasons.
| | 03:28 | If I erase this and I come down here,
let's just choose the one that says The
| | 03:32 | Cat in the Hat, you will notice that
the value that gets completed is the value
| | 03:38 | here, Hat, not the whole text, Cat in the Hat.
| | 03:42 | And if I look at this in Chrome,
you will see it gets implemented slightly
| | 03:46 | differently. Press my down arrow there
and you notice that it says hat on the
| | 03:50 | left and it has Cat in the Hat
a little bit lighter text.
| | 03:53 | So at least it shows you
that that's what's going on.
| | 03:56 | But generally, it's a confusing option.
| | 03:59 | The other problem with this is if you
open this page in a browser that does not
| | 04:04 | support the autocomplete feature--so I
am going to close Firefox here and I am
| | 04:07 | going to open it in an old version of
Firefox that I have on this computer--
| | 04:12 | you'll notice that that Cat in the Hat
text shows up at the bottom of my div.
| | 04:17 | And that's because it doesn't know
what to do with any of this, and so it's
| | 04:22 | just going to display any text that's inside of
an element that it doesn't know what to do with.
| | 04:27 | So I strongly suggest that you do not
use that feature; just put your value in
| | 04:32 | the value and leave your element empty,
and be sure to have the closing option.
| | 04:37 | This is actually in this context.
It's optional and yet the page doesn't
| | 04:41 | validate properly without it.
| | 04:43 | So it doesn't hurt.
| | 04:44 | It doesn't cost a lot to just type that,
and most of the time we are going to be
| | 04:47 | copying and pasting anyway.
| | 04:49 | So just have that closing option.
| | 04:50 | So the way this works is you have a
datalist element and it's a container and it
| | 04:54 | contains options just like select does,
and you want to put your autocomplete in
| | 05:01 | your value attribute in each of the options.
| | 05:05 | The id here corresponds with how you
select it in your text field, list="cats",
| | 05:11 | id="cats" and there you
have it, and it works great.
| | 05:15 | So the datalist feature is useful
for preloading the autocomplete list
| | 05:19 | for fields in a form.
| | 05:20 | This feature currently works in all
the major browsers except Microsoft
| | 05:24 | Internet Explorer.
| | Collapse this transcript |
| Displaying results with output| 00:00 | The new output element is used for
displaying the results of a calculation.
| | 00:04 | Let's take a look at this.
| | 00:06 | I'll make a working copy of output.html,
and I'm just going to rename this to
| | 00:10 | output-working.html. I'll open
this in the text editor.
| | 00:15 | You'll notice this one uses the
forms.css, but it is not using the forms.js;
| | 00:20 | instead it has its own
little JavaScript in here, and we'll look
| | 00:24 | at that in a minute.
| | 00:26 | We have a little form here with a
couple of number fields. And again, in most
| | 00:32 | browsers, that number field will just
show up as a text field, and we're going to
| | 00:36 | be using Firefo. That works that way.
| | 00:39 | We have a little div for our results,
and it just has these result fields in it.
| | 00:45 | And you'll notice that it has an
output element for each of these results.
| | 00:51 | So let's go ahead and load this in a
browser. I'll open this with Firefox, and we have
| | 00:56 | our couple of little number fields here.
| | 00:59 | And I'm just going to put in a number,
and you'll notice that it's immediately
| | 01:02 | starting to calculate.
And as I type, it's calculating.
| | 01:08 | And this is because we're using
this oninput event here in the form.
| | 01:12 | Now, it's worth noting at this point
that oninput, as well as the output element,
| | 01:19 | are not supported yet in the current
versions of Microsoft Internet Explorer,
| | 01:23 | which is IE9 and before.
| | 01:26 | It is implemented in IE10,
| | 01:28 | so if you have IE10 by the time
you're seeing this, it ought to work.
| | 01:31 | It's currently implemented in all the
other browsers that I have tested, and
| | 01:36 | it's this oninput event that allows
us to just type and have the results
| | 01:41 | immediately show up.
| | 01:42 | And so it's calling calc, and calc is
this little function here. Very simple.
| | 01:48 | It simply gets the value of a and b and
it does a little math for sum, product,
| | 01:53 | diff, quotient, and remainder.
| | 01:55 | And it loads the values of those, and
those are these output elements, so you
| | 02:00 | have ids sum, diff, product,
quotient, and remainder.
| | 02:03 | The for attribute associates it with
these other IDs--a and b--so that the browser
| | 02:10 | knows that these are associated.
| | 02:13 | Now when I look at how this is
implemented, there is a lot of things about it
| | 02:17 | that don't quite make sense to me.
| | 02:19 | So either it will continue to morph and
evolve and change as it gets implemented
| | 02:24 | or it won't. For one thing, I found that
it's not restricted to numeric output, and
| | 02:29 | yet the spec says that it is
used for the output of calculations.
| | 02:32 | And I'm not really seeing the
value of this for attribute.
| | 02:37 | It doesn't seem to do anything, at
least not in the ways that I've seen it
| | 02:41 | demonstrated on the Internet and I
haven't seen a lot of demonstrations of it.
| | 02:45 | So this is a new element. The implementations
I've seen don't really limit it to numeric output.
| | 02:50 | It looks like it could be convenient
for a lot of different uses, but I hate
| | 02:54 | to recommend that as we really don't know
what the browsers are going to do with it.
| | 02:56 | At this point, I'm considering it
semantically tied to the results of
| | 03:00 | calculations, but we'll see
where it goes in the future.
| | Collapse this transcript |
|
|
17. A Case StudyTouring a complete site| 00:00 | In this chapter, I'll present a small
website that uses many of the techniques
| | 00:04 | we've covered in this course.
| | 00:06 | In this movie I'll show you around the
website. In the rest of the chapter I'll
| | 00:09 | show you the HTML and the
CSS that I used to create it.
| | 00:13 | You'll find the website here in your
Chap17 folder in your exercise files, and
| | 00:19 | it starts with rps.html,
and that's this file here.
| | 00:23 | I've opened it in Chrome because Chrome
has the most support for the most features.
| | 00:27 | The site will work on other browsers
just to varying degrees, and the biggest
| | 00:32 | difference really is going to be on
some of the form elements in the buy page.
| | 00:37 | So here in this homepage, we have the
Rock Paper Scissors game from my Drag
| | 00:43 | and Drop course here on lynda.com,
and I've just adapted it to this page.
| | 00:47 | I really didn't have to change much at all.
And you can drag the Rock over Rock beats Scissors.
| | 00:53 | You see you get the result there.
| | 00:55 | Paper does not beat Scissors, but
Scissors beats Paper and you can drag these
| | 01:00 | things around and play the game.
| | 01:02 | If you want to learn more about Rock, you
can click on Rock and here's Rock's theme song.
| | 01:07 | (music playing)
| | 01:12 | And we're using the HTML5 audio tag
there to embed that, and rest of the page
| | 01:18 | is just Lorem ipsum.
| | 01:19 | And Paper, it's got some video embedded here.
(video playing)
| | 01:27 | And again, the rest of the page looks
very much like the rest of our site.
| | 01:30 | We have the Scissors page that we've
seen many times throughout the course.
| | 01:35 | You can contact us by smoke signal and
you can buy the Rock Paper Scissors game
| | 01:40 | if you like, and have some
engraving. This is just a text field.
| | 01:45 | And you can select your quantity
here, and we have the number field.
| | 01:50 | We also have the output element.
| | 01:52 | And you press the big red button and
you'll notice that up here on the URL line,
| | 01:57 | because we used get, you can see
the results of the entire form.
| | 02:01 | So it's really a very simple website,
and it's using a lot of the features that
| | 02:06 | we've covered here in this course, so
in the rest of this chapter I'll show you
| | 02:09 | the HTML and the CSS for this site.
| | Collapse this transcript |
| Touring the HTML| 00:00 | In this movie, we will look at the
HTML for the Rock Paper Scissors website.
| | 00:04 | The first page of this site is the
rps.html file, and you'll find this in your
| | 00:08 | Chapt17 folder in the
exercise files, and it's rps.html.
| | 00:15 | Open this in the text editor, and you
see it's a very short file. And mostly, it
| | 00:21 | contains the Rock Paper Scissors game from my
HTML5 Drag and Drop course here on lynda.com,
| | 00:27 | so how that works is actually
explained in that other course.
| | 00:31 | That's a feature that uses a lot of
JavaScript, and it's not really so much about
| | 00:35 | the HTML part of HTML5 as it is
about some of the other APIs from HTML5.
| | 00:40 | So if you want to understand how this
drag-and-drop game works, then I suggest
| | 00:44 | you look at that course. That's HTML5:
| | 00:47 | Drag and Drop Iin Depth, here on the
lynda.com online training library.
| | 00:52 | So here at the top of this rps.html
file, we have our CSS, which we will talk
| | 00:57 | about in the other movie here in this
chapter, and we call in the JavaScript for
| | 01:01 | this Rock Paper Scissors game.
| | 01:03 | Then we have our top menu, which is done
with the UL element, and it's styled with
| | 01:08 | CSS. And you see that's this part up at
the top here of each of these pages, and
| | 01:13 | as we click through each of these pages,
you see that it's exactly the same menu
| | 01:17 | with exactly the same code.
| | 01:18 | Next, we have the header, and that's in
this header element, which is a semantic
| | 01:23 | element for marking up the header of a
web page. And you see we have the header
| | 01:27 | part right up there.
| | 01:28 | Then we have the rps game, which is
in a section element because it doesn't
| | 01:32 | really fit in any of the other
semantic elements. And then we have a footer
| | 01:36 | element down here at the bottom,
| | 01:38 | and that's this footer at the bottom.
| | 01:40 | And again, that's the
same on all of these pages.
| | 01:43 | So next up is our Rock page and that's in
rock.html, open that up in the text editor.
| | 01:48 | Again, we have our style sheets at
the top, and we will cover that later.
| | 01:52 | The menu is exactly the same.
| | 01:55 | The header is exactly the same, except
it has different words in it. And then we
| | 01:59 | have the Theme Song, and you'll notice the
Theme Song loads up an audio file.
| | 02:05 | (audio playing)
| | 02:09 | And this is using the audio tag, and it
has three different source files, and the
| | 02:17 | browser will select the
media type that it supports.
| | 02:20 | And so if we look here in Chrome,
select resources rock.html and open up
| | 02:28 | this XHR, we see that it's selecting the MP3
version of this, and so that's the second one.
| | 02:34 | And then the rest of this is just like
we've seen in these files throughout the course.
| | 02:38 | We have an article and it has the story,
a lot of Lorem ipsum here. And we have
| | 02:44 | an aside element, and
that's this element over here.
| | 02:48 | And that aside element has a header, and
it has several different sections, and
| | 02:51 | so here is the header and here's the sections.
| | 02:55 | And then we also have the footer,
just as we have in each of these pages.
| | 02:59 | And moving on to the Paper, again, this
is all pretty much the same as the other
| | 03:03 | ones, with the exception that
it has this video element in it.
| | 03:06 | So we will go ahead and open this up.
| | 03:09 | It's in paper.html.
| | 03:10 | So here at the top, we have our CSS files.
| | 03:13 | We have our nav menu that's the same
as we see on all these pages. And we have
| | 03:18 | our header, which is this part up here.
| | 03:21 | It's the same, just with different words.
| | 03:23 | And then here we have the video
control, and you see the video control here on
| | 03:27 | the page. Notice we've set the size.
| | 03:29 | We are actually scaling it down; the
natural video is about twice those dimensions.
| | 03:34 | And we have three different media
types, and the browser will select the first
| | 03:39 | one that it's able to
play from those media types.
| | 03:41 | And this is Chrome, so I think it's
actually selecting the MPEG version.
| | 03:45 | Coming through to View > Developer >
Developer Tools, and we will select it from down here.
| | 03:52 | We see that that is the
MPEG version, the m4v file
| | 03:55 | that it's selecting.
| | 03:56 | So it's actually taking the first one.
| | 03:58 | If it couldn't render that first one,
it would have rendered one of the others.
| | 04:01 | In fact, we can go ahead and open this
is Firefox and we can see that at work
| | 04:06 | and we see here is the video.
(video playing)
| | 04:09 | And if we come up here to Tools >
Web Developer > Web Console,
| | 04:15 | we see that it has skipped the MP4
file. And we come to the Page Info and we
| | 04:21 | can see that it loaded the webm version, and
that it is actually the second one in this list.
| | 04:26 | And the rest of this is
pretty much the same as the Rock.
| | 04:31 | We have our Story and we have our sidebar,
so here's the aside and there's our story.
| | 04:39 | We come back up here to the
top and we click on Scissors.
| | 04:42 | We are very familiar with this page, if you
have been following along with the course.
| | 04:44 | This is the simplest of these.
It doesn't have any media.
| | 04:48 | It just has the menu and the
header and the story and the aside.
| | 04:53 | And so if we open up scissors.html,
see, here's the menu, and there is the
| | 04:59 | header, and there is the story, which
has lot of Lorem ipsum, and there's the
| | 05:04 | sidebar in the aside element, and the
footer down there at the bottom, and
| | 05:09 | there's the footer.
| | 05:10 | If we come to the Contact page,
the Contact page is also very simple.
| | 05:15 | The thing about the Contact page here
is we have two articles, and so we have
| | 05:21 | this Contact Us article, which is right
there, and then there is the aside, and
| | 05:26 | then there is the story article.
| | 05:29 | And so the aside actually
gets floated to the right here.
| | 05:32 | In all of these, the aside is floating to the right.
| | 05:34 | We floated to the left in some of the
other examples throughout this course and
| | 05:38 | floating it to the right here--
and we will see this in the CSS--
| | 05:42 | we are actually able to get it to span
multiple articles, which is what's being
| | 05:45 | demonstrated in this one.
We will see more about that in the movie on the CSS.
| | 05:50 | Then finally--here's the fun one--
this is our Buy page.
| | 05:53 | Let's go ahead and bring up the HTML for this.
| | 05:56 | This is if you want to actually buy the
game, which as we point out you don't
| | 06:01 | really need to buy.
And here we have our little form.
| | 06:04 | So there's the JavaScript.
| | 06:05 | We will get to that in a moment.
And there is our top menu, and there is our
| | 06:10 | header, and there is the Where to buy,
and there is the aside, and then finally
| | 06:16 | down here, we have the form itself.
| | 06:19 | And so we have a form.
The action is the HTML page,
| | 06:21 | so it's not going to actually get processed.
| | 06:23 | If you wanted to actually process the
order, you would need to create a shopping
| | 06:27 | cart and have this form actually feed
into the shopping cart, and you would put
| | 06:32 | the URL of your shopping cart right here.
| | 06:34 | You would also not use the get method;
| | 06:36 | you'd probably use the post method.
| | 06:38 | I'm using the get method so that
we can see the variables on the URL.
| | 06:42 | So we have a regular text element here
and that's for the Engraving, and so I am
| | 06:46 | going to put something here in the Engraving.
| | 06:48 | And then we have here, How many input
type = number. And so this is the number
| | 06:55 | type element and you see that I
can change the quantity. I like 7.
| | 07:00 | I think 7 is good number.
| | 07:01 | They are only $50 each.
| | 07:03 | And you'll notice that this number
here is getting updated as I do that, and
| | 07:08 | that is in this output element.
| | 07:10 | We learned about the output element
in our chapter on forms. And our output
| | 07:15 | element is actually getting
calculated up here in the JavaScript.
| | 07:19 | And again, this is very simple.
| | 07:21 | We are getting the quantity and the
price and we are multiplying them together
| | 07:25 | and putting them in the
value of that output element.
| | 07:28 | You will notice here that I actually have a
hard-coded value and I'm getting a value.
| | 07:33 | That's because this converting innerText
to an integer doesn't work on all browsers.
| | 07:37 | In fact, it doesn't work on Firefox, and
I'm not sure if it works on IE or not.
| | 07:42 | And so if we get a not-a-number from it,
we just plug in the default price, but
| | 07:47 | here in Chrome, I can actually
change the price down here if I want to.
| | 07:50 | I can make this $149, and I can save
this and reload it, and you see now it
| | 07:56 | $149, and when I buy seven of them,
then it's a substantial amount of money.
| | 08:01 | Put that back, and we are going to put
in our Engraving again, and make this 7.
| | 08:08 | You notice I have got the range on this set to
10. I'm not letting you buy more than ten of them.
| | 08:13 | Here we have min 1, max 10, value 1.
| | 08:16 | And then I press my big red button, and
we get the Thank you page. The Thank you
| | 08:21 | page is very simple. It just says, Wow!
| | 08:24 | Thanks! And you'll notice up here in the
URL bar--expand this like this--
| | 08:31 | we have all of our values from the form.
| | 08:34 | So we can see that our form is working.
| | 08:36 | So that's what the site looks like, and
that's what the HTML for it looks like,
| | 08:40 | and in the next movie we will look at the CSS.
| | Collapse this transcript |
| Touring the CSS| 00:00 | In this movie, we'll look at the CSS for
the Rock Paper Scissors website, and so
| | 00:05 | the first thing we're going to do is
we're going to load up this page here,
| | 00:06 | scissors.html, from the chapter
17 folder in our exercise files.
| | 00:11 | I am just going to open that in the
text editor, and you will notice at the top
| | 00:16 | here we have these two link tags:
| | 00:18 | one of them is opening the main.css,
and one of the is opening the rps.css.
| | 00:23 | The main.css file is exactly the same as
we've been using throughout this course.
| | 00:27 | Let's take a moment and look at it.
| | 00:29 | Open that in our text editor here.
| | 00:31 | That's main.css from the same folder.
| | 00:34 | And this is really just a set of resets.
| | 00:37 | So the first thing we do is up here
at the top, list all of these different
| | 00:40 | selectors for a lot of different
elements. And we just set a bunch of margins
| | 00:45 | for them and defaults, and then we set
up the body and some more margins for
| | 00:51 | some of these other elements and
default font sizes for the headers and
| | 00:56 | default font family for a number of elements.
| | 00:59 | And so it's really just a reset.
| | 01:01 | And a lot of my sites, I'll design them in
this way where I will have one reset for
| | 01:04 | the entire site and then I will have
other CSS files for other purposes, and it
| | 01:09 | helps to organize everything and to
make it easy to manage in the long run.
| | 01:13 | Now, you will notice here we also
have this rps.css, and this is where the
| | 01:17 | specific styling is done for this site.
| | 01:20 | And so I've set a different background-color.
| | 01:22 | I've set line-heights and font-families and
colors for text and things, all here at the top.
| | 01:29 | And so if we come back over here to the
scissors file, you see there is the background.
| | 01:33 | There's some of the text coloring.
| | 01:34 | These are the things that are
specific to this site, and my reset is being
| | 01:40 | overriden here because in the source
file, you notice the reset is first, and
| | 01:46 | then is the specific CSS.
| | 01:48 | So specific CSS is
cascading on top of the reset.
| | 01:52 | It's changing those defaults.
| | 01:56 | But it's using them as a basis, and
that makes it actually really convenient.
| | 02:00 | Here you notice that I am
floating my image right.
| | 02:03 | I am formatting it. And so that's this
image here, and it's got this border, and
| | 02:07 | it's got a little bit of padding in
there, and that's all set right there.
| | 02:11 | The figure element is actually not
used in this incarnation of the site, so
| | 02:16 | we'll just go right past that.
| | 02:18 | Now we have the formatting for the
navigation bar, and this was described in
| | 02:22 | the chapter on lists.
| | 02:24 | In the HTML, it's just this simple
unordered list element with a number of list
| | 02:31 | items that have the links in them,
and it's all inside of this nav block.
| | 02:36 | And so we format the nav element to
have a width all the way across the screen,
| | 02:41 | and so that's this brown bar all the
way across the screen there. And there is
| | 02:46 | the background color that makes it
that color, and it's hiding everything.
| | 02:50 | And then the unordered list is
put in block mode, and list-style:
| | 02:54 | none and it's a width of 600 pixels and
it's a margin of 0 and auto, and that's
| | 03:00 | actually how you center something in CSS, and
so you see that it's centered here on the page.
| | 03:05 | And as I change the width of the
viewport, that remains centered.
| | 03:11 | And then we set our margin and padding
for our list elements and then finally,
| | 03:16 | the bulk of the formatting is
done right here in the a element.
| | 03:20 | So this is adescendent
selector from top-menu ul li and a.
| | 03:24 | And if we look in our HTML, here is
the id="top-menu." There's the ul and the
| | 03:29 | li and the a element.
| | 03:31 | And so each of these a elements have
that descendent property, and so they are
| | 03:36 | covered by this descendent selector.
| | 03:38 | So it sets them into Block mode, and it
makes them float left so that they stack
| | 03:42 | next to each other left, left, left,
left. And that makes this one stack at the
| | 03:47 | left side of the container. Then this
one stacks right up against it to its left
| | 03:51 | side, and these stack this way by
having them all have float left like that.
| | 03:56 | Then they're given dimensions.
They are given margins.
| | 03:58 | They are given the font family, text-align:
| | 04:02 | center within their little blocks.
| | 04:03 | That way these underlines, which are
actually a border-bottom, the text actually
| | 04:08 | centers on top of that.
| | 04:10 | And that's because we have
this text-align: center.
| | 04:12 | The background-color to match the
top-menu element and text-decoration:
| | 04:19 | none because that
obviously defaults to underlining.
| | 04:21 | We don't want that because we're using
the bottom border there to indicate.
| | 04:25 | And we set the color of the text,
and the color of the bottom border.
| | 04:28 | You notice that the bottom border color
matches again the background color, so
| | 04:32 | it actually disappears.
| | 04:34 | And when we hover over, we have our
pseudo selector for hover, and that
| | 04:39 | bottom border color gets changed to
the same color as the text, and so that
| | 04:43 | gives it this nice effect.
| | 04:44 | So that's our nav element.
| | 04:46 | The header element, that's this part right here.
| | 04:50 | We have our h1, which its text
properties are getting set up above, and the h2
| | 04:55 | text properties are getting set up above.
The margin-top is just making it flush up here.
| | 05:00 | If we get rid of that margin-top, just
delete this, you'll see that we lose that
| | 05:06 | flush up at the top here and
we get this brown ugliness.
| | 05:10 | And so we put that in, and that allows
it to be flush up with the element above
| | 05:14 | it. It have a descendent selector for the
paragraph so that we can format this do
| | 05:19 | not run with these, and
then we have our main div.
| | 05:22 | Our main div is right here, and it goes
all the way to right above the footer.
| | 05:28 | That's this one here.
| | 05:29 | And all of this is inside of this main
div and right there below the nav element.
| | 05:34 | And the whole point of it is to give it a
background color and center it on the page.
| | 05:39 | So we set a width, we set its margin:
| | 05:41 | 0 auto, which we know will
center it on the page, and we give it
| | 05:44 | this background-color.
| | 05:45 | And so that is this cream color here
that goes all the way down to the footer.
| | 05:51 | Next, we have our article element, and
you notice we're also using two selectors
| | 05:55 | here--section.buy and article--and
section.buy that's on our Buy page and that's
| | 06:00 | this section right here.
| | 06:02 | We're just sharing its
formatting because it's convenient.
| | 06:05 | We wanted it formatted exactly the same.
And so it has a width, it has a margin
| | 06:10 | to the right, and it floats to left, and that
allows this aside to float to the right of it.
| | 06:15 | And then we format some of the
elements inside it with descendent selectors, the
| | 06:19 | h1, the p, and the mark.
| | 06:22 | We're not using mark, but that's for
highlighting. And then we format the aside.
| | 06:26 | The aside floats to the right.
| | 06:28 | We had it floating to left in other
parts of this course, and it would make it
| | 06:32 | stack, but when we want to have more
than one item to the left of it, having it
| | 06:35 | float to the right allows that to happen.
| | 06:38 | And so on a lot of these pages, we have
different sections to left and we want
| | 06:43 | that to float in that way.
| | 06:45 | Then we have our formatting for inside
of it with some descendent selectors--
| | 06:48 | font-size, margins, fonts--
and then we format our footer.
| | 06:53 | Our footer has this dark gray
background, and that's seen down here. And the
| | 06:59 | paragraph inside of it has a lighter
color, not quite white, so we see that we
| | 07:04 | have that lighter gray color of the text.
And its font size is smaller and its
| | 07:09 | text aligned to the center, and
it has some up and down padding.
| | 07:13 | The first number here is the top and
bottom, the second number here is the right
| | 07:17 | and left, and so that's giving it 10
pixels above and below so that the text
| | 07:21 | looks like nice there.
| | 07:22 | Now, we do some formatting for
details and summary, and that's not used in
| | 07:25 | this example. And then we have our
media formatting, and this is really just
| | 07:30 | margins for that div.
| | 07:31 | And so if we look at one of the pages
that has that, here's paper, we'll bring
| | 07:36 | up papers.html and here we have the div media.
| | 07:40 | That's just giving it some top and left margins.
| | 07:43 | So when we see this on the page, there
is a little bit of margin here, and it
| | 07:47 | pulls it away from the side there, because you
remember in our reset, it gave it a margin of 0.
| | 07:52 | If we look back up at our reset, it's
listed in here audio and video, and they
| | 07:56 | have a margin of 0, padding of 0.
| | 08:00 | So, this helps us to get that away
from the side margin there and from what's
| | 08:04 | above it, makes it look nicer there on the page.
| | 08:07 | Then we have some formatting for our
forms, just to give them the sans-serif
| | 08:11 | font, and to give a font to the inside
of these input and text area elements.
| | 08:17 | So that's the stuff here. That makes
this have a size to it that we can see.
| | 08:22 | Otherwise, on some browsers it will be small;
on some browsers it will be large. This makes it consistent.
| | 08:27 | And then down here, we have the CSS
for our game, and this is all copied
| | 08:31 | from and it's all explained in the
drag-and-drop course, including this
| | 08:36 | transition section down here.
| | 08:38 | So that's the CSS for the Rock Paper
Scissors website. The JavaScript for
| | 08:43 | the drag-and-drop game is covered in
the HTML 5 Drag and Drop course here on
| | 08:47 | lynda.com.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | In this course my goal was to give
you a good understanding of HTML, so you
| | 00:04 | can use it to build powerful and compelling
websites for yourself and for your clients.
| | 00:09 | I've covered the basic features of
HTML, including its tags and attributes,
| | 00:13 | formatting, hyperlinks, tables, forms,
and even some CSS, so you can apply your
| | 00:19 | knowledge to building your own projects in HTML.
| | 00:22 | I've really enjoyed creating this
course for you, and I sincerely hope that it's
| | 00:25 | as useful for you as it has been fun for me.
| | Collapse this transcript |
|
|
