Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Set up an HTML Document

4:01 with Treasure Porth

In this video, we'll take a look at how to set up a new HTML document to add to our website. We'll cover a few of the essential components that make up just about all modern websites: a doctype, a set of html tags, and a set of opening and closing head and body tags. Let's review how they all come together!

Teacher's Notes
Video Transcript
Downloads

Most websites contain more than just one page. Breaking your website up into multiple different HTML files, with each dedicated to a different topic or area of interest, is a fairly common approach to creating an accessible, engaging, and readable experience for your viewers. Whether it's the first page or the tenth page of your website, you'll always need to use the same basic structure when you start!

If you want to follow along and customize the basic structure of an HTML page, feel free to copy the text snippet previewed in the video below - just remember to fill in each section with your own information!

<!DOCTYPE html>
<html>
    <head>
        <title>Hi there</title>
    </head>
    <body>
        This is a page
        a simple page
    </body>
</html>

More about text editors

Developers often choose a text editor that they like and stick to it, but at the end of the day they all do the same thing: they help you write, edit, and save HTML and CSS files. Some text editors have extensions, plugins, and features to make your job a bit easier, and some coding communities gravitate towards the same systems. Feel free to experiment and try out different editors, and find one that works for you.

Here at Treehouse, you'll find that many courses and videos demonstrate either in Workspaces or Visual Studio Code. This doesn't mean that they're the best options, but they do provide additional tools that help make the process less burdensome.

Text editors:

Set Up of a Basic Web Page:

Anatomy of an HTML Document

[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