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.