Placeholder Image

Subtitles section Play video

  • [MUSIC PLAYING]

  • DAVID J. MALAN: Recall that when you visit

  • a URL, like http://www.example.com, you're

  • actually requesting of some web server a file, most likely,

  • called, for instance, index.html.

  • Now, to be fair, that file can be called something else

  • and it doesn't actually have to be a file.

  • It can be a program that generates a response for the user.

  • But in the common case, it's indeed a file called index.html,

  • even if you or some user has not explicitly typed it.

  • And what that means is that you're effectively

  • downloading from the server just a file that happens to be a text file,

  • such as one written in Notepad.exe or Text Edit on a Mac.

  • But this file is written in such a way that the browser understands it.

  • It's written in a language that calls itself HTML or HyperText Markup

  • Language.

  • And now, and this is indeed not a programming language

  • but a markup language, a set of instructions

  • that tells the computer what to do and how to do it, but not in the way

  • that we saw with programming languages proper.

  • We don't have an HTML functions or loops or conditions or variables.

  • Rather, we have what we're going to call tags,

  • special instructions to the browser that tell it what to start doing

  • and eventually, what to stop doing.

  • So for instance, if you might want to display text or center that text

  • or format it or structure it in some way,

  • HTML is going to allow us to present contents of a web page.

  • And eventually, we'll see another language

  • via which we can style the same, but we're not

  • going to do it in the same way as logically as we

  • did with the programming language.

  • So what might the simplest possible web page

  • be that we could implement in this language called HTML?

  • Well, consider this web page here.

  • In the main part of the page, do I see, hello, body, a sort of greeting

  • to the actual user.

  • And up here in the title do I see quite simply, hello,

  • title, referring to the title bar or the tab atop this web page.

  • Now it's incredibly simple.

  • It's only whitespace everywhere else.

  • So this web page would seem to have just a couple of phrases.

  • So how, using this language, HTML, would you go about implementing this page?

  • Well, let's take a look.

  • Here I have just a simple text editor, again similar in spirit

  • to Notepad or Text Edit.

  • I'm going to call this file index.html, simply to be consistent with that URL

  • we saw.

  • Now, what might the contents of this file be?

  • Well, to write the simplest possible web page,

  • I'm simply going to begin as follows, open bracket, or less than sign,

  • followed by an exclamation point, and then DOCTYPE html.

  • A fairly arcane line of text that is simply

  • a clue to the browser to say hey, browser,

  • here comes a web page written in a version of HTML version 5.

  • Indeed, this first line of code has changed over the years.

  • This is perhaps the simplest yet, and it implies only implicitly

  • that indeed we want to use HTML5.

  • Now thereafter, actually come the structure of the web page itself.

  • And so I will literally type this.

  • Open bracket, html, close bracket.

  • And then a couple of lines later, let me go ahead and say, open bracket, /html.

  • These are what are called tags and they say to the browser, hey browser,

  • here comes a page written in HTML.

  • And hey browser, that's it for this web page.

  • So whereas, we might call this first tag here the start

  • tag and this last tag the end tag, we might also

  • call them the open and close tag, respectively,

  • thereby implying that there's a structure and a symmetry

  • really to a web page, whereby, you both start and stop, ultimately, a thought.

  • Now inside of this web page, you're going

  • to be at least two parts, just as we saw in the rendering

  • thereof in the browser.

  • We have what we're going to call the head of the web page,

  • the very topmost portion thereof.

  • And I'm going to go ahead and preemptively say,

  • open bracket, head, closed bracket.

  • And then again, close that tag by using a forward slash

  • in front of that very same name.

  • Now for now, the only thing that can go in the head of a web page,

  • for our purposes, it turns out is something like the page's title.

  • And I'll go ahead and say title, and just as before, hello, title.

  • Now that's the end of my thought, and so I'm

  • going to tell the browser that is it for the title,

  • and I'm going to close or end that tag, so to speak.

  • So that covers it for the top part of the page.

  • What about the rest of it-- the body of the page?

  • Well there too, I have another tag quite simply called

  • body that says, hey browser, here comes the body

  • of my page, the remainder of the contents that really fill out the rest.

  • Thereafter, I'm going to preemptively say, all right,

  • that's going to be it for the body.

  • But inside of that body, are going to be the contents thereof, perhaps just

  • a phrase like I had before, or perhaps a picture or video or much more.

  • This is where you would put the contents of a company's web page or anything

  • that you want to present to the user.

  • I'm quite simply for now going to say hello, body, and that's it.

  • Hereafter, I'll save this file and it will exist on my hard drive

  • as just that, a file, called index.html.

  • And if I now go into my browser and choose File Open

  • or simply drag that file index.html onto the browser, what I will see

  • is just this.

  • Our browser pictured here is Chrome and in the title

  • bar is indeed hello, title, and in the body is just that, hello, body.

  • The browser knows what to do.

  • Because indeed, at the end of the day, all a browser does is that.

  • It reads this language called HTML in a file called, typically something .html,

  • top to bottom, left to right, and every time it encounters one of these tags,

  • it does what that tag means.

  • So Google and Microsoft and Mozilla and others

  • who create these so-called browsers simply design them in such a way

  • that they know how to, if you will, interpret HTML.

  • Again, it's not a programming language or interpreted in quite the same way

  • that Python is, but it is in fact an interpreted, line by line,

  • top to bottom, left to right and the browser simply

  • does what these tags tell it to do-- present the title up

  • here and the body down here.

  • Now fortunately, there are many more tags than just these, whereby

  • we can create lists and tables and paragraphs and more.

  • And so, let's flesh out the vocabulary, so to speak,

  • that is HTML by looking at some more complicated examples.

  • Here for instance, is a file called paragraphs.html,

  • and I've begun it just as I have before with a DOCTYPE html

  • at the top an html tag thereafter and a close html tag

  • down below, a head, a close head, an open body, a close body, a title

  • tag, and a close title tag thereafter.

  • But between that, I've gone ahead and whipped up

  • a couple of paragraphs of Latin, or well, Latin,

  • thereby filling out the screen much more.

  • But let's go ahead and now open this file on a browser

  • and we'll see that it doesn't quite present in the way that you'd think.

  • Indeed, when I open this file in my browser

  • all I see is just one big block of text, no two paragraphs,

  • even though when I typed it out did I very deliberately

  • hit my Enter key a couple of times in order

  • to create that break between paragraphs.

  • And so, what's going on then?

  • Why is the browser ignoring me?

  • Well indeed, just as with the tags, the browser

  • only does what it tells you to do.

  • And in fact, by default, it ignores whitespace-- presses of your space bar

  • or tab key that are typically used only in writing code

  • to make the code more readable for the user,

  • whether Python or HTML or anything else.

  • And indeed, notice how I very nicely indented here everything on the screen,

  • including those paragraphs.

  • But I don't want to see all of this space in the page

  • and I don't want to see all of this space in the title or body,

  • and so the browser just ignores seemingly superfluous whitespace,

  • simply presuming that the code itself was pretty printed.

  • But that's of course, a problem when what I want to display

  • is text, English text, that actually has paragraphs and structure.

  • And so, I need to format this a little bit differently.

  • I need to tell the browser, hey, browser, break lines here so as

  • to move the text down below.

  • So let's go ahead and do that.

  • And let me go in here between these two paragraphs and type out a open bracket,

  • br, closed bracket, indicating line break.

  • Indeed here, br is obviously not a complete word.

  • It's just an abbreviation, because HTML ultimately

  • tends to optimize characters.

  • And for any type of tag, so to speak, that you might use frequently,

  • it tends to have a shorter name or nickname like this.

  • Now curiously, about br, that's it.

  • I'm done typing.

  • Because with a line break, it's either there or it's not there.

  • You can't really start breaking a line and then stop breaking a line.

  • You either do it or you don't.

  • And so the br tag, unlike HTML head title and body,

  • does not in fact have a corresponding end tag.

  • You could theoretically go ahead and say open bracket, /br, close bracket,

  • but it has no meaning.

  • And you shouldn't put anything in between anyway.

  • And so, it's not strictly necessary and HTML5

  • allows you to omit that altogether.

  • Or if you really do like to feel symmetric,

  • can you put the forward slash inside the tag right there at the end.

  • So here, too, the language itself HTML allows for all of these possibilities.

  • But why type more characters when you can type fewer, and so

  • we'll leave it, for instance, as just this.

  • Let me go ahead and save now the file and reload the browser.

  • And you'll see that it doesn't seem to have quite solved the problem.

  • Now it did make sure that, that first paragraph ends and the next one begins

  • here, but I don't see the space that I'd like

  • to see as in a magazine or paper or book,

  • whereby those two paragraphs are truly distinct.

  • So how can I do better?

  • Well, if one br tag got me one break, why not use two get two?

  • And so, let's do that in my code instead,

  • this time doing open bracket, br, close bracket again, telling the browser,

  • give me two line breaks here.

  • And if I now reload that page in my browser,

  • I do in fact see a gap between paragraphs.

  • But this feels a little bit hackish, and frankly,

  • old-school, akin to a typewriter, where the only expressiveness you have

  • is what you can do mechanically.

  • But these days in software, we should certainly be able to do more.

  • And so indeed, HTML accommodates this.

  • Rather than just break lines, why not tell the browser, hey, browser,

  • here is a paragraph.

  • And say that a couple of times for a couple of paragraphs.

  • So let me go back into my code here, and instead of this line break,

  • instead first go to the start of my text and say hey, browser, here comes

  • a paragraph, abbreviated just p.

  • And just for consistency, I'll go ahead and indent the rest of that paragraph.

  • And notice my text editor is smart and it's moving everything over,

  • just so that I can see that this is all part of one thought, if you will.

  • It's not actually adding all of these spaces to the actual output.

  • But when that paragraph is done, I should tell the browser as much and do

  • open bracket, /p, close bracket, thereby saying hey, browser,

  • that's it for this paragraph.

  • But I again want to say this a second time and so here on my second line

  • will I go ahead and say open bracket, p, close bracket.

  • And then below that paragraph of text, go back down

  • and finish that thought as well.

  • And so, it's a bit more verbose now because I

  • have to say, both start and stop, or open and close.

  • But now, I've told the browser all the more explicitly what

  • instructions to follow.

  • And if I go back into my browser and reload now,

  • we'll see that I indeed still have that gap between lines,

  • but I no longer have to fairly hackishly, if you will,

  • hit line break, line break just twice.

  • So that's how I get paragraphs.

  • How about a list, whether a to do list for the day

  • or a whole list of thoughts.

  • Well here, I've readied a page called list.html.

  • And as before, I've structured it in the usual way, DOCTYPE up top

  • and then HTML at the top, close HTML at the bottom with a head and a body

  • in between and only a title.

  • So let's now focus on making a list inside of that body

  • and suppose that I have three thoughts on my mind, foobar

  • and baz, the go-to words for any computer scientist,

  • not unlike xy or z for a mathematician.

  • So if I have three things to say, I might go ahead

  • and say, foo bar and baz, one per line, just as you might on a tablet

  • or on an actual piece of paper.

  • And let me go ahead and Save this now and open it in my browser.

  • And unfortunately, just as you might expect, per our foray into paragraphs,

  • each of those thoughts ends up on that same line.