1
00:00:00,000 --> 00:00:05,043
[MUSIC]

2
00:00:05,043 --> 00:00:09,151
A typical webpage is made up of three
separate layers that work together to

3
00:00:09,151 --> 00:00:11,560
deliver an experience to the user.

4
00:00:11,560 --> 00:00:15,210
There's a content layer, or
the information you see on the page,

5
00:00:15,210 --> 00:00:19,000
a presentation layer that handles
how that information looks, and

6
00:00:19,000 --> 00:00:22,860
a behavior layer that lets
users interact with that page.

7
00:00:22,860 --> 00:00:27,725
CSS or Cascading Style Sheets,
provides the presentation layer and

8
00:00:27,725 --> 00:00:33,180
creates the visual style of webpages,
using colors, typography, layout and more.

9
00:00:33,180 --> 00:00:35,605
The behavior layer is
handled by JavaScript,

10
00:00:35,605 --> 00:00:37,555
to add interactivity to the page.

11
00:00:37,555 --> 00:00:41,766
For example, popping up a larger image
when a user clicks a small image.

12
00:00:41,766 --> 00:00:45,902
HTML or HyperText Markup Language
provides the content layer and

13
00:00:45,902 --> 00:00:48,945
forms the structural
foundation of a webpage.

14
00:00:48,945 --> 00:00:51,315
It's the language common to every website.

15
00:00:51,315 --> 00:00:53,855
So if you wanna build your own website,
web application, or

16
00:00:53,855 --> 00:00:58,270
know how to edit other websites and
apps you'll need to understand HTML.

17
00:00:58,270 --> 00:01:01,310
I'm Guil, your front end web
development teacher here at Treehouse.

18
00:01:01,310 --> 00:01:04,870
Your journey into learning code
begins here with HTML basics.

19
00:01:04,870 --> 00:01:09,370
You may have already worked with HTML or
seen it in action in a previous course.

20
00:01:09,370 --> 00:01:09,920
So in this course,

21
00:01:09,920 --> 00:01:13,790
we're going to dive deeper into
many of the core concepts of HTML.

22
00:01:13,790 --> 00:01:17,680
So first, let's break down
the meaning of the initialism, HTML.

23
00:01:17,680 --> 00:01:20,120
Hypertext Markup Language.

24
00:01:20,120 --> 00:01:23,960
Hypertext is any text that can be
displayed on a computer screen and

25
00:01:23,960 --> 00:01:27,760
contains links to other texts,
or hypertext documents.

26
00:01:27,760 --> 00:01:31,920
The web is a collection of billions of
documents, interconnected by hyperlinks.

27
00:01:31,920 --> 00:01:36,040
For example, the page you're viewing
right now is a hypertext document and

28
00:01:36,040 --> 00:01:39,410
you most likely clicked on
a hyperlink to get to this page.

29
00:01:39,410 --> 00:01:44,070
A markup language provides meaning to
text in a document using instructions

30
00:01:44,070 --> 00:01:47,820
that describe how text should be
structured, formatted, and laid out.

31
00:01:47,820 --> 00:01:52,570
So HTML is a markup language the browser
uses to present information to users,

32
00:01:52,570 --> 00:01:54,940
like text, links, images, and videos.

33
00:01:54,940 --> 00:01:57,230
It's the basic component
from which all websites and

34
00:01:57,230 --> 00:01:58,670
applications on the web are built.

35
00:01:59,810 --> 00:02:03,180
Let's quickly review how HTML works,
what it looks like, and

36
00:02:03,180 --> 00:02:05,180
why we use it to structure
content on the web.

37
00:02:06,180 --> 00:02:09,840
If you've worked with word processing
program like Microsoft Word or

38
00:02:09,840 --> 00:02:10,810
Google Docs,

39
00:02:10,810 --> 00:02:14,450
you've likely formatted blocks of
plain text by creating a title for

40
00:02:14,450 --> 00:02:19,480
the document and headings to indicate the
start of important sections of content.

41
00:02:19,480 --> 00:02:22,890
Also adjusting the size of text and
making it bold, so

42
00:02:22,890 --> 00:02:24,588
that it stands out from other text.

43
00:02:24,588 --> 00:02:28,432
You may have inserted links to
other documents or webpages, or

44
00:02:28,432 --> 00:02:33,100
you've inserted line breaks, spaces,
and horizontal lines to divide and

45
00:02:33,100 --> 00:02:34,860
break up sections of content.

46
00:02:34,860 --> 00:02:35,704
In other words,

47
00:02:35,704 --> 00:02:39,998
you used the program's formatting options
to give the document a clear structure.

48
00:02:39,998 --> 00:02:44,376
HTML provides similar text formatting
instructions to browsers in the form of

49
00:02:44,376 --> 00:02:46,000
tags called markup.

50
00:02:46,000 --> 00:02:51,150
So just like a Word or Google document
with no formatting will look like this.

51
00:02:51,150 --> 00:02:55,418
A webpage without HTML tags or
markup would look like this.

52
00:02:55,418 --> 00:02:59,560
Now here's the same content displayed
in the browser using markup.

53
00:02:59,560 --> 00:03:02,340
Notice the text on the page
is easier to scan and

54
00:03:02,340 --> 00:03:06,970
understand, and it provides links to
navigate to other pages and more content.

55
00:03:08,055 --> 00:03:12,990
If I right or Ctrl+Click on the page and
click View Page Source,

56
00:03:12,990 --> 00:03:17,470
I'm able to see the HTML the browser
uses to display this simple webpage.

57
00:03:17,470 --> 00:03:21,140
Now take a look at the sets of
tags that surround the content.

58
00:03:21,140 --> 00:03:24,620
That's the markup responsible for
displaying this page.

59
00:03:24,620 --> 00:03:29,194
And notice how even though these
tags are meant as instructions for

60
00:03:29,194 --> 00:03:34,012
the browser, they are named using
friendly, human readable words,

61
00:03:34,012 --> 00:03:37,295
like title, body, header, main and footer.

62
00:03:37,295 --> 00:03:39,394
HTML is understood by all browsers,

63
00:03:39,394 --> 00:03:42,980
from browsers on phones to
tablets to desktop computers.

64
00:03:42,980 --> 00:03:46,350
That's why every website and
web app you use is made using HTML.

65
00:03:46,350 --> 00:03:49,360
It's the language of the web, and
I'm going to teach you how to write it.

66
00:03:49,360 --> 00:03:52,400
By the end of this course, you will have
learned the skills to create the HTML

67
00:03:52,400 --> 00:03:56,230
structure of a simple website
about virtual reality, like this.

68
00:03:56,230 --> 00:04:00,000
And as I mentioned before,
HTML is just part of what makes a website.

69
00:04:00,000 --> 00:04:02,810
Adding a bit of CSS can transform
the structure of a page into

70
00:04:02,810 --> 00:04:04,190
something beautiful, like this.

71
00:04:05,250 --> 00:04:06,020
So let's get started.