1
00:00:00,630 --> 00:00:03,060
You've learned that HTML
provides structure and

2
00:00:03,060 --> 00:00:06,560
meaning to content in the form
of tags called markup.

3
00:00:06,560 --> 00:00:07,670
When you write markup,

4
00:00:07,670 --> 00:00:10,650
you're telling the browser how
you want to display your content.

5
00:00:10,650 --> 00:00:13,710
Remember what the page looked like
earlier before we added markup?

6
00:00:13,710 --> 00:00:15,480
It was one long line of text, and

7
00:00:15,480 --> 00:00:18,420
that wasn't a very pleasant
reading experience was it?

8
00:00:18,420 --> 00:00:22,170
Structuring content with HTML,
organizes your content and

9
00:00:22,170 --> 00:00:25,820
makes your users' reading experience
easier and more enjoyable.

10
00:00:25,820 --> 00:00:30,720
Books, magazines, and newspapers
organize text using titles, subheadings,

11
00:00:30,720 --> 00:00:31,970
and paragraphs.

12
00:00:31,970 --> 00:00:35,500
HTML provides similar elements
to organize blocks of content.

13
00:00:35,500 --> 00:00:40,170
The most common elements used to structure
content are headings and paragraphs.

14
00:00:40,170 --> 00:00:41,880
Headings add organization and

15
00:00:41,880 --> 00:00:45,570
structure to the page by
identifying sections of content.

16
00:00:45,570 --> 00:00:49,100
So the site we're going to build is
about virtual reality experiences.

17
00:00:49,100 --> 00:00:54,890
So, to make the text, Experience VR, the
main heading of the site, write an opening

18
00:00:54,890 --> 00:01:00,740
tag in front of the text and place
the closing tag at the end of the text.

19
00:01:00,740 --> 00:01:06,200
h1 is a heading element and
the 1 in the tag name means

20
00:01:06,200 --> 00:01:10,870
that it's a level 1 heading, the main or
most important heading on the page.

21
00:01:10,870 --> 00:01:13,070
Usually, the first heading
on a web page is a h1.

22
00:01:13,070 --> 00:01:16,740
It's like the main headline in
a newspaper or magazine article.

23
00:01:16,740 --> 00:01:20,690
So, when you save the HTML file and
refresh the browser,

24
00:01:20,690 --> 00:01:24,820
you'll see the text Experience VR
in large bold letters and

25
00:01:24,820 --> 00:01:28,290
the text outside the h1 element
appears below the heading.

26
00:01:29,440 --> 00:01:31,807
Now that we've set
the page's main heading,

27
00:01:31,807 --> 00:01:34,549
let's place the rest of
the text inside a paragraph.

28
00:01:34,549 --> 00:01:39,854
Paragraphs in HTML are created using
the p tag, so type an opening p

29
00:01:39,854 --> 00:01:44,991
tag at the start of the text and
place the closing p tag at the end.

30
00:01:48,184 --> 00:01:50,300
Let's add one more
paragraph below this one.

31
00:01:51,410 --> 00:01:54,791
Type a set of p tags and write the text,

32
00:01:54,791 --> 00:02:00,827
Virtual Reality is becoming well
known as a form of entertainment.

33
00:02:06,053 --> 00:02:09,180
But its also finding its way
into fields like education,

34
00:02:17,570 --> 00:02:22,297
industrial design,
healthcare, and so much more.

35
00:02:26,354 --> 00:02:30,420
You can also copy this text from
the teacher's notes of this video.

36
00:02:30,420 --> 00:02:35,060
I'll save the file, refresh the browser,
and notice how the browser places each

37
00:02:35,060 --> 00:02:38,900
paragraph on a new line and
adds extra space to the top and

38
00:02:38,900 --> 00:02:43,460
bottom sides to separate them from
adjacent paragraphs and other content.

39
00:02:43,460 --> 00:02:45,890
h1 is not the only heading available.

40
00:02:45,890 --> 00:02:50,210
There are six heading elements in HTML,
h1 through h6.

41
00:02:50,210 --> 00:02:54,790
Each identifies a new section of content
and represents a different level of

42
00:02:54,790 --> 00:02:59,890
importance on their page, h1 being
the highs level and h6 the lowest.

43
00:02:59,890 --> 00:03:03,200
Back in our page,
let's markup a new section of content for

44
00:03:03,200 --> 00:03:05,950
blog entries using a level 2 heading.

45
00:03:05,950 --> 00:03:09,410
You define a level 2
heading using the h2 tag.

46
00:03:09,410 --> 00:03:14,840
So, below the bottom paragraph,
type a set of opening and closing h2 tags,

47
00:03:14,840 --> 00:03:19,220
and inside, the text, Latest VR Articles.

48
00:03:19,220 --> 00:03:20,170
I'll give this a save.

49
00:03:21,380 --> 00:03:26,160
And over in the browser the h1 is
the highest level heading on the page.

50
00:03:26,160 --> 00:03:29,430
So the browser makes it stand
out from all the other text.

51
00:03:29,430 --> 00:03:32,140
And an h2 is slightly less important.

52
00:03:32,140 --> 00:03:34,550
So, the browser displays
it a little smaller.

53
00:03:34,550 --> 00:03:39,120
Now, from here, you could use an h3
tag to create a smaller heading, and

54
00:03:39,120 --> 00:03:45,220
that's a subheading of the h2, an h4 tag
for an even smaller heading and so on.

55
00:03:45,220 --> 00:03:49,042
And if you place all the available
headings next to each other on a page,

56
00:03:49,042 --> 00:03:50,516
they would look like this.

57
00:03:53,420 --> 00:03:59,590
From the largest or most important, to the
smallest, or the one of lowest importance.

58
00:04:01,760 --> 00:04:03,590
I'll go ahead and undo that.

59
00:04:03,590 --> 00:04:09,270
And now, let's add a couple of blog
entries below the subheading, or the h2.

60
00:04:09,270 --> 00:04:14,310
We'll use an h3 to mark up the title,
and paragraph tags for the text.

61
00:04:14,310 --> 00:04:19,832
So, below the h2 I'll
type a set of h3 tags.

62
00:04:19,832 --> 00:04:20,968
And the text for

63
00:04:20,968 --> 00:04:26,230
this one will be How Schools Use
Virtual Reality to Improve Education.

64
00:04:33,431 --> 00:04:37,144
Right below,
I'll add a set of paragraph tags and

65
00:04:37,144 --> 00:04:41,670
I'll paste in some place holder
text as the paragraph text.

66
00:04:41,670 --> 00:04:44,450
You can also copy these exact heading and
paragraph

67
00:04:44,450 --> 00:04:47,855
text snippets from the teacher's notes of
this video or feel free to write your own.

68
00:04:47,855 --> 00:04:51,850
I'll add one more log entry
right bellow the paragraph,

69
00:04:51,850 --> 00:04:55,320
again I'll type a set of h3 tags.

70
00:04:55,320 --> 00:04:59,427
And the text for this one will be
the Advantages of VR Simulation.

71
00:05:09,994 --> 00:05:12,350
Add a paragraph tag down below.

72
00:05:12,350 --> 00:05:15,316
And for this text I'll go ahead and
just copy and

73
00:05:15,316 --> 00:05:17,995
paste in the place holder text from above.

74
00:05:20,033 --> 00:05:22,900
All right, so
our page is starting to take shape.

75
00:05:22,900 --> 00:05:25,930
And up next you'll learn about
creating lists with HTML.