1
00:00:00,220 --> 00:00:02,940
Even though most web pages look
different from one another,

2
00:00:02,940 --> 00:00:05,230
every web page follows a common structure.

3
00:00:05,230 --> 00:00:09,431
Each webpage you create should instruct
the browser the version of HTML you're

4
00:00:09,431 --> 00:00:13,720
using, provide general information about
the page like the title for example.

5
00:00:13,720 --> 00:00:17,610
And define where to display the visible
content of the page like images,

6
00:00:17,610 --> 00:00:18,509
text and links.

7
00:00:19,550 --> 00:00:22,440
You can code along with me by
clicking the Launch Workspace button

8
00:00:22,440 --> 00:00:23,500
next to the video.

9
00:00:23,500 --> 00:00:26,730
This will bring up the text editor we're
going to use to build our simple website

10
00:00:26,730 --> 00:00:27,950
using HTML.

11
00:00:27,950 --> 00:00:31,919
For now you should only see three
image files with a .jpg extension, and

12
00:00:31,919 --> 00:00:35,980
you'll learn more about these image files
later when we add images to our page.

13
00:00:35,980 --> 00:00:39,530
Before we write any code,
we'll need to create an HTML file.

14
00:00:39,530 --> 00:00:46,404
In the work space menu, click File, New
File, and we'll name the file index.html.

15
00:00:46,404 --> 00:00:52,460
A file ending in .html let's the browser
know that it's an HTML file,

16
00:00:52,460 --> 00:00:56,980
and index is the most common file name used
for the default or home page of a website.

17
00:00:56,980 --> 00:00:58,520
So now we're ready to start writing code.

18
00:00:58,520 --> 00:01:03,420
Every HTML page begins with a document
type or doc type declaration that informs

19
00:01:03,420 --> 00:01:07,690
the browser which version of HTML the page
is using, so it can render it correctly.

20
00:01:07,690 --> 00:01:12,390
So at the very top of the file,
type a left angle bracket followed by

21
00:01:12,390 --> 00:01:19,600
an !DOCTYPE space, then we'll type html,
followed by a right angle bracket.

22
00:01:19,600 --> 00:01:22,720
Now there used to be a lot of really
complicated document types, but

23
00:01:22,720 --> 00:01:28,600
the latest version for HTML5 is really
simple, it's just doc type html.

24
00:01:28,600 --> 00:01:33,340
Next below the doc type, we'll add
a set of opening and closing HTML tags.

25
00:01:33,340 --> 00:01:38,220
So first, type the opening tag with
a left angle bracket, then html, and

26
00:01:38,220 --> 00:01:39,550
a right angle bracket.

27
00:01:40,670 --> 00:01:43,080
Now every closing tag in HTML should

28
00:01:43,080 --> 00:01:46,410
include a forward slash
in front of the tag name.

29
00:01:46,410 --> 00:01:50,960
So the closing HTML tag should be /html.

30
00:01:50,960 --> 00:01:56,920
So these tags together describe the HTML
element which is usually the root or

31
00:01:56,920 --> 00:01:58,670
top level element of a webpage.

32
00:01:58,670 --> 00:02:02,260
And this tells the browser that everything
we add in between the opening and

33
00:02:02,260 --> 00:02:05,310
closing html tags is html code.

34
00:02:05,310 --> 00:02:10,713
So next inside the html element,
I'll indent two spaces by pressing

35
00:02:10,713 --> 00:02:15,475
the space bar twice,
then add two elements, head and body.

36
00:02:21,981 --> 00:02:25,800
When you place one element inside another,
it's called nesting.

37
00:02:25,800 --> 00:02:30,620
So the head and body here
are nested inside the html element.

38
00:02:30,620 --> 00:02:34,750
So to represent the fact that one
set of tags is inside another,

39
00:02:34,750 --> 00:02:37,880
it's a good idea to indent
the nested tags like I did here.

40
00:02:39,390 --> 00:02:43,840
The head element contains information
about the page like the page title,

41
00:02:43,840 --> 00:02:44,680
for example.

42
00:02:44,680 --> 00:02:48,850
And most of the information you add to
the head isn't visible in the browser.

43
00:02:48,850 --> 00:02:51,270
For instance,
you could add links to JavaScript and

