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.
I need a web browser that can do this.
So I'm going to go to Finder, and I'm going
to just double click on index.html.
And Chrome is my default. And actually, I'm going to change my resolution.
I just realized that for some reason, I went from 1080p to 720p.
I'm not sure why that is.
Forgive me for just a second here.
Scaled, 720p.
And let me readjust the size of the window, which
is a little bit messed up.
And now we should be able to see things just a little bit better.
If anything was a little bit tiny in the font size,
we can see that just a little bit better.
I'm going to quit my System Preferences.
I'm going to shrink this down.
This is a little large.
But now I have an HTML page which just has a header.
And I'm going to go to my Finder.
Now you can see it a lot better.
I'm going to double-click index.html.
And we see, just as we predicted, that we have this large text that says CS50.
And this large text is what's called a header.
And headers can be used for a lot of things,
and there's different degrees of them.
Let's go ahead and write out some of the other headers
just so we can see what they look like-- for example, h2, rather.
Messed up.
The nice thing about VS Code is if you type a tag, a couple of things
will happen.
So you can type the tag manually like this.
You can close it yourself.
And you'll see that-- and this is something that a lot of text editors
do.
This isn't just necessarily VS Code.
I think Atom and Sublime also do this in addition to many other features.
But notice that I typed h2, I closed it, and it gave me
the corresponding closing h2 tag.
And that's just a nice feature of modern text editors
to help folks not forget to close tags, which can be often a subtle--
especially in web development, because it's not
going to give you an error message if you
don't have a closing tag necessarily.
Rather, your web content is going to render in a very strange way
because HTML will parse top to bottom your HTML file
and apply styling and all sorts of things.
We can maybe explore that in detail in the future.
But suffice to say, this helps out in terms of preventing us
from forgetting closing tags.
So I'm going to write an h2.
I'm going to write my name.
I'm going to save it.
I'm going to go back to Chrome.
And Chrome, by the way, is an excellent debugging web
browser for web development.
And we'll take a look at what are called the developer tools in a little bit.
But just for now, I'm going to just to illustrate a few simple things first.
If I refresh the page by hitting Command-R or Control-R on a PC,
you'll see that it refreshes the content that I saved to my disc
because it reloads the file.
And notice up here at the very top in the header,
you can see in the URL bar-- you can see that I'm using what's called the file
protocol, which just means that instead of Chrome making HTTP requests to some
server--
meaning, asking some server on the internet for some information--
it's instead asking my local hard drive for the information.
And so you can see it does map to a URL on my hard drive
at /Users/jharvard/dev/ streams/web/html/index.html just as we
saved ourselves earlier.
But I could also just in this URL bar type google.com.
And now notice that the protocol changes from file
to https, so different protocols that can serve content in different ways.
Now, the file, it refreshed the file from my hard drive.
And now we see that we do, indeed, have an h1 and an h2.
I can do the same exact thing with an h3.
For example, type David's name here.
Go back to Chrome.
Refresh that.
I can go over here, type in h4.
Type Dan Coffey, who kindly helped get us back on to streaming
after our first mild hiccup--
Dan Coffey.
And notice that as we're going from h1 to h2 to h3 to h4, all the way down
eventually to h5.
And I'll say Happy Cat, and h6 will say Grumpy Cat.
Some other CS50 actors, so to speak.
We get progressively smaller text.
And these are just some default stylings that are
applied to these particular headers.
You can override these stylings as you wish
with a technology called CSS, which we will take a look at in a future stream.
Next week, actually, I believe we have the stream--
we're going to have the stream on CSS.
But by default, if you're just looking at plain HTML,
HTML as it existed back in the '80s, '90s--
I forget offhand the exact date that CSS was formalized.
Or at least I think HTML 3 introduced CSS or introduced styling, rather.
And then after that, because of how bulky it was,
they introduced CSS to separate styling from HTML.
But prior to a lot of that, HTML looked something very similar to this.
And originally, it was used to transmit research papers and those kinds
of things that didn't necessarily need a lot of styling, a lot of fanciness.
And so a lot of the features that it does have are--
you can imagine them being just the subset of features
that you would need to communicate research papers and limited information
without the need for styling.
And we'll take a look at some more of that.
ZeKillerPotato says, "A bit off topic, but how in-depth will this be
and will there be streams about CSS and JavaScript?"
Not off topic at all.
This will cover probably the majority of the core tags
that you use in daily web development.
We're not going to necessarily go into too much detail on some
of the more complicated stuff.
But on another stream next week, we will cover CSS, in which case
we can bridge these two streams.
And then in another stream after that, we'll cover JavaScript, in which case
we can add more layers onto that.
And then we'll cover things like Bootstrap.
We'll cover things like jQuery.
We'll cover things like DOM manipulation.
We'll go into a lot more detail.
But today, this is meant to be just a very simple introduction to the core
of web pages, and that's HTML.
So we've looked at some headers here, probably one
of the more basic elements.
You'll notice one thing about all the h elements is
that they do go onto the next line.
But if I were to--
we'll see an example of when that might not be the case in a little bit.
But take note of the fact that all of these h tags
are going down below each other.
They're going to a new line explicitly.
We haven't told it necessarily press Enter.
I mean, even though we have said press Enter here in our text editor,
we could very easily say do all of this, where we have the h2 immediately
following the--
sorry-- the h3 immediately following the H2 immediately following
the h1 on the same line.
But if we refresh, we'll notice that our HTML page actually
hasn't changed at all.
So the markup and the way we press Enter is independent from the way
that things look on the web page.
And this, we'll take a little bit more of a look at.
But this is what's called block level versus inline elements.
But it's much more easy to read all of the things separated by new lines.
And so independent of maybe necessarily how they're styled,
how the new lines are calculated, we want
to render things out in the sort of sequential way
just so it's easier to read because it gets very tedious to read code
that looks like this, especially if it's beyond the width of your text editor.
So if anybody has any questions in the future, definitely let me know.
"I love h3h3," says Unf4mili4r.
Oh, right, yeah. h3h3, the tags.
A bit off topic--
"sorry to follow up, will there be a master stream that
combines all of those technologies?
Last question for now, haha."
Ask as many questions as you want.
Certainly, I would love to do a stream like that,
to have a lot of streams that do HTML plus--
sorry-- CSS and then JavaScript, have them all together.
What I want to do is to eventually have us actually building websites,
not using one particular technology in a vacuum, but to actually say,
I want to make a blog.
I want to make a social media mock-up.
And then show how we use the three technologies in tandem,
rather than necessarily highlighting how they work.
But for the purpose of demonstration today, we
do want to show just sort of the basic tags and whatnot,
the basic mechanics and workings of each individual technology.
"Do you have any good tools for Visual Studio for web development?"
Not me, because Visual Studio Code has some very good built-in integrated
tools or integrated shortcuts, rather.
I'm going to illustrate one right now that I really like.
I'm going to actually delete the entire corpus of code
that we've written so far, this very minimal list of headers.
I'm just going to type HTML.
And notice that in VS Code, you get a bunch of these pop ups,
these auto fills that come up.
If I go down here-- and notice that they all have different descriptions
to them.
If I go down to here, I can see as soon as I press down on my keyboard
and highlight the thing that has kind of a box with some dashes underneath it,
it says, "Simple HTML5 starting point."
And if I hit Tab, you'll notice that I didn't
have to go through the tedium of typing all of the stuff
that we just looked at.
Instead, my text editor pre-populated a bunch of those tags for us,
including a bunch of new stuff in the head.
And so this is a perfect opportunity to look at some of those things.
So for example, we didn't look at title before.
But I can type in here "CS50 on Twitch" in my title tag.
Notice that it's within the head.
So this is not going to be rendered in the actual body itself.
And if I go back to my web page, notice that it's going to be completely empty.
But at the very top, you can see on our tab--
and this will change depending on your browser or your technology.
Most web browsers will just have this be reflected in the tab these days.
But if you're using, for example, maybe a screen reader
or some other application that's not a streaming service provider--
what's the word I'm looking for?
Like an embedded device.
There's a better word for it.
But different web browsers and different programs
that aren't necessarily web browsers might render this title somewhere else.
But the whatever web browser, whatever render you're using
is going to use this to place a title somewhere on the page.
"Is it good practice to write HTML from scratch?
Because some IDEs do basic structure for us by default if we save a blank HTML
file."
I'm guessing that was probably before I did what I just did.
But that's kind of in the same vein.
You have a basic starting point or a template
that you can then bootstrap yourself up from.
And so that's what we just did with this here.
Now there's some other meta tags that we see here.
And these meta tags give our web page some information
that's going to change sometimes, depending
on what web browser we're using.
But these meta tags can be used for a bunch of different purposes.
They can be looked at by, for example, your mobile phone
to determine whether it should be rendered in a certain way.
You can have meta tags that embed URLs to pictures
so that Facebook, when it crawls your web page, knows how to fetch--
it knows how to fetch a picture to render on Facebook when
you post some URL to some website.
For example, if you have a personal blog,
and when you want people to post your blog on Facebook,
you'll notice that when you post web pages sometimes an image will come up.
That image will typically be in a meta tag of some kind.
And so that's what meta is typically associated
with, just metadata that can be used for myriad purposes
depending on the application.
And you'll notice it gives us a couple of things
for free-- this link to a style sheet, a CSS style sheet, and also a script tag,
which links to a JavaScript file.
We are not going to use either of these because today's stream is not
going to be on JavaScript or CSS.
But in the near future, this will be very useful for us.
And if anybody has any questions so far on what we've talked about,
definitely tossed them in the chat.
We've talked about the head versus the body.
We've talked about the titles, meta.
We talked about Chrome.
But we haven't really talked about-- and yes, metadata is data about data,
says ForSunlight.
That is correct.
One thing that's great about Chrome is the fact
that it has what are called Developer Tools.
Now, I'm going to move the chat over just a little bit over here.
15_marius, thank you very much for following.
And you'll see that if I go to--
I can go up here.
I can go to Tools--
sorry-- More Tools, and then Developer Tools.
So the dot-dot-dot at the top right, and then More Tools and then
Developer Tools, click on that.
You'll see that some stuff pops up.
And I'm going to just make this a little larger, kind
of zoom this over just a little bit.
These Developer Tools are really cool because they
allow you to inspect your HTML document in addition
to your styling and your JavaScript at runtime.
So you can actually debug your application visually and not
necessarily have to keep editing your HTML over and over again and guessing
and refreshing.
This is a invaluable resource.
It can't really be overstated how useful this is in web development these days.
And most web browsers actually ship with something very similar to this.
Firefox and Safari both come with their own version of Developer Tools.
You can see that we have the HTML tag.
We have the head.
We have the body.
All of this stuff is very similar to what we saw written out in a text file,
but we see a representation of it here in the web browser.
And independent of how you style your actual HTML page, the styling for this
will be consistent.
So you can use good or bad styling.
But Chrome is going to uniformly style how this looks here in the page
here just so that it makes it easier and consistent to debug applications.
So let me pop over here back to my live format so I can see.
ZeKillerPotato, thank you very much for following.
And Agentmirv, thank you very much.
And [INAUDIBLE] as well, thank you very much for the follow.
I missed that as we were getting our stream up and running.
So these Developer Tools are great.
Now, our body is empty, and this is reflected here in the DOM.
This is what's called the DOM, the document object model.
We won't talk too much about it.
And more specifically, this is the implementation of the DOM in code.
It's illustrating that.
I can type in h1 again, and I can say, for example--
we have a special guest.
I can say Tom Ballatore in H1 and bring this over here and refresh.
And aptly done timing wise, we have a guest
named Tom Ballatore joining us today.
Hey, Tom, how you doing?
TOM BALLATORE: Pretty good.
I'm here in the capacity of the pompadour measurer.
So we're going to see--
oh, the lights are there.
But let's--
COLTON OGDEN: Oh my goodness.
This is--
TOM BALLATORE: Let's see here.
This is about four, five, maybe six inches.
Well done.
COLTON OGDEN: Diagonally, though.
TOM BALLATORE: Well, I was kind of going with the hair like up to the side.
But that is a pomp with some circumstance.
COLTON OGDEN: That is Tom Ballatore, ladies and gentlemen.
So, Tom, you've done some web development and stuff.
You're here to talk about--
we're right now kind of still in the basic stuff.
But eventually, the goal is going to talk about accessibility stuff,
correct?
TOM BALLATORE: Yes, absolutely.
I see my name on the screen.
Cool.
COLTON OGDEN: I did.
I just wrote your name--
TOM BALLATORE: Am I famous?
COLTON OGDEN: Yeah, a little bit.
I wrote in H1.
And actually, I can probably get you miked up-- so
just that you don't sound quiet.
TOM BALLATORE: Yeah.
COLTON OGDEN: So why don't we do that actually?
Apology, stream.
This is going to be great.
We have two folks here in the stream.
If anybody has any questions-- if, actually, you
want to read off some of this stuff on the chat there,
definitely go ahead and do so.
And actually, why don't you talk about your relationship to CS50?
TOM BALLATORE: My relationship with CS50 is complicated.
No.
I started, what, about three years ago.
I took CS50 in the extension school version.
And I just really liked it.
And one of the reasons I liked is they had a DJ.
COLTON OGDEN: Oh, man.
TOM BALLATORE: Yeah.
And he had this like--
what's that pad, like, with the eight thing--
COLTON OGDEN: That was the launch pad.
That was the launch pad.
TOM BALLATORE: The launch pad.
And there's this, like, young guy up there like doing cool music and stuff.
I thought like, oh, this is cool.
Because before that, I had taken like an MIT course
in Python, which was really cool but a bit dry.
OK, a bit dry perhaps.
And I thought, oh, yeah, CS50's got a really cool vibe.
So How am I sounding here?
COLTON OGDEN: Let's test.
Let's test.
So I'm going to turn my mic out.
Let's see if Tom is still audible.
Go ahead and speak.
TOM BALLATORE: Yeah.
We OK?
COLTON OGDEN: No, not great, it sounds like.
Let me make sure you're not muted.
Here, let me see your mic.
TOM BALLATORE: All righty, all righty.
COLTON OGDEN: Are you muted?
You are muted.
TOM BALLATORE: OK, unmuted.
COLTON OGDEN: Yeah.
TOM BALLATORE: How am I doing now?
COLTON OGDEN: Try it now.
Talk.
TOM BALLATORE: OK.
I'm talking.
COLTON OGDEN: OK, cool.
It sounds like you're good to go.
You probably sound much better now.
TOM BALLATORE: Yeah, thanks.
COLTON OGDEN: I'm going go ahead and close this door here as well just--
TOM BALLATORE: Oh, sorry, I left the door open.
COLTON OGDEN: No, it's all good.
TOM BALLATORE: Yeah, so I got into CS50.
I actually already, like, have like a PhD in remote sensing,
GIS mapping stuff.
But I got into this computer stuff because I
want to learn Python for the software I use and CS50.
And it's kind of like a trick in a sense of,
like, you get these really hard psets-- at least for me they're hard.
And then you fight through them.
You pull a couple all nighters maybe.
And when you nail a problem, it's like that endorphin, whatever it is,
that gives you that rush of like yes--
or serotonin.
I don't know what it is.
It's really a great feeling.
Yeah.
So I just got hooked on it.
Now I'm a teaching fellow.
I'm here for the j term, the January course at the law school.
I'm helping TF a course over there.
And I just got back from a Python tutorial over there.
COLTON OGDEN: And you also live in Japan.
Is that correct?
Did you mention it?
TOM BALLATORE: Yeah.
Yeah, I have been in Japan like 24 years.
My official address for accounting purposes of Harvard University,
according some new rules, is definitely my US address.
So I am in America.
But yes, I am--
I've been in Japan a long time.
COLTON OGDEN: What was the original reason for moving to Japan, I guess?
TOM BALLATORE: Oh, man, that's liked yeah.
I'm so old.
I'm 48.
OK?
So, like, I was back-- like back when Japan was like China now,
and everybody was like trying to take over.
And they had some programs in my university.
I have undergrad in political science and environmental engineering.
So for poli sci, I had to take a language.
I took three semesters of German, and, woo, that was hard, man.
So I went to Japanese, which was conversely, like,
so hard it was easier.
And I just went, and I did my PhD there, and I stayed.
So it's an interesting place.
COLTON OGDEN: Man of mystery.
TOM BALLATORE: I like to-- yeah, yeah.
Not so much.
Yes.
OK, cool.
COLTON OGDEN: But you've done some web stuff.
And so today, when we get to--
I guess after we've covered the basics, the goal
is to talk about a little bit accessibility.
TOM BALLATORE: Yeah, this is an issue that has come up.
So yeah, I forgot to mention this.
Like, I'm actually a student in extension now, Harvard Extension
School.
And I'm almost done with my degree, I hope.
I don't know.
I've got like nine classes done.
It's in digital media design because I want to make online courses.
One thing I should be doing, if anyone from Asian Development Bank
is watching right now, I promise I'll have the system up by next Tuesday
morning.
We have a class which we're launching.
It's got like 736 people now in it.
COLTON OGDEN: Wow.
TOM BALLATORE: And I'm running the back end, front end, and all that stuff.
And it makes me really nervous because it's beyond my scope.
COLTON OGDEN: No, you're going to do great.
You're going to do great.
TOM BALLATORE: Well, we'll see.
So that's what I'm in that program.
COLTON OGDEN: Cool, that's awesome.
TOM BALLATORE: So I have some HTML, some CSS stuff.
And I like to talk about accessibility because as someone who's colorblind
and who's also getting eyes that really has a hard time
reading what's in front of me--
COLTON OGDEN: I didn't realize you were color blind.
Actually, Nick Wong, who's done some streams with us previously,
is also color blind.
TOM BALLATORE: Yeah.
I'm one of the sort of minor red, greenish color blind guys.
So it's not like I see black and white.
But yeah.
Definitely.
And I've also worked with other students who just are legally blind or something
who cannot see the screen.
And a lot of stuff is out there to make the HTML readable.
I think Colton spent--
I was eavesdropping about 20 minutes ago on this.
That's why I did the pompadour thing.
But talking about the tags you can add or attributes
you can add to tags, like alt text and stuff,
you can go so far to help out people who can't see
a screen by putting in proper alt tags.
It's really simple.
So we'll go through that a little bit next.
COLTON OGDEN: Yeah, we'll talk about that.
We're still getting into--
we just talked about the Developer Tool.
So I popped up Chrome, and we looked-- you can see here in the Elements--
or Elements tab of the Developer Tools, we
can see what we've already written in text
Google formats it for us in a particular way, a uniform way.
We can see all the things that are in the head.
We can see all things that are in the body.
And thus far, the only actual elements that we really
talked about, I guess the meat and potatoes of HTML, the actual things
that-- the content we've looked at is h tags.
So we have a little bit of a ways to go.
But that's an important first step, I think,
in actually getting your tools set up, your environment.
You want a text editor.
You want something like VS Code or Atom or Sublime Text.
Any text editor will do, but these are like the modern technologies,
the modern tools.
What's your text editor of choice?
TOM BALLATORE: I like Atom or Sublime.
COLTON OGDEN: OK.
Cool, cool.
TOM BALLATORE: Or the CS50 IDE.
COLTON OGDEN: Yeah, CS50 IDE as well is an incredible tool--
lets you have sort of a Ubuntu infrastructure
to mess around with, too, and get used to that environment
if you're coming from PC or coming from Windows.
But yeah, this is one of the big things.
You need a text editor.
You'll need Chrome.
And with just those tools, you can really
get started working on HTML documents now.
I'll read a couple of questions in the chat,
and then we'll proceed with the next few topics.
We'll talk about paragraphs, which are also an important thing to look at.
"Got to go soon, but I've been doing CS50 week 1."
StayPeaceful, good to have you.
Thanks for coming.
"I use Atom as well," says Jacquotts.
"In my opinion, the best one for web development."
I used to use Atom as well.
It's a great, great text editor.
"Will topics like Django or React be covered in the CS50 course, not
the current stream?"
The CS50 course-- probably not Django, probably not React.
We'll certainly cover Flask, which is a micro framework, a bit smaller scale--
gives you more limited features, but it's
a little bit easier to bootstrap students who have no prior back end web
development.
But probably not React and Django for CS50 core.
However, there is a web.cs50.org if anybody wants to go and check that out.
So web.cs50.-- wait, sorry.
I think I have this wrong.
TOM BALLATORE: That's the one Brian teaches?
COLTON OGDEN: Yeah, web.cs50.edx.org.
Is that it?
No, no, sorry.
cs50.edx.org/web.
I had that mixed up.
So go to-- one more time--
cs50.edx.org/web.
And this website is Brian Yu's--
often here in the chat actually with us.
It's a Python and JavaScript course that he taught.
And this course does use quite a bit of Django and then cs50.org/mobile teaches
React.
And so you can get-- if you take both courses,
you can get kind of an encompassing view of that side of the web development
landscape.
And in prior-- sorry, in future streams, we'll
definite take a look at things like Django, things like React
in more detail.
And we did a stream with Brian on the basics of React.
So there's definitely some resources out there, and we'll go more into detail
in the future.
"Can you explain what the HTTP equiv is and how it works?
Tried to figure it out now on my own, and it
seems it has multiple applications."
So let's go ahead--
do you know offhand what that is?
TOM BALLATORE: Equiv of what?
COLTON OGDEN: I believe it's a meta attribute in--
HTTP equiv.
Let's go over here.
It's a meta attribute.
TOM BALLATORE: Oh.
OK.
COLTON OGDEN: HTTP equiv.
So this isn't something that I use very often.
But this is also a great opportunity for us
to showcase w3schools.com, which you can look up
pretty much anything related to HTML, to CSS, and even to JavaScript.
They cover a lot of the basics.
And also MDN, the Mozilla Developer Network, is a great resource.
Go to developer.mozilla.org.
You can type in-- let's type in HTTP equiv and see if that comes up.
TOM BALLATORE: This one tends to be not as user friendly, right?
It's got great information, though.
COLTON OGDEN: More information, but less ease of access.
But we can see here we can go to meta tag,
and then I think we can go to equi, right?
Yeah.
So permitted parents-- meta charset, meta http-equiv, a head element.
If the http-equiv is not an encoding declaration.
So a lot of this stuff is a little bit more niche and more--
it's not really as pertinent what you're seeing--
the body of what you're seeing.
It's more like metadata associated with the document that does something.
For example, the prior page says that you can use this to refresh
the document every 30 seconds by saying http-equiv="refresh",
the string refresh.
And then give it another tag that says content="30".
So that's a particular use case.
Not something that I'm super familiar with.
But we can look at the documents here and see probably
a lot of the different ways you could use it-- content type, default style,
refresh.
Those look like the three main use cases for it.
Define a time interval for the document refresh itself.
Specify the preferred style sheet to use.
Specify the character encoding for the document.
And this is, I think, where I see it a little bit more
frequently is the content type, just giving it more information.
I'm not sure offhand the best use cases for it.
But the deeper you dive into it, I'm sure you'll find a reason for it.
So trying to get away from maybe some of the more lower level niche use cases,
we can go into--
and this is something that just it'll provide to you by default
because I guess this is a maximum support compatibility feature.
Let's go into more of the actual content.
So we covered h tag, so headings-- so things
that allow us to specify I guess how pronounced maybe something is
if we add a title to our blog or maybe an individual post has a subtitle.
Maybe that'll be like an h3 or something.
It's kind of up to you.
And, again, you can style these as you wish in the future.
But the actual content in which you're going to post a lot of text information
is probably going to be in something like a p tag, a paragraph tag.
Not necessarily, but this is a tag that's
used very frequently for larger blocks of text information.
TOM BALLATORE: About the h tag thing, I was surprised a couple of weeks ago
running a web page I had through some accessibility checker--
and we'll talk about that--
like, I skipped h2 tags because I just didn't
like the way they were formatted out of the box.
I wanted like an h3 tag.
And it's like, dude, you don't have an h2 tag, and that's like not good.
Apparently just for the semantics of the document, if you have an h1,
you have to have an h2 before you have an h3.
COLTON OGDEN: So I guess they assume a hierarchical use of the headings.
TOM BALLATORE: Absolutely.
COLTON OGDEN: OK.
TOM BALLATORE: Yeah, so you shouldn't be skipping.
COLTON OGDEN: That makes sense.
That actually makes sense.
TOM BALLATORE: Yeah.
COLTON OGDEN: That's a good point to bring up, too.
And you certainly have a lot of insight, and that's a really interesting--
sorry, just reading.
"My favorite resource, w3schools."
Yeah, definitely a great resource.
And then Myaocat saying, "Another Mac."
And I think somebody else mentioned up earlier--
made a reference to how Macs look really nice.
I remember where--
TOM BALLATORE: But I can run Windows on it.
The main software I use, it's called ArcGIS,
and it only runs on Windows, so.
COLTON OGDEN: Do you have VMware?
TOM BALLATORE: I use Parallels.
I used to use VMware, but, yeah, it's--
COLTON OGDEN: Gotcha.
So let's go ahead, and what I could do is I could say blah, blah, blah, blah
and showcase what this looks like.
And I'm actually going to do that for now.
elorki112048, thank you very much for the follow.
And Thiasus, thank you very much for the follow as well.
Oh, somebody has used ArcGIS or ArcGIS--
TOM BALLATORE: Arc G-I-S.
COLTON OGDEN: Arc G-I-S. OK.
TOM BALLATORE: Although there is debate whether it's "ArcGIS" or not,
but I'm an "Arc G-I-S" guy.
COLTON OGDEN: OK, I got you.
I got you.
I have no familiarity--
TOM BALLATORE: It seems like it doesn't really matter.
We really argue about it.
It just doesn't matter, but yes.
COLTON OGDEN: It's like the--
what's the paint shed-- or the painting the shed argument or whatever?
People spend a disproportion amount of time debating small details.
TOM BALLATORE: Oh, yeah.
COLTON OGDEN: Yeah.
TOM BALLATORE: Just paint the shed.
COLTON OGDEN: It's an amazing-- yeah, just paint the shed.
TOM BALLATORE: Don't worry about the nail sticking out somewhere, yeah.
COLTON OGDEN: OK.
For a crime mapping course.
Very cool, Adamantine.
TOM BALLATORE: Ooh.
COLTON OGDEN: Yeah.
And Myaocat says, "I want a Mac, too."
TOM BALLATORE: And by the way-- somebody asked, "Is Brian in chat now?"
Actually, Brian, we have him locked up under the table.
He's doing our homework for us.
And once he's done, we're going to release him and he'll be in the chat.
No.
Sorry, Brian, if, you're out there.
COLTON OGDEN: No, I don't think Brian is in the chat necessarily today.
But he does pop by every once in a while.
We're trying to get him on another stream, which would be great.
So we can see that I typed in a bunch of stuff in my p tag
here, a paragraph-- short for paragraph.
And it rendered here onto the screen.
I'm going to do that--
I might do a little bit more just so that we can see a wrap.
So I want to see some word wrapping here.
And indeed, it does wrap quite a bit.
And it looks like it wrapped in a weird--
it wrapped on a space.
And that's why it looks sort of like two separate lines.
Actually, there's a space here, and this is so long
that it looks like it wrapped in a weird way or that it's two separate tags.
But paragraph tags are a excellent way to include text.
But drawing text out like that isn't a great way
to illustrate large, actual real world blocks of code--
blocks of text, rather.
And so something that's great-- a lot of people use--
is what's called lorem ipsum text, and this is just basically Latin words
put together in a random way to make text
that looks roughly like what text you would
see in the real world on an actual web page.
So seloner7, thank you so much for follow, and Salihcn.
I'm not sure if I'm pronouncing that right.
Probably not.
Thank you very much for the follow as well.
So I'm going to generate five paragraphs.
And you can see here it just gives you a bunch of text here on the screen.
I'm going to copy this.
I'm going to copy these two here.
Rather, I'm just going to copy one paragraph at a time.
I'm going to copy this, go ahead over here, go into my p tag,
and then copy that.
And then I'm going to do the same thing.
And actually, what I should do is I should enforce wrapping.
So I'm going to toggle word wrap so we can actually see that here.
As a paragraph semantically, it sort of makes sense.
That's a paragraph that we're using.
TOM BALLATORE: Actually, I was making a website once for a client,
and I sent them like a dummy mock-up of the site that
contained this lorem ipsum door metsum thing, and they were really concerned.
They're like, what does this mean?
COLTON OGDEN: Like, is this programming?
TOM BALLATORE: No, no.
COLTON OGDEN: Is this what programming looks like?
TOM BALLATORE: I guess they had never seen it before.
I'm like, oh, yeah that's just place holder text.
That's faux Latin, I guess.
COLTON OGDEN: Yeah, it's faux Latin.
I mean, it's real Latin, but it's put together in a way that's fake.
TOM BALLATORE: So if, like, Caesar were here, he'd be like--
COLTON OGDEN: He'd be like what-- he was like--
it's like somebody saying, "Cat, dog, was, green, elephant, works."
TOM BALLATORE: OK.
COLTON OGDEN: Just random words and conjugations of stuff.
TOM BALLATORE: Cool.
Integer's in there.
I just saw integer.
COLTON OGDEN: Integer's a Latin word.
TOM BALLATORE: No.
COLTON OGDEN: I'm not 100% sure what it means.
Integer, Latin for--
TOM BALLATORE: Latin for whole number.
COLTON OGDEN: Intact or whole, right?
Because whole numbers.
Integer, the whole number.
TOM BALLATORE: Dude.
That's so cool.
COLTON OGDEN: It's a TIL on stream.
Integer is Latin for whole.
I actually didn't know that either.
"Site is the entirely in English for me.
Perhaps edX has auto-translated for you based on your location.
In any event, the course is in English."
OMGBUSTA-- "A number."
"When you click on the Enroll button to sign up, it's not an English?
Is the course in English?"
Oh, I'm actually not sure.
But to Brenda's point, I mean, it's definitely in English.
I'm not sure if your browser settings are set such that they are different.
TOM BALLATORE: Wait, is that CuriousKiwi the CuriousKiwi I know?
COLTON OGDEN: Yep, that's the CuriousKiki that you know.
TOM BALLATORE: Brenda.
COLTON OGDEN: Yep.
TOM BALLATORE: What's up?
Is Glenn out there, too?
OK.
So I dunno if you ever take like CS50 or the edX version-- hey.
Oh my gosh.
Oh, so we're actually interacting.
There are people who man the discussion boards.
And Brenda is just like the boss.
COLTON OGDEN: Yeah.
Brenda's all over the place.
TOM BALLATORE: I mean, just incredible replies all the time.
OK.
COLTON OGDEN: Monge1h, thank you very much for the follow.
OMGBUSTA-- "From the UK.'
That's interesting.
Then I'm not so sure why it's in a different language.
"Have you used require_once for including the headers in an init file?"
Oh, it's talking about--
to somebody else, OK, in the chat.
"Can you make HTML modular so you don't have
to repeat the footer and the header?
I've always had this problem when making websites.
Something that's on the client side.
I know PHP includes."
Raw HTML, not as much.
But for templating engines--
Jinja, which we use with Flask and for many other--
like, for example, what's it called?
I think it's handlebars that's used for node but other ones.
Jade is a good one.
There are a lot of these features that are a higher level that
are things that a parser looks at and bundles it altogether and then sends it
to your web browser.
But raw HTML needs to be in one document.
"You can render subsections of HTML pages," says Andre.
"Don't you know Latin," says Bhavik.
Unfortunately, I do not.
TOM BALLATORE: Pluribus unum.
COLTON OGDEN: Pluribus unum.
I'm actually not sure--
TOM BALLATORE: I don't know what it means.
COLTON OGDEN: Something one.
TOM BALLATORE: E pluribus unum.
Sorry.
COLTON OGDEN: But yeah.
We have two paragraphs.
Did I copy them over successfully?
I think I did.
I'm going to go over here, go back to our tab, refresh.
And you'll notice an interesting thing about paragraphs.
And this actually ties back to what we looked at with headers.
And that's that paragraphs, like headers, are block level elements
and that they basically exist on a new line in their own block, so to speak,
that spans the entire width of the web page.
And this is referring to non-styled blocks.
You can style blocks to take up percentages of the web page with CSS.
But when you just use block level elements as is,
they take up the entire width of the page.
So yeah, that's a cool thing.
Paragraph tags, even if they are right after each other,
even if we were to put, say, this paragraph tag over here and immediately
start all of this text on this line, they're still going to have a space.
And I can demonstrate this.
I can put this like that, right?
There's no new line at all, no new line in our actual text file.
And even to further illustrate this, I'll do that.
So it immediately goes right into the next paragraph.
But if I save it and refresh the page, nothing changed whatsoever.
So our actual text file is not related whatsoever to the styling of the HTML.
TOM BALLATORE: Question.
So HTML ignores spaces, right?
COLTON OGDEN: Yep.
TOM BALLATORE: But it doesn't ignore space between words
because that would really be awful.
COLTON OGDEN: Yep.
TOM BALLATORE: Because all the words would running together.
COLTON OGDEN: Yep.
TOM BALLATORE: What if you put just a single space between those?
Would it actually be rendered?
Or does it realize it's just--
we wouldn't even be able to see it, though, right?
COLTON OGDEN: Yep.
We wouldn't be able to see.
It's not within a tag.
So I guess because it has no semantic meaning--
I mean, I think text does, but spaces do not.
TOM BALLATORE: OK.
COLTON OGDEN: So text itself.
So if we were to type Colton, it's between the paragraphs,
and it should still render it.
But it still, for some reason, spaces because it's
part of the parsing of the document.
It doesn't actually render the space.
It just renders-- now what you can do is you can
use an HTML escape character for it.
And I don't remember offhand what it is.
I think it's that.
TOM BALLATORE: Oh, yeah.
Breaking space.
COLTON OGDEN: And I'm not 100% sure if that's correct.
No, that's not correct.
TOM BALLATORE: N-B-S-P?
COLTON OGDEN: It's some other--
let's see.
HTML escape char space.
Which characters need to be skipped in HTML?
We have a representation.
TOM BALLATORE: Nah.
COLTON OGDEN: Trying to see if it has the space.
It does not have the space.
HTML escape characters are important, and it's something
that you also need when you're, for example, encoding a URL because you
can't have a space in your URL.
For example, if I want to go to the www.--
TOM BALLATORE: The one I said about a minute ago.
COLTON OGDEN: Oh, nbsp.
OK.
Nice, nice.
Well done.
TOM BALLATORE: Thank you.
COLTON OGDEN: nbsp.
Oh, and also another thing that's cool--
VS Code actually colors it.
So we--
TOM BALLATORE: It knows, yeah.
COLTON OGDEN: Contextually, it knows.
Let's go back here.
TOM BALLATORE: By the way, what are you using?
COLTON OGDEN: Do that, and there is, indeed-- it's hard to see it,
but there's a space in front of my C. What am I using, the text editor?
TOM BALLATORE: Yeah.
COLTON OGDEN: VS Code.
TOM BALLATORE: Oh, OK, cool.
COLTON OGDEN: So it's very similar to Atom.
It's kind of slightly newer than Atom.
But it's default by Microsoft, actually.
Completely free.
Super well-- actively developed.
They have a massive team of people that are constantly developing it.
So it's great.
TOM BALLATORE: Just to render text.
COLTON OGDEN: Yes, just to render text.
TOM BALLATORE: OK.
COLTON OGDEN: And what was I going to say?
I was going to make a point about it.
TOM BALLATORE: Obviously, it's more than just rendering text.
COLTON OGDEN: A little bit less memory intensive than Atom is, which is nice.
TOM BALLATORE: Atom, yeah.
COLTON OGDEN: Atom uses a ton of memory because it's effectively
a virtual browser rendering a bunch of text.
VS Code is as well, but they, somehow or other,
have mitigated a little bit of that memory usage.
Are HTML tags case sensitive?
Let's try it out and find out.
So let's go ahead and type a P here and a P here.
And if I go back here, translate this page-- nope.
Not translate it.
Render it.
It seems that it is case sensitive, right?
Oh, nope, it's not case sensitive.
Sorry, I thought--
I deleted my name.
It is not case sensitive.
So P-- and we saw this earlier actually when we made DOCTYPE lower case.
TOM BALLATORE: DOCTYPE versus doctype.
COLTON OGDEN: Yeah.
There is no case sensitivity.
It's conventional to use lowercase letters over uppercase characters
probably because it's just easier to type them out.
But indeed--
TOM BALLATORE: What's up with that?
Like, some people use the all caps for DOCTYPE.
And I just like the small one.
And sometimes, we'll format it with all caps, even after you're done.
COLTON OGDEN: I'm not sure.
And, you know, I think habitually I use uppercase DOCTYPE.
But lowercase would be semantically or syntactically more consistent
with the way that we use all the other tags, which are all lower case, right?
TOM BALLATORE: Yeah.
So maybe it's like it's a special tag.
COLTON OGDEN: I guess maybe it is kind of special
because it's the very first big tag, and it's saying, oh, DOCTYPE.
TOM BALLATORE: Is it even a tag technically?
COLTON OGDEN: Is it even a tag?
TOM BALLATORE: Is it a declaration, an incantation perhaps?
COLTON OGDEN: Because this exclamation point might be--
well, technically, it is a tag.
But I'm not sure whether it's necessarily the DOCTYPE
or whether it's the exclamation point as a special definition tab or something.
We can see-- doctype, tag type.
TOM BALLATORE: For those of you who might've been around before HTML5,
these incantations that came before were just awful, remember?
Like, the XHTML and just long things you had to copy and paste.
COLTON OGDEN: Interesting.
It is not an HTML tag as per W3Schools.
So it is instruction to the web browser about what version of HTML
the page is written.
In this case, it's--
well, I guess it says-- wait, no, no, no.
Refers to a DTD--
rules for markup language.
So it's HTML5.
TOM BALLATORE: All right.
COLTON OGDEN: Oh, right.
OK.
So I'm trying to see what the HTML4 one was because--
TOM BALLATORE: Oh, yeah, there it is.
COLTON OGDEN: Here's the HTML4 one.
So much longer, much less elegant than the HTML5 doctype declaration,
I would say.
But no, it's not technically-- now I guess syntactically,
I guess it is a tag, but it's not technically a tag.
TOM BALLATORE: Cool.
COLTON OGDEN: It doesn't have a close.
It doesn't have content that it refers to.
It's just something the browser is looking for as it's passing, I guess.
It's saying analyze these bytes if they equal this sort of thing.
TOM BALLATORE: You know, I never tried it, but what if you don't put that in?
Does it default your browser to HTML5?
COLTON OGDEN: So my understanding is that it does.
So if we do this and then I save, Chrome should, by default, just
render it the exact same.
So actually, it rendered it slightly differently.
TOM BALLATORE: Interesting, yeah.
The default CSS that comes with it, with HTML5 I guess doesn't--
[INAUDIBLE] not really HTML5.
COLTON OGDEN: That's fascinating.
I haven't looked too into detail on the differences there.
TOM BALLATORE: We will put that on our list of things--
COLTON OGDEN: There is a slight bit of spacing
at the very top in the situation that you don't include the doctype there.
TOM BALLATORE: Cool.
COLTON OGDEN: So beyond just the, I guess, semantic value of it,
there is a little bit of style associated with it.
TOM BALLATORE: I'm reading the comments.
"Ducktype," that's funny.
COLTON OGDEN: "I used to code emails in HTML tables."
Ooh.
Man, that must have been terrible.
Yeah, HTML4 doctypes were annoying.
Remember the metadata.
Post to get requests.
If your file is doctype HTML, it will be HTML page for the browser.
Yep.
"I once had to write code for email template, and it was so painful."
I'm guessing-- Oh, HTML, I'm guessing.
"I'm interested web dev, so watching the stream to get educated.
Thanks for this."
Absolutely, Myaocat.
Thanks for tuning in.
Jabkochason says, "I saw this livestream where
users were able to format the chat with style tags on one guy's channel."
Interesting.
I'll have to take a look at that.
If you can link the stream or the VOD, I'd be curious to see what that is.
We might be able to integrate something like that.
"I think it's good standards to keep the lower case, no?"
Yeah, definitely.
I would say definitely good standards.
I have never seen anybody in real world use case
use capitalized tags for the body.
I mean, for the doctype, yeah.
I think that's common.
TOM BALLATORE: It would be like shouting, right?
COLTON OGDEN: Yeah.
But I think the doctype, even in CS50, I think we use the lower case doctype--
I think David has in lecture.
I'm not 100% sure.
I don't speak on behalf of what David's done offhand.
Oops, I accidentally turned on my space heater here.
Going to turn that off.
I think I definitely like the look of it,
but I think from a standard's point of view,
it makes more sense to see in caps I guess.
I don't know.
TOM BALLATORE: I don't know.
I mean, they're in the tag, so I don't know.
SQL, that comes up quite a bit.
Do you ever have a SQL stream, like where you'll have SELECT star from?
In SQL, I really like to see caps just because that's what I'm used to.
COLTON OGDEN: Because that's what you're used to.
TOM BALLATORE: But you don't need it, apparently.
COLTON OGDEN: You can do it in lowercase, yeah.
TOM BALLATORE: Yeah, HTML--
COLTON OGDEN: David and I did a SQL stream actually a while ago.
That was like two months ago.
But we did.
We covered the basics of it.
I think we used caps, though.
TOM BALLATORE: I was hoping we were doing the Pokémon--
or not the Pokémon--
the Pac-Man or the Donkey Kong or something today.
But this is cool, too.
But I do like games.
COLTON OGDEN: This is a little bit tamer than that.
Thanks, eMaDDen and mewell for following, and Catalsy--
I'm not sure-- and KeeRoll.
I'm not sure if I caught any of those, actually.
I apologize.
TOM BALLATORE: Oh, yeah.
COLTON OGDEN: I think I've missed a few.
Yeah.
TOM BALLATORE: Somebody was talking about coding
like with frame-- or tables.
COLTON OGDEN: Oh, yeah.
TOM BALLATORE: I just took a course, and it was a CSS course.
And our final project is we had to, like,
do all this formatting in or using floats.
I don't know if you've ever-- we're not talking about CSS today,
but it's kind of like that tabley sort of hack to give things a layout.
And then we were given the privilege of using grid and flex afterwards.
COLTON OGDEN: Oh, and flexbox?
Yeah.
TOM BALLATORE: It was so much nicer.
Floats just boo.
COLTON OGDEN: Yeah.
We'll probably cover that actually in our CSS stream, floats.
But then I do want to cover flexbox and other things, more modern styling
conventions as well.
TOM BALLATORE: Cool.
COLTON OGDEN: "Isn't it just related to the comment that's meant to be"--
it's not the same thing as a comment, Bhavik.
But you can maybe lump them into a parsing sort of category.
The browser is looking for that sort of exclamation point
and doing some behavior depending on what's in that tag.
If it's a comment with dash-dash, then it's going to ignore it.
But if it's doctype, if it sees doctype, then it knows to parse the rest of it
as HTML.
Cool.
All right.
So I apologize if I'm not hitting every single comment.
So h1prevet, thank you for joining.
But let's get into, I think, some more of the actual content of the HTML
because we have a long ways to go still.
Let's take a look at some crude basic styling.
So now, we have our p tags here, our paragraph tags.
And actually, the-- wait.
I thought I had this styled a little bit differently,
but it looks like I might have screwed it up.
Oh, no, I didn't.
I just need to do that.
So we have our paragraph tags.
One's capitalized to illustrate that you can capitalize tags.
But let's just say don't do that.
TOM BALLATORE: Feels weird, yeah.
COLTON OGDEN: And keep them all lowercased.
And someone asked if we could point out more conventions during the course
or during the stream.
I'll try.
If I can think of any off the top of my head, I'll definitely do some.
I know we have alt. That's a convention for accessibility.
TOM BALLATORE: I think one thing that maybe we
can talk about later once we make this page is to run it through a validator.
COLTON OGDEN: Oh, sure.
TOM BALLATORE: Because that would enforce, well,
the convention of have you actually done the HTML tags correctly.
And I highly recommend that because it's so easy
to miss closing a tag or something or doing something illegal.
COLTON OGDEN: We pointed to earlier the fact
that modern text editors-- and this is a luxury we get now.
But this hasn't always necessarily been the case.
You can type something like h1, for example, in VS Code or even in Atom,
and it'll just close it for you, which kind of mitigates that issue.
But that's not to say that you're immune from the issue
because you can easily come out over here
and say, oh, I want to write some content here instead, and then
forget to close the h1 because overwrote what the text editor's trying
to do to help you out, I guess.
TOM BALLATORE: One of the things I always
run into-- trouble with HTML is it's not like you're running Python,
where you might run your program and get errors in your terminal.
Here, it's like, it just goes.
COLTON OGDEN: Exactly.
It's going to keep rendering until it reaches the end of the HTML file.
There is no browser error.
Because to make things user friendly for users,
they don't want error messages popping up saying, oh, your HTML is invalid,
right?
It's going to try its best to render it.
You make it console errors for JavaScript,
but those are hidden from the user.
The user's not going to see what those are,
and we're not going to cover JavaScript today.
TOM BALLATORE: So using a validator is one way of, like, getting feedback
on mistakes you have in your code.
COLTON OGDEN: At least knowing that you haven't screwed something simple up.
You might have screwed up your own styling
as a result of CSS being messed up.
But that's a whole separate ballpark.
"Colton, how'd you get around solving a CS problem where you were stuck
for a long time?
Sorry for the off-topic question, but I'm
going through that phase, which also is leading to procrastination,"
says Ashfaqseyad.
It comes along with practice.
The more problems you solve, the more instinct
you get in terms of like what could be going wrong.
And it really-- this is such a general thing to look at, too,
and there's so many different kinds of problems.
First thing that I like to typically do--
and definitely share your thoughts on this as well--
is insert print statements into my code and look at variables.
And if I have a debugger, use the debugger
as well to see what my variables are.
And if you have a frame by frame debugger
or, rather, cycle by cycle debugger, analyze every single step,
every instruction in your program to see if variables are changing in the way
that you expect.
But the more visually you can make your program give you feedback
and tell you that your variables are equaling the correct values
at the right time, the more you can narrow down
where things are going wrong.
Because a lot of the time, it just ends up
being something is getting assigned the wrong value.
TOM BALLATORE: Yep.
COLTON OGDEN: Right.
TOM BALLATORE: Yeah, I mean, the print statement is--
I love print statements.
If you do have a debugger that you can run,
like if you're running the CS50 IDE, you can step through your code
and see things that are happening, variables how they're changing.
That's awesome, too.
But I just go to a print statement right away.
COLTON OGDEN: Yeah.
TOM BALLATORE: But we were just having the Python a little workshop
for the lawyers course, and it was funny.
Like, somebody gets a syntax error, and, like,
it's giving you an error on a line.
And because I've seen this so many times,
my first thought was like, what's going on the line above there?
And they had missed like a parentheses in kind of a long line.
And it's very easy to miss those.
But I think watching David in lecture, like, he'll come across something.
And maybe you'll get a syntax error because he's just coding it live.
The thing that is really impressive is, like, he'll--
you can imagine going through the catalog of things he's seen before.
And within a few seconds, usually, he's just like, oh, yeah, I forgot this.
And that's really cool.
I mean, you're like that with this stuff, too.
But I'm like, yeah.
I want to be like that someday.
COLTON OGDEN: I think you brought up a very good point--
looking at not necessarily to where you think the problem is maybe.
Maybe your error is happening at a print statement, saying,
"result equals something," and it's the wrong value.
Or it's breaking at some line.
But usually the problem is higher than where
you think the problem might be instinctively at a first glance.
So looking up above rather than spending too much time at the exact problem
or below the problem, that's definitely, I
think, great intuition, a great way to-- a good heuristic
to follow to at least solve programming problems.
"C was a nightmare.
I didn't even watch all five weeks of C in CS50," says Jabkochason.
Yeah.
It's a bit more work.
But, I mean, that's the foundation of all modern software, right?
TOM BALLATORE: I'm totally like I know that feeling, right?
Because like I had studied Python before I took CS50, right?
And I mean, Python makes it pretty easy frankly to do stuff,
like just operations on a string, let's say, right?
C's all right.
And for the first few weeks, I was like, you gotta be kidding me.
Is this broken?
But the really cool thing-- like, if you do work through
and if you do make it through the C stuff,
you might have seen the lecture where-- well, is it pset 4 or 5
where we do speller, the spell checker?
COLTON OGDEN: Is it 5, I think?
TOM BALLATORE: In fall 2008, it became 4.
But it's probably 5 in the online course, the current online--
COLTON OGDEN: That is correct.
TOM BALLATORE: And, like, it feels really good to get it done.
But you probably get like 150 or 200 lines of code in C
that you've written, right?
And then David has this moment in lecture when he's introducing Python,
and he just basically, just from scratch, writes 20 lines of Python code
that implements speller, right?
COLTON OGDEN: We did that on stream, too.
TOM BALLATORE: He did it on stream.
OK, yeah.
So then you've seen this before if you attended then.
And it's like, I mean, Sanders--
at least they're all like, whoa, yo, and also groaning
that they had to go through all the stuff.
But-- and maybe you do this, too-- if you actually run the code,
the C's faster.
OK, so there are reasons that--
yeah, I know it's like not as easy.
So it might seem like a nightmare.
But pedagogically, there are reasons you're
starting with C. So just hang in there.
That's all I can say.
There's a lot of support out there--
the forums, everything-- that you can definitely get
help to make it through there.
And it's worth the struggle.
COLTON OGDEN: Illustration of pros and cons
as applies to, I mean, in this case, two different domains of programming
altogether.
But it can extrapolate that to Python versus Ruby, which may
have very similar runtime performance.
Different languages have different pros and cons.
And maybe there's a way to do something in Python that's very easy,
but in Ruby, it's not as easy.
And Ruby might have a syntax that makes something that would take a lot of work
in Python a quite a bit easier in Ruby.
TOM BALLATORE: Absolutely.
COLTON OGDEN: Pros and cons is universal, and particularly
illustrated between a low level and a high level programming language.
Layers of abstraction really kind of disappearing at that point.
OK.
So we have two paragraph tags here.
And I apologize, again, if I missed some comments here.
But let me just take a brief look.
Let me make sure I'm not missing any questions.
Ashfaqseyad, no problem whatsoever.
Everybody's kind of saying, yep, pset 4 now in edX.
[TOM LAUGHS]
TOM BALLATORE: We don't have a moderator here.
So just ignore some of the comments.
COLTON OGDEN: Yeah.
"Why are there two versions-- maybe there is more-- about CS50
the introduction to web dev?"
CS50--
TOM BALLATORE: Oh.
COLTON OGDEN: Two versions.
TOM BALLATORE: I think what they're saying is like they're branded as CS50.
But there's like the CS50, then there's the web dev, then the JavaScript.
COLTON OGDEN: Sure.
Yeah.
TOM BALLATORE: There's the game development,
which you probably know about.
COLTON OGDEN: Yeah, those are sort of spin courses
that specialize more in a particular domain.
For example, my course is a games course.
Brian taught a web course, and Jordan taught a mobile/React Native course.
And those are all meant to do a deeper dive on topics
we just don't have time to cover CS50.
Because programming, the world of programming, is--
to say it's massive is an understatement.
There's just way too many technologies, way too many languages,
ways of thinking, ways of solving problems.
And you can spend years just going down one rabbit hole.
And we just don't have the time to cover that.
But we do have many folks who have different skill sets who like to teach
and who want to provide more of the CS50 spirit in terms of other courses.
And so that's the reason we have all those other courses.
All right.
Let's go ahead and now talk not about paragraphs,
but let's use the paragraphs we have to talk about things related to the very
rudimentary styling of elements.
diedie92, thank you very much for the follow.
So the two tags, really, that I want to focus on for this for now
are the em tags.
So I'm going to go ahead and do that.
em for emphasis, right?
And this is something that is very similar to, say, Microsoft Word,
where you might want to emphasize a given word in a sentence.
You want to italicized it.
TOM BALLATORE: Yeah, what's the old school
way of doing this, the non-right way of doing this in HTML, anybody in chat?
Like, the em tag is the semantically correct tag.
Well, what's the wrong way of doing this?
Anybody?
COLTON OGDEN: It takes a few minutes.
And actually, offhand, I might not even know the answer immediately
because I know i tags are now used as icons.
TOM BALLATORE: It change, right?
It would be like the italics tag, which used to be used.
So you'll see that popping up sometimes, when people, like, still
have i tags when they don't mean--
it's not what they think it means anymore.
But it used to be i, right?
And the same thing with the bold, right?
COLTON OGDEN: OK, so i does still define italic text.
But it's now also icons, right?
That's what the current i is?
TOM BALLATORE: I think it's something.
COLTON OGDEN: Just so I'm not going crazy.
HTML i tag.
TOM BALLATORE: It's got to be deprecated for the use
that I was just referring to.
And the same thing with bold, which we're probably going to talk about.
COLTON OGDEN: Yeah, that's interesting.
TOM BALLATORE: No, bold would be--
does anybody know what bold is?
COLTON OGDEN: I guess maybe people use it as i
and they override the CSS to not be-- because all it is just font styling
italic, and they just use it as icon rendering.
TOM BALLATORE: Strong, that's right.
COLTON OGDEN: Strong.
Yeah, strong is for bold text.
TOM BALLATORE: Yeah.
And I mean, from an accessibility perspective,
when you say bold, what you mean is, like, fat font on a screen.
But when you say strong, you mean bold, right?
But, like, you're strengthening it.
And same thing with you're emphasizing something by italicizing it.
COLTON OGDEN: The two have a semantic similarity.
But ultimately, it comes down to your taste,
the way you want to get a point across, I guess.
But we can see here, if I put this consectetur
word in em tags, emphasis tags--
another fancy way of saying italicized text, italicized tags--
and I refresh the page, we can indeed see that the text over here--
and it keeps asking me if I want to translate, and I don't.
And I'm actually going to get rid of the Developer Tools
and zoom in just a little bit.
This word right here, consectetur, which we just looked at,
is indeed italicized.
And this is just default styling on HTML, raw HTML.
But you can easily define the way that you want em to work in your code.
Perhaps you want the font to get larger.
Perhaps you want the color to change.
Perhaps you wanted to have a different background.
Perhaps you actually want it to get bold and italicized.
All these things are things that you can do with CSS,
which we're not going to look at today.
But that is a way to get some rudimentary styling
in your application.
And another thing, notice that when we use the em tag around this word
consecteur, it didn't add any spacing, first of all.
So it's still preserving the spacing of all of our text.
And it also didn't create a new line.
It actually kept everything in the same line as the paragraph text already was.
Oscuro97, thank you very much for the follow.
And so this illustrates, again, the difference between inline elements,
which is what this is.
Notice you can think of it as it's on the same line.
It's in line with the rest of the text.
Versus block level elements, block level meaning that it creates an entire block
and then spaces down below it when it's finished, right?
And that's what this paragraph text is.
It's a block level element.
The em tag is an inline element.
So it doesn't actually give us a new line.
"What is the difference between italic and oblique?"
says Digicrests.
Oblique, what is--
I actually don't know offhand.
Oblique type that slants slightly to the right, used for the same purpose
as italic type.
Unlike italic type, however, it does not use different glyph shapes.
It uses the same glyphs as roman type, except slanted.
Oh.
TOM BALLATORE: Cool.
COLTON OGDEN: Interesting.
I didn't know that.
That's a TIL for me today.
"Now on, will do so.
Appreciate it."
"No problem."
OK, cool.
And so people in the chat have also made reference to the other tag
we just talked about, which was the strong tag.
So if I say--
if I put, for example, lorem--
TOM BALLATORE: Sorry.
COLTON OGDEN: It's all right.
TOM BALLATORE: I was flexing.
COLTON OGDEN: Lorem in a strong tag, and then I refresh the page,
we can see that, indeed, it does bold our text.
And the words that we typically say are bold and italic in the world of HTML,
emphasized and strong, those are just--
what's the word I'm looking for-- conventions that HTML
has decided to adopt for the way that it represents
this tag, the semantic meaning there, or, I guess,
rather, the syntactic meaning there, not so much the semantic meaning.
We'll look at semantic tags a little bit later.
But those are two that you'll see a lot.
And, again, often, you will not use the exact styling
that you get for raw HTML, but you do get the ability with CSS
to style things custom the way that you would like.
OMGBUSTA, thank you very much for the follow.
Anything you'd like to add to what we just talked about?
It's pretty simple.
TOM BALLATORE: Sounds good.
COLTON OGDEN: OK.
Anybody has any questions so far?
I know this stuff is kind of simple, slow paced where we just
make sure everything is very foundationally built upon so
that future streams make sense.
But yeah.
We covered p tags, paragraph tags, em tags, and strong tags.
Why don't we get into hypertext?
Did you have something you wanted to talk about?
TOM BALLATORE: One thing I was going to say--
and we'll do this maybe as a wrap up.
There's interesting question of the popularity of tags, right?
Because there's some really rare tags that you're never
going to probably use, right?
COLTON OGDEN: Yeah, yeah, yeah.
TOM BALLATORE: And before the stream here, I
was looking up online some of analysis that
has been done on the frequency of tags.
And maybe we can talk about it a little bit later when we're done, but--
COLTON OGDEN: Yeah, that's great.
TOM BALLATORE: You really want to learn the ones that
are used on like 98% of web pages.
COLTON OGDEN: Yep.
And we'll actually cover I think every single one of those today.
Yeah, we're going to cover every single one of these tags.
So that's good to hear.
I feel vindicated for the outline that I set up.
"Why do tabs get converted to spaces in p tags?" says Dhruvv4.
That's a good question.
Let's look it up.
So a lot of these things, you can just google.
I don't know the answer to everything when
it comes to anything, but especially in web development.
And so I use Google all the time.
And I recommend that if you don't use Google for a lot of stuff,
for all these questions, get into the habit of doing it
because Google really-- you can find it pretty much anything on Google.
TOM BALLATORE: My TF, I love my TF for CS50.
And the one thing he said-- like, I met him for drinks after the course,
after the hackathon and the fair.
And I was like--
I'll leave him nameless, but Mr. X, I mean, like, man.
You knew everything in section.
How did you get to be so smart?
And he's like, did you notice I often didn't share my camera?
And I'm like, yeah.
I thought that was a little bit different.
He's like that's because I was always googling things.
I'm like, oh.
He's like, yeah.
Just google stuff.
That will save you.
COLTON OGDEN: I'll be shameless about how much I google.
I think everybody-- in the world of development, googling is ubiquitous.
Everybody here that works at CS50 is a great, excellent, very skilled googler.
It's a skill in the modern era for web development--
for any development, for any, I think, field probably requires you to Google.
And thanks, Stuck1l, if I'm pronouncing that correctly.
Thank you very much for following.
But we can say to Dhruvv's questions, why do--
I just write it as a question.
Why view tabs get converted to spaces HTML?
And we have a Stack Exchange question here at the very top.
Stack Exchange and Stack Overflow are excellent resources
for finding out answers.
"Googling or Stack Overflowing," says Oscuro.
Yes, exactly.
OK.
TOM BALLATORE: And a shout out to Bing.
COLTON OGDEN: Let me see.
Oh, this one actually didn't get an answer.
Really?
You can bypass [MUMBLES].
OK, I think this is a Python question, actually.
I apologize.
That's a Python-- that's a Python--
TOM BALLATORE: Actually, maybe this goes back to the first web page I ever made.
I remember I had done sort of desktop publishing stuff, right?
So like, well, I mean Word, obviously.
But also, let's say, in design where you have
complete control over where your text is going to be on a screen
relative to figures, whatever.
When I made a web page, I was like, no.
You got to be kidding me.
I can't control the space between these paragraphs?
Without CSS, which I didn't know then.
And I ended up like tabbing the heck out of stuff to get spaces.
So I never realized-- like, I don't do that anymore.
We use CSS obviously, if you want to do things like that.
Or enter the code for a non-breaking space
if you really do want spaces in a row.
But yeah.
Maybe it's just default for tabs just give you a space.
Because I did hack it that way incorrectly.
COLTON OGDEN: Yeah, people on--
I mean, it doesn't look like there's a clear answer.
We'd have to do a deeper dive, I think, onto the HTML spec.
But it seems like based on what I'm reading on Stack Overflow, at least
per this person's comment-- and this is just one person's comment--
that there is not actually a tab in HTML.
And what he might mean is that there is no standardized way
to render tabs across browsers.
Browsers have-- the HTML spec has not defined that /t,
or the ASCII character code for t should be rendered in a consistent way.
And so therefore, they don't get rendered in a consistent way.
So we'll accept that answer for now.
It may not be 100% accurate.
And again, we'd have to look at the HTML spec
and really dig in to understand why that's the case.
But there are solutions to get around it.
So people are saying wrap the content in a pre-tag,
which looks like it's a way to parse /n and t to render them appropriately.
So there are ways to get around it.
But the raw HTML data that ASCII bytes that it
expects to exist in your HTML document as it
served to you over the internet, that does not
get translated to textual representation in the web browser.
So that's just my interpretation of what I'm reading online.
So excellent question-- one of those things
that you could spend an hour probably digging
into stuff to figure out the low level reasons why something exists that way.
TOM BALLATORE: Sure.
COLTON OGDEN: "Bootstrap is a dream come true."
I agree.
We're going to do a Bootstrap stream in the future.
So jot that down, or at least hold me accountable for that.
OK, cool.
So we did p tags, em tags, strong tags.
The next thing that I wanted to talk about was the whole basis of HTML
or, rather, markup itself, and that's hypertext.
TOM BALLATORE: Ooh, yes.
COLTON OGDEN: So hypertext is a really important thing
in web programming, which basically means connecting different documents,
right?
If I want Google, for example, if we're on Google--
let's say I'm on Google Images--
images.google.com.
And I type in cats.
And so this is one page, right, of a bunch of cats.
And these aren't actually very happy looking cats.
Unfortunately, these are pretty sad looking cats for the most part.
TOM BALLATORE: Go to the cat in the suit thing, like shaved.
It was like 20 years ago, a meme--
COLTON OGDEN: Cat in a suit.
TOM BALLATORE: Well, it's shaved cat.
We better be careful because who knows what's going to come up.
COLTON OGDEN: I think I probably have Safe Search on.
I think it's a default setting.
TOM BALLATORE: Excellent.
Excellent.
OK.
COLTON OGDEN: But you can see that we have all of these pictures of cats.
But maybe I want to find out more information
about any given one of these pictures.
This page on its own isn't necessarily that useful.
I mean, it arguably, depending on what you're looking for.
But maybe I'm looking for a bit more information on one of these pictures,
for example.
And it's impossible to include the information about everything
into one page for most things, I would say.
But we can, thanks to the power of what's
called hypertext, click on this picture or this link
here and get taken to someone else's web page on the World Wide Web
and get more information, get a page served to us from a completely
different location on the internet.
TOM BALLATORE: Can you imagine before we had this?
COLTON OGDEN: It would've been rough.
I mean, at that point, you're looking--
TOM BALLATORE: I was alive then, but like, man.
COLTON OGDEN: Libraries.
TOM BALLATORE: Yeah.
Yeah.
COLTON OGDEN: And I think ARPANET was before you were born.
TOM BALLATORE: Yeah, in '70, I was born.
But yeah.
But still.
COLTON OGDEN: Oh, maybe ARPANET was '73.
I'm not--
TOM BALLATORE: I touched punch cards when I was young.
But still.
COLTON OGDEN: ARPANET.
I don't remember offhand when it-- '67.
Oh, it was a concept published in '67, implemented in '69.
Before your time.
TOM BALLATORE: Yeah.
But this idea of clicking on something is so natural to us now.
But yeah.
COLTON OGDEN: Yeah, it is.
It's great.
It's a great concept.
And it's crazy to think that there were people implementing
this sort of theoretically and then tangibly,
and that now this is the basis upon which we live.
Everything in the world is connected kind of because of this idea,
that you can click something and get information on it
instantaneously, right?
And that's what HTML--
the backbone of HTML is, to say that some picture or some link links to--
it acts as a hyperlink.
And hyper not meaning large, but rather--
I looked this up earlier, and hypertext means something more akin to beyond,
not large.
TOM BALLATORE: Oh, like hyper.
Hypersonic, beyond sound.
This is real Latin.
COLTON OGDEN: Over or beyond.
Yeah, Greek, in this case.
TOM BALLATORE: Oh.
Sorry.
COLTON OGDEN: No, it's OK.
TOM BALLATORE: Oh.
COLTON OGDEN: Super comes from Latin, though.
TOM BALLATORE: Oh, Superman is-- oh, OK.
Yeah.
Hyper sounds better.
COLTON OGDEN: Yeah, hyper.
Hyperbeam, if you're a Pokémon fan.
Have you played Pokémon?
TOM BALLATORE: Well, no.
My kids, yeah.
I've been through.
Yeah.
Pokémon.
COLTON OGDEN: But yeah.
TOM BALLATORE: We should do this in Japanese.
COLTON OGDEN: Oh, yeah, no.
You could do in Japanese.
I could not do this in Japanese.
TOM BALLATORE: [SPEAKING JAPANESE]
COLTON OGDEN: But hypertext means over or beyond.
So you can think about going beyond the link,
beyond a URL or some other representation of something
in your page, be it an image or text, whatnot.
But it allows you to transcend the limitation of the domain in which you
are currently viewing the web page.
So let's say I wanted to link to google.com or maybe cs50.harvard.edu.
Maybe I want this to be a landing page where people can come,
and I want them to also know about CS50.
So I say, click this link and you can actually get access to a web page
that David wrote at cs50.harvard.edu.
Right?
So how would I actually do that?
And it's actually very easy to do that.
And I'm actually going to make it the most prominent or at least--
maybe not most prominent, but the very first thing that people
see when they get into the page.
I want to say a.
I'm going to say-- this is going to be an anchor tag.
And I got to look up the exact reason why they call it anchor tag--
anchor tag meaning.
TOM BALLATORE: Oh.
Good question.
COLTON OGDEN: Link to another page.
Obviously, it's a link to another page.
But--
TOM BALLATORE: It's like this is--
you remember the old Microsoft Word where, like, you'd
have an anchor for like an image.
And stuff would float around it and stuff.
COLTON OGDEN: Sure.
TOM BALLATORE: It was really hard for me to figure out how it actually worked.
But maybe it's like in this place on the page, you are anchoring something here?
COLTON OGDEN: I guess so.
I guess so.
And then you'd follow that anchor to get to another ship or another web page.
I guess you can sort of visually construct that in your mind.
Buhrock and Mangozero and [INAUDIBLE],, thank you very much for the follow.
Oh, we got some [INAUDIBLE] in the chat.
Let me see.
TOM BALLATORE: [SPEAKING JAPANESE]
COLTON OGDEN: [SPEAKING JAPANESE] Can you speak Japanese?
TOM BALLATORE: [SPEAKING JAPANESE] Google Translate's awesome, isn't it?
Don't read that one.
That's not a good one.
We're going to have to get somebody active in the moderation over there
if we can please, thanks.
COLTON OGDEN: Which one?
TOM BALLATORE: Ah, [INAUDIBLE].
We won't go there.
Anyway, hi.
COLTON OGDEN: All right.
So let me see what else we got here.
TOM BALLATORE: Kawaii.
COLTON OGDEN: "Cool mapping."
"Kawaii, a Japanese word I know."
TOM BALLATORE: Yes.
OK.
COLTON OGDEN: And [JAPANESE],, which means scary, right?
TOM BALLATORE: [JAPANESE] means scary, yes.
So she's either cute or scary.
Yes.
COLTON OGDEN: You want to careful which one of those you use.
TOM BALLATORE: And a fun fact.
Like, if you want to say something looks cute, you can say [JAPANESE]..
But that's really a mistake.
It means it's pathetic.
COLTON OGDEN: Oh, yeah, yeah.
[JAPANESE]
TOM BALLATORE: Yeah, and, like, I did that with a baby once.
I was like, oh, what a cute looking baby.
But it's like what a pathetic baby.
I quickly learned that that's--
COLTON OGDEN: What was the way you get around that?
You say [JAPANESE], and you, like--
TOM BALLATORE: [JAPANESE].
You don't say that it looks cute.
It just is cute.
But yeah.
COLTON OGDEN: [JAPANESE]
TOM BALLATORE: Mm, [JAPANESE].
Yeah.
So anyway.
But yeah.
COLTON OGDEN: Japanese lesson.
TOM BALLATORE: So I called a baby pathetic.
That was really a low point in my Japanese history.
COLTON OGDEN: But how would you say something seemed--
can you not say something seems cute?
Can you say, like-- because I have definitely
seen what you're talking about.
And someone said that there was a way to get around it.
TOM BALLATORE: Yeah, we probably could.
Let's talk about that over beers.
COLTON OGDEN: Yeah, let's do that.
Maybe defer that to another conversation.
Anyway, HTML anchoring.
So anchoring, as we've illustrated-- and this might not
be the original intended use case for this tag
or at least the mental construction for this tag--
but you can think of it as there's an anchor
at this clickable thing on the page.
And if you follow where the anchor is, it goes to some other web page, right?
So a, and then I'm going to say href, and this is short for hyper reference.
And what this does-- or hypertext reference.
I'm not 100% sure.
But the href is actually what this anchor is anchored to, right?
And so I can say http://--
https://cs50.harvard.edu.
It takes in a URL much like you would type in your browser.
And I can say, "CS50 is awesome."
So notice that I did a couple of things.
I wrapped some text, just like I did with the p tag, right?
The paragraph tag wrapped a body of text, a bunch of text.
And I not only included in a tag.
But within this a tag, I didn't close it right away.
I actually typed a space, and then I typed what's called an attribute.
And we've seen attributes already so far,
but just haven't talked about them in tremendous detail.
For example, a meta tag can usually have a series of attributes.
And you can define custom tags, which have custom attributes when
you get into JavaScript.
But for right now, we're just going to use
with what's included in the HTML spec.
And with anchor tags, you get this attribute called href.
And the href is basically some metadata that
gets assigned to this tag, which tells it where to go when you click the link.
So I'm going to refresh the page.
I'm going to go over--
I have a lot of tabs now.
We've gone on some rabbit holes.
We can clearly see that I have actually visited CS50's page already,
which is why it's purple.
Chrome styles pages that you visited already as being purple and blue.
I believe blue by default.
TOM BALLATORE: Blue.
COLTON OGDEN: We can illustrate this with another a tag shortly.
And if I click on this tag, notice that, first of all,
on the bottom left of my screen, there is a URL that pops up
and a little panel there, which kind of just
gives you a hint that says this is where you're
going to go if you click on this link.
And this is a good way to bypass nefarious websites trying
to get people to click on links and go and do all sorts of stuff.
David's mentioned this in certain lectures.
But we'll trust that I have programmed this not nefariously.
And I, indeed, get taken not to a page that I have written,
although I have written part of it.
I did-- fun fact-- write the Staff page, which is really cool.
TOM BALLATORE: Oh, yeah.
COLTON OGDEN: Check that out.
TOM BALLATORE: OK, cool.
COLTON OGDEN: Using an awesome library called Masonry.
So bunch of images of all our teaching fellows.
So some pretty cool Bootstrap mixed with Masonry stuff.
But this is a page that's largely created by David
and other members of the CS50 teaching staff, all
of these sub points over here.
This is not my web page, but I can link to it from my own HTML.
It's just something that's a feature given to you by the internet,
by Chrome, and by HTML and by the existence of the internet,
being linked to the internet.
TOM BALLATORE: There's a question up there.
"So paragraph tag breaks a new line?"
So basically, it gives you a line break.
Yeah.
Because the paragraph tag, by default, has some formatting with it
that includes like a break at the end.
So you could imagine a web page in which they have a bunch of p tags
instead of having the proper break tag, br tag.
You could probably hack it that way.
COLTON OGDEN: Yeah, absolutely.
And you can get a lot more granular with it when you get to CSS, too.
You can decide that paragraph text shouldn't break, for example.
You can overwrite that functionality.
You can overwrite pretty much any styling
that you want with CSS, which is super cool.
TOM BALLATORE: Question is, "How do you get the videos to play?"
You mean the staff people doing, like, fun things?
Those are not videos, actually.
Well, they're GIFs, right?
COLTON OGDEN: Correct, correct.
They were originally videos.
And then Dan Coffey very kindly transcoded them
and turned them into GIF images, which then got put onto a server somewhere.
And we'll get into image tags.
But image tags essentially let you embed any image,
and GIFs are technically images.
And so because they're images, you can put them into your web page
just like you would put a regular image, a JPEG or a PNG file.
And they'll render because Chrome knows how to render GIF images.
TOM BALLATORE: It would be interesting if you went to Dev Tools
and checked out how long it takes that page to load.
COLTON OGDEN: Oh, sure.
The network?
TOM BALLATORE: It's a heavy page.
COLTON OGDEN: Sure.
So let's go ahead.
Oh, specifically the Staff page?
TOM BALLATORE: The Staff page, yeah.
COLTON OGDEN: Yeah, the Staff page is--
TOM BALLATORE: If you've got a fast connection, you might not notice it.
But--
COLTON OGDEN: I mean, we're still loading stuff.
Yeah, it's been-- how long exactly was that?
That was a while.
That was--
TOM BALLATORE: I don't know the size of it.
COLTON OGDEN: --three seconds?
Oh, 2.97 seconds here at the very bottom.
It says finish 2.97 seconds.
This is part of the Chrome Developer Tools.
This is the Network Panel, which allows you
to analyze network traffic as you're connecting to and from other websites
or asynchronously downloading, fetching information from other websites, which
we'll take a look at asynchronous JavaScript in the future,
making things like AJAX requests.
But that's beyond the scope of today's stream.
I'm going to go to Menu.
I'm going to go over to the Staff page.
And we can see all the stuff is loading.
2.56 seconds, actually.
TOM BALLATORE: Fast connection.
COLTON OGDEN: Yeah.
To be fair, these images are probably cached.
TOM BALLATORE: Oh.
Yeah.
So you could do, like, a hard reload.
COLTON OGDEN: Yeah.
TOM BALLATORE: How would I do that?
Hmm.
You would hold, like, an option or something, right?
COLTON OGDEN: Shift-Refresh.
TOM BALLATORE: Look at that.
It's 20-- ooh, 30-some megabytes.
You can't even say it's fast enough.
It's like, oh, ah.
72.3 megabytes.
COLTON OGDEN: Because it wasn't cached, it took five seconds in this case,
on a fast connection even.
And probably not necessarily because that's how fast we can download.
We can download much faster than that.
Maybe not, actually.
That's pretty fast.
That's actually pretty fast.
But we get faster connection here.
Harvard's got insane internet.
But yeah, that illustrates not only network fetching but caching.
So the power of caching.
So caching files, caching JavaScript, caching CSS HTML on your local machine
prevents you having to make more network requests in the future.
But that is a little bit beyond the scope of today's talk.
But a nice tidbit.
Very good to look at that.
Definitely consideration for building your websites,
you want to minify your assets as much as possible,
and this often takes the form of minifying JavaScript--
taking a full JavaScript file and basically shrinking it down,
kind of pressurizing it until it's very tiny but still
accomplishes the same thing.
We can illustrate that in a JavaScript stream in the future.
Cool.
"Hard reload and cap the connection speed
in Chrome DevTools for maximum fairness."
[TOM LAUGHS]
Yeah.
We're not going to do that.
I'm going to abuse the internet here as much as I possibly can.
Mangozero says, "When should you use a new p tag over a break tag?"
I'm inclined to actually not use break tags that much.
I don't know about you.
Do you use break tags a lot?
TOM BALLATORE: Yeah.
I wouldn't use a p tag if you want to break.
I mean, break is a break, right?
COLTON OGDEN: Sure.
TOM BALLATORE: There is this--
I can't think of it right now.
Like, when you want to have a--
oh, jeez, what is it?
Like, to put a line in--
COLTON OGDEN: Oh, the hr?
The horizontal--
TOM BALLATORE: Yeah, yeah, horizontal rule tag.
I'll use that occasionally.
But if I want a break, I use a br tag.
But I mean, don't use those if you want, like,
margin or something around an element.
That's CSS stuff.
Like, semantically, when you want to break your text
or break two divs or something, that's when a break makes sense.
COLTON OGDEN: I see what you mean.
So if you're in the middle of a p tag, for example,
and you want to space out some stuff.
TOM BALLATORE: Yeah.
COLTON OGDEN: OK.
TOM BALLATORE: That's a break.
That's when you use break.
I mean, that's the great thing about HTML5
is you just follow what the tags mean.
If it's a paragraph, it's a paragraph.
It's not a line break.
It's a paragraph.
COLTON OGDEN: I guess it's easier than, for example, wrapping that all in a div
because a div is going to bulky.
And if you're not styling it, then it's not as crucial.
I would say if you're styling that broken text in a specific way,
maybe use a div instead.
But I think I can see your point.
The break tag is probably better for a lot of use cases.
"Can you shed some light on what flash cookies are?"
Flash cookies.
So cookies are just files that are stored locally
to your machine that preserve some token that you
can use to keep logged into a web page.
A flash cookie--
I'm not actually-- OK, so they are used with flash.
So flash is an old runtime.
It's an Adobe product, Adobe Flash.
And it was basically the precursor to HTML5
and things like Canvas, which allows you to do graphical stuff.
Flash is very closely tied to things like newgrounds.com
and a lot of other things where people were
posting games and animations and stuff.
Before the internet became as flexible as it is now with JavaScript,
you basically had to use a program called
Flash, which was an editor, a program kind of like Photoshop
that you can draw out an animation or a game in the tool,
and then export something that you would embed into your HTML page.
And then that would load in the web page as a embedded game
or animation or whatever, an application.
And so flash cookie looks like something that is somewhat cookies
but used specifically in the realm of Adobe Flash.
And Adobe Flash is not used as much.
I mean, it started dying as soon as Steve Jobs said,
we're not going to support Flash.
You can still use Flash on Macs and PCs, and you'll
see websites that say Adobe Flash wants to be able to have access as web page
or whatever.
And they'll say if you don't have it installed, install the runtime.
But it's much more, I think, modern and more relevant to use HTML in Canvas
and those sorts of things, which are much more well-supported.
BALLATORE: Especially accessibility, even.
I mean, that's a big push in HTML5.
If you put everything in Flash, and you can't
see what's in it, like we can with, let's say, inspect source.
So it's definitely not probably a good idea to be coding right now in Flash.
COLTON OGDEN: Yeah.
Yeah, Flash is a pretty old technology.
I would recommend against it.
But you will see it.
And Flash Cookie like it's similar to what cookies are for the web browser,
just in the realm of Flash embedded applications.
Which again, to Tom's point, you can't see what's inside of them.
So you don't know what you're actually necessarily storing
the credentials or information for.
Good question-- a little bit beyond the scope of, certainly, HTML.
But let me just clear some of these tabs away, just so
that it's a little bit less filled up.
Chrome does use a lot of memory, which is unfortunate.
We have, now, illustrated hypertext.
And hypertext is one of the most foundational, important things
that you can learn when it comes to HTML and building web pages,
being able to connect back and forth between someone else's
server and your own HTML page.
But what if we wanted to, for example, connect to our own page--
our own HTML, another HTML page that we ourselves
have written, not to a page that's stored somewhere else on the internet.
And we can very easily do that.
If I just go over to VS Code, go over here and make a new file.
And I'm going to call this Tom.html because you're here with me, right.
TOM BALLATORE: My hand got cut off.
There we go, yeah.
COLTON OGDEN: I'm going to do the same thing that I did earlier.
First, I'm going to press Command-B to get out of the Site Inspector.
Type HTML, go down, hit Tab, get myself a starting point,
get rid of my script and style sheet.
I'm going to call this Tom's Web Page.
And are you on the staff page?
Did you get a picture taken?
TOM BALLATORE: Oh, yes.
COLTON OGDEN: Oh, do you have a picture taken.
TOM BALLATORE: Oh, I was just zany that day.
COLTON OGDEN: OK.
Let's go ahead-- this will allow us to get into a few things eventually.
But why don't we go ahead and go over to Staff.
We'll grab Tom's picture here.
So it's sort of by first name.
Let me go ahead.
Oh there we go, Tom Ballatore.
TOM BALLATORE: Ooh.
COLTON OGDEN: Let's go ahead and save that image.
Save that GIF.
And I'm going to save it here in my Streams/Web/HTML.
And I'm going to call this Tom.gif.
And it's already going to save it as a GIF file by default,
because that's the file type-- the MIME type, rather--
of that image, which is another thing we can talk about in the future.
But now I have two web pages.
I have a page that is what we've written so far, with some p tags and an a tag,
and an HTML body.
And in here, I'm going to do a little bit of what we've already done.
I'm going to say, my name is Tom Ballatore--
that's how you spell your name, correct?
TOM BALLATORE: You got it, man.
COLTON OGDEN: And then let's illustrate a new tag, just for fun.
So image source equals Tom.gif.
And the nice thing about VS Code is it knows what files are actually
in your-- because right here, when we added it to our directory,
VS Code imported it into its settings so it knows that it exists.
So it actually has a reference to it before we've even typed it
one time, which is super cool.
And I'm just going to do that.
And I think I might need the slash.
I don't know 100% if I do or not.
This is an interesting example of a self-closing tag,
so a tag that we don't, for example, need to do this for--
this.
We don't need to do that with image tags.
TOM BALLATORE: Can you actually close it?
I know you can close it with a thing inside the first tag,
just like you put a forward slash.
COLTON OGDEN: Yeah, a slash there.
TOM BALLATORE: Can you actually close an image tag with that?
COLTON OGDEN: I don't know.
TOM BALLATORE: I don't think you can.
COLTON OGDEN: It might just parse over it, honestly, and not do anything.
TOM BALLATORE: Because I mean, it doesn't make sense.
The image is either there or it's not, right?
COLTON OGDEN:
TOM BALLATORE: Yeah.
Yeah
COLTON OGDEN: So we have, once again, another tag that has an attribute.
And this is something you see when you're referencing assets,
typically-- for example, links that link to other style sheets, scripts
that link to JavaScript files.
In this case, we have an image that's linking.
It needs to know what the image is, right?
We need to say, this is going to be where an image is in our file,
in our HTML document.
But more importantly, we need to know what that image is.
We need a link to it, right?
So that's settled.
So we have a web page somewhere.
And actually if I go over to my folder where I have Tom.html,
and I double-click Tom.html, look-- my name is Tom Ballatore.
And this is an excellent web page.
So you see, it's very easy to make a personal web page these days.
You just need an H1 and an image.
And that's actually kind of cool.
I kind of like this.
It's kind of a meme-y web page.
TOM BALLATORE: That's my favorite Radiohead shirt.
I'm a big Radiohead fan.
I don't know if you like them.
COLTON OGDEN: I haven't listened to them too much to be honest.
TOM BALLATORE: This stream is over.
COLTON OGDEN: They were in, I think, a Guitar Hero game.
TOM BALLATORE: Oh, yeah, absolutely.
COLTON OGDEN: One of their songs--
super cool.
TOM BALLATORE: Yes.
OK, cool.
There's some questions here.
COLTON OGDEN: JockDS says, "you can specify the image width directly
in HTML?"
That's correct.
You can do that.
But it's not typically looked well upon.
You want to typically keep all of your styling separate from your HTML.
Those tags that you're referring to are HTML tags that are kind of deprecated,
and not really modern and encouraged to be used.
So I would refrain from doing any of that sort of thing.
If you're doing a quick-and-dirty web page where you just
want to test something, totally fine.
But for a production web page, CSS is where you
want to keep all your styling stuff.
Exactly-- a better way to do it is in CSS.
That's correct, 100%.
TOM BALLATORE: And everyone's aware of how
they would add that information into the HTML by adding either a class or an ID?
Perhaps we'll get to that later.
COLTON OGDEN: We aren't going to cover--
TOM BALLATORE: Or the CSS stream.
COLTON OGDEN: Yeah, that's going to be in the CSS stream.
That'll be the first thing we talk about,
actually-- one of the first things, is IDs and classes.
TOM BALLATORE: Awesome.
COLTON OGDEN: Yeah, so we have our two web pages.
But now let's say I want to actually link to Tom's web page.
Well, it's not much more difficult-- actually,
it's not any more difficult than what we did before with CS50.Harvard.edu.
If we just say Tom.html right here in our a tag, it already,
in our home page--
by default, if we don't specify HTTP or HTTPS,
it's going to assume the file protocol.
[CHIME]
So it knows to look for Tom.html relative to where this HTML
file is, which is in the same folder.
So therefore, we don't need to specify a subfolder or any of that sort of thing.
bullrock and jay_al97, thank you very much for the follow.
I apologize if I missed bullrock.
I'm not 100%.
I know I got mango0, but thanks again.
Let's go and refresh this.
Oh, actually, sorry, I have to revise my text here--
TOM IS AWESOME.
Refresh that-- TOM IS AWESOME.
And he's so awesome we've already visited his web page.
And click that link.
You can indeed see, instantaneously, our browser,
using the file protocol up at the top left, loaded our Tom.html.
TOM BALLATORE: Fully loaded.
COLTON OGDEN: So you can load not only certain links
to other people's servers and just web pages that exist on the internet,
but files that are local to your own file system.
TOM BALLATORE: Cool.
COLTON OGDEN: Let me make sure--
I apologize.
I haven't been keeping up tremendously with the chat.
Let me go ahead and just make sure.
"Macromedia Flash old school," says OMG_busted.
Yeah, that was before they turned it into Adobe Flash.
"Is there any benefit to using standalone tags?
If not, why do they exist?"
Standalone tags-- let me first of all define what that means.
Standalone tags-- in HTML.
[CHUCKLING]
Probably in HTML, yes.
Empty tags-- "a few tags that do not have any tags
because they are used to place standalone elements in the document
or on the page."
The reason that they are standalone elements
is because there is no data between the start of an image
and the end of the image.
The image is already defined to be with its source attribute.
The attribute contains all the information you need about the image.
We're not going to say, this is where an image exists,
and also, here's some text.
That doesn't make any sense.
And you can think of certain situations in which maybe you want a text overlay.
But you would do that with CSS in a separate tag,
or make your own custom tag.
But for the purposes of just raw HTML, which has no styling,
there is no semantic meaning of an image that also contains within it text.
That doesn't mean anything to HTML.
So that's why you would see standalone tags-- something that
just exists as it is, and doesn't need really
any more information so to speak.
But good question.
The Network tab, somebody mentioned earlier.
"Why would you want to close an image tag?"
You just have to close it in order to, I guess, tell--
I guess, no, you don't need to.
You don't need to.
TOM BALLATORE: Yeah, you were just showing that.
I was asking about it.
And it sort of stayed in there.
COLTON OGDEN: You don't need the slash here either, do you?
I think it's completely optional if I'm not 100%.
TOM BALLATORE: It's optional, apparently, yeah.
COLTON OGDEN: Yeah, it is optional.
Although it looked like-- oh, no, you shifted
because your animation was moving.
But you just end it.
You don't need a slash image tag.
Because again, there's not going to be anything
between the image where it's defined and something else,
like there would be with a p tag.
We're not saying, here's an image, here's some text data,
here's the rest of the image-- or here's the end of the image.
That doesn't exist.
That meaning does not exist.
"How do you make GIF files?" says jay_al97.
There's a lot of ways you can do it.
Dan probably used what's called FFmpeg, which
is a binary that you can download which allows you to encode video and audio
and images in a lot of different ways.
You can also use ImageMagick to make GIF images.
You can use Photoshop, you can use Gimp, you can use a lot of other programs.
Dan probably used FFmpeg in this case, taking a video file, and then just
basically saying, FFmpeg, video file, something.gif.
And that was probably how he did it-- with some settings
to specify the resolution and whatnot.
"Aren't GIFs typically larger than mp4s?
Why not loop an mp4 and hide the vid controls using HTML attributes?"
GIFs typically larger than mp4s?
I'm not sure if that's accurate.
And mp4--
TOM BALLATORE: It depends on the settings, right?
COLTON OGDEN: Yeah, I would have to see the settings.
I would be inclined to say that they're probably cheaper in terms of disk space
than mp4s, especially because mp4s usually have associated audio.
But I mean, you could delete the audio channel of an mp4.
TOM BALLATORE: Good question.
COLTON OGDEN: Yeah, I'm not sure.
I'd have to do a cross-comparison between an mp4 and the equivalent GIF.
We've also really heavily compressed these GIF images so they're very light.
TOM BALLATORE: And the frame rate is probably a lot slower.
COLTON OGDEN: It is.
You could make the same thing for the mp4.
You could change the mp4'S frame rate.
But good question.
I'm not convinced that mp4s are necessarily cheaper in terms
of hard drive consumption.
But we'd have to test it.
Photoshop, Premiere, probably you can make GIFs with some simple programs
as well.
You don't need slash.
I never used a slash.
Probably you can if you want.
"GIF size is lower than before because no audio and quality," says MeowCat.
Cool, so we've done some of the most important stuff now, so far.
Now let's go ahead and look and see what else we have left.
We did cover block level versus inline elements.
And I have a couple of more elements in which we can actually
showcase this difference.
Let's go ahead and go to our HTML page here.
Our index.html-- I'm going to get rid of this welcome thing,
get rid of Tom.html for now.
TOM BALLATORE: That's fine.
COLTON OGDEN: And then index.html.
So what would be a fun way to illustrate this?
Now there are two important tags that we can use to just kind of show
this sort of block level versus inline level concept, which we've already
illustrated with some elements that are intrinsically block
level versus intrinsically inline.
a tags are, I believe, block level--
I think.
Is that 100-- no, I'm not actually sure.
TOM BALLATORE: You can put them inline with text.
COLTON OGDEN: I think they're inline.
So in this case, I could say, TOM IS REALLY AWESOME.
And [AUDIO CUTS OUT] good?
Everything good?
Let's wait for the chat.
"Who spilled the coffee?"
DJ_Crust says.
TOM BALLATORE: Can you see us now?
COLTON OGDEN: Test, test, test, everybody let us know.
"Tom is too awesome so the internet broke."
TOM BALLATORE: Oh, you can see us.
OK, there.
COLTON OGDEN: Cool.
Everything's back.
So apologies for that.
We have a server that's cross-streaming, and it crashed.
But everything is back up and running.
So we were illustrating before the stream
broke that we have two a tags here.
Before, we just kind of added them together immediately without this br.
And they were just kind of like directly touching each other.
Like it just went, TOM IS, AWESOME and then immediately,
without any spaces or anything, it said TOM IS REALLY AWESOME.
But we wanted those to be on two separate lines.
And it doesn't suffice to just do this, because again, HTML
is not the same thing as what you're typing in the text editor.
And in this case, there was a space.
There was a tab.
So there was a space there.
But if I do this, or I just do an Enter like that,
you can see there's not a new line.
It doesn't add a new line to our HTML.
Even though I'm typing a new line in my text editor,
so you would think the two should be separated,
the styling is separate from what your text actually looks like here.
It's really just the elements themselves that mandate how things are styled,
right?
TOM BALLATORE: Yes.
COLTON OGDEN: So there was one way to do it, which was the br tag.
And there's another way to do it using a couple of different tags--
well, one tag specifically.
And this is a tag that's really, really important, that you're going
to want to really pay attention to.
And that is the div tag.
So the div tag is essentially just used to contain other things.
It's a container tag.
But the nice thing about the div tag is that it's a block-level tag,
meaning that whatever you put inside of a div
is going to go down to the next line as soon as it's finished.
So I can type in this code here--
div.
And I'm just going to go ahead and copy this line here, the TOM IS AWESOME tag.
I'm going to paste it just right in there, inside that div,
refresh the page.
And as we can see, TOM IS AWESOME is now on a separate line--
TOM BALLATORE: Out of the box.
COLTON OGDEN: --from TOM IS REALLY AWESOME.
TOM BALLATORE: Sweet.
And the implication here is that--
[CHIME SOUNDING]
--somehow the div just has the styling with it.
You probably could hack the p tag or the a tag
there, give it an ID, perhaps, that has some characteristic where
you could get a break after it in CSS.
But obviously this is the easiest way to do it.
COLTON OGDEN: Yeah.
There's so much you can do with CSS.
There's so many different ways you can do the same thing in CSS.
With raw HTML, your options are a little more limited.
But you do to take into consideration different ways of doing it.
"A much more stupid way to do it is a p tag with a styles white space
pre-line."
Yeah.
And again, using attribute styles--
probably something I would suggest not doing for a production application,
but certainly a great way to easily bootstrap something and test it really
fast, if you want to test if some style is
working without creating a new separate CSS file and doing all that business.
Much easier to actually just use an inline style.
But again, not recommended for modularity.
Essentially it comes down to modularity.
Keep the skeleton away from the skin.
Keep your HTML away from the CSS.
TOM BALLATORE: So I'm going to thank jay_al97 for the follow,
and also for the comment.
Yeah, I'm getting a little tired of the TOM IS AWESOME.
So let's move on to Colton.
Let's move on to who is awesome here.
COLTON OGDEN: Colton, H_Improve_It, and [INAUDIBLE] as well,
thank you very much for the follows.
So yeah, divs-- great way to contain stuff.
You can put anything you want inside of a div.
I could put a series of a tags if I wanted to.
And now notice, if I were to, for example,
duplicate this several times, even though I
have three elements-- three TOM IS AWESOME inside of this div tag,
it's only after the div has finished closing
that we actually get this new line break down to the TOM IS REALLY AWESOME.
So this illustrates what the div is.
It doesn't apply to everything inside of the div.
It only applies to the div's contents as a whole.
That's what becomes block-level.
And so you can envision, for example, styling this div
to be a certain background color.
And then maybe this becomes sort of a blocker--
an article or some other semantically meaningful part of your web
page that you want to be on its own area,
and then to have content following it on a new line.
TOM BALLATORE: I'm from an Italian family in Chicago
that owned a pizzeria.
So this question about, "does Tom like pineapple pizza?"
No, I don't like pineapple.
Don't even ask me that again, all right?
COLTON OGDEN: This must be a major source of contention for you.
TOM BALLATORE: I love pineapple, and I love pizza.
COLTON OGDEN: You and Dan Coffey would not get along too well, then, I
have to take it.
Because he's a very big pineapple pizza--
TOM BALLATORE: Dan's a great guy.
I won't hold that against him.
COLTON OGDEN: Yeah, a little bit--
just a little bit.
I actually don't know.
I think I remain neutral.
Because I think I've had pineapple pizza that tasted pretty good.
But I don't think I'd go--
TOM BALLATORE: There's so many other options with pizza.
Why would you default to the pineapple?
COLTON OGDEN: I don't think I crave it.
But if it's in front of me, I'll eat it.
So if it's in front of you, you won't eat it if you're hungry?
TOM BALLATORE: Oh, if I'm really hungry and it's all I have, yeah,
I'll eat it, sure--
after taking the pineapples off
COLTON OGDEN: You don't find it disgusting.
"Pineapple and ham," says Brenda.
Yes.
TOM BALLATORE: Dan is awesome, yeah.
COLTON OGDEN: I can say, I must say that I am
surprised that mp4 is smaller than GIF.
Yeah, I mean, it's a video file versus sort of a compressed image file.
There's just usually less information and fewer frames.
But I can see a particular encoding of an mp4 in which case
maybe it would get smaller than a GIF if the right settings were applied to it.
TOM BALLATORE: I think we need to look into this.
Because the settings might be default for different things,
and it might look smaller or something.
We should probably test that out and see.
COLTON OGDEN: Yeah.
But I have to imagine mp4s also have a lot more metadata associated with them.
TOM BALLATORE: Yeah, I have that feeling.
COLTON OGDEN: But I'm not sure--
maybe not.
Generally it's the case that an mp4 will be smarter than a GIF--
or a GIF will be smaller than an mp4.
TOM BALLATORE: This question about the lossless images in HTML.
Yeah, you could use a TIFF image.
COLTON OGDEN: "Can you use any lossless image formats?"
I have to imagine.
Yeah, like a PNG.
PNG are lossless.
TOM BALLATORE: SVG, which is a vector thing that you can just totally expand.
COLTON OGDEN: Yeah, SVGs are really cool.
That's actually a separate element.
There's an SVG element that allows you to embed SVG information.
And we can maybe even do a separate--
well, we're going to do an advanced HTML stream, which
has a lot more stuff than what we're covering today.
And in that stream, I think we'll do SVG and some other cool stuff.
But yeah, that's really cool.
I think even CS 50 uses SVG for our video player.
Some of the icons are SVGs--
super cool.
JP_guy-- oh yeah, the JP_guy is not here.
Typically they have pizza discussions.
There's a guy named JP_guy.
And he and Nuwanda3333, whose name is Asli.
They have a conversation.
I think he and Asli, and Bhavik, they all have a conversation.
Anyway, that is what a div is.
Now another one that I want to talk about-- another element that's
actually the opposite of what a div is, it's an element that is inline.
It allows us to contain something that's inline.
Are you're letting them know what it is?
TOM BALLATORE: (WHISPERING) Span.
COLTON OGDEN: You can see my outline, to be fair.
TOM BALLATORE: My eyes are not good for that.
Are you going to span?
COLTON OGDEN: We're going to span.
TOM BALLATORE: Yeah.
Span is cool.
I love span.
COLTON OGDEN: So this is actually going to be kind of underwhelming,
because we're not going to be going into styling.
A span is typically where you would use styling,
to make it clear that that's what you're doing with the span, right?
TOM BALLATORE: It would allow you to grab a section of something
with your styling.
COLTON OGDEN: Exactly.
So I can say span--
and I'm not even going to grab just one word,
I'm actually going to grab this whole sentence,
and then close my span tag there.
And a span is the opposite of a div, in that
rather than making whatever its content is block level,
it just makes it inline.
But it contains.
So we can say, I want to make all spans red color.
And normally that would be impossible to do with just some subset of text
within a paragraph, for example.
So we have to have some way to associate some metadata
with specific blocks of text.
And if Asli, you're watching, this is kind of
similar to what we talked about, where you
associate metadata with a particular word
or a particular set of words in a game.
And this is something that she and I talked about on Facebook.
But you would do this with--
and you wouldn't probably use a span.
You would use an ID or class.
But the idea is the exact same.
Mark some sort of group of text with some particular metadata
that allows you to use JavaScript or CSS to target it
and change its functionality.
So that's how I see spans, and that's how they're typically used.
Spans and divs kind of go hand-in-hand as sort of being,
well, not apples and oranges, but sort of like the same two ideas
at opposite ends, really.
They kind of go in tandem.
TOM BALLATORE: And J, yeah, forms are on Colton's list.
So I don't know if we're going to get there or not.
COLTON OGDEN: Oh yeah, we are going to get there.
We have another hour, actually-- over an hour.
And we'll try to go a little bit faster.
Next thing we're going to get into, and hopefully-- do you have time?
Do you have another hour?
Or are you going to have to go.
TOM BALLATORE: I'm cool.
COLTON OGDEN: OK.
[INAUDIBLE] I enjoy this.
I enjoy this back and forth.
TOM BALLATORE: I enjoy this, too.
I've never been on anything live.
[INTERPOSING VOICES]
COLTON OGDEN: You do very well live.
You're doing very well.
TOM BALLATORE: Well, thank you.
COLTON OGDEN: Yeah, this is great.
TOM BALLATORE: I have a face for radio, they say.
COLTON OGDEN: Oh, yeah yeah yeah-- a voice for radio, too.
And I heard that you typically feature sections like this.
You teach video section.
TOM BALLATORE: I do a video section.
I do an online section for CS 50 and the other courses in the stable.
And I have a DSLR setup and stuff.
I have a bookshelf behind me and stuff, trying to bring a little--
COLTON OGDEN: A little class?
TOM BALLATORE: A little class, a little "gruh-vah-tiss," what's the word?
COLTON OGDEN: Sure, gravitas.
TOM BALLATORE: "Graw-vee-toss," yes.
But yeah, definitely it's fun doing this.
But I'm looking at this, thinking about the video setup.
I got to talk to Dan, or you, or whoever made this.
Because you use an OBS for the stream.
COLTON OGDEN: Streamlabs OBS, yeah.
TOM BALLATORE: I'm using another thing that I drop a lot of frames,
and it's just not as good as this.
COLTON OGDEN: FRAPS?
TOM BALLATORE: No, I use Camera-Live and CamTwist.
COLTON OGDEN: Oh, yeah.
I think Streamlabs OBS might be Mac-specific--
or, I don't think it's PC-specific.
But regular OBS, which is the same back end,
is the program that you can download for Mac or PC.
So look into OBS--
Open Broadcast Software.
TOM BALLATORE: I will do it.
COLTON OGDEN: All right, so--
and people have some very flattering comments.
"You guys have a good back and forth."
"Fun fact-- 4th is a programming language."
Yep, that's true.
"OBS is the best, isn't it?" said Jack_OTTS.
I'm reluctant to say it's the best, but it's certainly
one of the more popularly adopted.
"Banter between Asli and Jan are awesome."
"Asli's birthday is next Friday."
Oh, we're going to be on stream next Friday,
so we'll wish Asli a happy birthday.
All right, let's get into something that will
allow us to structure our data a little bit more--
[CHIME SOUNDING]
--I guess semantically useful.
Rahul Rajan, thank you very much for the follow.
And Superfast Jellyfish, thank you very much for the follow.
I like that name, Superfast Jellyfish.
TOM BALLATORE: (WHISPERING) Lists.
COLTON OGDEN: So yeah, we're going to be talking about how to put--
[CHIME SOUNDING]
--information in a list.
So for example, if I want to create an application or web app
that's got my grocery list, or a to-do list, or something.
That's a very important thing.
Lists are something that we use a lot when we're trying
to lay out information in web pages.
Even the most basic of HTML documents that aren't styled--
research papers are going to have things like a table of contents, for example,
or even a sub-table of contents for an article or a section.
So let's go ahead and illustrate a simple list.
I'm actually going to get rid of all this Lorem Ipsum text.
We're going to keep the TOM IS REALLY AWESOME at the very top of the page.
But I'm going to show everybody the ways in which Tom is awesome.
I'm going to enumerate over them in a list.
And we're going to first use an unordered list, because we're not
going to sort these by priority.
TOM BALLATORE: It's hard to order my awesomeness.
My wife is probably going to be tuning in, laughing at this.
COLTON OGDEN: She's going to be laughing.
She's going to subscribe and provide her own suggestions.
But this is how we begin using a list.
And so this is going to be using some embedded tags.
We saw earlier-- and I'm not sure if I emphasized this well enough--
we actually put, within a div, an a tag.
We had some tag within a tag and it's closing
tag-- this a tag and its closing tag within this starting tag
and this closing tag.
So you can nest--
this is called nesting, putting something inside of something else
in the context of programming HTML.
But it applies to any programming language, really--
any markup or programming language.
Some people are going to say, HTML's not a programming language.
But inside of this div, we've put another completely separate tag.
And we could do even more than that.
We could say, for example, image--
and I could say, source is equal to Tom.html here, right?
TOM BALLATORE: That's going to be Tom.gif.
COLTON OGDEN: Sorry.
Tom.gif.
Thank you very much for that.
I could do this, and I could refresh the page.
And this is pretty cool, because we have an image,
and we have a reenactment in real time, actually.
But if I click this image, notice that it takes us to the web page.
So we've gotten brand new behavior, which we haven't really
enumerated, just by putting some tag inside of another tag.
So these puzzle pieces are very interchangeable,
and they work together in very interesting ways.
I'm going to come back here, just back to our index.
We'll keep the image there.
But I'm going to betray my own prior sort of recommendation,
and I'm going to say the width should be only 50 pixels.
Is that going to be too small?
TOM BALLATORE: It's cool.
COLTON OGDEN: It's a good size.
Ah, 100 pixels.
And so this is another attribute that you
can add to an image which will allow you to specify the size of that image.
And it will go no larger than that image.
SveaDeu, thank you very much for the follow.
TOM BALLATORE: And Superfast Jellyfish and Rahul Rajan.
COLTON OGDEN: Oh yeah.
"As I was pointing out before.
Nice," says Jack_OTS.
"I like this tutorial.
It makes me feel like a pro since I already know HTML," says SpareKey.
Awesome, well, tune in for the CSS and JavaScript ones, too,
because those are going to be very fun.
This is going to be a very nice way, I think, to bootstrap us up to some
really cool, juicy content.
"Everyone needs a colleague like Colton."
I appreciate that.
Thank you very much, [INAUDIBLE].
"It looks like a model photo shoot."
Talking about you.
TOM BALLATORE: Where?
[CHUCKLING]
COLTON OGDEN: "Colton is just amazing," says Patrick Michaud.
Thank you very much, Patrick.
I very much appreciate that.
"Do you have to specify the size of the image in CSS,
or do you need to do it in the HTML?"
Either way.
You can do it in either way.
But my recommendation is to not do it like this,
because this is sort of tying in styling information with the semantic content
of your actual program.
You don't want to do that.
You want to keep your styling--
you want to keep your skin away from the skeleton, so to speak.
The body should be the HTML, and actually
have the styling, what it looks like, separate.
So that somebody who is a designer, for example,
who is just concerned with how things look,
doesn't have to worry about how things are laid out.
Because that can get kind of--
TOM BALLATORE: And the JavaScript's like the muscles moving.
COLTON OGDEN: Yeah.
TOM BALLATORE: That's really nasty, but it really make sense.
COLTON OGDEN: Actually, that's a great way to sort of fill that analogy,
the JavaScript being the muscles, the verbs.
If you were to do noun, adjective-- and this isn't my own analogy,
but the nouns, verbs, and adjectives being the HTML, JavaScript, and CSS.
TOM BALLATORE: So has somebody really done the skeleton, skin, muscle thing?
COLTON OGDEN: No.
[INTERPOSING VOICES]
That's closer to something that--
I've heard of skeletons and skin, but you came up with muscles.
I've never heard muscles.
TOM BALLATORE: It was said here, first time ever.
All right.
COLTON OGDEN: "Trying to keep the skin away from the skeleton.
That's going in the notebook," NACR.
That's going to be clipped.
TOM BALLATORE: By the way, one little thing.
When you do to the CSS thing, you'll be seeing that probably Pixels might not
be the best choice.
Because if you're on mobile device, and you're shrinking your screen,
and it might be very small, you'll probably
be going with relative elements or something, or other measures.
COLTON OGDEN: Yeah, we'll get into that.
We'll get into to em and all sorts of things, with relative scaling,
on the CSS stream.
For now, we're probably going to stick with Pixels, just because it's easier
to explain and to illustrate without going into too much of the CSS stuff.
But the takeaway should be, don't do this,
but this is something that you will see sometimes.
And it's a great way to test something, but make sure take it out in the--
before you actually ship something, put it into a--
and this is more of a, do as I say, not as I do, because I've done
this in production applications.
But you want to keep this in the CSS file,
separate, so that you as a designer or your own designer or somewhere else
has access to it without affecting the semantic meaning of your web page.
TOM BALLATORE: And ForSunlight has a question, "what are you referring to?"
I think you're talking about the skin and the skeleton thing.
Basically, skeleton being the HTML sort of structure.
COLTON OGDEN: Yeah.
Analogize the web page as being a human, or some creature,
some biological creature, a mammal, whatnot.
You would visualize the HTML sort of as being the skeletons.
It's the structure that makes up the web page.
It doesn't define what it looks like, though, necessarily.
Skeletons all kind of look the same.
So the skin, or the outward appearance, would
be the CSS, the styling that actually applies to the creature.
TOM BALLATORE: Later on, if we have time,
we got to do a CSS garden or a zen garden,
if you've ever showed them that.
COLTON OGDEN: Yeah, I've seen that.
It's an amazing website.
And then the muscles, the things that actually
allow that creature to move its skeleton and do things, the JavaScript.
That's sort of where that analogy comes from.
And that's the origin of that analogy.
"I use VW in RAM2," says JM_Chasen.
That's definitely the right way to do it for a lot of applications
that need to be very reactive and--
what's it called?
Responsive.
Not reactive.
Reactive is different.
"Some people still stick to Pixels because it's the easiest."
Yep, that's what I'm doing here.
That's the easiest.
So let's get into ULs, so Unordered Lists.
So all the reasons that Tom is awesome.
And I want to query the chat if the chat can provide me
with what they think are some of the reasons that Tom is awesome.
We'll put them in here in our unordered list,
and illustrate how an unordered list works.
Patrick, thank you very much for the follow-- patrick_machado.
TOM BALLATORE: "He has not picked his nose yet."
COLTON OGDEN: That's a good one.
TOM BALLATORE: I haven't.
I scratched it kind of.
COLTON OGDEN: Oh, you have a PhD.
TOM BALLATORE: I do have a PhD.
COLTON OGDEN: That's a pretty cool one.
TOM BALLATORE: I do.
COLTON OGDEN: First of all, let's add an h element in here.
And let's just say, why is Tom awesome?
I mean, we should say, why is--
there's so many reasons you are.
What are the reasons Tom is not awesome?
TOM BALLATORE: And maybe the number one is
I didn't pay very much for the person to write my PhD for me.
I mean, it was really cheap.
So that was really smart of me.
Ah, just joking.
COLTON OGDEN: So he has a PhD.
And now notice that I'm using a couple different elements here,
HTML tags, elements, kind of same meaning.
I have a UL, and that just means an unordered list.
And what that's going to translate to is these bullets
that we're going to see very shortly don't have a numbering system to them.
There's no order to them.
They're just there, they exist, arbitrary order.
No weight, therefore, given to any one over another.
Let's see, am I missing the chat?
Let me make sure.
TOM BALLATORE: No, they're just talking about--
it seems like everybody knows about CS 50.
But the stream has been going on.
This is the 24th one.
COLTON OGDEN: They said you worked at a pizzeria.
Is that accurate, or did you say your family owned a pizzeria.
TOM BALLATORE: No, my father owned it, and I worked there.
And my father's best memory of me was when
I was away an University of Illinois, engineering guy,
supposed to be sort of having an attitude,
I actually cleaned feces off the floor.
COLTON OGDEN: Ooh, man.
TOM BALLATORE: And he's like, that's my boy.
COLTON OGDEN: We're about to get taken off of Twitch for--
TOM BALLATORE: Oh, I didn't say that.
COLTON OGDEN: No, it's totally fine.
That's not against--
TOM BALLATORE: So yes, I did work at a pizzeria.
COLTON OGDEN: That's pretty brutal.
I don't know if I'd want to do that.
I'm not a huge fan of that kind of labor.
TOM BALLATORE: No, well, that's why I would
prefer to be sitting in front of this--
[INTERPOSING VOICES]
But you've got to respect those sorts of jobs.
COLTON OGDEN: Oh yeah, absolutely.
Somebody has to do it.
And if nobody wants to do it, then we're kind of SOL.
TOM BALLATORE: "Grooms his beard."
The beard, I had shaved a couple months ago, because I'm starting to look--
I look much older when I have a beard.
COLTON OGDEN: You wanted to look older?
TOM BALLATORE: You know, OK, yeah.
I'm coming for this CS 50 for lawyers class.
So I really want to have a little bit more heft.
So I did grow the beard back.
COLTON OGDEN: Interesting.
I respect that.
TOM BALLATORE: On Tuesday, I'm definitely going to be shaving.
COLTON OGDEN: You said you're 48.
But I would say you probably look like you're 33.
TOM BALLATORE: Yeah, I feel about 35.
And that's really the secret.
There was a recent studies in some--
like Nature or Science.
The age you feel is really probably your actual age.
COLTON OGDEN: And probably have to imagine
you're probably not a heavy smoker.
I know that that pre-ages people.
TOM BALLATORE: No, I don't smoke.
I have asthma, so I do not smoke.
COLTON OGDEN: Smoking is a large thing across Japan, though, is it not?
TOM BALLATORE: Not that much anymore.
COLTON OGDEN: Not anymore.
But it was.
TOM BALLATORE: It was, and it was awful.
COLTON OGDEN: Is it still a big problem in China?
TOM BALLATORE: China, yeah, every time I've been to China it's usually smoky.
COLTON OGDEN: Yeah, smoking, I know that's a premature aging
recipe from what I understand.
I have to look into, obviously, the data.
But I think that based on what I understand the data,
does point towards things like that.
And obviously a huge risk factor for--
[INTERPOSING VOICES]
TOM BALLATORE: I am 48.
And I'll tell you one thing you might not know about me.
I have 17--
COLTON OGDEN: People are in disbelief that you're 48.
TOM BALLATORE: Well, I have a 17, 14, and 12-year-old.
No, I'm 48.
September 27th, 1970.
Oh, you're 43.
I got you.
Cool.
But no, I do have virtually teenagers in my house.
So the fact that my wife and I are on our 20th year together this year.
COLTON OGDEN: Congratulations, by the way.
TOM BALLATORE: Thank you.
We've made it through three teenagers.
So I'm kind of not a great guy all the time.
But yeah, I must be OK in that regard.
COLTON OGDEN: You're taking care of yourself.
So kudos.
Like I said, 33.
I strive to look as young as you when I'm 48.
TOM BALLATORE: Sweet.
COLTON OGDEN: That'll be a dream of mine.
Because you grow the beard to look older,
but "you really, really don't look 48," says Asli.
TOM BALLATORE: OK, I'll put the glasses on.
(GERMAN ACCENT) What do we have here?
COLTON OGDEN: Germans wear glasses.
TOM BALLATORE: Yeah, why did I do the German accent anyway?
COLTON OGDEN: "Complicated relationship with CS 50" joke.
And he definitely does not look 48.
I'll say that.
We'll kind of distill all the comments that people have posted into the chat
there.
But this is an unordered list.
And it's founded on a nice entertaining premise.
But it illustrates a very important aspect of HTML.
So why is Tom awesome?
So let's go ahead and get rid of the developer tools.
We have an h1, of course, just so that we bring our attention
to the list below it.
And we can see that this fact that we've declared a UL
has done a couple of things for us.
The UL itself is indented.
Or it might be a style that's applied per element within the UL, actually.
But the UL is, as a whole, indented.
And each element within the UL is given its own line.
And I believe ULs are block-level elements.
So if we were to say, for example, immediately after that, a href equals,
I would just say something, and then Tom, and then refresh it,
it does indeed get put down below the end of the list.
So the UL itself, and OLs, are block-level.
They put a space between themself and the prior and ending content.
Gesundheit, by the way, to tie in well with the German reference.
TOM BALLATORE: [SPEAKING JAPANESE]
COLTON OGDEN: But this is how you do ULs, unordered list.
And just by simply changing the UL to an OL as I do here--
TOM BALLATORE: Interesting.
How do you put the list to the right of the image?
COLTON OGDEN: The list to the right of the image--
so that would be--
TOM BALLATORE: You're working on a screen that
might be collapsed or larger?
How is it--
COLTON OGDEN: How do we it without CSS.
TOM BALLATORE: Oh, you want to put it to the right of the image?
COLTON OGDEN: You would have to disable the block-level styling of the image.
And we can maybe do that with an attribute.
TOM BALLATORE: And float, that would be another way.
COLTON OGDEN: Yeah, float as well.
That's all CSS stuff.
So it's not really in the realm of HTML, so we won't cover it.
But we will cover a lot of that sort of stuff,
doing a lot of really cool stuff in CSS next week.
TOM BALLATORE: And that's exactly what floats are for,
wrapping text around images like that.
Don't use floats for layout.
It's a hack.
You've got other tools.
But definitely that exactly is what it's for.
The question, why is--
they say HTML is not a language.
Of course it's a language.
It's not a scripting language.
COLTON OGDEN: It's not a programming language.
It's not a scripting language.
It's a markup language.
Its goal is to define the layout of some document, of some information,
and then be interpreted and rendered in a specific way by a processor.
And it differs from a programming language in that you can't actually
perform logic within HTML.
There's no structure to actually do IF statements,
and looping, and anything like that.
So you can't get programming functionality with HTML,
but you can get sort of layout functionality.
And that's the difference.
People will split hairs.
It is a language, but it is not necessarily a programming language.
You can't program and create programs.
You can only create documents with it, effectively.
All right, cool.
So by just changing a simple tag from UL OL, we got the little dots.
Notice that these were dots before, the 1, 2, 3, 4.
They are now numbered.
They are now from sequential order.
And based on at least the logic of this list,
we would assume that it's most important that you have a PhD.
It's kind of important that you worked at a pizzeria,
but not as important as the fact that you have a PhD.
And so on and so forth.
And the fact that you definitely don't look 48 is the least important
of all of those.
TOM BALLATORE: I'm looking at this, thinking,
do you know this Abraham Lincoln's Gettysburg Address PowerPoint?
Google it.
COLTON OGDEN: Sure.
Gettysburg Address PowerPoint?
TOM BALLATORE: Yeah, Edward Tufte, this visualization guy, came up with--
Gettysburg Address, if you're not familiar with this,
is one of the most famous speeches in American history.
Abraham Lincoln, on a battlefield, gives this "let's not give up on this country
and freedom" sort of speech, right?
But if he had PowerPoint, he would've come up with these cheesy lists.
Like, yeah.
If you know the Gettysburg Address, it's poetic, it's inspirational,
and it's just incredible oratory.
COLTON OGDEN: I have to admit that I don't remember--
I've read it, but I don't remember it offhand.
So a lot of this stuff probably won't--
TOM BALLATORE: "Four score and seven years ago our forefathers
brought forth on this continent a nation conceived in liberty," blah blah blah.
But when you put in bullets, it just sucks.
Sorry, did I say that?
COLTON OGDEN: Consecrate, hallow.
TOM BALLATORE: It's not so good, yeah.
COLTON OGDEN: What makes the nation unique.
Interesting.
I can definitely see the point.
Everything's distilled down into the bare, sort
of intrinsic meaning of the statements, and not the poetry of it.
TOM BALLATORE: And HTML allows you to do that because lists are important.
COLTON OGDEN: Yeah, lists are very important, I would say.
To-do lists are a common first application.
We might even write a to-do list application
at some point in the future, once we get into JavaScript and CSS.
Then we can make it look nice, then we can check boxes and have the list item
sort of disappear.
But this is how you get at least the foundation of that idea,
the idea of a list, written in HTML and displayed to the user.
So that's cool.
So that's ULs, that's LIs, and OLs.
And if I didn't elaborate terribly on LIs,
that's just short for a List Element.
So every single thing that you have within a list
needs to be a list element.
Now if I were to say--
[CHIME SOUNDING]
What's the most important possible thing?
Oh, SludgeBeard, I love that name.
SludgeBeard, thank you very much for the follow.
Another thing that we can say is super cool about Tom.
We haven't even considered the fact that you speak Japanese, right?
TOM BALLATORE: I do, yeah.
COLTON OGDEN: That's pretty important.
That's pretty cool.
Some people will like that.
But notice that when we pass that into the UL, it does
get indented-- or sorry, the OL in this case.
It does get indented, but it hasn't been given a number.
It hasn't been given a weight.
So the parser has sort of said, because it's within the OL, it is indented.
The indentation is specific to the OL, not to the list elements.
But it's not a list element, so it doesn't get a number.
It doesn't get a tag.
It's just kind of text that's there that gets indented.
And so that's kind of why you need to be careful about where you actually
have your elements or your closing and ending tags,
and what information you put inside of another tag.
In this case, you might instinctively think
to say something like, Tom is awesome! and then Tom is awesome!
and have those all be sort of bullet points.
You're saying, oh, it's within an ordered list, it should just work.
But no, and actually they don't get sent down to the next line.
They're not block-level.
These are inline elements.
Well, rather, this is inline test because it's not within an element.
When you use an LI, LIs are block-level elements.
They actually do get sent to the next line.
So there's a lot of these little details that are easy to, I think, catch you up
if you're not super familiar with this landscape.
But as soon as you sort of look at it and understand
what you're trying to do, if you understand that an OL and an LI
needs to exist within--
sorry.
An OL and a UL need to have LIs within them.
And that's sort of the content declaration.
TOM BALLATORE: I think you said list element.
And they are elements, but it's actually a list item
is what people are saying in the chat.
I mean, it is an element.
COLTON OGDEN: I apologize, I apologize.
List item, list item.
That was a misspeak of mine.
List item, yep.
TJ Enzo, "and nested lists."
Yeah, you could do a nested list.
Why not?
We'll actually demonstrate that in a second here.
Let me just make sure I have caught up with the chat.
"It just got clear now.
Thank you all."
"I had to memorize it in fourth grade," says [INAUDIBLE]..
She's referring to the Gettysburg Address.
Colton_1987, "nice haircut, man.
How old are you?"
Thank you very much--
referring to me, I'm assuming, because my hair is probably more exaggerated.
I am 27, and you are
TOM BALLATORE: 48.
COLTON OGDEN: Because we talked on the stream, 48.
But people probably think you and I look about the same age, to be fair.
If you were shaved, especially.
TOM BALLATORE: You have the proper pompadour, man.
I love the hair.
I wish I had it.
I'm losing-- it's gradually going up, and up, and up.
COLTON OGDEN: I don't know, man.
TOM BALLATORE: Not too much yet, but every year.
I used have hair, like, down to here.
But then it's coming up, and up.
COLTON OGDEN: Hairline went up a little bit.
TOM BALLATORE: It's going up.
COLTON OGDEN: DJ Crest says, "I'm learning Japanese very, very slowly."
TOM BALLATORE: Hang in there.
I don't know what your native language is.
But if it's English, like mine, it's totally different than English,
which makes it fun.
COLTON OGDEN: Yeah, it's super--
very different.
But that's why I like it a lot.
TOM BALLATORE: That's why I like it.
COLTON OGDEN: I'm more entranced by Japanese
than I am by Spanish and German, although I like Spanish
and German a lot, as other languages.
But Japanese, as a mental exercise to me, just seems so exciting.
And recognizing Kanji after a while, and knowing how to read--
learning how to read Katakana was actually very difficult for a while.
Because everything looks so similar.
And I'm sorry.
I apologize, going on this side note about Japanese.
But if you're interested in learning foreign languages, I advocate for--
and I think Tom would advocate for-- learning something so
different from English, like Japanese.
But learning any language is honestly great.
It's honestly terrific.
TOM BALLATORE: [SPEAKING JAPANESE]
COLTON OGDEN: It's super hard to read that cause it's so small.
TOM BALLATORE: [SPEAKING JAPANESE]
COLTON OGDEN: Going slow--
that means, "going slowly," right?
TOM BALLATORE: I'm going real slow, yeah.
Cool, awesome.
COLTON OGDEN: "My kid is in Japanese school," says Brandon.
Oh, that's pretty cool.
You know, actually, I do know that it is popular for Japanese
to go to New Zealand.
It is a very popular thing.
So it makes sense, because there's going to be Japanese tourists in New Zealand
for them to do so.
In California, there's no Japanese in school anywhere.
It's such a very niche thing, just because I
don't think there are very many--
I guess there probably are Japanese tourists and immigrants that
come to California, but probably not to the degree
that they come to places like New Zealand and Hawaii
and things like that, right?
[TOM LAUGHING]
TOM BALLATORE: Yeah.
No, it's funny, because when I was getting into Japan,
that was when they had their bubble, like early '90s.
And it's kind of like China now, where China
is seen as a language that should get taught in schools and stuff.
But hey, just learning a foreign language if you don't speak one.
And most of you who are attending here probably
do speak more than one language, unlike many of my patriots.
COLTON OGDEN: I think it's becoming--
TOM BALLATORE: Compatriots.
COLTON OGDEN: --increasingly common.
I think people are--
TOM BALLATORE: It's great.
COLTON OGDEN: Yeah.
We're all sort of getting more interconnected, which is pretty cool.
TOM BALLATORE: Sweet, all right.
COLTON OGDEN: "I look old as hell.
I definitely don't look like a 43-year-old child," said [INAUDIBLE]..
I don't know if that's a stab, or if that's a--
is he saying you look like a child.
TOM BALLATORE: No.
They're talking about themselves.
COLTON OGDEN: Oh, OK.
I got you.
"Every time you say no to--"
TOM BALLATORE: Why do you keep saying 43, though?
COLTON OGDEN: "Every time you say no to a woman, a man's hair--
TOM BALLATORE: You probably shouldn't read that one.
COLTON OGDEN: --1 centimeter.
Oh, actually, yeah, I think that I probably shouldn't have read that one.
"This has been a great tangent," says--
[INTERPOSING VOICES]
Yeah, it's not terrible.
Probably a truth.
"Only Japanese I know from anime," says Bhavik.
Anime's great.
Anime is great.
It's a little bit hard, because Japanese anime
is a little bit different than what you would see conversational Japanese a lot
of the time.
It's very exaggerated.
TOM BALLATORE: Oh, yeah.
All the kids who studied anime in my Japanese class,
they called themselves "or-eh," which is sort of like, (GRUFFLY) me.
And you're not going be saying that normally.
But you could immediately spot them.
COLTON OGDEN: How many people say, "seh-sha"?
[TOM LAUGHING]
TOM BALLATORE: "Seh-shaw."
As a joke, we say it.
COLTON OGDEN: Do you really?
TOM BALLATORE: Yeah, some, dude, samurai thing.
Anyway--
COLTON OGDEN: [SPEAKING JAPANESE]
TOM BALLATORE: [SPEAKING JAPANESE]
All right, so that was a tangent.
COLTON OGDEN: That was a cool tangent.
At the end of the day, learn a language.
So we did lists.
Oh, we were going to do a nested list, actually.
Why don't we do that?
So we have an ordered list.
And just for the sake of demonstration, I'm actually going to--
"He knows the following languages."
And notice that I'm doing a couple of things.
So I have an LI.
So this nested list-- if we want a list inside of a list,
it needs to go in an LI, because that's part of the list, right--
an ordered list.
So this is going to be number one, this list.
And there's going to be a text--
"He knows the following languages."
And we're not going to assign these any particular order
but notice that I have the text within the LI, which is separate from the UL.
And then within the UL, I'm going to do just what we did earlier with LIs--
List Items, not List Elements, as I unfortunately erred earlier.
And I'm going to say, English, because I'm
assuming that was your first language.
Second one, we'll say Japanese.
Well, actually, to be fair, I think German was your second language
if I'm not mistaken.
TOM BALLATORE: (SCOFFING) Yeah right.
No.
COLTON OGDEN: But it was the second language you studied, right.
TOM BALLATORE: Yeah, but I mean--
COLTON OGDEN: You know enough German to be dangerous.
TOM BALLATORE: Oh, yeah.
COLTON OGDEN: To be very dangerous to yourself.
So we have English, German, and Japanese.
[TOM LAUGHING]
TOM BALLATORE: I do.
I only know bad words.
Oh, God.
Sorry.
COLTON OGDEN: "How to get a job in the USA
from Russia knowing only HTML and CSS?" says Paulton.
Probably not going to get a job in the US from Russia knowing only HTML
and CSS.
I think you need to know at least JavaScript
to be competitive in the web scene.
As a designer, I will say if you have incredible CSS design abilities
so that you can make absolutely the most beautiful web pages, maybe you
can do that, maybe you can get a company to sponsor you.
And I don't know the laws offhand.
I don't know how it works.
But generally, to be competitive in the web scene,
I would say HTML and CSS is nowhere close to what
you need to actually be marketable.
I think you need a lot of skills and a lot of familiarity
of programming and programming concepts beyond just CSS.
At that point, you're just a designer.
You're not really a programmer.
But HTML and CSS is a very valuable foundation
upon which to build web development career, definitely.
Definitely look into JavaScript after that.
All right, so we have a list element within our ordered list.
And notice that within that list element, I've included--
and this is nesting again, which we've looked at before--
some text, and then another UL, within which is more LIs.
So a lot of nesting here.
But this is just a way to sort of structure our data in the way
that we want.
And so at the end of this, as soon as I refresh, we're going to see number 1,
and it's going to have "these are the languages Tom knows," and then
within that, we're going to have another list.
And as I said, indeed, number 1, he knows the following languages.
And then indented, once again-- so lists indent--
we get another layer of indentation, and then we
get English, German, and Spanish.
And there is styling in lists, inasmuch as if one list is indented at one level
and another is indented at another level,
those two list get different default stylings.
And you can default style--
you can override the style for whatever lists you want and their elements.
But notice that the circles here are hollow.
They're white circles.
And when we had it just at the base level,
just a single layer of indentation, they were black circles.
So you get different styling, and it kind of helps you to visually see.
For example, if we make this a UL and I make this a UL,
taking away the numbers, adding those dots again--
and I refresh-- the black is like level 1, and then hollow is level 2.
And I actually don't know, offhand, what level 3 is.
But easily we could just say--
let's pretend that Tom is an actor.
TOM BALLATORE: Midwestern.
Oh, OK.
Thomas Ballatore actually is an actor with a Kevin Bacon number of 2.
COLTON OGDEN: Interesting.
So you have a second degree towards Kevin Bacon?
TOM BALLATORE: Yeah.
COLTON OGDEN: You know somebody?
TOM BALLATORE: Well, the same name, Thomas Ballatore, Bacon number 2.
Because he was a Jim Carrey movie.
COLTON OGDEN: Ah, interesting.
Gotcha, OK.
So if I go into what we just did here, and I type in another UL.
And again, I'm going to say "English dialects--"
and this is just fictional at this point.
I don't know whether you do or do not, and I won't ask you to prove,
unless you want to.
TOM BALLATORE: I can do the Boston one.
COLTON OGDEN: Let's say that he has a--
TOM BALLATORE: (WITH ACCENT) It's a baby whale.
COLTON OGDEN: I guess, how would you describe the default?
I guess you would just say Western accent, I guess, a Californian--
not Illinois.
TOM BALLATORE: (WITH ACCENT) Hey, pard'ner.
Midwest, Midwest.
COLTON OGDEN: I guess Illinois, right?
Oh, Midwest, I guess, is fine.
TOM BALLATORE: Chicago.
Them Bears-- da Bears.
COLTON OGDEN: I would say your accent, to me,
sounds more just like vanilla American.
TOM BALLATORE: Vanilla Ice, yeah.
COLTON OGDEN: Yeah, Vanilla Ice, yes.
We'll say that he has a southern accent of debatable quality, and then
an English accent--
proper English accent--
TOM BALLATORE: (WITH ACCENT) Yes, of course.
COLTON OGDEN: That sounds pretty good actually.
TOM BALLATORE: (WITH ACCENT) Yes, thank you very much.
COLTON OGDEN: I'll take it.
I'll take it.
So now we have three lists that are nested.
And then notice, once again--
TOM BALLATORE: Is that a square?
COLTON OGDEN: We don't have a black circle, we don't have a white circle,
we have black squares.
So you keep nesting lists, and you'll get different styles.
And this is just a kind of debatable-quality low-key savage.
Just a friendly jab.
TOM BALLATORE: (WITH ACCENT) Spot on.
COLTON OGDEN: Just a friendly jab, just a friendly jab.
But this is how you nest HTML, in concept.
And you can apply this to any HTML.
And you can nest, arbitrarily, HTML elements, in and out of other elements.
"Change the style manually, Colton," [INAUDIBLE]..
Oh, oof.
TOM BALLATORE: There was actually a question
that went away about a PSD file to HTML, like a Photoshop design file.
We're not going to address that tonight.
But yeah, you would have issues with trying
to get things lined up into your HTML.
Maybe that will be a CSS issue.
But I did see the question.
We just don't--
I'm not going to address it, probably, tonight.
COLTON OGDEN: Yeah, I'm actually not an expert
on Photoshop and getting that to work in the context of a web page.
I know that there are tools like Dreamweaver
which have normally tried to solve that problem, which
is another Adobe product--
kind of an older Adobe product.
And I don't think people typically use it much these days.
People tend to use something like Wix or WordPress
to lay out their websites because it's a little bit more reliable--
popular, and they have a lot of really cool tools built in.
But yeah, based on an article Tom pulled up,
you can mess around with websites and PSD.
I says that they can be sliced and turned into HTML code.
But that sounds like it's a pretty manual process, honestly.
It sounds like they're referring to somebody actually, as a designer,
going into the assets and manually figuring out
where all the alignments are.
So probably not a one-to-one mapping of any kind.
Video2232, Harry [INAUDIBLE],, and Luna079,
thank you very much for the follow.
Cool.
So we did that.
Somebody asked me if I could style something, I guess, manually-- a list
manually.
And I could do that.
I offhand don't know the exact CSS tag.
And again, this will be something I prepare in advance for the CSS stream.
But I can go into CSS list elements styling, for example,
and just pull up what they have on W3 schools maybe.
And let's see, what do they have?
List style type.
Yeah, that looks like the particular CSS attribute
that you would use to change the style.
So if I were to just to say--
and I'd have to figure out--
oh no, I would just do it by overwriting it on the UL itself.
TOM BALLATORE: Exactly.
COLTON OGDEN: Yeah, so I would say, UL.
And I would say style is equal to list style type.
And let's say that I wanted the first one to be square instead of circular,
which it is by default. I would just literally type, square, like that.
And this is sort of like embedded CSS within a tag.
And this is, again, what we looked at earlier, kind of
with the width attribute.
But that's a specific attribute.
This, more generally, just means I can put any CSS in here that I want to.
And it will apply just to this tag, just this specific-- sorry,
to this specific tag.
And so let's go ahead and run this.
Let me make sure that I am correct in this.
So if I am correct and I've done this properly-- and I may not have--
these circles on the very far left should turn to squares.
And they did.
So, cool.
Easy-- wipe my hands.
TOM BALLATORE: Wix-- is that the one that's heavily advertising on YouTube,
like the first five seconds I skip through it.
I think it was a Wix thing.
COLTON OGDEN: I don't know.
I have an ad blocker, so I'm not sure.
TOM BALLATORE: Anyway, yeah, but Wix, yeah, definitely, hm.
[COLTON CHUCKLING]
I remember the first web page I made.
Then I had somebody actually that did web stuff do it.
And he did everything in Notepad.
And I was like, well, why aren't you using, like, Macromedia Dreamweaver?
He's like, dude, you just type it in.
And David said that the other day.
And people were like, really, you don't use an editor?
And it's-- yeah.
COLTON OGDEN: The modern tools are really good.
And I think most people now are trying to do a basic website,
like a blog or even a very basic e-commerce site,
I think it's generally pretty common that they
will use a tool that lets you sort of self-serve like that, like a Wix
or a WordPress.
But it's a little different.
There's a learning curve associated with learning that tool versus learning
web development.
And you're limited.
They have only a core set of plug-ins that you're
going to able to use to get the content that you want.
So you kind of have to do it depending on what the needs of your website are.
But I think it's great.
WordPress-- I'm not an expert on WordPress or Wix.
WordPress is based in PHP if you want to actually program
the plugins and stuff like that.
I don't know as much about Wix.
But they're great for, like I said, more static websites.
It's a cheap way to get a website up and running
without needing to be a web developer necessarily.
TOM BALLATORE: But if you're following the stream,
you probably could just get Bootstrap and play along, and probably
come up with something pretty good.
COLTON OGDEN: Yeah, Bootstrap is going to be an awesome stream.
We'll cover that, probably in a few weeks.
I want to say maybe two weeks or so.
Next week we have CSS and Render 50.
And I'm going to take Bhavik up on his challenge to do Minesweeper actually.
We're going to program Minesweeper in LOVE in Lua, which would be awesome.
I've never programmed Minesweeper, but it's a very simple game.
We can check it out.
TOM BALLATORE: WordPress is-- oh, no, they're
talking about the Microsoft Word for HTML.
Funny, like that client I was talking about-- what
was the issue with the client?
I forget.
Oh, the Lorem Ipsum sum thing.
They had a 30-page Word document that they just
wanted dumped into a single HTML file.
And design-wise, it was just horrible.
So in Word, I just saved it as HTML, and just put it up.
Because nobody's going to look at it anyway.
So here you go.
That's what you want?
That's what you got.
So I did actually use Word for HTML.
COLTON OGDEN: That's interesting.
I can't say I've ever done that.
But that's pretty cool.
"Chip's Challenge-- Colton, do you remember that game?"
No, I don't-- Chip's Challenge.
"Top-down tile-based puzzle video game for the links."
Oh, yeah, it looks kind of like Minesweeper, doesn't it?
And there's a Windows version.
Oh--
TOM BALLATORE: Commodore--
COLTON OGDEN: --wait.
TOM BALLATORE: --Amiga, OK.
COLTON OGDEN: No, I do remember this game.
I played this on Window 95, back in the day.
I totally remember this game.
That's crazy.
Wow, OK.
That just opened up a pocket of information in my head
that I thought was long gone.
So I appreciate that, Adam.
That's awesome.
Wow, I totally forgot about that.
That's super cool.
We could make a game similar to that eventually.
It's very simple.
It's just if you have a particular key, move through a block, and then get rid
of it when you have it.
The challenge there is just laying out your level such
that it's logically solvable.
That's really the only challenge in that kind of tile-based game.
It's very simple.
Just move on a grid, which we've essentially looked at with Snake.
But in this case, you would control your position.
"Do you know the game Jazz Jackrabbit?"
I do know the game, but I haven't actually played it.
TOM BALLATORE: There's a question about that about,
"any advice on not turning your HTML into div soup?"
OK, so a really important change with HTML5
is that a lot of the things where people would have div header, div footer,
div main.
There used to be hacks like that.
And now they are their own full-fledged tabs.
But of course divs are still very useful when
you do want to have a division of something in your page.
You could use sections instead, perhaps, sometimes.
But divs are definitely probably going to decrease in provenance
as these other tags become more used.
COLTON OGDEN: Yeah, the sort of so-called semantic elements,
the header, footer, section, article, those kinds of things, yeah absolutely.
I mean, even Bootstrap kind of abstracts that out.
It has Jumbotron.
Actually it uses, not Jumbotron, but it has some of its own tags
that it uses kind of semantically.
And it doesn't have a ton of--
it does have quite a few divs, but not, I think, as many.
I see Bootstrap likes to do nav a lot.
I see that a lot in there.
We'll cover all of that.
We'll have a separate stream.
TOM BALLATORE: Cool.
COLTON OGDEN: Cool.
"Creating themes for WordPress is not that hard.
It's way better than using third-party plugins to add custom HTML and CSS."
I'd have to do a deeper dive into it, because I'm not
super familiar with WordPress.
But yeah, it's pretty popular amongst people
for making quicker, smaller, more static web
pages that aren't as infrastructure-heavy,
like the Facebooks and Googles and stuff, the crazy things that
need crazy algorithms to work and manipulate massive amounts of data.
Kind of e-commerce blogs, simple websites--
good use case for WordPress and Wix.
All right, so we covered lists now.
So let's go ahead and talk about tables.
[INTERPOSING VOICES]
What did you think we were doing?
TOM BALLATORE: I though we were going to do forms.
But hey, tables are cool, too.
COLTON OGDEN: No, forms I actually have after tables.
Right after tables, we do forms.
So let's get rid of Chip's Challenge.
My name is Tom Ballatore.
I love that.
That's awesome.
So we have a pretty cool web page here, and I
feel like it'd be cool to make a table that kind of illustrates aspects
of your character, or something--
TOM BALLATORE: Oh, OK, character, yes.
OK, fine.
COLTON OGDEN: Your character, or of you-- something.
We'll have a Tom table.
TOM BALLATORE: A Tom table.
COLTON OGDEN: We should have a Tom table.
But we have to figure out, first of all, what that Tom table would include.
So would it be maybe--
TOM BALLATORE: Countries I've been to.
COLTON OGDEN: I guess.
TOM BALLATORE: Oh, that'd be too long.
COLTON OGDEN: I'm trying to think.
Because we need rows and columns, right?
A table is essentially kind of an Excel doc almost.
It's a set of rows and columns where you arrange
data in a rectangular sort of layout, where you have things
that are a row of information every--
I guess maybe our rows are people, maybe CS 50 staff.
Tom is the first row.
And maybe there's foreign languages that that person can speak.
[INTERPOSING VOICES]
TOM BALLATORE: I see.
You're getting 2D, man.
COLTON OGDEN: And maybe there's programming languages
that that person can speak.
So maybe, I don't know, JavaScript?
I'm trying to, in my head, kind of frame it out
so we can have a bunch of diverse content.
But this is great, because we can actually use those GIFs.
We can use the GIFs from the other website
to integrate elements and make some really cool tables.
So I'm going to delete--
TOM BALLATORE: [INAUDIBLE],, see you later.
It's 3:26 in the morning where he is.
COLTON OGDEN: Oof, that's late.
Well thank you so much for tuning in, in spite of how late it is.
Appreciate your attendance.
We'll see you next time.
Let's delete this overarching UL.
Let's get rid of it.
And I can I can afford you the luxury of taking the emphasis away from you.
We'll say, why is CS 50 awesome?
TOM BALLATORE: Oh, it is.
COLTON OGDEN: CS 50 is awesome, right?
And we'll get rid of your image, too-- for now.
It's not gone forever.
It's not going to be gone forever.
We're going to use it again.
I promise you that.
So we're going to get rid of that.
I'm going to go back here and refresh.
And you can see that now we have a web page that
just says, "why is CS 50 awesome?"
CS 50 is awesome for a lot of reasons in my opinion.
But we're going to specifically say, "why is this is the CS50 staff
awesome?"
So it would be kind of tedious to just have a picture of maybe Tom
here, a list of all the things that are cool about him,
and then a picture of David underneath that, and all of the things
that are cool about David, and then a picture of maybe Brian,
and all of the things that are cool about Brian.
But instead, what we can do is lay things out in two dimensions,
and actually take use of some of the horizontal spacing
that we have in our web page.
So let's go and do that.
And the way we do that, first of all, as we've already sort of alluded to, is we
use what's called a table.
And a table is not unlike what you would see,
for example, in an Excel spreadsheet, something that looks kind of like this.
I'm looking for-- here we go.
This is perfect.
So this is exactly sort of what a table is.
It's effectively a 2D layout of rows and columns.
So you can see here, all the rows are marked with numbers,
and all the columns are marked with letters of the alphabet.
So in this case, at cell A1--
and each of these little individual rectangles are called cells--
we can maybe say that at column A, for every single row,
that's going to be the person's name.
So if Tom were the first entry, if he were at row 1, column A would be name.
So Tom would go here.
This would be Tom.
And then maybe languages that they can speak--
Japanese, English, German-- that would go in cell B1.
B would be the column for everyone's language that they can speak.
And then maybe C would be instruments they can play.
So do you play an instruments, by chance?
TOM BALLATORE: Yeah, piano, marginally.
No concerts.
COLTON OGDEN: We'll say, "piano, marginally," in cell C1.
That'll be Tom, his instrument that he can play is the piano, marginally.
We'll just say piano.
TOM BALLATORE: The stream brought to you by Snapple.
COLTON OGDEN: Yeah, there you go, exactly.
TOM BALLATORE: The best thing about being on CS 50 staff
is you can go to the refrigerator and just take a drink.
COLTON OGDEN: Yeah, true.
We've got a lot of--
[INTERPOSING VOICES]
Shout out to Valerie, one of our staff who is our logistics specialist.
She takes care of a lot of things, including making
sure we have amazing snacks and drinks.
I'm going to go ahead and create a table.
So I'm creating essentially a spreadsheet here.
And you can format this however you want.
Eventually, by default, the formatting is
going to essentially take the largest element of any given column or row,
and just kind of make that row or column that large.
It just accounts for the largest possible use case
that we have the content.
So it kind of auto-sizes, which is pretty great.
So you can have an arbitrarily-sized image.
And it won't override the size of a grid.
It's not a uniformly-sized grid.
It's a dynamically scaling grid.
Brenda says she misses Snapple.
I guess they don't have Snapple in New Zealand?
That's tragic.
TOM BALLATORE: The sheep drank it all.
COLTON OGDEN: Brenda, Snapple?
TOM BALLATORE: The sheep drank it all is what I said.
COLTON OGDEN: Sorry, does she drink it--
I thought you said--
TOM BALLATORE: The sheep drank it all.
COLTON OGDEN: I thought you said, does she drink at all.
TOM BALLATORE: I'm making a New Zealand joke there.
COLTON OGDEN: Got it, got it.
OK.
It flew right over my head.
TOM BALLATORE: Sorry.
COLTON OGDEN: I misunderstood.
Table-- so a couple of things.
So tables are a grid of cells in rows and columns, but they also have a head.
And you probably have seen this in an Excel doc, for example, that--
well, I got rid of the image, tragically.
But we'll say Excel spreadsheet once again.
And I'm going to go back down here to where this was.
And looking at a spreadsheet, you might not know necessarily what it is,
what the data is.
If you're just looking at it, and especially if the data is relatively
arcane, it's not as basic as name, languages spoken, instruments played,
if it's financial data or other information,
we might not know what column A, or column B, or column C denotes.
So we usually have what's called a header row, a head.
And this is where we can say, names go here, instruments go here,
languages go here.
And that will apply to the entire column for every subsequent row.
[INAUDIBLE] 77, Luna079, Robex123, and [INAUDIBLE],,
thank you very much for the follow.
Let me make sure I didn't miss anything else.
Harry [INAUDIBLE],, Video2232-- I believe I got them.
So thanks all of you for following.
Appreciate it.
There is some crazy stuff going on out back.
TOM BALLATORE: Yeah, can you hear that?
COLTON OGDEN: I don't think anybody can hear that.
But there's like a herd of animals out there doing something.
thead is going to be that exact idea that I just
illustrated, the idea of a single row that's
going to basically enumerate what's going
to be in each column for our table.
And it's going to display as such.
And just like a thead, we also have a tbody.
And this is kind of an analog to what we see with the HTML document itself.
So I'm going to go ahead, and in my thead, I'm going to do--
so I believe you can technically use td's here,
but the trend is to do th, so a thead element.
This is going to be a table head element rather.
And what this is going to do is these are the individual 1 by 1 columns
in our spreadsheet, in our table.
So I can say, name--
or actually, what I should say is, picture--
because we are going to want a column for the picture.
We're going to use the GIFs again.
I'm going to say, name.
I'm going to say, languages spoken--
just short for languages that that person can speak.
And then, instruments played.
Or rather, we'll just say, instruments, and then we'll say, languages.
And I'm just going to render this as-is first,
so we can see what it looks like.
And indeed, we do see that we have, sort of laid out here, picture, name,
languages, and instruments.
But one thing that people are probably noticing is that this looks pretty bad.
We actually don't have any way to differentiate where our columns are,
where our cells are, where our rows are.
So I'm going to do just a very quick and dirty border equals 1 string.
And notice that it sort of marked it in red.
And that's just basically saying this is a this is a deprecated attribute.
You don't want to do this.
You typically don't want to do this.
This is another sort of styling, going with the HTML, kind of an old attribute
not working out.
But it allows us to very quickly illustrate the way that this table has
laid out our information.
We have picture, we have name, we have languages, and we have instruments.
TOM BALLATORE: That is ugly as sin, isn't it?
COLTON OGDEN: A little bit.
It's better than nothing, though--
TOM BALLATORE: Oh, absolutely, absolutely.
COLTON OGDEN: But yes, certainly--
[INTERPOSING VOICES]
Tom got angry for a moment.
I'm sorry.
TOM BALLATORE: I was not angry, no.
I was just--
I don't know what I was.
I'm always happy.
COLTON OGDEN: Tom's a pretty happy guy.
I've never seen Tom angry.
"Only if you're working in multiple dimensions.
Why would you do that?"
TOM BALLATORE: There was a question about using nested tables.
And there's somebody asking--
and I can't read the name from here-- but about using email in a--
where was it?
Did it go off the top?
COLTON OGDEN: "How to create a responsive HTML email using tables?"
This is going to kind of different depending
on your email provider, right?
Because I think in Gmail, you can embed HTML.
But for example, if you're using Outlook or if you're using Yahoo or Hotmail,
I'm not sure how they actually serve it, whether they
have an HTML parser on their back end that
can take HTML that you specify within your email message,
and actually render that on the--
It also depends on the client of your email.
Maybe you're using an email program that doesn't render HTML.
So it literally will just, in that case, show you HTML--
the HTML words.
It will basically render it like it's plain text.
So it's kind of up to your service at that point.
It's not, I don't think, a standardized thing.
MeowCat says, "that is a beautiful table."
And "the table has a retro feel."
I would agree.
I would agree that it's a retro feel.
I'm not sure if it's beautiful.
But it's going to look beautiful because we're
going to have Tom's picture in there pretty soon.
So we'll show you how this looks.
So tbody-- now, within a tbody we have to specify.
Because I can just start writing elements again,
but how is it going to know when to break to the next row?
How is it going to know, this is Tom's row, this is Colton's row--
I don't know if I'm going to put myself in here.
But I actually don't have a picture on the CS 50 website,
embarrassingly enough.
I didn't show up that day.
I should have.
I think it didn't occur to me we were shooting pictures.
But we'll use David, we'll use Tom, and then we'll use Brian.
Because I know Brian plays some instruments and speaks some languages.
And I know he has a picture on the CS 50 website for sure.
So the way that we actually enumerate the rows in our body is going to be
using tr's--
so table row is how you can think of it.
I think that's actually what it's short for.
But within a table row, now we can actually
do kind of what we did up here with table head, in that we can enumerate
all of the columns, all of the cells--
table data, rather-- with the td keyword.
No, it's th, it's like a table head piece of data.
And I think you technically can use td here.
It just won't be bolded.
But td is what it expects to exist within each table row.
So these are the individual cells within a given row, the td's.
And then the row itself is marked out by the tr.
TOM BALLATORE: td standing for?
COLTON OGDEN: I think it's table data.
TOM BALLATORE: Yes.
COLTON OGDEN: I'm not 100% sure.
Is that--
[INTERPOSING VOICES]
So we're going to say--
this is going to be our first row.
And this is a great opportunity, actually,
to say how to do comments in HTML.
TOM BALLATORE: Oh, yeah.
COLTON OGDEN: I want to say, this is Tom's row.
TOM BALLATORE: You just did some wicked short-cutting there.
COLTON OGDEN: No, I just typed it.
TOM BALLATORE: Oh, and it auto-completed.
COLTON OGDEN: Yeah.
TOM BALLATORE: Oh, OK.
COLTON OGDEN: So VS code is great, and it does that.
A lot of text editors will do that.
But what I did was I typed this less than,
and then an exclamation point, which is kind
of what we've seen with a doctype HTML thing, and then dash dash.
And what that's done is, anything that I type
within the bounds of this new sort of tag that we've seen
is actually going to be completely ignored by our web browser
when it renders the HTML.
So this allows us to associate hidden data that's only for the programmers
or for the people reading it in Chrome.
This is going to be Tom's row.
And then when we want to close it, we want
to get back to the actual HTML that contains our information,
we can say, dash dash greater than, and that closes it.
You can sort of think of this as being its own sort of tag that
can be arbitrarily sized.
So this is going to be Tom's row.
I'm going to say-- it's Tom Ballatore, right?
And actually that' not accurate.
There needs to be a picture first.
So td-- so here's another showcase for embedding tags within other tags.
I can say, image source is equal to Tom.gif, right, just like I did before.
And then I can say-- because we're doing it in order of picture, name,
languages, instruments.
This needs to be the case for every row.
Otherwise there's going to be some inconsistency with our information,
which is important that we not do that.
So I'm going to say, Tom Ballatore.
I'm going to say languages that you can speak.
So we'll say English, Japanese, and German.
TOM BALLATORE: No, stop saying German.
COLTON OGDEN: Let's say a little bit, just for--
TOM BALLATORE: Swahili.
COLTON OGDEN: Just for a little bit.
And then instruments-- piano, a little bit.
TOM BALLATORE: Yeah, a little bit.
COLTON OGDEN: A little bit.
And then let's go ahead and refresh this.
And notice that now, not only do we have a new row, it also styled everything.
It included the styling that we included with our table head.
But it also put it into our row here.
And notice that every cell is only as large
as it needs to be to contain the largest size of the other cells.
For example, all of these cells are as vertically tall
as they need to be in order to support this image because they're
all in the same row.
If this image were larger than these other cells,
your data would look a little weird.
Your table would be kind of skewed.
These would be bumped up in a weird way.
Each individual cell, in terms of its horizontal width,
is as large as the text that it contains.
For example, you can see all of these cells
are exactly as large as the strings they contain--
Tom Ballatore; English, Japanese and German; and piano, a little bit.
TOM BALLATORE: Good question here.
What if, let's say, you were missing the one for English, Japanese, and German
if you only had three td's inside there?
COLTON OGDEN: Good question.
I have to imagine--
[INTERPOSING VOICES]
Probably gives it a--
TOM BALLATORE: Comment that out maybe?
COLTON OGDEN: Yeah, let's do that.
So missing the languages one, you said?
TOM BALLATORE: Yeah.
COLTON OGDEN: So the first thing that we can immediately assume
is that this is going to get shifted over one.
Because it does it based on the order it sees the tags.
So we know that this is at least going to get shifted over.
But what's going to happen to instruments?
That'll be fairly interesting to look at.
So let's refresh.
And we see that it's just empty.
Nothing gets placed there.
No box actually gets placed.
And so part of the styling involves putting a rectangle there,
if and only if there's actually some content in that cell.
TOM BALLATORE: So the workaround would be to just have an empty td tag.
COLTON OGDEN: An empty td tag.
[INTERPOSING VOICES]
If you wanted to get the square there.
Because I actually kind of like the fact that there's no square there.
So I guess it comes down to a matter of style.
But yeah, in that case, you would say maybe put an empty td.
But I guess if you mean to say, if for example, name was empty--
oh, I see what you mean.
In this case, yeah, this needs to get shifted over.
I misinterpreted what you said.
TOM BALLATORE: Yeah, sorry about that.
COLTON OGDEN: No, don't apologize.
My fault. So in this case, if I wanted to, for example, just say--
let's say that we don't know what languages you speak and we
wanted to comment this out, we would exactly do what you said.
We would put an--
did I screw that up?
[INTERPOSING VOICES]
What it would do is we would just put, like you just said,
an empty td, refresh, and indeed the emptiness is in the right spot, but--
well, that's it.
The emptiness is in the right spot now.
It's not shifted.
We just had to put empty placeholder data
into our DOM to make sure it worked.
Let's make sure I'm keeping up with comments, because I feel like I
have not been reading any of them.
TOM BALLATORE: I've been reading them.
And we've-- of course skipping a few things.
There are good points here, though.
This issue about tables with responsive design.
I think there's definitely other ways of--
I think tables get abused in the sense that people
want to lay out their thing in a grid or something, so they use tables to do it,
and just don't have margins.
That's definitely a problem.
There are other ways around that, with either flexbox or grid.
COLTON OGDEN: Oh, sure, yeah, flexbox would be great for that--
Align data that's responsive.
TOM BALLATORE: It just does all that work for you.
COLTON OGDEN: Yeah, we'll use flexbox in a future stream,
and we'll cover sort of the use cases for that.
One thing I don't like about this table is that the picture is really large,
and it's also kind of grainy.
I want to make the image just a little bit smaller.
So I'm going to do that.
I'm going to actually set this width to 100 pixels, just how we did before.
So now the table is a little bit easier on the eyes, I think.
And then we can go ahead and take out this--
and that's not a jab at you and the size of your image, by the way.
TOM BALLATORE: That's fine.
100 pix is cool enough.
COLTON OGDEN: Oh, I screwed that.
Because now we have the empty td.
And notice that if you have an extraneous td--
if that's the right word.
I apologize if that's the wrong word.
If you have an extra td, it actually does the same thing
that we saw earlier, but with the table header.
The table header gets added an extra bit of space
to account for this weird sort of external element
that's not accounted for by the table head.
So that's kind of a cool little thing to look at.
So let's refresh.
Everything's aligned.
Let's go ahead and add an entry for David.
I'm actually going to just copy and paste this whole thing.
And the table body will just scan for as many tr's as it sees.
And it will just add a row, a row, a row, a row,
until it reaches the slash tbody tag.
And I'm going to change some of these.
So first of all, what we need to do is we
need to get David's picture off the CS 50 website.
So let's do that.
That's the most important step.
And I'm going to get Brian's as well while I'm there.
So I'm going to go over to the staff page.
It should be cached now, which is nice.
We'll save David's image.
We'll call this David.gif.
And then we'll call Brian's Brian.gif.
And now what I can do is I can say, this should be David.gif.
I'm going to copy this again.
And this should be Brian.gif.
[INAUDIBLE] David.gif and then Brian.gif.
The comments need to be updated.
So this should be Brian's row, this should be David's row.
David's name is not Tom Ballatore.
It is David J. Malan.
He speaks English, Spanish, and Italian, and he plays drums.
And then Brian's row--
Brian Yu.
He speaks English and Spanish.
He might speak more.
I actually don't know if he speaks more than English and Spanish.
I know he at least speaks Spanish and he plays piano.
And he might play more instruments than piano.
That's just the only instrument I happen to know that Brian speaks.
If Brian's in the chat, Brian, definitely
let us know what languages you speak and what instruments you play,
and I'll add them.
I'll update it.
But you can see that now, because we've added a couple of table rows--
tr's-- and the right td's-- the table data-- in the right places,
we have a full table here, a list of information that's sort of all evenly,
nicely, horizontally aligned.
It's not a bunch of verticality inasmuch as we have a image
with a list of all these interests.
Everything is laid out in a way that we can visually see it much more easily.
And this is an important thing, obviously,
in the era in which they created HTML, and HTTP, and the internet,
and wanted to transmit information.
And in science, certainly you see tables laid out all the time
that pair data with other bits of data.
So this is a useful thing.
And it's something that we can certainly use now, even in the modern era.
With some styling, we can make it look awesome.
"What is your name, author?"
I'm guessing this is referring to me.
So my name is Colton Ogden, and this is Tom Ballatore.
I am a CS 50 full-time staff a technologist at Harvard.
And Tom, what are--
TOM BALLATORE: I am a teaching fellow.
COLTON OGDEN: And what company do you work for again?
TOM BALLATORE: Lake Basin Action Network.
It's basically doing remote sensing and GIS work.
COLTON OGDEN: Nice.
And like you said, you teach at CS 50.
You're here all the time.
Well, I mean, as much as you can afford to be.
TOM BALLATORE: As much as I can, yes.
COLTON OGDEN: Because I know it's probably
very time-consuming to make that trip.
It must be exhausting.
TOM BALLATORE: Flying from Japan, I get real tired.
Sorry, that was really stupid.
COLTON OGDEN: But yeah, that's that is tables.
You know, tables are very important.
It's the basics of tables.
You can do the same thing with tables that you can do with anything else,
inasmuch as nesting, tags, and getting very intricate layouts for things.
You could put lists into tables.
You can put paragraphs into table elements.
You can put more images.
You can put lists with images in them.
Really it's meant to be a very flexible format that
allows you to do just about anything.
Now I realize we're getting close to the three-hour mark.
So the last thing I want to cover before we end is forms.
Because we said we'd get into forms.
Forms are a very important aspect of HTML and HTTP in general.
And so it serves us, I think, to--
appropriately, it serves us.
It serves us a--
[INAUDIBLE]
TOM BALLATORE: And while you're getting that ready,
there's a great discussion on the bottom here, with Brendan, saying,
"do you need alt attributes for images.
And somebody is saying--
COLTON OGDEN: [INAUDIBLE]
TOM BALLATORE: And then somebody is saying,
alt attributes are not necessary."
I mean, yeah, the page will render fine.
But if people can't see, they're not going
to be able to understand what the image is if they can't see it.
So you really should be having alt images.
I mean, we're just sort of playing around now, and assuming
that everyone's seeing this.
But definitely, any image you have, you have to have good alt text.
There's really an art to that.
Let's say if you have, like, Mona Lisa.
What do you write?
I'm like, woman in old painting, like semi-smiling, kind of.
I mean, alt text is really difficult. But you can definitely
find ways around that.
So you definitely put alt tags for images and other things like that.
COLTON OGDEN: Yeah, I forgot that that was--
we got so caught up in this awesome set of stuff that we--
originally, you wanted to talk about all the alt stuff.
We should definitely do that.
So I think we should maybe take an extra--
are you OK with taking an extra 20, 30 minutes to cover that, in addition
to forms, or do you have to leave?
TOM BALLATORE: No I'm cool with that.
But I think people are probably getting tired.
But yeah, that's fine.
Go ahead.
COLTON OGDEN: So let's definitely do that.
And I apologize for not keeping up with the stream.
And yes, to Paulton-- yes, Colton Ogden is my name.
Clipped.
And [INAUDIBLE] says that they took a subclip of the video.
I don't remember exactly.
Do you need alt attributes for those images?
And to your point, yes, ideally.
We would say, a man who does not look 48 spinning around in place,
we would say for this one.
TOM BALLATORE: I wonder if we actually did alt images here.
I'm checking right now.
Oh, OK.
So there we go.
COLTON OGDEN: I'm going to sort of nix this table.
And instead, I'm going to turn it into a form.
So we're going to say this, why is the CS50 staff awesome?
And then I'm going to make a form that says, give me all of your information.
Just like that.
And this is going to be an illustration of a very important idea,
and that is sending information to other places.
So it's one thing to be able to click links, and to go places,
and to see information, but it's another thing
to actually interact with people via the web page.
And the only way you can really do that is,
discounting things you can do with JavaScript, is the use of an HTML form.
And so all form is-- and I'm just going to lay out some simple stuff--
is a set of fields, a set of UI elements that are interactive,
that you can type information into, select information from a predetermined
list of things.
We're not going to cover every possible use case for forms in this example,
but we are going to talk about some of the basic stuff,
some of the basic fields and bits of UI that you can indeed use.
So I have a form.
That's just like we've used any other tag.
It's just a form.
And there's going to be other elements to that--
attributes that we can look at.
But for now, we're going to focus on input.
Now, I'm going to say input type is equal to text.
And if I do that, we notice that we get a little text bar here.
And so this is something that you see when
you're doing for example a login form or a registration form
and you have to take your name.
It's going to be in a text field.
It's going to be in an input that is of type text, type being
an attribute on that HTML tag which sells the browser
to render it and give you certain capabilities--
certain user interaction.
And I can do yet again another field.
And I can say this one's going to be type is equal to password.
And so now I have two--
and notice that these are not block-level elements,
these are inline elements.
So they are all just going to completely keep going and wrapping
when it gets to the far right edge of the screen.
If I type into the first element, it gives me the ability to do that.
I now have interaction with my website in a way that I didn't have before.
I can type things.
If I were to type something in the other one,
because of type is equal to password, Chrome is actually saying,
you shouldn't be able to see what's in there.
I'm going to put dots there, and you won't actually be able interact--
you won't be able to visibly see.
This is meant to be private.
This is a private field.
The password, people might be looking over your shoulder,
put dots there, right?
So that's essentially what using--
[INAUDIBLE] basically what a form is.
And usually after you've combined and mixed and matched
a bunch of other elements, which we'll take a look at,
you're going to use what's called a button.
And your button can say Submit.
And once you Submit, you end up triggering
that form, a formal trigger and HTTP request, and it will go to some URL.
And by default, that URL--
if you don't specify--
is the same page that you're on already.
So normally, for, example if I'm logging into Facebook and I click Login,
I'm not going back to the login page, I'm
actually going back too maybe the way they structured it
it could be a redirect to the login page.
But generally, It'll be too like a serve page-- serve me my data page--
and they've probably done it abstractly in software.
So there's not like a concrete HTML page.
Everything's in software, but it's that idea.
That form needs to send its information somewhere.
If I have my name Colton and password 123, and I submit this.
I should send that form, that information, to some other URL
on the internet.
And it is going to be a URL, it's going to be an HTTP or HTTPS URL.
What version of ATM are you Targeting?
HTML5.
His photo isn't on the site since he didn't show up
on the day they were taking them, but he mentioned it a little while ago.
[INAUDIBLE] Oh, yeah, for sane my picture is not there.
Yeah.
My bad.
I should have done it.
He wasn't there when he had a photo shoot.
W3C has some good documentation regarding accessibility.
[INAUDIBLE] also has a course edX.
How is HTML parsed?
Can you talk about the internals, says Rosala36.
That's going to come down to the browser implementation.
That's going to be like chromium.
That's going to be part of the code base.
And I haven't taken a deep look into it, and I'm sure that engineers of that
could probably go on for hours, and days, and weeks about how
they've designed their parser.
But effectively, it's going to have to look for symbols
and figure out, given the string that it's in, basically, if it sees a tag
and that tag is p, and it sees the closing bracket,
read everything until it gets to the next tag, the next to less than sign.
And make sure that is the same tag, and if it is,
create some information and software that maps.
Render it using some drawing logic.
It's kind of complicated, and you need to be
I think on the actual engineering team to build a talk
authoritatively about it.
TOM BALLATORE: Yeah.
If you look at the developer tools, let's
say, in Chrome you'll see like DOM load time--
the document object model.
Obviously, all these tags are going to be
loaded in some sort of tree structure in which there are parents
and children and children of children.
So I think you can see a load time for that,
but the actual mechanics of how do they put things into that tree structure
and what exactly the tree structure was.
What is it called?
It's like a bee tree or something?
COLTON OGDEN: The name's familiar, but I'm not entirely sure.
TOM BALLATORE: I can't remember.
COLTON OGDEN: Red black tree.
I'm not sure.
That's used in a lot of realms measure I doubt they used --
it this case they're not giving a red black tree.
But for the DOM, I'd probably not.
But all that's a b tree.
Yeah, Something like that.
Pirate pants, thank you so much for the fall appreciate it.
And mixel, I do remember I said mixel.
mixel1, no I not say that.
It was one minute ago.
Mixel1, thank you very much for the follow as well.
but yeah good Question.
That's a very advanced engineering topic.
I don't have the knowledge about it, so we probably
shouldn't talk about it too much.
But certainly-- what's it called, was what they're runtime?
V8?
The chromium V8 engine?
TOM BALLATORE: Ahh.
COLTON OGDEN: That's on--
and I'm not sure if that's--
That's actually no.
That's not chromium.
Sorry.
That's Node.js.
Chromium, which I think has the back end for all the rendering is probably--
I'm not sure if it's open source, I think it's open source.
Google that, and see if that pulls anything up.
If anything, you can see the code base, and I think it's all C++.
Yeah if hates the JavaScript engine I have that
conflated with the chromium engine, which I believe, and I'm not 100% sure,
but I believe chromium is the back end that
actually does the literal parsing of HTML to can bring that into the DOM.
And also the visual elements of it.
Digicrests, thank you very much for the follow.
I Appreciate it,
I've seen you in the stream, and glad that you're now following.
OK, cool.
So we have text fields-- another important thing.
Like I said, we won't go into the detail.
I have a lot of other stuff we could talk about with forms,
and I think we might go into more detail on forms in a later stream.
We are going to do an advanced HTML stream, which is going to cover Canvas,
it's going to cover iFrames, semantic elements is going to cover--
what else do I want to
Cover?
Client-side validation using the built-in evaluation tools
you get in Chrome, which isn't the be all end all of validation,
but certainly a nice thing to look at.
And then forms I think in more detail, with posts, and get requests,
and how that actually transfer translates to query strings,
and how you can use that to interact with your own website
and other people's website.
We'll talk about all that stuff.
The one thing I do want to talk about is select objects.
And a select is essentially--
and I believe these taken options--
a fancy way of saying a drop down menu.
And a select so I can say options.
I don't think they take place holders.
I think I would need to say option and choose an instructor.
And then we would say, Tom Ballatore.
We would say-- and these will probably actually be on one line--
David J. Malan.
Got some tough competition there.
TOM BALLATORE: Oh yeah.
COLTON OGDEN: But we'll put your name first to give you a leg-up.
TOM BALLATORE: Ooh, thank you.
COLTON OGDEN: Option.
And then we'll say, Brian Yu.
And if I refresh this, notice that we do indeed get a dropdown.
It's nicely styled, because this is actually
done by your operating system, all these UI elements.
But you can see, it says choose an instructor,
and then we do indeed see in the order that we added them, Tom Ballatore,
David J. Malan and Brian Yu.
And I don't think we have time to go into submitting forms, and how that all
works, and actually parsing that information
when we get to another web page, because we are at three hours.
We do want to talk about alt stuff real quick before we conclude,
but this is the foundation upon which you would submit
this information to another location.
And this is how you get UI elements effectively.
If anybody has any question on the basis of forms?
I know we didn't cover as much about forms as I would have liked to.
We will in the future.
But if you have any questions on the stuff that we have covered,
definitely toss them into the chat.
And then if not, I think we should talk about alt.
TOM BALLATORE: Yeah.
COLTON OGDEN: Or accessibility in general, I should say.
TOM BALLATORE: Yeah, let's talk about some things.
I like that.
Yeah
COLTON OGDEN: Sure.
Let me know--
TOM BALLATORE: Can I have your HDMI, or should I do it on your computer.
COLTON OGDEN: Yeah, you can do it on your computer.
So it's going to go back for just a second.
Apologies while we do that.
All right.
Just go ahead and plug right in.
TOM BALLATORE: All righty.
COLTON OGDEN: We have a switcher normally, but it's not hooked up,
so we could have done a little bit of fancy searching.
TOM BALLATORE: And I was late.
COLTON OGDEN: No, that's OK.
Actually, you were earlier than expected.
TOM BALLATORE: Yeah.
I was.
All right, here we go.
Let's see.
COLTON OGDEN: Would you separate stream about DOM?
It would be nice.
Yeah, that's a plan.
I do want to go into DOM, and I actually want
to go into Dom scripting more specifically,
so talking about using the window API, doing
things like document.get, [INAUDIBLE],, that sort of thing,
manipulating the DOM manually, as opposed using jQuery,
that sort of thing
Let me resize your window here.
TOM BALLATORE: I was going to say, can I go to--
COLTON OGDEN: Yeah, it resized based on the display settings of your machine.
TOM BALLATORE: Yes.
COLTON OGDEN: So I'm going to--
TOM BALLATORE: Should I not be doing this?
COLTON OGDEN: No, you're fine.
What size do you want--
TOM BALLATORE: [INAUDIBLE] scale for.
COLTON OGDEN: Do you want to do 720?
TOM BALLATORE: 720 is probably best, right?
COLTON OGDEN: OK.
I might have to resize then.
OK, cool.
Blip.
All right.
TOM BALLATORE: Looks good.
COLTON OGDEN: Cool.
TOM BALLATORE: Yeah.
So when I was first learning HTML, I had the question of, well, what tag
should I really learn?
Because there's like 100 and how many tags out there?
I don't know.
And at the time, there was really no Information
COLTON OGDEN: You want to actually come a little closer to me too.
TOM BALLATORE: Sure.
All right.
So at the time, like I couldn't really find any information.
There was a Google study from 2006, where
they would scrape a bunch of web pages and see how many tags that were.
And I'm speaking about like unique tags on a given page,
like how many pages use a div tag?
Now, how many div tags are on a given page?
And just before coming here, I was like, hmm,
I should see if they have updated information, and there is some.
So if you're looking at this and wondering, watching the stream,
thinking, what tags are really important?
Head and HTML are in, apparently, every page.
And you can-- Oh, the link for this, if we have a chat, which I'm not
COLTON OGDEN: Oh, we do.
It's a little bit finicky at the moment.
TOM BALLATORE: OK.
COLTON OGDEN: Yeah.
I'm not getting into the channel.
[INAUDIBLE]
Can you go to-- what did you type in, Google?
Type in the Google words and then folks online can type the same search thing.
TOM BALLATORE: Yeah, I would type in-- actually, how did I find it?
Let me go back.
Frequency of tags-- HTML.
COLTON OGDEN: Yeah that's the first thing.
TOM BALLATORE: It was not the first thing.
It was the CSS Tricks was just an incredible page.
COLTON OGDEN: OK, cool.
So
TOM BALLATORE: Yeah frequency of HTML l tags, and then CSS tricks.
Yeah.
So let's take a look at these.
The top ones were, of course, what you're expecting--
head, HTML.
body.
COLTON OGDEN: So 1% of pages don't have a body tag.
TOM BALLATORE: Yeah.
Which makes you wonder.
I guess it's just an SEO thing.
COLTON OGDEN: Yeah.
I guess it must be.
TOM BALLATORE: Who knows.
Title--
COLTON OGDEN: Search Engine Optimization,
for anybody who's not familiar with that terminology.
TOM BALLATORE: Yes, yes.
Meta, div, a, script.
Script surprises me.
I mean I guess everybody is just using JavaScript.
COLTON OGDEN: Yeah.
Well, JavaScript's pretty ubiquitous.
I would expect--
TOM BALLATORE: But 88.5?
Aren't there more static things out there?
COLTON OGDEN: I mean, even the static websites will sometimes
have really simple JavaScript.
TOM BALLATORE: That's true.
Yeah.
And then link, image, p, span.
What didn't we talk about?
Style?
Yeah.
This one's sort of like, you shouldn't be doing that.
COLTON OGDEN: Style, we'll be covering that in the CSS one.
Yeah.
That shouldn't be in necessarily.
In and of itself it's not terrible if you do it in small amounts.
But I would say it's much better practice
to just use a separate CSS file.
And you use that with a link tag.
And also--
TOM BALLATORE: Input.
COLTON OGDEN: Darkworld saying, what a great language HTML.
HTML is awesome.
Digicrests says, any plans for Vue, React, or Angular?
And then Jaques says, Colton already said they wouldn't cover React.
And that's actually not true.
I actually very much wants to cover React.
It's less likely that we'll cover Angular, but maybe.
I'll look into Angular.
It's another sort of single page application, UI, HTML extension
language, kind of like React is.
Or not a language-- framework like React is.
It's another way of modern web development.
We'll take a look, possibly, at that.
But definitely React, ostensibly Angular and Vue, but less likely.
TOM BALLATORE: Cool.
So this had nothing to really do with accessibility.
And the reason I was talking about accessibility is just--
COLTON OGDEN: Well, I think it's cool.
TOM BALLATORE: --coming up--
and definitely, check out this page.
There's a lot of other things here I'm not going
to be talking about-- the doctypes.
Mostly they're HTML5 now.
You've got some of this transition stuff still there.
Yeah.
Just go through this.
This is really cool.
OK?
COLTON OGDEN: Stats.
Big data.
TOM BALLATORE: It's nice, because I was thinking,
I wanted this more modern data than the 2006,
because so many types have changed since then.
And I was thinking, I've got to have a student for CS50, for a final project,
do this.
And maybe they still could, but yeah.
So a lot of it's done right here.
Let's look at some other things.
There's this issue I always have with HTML.
It's really hard to find mistakes in your code.
And you'll be doing something--
and especially we'll get to this with CSS, if you forget the closing brace,
you won't have some certain styles.
Maybe some might go through, but others won't.
And it's really hard to debug, I think.
So one of the things here is this validators that exist.
There's many of these.
And online,
COLTON OGDEN: W3Schools.
Oh, right.
You did mention that, yeah.
TOM BALLATORE: Yeah.
So let's do this.
Let's take CSS tricks, this web page, copy the URL,
go over here, and let's actually validate
it and see if it passes the test.
COLTON OGDEN: This would be hilarious if it does not.
TOM BALLATORE: OK.
So they're getting some warnings.
OK, there's.
A Let's see, you don't need this, I guess.
But warnings-- OK.
Air.
Element style not allowed as child element of header.
Ooh.
COLTON OGDEN: Ah, Interesting.
TOM BALLATORE: Element stop is missing required attribute offsets.
OK.
I don't know what stop is.
But I guess it's something.
COLTON OGDEN: I don't know either to be honest.
TOM BALLATORE: OK.
So and then you can go through here and basically see the errors.
Now, obviously, the page is rendering well from my perspective
when I'm looking at it.
And I'm getting great information from it.
But generally, if you're taking a class on HTML or something,
you should probably be running it through one of these checkers
to just make sure that your code actually is as per the specification.
Another thing you can do is let's say we go here , and we go to--
I'm going to do a little short-- well, no I won't do a shortcut.
I'll do view, developer, view source, and I'm
going to actually just control all, copy all of this over here,
and I'm going to go to Sublime Text, and I'm going to drop all of this HTML
that I just Stole from that page right into my thing here.
COLTON OGDEN: This is literally what you're getting sent
over the digital airway so to speak.
TOM BALLATORE: If it was not being sent to me,
how would my browser be able to render the web page?
COLTON OGDEN: Exactly.
TOM BALLATORE: This is all in the open essentially.
So you can just totally like copy web--
well, whether you can legally do it or morally do it.
But you can just go grab it and just make your own web page based on this.
But one thing you can do--
I like Sublime because it's got all these different packages
that you can put into it.
And validators is one of those.
So you could then validate this file with HTML5.
I kind of like this one because it gives you nice list of the line number
and it's just pretty much pointed to a lot of errors here.
COLTON OGDEN: That's pretty cool. and this is actually
kind of similar to what somebody requested earlier.
They were saying, are there any cool plugins for web
development for VS code.
This is something I have to imagine there is an analog for with VS code.
But in this political example you're using Sublime Text.
TOM BALLATORE: Yeah.
It's got to.
COLTON OGDEN: But the key takeaway being,
there are plugins catered towards for text
editors that function for these awesome use cases to help you debug,
or in this case better distribute your web page for certain folks.
TOM BALLATORE: Yep.
COLTON OGDEN: Certain demographics, in this case.
TOM BALLATORE: Let's see.
Unless there's a stray end tag "a" on 2045.
Let's actually find it--
2045, 2045, 20.
20-- this is a big word page--
20 45.
COLTON OGDEN: Another illustration--
TOM BALLATORE: Oh, right here, maybe.
COLTON OGDEN: Another illustration that one given web page ultimately
is just one huge file too.
It's not being sent to you in multiple files.
Even if you have multiple files, when we get to frameworks like Flask or React
where you have JavaScript and you have HTML or templates, and multiple files,
ultimately it all has to get put into one file
that you get into your browser renders for a given window.
It's not like you're getting multiple different files that all come together
at the browser level.
That's all packaged ultimately into one thing, including the script.
TOM BALLATORE: Yep.
You can do the same thing with CSS.
Why don't we try CS50?
I checked it earlier, there were no errors.
COLTON OGDEN: CS50 is on top of it.
TOM BALLATORE: Yeah.
But let's do this.
COLTON OGDEN: I'm not terribly surprised.
TOM BALLATORE: CS50.
Let's check out-- what's CSS are they using?
They're using Bootstrap, but they've also got some of their own CSS
I'm sure.
Is this-- where is it actually?
Is it right.
COLTON OGDEN: Hello from a sunny Saturday afternoon.
Longtime listener, first time caller.
Thanks Dave Code.
Appreciate it.
Thanks very much for tuning in.
Good to have you.
TOM BALLATORE: OK.
Let's just assume this is the CSS.
So I can pull this down, copy all of that.
I'm going to dump it into a new file right here,
and we're going to run a validator for CSS also, which you can do.
COLTON OGDEN: And kerberosX, I apologize if I didn't mention,
thank you for your follow.
TOM BALLATORE: OK.
And errors come back.
This is still the errors from the other one.
I don't know why that's not coming up here.
Oh, I didn't save it as a CSS file.
So CS50.css.
OK, save it right there.
Oh I'm in the wrong location.
Of course.
Yes, I understand that.
Just one second.
I don't know why it went to my hard drive, though.
It's kind of weird.
Desktop, and we're just going to save it.
That's OK-- test, whatever.
Boom, save it.
And now let's try the validation on the CSS, which tells us that, indeed--
I don't know why it's not coming up.
Of course, because I'm doing it live without having tested this.
What we could actually do is go to the online checker for this.
And I've got it somewhere, the W3Schools CSS validation service.
And you could just pop up a web page [INAUDIBLE] or a CSS file in here.
And you can get all the errors that might be there.
Another thing, you'll get to--
[INTERPOSING VOICES]
COLTON OGDEN: Oh, there's the Zen garden.
Yeah.
TOM BALLATORE: Well, can I finish with that?
COLTON OGDEN: Yeah.
TOM BALLATORE: OK.
Because that will a nice lead-in to the CSS stuff that's coming up.
Yeah, definitely.
With the accessibility stuff--
yeah, let's see, favorite websites.
Does somebody want drop a website, a nice, legit, family-friendly website
into the chat that we can check out to see if it's accessibly friendly.
COLTON OGDEN: And [INAUDIBLE],, I'm studying advanced algebra
for a final on Sunday.
It's 1:10 AM, and I'm watching you guys.
Greetings from Serbia.
Thanks very.
TOM BALLATORE: Sweet.
COLTON OGDEN: We appreciate it.
Good luck with your final on Sunday.
TOM BALLATORE: WaniKani?
WaniKa--
COLTON OGDEN: Oh, WaniKani.
That's a Japanese studying thing.
I've used it.
TOM BALLATORE: Oh, OK.
Cool.
T-T-P. [INAUDIBLE]
COLTON OGDEN: Well, before you do that, let
me make sure that's the same WaniKani.
TOM BALLATORE: Yeah, I'm not going to hit Enter here.
COLTON OGDEN: WaniKani.com, is that what it says?
TOM BALLATORE: Cool.
COLTON OGDEN: Yeah.
TOM BALLATORE: Looks good.
COLTON OGDEN: I have used this, yeah.
TOM BALLATORE: All right.
So here it comes.
Ooh, there are nine errors on the WaniKani, with one alert,
one feature, blah, blah, blah, blah, blah, blah.
So let's see.
If we go right here, you can get the errors.
Oh, basically it's missing alternate text on--
if you click right here, you can find--
well, where will it be.
If I click on this one like this, it will say--
OK, right here.
Basically there' this picture of Andrew Elliott.
But if you go under the hood--
let me do this one here, Andrew.
Is that?
Oh, hold on.
So let me go to WaniKani directly.
WaniKani.
That means crocodile crab by the way.
COLTON OGDEN: WaniKani?
TOM BALLATORE: Yeah.
What am I doing now?
I'm going to go to View Source, and then I'm also going to find--
what was that guy's name?
He didn't have an--
COLTON OGDEN: Andrew Elliott.
TOM BALLATORE: Thank you.
So let's find Andrew Elliott.
OK, so he's got to have a JPEG somewhere.
Yeah.
So basically, it's a testimonial.
There's no alt text right here.
There should be alt that says, picture of Andrew Elliott or something.
But without that alt text, you don't know what it is if you can't see it.
COLTON OGDEN: [INAUDIBLE] saying, crocodile crab.
My daughter just said that.
TOM BALLATORE: Cool.
COLTON OGDEN: Or the alt crab.
TOM BALLATORE: The alt crab.
All right.
So that's another thing you can do with this.
And this website is WAVE.
We can just put in Web Accessibility Evaluation Tool,
and it comes up some really cool stuff.
One thing-- my eyes, as I get older, the issue I
have mainly, some of the colorblind issues.
But also, right here there should be something-- go back to here--
contrast errors.
Something that's really popular lately is
sort of light gray, thin fonts on a white background.
And if you've got young eyes, maybe it's really easy to see.
I just struggle with that.
So if you go to contrast errors, you can see that, indeed--
where is this listed?
Right here perhaps.
Oh, right here.
So if you go to this tab up here, you'll see that in various areas-- yeah,
maybe depending on your screen and your eyes, it might be contrasty enough.
But definitely, they'll give you very low contrast.
And there's ways of looking at the brightness or color
of the text on top of the background.
And maybe the size even gets figured in.
I'm not sure how they calculate that.
But this is really nice.
If you want to make sure your website should be really visible,
and if it's not somebody who can actually see, it has a proper alt tags.
This is a good way to make sure that all of your errors.
Should we do CS50?
COLTON OGDEN: Sure.
TOM BALLATORE: I got confidence, because I'm open, but--
COLTON OGDEN: So far it looks like we did really well
with that last evaluator.
TOM BALLATORE: Come on.
Fingers crossed.
COLTON OGDEN: Some contrast errors.
TOM BALLATORE: Contrast.
Well, forget that.
That's no big deal.
Yeah.
OK.
Anyway, let's go right here.
Question mark errors.
Let me reload that.
And let me reload here, I guess.
Zero errors.
David-- are you out there, David?
Good job-- or whoever is designing this page.
There's some-- oh, and there are no contrast errors.
I don't know why that happened.
COLTON OGDEN: Oh, maybe it was still looking at the contrast from last--
TOM BALLATORE: I think it was.
Because it was the same number.
Yeah.
COLTON OGDEN: Yeah.
TOM BALLATORE: So good job CS50.
There's one alert.
What is the alert?
COLTON OGDEN: Website is awesome.
Website is too awesome.
TOM BALLATORE: Very interesting.
So why this is so cool is, OK, apparently on here
there's a link to a PDF.
And all they're saying is, by the way, when you linked to a PDF,
that PDF may not have its accessibility settings set properly.
We don't know, because we haven't looked into it, but make sure it is.
So that's really nice service this WAVE provides.
You may not have that issue if you yourself don't have those problems.
But it's something that you should really consider doing for your viewers.
COLTON OGDEN: People say, rip, well played, in the chat at the CS50.
TOM BALLATORE: Yeah.
Cool.
One last thing, Zen Garden.
COLTON OGDEN: [INAUDIBLE] Zen Garden, yeah.
TOM BALLATORE: Yeah.
COLTON OGDEN: I have seen this.
This is a really cool website.
I like this a lot.
TOM BALLATORE: OK.
So let me set this up.
I'm going to be the straight man, OK?
COLTON OGDEN: All right.
TOM BALLATORE: Or you be the straight man.
I don't know.
So OK, there's so many different websites in this world.
You've got this sort of, I don't know, modern.
Is this fuchsia?
Is this periwinkle?
I don't know what color it is.
It's got these ball things with symbols and stuff.
Some websites look like this--
nice design.
It looks great.
You've got other websites in the world that look like this.
Ooh, it's kind of this sliding over the background.
It almost looks like CS50.
It's the same font.
Gotham, I believe.
Well, that's ironic.
But yeah, it's a pretty cool looking website, totally different
topic, totally different website.
Oh, let's check this out--
Steel.
Sounds tough, hard, awesome.
So steel, what's going on here?
Oh, yeah.
COLTON OGDEN: This one was my favorite when I saw it.
TOM BALLATORE: You know, it's weird.
When I do it through a projector, it doesn't render the animations.
If you actually go on your computers right now the Zen Garden and go to like
zengarden.com/219, you'll have all things moving around like construction
cranes.
I don't know.
When I connect to a projector, I lose that.
I gotta figure out why that's happening.
COLTON OGDEN: That is weird actually.
TOM BALLATORE: So here's what you do--
this will freak people out.
And this is why CSS is so cool.
If you go to View Source for each of these pages-- let me do this.
OK.
So here's the View Source for this page.
We could dig in there.
Oh, there's definitely a head tag, an HTML tag-- blah, blah, blah.
Cool stuff here.
And then we go to this page's View Source.
We check that out, and we look at the previous one.
OK.
Well, maybe it just made a mistake.
Let me check this one out.
OK, View Source here.
Let me check out the previous one.
They're identical pages.
COLTON OGDEN: First of all, I'm impressed
that you can keep track of which they are because of how small
those tabs are.
TOM BALLATORE: Oh, I just remembered, because I did it before
and it messed up.
But, yeah.
So HTML is literally your content and the semantic structure of your content.
CSS is just the dressing of making it look
like this, or like this, or like this.
Identical content, but looks totally different.
And that's why I think the CSS stream, or Twitch,
or what do the young kids these days call these things.
COLTON OGDEN: That would be a stream.
TOM BALLATORE: It is a stream, yes.
COLTON OGDEN: Because Twitch is the website.
Twitch is the website.
TOM BALLATORE: OK.
The stream is going to be really interesting.
I wish I was in town for that.
COLTON OGDEN: Cue the skin and skeleton analogy.
TOM BALLATORE: Yeah.
That one grosses me out.
COLTON OGDEN: We beat that one.
We beat that one, Dad.
But yeah, CSS is the skin.
HTML is the skeleton.
TOM BALLATORE: Woo.
All right.
Ram is screaming from so much tabs.
I got the new MacBook Pro, which is, even like the--
yeah.
COLTON OGDEN: It's so nice and thin too.
I
TOM BALLATORE: Saved up for it.
COLTON OGDEN: I mean, mine's pretty thin as well.
TOM BALLATORE: Yeah.
Oh and you don't need the dongle.
I'm in dongle hell.
But here's your LAN cable and stuff.
I got it, because for work--
and I'm totally going to plug something.
I'm going to do it.
Because are you going to cut me off?
You're not going to cut me off.
OK.
Go to--
COLTON OGDEN: All right, and we're done.
I'm just kidding.
TOM BALLATORE: Capi.adbx.online-- this is a Google form.
If you're interested in learning how to collect data in the field for surveys,
this is a course I'm running for Asian Development Bank and Food
and Agriculture Organization of the UN.
Right now-- how many people do we have for this course?
We've got--
COLTON OGDEN: You said 700 or something, right?
TOM BALLATORE: 736, yeah.
COLTON OGDEN: Wow.
TOM BALLATORE: Yeah.
I'm a little bit nervous, because I'm running--
oh, I just showed a email there.
Sorry about that.
I'm running the back end using Open edX software for this.
And I know things are just going to crash on the first day.
But definitely go here, sign up if you want to do that.
And why am I talking about that?
COLTON OGDEN: It's super cool.
That's just a project that you're working.
Share.
TOM BALLATORE: Cool.
COLTON OGDEN: That's what we're all about.
TOM BALLATORE: So there you go.
So this is capi.adbx.online.
And a little final plug for CS50.
If it weren't for CS50, I wouldn't be doing stuff like this.
I'm making online courses and stuff like that.
I would have never had the courage to actually think
I could do something like that.
But after making it through really hard psets,
I was like, I think I've kind of tricked myself into thinking I can do it.
And in the end, it works out, because the greatest lesson for CS50 was?
Well, two things-- one, you can do it.
And second, just google.
COLTON OGDEN: Yeah.
TOM BALLATORE: Because you can find the stuff
[INTERPOSING VOICES]
COLTON OGDEN: That should be the only bullet point-- just google.
TOM BALLATORE: Google.
Google it.
[INTERPOSING VOICES]
COLTON OGDEN: I was there when you did your first hackathon--
your first hackathon with us.
I was there.
That's where I met you.
TOM BALLATORE: That was a JavaScript app, yeah.
COLTON OGDEN: Yeah.
I remember that.
TOM BALLATORE: Yeah.
COLTON OGDEN: Been there.
I've seen Tom since the very beginning.
Well, maybe not the beginning.
TOM BALLATORE: Wah.
Wah.
COLTON OGDEN: But your coding career.
TOM BALLATORE: Sweet.
COLTON OGDEN: But certainly since the very beginning of your time with CS50.
TOM BALLATORE: Oh, yeah. adbx.online will give you a internal service
error, because we're not up yet.
So don't go there.
dot online-- yeah, this is currently down.
Because we're launching in about two weeks,
and I didn't want to pay the bill for the server.
COLTON OGDEN: Sure.
TOM BALLATORE: So it's not live yet.
But it will be live.
COLTON OGDEN: OK, cool.
Well, thanks so much for that.
That was awesome looking at data like that
and looking at validation and accessibility.
Those are all very important things that I think a lot of people
take for granted, certainly.
But if you're in that space, then it sort of
becomes something you're always thinking about I have to imagine.
TOM BALLATORE: Yep.
COLTON OGDEN: And to be fair, I haven't done a lot of work
in that field myself.
But thanks to folks like you who do that, who try to spread that knowledge,
I think more people become more conscious of it, certainly.
TOM BALLATORE: Yep.
COLTON OGDEN: Well, thanks, everybody.
So we've been at three hours and 23 minutes, and that's just this stream.
We had the last stream as well, which was cut slightly short.
We had to get everything ready to cross post, cross stream.
But thanks so much everybody who tuned in.
This was a big departure from what we normally
do in terms of game programming and kind of going from the ground up with HTML.
This was a lot of fun.
I enjoyed it.
I'm looking forward to the CSS stream next week.
We'll cover a lot of really cool stuff.
And thereafter, the sky's the limit.
We'll go into JavaScript.
We'll go into Bootstrap.
We'll go into jQuery.
We'll go into DOM manipulation.
We're going into React.
We may or may not go into Angular and Vue.
We'll go into Flask.
I'm talking about Kareem might do a Flask stream.
So everybody get Kareem-- let's get Kareem in here.
It'll be a good time.
But, yeah.
Thanks to everybody who tuned in.
We had a lot of viewership today consistently.
Thanks to [INAUDIBLE],, and Brenda, TJHeinzo.
What's your stream schedule, TJHeinzo says.
Not a consistent schedule yet.
We're going to be more consistent when the undergrads all come back.
But on Tuesday-- I have to remember.
I'm definitely doing a stream next week.
I think Wednesday I'm being minesweeper.
And then Thursday, I think, is CSS.
TOM BALLATORE: Cool.
COLTON OGDEN: And then Friday is Render 50.
But it'll be on our Facebook.
Go to facebook.com/cs50.
We post all of our upcoming events, upcoming videos there.
And so special thanks also to Tom for joining us for--
TOM BALLATORE: Hey, thanks for having me.
COLTON OGDEN: --almost the entire duration of the stream.
So that was great.
I enjoy very much having a back and forth.
It was a great time.
And can you push to Twitter too?
They are all on Twitter.
We do notify all of our--
now, we post an event, or post a tweet, I should say.
Oh, you're talking about the stream?
I have to look at that.
I'm not sure.
I wasn't aware that Twitter had a live stream functionality into it.
[SPEAKING JAPANESE]
COLTON OGDEN: Thanks for the stream.
Thank you both.
See you next time.
Ajax?
Oh, Ajax Too We will cover Ajax.
Tom may not be here, because Tom has to, unfortunately, fly back to Japan.
Which makes me sad, because I would love to do more streams.
But unfortunately--
TOM BALLATORE: I'll be in town.
I'll be in town mostly in the spring.
COLTON OGDEN: Whenever you're around-- are you
going to be around the whole spring?
TOM BALLATORE: Yeah.
COLTON OGDEN: Oh, OK.
You're not flying back to Japan?
TOM BALLATORE: I am flying back to Japan.
But officially, I have to be in the US to do the work.
So I will be in the US-- wink, wink.
COLTON OGDEN: Oh, OK.
Gotcha.
So yeah.
We'll get Tom in here again, because Tom was awesome.
Jubon3, [INAUDIBLE],, Arizawa36, and TJHeinzo,
thank you so much for the follow.
Appreciate it.
I'll see all of you soon.
TOM BALLATORE: Good seeing you, seeing all the other people
I know in the stream.
Really fun to be here tonight.
COLTON OGDEN: Pitch more ideas for us to do too.
Because the more of these sort of lower level, from the beginning videos we do,
the more we can start to make case study style stuff.
And that's the goal, is to start making actual websites,
and to take all of these abstract ideas and actually make a product.
So we'll do that.
We'll do that together.
But until next time, we'll see all of you.
Have a terrific weekend.
Yeah.
This was CS50 on Twitch.