Ch4

Lesson1: Introducing HTML

The importance of HTML

- Before we get started learning the specifics of HTML, I want to take a moment to explain the importance of HTML and
why it's so critical to web design. If you've seen me talk about web design before, you've probably heard me say to new
web designers that they need to learn at least the three core languages of HTML, CSS, and JavaScript. Well, those three
languages form the backbone of all websites and web content, and they're critical skills for any web designer to
learn. However, if you were ask me which of those three was the most important to learn, I'd say, without any
hesitation, that it's HTML.

Although CSS controls how a page looks, and JavaScript controls how it behaves, HTML provides the essential structure
for web pages. Take away the CSS, and you simply have an unstyled page. Take away the JavaScript, and certain
behaviors may cease to function. Take away the HTML however, and you're left with nothing at all, no web page, no
content, nothing.In fact, to have a website, all you really need is HTML. A properly written HTML document will not only
be readable to the user, but will also convey the structure of the document, the relationship of its content to each
other, and allow the user to link to other pages and sites.

HTML can do all of this because it's a markup language. That means that HTML is used to mark up content in order to
explain what that content is and how it relates to other content on the page. It does this through the use of tags, which
are used to identify specific types of content.A p tag, for example, identifies the content as a paragraph, while the nav
tag would identify its content as being part of the page's navigation. By knowing the rules of how tags work
together, and which tags to use, it's incredibly simple to author an HTML page.

Sound easy? Well, that's because it is (chuckles). In fact, most people can learn the basics of HTML syntax in about five
minutes. Now, for some of you, this may seem a little (chuckles) too simple. I mean, you're supposed to be learning how
to code, right? Shouldn't this be a little bit more difficult? Well, I assure you, there is a little bit more to it than that, as
you'll see in a moment. However, it's not an exaggeration to say that HTML is a simple language, and, to be honest, that
is perhaps its greatest strength. You see, HTML's simplicity made it incredibly easy for people to learn and adopt.

In the early days of the web, this made it easy for developers to write browsers to display web content and for authors
to learn how to structure their pages. And although HTML has grown and evolved over the years, it hasn't really changed
that dramatically at all since the first version. This consistency has helped grow the adoption of the web, and we'll
continue to feel its growth as it moves beyond browsers and into a connected world of devices and applications. The
growth of connected devices like tablets, phones, appliances, and wearable tech are creating a much larger ecosystem
for HTML content.

Regardless of how complex the site or web application is, or how many other technologies might be involved with it, at
the core of the page, you're going to find HTML. That's why regardless of which skills you choose to focus on, HTML is an
essential skill for you to learn and master.

Basic HTML syntax

Earlier I stated that you could learn the basics of HTML syntax in about five minutes. Well, in this exercise I'm going to
put that to the test. Now I'll be honest. It's probably going to take me a little bit longer than five minutes. But I think
you're going to be pleasantly surprised at how quickly you can pick up the basics of HTML syntax. Now to do this I'm
going to be using the file syntax.htm. You can find this file in the Exercise_files > Chapter_01 > 01_02 folder. And I've got
it opened in two places.

First, I've got it opened in text edit. I'm on a Mac. For this exercise, I'm just going to use the default text editor, which
happens to be Text Edit. If you want to do this along with me, if you're on Windows, open it up in, say, Notepad. Or you
could use a different program like TextWrangler. You just want to make sure you're using a basic text editor that
can handle raw TXT files. The reason I'm using this and not some code editor. Is I want to reinforce the concept that
HTML is really nothing other than a TXT file. There's no special encoding going on with it.

It's simply a TXT file with a .htm or .html extension. That's all it is. Now on the right hand side, I had the same file opened
up in a browser. In this case, Google Chrome. So, when I make an edit to the file, I can come over here and refresh the
page. And you can see what that edit does to it as far as rendering in the browser gets. So let's talk about the basics of
HTML syntax.Now, remember that HTML stands for hypertext markup language. That means that we use tags to mark
up content on the page to identify it.

You can see this text, for example as a paragraph. Well, it's not a paragraph yet, and in order to make it one, we're going
to have to mark it up using a paragraph tag. So, to do that I'm going to go right over here to the very front of the
document and I'm just going to open up a paragraph tag. To do that I'm going to use a left angle bracket. Followed by
the character that represents the element I want, P for paragraph. And then, close the opening tag with a right angle
bracket.So, that is the makeup, or the syntax if you will, of an opening tag.
You've got the left angle bracket, you've got the character, or characters, that represent that particular element. In this
case, P for paragraph, and then, the right angle bracket. Now everything a browser's basically going to look at this. And
it's going to know that everything after this is contained within that paragraph. Most elements are going to have both an
opening and a closing tag. When your browser or user agent is looking at this, it says okay, this is the beginning of a
paragraph. But you also need to tell it where the paragraph ends. So in this case I'm going to go to the very end of the
paragraph and I'm going to do what's known as a closing tag.

Now closing tags look almost exactly the same so I'm going to open it using a left-angle bracket. But then I'm going to do
a forward slash followed by the P followed by the right-angle bracket. So they're almost exactly the same. The only
difference. From the opening and closing tag is that forward slash. And it always precedes the character that it
identifies. So essentially we have an opening paragraph tag right here. We have a closing paragraph tag.And then we
have the contents of the tag right in the middle. And then the entire thing is considered a paragraph element.

So when you hear HTML referred to as elements. Basically, elements refer to the tags andtheir contents, whereas this is
simply the tag itself. But in addition to the tags, each of the tags can also have certain attributes. Some attributes are
specific to the elements, whereas other attributes are what we call global attributes. Now the paragraph tag doesn't
really have. Any specific attributes to it, but it does have some global ones that we could apply. If I wanted to apply an
attribute to the paragraph tag, I would go under the opening tag, and right after the character, I would open up a space.

And then I would type in the attribute that I wanted. Paragraphs don't have that many, so let's just pick language. So I'm
going to type in L-A-N-G. So of course you'll have to learn the attributes themselves. Then you type in an equals to assign
a value to it, and then in quotation marks you give it a value. In this case I'm going to say en for english. So here I'm
telling the user agent that the contents of this paragraph are in english. Now, don't panic. You don't have to do this for
every element. It's just kind of a nice thing to do if this paragraph had Spanish in it. I could say language equals Spanish,
and then spell checkers would know.

To either check it using a Spanish dictionary or ignore it for English spellings. What we're looking at is the syntax of the
attributes. So you have the name of the attribute. Then you have an equals sign, which is basically an assignment
operator. And then you have the value. And the value's always going to be contained within quotation marks. Now there
is basically two types of attributes. There is informative, which is this in giving extra information about the element and
there is functional. So, for something like a link which is done using an anchor element. There is a attribute called href.

And the href attribute tell the browser were to go when the link is clicked. So, some attributes are really important and
functional. Whereas other attributes are merely just giving the browser or user agent a little bit more information about
that element. I don't need this attribute, so I'm going to get rid of it. Now just to kind of show you that what we're doing
does make a difference, I'm going to save this and if I go over to my browser and refresh this. Nothing really
happens. The reason for that is that paragraphs are kind of the default elements in HTML. If a browser sees text that's
outside of an element.

It's going to assume that you wanted that to be a paragraph, and it's going to render it like that.So if you want to actually
see your tag making a difference, then we're just going to change it.So if I come over here, and change paragraph to
h1. And I have to do that both for the opening and closing tags. H1 stands for heading one. That's a top level heading. So
now I have an opening and a closing h1 tag instead of a p tag. If I save this. Go back to my browser and refresh. Now we
see a difference, because the browser is saying, oh. That's a heading one, and so you get its default H1 rendering, which
is sort of big and bold.

So I'm going to go ahead and get rid of that and just change this back to a paragraph. So at this point, we've talked a
little bit about how we can identify content on the page. Simply by using the tag that represents the type of content we
want to display. Easy enough. Now, HTML syntax also allows us to create more complicated structures by nesting one
element inside of another one. So let's say within this paragraph that we had some text that we wanted to
emphasize, for example, this last sentence. Well, if in front of the second sentence here I added an emphasis tag, or em,.

If I started an instance tag, I could close that before the closing paragraph tag. And then what I've done, is I've
emphasized this last sentence. Now, this is called nesting, and essentially, it makes the paragraph tag a parent tag, and it
makes the emphasis element a child element. So we have parent elements, and we have child elements. And we can
nest them together to create these more complex structures. If I save this and test it you can see that the last sentence
is now italicised which is being emphasized. Now there are rules around this nesting.

Certain tags for example can't nest inside of other tags and that's just one of those thing you have to learn. The other
thing that you have to learn is the syntaxual rule that if you open a child element the child element has to close before
its parent element. For example, let's take this word paragraph maybe I want it to strongly emphasize that text. So in
front of paragraph if I gave it a strong tag. And you can see that the characters that are used to identify the tags are
not always single characters. In fact it's very rare that they are single characters.

In this case strong for a strong tag. Well if I wanted to close that I couldn't come out here. And close the strong tag. This
wouldn't work. But this would be invalid code. So essentially, if I wanted to close the strong tag. Because the strong tag
was inside the emphasis tag, and also inside the paragraph tag. It would have to close before the emphasis tag. So I
would need to move this right here. In order to have proper syntax. So now my strong tag is closing fist,followed by the
m-tag, followed by the paragraph tag.
And if I save this and refresh my browser you can see that that's rendered within the browser itself. Okay, so those are
the basics of HTML syntax, and it took us a little longer than five minutes, but not too much longer. So, just remember,
content in HTML is identified by wrapping it in an HTML tag. You can also further enhance those usually with
attributes. That can either tell you more about the element, or it can provide additional functionality for you. So from
this point forward, it's really just a matter of learning the different HTML tags.

When it's appropriate to nest them, and which tags you can nest inside of one another. And then the attributes that you
can use with each of them.

The current state of HTML

The web changes fast, and for the most part, HTML is changing right along with it. One of the most challenging aspects
of web design is staying current with the languages and standards that you're going to be using. So I want to take a
moment to talk about the current state of HTML. To do that, I find it's actually really helpful to take a brief look back
at the history of HTML. And how that's lead to where we stand today, because what's current at the time of me
recording this, isn't going to be current even say three months from now. So understanding how the language has
developed is going to give you better understanding of where it's headed.

We can trace HTML's history all the way back to 1991 when Tim Berners-Lee published a document called HTML
tags. Which described a set of tags that could be used to mark up contents of online documents. Now this eventually led
to the publication of the first HTML specification which was HTML 2.0., in 1995, HTML 3.2 followed in 1997. Only to be
replaced by HTML 4.0 later in the same year. So those early years, saw a lot of specifications being developed
and parallel to each other and released right around the same time.

Now the early days of HTML largely mirrored the internet itself, which means the specification matured alongside the
web. Browser vendors would often ignore earlier specifications. They would propose their own tags and would even
implement them in different ways. So by the time HTML 4.0 was published, the web community had kind of banded
together under a banner of web standards, and they began to push browser developers to sport the specifications as
they were written. And because of that, the HTML 4 specification became the first one where support was nearly
universal.

And HTML 4.0 to this day remains the most stable specification of HTML. Now around 2000, the W3C, which is the
standards body that's responsible for publishing HTM, began the process of trying to move HTML towards XML by
publishing the XHTML 1.0 specification. Their goal was to eventually have HTML, follow the stricter rules of XML
and have the language be more extensible. XHTML never really realized it's vision of creating an extensible language.

They had a lot of difficulties when they went to work on the XHTML 2.0 specification and it just sort of stagnated. So in
2009, the W3C dropped the charter and that essentially halted all work on moving HTML more towards XML. Now that
leads us to where we currently are today with HTML5. While the WC3 was busy focusing on XHTML, a group of
organizations and individuals got together around 2004 to continue work on HTML. Their goal was to take the HTML 4.0
specification and just continue moving it forward.

This group calls themselves the Web Hypertext Application Technology Working Group which is also referred to as sort
of the awkward WHAT working group. There's specification which was entitled web applications 1.0 was actually
eventually adopted by the W3C and renamed HTML5. So that leads us to the current state that we find ourselves
in, which is we have two specifications of HTML being developed at the same time. One by the W3C and one by the
What Working Group.

The two groups do cooperate with one another, but the specifications are considered independent of one another. The
W3C is developing the HTML5 specification. Now this has clear milestones. And once it reaches candidate
recommendation, they'll move on to the HTML 5.1 specification. So this one's going to have a specific release date. The
WHAT Working Group, on the other hand, is basically developing HTML as a living standard. So in that regard, they
dropped the version number, although most people still refer to it as HTML5.

And they're just constantly updating and revising it. Now, as you can imagine, these two specifications are beginning
to diverge from each other in fairly significant ways. So one of your tasks as a web designer is going to be tracking both
of these specifications, andunderstanding how the different browser vendors are implementing both of these and which
aspects of this specifications are making it into the browsers themselves. Now that sounds daunting and it does take a
little bit of time.

But to be honest, the HTML5 specification isn't that different from HTML 4.0. It does introduce a few new elements and
what it does more than anything else is, it gives user agents clear rules about HTML, how it should be parsed, how errors
should be handled, things like that.Now where the specification really diverges from 4.0 is, its focus on building
applications.Things like drag and drop, location detection. Support for drawling services like canvas. Stuff like that make
it more of a platform for developing applications than a mere markup language.

Now for the most part, the W3C has split those application focus areas into their own specifications so a lot of what
you're referred to is HTML 5 is actually a collection of individual specifications. What does that mean for you or really
anyone charged with authoring basic HTML? Well, for the moment the bulk of sites online are either going to use HTML
4.0, XHTML 1.0 or the increasing number of HTML 5 documents. And to be honest there's really not a huge difference
between pages that use any of those document types.

For the most part, the biggest decision you'll be faced with is which doc type to use and we're gong to talk about that a
little bit later on. My advice is if you're brand new to web design, start by learning the HTML5 syntax. Focusing mainly on
learning to write clean, well structured HTML. And then you can gradually add the newer HTML5 features as
you become more comfortable with it.

HTML resources

Although the syntax of HTML is relatively simple to learn, there's, still a lot of elements, attributes and other concepts
that you're going to need to learn and keep track of. While this course is intended to introduce you to the essentials of
HTML, it's really not designed to teach you every single element and attribute available. So with that in mind, I want to
give you a couple of online HTML resources, that can really help you as you begin learning HTML, andcan serve as
valuable references later on, as you're authoring your own pages. Now we're going to start, at the specifications
themselves.

And this is something, two documents that you should definitely have bookmarked. So, this is the W3Cs version of
HTML5. You can see they have a latest Publisher Version. You can go see the Editor's Draft, if you want to see what's
coming down, down the pipe. And, this is pretty large. If I scroll down, you can see that here's just the Table of
Contents. And I'm not even going to scroll through all of them. They're really, really big. You want to learn about specific
elements, you can find them. For example, here's the body element.

If I click on this, it's going to jump to that, within the specification. And, I've got to admit, these specifications aren't the
easiest thing in the world to read. They're really written for people that make the browsers themselves. So for authors,
they're not always that easy. Now, the what working group's standard can be found at whatwg or whatwg.org. And this
is the HTML Living Standard. You can see they've dropped the HTML5 from it, and you'll see when it's last updated, that
sort of thing. Now they have a similar approach.

So here's the table of contents. It's formatted a little nicer, as you can see. But it is, in a lot of ways, pretty much the
same document. So if I scroll down for example, and click on body, you can see it jumps down to the body element, and
it looks very similar. Now again, you get some nice examples of it, but in a lot of ways, these are very technical
documents. Now, I don't want to dissuade you from reading these. I spend a lot of time in these specifications. It's going
to certainly give you complete overview of how the language works and how it's supposed to function.

But, if you're looking for maybe a broader introduction to this or something that's written in a way, more for authors and
less for developers of browsers. Then there are two sites that I want you to bookmark, and one, is
webplatform.org. Now this is an open source website, that was basically started by a lot of folks at the W3C, and some
other people that were looking forbetter online documentation, for authoring the web. So this isn't just HTML. This is
web development in general, which is really nice.

So there's a complete section of documents. If I click here on The Docs, for example, I can start scrolling down and take a
look at all the different categories they have. HTML is one of those. And when I click on HTML, you can see that I'm
presented with a lot of different articles.I have learning materials. I have attribute and element references. API
references for those things like drag and drop, and geolocation. So there's all sorts of information here. If I click on, say,
Element reference, for example, I'm going to get a listing of all the elements in HTML.

And if I scroll down, for example, I can find body again. And when I click on that, I get a little bit more information. Now,
this is open-source, meaning, some things you're going to find a lot of information, other things, you're going to find, not
so much information. These are constantly evolving, so people are adding to them all the time. So this is a great resource
to bookmark, a lot of great articles and, a lot of great documentation here. You just need to spend some time with it to
kind of figure out exactly where the information is presented in depth.

Now another one that I consider to be an absolute go-to reference, is the Mozilla Developer Network. You can find this
at developer.mozilla.org. And again, there's more to it than just HTML. I'm just focusing on the HTML reference for right
now. So this is their HTML reference.And if I scroll down a little bit, I can see that I have a lot of different articles,
guidelines, tutorials.There are exercises for those people that are new to HTML, there's some introductory content here,
which is really nice, and they also have element references.

So if I click on the element reference, see I get a more graphic page if you would. And what's nice about this is, notice
that the new elements in HTML5, are sort of identified. So you can sort of see, what was available in HTML prior to
HTML5, and then some of those newer elements. If I click on an element again, you're led to a little bit more information
about it. It's presented in a little bit more of a graphical fashion, it's pretty easy to see how things work and they have a
lot of examples as well. So I really like this.

So I'm going to go back for just a moment and in addition to the HTML element reference, they also have an HTML
attribute reference, where you can learn all the attributes. So you remember earlier when I was talking about syntax,
and I said at this point ,you're just learning which elements are available and what attributes are available for those
elements. Well, here's a great place for you to do that. References for both all the HTML elements, and, all the HTML
attributes in one place. So as you begin to learn HTML, you want to make sure you bookmark, all of these sites. The,
webplatform.org, the HTML reference, and the Mozilla Developer Network, and the two specifications.

They're going to give you a quick way to look up elements and, you're going to gain a better understanding of HTML in
general. Now be sure to check out the Next Steps movie at the very end of this course. In that I'm going to go over a few
more resources that can also help youdig a little deeper, into learning HTML.

Choosing a code editor

- [Instructor] Authoring HTML requires little more than a text editor. As we discussed earlier, HTML documents are
really nothing more than a text file with a .htm or .html extension, so really, almost any text editing tool will
suffice. However, authoring websites can be a tedious process, and you're usually going to be writing multiple
languages, like HTML, CSS, and JavaScript. So, writing all of that by hand can be really time consuming. A good HTML
editor can help speed up the process and catch syntax errors that you might miss.

At a minimum, you're gonna want to have a code editing tool that has line numbers, code formatting options, syntax
highlighting, and code support for all of the languages that you're gonna be authoring. If you're working on a team that
already authors or edits HTML, chances are your team has a tool that they're comfortable working with. Now this might
be a desktop program like Dream Weaver, Coda, or Sublime, or it might be within the authoring environment of a CMS,
like WordPress or Expression Engine. If you're already using a desktop editor in your work environment, I
recommend using it for this course.

If your team is using a CMS, I recommend choosing a basic editor for this course and then focusing on learning the CMS
after you've mastered the basics of writing HTML, and that way, you don't have to focus on learning HTML and the CMS
at the same time. Now if you're brand new to web development, and you haven't picked a tool yet, I actually
recommend trying out several different types of authoring tools before settling on a favorite. My web design
fundamentals and CSS fundamentals courses both have movies in them that give you an overview of a wide range of
HTML editors.

Try downloading trial versions of a few of them, and experiment with them as you begin to learn HTML. You're bound to
find one that fits your personal preferences. For this course, I'm gonna be using Brackets. It's free, it's cross-platform,
and it has all the HTML features that you'll need for this course. I'm gonna give you a brief rundown of where you
can download it, and how I set it up, but I'm not gonna go into using Brackets beyond some of those basic points, and if
you decide to use it, there's plenty of documentation on their site to get you started.

So you want to go to Brackets.io, and you're gonna find a big download button. You'll notice it notices that I'm on OS10,
so I'm just gonna click that and it's gonna download the DMG file for me. And I open up the DMG file, if you're on a
Windows machine, you'll open up the EXE file, and it's a fairly simple installation. Either you're gonna run the installer on
Windows, or on the Mac you're just gonna drag the icon into the applications folder, and that's it. I'm gonna use a new
finder window to go to my applications, and there I'll find Brackets.

I like adding it to my doc, just because it makes it a little bit easier to open up. And if you're on a Windows machine,
you're gonna go into program files and find this, you can pin it to your start menu, or if you're using Windows Eight, you
can make a tile out of it, however you want to do it, you just want to make sure you can access it in a fairly easy
fashion. So Brackets is pretty easy to set up. There aren't a lot of preferences, so you're not gonna see me going in and
setting up a lot of themes or anything like that. It's gonna open up initially to this page. What's really neat about this is
it's letting you know that Brackets is built out of HTML, CSS, and JavaScript.

So you can edit the editor with the editor itself. It's great, it makes it easy to customize, there are a lot of extensions and
things out there for it, so if you're interested in using Brackets, it's really easy to get it set up exactly the way you want
it. Now, one of the things that I'm gonna do is I'm gonna increase the font size a little bit. I can do that by clicking in the
window and doingCommand plus. The only reason I'm doing that is just to make it easier for you guys to read.Now the
other thing I want to show you guys is live preview in Brackets, and this is one of the things that I really like about
this. So you have to have Chrome installed.

So if you don't have Google Chrome installed, you want to install that, and if Google Chrome is installed, when you have
an open HTML file, like I do here, you click on this little lightning bolt icon, it's gonna open this page in Chrome. Now
what's really nice about this is this becomeskind of a live preview. If I go back into Brackets, for example, and make a
change, getting started with Brackets, and maybe I add an exclamation point there, this is your guide, maybe two more
exclamation points because I'm very excited about that, if I switch back to Chrome, you can see that it goes ahead and
adds those, and it even tells me where I'm focused in my code.

So if I were to click a little bit further down the page and select an item, you can see that it shows you exactly where on
your page you've selected, which is really neat. So this is a live preview, you can just sorta kick back and forth and check
out the changes that you're making.If you wanna close it, all you have to do is again click the lightning bolt icon, and
you've closed it. Now once you start working on a new project in Brackets, it's pretty easy to work from a root
directory. You can see right over here on the left-hand side, I have a little pane that says getting started. When I click on
that pull-down menu, I'm prompted to either open a separate folder, or if I've been working in other projects, it'll just go
ahead and list my most recent projects.

If I click on open folder, I can browse anywhere. I'm just gonna go out to the desktop to the exercise files that we copied
over earlier, and if I say I highlight chapter one, and click open, I'm gonna see a list of all the directories in chapter one,
in this case 01 02 is the only one in there, but notice that I can go ahead and check out that directory structure and open
up files simply by clicking on them. So it's very easy to navigate through your projects using Brackets.Remember, for this
course, it really doesn't matter which code editing tool you use.

You just want to find one that has all the features that you need, and that fits your personal preferences.

Lesson2: Basic Page Structure

Exploring an HTML document

Once you know the basics of structuring an HTML document, it's a whole lot easier to begin writing and editing your own
HTML files. In this chapter we're going to strip an HTML document down to its most basic parts. So we can just focus on
just the essentials of what makes up an HTML file. So I have my browser, Chrome, open. And I've opened up from the
Chapter_2 folder of our exercise files, 02_01, structure.htm. Now this is pretty simple.

As a matter of fact, this is about as simple as an HTML document can get. You can see on the page here, we just have a
headline that says, Page content. And below that, we have a little bit of descriptive text that talks about the main
page. Content appearing inside the body tag.Other elements that align and properly structure and format your
content. Things like that. But it's really hard when we look at a page in the browser visually to determine what the actual
structure of the document is. One of the nice things that most browsers give us, are some tools to allow us to inspect
these documents.

So in Internet Explorer for example it has the developer tools. And in Firefox we have Firebug.And in Webkit browsers
and in Chrome, we have what's known as the Webkit Inspector. So they allow us to sort of get a window into how
documents are structured. If I right click this file and I choose inspect element. It opens up the web kit inspector and this
gives me access to the actual HTML itself. You can see I can begin to expand this. Now, I notice that we start with just an
HTML tag, that's just the topmost or root parent for my file.

And then inside that I have a head element. that has some tags inside of it. And then below that we have. The body tag
and some elements inside of that. And I can see by just sort of mousing around. Through these that these visual
elements that I'm seeing are indeed inside the body tag. So as I mouse around, I get some information about them. It
shows me what element I'm looking at. So these are really handy tools. To allow you to go to a website, inspect that site
and take a look at the HTML code. So if you've ever wondered how things like cnn.com are put together or other large
websites you can browse to them.

Open up these developer tools and really go through the HTML and see how people are billing things. Now we're
interested in just the basic structure of the document. So I'm going to leave the browser and I'm going to switch over to
my code editor. And inside my code editor which is in brackets here, I've opened up the exact same file. Now this is just
going to give us a cleaner format for going through the structure of the HTML itself. Okay, now whenever I'm teaching
people sort of basic HTML document structure, I always reference a sandwich, and that's because.

In a lot of ways you can compare an HTML document to a sandwich. To have a sandwich, you first need two pieces of
bread. Well, the same is true for HTML tags. I need an opening HTML tag and it needs a closing HTML tag. Without
those, I don't have a sandwich. Without two pieces of bread, I don't have a sandwich, I have a salad. Without those I
don't have an HTML document. Now at the very top I have the DOCTYPE declaration. What this does it tells user agents
which version of HTML I'm going to be using.

Below that we have the actual HTML itself which again starts and ends with the HTML tag. Now inside that we have two
main regions, we have the head. And we have the body. The head, if I go back to my sandwich, you can think about this
as the condiments really. Like mayonnaise, mustard, things like that, lettuce, tomatoes. The things that makes you
sandwich better, but don't necessarily define it. So within the head of the document in HTML, you have all the things
that go into making the document work.

Here, for example, we have a meta tag. That describes the UTF eight encoding that should be used. We have some
descriptive meta tags which can help search engines and other robots.We also have a title, every page needs to have a
title for accessibility reasons. And this is going to appear in the tab that you open up for this particular page. You could
also put things in the head of the document like links to external resources like CSS files that help style a page. JavaScript
files that help control the behavior of the page. So these are non visual elements that go into making the page work.

Below that we have the body and you can think of the body region as sort of the meat of the sandwich. This is the roast
beef, the provolone, you know all the things that make a sandwich what the sandwich is. Within the body tag, you're
going to have all of the visual elements on the page. So in this case a heading one and a paragraph. You're could have
your main content, your sidebars, your footers, all the visual content on the page are going to appear within this body
tag. That is absolutely as complicated as html documents get.

That's it. You're always going to have in an html document, you're always going to have the html tags. You should have a
document type declaration at the very top. But you're always going to have your HTML tags. You're going to have the
head region where all of the invisible elements that make the page work are going to go. And below that you're going to
have the body region which is where are your visible elements go. Now you could certainly have a lot more in your
document and a lot more going on. But the basic structure of your HTML page is going to be this. So now that we've
gone over the overall structure of the page. We're going to use the rest of the chapter to focus on each area individually.

We're going to start that in our next exercise when we discuss the document type declaration.

DOCTYPE declarations

The history of the doctype declaration is a really long and varied one. I'll give you a link to the details surrounding it a
little bit later on. But for the most part, the doctype is just one of those things that not everybody understands exactly
what it does. They just know that they need one. So, what the doctype is supposed to do is tell the browser or user
agent which version of HTML that you'll be using so it knows which version of the syntax to use in parsing. But in reality,
all it's really doing is triggering something called quirks mode, which ensures that your page is going to be rendered
properly.

I know this probably sounds confusing, so I just want you to remember this. You need to have a doctype declaration
and you want the doctype to reflect the version of HTML that you'll be writing. Now, we're looking at a pretty old
document right now. This was put together in 2002 by the W3C. I don't believe any of this quality assurance section
is being updated currently, but what this does for us is it gives us a little bit more of information about the doctype
declaration. If you really want to read about it, this link right here takes you to a page that discusses a little bit more
about what the doctype declaration does, why we need one, the history of it, that sort of thing.

Now, if I scroll down a little bit, I can see a list of all of the different HTML and XHTML doctype declarations. We really
don't have to use these anymore, but the reason I'm showing you these is because a lot of you guys are probably going
to be editing documents that were created earlier or some legacy files. Or you're going to open up an HTML file from
another site to kind of learn from and you're going to see this stuff up top and you're going to go, oh my gosh, what is all
this stuff? Well, there were different versions of HTML, XHTML. We've kind of gone over a little bit of that history
and you're going to see that HTML, for example, had three different flavors, Strict, Transitional and Frameset.

XHTML had the same three, Strict, Transitional, Frameset. So depending on which version you're using, you would use a
different doctype declaration and you can see these had a lot of information in it. It was HTML. It pointed back to the
document type declaration, that sort of thing. And if I scroll down, I can see that there's actually a lot of these. The only
one that we need to concern ourselves with is this one right here, down toward the bottom, where it says HTML 5 NOT a
standard yet. Remember, this is 2002. They didn't know what was coming.

It is the standard now and this is all we need. It's very simple. It's very basic. It basically just says DOCTYPE HTML. It
doesn't worry about versioning numbers. It doesn't worry about a document type declaration file to point back to. It just
tells the user agent, hey, an HTML document is on the way. All right, so what I want to do now is I'm going to go to our
code editor. And for the rest of this chapter, we're going to start building a simple HTML page. The very first thing that
you're going to do whenever you create an HTML page is start with the document type declaration.

So, go into the 02_02 directory and open up doctype.htm. Here comes the really hard part.What you're going to do is
you're going to open up a right angle bracket, then you're going to do an exclamation point, and then you're going to
type in the word doctype. Now, sometimes you're going to see this capitalized in all caps. Sometimes it's going to be
lowercase. It does not matter. And then after that, you're going to see html and then the right angle bracket.That's
it. That's your document type declaration. A lot of people would copy and paste them in the past, but that's actually
pretty easy to remember.

But you want that to appear at the very top of each of your HTML documents. And if you're ever creating templates for
yourselves or boiler plates, make sure that your boiler plate is going to have it. So that ought to be the very first thing
that you do when creating a new HTML document. Now, if you want to use one of the older document types to
indicate a specific version of HTML or XHTML, you can do that. You just go to that site that I showed you and copy and
paste those. I do want to point out that there's no compelling reason to do it anymore. Pretty much every document
that you create from this point forward can just use the standard very easy HTML5 doctype, so that's what I
recommend.

The document head

Directly after the opening HTML tag, you're going to find a document's head. Now the head element is where you'll
place information about the document, references to things like external scripts and styles, and additional instructions
to the browser about how the document should be rendered. Now I'm going to open up the head.htm file, found in the
02_03 directory. But as you can see, it's picking up right where we left off in the last exercise. So if you still have that file
open, feel free to continue working with that one that's fine, no harm, no foul.

Okay now before we get to adding the head of our document, we first remember, have to have the HTML tag. Sort of
that opening and closing tag, the slices of bread that I talked about.So right after the document type declaration, I'm
going to add an HTML tag. And then just below that, I'm going to close the HTML tag. And notice that I have a good code
editor and it sort of did that for me. For some of you guys, it probably added both the opening and closing at the same
time. That's a preference that you can turn off or turn on inside brackets, and it doesn't really matter, it just makes it a
little bit faster if itself closes it for you.

Now before we get to adding the head, I'm going to add an attribute to the HTML element itself.So, right after the
character HTML, I'm going to open up a space here, and I'm going to type in L-A-N-G for language, and I'm going to set
that language to English. So you may have recalled that from earlier when we were looking at basic HTML syntax. So this
is not something that you have to do to every single HTML document, but it is one of those things that's sort of nice for
you to do. What this is doing, is it's basically telling any user agent, that this HTML document is going to be using English
for it's language.

That's useful for screen readers in terms of how they enunciate the text, it's also very helpful for online translators,
so that they know which language they're dealing with. So this is kind of a nice thing for you to do, but it's not
required. So after the opening HTML tag, I'm going to open up a head tag. I'll hit Return down here, and then I'm going
to close the head tag out. Now they don't need to be on separate lines, it's just a little bit easier to read, so I recommend
doing that.Okay, so there are a couple things that we want to go ahead and put inside the head tag. And the very first
thing that we want to do, is tell the user agents which character encoding to use for the page.

So to do that, I'm going to use a meta tag. Now, I mentioned earlier when we talked about HTML syntax, that not every
tag needs a closing tag. Meta tags are like that, meta tags don't need a closing tag. All they need is the initial opening
tag. So I'm going to create a meta tag, and then after meta I'm going to open up an attribute. In this case, I'm going to do
the attribute character set or C-H-A-R-S-E-T. I'm going to set the value equal, to utf-8, which is a pretty standard
character encoding.

And then I'm going to close that opening tag by using the right angle bracket. And that's it, that's all we're going to do
there. Now, this is something you should do for each of your HTML documents. You always want to set the character
encoding, and unless you're using things like Russian alphabet, or Japanese characters, or Kanji or something like that,
you're probably going to use utf-8. So that's probably going to develop into a standard for most of the audience that's
watching this. So, what this is doing, is it's going to inform the user agents which encoding to use.

And that way, it's going to use the proper characters when rendering the page. You also want to do that as the very first
thing after the head tag, so it's immediately set. Now you might notice some HTML documents that leave this off
altogether. Now that's because there are servers out there, that when they're serving the pages, in the header of the
page, they'll also set the character encoding. I want to caution you as an author though, not to rely on that. It's really a
good idea to go ahead and set that individually inside each of your HTML documents.Okay, right after that we're going
to add another meta tag.

Meta tags can do a lot of things for you. And I'm not going to go over every single meta tag and what they can do for
you. We're just going to take a look at two of them, the character setting, and one that we're going to do for
description. So I'm going to do meta, and then for attributes I'm going to do the name attribute. And I'm going to go
ahead and name this description, because we're going to provide a description for the site, and then after that, I'm going
to do content. And in content I can sort of describe, I can write a brief summary of what this page is going to be. I'm just
going to type in A page for exploring HTML documents.

