SPEAKER 1: Hello, everybody, and welcome to one of our last lectures

for exploring digital media.

I can't believe that we're here at the end.

This week we're going to cover web development.

And with us is a special lecturer, David Malan

from Harvard University, who teaches the intro to computer science course CS50.

It is a great course that many of us here have taken,

and I would highly recommend that you take,

if you're interested is piqued tonight with your web development stuff.

It covers the language C--

it covers C, it covers Python now.

When I took it, it was PHP.

So Python, and then you get a little bit of JavaScript, as well.

You want to--

DAVID MALAN: Little bit of SQL, a little bit of Scratch, and then the two

languages will be looking at tonight--

HTML and CSS, of course.

AUDIENCE: People still use C?

DAVID MALAN: Indeed.

It's actually one of the most popular languages,

albeit for very specialized purposes still.

AUDIENCE: Wow.

SPEAKER 1: All right.

So feel free to chime in, ask questions, and make this as lively as possible.

And welcome David.

Thank you.

DAVID MALAN: Thank you.

So nice to see everyone.

So the overarching goal tonight is web development, the goal of which

is to empower you to understand how the web itself

works, how to write web pages in these languages called HTML and CSS.

And ultimately, give you enough technical comfort

with which to exhibit your own work, creating, ultimately,

a portfolio once you're out there in the real world,

whether it's for photography or for videos that you've put together.

And indeed, even if you're going into tonight's material feeling quite less

comfortable, even if you're quite comfortable now with a camera,

or at least more comfortable now with a camera,

realize that what we'll do tonight is actually relatively accessible.

We'll focus on the fundamental principles on how the web works

and how web pages work, and the language itself is--

HTML-- and how you can teach yourself here on after more about the language,

and teach yourself more techniques than we might actually look at in the class

itself.

So if you walk away tonight, or after watching

this with just a bit more curiosity and a bit more interest in diving

into this world, we'll have done our job.

Because even in the real world, if you go off and want to create something

like a portfolio website, or something for work,

or for personal projects using popular sites like Squarespace or Wix--

which are site-builders-- generally, most people,

whether technical or less technical, decide that they really always want

to tweak something, or they want to add some feature or remove some feature.

And once you understand a bit of tonight's material--

HTML and CSS-- can you go in and do those things yourself,

and solve problems on your own.

So without further ado, let's consider how we get

to actually making our own web pages.

Here's a URL, which is, of course, the address via which

you can access something on the web.

HTTP refers to the protocol or the language

that a web server and a web browser speak.

And we won't go too much into the weeds on what that is, but suffice

it to say there is a convention via which web browsers know how to request

web pages from the internet, and a convention

via which web servers know how to respond with the contents of web pages.

Now, where are those servers?

Typically at domain names, like example.com, or more specifically here,

www.example.com.

And of course, this just represents one or more servers on the internet.

And I say one or more because the bigger companies

out there, like the Googles of the world certainly

have more than one server that lives at a particular address,

so that they can handle thousands or hundreds of thousands of users at once.

So for tonight's purposes though, we'll assume this refers just

to a single web server.

But what does it mean when you visit www.example.com?

Well, it turns out that implicit in that short URL is generally some file name.

So when you don't specify a file name after the slash in a URL,

it typically implies something like index.html.

It can also be index.htm, or default.asp, or default.htm.

It completely depends on the web server.

But probably the most common convention in the tech world

is to name a web page in a file called index.html,

because at the end of the day, that is all the web page is.

Whether you're visiting Facebook, or Google,

or any other web-based application these days, what you are technically

doing is yes, visiting a URL, but that URL is telling the server,

please give me a specific file from that server

so that my browser can show me the contents of that file.

So here's where we'll spend all of our time

tonight, actually creating the language--

HTML-- that is ultimately inside of this file.

So what is HTML?

It's not a programming language, per se.

You can't use this language to build programs or write software.

It's a markup language, which means it has

what are called tags, which we'll see in just a moment.

And those tags will allow you to tell a browser what to display on the screen

and how to display it.

So if you rewind quite a few years ago, if any of you

grew up using WordPerfect before there were WYSIWYG editors-- what

you see is what you get-- like Microsoft Word,

you actually used to use low-level commands in your text file to say,

hey, WordPerfect, start making my text bold,

hey, WordPerfect, stop making my text bold.

So it was very pedantic.

And you, the human, the author had to tell

the word processor exactly what to do.

Well, turns out HTML is Hypertext Markup Language.

