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
Even though most web pages look different from one another, every web page follows a common HTML structure.
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 work space 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 filename 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 up