depending on where you are in the world.

This is CS50 on Twitch.

My name is Colton Ogden, and today, we're

going to take a little bit of a diversion away from game programming.

Now, I apologize to anybody in the stream right now.

We took a minor break.

This is actually a restart of the original stream.

We weren't cross streaming to Facebook and YouTube,

but we should now be streaming to both Facebook and YouTube

in addition to Twitch today.

So if you're watching on any of those platforms, thank you for tuning in.

Welcome to our Twitch show.

Normally, I do game programming streams.

We code things from scratch on stream typically,

making a small, simple project.

Like, the other day, we did a typing game and hangman.

Next week, we'll probably do Minesweeper, which would be super fun.

Kudos to I think it was Bhavik_Knight who recommended that game.

But today, we're actually going to take a little bit of a break away from games

and cover a area of programming that I'm very interested in

but don't necessarily have much skill in.

And that is web programming.

And web programming is all the rage.

And there are a ton of technologies, languages, tools

used in the world of web programming.

But ultimately, it all boils down to a lot

of core simple foundational technologies that folks then build upon.

And there's a trifecta that you could think

of as being the core set of technologies, those being HTML--

the skeleton of web pages.

I've heard it being referred to as the nouns.

Then you have CSS, which is the styling, which some folks refer to

as the adjectives.

And then lastly, JavaScript, which I don't

know if it has an anatomical sort of analog, but certainly,

the verbs of web programming.

I'm going shout out some people in the chat who kindly waited while we

were getting everything set up here.

So we did shout out Asli, Bhavik_Knight, Bella_Kirs, MKloppenburg, Brenda,

David, David J. Malan, Ultraviolet Pilot.

And a lot of folks were having sort of a side

conversation about some other tools in future streams, CSS being among them.

And tune in next week because David will be doing a stream on render50,

which is somewhat related--

well, not super related to this.

We typically render a lot of HTML and CSS using render50.

But it itself is not a HTML--

actually, I don't remember offhand-- if David

wants to chime in-- if it actually uses a virtual DOM, a virtual web

browser underneath the hood.

Don't remember offhand.

GranolaBar20 just joined the stream.

What are we doing today?

We're going to be covering HTML, which David kindly pointed out there

in the chat as well.

So what is HTML?

Now, when we started the stream earlier, I

was looking for a nice representative example of an HTML page.

And certainly, we'll write a few today on stream live.

But this is, I think, a pretty good demonstration

of a lot of the different features of HTML without any CSS styling.

It shows that we have--

and effectively, this is what HTML looks like underneath everything.

It ultimately does look like black and white text and images.

But all it really is is just a way for folks

to send bits of information that communicate some sort of meaning

across the internet.

And you could maybe think instinctively, I

want to send somebody a web page that, for example, has some bold text

up here that says, "Example of a simple HTML page."

But if I were to just, for example, write literally the words

"example of a simple HTML page," that in and of itself

doesn't carry the information that refers to the fact

that it's larger than the other text on the screen--

larger and bolder, for example, than the text underneath it

that says "HyperText Markup Language, HTML,

is the most common language used to create documents on the World Wide

Web," et cetera, et cetera.

Right?

And for example, it doesn't also illustrate how we--

some of this is--

I'm not sure if this is trying to literally show us

what b tags look like.

But you can also communicate things like whether certain elements should

be indent--

or not indented, but whether certain elements should be italicized or bold

or maybe things should be in a list or a table.

Maybe there should be text fields and that sort of information.

Things that are not super easy to represent with just pure text,

we can see how HTML lets us solve this problem.

And yeah, David saying we use a Python library to create the PDFs--

WeasyPrint, which I had known we use Python, but wasn't sure if it actually

was a proxy to a tool like something like PhantomJS,

so like an invisible browser which renders stuff for you.

But that's cool.

So let's go ahead and talk about I guess the basics of HTML.

I have a whole outline.

We have a whole lot of really cool stuff to talk about.

The very first thing we should do, like we always normally do,

is create our very first file and write some code.

So I have a folder in the stream subfolder, which

we've used on every stream so far or at least most streams

so far that involve programming.

I'm going to create a new folder.

I'm going to call this HTML because this is our HTML stream.

And then I'm going to create a--

I'm going to pull this over to my text editor, which is VS Code.

And just like any other programming language,

you can use VS Code or some other text editor

to write this HTML, which you can then run in your web browser.

And we'll talk about web browsers as well.

"Paintbrush looking head," says Cunavrito.

Yeah.

I've said this probably--

I'm like a broken record-- probably said this six or seven times.

