Preview
Video Player
00:00
00:00
What is HTML?
4:06HTML is understood by all browsers, from browsers on phones to tablets to desktop computers. That's why every website and web app you use is made using HTML -- it's the language of the web!
[MUSIC]
0:00
A typical webpage is made up of three
separate layers that work together to
0:05
deliver an experience to the user.
0:09
There's a content layer, or
the information you see on the page,
0:11
a presentation layer that handles
how that information looks, and
0:15
a behavior layer that lets
users interact with that page.
0:19
CSS or Cascading Style Sheets,
provides the presentation layer and
0:22
creates the visual style of webpages,
using colors, typography, layout and more.
0:27
The behavior layer is
handled by JavaScript,
0:33
to add interactivity to the page.
0:35
For example, popping up a larger image
when a user clicks a small image.
0:37
HTML or HyperText Markup Language
provides the content layer and
0:41
forms the structural
foundation of a webpage.
0:45
It's the language common to every website.
0:48
So if you wanna build your own website,
web application, or
0:51
know how to edit other websites and
apps you'll need to understand HTML.
0:53
I'm Guil, your front end web
development teacher here at Treehouse.
0:58
Your journey into learning code
begins here with HTML basics.
1:01
You may have already worked with HTML or
seen it in action in a previous course.
1:04
So in this course,
1:09
we're going to dive deeper into
many of the core concepts of HTML.
1:09
So first, let's break down
the meaning of the initialism, HTML.
1:13
Hypertext Markup Language.
1:17
Hypertext is any text that can be
displayed on a computer screen and
1:20
contains links to other texts,
or hypertext documents.
1:23
The web is a collection of billions of
documents, interconnected by hyperlinks.
1:27
For example, the page you're viewing
right now is a hypertext document and
1:31
you most likely clicked on
a hyperlink to get to this page.
1:36
A markup language provides meaning to
text in a document using instructions
1:39
that describe how text should be
structured, formatted, and laid out.
1:44
So HTML is a markup language the browser
uses to present information to users,
1:47
like text, links, images, and videos.
1:52
It's the basic component
from which all websites and
1:54
applications on the web are built.
1:57
Let's quickly review how HTML works,
what it looks like, and
1:59
why we use it to structure
content on the web.
2:03
If you've worked with word processing
program like Microsoft Word or
2:06
Google Docs,
2:09
you've likely formatted blocks of
plain text by creating a title for
2:10
the document and headings to indicate the
start of important sections of content.
2:14
Also adjusting the size of text and
making it bold, so
2:19
that it stands out from other text.
2:22
You may have inserted links to
other documents or webpages, or
2:24
you've inserted line breaks, spaces,
and horizontal lines to divide and
2:28
break up sections of content.
2:33
In other words,
2:34
you used the program's formatting options
to give the document a clear structure.
2:35
HTML provides similar text formatting
instructions to browsers in the form of
2:39
tags called markup.
2:44
So just like a Word or Google document
with no formatting will look like this.
2:46
A webpage without HTML tags or
markup would look like this.
2:51
Now here's the same content displayed
in the browser using markup.
2:55
Notice the text on the page
is easier to scan and
2:59
understand, and it provides links to
navigate to other pages and more content.
3:02
If I right or Ctrl+Click on the page and
click View Page Source,
3:08
I'm able to see the HTML the browser
uses to display this simple webpage.
3:12
Now take a look at the sets of
tags that surround the content.
3:17
That's the markup responsible for
displaying this page.
3:21
And notice how even though these
tags are meant as instructions for
3:24
the browser, they are named using
friendly, human readable words,
3:29
like title, body, header, main and footer.
3:34
HTML is understood by all browsers,
3:37
from browsers on phones to
tablets to desktop computers.
3:39
That's why every website and
web app you use is made using HTML.
3:42
It's the language of the web, and
I'm going to teach you how to write it.
3:46
By the end of this course, you will have
learned the skills to create the HTML
3:49
structure of a simple website
about virtual reality, like this.
3:52
And as I mentioned before,
HTML is just part of what makes a website.
3:56
Adding a bit of CSS can transform
the structure of a page into
4:00
something beautiful, like this.
4:02
So let's get started.
4:05