And then again, I'll close out the opening meta tag there. Now, this used to be a much more important tag. Way back in
the day, search engines would use this to actually search sites andfigure out what content was on them. The search
engines have gotten a lot more sophisticated now, and people weren't always honest with how they used this tag. So it
sort of not paid attention anymore, so why do it? Well, a lot of search engines will use the content that you provide here
for search engine results when they're displaying them.

It's also useful for your own indexing purposes and searching within your site or content management system. So it's a
good practice to get into doing descriptions for each of your pages. All right, just after this, we're going to finish out the
head of our document by doing a title. This is another thing that you want all of your pages to have. If they don't, they're
going to show up in search results as untitled document, which looks really unprofessional. So we do a title by opening
up a title tag, and then inside that, we have what we want the specific title of that page to be. In this case, I type in Basic
HTML document, because that's exactly what this is, and then, I'm going to go ahead and close the title tags.

So, title tags unlike meta tags, are going to have an opening and closing tags. If I save this, and I preview this on my
browser, you don't really see a whole lot. However, notice up here in the tab of this file, it's showing my title, Basic
HTML document. So it is reading it, and it is coming through loud and clear. Now there are other things that we can do
inside the head. For example we could write local styles, we could link to external styles, we could write local scripts or
link to external scripts. We'll explore adding those to the head of our document a little later on, but for right now, we're
done with the head of our basic HTML file.

The document body

While the head of your document stores functional information that is largely invisible, the body is where all of your
pages visible content is going to go. So, to complete the basic structure of our HTML file here, I have the bodt.htm file
open from 02 underscore 04 directory. Although again, if you're just working on the same document in each movie, it's
okay. because they're all building right on top of another. So, the first thing we want to do is add body tag. Now, the
body tag is not nested inside of the head tag.

It is a sibling of the head tag. Meaning it is on equal level with it. So just after the head tag, I'm going to go ahead and
open up a body tag. And then after the body tag, I'm going to hit return and then close the body tag. Okay. Now
regardless of how your code editor is indenting them, it doesn't really matter. You can see it's just bringing a little tab
there for me. You just want to make sure that it's not inside the head tag itself. The body tag is necessary for us to have
any visible content whatsoever.

So after 'neath the body tag, I'm going to go just below that own line and I'm just going to type in some text. So I might
say something like Page content. Now if I save this and preview that in a browser. You can see that the only thing that
reads on the page there is just Page content.It's not really formatted any one specific way. And I want to be clear about
this. CSS controls.The styling and formatting of the contents on our page. But if we don't use CSS at all, then we get the
browser's default rendering.

And right now, we're seeing the browser's default rendering of a paragraph. In fact, if I inspect the element, I can see
inside of the body. It really doesn't have anything. It just has sort of a placeholder there. All right? So it's just getting sort
of default rendering. So we want to correct that. I'm going to go back into Page content and I'm going to surround this
with an h1 tag. Now the h1 tag, if you remember this from earlier when we were talking about syntax. This is a top level
heading. Meaning a heading one, the most important heading on the document.

If I say this and then preview the file again, you can see Page content now is now formatted in a dramatically different
way. So the only thing that's left for us to do now inside of this body is to go ahead and add all of the visual content
and then structure it properly using different HTML tags. And we're going to focus on that in a chapter a little bit later
on. But for right now, let's just add a little bit more to it. Now I'm going to paste some content in here and what you guys
I want to do is just type this in. Type in the main page content appears inside the body tag.

HTML contains several elements that allow you to properly structure and format your content which we'll cover later, as
I just said. Now, I'm going to wrap this in a paragraph tag. So instead of a heading tag, I'm going to make sure that this is
all wrapped in a paragraph tag. If I can save this, go back to my preview and now I can find my paragraph. Now, don't
worry about that blue line. The only reason that is showing there is because I have this text either highlighted or
focused. If I click off of it and go back to it, you can kind of see how it looks like without that content being focused on.

Now there are other things we can do, for example. I can take the body tag here. I can go ahead use the b tag to bold
this. And notice I have both an opening and a closing tag that surrounds the content that I want to identify. So if I say
this and then again, go back in to the browser. I can see that the word body is now bolded. Perfect. Okay. So now, we've
got everything in place that our basic HTML page needs. We've got a doctype declaration with HTML tags. Inside the
HTML tag, we have head that represents functioning content that's typically invisible.

And then we have the body element that represents the visual elements on the page.Regardless how simple or how
complex your sites are going to end up being, this structure is always going to provide the foundation and starting point
for any of your documents.

Understanding content models

So far, we've covered some of the basics of HTML syntax and how documents are structured.Now, we're going to begin
to focus on learning many of the individual elements of HTML.Before we begin doing that, however, we need to first
have a brief discussion about content models. Almost every element in HTML belongs to at least one content
model. These content models help user agents know what type of content to expect within an element. And they
control certain aspects of syntax, such as which elements can nest within other elements and things like that.

Now, prior to HTML5, there were basically only two content types, block level and inline. Now, to show you the
difference between those two, I'm going to switch over to an HTML document. So here, I've opened up the models.htm
file, found in the 02_05 directory of your exercise files. Now, you don't need to open this up if you don't want to. This is
not going to be a hands on exercise. This is more of a demonstration. But feel free to open it up if you'd like.But if we
look at the structure of the page, we can see there's a heading 1 at the top, that says content models.

And then we have three separate paragraphs. And inside those paragraphs, some of the text is wrapped in these B tags,
which is holding that text. And then down at the very bottom, for the first time we see a link, which is the anchor
element, which is going to link to an outside page. So that's kind of the structure of this page. And that's going to help us
illustrate the difference between block level and inline level elements. Block level elements take up their own line within
the flow of the document. While inline level elements basically appear within the flow of other content.

So if I were to preview this in the browser, you can see the headings and the paragraphs all stack one on top of each
other. While the bold text and the link appear within the flow of the content itself. So that's kind of the difference
between block level and inline. And until HTML5, that's really all we kind of had. The increased emphasis on semantics
and structure in HTML5 has actually led to the expansion of content models into seven main models. And I have them
listed right here in the document. These are flow, metadata, embedded, interactive, heading, phrasing, and sectioning.

Now, these are going to help authors create more sophisticated document structures and to write more meaningful
code. Now, it's worth noting that they haven't done away with the concept of block level and inline level
elements. They've just moved that functionality inside of these new content models, so that some of them behave as
block level. Others can behave as inline level elements. All right. I want to take a quick look at each one of these content
models. So you have an idea as to what type of content are contained inside of that and sort of how they behave. And
the best way to do that is to view in an interactive graphic that the W3Chas within their HTML file specification.

And I've actually provided a little link right here. All right. So clicking on the link is going to take us right here to the
different kinds of content found in HTML5. This graphic shows you sort of a Venn diagram of all of the different content
models that HTML5 has. The interesting thing about this, is you can see that some of these overlap. And what that
means is that there are different elements that can belong to multiple content models, which is kind of
interesting.Okay. So I want to go over these kind of one at a time. Give you a brief description of what the content
model is. And the different elements that belong to it.

And what's nice is this graphic is interactive. So if you mouse over it, you're going to get a listing of all the elements
that belong to that content model. I want to start with metadata content. Now, this is content that's defined as setting
up the presentation or the behavior of the rest of the content. You're going to primarily find these elements in the head
of the document. And it's going to contain things like metatags, no-script tags, script tags, style tags, the title tag of
pages, things like that. Embedded content is any content that imports other resources into the document.

So here, for example, we have things like canvas and iFrame, object SVG, video, the embed tag, things like
that. Interactive content is any content that's specifically intended for some type of user interaction. So here, you can
see we have things like the A, the anchor or link tag that people would click on. You have the button. You have things
like audio and video. Now, you'll notice that things like audio and video and object for example, have a little asterisks
beside them. And, that means under certain circumstances. So, for example, video would be considered part
of interactive content if it had controls enabled.

So, some of those are only interactive on occasion. Now, heading content defines the header of a section, which can be
either explicitly marked up with sectioning elements or it can be applied by the heading content itself. You'll notice that
the heading content only includes the heading tags, which is H1 all the way through H6. Phrasing content is a little
bigger. This is the text of the document, as well as any elements that are used to mark up text within paragraph level
structures. So in a lot of ways, phrasing content is really the same as what used to be inline level elements from the
HTML4 specifications.

So you can see, there's a lot contained here. We have the A or anchor tag, abbreviations, things like buttons, iframes,
progress, input objects, span, strong, bold, italic. All those things that are being kind of contained within the flow of
normal text. Now, flow content, as you can see, this is easily the biggest. This contains the majority of the elements in
HTML5. You can really think of these elements as elements that would be included in the normal flow of the
document. It's important to note here that being identified as flow content really has no bearing on how the content is
displayed within the user agent.

So there are no rules on how flow content has to be displayed. You can see there's a lot of elements here,. There's the
link element A, article, so some of the sectioning elements. Aside, audio, bold, embed, iFrame, header, main, ordered
list, unordered list. So a lot of the elements that we're going to be working with, almost all of them that we're going to
work with within a document can be considered to be part of the flow of content. Now, finally, we have sectioning
content. I saved this for last. This is content that defines the scope of the headings and footers.

Now, using these elements, we'll actually create a new section within the document. So you can see here, we have
article, aside, nav and section, and these are all new to HTML5. Now, I don't expect any of you guys that are new to
HTML to memorize these content models and all of the elements that belong to them. But really, it's just important that
you understand how the elements are categorized by HTML. If you understand those content models, you can take
advantage of HTML5's, and prove semantics, and write more meaningful documents.

Lesson3: Formatting Page Content

Formatting content with HTML

So far we've covered a little bit of the background of HTML. And the basic elements that are required for every HTML
document. In this chapter, we're going to begin exploring some ofthe individual elements that are used to format
content. And remember HTML is a markup language. And that means that it uses tags to identify content on the
page. Well once you're comfortable with the syntax behind how formatting content works. Then it really just becomes a
matter of learning which tags are available to you, and the options that you have when you're using them.

So before we get started too deep in the chapter of going into the individual elements themselves. I just want to show a
quick example of how HTML tags are used to format content.And this is sort of going to reinforce a little bit about what
we learned earlier in terms of HTML syntax. So I have the format.htm file open up here from the 03_01 directory. I've
repositioned my windows so that brackets is on the left hand side. The Chrome browser's on the right hand side. I've live
preview turned on so I can switch back and forth between them. Tell you what.Let me take Chrome, and let me increase
the size of the text.

Now, in brackets, right now, if I look at the HTML file within the body tag. I just have a single line of text that says, What
am I? And right now currently it is nothing. There's no tag wrapped around it whatsoever. So this is what we call
formated text. Now most browsers are user agents are going to display that. Using whatever there default formatting
is. And typically that's going to end up looking like a paragraph. But don't be fooled for other user agents. There going to
look at this text and not understand what it is. It's not going to have any identification.

There's no way for it to understand what this content is or what it's supposed to do. So to format it, all we need to do is
wrap it in whatever tag we want to use to identify it. Now, in the past, we've done things like paragraph, we've even
done a heading or two. I want to show you an element that we haven't used yet. And that would be the pre tag. That
stands for preformatted. So remember, when we're using a tag, we do the left angle bracket. And then the character or
characters that describe the element. And then the right angle bracket. And also remember that most tags are going to
require a closing element as well.

You'll notice that as soon as I did that an saved the file. If I look over there in the browser, it's changed the rendering of
the text. It now renders in a mono spaced font. What am I? So what does preformatted text do for us? Well,
preformatted text basically tells the browser that I want this text to display. However you see it within these tags. And
that means that it respects things like white space. If I added a bunch of space, it would add it, line breaks. So it allows
me to do things like displaying code snippets. And that's what it's typically used for, or poems, things where the
formatting is a specific way.

Most browsers default to using a monospace font because pre-format is used so often with code examples. Now, it
doesn't have to be preformatted text, obviously. We could change it to something else, such as an h4. So if I change both
the opening and the closing tags to h4,now you'll see that it changes and it sort of appears big and bold. Now, there's a
little bit of a misconception about what the browser's doing, versus what's going on within the code. You can see that
this is a heading four. If I change it to a heading one, you're going to see it gets a lot bigger.

If I go down to a heading six, which is the lowest tier of heading, it gets a lot smaller. And in old days of HTML before css
became really popular. It was pretty common for a designer to choose the heading they want based upon the size of the
text they were looking for. They wanted it really big they used the heading one if they wanted it really small the would
use the heading six. That is absolutely the most incorrect way to use headings possible. Later on in this chapter we'll talk
about the strategy behind using headings. But don't be confused by the way a browser renders something and what the
tag actually means.

Using cascading style sheets, and we'll talk about using them a little bit later on in the course. I can make an h1 look any
way that I want, I can make an h6 look anyway that I want. So what you're seeing over here when you see this
rendering. Is you're seeing the browsers default rendering for that element. But it doesn't have to look this way. One last
little thing here, let's change this from an h6 so we can tell what's going on inside it. To just your basic paragraph.Okay
now, we talked a little bit earlier about HTML syntax and nesting one element inside of another one.

To do that, we simply take content inside of one tag. Which, in this case, is the paragraph tag.And wrap an element or
elements of that in another tag. Let's say we want to emphasize the word am. Maybe I wanted to italicize it, for
example. Well, to do that. I could use the i tag. And remember, you have to have both the opening and the closing i
tag. As soon as I do that, it italicizes it. And now I could do things like bolding it, so you change this to a b tag. Now it's
going to change and be bolded. By the way, that blue line, don't let that distract you.

That's just part of the live preview. Whatever I click on, it's sort of highlights that for me. I've used italic and bold. Now,
both of those are presentational tags. And earlier, in HTML 4, they were stripped out because CSS was used. Basically it
was a strategy to remove all the presentational markup from HTML, and let CSS handle that. That's a really good idea,
but there are a lot of instances and cases. Where default presentation is necessary. So they were reintroduced to
HTML5.

But there was a movement away from presentational tags to logical tags. And you can do, sort of the similar thing with
logical tags. I'm going to replace b with em. Em stands for emphasis.And you can see it italicizes it. That's the default
rendering within the browser. And, to a person who's looking at your page visually. They wouldn't know the difference
between an emphasis tag and an italicized tag. Looks exactly the same. However, to machines such as screen readers,
there is a difference. A screen reader would actually change it's vocal inflection because this tag is now emphasized.
What am I? Where as if if was just italic, it would ignore it, because that's presentational. And it would just read it on a
flag monotone, what am I? So a lot of times you do on it emphasis something, instead of just changing it
presentational. And addition to emphasis it would have strong and strong is strongly emphasized. Which, in the browser,
is usually rendered as bold.So, they're a lot of tags out there that seem to do the same thing visually. But, behind the
scenes, there's actually a logical reason for using them or not using them.

This means, of course, that you're going to have to dive a little bit deeper into the elements themselves. And figure out
when it's appropriate to use them and when it's not. So, from a syntax standpoint, it seems pretty simple. All that you
need to do in HTML to properly format your content is wrap it in the appropriate tag. However, you are going to need to
spend some time learning about the individual elements available to you in html. And when they're appropriate. So for
the remainder of this chapter, we're going to focus on the most important and commonly used formatting tags. And dive
a little deeper into them.

Using headings

The first major formatting element group that we're going to take a look at are the headings.Headings are used to
structure pages and determine content hierarchy. So to take a closer look at that, we're going to be using the
headings.htm, which you can find under 03_02 folder.Now, at first glance in between the body tags there's a lot of
content. You'll see that I've basically kind of blocked this content up a little bit. I've used line breaks to separate content
by line, which allows it to see where different sections are going to go or different headings, that sort of thing.

But if we were to preview this in a browser right now, it looks just like one big giant block of content. So, we need to
start formatting it. Now, we'll be working on this particular file really foralmost the rest of the chapter. Just in this
exercise, we're going to add the headings. The very first line, HTML Essential Training, that is a great candidate for a
heading. So, to add a heading, we're going to use a heading tag. And we'll start by using the first heading, which is the h1
heading. And remember, for headings you're going to need both an opening and a closing tag. So, HTML Essential
Training, you want an h1 opening tag at the beginning of that, and a closing h1 tag at the end.

Now the next line below that is also a heading and I'm going to go ahead and format this one with a heading two or an
h2 tag. Again, remember we're going to need an opening and a closing h2 tag. If I save that and then switch back over to
the browser. Now we can see a little bit more structure coming into the page. We have a main heading at the top and a
subheading below that and then the rest of the content below that. Now the browser is going to show us the levels
of the heading based upon the size of the text. That's sort of the default way for the browser to show you that sort of
hierarchy that we were talking about.

The h1 is bit larger than the h2. That's a little bit smaller. And that's consistent all the way down.So headings go from h1
all the way down to h6. And if I were to go back into my code and change the h2 to an h6, let's save that. You can see it
becomes a lot smaller. In fact, it's even smaller than the body copy itself. But that's basically how most user agents are
going todisplay headings by just using their default settings. They're going to change the size of the text based upon
which heading it is.

And as people begin learn HTML, that's one of the things they can kind of get them into a little bit of trouble. Especially
in the early days of HTML before we started working with CSS. It was pretty common for designers to type in a tag
and then say, well that’s not quite big enough so I’m going to make it a heading too, oh, it’s still not big enough now I’m
going to make it a h1.Well that is the wrong way to think about headings. What we want to do is develop a strategy
around using the headings that’s based upon the level of the heading itself and not the size of it, because eventually
you're going to be controlling all of that through CSS.

I mean, using CSS if I wanted to, I could make the h6 actually bigger and bolder than the h1.So, really, size has nothing to
do with it, or the visually formatting has nothing to do with it. It's all about the structure of the document. So if I go back
into my code, I'm going to change the second one to an h1, and then let's add some additional headings. So we're just
going to use h1's to sort of illustrate the concept of properly structuring a file. Below that we're going to find a line that
says adding headings. I'm going to make that an h1.

If I scroll down a little bit, I will also see using paragraphs. I'll make that an h1, and then finally line breaks and I'll format
that using an h1. So let me go ahead and save that, and then go back into the browser. So we can see now that we have
definitive sections, if you will, within our page, but because of the fact that we used h1's for all of them each one of
them has exactly the same level of importance. And that's what headings are doing for us. They're denoting the level of
importance of that content.

Now if we just sort of scan this, we can that they really probably shouldn't all be important.HTML Essential Training is
the name of the course. So that's probably the most important heading. Formatting page content is the heading for this
particular page. So that's secondary, just below that, and then the other headings, adding headings using paragraphs
and line breaks, they're all probably subheadings of that one and all three of them are, are the same level of
importance. It doesn't look like any one of those three should be more important thanthe other.

So if I wanted to note that using headings in my page structure, this is what I'm going to do. I'm going to go back into my
file and I'll switch the second heading back to a h2. And then after that, I want to take each of those headings and make
that am h3. So I'm going to scroll down, we're using paragraphs. Line breaks. And go ahead and make that h3. So I'm
going to save that, go back up, and preview my page. Now that's perfect. That's exactly what I'm looking for.So prior to
HTML5, the only sectioning elements that we had for our page were headers.

Now, with the addition of HTML5, we also add some sectioning elements, that have been added that we can use. And
we'll talk about them a little bit later in the course. But honestly, headings are really still kind of the main elements
that we use when it comes to creating and ranking sections width in our page. So, you want to think of the page as
maybe like an outline.Like if we were going to make a table of contents or some type of outline on the page, what
should that look like? If I go back into my code editor I've installed an extension which will scan the page and create a
document outline based on the actual formatting of the page.

So if I go up to View and choose Show Document Outline. Don't worry about doing this. This is just for demonstration
purposes. You can see that the level headings that we used created the following outline. We have a main heading, a
subheading underneath that, and then subsections beneath that. So if you think about using your headings that way it
actually becomes pretty easy for your page to develop a heading strategy and how you're going to use them. And that's
a really important part of planning your site. So you want to make sure that you have a strategy for how you're going to
use headings within your document.

Now, before we move on, I want to give you a couple pieces of advice about using headings and developing a strategy
for how you're going to use them within a site. Now, for the most part, you're going to want to limit the number of h1's
that you have on a page. There are a lot of search engine optimization folks out there that'll tell you that you should only
use one h1 on a page. I've even seen some people say that that's a rule that you kind of have to do it that way.Well, to
be honest with you there is no hard and fast rule that says that. As a matter of fact, the specification says that you can
use multiple h1's, and even Google who really should know about search engine optimization, they tell you that you
don't get punish for using more than h1 on the page.

They're just looking as to whether or not they're being used logically. So, if you have two top level headings that denote
two sections of equal importance, there's really nothing wrong with doing that, you just need to be logical in your
approach to doing it. The next that you want to do, is you don't want to skip a series of headings. On this page, for
example, we went from h1 to an h2 to the h3 for the sub sections. Well, we wouldn't want to jump straight down to an
h5.We wouldn't want to go h1, h2, h5. The only time that you might change that is if you have a site wide strategy
and an element was going to be in h6 based on the way it was formatted.

You didn't have an h5 and h4 above it. But for the most part, you want to go in order. You don't want to skip things
based on that. So one of the things that you're going to need to do as you begin planning your websites is think about
the content that shows up on each and every page. Then, based on that content, you can begin to develop a heading
strategy that denotesthe importance of the sections that you are going to be creating. Just be sure to remember that
using headings on your page should be driven by properly structuring the information andnot by the visual formatting
requirements of the page's content.

Formatting paragraphs

Paragraphs are perhaps the most basic formatting tag that you'll use in HTML. In fact, if you don't wrap text in an
element, as we've discussed, most browsers are going to default the formatting like a paragraph. In fact, I have the page,
paragraphs.htm open here from the 03_03 directory. It's kind of picking up right where we left off in the last
exercise. You can see we still have our headings. Notice that the remainder of the text remains unformatted. Well if I
were to view this page in a browser for all intents and purposes, visually it looks like there's formatting applied.

And that's one of the things about user agents like browsers. HTML has to be backwards compatible, that means they
have to support earlier versions of HTML. And they also support really loose syntax rules, for example having
unformatted content would cause some languages to simply fail and the whole page to fail. Well HTML is much more
forgiving. It basically says well, you forgot to format it, probably wanted to format it like a paragraph so that's what I am
going to do. It's nice that it does that and it can save you a lot of trouble sometimes, when you do forget to do
something.

But it also has the opposite effect. Sometimes it makes you think that something's happened, that hasn't yet. So, as
you're formatting your page content, you want to make sure you pay particular attention to your paragraphs. It's really
easy to forget about them sometimes because they're so basic, and sometimes, you'll have malformed
paragraphs. Paragraphs that open but don't ever close. Or text like this that's not formatted at all. So you always want to
double check your structure and make sure your page is properly formatted. So we're just going to go through here and
add a few extra paragraphs.

After the h2 I'm going to go in and add a paragraph element. Now remember for a paragraph element we're going to
need both the opening and the closing paragraph tags. So it should surround this entire paragraph. Below adding
headings, I'm going to come in there and add another paragraph. Remember opening and closing tags. And then after
h3, the section on using paragraphs, we're going to add one there as well. Now you'll notice there that it mentions that
the paragraph tag indicates an individual paragraph and it should be used forevery single individual paragraphs.
So not just wrapping a big block of text. So if we go down below line breaks, you can see that we do have one big sort of
block of text. But I've got a few line returns in there that create one, two and three sections. We actually want each of
them to be in their own paragraph so I'm going to go in and surround each of them with an opening and a closing
paragraph tag. Now as soon as I do that, I'm going to save the file and preview that in my browser. Now it looks very
similar to what we had before but notice that the text at the bottom is enclosed in individual paragraphs.

Now I want to take a brief moment and talk about the vertical spacing between these paragraphs. You'll notice that
when we go from a heading to a paragraph, paragraph to a heading, we get sort of a blank line. Or an empty space
here. That's basically because all HTML elements have both top and bottom margins. Vertical margins in CSS
collapse. What that means is if you had a 20 pixel margin on the bottom of this heading. And you have a 20 pixel margin
at the top of this paragraph. You'd still only end up with 20 pixels between them.

It wouldn't add to 40. It does that so that we don't have double spacing between our paragraphs. That sometimes leads
people to do something that they shouldn't. So, let's say for example, that we wanted a little bit of extra space between
this paragraph and the address that I have here at the bottom. So a lot of times you're going to see something like
this, where somebody puts in an empty paragraph. And they might do something like placing any character like a non-
breaking space character. Now don't worry too much about this. We're going to talk about HTML character entities in
just a moment.

That's just so that this paragraph will have a little bit of content even though it's invisible content. So if I save this and go
back in the browser you can see now that we have a lot more space between that paragraph and the address below
it. Well, this is the absolute wrong way to do this. If you don't have content inside of that paragraph, you don't need to
have an empty paragraph there. Cascading Style Sheets handles all of our visual formatting. If we want a little extra
space between one paragraph and the next, it's pretty easy to use CSS to do that. Now one more thing about
paragraphs, real quickly, before we move on.

I, I mentioned earlier that you need to have an opening and a closing tag for a paragraph.That's not actually 100%
true. In the HTML specification the closing tags of paragraphs are actually optional. If I come down to these last three
paragraphs and I take the closing paragraph tags off of them. going to do it for all three of them. And no you don't have
to do that along with me, we're just demonstrating something here. I save this. Now look Brackets is telling me I've got
an error. It's saying hey you really need closing tags with that but to be honest with you, you don't.

If I go back into my browser it's rendering it just fine. The closing tags of paragraphs are considered optional, however I
would recommend that you as a new author don't make them optional. Make sure that you have an opening and a
closing tag. I don't leave them off ever, and I can't think of a really good practical reason to do so. Even though they're
optional within your code, they help the flow of code, they tell you where one section of content ends and another
begins. So it's a really good idea to make sure that you have both of those tags, the opening and the closing one.

Okay so that's it. Overall paragraphs are pretty straight forward again, just make sure to avoid having empty paragraphs
in your code and make sure that all of your paragraphs, opening and closing tags are wrapped correctly around the
appropriate page elements.

Controlling line breaks

There will be times when you need to force a hard return in your copy, but you don'tnecessarily want to start a brand
new paragraph, or in the other new element. In those instances, you're going to want to use a line break. They're very
easy to use and we're going to demonstrate this using the breaks.htm file, which you can find in 03_04 in your
Exercise_files directory. So, with this page opened up in my code editor, if I preview it in my browser, I can see that
down here at the very bottom, I have an address for Lynda.com.

It's at 6410 Via Real, Carpenteria, California 93103. Well, that is actually where I'm at right now.It's a beautiful location. I
highly recommend visiting Carpenteria, it's a gorgeous little town.What I would like to have is the name of the company,
the street address, and then the city and state. I'd like to have them all on separate lines. If I go back into my code
editor. So, if I scroll down here to the bottom of the page, I can see that the address is contained in a single
paragraph. Now, that's actually a really good thing because those elements belong together.

They're all part of the same address. If, to achieve my spacing goals, I put them in separate paragraphs, they would no
longer be related to each other in any way, and semantically it would be incorrect. So, I need to keep them in the same
paragraph because they're part of the same address. So, to achieve my effect of having them each on a separate line, I'm
going to use the line break character. I'm going to place my cursor just after Lynda.com, and I'm going to use a line break
tag, which is the br tag. Now, earlier in the course, I mentioned that there are some elements that don't need closing
tags.

Line breaks are one of those. So, whenever a line break is encountered in your code, your user agent knows to go ahead
and put a hard return in and go down to the next line. Now, the next thing I'm going to do is right after the street
address, 6410 Via Real, I'll go ahead and add one more line break. So, if I save this and go back into my browser, I can
see that now, my address visually looks kind of the way that I want. Lynda.com, the street address, and there's the city
and state. Now, also notice that there's a good bit of difference visually in the way line breaks and paragraphs are
formatted.

Notice that paragraphs sort of have that extra space between them that sort of visually let you know that that these are
separate elements, whereas line breaks just do that hard return right back down to the next line, and you can force
them anywhere that you want. Now, you're probably going to see these occasionally in other people's code. You might
see them look like this, where they have the br, a space, a forward slash, and then the right-angle bracket. Well, that's
what's known as a self-closing tag. Back in the days when we were using XHTML, XML had some very interesting
rules, and one of the rules of XML is that if you open a tag you have to close it.

So, even for something like line break, where you don't necessarily have to have a closing tag because there's no
contents in the middle, XML said, oh yes you do. You need a closing tag.So, they came up with kind of a compromise, if
you will, which was to create a class of tags that were self closing, meaning they were both an opening and a closing
tag. And this is how they did that. You might also see that when you deal with image tags, meta tags, all those tags in
HTML that don't require a closing tag, in XHTML, are going to be formatted like this.

There's no harm in doing it either way. If I save this and go back into the browser, you can see that it doesn't change the
way that it's visually formatted. It's simply another way to write that.We don't need to do that in HTML 5 anymore,
but honestly, if you do have that in the code, it's not going to hurt anything. So, one thing to keep in mind is that when
you use Iine breaks,they don't actually create a new section of content. So, all of this address is still within the same
paragraph. You're just going to use them whenever you need to force a hard return without creating a new paragraph.

Emphasizing text

Often when formatting documents, you're going to need to emphasize content in a specific manner. Let's take a look at
a few of the ways that HTML allows us to do that by using the emphasis.htm file found in the 03_05 directory. Now, this
is very similar to the pages that we've been working with. But if I look at this in the browser, you can see that we have
slightly different content here. We've got more descriptive text talking about the different ways that wecan emphasize
text. Now in this exercise, we're going to be using four main tags. The bold, strong, Italic and emphasis tag.

And you can see here, we have some text that sort of describe what those do. So, let's take a closer look at them. We'll
start by using the bold tag. So if I scroll down, I can see that here we have a definition list and we'll talk more about
these types of lists a little bit later on in the course. But for right now, a definition list is split into two parts. You have the
term, which is the dt tag. And then you have the definition, which is the dd tag. So, what we're doing is we want to bold
all of these terms. So I'm going to find each one of these, and then I'm going to place my cursor just inside the opening
dt tag, I want to wrap the text with a b tag.

So that means, I need an opening and a closing bold tag. You also want to be very careful with where you're positioning
these. You want to make sure that they're fully nested inside the dt tag. So where you place the opening and closing tags
are very important. So we're going to do the bold tag. The strong tag. The text for the italic tag. And then finally, just
below that, we're going to have the emphasis tag. There's one more phrase that I want to bold. If I scroll down all the
way to the end, I can see where we're discussing the cite tag and right here in the second sentence, I want to bold the
text cite tag.

So again, to use the bold tag, we use both an opening and a closing tag. So I'm going to save this, preview it in a
browser. And you can see, sort of the first of our label there. We have all of our terms are bolded right now. The bold
tag, strong tag, italics tag. And then we have the cite tag down there that's bold, as well. Now, this is just purely
visual. It's purely presentational. We haven't changed the meaning of those elements at all or added anything to them
semantically.The bold tag, all it does, is just tell the user agent, hey, this text should be displayed as bold.

So, it's simply a visual thing. Now, there is another way to have our content displayed as bold text, but it has a slightly
different meaning. And that would involve the strong tag. So what I want to do, scroll down and towards the end of this
underneath the heading that says, wait, what? There's a sentence that says, you're probably wondering why there are
multiple tags for bolding and italicizing text. And then right after that there's a sentence that says, if you are,don't worry,
you're not alone. So, what I want to do is I want to strongly emphasize the text,you are not alone.

So, surrounding the phrase, you are not alone, I'm going to surround that with a strong tag.Now just like bold, for strong,
I'm going to need an opening and a closing tag. So I'm going to save this, and if I go back into my browser, you can see
the text says, you're not alone is now in bold. It doesn't look visually like there is a whole lot of difference between the
bold tag and the strong tag. But in fact, there is. As we mentioned, the bold tag is purely presentational, whereas the
strong tag, actually means that you are strongly emphasizing the text.

It has a semantic value. That means, so say, for example, a screen reader is reading that text.If it's capable of doing a
different vocal inflection, it knows to really strongly emphasize that text.So it might actually say that louder or
emphasize it more. Now, this was a really big debate a few years ago. When XHTML came out, the desire was to strip all
presentational mark up out of HTML, so the bold tag and the italics tag were removed. And the strong tag and em tag
were basically said, use these in their place.
When HTML5 came back around, the thought was, well, you know, there are times when visually, you might want to
bold text or italicize it and you don't necessarily need to emphasize it. For example, in this case, we wouldn't want the
bold tag to be read any stronger up here just because it's a term. But visually, we might want to represent it as
bold. Now bold tag allows us to do that. All right. Now we have a similar relationship between the italics tag and the
emphasis tag. So let's take a look at those. And I'm going to scroll back up to our definition list.

And I want to focus on these two elements, the italic tag and the emphasis tag. What I want to do is in the italics tag,
you can see that the last sentence here says, helpful for phrases, terms or any text that's normally displayed in italics. So
what I'm going to do is I'm going to surround the word italics with the i tag. So i for italics. And then below that in the
emphasis tag, we have a sentence here that says the emphasis tag or em tag, denotes text that is usually emphasized
more than the text around it. Although this tag is usually rendered in italics.

And so what we want to do is again, we're going to take italics there, and we're going to wrap that in an italics tag. So
there we go. All right, now, let's save that. So in those cases, I want that text to appear italicized, but I don't necessarily
want to emphasize it. There are times when I do want to emphasize text. So what I'm going to do now. All right. So let's
scroll down to the paragraph where we added the strong tag earlier. Right after the strong tag, we have a sentence that
says, this is one of the most confusing aspects of learning HTML. The easiest way for me to explain it is this.

One set of tags is presentational, while the other is logical. Now, I would like the term presentational and the term
logical to be emphasized there. So what I'm going to do, is I'm going to surround the word presentational with an em
tag. And just like the strong tag, I'm going to use an opening and a closing tag for both of those, and the same thing for
logical.We're going to do an em tag there as well, and I'll save that. Now again, when we go back into the browser, we
can see that the i tag is italicizing the word italics in both of these paragraphs.

