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
To set up a new HTML document, you will need to start with three things: a doctype, a head tag containing title tags and a link to an external CSS stylesheet, and html tags with body tags inside.
Text editors:
Set Up of a Basic Web Page:
[MUSIC]
0:00
Fantastic job so far.
0:04
You're almost ready to start
building your own websites.
0:06
A website is just a collection of
webpages that are linked together.
0:09
So if you know how to
create one webpage and
0:13
link it to another webpage,
you know how to create a whole website.
0:15
That's what we'll cover in
the final part of this course.
0:19
You'll learn how to create
a simple resume page from scratch,
0:21
give it a little structure and style and
0:24
link it up to the profile page we've been
working with throughout this course.
0:26
Many web developers write their code
with a text editor made especially for
0:30
web development.
0:34
Text editors work in a very
similar way to workspaces.
0:35
They make your life easier by color coding
your code, automatically closing and
0:39
highlighting your opening and
0:43
closing tags, and auto-completing bits
of code that you type frequently.
0:44
There are a few editors out
there to choose from, but
0:48
one popular text editor is called Atom.
0:51
And best of all, it's completely free.
0:54
I've included links to Atom and
some other commonly used text editors in
0:56
the teacher's notes, but for this course
we're going to stick with Workspaces.
1:00
First, let's make a new document.
1:07
Go to File > New File,
and in the sidebar here,
1:11
you'll see that it's created
a new HTML file for us.
1:13
Since we're building a resume page,
1:17
name the document resume.html.
1:22
To set up a new html document we need to
start with two things, a doc type and
1:26
a set of html tags.
1:31
And inside the html tags we'll
need head tags and body tags.
1:33
Keep in mind that this structure is not
something we need to memorize right away.
1:37
Some text editors will provide
this basic code for you.
1:41
Or you can always look it up.
1:44
In fact, open a new tab or
browser window and
1:46
do a quick search for
the phrase, basic webpage.
1:50
And the first hit is from an excellent
resource called Mozilla Developer Network.
1:56
Click the link and scroll down a little
bit, and here's an example of the code you
2:02
need for a basic webpage,
always there for your reference.
2:06
Okay, let's go back to Workspaces,
and start setting up the page.
2:10
First, the doc type.
2:16
The Doctype lets the browser know
that you're giving it an HTML page.
2:22
Next the html tags.
2:28
Everything, all of the visible and under
the hood parts of our webpage except for
2:32
the Doctype,
are nested within the html tags.
2:36
Now we need head tags to hold important
information about our webpage
2:41
that doesn't display in the browser,
like a link to our CSS style sheets, and
2:46
the title of our webpage.
2:50
We'll worry about linking
to a CSS page in a minute.
2:52
Right now, just type out the title tag.
2:55
And inside the title tag,
3:01
type the title you want to display in
search engine results and in browser tabs.
3:02
I'm going to type Treasure Porth's Resume.
3:07
Below the head we need body tags.
3:14
Remember that everything you actually
see in the browser such as a header,
3:17
a navigation,
a footer is nested inside the body tags.
3:20
And that's it.
3:24
Everything we need to start
building a basic webpage.
3:25
Let's make sure this works.
3:28
Inside the body tags I'll make an h1.
3:30
And inside the h1 tags, I'll type resume.
3:36
Click the preview button.
3:40
And we haven't linked to our
resume from the homepage yet.
3:42
But up here in the address bar,
3:46
we can get to the page we just
created by typing /resume.html.
3:48
And there you go.
3:54
It works.
3:54
Now we're ready to lay down
the structure of our resume page.
3:56
We'll do it in the next video.
3:59
You need to sign up for Treehouse in order to download course files.
Sign up