Heads up! To view this whole video, sign in with your Treehouse account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In a previous video, we learned that HTML is used to mark up content so the browser can make use of it. Open up your index.html file, and you’ll see I’ve provided some HTML tags to get us started. While I’m not going to cover everything you see here, let’s take a quick look at some of what we see.
Further reading
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In a previous video, we learned
that HTML is used to mark up
0:00
content so the browser
can make use of it.
0:04
Open up your index.html file, and
0:07
you'll see I've provided some
HTML tags to get us started.
0:11
While I'm not going to cover
everything you see here,
0:16
let's take a quick look
at some of what we see.
0:19
Line 1 communicates to the browser
that we'll be creating an HTML file.
0:23
Our HTML document really
gets going on Line 2,
0:29
where we create an
opening HTML tag.
0:33
That tag then gets closed in
the last line of our code.
0:37
The slash indicates that
we're done writing HTML.
0:42
We wouldn't want to include any
new HTML beneath this line,
0:46
as the browser would ignore it.
0:50
Our HTML is then divided into
a head and a body.
0:53
The head provides information
about the page to the browser,
0:58
including a link to our stylesheet.
1:03
The body contains our
actual page contents.
1:05
And since it's empty, that's why our
page looks blank in the browser.
1:09
If we wanted, we could try adding
some content without using HTML
1:16
tags, just to see what happens.
1:20
I'm going to write two
lines of text here.
1:23
When I refresh my preview in the
browser, nothing happens. Hmm...
1:33
Oh, right, until I save my file, the
webpage hasn't actually changed.
1:38
So let's save our index.html file.
1:44
And now the text shows up.
1:49
But not only does the text not
look particularly stylized,
1:52
but both blocks of text
are appearing on the same line.
1:56
I need to use HTML tags to indicate
the role of each text block.
2:01
I'd like these two lines
of text to be headings.
2:08
I'll use the h1 HTML tag to make
my name into a heading level one,
2:12
which means it's the most
important kind of heading.
2:17
I'm typing h1 surrounded
by angle brackets.
2:22
Note that when I type
the right angle bracket,
2:26
my workspace closes
the element for me.
2:29
But, unfortunately, my name isn't
located between the brackets.
2:33
Let's use cut and
paste to correct that.
2:38
Much better.
2:43
Now, when we save and
preview in the browser again,
2:44
my name looks a
lot bigger, doesn't it?
2:48
See if you can turn our second line of
text into a heading level number two.
2:52
The h2 looks big and bold, but
not quite as big as the h1,
3:12
since it's not quite as important.
3:16
You've hopefully noticed a pattern here.
3:21
Most HTML elements surround content.
3:24
Our opening h2 tag was followed
by the text of my job title. And we
3:27
finished by writing a closing tag
containing a forward slash.
3:34
Let's make that job title even better by
providing a link to Treehouse's website.
3:39
The HTML tag used to create hyperlinks
is called a, which is short for anchor.
3:46
By itself that a tag doesn't
accomplish anything.
3:59
It announces that the browser should
expect a hyperlink, but it doesn't yet
4:03
tell the browser where the word
Treehouse should link to when clicked.
4:07
To make this more functional,
let's add some attributes.
4:13
Attributes provide additional
information about HTML elements.
4:17
Any HTML element can have
one or more attributes.
4:23
In this case we need only
one, called href.
4:27
That's short for
hypertext reference.
4:31
And now we have
a functioning link.
4:44
Most HTML elements follow the
pattern of surrounding content
4:50
with opening and
closing tags.
4:53
But there are a few exceptions.
4:57
These self-closing elements are
known as void elements since
4:59
they don't actually surround any
content. The most common
5:04
self-closing tag is img, used to
add images to our document.
5:09
Let's write one now.
5:14
As you might expect,
img won't do anything on its own.
5:17
This element requires
attributes in order to work.
5:21
The first attribute I've added here, src,
or source, tells the browser to look for
5:43
a file called anwar-montasir-profile.jpg,
inside the images folder.
5:50
It's very important to type the file name
accurately, or the image won't load.
5:57
The second attribute, alt, provides
an alternate description of the image
6:03
so search engines and screen readers
(that is, technology that reads web
6:08
pages aloud to blind or low-vision users)
can understand the image.
6:13
Let's check our page
out in the browser.
6:20
And you should see
the image you chose.
6:23
Finally, it's worth knowing that some
HTML elements surround other ones.
6:28
You can see this already in
the starter code I gave you.
6:33
The head and body elements
are inside the HTML elements.
6:37
And the web page content we've
written is found inside the body.
6:42
We also included an
a element inside our h2,
6:46
to create a hyperlink
to Treehouse's website.
6:49
I'd like to conclude my HTML with
a bulleted list of my location,
6:54
skills, and hobbies.
6:59
To do that, we'll start with a ul element,
which is short for unordered list.
7:02
Inside our unordered list,
let's add a few list items.
7:09
The li element allows us to create
the bulleted items that make up
7:14
our unordered list.
7:19
Great, so that's the content for
our profile card.
7:51
You'll notice we haven't changed
the appearance of our content.
7:55
But that's something our
HTML isn't built to do.
7:59
In our next video, we'll use CSS to
give our profile card a bit of style.
8:03
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up