And when we go down into the description down here, presentational and logical are being italicized even though
they're using a separate tag. So just like bold and strong, visually they look the same. But just remember that
semantically, they're very different. You know, if the difference between these tags isn't crystal clear to you at first, don't
worry. As I mentioned in the text, you are not alone. Just read through this page, where I give a little bit more
information about the differences between them, and research the tags as much as you can.I'd also recommend paying
attention to how other authors are using them, because over time, you'll get a greater understanding of them.

And you'll develop a use case for when you should use one of the elements over its counterpart.

Displaying special characters

There are going to be times that you're going to want to use a character or a symbol that's not readily available on your
keyboard. What's more, you might want to use a symbol that's actually reserved for use by HTML that you're really not
supposed to use. For example, using the left or right angle brackets in your content could actually cause rendering
errors. So if you want to use those special characters, you're going to have to use something, that's called a named
character entity. And in order to explore those we're going to be using the special.htm file found in the 03_06 directory.

And I have this page open and you can see right off the bat that there's a potential problem with it. Brackets does a
really nice thing, whenever it finds what it thinks to be an error in code.It gives me this little warning by code coloring
the text red. And the potential problem is this angle bracket right here that we're using in the text. If a browser or other
user agent sees this, it's probably going to assume that we wanted to start opening a tag and just didn't finish it. That
could lead to syntax errors, validation problems and even rendering errors.

Now if I look at this page in the browser, I can see that it's rendering okay but that's just because Chrome is being extra
nice to me at the moment. That's definitely not something you want to try and get away with. So let's talk about
displaying special characters, and the text that I have here for you the page describes it pretty well. So as I mentioned,
using the left angle bracket can cause rendering issues. But we have also other characters that are available to us that
you can't really type through a keyboard, so something like the trademarks symbol or the copyright symbol. Maybe it's
something that is used by other languages or something like that.

So that's where we turn to named character entities. Now these are special codes that browser user agents will
recognize them and then replace them with the character that you need. The syntax form is really, really straight
forward. We start with an ampersand, then we follow by using the named entity itself, and then we'd follow that with a
semicolon. Let's go take a look at that. So if I go back into my code, I can replace this left angle bracket with an
ampersand, sowe always start with an ampersand, and then I'm going to type in L-A-N-G.

Now how do I know to type that in? Well, I just happen to know what the named character entity is for left angle
bracket. So these are some of the things that you're just either going to have to know or have a reference handy, and I'm
going to show you at the very end of thisthat I've got a nice link for a reference for you. So there is ampersand L-A-N-G
semicolon. If I save this, go back to the browser, I can see that it doesn't really render any differently. But what's nice
about that is the browser is recognizing that named character entity and replacing that text with the actual symbol that
we want.
Now, sometimes, that's easy to do and sometimes, it takes a little bit of work. Let me scroll down, and in the second
paragraph below that, you'll notice that we have some text here. It says, you start with an ampersand, then we
displayed an ampersand, followed by the named entity that's followed by a semicolon. To display the ampersand for
example you would type in, ampersand. Well that's not right at all. If I go back into the code I can see I'm having
problems.You see that is the syntax for the named character entity for the ampersand. So there are two things here that
I need to be correct.

One, I don't want just an ampersand here, you can see that's code colored red by brackets to let me know that that
could be a problem. I'm going to replace that with the named character entity, which is ampersand A-M-P semicolon. All
right, down here, I actually want this to display within the text. In order to do that, what I'm going to do is I'm going to
follow this named character entity because, remember, that's just displaying the ampersand, with the text A-M-P
semicolon. So it kind of looks like I'm doing it twice, but bear with me.

These are just individual characters, A-M-P semicolon. This is actually a named character entity which will display the
actual ampersand. So if I save this, go back in the browser and refresh this. You can see right there, I'm getting the text
to display exactly the way that I want to. And here we still have our ampersand. Now just so you can have a little bit
more practice, let's take a look at the copyright and trademark symbols. So if I go through there, I want to replace this
text with the actual symbols themselves.

So I'm going to take copyright, and replace that. So remember, we start with an ampersand, and then after that, the
name of the named character entity. Now a lot of these, you could probably guess if you had to. So for this one, we're
going to use copy, and then a semicolon.For trademark, see if you can guess that, so ampersand trade. I'm guessing that
most of you were able to guess that properly. So if I save that, go back in the browser, I can see indeed that I'm seeing
my copyright and trademark symbols. So some of these are pretty self explanatory.

Some of them are pretty easy to guess, but there are literally hundreds of them. So it’s really difficult to keep track of all
of them or have them all memorized. That’s why it’s nice to have a little reference and I’ve given you a link here to a
page on Wikipedia, where we have a list of XML and HTML character entities. If I scroll down, you see I have a really big
table here of HTML character entities and you can see the character that's displayed and the name of it. So to display
quotation mark, for example, you would do ampersand, Q-U-O-T and then a semicolon, so that's kind of how that works.

And as I scroll through here, you can see how many of them there are and there are a lot of them. So the hardest part of
using these named character entities is for the most part remembering them. That's why it's a good reason to bookmark
a page like this, so that you can have a reference like this Wikipedia page handy while you're authoring your own HTML.

Controlling whitespace

As you first start authoring HTML you're probably going to notice what seems to be a really curious behavior among
browsers regarding your use of whitespace. You see, no matter how much whitespace you put in your content, your
browser is going to, for the most part, ignore everything after that first space of character. So I've got the
whitespace.htm from 0307 I'll put up in my browser and you can see I have the sentence that says by default browsers
will ignore any white space after the first space.

To add additional white space you must use the non breaking space entities. So you can see I've got the HTML character
entity there for that, so to kind of experiment around with that a little bit, I've got the same file opened up in my code
editor, and I am going to do just what I suggest, I'm going to try it right here inside this paragraph between these two
sentences. I'm going to add a lot of white space. All right. So you can see there's a lot of white space between the first
sentence and the second sentence, even though they're in the same paragraph.

So if I save this, go back into the browser, nothing happens. So within your code, any amount of white space after that
first character of y space is ignored. And that's basically because a lot of code is written by people that know
what they're doing. Some code is written by people that don't know what they're doin,g and some code is written by
machines. And when machines are formatting code, sometimes they'll just put empty space all over the place without
really meaning to. And so to guard against that, HTML basically says you get one character of whitespace, that's it.

So if you want to add additional whitespace, we use a character known as a non breaking space. So again, if I was going
back into that paragraph, I could use the character entity Ampersand NBSP and semi colon. And just to kind fo show you
want this does, I copy this, and I'm just going to paste it a few times. Maybe four times. So we have the initial white
space and then we have one, two, three, four non breaking spaces.

So if I save that. Go back over to the browser, now you can see that we're getting a little additional white space. Now
that works, and I know a lot of people that rely on this for visual formatting, I want to caution you against that. That is
not what the non breaking space is for, so in this day and age we have cascading style sheets that control all of our visual
formatting. So, if I need a little extra indentation, if I need some space between certain characters or entities, CSS gives
me the capabilities of doing that. What the non breaking space is for is just that, to create a non breaking space.

Let me get rid of all that stuff. And if I go back to the browser, I can see that I have the text Formula One right there. If I
resize the browser. Notice that the word one breaks as I resize it, as you would imagine. But if I go in my code, and I
scroll down, and between the formula one Ireplace the default white space with a non-breaking space character, now, if
I save that and go back into my text, if I resize the browser. Notice that Formula and One won't break separately
anymore.

It breaks as one individual character. So that's really what a non-breaking space is for. It's okay to occasionally use it to
kick in maybe a little bit of extra white space. So be very careful about how you use it and that you don't use it to create
false margins, indents, or tabs. That type of visual formatting is the responsibility of CSS, not HTML.

Displaying images

Although it doesn't technically count as formatting existing content, inserting images is an important part of writing
HTML. So, we're going to take a brief moment to go over the basics ofplacing images on a page. To demonstrate this,
we're going to use the images.htm file which Icurrently have open from the 03_08 directory inside my browser. As you
can see our sample image on the page. This is actually taken down in the low country of South Carolina. To place an
image on the page you use an img or image tag.

Now images are considered what we call replaced content. And that means that when they're encountered, the browser
or user agent will use the information within that tag to replace its contents with the resource that you've asked
for. With that in mind, the attributes of the image tag become incredibly important. The src or source attribute is used to
tell the browser where to actually go out and find that image. The alt attribute allows you to pass along descriptive text
which is representative of the image, and is very useful for screen readers or other assistive devices.

You also have the width and the height attributes. Now these are optional, but they can be used to pass the dimensions
of the image to the browser. If you omit them, the browser will still display the image at its native width and height, but
there might be some rendering issues.So it's always a good idea to put them in there, unless there's a compelling reason
to leave them off. So I'm going to go back into my code editor, where I've opened up the images file from that same
directory. Now, let's take a look at the sample syntax before we actually create our own. We have our image tag right
here after the opening paragraph tag.

So its flow content is just right inside the inline level content within the paragraph. We have our source attribute, and it's
pointing to _images/lowcountry.jpg. Now, this is probably the most difficult part for folks that are brand new to HTML,
learning in terms of how to resolve this path, or how do I know which path to type in. Well, essentially you're describing
to the browser where to go find this image from your current location. So you'll notice if I look over here in my folder.

I'm inside the images.htm. And inside of this directory there's another folder called Images. If I open that up, I have two
images inside that. I have the Lowcountry.jpeg and the sc_flag, which we'll use in just a moment. So essentially, when I
type in this path, I am saying. Go find the Images folder, go inside that folder, then go and find lowcountry.jpeg. So the
more you do it, the better you'll get at resolving that path.

Now, this is absolutely critical. If any of this is wrong, if I spell something wrong, if I do the spacing wrong, then it just
doesn't work. So, for example, if I come in and remove the underscore. From the images directory, if I go back in the
browser, you can see the image doesn't display anymore, so spelling counts, everything counts, when you're resolving
these paths. After that, I pass the width and the height in, notice, I don't use any units of measurement. This is in pixels
and I just type in 300 by 300 if that's the dimensions, which it is. Now you can alter these, if I wanted to display this at a
slightly different size, I could say 400 by 300.

And if I save that, you can see it's doing it for me, but it's distorting the image. And I really don't recommend that. I want
to make sure that as a best practice, you're displaying the image at a 100% of its size. And the last thing that we have
here is the alt text: low country South Carolina.So here I'm just trying to do some small, short, descriptive text of the
image, so that if the image doesn't load or somebody's using a screen reader. That they're still getting some information
about the image itself. Now the last thing I want you to notice is that the image tag does not have a closing tag, doesn't
need one.

So you just use an opening IMG tag. All right, so now we're ready to do our own image. I'm going to scroll down to the
very last paragraph. And right down there I'm going to place my cursor just after the opening paragraph tag. And I'm
going to go ahead and open up an IMG tag. So again, you don't need a closing tag, just an opening IMG tag. And then
we're going to start passing in some attributes. So I'm going to type space right after IMG, still inside the tag, and I'm
going to start by using the source attribute, or SRC.

Inside that I'm going to type in _images. Again, I need to tell it to go inside that folder. Then I'm going to type in a
forward slash and I'll say go inside the folder. And then find sc_flag.png. Now you'll notice that my code editor's trying to
help me along the way here, which is very nice of it.Most authoring tools are going to give you a little bit of help in
finding these images, but I want you to spend some time resolving those paths on your own, so that you'll know whether
the path is correct or not.

Now in this case, we're finding a folder and going down into it. If we wanted to go up a directory. We would use ../ to go
up one directory and then we could find the image if we needed to. So now I'm going to save this. And if I were to look
at the page in the browser, I would actually see the flags. So all the other attributes other than the source area really
optional. You don't necessarily have to have them. However, they are very important. So I don't recommend leaving
them off. So after the source, I'm going to type in width. And for width I'm going to do 400 pixels, because this image is
400 by 400.

Then I'll follow that by height. And I'll do 400 as well. You can do height or width first. Does not matter. And then right
after that, I'm going to use my alt text. And for my alt text. I'm just going to type in South Carolina flag. And I'll Save
that. And if I go back into my image, it doesn't look any different, but I'm passing the information I need to into it. Now
there are other attributes that you can use. You'll note, for example, that the text doesn't really wrap around these
images.

The image and the text are considered to be on the same line. Your user agents don't really differentiate between the
fact that this one is 300 pixels tall and this one is only 16 pixels tall.To it they're both on the same line. So if we wanted
to make the text wrap around it, there are some attributes that we can use. For example, I could come up here to my
image source and I could use the align attribute, and I could set align equal to say right. If I did that, and went back in,
you would see that it's aligning this to the right and it's wrapping the text around it.

Now this has actually been deprecated from HTML because this is now the responsibility of CSS. So I don't recommend
using them. I do want to point out however that they are supported by almost all browsers out there. So, in a pinch, if
you have to do it, you could do a line left, or a line right, and the text would wrap around it. However, strongly
recommend learning how to do that with CSS, instead of using those attributes. Okay, so as we've seen, the syntax
required to replace an image on the page, really isn't all that complex. Remember, you need to test the path carefully to
the image to make sure the browser's going to be able to retrieve that image.

And do not forget the alt attribute. Since it's important for all of your sites to be as accessible as possible, you really
ought to view the alt text as required. So it's a best practice to get in the habit of always adding it.

Challenge: Formatting page content

Welcome to your first challenge. In this challenge, I want you to practice not only using the correct syntax for formatting
content but also the decision making that goes behind it as well. I want to warn you. This is the biggest challenge of the
entire course and you're going to be editing multiple files. So, don't be surprised if it takes you a couple of sessions
to get all the way through it. There's nothing wrong with that. Basically, in the challenge, you're going to be editing a
reference site that I've created for the HTML Essential Training course.

This reference site has a page that gives a little brief Introduction to HTML. It talks a little bit about its history. There's a
page on HTML Syntax. It goes over the different HTML Syntax rules.There's a page on structuring pages properly, which
we'll cover in a later chapter. There's one on Creating Links. There's an HTML Reference that has a glossary and a table a
the bottom of it that shows common named character entities. And finally, there's a Next Steps page that talks a little bit
about what to do after completing this course and gives some references that I think are very valuable for anybody
learning HTML.

So as part of your challenges, you'll be working on different portions of this site. So for our first challenge, I want you to
go into the 03 underscore 09 directory. Inside of that folder, we've got all the files that we'll be working on. You'll notice
that there are several HTML files, there's intro, links, next, reference, structure and syntax. And then there's also this
file. This is the lab underscore instructions.txt and this contains all of the instructions that you'll need for this
challenge. Now I'm going to go over them for you in just a moment, one by one.

But it's nice to kind of have this handy when you're working, because you can always reference back to it and it'll tell you
what to do next and you won't have to keep coming back and watching this video. So, let's go through step by step what
it is that you'll be doing for this challenge. The very first thing I want you to do is to determine a heading strategy for this
site.Now this is going to apply to all pages. What you're going to do is you're going to open each of these pages, intro
links, next, reference, structure and syntax. Read through the text. And then determine which content should be
represented as headings.

And then what level of heading you should use or each page. Is it an h1? Is it an h2? Is it an h3? That sort of thing. You
really want to focus on being consistent in how you assign headings on each page. So, if you, you use one strategy on
one page, you're going to use it on the other. So your going to go to each of the pages and format headings based your
tragedy. Now, I've tried to make this a little bit easier or you. I'm going to switch over to intro.htm and show you what I
mean. You can see the text is group kind of on its own line andthat maybe a single line like you see these or it may be a
big paragraph.

And I've tried to offer some separation between those to make it little easier to read those. So, it shouldn't be that
difficult to sort of scan through these pages and figure out what needs to be a heading. The challenge here is going to be
determining a strategy for these headings and assigning values to them. After you're done determining heading
and applying those to pages, the next step will be formatting paragraphs. Now, you're not going to need to do this in
every page. You're just going to need to do this to the intro.htm. So again, going back to intro.Scanning through its
content, you're also going to need to consider which of these blocks of content should be paragraphs.
And then format those appropriately. Next, we want to take a look at controlling line breaks.That'll be in the next.htm
file. And there's a specific section called learning web design. Below there that are four recommendations. Now each of
these recommendations has an initial sentence that's followed by descriptive text. What I want you to do is use a line
break to format those paragraphs, so their initial sentence appears on its own line. And just so you know what I'm
talking about. If I go to next, you can see that we have this section down here about learning web design.

It says, learn how the web works and then some descriptive text. Determine an area of focus and start there and some
descriptive text. So right now, all of these are in the same paragraph.So they would just appear as one block of
copy. What I want you to do is use line breaks to make sure the first line is on its own individual line within the
paragraph. Now staying with next.htm, your next task will be to determine emphasis for text. Now I want you to read
this set of instructions very carefully because it'll give you a hint as to which tags I'm expecting you to use.

So again, we're going to be in the next.htm file. All those four pieces of advice that we were just talking about in the
learning web design section, you need to determine how to best emphasize that first line that you put on it's own line
break in each paragraph. Think about in ways that you could isolate that line or emphasize it in a way that denotes, its
importance to the rest of the paragraph. Now in the last advice paragraph, which is break things. Which I'll show you in
just a moment. You want to display the quotes I have there in italics. And in the same paragraph, the last line.

Always challenge yourself. I want you to emphasize that, so that its importance is indicated. So there's little semantics
that I was just giving you for those instructions. So if I go back over to next and I go down to the break things, you can
see that I have some quotations here. So I want to tail size those. And in the very last sentence, always challenge
yourself. You want to emphasize that. And then finally, there's a list of resources below the advice section. You want to
make sure all the top-level list items appear in bold. So again, going back to next.

If I scroll down, I can see a list of resources down here. Most of them are single lines within paragraphs, but some of
them are descriptive text. You want to make sure that you're bolding everything, except for the descriptions. So as
you're reading through those, it should be pretty easy to determine which of them need to be bold and which of them
don't. Next, we'll be displaying special characters. To do this, you'll navigate to the reference file. Down at the bottom,1
you're going to find a table down there that displays common named character entities. Now, you're not going to need
to do a lot of this. My advice is to go ahead and preview that page in a browser and, and actually use that actual table as
a reference.

Once you want to do then is go back into the code and add the appropriate name character entity into the first table
cell. So you're providing a visual of that character. So, switching back over to the reference.htm. If I scroll down, you'll
find this table down towards the bottom. Here we go. And you can see that the first table cell right here is empty. That
needs to have the quotation named character entity inside of it. One more thing that I want you to do is in the definition
for Elements, wrap the word tags in quotes using a left and right quotes special character.

So, if I go back to reference. Let me show you what I'm talking about. If I scroll up into these definitions. I can find the
definition for Elements right here. And it says, HTML elements consist of an HTML tag used to identify the content
and then the content itself. It's often used interchangeably with the term tags. So this is the one right here that I want a
left quote on this side and then a right quote on this side. One last thing that you need to do. I told you this was a very
big challenge. Is you're going to be inserting an image. And you want to do this in the intro.htm page.

There's actually an existing image already at the top of the page. You're going to use that as a reference. You'll note an
attribute called class. And it has a value of flowRight. Now this is being used by CSS to control styling in terms of the way
that the text wraps around that. We're going to learn more about that later on. But for right now, you just want to make
a note of that. When you scroll down, you're going to find a paragraph that says, Shortly After the 1.0 specification.At
the beginning of that paragraph, you want to insert an image that has the following values.

It should point to the 200 pixel dash W3C icon.png, which you can find in the images directory. So, the source attribute is
going to need to point to that. You're going to use for the alt text the W3C logo. It has a 200 pixel width and 136 pixel
height. And you want to apply a class and you can use the image above it as a reference, you want to apply a class
attribute of flowLeft and you need to spell it like this and capitalization does matter. Going into intro.

If I scroll down, I can see the existing image. It's right there. And, if I scroll down even further, I can find the paragraph
that I'm looking for, which is right here shortly after the 1.0 specification.So you're going to place an image right there
and give it the attributes that are mentioned in the instructions. Okay. Now when you're finished, there's one thing I
want you to do and that is to go into the finished files directory and compare the results that you got with my finished
files.

Now you can find those in the 03 underscore 09 finished files directory. Don't peak before you finish. I really want you to
see what your results look like next to mine. And in most cases, they'll probably match. But if they don't, I want you to
really think about why they don't match.Was it because you disagreed with the strategy that I used for headings,
paragraphs or probably emphasizing text. Those are the three areas where you might disagree with me the most. A lot
of times, as I mention here in the text, those decisions are indeed judgement calls and they may not have a quote,
unquote right answer.
However, if your files do disagree with me or don't match up. Make sure that number one is not a syntax error and you
didn't type in something wrong. And number two make sure that if you're results diverge from mine that the decision
making that you use was based on valid semantic HTML. It's okay to have disagreements about the way certain things
should be structured. That's fine. But you want to make sure that regardless, your using valid HTML and that your code
really reflects the semantic meaning if what you're wanting to do.

I also recommend that if you're looking for a little bit more practice, go through all the files and compare your formatting
to the existing formatting and make sure that it's consistent all the way through. I know that's a lot, as I mentioned this
was a really big challenge. But I wanted you to have the experience of having to consider multiple pages across your site
when developing strategies for how content is going to be formatted. So be sure to go slow, take your time on the
challenge. And then when you're done, check out the finished files andcompare them with your work.

But above anything else, have fun.

Solution: Formatting page content

- [Teacher] I hope you had fun with your first challenge. I know it was a big one, and it probably took you a little bit
longer to get through it than you were anticipating. I hope you were able to reinforce a lot of the things that we've
learned in the previous chapter. What I wanna do in this movie is just kinda go through the finished files with you, and
explain my reasoning for why I formatted things a certain way. That way, if you disagree with me or if your code doesn't
match up, you can at least sort of understand the thinking that I used when I structured mine, and sort of adjust yours
appropriately or determine if you liked your strategy better, which in some cases you might.

There's nothing wrong with that. So the very first step was determine a heading strategy, and I'm gonna show you what I
did by just going over to the intro.htm page. So the very first heading on the page, which is HTML Essential Training, and
you may have noticed that, that is consistent on every single page. That's the first line of text. It's the name of the
course, so to me, that becomes the most important heading on the page, and I formatted it appropriately with a heading
1. Below that, we have the title of each page. So every page has a different title,and this is unique to the page.

So to me, that's kind of a subheading. Now after that, within the content, we would also find headings, and these
headings typically indicated the beginning of a section of content. So what I like to do there is use a heading 3,
again, 'cause it's one level below those main headings at the top. And I was pretty consistent with that throughout all of
my pages, and if I preview this in the browser, you can kind of see the results to this. Now some of you out there might
be going, "Wait a minute, HTML Central Training was in h1. "Why isn't it bigger than the h2?" And again, that's the magic
of CSS.

We'll learn about that later in this course. The styles that I wrote for this page actually de-emphasize that even
though it's considered to be "the more important of the headings." So as I scroll through the content, I can see each of
the sections start with one of those heading 3s.Now the only part where yours and mine might differ a lot is on, say,
something like links. If I go to the links.htm page and I scroll down, I can see that in this section of link types, there's
actually two types of links that I talk about: absolute and document relative.

Now I went ahead and used an h4 on those because they belong to the section above them,and that's why I use an h4
there. Now you may not have known that they belonged to the section above it. If you were reading through that, you
would've had to say, "Okay, well those are two different link types." And maybe you just scan through it or maybe you
didn't read through it or maybe you just didn't realize that it belonged to that. So if you gave those an h3 as well, that's
something for you to think about. That actually occurs in a couple places. If I'm on Links, for example, and scroll down, I
can see that for link types, I have absolute links and document relative links, and it occurs in one other page as well.

I think it is in Syntax. Yes, in Syntax, as I scroll down, I can see that under Doctypes, for example, I have all these different
doctypes, and those are all h4s. So that's my heading strategy. You wanna compare your pages to mine and see if they
match up, and if not, as long as yours is based on sound semantics, then it's fine. However, if it doesn't match, and it's
notsemantically described in the content, you may wanna rethink that strategy. Now the next task was to
format paragraphs in the intro page. Let me switch back to intro, and this probably was pretty easy for you guys.

Basically, any block of content that wasn't a heading is already formatted, got a paragraph around it. Just scroll through
and make sure that you got the same paragraphs as I did. You may have grouped text into larger paragraphs, and also, if
you did anything with the list down here, that does not need to have a paragraph surrounding it. So if you surrounded
that with a paragraph, you did not need to. You'll also notice that I had a paragraph down here on the very
bottom, where we have the footer content of our page. Next up was controlling line breaks, and this applied to the
next.htm file.

So if I go to next and I scroll down to find those sort of four pieces of advice, you'll notice that I have a line break after
each one of these, so that was pretty simple. And whether or not they're on the same line is up to you. A lot of people
like doing what I've done here, which is to put them on separate lines, but really if the text was formatted just like this, it
would still look the same within the browser. So how you format that is totally up to you. Now staying in that file, we
were talking about determining emphasis, and one of the very first things that we talked about was emphasizing those
lines that are sort of on their own line due to the line break.
And you guys could see this when I was showing you the line break. But what I did was I surrounded them with a strong
tag. Now the reason that I use a strong instead of a bold tag is in the instructions themselves. Notice that it says,
"Determine how to best "emphasize the first line in each paragraph." So I'm not saying just displaying in bold, I'm saying
I want them emphasized. And so because of that, I use a strong instead of a bold tag. The last advice paragraph break
things, I wanted to display the quotes in italics. Notice I didn't say I wanted to emphasize them, but I did wanna
emphasize the last line, "Always challenge yourself." So if I go in to that and scroll down a little bit, you can see that I
used the i, or italics tag around the quotes, and I used the em tag around always challenge yourself.

Using that same type of thinking, in the list of resources below the Advice section, make sure all top-level list items
appear in bold. Well if I go back to next, you can see that within those paragraphs, I've just used the b tag around those
top-level items. And if your top-level items differ from mine, you'll notice that I've only got a b right here, not around
HTML related titles and Web Design related titles, that's okay. This is actually later on when we talk about lists. This is
gonna be a list of items, and it's really difficult to tell right now because they're all just paragraphs.

So if you didn't get this exactly right, or if yours isn't exactly the same as mine, it's totally okay, don't worry about
that. The semantics of this information will become a lot clearer later on when we have our chapter on lists. Next, we
were gonna display special characters, and we did that in the reference.htm. So the first thing was going to the first table
cell that was empty and put in the proper name character entity, and then we wanted to go and wrap the text tags in
quotation marks. So let's take a look at how we did that.

So go into reference, and if I scroll down into that first table cell, we can see that I use the name character entity for
quotation mark for the first table cell, and then if I scroll up to find the definition for elements, I can see that I have the
left quote on the left side and the right quote on the right side. So make sure that you used the proper named character
entities for the left quote and the right quote around that text. And finally, we wanted to insert an image at the bottom
of the page.

Now there were a couple things that we needed to do there. First, we needed to point to the 200px-W3C_icon. We also
wanted to give it a class of flowLeft, which would use the CSS to flow the text around it. It should have the alt text for
W3C logo, and its width and height should be 200 by 136. So if I go into the intro page, scroll down towards the
bottom. So again, notice that the image tag is inside the paragraph so it's right after the opening tag. There's its source,
so it's pointing to _images, so I had to know to go to that folder, and then /200px-W3C_Icon.png.

Now if your image didn't show up, more than likely it's this that is the culprit, so make sure that the path is spelled
correctly, make sure that capitalization is done the same way, that shouldn't matter, but just in case it does, make sure
you have .png. So this needs to be exactly thesame as you're seeing it here. So if you're having a problem with the image
display, that's the likely culprit. Next, we have our alt text W3C logo, there's the width and height, and then there's the
class attribute of flowLeft, and that results in the image that you're seeing here.

Okay, so those were all the steps and how I completed them. Again, yours may differ from mine a little bit, it's perfectly
okay in some instances. You just wanna make sure that anywhere that you have a disagreement with me, that your
reasoning is based on sound semantic formatting of your content.

Lesson4: Structuring Content

The value of structure

So far, we covered a little bit of the background of HTML and the basic elements that are required for each HTML
document. In this chapter, we'll begin exploring how to structure pages properly by examining the sectioning elements
that are available in HTML. One of the major benefits of HTML is that it allows us to structure documents in a way that
illustrates the meaning of the content. This is often referred to as semantics. And it's an important part of the web
authoring process. Most of the time content in a web page fits within specific sections.

You might have the company information up top in a heading. The site navigation and a section below that followed by
the main content and perhaps, a sidebar with some related information below it. Below everything else, there might be
a footer than contains contactinformation or other information related to the site. Now that's a pretty standard layout
for web pages and if you spent any time at all browsing the web, you probably recognize those sections almost
immediately and intuitively. However, as designers, it's really easy for us to lose track of the fact that there are people
using assistive technology and machines, such as search engines that can't rely on the visual layout to convey meaning.

For those users, the actual structure of the page has to convey the information about the content. If the page isn't
structured properly, the page content will have no hierarchy and no way to convey how the content relates to each
other. That's where HTML's sectioning and heading elements come in. These elements allow us to group content
together in specific sections that have semantic meaning. They are the headings, which are the h1 through h6
elements. And the article, aside, nav and section elements.

When used properly, these elements give your document an intelligent outline that clearly represents the page's
content. In addition to these sectioning elements, HTML also has several semantic elements that can help add structure
and meaning to your document as well.These are the header, main and footer elements. Used together, these elements
allow you to group sections of content into clearly defined regions. Establish the relationship between those regions
and make your pages more readable for both people and machines.

This will result in more accessible sites, better search engine results and sites that are more consistent and easier for you
to style. I can't stress enough how important it is for new web designers to learn how to use these elements correctly. By
focusing on proper page structure early in the process of learning HTML, you can avoid costly mistakes in the future
and be well on the way to producing semantic sites that perform exactly as intended.

Controlling document outlines

One of the first things to consider when structuring your pages is what type of document outline you want to
generate. HTML uses semantic elements like headings and sectioning tags to describe the outline of a page's contents. In
many ways, you can think of this like a table of contents. These outlines are used by devices to skim and search your
files, navigate to specific sections. And things like determining how content actually relates to each other. As you can
imagine, generating the correct document outline for a site is a fairly important part of its overall success.

So to practice this we have the Outline.htm file that you'll find in the 04_02 directory. And right now if I were to scroll
through this you can see that all of the elements, except for a few that are in some lists. Are contained within
paragraphs so everything is in a paragraph. So just to give you an idea of what's going on here I'm going to preview this
in the browser. And you can kind of see that there's a line up top, this is my big blog. Site navigation, things I like, my
favorite books.

We have Fiction and Non-fiction, we have Favorite Movies and Shows. In those two categories we have Favorite Music,
Jazz, Rock, Americana and then we have a spotlight down here. And then the copyright down there at the bottom. So
this is kind of a very basic, simple blog layout for describing some of my very favorite things. But right now, there is
nothing in the way ofstructure on this page to denote any type of information whatsoever. It's all on the same level.In
fact, if I go back to the code editor.

Now I'm using Brackets, and Brackets has this really cool outliner extension. To get extensions in Brackets, if you're using
this, you can just click on the extension manager and then search for outlines. And you'll find the one I'm talking
about. But when you've installed that, if you have a page open, you can go up to View, and you can Show Document
Outline.Now if I do this for this document, you can see that not much comes up, it just says untitled body. So there's no
outline going on. Now for those of you that are using a different type of code editor.

Or don't have that extension installed, there is a way for you to check your document outline as well. I'm going to go
ahead and select all my code and copy it. You can go out online to this site. This is the HTML 5 Outliner, and here you
can choose a URL, or we have this one text area that we can just paste our own HTML into it. And then we can say
outline this and again it says not a lot going on here. So then I'll hit the back button. For those of you that don't have the
extensions installed in the brackets or maybe aren't using brackets.

Feel free to use this to check the outline as we begin to work. Okay, let's get back into our code and start giving this
document a little bit of an outline. By semantically structuring the elements. The easiest and best way to do this is
through the use of headings. Now this is going to be a little bit of a refresher of what we covered early in the course
when we talked about headings. But it also gives you an idea about how important headings are to the semantic
information of your page. So the first paragraph right here says My Big Blog. I would assume this to be the title.

That's probably going to be the most important thing, so we're just going to go ahead and get that and h1, and save
that. Now after that, we are at site navigation, we're going to just pretend like that's a big menu. We'll leave that
alone. Then we have things I like, and that would be probably the title of this page, so I'm going to make that an
h2. Below that we begin to get into the individual categories. Notice that we have categories for books. We have
categories for movies and shows and we have categories for music. All of those seem to be on the same level, if you will.

If you were to think about this as a table of contents. And you wanted to give somebody the ability to navigate from one
area to the next, you'd probably list those all together. There's books, there's movies, that sort of thing. So what I'm
going to do, is for my favorite books, I'm going to use the next level of heading, H3. And then for the sub categories
fiction and non-fiction, they wouldn't be on the same level because these are sub-categories of books. So they would get
an h4. So you can begin to see how you start to develop a strategy for how headings on your site are going to be
representing the document outline.

And you need to set that for both Fiction and Non-fiction. Now take a moment, and go through, and finish categorizing
everything. Using those h3 and h4 in place of those paragraphs. So, movies would get an h4. Movies would get and
h4. Where as music would get and h3. Scroll down a little bit. Jazz would be a subcategory. So, that going get an h4
and as you are doing this don't neglect the opening and closing tag. You want to make sure as you're switching these
from paragraph to headings that you're getting both the opening and closing tags.

I'm going to save that and then finally I have to make a decision about this spotlight favorite. It's not really a subcategory
of music, it's a specific element or item that I've decided. To kind of talk about a little bit. It's related to all the
content. And in that sense, it's probably best suited to an h3. But in a lot of cases, this is a judgment call. It's kind of like
where you want it to sit on that outline. And then the very last thing is this copyright down here. And that doesn't really
fit in its own section, I would say.

So I'm just going to leave that alone. I'm going to save this. And then I'm going to go back. And check the document
outline. Now this makes a lot more sense. You can see that we have My Big Blog up top, Things I Like. We have Books,
Movies and Shows, and Music. And each of those has their own individual subcategories. And then finally down at the
bottom,. We have spotlight favorite which you can see shares the same level of importance as the categories
themselves. And again that was my own personal choice to make it to have that level of importance.

