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.