Uncategorized

[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

You Want To Have Your Favorite Car?

We have a big list of modern & classic cars in both used and new categories.