If I tested this online in the outliner you can see it gives us the same type of outline. Perfect.Prior to HTML5 that was
pretty much the only way that we could generate a document outline.And one of the reasons why it was so important to
have a specific sitewide strategy, in how headings are applied to elements. Now HTML5 has some new semantic
sectioning elements.That are designed to assist in making outlines that are maybe a little bit more meaningful. So those
elements are the nav, article, section and aside.

Let's take a look at what they can do for us. So going back into my pseudo blog thing here, I'm going to take the site
navigation and I'm going to wrap that in a nav element. Now, I'm just going to leave the paragraph inside of there. That's
fine. But what the nav element does forme, is it creates a new section that's specific to the navigation of the site. The
next thing I'm going to do, is I'm going to take the content of this page. And that would be all the things that I like,
and I'm going to wrap that in an article element. Now, you'll notice that I'm going over these pretty quickly.

And I'm not spending a lot of time. Talking about what each of these elements do for you.That's because we're going to
look at them individually in their own exercises in just a moment. So right now I'm just sort of introducing you to these
elements so you get an idea as to sort of where they fit. So now everything except for the copyright here down at the
bottom.Because that's not part of the main content, is now wrapped within this article. Now another semantic
sectioning element is the section element. And if you think about this inside the things I like I have sections for books, I
have sections for movies, I have sections for music that sort of thing.

So it makes sense to have individual sections so what I'm going to do is for each of those I'm going to wrap them in a
section element. So books will be wrapped in their own element. And pay special attention as to where I'm adding these
elements. Movies and shows will get their own section. And notice that you have to be really careful about where you
place these. You want to make sure that the heading for each of the sections is just inside of it. Every time I see an H
three, I know, that's a new section, and if your code doesn't format exactly right for you, it's not that big of a deal.

Most code editors have the ability to reformat the code so it's a little bit easier to read. Now, if I go down to the last
section here, spotlight favorites. It would make sense that this is also a section as well. However, there's a new semantic
sectioning element called, aside, in HTML5.And what Aside does for me is it basically says, this content is not really a
critical part of the content that it's related to. But it is related to content on the page. And if you think about the
spotlight favorites, it's content that's related to the list of my favorites.

But, it's not necessary in order for me to complete my list of favorites. So that's a perfect example of using the aside
element. So I'm going to wrap the spotlight in the aside. Now again be very careful about where your opening and
closing tags are. Now if I save this and go back and look at my document outline. I don't really see too much of a
difference. The only difference I really see, in fact, is this new section called untitled nav. Any section that you create
using one of these sectioning tags. It could be nav, could be article, could be section, could be an aside.

Basically the title of the section is going to be whatever the top level heading in that section is.In this case nav only has a
paragraph inside of it. It does not have a heading so it comes up as an untitled section. And in fact if I were to copy and
past the new formatting into my online outline generator, I would see exactly the same thing. We have an untitled
section up top. So there's a brief overview of the outline that's going to be generated as you're structuring your
documents. And some things that you need to be aware of. Now, I do want to point out the fact about these new
HTML5 sectioning elements.

Basically, the way that they create sections is controlled through what's known as the HTML5 outlining algorithm. It's
brand new in HTML5, and it's written within that specification. Now that was designed to help with the overall semantics
of the page. But as of the time of this recording, no user agents, that means browser, screen readers, any of those. Have
implemented the HTML5's outlining algorithm. And that means that for now, the best practice is to continue to generate
the document outline through the use of headings. While allowing the HTML5s sectioning element to assist with overall
page semantics.

The nav element

It's time to start taking a more in-depth of some of the structural elements that are in HTML5. I want to start by taking a
look at the nav element. Now that's one of the section elements that are brand new, introduced in HTML5, and I first
want to examine what the specification says about it and then we'll go and explore how to use it in our sites. Now to
view the specification I'm at w3.org and this gives us a table of contents if you scroll down enough and honestly you can
just sort of scroll through this and you'll begin to see individual attributes or elements in red, and what I'm looking for
is, I'm going to scroll down to this area for sections, creating sections of content, and I'm going to look for things like the
nav element.

And when I click on that, it'll take me right to it. Now, I know this specification is not the easiest thing in the world to
read, especially if you're not used to looking at them, like I am, but essentially we get a breakdown of the element
here. Now, categories, content model, things like that, tells us where we can put this, the type of things that we can nest
inside of it, whether it needs an opening and closing tag, what attributes are available for it, what ARIA roles ought to be
applied to it, things like that. What I'm more interested in, however, is the semantic usage of the element.

And if I scroll down I can see that it has a description of the element and then some notes.Let's take a look at what those
say. So, the description said that the nav element represents a section of a page that links to other pages or parts within
the page, a section with navigation links. So the emphasis here to me seems to be on a group of links that navigate to
pages orparts within a page, and typically it applies within a site. Now the three notes there. First node says, in a case
where the content of a nav element represents a list of items, use list markup to aid understanding and navigation.

That essentially means that it's a little bit more helpful if you have multiple links within a nav to arrange them with in a
list, which is nice to know. It's also mentions in the next note that not all group of links on a page need to be in a nav
element. This is a fairly significant element because it is a sectioning element, meaning every time that it's used within
the document outline, a new section is created. So, this element's primarily intended for sections that consist of major
navigation blocks. And it actually mentions the fact that in the footer of a page you might have a link to the copyright
page.

You don't need navs for those. So you only use them for major navigation blocks within the site. The next note just talks
about how user agents can use them to navigate to those specific areas. And that's one of the Symantec usages that we
need to think about. If a screen reader encounters a page with a nav element, it can tell the user, hey, there is a
navigation element and it can either skip over that if it wants to go directly to the content or it can go directly to it.So its
sort of of beacon, if you will, to devices. With that in mind, what I'd like you to do is go and open up the structure.htm
file.

Which can be found in the 04_03 directory. Now I'm going to preview this in the browser and I can kind of see what
we're going to be working with here. It's the structuring pages reference that we're building in our challenges from the
HTML essentials training reference site. So here we can see that this page has a little bit of navigation up top. So you
have a list of links here that navigate to different pages within the site. And if we scroll down, I can see that there are
individual links. There's another list of inks down here and what these links are going to do is they're going to link
external to the site to those specific elements inside the HTML file specifications.

It's sort of a quick jump if you want to learn a little bit more about the elements that we're going to be using. If I scroll
down, I can see that we have a few more links just sort of scattered throughout the content, and then we have some
links down here in this sort of bottom section.So knowing what we have already learned about the nav element, which
of these section orsections do you think makes the most sense to actually use the nav element? You'll probably
immediately say the top section since this has the navigation for our site, and you'd be 100% right. Where you kind of
have to make a judgement call is this other section of links down here.

So, these links don't link within the site, they link externally to it. And they're not a part of the main page navigation. So,
do they get a nav element, or don't they? All right let's go back into our code. And I think we are all in agreement that
the first section of links needs a nav. So what I'm going to do is I'm going to go ahead and wrap that unordered list that I
find just below the heading 2 in a nav element. Now remember, for navs, you need both an opening and a closing tag. So
I'm going to make sure that I have an opening and closing tag wrapping around the unordered list that contains all of the
page links.

Now I'm going to save this. And as I scroll down I see that I have all of the links down here thatare going outside of the
site to the W3C's HTML5 specification to give a little bit of extra information about these elements. Now in my opinion,
and this is a judgment call, this does not warrant the use of a nav element. It doesn't really need to create a brand new
section in my content. So if I was looking at the document outline, for example, I wouldn't want these to occupy their
own slot within the document outline.

I also would like to point out that it's not navigating internally to my site. So this is, really isn't page navigation, this is just
informational links. Even though they're grouped together to me they don't rise to warrant the use of a nav element. So,
remember that the nav element isn't right for every group of links in your pages. Play close attention to the semantics of
your site so that you can make sure that you're using it correctly.

The article element

Of all the elements introduced in HTML5, the article and section elements are probably the most confusing to
authors. You know, to most people, these elements seem very similar andthere's a lot of confusion even among people
that have been authoring HTML for a long time around when to use one over another. So, don't be surprised, as a new
web designer, if you're a little confused about them as well. Well, in many cases, it's really just a judgement call as to
which one to use. So, in this exercise, I want to take a closer look at the article element and when it's appropriate to use.
So, here I am again in the W3C's HTML5 specification. This time, I focused on the article element and I just want to scroll
down here to the description. Now, pay real close attention to this. It's a little vague. The article element represents a
complete self-contained composition in a document, page, application or site. And that is, in principle, independently
distributable or reusable. These could be things like forum posts, magazine or newspaper articles, blog entries, user-
submitted comments, interactive widgets, and the list goes on.

Now, that pretty much describes a lot of content in HTML, so it seems kind of vague and it is kind of vague, to be honest
with you, and I think a lot of the confusion comes with the term article. We tend to think of an article as something
that's written, for example, in blogs and magazines and things like this. So, the best way to think of articles, I've found, is
like an article of clothing, a separate article like a shirt or a pants or shorts or socks, individual elements that can stand
alone.

And to me, that is the most important part about articles. When they describe articles here, they're talking about
standalone items that if they were removed from the other content, would still make sense. So, things that you could
syndicate, things that you could set apart. For me, that's one of the deciding factors about what is and what is not an
article in terms of structuring pages. Now, it goes on to talk about things like nesting articles. If you nest one article
inside of another one, the nested articles need to be related to the main article.

And it also mentions, I'm going to scroll down a little bit here. When it's the main content of the page, you don't have to
use both the main element, which we'll talk about a little bit later, and the article element, but that you can. I would also
like to point out that the main element does not create a section in the outline, but article does, which is why I usually
use both of them if I'm going to use them. Now, directly after that we get code examples of different ways to use the
article. I'd recommend that you spend some time looking at not only the specification andhow it codes it, but also some
of the reference sites that I'm going to give you after the course in terms of how they work with the article element as
well.

For our purposes, we're going to go back into that structure.htm. This time, in the 04_04 directory. And if I preview this
in the browser, and when I start looking at the different pieces of this, we have the headline, HTML Essential
Training, we have the name of the page, Structuring Pages, we have the site navigation. Then we have some content and
the content is broken up into sections, Conveying meaning through structure, Sectioning elements, Document
outlines, W3C Warning, WAI-ARIA Roles, and then some copyright information.

When I think about which of these things can stand separately by themselves, none of it really jumps out to me that, set
apart by itself, this is syndicatable. You could make the argument that each one of these sections is an individual
thing and can be separated, and there are a lot of people out there that do things like that. They would put each of
these sections within an article tag. I tend to think, however, that probably the page content itself could be syndicated
or separated or put apart if you wanted to. So I would probably use an article to structure that content, but again, that
would be a judgement call.

So, what I'm going to do is I'm going to go back into the code and just after the nav element but prior to this first h3 that
starts the content, I'm going to go ahead and wrap all of this in an article. Now, it's not all going to get contained within
the article. As I scroll down, I can see that I have some copyright information and things like that within this paragraph. I
don't want that to be part of my article. That's going to be part of a footer a little bit later on. So, I need to close the
article tag prior to that.

So I'm going to save this. So, our page is gaining a little bit more structure. We've added nav to describe where the
navigation is and now we've created an article to basically say all of this content belongs together and it could stand
alone if we need it to. Now, I've seen a lot of authors use the article element as their sort of go to element for creating
new sections of content. I, however, tend to be a little more, more cautious about using it. I only use it when it's clear
that the content inside of it can stand on its own or maybe it's something that I might syndicate as a separate piece of
content.

There are so many other sectioning elements out there that can be used, such as the section and div elements that
we're going to take a look at in just a moment, that you really shouldn't use it unless there's a clear semantic reason to
do so.

The section element

Much like the article element, there's a good deal of confusion around when it's appropriate to use the section
element. Let's take a closer look at the semantic meaning behind the tag, andwhen it should be used when structuring
and formatting your content. So again, I'm in the W3C's HTML file specification. This time, I've navigated to the Section
Element category, andwhat I want to do real quick, I'm going to scroll down here, so that I can see the description a little
bit better, and some of the notes surrounding it. So let's take a look at the description of the section element.

It represents a generic section of a document or application. A section in this context is, and this is important, a thematic
grouping of content. The theme of each section should be identified typically by including a heading as a child of the
section element, right inside the section element there'll be a heading to sort of title that particular section. Examples of
sections would be chapters, various tab pages, and a tab dialog box or the numbered sections of a thesis. A website's
home page could be split into sections for things like introduction, news items, contact information, that sort of things.

Now, look at the notes below this. Authors are encouraged to use the article element instead of the section
element when it would make sense to syndicate the contents of the elements.So again, if it can stand alone, if it can be
published on its own, probably should be an article, not a section. However, the note below that gets a little bit more
specific about when it should be used. The section element is not a generic container element. Now I know what it
says. It says above that it represents a generic section of a document. When people write specifications, sometimes they
get vague. It is not a generic container.

When an element is needed only for styling purposes or as a convenience for scripting, things like JavaScript, authors are
encouraged to use the div element, which we'll talk about in just a little bit. So a general rule is that the section element
is appropriate only if the elements contents would be listed explicitly in the documents outline and that's where it
reaches the sweet spot. When you have content that needs to be listed in the document outline but it doesn't meet the
standard of being syndicated or pushed apart by itself, then that's when the section element is probably appropriate.

So let's go back to formatting our structure page by adding sections to the document. Now a preview of this in the
browser, as I start to go through this, sections begin to sort of jump out at me. For example conveying meaning through
structure, sectioning elements, document outlines, maybe that W3C warning, the WAI-ARIA Roles section. So those all
look like individual sections within sort of this parent article that we have. Now that's not always the dynamic you're
going to have.

A lot of times, you might have a section and have an article inside of it. So just because we’re going to structure the
pages this way doesn't mean that you’re always going to have an article that contains sections. Sometimes it’s the other
way around. All right, I’m going to go back into my code. In this case we're working on the structured .htm from the
04_05 directory. And what I'm going to do, as I scroll down inside the article I'm going to find each of these sections that
start with an h3 and I'm going to wrap that in a section tag.

Now remember for section you are going to have the opening and closing tags. Be very careful of where you place
these. I'm going to open them right before the h3's and I'm, of course going to close them before the next h3. And they
need to enclose everything inside of them. So every time I see an h3 I know that that's a new section. There's document
outlines so I need to close the previous section, and then open up another one. Now as I scroll down, I see that one of
the h3s has an h4 inside of it. We’ll come back to that in just a moment.

And we should have one more main section and that is the WAI-ARIA roles, and of course I have to close the last section
prior to the closing of the article because they’re all contained within it. So now I have four sections in this article, all
denoted by those h3s. That leads me to go back up to the h4 and really consider this. Should this be its own section? We
know that it's going to show up in the document outline, because it has a heading. So that lends itself to saying yes, it
probably should be a heading. But if we think about what this is, if I scroll up I can see that the section's talking about
document outlines, and this smaller section inside of it is talking about a warning that the W3C has on a new
specification about the HTML5 outlining algorithm.

So when I look at this it could be a section, but there's actually another element out there that makes more sense
semantically to use. So we'll hold off on that, and we're going to cover that element in just a moment. So as you can see,
personal judgement does come into play whendeciding when it's appropriate to use the article and section
elements. While it's certainly okay to use them in whatever manner you see fit, I want to make sure that any strategy
you develop around these two elements is based solidly on the semantic reasoning behind using them.

They do convey meaning. So it's important that that meaning is consistent across all the pages in your site

The aside element

The aside element is a perfect example of conventional standards being adopted as part of a specification. One of the
most common elements of websites is, the sidebar. They're so ubiquitous in fact, that it can seem rather odd if you go to
a site and it doesn't have one.However, even though they are one of the most common page elements of all time, until
the HTM 5 specification, there really wasn't a semantic element designed to represent the type of content that you
would normally see inside of a sidebar.

So the aside element is designed to represent related content, so I want to take a closer look at it as well. Here I am in
the HTML5 specification, I've navigated to the section on the aside element. And if I look at the description down here at
the bottom it says, that is represents a section of a page, that consists of content that is tangentially related. To the
content around the aside element and which could be considered separate from that content. Such sections are often
represented as sidebars in printed typography.

The element could be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav
elements and for other content that is considered separate from the main content of the page. There's a note that also
mentions that it's not appropriate to use it just for parentheticals since those are part of the main flow of the
document. So the aside element is a sectional element. Meaning if it's used in your content, there's a new section in the
document outline where it is found. And it also represents it as I note here tangentially related content.

Now where it appears is very, very important all right? Let's explore that by going back to our structure page, this time
found in zero four underscore zero six, and take a look at where it might benefit us in our own content. So if I scroll
down I see the sections that we created in our last exercise. And in one of those sections I have a separate heading, in
this case the H4 heading that's giving me the W3C warning. Let's take a look at this content in its overall context.

To do this I'm going to preview it in a browser. That's just going to make it a little bit easier to read. So if I scroll down I
can see that we have a section here on document outlines. So it talks about how document outlines are a fundamental
concept of HTML. Prior to HTML5 how they were generated entirely through the use of headings, things that we've kind
of already talked about. I'm also talking about how the new outline algorithm exists in HTML5 and it uses the sectioning
elements that we've been covering over the last few exercises. So, at the very bottom of this there's a warning.

It says at the time of the authoring of this course, the W3 has posted this warning in regarding the HTML5 outline
algorithm, and it talks about how there are currently no known implementations of it in graphical browsers or assistive
technology. So they recommend staying with the document outline generation through heading ranks for the forseeable
future.This is interesting, that is related content and I would say that it is tangentially related, meaning it's not
absolutely necessary as part of the overall section, but it is related to the content.

It's also information that is eventually probably going to be replaced. So if browser agents start implementing the outline
algorithm, if screen readers start implementing it, then this warning will probably go away. So that is a perfect candidate
for the use of the aside element. So going back into my code, what I'm going to do is just above the h4, I'm going to go
ahead and add an aside, and that aside is going to wrap the h4, the paragraph, and the block quote that all make up that
warning.

Notice that I have to close the aside before the section closes. Now I want to point out something here that's very
important about where you locate these asides. The aside should be tangentially related to the content of its parent. So
in this case, the aside is inside this individual section. So that's indicating that this content is related to the section
itself. If it was tangentially related to all the content in the article. I would want to place it on its own level equal to the
H3s.

If I place it outside of the article, then that content would basically be tangentially related to the entire article. So where
you place the aside matters, and you want to think about that as you're structuring your page. So, it's fantastic that
we're able to create all these nuanced, semantic structures with these new HTML5 elements. However, you want to
make sure that you really understand how these elements are designed to work. Many people see the aside element,
for example, as just being the quotem, unquote sidebar element when, in fact, as we've seen here, it's a lot more than
that.

Remember that where you place the side element indicates which content it relates to. So you need to be very careful
when and where you use it.

The div element

There are times when you need to structure or group content together without explicitly passing along any type of
semantic meaning. In those instances, you're going to use HTML's work course structuring tag the div. Prior to Html5,
the div tag or division was used for the bulk of page structuring and for a lot of authors out there, this is still there go to
structural tag.Basically, div tags were used to divide up content and then class or ID attributes were used to pass along
the semantic meaning of the content.

Although our new tags that are available to us in HTML5 do gives us more meaningful alternatives in a lot of cases. The
div tag still remains a powerful option when structuring your content. Now I'm looking at the HTML file
specification. You'll notice that I'm no longer in the sectioning content part of the specification. I'm in the grouping
content. So, it's a very important distinction between div and some of the other tags we've looked at is that the div tag is
used for grouping content. Now the definition down here says, the div element has no special meaning at all.

It's pretty sad. It represents its children. It can be used with the class, language and title attributes to, to mark up
semantics comment to a group of consecutive elements. So that can be a little difficult to understand at first. So
basically, the div tag is an anonymous grouping element. It's an anonymous tag. It doesn't mean anything. It has no
specific meaning. It just allow you to group up elements into a specific tag. Now why would you need to do that? Well,
take a look at the note down here. Authors are strongly encouraged to view the div element as an element of last resort
for when no other element is suitable.

Use of more appropriate elements instead of the div element leads to better accessibility for readers. And easier to
maintain a, ability for the authors. Okay. Now I think is a little harsh.Calling it an element of last resort. Basically, what
that means is that if there is a tag that passes along the semantic meaning of the content you should use that
instead. But in those instances when you don't have anything that's going to pass along the semantic meaning, then the
div tag is fine. So when you need to group content together for stylistic purposes, or you need to group something
together that HTML5 does not have a tag that represents it, then the div tag works just fine for that.

Okay. I want to put this into practice by opening up the blog.htm file and the 04 underscore 07 directory. Looking at the
code it looks a little bit different. Let's go over and check it out in the browser. I can see we have the things I like, my
favorite books. But the books themselves, orat least the first three books, have a slightly more complex structure to
them. You'll notice we have the title of the book that's followed by the author and a slight synopsis of the book itself.So
if I go back into my code and I scroll down.

I can see that that's represented by heading five separated by two paragraphs. Well, we need to have some way to
group this content together. Because right now, the h5 is beginning a new section. So we do have a new section of
content in our outline followed by those two paragraphs. But that's the only thing that's really sort of alerting the reader
that these things belong together. So, I'd like to group them together for a couple of reasons. One, is I just want to
represent them as belonging together. And number two, you may have caught at the very top of this.

I have some styles going on. So, the code that you're seeing here. This is actually CSS and we're going to talk about CSS
and cover it in its own chapter a little bit later on. So if you could imagine, a div tag is going to work perfectly here. So
what I'm going to do is at the beginning of the h5, I'm going to go ahead and create a div tag. And then, after the closing
paragraph tag in this particular book section, I'm going to close the div tag. So in essence, what I have got going on is
that I have the div tag that is now grouping this content together.

And I'm going to go ahead and do that for each of the books. So I'm doing it for The Hobbit. I'm going to do it for Animal
Farm. And then finally, I'll do it for the House of Leaves book just below that. Okay. Now visually, if I go back to the page,
there is no visual change to this. But in terms of the code, these items are now grouped together using this anonymous
div tag. Now if I did want to pass along semantic meaning the fact that all these are books, for example. I could either
use a class for an ID attribute.

Now ID attributes can only be used once. So if I gave one of the divs an id of book, I couldn't use that same ID over again
on the other ones. Classes, however you can use as often as you like them. So, I think a class is a pretty good choice
for describing the contents of the div tag. So I'm just going to give it a class attribute of book. And I'll do the same thing
to the other two below that. Now classes are interesting attributes. They're semantic attributes, meaning they pass
along meaning. And they help us identify content on the page.

In this case, it's helping us identify that these three groupings of content represents a book.Now that also allows me to
stylistically style these. You can see up in my CSS, I have a selector here that targets book and some content inside of
books. So now, if I save this and flip over. I can see that each of the books is styled in a unique way that indicates visually
the relationship for the content. So I could even do things like throwing images and pictures in there, or I can get a little
bit more complex with the styling.

The concept that I really want to get across to you, however is that the div tag allows me to be very flexible. I can group
content together any way that I want and then through the use ofclass and id attributes, apply any semantic meaning I
want to to them. So it's almost a way of sort of extending the language if you will. Since there is no book tag, for
example. So even though the specification makes the div tag seem like it's an element of last resort that you'll never use,
it actually gives you a really powerful tool for grouping and structuring content. As your pages get more complex
and your visual styling needs get more sophisticated, you're going to find yourself using it frequently throughout your
sites.

Other semantic elements

So far other than the div, the structural elements that we've explored have all been sectioning elements. And that is,
when they're used they create a new section in the document outline.HTML5 also includes additional semantic
elements. That help us create sophisticated page structures without actually affecting the document outline. So this
section has. We're going to take a look at three of them. The main header and footer elements and we're going to start
with the header. So here I am in the html file specification. I've navigated to the header element and let's read the
description here.

So the header element represents introductory content for its nearest ancestor. That would be its parent tag sectioning
content or sectioning route element. A header typically contains a group of introductory or navigational aids. So lets talk
about what it represents. So the header, is essentially representing the introductory content, for it's nearest parent
sectioning content.That would be any sectioning element, like articles, sections, a sides, things like that. Or sectioning
root element which would be the body. So if it's contained just within the page with no parent element, then it applies
to the entire page.

And the description mentions that in the next line. There's also a note here that says it's intended to usually contain the
sections heading. So an h1 through h6 element, but it's not required. The header element can also be used to wrap a
section's table of contents, search form, any relevant logos. So really, any time you have a new section of content inside
your document. And you have a little introductory section to it, maybe you've got some navigational aids. Maybe you
have a logo for the page. Maybe for an article you have the name of the article plus the author name and a byline.
Those types of things can go in the header. It's not required, it just enhances the semantics of the document. So going
into our own file, if I look inside the body tag, the very top of the page.We have an h1 HTML essential training that
appears on every page within this site. We have an h2 for structuring pages. That's the title of this page. And then we
have the page's navigation, using the nav element. After that, we get to the article itself. So you could consider
everything above this article as being introductory content for the page. We have the title of the site, we have the title
of this individual page, and then we have the site navigation. So, this is actually perfect information to occur within a
header. Now we could make any number of judgment calls here. We could place just the h one inside the header. We
could place the h1 and the h2 because, I think, you the strongest case for those two being part of the header. And or we
can include the nav. Some people will include page navigation as its own section, outside of a header, some people will
include it inside of it. It is totally a judgement call. All right, so what we're going to do, is just inside the body tag, I'm
going to add a header.

And I'm going to wrap the h1, the h2, and the navigation in it. I'm going to wrap everything in that so that all that
becomes part of the page's header. Now this header represents introductory content for the entire page because its
nearest apparent sectioning element is the body. Now, one of the things that really isn't explicit in the specification the
way I think it probably should be. Is that your pages are not limited to one header. Unfortunately a lot of people read
the specification that way. And I've seen a lot of sites where somebody will just use the header one time at the top of
the page.

Because they believe that's the only time they can use it. That's absolutely not true. Any section that warrants having a
header can have one. And again as an author, that's up to you to decide whether or not you want to use it. If we scroll
down into the article for example. Take a look at the first section. Conveying meaning through structure. And there's
basically a summary of what we're talking about on this page. If you think about it that particular section is introductory
content. And it's introductory content for this article.

So what I'm going to do is I'm going to convert that section to a header. So really, this is a judgement call about the
semantics of this particular section and I think it works better as a header. Now, a header will not implicitly create a new
section in your document outline.However, because headers so commonly contain headings. You'll note that this header
has heading three, the header above it had the h1 and h2. That a lot of people sort of make the mistake of thinking that
they're sectioning elements. Because you almost always see a section that's represented by a header.

So now we're going to transition back to specification. Now the next element we need to take a look at is the footer
element. As the description says, this element represents a footer for it's nearest ancestor, again parent
element. Section in content or section in root element. A footer typically needs information about its section such as
who wrote it, links to related documents, copyright data and the like. When the footer element contains entire sections
they represent things like appendices. Indexes, long colophon, verbose licensing agreements, other such content.

You'll notice on a note down there it says contact information for the author and or editor of a section. Belong in an
address element, possibly itself inside of a footer. Bylines and other information could be suitable for both a header or a
footer. And can be placed in either or neither. The primary purpose of these elements is merely to help the author
write self explanatory markup that's easy to maintain a style. They're not intended to impose specific structures on
authors. Now this means, again. That, for both the header and the footer, it's a lot of judgment call on your part as an
author.

So, think of footers as holding sort of related information, and it's information that relates to the content that it's inside
of. So, not quite like an aside, this is more like, here's some extra information that you might need. Copyright data, links
to privacy pages, things like that. And in our own page, if I scroll down to the very bottom of our code. I can see that
down here at the bottom we have a paragraph that contains copyright information, links for following me and lynda.com
on Twitter. So these are related to the site as being an HTML reference and a lynda.com reference.

But didn't really fit in any specific section. So this is perfect information for a footer, and that is exactly what I'm going to
do. Now much like the header, you can have as many footers on a page as you want. You probably won't use them quite
as often, because not that many sections. Have footer information. There's also a misconception that you have to put
the footer at the end of an element, you don't. That's typically where people have them, but I've seen structures
built where footers are actually used at the top of an element. So, again, it's really up to you as an author about how you
want to structure your content.

There's been a lot of conventions developed around the use of footers. They do typically appear at the bottom of
content. Most pages do have a footer that contains extra links and navigation or information in it. So think about how
people have already established the way thatfooters are used on the page and sort of begin your strategy there. Now
the last element that I want to talk about with you guys is one that's a fairly recent addition to HTML. And that is the
main element. The main element represents the main content of the body of a document or application.

So this is a very specific element. The main content area consists of content that is directly related to, or expands upon
the central topic of a document. Or central functionality of an application. That sounds almost legalese so let me tell you
what the main content really does for you. Let's say that you're on a screen reader and you visit a page, so you're just
having the page being read to you. You want to be able to jump to the main part of the content. What this element does
is it sort of identifies the main content on the page. You can only use it once on the page and it is not sectioning content
so it's not going to effect your document outline at all.

As a matter of fact you can see that in the note. The main element is not a sectioning content.And the definition below it
continues and says the main content of the document includes content that is unique to that document. And excludes
content that is repeated across a set of documents. Such as site navigation links, copyright information, logos,
banners, things like that. So it has to be unique. Has to be the main content of the page. You really ought to view it as a
navigational aid. For any device, search engines, screen readers, that sort of thing, that want to know, hey, on this page,
what's the main content.

So, this one is actually a pretty easy one to wrap your head around. And if I think about this particular page, our main
content is definitely the article. So, what I'm going to do, is all the way around the article. I'm not going to replace the
article, because I need the article. For its semantic struggling abilities I'm just going to take the main tag and I'm going to
wrap it all the way around the article. No you may think of that as a little bit overkill. Do you really need to go to that
amount of trouble in structuring your content? Well, my take on this a really wonderful thing to do in terms of assistive
Devices. People that use string readers, search engines,robots that are scanning your copy.

It is semantically rich, and it's going to help your site be more successful in terms of its organization and overall semantic
information. So I highly recommend using the main element in that capacity now if I say this. And preview this in the
browser, I don't see anything different at all on the page. That's because the changes that we made were all semantic
they are not visual. We also haven't effected the document outline at all but we have added a great deal of semantic
meaning to our content. To be sure you understand exactly how headers and footers work as there are a lot of authors
out there that seem confused as to when to use them.

And whether or not you can have multiples of them on the page, that sort of thing. I also highly recommend using the
main element when it's appropriate as it can greatly enhance the accessibility of your pages.

Using WAI-ARIA roles

WAI-ARIA stands for Web Accessibility Initiative Accessible Rich Internet Applications. It's a bit of a mouthful, but it's the
umbrella name for this specification that's centered on creating accessible sites and applications. As I'm sure you can
understand, it's more commonly referred to as ARIA. Now, this specification which you are looking at here, contains
manyrecommendations for implementing greater accessibility on sites and applications. One of the most important and
noteworthy recommendations is what we're going to look at in this exercise, and that would be the landmark role
attribute. So, if I scroll down through the table of contents, I can see that we have a link right here for landmark roles.

I'm going to click on that, and jump to that section of the content. Now, the roles attribute has been around for a long
time, and there are different categories of roles. In this case we're looking at the landmark roles, and you can see that
we have application, banner, complimentary, content, info, form, main navigation, and search. Some of these look very
similar to the new elements that have been added to HTML 5, and that is really not an accident.HTML 5 has attempted
to sort of bring the same type of semantics that have been available in these roles for a number of years. So, what do
these help us do? Well, when you apply a role attribute to an element, that allows screen readers, assisted devices, and
other user agents to quickly scan that page content, and then to navigate to those specific sections when required.

So, let's say, for example, that on the page navigation, you give it a roll equals navigation. That allows the screen reader
to either jump to the navigation, or skip that navigation very easily, because you've identified that content. So, it's an
very important part of the authoring content, because it's going to make your content more accessible to a greater
number of users. So, if we look at the landmark roles, if we were to say click on one of them, you get a nice definition for
what that role is. Banner, for example, is a region that contains mostly site oriented content,it talks about things like
logos, identity, site specific search tools. It also talks about how banners should only be used once within a
document. So, in this exercise, we're not going to take the time to go through every single one of these landmark roles,
or other roles and read their definition. But, I think it's a very important thing for all web authors to understand
whatthese roles allow you to do, and the semantics that they pass along. So, in addition to the specification, which I
would highly recommend you check out. At the end of the exercise, I'm going to leave you with a couple of other
references that can help deepen your understanding of WAI-ARIA, in general, and how those roles can help you. So, in
order to use them in our own page, we're going to go back to the structure.htm, this time found in the 04_09
directory.And, what we're going to do, is we're just going to go down through each of the elements, andtalk about which
roles are suitable for specific elements. The first element we have at the top of the page here is the header.

And, the role that we were just looking at, banner, is perfect for this because this is sort of the header of the entire
page. And, it contains identifying introductory content. So, to give it a role attribute, I'm just going to type in role equals,
and then inside that we're going to use banner for the header. Now scrolling down a little bit I can see a nav
element. That nav element is perfect for navigation. So, we're going to do role equals navigation. And, as I scroll down,
I'll find the main element, and I'm going to give it a role of main. Now, what's interesting about this is that some of these
roles are named exactly the same thing as the element. So, the element's named to main, and its role is equal to
main. This may seem like overkill. And, in fact, in the specification it tells you that if there's an element that passes a long
the same semantic value, you should use the element and not the attribute. In practice, however, most screen readers
now don't yet recognize elements like main. So, for the time being, and for the foreseeable future, it's actually a good
idea to apply both of them. Articles, for examples, can have a role of article. And, as we scroll down, we can find other
sections, for example, the aside, which we'll give a roll of complimentary to.

So, complimentary passes along pretty much the same semantics that aside does, which is this content is related to the
content that it's found with. And, then finally, I'm going to get down to the footer and give it a roll of content info, and
then I'll save that. So, now in just a few short moments, we've made our page significantly more accessible than it was
before. Screen readers and assisted devices can now scan this content, and if they want to jump specifically to the main
content, skip the navigation, jump to the navigation, read an article, they have all that information at their fingerprints.

