>> DOUG LLOYD: So we spent
about-- if my math is right, and I think looking back-- I think
we spent about 35 videos talking about various aspects of C, maybe
a little more, maybe a little less. And we didn't cover
everything in C, but we covered a big chunk of the
language, the vast majority of it, certainly for common uses. Now we're going to talk
about another language, HTML. And we're going to cover
it in just one video. >> But that's going to be OK. That's going to actually become
something you're going to get used to. Now that you have the
fundamentals of one language, it's actually pretty easy
to start learning others. So we're going to start
to step a little back and gloss over the basic
differences between these languages and sort of leave you to it. There's a lot of really great
resources on the internet, which we're going to start directing you
towards because the internet is a vast repository of information. And so it's not like you'll
be losing out necessarily by not having the information
covered in a video. You'll still be able to get
everything you need and use the knowledge you've already
built up by understanding C to make the learning curve for these
other languages actually a lot flatter. I promise. >> But let's talk about one language
that's really fundamental for every web page, which is HTML. HTML is the Hyper Text Markup Language. HTML is a language but it is
not a programming language. >> HTML doesn't have variables. It doesn't have logic or
functions or anything like that. We can't do any
programming per se in HTML. Sometimes you'll hear
people describe themselves as HTML programmers, which
isn't entirely accurate. We can't write HTML programs. >> HTML is just used to mark up text. It's called a markup language. And what this does-- this markup--
we use tags in HTML and these tags-- this markup-- semantically
defines the structure of a page and causes the plain text that
exists between tags to be interpreted by browsers in different ways. And perhaps it's best to explain
this by way of an illustration. >> Here's a very simple HTML page, not
an HTML program, again, an HTML page. And we know it's an
HTML page because we've bounded everything with HTML tags. So this is what an HTML tag looks like. It's between angle brackets. And notice at the top we have
HTML and at the very bottom, after we've done what is
apparently a lot of other HTML, we have angle bracket slash HTML. So that sort of is the boundary
between what is HTML and what is not. And of course, conventionally, just
as you wrote all of your C programs with dot C extensions,
all of your HTML files will end with dot HTML extensions. But there's more going on here. We don't just have these HTML tags. We apparently have this
thing called a head tag. Well, OK, what's that? >> Well maybe it's best to
distinguish by way of a body, body being the content of the web page. So maybe the head tag defines stuff
that isn't in the browser window proper, but is somehow important to our
web page being rendered correctly. For example, inside of the
head tag we have title tags. >> So title being hello world,
that's actually going to be what shows up in the tab in Chrome
or in safari or Firefox-- whatever browser you prefer-- that's
what's going to show up in the title. And before tabs it would show
up in your entire browser window and you can only have one page
open in a browser window at a time. So that's going to be the
title of my page up in the tab or the browser window bar, hello world. And then the content of my
web page will be world, hello. So let's take a look at what some
thing like this might look like. This is a pretty simple HTML page. So I'm here in my CS50 IDE and
I've zoomed in a little bit. And I'm just going to
open up hello dot HTML and show you that this is pretty much
the page content that we saw before. My simple HTML, head tags,
title tags, body, and so on. I've indented to be clean. >> And then what I can do in my
IDE is just preview the page. And there we go. The content of my page is world,
hello, and I don't see anything in from the head tags there. It's just the content of the body. World, hello. And again the body just
said, world, hello. The other part is missing. >> So that's really all it is. This is a very simple basic HTML page. Now I've indented my HTML to
be really nice and organized, but I don't actually have to. I could make it look pretty ugly. And this would still work. This would be the exact same web page. I've just gotten rid of
all of the white space. >> As it turns out, white space is data. And so when we're sending data from
sender to receiver, from server to client, data costs money. And so getting rid of whitespace
is actually a good idea if you're somebody who serves
up a lot of web content. It's a bad idea if you're
somebody who's learning this stuff and you want to have
it nicely organized. This is a lot easier to parse than this. But it's functionally identical. >> The indentation and stuff like that
doesn't actually matter in HTML. All that matters is opening tags and
closing tags in the correct order. Notice what happened here, though. The markup gives us a way to
communicate extra information about what we've written. The Hello, World part was
interpreted as the title. And the world, hello part was
interpreted as the content or what should be
visible on my web page. >> There are over 100 of these different
tags and lots of great resources online to find them. We're going to talk about a
few of them in this video, some of the really fundamental stuff. But we're not going talk
about it all because it would be exhaustive to do so. >> Another thing you can do, though,
is open up developer tools. And if you recall from
our video on HTTP, I explained how to open
up developer tools. In Chrome it's usually the F12 key
to open up the developer toolbar. Then instead of choosing the Network
tab, you can choose the Elements tab. And if you load a web
page, you'll actually see the HTML that creates that web page. And so you can learn a lot about HTML
by looking at your favorite websites and seeing how they build the
various pieces of them that you like. So maybe there's this cool
pattern or something like that. How do they make it with HTML? Well you can just open up your developer
tools and hover over that element and see exactly what HTML makes it. So that's a really
good way to learn HTML, and I strongly recommend that
you do it both to learn HTML and also to learn a little
bit about some of the options available to you in
developer tools, which will certainly come in handy as
you begin doing more intensive web programming. >> So let's take a look at a
couple of common HTML tags. And we'll jump and take a look at
what these tags will also render as by looking at some files in my IDE. So here are three very basic tags for
tweaking the visual appearance of text. There's B tags, I tags, and U tags. And respectively what they do is
render the text between them in bold, italics, and underlining. So let's see what that would look
like on an actual web page in my IDE. >> So here in my IDE I have a
file called BIU dot HTML. BIU dot HTML just being
bold, italics, underlining. I'll open it up. >> And we'll see that here I
have this text is B tags bold. This text is I tags italic. And this text is U tags underlined. What is this going to look like? Well again, all I have
to do is go over here to my browser, my file browser, click
Preview, and this is what comes up. >> The text in between the B
tags is indeed now bold. The text in between the I
tags is indeed now italic. And the text in between the U
tags is indeed now underlined. So that's pretty good. We now know how to make text
look a little more fancy or draw emphasis to certain things. Another couple of common tags here are
paragraph tags, P, and header tags, which I've rendered here as HX. >> These P tags, these paragraph tags,
break your text up into paragraphs. It's not enough to just
hit Enter and leave spaces, because a computer is only going
to do what you tell it to do and it ignores white
space for the most part. So we can't just hit Enter
and expect our computer to interpret that we want
to start a new paragraph. We have to very explicitly say this
is one paragraph-- this is another-- by enclosing each in a set of P tags. >> And we also have these options
for H tags, these header tags. We have six different levels
of headers, one, two, three, four, five, and six, which are
progressively larger and larger headers. And they get smaller and
smaller and smaller and smaller. So we have a top level header, a second
level header, and so on, and so on. >> Let's take a look at maybe some
P tags and some header tags in action on a web page. So here in my IDE I have a file called
PH dot HTML, PH being paragraphs and header tags. Open that up. There's a lot going on here
because I've put some lorem ipsum, some just random text in here. So I'll zoom out a little bit
because there's so much going on. But notice that I have at the very
top here I have an H1, a level one, header tag. Then I have a paragraph, which is just
a bunch of random text-- lorem ipsum-- just default standard filling in text. So I have two paragraphs inside of that
level one header and then down below I have a level two header here on line 24,
a second level header, and another two paragraphs. Well what does this look like
if I view it in my preview? Let's see. >> So notice that the
first level header here is actually quite a bit bigger
than the second level header. So we used H1 tags. And notice that the P tags allow us
to break things out into paragraphs. If we had gotten rid of those P tags
and actually just put Enters or Returns in between what we hoped would
be the different paragraphs, they would all just slam together and
it wouldn't have this nice paragraph separation with space above and below. And so that's what paragraph
tags and header tags are commonly used to do to draw
attention to portions of our web page in that way. >> Next up are some tags that we use
to build lists on our web page. So we have unordered
lists-- ULs-- which are just bulleted lists, ordered
list which are numbered-- OLs-- and inside of either
one of those we need to have sets of how to indicate list items, LI. And so we have open UL tag
and we put items inside of it. And then when we're done with
that, we can close the UL tag. >> And similarly we can have
an ordered or numbered list and put list items inside of that. So let's take a look
at a couple of lists and what they would
render as on CS50 IDE. So I have here in my IDE a
file called lists dot HTML. Let's take a look. >> And notice here I have an unordered
list with five things in it. And then I have an ordered list, and
I've changed the tag a little bit, right? I've said start equals six. It turns out with an ordered list I
can set the starting point wherever I want-- by default it will be one--
by just adding this so-called attribute to my OL tag. And so this list will
start counting at six. So the elements of that numbered list
should be six, seven, eight, nine, ten, because there are five elements
in the list, as opposed to one, two, three, four, five, which
would be the case if I had said OL without specifying the start attribute. >> So we'll just preview this so you can
get a sense for what's going on here. And there we go. There's my list. The first five elements are
unordered or bulleted lists. And the next five elements
are a separate ordered list starting from six. So that's how we can
build lists using HTML. Another thing you might
want to do with HTML is build a table of
information of rows and columns to present information in a
particularly organized way. To do this with HTML we can have a
table definition beginning open bracket table. And then inside of that table we
might have a set of rows, TR tags to indicate each row. And then TD tags go inside of TR tags
to specify a column within a row. >> Why is it called TD and not TC? Well, TD stands for table data. Usually you're putting
your information there. So that's why it's TD and not TC. It's a little bit confusing. >> So you have table tags and
inside of your table tags you have a number of rows, TRs. And inside each row you have
TDs for the number of columns that you want to have
in that particular row. Let's take a look at a very
simple table over in CS50 IDE. >> So I have here a file
called table dot HTML. Let's have a look at
what that looks like. There's a lot going on here but
if you notice I have a table open. I'm starting the definition with table. And then in my first row I apparently
have four columns, one, two, three, four. And then I'm done with that row. >> Then I start another row and
do two, four, six, eight. Finish that row. Do another row, three, six, nine, 12. And then a last row, four,
eight, 12, and though it's a little cut off here, 16. >> I finished that row. I finished the table. And then I'm done with my HTML. What does this look like? Well, it's not really much to see. I've clearly organized my information
in a somewhat more organized way. But it's not super pretty here. And we're going to deal with
that when we talk about CSS. We'll revisit this idea of
what we do to make a table-- maybe format it a little bit better? But I do still have four rows,
each of which has four columns, and really what this amounts to is a
very simple four by four multiplication table. >> Just a few more tags we'll talk about. Let's talk about the
concept of an HTML form. So you may have seen this in the
context of logging into a web page. Usually you type in your user name. You type in your password,
and you're good to go. That would be the beginning of a form. >> Skipping over div a second. We also have inputs which
kind of fit inside of forms. These are the elements that
you're actually typing into, or the radio buttons you're
ticking, or the check boxes that you're ticking off. So these go inside of forms. And they comprise basically
each row of the form if your form is formatted well. Then there's this concept of
a div, which doesn't really fit in any particular category
of tags like the ones I've been doing previously. It just sort of demarcates the
beginning of some arbitrary division-- div-- of the page. There's no visual break. There's no line. It's not set off as a
separate chunk automatically. You'd have to style it
that way to do that. >> It just sort of says I want a
piece of space on my web page, and I'm just going to call
it this division of my page. We can put stuff inside
of divs, and in fact, when we head over to
IDE in a second, we'll see that I'm putting my
form inside of a div. >> So I have here in my IDE a
file called div form dot HTML. Let's open it up. Notice that like I said,
div is kind of arbitrary. Right? It doesn't really mean anything. So I have an arbitrary
first division of my page. And then instead of another div
later on, starting on line eight, I have this form. And inside of the form I have a
number of inputs, fields of the form. So I have a field whose name is A--
which doesn't really mean anything right now-- that apparently
takes text, another one that takes a password, another that's a Radio
button, another that's a check box, and another that's a Submit button. Well, what does this
all actually look like? Well, let's take a look. We'll open it up in our preview window. Notice that this arbitrary
first division-- there's no visual separation here. It didn't really do anything, right? >> And then I have my form. And I didn't do any special formatting. So the form is just one
big row of information. If I had formatted my form differently,
I might have it line by line by line. But I didn't do any styling. Again, we're not talking about CSS here. We're just talking about HTML. >> Well in my text form I can type--
remember that forms of type text so I can put my name. And in my password I
can type my password. And because that field
is of type password, you don't know what my password is. It's all dots. >> I can also choose to tick off a
radio button or tick off a check box. Or I could submit my form. And I didn't do anything,
so when I submit my form, the page just refreshes. But I could perhaps configure my
Submit button to do something else. And we'll see what we can do with
that in a future video on PHP. But this builds a very
simple form that we can use to have users interact and
submit information to our website. >> One last comment before we
move on to some other tags are to take a look at this
input tag one more time. Notice that I've highlighted
the ends of the tag in red. Every other tag we've seen so far has
had a beginning and an end, an opening tag and a closing tag. >> But an input tag doesn't. There's no text that goes
in between input tags. All of the information
we're intending to convey is bound up as part of the
attributes of that input. Notice we have input name equals x. Type equals y. That's really all the
information we need. >> This is called a self closing tag. It doesn't require an opening and a
close because all of the information is contained inside the
tag and its attributes. So sometimes you'll see this, too. So just be aware that if you have a
tag that is entirely self-contained, it opens and closes itself with
the open angle bracket on the left and the slash angle
bracket on the right. We'll see another one of those
right now with image tags as well. >> Before we talk about images, we
need to talk about hyperlinks. If we want our web page to be
interactive and move us around, it would be nice be able
to click on one of those what has typically been a blue link. This is actually how we build
a hyperlink in our web page. And interestingly enough
there's another HTML tag called link, which is not a hyperlink. A here stands for anchor, and
that's how we indicate a hyperlink. >> A href equals x means go to
web page X. And everything between the open A tag
and the close A tag is what's going to be that underlined
blue text that looks like a link that we're familiar with. Below that we have an image tag, which
is a self closing tag for displaying an image located at X. And
you might be able to change that image by specifying
width and height and other attributes in
that dot dot dot there. >> At the very bottom here
we have a very interesting looking tag that doesn't
have a closing tag. It's exclamation point doctype HTML. So HTML has been around since the
early 1990s for building web pages, and it's gone undergone
several revisions since then. Most recently in 2014
it underwent a revision called HTML5 which is now the current
sort of de facto HTML standard. >> To indicate that our web
pages are written using HTML5, this is how we start off. It can be omitted but
what that basically means is you can't use any of the tags
that are HTML5 tags, those new tags. So we always start off
if we're using HTML5. And all the tags we've talked about
previously are not HTML5 tags. But this would indicate that
HTML5 tags will be present. And so we have exclamation
doctype HTML, which is at the very beginning of our
HTML file, and then after that point we actually have our HTML open
tag and proceed from there. >> The last one is a comment tag,
which looks slightly different, too. It starts off with angle
bracket exclamation dash dash but no closing bracket. In between those two elements there
is where you write your comments. And let's take a look at images
and comments and links in CS50 IDE. >> So I have here a file called image link
dot HTML which I'm going to open up. And notice I've got a couple of
comments here in my HTML comments. So just like in C and other
programming languages, HTML just by being a markup language
does have the ability to have comments. And so I'm apparently going to
place a picture of Rick Astley somewhere between this div
tag, this arbitrary division. Apparently that file is
located at Rick dot JPEG, which if we head back over to
my file tree for a second, is a file that exists in
the current directory. So that's OK. I can reference it. >> Then I can have internal links. So notice on line 11 here
my href is hello dot HTML. So that just refers to hello dot HTML
which exists in the current directory. And I can also have external
links by just specifying HTTPS to indicate that I'm not talking
about a file in my current directory. I'm talking about a file that exists
somewhere on the internet, which I have to request using the HTTP protocol. >> So let's take a look at what
this page might look like and get ready for a picture of Rick
Astley to show up on your screen. So I'll preview this. There's Rick Astley at the
very top in this arbitrary division I put it at the top. And then down below I
have my links, right? >> I have a link to hello dot HTML. And if I click that, I get
moved over to this page that we're very familiar with from
the very beginning of our program. If I pop that page open again, if I
pop image link open one more time, I can also go externally
to CS50's website. And there we see-- I'll
zoom out a little bit here-- we'll see CS50's website sort of
embedded in the middle of our page. So I was able to make an internal
link as well as an external link. >> The last rule with HTML that
we're going to talk about here is that your HTML should be well formed. In C we talked a lot about
the various syntax of things. In HTML the syntax really
revolves around tags. Every tag you open needs to be closed. And in fact, every tag you open
should be closed in reverse order. >> So if you open a bold tag, an italic
tag, and then an underline tag to do all three to a
particular set of text, you should close them in reverse order. So if you opened bold,
italic, underline, you want to close underline, italic, bold. This sort of encapsulation is what
keeps HTML nice and organized. >> Unlike C, though, syntax errors won't
actually cripple your HTML possibly. Your HTML may be not well
formed but would still work. And so these errors
can sort of slide by. It's up to you to really be vigilant. Sometimes they will fail but
sometimes you can get away with it. >> It can be a really
difficult task, though, to keep track of when you opened
a tag, when you closed it, especially as your HTML
files get bigger and bigger. You'll want some help. And there are online
validator tools that you can use to have a look at your web
page and see if it's well formed HTML. And you should definitely
take a look at those and start to use them as you
begin doing some work with HTML, writing HTML, just so you get
some good habits about organizing your HTML in a good way and
good style and making sure that you're not doing anything that
could create a syntax error that would cause you a bit of
a problem down the road. >> I'm Doug Lloyd. This is CS50.