44
00:02:51,270 --> 00:02:55,560
CSS files to add the behavior and
presentation layers, respectively.

45
00:02:55,560 --> 00:02:58,020
But for now,
we'll only worry about adding a title.

46
00:02:58,020 --> 00:03:02,650
So inside the head element, I'll nest
a title element by typing opening and

47
00:03:02,650 --> 00:03:03,810
closing title tags.

48
00:03:05,760 --> 00:03:10,120
And between the title tags,
I'll write the text Experience VR.

49
00:03:11,670 --> 00:03:15,980
Save the file and click the preview icon
on the top right corner of the workspace.

50
00:03:15,980 --> 00:03:20,500
And this opens the index.html file
in another browser window or tab.

51
00:03:20,500 --> 00:03:23,780
So you should see the text you
wrote between the title tags

52
00:03:23,780 --> 00:03:27,550
appear in the browser's title bar or
on the pages tab at the top of the window.

53
00:03:28,620 --> 00:03:33,510
Now below the head is the body,
which is where you include any content

54
00:03:33,510 --> 00:03:37,730
you want to display in the browser like
images, headings, paragraphs, and links.

55
00:03:37,730 --> 00:03:40,410
The body element is currently
an empty set of tags, so

56
00:03:40,410 --> 00:03:43,190
the browser is not
displaying anything yet.

57
00:03:43,190 --> 00:03:44,340
So let's quickly add content.

58
00:03:45,480 --> 00:03:52,670
Back inside the body element, indent two
spaces and write the text, Experience VR.

59
00:03:52,670 --> 00:03:55,181
Press Enter, and right below I'll type,

60
00:03:55,181 --> 00:03:58,192
A simple blog about virtual
reality experiences.

61
00:04:02,839 --> 00:04:07,893
Save the file and refresh the browser and
you'll see that even though

62
00:04:07,893 --> 00:04:13,980
we wrote this text on two separate lines,
the browser displays it on one line.

63
00:04:13,980 --> 00:04:17,910
You see, the browser doesn't know how we
want to display this text on the screen.

64
00:04:17,910 --> 00:04:22,450
So we need to add HTML tags or markup
to tell the browser how to display it.

65
00:04:23,630 --> 00:04:28,590
HTML is made up of many, many tags that
are used to give webpages structure,

66
00:04:28,590 --> 00:04:31,240
format text, and
more like you saw in the previous video.

67
00:04:31,240 --> 00:04:34,810
But you don't have to memorize all or
even most of the tags.

68
00:04:34,810 --> 00:04:38,620
You can use a resource like the MDN,
or Mozilla Developer Network,

69
00:04:38,620 --> 00:04:42,760
HTML reference to see a list of
all the available HTML elements.

70
00:04:42,760 --> 00:04:45,330
Whenever I feel stuck,
I visit this page and

71
00:04:45,330 --> 00:04:49,860
the elements are even grouped by function
to make it easier to find what you need.

72
00:04:49,860 --> 00:04:52,550
I posted the link to this
page in the teacher's notes.

73
00:04:52,550 --> 00:04:57,170
So why don't you check out MDN now to
review the HTML elements from this video.

74
00:04:57,170 --> 00:04:59,410
You could even get a head start
learning about the heading and

75
00:04:59,410 --> 00:05:02,140
paragraph elements, which we'll add
to the webpage in the next video.

76
00:05:03,640 --> 00:05:09,890
Remember, there should be only one html,
head, title, and body element in a page.

77
00:05:09,890 --> 00:05:10,810
And here's a tip.

78
00:05:10,810 --> 00:05:13,530
You don't have to retype the doc type and

79
00:05:13,530 --> 00:05:16,300
comment tags every time
you create a new webpage.

80
00:05:16,300 --> 00:05:19,910
Instead, you'll make a copy or
template of this code and

81
00:05:19,910 --> 00:05:23,450
use it to copy from and
paste them to a new webpage.

82
00:05:23,450 --> 00:05:28,030
In addition, many text editors can
quickly insert html snippets like

83
00:05:28,030 --> 00:05:32,540
a basic html template into your
html file using keyboard shortcuts.

84
00:05:32,540 --> 00:05:35,860
I've posted information about html
code snippets in the teacher's notes.