So, there's a lot more semantics going on now then we had before, even though we're using more semantic tags. So, as
an author, one of the things that you want to do is get comfortable with these landmark roles and when they're
appropriate to use. In addition to the specification that I talked about earlier, there are two other sites that I want to
pass along to you. One is sort of a complementary site that the W3C has put together called, Using WAI-ARIA in
HTML. You can see this was updated fairly recently at the time of this recording, the 26th of June, 2014.And, this
basically, if I scroll down and look at the table of contents, it's got rules on using ARIA,when you should use them, where
you should use them, different roles.

And there's this nice recommendations table down here at the bottom, that basically says, okay, if you're going to use
this element, for example, article on the page, this is the role that you can associate with it, and should you associate
that role or not. There's a lot of information here. It's a little hard to read at first, but once you get used to using this
table, this is a really nice reference to bookmark, and come back to. I want to also point out the blog for the Sela Group,
but you can find this at blog.selagroup.com. And this is an article written by Steve Faulkner, who is one of the leading
experts in accessibility right now.

He published this in February 12th of 2013. You can search for this, it's pretty easy to find. This is an update of an article
he wrote earlier. This is talking about when it's appropriate to use them, how you should use them, and at the bottom of
this article, he has another table thatbasically compares the ARIA landmark roles to the new HTML5 structural
elements. And, kind of tells you when they're is, equivalent element in HTML5, and sort of how that element and roles
should be used together. So, I know this was just sort of a brief introduction into it, but these ARIA roles are definitely
worth your time as an author to explore.

They offer a tremendous amount of functionality for very little investment on your part. So, as an author, I would
encourage you to make them a default part of your authoring process.

Challenge: Adding sectioning content

Throughout this chapter, we've added semantic meaning and structure to one of the pages for our reference site. In this
chapter's challenge, we're going to explore the structure of our finished page and then use the rules that we established
there to add structure to the remainder of the site. So, I have the lab instructions for our challenge opened up. I've
opened this from the 04_010 directory. And as always, this is just a text file that contains the instructions for this
particular challenge. And the first thing that it asks you to do is open up the structure.htm. Explore the page structure,
the use of the ARIA roles.

So, on a piece of notepaper or a notepad or something, write out the document outline and how structural tags like
aside, article, nav, and section are being used. And then examine how semantic tags like header, footer and main
elements are being used as well. So, try to define the strategy that's being used on this page so that you can use it
throughout the site. And that means, of course, opening up the structure file and then scanning through it and looking at
all those things we just talked about in the instructions. Now, the next thing that you want to do is go in to each of the
remaining pages, intro, links, next, reference, and syntax, and then using that strategy that you just defined from this
structure.htm file, you want to structure each of the remaining files so that the sites use a consistent logical structure.

So you're going to place all of the structural elements and all the semantic tags in there. Again, if I go over to intro, you'll
see that it lacks any of those tags like a header, main, footer, article. It doesn’t have any of those guides. It still has a
document outline because the headers are being used, but the remainder of the structure is not there. So you’ll need to
put it in place using the strategy that you devised from the structured.htm file. And then the last instruction is to apply
the ARIA roles and that of course applies to all pages as well.

Now, you could do this as a two-step process. You could structure a page and then define the roles. But my advice to
you, as one author to another, is to go ahead and do these simultaneously. Meaning, if you put a header element on a
page, go ahead and apply the ARIA role that is appropriate for that one on that element. That's going to get you in the
habit of adding these roles when you add an element and I think that's a great practice to have. If you just make it part
of your normal authoring process, then it's not something that you have to remember to go back and do.

You've already done. Now, as we've done before, when you're finished, go ahead and open up those same exact files
from the finished files directory. Compare your results to the finished files. Now, in the past, we've talked about
judgment calls and about how things might be slightly different, and maybe you come up with a different strategy. But
for the most part, your files and the finished files should match and that structure needs to be consistent all the way
throughout. Okay, I know that's a lot of work. I know you're going to be editing a lot of pages and sort of doing the same
thing over again, but I want you to have the experience of having to consider multiple pages across a site when you're
developing strategies for how content should be structured and formatted.

So, take your time on the lab and as always, have fun.

Solution: Adding sectioning content

Welcome back. I hope you had a great time completing the challenge on structuring pages. I know this was a good bit of
work because you had to edit so many of the pages. And, you probably found it a little bit repetitive but, there was a
method behind my madness for doing that for you. Number one, I wanted you to really get the sense, that consistency
across pages within a site is very, very important. The other thing that I wanted to get across to you, was how important
developing a structuring strategy is, at the very early planning stages of a website.

That way you could create templates or boilerplates that can help take a lot of the work out of authoring pages, because
a lot of that structure can already be in place. So what I want to do really quickly is go through the finished files so that
you can compare your files to mine. Now, more than likely, we're going to agree on most everything, but there are a
couple of places where judgement kind of came into play and I want to talk about those, so I'm going to start at the
intro.htm. At the very top of the page we have our header, notice I've given it a role of banner. And that's going to
surround the headings and the navigation as well. Now the navigation which is contained within this unordered list is
surrounded in a nav element with a role of navigation, and that's going to be that way consistently across the site on
every single page. Below that I have a main element with a role of main and that surrounds all of the main content.

Now the main content is all contained within a single article and that article also has a role of articles, so the main has a
role of main. Article has a role of article. Now, each page has a sort of section of content at the very beginning of it that
you could choose to encase in a section or in a header. Now, in a lot of cases, this section of content does not have a
heading. It's just an introductory paragraph. To me, that made more sense to appear within a header than it did a
section elements.

So, on each of the pages, the very first paragraph and or paragraph heading, depending upon the way the page is written
is in a header and not a section. You'll also notice that this header does not have an area role applied to it because we've
also used the banner role and it's not appropriate to use it again. And actually it doesn't fit here, it fits within the page
header. Now below that, I've taken each of the discrete sections of the article and those are the ones that begin within
heading three and I've wrapped those in a section tag.

As you can see, some of these have really big sections. Others have smaller sections. Now the intro page, there really
wasn't an aside. There's nothing down here that's related content. It all belongs to the main article, so I didn't use an
aside tag. And then at the very bottom of the page the copyright information and that sort of stuff, I've contained within
a footer, and that has a role of content info. As I mentioned, that's going to be consistent across all the pages. So links,
for example, you can see that there's a header up top with the role of banner, there's our navigation.

I scroll down there is main and article and just below the article we have that opening paragraph surrounded by
header, and then that's followed there after by sections again. And as I scroll through this, there's no aside here
either. As a matter of fact, the only page that I did an aside on, was the structuring page. That may have thrown a couple
of you. You may have taken some time to look through the content and figure out, where the aside goes. But again, this
is another one of those things, without having a strategy.

Just because one page needs an aside doesn't mean that every page needs it. And in this case, I felt like the information
on the structure page was the only one that really warranted the use of that aside. So you will have to think about the
semantic usage behind an element before you commit to using it. Now, at the bottom, we have our footer, as well. So
now, if I go to next, I can see there is the header, there is my navigation. There's the main article, there's another header
inside the article that contains the opening paragraph. Add the individual sections again.

And at the bottom of that, a footer. Here's the reference page. Again, very similar. The header's up top at the role of
banner. There's my nav. There's main and article, the first paragraph is within a header for the article, and thereafter we
have sections. Not quite as many sections in this one because we have a long description list and a table, and then the
footer,andthen finally syntax is going to look very similar, and here's the header. There's the main and article. I do have a
header inside the article that contains just the first paragraph andthereafter, we're using sections.

And again, there's no aside here, these are all just individual sections and then the footer. So what we really have here,
is we have a site that has meaningful structure, structure that actually conveys semantic meanings. We have aria rolls,
that allow assisted devices, screen readers and things like that to navigate or ignore specific areas of the page. It's going
to allow search engines to quickly scan the content and determine what's relevant and what's related to each other, and
more importantly, we have consistency.

Each page is using the same consistent structure. And that's going to make it much easier for people and machines to
understand how your content relates to each other and contents relates to each other throughout the site. And that
should be your goal, as you're developing your own structural strategy, when you start planning and authoring your own
sites.

Lesson5: Creating Links

Exploring the anchor element

In this chapter, we're going to focus on creating links. Without links, there would be no World Wide Web, so it's really
hard to overstate how important they are to HTML. Thankfully, links are incredibly easy to create. Before we get into the
specific exercises, I wanted to take a moment and introduce you to the anchor element, which is used to create links
within your sites. Now, the first time that somebody encounters the anchor element, it's usually kind of confusing for
them. I mean, to create a link to a page, you might think that you would need to use the link element, right? Well, that
would seem to make sense, but it's not what the link element is used for.

Instead, the link element is used to request external resources for the page. So, in the code snippet that you're seeing
here, it's requesting a CSS file. So, to create a link on the page, we use the rather awkwardly named, anchor
element. Thankfully its syntax is fairly easy to grasp.You simply surround the content that you want to make into a
clickable link with an anchor tag, or as it's commonly referred to, the a tag. Next, you add an href attribute that tells the
browser where you'd like it to go when the link is clicked. Here's a little bit of interesting web trivia for you, href stands
for hypertext reference.

Most designers worked for years without knowing what that stands for, and by then, they usually just shrug their
shoulders and don't think too much about it. Now, before we move on, I want to cover a few more common attributes
for the anchor element as well. The target attribute is typically used to open a page in a new window or tab, or to
control where a page opens within a frame set. Frames are not commonly used in modern web design, and this attribute
was actually removed from the HTML specification a while back. Because it has some value in working with web
applications, the attribute was returned in the latest HTML 5 specification.

The rel attribute describes the relationship of the target object to the link object. For example, a rel value of, next, would
indicate that this link is part of a series, and that the link will take you to the next object or document in the series. HTML
5 has added the new download attribute. This indicates that the link is used to download an external resource or file,
such as a PDF or a media file. This attribute is still rather new, so support for it isn't even, or even available across the
board.

A global attribute that you'll see used frequently with the link, is the title attribute. This helps make links more accessible
by giving the link a title, which can be read and interpreted by assistive devices, search engines or other content
readers. It's almost always a good idea to use a title attribute when creating a link to another page or resource. So, that
covers some of the basic syntax for creating links. Now, let's dive in and tackle a few exercises for creating links in our
sites.

Linking to pages within your site

Linking to pages within your own site is probably the most common use of the anchor element, while links are fairly
simple to create. You do have to understand how they're resolved in order to create your links properly. So in this
exercise, I want to take a look andhow to create internal links within a site. Now to do that, we're going to use a number
of files within the 05 underscore 01 directory. And I want to show you that directory structure before we begin creating
links, so we understand which pages we're going to try to link to other pages.

We have a finished files directory that, of course, has a copy of all the completed files in it. We can ignore that one for
the purpose of this exercise. What we're interested in are the files links and same. So, links.htm and same.htm are in the
same directory. And then there's another directory here called info. And if I open that up, I can see that it has a file
called about.htm inside of it. And another directory nested inside of it called extras that contains the file resources. So
throughout this exercise, we're going to be linking all of these pages together.

That's going to require us to understand how to resolve a link from one file to another. Now the reason that I have two
nested folders here is I wanted to sort of reproduce some of the directory structures that you'll find on your own
website. It's pretty common for websites that have multiple directories and subdirectories. So a lot of times, you're
going to have to code a link to go from one page to another page even if it's up or down through separate directories.So
it's nice to understand kind of how all that works. So now that we understand how all the files and directories are
structured.

We can go about creating our links. So I'm going to go ahead and hide that finder window andgo into our first file, which
is links.htm. We can see, we have a headline that says, linking to pages within your sites. We have another subheading
that says, Top Page and then we have two paragraphs that are asking us to create links. The first one wants us to link to
the same.htm page, which will be found in the same directory. And the second paragraph wants us to link to the
resources page, which is found at a nested directory. So, we've already talked a little bit about the link syntax, the
anchor syntax.

So we sort of understand that in order to create a link, we're going to use the anchor element.So, I'm going to go ahead
and open up an a tag. Now I'm going to wrap this around just the text, same.htm. So I'm not going to make the whole
paragraph a link, just that one page name.So once I have my anchor tag. In order to resolve a link, I need a href
attribute. So after the anchor tag character, I'm going to create a href attribute. And for this one, I'm going to go to the
same.htm. Now brackets is a wonderful program and it's trying to help me.

It's saying, oh, you're trying to make a link. But let me help you resolve that. I'm going to ignore code hinting for typing in
these link, so that you guys can see exactly where we're going here.When you're linking from one page to another in the
same directory, you don't need anything other than the name of that file. So in this case, I'm going to type in same.htm
and that's it.Now, I'm going to give each of our links one more attribute and that's the title attribute. And I want you to
get into the habit of using a title. The title should be a descriptive text about where this link is going to go.

That way, any time there's a screen reader or another assistive technology device, it can actually give a little bit more
information about the link. So that the user knows, whether or not they want to click that. And I'm just going to type in
link to page in same directory. Then I close the opening a tag. And of course, an anchor element has to have an opening
and a close tag.So I'm going to wrap that all the way around the same. So, you can see right there, a href same.htm. Title
link to page in same directory and it's wrapping that text.

If I save this and preview this in the browser, I can see that. When I click on same.htm, it's taking me to the same
page. Perfect. Now the next task is to go to the resources.htm page.And I first have to understand the path to this. Now
the type of links that we're talking about here are referred to as document relative links. That means that the path to
them is relative to the file in which they're found. So from where I am right now to where I want to go. So in order to get
to that page from here, I have to go into the info directory. And then into the extras directory. And then finally, find the
page. All right. So I need to create another anchor element here. I'm going to use the href attribute. And what I want to
do now is I need to go first into the info directory. So I'm just going to type in I-N-F-O, the name of the directory comes
first. And then to tell it to go into the directory, we do a forward slash. So it says, find the info directory.Go inside of
that. Now we need to find the extras directory, so I'm going to type in extras and then another forward slash. So I'm
saying, hey, find the info directory. Go inside of that. Inside that, find the extras directory and go inside of that. And now,
I can tell it to find the individual page. So when we're drilling down, we use the name of the directory, a forward slash
and then the name of the page. In this case, we're going down two directories. All right. I'm going to give this a title
attribute, as well. And the title attribute is going to be down two directories. And don't forget to wrap both in opening
and a closing anchor element. So I save this. Go back in file and now when I click on resources, it goes to Resources.

So now, let's go to our about page and resources page and complete a couple links there.We'll go ahead and do these
links first and then we'll test it to see if they're all working. All right.So I'm on the about.htm page. And this time, it's
asking me to link back to the links page first and then to the resources page. Now links page presents me with an
interesting problem.When I go down into a directory, all I have to do is name the directory and then pass a forward slash
to let it know that I want to go inside of it. But what if you want to go up a directory? That's a little bit different in terms
of syntax.

So, let's go ahead and create an anchor element. Let's do an href and what I'm going to do is I'm going to do, dot, dot,
forward slash. So dot, dot, forward slash essentially tells the browser or user agent, I want to go up one directory and
find something. In this case, I'm just going to go up a directory outside of the info into the parent directory of the 05
underscore 01. And there, I'm going to find links.htm. All right, after that, I'm going to do a title. And that title's going to
be up one directory.

So I'm really just not being descriptive of the page, which I would normally do in a title. Here I'm being descriptive of the
links to sort of reinforce the document relative path that we're taking.Save that. And now resources, you probably have
a good idea as to how this one needs to be resolved. So for resources, I'm going to do href attribute and then we need to
go into the extras folder. So I'm going to do extras forward slash resources.htm. I'll do another title here and this title
will be down one directory. Don't forget to wrap the entire thing in an anchor tag.

We have a setting in contrast here. One is going up a directory, dot, dot, forward slash. The other one is going into the
extras directory, looking inside of that for the page resources.htm.And both of those are relative to the about
page, which is sitting in the info directory. Now finally, we're going to go to resources. Resources are what we called a
bottom-level page.Meaning, it's in the deepest nested directory. So any link that's going outside of its directory at all, it
needs to go up first. What we're going to do is well first go to the about.htm page.

And here, we're going to do an a href. And remember, we need to go up a directory so that's dot dot forward slash. And
in this case, we're just going to go up and choose the about.htm.So we don't have to name the directory at all. We're
just going up one directory and then find the file inside of it. We'll give that a title attribute. And I'm going to say up one
directory. Okay.That's pretty easy, we did that earlier. And I gotta wrap both an opening and closing anchor tag
there. But what about going up two directories? So in the case of links, I have to go up into the info directory and then
up one more into the 501 directory.
So what do I do then? Well, you can chain together as many of those dot dot forward slashes as you need to. So in this
case, I can do dot dot forward slash, dot dot forward slash. And then finally, fine links.htm. We'll do a title. And for that
we'll say, up two directories. And then finally, we've got to remember to close the anchor element. So I'm going to go
ahead and save that.Now, it's not uncommon to need to go up and down. So if I needed to go up a couple directories
and then find another directory and drill back down, that's perfectly acceptable.

Anytime that you're resolving the path of a link, you can go in to directories and up directories in whatever order that
you need in order to get to the page from where you are currently at. All right. So if I save this and go in the browser,
now we're in our resources page. I can see that clicking on links, takes me up two directories into the links page. I can
see that clicking on resources, takes me down into the folders. And you can actually see that up in the URL. You can see
the folder structure. 05 01 info extras. If I go to the about page, you can see.

Again, I'm going up a directory and links. I go yet, up one more directory. So overall, link syntax is pretty easy to
grasp. Now, it's worth noting that you can wrap these anchor elementsaround almost any HTML content. Here we did
single page names. What we could an entire passage, if we wanted to. If we needed to wrap it around something like an
image to make the image a clickable link, that is fine. Now prior to HTML5, we actually needed to keep the anchor tag
within block level elements. Meaning, the anchor had to sit within a paragraph or within a heading, something like that.

But in HTML5, the specification was actually changed to allow anchor tags to wrap around block level elements as
well. So you could have the same link wrap around a heading one, forexample and a paragraph. Now in theory, this is
supposed to allow us to create these sort oflarge clickable sections of content. However, implementation across
browsers is a little uneven. And typically, with your CSS styling which we'll talk about a little bit later. You get some really
unexpected visual rendering, when you use these, what they call block level lengths.

So, my advice would be to approach that particular technique carefully.

Linking to external pages

- Another very common function of links is to redirect users to pages and sites that are external to the site they're
currently on. These are referred to as GLUT links, and they are also fairly easy to create. So, to practice using absolute
links, we're going to use the absolute.htm found in 05_02, and I'm betting that you can guess what we're gonna be
linking to here. Yep, you can see the paragraph that says "Visit lynda.com!" Now, in order to link to an external site or
page, you'll need to know the full URL for that site, and one of the best ways to do that is to simply browse to the site.

Here, I have browsed to lynda.com. Now, one of the things that I don't like that browsers have started to do, is that
they've started to hide the protocol. You can see here in the address bar it says "www.lynda.com". Well that's obviously
not all there is to the URL. It's all still there; they're just hiding the protocol because they think it quote-unquote makes it
look a little messy. I don't like that because I really like knowing which protocol is being used for the page. There's more
than just one. This one happens to us http, but there's also protocols like https, for example,that tell me when a site is
secure.

Browsers have begun displaying that in different ways, like having little icons, like little lock icons to let you know a
protocol is secure, but I just don't like that being taken away from me,I'm kind of a purist there, I guess. So, what I'm
gonna do is I'm just gonna highlight all of that in the address bar and I'm gonna copy it. Now I'm gonna go back into my
absolute.htm , and I'm gonna create a link. I'm just gonna go ahead and create an a tag around Visit lynda.com! And for
the href attribute, I'm just gonna go ahead and paste that link in.

Now, it's very important that I do have the entire protocol. So, if you copied it from a browser that, for whatever reason,
doesn't also copy the protocol, you have to place this in here. Just the www.lynda.com won't work. It works if you type it
into an address bar in a browser, but it doesn't work for an absolute link. So, absolute links have to have well-formed
URLs and that includes the protocol at the beginning of it. Now, this forward-slash, you're gonna commonly see that in
links. It doesn't matter if that is there or not, if you take it off, it's a little bit of a cleaner URL.

It doesn't matter, it just means top-level directory for that site, so taking it off is not a big deal,and in fact, it may look a
little better to take that off. And we're gonna go ahead and give that a title attribute as well, and for the title
attribute, I'm gonna be very descriptive here, I'm gonna type in "Visit lynda.com". Alright, we'll close that, and I've gotta
remember to do my closing anchor element. So, I'm gonna go ahead and save that, and I want to preview this in my
browser.

Now, I'm gonna close the tab here because I really want you to see that this link is doing it for us. When I click on Visit
lynda.com!, indeed I navigate right to lynda.com, so the link is working perfectly. Now, you'll notice that that
actually replaced the page I had in that tab. What if you wanted it to open up the external page in a new tab? Well, to do
that, you use another attribute called target. So, towards the end of the link, after the title, I'm gonna type in
target= and for this target, I'm gonna do "_blank" . Targets were originally developed to work with framesets, which not
a lot of people use in HTML anymore.

But the _blank target basically tells the browser, "Hey, I want this link opened up "in a new window or a new
tab," whatever the preference is set inside that browser. So, I'm gonna save that, preview that in my browser, I'm gonna
close the old tab while I'm at it. And now when I click Visit lynda.com!, notice that it creates it in a brand new tab. Now,
I've read a lot of tutorials and opinions online where people are like, "Oh, this is bad usability, "Don't do this," that
discourage people from using _blank. But there are plenty of legitimate use cases for wanting a page to open up in a
new window or a new tab, so it's really important that you understandthat functionality and how to do it.

And you'll do it using the target attribute. So, as I mentioned at the top of the exercise, linking to external sites is pretty
straight-forward. Just always be sure to check the link path, and make sure it's the full link path, including the protocol.

Linking to downloadable resources

Occasionally you may want to give users the ability to download a file or some type of resource from your site. In certain
cases, for security reasons for example, you may need to occasionally have scripting help you out with this but most of
the time you can do it by justusing simple link syntax combined with the new HTML5 download attribute. To experiment
with this syntax we're going to use the resource.htm file found in 05_03 directory. Now if I look at the directory
structure over here on the left-hand side, I can see that in this folder there's also another directory named _ASSETS, and
inside of that, there is a syntax file, there's two versions of it, a PDF file and a ZIP file. So from our HTML essential
training resource site I've taken the syntax page and sort of created a downloadable resource of just that page. I saved it
as a PDF and I've saved it as a ZIP file, and maybe we want to give users the ability to download that and print it out or
read it at a later time. In the body of our page we have our download our HTML syntax reference. So I'm just going to
surround the text HTML syntax reference with our link. All right, so, the first thing I'm going to do is come in and do a
href. And inside that I'm going to _assets and I'm going to link to the sintax.zip. So, we'll start with the ZIP file
_assets/syntax.zip. We'll give that a title attribute and the title attribute is just going to be HTML syntax reference. And
then I've got to remember my closing anchor tag, right there. So I'm going to save this, and I'm going to preview this in
my browser. Now, what happens when you're in a browser, and somebody clicks on a link.

So this is just a document relative link pointing to that reference. If it points to a file type that the browser does not
support or understand, this is what happens. You can see that the browser automatically downloaded the resource
because it said hey this is a ZIP file. I know what they are but I can't open them within the browser so I'm going to
download them for you. Now if we had tried to do an EXE file or some type of a DMG file like an installer then the
browser has other security protocols that it's going to go through to make sure that the user meant to download
that. But for the most part that's all you really need to do to download an external resource.

However, in certain cases you might actually want them to download something that the browser can open. For
example, the syntax.zip file, if I change that to PDF. So, let's save that, go back in the browser, and now if I click on
this. You'll notice that it opened it up directly within the browser because this version of Chrome has a PDF reader built
into it. Maybe the browser you're using does, maybe it doesn't. But based on the preferences of this browser, I wasn't
prompted to download this, it just went ahead and opened that up. What if you wanted it to force a download, or to
make sure that the resource downloaded? Well I can go back into my link. And what I'm going to do is I'm going to go
ahead and give this a download attribute. Now there are a couple of different ways that we can write this download
attribute.

It can be seen as what's known as a Boolean attribute. Boolean basically means it's either true or false. Just the presence
of the download attribute means that we want this to download and we don't have to give it a value. So by adding the
attribute download, we're telling the browser that, hey, this is a resource that we want the user to download, not
open. So if I save this and preview it in the browser, now when I click, you can see that instead of opening the PDF file, it
downloaded the PDF file, which was awesome. Now, you can further modify the syntax if you'd like. A lot of times you're
going to have resources that were created on the fly.

For example, I might have JavaScript that scans the current page that I'm in, and then packages that up as a PDF file. In
doing that I might have sort of weird naming convention thatnames it something like 417-58. Well, you may want to
force a name on the link that's being downloaded. So to do that I can type in download equals then I can give it a
name. So in this case I'm going to type in HTML_syntax, and that's going to be in quotation marks. So essentially what's
going to happen is, when this syntax is encountered, whatever the name of the file is, in this case syntax.htm, is going to
be replaced with this.

Now, that doesn't really do much for us the way it's currently set up, but if this were created by a machine for example,
and had a very long string to it or you know, very hard to read, then it would be nice to replace it with something like
this. So if I save this, go back out to the browser and now when I click, notice that it downloaded the file
HTML_syntax.pdf, not syntax.pdf. So the syntax that you're seeing here should work with most external
resources. Occasionally you might have more complex file types, or some type of security that requires additional
scripting.

Now, be careful about the types of files that you're going to link to as well. Users are going to be understandably
sensitive about downloading things like EXE files, so be sure to take that into consideration when linking out to
downloadable external resources.
Linking to page regions

In addition to linking two external pages and sites, anchors allow us to jump to specific sections within a document as
well. These are known as fragment identifiers and can be extremely helpful in enhancing your sites navigation. So to
explore that concept we're going to use two files, fragments.htm, and destination.htm, both found in the 05_04
directory. It's a little bit easier if we preview these in the browser so you can kind of see what's going on with them.So
this is fragments.htm, you can see that beneath the headline we have some links that we're going to create here. We're
going to create a link to Section 1, 2 and 3. Then were going to link to Section 2 of the destination page. And then finally
were going to link out to the HTML specification in the W3C. Basically, fragment identifiers let us jump to sections on the
same page. So here we have Section 1, if we scroll down a little bit we have Section 2, and then down a little bit further
we have Section 3. This is extremely helpful when you have a lot of information on the page, and you have a lot of
vertical scrolling for things like frequently asked questions, glossaries. It’s pretty common to find these types of links that
let you sort of jump down to the page. Now, they also allow you to jump to specific sections of the other pages as well.

So if we go to the destination.htm, preview that in the browser, we can see that this one doesn’t have the
navigation. But it does have three different sections, and we want to be able to navigate to a specific one. So with that in
mind let’s go back to fragments, and there’s basically a two-step process in dealing with fragment identifiers. One is you
have to have an ID on the page so, they jump to the ID attribute that you specify in the link. So what we're going to do, is
I'm going to scroll down in my content. You'll notice that at the very top of the page in this h1, it has an ID of top.

And as I scroll through this, I can see that the h3 for Section 1 has an ID of one, Section 2 has an ID of two, and you might
anticipate that Section 3 would have an ID of three, but it doesn't.And that's so that we can practice putting it there. So
what you want to do is on the h3 forSection 3, you want to add an ID attribute. And we'll just go ahead and give it a
value of three, that seems to make sense. I like making IDs short, so they're easy to remember. You don't want any
white space in them, so no spaces. And it's best to keep them as short as possible to make them a little bit easier to
remember.

Capitalization matters as well, so I like leaving them either all lowercase or camel casing them, if I have to. Okay, so now
we need to make links to each of those Sections 1, 2 and 3. So to do that, I'm going to use our normal anchor
element. But the difference is in the href attribute. So instead of linking to a specific page or resource, here we need to
link to the ID. And to do that, we use the octothorpe character, which is sometimes called the pound character, and then
you follow that with the ID. So, if we're linking to Section 1, I can see that the ID is one, so I use the word, one. And that's
exactly how that works. I'm going to give this a title, and the title's going to be section one. I'm a firm believer in doing as
little work as possible when you're coding.

So you can see I surrounded that with a link. What I'm going to do is just copy this, and then paste it around section
two, and section three. So what I'm going to do is #2 for that, #3 for that one, and then I have to remember this is really
dangerous because, I pasted them without doing, closing link tag first. So you want to do, make sure that you close
those anchor elements, both of these as well. So essentially what we've got here now, is we have links created around
the text for sections one, two and three, and I need to update the titles as two, so two there and three here.

And again, what makes this technique is a two step process. You have an ID attribute on an element, in this case ID
equals one, and then the link links to it by using the octothorpe or the hash character here, followed by the ID value. So
if I save this, and preview this on my browser, notice that when I click on Section 3, it jumps down to Section 3. If I click
the Section 2, it jumps down to Section 2. Now, when I click on these you're going to see that when I click on, say Section
1 for example, it goes all the way up to the top.

But when I click on Section 3, it doesn't go all the way up to the top. That's because it scrolls down as far as it possibly
can, it can't get any further down. Now you also may notice that I'm clicking the Back button in order to take me back up
to the top. In terms of usability, this isn't the best thing in the world. If you're going to give your users the ability to jump
down to the bottom of something, you need to give them the ability to jump back up. So, because of the fact that our
top level header this is H1 already has an ID of top, we can create a link at the bottom very easily by just going down
to the bottom, and I'm going to create a brand new paragraph down here.

And I'm just going to go ahead and create a link as well. And in the link I'm going to href link that to the top. Now you
can see why I like using these short fragment identifiers. We'll give it a title of back to the top, and then for link text we'll
just click back to top, close the link, and close the paragraph. If I save this, go back in the browser. Now, if I click down to
the bottom of the page, I have a link back to the top, takes me back up to the top of the page.

So for usability purposes, that's not a bad thing. Now, in this instance we've been linking to page regions that were
within this page. What if you know of a page region in another page that you want to link to. Let's say for example that
somebody's written a blog post, and you want to jump right to the blog post and not have to deal with the rest of the
site. Well in order to do that, all you need to know is the fragment identifier for that section. So if I go into Destination
for example, and I scroll through this code, I can see that I have an ID of one for Section 1, an ID of two for Section 2, and
an ID of three for Section 3.

So in order to link to these sections, all I need to know is the name of the file that I'm linking to, and the section that I
want to link to. So, in fragments, I scroll back up to the series of links that we're making, I can see that I need to link to
Section 2 of the destination.htm page. So I'm going to surround Section 2 with a link here, and I'm going to link that
to the page destination.htm, but I'm going to add to this my identifier. So right after the htm, I'm going to type in #2. So
what this is telling is it's saying, hey, navigate to destination.htm, and find the second section.

We're going to go ahead and give that a title. And I'm just going to give this a title of destination. And then our need to
remember to close our link tag. Right now I'm going to save that, go back out to the browser, and now, I want to click on
the link to Section 2 of the destination page. It not only takes me to the destination page, but jumps me down to the
Section 2 as well. Well, that's pretty easy to do if you know the section because you've created it. But what if you're
going to an outside website and you still want to jump to a specific section? Well let's say I go to the HTML5 specification
from the W3C.

So here I am on their site the w3.org. I have navigated to the HTML5 specification, and I'm basically looking at the table
of contents. Now if I scroll through the table of contents, and I just happen to know where this is. I'm going to go down
to section five. And in section five, right down here, you can see I've been to it already, 5.6.9 Navigating to a Fragment
Identifier.There's really not a lot of information in the HTML5 specification about fragment IDs. This is about the only
thing that you can find.

And if you click on it, it's really some confusing information about the browser's reaction, it's navigation if you will, as it
scrolls to a fragment identifier. So you're not get a whole lot out of this. The whole idea of doing this, however, is to see
that when I click on this, the URL up top in the address bar is telling me all I need to know. Notice it already has a pound
here, Scroll-to Frag ID. So we're seeing in this instance, they're using a fragment identifier to navigate to this specific
section.

Now if you don't necessarily know what the fragment identifier is, you can always take a look at the source code of the
page as well. Notice that if I click in the side this header, and I right-click and tell it to inspect this element. You can see,
I've actually got a couple of different IDs that I could use. I have the ID for the h4 right here, scroll-to frag ID, that's what
we're seeing here.But we also have this ID that's navigate-frag ID. So I could really use either of those. I think I'll just stick
with the one that they're using, because this makes it very easy for me to come up to the URL, and just copy this.

So I'm going to go back into brackets, and where it says fragment identifiers as defined by the W3C, I'm going to
surround the words fragment identifiers with a link. So I'm going to do the anchor element, I'll do the href. And the href
I'm just going to paste in what I copied online,from the W3C because that's going to be way too hard for me to type in
And then I'll do a title attribute, and I'll type in W3C Fragment Identifiers, close that and then, you gotta remember, to
close the links.

So I'll save that, preview that in my browser, and now if I click on this link Fragment identifiers as defined by the W3C. It
jumps right to that section, perfect. Now one last thing that I want to mention in terms of usability, as helpful as these
fragment identifiers can be when you plan out your site navigation, you really do need to be thoughtful when you’re
using them. Because, often it’s not really apparent to the user where they’ve jumped to, which can be a little
disorienting if they’re not used properly. So as you plan the use of fragment of identifiers, make sure that you eliminate
any potential confusion that they can cause to your users.

Challenge: Creating links

It's time for a new challenge and in this challenge we're going to put all that we've learned about links in this chapter to
the test. Once again we'll be working with our HTML Essential training reference site. And this time, we're going to focus
on the site's navigation and all of its internal and external links. So let's dive into the instruction file and see what we
have going on.I have the labinstructions.txt opened up, and, of course, we'll be, going to be working on the entire site.

