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