I need to get a haircut really badly.

I'll say this on stream and I'll commit this.

On Sunday, I'm going to get a haircut.

So it's been marked.

If I don't have a haircut by next week stream, you all can make fun of me

for it.

I've created a file called index.html, and this is just a file on my hard

drive with an extension html, .html.

And this, basically, we can run this in any web browser

now-- in a web browser, what we can look at here.

To define what a web browser is, a web browser

is just an application that expects to receive information

via HTTP or some other protocols.

And it renders-- if it sees that the file is HTML and has

CSS and JavaScript, it'll actually render that for us,

not terribly unlike a game engine, I guess,

in sort of an abstract way to think about it.

But it expects a certain format of information,

and it will render things per a set of standards.

And I believe it's the W3C that has created these standards, the World Wide

Web Consortium, who's defined what HTML should be, specifically HTML5--

at least insofar as the HTML we'll be using today and in future streams--

what CSS should be.

I don't believe they define JavaScript.

That's ECMAScript, which is a different committee, unless W3C

defines the ECMAScript standard.

A lot of those details, I don't know offhand necessarily.

But they are responsible for at least, as far as I'm aware, the HTML standard.

Could be horribly wrong.

I hope I'm not wrong about that.

I thought I had read that earlier.

But some organization has said HTML needs to contain these elements.

So let's take a look at what HTML, first of all, looks like.

So I'm going to go ahead.

And you'll see a lot of what HTML is comprised of

are these angle brackets, these less than and greater than signs--

for example, this tag that says html.

And I'm going to bring my font size up just a little bit so

we can see what we're looking at.

So in my text editor, I've just written what's called a tag or two tags--

an opening tag and a closing tag.

And this basically just means that whatever is inside

this tag, whatever is between the start and the end, is something.

In this case, it's HTML.

But more abstractly, you could say whatever is within these tags--

maybe it's what I'm going to define to be a dog.

And actually, in a future stream, we'll take a look

at how we might actually make something called dog-- a tag called dog, which

has some sort of semantic meaning.

Today, we're not going to go into custom tags in detail.

We'll reference them, because you actually

need to use what's called JavaScript to make that work

to make non-standard tags work.

But all this means is that anything that's within these two tags

is whatever the word is inside the tag.

In this case, it's HTML.

And every HTML file has two core parts really, a head and a body.

And this kind of almost ties back to our anatomical analogy

earlier in a different way.

But a head contains usually some information

that's not rendered in our web browser.

For example, if we go back to Chrome, none

of the stuff that you see here in the main window is usually in the head.

But the stuff that you see up here, for example,

in this title where you can in small font see HTML examples, that's a tag.

That's a bit of information that we put in our head.

And everything that you see here underneath,

the actual meat and potatoes of our web application, our website,

is in the HTML body.

Let me make sure I have caught up on the--

Cunavrito says, "Don't get a haircut.

I am bald, so I guess you won."

"No, your hair's awesome.

Don't get it cut."

I honestly-- it's getting a little long for my personal taste.

"Heyla porco dio," Caralse says.

I'm not sure what that means, actually.

"TC39, JavaScript I think."

TC39.

What is TC39?

Is that a-- oh, ECMA TC39.

Is that the committee?

ECMA International Technical Committee 39.

That make sense.

So that's the committee responsible for defining the ECMAScript standard.

I have to look into a little bit more detail.

But based on just that, that looks accurate to me.

So this is the core, the base of what an HTML document is.

Now, there's a few other things.

DOCTYPE html.

And this at the very top of our application says to our web browser

that this particular document is an HTML document.

I'm going to have to think about the--

I don't know offhand the use cases where it's strictly necessary

because I do believe Chrome will just render it even

without this DOCTYPE html.

But as good practice and for things that aren't necessarily as

robust as Chrome-- for example, screen readers and certain, like,

streaming service devices that use web browsers

underneath the hood, their own proprietary web

browser-- you might want to include this DOCTYPE or else the renderer

will get confused as to whether maybe this is HTML versus XML

and have issues rendering it.

But typically, you'll see this tag at the very top--

this angle bracket, exclamation point, DOCTYPE

in caps, which I actually don't think that even is strictly necessary.

But typically, you'll see it in caps.

And then html, saying this is an HTML document.

And so this is the foundation.

This is what an HTML document ultimately boils down to.

And, of course, the devil is in the details, and there's a lot of details.

There's a lot of tags and a lot of other things

that we can do to add to our document, to add to our HTML document--

the things that actually make up what we see, what we physically

see, for example, this header right here.