Okay, so step number one. We need to build our page navigation. This is going to apply to all of our pages. We want to
use document relative links. We're going to enhance the list at the top of the document so it links to the appropriate
pages in the reference site. Be sure to add meaningful descriptions to each link. If I were to go to the intro page,
for example, you can see our navigation up top is no longer a really navigation. There's no links going on there. We just
have a list of different elements, so we'll need those to link to the individual pages, and we need to do that for each
page, not just the intro page. The next thing we'll do is link to external site. And in the file, links.com, we can visit the
footer. And inside that we're going to find a reference to lynda.com, so we'll need to create a link there that references
out to the actual lynda.com site, to the homepage of that.

We also want to modify that link so that's opening up in a new browser window or new tab. And again, always
remember to add descriptive text for the link, and then we're going to browse to Twitter and find the profile page for at
lynda, and we're going to copy that URL. Now I've gone ahead and done that for you, if you're wondering what that URL
is, you want to go to twitter.com/lynda and it'll take you right here. So this is the URL that you're looking for. So back in
the footer you want to add that link to the follow us on Twitter text for the lynda.com account.And then, we need to link
to some internal sections. And for that we're going to go into the reference and the syntax dot HTM.

In the reference page, we're going to find text in the first paragraph that refers to the table of named character
entities. We're going to create a link around that text that jumps to the table at the bottom of the page, and as I
mentioned here in the instructions you need to keep in mindyou're going to need to modify the table as well, to make
this technique work. So what I mean by that, I'm going to go to the reference and show you, if I scroll down a little bit in
this page, notice it says on this page, you'll find quick reference to common html terms and a table of frequently used
named character entities. So this is what we want to create a link around that's going to jump down to this table.

So you're going to need to modify this table in some way so that you're able to link to it. Now the next thing you need to
do is go into the syntax.htm page, and at the bottom of that page,locate the text in the last paragraph that mentions
that table that we were just looking at of the named character entities on the reference page. There we're going to
create a link around that text that navigates to the reference page, and then jumps to that table. So if I go to the syntax
page and scroll all the way towards the bottom. You can see right down here you can find name character entity list
within HTML specification.

You can also find a useful list of character entities on the HTML reference page. So this is the text that I was talking about
there that you want to create the link around. Okay that's it for this challenge. That's not too much work but you are
going to have to bounce back and forth between multiple pages. Now keep in mind as you're working through this
challenge that if you get stuck, you can go back and watch the previous movies in the chapter over and over again. Or
you can open the files in the finished files folder for a quick little hint, if you will. Now when you're done, don't forget to
watch the solutions movie and compare your results to mine.

Solution: Creating links

Congratulations on completing another challenge. I hope you enjoyed working through our link exercises. Let's just take
a quick look at the finished files, so that you can compare your work to the finished versions of the challenge files. Now I
have the intro.hcm open, from the 05_05 finished files directory, and the first thing I want to examine is the page
navigation. That was step number one. So if I look at the navigation area, I can see that all of my page links are
surrounded with a link tag.

They all have an href attribute that resolves the path to that page, intro, syntax, structure, links, references and
next.htm. And I also am using a title attribute to give a little bit of descriptive text, regarding that particular link. Now,
your title attribute, if you did one, may differ a little bit from mine and that's fine. You just want to try to be succinct and
descriptive in a title. Imagine if you would that somebody is reading this to somebody and my advice would be is it giving
enough information about the links, so that you can understand the link's purpose.

You want to keep it as short as you can, but you also want it to be descriptive. The other thing is you want to make sure
that you have both an opening and a closing link tag, and you want to make sure that the entire link itself is inside each
list item, so it's not wrapping on the outside of the list item, it should be inside of the list item. Okay so the next task was
to go out and link to external sites, so within the links.htm we had to go down into the footer, find the first reference to
lynda.com, and then we wanted to create a link that linked to the external lynda.com site in a new tab or a window.

Then we were going to go down and find the link to the lynda.com Twitter account and link to that one as well. So if I go
in the links.htm and browse down to the bottom, I can see that the lynda.com has a link all the way around it. The href
contains not only the link to www.lynda.com but the protocol as well. So remember for absolute links, the URL has to
include the protocol as well as the link. The title is very succinct in this case, lynda.com. And I'm using the target
attribute to open it up in a new tab so target_blank is the value that I'm using there.

Now for the @Lynda twitter account you can see here we're doing pretty much the same thing.I've hot the href that
goes out to the HTTPS, notice that's a slightly different protocol. It's the secure protocol for Twitter.com. Forward slash
Lynda. So that's where we can find the home page of the lynda.com Twitter account. Notice that we have both the
opening and the closing link tags around that. We do have a title that says follow lynda.com on Twitter, so that's a little
bit more descriptive. You may have done something slightly different like lynda on Twitter orsomething like that.

It's fine as long as you're being descriptive there. And you'll notice that here I'm not opening that up in a new tab or
window. That was your choice. You could have chose either one. Really as far as the author goes, that choice is purely
judgmental. We can just switch to here. Now the last task was to link to internal sections. And that's going to be on the
reference.htm and syntax.htm. So we wanted to create links that were going to take us down to the table ofnamed
character entities. One link was going to be on the same page, that was going to be on reference.htm, and one was
going to be on another page, and that was a syntax .htm.

So let's see how we did with those. So if I go to reference.htm and scroll down a little bit, I can see that, this named
character entities text right here, I surrounded it with a link, and the only thing I have in that link is an href attribute
that's going to the fragment identifier, named. Now, remember I said that you're going to have to do two things
here. You're going to have to create the link. But you are also going to have to modify the table. So you may have chosen
a different ID. There's nothing wrong with that. I just came up with named, I thought it made sense.

And then I, of course, I have the octothorpe character in front of that to indicate that it's a named character entity. But if
I go down to the table, I can see that I took the h3, which is inside the caption, and gave it an ID of named, and that's the
ID that I referenced. Now, if you put the ID on the table, if you put the ID on the caption, or even if you put the ID on the
first table row, you're probably going to be okay because it's going to jump to that particular section. So there wasn't
any one compelling reason for me to use the h3, it just seemed that in terms of navigation that one made the most
sense when I jumped to it.
Just to kind of test this out and make sure it works, I'm going to check this in my browser,clicking on named character
entities navigates me right down to that table. Now I mentioned that we also had a link on the syntax page that we
wanted to set, so when I go to the syntax page I can see that we have right here this text HTML reference that I wanted
to create the link around, and again all I'm doing here is an href attribute. This time, however, in addition to the named
fragment identifier, I'm also using reference.htm. Note that there no spaces between the page and the fragment
identifier.

It's all one single character string. So if I preview that in the browser and scroll down towards the bottom, I should be
able to find that link and clicking on it should navigate me not only to that page, but exactly to that section. So that is it
for our challenge on creating links, I hope you enjoyed it. Hopefully your results matched up with mine and if they don't
for some things, like what you typed in for a title, it's really not that important. In other cases, the way you resolve the
URL or perhaps the protocol you put in might actually make a difference.

So be sure to carefully compare your results to mine to make sure that you have fully functioning links within your HTML
reference site.

Lesson6: Creating Lists

Unordered lists

Lists are incredibly useful ways of organizing content. HTML gives us there different types of lists to use based on how
our content needs to be organized and grouped together. In our first exercise in this chapter, we're going to create
what's known as a unordered list. So to work on this, I've opened up the unordered.htm file found in the 06_01
directory. And as you can see, we have just some elements on the page that don't have any formatting at all. And this is
what we're going to create an unordered list around.

Now, if you've been paying attention in the previous chapters, there've been files that we've had lists inside of them. We
just really haven't gone over the syntax yet. So more than likely you've seen them and gotten a little familiar with them
even before we start this exercise. Well anytime that you want a list, the first thing that you're going to do is your going
to need a parent list tag. And that parent tag is going to describe what type of list it is that's going to follow. So since
we're going to do an unordered list, we need to have a ul or unordered list tag.

unordered list tag. So I'm going to open up a ul tag and then below all my items down there I'm going to close my ul
tag. So that tells the browser that we are going to create an unordered list.Now, one of the things that I want you really
to focus on about what lists are and what they do for us is that lists are primarily a way of grouping information. So one
of the things that I always tell people when they say well how do I know when a list is appropriate? Because you can use
them for a lot of different things.

It's not just displaying a list of items in your text. Basically I'm saying well, are they grouped and are they grouped in a
way that makes sense for each of them as individual items within the same group? Meaning, do they belong to that sort
of same hierarchy. If so then a list actually is a compelling way to organize them. You may have noticed in our HTML
reference site forexample that the navigation is a series of list items. And that's because a list is a perfect way of
organizing links.

Each link is its own individual item, but it belongs as part of the navigation whole. So with that in mind, we're going to
create these individual list items. So list syntax has two basic parts. One is the outside parent list tag. The second part
are the individual items within the list. For unordered lists, the list item is indicated through the use of the li tags. So
item one. I'm going to surround it with a list item tag. And list item tags have both opening and closing tags.

And then I'm just going to go ahead and surround each of these items with closing list item tags. This is going to take a
little while. I'm just glad I didn't do a 19 item list. Now you may notice that each of these list items is numbered in
sequence. One, two, and three. And then after three, we have what looks to be sub items. We have 3.1, 3.1, we have
3.2, and 3.3. And that is exactly what they represent. We want to do a nested list after three that's going to hold those
three items as a sub-grouping, or sub-list if you will.

hold those three items as a sub-grouping, or sub-list if you will. And then, reestablish our list with item four. Now, the
way that that's done in HTML confuses a lot of people. And that's basically because what we have to do now, is we have
to nest one list inside of another one.And that gets a little confusing for folks. So, here's the best way to think about
this, I'm going to do this sort of visually. If I highlight these sort of sublist items and just tab them over a little bit, we can
now see that they belong to item three.

That's something that you're probably used to seeing visually anytime that you have a list and anytime you have nested
items inside that list. So essentially all of these items, these three list items, belong to this list item. And that means that
what I'm going to do is inside this list item,I'm going to nest another list. So, very carefully, I'm going to take this closing
list item tag, andI'm going to cut it. Then what I'm going to do is below the nested list item, I'm going to paste it.

So now you can see all of these items are nested inside of this list. Now, these nested items are actually considered to be
in their own list. So they're sort of a sub-list or nested list inside of the first one. So in addition to the li tags that they
have, I need to also surround them in an unordered list. So I need both an opening and a closing unordered list tag. Now
the reason that I'm going pretty slow here is that I really want you to get the syntax behind what's going on.

get the syntax behind what's going on. And I think what I'm going to do is I'm going to further nest this visually so you
can see. All right so essentially what we have is we have item one, we have item two, item three, and item four. Those
are the four main items in our list, but item three has a sub-list which has three items itself, 3.1, 3.2 and 3.3. In order to
do this, what we're doing is we're nesting an entire list inside this list item. And a lot of people aren't going to format it
this carefully. They may actually have this closing list item right after the closing unorder list item.

after the closing unorder list item. How you format it's up to you. I just wanted to be very, very clear with how that's
formatted. So be sure to take some time to practice the syntax for list so that you understand exactly how those lists are
structured and how nested lists work. In the instance of this one where we only have one nested list, it's not that
bad, but when you start nesting multiple lists, it can get a little confusing. Now you're going to use lists far more often
than you might think at first glance. They're great for organizing things like menus, form elements, product information,
really any content that needs to be grouped together in a related manner fits within a list.

content that needs to be grouped together in a related manner fits within a list. Their flexibility and utility make them
among the most commonly used HTML elements.

Ordered lists

Ordered lists are very similar to unordered list. So much so in fact, that they share almost exactly the same syntax. So to
demonstrate that, I've opened up the ordered.htm found in the 06_02 directory, and it probably looks like to some of
you, that I just left the old exercise filethat we were working on, on the last exercise open. Because it is exactly the
same, for the most part. The heading changed, but we still have that same unordered list, and we still have that same
nested one.

And indeed, if we preview that in the browser. You can see we get an unordered list which is represented by those
bullets for both the top level and the nested level list. So we want to change that to an ordered list. And the only thing
that you need to do, syntax wise, to do that is change the parent tag. So the list items remain the same, I just take the ul
and I change it to an ol. That is easy enough isn't it? So if I save that and previewed it. There we go. So now our top level
list is an ordered list.

One, two, three, four. And the nested list is an unordered list, and that's fine. There is nothing wrong with nesting
and combining ordered and unordered lists in any way that you want. It does not matter. Now, we do have a little bit
more control over ordered lists in terms of the things that we can do with it, than we can un-ordered list. Really, with an
un-ordered list all your going to be controlling is whether it has a bullet or not, or whether that bullet is a square or a
disk. Ordered lists on the other hand, they of course have a distinct sequence to each of the items in the list, and we
have a little bit of control over how that sequence is represented.

we have a little bit of control over how that sequence is represented. So I'm going to go back into my HTML, and I'm
going to convert the nested list to the ordered list as well so we can control it. Save that. And then, for the parent order
list one of the things that we can do, is we can change when the count of a certain list starts. So for example I can come
in and say start=, and then we just pass a value into it, and let's say 6. So I'm going to start that count at six. So saving
that, going back out of the browser you can see now that list is going six, seven, eight and nine.

see now that list is going six, seven, eight and nine. Now we can also do some really interesting, like reverse it. So we can
do reversed, which is a boolean attribute. So we're just going to say, ol start="6" and then space and reversed. So notice
that we have to have that space between those attributes. So if I hit save and go back over here you can see that now
it's counting down from six. Six, five, four, three. Now for the nested list let's play around with the type. The default type
in most browsers is going to be the arabic numerals one, two, three, four, five, six, seven.

two, three, four, five, six, seven. But you can kind of play around with that a little bit as well. So if I say type=, I have
some choices here. And I can do lowercase i, if I do that, I get lowercase roman numerals. I can do an uppercase I. If I do
that I get uppercase roman numerals. I could also do the number 1, which is the default. So if I say that, I can see I go
back to doing arabic numerals. And then I have alphabet. So if I do a capital A, save that, I get A, B, C.

And of course if I do lowercase A, I get lower case letters. And I'm just going to leave it as that.So those are some of the
options that we have. We can start numbering it at any number we want. We can reverse the sequence, and we can also
choose what type of list we want tohave in terms of how we want those numbers to display. So, so that's a few more
options when deciding how to render them over unordered lists, but for the most part the syntax is just as straight
forward. Now, since CSS allows us to visually format lists, really, any way we choose, when choosing between an
ordered and an unordered list, your primary deciding factor should be the semantics of it.

an unordered list, your primary deciding factor should be the semantics of it. And that is, does the sequence of these
items matter. If the sequence does matter and ordered list would be the proper choice.
Definition lists

Description lists, which were referred to prior to HTML5 as definition lists, are lists that consists of two parts for each
item. That's a term and a description. Because their syntax is so flexible many authors don't really fully understand what
description lists can do. That's a shame because they really are one of the most flexible semantic elements in all of
HTML. So to show off a little bit of what description lists can do, I've opened up description.htm and the 06_03 folder.

Now just to kind of preview for you what's going on here, we're going to have three description lists that we're going to
do. We're going to do a basic one, one with multiple terms, and one with multiple definitions. If I were to preview this
right now in the browser, doesn't look like much is going on there, and that's because inside each one of these headings
we just have some text that we need to group inside of these lists. So. Let's start with a basic description list so you can
sort of see the overall syntax of the description list and then we'll move on to more of what we can do with them. So
below the h4, I'm going to open up a dl.

So much like an ordered list and an unordered list, a dl lets the browser know that a description list is forthcoming. The
same way that we have an opening and closing tags for our other lists we have a closing tag for the DL as well. And I'm
going to move that in a little bit so it formats a little nicer visually. So now, as I mentioned, instead of a list item, like we
have an ordered and unordered list, the individual items within a definition list are made up of multiple items.

We have a dt for term and we have a dd for description. So this unordered list right here, I'm going to tab this in a little
bit. That is going to be a dt. So the terms always come first. And I'm going to surround that with a dt. And then the next
sentence, grouping of list items in no specific order, I'm going to say dd. So you can kind of see the semantics in play
here.Unorderded list is the term. The description is grouping of list items in no specific order.

So we're going to do that for each one of these. And I think the easiest thing for me to do is go ahead and tab these over
now so that when I add the tags everything formats nicely. Now remember, each of these dt's and dd's have opening
and closing tags. And the order in which you do them matters dramatically. So, in this case of a basic list, where we have
one term andone definition, they need to follow each other in sequence. So now, semantically, this actually makes a
whole lot more sense. It's just easier for us to read, even within the code.

Each one of these list types is described using a term and then we have a brief description of them. And we're using the
dt and the dd tags to do that. Now if I save this and go out to the browser, you can see how this is typically rendered by
a browser. Most browsers will render the terms as top level items, and do the descriptions as inset. So they'll give them
a little bit of an inset, little bit of a margin on the left hand side, and display them that way. But through CSS,you can
make them display any way that you want, so they're very, very flexible.

Okay, so that's a basic description list. A basic description list is going to have multiple items.It's going to have a term
followed by a definition and one term for one definition. Now they don't have to be that way. You can do them any way
that you'd like. For example, you could have a definition or description that has multiple terms applied to it. Let's go
down to the next grouping and we'll go ahead and open up another definition list. And again I have the opening
definition list tag. And I've got the closing definition list tag.

And so what I'm going to do, I'm going to take all these guys, tab 'em in a little bit. I'm going to do three dt's around each
of these. So you can see that this is the term DL description definition list that people might see when they're looking at
definitions of this list type.Remember, prior to HTML5 these were referred to as definition lists. So a lot of documents
out there still refer to them that way and a matter of fact, throughout this example, you probably heard to me refer to
them as definition lists a few times.

you probably heard to me refer to them as definition lists a few times. I just can't seem to get it out of my head. All
right. Now, the dd that I've got below this, I only have one, even though there's two blocks of text down here. Now the
reason I did that is because I also wanted to show you how flexible these are in terms of the content that you can have
inside of them. For the most part, you can put anything you want to in a term or a definition. You can put tables.You can
put other lists. In this case, I'm going to do paragraphs. And I want each of these to be contained within their own
paragraph, so it's okay to put more complicated structures within one of these lists.

it's okay to put more complicated structures within one of these lists. So now if I save this and go back out the browser,
you can see that for this particular list it says DL Description Definition list, it is a list that groups come together by terms
and descriptions used frequently by facts, glossaries, and dictionaries and then HTML lists were frequently used to mark
up dialog. That practice is discouraged now, but no suitable semantic alternative has been proposed, leading to its
continued widespread use for dialog.

And that is definitely one of the things that definition lists are used for. They're used for glossaries, frequently asked
questions, dictionaries, even to mark up dialog between multiple parties because they are so flexible. Now the last
definition list that we're going to do is one that allows us to do multiple descriptions. So, in the previous definition list,
we had multiple terms. In this one we're going to have multiple descriptions. So again, I'm going to create an opening
and a closing dl tag. And here, we're marking up what is, for lack of a better term, metadata.

So for this course, HTML Central Training, we've got the course itself, the author, yours truly.We have producer, Dan
Weston. And then we have three technical reviewers, Simon Allardice, Garrick Chow, and Josh Fitgatner. So all of these
three people belong to this one term. And there's absolutely nothing wrong with marking up the list like this. So we're
going to do a dt for the Course, a dd for the course name. We'll do a dt for the Author and then a dd for my name.

Producer will get terms. And Dan, who is one of my favorite producers here at lynda.com, will get the description. Now
it's perfectly normal for metadata to be marked up in this way and the description lists are used quite frequently to mark
up metadata, credits, things like that. Now in this case, for technical reviewers, we have three of them, so I want to go
ahead and make sure that they're all defined as descriptions. So instead of wrapping them all in a single dd, I'm going to
wrap them all in individual dd's.

I'm going to wrap them all in individual dd's. So you can have three descriptions attached to one term, and that is
perfectly acceptable and semantic. You might have thought that we were going to group them all in one big description,
but in fact they are individual units and they need to be represented as such. Right. So we have three technical
reviewers. These are my buddies Simon Allardice, Garrick Chow, who are also authors here at lynda.com, and Josh
Fitgatner who is one of the best live action directors we have. He's a really talented individual.So if I look at that within
the browser and scroll down, we can see how this is represented.

scroll down, we can see how this is represented. There's Course, Author, Producer, and Technical Reviewers. Notice that
they're all indented because they belong to that one term. So that gives you a little taste of what you can do with
description lists. When you first start using them it may take you a little while before you're totally comfortable with the
syntax. And that's understandable. But once you understand how they work, you'll really appreciate the flexibilitythat
description lists give you, when you're grouping content.

Challenge: Creating lists

- [Instructor] In this challenge, we're going to put to the test what you've learned about creating lists using HTML. We're
gonna continue working on our HTML essential training reference siteby examining the content to determine which
areas would be best served by lists and then decide what type of list provides the best semantic fit for the content
grouping. So I'm in the lab_instructions.txt, file found in the 06_04 directory, this is where all of our challenge files
areand the very first step that we have is we're going back to the site navigation, this time in terms of organizing it.

this time in terms of organizing it. Now this is gonna apply to every single page. You're gonna examine the top level
navigation for the site and currently all the links are enclosed in an individual paragraph and I'm just gonna switch
over to Intro to show you that and as we can see as I scroll down just a little bit and within the Nav, each of the links is
enclosed within a paragraph, and it's like that on every single page so far. So the question that we are asked again is, is
this semantically sound and if not, go ahead and organize those links into the appropriate list type.

into the appropriate list type. Now, you've been working on that navigation section for long enough throughout this
course that I have confidence that you kind of know what you're going to do there. Now, the next thing I want to show
you is the HTML timeline on the Intro.htm file.For the HTML timeline, you want to examine that one and you're gonna
notice that each of the relevant dates in the timeline is contained within a paragraph. Again, you need to ask yourself,is
that the best semantic grouping for the content? If not, go ahead and organize that timelineinto the appropriate list
type and to show you that section, I'm gonna scroll down until I find the timeline, here we go.

here we go. So, we have this section that's headed by this h3 HTML timeline and each one of the dates is enclosed in a
single paragraph, and again, is that the best grouping semanticallythat we can get for that group of content? Next up
we're gonna look at the document type grouping. Now this is in the filesyntax.htm and I'll show you that section in just a
moment but there's a section of different doctypes and a listing of the doctypes and I want you to examine those three
doctypes and their examples.

Would a list be the best semantic presentation of that content and if it is, go ahead and organize those elements into the
appropriate list type. So if I go into syntax.htm and I scroll down a little bit I'm gonna find a section of doctype
declarations, so here's the section right here on doctypes and if I scroll a little further down, here we go, I see that we
have some h4's that are basically saying this is an HTML 4 transitional doctype, this is a XHTML 1.0, this is the HTML
5 and the way that they're organized is you have an h4 that's followed by a preformatted tag that has an example of that
in there.

a preformatted tag that has an example of that in there. If we look at that in the browser, you can see that it's this
section right here. So the question you have to ask yourself is, is this the most logical semantic grouping for this
content and if not, does it belong in a list? Finally we have one more and that is the HTML terms that are found in the
reference.htm so we have sort of a glossary there and what you want to do there is examine the terms and the
descriptions on the page. The way that they're presented right now, is it the best semantic grouping for the content, and
if it's not, go ahead and organize them into the appropriate list type and if I go to reference.htm and scroll down just a
little bit, you can see what I'm talking about.

you can see what I'm talking about. We have h3 terms and for each one of these we have a term, which is followed by a
definition for that term and this is actually a pretty sizable section.You can see as you scroll down, it ends right here
above the table. So take a look at how these are organized. Right now they're just in paragraphs and would a list make
better organizational grouping for those, if so, what type of list? Alright, now keep in mind that in each of these I'm
asking you to make a judgement call for each one of these steps. So I want you to carefully consider what you've learned
about list types and when they're appropriate before you make any changes to the code.

make any changes to the code. As always, if you wanna compare your files with mine, check out the solution movie to
see my thoughts on this challenge.

Solution: Creating lists

I hope you enjoyed working on our creating lists challenge. Let's take a quick look at the finished files so that we can
compare your work with the finished version of the files. So I've got the labinstructions.txt file opened again. And I have
opened up the finished files folder sothat we can kind of go through and see exactly how I organize the content. And it
may be a little different than you. As I mentioned, a lot of these were going to be judgment calls. So the first step was to
examine the site navigation, and then organize them into a list if you deemed it appropriate.

So, I went into the intro and this probably is going to shock none of you. I used an unordered list there. You're probably
familiar with seeing the navigation because we've worked on it sofrequently throughout the site, but hopefully you used
an unordered list here as well. So, why did an unordered list fit this so perfectly? Well, these links are all grouped
together, they all belong to the same part of the navigation, but the sequence that the links are in doesn't really
matter. Now, that doesn't mean that visually it doesn't matter, because you want them to be consistent on every single
page.

However, they don't need to be read or encountered in any one specific order. So because of that, an unordered list
really fits the bill for what we needed. Now the second step was to go back and examine the HTML timeline found in the
intro file as well. So I'm going to navigate back to the intro page and scroll down till I find my timeline. And here, I
organized the timeline in an ordered list. Now the reason I did that is because there's a specific order to the timeline.We
start off in 1991, and the timeline goes all the way down to 2012, so each one of these steps is sequential in the way that
the list is presented.

so each one of these steps is sequential in the way that the list is presented. So, in my opinion, an ordered list here fit a
little bit better than an unordered list. Next up, we were going to look at the grouping of doctypes on the syntax.htm
page. There we had an h4 followed by a preformatted tag for each example of the doctype declarations. So I'm going to
switch over on the syntax.htm and jump down to the section, and you can see that I left this alone.

Now you may have made the judgement call that these needed to be organized in a list, and if you did that you probably
chose a description list because the h4 could be a term and the preformatted could fit within a description. I certainly
couldn't argue with that. That's not a bad way to group this together because we have these three items which are
related to each other semantically. They do sort of belong together. So putting it in the definition list does work. In the
end though, they are already within a section. They're in a section headed by the h3 and in the h4 is themselves create
new sections in our outline.

in the h4 is themselves create new sections in our outline. So if somebody is wanting to navigate to these
individually, it's pretty easy to do with just a document outline that we have right now. So I didn't see the need to
further enhance the semantics by a description list, although it certainly would not have hurt the file. So if you chose to
do it, it wasn't necessarily the wrong decision. Our final step was to go back into the reference.htm, take a look at the
HTML term, sort of the glossary that we had there, and determine if they would benefit from any additional
structure. So I'm going to switch over to my reference file and jump down to the section that contains the html terms,
and indeed, there, I decided that a description list probably was the best way to format that.

there, I decided that a description list probably was the best way to format that. If you think about the way that this
glossary is working, you have a term, and then you have a description below that, that's a textbook case for a description
list. Fits really well and because there's somany terms, it gave you a lot of practice in creating that so, examine your
code, compare it to mine, and see if you get the same thing. Now if you used a different type of list here, that probably
wasn't the best choice. I don't really see an ordered list or an unordered list fitting here.

The only other choice you might have made is just to leave them the way they were or section them through the use of
more headers but frankly, I think a list probably fits the best here semantically. All right, so there's our challenge, all
completed. Now lists are very powerful elements for grouping content together in meaningful ways and that's the
important part of it that they offer meaningful organization. As you learn HTML, pay attention to how other sites
and authors use lists, and what type of content they group with them. You're going to be using them frequently in your
own site so it's very important that you understand exactly how they work

Lesson7: Controlling Styling

HTML and CSS

It's hard to find two technologies that are as closely intertwined as HTML and CSS. Indeed it's almost impossible to teach
one with out at least mentioning the other. It's actually quite common for new web designers to learn both HTML and
CSS at the same time. So in this chapter, I want to take a brief look at styling. So you can see, how these two
technologies work together. And gain an understanding of where HTML's capabilities end, and where CSS is going to
take over.

And to do that, I have the styles.htm from the 07_01 opened up in a browser. And you might notice that this time, I have
it opened up in Firefox instead of Chrome. Now, the reason I'm doing that, is because Firefox has this nifty little
capability that allows me to toggle the styles of the page on and off. So right now, what we're seeing is this quote,
unquote unstyled page.Meaning the author styles, the styles that I wrote, are not being applied to it. Now, I want to
point out something here because I've heard a lot of people refer to a page that looks like this as being unstyled.

to a page that looks like this as being unstyled. When in fact, we are seeing it styled. We're just seeing it styled with the
default styles of the browser. Most browsers agree on default styling.Like heading should look like this, description list
should look this, emphasized text should look like this. And because of that, we see consistency across multiple browsers
when you see the, quote unquote, unstyled page. But really what you're seeing there is the browsers default
styling. When we write CSS we're actually over writing the default styling with the styles that we want.

the styles that we want. And as authors that's exactly what our role is. So if I go up to View > Page Style > Basic
Page Style. I can see that these are the styles that I wrote for the content on the page. Now is it visually striking? Is this
going to win any design awards? Nope. But it's kind of neat. The allow me to demonstrate is now frozen in place while
I scroll the rest of the page. And I've modified the typography so that our text is now in one long column of text.

And I've chosen the fonts I want, the size I want, that sort of thing. Again, going back to the unstyled view, if you
will, you can see it's just basic HTML. Now let's go take a look at the structure of the page. So, I've go the page opened
here in my code editor and you can see it's fairly simple. We have a heading one, we have a couple paragraphs,
and down towards the bottom we have a heading two down there. So, what is it that's allowing me to have so much
visual control over these elements? Well, if I scroll up into the head of the document I can see in the head of the
document I have a style tag.

Now the style tag, it's an HTML tag that basically tells the browser I want to write some styles.So everything inside the
style tag is CSS. CSS stands for cascading style sheets. And the styles that you're seeing here, the syntax of them, it's a
presentational syntax. So it's a little different than HTML, which is a markup language. Essentially, CSS pages are made
up of rules.And the rules have selectors. So here you can see we have a selector that's targeting the body element. And
after that selector, we have a series of properties and values.

And these properties are set inside these curly braces. So here I'm going to say we have a value for margin, for the width
of it and for the font that we want used. So really the syntax is fairly easy to pick up. It's just a matter of learning how to
write the proper selector to target element that you want, and in which properties that you can set. Now CSS is
amazingly flexible. To show you how flexible it is, I'm going to pull a little switcheroo here. If I scroll down, I can see that I
have another style tag in this page. Now this is commented out. We haven't really talked a lot about HTML comments,
but they're very handy.

HTML Comments are these little left angle brackets with an exclamation point, and a dash, dash. And then all the way at
the end of them, you'll have another dash dash and a right angle bracket. That comments out anything that's inside of
it. So essentially, you're telling the browser, ignore this. You can use comments to pass messages to your future self or
other coworkers, or in this case, to hide things that I want hidden. So what I'm going to do is un-comment out the
second style element and then I'm going to comment out the top one.

So essentially I'm turning the top one off and turning the bottom one on. Now if you want to do this with me, you
certainly can. But this is really just a demonstration so. Don't feel bad if you're not doing this along with me. It's fine. I
know I'm doing this kind of quick. So, again, I'm commenting this out by doing exclamation point, dash, dash. And then
at the end, a closing tag, dash, dash, and then right angled bracket. So now, we have a totally new set of styles. If I save
this, go back into my browser and enable page styling again.

Now if I refresh the page, you can see that I get a totally different visual representation. And in this case, a very striking
visual demonstration that shows you just how powerful CSS is. In this case, it allows me to hide content that I don't
want. And to really accent content that I do want.Now the most important thing to realize here is that, to you and me
and people that can see this browser. We have made a significant change to the page. But to other devices like Google
and search engines, screen readers, search robots, things like that, the page has not changed at all.

And that content is read exactly the same way. So unless you work in an environment where all your styles are all locked
down and all you do is edit the page's HTML. I would stress that learning CSS is an equally critical part of learning web
design.

Creating inline styles

In this chapter, my goal is to introduce you to CSS, and some of its basic concepts. CSS is a huge topic, so there's no way
that I can teach you cascading style sheets in a single chapter. I mean, we have dozens of courses on it. However, I do
want to go through the basics of it.Basic syntax, how it's applied, those sorts of things. So I want to start in this exercise
by talking about Inline styles. How they're written and then when they're appropriate to use. So I'll be working in
inline.htm which is found in the 07_02 directory.

As you can see, this is a very simple file. We only have two elements on the page. We have a heading one and we have a
heading two. And you can see the heading too is telling us to do something. It's saying style me using the style
attribute. Okay, so inline styles are styles that are written directly inline in your HTML. And they're applied usually to a
single element. So in this case, for the H2. If I open it up and apply a style attribute, I can now write any CSS formatting
that I want.

So this is using HTML syntax, meaning its an attribute of an HTML element, but now I'm going to pass in CSS properties
and values. So you still have to sort of understand CSS in order to write inline styles. You have to know which properties
and which values can be applied to different elements. In this case, I'm going to change the color of the H2. So in
between the quotation marks, I'm going to type in color and we don't use equals when we're assigning values in CSS. We
use a colon. So color colon, and then red.

And then, immediately after a property, we type in a semicolon to let the browser or user-agent know that that property
is now over. So our syntax is, property on the left hand side, a colon to indicate that we're assigning a value. The value
that we want to pass, in this case, red. And then a semicolon to let it know that this particular line is over, right? So if I
save this and then preview that in my browser, you can see that that heading two now comes up as red.

Now if we want, we can pass as many properties as we'd like within this style attribute. So after the semicolon, if I
wanted to do something else, like perhaps I didn't want this to be bold. I could type in a font-weight and then assign that
as normal and then a semi colon. And if I say this and go back in the browser, I can see that now that heading is no
longer bold, So that was actually fairly quick and easy, right? So when people first see inline styles they're like well that's
pretty easy to do.

to do. And it's immediate, it happens right away and I can apply it directly to the element they want. But there's a bigger
problem with this. Imagine you have a site that has say, oh I don't know couple of dozen pages. And you wanted every
h2 to look like this. You imagined the amount you're going to need to do within your files. You going to have to go into
every page.Find every h2 and write this attribute for it. And then you're going to have to maintain that.Imagine if
somebody comes into your office one day and says, hey those heading twos look great but I'd like them in green.

