This course will be retired on January 6, 2020. We recommend "HTML Basics" for up-to-date content.
You've already started watching Markup
In this video, we'll learn how to apply a markup language, like HTML, to normal text.
-
0:01
[Deep Dive]
-
0:02
[HTML Introduction: Hyper Text and the Web with Nick Pettit]
-
0:06
Now that you know how easy it is to make things appear inside of a web browser
-
0:10
it's time to learn about markup languages, specifically HTML.
-
0:14
HTML is an initialism that stands for hypertext markup language.
-
0:19
There's two parts to this: hypertext and markup language.
-
0:23
However, we are going to focus on the markup language part first.
-
0:27
A markup language is not the same as a programming language.
-
0:31
When we use a programming language, we are describing how something should behave.
-
0:36
Rather, markup languages are used to annotate
-
0:39
and add semantic structure, or meaning, to a text document.
-
0:44
So fundamentally, you can think about a web page in terms of text
-
0:48
with markup added on top.
-
0:51
The general concept and term "markup"
-
0:54
evolved from the idea of a book editor or writing instructor
-
0:58
marking up a document with a pen or pencil,
-
1:01
similar to what you might remember from school.
-
1:03
However, HTML isn't intended to suggest corrections to text,
-
1:08
rather it structures and shapes the text in a way that makes it easier to understand,
-
1:13
both for people like you and me as well as for the software that interprets the markup.
-
1:18
As an example, HTML is a markup language that is interpreted by a web browser.
-
1:24
So, lets try an example.
-
1:26
Lets look at some normal text and then we will figure out
-
1:29
how we might mark this up with HTML.
-
1:33
This text is describing one of the elements and principles of art,
-
1:37
but really this text could be about anything.
-
1:40
You might create a web page about your favorite Shakespeare quotes
-
1:44
how to make pizza, practice and procedure for a work environment,
-
1:48
or anything you want. Now lets examine this text.
-
1:52
At the top, we have what looks like a header that describes the content of our page.
-
1:59
Below it we have a few paragraphs that go into detail on the subject.
-
2:05
However, as is, there is no way for a web browser
-
2:09
to determine what part of this text is a header
-
2:13
and what parts are paragraphs.
-
2:16
We can remedy this situation by applying what are called "tags."
-
2:20
A single tag looks like this: there is an opening angle bracket,
-
2:26
a very specific set of text inside,
-
2:30
and then a closing angle bracket.
-
2:32
There are many tags like this, but with some practice
-
2:36
it should be fairly easy for you to remember most
-
2:39
of them without having to look them up.
-
2:41
This tag we are looking at is called a headline tag.
-
2:46
We will talk more about headline tags in an upcoming video,
-
2:50
but for now all we really need to know
-
2:52
is that this tag is intended to mark large headlines.
-
2:56
Here is another tag.
-
2:58
This one is called a paragraph tag,
-
3:01
and you'll sometimes hear it referred to as a "p-tag" for short.
-
3:05
Let's take these two tags and revisit the text that we were just looking at.
-
3:12
For the header, up at the top of this text
-
3:15
we want to add our first level headline tags.
-
3:19
We will go ahead and put our insertion point there,
-
3:23
and we will type a first level headline tag, just like that.
-
3:28
Now we have marked up the start of our headline,
-
3:31
but how will the computer know where our headline ends?
-
3:35
Tags almost always come in pairs.
-
3:38
We have what is called our opening tag right here,
-
3:42
but we need to finish wrapping this text by adding a closing tag.
-
3:47
A closing tag looks just like an opening tag
-
3:51
but with the addition of a forward slash right after the first angle bracket.
-
3:57
We will type our opening angle bracket,
-
4:00
our forward slash,
-
4:02
and then h1 for the first level headline.
-
4:06
Now we need to use the paragraph tag to wrap our two paragraphs here.
-
4:12
Just like the headline, we will use an opening p tag
-
4:16
and a closing p tag.
-
4:19
So, we will go ahead and type our opening p tag
-
4:21
and then we will close it.
-
4:24
Then we want a second paragraph so we will open another paragraph tag.
-
4:31
Then we will skip to the end and go ahead and close it.
-
4:36
Then we can save our file,
-
4:38
and we could check it out in the browser.
You need to sign up for Treehouse in order to download course files.
Sign up