Placeholder Image

字幕表 動画を再生する

  • [MUSIC PLAYING]

  • 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?

  • Well, it seems to be the case that I'm creating a file called hello.html

  • that eventually could live on a web server.

  • I could upload this to Google.com, or Facebook.com,

  • or whatever website I actually happen to be creating.

  • But for now, it lives on my own Mac, or perhaps on your own PC.

  • If you'd like to follow along at home-- or you

  • will do this with the next assignment on your own Mac or PC.

  • This web page, for the moment, is just going to live on my computer.

  • And I'll be able to open it on my own browser,

  • but it doesn't live on the internet-- it lives on my own hard drive.

  • And that's the nice thing about web development,

  • you can do it on your own Mac, PC, laptop, desktop, or the like.

  • And only once you're ready to share those files with the world

  • do you need to somehow drag and drop them via some program to a server,