Now you're going to have to go through and edit all of those hundreds of rules. So inline styles are not a very efficient
way of applying styling. And in fact, their usage is so frowned upon that at one point, the style attribute was almost
removed from the specification. So why do we have it? Well it is very useful in certain instances. For example if you're
going to do an HTML email, inline styles are one of the only ways that you can apply styling for certain email clients. So
they're used widely. When writing html emails. The other thing that there used a good bid in is scripting.

Let's say your going to build a widget dynamically. A lot of people will in their job script write inline styles that go in
to style their specific elements. Since it's being built through scripting, it's a little bit easier to maintain. So you probably
won't often find yourself needing to use inline styles. In fact, unless there's a really good reason for you to use them, I
would advise against them. However, since there are cases where they're appropriate. I think it's important that you
understand the syntax behind inline styles, and when they're appropriate to use.

The style element

In our last exercise we discussed why it was a bad idea to style HTML elements directly using inline styles. It's a lot more
efficient to have styles that can affect an entire page or an entire site all at once. So to introduce that concept we're
going to take a look at using the style element and move our styles into the head of our document. To do this, we're
going to work with the style.htm which is found in the 07_03 directory. And again, you can see we're sort of picking up
where we left off. We had a heading two on the page.

And currently its using inline styling to make itself red and change its font weight to normal. So I want to move that up
so that any h2's that might be on this page are effected by that and I'm not having to do this inline styling for every
single one of them. Again, we're going to do this in the head of the document, remember the head is where those sort
of invisible things that help make the page work go and we're going to do a style tag. So we're going to go ahead and
open up a style tag and then directly underneath that we want to close the style tag. I definitely recommend going
ahead and doing the opening and closing tags at the very beginning of this, because it's really easy to start writing your
styles and then forgetting to close that style tag.

start writing your styles and then forgetting to close that style tag. So that's pretty important. So, the next thing that we
need to do is to start writing CSS. So, we're done writing HTML at this point, and inside the style tags, we're going to be
writing using the CSS syntax. So here's where we have to learn a little bit about HTML syntax. So, if we wanted to target
an element on the page with CSS, we use what's known as a selector. Selectors basically tell the browser oruser agent
this is the element, or elements, that I want to style.

In the case of the heading 2, all we have to do, is type in h2. So, we don't need a tag around it, we don't need any angle
brackets. All you do is type in the element that you're wanting to style. This is what's known as an element selector,
and it's probably the most basic selector type that you'll find, or encounter in CSS. After this we're going to have a
collection of properties, and this could be an individual property that we want to control or it could be multiple
properties. So, in order to group them together, we use curly braces. So I'm going to use the curly bracket that you can
find just to the right of the P key.

the P key. You can see I'm opening one up. Now with CSS syntax it doesn't care if we write this all in one line, but in
order to make it more readable for other users or the author it's a common practice to hit Return a couple of time and
then close the curly bracket. You can see that brackets my code editor realizes what I'm doing here and goes ahead and
formats that for me which is really nice. So essentially we have an opening curly brace and we have a closing curly brace
and that's going to enclose all of the properties that we want for this particular rule.So the selector and the properties
all together are considered a CSS rule.

So now we know we want to make the color red and we want to make the font weight normal.We can actually take a
look down at the inline style and use its syntax. So I can type in color:red; so again you can see it's exactly the same
syntax we used down below for our properties and our values. Then I'm going to hit Return to go down to the next line
and on the next line I'm going to type in font-weight and I'm going to set that to normal. So just the same way that we
did it before. I have no idea why brackets decides to do that weird spacing, but whatever.

Now I'm just saying this, and then what I'm going to do is I'm going to get rid of the m line style down here inside the
HTML element. I don't want that. So I'll save that. Preview that in the browser and I can see that I'm still getting that
same styling. I'm still getting a red, I'm still getting that sort of normal style so it's not bold. As perfect it's working exactly
the way I want it to. Now, this is a little bit more flexible and a little bit more powerful because if I were to create a new
h2. So I'm just going to copy this existing one. Paste it down here.

And then on the bottom one I'm going to say something like, those reenforcing concept, right?Global styles apply to all
instances of the element. So the style that we wrote is considered to be a global style meaning. It's going to apply to
every single h2 on the page. And if I switch over to my browser, I can see that that is indeed the case because the second
h2 that we applied to the page goes ahead and receives that styling as well. So this is a very generic selector, it's what
we'll call a global selector, it's applying to everybody.

With CSS you can be a little bit more targeted if you want to. For example, if I take the first h2 right here and I apply a
class of alert to that and save this, then I can come back up to the selector and I can just say .alert. So this is what's
known as a class selector. It has a period in front of it and then the value of the class attribute. So it goes down into your
HTML and it says okay, I'm looking for a class. So that period.

Indicates that it's looking for that class attribute. And then it says I'm looking for one that has a value of alert, which
would match this one. You'll notice that there's no space between the period and the text. It's just all one thing. So now
if I save this and go back into the browser,you can see that the style's now only applying to the first h2. Now this is
interesting because you can use classes as often as you want. So for the h1, if I wanted to, I could give it a class of alert
as well, and it would receive the exact same styling.

Even though they're different elements, an h1 and h2. However if I want, I can make the selector even more specific. So I
could come up to the selector and I could choose, h2.alert.So no spacing in between them, and that's even being more
specific. It's saying find an h2, that has the class, of alert applied to it. So it would scan the whole page, it would look for
an h2,that has a class of alert applied to it and if I save that and test it, again, you can see it's targeting only that page.

So having the ability to control an entire page of styling in one location, like we have here in the style tag, is pretty
powerful. A little later on we're going to explain how you can control an entire site with one set of styles. But before we
can do that, let's go over the basic styling properties that we can control. And we're going to start in our next exercise by
exploring basic typography.

Controlling typography

Although there is simply no way to show everything that CSS is capable of in a single chapter, I do want to give you an
idea of some of the options that you have when styling elements on your page. We're going to start by exploring some
of the things you can control around typography. So I have the type.htm file open from the 07_04. And just to give you
an idea of what's going on, on this page, we have a heading one at the top, we have a couple of paragraphs. They go on
to describe some of the aspects of how HTML and CSS work together.

So I advise you to kind of read through that text, because I tried to go a little bit more in depth with some of the exercise
files in terms of the text of it. So read through them, there's some good stuff in there. Okay, so above that, and ahead of
our document, we can see that we already have a style element. We see that we have a single rule set on the body
element.That's setting the width of the body to 70% and a margin to 0 and auto, which is kind of a weird selector. So
what's that doing for us? Well, if I go out to my browser you can see that, that is essentially centering the page. So that
70% is saying, hey, all the visual content should be 70% of the available browser size.

all the visual content should be 70% of the available browser size. So if I resize the browser, it's always going to stay right
at 70%, which is nice. Now the thing that the margin is doing for us, is it's centering the page. Because, so what we got
here is what we call shorthand notation.When we set a margin, we set margins all the way around the sides of an
element. Top, right, bottom, and left. So for this margin, we're saying 0 for the first value, which gives us top andbottom,
and then auto for left and right.

So you just kind of have to know that shorthand syntax. So auto for left and right says hey, the width is 70%, whatever's
leftover, put half of that on the left, half of that on the right, then you get a centered element. So that's exactly what's
going on there. Let's focus on typography. I'm going to go down to the next line and create a brand new rule for the h1,
for my heading one.All right, now again. I really like to go ahead and open and close those curly braces at the very
beginning because I know that I've got an opening and closing one and, and it's very easy to forget to close that bracket.

So we're concentrating on type. So the first property we're going to set is font-family, font family. Now when you're
passing in a font family, you can ask for a specific type face. In this case, I'm going to ask for Georgia. Now Georgia is
what we call a system font, meaning it's installed on almost every computer out there when it ships. That way, I know
that the end user that's looking at this page is probably going to have that font. You see, when we deal with HTML and
CSS, we can't install a font for somebody.

So basically, we have to rely on the font that's on the client machines to display within the page. Now recently, with the
advent of web fonts and services like Typekit, that's changed. But for the most part, unless you're going to be using a
service like Google Fonts, or Adobe's Edge Fonts or Typekit. You're probably still going to need to use these types of
system fonts.All right, now, one of the things that came in to play as system fonts were being used is the fact that maybe
somebody doesn't have Georgia installed, what happens then? Well, if you don't specify what we call a fallback
what happens is the default font for that user agent displays.

happens is the default font for that user agent displays. And Georgia is a serif font, meaning it looks more like Times
New Roman, it has serifs on the end of it. What if the default font for that user agent was a Sans Serif Font? It would
look weird and unintended. So, you can describe fallback fonts. In this case, in quotation marks, I'm going to do Times
New Roman. The quotation marks are necessary because this font has more than one name. If it's just one name, you
don't need the quotation marks.

But the quotation marks group this font together in one name. So, basically what we're saying here is, if you don't have
Georgia, give me Times New Roman. And then finally, I'm going to do another cursor and then I'm just going to type in
serif. And those are your sort of fallback families. I'm basically saying that, hey, in case you don't have Georgia or Times
New Roman, just give me whatever serif you have available. And that way at least I get the style of font that I'm looking
for. Okay, on the next line, I'm going to do a font-size and I'm going to change the font-size to 2ems.

Now font-size of course is how big this is, and I'm doing 2 E-M which stands for em. Now, you could do pixels here if you
want, there's nothing wrong with that. You can do 32 pixels. But 2ems is a little bit more flexible. This is what we call a
relative unit of measurement. What this is doing, is I'm basically saying to the user agent, hey, whatever your default
font-size is, give me twice that. So two times what your default is. This is very handy for the world we live in now where
we have a lot of different devices. So if somebody is on the phone, 16 pixel text actually looks pretty big, whereas on a
desktop screen, 16 pixels is pretty small.

whereas on a desktop screen, 16 pixels is pretty small. And that way, I get to size this text relative to the device
somebody's reading it on, and it's a nice way to do things. Couple of other things we're going to do here is font-weight
and I'm going to set that to normal. By default, the headings are bold. So by doing this I'm saying I don't want this
heading to be bold.And then finally we're also going to do font-style, and for font style, I'm going to do italic.

Now, you can see here, we've done font family, font size, font weight, font style. There are a lot of different
properties. These are certainly not even all of them, that we can use when we're controlling typography. So as you can
see, learning CSS is a lot about learning properties andwhich values are available. So, for font style for example, I could
do italic or I could do normal.For font weight, I could do bold or I could do normal. That's the equivalent of using the
bold or the italics tag in HTML. It allows me to have a little bit more control over that without having touse those
elements. All right, if I save that and go into the browser, you can see the heading is doing exactly what I wanted it to do
now.

you can see the heading is doing exactly what I wanted it to do now. It's Georgia, it is italicized and it's not bold, and it's
a little big but it's not as big as it was before. I'm setting a relationship to, to body count. If I go back into my CSS, I want
to create a new rule that is going to control the paragraphs. I'm going to scroll down a little bit, to get myself a little bit
more room. So you guys can see what I'm doing here. And by the way, you can see, I'm having trouble getting it to line
these rules up. If your code editor is doing what I'm doing, it's a little wonky here, don't worry about it, it doesn't matter.

don't worry about it, it doesn't matter. These styles could all be on the same line and it would still render properly. Okay
so, for my paragraph, I'm going to do font family again. And this time, I'm going to change it to Arial,Helvetica,sans-
serif. And I'm going to use my code ending to help me out. All right, so for font family, this time I'm going to do
Arial, Helvetica, sans-serif, which is a totally different font. Now, look what I forgot to do, do you see it? I forgot to do my
closing curly brace.

See how easy that is to do? So always remember to do your closing curly brace. I certainly forgot mine. Okay, after that
I'm going to do font-size, and I'll set the font-size to 1em. I'm going to do line-height. Line-height is the space between
the individual lines of the paragraph, andI'm going to set that to 1.6 so it's going to increase the space. You could think of
that as like single spacing, double spacing, that sort of thing. So line-height, 1.6. And then finally text-align, I'm going to
set that to justify, and that is going to set how the edge of the paragraph should be aligned.

So left align, right align, centered. In this case I'm doing justify. All right. I'm going to go and save that, go back to the
browser. And you can see, we're getting exactly what we want. We're getting a little bit more spacing between the
lines. We're increasing that using the line height.I'm using a different font for Arial and you can see what the justify text
alignment does for us.Now we can also, in addition to controlling things like family size, line height, things like that.We
can control the spacing between elements too. And even though this is seen as a typographic style, we're going to use a
property that's really what they call a box model property.

a property that's really what they call a box model property. And that would be margins to control the spacing of our
elements. So what I'm going to do is go up to my h1 selector. And I'm going to change its margin to 1em, space 0, space .
4ems. So again, we're using shorthand notation here. When margins are set, they're done in sort of a clockwise fashion,
from the top.So it goes top, right, bottom and left. When we use three values like this, we're saying for the top, I want
1em, for the left and right, I want 0 and for the bottom, I want .4ems.

the left and right, I want 0 and for the bottom, I want .4ems. So again, it's just understanding how this shorthand
annotation works. Then I'm going to get down to my paragraphs and I'm going to change a few other things here. I'm
going to set the width of the paragraph to 60%.I'm going to set its initial margin to 0, and look at that, I forgot my
semicolon. Syntaxual rules are there for a reason and one of the nice things that this particular code-editor's doing
for me is if I break one of those rules, you can see that the code coloring changes.

So, it's a nice visual indicator for me that hey, you just made a mistake. So it's very common to do. When something like
that happens just go up there, put the semicolon in and you're fine.So for margin, I'm going to type in 0 for the initial
margin but then I'm going to go underneath that and type in margin-bottom and I'm going to set that to 1em. So what
I'm doing basically is setting zero all the way around and then just 1em for the bottom. Now when I say this and go back
up, now you'll notice that my paragraphs are 60% of the available space. The spacing between them is now being
controlled with their bottom margin.

And, I've also controlled the spacing between my heading and my paragraph too. So, I'm just sort of making everything
look a little bit more harmonious, using these styles. And you can see the level of control you have over these elements
is actually quite good. Now one last thing. What if we wanted all of our text in the page to be Arial, Helvetica, and Sans
Serif except for the heading one, and we wanted that to be Georgia? Well now, using the strategy that we've got here, I
would have to set that on all those other elements individually. So what if we had tables? What if we had lists? What if
we had block quotes? I would need to set the same font family property in all of them.

I would need to set the same font family property in all of them. I'd rather not do that. I like taking care of things
globally. So the last thing we're going to do, is we're going to move this information up to the body so that it's a global
style applied to all elements. So up in body, I'm going to do one last rule, and I'm going to do font and just font. So the
same way that we can do shorthand notation for things like margins, we can do shorthand notation for fonts. And for
fonts I'm going to say 100% and then I'm going to say Arial, Helvetica and then sans-serif.

And if I was smart, I would have copied it from down here. Now, 100% is essentially saying the same thing as 1em. I'm
saying, give me your default font size. So they're almost the same. I'm going to take font family and font size away from
paragraph. I'm going to strip it, because it doesn't need it, and now, this font would be applied to everything on the
page. However, this shows us another thing about CSS. You'll notice that the h1 is saying I want Georgia in two ends,
but body is saying this should be applied to everybody. So now we have a conflict, between our CSS.

Whenever there's a conflict in your CSS, the closest rule wins. Meaning, the more specific rule wins. In this case, h1 is
more specific, a single element. So it overrides its parent, which is body. So if I save this, go back out to my CSS. It
doesn't look any different, it's exactly the same, but now we have slightly more efficient styles. So I know we did a lot
here, but really those are just some of the basic text formatting options that we have when we're using styles.So at this
point, if you're starting to feel a little overwhelmed in terms of CSS, please don't.

please don't. Remember, this is not a CSS course. The main purpose of these exercises is to show you a little bit of what
CSS is capable of and to expose you to the syntax, so that you're going to have a head start when you begin learning CSS
on your own.

Adding color

- [Instructor] Aside from controlling the formatting of typography, controlling the color of elements on the page is
probably the most common part of basic page styling. Let's take a look at ways that we can control color through using
CSS. To do that, we will use the aptly named color dot htm file found in the zero seven underscore zero five
directory, and if I scroll down I can see that it's pretty much the same page that we just left, so we're kind of picking up
right where we left off. There is a new rule up top, it's the HTML rule, and that showcases one of the really interesting
things that I find about CSS, there really isn't an element that you can't style.
that you can't style. So remember, the HTML is sort of the large parent tag. Well, some browsers recognize that as
having intrinsic properties, so it's not a bad idea to go ahead and strip out things like margin and padding so that your
spacing is consistent throughout all sites.Well, we're gonna use this to apply some color. So if I go up to HTML, and I
choose background dash color, and for that color I'm gonna do pound seven seven seven and then a semicolon. Now,
most people when they see this for color they're like, huh? What are you talking about? This is what we call hexadecimal
notation.

This is what we call hexadecimal notation. Essentially, color is defined on the screen as RGB,red, green, and blue, and
you can go from zero to 255 for each of those values, and mixtures of those gives you all the colors that we can see on
the screen which are into the millions.What hexadecimal notation does for us is it basically breaks those values, red,
green, and blue, into three separate values and allows us to express that based upon a hex value, and the hex value can
be resolved into a number, and that number is between zero and 255.

into a number, and that number is between zero and 255. So in the case of this one, we're using shorthand notation. So
this is the same as us saying seven seven, seven seven, seven seven. So anytime you have three pairs of the same, so for
example even if I had something like three three, six six, seven seven, that could be represented as three six seven. I'm
gonna do seven seven seven, save that, and now if I preview the page, I can see that the entirebackground for my site is
now that gray color that we just asked for.

that we just asked for. Now remember, our body element is only 70 percent of the width of the entire page, which
would be HTML. So if I come into my body, and I give it a background color as well, and if I want I can just do the
shorthand notation of background, I don't have to be specific as background dash color, that's very specific, I can just say
hey, for my background,let's make my background white, because you can do a lot of different things with your
background. You can apply an image for example, instead of a color.

So if I wanted a graphic to appear behind everything, I could do that. So I'm gonna save background as white, and now,
when I switch back over to the browser, I can see that what it's done is it's taken all the visual elements contained within
body and it's given a background of white to that, so that gives us sort of this two-toned look that we're seeing
now. Now in addition to the backgrounds of elements, you can apply color to things like borders as well. So if I'm still in
the body selector, I can come in and do something like border dash bottom, so apply a border to the bottom of the body
element, and here I can do something like ten pixels, a really thick border, solid, so the style of it should be solid, and for
color, I'm gonna choose gold.

should be solid, and for color, I'm gonna choose gold. Solid gold, baby. If I save this, and preview it, notice that we
now get a solid gold border, ten pixels wide, at the bottom of the body tag, cool. Alright, so for border bottom, again,
this is a shorthand notation, ten pixels is the width, solid is the style, gold, of course, would be the color. Now in the case
of the gold border and the white background, we're using what's known as reserved keywords, and you can go into the
CSS specification and check out some of those reserve keywords.

and check out some of those reserve keywords. There are a lot of them because recently,they also supported the SVG
reserved color notation too, so there's literally dozens of those reserved words. Now I would like to point out, it's not
gonna be consistent everywhere, so gold for example, one browser might make that more yellow than another
browser. You're basically just saying hey, whatever color you normally reserve for gold, give me that. Although, they are
supposed to have reserve text values, but it's not always honored. Last thing we're gonna do, let's go down to the
heading one and apply a background color to it as well.

and apply a background color to it as well. So, if I go down to the heading one, I can set a background on it, and you
know what, so far we've done hex values, and we've done reserve colors, but we haven't done an RGB notation, so let's
do that. RGB and then in parentheses, we're gonna do 44 comma, 45 comma, 140. So what this does for us is it allows us
to specify a specific RGB value. In this case, this is red, this is green, and this is the blue value, and Brackets is being oh so
helpful in showing me that that is going to be a blue color, so one of the things that is a little tricky about defining color
in CSS, if you're gonna use RGB notation, if you're gonna use hexadecimal notation, or some of the other notations
available like hue, saturation, and brightness, you really have to know what the values are before you get here.

what the values are before you get here. This isn't something that you play around with that often, usually use in
another program or a chart somewhere, and pick the colors off of that. So if I save this, preview that in the
background, now I can see that headline has a dark blue background. I also get to see how big the headline actually
is. Headings are treated like block level elements so they expand to fill their apparent container. In this case, it's
expanding to fill the width of my apparent container, which is the body tag. Now the last thing we're gonna do is set the
foreground color for the heading, so that black text on the blue background is a little hard to read, so I'm gonna go right
down and set one more property.

so I'm gonna go right down and set one more property. I'm gonna do color and the color is going to be pound D, D, D. So
that's again, hexadecimal notation and that's sort of a lighter gray, so if I save that, go into the browser, I can see that I
have the lighter gray foreground color on the blue background. Now again, this isn't the best looking page in the
world now, but at least you get an idea of kind of how color works. Now the color property, a lot of people get
confused by this, you can see the difference between color and background, so much so that a lot of people actually
refer to this property as foreground color instead of just color.
instead of just color. As you can imagine, there's a lot more to applying color than what we've discussed here. For now,
just focus on the fact that you can set color for most elements on their backgrounds, borders, and foreground content.

Externalizing styles

So far we've worked with styles that are embedded directly into the page. While that's great for controlling styling for a
specific page, it's still rather inefficient in terms of styling an entire site.So in this exercise we're going to focus on
externalizing our styles and then applying them to multiple pages. So I'm going to be working with the external.htm file
found in the 07_06 directory. And little later on in this exercise we'll be working with page 2.htm as well. So currently
we're sort of picking up where we left off.

We have some styles supplied in the head of the document. And we have our fairly simple page with the heading one,
couple of paragraphs. You know you will notice that we have a link on the page to page 2. And that page 2, if I open that
up, has no styles applied to it whatsoever. It says nothing up in the head. And that is a link back to page one. So gives
you an idea of kind of the structure that we're working with. Okay. So what we would like to have happen. Is we would
like to have the styles that are currently in the head of this documentcontrolling, say, an entire site. In this case it's a
small site, it's two pages, but it's the concept that counts.

So we want it to control everybody. To do that we have to externalize these styles, meaning we can't keep putting them
in the head of the document. Again imagine if you have 50 pages in a site, you would have to take and copy and paste
this styles in all 50 pages. And then, if you edited one selector, you'd have to open up all the rest of the pages and edit it
in their as well, a very inefficient way of working. All right, so what I'm going to do is create a brand new page. So I'm
going to go up to File > New. And I'm going to save this in the 07_06 directory.

And I'm going to save it as styles.css. Much like HTML, CSS files are just text files with a .css extension. So you shouldn't
have to do anything really special in order to create one. Just create a brand new text file and name it .css. Okay. So now
what I'm going to do is go in to the external.html and I'm going to copy all of these styles. As a matter of fact, instead of
copying them I'm going to cut them. Now I don't need the style element, that's HTML. All I needed was the CSS.

So I'm removing everything from inside the style tag. I'll go back to styles.css. And I'll paste them. So that's all I'm really
doing. I'm just cutting them from the embedded styles on the page and then pasting them into our new styles.css. And
I'm going to go ahead and save this file and then I'm going to go back to external.htm. Okay, we don't need this
embedded style tag on the page anymore either. If I save this file and look at it in the browser. You can see it's coming in
totally quote unquote, unstyled, we're just seeing the default styling.

Lets get our styles back, now in order to do that we now need to point to styles.css file and tell the user agent that we
want to use those styles. We do that in the head of our document, and we do it using a link tag. So after title, I'm going
to come in and add a link tag. And link tags are one of those tags that don't need a closing tag. So all you need is an
opening link tag. And inside the link tag, I need to pass along a couple of attributes. The first attribute I'm going to pass
along is the rel attribute, or relation.

I need to tell the user agent. What relationship the resource we're bringing in has to this page.And in this case, I'm going
to say style sheet. This is a very important step because it lets the user agent know what the relationship between two
documents are and how to treat them. So without this it could actually cause some issues. So I'm going to say link
relationship equals style sheet. Then after that I need to point to the style sheet itself. So what I'm going to do is an href
attribute. So much like the anchor attribute, you're going to use an href attribute.

But this time instead of pointing to a page that you want to navigate to, you're pointing to a resource that you want to
use. So href, and I'm just going to point that to the styles.css. Now you could resolve this in the same way. It's actually
common for most sites to have CSS in their own folder. They have a top level folder that they'll probably name
something like _css andthen place the styles there. Since the styles.css that we created is in the same folder as this
external.htm. I don't need to do any type of directory navigation, I just state the file.

But, you do need to resolve this path. So if where you're going is different from where you're at. You'll need to go either
up directories, down directories, the same way that you do as you're resolving a link. Last thing I need to do is just close
out this tag. That's it. Remember, there's no closing tag. So I just do a right angle bracket, and there is my style sheet
link. Now if I save this and go back into my browser. So now I'm getting the styles that I want, and it's coming in from
that external resource. So now, if I want to use this throughout my site, it's just a matter of linking to the same style
sheet.

So you know, I'm always for doing things the most efficient way possible. So what I'm going to do is just copy this link
tag, and then I'm going to go to page number two and just below the title in that one. I'll paste it in there as well. Since
they're in the same folder, the link is resolved exactly the same way. So I'll save this. And now if I preview this in the
page, it's getting the styling too. So I can link back and forth between page one and page two, and they're both receiving
the styling. What's nice about this is the styling is now site-wide if you will.

And if I made an edit to the styles.css,. It would automatically apply to all the pages in my site.So if i go to styles.css I can
scroll down, and add a little bit of styling for those links. So after the paragraph, I'm going to do an A selector and inside
of that I'm going to do text decoration of none. That will remove the underline from the links. Which is actually not that
great of an idea.There's a lot of usability studies out there lately that have said that it's a really good idea to leave the
underline on links.

But I'm just doing it because, hey, you can. All right. So I'm stripping away the underline underneath the links, and I'm
changing their color to red. I also want to set a hover style on this, too, so that when people hover over the link, it
changes color. So I'm going to do a:hover.So that's all one selector, a:hover. And here, I'm just going to set its color to
black. So I'll save that, go back into one of my pages, preview up my browser and now you can see the link styling
changes. There's the hover that we just set.

That change was applied globally, to both of those pages, It would have been sit wide, if we had dozens of pages. Simply
because we're using the one external resource to apply all the styles for our pages. So I think it's pretty easy for you to
see the benefits of using these external styles. You can now control an unlimited amount of pages through just this
single file.So as you start to learn CSS. Pay close attention to how external and embedded styles work together. Avoiding
styling conflicts and writing efficient styles are really important aspects of authoring CSS.

So as you learn CSS, it's important to understand how all of these styles are going to work together

Challenge: Controlling basic styling

Congratulations. You've made it all the way to the final challenge. And in this challenge, you're going to practice
controlling site-wide styling and writing some basic selectors for our reference site. All right. So I have the lab
instructions.txt open from the 07 underscore 07 directory. And we're going to be working again on our HTML essential
training reference site. If we were to open it up right now. Let's see, let me go to intro and just open this page up. And if
I were to preview this in my browser, you can see that all the styling that we've had all the way throughout the course is
suddenly missing.

the styling that we've had all the way throughout the course is suddenly missing. So we'll need to put it back. The very
first step is to link all of the pages in our site to our external style sheet.So, you're going to open up each of the
individual pages. And you want to link them to style sheet styles.css. Now, that styles sheet is located in the underscore
css folder and it's called styles.css. So not only do you need to link it there, you want to make sure that you resolve the
link correctly from the files to the CSS file.

Going in to the underscore css directory. Also, you want to make sure that you remember todefine the relationship
between the style sheet and the HTML files, as well. After you've done that and you've got the styling applied, we're
going to go in and modify some of the styling.The first thing you're going to do is set the background color of the
pages. So you're going to go into the styles.css file and in that file, you're going to locate the rule that is styling the HTML
and body tag. And it'll look exactly like that. That's the selector you're looking for. When you see a comma between two
element selectors that's what's known as a group selector.

a group selector. It groups those two elements together and applies the styling to both of them. For those you're going
to set the background color to this hexadecimal value. Pound 663399 which you can see is a purple. Now, we didn't talk
about writing CSS comments in the exercises. So I wanted to give you some practice in doing that. So after the color
definition, after the semicolon. I want you to add this CSS comment right beside that to define which color you're
using. Now in this case, comments and CSS are done by forward slash star and then star forward slash to end them.

CSS are done by forward slash star and then star forward slash to end them. And they can be multiple lines. So in this
case, all you're doing is defining the color. And that's just writing somebody, a such as yourself, for example, a note to let
you know what the color is. It's not actually going to be performing any function other than just being informative. All
right. After that, we're going to be working with floating images. So on the intro page, we have two images.We have the
tags.png at the top. And then down towards the bottom, we have the W3C icon.

So we're going to control the way that text flows around those. So the first thing you're going to do is scroll down into
the CSS and right around line 104, somewhere around in there, you'll find two selectors. One for flowRight and one for
flowLeft. You're going to need to set the float property for both of those. You're going to set the float property for
flowRight to right and the float property for flowLeft to left. Now, some of you are probably saying, wait a second. You
didn't tell us how to set the float property. You never did that.

Well, the same way that you set all the other properties, you're going to set this property. I'm showing you what the
property looks like and I'm giving you the values for the property, right and left in their respective selectors. So that
actually should be pretty easy for you to do. And it sort of illustrates how consistent the syntax is in CSS. So what that
float property does for you is it controls how the elements position themselves and how the contents are going to flow
around them. Once you assign both of those values, you're going to preview the intro page and you're going to notice
that no change has occurred.

That's because these selectors right here are what we call class selectors. And they depend on the fact that an element
has those classes applied to them. So what you're going to need to do in order to complete the styling is you're going to
need to go back into the intro.htm. Find those images and then apply the class flowRight to the first image and the class
flowLeft to the second image. Note that spelling matters and capitalization matters. So you need to make sure it
matches the selectors that you have in CSS.

Preview it again and now the text should be flowing around the image. Finally, you want to do a little bit of site-wide
typography work. Again, you're going to go back into the styles document and you're going to write a rule that sets the
pages default font size to 100% of the user's agent default. And that request for Verdana as the font-family. You want to
set Geneva and the default sans-serif definition as fallbacks. Try to do all of this in a single rule, if you can. So essentially,
you may have to go back to the typography exercise and take a look at how that's done.

take a look at how that's done. Because I've been very, very vague here in terms of how you're going to do this. I want to
see how much you picked up from that and how much critical thinking that you can apply in order to do this. So I'm not
telling you which properties to set. I'm not telling you exactly how to do it. I'm just telling what I want you to with this
one. So again, set the page's default font size to 100% of the user agent's default. And then use Verdana as the font-
family and set Geneva and sans-serif families as the fallback. And I want that to apply to the whole page, not just this
specific element. And okay.

Okay. So after you're done with all that, saved what you worked on. Preview them and go through the style sheet. And
after you're done with all that, preview it as you go along to make sure everything is selling the way you want it to. But I
also would encourage you that once you're done with the exercise, go through the style sheet. Take a look at all the
selectors there and their properties. Try to match those selectors to elements in the page and you'll get an idea as to
what's going on there behind the scenes in terms of, of styling. As I mentioned here in the instructions, really don't get
too concerned if you don't immediately recognize which elements they're targeting or which properties are being
controlled.

which properties are being controlled. The goal really is just to start the process of understanding how CSS selectors
work and how certain properties affect those elements on the page. So there you go, that's your last challenge. Now
individually. Those tasks probably won't take you all that long to do. However, I want to state you need to be
really, really careful when you're writing your CSS syntax. If you test the page in browser and you don't get the
formatting you expect, really look at your syntax. CSS is a stickler for things being spelled correctly, for colons
and semicolons being put in the right place.

semicolons being put in the right place. One badly formed rule will not only effect that rule, butall of the rules that
follow it. So you could have cascading if you will of errors. So, always double check your syntax. And as always, feel free
to check out the finished files if you get stuck. Or once you've completed the lab, make sure you watch the solutions
movie to see if your solutions match mine.

Solution: Controlling basic styling

Welcome back. I hope you had fun working on your last challenge, which was our CSS challenge. You know, writing CSS
for me has always been my favorite part of designing websites. So, I really hope you enjoy working with styles as much
as I do. Let's take a look at your completed challenge, and compare your files with the files from the finished files
folder.So I have the lab instructions file from 07_07 open just so we can sort of go through each of them and see how
they were solved. The first step, was to link to the external style sheets site wide.

And to do that, I'll open up the intro.htm and you can see right there is our link tag that's linking to the external style
sheet. Now the one difference in the challenge, versus what we did in the course exercise, was it's in a sub-directory. So
you'll notice that we have _css/styles.css because we had to resolve the path to the styles properly. So, if yours didn't
immediately resolve, make sure that that path matches mine.

Now the other thing that I want, needed you to do was explain the relationship of this resource to the HTML file, and we
do that using the rel attribute and set its value to style sheet. Now I know in the exercise earlier in the chapter, I put the
rel first and the href second. Here I have them switched, the href's first, the rel's second. Honestly, it doesn't matter
which way you do it.So if yours differs from mine, that is not a big deal, does not matter. The only thing that does matter
is you want to make sure that that's the same, all the way throughout the site on every single page, you want to have
that link element linking to the external CSS styles sheet.

you want to have that link element linking to the external CSS styles sheet. Now the next step was to set the background
color of our pages to that 663399, and then comment out to the side, the color name is, Beccapurple for that one. So
what I wanted to do was go in styles.css and that rule is at the very, very top of the page. Now, for those of you who
used background-color, that’s fine, there’s nothing wrong with that. I use the more generic background shorthand
property notation, but if you did background-color instead, that's fine.

if you did background-color instead, that's fine. Again, notice the syntax of the properties. We have the property here,
we have the colon that does the assignment, and then we have the value that we want to pass along to that. When
that's over, we have the semicolon. Now, I also mentioned that if you felt like doing this for a little bit of extra credit, you
could add the comment out to the side. This is what's known as a CSS comment, and you can write notes to yourself
or other team members. You can explain to people what's being done. In this case here, I'm merely defining the name of
the color which is Beccapurple.
All right, going back to our instructions. The next thing we were going to do is float our images,which is in the
styles.css. So what I'm going to do is scroll all the way down towards the bottom, because that's where I believe I'm
going to find these. Yep, indeed, there they are.And there is flowRight and flowLeft. Now, I mentioned that you were
going to do the float property. And here we're going to float the flowRight one to the right, obviously, and float the
flowLeft one to the left. Now, I made kind of a big deal about this in the challenge because, we hadn't covered this
property earlier in the chapter, we didn't cover it at all.

