You've already started watching Build Your First Web Page in HTML
***
-
0:00
Hi, I'm Nick Pettit, and you're probably watching this because you wanna
-
0:04
make a web site.a Maybe it's because you want to start a new career, or
-
0:09
maybe you just wanna get a site going for your business, or an organization.
-
0:13
Whatever the case may be, it would be hard to know where to begin?
-
0:17
I'm going to show you how to write some basic website code,
-
0:20
that will help you get started on your first website.
-
0:24
Even if you've never programmed before,
-
0:26
you'll be able to follow along step by step.
-
0:29
After we write some code together, I'll show you how to take things further, and
-
0:34
what kinds of jobs are available to people that have programming skills.
-
0:38
Coding might seem a little bit boring if you've never tried it before,
-
0:42
but, I think you'll actually find that it's a lot of fun.
-
0:45
You get to create whatever's in your head, and then share it with other people.
-
0:49
To make a website, you'll need to be using a computer running either Windows,
-
0:53
Mac OX 10, or Linux.
-
0:56
What I'm about to show you won't really work on a tablet or a phone.
-
1:01
We're going to type our code, in a type of computer program known as a text editor.
-
1:06
And your computer should already have a text editor installed.
-
1:11
When we're all done typing, we'll save our file and
-
1:14
open it up in a web browser ,like the one you're using right now.
-
1:18
That might be Google Chrome, Firefox, Safari, Internet Explorer, or
-
1:23
any other browser that you prefer to use.
-
1:26
If you're on Windows, you'll want to start by opening a program called Notepad.
-
1:31
If you're on Mac, you'll want to open an application called TextEdit.
-
1:36
Notepad on Windows will work fine as is, but TextEdit has one extra step.
-
1:43
When you start a new document, go to the Format menu, and choose Make Plain Text.
-
1:52
And then you might see a dialogue box, but just click Ok.
-
1:56
Again, this step is not necessary on Windows.
-
1:59
I'm going to be using a Mac for this tutorial, but
-
2:02
when we come to important steps, I'll show you what it looks like on Windows.
-
2:07
Once you have your text editor open type in one paragraph along with a header,
-
2:11
just like in a newspaper or a school report.
-
2:14
This can be about anything you want.
-
2:16
I have some text here, that I have already prepared and
-
2:20
you can caulk it if you like or write your own.
-
2:24
Now, by itself this text isn't a website, we have to mark it up with special tags.
-
2:30
Kind of like when a teacher or a coworker, gives you notes on your writing.
-
2:35
Let's start at the top with our header.
-
2:38
Right before my header, I'm going to type an opening angle bracket,
-
2:43
sometimes called a less than sign.
-
2:46
Then I'm going to write the letter H, for header.
-
2:51
And then, the number one, because this is the first and
-
2:55
most important header on our page.
-
2:58
Finally I'm going to write a closing angle bracket,
-
3:03
otherwise known as a greater than sign.
-
3:07
What we just typed is called an opening tag.
-
3:11
And this will tell the web browser where our header begins, but we need to
-
3:15
add a matching closing tag, so that the web browser knows, where our header ends.
-
3:21
So, at the end of our header, we're going to type something very similar.
-
3:26
Start with that same opening angle bracket, but then, type a forward slash,
-
3:32
which is usually found on the question mark key on your keyboard.
-
3:37
Make sure that you're not typing a back slash,
-
3:41
which might be facing the other direction.
-
3:45
Then the rest is the same, the letter h a number one and a closing angle bracket.
-
3:52
When an opening and a closing tag are together it's known as an element,
-
3:56
in a language called html or hyper text markup language.
-
4:01
It's called hyper text, because unlike regular text documents or books.
-
4:06
These ones can be linked together in any way that we want.
-
4:10
And I already mentioned why it's called a markup language.
-
4:13
It's because we're marking up the document, with additional information,
-
4:17
beyond just our content.
-
4:20
HTML is the foundation of any site on the entire web.
-
4:23
So, no matter what kind of site you wanna make,
-
4:26
you'll have to make your webpages out of HTML elements, just like the one we made.
-
4:33
Now, you might be wondering why the h for header is accompanied by that number one.
-
4:40
On a web page there can be headers levels one through six.
-
4:45
This is just like a headline, in a newspaper or a magazine.
-
4:49
Where there might be the name of the publication, then, a section header, then,
-
4:53
a name of an article, and then, different sections within the article, and so on.
-
4:58
This is the only header we have on our page,
-
5:01
so it's natural to make it an H1 element.
-
5:05
Now we need to tell the web browser where our paragraph, begins and ends.
-
5:10
Headers are the only elements that have the concept of levels so,
-
5:14
this one is actually a little bit easier.
-
5:17
We're just going to use the p element, or paragraph element.
-
5:21
So, let's add an opening p tag at the beginning of our paragraph, and
-
5:26
then a closing p tag at the end.
-
5:32
This is a pretty good start, but
-
5:34
we need to add a few more tags before we can call this a real web page.
-
5:39
Now that you understand how to type out HTML elements.
-
5:43
I'm going to introduce you to a few other elements.
-
5:47
This is a lot of information to take in when you're first learning but,
-
5:51
don't worry about memorizing everything.
-
5:53
Most professionals have to find references and look things up over and over again.
-
5:58
It's natural to feel a little bit overwhelmed at first,
-
6:02
but when we're all done going through these few elements,
-
6:06
I'll show how you can look things up on your own and continue your practice.
-
6:11
As you might of guesses already,
-
6:13
it's possible to nest HTML elements inside of one another.
-
6:17
So let's wrap everything we've created so far,
-
6:21
in a body element because our content is known as the body of the webpage.
-
6:28
When we do this,
-
6:30
we should indent everything inside of the body by two spaces.
-
6:35
So we'll say one two.
-
6:36
And then, one, two.
-
6:42
This doesn't have any technical impact, but it makes our code easier to read so
-
6:46
that we know which elements are nested.
-
6:50
So now I'm going to hit Enter, so you drop that down by a line.
-
6:54
And I'll put in my opening body tag, and then my closing body tag.
-
7:01
We also need to add a head element just above our body.
-
7:05
This head is a place to put meta information about the web page, but
-
7:10
not necessarily any real content.
-
7:12
So just above our body, we'll hit Enter again and
-
7:18
we'll type an opening head and a closing head.
-
7:22
Nested inside the head element, we need to add two more elements.
-
7:27
First is what's called the meta element and, in this case,
-
7:31
our meta element will tell the web browser our character set.
-
7:35
This is just some technical information that tells the browser,
-
7:38
what types of letters and numbers should be on our webpage.
-
7:43
Be sure to watch closely because, this element is a little bit different than
-
7:47
the others we've learned about so far.
-
7:49
It doesn't have a closing tag, and
-
7:51
it also has a special extra bit inside of the tag that's called an attribute.
-
7:58
In this case, the attribute is charset or character set so, let's type that out now.
-
8:08
I'll put in two spaced because this is nested inside the head.
-
8:12
And then I'll type out" meta
-
8:16
charset" after that we will add an equal sign and a set of quotes.
-
8:24
Inside the quotes we'll type utf-eight, otherwise known as utf eight.
-
8:33
And then we'll put a closing angle bracket just like that.
-
8:38
This might seem a little bit weird, but like I said earlier.
-
8:42
Don't worry about memorizing all of this right now.
-
8:45
Just, follow along and make sure that you're typing everything very carefully.
-
8:49
Every angle bracket and slash, means something to the web browser.
-
8:53
So, it's important to type everything correctly.
-
8:57
Next, we should add a title to out web page.
-
9:01
This will go in the title bar, or the tabs of our web browser.
-
9:07
So I'll type, title, and I'm just going to type, Nick Pettit-designer.
-
9:15
And then I'll put a closing title tag.
-
9:19
Finally, we just need two more elements to finish things up.
-
9:23
We need to wrap everything we've done so far, in the HTMLelement.
-
9:28
Like this, I'll hit enter, type html,
-
9:34
jump down to the bottom, and put in a closing HTML.
-
9:39
And we need to nest everything carefully, so we can understand our code.
-
9:43
So let's just put two spaces, on everyone of these
-
9:48
lines, just like that.
-
9:54
And, for the last element,
-
9:56
we need to add what's called a document type or doc type for short.
-
10:01
This tells the web browser what kind of HTMLto expect on our page.
-
10:05
Just like the meta element, this one doesn't have a closing tag, and
-
10:10
the characters we type here will be a, a little bit different.
-
10:13
So follow closely, at the top here, we'll put
-
10:18
in our doc type and that's an opening angle bracket, an exclamation point.
-
10:24
And in all caps we'll say doc type followed by a space.
-
10:29
And then html in lower case, and a closing angle bracket.
-
10:36
Now, we need to save our file.
-
10:38
This is about the same for Windows and Mac, but I'll show you both.
-
10:42
On a Mac, go to File>Save and find
-
10:49
a place on your computer, where you'll be able to find this file easily again.
-
10:55
I'm going to chose my desktop, and then I'm going to type in the file name,
-
10:59
index.html, and click save.
-
11:05
It might ask you, if you want to use the HTML file format and in this case, we do.
-
11:13
If you're on Windows and
-
11:14
using Notepad, go to File> Save As and then choose a place on your computer,
-
11:19
where you'll be able to find this file again, I'm going to choose the desktop.
-
11:24
Then we need to change the file format to All Files, so
-
11:28
that we can save this as an html file, in the file name, type index.html.
-
11:35
Finally, change the text and coding to utf eight, and then click Save.
-
11:43
Now, whether you're on a Mac or
-
11:45
on Windows, the next steps should be almost exactly the same.
-
11:49
I'm using the Google Chrome web browser in this case, but
-
11:53
the next steps should be similar if you're using a different web browser.
-
11:57
In Google Chrome, I'm going to go up to the file menu and
-
12:02
choose open file, then I'm going to navigate to the location,
-
12:08
where I saved my file and I'll choose index and open it.
-
12:15
Congratulations, you've made your first web page of course,
-
12:18
this doesn't look very pretty, and only you can see your web page because
-
12:24
it's not available on the public internet for other people to access, but still,
-
12:28
those are the steps that you can take next now that you know some HTML.
-
12:33
One way to learn about more HTML elements, or review some of
-
12:38
the ones that you've learned here, ls by looking at good documentation.
-
12:42
You can find trustworthy documentation for
-
12:45
these HTML elements, and many others by going to developer.mozilla.org.
-
12:51
With a little bit more step by step learning on treehouse,
-
12:55
you can make something that looks like this, and
-
12:58
use more HTML elements to add images and links to your pages.
-
13:03
You can add color and layout to your web page,
-
13:06
with another language called CSS or cascading style sheets.
-
13:11
Finally you can upload your web page to a server, and
-
13:14
get a custom domain like this one called treehousewebsite.com.
-
13:20
At this point you might be wondering, why not just use a website builder or
-
13:24
a website publishing program to drag and
-
13:27
drop these elements together, in a visual way.
-
13:29
Well, that is one way to build a website, but if you want to create the best and
-
13:34
most customized websites, it's better to learn how to code on your own.
-
13:39
Better yet, if you want to start a career in the web industry.
-
13:44
You'll find that almost every job will expect you to know how to
-
13:47
code on your own.
-
13:49
Speaking of jobs, there's a huge demand right now for
-
13:52
people with the skills to make websites.
-
13:55
Everyone needs a website, whether it's a hugely complex company like Google,
-
14:00
Facebook, Twitter, or Wikipedia, or if it's a small local business, or
-
14:05
an individual, at most companies you would take on the role of either a web designer,
-
14:10
or a web developer, in both type of jobs you'll be expected to write code,
-
14:14
but with a slightly different focus.
-
14:17
As a web designer, you focus mostly on the user experience and
-
14:21
visual aesthetics of web pages, deciding where to place images,
-
14:25
what kind of text to write, how to match colors and
-
14:27
fonts, and how the user should feel while they're navigating your creation.
-
14:33
This involves writing code, like some of the html we started.
-
14:37
You will also be expected to know a few others languages including CSS and
-
14:42
java script.Together these three languages HTML, CSS, and
-
14:46
Javascript form what's called the front end of a website.
-
14:50
It's called the front end, because all of this code runs inside of a web browser.
-
14:56
Web developers are also expected to know HTML, CSS, and Javascript.
-
15:01
But instead of spending time focusing on the visual aesthetics of a web site.
-
15:06
They tend to spend more of their focus, on what's called the backend of a web site.
-
15:11
This is all the code that runs on the server, generates HTML dynamically on
-
15:16
a site like Facebook or Google and then delivers that to the browser.
-
15:20
So, for example, when you go to a web site like Twitter, and
-
15:24
you look at someone's profile page,
-
15:26
what you're actually seeing is kind of like a fill in the blank template.
-
15:30
Everyone's profile page is the same, but the details, like a person's picture,
-
15:35
their name, and other data are filled in by the backin programming.
-
15:40
There are several different backend languages to choose from,
-
15:42
including Ruby, Python, PHP, Java, and even a few other choices like WordPress.
-
15:49
You might decide that you don't wanna make websites at all, and
-
15:52
instead want to build mobile apps for iOS and Android phones and tablets.
-
15:57
At Treehouse we have several different tracks that are specifically designed to
-
16:02
guide you from the very basics of coding, all the way through to designing and
-
16:07
building your own websites and web applications.
-
16:10
When you're ready, we can even help you start a career.
-
16:13
It's a lot to learn, but we've put it all together in a step by
-
16:16
step learning process that's easy for anyone to follow.
-
16:20
We even have a special text editor called Workspace, that helps you follow along and
-
16:25
save your work.
-
16:27
And if you get stuck, you can ask for help in our forum, where other students,
-
16:32
moderators and tree house teachers are always happy to help.
-
16:35
There's never been a better time to start learning how to code, and
-
16:38
you've already taken your first step.
-
16:40
So, thanks for watching, and we hope to see you soon at Treehouse.
-
16:44
[MUSIC]
You need to sign up for Treehouse in order to download course files.
Sign up