[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, here's some data. 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.