But again, as long as you know what the property name is, and the values that you can set, the syntax remains the
same. So float was the property. Then we used a colon to separate them, and in this case right was the value, in this case
left was the value, and then we have a semicolon. Of course, writing this class, a selector was only part of it. We had to
actually apply the class in the HTML itself. So going back into the intro.htm, if I scroll down to find that first image, I can
see that I have the class of flowRight applied to it.

It's very important that it's spelled correctly, spacing is correct, and even capitalization matters.So in this case, we're
using camel case naming. So, if you type that in and it didn't automatically apply, make sure that the spelling is correct
and that the syntax is exactly right. And if I scroll down, I can find my bottom image, and I can see that that has a class of
flowLeft. What that results in, is within the browser you can see the text is now wrapping around this image, it's aligned
to the right and text is wrapping around it with flowRight, flowLeft leaves it on the left and wraps the text around it on
that side.

flowLeft leaves it on the left and wraps the text around it on that side. And the final task was to set some site wide
typography. So what we want to do was write a generic rule that sets the entire sites default font size to 100%, and then
uses Verdana as the font family as requested.We also wanted to do fallbacks for Geneva and the default Sans Serif
Family. So if I look in the styles.css, here is how I accomplished that. I'm going to go all the way up to the top of my
Styles, I'm going to find my body selector, and you can see there, I used a font rule.

I set the size to 100% and then I used Verdana, Geneva and Sans Serif as my fallbacks, separating them by
commas. Now, if you did this a slightly different way, for example. If you did font size, 100% and then underneath that
font family Verdana, Geneva, Sans Serif, that's fine, no problem. If you applied it to something other than the body eh, it
might be a little bit of a problem. By applying it to the body, we're applying it to that parent and then any other child
element, which would be all of our visual content. So, if you're wanting to set something globally, the body tag or the
body element is a really good choice for that.

the body element is a really good choice for that. So make sure yours matches mine, as far as that goes, even if the
syntax doesn't match all 100%. Now, if your results didn't match up with mine across the board, don't get really
frustrated. Remember, CSS is a huge subject. I mean, we have literally dozens of courses on CSS in the lynda.com online
training library. The purpose of this chapter is simply to introduce you to CSS and how it works with HTML. So being able
to write CSS is a critical skill for any web designer, so you want to make sure that you dedicate time to learning it as you
seek to become more proficient at web design.

learning it as you seek to become more proficient at web design.

Lesson8: Basic Scripting

HTML and JavaScript

Much the same way that HTML and CSS work together HTML and JavaScript have become almost inseparable as
well. JavaScript is a scripting language developed for the web andsupported in almost every web client
available. Although it started out as a basic scripting language to help control behavior. JavaScript has evolved into a
serious programming language that entire applications are built off of. As you can imagine there's not enough time
orspace to discuss the entire scope of JavaScript in a single chapter. So, what I'd like to do is introduce you to JavaScript
and some of it's basic capabilities, while focusing on how JavaScript and HTML work together.

it's basic capabilities, while focusing on how JavaScript and HTML work together. And the first thing I want to do is to
show you how integrated JavaScript is in today's web environment. And I'm going to do that by showing you a couple of
popular sites. While having JavaScript turned off in the browser so here we are at the lynda.com site that you know and
love. You notice if I go up to lynda.com now and choose Browse the library instead of getting a drop-down menu I get a
pretty big list of links that I can then browse through.

And click. I'll want to find out what courses I have for specific topics. Now, a lot of the things that are, you might be
normally familiar with in the lynda.com interface. Such as tabs and carousels and things like that are now gone. And
that's because JavaScript is required for those to function. If I go to Twitter. Now this is my Twitter page and you can
kind of see a lot of the information or images or things like that, that are usually displaying in these Tweets are gone
now because JavaScript is handling those. And any little icons that I have up here that tell me if there are any new
notifications.

there are any new notifications. Or new Tweets in my feed are gone now because again, they rely on JavaScript. Now
both of those sites are impacted but they're impacted in minor ways simply because they have certain
functionality turned off but the overall functionality of the site is pretty well preserved. Other sites take it a little bit
further. Let's take a look at adobe.com. So this is adobe.com with JavaScript turned off. As you can see, there are still a
lot of things that I get access on the site, but that's not really a great experience.

Now, in their defense not too many people are browsing the web these days with JavaScript turned off, but it's certainly
a possibility and as designers, we need to plan for it. Now really quickly, I'm going to turn JavaScript back on, using
Firefox's Config file. Don't tell them I showed you how to do this, a lot of people don't know. So now I've got JavaScript
enabled again and if I come back now to lynda.com, and I go back to the homepage, you can see that now the drop-
down menu works and it's a lot easier to navigate through all those categories.

If I go back to Twitter. And refresh. I see that now I see all the images showing up. There's more information on the
sidebar. There's some Notifications up here. I've got some direct messages that people have sent me. So I'm getting a lot
more feedback. And if I go to Adobe, it's as if an entirely new world has opened up to me. So Adobe has a lot of
dependencies on JavaScript in order for the site to actually work. So for the remainder of the chapter, we're going to
working on our HTML essential. Training reference site, by adding sub tabs panels to next steps page.

If I scroll down, I can see right now this is what the page would look like if JavaScript was turned off. You can see we have
three tabs, HTML, CSS and JavaScript and then those three tabs are represented by these panels. Now, this is what it
looks like when JavaScript is turned off. And even though it's not really a functioning tabbed panel, we're not hiding any
information or keeping information away from the user. In fact, these links are actually functional. If I clicked on
JavaScript for example, it would jump down to the JavaScript section. This is what we call progressive enhancement.

That means basically, that when we're dealing with combined technologies like CSS, HTML and JavaScript, we like to
think about the minimum experience required for somebody to access the content. If somebody has CSS disabled or if
they have JavaScript disabled what is their experience like? It's not that we want to give them a great experience
because if somebody's browsing with JavaScript turned off they're probably used to things not working great. But what
we want is to make sure that they at least have access to the information. So now with JavaScript turned on this
becomes a tabbed panel.

That actually works. So that should give you some idea as to how integrated HTML andJavaScript have become. The
easiest way to describe how HTML and JavaScript work together is that JavaScript can access the basic structure
and elements of a page and then control them through scripting. Now this could mean animating an element, showing
and hiding it, reformatting it or even injecting new elements or content in the page when necessary.Obviously, learning
JavaScript takes time and dedication. So in this chapter. I just want to introduce you to some of the basic concepts of
JavaScript.

Later I'll provide you with some resources that can help you learn JavaScript once you started to master HTML.

The script element

In HTML if we want to add styling to our documents, we can use the style element. Likewise, if we want to add scripting
to our pages, we can use the aptly named script element. And that is where we're going to start our tabbed panels. So
I've opened up the next.htm from the 08 underscore 02 directory. Now before we start adding any scripting to the
page, I want to talk about the structure of the file. If I were to preview the file in the browser right now and scroll down,
we have this little section over here on the right-hand side now. It says, Core Languages and it has three examples.

HTML, CSS and JavaScript. So these are going to be our tabbed panels. Right now, of course, we don't have any scripting
written. So we're seeing them the same way somebody would see them, they didn't have JavaScript enabled. And the
functionality of them is actually pretty good.If you click on CSS tab for example, it goes down to CSS. You click on
JavaScript, it jumps down to JavaScript. So it still kind of, sort of works and you can see everything. And I really like
making sure that anything that I build that's going to have scripting involved in it, at least functions at a very minimal
level in case the JavaScript is disabled.

I don't want content hidden to the point to where somebody can't access it. So it's very important for me that
everybody can access my content, not just people with JavaScript enabled. Okay. The next thing I want to do before we
start scripting is go over the structure of those elements. Because it's really important that we understand how this sort
of works hand in hand. The way that you structure elements in your HTML. Matters greatly with the type of scripting
that's required to control them. So if I scroll down a little bit and get into my main article, I can see that right here on line
28, I have another aside with a role of complementary.

that right here on line 28, I have another aside with a role of complementary. Semantically, this is related to the content
on the page, so it fits. And I have a class of languages and that's going to allow me to control it through CSS. Inside that, I
have a heading three of Core Languages.So that is the title of the section, this is side that I'm in. And there after, I'm
using divs. Now remember, earlier in the course, we talked about how divs allow us to group content together without
having to have an explicit semantic meaning.

So we have a lot of tabs going on here and divs are extremely useful for grouping this type of content. The first thing we
have is a div that's with an id of tabContainer. Now the use of id's here is really important, because JavaScript allows us
to do a lot of different things. One of the things that allows us to do is go through our document and retrieve elements
or reference elements based on certain attributes. One of the attributes that it can reference is the id attribute. So the id
attribute is unique.

Meaning, I can only use it once per page. So if I give an id of tabContainer, I know in scripting that, that is the only
element that I could be referring to. So, this has a div id of tabContainer and that surrounds both the tabs and then the
panels themselves. So the tabs are in another div with the id of tabs. I have three of those, tabs 1, 2 and 3. And notice
that they are linking down to the ids of the panels below them. And then I just have the text that displays HTML, CSS and
JavaScript.

Now below the tabs, I have another div with an id of containers. This wraps all of the actual panels themselves, panels 1,
2 and 3. Inside of that, I have the individual panels. Notice that they have the id of tabPanel1. We have tabPanel2 and
we have tabPanel3. And each of these divs surrounds an h4 followed by paragraphs that have descriptive text. That is
the entire structure of my tabbed panels. I try to make elements like this, as small as possible in terms of structural
elements.

as small as possible in terms of structural elements. I don't like over using a lot of div tags.Although, I certainly have a
good many here. They all serve a specific purpose. So I try to make this as light weight as possible. Okay. Lets scroll all
the way down to the bottom of our page. The same way that when we were wanting to do some styling, we used a style
tag.When we want to do some scripting, we used a script tag. Now, where you place the script tag is pretty
important. We're going to place ours at the bottom of the page.

So go down below the footer, but in front of the closing body tag and we're going to open up a new script tag. Now,
script tags can have a couple of different attributes. The only one we're going to use right now is type and the type that
we're going to give it is text forward slash javascript. That lets the user agent know what type of script is being
added. Now once you open up a script tag, you also need a closing script tag. Essentially, we need to have our opening
script tag with attributed type equals text javascript and then a closing script tag.

equals text javascript and then a closing script tag. Now with HTML5, we don't necessarily need to specify that type. The
user agent can parse the script and pretty much assumes it's java script. But I still think it's a good idea every now
and then, especially when I'm not referencing an external script to let it know what type of script is inside the script
tag. All right.Inside the script tag, I'm going to do a comment. JavaScript comments are just two forward slashes. So,
forward slash, forward slash. And inside that, I'm going to type in tabbed panels.

And that's just a note to myself that hey, my tabbed panel scripts are going to start here. We haven't done a whole lot of
commenting in our HTML or our CSS, but commenting in JavaScript is really important. It's actually quite common for
you to come back, six months to a year later. And forget why you wrote a function to do a certain thing. It's also very
common for you to have to work on somebody else's scripts or for somebody to work of yours. These comments can
help people know a particular function is doing or what a line of code is doing.And it makes maintaining or working on
somebody else's scripts a lot easier.

All right. I'm going to go ahead and save that. And now that we've opened up the script tag, we can begin the process of
writing our tabbed panel scripts. And we're going to start that in the next exercise

Writing a function

At the core of writing JavaScript you'll find functions. Functions are reusable blocks of code that can perform tasks when
called upon. They help us write efficient applications by grouping commonly performed tasks into a single block of code
which can then be executed if it's needed. So we're going to write the basics of our tabbed panel functions down here
in the script tag. To do that, open up the next.htm file, found in 08_03. Although, we are kind of just picking up right
where we left off, so if you wanted to keep the other one open that's fine too.

So, underneath the comment that says tabbed panels, I'm going to tab over and I'm going to write our first function by
typing window, this is the window object, .onload equals function.Then I'm going to open and close parentheses, open a
curly brace just like we did with CSS, and I'm going to hit Return twice and close it. Let's talk about what this is. So,
window is referencing an object, and the object is the document window itself, meaning the page you're on.

Onload is referencing an event. So when you're finished loading. So this is just another way of saying, hey that when the
page has finished loading I want to perform a function. I want to execute some code. So essentially now everything in
these curly braces is going to execute.It's just some syntax basically. Like the open and close parenthesis that may seem
confusing to you. But the curly braces, if you did our chapter on CSS, you're probably used to that.They're used to
basically group code together that's going to execute when this function is run.

This function's going to run when the page loads. So this is also what we call an anonymous function, meaning it doesn't
really have a name, it just performs and does something for us.Okay now, inside of this, I'm just going to do a couple
of comments to remind me of what has to happen inside this function. I'm going to type in, set initial panel state. And
then on a line below that, I'm going to type in, listen for clicks on tabs.
Now I like doing this when I'm in the planning stages of my scripting. So, I'll get down and I kind of sketch what I want
the application or the little widget or whatever is that I'm working on to do, and then I'll write a little comments to
myself like this. Like hey, I need to set the initial panel state so that one is visible and two are hidden. And then I need to
register event listeners for the tabs, so that when they're clicked on I can respond to them. So those are the two things
that I really need this particular function to do for me. All right, so I'll also need one more function as well. So I'm going
to go down on the next line, and I'm going to type in function and then space and then displayPanel, and notice the P is
capitalized there.

then space and then displayPanel, and notice the P is capitalized there. This is called CamelCase naming. And lower case
first word, upper case second word, they're all one big thing. The next thing I'm going to do is open and close my
parentheses here. So this function name is not something that already exists inside JavaScript. This is something that I
came up with. I invented this. And JavaScript allows up to do that. Essentially, I'm creating a function, I'm giving it a
name. Whatever I want to name it. In this case I'm naming it displayPanel. The names of functions typically describe
what they do. And then inside this I'm going to store code that does just that, that displays the panel when something
has been clicked on.

that displays the panel when something has been clicked on. So I can call this any time I want to by calling this particular
name. I'm going to open up a curly brace here. I'm going to hit Return twice. Close my curly braces. So syntactically it
looks similar but this is how we create what we all a named function. And I gave it the name that I wanted for it, which
was displayPanel. Inside of this I'm going to go ahead and do a comment here. I'm going to say respond to tab clicks, so
I'm describing the functionality that I want inside of it, and on the next line I'm going to do one more comment.

I'm going to type in change panel display and activate tabs. All right, I'll save that. So right now it's not really going to do
anything for us but we have sort of what I like to call the skeletons of the functions that are going to complete our
tabbed panel for it. One of them will fire when our document loads, and another function, 

Using the DOM

I spend a good deal of time in this course talking about document outlines and the importance of generating a logical
clear structure. In this exercise, we're going to see how important that can be as we explore using the DOM or
Document Object Model. The DOM is a standardized way of referencing page elements in HTML documents. The
elements are described as a tree with parent nodes at the top. And child nodes branching off in a sequence. So for this
document, for example, the body element would be seen at the top of the tree.

And then this header would be an immediate child node off of that. The dom not only describes this tree, but also gives
us methods for traversing and accessing these elements programmatically. All right to explore this concept, I'm going to
be working in the next.htm found on the 08_04 directory. And what I want to do is scroll down til I find the functions
that we created in the last exercise. Now the first thing I want to do is actually going to be up top above my on load
function.

load function. And what I'm going to do is rather than make you guys watch me type stuff out.I'm going to paste, code in
and then explain it to you. So when it gets to the point to where you want to add this, I'm going to paste the code in at
that point, pause the video. Type the code in, and then play the video and I'll kind of explain what it's doing and why
we're adding it. So here comes the first bit of code. So it's another comment just above that. And I like adding just a little
bit of space here. So I'm going to clean this up a little bit. There we go. So go ahead and pause the video.

Type it in like you see here and I'll explain what these do for you. Okay so we have a comment up top that says declare
globals to hold all the links and all the panel elements. So what these are is global variables. The var keyword right here
var. Creates a new variable and then I name those variables whatever I want, tab lengths and tab panels in this case. So
essentially I'm creating variables to hold all of my tabs and another variable to hold all of my panels. Because I'll need to
control them through scripting so I need some way of referencing those items.

Now what is a variable, well a variable is anything I want it to be. I've always variables in my courses as being a pickle
bucket. When I was a kid I had this stream behind my house. And I would go down there and I had this plastic pickle
bucket. This is not a joke, I really did andwhatever I found in the stream that day would go in the pickle bucket. If it was
an exciting day it might be a frog, it might be a crayfish. But if it was a boring day, it would be a rock or some leafs. But
what was interesting about this, is that means that I could put whatever I wanted to inside that pickle bucket.

It would store whatever information, or objects that I wanted inside of it. The variables in Java script work the same
way. The tab links variable, is going to contain all of our tabs. The tab panels variable, is going to contain all of our
variables. And that's going to allow us to reference these items pro grammatically using the document object model. So
now we need to start putting these variables to use. And we're going to use the document object model to populate
them. So I'm going to go inside my onLoad function, and get rid of those comments. Because we are going to start doing
what those comments asked us to do.

And I'm going to paste in some more code. Okay, so once you've typed that in, let's talk about what this is doing. So the
first comment sort of gives us a little idea. When the page loads, grab the Li elements. Now those list item elements are
the actual tabs themselves. If you remember, if I scroll up and look at the actual structure of our tabs. You can see that
each of the tabs is inside of a list item element. So we are creating a variable that's storing all of those in that. Now,
that's referred to as an array. Because we're storing multiple objects inside a single variable.

It's not that important but it's interesting for you to hear the terminology. So we're creating an array. And storing those
list items inside of that. So what we're doing is we're saying tab links equals. Equals is what we call an assignment
operator. We're assigning a value. So we're taking the variable that we created up here and then we're saying, hey. That
variable that we created, let’s put something in the pickle bucket. So were saying equals and then we have our
document object model being used. So we’re saying Document, that’s the current open document, and then we have
.getElementById, this is what’s called dot notation.

then we have .getElementById, this is what’s called dot notation. And this is a way of scripting that basically lets us
reference objects and use what we call methods to manipulate those objects. So, this object is the document itself,
and then we're using a method called get element by id. Now this is built, or baked into JavaScript, okay. So, it's part of
the document object model. We're saying get element by id tabs. Now remember we have all those ids up here.

Let me show you what this is referencing. We have a div with an id of tabs. So essentially we're referencing this element,
okay? Now below that we have another dot notation and now we're saying, get elements plural by tag name. List
item. So, essentially, if I were to, say this in pure English. I would say, hey, go in the open document, find an element
that has an ID of tabs.Inside that, retrieve any elements that have a tag name of list item, or give me all the list items
inside of that.

So that's exactly what this is doing. And it's storing them in the variable tablinks. Alright now it's time for my next section
of code. Okay so this is doing something very similar. We can see that we have a comment that says now get all the tab
panel container divs. Okay, tab panels.You can see here once again we're going inside the document, we're finding an
element by ID, containers. And that's the div tag that contains all of them. As a matter of fact, if I scroll up, into my tab
panels, you can see there's the div with an ID of containers.

So I'm saying go inside of that, and then once I do that. I'm saying get all of the elements by tag name. Then it says
div. Now, unfortunate breakage here, let me shrink my font size down a little bit, there we go. So it's document
getElementsById containers getElementsByTagName div. So go inside containers, find all the divs and I'm storing these
inside tabPanels. So again, tab links has all of the lis, list items, the individual tabs tab panels as the individual divs that
are the panels themselves.

So, so far we've created two global variables. And then used the document object model to store all of our tab widget
elements that we'll need to control through Java Script. So next, we're going to need to activate our initial tab. And then
react when that tab is clicked.

Listening for an event

Responding to user events is a common task in JavaScript. Perhaps you want to get feedback on a form submission,
or update a product display based on the choices that the user made,or in our case, respond to a tab being
selected. Listening to and responding to events is a big part of learning JavaScript. So let's see how we can respond to
users selecting one of our tabs. So I'm in the 08_05 directory. And it's the next file opened again. And I've already sort of
scroll down into our functions. Now, a few things have been added to this, but before we get to that, I want to talk
about the concept of responding to an event.

I want to talk about the concept of responding to an event. Basically, essentially you have JavaScript listen
for something, and then when that something happens, you have it do something. And usually that's firing off a
function, for example. We already have that. Notice that it says, window.onload equals function. So we're listening for
the load event. So we're listening for the page to be loaded. When the page loads, we want it to perform this
function.So all the code inside of that. So we already kind of have that going on.

Now, that's reacting to an event that just sort of happens when the page loads. What if we want to react to a user-based
event? So, in this case we want to react to a user actually clicking on one of the tabs. All right. So let's see how we're
going to do that. Now if you scroll down a little bit you can see that I've added a few things to our function. The first
thing that I've added is right here. Activate the _first_ one. Okay? So here we have the displayPanel, tabLinks, and then
0. So this is the function displayPanel. Would this function's going to be fired immediately when the page loads.

We going to do that because we want to set the initial display of the active tab and the active panel. To do that we're
going to fire off this function. How is this working? Well it's calling the function displayPanel and then it is doing what we
calling passing arguments into the function.If you were going to create a function that added two numbers together, you
would call the function, like addnumbers, and then in parenthesis you would pass in the two numbers that you wanted
to add. In this case we're saying displayPanel and now we need to tell it which tab is the active panel.

And for us, the first one's going to be the initial one. All right. So that's where this really weird looking little 0 comes
in. JavaScript starts counting from 0. So think about the number of tabs we have. We have three. So 0 is actually asking
for the first one. One would be the second one. Two would be the third one. It's confusing at first, but once you get to
using it, it's pretty easy. Now after that, I have another comment that says attach event listener to links using onclick and
onfocus. Fire the displayPanel function and returned false to disable to link.

So it sounds like there's a lot going on in here. The first thing is I already have a loop built for you so that you don't have
to do this. Now this is what's known as a for loop. There are a lot of times that we want something to happen to multiple
objects in scripting. In this case, we want each one of those tabs to listen for a click. We could write the code to do that
for each one of those tabs, but that's going to take us forever. And besides, what if we add more tabs? Right now we
only have three, but what if we take a tab away or add more tabs to it? It's much easier if we just have JavaScript go
ahead and automatically add it to all of our tabs for us.

automatically add it to all of our tabs for us. So here's how it does this. This is called a for loop.It creates an initial
variable called i, and it starts at 0. And then it said hey, as long as i is less than the number of tabLinks, meaning the
number of tabs, list items, then take i and add one to it. And then it will execute the code found inside these curly
braces. So it's going to go one, two, three, until it runs out of tabs, and then it's going to stop running.

So we know that this is going to execute as many times as we have tabs, which is perfect.Okay. So now we need to
actually do something here. We're basically, now we're going to write what's known as an event listener for our
tabLinks. And just like I did last time, I'm going to just paste some code in here, and then ask you guys to pause it. So I'm
going to go ahead and paste the code. So, you'll notice that we're creating a function inside of this. It's okay to nest
functions inside of functions, nothing wrong with that at all. So what we're saying is, tab links, and then this i. This i is the
same variable as this one.

So we're starting at 0, and then 1, and then 2. Remember, it's an array, so they count, start counting at 0. So 0 would say
the first one, 1 would be the second one, 2 would be the third one, and we know it's going to execute three times. So
we're saying for each of the list items in tabLinks we want to attach an onclick event listener, meaning wait for it to be
clicked. When it's clicked we want you to run a function. The function we're going to run is displayPanel.Remember the
displayPanel function's right here. What we're going to pass into it is this.

Remember up here we're activating the first one by passing that in explicitly. The this keyword,what this does is this
references the object that called the function. This is referring to this. So it's saying, hey, when I call this function, I want
to pass in which tab has been clicked. So it's a very easy way for me to say whoever got clicked. And then finally, we do
what's called return false. So we're returning false. And what that's going to do is it's going to disable the link that they
click.

You remember how, for non-JavaScript users, I made a link that would jump down to that tab?Well, obviously, I don't
want it to do that. By saying, return false, I disabled that. Okay, now I mentioned that I want to do this for both onclick
and onfocus. So as soon as I am done with that one I'm going to hit Return. Making sure, by the way, that I'm still in the
for loop. And this is where it gets really confusing. You see these ending curly braces? This one pertains to the for loop,
this one pertains to the overall function, this one pertains to the tabLinks function.

You can't lose sight of those. If you do, and they're out of order, none of your JavaScript will work, so you gotta be really,
really careful about this. So outside of my tabLinks onclick function, but still inside my for loop, I'm going to click, and I'll
paste one more time. Same thing.And I'm just going to clean that up a little bit. And now instead of onclick I'm going to
change this to onfocus. Now, that's just me being thorough. When people click on it with a mouse and onclick
registers. Onfocus registers if one of those tabs has focus placed on it any other way.

And this is for people that might be using a keyboard for example. Since that's a link, they can tab to that. So, for
somebody that might be using assisted technology and maybe can't use a mouse, it's still making sure that my tab panels
work for those guys. And you can see the function is doing exactly the same thing. All right, I'm going to go ahead and
save that, now I know that was a good bit, but the initial state of our tab panel is now activated and we're now listening
for our tabs to be clicked. All we need to do to finish our tabbed panels is respond to the events, and we'll do that next.

Responding to events

It's time for us to finish the basic functionality of our tab panels by responding to the event listener. Now, we're going to
do that by finishing up our display panel function. So I've opened up the next .HTM that's on the 806 folder. And you can
see this one is a little further along.The display panel function's got some things built into it, and I want to talk about
what those are before we finish this up. The first thing is you'll notice that inside the parentheses now,there is this Tab
to Activate. What is that? Well, we made that up.

Basically, whenever the function is being called, an object is being passed into it. That object that's being passed into it is
the tab that's been clicked. So essentially, we're saying to ourselves tab to activate. So we can call that whatever we, we
want to. We could have named it Fred for example. But tab to activate is a lot more descriptive. After that we have
another for loop. So you remember earlier from what these for loops are doing, right? So what we're doing is every time
this display panel has been called, so every time a panel's clicked on, we want it to go through all the tabs and all the
panels.
all the panels. That way we can turn off the anels that aren't supposed to be visible, and then we can turn the one that is
supposed to be visible on. We can also make sure that the proper tab up top is activated and styled as well. So we're
doing a for loop going through all of our tabLinks and, basically, we're just sort of looping through them. So now, the
next thing we have, this is what we called conditional logic. Conditional logic helps us to make applications that can
make decisions. In this case, we're doing an if else statement. If else is pretty easy to grasp because these are things
that you do every single day.

you do every single day. Let's say for example you walk up to an elevator and you press the button. If door opens, you go
into the elevator. Else, let's say the elevator's broken, you take the stairs. So we do if else statements all day long on our
own. So in this case, we're saying if tab lengths i, remember, i is this variable, and so each time it loops through, that's
going to go to 0, 1, and 2, which are all three of our tabs. And this is not an assignment operator. Earlier equals assigns
value so double equals checks for quality.

So it is saying if a tab is equal to the table to activate, whose tab to activate? The one that got clicked on. So we're saying
hey compare the one that got clicked on to all of the tabs. If they match I want you to do this. So, what we're going to
do, again, I'm going to paste some code in here. And then, I'm going to have you pause the video, type it in, then we'll
talk about it. Okay, now again, be very careful about where you place this. You want to place this in the if statement's
opening and closing curly braces. So, they should go right there. So, the first comment tells you kind of what this is
doing.

If it's the one to activate, change its class. So what we're saying is, for the tab that matches, go in and add to its class
active. Just to give you an idea of what's happening here, if I go back up to my tabs, what that function is going to do is
for the active tab, it's going to give it a class of active. In my CSS, I have styles that control the way that that looks and
behaves. So in this case, the HTML, the CSS, and JavaScript are all functioning together. I scroll down, then I can see that
also I have tab panels.

I'm going through the tab panels and I'm saying whichever tab panels matched. And that could be one two or
three. Change its display to block. So right now there are two types of display properties that we're going to set. That
would either be block or none. A display of none is going to hide it. A display of block is going to show it. So that display
property right here is actually CSS. So we're using JavaScript to write CSS directly on the element. We could've done this
through the use of our CSS styles.

But I didn't want to hide any by default. So I had them all display, and now I'm setting it to either block or none, based
upon whether it's active or not. So if it's active it displays. If it's not active it's going to not display. And that, of course,
leads us to our else statement. So now we know what happens if they match. If they match, the tab gets a class of active
and the panel gets a display property of block. If it doesn't match, which will be true for the rest of them, we want to do
this. So go ahead and pause your video, type this in and then we'll talk about it.

And again make sure that this is all typed in inside the closing curly brace for else. So now what we're doing is we're
going ahead ahead and removing any class of active if one exists.So we initially apply the class of active to the first
tab. And then thereafter, it's applied to any tab that's clicked on. Let's say the first tab has a class of active
and somebody clicks on tab number 3. Well, first we need to remove that class from the first one and apply it to the
third one. And that's what this is doing. And then the next thing we need to do is Hide any of the other panels, and that
we’re doing with this Style Display equal to None.

that we’re doing with this Style Display equal to None. So again, that’s CSS. So essentially we’re assigning Active to the
current tab and we’re displaying the panel as Block. All the rest of them we’re stripping off any active classes and we’re
setting the Displayed to None. And that’s all we’re doing here. All right, if I Save this, preview this in my browser. If I
scroll down, now I should have active tab panels. Cool. So now we have a fully functioning set of tab panels. Now this is
an extremely simple example and it really wouldn't meet all the needs of a production-level set of tabs, but it should
give you a pretty good idea of how JavaScript works.

it should give you a pretty good idea of how JavaScript works. Before we move on, I want to talk about externalizing
JavaScript, and we'll do that in our next exercise.

Externalizing JavaScript

Much like CSS, JavaScript is more efficient when externalized and referenced as a resource.This will help reduce the
amount of code used in your HTML files and make it a little bit easier to maintain and reuse your scripts. So to show you
how this works I've opened up the next.htm from the 08_07 directory and this really does kind of pick up from where we
left off.Our script tag is down here at the bottom of the page. It has all of our fully functioning code in it. And what if I
had other tabs on other pages I wanted to use? I would have to copy and paste this into the page and again if I modified
the function.

I'd have to modify it a bunch of times, so, that's not really the most efficient way to do this, not like the way we did with
our CSS. So, what I'm going to do, is go up to file, and choose new. I'm going to save this file in the 08_07 folder, what
I'm going to do is create a brand new folder inside of that. And this one is going to be _scripts. So the same way for my
CSS, I did _css, formy scripting resources, I'll create a folder called _scripts. And inside that, I'm going to call this tabs.js,
because these are my tabs.

The same way that CSS has a .css extension, JavaScript has a .js extension and this is one of the things I love. This is one
of those sort of lightbulb moments for me. The HTML files, CSS files and JavaScript files, they're all text files. They just
have different extensions in them. All right. So I'm going to hit Save. And then what I'm going to do is I'm going to switch
over to my next file and everything inside these script tags, so not the script tags themselves, buteverything inside of
them, I'm going to highlight those, and I'm just going to go ahead and copy them.

Then I'm going to go back into the tabs file that I just created, and I'm just going to paste them, and that's it. I'm just
moving the code from one to another. Now I want to make sure that I get everything. And by the way, I really should
have mentioned this in the previous movie, but if you were trying to get this to work, and for whatever reason you
couldn't get your panels to work, JavaScript is really picky about its syntax. If you have one letter off, if you have one dot
out of place, if you have one curly brace out of place. Then none of it's going to work so you really need to go back
through your code with a fine tooth comb, compare it to the finish files and you should be able to find your errors.

I'm going to save this and then go back in to the next .htm and now I can go ahead and delete that script tag and I'm
going to remove the script tag and all of it's contents, everything about it, all right, I'll save this. And when I go up to my
browser, I can see that my tabbed panels no longer work, and that's because we've removed the code for them. All
right. Now, where you locate your script tags is really important. Basically, whenever a browser encounters a script
tag, it's going to stop rendering the page, execute the code, and then resume rendering the page once it's finished
running the scripts.

Because of that, from a performance standpoint. A lot of developers like to put their scripts at the bottom of the
page. That's where we had ours earlier. Well, just for the sake of being complete in terms of putting our
resources together, I'm going to instead place this script tag up in the head of the document. It doesn't really matter
where you place a script of this size, because it's so small nobody'll notice the difference. But, this is one of the things
that when you learn JavaScript, you need to learn these types of practices so that your pages can have the best
performance possible. So, what I'm going to do is down below the link tag, that's bringing in my CSS, I'm going to open
up a script tag.

And in this script tag, I'm just going to use the source attribute. And for the source attribute, I'm going to point to the
_scripts/tabs.js, src=_scripts/tabs.js. So it doesn't use href like link does, it uses source. All right. Now I need to close that
enduring mysteries. I also need to have a closing script tag. So in addition to having opening script tag. I have to have
this closing script tag, even if there's no JavaScript in the middle of it.

That's very different from the link tag and it's just one of those HTML syntax things that you have to know. All right. So
now we're telling the browser, hey, we've got some JavaScript that needs to run and you can find it in this file. So now I'll
save this file, go back into my browser, reload the page. And as I do that, go back into the browser and reload my page,
and as I do that, I can see that now my tab's panels are functioning exactly the way that I wanted to.Awesome. So hey,
you know, a lot like the chapter on CSS, there's just no way to efficiently or effectively teach JavaScript in one chapter.

So, if some of the syntax that I went through, if it seemed like I went through it kind of fast, if you didn't grasp it all or
understand what everything is doing, do not worry, panic, or be upset about that at all. That's perfectly understandable,
that means you're normal. My goal for this chapter is simply to introduce you to JavaScript and some of its capabilities,
and go over enough syntax so that you're going to be comfortable with continuing to learn JavaScript on your own. In
fact, I highly recommend going through Simon Allardice's excellent JavaScript Essential Training course shortly after
completing this one.