Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Let's create a new page (a blog post) for the site. In the process, you'll use most of the HTML tags you've learned to mark up the content in a semantic way.
Content Snippets
<h2>VR Article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus urna lacus, ut lacinia elit pretium a. Praesent rutrum ac ipsum vitae rhoncus. Nam non molestie purus.</p>
<p>Nunc imperdiet, dui in varius eleifend, magna enim imperdiet felis, at ultricies magna metus vitae ante. Nulla in porttitor nibh. Mauris non libero in massa porta varius non sed magna. Donec ac mauris mattis, viverra turpis ac, dictum arcu.</p>
<p>Vivamus molestie laoreet viverra. Ut ac fringilla ex. Donec at nisl semper, commodo mi maximus, fermentum nisi. Duis bibendum gravida ante sit amet consectetur. Curabitur ac est id justo euismod porta quis ac arcu.</p>
Resources
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
All right, let's create a new page,
a blog post for our site.
0:01
In the process I'll show you how to
use all the tags I've taught you so
0:04
far to mark up the content in a logical or
semantic way.
0:07
In our workspace, let's create a new
HTML page by clicking File, New File, and
0:11
we'll name this page article.html.
0:17
To set up the page quickly, we can use the
HTML from the index.html file then add to it.
0:22
So I'll select all the code
here inside index.html
0:28
by pressing Ctrl or
Cmd+A then Ctrl or Cmd+C.
0:33
Then I'll switch over to article.html and
press Ctrl or Cmd+V to paste the code.
0:37
So in this new page we're going to
mark up an article or blog post.
0:44
So the first thing we'll update is the
title of the page here in the title tag.
0:48
Let's change it to VR Article.
0:54
And inside the body we'll
keep the header and
0:58
footer elements, but let's select and
delete all the content in between.
1:03
So everything from this paragraph down to
the section element just above the footer.
1:08
This page is going to consist of
standalone content that could be
1:16
syndicated or pulled into another website.
1:20
So, which HTML sectioning element
should we use to wrap our content here?
1:23
Well, remember an article is a self
contained component in a page, so
1:28
below the closing header tag,
I'll type a set of opening and
1:33
closing article tags to
wrap all my content.
1:38
And next,
we'll need to add the article heading.
1:41
So I'll include an h2
with the text VR Article.
1:44
Then, right below the h2,
1:54
I'll quickly add content by pasting a few
paragraph elements with placeholder text,
1:55
and you can copy these paragraph snippets
from the teacher's notes of this video.
2:00
So now when you click the Preview button,
in workspaces,
2:05
the browser always opens
the index.html file on the site.
2:10
So to preview our new article page in the
browser, you need to replace index.html
2:14
with the name of this file article.html
in the URL in the address bar.
2:20
Now, your workspace preview URL
may look different than mine.
2:25
So, right after treehouse-app.com
I'll type a forward
2:29
slash followed by article.html.
2:34
And we're able to see our
new article webpage, great.
2:38
In the previous video, you learned that
the aside element represents a section of
2:43
content, that's complementary
to the main content and
2:48
could be considered
separate from that content.
2:51
An aside element can also have different
meanings based on whether it's placed
2:55
inside or outside an article element.
2:59
So, for example, an aside that's
nested inside an article holds content
3:02
that's related to the article, but
not the primary focus of the article.
3:06
A pulled quote from the article,
for instance,
3:10
can be placed inside an aside because it's
directly related to the article's content,
3:13
but not essential to the overall
meaning of the article.
3:18
So in other words, you could remove
the quote from the article and
3:20
the content would still
be understood without it.
3:23
So in between the two paragraphs here in
our article, let's add an aside element.
3:26
And inside this aside,
we'll mark up the quote using the q tag,
3:34
which indicates that the text
is a short inline quotation.
3:39
So inside the <q> tag,
let's write the text
3:45
This is a pull quote
from the VR Article.
3:48
And as you can see the <q> tag adds
quotes around the pull quote.
3:57
Now an aside element that's placed
4:03
outside an article should describe content
that's related to the entire page.
4:06
So for example a side navigation or
a list of the top articles or
4:11
related posts in a page.
4:15
So back at our page below
the closing article tag.
4:17
Let's add an aside tag that contains
a list of links to more articles about VR.
4:22
So inside the aside I'll add an h3
with the text, More articles about VR.
4:30
And below the heading I'll display
the list of links using an unordered list.
4:40
Although this is a list of links, it's not
considered a major navigation component,
4:48
so I'm not gonna place
the list inside a nav element.
4:53
So first I'll add an li, and
inside that I'll nest a link.
4:58
And I'll make it a placeholder link.
5:04
With the text Make a VR Game.
5:08
Let's go ahead and copy this one.
5:14
Paste it below.
5:16
Let's change the text to
something like Learn VR in Unity.
5:18
I'll add one more.
5:26
And you can add as many as you like.
5:27
So this one will be
Build User Interfaces in VR.
5:29
I'll give this a save,
5:42
refresh the browser, and great,
5:44
you've just coded your very first
blog post using semantic markup.
5:46
Well done!
5:50
So now, to point the read more links on
the homepage to our new article page,
5:52
we can include the name of
the file as the href value,
5:57
over in index.html.
6:01
So let's scroll down to our VR Articles,
6:03
and for our first article,
6:06
type article.html as the href value.
6:10
And I'll just go ahead and copy it and
paste it into the second value.
6:14
Refresh.
6:20
And when I click the Read more links,
they take me to the new VR Article page.
6:21
Awesome!
6:27
And you'll learn a whole lot more about
the different ways you can link to a web
6:29
page in a later video.
6:32
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