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 HTML Basics!
You have completed HTML Basics!
Preview
Even though most web pages look different from one another, every web page follows a common HTML structure.
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
Even though most web pages look
different from one another,
0:00
every web page follows a common structure.
0:02
Each webpage you create should instruct
the browser the version of HTML you're
0:05
using, provide general information about
the page like the title for example.
0:09
And define where to display the visible
content of the page like images,
0:13
text and links.
0:17
You can code along with me by
clicking the Launch Workspace button
0:19
next to the video.
0:22
This will bring up the text editor we're
going to use to build our simple website
0:23
using HTML.
0:26
For now you should only see three
image files with a .jpg extension, and
0:27
you'll learn more about these image files
later when we add images to our page.
0:31
Before we write any code,
we'll need to create an HTML file.
0:35
In the work space menu, click File, New
File, and we'll name the file index.html.
0:39
A file ending in .html let's the browser
know that it's an HTML file,
0:46
and index is the most common file name used
for the default or home page of a website.
0:52
So now we're ready to start writing code.
0:56
Every HTML page begins with a document
type or doc type declaration that informs
0:58
the browser which version of HTML the page
is using, so it can render it correctly.
1:03
So at the very top of the file,
type a left angle bracket followed by
1:07
an !DOCTYPE space, then we'll type html,
followed by a right angle bracket.
1:12
Now there used to be a lot of really
complicated document types, but
1:19
the latest version for HTML5 is really
simple, it's just doc type html.
1:22
Next below the doc type, we'll add
a set of opening and closing HTML tags.
1:28
So first, type the opening tag with
a left angle bracket, then html, and
1:33
a right angle bracket.
1:38
Now every closing tag in HTML should
1:40
include a forward slash
in front of the tag name.
1:43
So the closing HTML tag should be /html.
1:46
So these tags together describe the HTML
element which is usually the root or
1:50
top level element of a webpage.
1:56
And this tells the browser that everything
we add in between the opening and
1:58
closing html tags is html code.
2:02
So next inside the html element,
I'll indent two spaces by pressing
2:05
the space bar twice,
then add two elements, head and body.
2:10
When you place one element inside another,
it's called nesting.
2:21
So the head and body here
are nested inside the html element.
2:25
So to represent the fact that one
set of tags is inside another,
2:30
it's a good idea to indent
the nested tags like I did here.
2:34
The head element contains information
about the page like the page title,
2:39
for example.
2:43
And most of the information you add to
the head isn't visible in the browser.
2:44
For instance,
you could add links to JavaScript and
2:48
CSS files to add the behavior and
presentation layers, respectively.
2:51
But for now,
we'll only worry about adding a title.
2:55
So inside the head element, I'll nest
a title element by typing opening and
2:58
closing title tags.
3:02
And between the title tags,
I'll write the text Experience VR.
3:05
Save the file and click the preview icon
on the top right corner of the workspace.
3:11
And this opens the index.html file
in another browser window or tab.
3:15
So you should see the text you
wrote between the title tags
3:20
appear in the browser's title bar or
on the pages tab at the top of the window.
3:23
Now below the head is the body,
which is where you include any content
3:28
you want to display in the browser like
images, headings, paragraphs, and links.
3:33
The body element is currently
an empty set of tags, so
3:37
the browser is not
displaying anything yet.
3:40
So let's quickly add content.
3:43
Back inside the body element, indent two
spaces and write the text, Experience VR.
3:45
Press Enter, and right below I'll type,
3:52
A simple blog about virtual
reality experiences.
3:55
Save the file and refresh the browser and
you'll see that even though
4:02
we wrote this text on two separate lines,
the browser displays it on one line.
4:07
You see, the browser doesn't know how we
want to display this text on the screen.
4:13
So we need to add HTML tags or markup
to tell the browser how to display it.
4:17
HTML is made up of many, many tags that
are used to give webpages structure,
4:23
format text, and
more like you saw in the previous video.
4:28
But you don't have to memorize all or
even most of the tags.
4:31
You can use a resource like the MDN,
or Mozilla Developer Network,
4:34
HTML reference to see a list of
all the available HTML elements.
4:38
Whenever I feel stuck,
I visit this page and
4:42
the elements are even grouped by function
to make it easier to find what you need.
4:45
I posted the link to this
page in the teacher's notes.
4:49
So why don't you check out MDN now to
review the HTML elements from this video.
4:52
You could even get a head start
learning about the heading and
4:57
paragraph elements, which we'll add
to the webpage in the next video.
4:59
Remember, there should be only one html,
head, title, and body element in a page.
5:03
And here's a tip.
5:09
You don't have to retype the doc type and
5:10
comment tags every time
you create a new webpage.
5:13
Instead, you'll make a copy or
template of this code and
5:16
use it to copy from and
paste them to a new webpage.
5:19
In addition, many text editors can
quickly insert html snippets like
5:23
a basic html template into your
html file using keyboard shortcuts.
5:28
I've posted information about html
code snippets in the teacher's notes.
5: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