[MUSIC PLAYING]
DAVID J. MALAN: Web development.
So you know how the internet works.
And how there's all these computers on the internet somehow interconnected.
And they support protocols like TCP/IP, and there's wires and wireless.
And so we have, that is to say, infrastructure
via which we can get data to and from computers, or to
and from clients and servers.
Indeed, that's the relationship we're going
to look at today when we look at web development, the process of developing
web sites.
And keep in mind, that the web is just one of many services
that the internet supports today.
The internet, of course, supports email, and video conferencing,
and all sorts of other applications.
But the web itself is one specific application, or service,
that runs atop the internet.
In other words, it assumes that an internet
exists so that we can get data from point A
to point B. And on top of that then, do we layer
a whole bunch of functionality that allows us to click, and browse,
and view information atop the internet.
So let's consider the scenario at hand.
Odds are if you're browsing the web you're using a web browser.
And on a desktop or laptop, it might look a little something like this.
On a phone, of course, it might look a little smaller.
And web browsers can even be found on home console, gaming consoles,
and the like, these days.
But we'll assume that the essence of a web browser is something like this.
Atop the browser is a space to type in an address,
or a URL, or uniform resource locator.
And that's generally something that starts with HTTP, colon, slash, slash.
Or HTTPS, colon, slash, slash.
And then the address, or the domain name, of a website
that you want to visit.
And odds are there's a back button, maybe a forward button,
a reload button, and a few other features as well.
But what are you doing when you type in something like example.com
or Google.com or Facebook.com or any number of other domain names
into a web browser?
Well, you're sending a request from your computer,
be it a laptop, desktop, or phone, from your device to some remote server,
point B so to speak.
And that server's purpose in life is to look at your request,
so to speak, figure out what it is you want, and then respond to that request
accordingly.
Recall, in fact, when we've sent requests on the internet for cats,
like this one here.
We send some kind of request in a virtual envelope,
if you will, and on the outside of that envelope was the address of the server.
But not the domain name like Google.com, but rather the IP address and port
number, a TCP port number, and then my return IP address as well.
And so inside of that envelope is some kind of request for a very
specific resource, like a cat.
And then in the envelope that comes back from the server,
from, for instance, Google Images, is going
to be the cat, itself, in the form of maybe one, or two, or three,
or more packets, if everything has been fragmented and sequenced.
But what specifically is inside of this envelope and where is it coming from?
Well, what is a web server?
A server, it's just a device that looks a little something like this.
Odds are you don't have one of these in your home.
Odds are if you have a computer at home or at work,
it's a more traditional laptop or desktop.
But this, too, is a computer.
This is a server, it just happens to be kind of flat.
It's what's called a rack server.
And a rack server is just a server that has a CPU, and a motherboard,
and RAM, and hard drives, and other devices as well.
And it just tends to be kind of squished down into either a 1.5 inch
height, or maybe a three inch height, or some other multiple,
typically, of 1.5 inches.
And it just slides into literally a rack.
And this is so that system administrators, and companies more
generally, can squeeze a lot of these servers into one small footprint.
So you just stack one on top of the other, like trays in a cafeteria.
And behind, on the back of these servers,
are all sorts of ports into which you can connect wires and cables that
can interconnect all of these devices.
Indeed, if your company is running a web server,
odds are it doesn't have just one of these.
Odds are it has one of many of these inside of a data center,
or some kind of--
perhaps more likely-- a wiring closet where you actually keep your devices.
This might be a particularly clean and fancy version.
And behind each of these doors is tens of, if not
dozens, of servers depending on their actual size.
So that's what a web server actually is.
But what is it that you're sending to any one of these web servers?
Well, you're sending a request inside of this envelope.
And you're sending a request very specifically for whatever resource
it is you care about.
Maybe it's today's news, maybe it's some search results,
maybe it is in fact that cat.
And the language in which this request is written inside of this envelope
is going to be in what's called HTTP, Hypertext Transfer Protocol.
And this transfer protocol is really just a set
of conventions to recall that mandate how a computer speaks
to another computer when it wants to request information off
of the world wide web.
Meanwhile, if I want to request a cat specifically,
my request might instead look like this, where I'm getting /cat.jpeg,
if that's indeed the name of the file name, and by the way,
I speak HTTP version 1.1.
So that's what's in the request that I sent to the server,
what is it that comes back from the server?
Well, odds are, it contains a bunch of text, and then
the actual response of the message that are requested.
So specifically, inside of the envelope that, say, comes back
from Google, if I'm requesting that particular image,
is going to be a message that hopefully says
HTTP slash 1.1, which is just a reiteration of the language
or the protocol being spoken, 200 OK.
Where 200 means literally everything is OK,
here is satisfaction of your particular request.
So we actually never really see this message
because it's inside of this envelope, or kind of written on the inside in what
are called HTTP headers.
Little lines of text that the server adds to its envelope that's coming back
to you that contains information like this
so that the browser knows whether to show the remaining
contents of the envelope, or to actually display some kind of error message.
In fact, there's a whole bunch of these so-called HTTP status
codes that indicate whether the envelope you're getting back from a web server
is indeed a successful response.
200 OK is one you almost never really see,
because it means all is well and so instead
you would actually see the cat, or your search results,
or something else on the screen.
But you might also see a status code, or at least your browser might,
that's number 301, or 302, and these indicate
that your browser should actually redirect you to some other URL,
and we'll see that in a bit.
You might see 304 which means not modified.
This is actually a clever mechanism, whereby
a web server to save time, and save bandwidth, bytes,
it can actually respond to your request for that cat
and say, uh, David you requested this cat just a little bit ago,
the cat has not been modified, I'm not going
to waste time sending it to you again.
You should check your cache.
In other words, browsers will very often cache files, keep copies of them
after you've requested them, so if you revisit that same web page,
they don't have to waste time and bytes actually re-requesting them.
And so the server can indicate you don't need to re-request this file,
It's not, in fact, been modified.
Meanwhile, if something kind of goes wrong,
your browser might give back a 401 or 403 response.
Which indicates that you're not authorized,
you're forbidden from accessing the resource.
Maybe you have to log in via some mechanism
or maybe you're just not allowed to access that file or directory.
Now, odds are there's at least one on this list that all of us
have seen all too often, 404 not found.
If you've ever wondered why your browser sometimes tells you
this fairly cryptic number 404, that's just
because the folks who designed HTTP, this protocol,
decided some time ago that the number 404, if a server sends it to a browser,
it's like a numeric code that just says, whatever you requested is not found.
So I would get back that number inside of that envelope
if cat.jpeg did not exist on the server, and therefore could not be found.
Finally, perhaps the worst of these is 500 internal server error.
This is not your fault. So if you ever see this, it is not something you did,
it's something the programmer of the web site
did because he or she did not, in fact, implement the website correctly.
Now there's any number of other responses that you might see.
Some of them even a little more low-level than these,
but those in the world who are programming, or using APIs, application
programming interfaces, might actually see more status codes than these.
But these are perhaps the most common user-facing ones
that you and I might see when visiting a web site.
So what else is inside of this envelope?
In addition to those so-called HTTP headers,
those numeric codes with a few words that
indicate exactly what the status of this envelope is.
What else, ideally, should be inside of this envelope?
Well, if it's a cat, like cat.jpeg, it will literally
be the bytes composing that JPEG.
A whole bunch of zeros and ones that can be opened in a browser, or Photoshop,
or some other graphics program.
But if it's a request initially for a web page,
like Google's home page, or cnn.com, or your Facebook news feed,
or even your Gmail inbox, where you actually
expect to see, not just one thing, but many things.
A lot of text, a lot of graphics, that is, a more proper web page.
Well, how is it that these web server goes about fitting
all of that information in here?
Well, turns out, what's typically inside of these responses,
below the HTTP status code, so to speak, is this.
A language called HTML.
And HTML, or HyperText Markup Language, isn't a programming language,
because it doesn't give us the ability to command the computer to do things.
It doesn't have what is called control flow, like loops, and conditions,
and variables, and other such things.
It rather is a markup language, in that literal sense.
Whereby you can mark up data information in your web page,
and tell the browser, really, how to display it,
how to structure it, how to format it.
So it's kind of like a formatting language, not a programming language.
And here is perhaps the simplest web page
that you might write in this language called HTML.
And even if you've never seen this before,
odds are your eyes can notice some patterns.
I see a whole bunch of angled brackets, as they're called.
I see a whole bunch of closed-angled brackets.
I see a lot of symmetry, like I see two mentions of HTML, two mentions of head,
two mentions of body, plus this thing up here, as well.
And I also see the repeated phrase, "hello world."
So if you want to guess, you'd be right in thinking maybe this
is a web page that, quite simply, says to the user, "hello world."
Now why, actually, is that?
Well, it turns out that a web page does follow this exact same standard format.
If you want to make a website for users or customers on the worldwide web,
what does that mean you have to do?
Well, you have to actually implement the website by writing HTML like this.
And you can use most any program for this.
On Windows you can use Notepad, on Mac OS, you can use Textedit.
But the reality is, those programs aren't really
designed for making web pages.
So there's fancier programs still.
You can use programs like Atom or Sublime Text, which
are more sophisticated text editors.
And there's even more fancy programs that even hide a lot of these details
from you and just let you click, and drag, and drop, and create HTML
without actually understanding it.
But our goal here, is to indeed understand this underlying language.
But at the end of the day it's just text.
So, so long as you have a program, even Microsoft
Word, can you start to make web pages.
Now you wouldn't use Microsoft Word, necessarily,
since it's going to save it typically in the wrong format,
but the point is all you need is a computer with a keyboard and some way
of typing out text.
Now let's consider what's going on here.
Notice the symmetry.
I start the document, first of all, with this.
Document type declaration, which is just, kind of, something
you should copy and paste for now.
And it just indicates, hey browser, here comes a web page
written in HTML version 5, a.k.a.
HTML 5, which is the latest version of this particular language.
Then, below that, is one of these open brackets, as we'll call them,
the word HTML, HyperText Markup Language, then a space,
then Lang equals, quote unquote, "E-N."
what is that?
Well, this is just an indication to the browser
that the language, the human language, in which this page is
going to be written, is going to be E-N, which
is the universal code for English.
And there's two-character, or even three-character codes
for every spoken language in the world.
Now here, notice, is open bracket, head, close bracket.
And then, what I'll call the opposite of this,
open bracket, slash, head, close bracket.
And so here's the first instance of some symmetry.
Let's start thinking about this tag as meaning,
let's open the head of my web page.
Let's think of this tag as, closing the head of my web page.
Or starting and stopping, however you want to think about it.
But inside of the head of my web page is apparently going to be this.
A title, open bracket, title, close bracket.
Then just some words, hello world, which could be anything.
And then open bracket, slash, title, close bracket.
Which is the opposite of that open tag for title.
Now notice that there's this nesting I started over here with HTML.
Inside of and indented inside of that his head.
Then inside of and indented inside of that is title.
And then just to be kind of neat about it,
I put the close title tag here on the same line.
Turns out the browser won't particularly care.
But this was such a short phrase that I felt I would just do it on one line.
But I could have put the title on its own line, and the close title
on its own line, as well.
But more on those kinds of details in a bit.
And then that's it for the head.
Now I encounter the so-called body of my page, close body.
Inside of which is, hello world, with this again, some indentation.
And then lastly, close HTML.
So notice the symmetry happens in the opposite order
when you're closing the tags.
The first tag I open, so to speak, is the last tag I closed.
And again, notice the symmetry.
I don't just do one after the other.
And so I'm, indeed, going to start calling these things tags.
HTML is a tagged-based markup language, where tag is generally
open bracket, some word, close bracket.
But sometimes these tags have what we'll call attributes.
Sort of configuration details that allow us to influence the behavior of a tag.
And this attribute, lang, short for language, equals E-N,
is a configuration of the body of the page so that the browser knows.
Or rather, the whole page so that the browser knows,
oh this HTML file is written in the human language known as English.
And so this way, Chrome, and Firefox, and Edge, and other browsers
don't necessarily have to infer from any of the text
on the page, what language it is.
Because as you may have noticed, browsers today
might sometimes prompt you to translate English
to French, or Spanish, or Japanese, or some other language
if they detect that the web page is in some other language
that you yourself might not speak.
So this is just making sure that the web browser knows exactly what language you
intend for this page to be written in.
So that's it.
But what is this page actually going to look like in the end?
Well, let me go ahead and open up, on my Mac,
a very simple program called TextEdit.
And I'm going to go ahead and literally write out this exact same web page.
Open bracket, exclamation point, doc type, HTML, open bracket HTML,
lang equals English.
And then I'm going to get ahead of myself here, just so I don't forget.
I'm going to do open brackets, slash, HTML, to close that tag.
And then I'm going to go inside of it and do what
I recall being the head of the page.
And let me you go ahead and preemptively close the head tag.
And now in here I recall there being a title, so, hello world.
And now close title.
But again, if I really wanted to, I could put these tags on their own line,
but it's not going to matter.
So I'm just going to leave it a little tighter, like that.
Now, below the head of my page was what?
The body.
So I'm going to go ahead and open the body of my page.
Close the body of my page.
And then just redundantly, put, hello world,
a sort of standard go-to message.
So that's it, all I did was open up a text editor on my computer,
TextEdit on a Mac, could be Notepad.exe on Windows,
or any number of other programs.
I haven't yet saved it, but the point is that this shall be a web page.
I just need to save it.
So let me go ahead to file, save.
Let me go ahead and save it onto my desktop, for instance, as hello.
And notice, on a Mac, at least, TextEdit is presumptuously
trying to save it as text because that's all it is.
But I'm going to go ahead and override that to .html.
Also common is .htm, But more common is .html,
and I'm going to go ahead now and save the file.
Now, TextEdit is going to be a little obnoxious and say,
you have used the extension .html at the end of the name,
the standard extension is .txt.
Well, here's where, after taking a course like this,
you should know better than the computer.
And even though Apple's trying to help coax you
toward a more common solution, nope, we want to use HTML.
Now odds are, Notepad on Windows won't prompt you in the same way.
But the point is that you understand better, hopefully,
now what it is we're trying to do.
Because you do want to save this is a web page.
And it turns out that the standard file extension to use for a web page is
indeed going to be .html.
And now, all I'm going to go do is take a look
at my desktop, where I save this file.
And indeed there is a file called, hello.html.
I'm going to go ahead and double-click it.
And, voila, the most uninteresting web page you can imagine.
In fact, let's zoom in on this just so we can see exactly what's going on.
And there's a few things of note.
So one, notice in the top corner of my browser's tab
is apparently the title of the web page.
So this is how you can think of a web page.
It has both the head, which is the very top of the page,
and then a body, which is like 99% of the contents of a page, typically.
So the head really is just this top part, potentially.
Which minimally, for now, just has a title.
The body of the web page, meanwhile, is down here.
And that is where all of my content is ultimately going to go.
But for now, my only content is, hello world.
Now up here, you see kind of a funky URL.
It doesn't start with HTTP or HTTPS because I've not yet
put this file on a server, like the servers we saw earlier.
Rather, this file literally lives on my own laptop's desktop.
And so it's in my users folder, J Harvard folder,
which is my username right now.
And it's desktop, and the file was called hello.html.
And curiously, the URL starts with file:///,
which indicates that the file is indeed local to my computer.
So I've made a web page, yes.
But I haven't put it on a web server.
So no one else on the internet could actually access this web page
unless they physically walk over to my Mac here, and pull up this file.
But that's OK, because there do exist web hosts, as they're called,
and we can certainly go if we want.
And buy our own domain name, ultimately.
And drag and drop these files into some server elsewhere in the world.
But for now, we'll focus on just web development on a local computer,
and actually writing the code that drives them.
So that's the simplest of web pages.
So up until now we've been using TextEdit, a super simple text
editor for actually writing HTML.
But it's not all that designed for writing web pages.
And indeed, as we saw when we tried to save the file,
it also didn't really understand what it was we're trying to do.
Well, turns out there's better software out there, still free,
that you can download on a Mac, or a PC, or other operating systems.
And one such text editor, as these things are called, is called Atom.
And in fact, if I go ahead and open up Atom,
after having downloaded it, and installed it on my Mac,
I'll actually see an interface quite like this,
that's a little more colorful, certainly, at first glance.
And it also allows me to open multiple files at once along the left hand
side, here.
In fact, for today I've prepared a number of examples
in advance, sort of Julia-Child-style.
And indeed, here is hello.html, prewritten by me
and opened in this other program called [? Adam. ?]
Now there's only one other change I made to it,
but you'll see the color is the most glaring difference at the moment.
But this isn't in the file, itself.
And indeed, if I open this hello.html in my browser,
I wouldn't see any of these colors.
The colors are just here for me, the human,
to better distinguish different features of this file from others.
So for instance, all my tags, and angled brackets
are apparently being displayed by Atom, just on its own, in blue.
All of my text, like hello world and hello world,
are being displayed in gray.
And then in big green color, are my attributes values,
so that they really jump out at me.
And now, there's one other detail in this file
that I didn't type up a moment ago.
And that's these lines here, up top.
Well, turns out that HTML supports not just
tags that we've been using to structure the page,
it also supports what are called comments.
And if you write open bracket, exclamation point, dash, dash,
and then some words.
And then the opposite of that, which isn't really the opposite,
because we're missing the exclamation point, but dash, dash, angle bracket.
You can actually put in your web page a comment like this,
says hello to the world wide web.
And this is really just meant for you, later on,
if you forget what this file's for, there is a sentence reminding you.
But more commonly is it used for colleagues you might have,
or other people who might look at your code, your HTML code,
so that they, too, know what you intend for this web page to do,
without their having to read through all of the actual code, itself.
So this file would open up identically in a browser,
but of course it doesn't really do anything of interest.
All it does is display, hello world.
And the whole web is about linking, and clicking, and nowadays dragging,
and going all over the world wide web.
How do we take a step toward that kind of dynamism?
Well, let me go ahead and do this.
Let me go ahead and create a new file.
And as before, I'm going to start this file with doc type HTML,
open bracket HTML, close HTML.
Let me have the head of the web page, and then close the head of my web page.
And then my title, which this time-- and notice among Atom's features,
like a lot of text editors like it, is to actually try
to help you finish your thought.
And here it's prompting me, do you mean title, and indeed yes,
and I can let it auto complete a lot of the words I'm going to type.
But for now I'm going to do Hello comma world, close title.
And indeed let it finish my thought for me.
Now down here, recall, is the body of my web page.
And I'm going to go ahead and close the body of my web page.
And a moment ago, recall, we had, hello world.
But this shall be our first example involving links.
So I'm going to re-title this.
I don't want this page to say, hello world.
I want it to, quite simply, to say link.
Not all that interesting but the interesting part,
going to be down here.
Suppose that I'm making a web page, maybe for Harvard, for their home page.
And I want to invite the users to visit Harvard on the web.
I might say something like, visit Harvard on the web, period.
Now, of course this is not all that interesting, because, indeed,
if I open this file in a browser, I will just see this,
visit Harvard on the web.
And that is not all that interesting, because what's your user going to do?
Odds are he or she, now, is going to open up Google, search for Harvard,
and pull up Harvard on the web.
But what if we can help lead our user there.
So let me actually go ahead and change this.
Let me open up Atom again.
And let me go ahead and change this to just say, how about Visit Harvard.
And how do I make Harvard a link to some other destination?
Well, turns out there are other tags besides these.
There's the anchor tag, abbreviated a, and that tag
will actually create a link for us that looks a little something like this.
So start anchor tag, close anchor or tag, again abbreviate as just, a.
If I go back to the browser, I don't see any difference yet.
Indeed, it's still just says, visit Harvard
the web, but that's because I've changed and save the file,
but I've not reloaded the browser.
So if I go ahead in Chrome here, and click reload in any browser
that you might use, similarly has a reload button, somewhere.
And click, reload.
Indeed, the page has now changed to match my text file.
But it's still not a link.
And so even though I've said, put an anchor here,
I actually need to tell the browser where to anchor this text to.
So it turns out, and you would only know this from a class,
or reading a book, or some online reference,
that the anchor tag takes a whole bunch of attributes.
And, indeed, Atom is trying to complete my thought here for me.
And I'm actually going to go ahead and choose
the second of the suggestions, href, for hyper- reference.
And I'm going to go ahead and specify this equals, quote unquote,
"http://www.harvard.edu/, Save.
So, now notice, I still have a tag.
It's opened and it's closed.
And, indeed, it has an attribute now, just as before.
So just for good measure, let me go ahead now
and make sure the world knows this is an English version of my page.
So now I have two attributes on the page.
The first of which modifies the HTML tag, the second of which
modifies the anchor tag.
And now, this attribute has a hyper reference, which is an actual URL.
And if I go and reload the browser, now.
Notice the, perhaps familiar, if dated, blue text that's also
underlined, thereby signifying, visually,
that this is now a link to some other page.
And sure enough, and this is going to be a little small to see,
if I hover over this with my cursor, notice way down here.
Do you see in your browser's left-hand corner, most likely,
whether it's Chrome or any other, the destination URL, that
clicking this link will lead you to.
Let's try it.
Three, two, one, click.
And voila!
I'm now at Harvard's home page.
And indeed, the URL has changed to be exactly that.
Of course, if I hit back, I go back to where I was.
But I now have a web page, that's still not on the internet,
it's still living only on my own Mac, here.
But that doesn't mean we can't link to websites on the actual internet,
just as we did.
But what's going on here?
It became purple.
That seems a little strange.
It was blue, now it's purple.
What does that mean?
Well, this is a common default convention
by browsers to just indicate to you, the human,
that you've already visited this link.
So especially early on in the web, when pages might just
be formatted with bunches and bunches of links,
can get pretty tedious, and pretty hard to remember
which ones have you visited.
So search engines these days, and even our own little web site,
might change the color of links to indicate, visually
to you, which ones you've actually seen.
And it's the browser that's keeping track of those clicks.
So as an aside, there's an interesting privacy implication there, right.
The browser is now keeping track of what links you visited,
just so we can make them purple.
That means some other human, potentially,
can come sit down at your computer.
And if you've not cleared your cache, so to speak, and reset your browser,
odds are, realize, some of that information
might still be accessible, as well.
Let's open another example.
And rather than type this one out from scratch,
let me go ahead and just open up image.html, An example I've
put together here, in advance.
Now, notice at the top there's kind of a spoiler, this is Grumpy Cat.
And more academically, this demonstrates images.
So indeed, the web is filled with images on web pages, not just text, certainly.
So what do you notice that's different here?
With this example.
The comment up top is certainly different.
But the HTML tag seems the same, the head is the same.
The title is a little different, it just says, image,
but that's not really that interesting.
But there's two new things in the body.
One appears in dark gray, to be an other comment.
And that's just my attribution, so that I and the rest of the world
knows my citation, for where I got what you're about to see.
And now notice below that, this image tag, open bracket, IMG.
So again, the authors of the web were pretty succinct, early on.
So just like we have a for anchor, we have IMG for image.
You don't want to spell the whole thing out, but you can still say, image.
Open bracket, image, Alt equals Grumpy Cat-- more on that in a moment--
source equals cat.jpeg.
And then notice this curiosity--
slash, close bracket.
So whereas every other tag we've seen so far has an open bracket,
some word, close bracket, then some stuff, then open bracket, slash,
that same word, close bracket.
This image tag seems to be empty, in some sense.
It just has a start tag, but it kind of, sort of, has an end tag inside of it,
all in one.
And this is actually deliberate.
Because unlike head, and title, and body, which have the semantics of,
hey browser, here comes my page's head; hey browser,
here comes my page's title; hey browser, here comes my page's body.
All of which can eventually stop.
Hey browser, that's it for the title.
Hey browser, that's it for the head.
Hey browser, that's it for the body of my web page.
Images are kind of there, or not there.
It's not like you can say, hey browser, here comes an image.
It's just going to be there all at once, or not at all.
There's no notion, really, of starting and stopping,
as there is with these other tags.
Which might contain multiple pieces of information,
or multiple words, or multiple characters.
So we're going to go ahead and, just for good measure, close that image tag.
Even though it's not strictly necessary.
By putting the slash inside of the open tag.
Now you can perhaps guess that this is going to embed, ultimately,
a cat whose file name is cat.jpeg.
And that happens to be a file that I downloaded in advance from this URL,
here and then put it in the same folder as this file,
image.html, just by dragging it on my hard drive
to where I intend for it to be.
In HTML, I'm specifying, now, that the source of this image src,
short for source, is going to be that file name, cat.jpeg.
If that cat lived elsewhere, I could put the name of the folder it's in,
or folders that it's in.
If it's on the web itself, I could put http:// something,
and actually give a full path to it.
But I made a copy of this cat, put it in my same folder.
So I can just describe it by its name.
Alt, meanwhile, is a good thing for accessibility.
Because for folks who might be visiting a web page can't physically
see the cat for lack of sight, they can at least,
using technology like screen readers, which will actually
read to them the words on the page.
We can describe to them an alternative version
of this image, that is literally Grumpy Cat, so that that software can
recite to them, verbally, Grumpy Cat.
So that, even though they, too, will be disappointed
in what they're seeing upon visiting my super simple page,
they'll at least know what is there, based on that alternative text.
So we can have both side by side, so that we
know what it is we're embedding here.
So, spoiler, let's take a look at a Grumpy Cat.
Let me go ahead into my folder, open up image.html.
And voila, there is a very Grumpy Cat, staring back
at probably very disappointed humans.
All right, so we've seen now a whole bunch
of basic tags, like body, and HTML, and head, and title, and so forth.
We've seen a for anchor, and we've seen image, or IMG, for images as well.
Both of which have some requisite attributes.
What else can we do in HTML?
Let's go ahead and look at this example, here--
paragraphs.html-- which has a whole bunch of seemingly [INAUDIBLE]
text that I just whipped up.
And notice I've got three paragraphs of text, all three of which
are pretty long.
And so just like a book, I've formatted things pretty nicely
by hitting Enter a couple of times, and indenting.
So that it kind of reads like a chapter in a book.
So again, this is paragraphs.html.
but when I open this page, I actually get this really long chunk of text.
And in fact, given that it's in Latin, or fake Latin-like text here,
it's actually not clear where the paragraphs are supposed to be.
But I do know they're supposed to be three.
And yet this is just one big glob of text
with no line breaks actually in there.
So a sanity check.
It turns out that most any browser allows you to view its source
code in the browser, itself.
You don't even need a text editor.
You can't change it this way, but you can at least see it.
So generally, you can right click or control click on a web page.
And choose something like, view page source, which
is going to show you the actual HTML.
So let's do that.
And sure enough, here is Chrome showing me the source code for this web page.
And you can see the nice indentation and the line breaks.
The fact that I have these gaps between lines here, actually in the file.
And yet, if we look back into the browsers actual rendering of the page,
all of those line breaks are being ignored.
So what's going on?
Well, HTML is a pretty literal language.
It is only going to do what you tell it to do.
Or really, the browser is only going to do what HTML tells it to do.
So if I've not said, hey browser, put a paragraph here,
it's not going to really know what I want.
Because indeed, we've seen this convention of humans,
like me, having a lot of carriage returns,
or new lines and files, or a lot of indentation.
Really, just to keep the page pretty printed, as I said, nicely formatted.
So it's very human readable.
But computers don't care how neat your code actually is.
They just need to know top to bottom, left or right,
what it is they need to do.
Hey browser, here comes web page.
Hey browser, here comes the head.
Hey browser, here comes the title.
They just need these instructions, or commands, in the form of HTML tags.
So it turns out, that there are actually tags and HTML that
allow us to address this problem.
We need to be more explicit with the browser.
And so indeed, what I'm going to go ahead and do here is open
a paragraph tag, open bracket, p.
And indent that.
And then I'm going to go ahead and close the paragraph, thereby signifying,
that's it, browser for the paragraph.
Then I'm going to go ahead and put in another one,
and indent that block of code inside of it.
Really just to keep things neat.
And then I'm going to go ahead and close this one.
Then I'm going to go ahead and open one more.
Indent this final paragraph.
And then down here, I'm going to go ahead and close this.
And so even though the contents of the page haven't changed.
I still just have those exact, three paragraphs.
And I still have some visual space between them.
Now I have a more emphatic, semantic, command,
in the form of these p tags saying, hey browser, start a paragraph,
end a paragraph.
Hey browser, start a new paragraph, end the paragraph, and so forth.
So if I now go back to my browser, and reload this same page,
now I get the three paragraphs that I actually intend.
So on the one hand, HTML is very tolerant of whitespace, and tabs,
and character--
tab characters, and the like because that
lends itself to readability of code.
But, of course, it complicates things in the sense
that we have to be ever more careful to be super explicit with the browser,
to tell it what we want it to do.
Now what about formatting?
I mean, my god, this page is still no more interesting than it was before.
Well, let me go ahead and open up an example.
I did make in advance, as well called headings.html.
Dot This one doesn't have quite as many words, but it does have more tags.
It has an H1 tag, an H2 tag, H3, H4, H5 and H6,
which is heading 1 through heading 6.
Now, it turns out browsers, years ago, just
decided that they would have some standard tags for headings.
Like the chapters in a page, or the sections in a book, or the subsections,
or the sub subsections.
Each of which is generally still prominent, and kind of bold,
typically, by default. But gets a little smaller, a little smaller,
and a little smaller.
And so indeed, just to give you a sense of what these things look like, here.
Let me go ahead and open this up in a browser, Headings.html,
and sure enough, 1, 2, 3, 4, 5, 6.
It's still bold, and you still see all six of the words,
but they get smaller and smaller.
The idea being, that these are generally going to headers
atop of text, in like a book, or chapters, or the like.
So we have those, now, in our tool kit.
Well, what else can we do?
It turns out, if I open up the list.html,
the browsers also support automated lists.
So if I want an on unordered list, with just a whole bunch
of bullets, as is convention, I can open up UL, close brackets.
And then I can have a whole bunch of list items, or LI tags, list item.
Foo, bar and baz, where foo, bar, and baz are just silly words
that computer scientists tend to use when they need just a placeholder word.
Like in algebra you have x, and y, and z.
So, then I close each of these list items.
I close the unordered list.
Let's see what this looks like.
If I go ahead and open up in a browser, list.html,
I sure enough see foo, bar in baz.
But the browser has very nicely for me, given me three bullets.
But you know what, unordered list kind of
suggests that there should be other types of lists in the world,
like ordered lists.
And sure enough, if I go back into my text editor, and just change UL to OL,
and then resave my file, go back to the browser, reload the page,
can you guess what's probably going to happen?
I've gone from an unordered list to an ordered list.
Let me go ahead and hit reload.
Aha!
The browser has taken care of the numbering for me.
So just a marginally nice feature, but now one
I don't have to think about, because now it just does the numbering for me.
All right, so what else might I do on a web page?
Well, let me go ahead and open up table.html,
which looks a little more overwhelming, at first glance.
Now, turns out that it's pretty common on the web to lay out data tabularly.
With rows and columns, like a spreadsheet.
Well, how do you go about doing that?
Because that's seemingly such a complex layout.
Well, we can have in our body, a table tag, as it's called, thankfully.
Another tag that actually says what it means.
TR, dammit, we're back to cryptic tags.
TR for table row.
Just more succinct than writing, table row.
TD, table data.
And then down here, close table row, close table.
And inside of this, a whole bunch of closed table datas, as well.
So, what is this doing, and how?
Well, if you think about what a table is,
it's a whole bunch of rows, one after the other,
one a top the other, on down.
Table data is like columns, or really cells, in the page.
And so this says, hey browser, here comes a table.
Hey browser, here comes the first row in the table.
Hey browser, here's some data.
Hey browser, that's it for the first row.
So that's one, two, three pieces of data.
Or really one, two, three columns, or cells, in that first row.
Hey browser, here comes a second row, dot, dot, dot.
Hey browser, here comes a third row, dot, dot, dot.
Hey browser, here comes a fourth row, dot, dot, dot.
And notice, I was careful to make sure that each of my rows
has three table data, so that everything lines up as intended.
And notice, just for fun, I put some numbers in the middle there,
plus an asterisk, and then a zero, and then a sharp sign.
And let me go ahead and open up now, table dot HTML.
And voila!
You'll be very disappointed to see, the simplest of telephone keypads,
that you might have on your home phone, or cell phone, these days.
But it's laid out tabularly, with everything neatly in rows and columns.
And that's just a single number, but I can actually
do something more interesting.
Actually have words, and phrases, and more complexity, still.
But my gosh, this is still just so, so underwhelming.
I mean, we started off with just hello world, we ramped things up
and we gave ourselves a link to Harvard.edu,
and then we ramped things up further with Grumpy Cat,
and then we kind of got into the weeds of some of these additional tags.
So we have more of a vocabulary now.
More tools in our toolkit.
But how do we actually start to make web sites a little more dynamic, where they
can, indeed, take input from a user?
Well, for this, let's first try to figure out
how google.com, itself, works.
And then see if we can't re-implement a little bit of Google ourselves.
Let me go ahead to Google.com, enter.
And take note of a couple of things, first.
One, notice at top, that I'm not at Google.com, per se,
I'm at www.google.com.
And yet, I'm not exactly there, I'm at www.google.com via https://.
But I didn't type https://.
I didn't type www dot.
I just typed google.com.
So what's actually going on there?
Well, turns out, that the worldwide web does need to use fully formed URLs
in order to bring you to the right place, whether it starts with HTTP,
HTTPS, or even file://.
Browsers today, though, in so far as they're
pretty much used for browsing the world wide web, takes some liberties.
And so if you just type in google.com, most browsers
will assume that you want http://google.com.
Because HTTP, again, is the protocol that your browser
is going to speak with that server.
As opposed to an email protocol, or videoconferencing, or chat protocol,
or something else, the browsers just presumptuously, but pretty reasonably,
by design, are assuming what protocol it is you want.
Moreover, some browsers are even helpful when
it comes to this prefix, www, which is still very common as the subdomain,
or hostname, for web sites.
So that they're not just Google it's www.google.com.
Really just for branding purposes, also for some technical purposes,
for some privacy purposes.
But really it's just convention, for the most part,
for humans to start their web sites with the prefix www, for world wide web.
But it's not strictly necessary.
But browsers will sometimes, if google.com, for instance,
didn't lead somewhere, will presumptuously prepend www you.
Or the server itself will tell you mm, Mm, mm, don't go to Google.com,
go to www.google.com.
So we can actually see all of this ambiguity in practice, as follows.
Here, I have, in this black and white window, a so-called terminal window
on my Mac.
And Windows, and Linux, and other operating systems have these, too.
And I'm going to run what's called the command line program,
just because it's enlightening, here, for our purposes, called cURL.
Which is a program that really pretends to be a browser.
It actually does send a textual message, in one of those virtual envelopes,
to a server.
And it shows us what's coming back in raw form.
So it's not a browser, there's no URL bar for me to type things into.
I can only type into this black and white window.
But it's going to let me send an envelope to a server.
And then get back a response envelope, and see what's actually inside of it,
without actually rendering the web page.
So I'm going to do this as follows.
Let me go ahead and cURL Google.com, Enter.
And you'll see that the following HTML came back,
and it's not even quite like what we've seen thus far.
It's actually all in capital letters, which is actually a little dated, right
now, but this is fine.
You'll notice that-- this is weird--
Google has moved, 301 move.
But recall that 301 was one of those status codes, earlier, that I said,
does mean that the browser should revisit some other URL.
And indeed, we see this document has moved to www.google.com with an http://
explicit prefix.
Moreover, let me do this.
Let me rerun this command, with a dash, capital I, command, line argument.
This shows me not the body of the response,
but, rather, the HTTP headers.
So notice what's different.
This is what, ultimately, is inside of the envelope that
came back from Google.
That's ultimately what we care about.
But recall that also inside of these envelopes,
are one or more HTTP headers.
Among which are the status code like 200 OK, or 301
moved permanently, as we see here.
So by rerunning this same command, cURL with dash I,
I get to see really deep inside of the envelope.
Like what all of these HTTP headers are, too,
which humans don't normally see, because they're really just meant for browsers.
But they do, in seeing them, help us understand what's going on.
So what are the headers that are coming back in Google's envelope?
Well, HTTP 1.1, 301 Moved Permanently.
That's interesting, Google has, kind of, packed up and gone elsewhere.
But where?
To a location.
So the second line is a second HTTP header,
that's tucked somewhere in that envelope from my browser.
And it says, hey browser, go to this URL instead.
Don't just go to Google.com, go to www.google.com using HTTP.
Why?
Just because Google says so.
Their server has been configured by Google's employees
to redirect users to the URL that has the www, just because.
Probably, partly for marketing reasons, partly for technical reasons,
but that is what the server is saying.
There's other information there, too.
The content type of this message is text, slash, HTML.
Happens to use something called UTF 8, or Unicode, in this case.
A superset of ASCII.
It happens to say the exact date and time that this request was sent,
when the response expires.
Indeed notice, Google is telling us that we
can keep this response in our memory, in our computers' RAM, for like a month.
And then don't ask me this question again for a month.
Google is going to just keep saying the same thing.
And then there's some lower level technical--
more technical HTTP headers, there, that we'll wave our hands at, for now.
But my browser might find those helpful.
All right, so if Google is telling me that it, literally, moved permanently,
per the 301 status code.
And its new location is this URL, here.
Well, let's go to that URL, here.
Let me go ahead and start over and do cURL.
http://www.google.com, Enter.
Interesting.
So now I've gotten back a whole, long web page.
That seems to contain, I don't even know what.
So, turns out, this isn't HTML email that we're seeing
at the bottom of the screen, here.
This is something called JavaScript, a programming language
that can actually be used with HTML and CSS,
in conjunction, to create a web page.
But if I scroll up high enough, you'll start to see eventually, ah!
Interesting.
You'll start to see some actual HTML in the page.
And indeed, if I now rerun the same command, but with dash,
capital I, so I get the headers.
Notice, ah, this time it's 200 OK.
And the server has actually responded, rather than redirecting me
somewhere else, altogether.
All right so that's what's deep inside of the envelope.
These HTTP headers.
Let's go back now to a higher level, to the actual browser
that's making these requests.
And see what URL is being requested, and what that very first GET request is.
Let me go ahead and search for my favorite, cats, enter.
And you'll notice at the top, now, the URL
has changed to be a pretty long sequence of characters.
And honestly, I don't even know what most of these characters mean or do.
It's really up to Google to understand that.
But I do know that I'm looking for cats and, frankly, sometimes when
I get curious and try to start poking around on websites.
I might just start tinkering to see if I can understand what's going on.
So I'm going go ahead and delete most of the URL.
And then go ahead delete even more of the URL.
And distill it to just this here https://www.google.com/search.
And indeed, it seems Chrome, here, has redirected me
to HTTPS so that the connection is also secure,
which we did not see with the command line version of cURL.
So slash, search, question mark q, equals cats.
Let me hit Enter.
Seems like the exact same search result. So curiously,
even though Google, upon searching for cats, previously used a super long URL,
much of which I didn't understand, looks like that's not strictly all necessary.
And it looks like it is sufficient information
to get search results on cats, to just haven't a URL that looks like this.
Now, this is useful because I'm going to use this information
to make my own search engine.
Let me go ahead and start.
In Atom, let me go ahead and create a file
that's ultimately called search.html.
let me start it as usual with a doc type.
Let me then start the body, the web page, itself, with open bracket HTML.
Let me have a head up here, and close head.
And then in here, a title.
And I'll go ahead and call this, search, just so I remember which page is which.
In here is going to be my body, and close body.
And now I need to introduce a new tag.
This one being in HTML form.
Some kind of text boxes, and maybe check boxes, and buttons, and radio buttons,
and the like, that will allow me to actually submit information from
my page to Google's.
And I know from practice that form takes an action attribute.
Which in this case is going to be, I'm going to go out on a limb
here, and do www.google.com, slash search.
And that's it.
And I'm going to use the method called, GET.
It turns out, that there are different types
of requests you can make of web pages.
The default, and perhaps the most common is GET.
And we've literally seen that keyword before, here it's written in lowercase.
But in other contexts it's written in caps.
GET me slash HTTP 1.1 was that earliest message we saw.
So here, I see a reiteration of using that method.
And this is in contrast with post, and put, and patch, and delete,
that are also supported, but not generally used by us
humans in the same way.
Inside of this form, I'm going to introduce one other tag called input.
I'm going to give this input a name of q.
And the type of this input is going to be text.
And that's it.
I'm going to go ahead and open and close the tag all in one
fell swoop, because there's really going to be nothing inside of this input,
by definition.
Meanwhile, I'm going to have one other input type,
this one's going to be a submission type.
And it's value, or the label on it, is going to be just search.
So we've not seen some of these tags before.
But you can perhaps infer what's going to happen.
Here is, hey browser, here comes a form.
Hey browser, give me an input of type text.
Hey browser, give me an input of type submit.
And this one, by convention, is going to be a button.
So this would seem to give me what?
This would seem to give me, if I open up search.html.
Wow, I have to kind of look all the way up at the top to see it.
A super simple text box, a super simple search button, and that's it.
But what's magical, now, about this example,
and because of the fact that I know a bit of HTML, now, notice what I can do.
I can go ahead and zoom out, and search for cats, and then click Search.
And even though I've not implemented a database, let alone a web server,
let alone a web search engine, notice that I can just kind of
punt that detail to Google.
And notice, voila, so long as I send users to Google,
I can get them some cats.
And lest you think this is sort of precanned, let me go ahead
and try start searching for not just cats, but dogs.
And see if my same form works for other animals.
And indeed, there is the most adorable dog that comes back as well.
And notice what's happening.
My web page, which is just running on my Mac, is written in HTML,
it's using an HTML form, with an action attribute and a specific method.
And together, the browser is using that HTML form as sufficient information
to assemble the URL.
To which it sends the user, when you type into that input text box,
and click that submit button.
Indeed, we end up at Google.com slash search, question mark, q equals dogs.
Where the question mark means, hey browser, or rather, hey server,
here come my HTTP parameters, as they're called.
These keys and values, a name like q, a key, and a value like dog.
So q, my query, equals dogs.
Turns out you can have multiple parameters.
So you might see ampersands, sometimes, as you might have noticed earlier,
that before I deleted them.
But for our purposes today, we just need this one parameter.
So, we're not going to focus on implementing an actual search engine.
For now, we'll just assume that someone else will build that for us.
But let's see if we can, at least, make our web pages a little prettier,
or at least pave the way for making our web sites better designed.
How to do this.
Let me go ahead and open up css0.html.
This is now the first of a final series of examples
that introduce another language, still.
We've been focusing thus far on HTML, HyperText Markup Language, which
is all of these tags and attributes.
And that allows us to structure our web pages,
and literally tag information on our web pages,
so that we know what goes where and how to display it.
But we've seen that browsers default styling is kind of lame.
It's just like black and white, background and text.
It's big and bold, or small and bold, for the headings.
And it's really not all that interesting.
I mean, my god, the font is like Times New Roman by default.
Can't we do better?
Well, you can.
And indeed, with modern web development, do you have access to not just HTML,
but also a language called CSS, Cascading Style Sheets,
that allow you, in a web page, to kind of take the styling the last mile.
To take this structure from your web page,
and then tweak it so that it looks prettier
and it's laid out exactly as you want, not
how the browser is laying it out by default.
So how do we do this?
Here is CSS zero.
And you'll notice a few new tags, header, main, and footer.
Not to be confused with head, which is the top part of the web page.
Header is just semantically the top part of the body.
Main is the main part of the body.
Footer is the bottom-most part of the body.
But we don't have to use these tags, we can use other names, as well,
that you might find in a reference or online resource.
But I have three parts of this page, a header, main, and a footer.
The first of which says, John Harvard, second of which says,
welcome to my home page, last of which is my copyright symbol, just
as a little footer on the page.
But notice what I've done.
I've added to each of those tags, header, main, and footer,
a style attribute.
Which we've not seen before.
And my style attribute has, in green here, a bunch of properties,
as we'll call them.
These properties are not technically HTML,
these properties are another language, altogether.
Thankfully still looks like English, but notice the formatting.
It's another key value pair paradigm.
So we've seen in URLs that we have HTTP parameters, like q equal search,
or q equals cats, or q equals dogs.
Similarly, in CSS, not just HTTP, do you have this notion
of keys and values, keys and values.
But the syntax is different.
This time, we're going to use colons and semi-colons to separate things.
So it turns out, in the language called CSS, there is a property called,
font dash size.
After which, we put colon.
After which, we put the font size we want.
Turns out that CSS, this language, supports small, and large,
and a few other words, as well.
Or you can literally put, like, 16 point, pt; or 24 px, for pixels;
and a few other measurement systems, as well.
But I'm going to go ahead and still leave it a little relative,
and just let the browser figure out what large is.
Text dash align colon center, is going to center the text.
And I've separated these properties with semi-colons.
And this last one is not strictly necessary,
but I put it there just in case I add any more later.
Meanwhile, the main part of my web page should be medium font size,
also aligned in the center.
And then the footer of my web page should be small, also aligned center.
So if I go ahead now and open up css0.html.
Let's look, all right, it's still pretty ugly, but it's getting there.
It's now centered, as I intend, and this font's a little bit bigger than this,
than this.
So it's kind of laid out hierarchically in that way.
But notice, I didn't really do this in the best possible way.
Looks like there's a lot of redundancy, here.
The font size is varying, to be sure.
But what is not varying?
Yeah, like text align center, text align center, text align center.
That's kind of lame that I've just copied and pasted
that all over the place, when really I'm not leveraging
the hierarchical nature of HTML, here.
It turns out that Cascading Style Sheets, do cascade
in a couple of different ways.
One, you can actually have multiple CSS files, eventually--
one of which we'll soon see--
that can override other such files, and so forth.
But notice, they also support some notion of hierarchy, it turns out.
So if you want the header, and the main, and the footer
tags all to be text align center, well, do they have a common ancestor,
so to speak.
If you think of a web page really like a family tree,
where the roots of the tree is HTML, and it has two children, head and body.
And actually, you know what, we can see this.
Consider this HTML, here, which was that simplest of web pages
with which we began, you can actually think of this as kind
of like a family tree, as follows.
If you think of the whole document as being this node, so to speak, up here.
Below which, is the HTML tag, or element, as it's more
generally called, and that HTML element has two children, head and body.
And they're children in the sense that, even
though they're both inside of the HTML tag, they're both at the same level.
Head is kind of alongside body, body is not inside of head.
And so, we can draw them on the same level, conceptually.
Meanwhile, the head of the page has a title child.
And the title tag has a hello world string inside of it.
Meanwhile, body has its own string, hello world.
And I've drawn these in different shapes here
to convey that they're each a little bit different.
Document is special, refers to the whole file.
But HTML, head, title, and body are all HTML tags.
And then these ovals, here, hello world, hello world, are just text nodes.
And indeed, this is what a computer scientist would call a tree.
Not unlike a family tree.
And trees have nodes.
And in this case when a browser receives a web
page, in one of those virtual envelopes, and reads it top to bottom,
left to right.
What it's really doing, underneath the hood, is, thanks to programming code
that programmers have written at companies like Google,
and Microsoft, and others, they are building up
in your computer's memory, or RAM, a treelike data
structure, that looks, if you were to draw it, a little bit like this.
And so notice here, that head is a child of HTML,
just his body is a child of HTML, and title
is a child of head in the same way.
So if we go back to the example at hand, notice the header, and main,
and footer in this slightly more involved example,
are all children of what elements.
They're are all inside of the same parent called body.
Which suggests an opportunity to factor out, so to speak,
the CSS property that's common to all of these.
And put it on their parent element, so that it kind of cascades downward,
atop all of those elements.
And we can see that here.
This is css1.html, which is almost the same, except it's a little narrower.
Because I removed all of that text align center and put it, where?
On the body in its own style tag.
So this is nice.
And indeed, this is now what distinguishes one page from another,
being better or worse designed.
Both of these are correct, both of them achieve exactly the same goal.
But honestly, this one is a little easier to maintain.
Why?
Because if I open up css1.html, as I might here,
you'll notice that I see a whole bunch of text in the center.
But if I want to go ahead and change that, you
know what, I can just change it in one place to text align left,
reload the page.
And now, it's all the way over on the left.
If I go back into the editor and change it now to right, reload the page.
Woo.
That's what it sounds like when alignment changes on a web page.
It's now all the way over here, on the right.
The key takeaway, though, is that I can just change it in one place,
instead of three places.
And surely, this is a pretty simple web page.
There's not all that much content there.
But in actual web pages on the internet, is there
many, many, many more lines of code.
And so these kinds of design decisions start to make even more sense.
And save even more time.
Indeed, let's consider, now, an alternative approach still.
A bad principle at hand here is this, I am
co-mingling my web page's content with the presentation
thereof, the aesthetics thereof.
And this, in computer science, and programming,
specifically, is generally frowned upon.
To have your data, like John Harvard, welcome to my home page,
the actual content you care about, intermingled
all in the same file, let alone the same lines
of code, with the stylization of that data.
Aligning things in the center, making the font large, or medium, or small,
it's just a little sloppy.
Plus, it makes it harder to collaborate.
If you are really not good at web design, the aesthetics of it,
but you can certainly make HTML, and you can structure web pages,
and maybe you're a programmer who can generate HTML in some other language.
Well, if you want to collaborate with someone who's got
more of an artistic eye, and he or she is happy to do all of your CSS.
And take the web site the final mile, you just got to get it to him
or her in some structural form.
Well, it would be nice, frankly, to put all of the CSS in one place
so that he or she can work independently of you.
So that you're not, literally, changing the same lines of code.
So in css2.html, do we have a step toward that.
Notice that I've replaced the style attribute in these lines,
here, with a new attribute called class.
And class, I've come up with arbitrarily, but kind of
reasonably with three key words, large, medium, and small.
I could have called it foo, bar and bar; x, y and z.
But I'm choosing words that describe the kind of class
that I want to apply to each of these HTML elements, header, main,
and footer.
Indeed, if I scroll up, notice what's up here now.
Instead of using style as an attribute, a curiosity about the style attribute,
is that it also exists as a style tag.
And if you have a style tag, it should go in the head of your web page.
Which is why I've scrolled up here.
And now notice I've done a few different things.
I have put a few keywords here.
Centered, large, medium, and small.
Each of which I very deliberately started with a dot.
Kind of looks like a typo, but it's not.
Turns out the convention in web development is to use a dot,
and then a word, when you want to define your own class,
your own set of properties with which to stylize a web page.
So I have arbitrarily, but again pretty reasonably,
I think, come up with some key words, centered, large, medium, small.
And put dots in front of them so that those are classes,
those are now added to the browser's vocabulary.
Specifically, if I use the centered class,
it's going to make whatever it's applied to text align centered.
If I use the large class, it's going to make
the font size of its contents large; medium, medium; small, small.
So I've kind of given myself new puzzle pieces,
of some sort, new building blocks I can use to create a more well-designed web
page.
Because notice what I've done, not just in those tags, but even in the body,
I've now specified that the class of the body should be centered.
Use all of the properties associated with centered.
The header should be class large, use all of the properties associated
with the class large.
Medium and small, same thing.
So the end result frankly, is not all that surprising.
It looks exactly the same, but it's better designed at this point.
Because now my colleague, for instance, can isolate his or her work
to just the top of the file, while I work on the bottom.
But frankly, even that feels like it's inviting some trouble
and we don't have to do that.
Indeed, we'll soon see we can factor this out to a separate file.
But you know, this can be done even more cleanly.
Let me show you css3.html.
And, oh my goodness, notice what's happened.
Now I've really whittled down my HTML code to its essence.
I'd argue this is much more readable now, because it literally just says,
header, main, footer, with no visual distractions of style
attributes at all, or class attributes at all.
My text in gray, John Harvard, welcome to my home page,
and so forth, really jumps out at me.
And I'm just using fewer characters.
So beyond the readability of it, just took less work to write that out.
But what have I done differently?
Well, up at top, notice this.
It turns out that while, yes CSS and HTML do support classes,
I don't technically need them in this context, right.
Classes are especially useful for larger web pages where you're reusing styles,
and you want to give them names so that you can use them
as ingredients to your own web page.
And maybe even share those CSS classes or ingredients with other people.
But here, I really just want to text align center the body of my page.
I want to make the font size large for the header,
the font size medium for main, and the font size small for footer.
And so notice the absence of any periods before these words.
I can also specify actual tags, or elements, of my web page by their name.
I don't need to go to the trouble of adding classes,
unless that would be helpful for me.
I can just distill it as this.
And modify the aesthetics of my web page using just those selectors, as they're
called.
And indeed, if I open up this, css3.html, it, too, looks identical.
But now, I'm going to take it one step final and further.
In css4.html, I have really pruned this file down to its essence.
And notice here, that there's no mention even of the style tag,
up in the header of my web page.
Rather, in the head of my web pages, only the title, as we've always seen,
and also a link tag.
Which, confusingly named, has nothing to do
with blue links you might click in a web page, those again are anchors.
But rather link href, so the attribute is unfortunately
named the exact same thing.
But href css4.css, which happens to be the name of a file in the same folder,
the relationship to which is that it's a style sheet,
and then I'm closing that tag.
So, here notice, that I am specifying in the head of my web page, hey browser,
please link to this other file called css4.css
with which I have a relationship that is that of stylesheet.
That is to say, hey browser, my stylesheet is called css4.css.
And what is in that file?
Literally, the same thing that was in the page a moment ago.
So I factored out all of those lines from my HTML file,
and just put them in their own.
Which is useful for a few reasons.
One, now my colleague can go off on his or her own
and focus entirely on that file.
Send me, somehow, the latest version, eventually,
and we'll merge our work together.
But two, if I want to use these same settings in multiple web pages,
if I want to make them freely available as open source software,
I can now isolate all of those properties, those aesthetics,
to one file.
And share it with anyone else in my company or the world.
I can even have different themes.
In fact, if you've ever used software, or WordPress, or any other kind
of blogging software that lets you have standard functionality
with your account, but it also lets you change the aesthetics.
Like maybe you have a green theme, or a blue theme,
or a minimalist theme, or a very 3-D theme,
or any number of different aesthetic changes.
Those are generally implemented in the form of just different style sheets.
So a web site like WordPress might have one of these,
if everyone has to use the same aesthetics.
Or two of these, or 10 of these, or any number,
or maybe they even let you make custom style
sheets to configure your site or your blog to look exactly as you,
yourself, intend.
And so using CSS can we do exactly that kind of customization.
So at the end of the day, web development
is really about writing code.
Its code in the language called HTML, HyperText Markup Language,
which is really about the structure of your web page.
What is the head, what is the body, and what goes inside of each.
But then there's CSS, Cascading Style Sheets,
that allow you to fine tune the web page and really control the aesthetics.
And I've not really made the prettiest of websites here.
But it turns out now that you have these building blocks,
you know what a tag is, you know what an attribute is,
and you've seen some examples thereof, you're
really equipped to bootstrap yourself to learning all the more about web
development on your own.
From any number of online resources, or tutorials, or books, because now
you just need to build out your vocabulary.
You just need to know what other tags exist,
what other attributes exist for those tags, and then you're off and running.
Indeed, what's important, ultimately, is these concepts.
The fact that a web page is nothing more than a text file
written in CSS, and HTML, and maybe some JavaScript, still.
And that file, while most of today lived on my own Mac,
could certainly be dragged and dropped or somehow uploaded to a server.
So that it lives not at file:/// slash, but at http or https://.
And in order to get my web site on the internet,
I just need to make sure I have one of those servers.
And most of us don't go out and buy big fancy rack servers,
let alone have our own data center.
Rather, we just sign up for free, or we pay someone a few dollars a month,
a web host, so to speak, who does have data centers like that.
Who does have servers like that.
And what they create for me is a username, and a password.
And they give me, really just a folder, at the end
of the day, into which I can put all of my files--
.html, .css, .jpep and others, so that now I can put my work of art
on the internet at a specific URL.
And if I go to the trouble, too, of buying a domain name,
for a few dollars a year, or a few dollars every several years.
And I can figure that domain name to know about,
to point at, that web post, and the IP address, or IP address is thereof.
Now can I have my own custom domain name,
so now I am truly out there on the worldwide web.
So all it takes is these building blocks.
All it takes is an understanding of HTTP and how this runs atop of the internet.
So that ultimately, you can not only get some pages from the internet,
you, yourself, can put them there.