Even though most web pages look different from one another,

every web page follows a common structure.

Each webpage you create should instruct the browser the version of HTML you're

using, provide general information about the page like the title for example.

And define where to display the visible content of the page like images,

text and links.

You can code along with me by clicking the launch work space button

next to the video.

This will bring up the text editor we're going to use to build our simple website

using HTML.

For now you should only see three image files with a .jpg extension, and

you'll learn more about these image files later when we add images to our page.

Before we write any code, we'll need to create an HTML file.

In the work space menu, click File, New File, and we'll name the file index.html.

A file ending in .html let's the browser know that it's an HTML file,

and index is the most common filename used for the default or home page of a website.

So now we're ready to start writing code.

Every HTML page begins with a document type or doc type declaration that informs

the browser which version of HTML the page is using, so it can render it correctly.

So at the very top of the file, type a left angle bracket followed by

an !DOCTYPE space, then we'll type html, followed by a right angle bracket.

Now there used to be a lot of really complicated document types, but

the latest version for HTML5 is really simple, it's just doc type html.

Next below the doc type, we'll add a set of opening and closing HTML tags.

So first, type the opening tag with a left angle bracket, then html, and

a right angle bracket.

Now every closing tag in HTML should

include a forward slash in front of the tag name.

So the closing HTML tag should be /html.

So these tags together describe the HTML element which is usually the root or

top level element of a webpage.

And this tells the browser that everything we add in between the opening and

closing html tags is html code.

So next inside the html element, I'll indent two spaces by pressing

the space bar twice, then add two elements, head and body.

When you place one element inside another, it's called nesting.

So the head and body here are nested inside the html element.

So to represent the fact that one set of tags is inside another,

it's a good idea to indent the nested tags like I did here.

The head element contains information about the page like the page title,

for example.

And most of the information you add to the head isn't visible in the browser.

For instance, you could add links to JavaScript and

CSS files to add the behavior and presentation layers, respectively.

But for now, we'll only worry about adding a title.

So inside the head element, I'll nest a title element by typing opening and

closing title tags.

And between the title tags, I'll write the text Experience VR.

Save the file and click the preview icon on the top right corner of the workspace.

And this opens the index.html file in another browser window or tab.

So you should see the text you wrote between the title tags

appear in the browser's title bar or on the pages tab at the top of the window.

Now below the head is the body, which is where you include any content

you want to display in the browser like images, headings, paragraphs, and links.

The body element is currently an empty set of tags, so

the browser is not displaying anything yet.

So let's quickly add content.

Back inside the body element, indent two spaces and write the text, Experience VR.

Press Enter, and right below I'll type,

A simple blog about virtual reality experiences.

Save the file and refresh the browser and you'll see that even though

we wrote this text on two separate lines, the browser displays it on one line.

You see, the browser doesn't know how we want to display this text on the screen.

So we need to add HTML tags or markup to tell the browser how to display it.

HTML is made up of many, many tags that are used to give webpages structure,

format text, and more like you saw in the previous video.

But you don't have to memorize all or even most of the tags.

You can use a resource like the MDN, or Mozilla Developer Network,

HTML reference to see a list of all the available HTML elements.

Whenever I feel stuck, I visit this page and

the elements are even grouped by function to make it easier to find what you need.

I posted the link to this page in the teacher's notes.

So why don't you check out MDN now to review the HTML elements from this video.

You could even get a head start learning about the heading and

paragraph elements, which we'll add to the webpage in the next video.

Remember, there should be only one HTML, head, title, and body element in a page.

And here's a tip.

You don't have to retype the doc type and

comment tags every time you create a new webpage.

Instead, you'll make a copy or template of this code and

use it to copy from and paste them to a new webpage.

In addition, many text editors can quickly insert html snippets like

a basic html template into your html file using keyboard shortcuts.

I've posted information about html code snippets in the teacher's notes.