Placeholder Image

Subtitles section Play video

  • COLTON OGDEN: All right, good morning, good afternoon, good evening,

  • 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.