And a markup language, as we'll see again,

has tags, special instructions to the computer that tells it

what to do with other words in that file.

And hypertext is just a fancy term referring to the ability

to link one page to another, ergo Hypertext Markup Language.

So let's take a look at the simplest possible web page.

If you were to visit some web page-- maybe

it's www.example.com-- and see just a web

page that says something simple like, hello world.

Very simple black and white text.

Nothing else, no images.

The contents of that file index.html might look quite simply like this.

So this is, perhaps, the simplest web page

that we could write that a browser would understand.

So if I visit http://www.example.com and hit Enter,

most likely what the server is doing is sending me back over the internet

a file called index.html--

just a text file.

And inside of that file is literally these characters, top to bottom,

left to right.

When my browser-- whether it's Chrome, or Edge, or Firefox, or Safari,

or any other browser--

receives this file, it literally looks at it, reads it top to bottom,

left to right, and then does with this file says,

displaying on the screen whatever the tags, so to speak,

therein tell it to do.

So what are these tags?

Well, let's look at these step by step.

The first line in this file is probably the most cryptic

that we'll actually see.

Its what's called a document type declaration.

So it's a little cryptic in that it has an open angle bracket--

or a less than sign--

and then an exclamation point, and then the word DOCTYPE, and then a space,

and then html, and then a closed bracket--

or a greater than sign.

Well, that's just an arbitrary sequence of characters

that the consortium that designed this language years ago

decided means, hey, browser, here comes a file written

in this language called HTML, and specifically, the latest version

thereof, which is HTML5.

Now, you can't glean that by just glancing

at this first line in the file, but indeed, this just means,

hey, browser, here comes a file written in the latest version of this language.

So this is the kind of thing you just copy paste, whenever making a web page.

Now, it starts to follow a pattern.

So notice that there's already some symmetry,

if you look at the next line and the very last line.

So the symmetry here speaks to the fact that HTML is indeed a markup language.

And you tell it what to do and when to no longer do that thing.

And by that, I mean this--

the browser, upon seeing this line of code, is being told,

hey, browser, here comes my HTML.

And when the browser sees this last line later on in the file--

open bracket forward slash html close bracket--

that's telling the browser that's it for the web page.

So it sort of start, stop, or open, close, so to speak.

Now, inside of this HTML page, notice there's another pair of tags,

so to speak.

Open bracket head closed bracket, and then open bracket slash head

closed bracket.

And notice there the symmetry.

In between those are some additional tags, that we'll see in a moment,

but this says, hey, browser, here comes the head of the page--

the top of the page, so to speak.

And this says, hey, browser, that's it for the head of the page.

So just as a human actually has a head that's about yea big,

and a human has a body which is about yea bigger, similarly, in a web page,

does the head typically comprise just the very top of the file,

like the title bar or the tab.

The body, as we'll see, of the web page is actually

everything else, the actual contents-- the text,

the images, the movies, and the like.

So what goes inside the head of a web page?

Just the title.

So these two tags collectively say, hey, browser,

here comes the title of my web page.

And then, hey, browser, that's it for the title.

What is the actual title?

Well, the first set of characters that actually have no angled

brackets-- greater than or less than-- around them, just raw text.

So the fact that hello comma title appears in between the open title

tag and the closed title tag--

or the start tag and the end tag, so to speak--

means this is what will show up in the very tip top of the file

in like the tab in your particular browser.

Lastly, the body of the page.

This says, hey, browser, here comes the body, the essence of my page.

What's going to be in the body?

Literally this string, hello comma body.

So this is a super simple web page that's

just saying hello to the world, calling attention to the title up top

and the body down below.

So let's actually see this in action.

It's one thing to talk about this in the abstract and on a premade slide,

but let's actually create this same web page using my own Mac or your own PC.

So how do we go about doing this?

Well, I'm going to go ahead and open up a program called VSCode,

or Visual Studio Code.

This is among the more popular text editing programs out there these days.

It's essentially a super simple word processor--

so similar in spirit to Google Docs or to Microsoft Word--

but it doesn't have bold facing, it doesn't have italics,

it doesn't have auto numbering, and such.

It only supports pure text, and therefore, something

like HTML, which is just text on the screen.

So I'm going to go ahead and create a new file here on my own Mac.

And I'm going to go ahead and save this in advance, say on my desktop,

as a file called hello.html.

And now I see in this program that I just have a blinking cursor on line 1

in a file called hello.html.

Well, what am I really doing here?