[? Music ?] [Treehouse]

So far, we've learned about images, objects, and embeds.

Now let's take a look at a few more elements

that will help you include content into your web pages.

Let's type out our first link element.

We're going to put our link element inside of the head

rather than inside of the body,

and first, I'd like to emphasize that this is

not the same as an anchor tag.

This actually isn't going to create any kind of link

that the user can click on, so you want to put this

in the head of your document, not in the body.

The link tag includes other resources into the page.

So, I'm going to type some attributes out here,

and then I'll explain them.

First is the rel attribute, or relative attribute,

and we're going to say this is a stylesheet.

The type will be "text/css,"

and then we'll create an href, or a hyperlink reference

to "application.css."

Now, unfortunately, the link tag isn't very useful to us yet

because we haven't learned about how to use CSS documents.

As you may have guessed, however, this will become more meaningful

when we combine HTML with CSS.

If we were to refresh the browser,

you wouldn't actually see anything come up in the page

because, of course, anything that is rendered in the browser

comes up in the body tag here.

Next up is the script element, which is actually pretty similar

to the link element except it's used for including JavaScript.

JavaScript is something you want to learn later on,

but let's just see what this might look like in a text editor.

We'll type out our script tag,

and we'll use the the type "text/javascript,"

and the source attribute we'll set to a folder we'll call

"javascripts," and then we'll say "app.js" is our JavaScript file.

And then for the script tag, we actually need a closing tag here,

so just like the link element,

we also have a type attribute here

and a source attribute here, which is pretty much the same

as the href attribute.

Now, why do we have a closing tag?

Well, we can actually put things between these 2 script tags

rather than including them using an external file.

Now, it is best practice to include your JavaScript with an external file,

but in a pinch, you can go ahead and put it on the page.

So, we're actually going to write our first bit of JavaScript

before we've even learned any JavaScript.

So, we'll just type "alert():"

and in between the parentheses we'll put single quotes,

and inside of our single quotes we'll say 'Hello World!'

Now, anything you put inside of the quotes,

including the exclamation point, will actually appear

in the browser as an alert box.

So, let's go ahead and switch back and refresh the page.

And off screen here, we have this alert box appear.

We'll just go ahead and click "Okay" to dismiss it.

Like I said, as you can see, we're using script tags

to wrap our JavaScript rather than including an external file.

We'll learn more about JavaScript later on.

Next up is the iFrame element.

Now, in some very specific instances,

you'll need to smash 2 web pages together.

Basically, an iFrame allows you to load 1 page

into another page, which is sort of inside of a box.

You can almost think of it as a window sitting on the page

that opens up into another page.

So, let's try an example.

We need to create actually a 2nd web page

in order for this to work, so we'll create a page called

"another_page.html."

And we want to make sure that this is in the same folder

as our index.html,

and we'll just delete what we have here

in index because we don't actually need it,

and in our index file, we're going to create an iFrame.

Let's go ahead and type this out.

We'll say "iframe."

We'll set the width to 300.

We'll set the height attribute to 300 as well

so we have a square box,

and then we need to set the source attribute to

the HTML document that we just created,

which is called "another_page.html."

And once again, make sure that this is in the same folder

as the index.html file, otherwise it won't work.

If you do want to put the file into a separate folder,

you'll need to set the path on this source attribute appropriately.

So, we'll go ahead and put in our closing iFrame here,

and then over on another_page.html,

we'll copy everything we have and paste it in there,

and we'll replace the iFrame with just some text.

We'll say "This is some text that will appear inside the iframe."

And we should probably wrap that in a paragraph element,

just to be semantic.

We'll save that out, and when we switch over to the browser and refresh the page,

you can see that although we're actually in the root of objects,

which would make the index.html file come up,

we're still seeing an iFrame

open up to another_page.html.

So, just to show you how this is working,

let's go ahead and modify the URLs here.

We'll actually go to index.html, which is the page that we're already on,

and of course, since we're already on that page, nothing should change.

But we'll change this to another_page.html,

and now you can see we're actually just seeing

that text without the box around it.

That's because we're not on index.html.

And just to demonstrate that, let's go ahead and add some paragraph text

just above the iFrame.

I'll say "Here is index.html,"

switch back and refresh the page.

Oops, it looks like the page 404.

We have another page here.

Let's go ahead and check in our text editor, and yep,

it looks like we actually misspelled "another."

Let's go ahead and just rename that

and switch back and refresh, and there you can see

our text is now appearing, but we're not seeing text

that's in index.html.

If we just go back to the root and bring up index.html,

you can see there's the text we put in that file,

and here is the text that's in another_page.html.

There is 1 last thing that we should cover

before we learn more about HTML, and that's comments.

This isn't really a part of objects,

but we should learn about them before moving any further.

Comments allow you to insert notes about your code

that aren't actually displayed to the user.

However, if the user looks at the source code of your HTML page,

then they will be able to see your comments,

so you don't want to put any sensitive information in them.

We can view the source in Chrome on Mac OS X

by hitting Command, Alt, U,

and that will bring up the source code.

Alternatively, if you're using another browser

or if you don't want to use those hot keys or if you're not on a Mac,

you can usually just go to the View menu, and in most browsers

you'll be allowed to view source.

Alternatively, you can just right-click on the page

and hit "View Page Source."

Now that we have the page source up,

we can actually see all the HTML that we typed out.

This isn't actually a secret to the user.

Let's try adding in some comments.

We'll switch back over to our text editor,

and while comments aren't always necessary in simple HTML code,

in more complex cases like with CSS or JavaScript,

you'll probably want to include more comments

so that you don't lose track of what's going on.

Comments are particularly useful when something goes wrong in your code

because you can debug it more easily,

especially when you have to reopen that code a long time

after you originally wrote it.

Let's go ahead and add in our HTML comment here.

Just above our paragraph, we'll open up some angle brackets

and type an exclamation point, 2 dashes, a space,

followed by 2 more dashes.

We have 2 spaces here,

and in the middle of those 2 spaces,

we want to type our HTML comment.

We'll say "This is an HTML comment."

"Below is a paragraph."

We'll save that out, switch back to the browser and refresh.

And I think we actually did this in another page,

so we can just type in "another_page.html."

And when we refresh, you can see that we now have

"This is an HTML comment. Below is a paragraph."

But if we actually go to that page in the browser,

you can see that we don't have that HTML comment appearing.

You can only see it when you view the page source.

That about wraps things up for the group of HTML elements

that are classified as includes or objects.

[Treehouse]