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