"CSS Layout Techniques" was retired on February 22, 2017. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Build a Simple Dynamic Site with Node.js!
You have completed Build a Simple Dynamic Site with Node.js!
Preview
You can specify what type of content you serve by modifying a header called Content-Type.
Further Reading
- Internet Media Types Wikipedia Article
- The list of Media Types are no longer on Wikipedia, but can be found on IANA's website. IANA is a standards body that issues media types.
Node.js APIs Used
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
[MUSIC]
0:00
As part of the HTTP specification, or how
servers and browsers agree to talk to each
0:04
other, there are values that are hidden
from the user called Headers.
0:09
These headers can be programmatically
created by the clients and the server.
0:14
Once each headed that the service ends,
it's called Content Type.
0:19
The instructs the browser how to handle
the string of information in the response.
0:24
The browser would have no other way of
knowing what to do with it.
0:29
The data in the response looks the same to
the browser, just a string of data.
0:32
Let's take a look at our code right now,
0:38
to see why our response is being handled
as plain text and not as HTML.
0:41
Okay, so let's take a look in our
renderer, and
0:47
see that we've got this here.
0:51
The content type with text plain HTML.
0:54
Now, this is repeated in multiple places,
so let's create a common header.
0:57
[BLANK_AUDIO]
1:02
And.
1:15
Set that variable to what we have
everywhere in our code.
1:16
So, there we go and
1:22
there we go.
1:27
So at the top here we've got common
headers and
1:32
we've go the content type set to text
plain.
1:35
But what should we change it to?
1:38
So let's look in Google and see what it
comes up with.
1:40
So internet content types.
1:47
And the first is the internet media type
on Wikipedia.
1:55
Let's take a look.
1:59
So, if we scroll down, we should see a
list.
2:02
So, we've got Type application, we've got
Type audio, we've got Type example,
2:06
we've got Type image and those are all the
common image formats, Type message,
2:11
Type model, Type multipart, Type text.
2:16
And we've got text/html.
2:19
So let's copy and paste that.
2:24
And go back to our code, and
2:26
swap out text plain to text/html.
2:30
And let's start the app.
2:34
And go to port 3000.
2:42
And there we have it.
2:44
We've got the search page.
2:46
We've got the profile page.
2:49
There's me.
2:50
And.
2:55
We've got an error page.
2:56
Cool.
So it is,
3:01
there was an error in guessing the profile
of chalkers123.
3:02
Not found.
3:04
So let's go back to the content side.
3:09
Before we have the browser thinking that
it was textual data because
3:11
the content type was text plain.
3:15
So we changed it back to text/html.
3:18
Now on this page here is probably all the
content types that you'll
3:21
ever need to programatically do.
3:25
So there's application/pdf for example,
3:27
which will launch a PDF document viewer.
3:32
This image/jpeg.
3:37
Which is for JPEG images.
3:39
Image/gif, image/png, and so forth.
3:41
So if you're ever need to serve these
types of files,
3:45
you may want to change the content type.
3:49
Or if you dynamically generating a PNG or
3:52
a JPEG, you may want to set the content
type.
3:57
So in your web development career, you
probably want to reference
4:00
something like this when you're
programming dynamic things like JSON.
4:05
If you're making an API for example,
4:11
you'd want to do application JSON, or
you'd want to do XML.
4:12
In doubt, various different formats, so
4:18
if you were creating a RSS atom feed, you
would use application atom plus XML.
4:20
So this is what you would do when you're
creating larger websites,
4:25
but since we're just dealing with HTML
right now, we'd,
4:30
we'd just using the text HTML content
type.
4:33
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