Placeholder Image

字幕表 動画を再生する

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

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

  • Well, what is a header?

  • That's a good place to start.

  • Let's get some actual text rendering onto the screen, I guess.

  • And then we'll come back to head maybe in just a minute

  • as well to see the title tag, which is also very important.

  • So in my body, if I type, for example, h1, which is short for header--

  • header priority one, I guess you could think of it as.

  • And then I say CS50, right?

  • Now I have an HTML document.

  • I actually have to render it somewhere.