[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,
and actually host it somewhere on the actual internet at a URL.
SPEAKER 1: And just out of curiosity David, using Microsoft's VS Code,
are there other equivalent applications to use?
Is it something special about that?
DAVID MALAN: No, not at all.
This VSCode just happens to be super popular these days,
but these trends come and go.
Other popular options include programs called Atom,
include Sublime Text, Vim, Emacs, and a bunch of others, as well.
Doesn't matter, ultimately, which one you use.
This tends to be sort of a religious preference in the tech world.
You just get used to one editor, and you like to use that one.
This just happens to be among the trendier ones right now.
SPEAKER 1: And are there any gotchas for the built-in Mac OS TextEdit,
or anything like that?
DAVID MALAN: Indeed.
I'm glad you mentioned TextEdit.
So with Mac OS comes a program called TextEdit,
which allows you to edit text files.
Ironically, by default, it doesn't let you edit text files.
It lets you edit what are called rich text files, which are very simple
Microsoft Word documents that do have bold facing, and italics,
and underline, and the like.
So if you use TextEdit, you actually have to go into your settings
and disable rich text mode, and enable plain text mode.
However, if you're on Windows though, and use a program called Notepad.exe,
that will work out of the box.
But it comes with some of its own complications,
such that creating files in that program tend not to open
well sometimes in other programs.
So frankly, for any kind of web development these days,
using a more proper, freely available, but downloadable program,
like Atom, or VSCode, or Sublime tends to be the way to go.
SPEAKER 1: We're getting some comments online about application called
Brackets and Notepad++.
DAVID MALAN: Brackets, [INAUDIBLE]---- yes.
The list goes on.
You can use absolutely anything you want, certainly,
for the class and the real world.
The point here is that it doesn't get much simpler
than this, a black and white [? prompt ?]
just waiting for me to type characters into the screen.
So what are those characters going to be?
So I'm going to go ahead and really recreate
what we saw a moment ago, saying, hey, browser,
the type of this document is HTML.
And then I'm going to go ahead and say, hey, browser, here comes my HTML.
And just so that I don't make any mistakes,
I'm going to preemptively close this tag.
I don't have to do this, but this way, I don't
have to remember to come back and actually
close or end that tag later on.
What are the two things that come inside of the HTML tag?
AUDIENCE: Head.
DAVID MALAN: Yeah, so we had the head.
And I'll do that whole thing preemptively.
Head-- and then what was after that?
AUDIENCE: Title.
DAVID MALAN: Title was inside of that.
What comes after head, if you recall?
Literally head here, and then--
AUDIENCE: Body.
DAVID MALAN: Body was the rest of it.
So I can preemptively do this.
So I can write the page really in any order,
but this now speaks to the structure.
So notice the symmetry.
I've opened and closed HTML.
Inside of that, I'd open and closed head, and done the same with body.
So now, as you say, within head, I can go ahead and create my title.
So I can go ahead and say title.
And I'll go ahead and close that title tag.
And then up here, I'll go ahead and say hello title--
though I could type anything, of course, that I want here.
And then down in the body, I'll go ahead and say hello comma body,
and click Save.
Now, notice a few details--
I somehow have typed white, gray, and blue text
even without trying in any way-- certainly without clicking any buttons.
That's one of the features you get with text editors like VSCode, or Notepad++,
or Atom, or the like.
They give you what's called syntax highlighting,
which is just a user-friendly feature that,
if it supports the language you're writing in-- whether it's HTML,
some other language called CSS, or C++, or JavaScript,
or bunches of other languages-- it'll just automatically highlight
the semantically interesting parts of what you have typed to draw
your attention to what are angle brackets, what are tag names,
what is actual text.
It's not in the file itself, it's just a human-friendly presentation thereof.
So I've save this file.
I said a moment ago that I saved it on my desktop.
So what can I do with this file?
Well, I'm going to go ahead and just open up a browser--
say Chrome, though I could use Safari, or Firefox, or Edge, or anything else.
And I'm going to go to literally File, Open File--
which is probably not something you've ever done with your browser,
because, of course, you've typically gone to Open Location.
Or frankly, you probably haven't even done that.
You've just typed the URL right into the browser.
But this is just saying, hey, browser, go ahead
and open a file that happens to be called hello.html.
And voila.
I can do that on my own Mac, even without having
a server or the whole internet involved.
You'll see hello body is in the body of the page, the biggest part.
You'll see hello title is along the top here, right in that tab.
And notice the URL is kind of interesting.
It's a file-- clearly, because I just created.
And it's in my Users directory in a folder called jharvard--
for John Harvard--
in his desktop folder, and then in a file called hello.html.
So this is just the way of viewing an HTML file, not on the internet,
but on my own Mac or PC.
So after tonight, and for your final project, perhaps, or your real world
portfolio, the final step in web development
would be to like drag and drop this and any other files up to some server
so that you can have it hosted at a domain name, like example.com.
But everything we'll do today just happens to live on my own computer.
So that is perhaps the simplest possible web page.
Of course, it's probably the most boring possible web page.
So let's see if we can't do things that are a little more interesting.
Let me go ahead and create a new file.
And I'm going to go ahead and call this paragraphs.html.
And let's go ahead and-- let me just copy and paste
some of the code I wrote earlier, just so that I can save some time.
And I want to go ahead and create a new body here.
So I've created a new file called paragraphs.html.
And the process by which you create a new file
will totally depend on the program you're using.
I went up to File, New.
But other programs, like Notepad++ might have other keyboard shortcuts,
or the like to do the exact same thing.
I just changed my title to paragraphs, just so
that I can distinguish one example from the other.
And now, I have my blinking cursor inside the body.
And the goal at hand is just to create some paragraphs of text.
Well, I don't particularly want to think too hard about what
to type, so it turns out I can do this--
Latin generator.
If I Google Latin generator, you'll see that quite common on the internet
are programs like this that allow you to generate what's generally
called lorem ipsum Latin-like words that are actually nonsensical, but does
give us something to work with.
So I'm going to go ahead here and create maybe three paragraphs
for myself, generate that.
And indeed, now I've got some lorem ipsum text here
that means nothing, but looks like something substantive.
I'm going to go now and paste this into my file.
Now, my file's currently wrapping.
I can go ahead and change this by actually toggling Word Wrap.
So you'll see that I, indeed, have three separate paragraphs inside my body.
I've nicely indented, just like you might when writing a book or an essay.
and I have second and third paragraphs, each of which
seem to be representative of actual text.
Let me save that.
Let me go back to my browser, and File, Open, paragraphs.html.
And unfortunately, there's a couple of anomalies.
One, Google Chrome wants to translate this web
page, which is wonderful, because it seems to be recognizing Latin.
But if I just dismiss that, because no, I
don't want to translate the sample text, what is the mistake or the bug,
so to speak, in my code?
What seems to be awry?
AUDIENCE: Lack of line breaks.
DAVID MALAN: Yeah.
So lack of line breaks is indeed the case.
All the same text is there, but it looks like all of my sentences
have blurred together into just one big blob.
Well, why is that?
Well, it turns out that HTML is very pedantic.
It will only do what you tell it to do.
And even though I clearly hit Tab and I hit Enter here, hit the Return
key a couple of times to indent things and create three paragraphs,
that's not enough.
Because browsers by default actually ignore most whitespace.
And by whitespace, I mean hitting Enter a bunch of times,
or hitting the Spacebar a bunch of times,
or hitting the Tab key a bunch of times.
Browsers, by default, just ignore a lot of that,
unless you tell them to put it there.
So what do I mean by this?
Well, if you want a paragraph in HTML, you actually need to put it in there
yourself.
So I actually need to put a paragraph tag, which
happens to be abbreviated with open bracket p closed bracket, just
for succinctness.
And then I'm going to go ahead and close that paragraph tag here.
I'm going to go ahead and create another one over here, p tag,
and then I'm going to go ahead and close that one here.
And then I'm going to create a third one down here, and finally,
close that tag here.
And you'll notice my editors actually trying to be helpful,
but sometimes it's not, because it gets confused
if I haven't quite closed something.
But that's fine.
I'm going to go ahead and just fix it manually myself.
And you'll now see that I, indeed, have the same three
paragraphs of Latin text, but each of them
here is sandwiched between an open p tag and a closed p tag, thereby telling
the browser, here comes the beginning of a paragraph, that's
it for this particular paragraph.
So let's go ahead and save this file, go back to the browser.
And just as you might on the real internet,
go ahead and click Reload to reload the same file or web page.
And voila.
We still see that prompt for Latin over here.
And that's fine, because Google is trying to be
helpful with its built-in translator.
But I do now see three paragraphs of text, which is nice, because now, it's
actually as I intended.
But notice what's still missing--
indentation.
Because it too is going to ignore all of those tab characters.
So we can really see this clearly as follows.
If I a little reckless, and suppose I really want a lot of space
in between these paragraphs, and I hit Enter a lot.
I hit Save, and I go back to my file and reload, doesn't matter.
The browser's going to ignore all but the first of those spaces,
because I've still only told it to give me one paragraph, then
a second paragraph, a third paragraph.
There are ways to solve this problem, but the solution
is not to just hit Enter a lot or the Spacebar a lot, as you might in,
say, Microsoft Word or some other program.
So that's a paragraph.
How can we take this a bit further?
Well, first of all, I should probably try
to override these web pages' languages.
And in fact, if I go back into hello.html,
it turns out that you can actually tell a browser proactively
what language it's written in, so that if Google Translate, or Bing Translate,
or some other tool pops up automatically, it knows,
without having to guess or analyze the file, what language it's written in.
And we can do this by adding what's called an attribute.
So HTML also supports not just tags, and of course pure text,
but it also supports attributes.
Attributes are like customization of a tag that changes its default behavior.
So by default, the html tag just says, hey, browser, here comes HTML.
But if you instead have a keyword--
in this case lang, for language--
then an equals sign, then two double quotes, or two single quotes--
you can use either, but you need to be consistent on both sides--
and then a language code, like en for English, or es for Spanish,
or any number of other two character codes,
that's a clue to the browser that says, hey, browser,
here comes HTML written in this specific language.
So browsers like Google Chrome can then use that clue,
and then either prompt you to translate or maybe not translate
the current page, especially if it's not obvious from the text or the images
that you might actually have.
So that's the first of the attributes we'll have,
but we'll see a couple of others soon, as well.
So of course, if you open up a book or any kind of text,
you typically don't just have paragraphs,
you tend to have headings, like chapter headings, section headings, subsection
headings, and the like.
If you think about any textbook, or even certain novels or books
that are divided into sections, well, how can we do this in HTML?
Well, let me go ahead and create another file called, let's say, headings.html.
I'm going to go ahead and copy and paste that same code as before,
but this time, I'm going to call it headings.
And then in the body of this page, I'm going to go ahead and say a few things.
One, two, three, four, five, and six.
Let me save that file.
Let me go back to my browser, and open up this file, headings.html.
And hopefully, as expected, it is not the six paragraphs
you might have hoped for.
Just because I was hitting Enter doesn't mean anything.
The browser's ignoring those.
But I don't want paragraphs this time.
I want these to be like section headings,
where chapter 1 is big and bold, and maybe the next section two
is a little smaller, but still bold.
So it turns out that HTML has some special tags like this--
h1, and then the opposite, close h1.
And then h2, and then h-- whoops.
And then let me close h2.
And then here, h3, and then close h3.
And then open bracket h4, and then closed bracket h4.
And then open bracket h5, closed bracket h5.
And then lastly, open bracket h6, and then closed bracket h6.
This is telling the browser, here comes a big and bold heading,
here comes another one, but not quite as big and bold,
here comes another, another, another.
So if you have chapter, sections, subsections, sub-subsection,
sub-sub-subsections in a text book or some other document, or an article,
this is how you can achieve that result. Because if I go now
to headings.html and click Reload, you'll see exactly
that-- some big default bold text.
Then it's getting a little smaller, a little smaller, a little smaller,
just as you might expect in an actual text book.
So that gives us our headings.
And we could certainly go back in and start adding paragraphs of Latin,
or English, or any text to kind of flesh this out further.
But for now, let's just focus on that structure.
Well, let's try something else.
Let me go and copy paste this into another file
that I'll call unordered.html.
My goal at hand now is to make a list.
And that list is going to be unordered-- that is,
no numbers associated with the items.
And if I start where I started before--
I might say one, two, and let's just stop with three this time.
Of course, if I save this file and open unordered.html in my browser,
I'm going to see one, two, three on the same line.
They're not paragraphs, they're not headings.
But I want this to be like a bulleted list.
Well, you can imagine trying to do this your own way.
Maybe use an asterisk as a bullet-like symbol, something like that.
And then if I save that file and reload, closer.
But of course, if I to move two and three onto the next lines,
I'm going to need paragraph tags or something like that.
But that still doesn't look quite as pretty as bullets and Microsoft Word,
or Google Docs, or Gmail, or the like.
But that's because I'm not taking advantage
of another feature of HTML, which is literally what's called a list.
I can go ahead and create an unordered list with open bracket ul,
and then close that list with open bracket slash ul.
And then I can go ahead and give this three list items.
I can go ahead and say open bracket li, then closed bracket li,
and then just do the exact same thing.
And notice I'm not numbering them in any way-- it's indeed an unordered list--
but I am flanking each of these words with li, close li.
Let's save that, go back to the browser, and reload.
And voila, it looks a little prettier.
It's still quite simple--
one, two, three-- but notice, now, I'm starting
to get some aesthetics for free.
I'm marking up my text, one, two, three, and the browser
is taking care of rendering it as a list that's unordered.
But wait a minute-- what if I want to make it an ordered list?
Well, actually let me go ahead and create a file real quick.
I'll create a file called ordered.html, paste this same code in there,
but rename the title to ordered.
And let me just go ahead and ask, well, if ul--
unordered list-- is the HTML tag for an unordered list,
you can probably surmise how we get an ordered list, one
that's automatically number, just like Microsoft Word and Google Docs can do.
So maybe not ol, but let's go with our gut--
or at least my gut here-- ol and close ol.
Save this file.
Let me go ahead an open ordered.html.
And voila, now I get the numbering for free.
So here's where you start to see some of the power of HTML.
Still super simple, but if you have lists of items,
you don't have to worry about numbering them yourself.
If you want to go in and add more items to the list,
you don't have to worry about remembering everything yourself.
The computer, namely the browser on the computer,
can go ahead and take care of all of that complexity for you.
And lists are everywhere on the web.
Even though they might not be as blatant as bulleted lists
or numbered list on a web page, anytime you
see a whole bunch of menu options, anytime
you're ordering something online from a menu, a la Grubhub or Uber
Eats, or the like, you're probably seeing lists of items.
It's just those lists are not rendered quite like this, with numbers
or with bullets.
They're rendered more beautifully with other aesthetics.
And we'll see how you can render different aesthetics in a little bit
tonight, with this other language called CSS.
So now, we're really beginning to see what HTML can do for us, at least
aesthetically.
And indeed, that's what it's all about--
marking up your actual content, and letting the browser
take it the rest of the way.
All right.
So what about a more visually interesting web page?
It's really hard to get excited about text.
What if we go ahead, and instead, open up a file that we'll name,
for instance, say, image.html.
Let me go ahead and save this file, changing the title
and borrowing some of my code from before.
So again, we're borrowing the same structure
for every one of our web pages.
And you too, for your assignment, final project, can certainly do the same.
Just start with some boilerplate, so to speak, and then make it your own.
Within the body of the web page here, what if I want
to have a cat in the web page here?
Well, it just so happens that I brought with me the image of a cat.
And let me go ahead and grab that, for instance-- well,
we'll grab it from Google Images.
So I need a cat.
So I'm going to go ahead and Google cat, and see a whole bunch of cats here.
Let's say-- this one looks quite adorable, on Wiktionary.
I'm going to go ahead, for the moment--
and assuming this is my cat that I happened to put online,
I'm going to go ahead and copy the image address for the sake of demonstration.
And that's going to give me the URL of that image.
And indeed, if I paste that into my browser,
I'm actually going to see this URL here.
And actually, let me go back and actually visit this cat in situ,
and go and do the same here.
Copy image address, and there we have it.
You'll see that at this URL, upload.wikimedia.org slash m
I have this jpg of an actual cat.
So that's the URL of my cat.
I'm going to now go into my file in VSCode.
I'm going to go ahead and now give myself the cat image.
Of course, if I just paste the URL here, like this, that's a bit nonsensical.
Because if I simply paste the URL of the cat, save the file,
and then open this file, image.html, in the browser, I'm, of course,
just going to see the URL, which is hardly rich media.
So I really need to tell the browser to go put that image in the web page.
And how can I do that?
Well, turns out there's a tag called image.
But it's abbreviated img, just because it's so popular.
It saves you a few keystrokes.
And then here, I need to specify the source of the image.
So the image tag just says, hey, browser, put an image here.
But it needs an attribute known as source--
similarly abbreviated src-- that has an equal sign as before, a quotation
mark, and then at the very end of it, another quotation mark, and then
a closed bracket.
So this is now saying, hey, browser, put an image here,
the source of which should be that same URL on Wikimedia,
and go ahead and put it right there.
Let me go ahead now and reload the page.
And we should see the same adorable cat.
But this time, it lives in my own file, index.html.
So I've written my own HTML locally on my own Mac, perhaps you on your own PC,
but I've referenced, I've hyperlinked, if you will,
to an image that's actually elsewhere on the internet via that actual URL.
And notice the anomaly here--
what did I omit from my file this time, that I've
had and every other example thus far?
AUDIENCE: [INAUDIBLE]
DAVID MALAN: Yeah, I didn't close the bracket.
And there's a reason for this, because I could maybe
do this, like open bracket slash img.
It's just not really sensible, because you can't start putting an image here,
and then eventually stop putting the image there.
It's just all or nothing, really, with an image.
Put it there or don't put it there.
So the authors of HTML decided, you know what?
That's just not necessary.
So you don't need to include that.
If you really want to be nit picky, you can actually
do this shorthand notation.
You can put a slash in between the close quote and the close bracket
just to make super clear I know what I'm doing,
I didn't just forget the close tag or the end tag.
But most people would even omit that as just being unnecessary.
So while most tags do have this symmetry, opening and closing them,
image is among those that does not need that, in fact.
So what if I wanted to access a cat that's actually on my own computer?
Well, I did bring another cat with me.
Let me go ahead and grab this from my desktop.
And I happen to have a cat in advance called cat.jpg.
And let me go ahead and save that on my desktop.
So suppose that now, the image in question is not on the internet,
but quite simply, it's in the same folder as image.html.
In other words, on my Mac, on my PC, and eventually on my server,
I can have not just one, but two, or three, or hundreds
of files all in one or more folders.
And if cat.jpg happens to be on my Mac in the same folder as image.html,
this is what's called a relative link.
The browser's going to assume that, when you want cat.jpg, oh, it
must be in the current folder.
And so if I save this now, knowing that that file is indeed
on my desktop, along with this html file, and reload, I'll now have the--
oh, but it's not.
I'll now have-- what did I do wrong here?
[INAUDIBLE]
Sorry.
What is wrong here?
Oh, I'm sorry.
Put it on my desktop.
So if I now store that cat on my desktop and hit reload, voila--
now I see a very popular cat on the internet, known as Grumpy Cat,
filling the screen.
This jpg happens to be larger than the others,
so it's filling the browser screen a bit more,
but indeed, the effect is exactly the same.
Now, if I had lots of images, it would actually
be conventional to store them in folders.
And so if you, on your own Mac or PC, with your photography,
decide to store all of your images in different folders, you can do that too.
If cat.jpg were in a folder called, say, folder,
you can literally say folder slash cat.
Maybe you have a whole folder called cats inside that folder.
So just like you've seen on your own Mac, or PC, or in URLs,
you can actually separate the file name from the actual current file
via one or more folders, as well.
All right.
So it's not quite sufficient though, generally, when designing a web
page, just to put some image here.
Increasingly, [? do you ?] want to help the browser help
the human understand what the content of your web page actually is.
And so for reasons of accessibility, is it ever
so important these days to use tags and attributes that exist for this purpose.
For instance, the alt attribute allows you to say something like this--
the alternative to this actual image, particularly
for those who have difficulty seeing, or are blind,
or who therefore need screen readers to help them visualize in their minds eye,
[? what ?] another person might be able to see visually on the screen,
you can use this alt attribute.
And the alt, or alternative attribute says,
display this text in lieu of this image for those
who might prefer to see it textually.
This is also useful if, for instance, the image
is broken, or corrupted, or missing, as it was for me just a moment ago.
I just saw briefly a broken icon on the screen,
but had I included this alternative text from the get-go,
I would have at least seen what the textual description of this image,
is even in the absence of that image itself.
So both for screen readers and for usability for folks on slow internet
connections can you help them see text renderings of these things,
as opposed to the original file itself.
All right, so we're just about covering now most of the functionality
you might want.
Even though we've only just scratched the surface of HTML,
these really are most of the building blocks already.
Let's go out and do one other example here called link1.html.
SPEAKER 1: Before you get there, David, can I just ask a question?
DAVID MALAN: Sure.
SPEAKER 1: Let's say I have my portfolio,
and I want to put all my images on my website.
Does it make sense to--
let's say I keep them on an external hard drive, or something like that.
Do I need to move them to my folder, or can I link directly to them
on the hard drive?
Or where might you store your images?
DAVID MALAN: So good question.
So at the end of the day, if your website's going to live, of course,
on the actual web-- at example.com or some other website,
some domain name maybe that you've bought,
or some third-party service that you have paid for an account on--
odds are you're going to drag and drop or somehow upload all of your HTML
files, but also those same images.
So if you have all of your photographs on some external hard drive
or on own local disk, you're going to need to upload those to the internet.
Since you can't have a website that's referencing your own Mac or PC,
if your own Mac or PC are not acting as a server on the internet,
it's not sufficient just to have an internet connection.
You actually need to have a domain name pointing
at your computer, which, odds are, your Mac and PC does not have.
Alternatively, if you go ahead and upload your entire portfolio
of photographs or videos to sites like Flickr,
or Instagram, or any number of other sites,
you can use the URLs of your images and videos
on those third-party web servers, and link to them,
just as I did my first cat that I found via Google Images.
So assuming you indeed own the rights to that image,
and therefore, the URL is your own, you can include that in your file, as well.
SPEAKER 1: Awesome.
And if I'm going to keep everything on my own computer,
I want to keep everything in this kind of root folder, if you will,
of my project.
So I need to move anything from an external hard drive
into this folder, where I've got the rest of my HTML,
kind of the base level of the web page?
DAVID MALAN: Indeed.
You pretty much want all of your files, your media
files to be relative to the HTML file-- so in the same folder as your HTML
files, or in folders that are inside of the same folder as your HTML files.
So you essentially want to think of a website
as being one big folder that has everything, including all of your HTML
files, and then optionally, any of your media files maybe in some subfolders,
as well.
Indeed.
So of course, the whole web--
the hyperlinkability of the web is, indeed, about those hyperlinks.
So thus far, we've only seen pretty static content, including that image.
How do I go about actually linking a human from one website to another?
Well, let's go ahead and do something like this.
What if I want to encourage my visitors to visit something like Harvard?
Well, of course, if I just save this file, link1.html, open up this
in my browser as link1.html, I'm going to see,
of course, just the text visit Harvard.
So not all that interesting.
But what if I want them to visit harvard.edu?
OK, well, I could say visit harvard.edu, save that, reload.
It tells them now a little more explicitly where I want them to visit,
but that too is not clickable.
It's just text, just like the word visit.
Well, what if I get a little more specific,
and I say visit www.harvard.edu, save that, reload?
That too is not sufficient.
Now, even though you and I are probably accustomed in emails, or Facebook,
or other tools these days on the web just typing the short parts of URLs--
something.com or www.something.com-- and then the tool--
Facebook, or Twitter, or the like--
automatically turns it into a link for you, when writing your own HTML,
you actually have to do that linking for your users.
Twitter, and Facebook, and the like are doing that automatically for you,
but there is nothing that's automatic when you're making your own web pages
or you're building websites like that.
You need to create the link yourself.
So it's not sufficient just to say where you want the user to go,
you need to enable them to go there as follows--
open bracket a, for anchor--
which is like, give me an anchor to some other web page right here.
And have it reference, or more technically,
hyper-reference the following URL.
So href="http://www.harvard.edu".
And then let me go ahead and close that tag, and then let me go ahead
and say Harvard, and then close the whole thing like that.
So again, notice the parallelism here.
Open bracket a, for anchor, and then close bracket
slash a, to close the tag.
Notice that I don't repeat the attributes.
This would be a bit silly if you had to literally write the same thing twice
in two locations.
So when closing a tag that has one or more attributes,
you just close it by its name.
But notice now that the value of the href inside of these quotes is
the actual URL you want to send the user to, including the http://,
which you and I probably don't typically type anymore,
but is hidden there in the browser's URL bar.
Let me go ahead now and save this file, reload the page.
And voila, now, you see in the top left-hand corner "Visit Harvard,"
and it's indeed now hyperlinked in, perhaps, that familiar default blue.
And if you hover over this without clicking on it, it's terribly subtle,
but at the very bottom of your browser, odds
are you'll see the actual destination that word
or words are about to link to.
And notice the dichotomy.
Even though it's going to lead to www.harvard.edu,
the human is only seeing the word Harvard.
So you have complete control over what the human sees
versus where he or she actually ends up.
And even though I did correctly include http://, Chrome, and Safari,
and other browsers these days, they're just starting to simplify things
for humans.
Google and Apple decided, eh, no one needs to see http:// all over
the place.
But you do need to write it when actually writing your HTML.
But you could do a kind of a switcheroo.
Harvard and Yale, for instance, are quite the rivals,
so we could tell the user, go ahead and visit Yale.
Reload this page, and it looks like you're about to visit Yale,
but of course, if I click this link, where am I going to go?
Well, harvard.edu.
And as an aside--
and this is a whole can of worms--
if you've ever received an email that purports
to being from your bank, or from PayPal, or some website like that,
but it's actually spam, but it looks like it isn't, well, odds
are they are trying to trick you into clicking a link that says one thing,
but actually leads you to a malicious website, something
that's been set up probably to steal your password, or the like.
So even with these basic building blocks tonight
do we see how even those kinds of techniques are possible.
So if I click on Yale, I'm actually going
to find myself, voila, at Harvard University here.
But the takeaway, ultimately, is that to have a hyperlink from one place
to another, all I need is a link like this.
And let's back it up and actually put it as Harvard instead.
Well, what if you want to link not to some third-party website,
like harvard.edu or yale.edu, but what if I've got multiple pages,
as you might for an assignment or final project, and you've made another file?
And indeed, look at the top of VSCode for me.
I have all of these other files already created.
What if I want to create a link from this example
to one of my more recent ones?
Well, let me go ahead and create a new file called link2.html,
just because this is my second example of links.
And suppose I want to link the user not to harvard.edu, but to a file I
created a moment ago-- that cat.
And that cat was stored in image.html.
And if I want to link the human to image.html,
I can use what's called, again, a relative link.
If image.html is in the same folder as this file,
then I can just do quote unquote, "image.html,"
and when I click on this link, it's just going
to open up that other file without me having
to go to File, Open, like before.
So if there's no http://, it's just going to assume that the destination is
relative to where I currently am.
So let's try this.
Let me go ahead and open up link2.html.
Notice that it says visit image.html.
And if I click that, I should see the familiar cat.
But let me go ahead and hit Back, just to be super clear here, and zoom in.
At the moment, I am opening my file called
link2.html, my second example involving links.
My HTML says "Visit image.html."
It happens to be purple now, because that's what browsers do by default.
Once it colorizes them, typically purple by default,
[? just is ?] as a visual cue that you've been there before,
maybe don't bother clicking on it again.
But notice what happens.
If I click on this link, watch the URL bar.
It's not going to keep me at link2.html, it's
going to take me now to image.html.
And if I zoom out, again, I'll see that familiar cat.
So if you've visited a website, like all of us
have, and you've clicked on a menu, or you've
clicked on one link that leads you somewhere else that leads you somewhere
else that leads you somewhere else, all that's going on underneath the hood,
so to speak, is that the programmers at Facebook,
or Google, or Apple, or other companies have
written HTML like this that is linking you to relative URLs--
other files on their same server in that same folder--
so that you can have multiple web pages on the same websites.
And those are, again, called relative URLs.
All right.
So how can we begin to tie some of these things together?
For instance, suppose I want to have a landing page with links to everything
we've done.
Well, you know what?
Let me go ahead and do this.
Let me just go ahead and open up an example I did an advance here,
and open up a file called index.html.
As before, I propose that the default name for a web page
is indeed index.html.
And let's look at this complete example now,
in the context of all the building blocks we've looked at thus far.
So on the very first line of this file is my DOCTYPE declaration.
That's a mouthful.
This just says, hey, browser, here comes some HTML.
This we've not seen before, but I've included this in the examples
that we wrote in advance for you.
In fact, all of tonight's examples, especially if I've been going fast,
you'll be able to download after tonight, and play with them,
modify them, build your own websites on top of them, if you'd like.
This syntax here is what's known as a comment.
So it's pretty cryptic--
open bracket exclamation point dash dash something, and then dash dash close
bracket, with no exclamation point.
Why this sequence of characters?
Well, the authors of HTML years ago just decided, who in their right mind
is ever going to want to type that sequence of characters?
Let's use it as a special instruction saying this
is a comment, a note to self.
So if you just want to remember what is this file,
well, this is my note to self it demonstrates
a home page, a listing for all of the pages
that might exist on a website-- like a menu.
Most everything else should look pretty familiar,
even though I'm now combining techniques.
So you'll see that this tag on line 5 says, hey, browser, here comes my HTML,
and it's written in English as the language.
If I fast forward, you'll see the opposite of that, all the way
down here, on the last line 24, close html.
Here we'll see, as before, the head of the web page.
The title here is index.
And notice what I did this time.
I decided that, eh, you know what?
Whitespace doesn't matter, so I can hit Enter as many times, as I want
and I can hit Tab as many times as I want,
but it doesn't change what the title is.
So I've just been a little more succinct.
So instead of doing this, as I did in my previous example--
that's just kind of wasting lines--
I can pull that up, make it a little more compact.
And arguably, it's no less readable, in this case.
And in fact, all of this indentation that I've
been typing and copying and pasting thus far does not matter.
This is just for the benefit of us, the humans, the students,
the colleagues who might be working collectively on a website.
It's just so much easier to read this than if I deleted all of that space,
and we just had one horrific file that had all of these tags
all on the same line.
The browser wouldn't care.
It's a smart computer that can distinguish all of these tags
from another.
But all of this indentation is really helpful clues to myself
to make sure that every tag I'm opening, I'm closing, if need be,
and I can understand what is inside of, or indented,
or nested inside of something else.
Well, let's go down here.
The body of my page comes next.
Inside the body, it looks like I have a heading that says John Harvard--
the author of this website, presumably.
On this line 11, we have an h2--
so a slightly smaller heading, a subtitle, if you will-- saying
welcome to my home page.
Then we see a new tag, but it turns out this is just a convention--
nav.
You can maybe infer, navigation.
So typically on websites, if you have a whole bunch of links to menu options,
you'll actually wrap them in a tag called nav.
It doesn't display any differently, it's just kind of a visual clue.
Because especially these days, browsers have gotten much better
at understanding the layout of websites, whether it's
for reasons of screen readers or accessibility more generally.
So nav it's just a hard coded clue to the computer,
hey, here comes the menu, so help the user navigate this page as needed
via the following lines of code inside of this navigation.
Well, what are those lines?
Well, here is just an unordered list of links--
so a bulleted list, if you will.
And notice now the nesting.
Open bracket li says here comes a list item.
Then inside of this list item I have, it would seem, a link--
for instance, to hello.html.
And that example's called hello.
Then I close this tag, then I close the outermost tag.
So again, everything is symmetric.
If I open li then I open a, I must reverse and close A, close li.
And so you'll see that symmetry is preserved.
And that's it.
Then I go ahead and close the list, close the nav, close the body,
close the HTML.
So let's go ahead and open this file index.html,
which again, is a list of links to everything else we've done thus far.
And it's super simple, but it does combine
all of these basic building blocks.
I've got hello, paragraphs, headings, unordered, ordered, image, and link.
And if I click on any of those actual links,
well, I'd be whisked away to those individual pages.
And why is this one purple?
Well, just a moment ago did I open, did I start with that same file hello.html.
Any questions then on these building blocks, thus far?
Yeah?
AUDIENCE: Can you link one website to another [INAUDIBLE]??
DAVID MALAN: You absolutely--
the question is, can you link one website to another
if they're not in the same folder?
So let me distinguish the terms.
If you want to link from one website to another website,
you can do that via its URL--
http://-- and that means the web page is on a completely different server.
so yes, that absolutely works, just like my link to harvard.edu.
If you want to link from one web page to another,
they can be in the same folder, sure, or they can be in subfolders,
as by saying, quote, unquote "folder slash sub
folder slash something that html."
It can even be higher up.
So you can actually use what's known as double dot notation.
Dot dot slash means go up higher in my hard drive
to go into some other folder.
So short answer, yes, they can on your drive,
if you know the relative location.
All right, let's do one other example before we take a short break.
How do sites like Google work?
Well, let's go ahead and take up that loaded question as by opening,
for instance, Google itself, at google.com.
And today, the web page happens to look like this.
Well, it turns out that all this time you've been using Google, or Bing,
or whatever your favorite search engine is, odds are, in Chrome, or Edge,
or Safari, or Firefox, whatever you use, if you poke around the menu options,
you will see some options somewhere that probably
is called something like View Source.
And if, indeed, I go and click View Source, in my case, in Chrome,
you'll see this crazy list of output.
It's a huge amount of content.
And if I zoom through there, you'll actually
see the code that composes Google's home page.
Now, a lot of this is written in a language called JavaScript.
More on that in a future lecture.
But inside of that file, ultimately, is also HTML.
And it's a mess here, because, again, browsers don't care about whitespace.
They're going to ignore most of it anyway.
And Google actually, for efficiency, doesn't even use whitespace
when it's not needed in their files.
Why?
Google's just so big and so popular that, if they are spending time
adding spaces to their HTML files, those spaces
need to be transmitted over the internet as bytes, so to speak,
and that's just going to cost them time and money.
So in short, for efficiency, some of the biggest companies
out, there they don't pretty print their HTML, as I've been doing.
They don't indent it, they don't make sure everything's tabbed in nicely.
Because why?
That just adds bloat to the files.
But for us, and for smaller websites, not a big deal.
And it's much more important that we humans be able to read it.
Let me approach this from a different angle.
Let me go to View, Developer, and not View Source, but Developer Tools.
Because one of the nice things about modern browsers
is that they allow you to do this--
there's typically a tab called Elements, or something like it.
And what this tool within Google Chrome does
is it actually reads that HTML top to bottom, left to right, but rather
than show it to you the way Google intended, with no whitespace,
it magically adds whitespace, it adds syntax highlighting--
that is, the colorization-- just to help me, the human,
wrap my mind around what's going on.
So literally, this is the HTML code for Google's home page.
There's an open bracket HTML, there's an itemscope and itemtype attribute--
whatever those are.
We haven't looked at them, but indeed, there
are other attributes you can use in HTML.
lang="en" is appropriate, because this is indeed written in English,
because I'm on the US version of the site.
Here's the head, dot dot dot.
And if I click that little triangle, I could look inside the head
and find the title of the web page.
Here's the body in purple here.
There's this other attribute called class--
more on that in a moment.
But in short, all of the purple words you see here are HTML tags--
and we'll see a few more over time--
and they allow Google to present to you this search interface.
But it's important to note that the real secret source of Google is not an HTML.
Anytime you visit someone's website, you can look at their HTML.
You can see the source code for that website.
And so even though it's, indeed, their intellectual property,
typically, there's not really that much sophistication to HTML.
It's not a programming language with which you create applications,
it's just a markup language that shows you how to show text on the screen
and where to show it.
The real secret source for most websites is, of course, on the server.
Google is a powerful entity because they have so much data in their database.
This is just the user interface, or the front end
via which to access that information.
So just for demonstration's sake, let me go ahead and search
for one more cat and hit Enter.
And you'll notice, of course, that the URL, like most websites, changed--
and it's, frankly, changed to be something super cryptic.
But you know what I'm going to do?
I'm going to go ahead and delete most everything I don't understand.
And there's the key word I do understand, cat.
So I'm going to go ahead and delete most of what's in the URL,
after searching for cat.
And I'm going to hit Enter again.
And it turns out this still works.
And indeed, when Google was invented back in like 1999,
in its very first, simplest version, this is all it essentially supported.
It supports your URLs that ended with the word search.
And then, if you added a question mark and then
a q for query, an equals sign, and then a keyword,
that is what the database will search for and spit out results for.
So everything you see here below--
these images, the blue text, the green text,
and the gray text-- that's just HTML.
And we'll see in a little bit that there's
different ways to make different font sizes, and colors, and the like.
This is just HTML, but the real secret sauce is on Google's servers
somewhere that is searching their entire database for all the cats in the world.
But let me go ahead and change this manually.
I'm not using Google's interface, I'm literally just
changing the URL to say dog, q equals dog, and hit Enter.
And now, I'll get back a whole bunch of search results about dogs.
This is to say that URLs on the internet support what
are called parameters, these special keywords you
can put after a question mark into URL that
provide special input to the website.
And those are typically generated by filling out forms,
but for our purposes for now, just know that you
can modify the behavior of a URL by changing keywords
that come after the question mark.
And we're going to see this as a powerful tool
when it comes time to do something like embed a YouTube video on own website.
If I understand these HTTP parameters, these keywords that
come after the question mark, I can actually
exercise more control over how I'm embedding videos in my own website.
Let's go ahead and take a few minute break here.
And when we come back, we'll introduce a second language called CSS--
Cascading Style Sheets-- and that's where
we can really make our web pages look all the more beautiful.
All right, so that is HTML.
And even though we'll see a few more tags along the way this evening,
those are pretty much the building blocks.
You have this notion of tags.
Some tags can have attributes, and sometimes can or can't be closed,
and that's about it.
Here on out, now that you have been equipped really with those
fundamentals will you find that by looking
at any number of online references will you
begin to fill in the blanks of the vocabulary that is HTML.
We pretty much have presented you the entire grammar, the set of rules,
and so forth.
And now, it's just a matter of, indeed, vocabulary, learning a few more
tags here or there to see what more that language can do.
And we'll see a few more such techniques along the way.
But what we haven't really seen yet is the ability
to really refine the aesthetics of a web page.
I got a pretty default bulleted list, a pretty default numbered list.
I got a pretty default blue link and purple links.
It would be nice, certainly, if I could create far more control over my web
page, much like the popular websites you yourself visit.
And the way you do that is via CSS, Cascading Style Sheets.
This is a second, separate language that is related to HTML,
but has a slightly different syntax.
But it's relatively straightforward to integrate into your HTML.
And we'll see now how we can go about doing that.
So let's first tee up a problem.
If I go ahead and open up my text editor here, VSCode,
I've pre-created a file called css1.html as representative of my very first CSS
example.
I'm going to go ahead, and in the body of my page,
I'm going to create a few new tags known as the header tag--
not to be confused with the head.
And in here I'm going to say something like--
John Harvard shall be the header of this web page,
making another home page for this fellow.
And then I'm going to say that the main part of my page
is going to say something like welcome to my home page, as before.
And then close the main part of the page.
And then, perhaps not surprisingly, there's
a tag called footer, where I can say something like copyright, let's say,
John Harvard.
And then over here, I'll close that tag.
So we haven't seen these tags yet, but they're, perhaps,
a bit self-explanatory.
Header, main, and footer--
these are generally known as semantic tags
in HTML, which means that they have no effect visually
on the web page, other than to give you different sections of the web page.
But they do have semantic meaning, so that when the browser's trying
to better understand what the pages for accessibility purposes,
or optimization purposes-- especially on mobile,
you might want to see the main part of the page far more than you want to see
the footer--
having these sort of semantic clues in your HTML just
helps the browser understand what it is it's looking at.
So when I look at this file now, I'm not going to see a terribly interesting web
page yet.
Let me go ahead and hit Save, open up my browser, and go into css1.html.
And I'll see, quite simply, this--
John Harvard, welcome to my home page, copyright John Harvard.
All of the text, though, seems [? to be identical, ?] but
it is on separate lines.
So it's kind of like paragraph tags, but there's no gaps between the lines
right now.
These are really just like invisible rectangles
going across the screen that separate my header from the main part
from the footer of the web page.
Well, do one thing first.
It would be nice, frankly, in HTML if we could get a proper copyright symbol--
(c) isn't quite it.
Unfortunately, on my US keyboard, I'm not aware of any copyright symbol
that I could type.
I certainly don't know the special keystroke.
So it turns out that HTML supports what are called entities.
And an entity is a very cryptic code that you would generally look up
and an online reference or in a book.
And it turns out that the code for the copyright symbol in HTML is number 169,
and you flank it with an ampersand and a semicolon.
So this says, hey, browser, here comes in HTML entity, so to speak.
The number of that entity is 169.
And then semicolon means that's it for the entity.
So slightly different syntax, but this is a special code
that now, if I reload my page, notice that I get, albeit small,
a proper copyright symbol.
And there's other such symbols that you can
imagine, from shapes, to other punctuation symbols,
to special symbology like that one there.
So that's just a minor touch up.
What if I actually want to go ahead and style this page?
Well, it turns out that you can, on many tags in HTML--
including header, main, and footer--
use the style attribute.
And you can say, I want the style of the header of my web page
to have a large font size, and then, you know
what-- go ahead and align the text in the center.
So notice the syntax here's a little new,
but I have flanked both sides with an open quote and a close quote.
I could have used single quotes-- so long as you're consistent.
And notice slightly new syntax now in orange--
font-size, and then some value.
Then a semicolon, which, just like the entity, means end of thought.
It's like a period in an English sentence.
A semicolon here is like a period in a more technical sentence, using
this syntax here.
text-dash: center means, how do you want to line the text?
Well, the value of that shall be center.
Strictly speaking, you don't need the semicolon at the end,
but I did it for symmetry there.
So what you're looking at, that I've highlighted here,
is exactly that other language--
CSS, Cascading Style Sheets.
It's a tiny little example of it, but this
is to say that the HTML attribute called style, as all of the attributes we've
seen, can take a value that's quoted.
The value of the style attribute, though,
can be written not in HTML, per se, not even in English,
per se, but specifically in CSS, Cascading Style Sheets.
And this language is actually relatively simple.
Even though it too has a big vocabulary, it is entirely
based on keys and values, so to speak--
or more technically, properties followed by a colon, and then
the value of that property.
And you would only know what properties exist
by looking it up in a book, or an online reference, or taking a class.
font-size is one available CSS property.
text-align line is another available CSS property.
And the possible values completely depend on the properties themselves.
You can do large, small, medium, or few other things, as well.
You can do center, left, right, or justify, or a few other things,
as well.
You would only know that by looking it up in a reference.
But for our purposes right now, the key is
that the structure is something colon something semicolon, and then
optionally, repeat again and again.
So let me go ahead and try this out elsewhere too.
Let me go ahead here, and on the main part of my web page, say,
let's go ahead and make the font size medium.
And then again, text-align in the center.
And then lastly, in my footer, that's like the least important part
of my page, so I'm going to say font-size small text-align center.
Save it.
Now, I'm going to go back to the browser, reload the page.
And voila, looks similar, but now everything is nicely centered.
John Harvard's a little bigger than welcome
to my home page, which is a little bigger than the copyright.
So I've begun to stylized it in this way.
But there's a bunch of redundancy.
And in computer science, and in programming more generally,
redundancy is not a good thing, because it makes you more vulnerable to typos.
You might make a mistake in one place that you don't in another.
It makes it harder to change things, because you
might have to change your code in multiple places,
instead of just one place.
And so what's redundant here?
Well, my font sizes are varying--
large, medium, and small.
So that's fine, but it seems a little lame
that I have text-align center, text-align center, text-align center.
It would be nice just to factor that out somehow, and say
text-align all of this in the center.
Well, how can you do that?
Well, notice that header, and main, and footer are all children, so to speak.
They're sort of like a family tree, nested inside of or indented inside
of body, which is to say that header is in body, main is in body,
and footer is in body.
So you know what?
Why don't I do this-- let me go ahead and copy this code,
put it in a file called css2.html, as my second version.
And you know what?
Let me go ahead and now remove this from there, remove this from there,
and remove this from here, and instead, put it on the body,
thereby factoring it out.
And here is now the C in CSS.
Cascading Style Sheets implies that, if you have a property,
like text-align center, on one HTML tag, but inside of that HTML tag--
or element, as it's also called--
are other HTML tags, as implied by the indentation
here, well, this will ensure that everything indented inside of the body
will be text-align center.
So I only need to say it once and it will apply to everything else down
below.
So if I save this file and open up css2.html,
I'll see the exact same thing, but my code is better designed.
Because why?
Well, if I want to go ahead and left-align or right-align the text,
I can change it in one place now.
I don't have to change it in three different places or god forbid,
if I had a much bigger website, in many more places than that.
So CSS also allows you to factor things out further.
It generally is considered messy to have the contents of your web page--
John Harvard, welcome to my home page, copyright, and so forth--
kind of commingled with the aesthetics thereof.
It's not such a big deal when our file's only 20 or so lines long,
but when a typical web page, like Google, or Facebook, or Imgur,
or Instagram, or the like, have a lot more content on the page,
you might have hundreds or even thousands of lines of code.
And so it makes it a lot harder to distinguish
what is your data, your information, from the aesthetics,
or the presentation thereof.
So this is to say it'd be nice if I could
move all of this orange stuff, all of the CSS elsewhere,
because you know what?
I'm not even that good in the real world at designing things using CSS.
I don't necessarily have the best artistic eye,
so maybe I'd like to collaborate with someone who's
better than me in the artistic sense with this language,
so maybe I can focus on the HTML, he or she can focus on the CSS.
It would be nice to separate these two just a little bit.
They're arguably different skill sets for some folks.
So let me go ahead and do exactly that, as follows.
Let me ahead and create another file, css3.html.
And in this file, let's go ahead and do this--
let's get rid of all of these style attributes
altogether, really reverting to where we began the story,
getting rid of all of these style attributes on every one of the tags,
and thereby getting rid of all of the stylized.
But let's put it somewhere else.
It turns out that title is not the only thing that can
go inside the head of your web page.
You can also have a tag that's called style.
So it's not an attribute, it's a tag, but it's in a different place.
So they use the same word in two different contexts.
Style attribute is what we've been using,
but I'm now proposing to use a style tag, which
must go in the head of your web page.
Well, what am I going to put up here?
Well, now, you have a slightly different syntax.
You can specify the name of a tag, like body,
and then you have this convention of opening curly brace
and then closing that curly brace.
And they can be on different lines or the same lines.
To each his or her own.
And then I can put those same properties in here like this--
text-align center.
So that will ensure that the entire body is aligned in the center.
I can do something similar for my header.
If I know that I want the font size of my header to be large,
I can simply say that for the main part of my web page,
I can say font-size medium.
And then down here, I can say the footer of my web page
is going to be font-size small, and then close this curly brace, as well.
So the syntax is almost the same.
I still have property colon value semicolon
for each of these customizations.
The only thing that's really new now is that inside of the style tag,
I'm mentioning in yellow each tag whose behavior I want to modify,
that I want to stabilize, and I'm using curly braces like this, just to say,
here comes one or more properties.
Because I could, if I wanted to make this web page even fancier,
have a bunch more stuff in here and in every other block.
But for now, I just have the one.
And to be clear, where the curly braces are does not matter.
You can do this.
I can put it all on the same line, if I really want,
and go ahead and do something even like this.
But this, of course, decreasingly lends itself
to readability and maintainability, because now, the line's just
going to get longer and longer and longer, the more things I add to it.
So a common convention is, perhaps, where
I began, which is to just open the curly brace like that,
and close it on a separate line.
But you can see and use different stylizations, as well.
Perhaps underwhelming, though, when I save this file and open up css3.html,
the file is exactly the same visually.
I've just designed it differently, and arguably better underneath the hood.
To be fair, it's gotten a little more verbose,
because frankly, I've exploded what all fit on individual lines
into this multi-step approach in the top of my web page.
But that's just allowing me, ultimately, to create reusable styles.
When it comes time to have not just one web page, but two, or three,
or thousands, you might want to reuse some of those same stylizations
on multiple pages.
And we're getting so close to isolating all of my CSS at the top of the file
that you can perhaps imagine factoring out of a file
altogether, and putting it somewhere else.
And we'll see that soon too.
But first, one last technique here.
It turns out that you can create CSS that doesn't just
specify the names of the tags--
you can actually come up with your own keywords.
And let's see this by way of an example I created in advance called css4.html.
And you'll see that this file, per the green comment up top,
demonstrates what are called classes.
Notice that my CSS almost the same, but instead of saying words like body,
and header, and main, and footer, I've chosen this weird syntax--
a period and then a word.
But that word can be anything I want--
XYZ, [? Fubar Bas, ?] something else altogether.
I've chosen English words that are just self-descriptive of what
it is I'm trying to achieve.
So .centered means the following collection of one or more properties--
namely this property.
.large means the following collection of these properties. .medium, .small.
So again, I could've called these WXYZ, or ABCD, anything else,
but I chose English words, or my whatever my native language is,
that just describes what is the purpose of everything
in between those curly braces.
Why?
Well, if I scroll down now in css4 to my actual code, notice what I've added.
There's a new attribute in my web page that's not style,
but it's called class.
And notice that my choice of English words
now makes my HTML arguably more readable,
because you can infer now from these classes, oh, the body of the web page
is going to be centered, or oh, the header of the web page
is going to be large, the footer of the web page is going to be small.
You don't necessarily need to get into the weeds of knowing what
does large mean, what the small mean.
That's a lower level detail that you can see, if you care about it,
but these are just semantically useful terms
that now refer to the stylization, without getting
into the weeds of actually doing the stylization-- as we did before
with the style attribute.
So this is a bit of a firehose, because we've now started with HTML,
and then we've introduced CSS, and then we've been moving CSS around.
But all CSS is, at the end of the day, is these key value pairs--
these properties and these values.
And so CSS just so happens to come with some additional features,
like the ability to create your own classes,
as are implied by that single period before your choice of words.
That just makes things more reusable.
And this is super powerful, because in just a bit,
we'll actually see that there's some wonderfully free third-party libraries,
code that other people have written on the internet
that you can use in your own website, that actually allows you
to use their stylization and make your website all the prettier,
but without having to implement all of those things yourself.
So how can we take this one final step further, and actually
remove my CSS from the file so that I can actually
collaborate with someone else, or work on it separately, or reuse it
in other files?
Well, let me go ahead and open up a file that I
created in advance too called css5.
This one almost fits on the screen entirely.
Notice that this is the same HTML as we saw a moment ago, including
these classes--
large, medium, and small.
But notice that I have this new tag up here.
And this is honestly one of the worst name tags,
because it does not do what it says.
But if you have a link tag with an href attribute and a rel,
for relationship attribute [? that's ?] stylesheet,
you can tell the browser this-- hey, browser,
go ahead and link in, so to speak.
Sort of copy paste the contents of this file, css5.css,
right here, the relationship of which is that it's
the stylesheet for this web page.
So if I open up that other file, css5.css,
you'll see that it's actually now familiar.
It's literally copied and pasted from the previous example,
but it's in a separate file, which means now,
I can use it and reuse it on multiple web pages
without having to copy and paste it inside of my HTML files.
I can just reference, so to speak, the same file.
I can link to the same file again and again.
And it means that I can work with a colleague on this.
I can focus on the HTML, he or she can work on the CSS,
and then when we merge the two together in the same folder, voila,
it'll all just work.
And so I say that this is a poorly named tag
because it would have been nice earlier, when
we were linking to harvard.edu, if the tag were called link.
Unfortunately, we used a, or anchor, for that, and link now for this purpose.
But once you memorize it or look it up will
the two become more distinct in your mind.
All right.
As before, feel free to interject with questions.
But we'll proceed now to make things even prettier iteratively here.
Let's go--
SPEAKER 1: Would the
DAVID MALAN: --yeah?
SPEAKER 1: --the semantic tags that you have--
I forget what they are off-hand.
Header, main-- do they behave like divs, if you're coming to web development
from the olden days?
DAVID MALAN: Indeed.
When Dan was learning this stuff, and when a lot of folks, myself included,
were learning this stuff, there's actually a bunch more tags.
And you'll see this as you dive into the assignment and your final project,
perhaps, and in the real world, as well.
Div is among the more useful, and also more generic tags out there.
It just means a division of the page, and it too
creates like an invisible rectangle across the screen that
allows you to store words, and images, and contents inside of it.
Header, and main, and footer are just like divs or divisions of the page,
but they're better named.
And the latest version of HTML, HTML5 realized, well,
we shouldn't just call everything in our web page generically a div or division.
So these are functionally, though, the same.
And there's a few others, as well-- things like aside
and nav, which we saw earlier, and several others, as well.
SPEAKER 1: And you can assign classes and ideas and everything
in the same way.
DAVID MALAN: Indeed.
It's just a way of helping the browser help the human, especially for reasons
of accessibility and for mobile access, where you might want to understand
the structure of the web page, that when you tap on the screen,
it zooms in on the main part of the screen,
and not on like the footer of the screen instead.
So rather than type out as many examples,
let me go ahead and open up a few others that we've made in advance, like css6.
So this one's a bit more of a mouthful, but you can perhaps
infer from what we're seeing what's going on here.
So I seem to have a header, a main, and a footer as before,
but notice I'm not using large, medium, and small.
You'll see for your assignment, or for your final project,
or any number of online resources, there's different units of measure.
And thus far, I used English words-- large, medium, and small--
but you can specify points.
You can say 24 point, 96 point.
You can use pixels--
20 pixels, 30 pixels.
Or you can even do relative values, like vh,
for viewport height, which is a fancy way of saying that the body of a web
page is otherwise-- well, the white rectangular region of a web page
that you see on your Mac or PC is generally known as the viewport.
That is literally the window you're looking at.
So if you say 20vh, that's actually saying 20% of the viewport height.
So if you have a screen that's this tall, the text that is in the header
is going to take up 20% of the height of the screen.
So it's a way of making your font size more dynamic.
What about all of this?
These are completely new.
We looked only before at text-align, but you can probably
infer what else is going on here.
So color white is going to make the text white.
background-image is going to take a URL--
which happens to be a relative URL, a file in the same directory called
cat.jpg--
and put it on the background.
It's not going to repeat it, and it's going to make the size of it
cover the web page.
How in the world would you know any of this?
Well, frankly, I didn't really remember it the other day,
and so I just looked it up in an online CSS reference.
And I just know that this allows me to specify
what image I want to use as the background of a web page, how
I want to size it--
I want it to cover my web page--
and do I want it to repeat.
Maybe, if the image is too small, do I want to see image, image, image, image,
or just stretch it to fill the screen?
I don't want it to repeat, because indeed, I want it to cover the screen.
So you would only know what values exist and which
ones you want to use, honestly, just by looking them up.
And there's so many that it's not even worth trying to memorize these things.
You'll just get accustomed to them, if you end up liking this
and you reuse them again and again.
So let's go ahead and look at what I'm actually going to see.
If I scroll down to the bottom of the page, the contents of the page
are actually going to be pretty much identical in this.
So let's go ahead and open up css6.html, and we'll see the following.
So it doesn't quite all fit on the screen,
but that's OK, because I really just want to use that image as a background
now, not see the whole image.
And you'll see that John Harvard, and welcome to my home page,
and the copyright is all in white, because notice that I
did specify [? a ?] color of white.
This cat is the background image, and indeed, it's covering the screen.
And what's nice is that this is all dynamic.
If I go in here and start resizing my browser window,
notice that the font is getting smaller and smaller, because John Harvard is
still taking up 20% of the height of the viewport, the rectangular region.
And I'm seeing a little less of the cat, but that's OK, because again, he's
just the background.
So if you've ever visited a website that's
far more interesting than the examples we looked at up until now, that
have nice pretty background images, they might be using some CSS properties
quite like those, as well.
Well, how about even fancier these days-- let's jump right to the spoiler.
Let's open up css7.html, which is our seventh and final version of this
series, and you'll notice this--
perhaps a familiar face.
Here, we have Connor boxing in the library,
but I have that exact same text overlaying a video.
So it turns out that, using richer media,
can you do the same kind of thing-- fill the screen,
but overlay the contents of your web page.
Pretty common.
If you go to a nice, very interactive website,
you might actually see some motion video going on.
Well, how is this example working?
Well, let's open it up.
If I open up css7.html, some of it's going to be new to me.
Let's focus on the HTML first.
And most of this, I think, we can notice as familiar.
Footer, main, header is all the same, but notice
I wrapped it all in a section tag this time, because it's
like a whole section of the screen.
And then up here, I have a video tag.
And I had to look this stuff up too.
I wanted the video to auto play, and because we only
shot a few seconds of footage, I want it to loop again and again,
so it doesn't become static, if the human waits there too long.
And I want it to be muted.
Why?
Because we didn't want to hear the punching
bag being hit, and also for reasons of user experience these days.
A lot of browsers, like Chrome, will not auto
play videos if they have sound on them.
It's become too annoying for users, it's become too invasive because of ads.
So if you start playing your videos muted,
they will most likely automatically play.
So this first attribute will be respected.
But these attributes are a little weird.
They don't have equal signs, and they don't have quotes.
And that's just because these attributes don't need values.
Just like certain tags, like image, don't need close tags,
some attributes don't need values, because I'm done with my thought.
Auto play this.
Loop this.
Mute this.
One word suffices.
You don't need an equal sign and double quotes.
How do you know this?
Just from the documentation, looking at an online reference.
And for the assignment and final project,
we'll point you to some popular references
that are freely available via which to check these things, as well.
The video tag, though, seems to take one tag inside of it,
which is the source of the video.
This is ridiculously named-- source source equals
the name of the file, which happens to be boxing.mp4, a movie file here.
The type of it is, indeed, video/mp4.
So this is just how you would embed a video in a web page.
How are they overlaid?
Well, let's just scroll up.
And we don't have to get too into the weeds here,
but you'll notice I did the following.
One, I told the video, make yourself 100%
of the height and 100% of the width.
So it turns out those are CSS properties, as well, that you
would know just by looking those up.
Margin 0 on the body was just to fix a little bug.
It turns out that most browsers put a little white border around everything,
and that looked a little ugly for a video,
so I wanted to get rid of that margin.
So saying margin 0 means disable any white border around the video.
And then section, down here, is a technique
via which you can overlay one thing on top of the other.
Because think about all of the examples thus far.
Like my three paragraphs, I had one paragraph,
then the next one was below it, then the next one was below it.
Nothing has overlapped other things yet, but in this example,
I deliberately want the text overlap the video.
So how do you solve this?
Well, I started googling around, and I googled something like CSS overlay text
on video, and I saw some suggested properties like this.
Well, if I want to make my text white, just say as much.
If I want to position this section, as I described it, on top of it absolutely--
I don't want it to go below the video, because that would defeat the point.
I want to position it absolutely at pixel 0 on the left,
pixel 0 on the right, and pixel 0 on top.
That means take the section of text that would otherwise be below the video,
and instead, absolutely position it 0, 0, 0--
so 0 pixels away from the top left and right.
So that the effect is to overlay the two.
And that's definitely among the more advanced techniques
we've seen thus far.
And even I had to hook this up to remember how to do this technique.
But in short, all of the building blocks are still there.
We have the names of our tags, that are referencing tags down below.
We have property colon value, property colon value--
we're just now combining them in much more powerful ways.
SPEAKER 1: And I've just noticed that you've, in a lovely way,
alphabetized your attributes here.
But does the order matter?
DAVID MALAN: The order does not matter.
If you're just as obsessive as I am, I alphabetized everything.
I can make an academic argument which, frankly, it just helps me skim things,
because I can immediately see if something is there or not there,
if it's alphabetical.
I have yet to see a reference online that is as obsessive about this detail
as I am.
It's not necessary.
So what else can we do here too?
You'll notice that I typed the word white.
That's actually not, strictly speaking, the only option.
We can change the text to black, for instance.
And now this is a little weird.
There's this little square next to the word.
I did not create that square.
This is a feature of certain text editors,
like VSCode, that are just not that usefully
showing me what color I just typed.
It's more useful if you want to type something like rouge,
or some other color that you might not necessarily have in your mind's eye.
Here, it's just graphically showing me what white and black look like.
But if I go back to the page now and reload, you'll see that black--
it didn't really look good the first time I tried it.
That's why I went with white.
But I can try other colors.
I can try something like red, reload now, and now it's red.
That's even worse, perhaps.
But you can express almost any color here, as well.
But it doesn't have to be a word.
You can actually do it in RGB format.
So if unfamiliar, RGB--
or red green blue-- is the paradigm you might
see in Photoshop or in other tools.
It represents how much red, how much green,
and how much blue you might want in any given color.
Well, it turns out--
and you would only know this from having learned it before,
or poked around, or read up on it earlier--
if you do a value like 0, 0, 0--
so 0 red, 0 green, and 0 blue--
those frequencies of light together give you black in the aggregate.
So if I reload the page now, after saving it, I indeed get black.
If I do the opposite-- instead of no red, no green, no blue, but do a lot--
and the maximum possible value, turns out is 255, 255, 255--
and I reload now, I get white.
And you'll notice what's cool about this--
if I do 255, 0, 0, that means a lot of red, 0 green, 0 blue.
And if I reload now, I get my familiar red.
So we can spend all day on this, but frankly,
if you Google something like HTML color wheel,
Google actually has this built in widget where you can
choose any color of the rainbow here--
for instance, this purple--
and you'll see that, in your CSS, you can actually type,
for this shade of purple, rgb(197, 45, 252).
Or turns out there's another syntax.
It's called hexadecimal, but more on that another time.
You can, instead, use this cryptic code here.
You can also type the word purple, but that's a very specific definition
of a specific shade of purple.
This gives you exactly this shade of purple.
So just to be clear, let me go ahead and copy
this, just for demonstration's sake, change this text
to that with the sharp sign, save it, and reload my example,
and now we've overlaid purple on top of Connor doing the boxing.
All right.
Well, let's go ahead and open up a few other examples
that are, perhaps, a little more familiar from the real world,
just to whet your appetite for what more you can do.
And again, the goal here is not to absorb
every one of these individual techniques,
but now to get sort of the lay of the land
and to understand, oh, if I want to achieve this effect that I've
seen on some website, these are the building blocks
that I can start to bring together to do that thing.
Let me go ahead and open up in my browser images1--
plural-- and you'll see that I have this example here
of Grumpy Cat again and again.
But how did I get that effect?
Well, you'll see that there's three of them here,
and there's clearly some nice circles.
And I could absolutely open up Photoshop or some other program and just do that,
but it turns out I can do that in CSS.
If I open up images1.html, you'll see this HTML code, including the source
of this particular Grumpy Cat.
And you'll see that I reference the same image-- cat.jpg, cat.jpg, cat.jpg--
three times, same alternative text each time.
But notice this-- if I go to the top of this file--
I went ahead and kept my CSS in the same file,
because it's such a simple example, it didn't make sense
to factor it out into a second file.
On my image tag, I can give it a border radius of some percentage.
So how much do you want to curve it ?
0% or maybe 50%.
Let me go ahead and change it temporarily to 0% and reload,
and I'll see three happy cats, just as the original image is.
But if I change it back to 50%, that curves it in 50%, giving me,
effectively, these circles.
If I really ratchet it up, say, to 90% and reload,
I'll get a slightly more ovular shape now, as well.
So different values there allow you to add certain effects
to the actual image.
What if I want to do something more than that?
Well, it turns out that, frankly, it can become really tedious
writing your own CSS all of the time.
And if you're no artist, it's going to be really frustrating
trying to get the aesthetics of your way web page just write.
And yet, all of us have been come pretty accustomed to pretty nice
looking web pages out there, and so for instance, you
might want to borrow techniques you've seen on other websites
without having to recreate it entirely yourself.
So for instance, here is another example, images2.html,
but it's exactly the same thing.
But this time, if I open up the source code,
you're going to see a slightly new tag--
this is images2-- and it's referencing a third-party site.
Notice first, though, that all of this is the same except this class--
class="rounded-circle".
Well, where did that come from?
I could have invented it myself.
We've seen a little bit ago how you can create with the dot notation,
the period, your own words, like rounded-circle, or large, or medium,
or small, or centered.
You could certainly imagine creating a class called rounded-circle.
But the cool thing here is that I did not create this class.
We'll see in a second that I actually have used a third-party library, code
that someone else wrote, who solved this problem for me, who figured out
how to make things rounded circles, so I don't have to get into the weeds.
In computer science, this is known as an abstraction.
It's like a black box.
I don't care how they did it, I just know that they can do it.
So how do I get access to this amazing new feature called rounded-circle?
Well, notice up at the top of my web page, I've done a few things.
And all of this is copy paste from some documentation that we'll point you at.
I am using here a library, which is code written
by someone else called Bootstrap.
It originally was created by Twitter, used by Twitter's website for years.
Now, it's become a larger open-source project.
And in short, it just makes it very easy for you to make good looking websites.
Getbootstrap.com is the URL--
and we'll point you at this afterwards, as well.
And if I go into the documentation and go into things like Components,
you'll see, for instance, that I can make much more interesting things
than I could earlier.
Let me go in, actually, to Content, and go to Tables.
And let me show you this first, before we come back to this example.
Let me go ahead and open up one example here-- table1.html.
This is kind of a mouthful, but let's take a look
at what this is going to look like.
That's a lot of new tags, but it's a good example
of how you would go about wrapping your mind around a new feature in HTML.
You open up some code, and look at it for the first time--
honestly, I don't know what all of these cryptic symbols are,
but if you'll humor me, and allow me to just define a few,
it should make pretty good sense.
Table tag means, hey, browser, here comes an HTML table-- so
something with rows and columns.
Yet I don't see the words rows and columns.
Why?
Well, here comes thead, table head.
It's a very annoyingly succinct description
of the top row in the table--
usually boldfaced, or something like that.
Down here, tbody-- table body-- that's all of the other rows, rows 2,
and 3, and 4, and 5.
Within the head is tr, table row.
So this is like a slice of a row in Excel,
or Google Spreadsheets, or the like.
And then th is table header.
This is like code for a specific cell, or technically,
a column within that row.
So in other words, even though it's written out
in this very text-based format, this is saying, here's a table,
here's the head of the table, here's a row in the table, here's a cell,
here's another cell.
So if you're thinking about this in your mind's eye,
this is like giving me two columns--
week and lecture, left and right respectively.
It's just laid out in this text-based form.
What is going to be underneath the table head in the table body?
Well, let's take a look at this.
In the table body, I have table row, table row, table row, table row,
table row-- so at least five rows below the header.
What are the cells in each?
Well, when it's not the table header--
the first row-- it's called td, table data.
These are awful names, but it really refers to cell.
It would be like having a tag called cell.
So in the first column, it's going to say 1, and in the second column,
it's going to say, Telling a Story and Introduction to Post Production, which
was the name of our first lecture in this room.
Lecture 2, Framing, Composition, Lens Basics.
Lecture 3, Exposure and Visual Camera Artifacts, and so forth.
So we're creating another table again, where it says week
and then lecture, and then 1, Telling a Story and Introduction
to Post Production; 2, Framing, Composition, and Lens Basics;
and so forth.
So long story short, if we wave our hand and open this file up now, table1.html,
you'll see a pretty simple and ugly HTML table.
Now, it looks like the table body is left-aligned,
and the table heading, not quite obviously, is centered here and there.
And honestly, this looks ugly.
And I could spend five minutes.
I could spend an hour adding borders, or colors, or trying to style this table,
but why bother?
One of the key features of programming these days,
and web development these days is you can
stand on the shoulders of other people who've already invested that time,
and who are maybe even more artistically inclined than you, and instead, make
your same data in your table look not like table1, but like table2.
And voila.
Now, you might not love this table still,
but arguably, it's much prettier than the previous one.
Everything's nicely lined up.
I have this nice striping to draw your attention to one row, versus the other.
How did I get to this?
Well, it turns out in table2.html, my code is almost identical, except--
indeed, my code is almost identical, except notice what I did up here.
I added a class to my table tag.
Before, I just said open bracket table, close bracket.
But here, I've said table table-striped.
Those are two classes that someone else invented-- specifically,
the people who wrote the Bootstrap library invented for us--
that, so long as I include their code in mine,
I can now have access to their stylization of tables.
So just by adding those two words, table and table-striped, all of my HTML
now renders like this, instead of like that.
And that really is starting to hint at the power of CSS.
How did I do this?
Again, I read the documentation, and I ultimately copied
and pasted these three lines from the documentation.
The key one really is the third.
This is referencing a URL of CSS that someone else wrote for me-- namely,
the authors of the Bootstrap library.
And if I view this file, which I can do by pasting that same URL
into a browser, you'll see a huge mess.
And if we look really closely, you'll see lots of semicolons, lots of colons.
Those are just a huge number of properties
that the authors of Bootstrap have invented for you, and I, and everyone
on the internet, if they want to use.
So we just get a lot of functionality for free.
So similarly, when we had the second version of our images
file a moment ago, the reason that I can now just say rounded-circle
is because someone else invented that class for me.
So it's suffices for me just to use rounded-circle
and to include Bootstrap's code up here with this new link tag.
And voila, my website is more powerful and looks prettier
than it might otherwise look.
SPEAKER 1: Here's a question for you, David.
DAVID MALAN: Indeed.
SPEAKER 1: So you said we can create our own classes with period.
So if we wanted to create a rounded-circle class,
we would have a CSS file or higher up in this file that was .rounded-circle.
DAVID MALAN: Mm-hmm.
SPEAKER 1: What would happen if we had our own rounded-circle
and we imported the Bootstrap library?
DAVID MALAN: Really good question.
If you had your own definition of rounded-circle,
and Bootstrap had its own, whose would win?
Well, there, again, is the C in Cascading Style Sheets--
whoever's class is defined most recently takes effect.
So if you had this link tag here, and then maybe a style tag below it,
or another link tag linking to your file,
and you both happen to choose accidentally
the same keyword for your class, whichever
one was defined most recently, lower in the file,
would override the previous one.
So you generally want to be where those kinds of collisions, so to speak.
SPEAKER 1: So this might be an accidental overwrite, or maybe
intentional.
Who knows?
DAVID MALAN: Indeed, indeed.
It could be a feature or a bug, so to speak.
Well, let's take a look at a couple of examples too
that are really synergistic with some of the media with which you've
been experimenting and creating for this particular class.
Let's go ahead and open up iframe1.html.
And this is one of the last tags we'll take a look at.
Iframe is like an integrated frame.
It's like an embedded web page inside of a web page.
And this is a useful technique, because if you've ever
noticed various websites, of course, embed YouTube videos, or Vimeo
movies, or images, certainly, from Flickr and all sorts of other websites.
How did they actually do that?
Sometimes using an iframe, which is like saying, OK, I'm making my web page,
but inside of my web page, I'd like to allocate a rectangular region
for someone else's web page.
And maybe that web page is actual text [? and ?] images,
or maybe it's actually a video.
YouTube uses this technique, the iframe tag,
to allow you and I to embed videos that they're hosting on their servers,
but in our website.
And that's a wonderfully powerful tool, because it
means I don't have to figure out how to host videos on my own website.
So how do I do this?
Well, here's an example of HTML iframe1.html.
All of these tags are now familiar, from earlier examples.
The only new one is iframe.
It takes an attribute, optionally called allowfullscreen--
if you want that little expansion icon to work,
so that you can fill the screen with the user's video.
frameborder="0" just gets rid of a stupid default border that you would
otherwise see on your web page, which just looks ugly,
but you don't need to remove it.
Height means give me a rectangle that's 315 pixels tall,
because that's how big I've decided I want my video to be.
What is the source of this iframe?
Well, I want it to be this URL from YouTube.
And I just looked at YouTube and I clicked the Share icon,
and clicked Embed, and I found the URL that I actually want.
If you're familiar with YouTube from your own videos,
you'll know that they have their own IDs.
And that's all that is there.
And then at the end here is width.
The width of my video, or the little rectangle in the window
should be 560 pixels.
Weirdly, the iframe should have nothing inside of it,
but you indeed need to close it for historical reasons.
So sometimes in the tech world, left hand didn't talk the right hand,
and you have these inconsistencies, and you just
have to kind of remember that these disparities exist.
So nothing goes in between those tags, but you do need to close the tag.
Well, what's this going to look like?
Well, let me open up iframe1.html, and voila, you'll see some familiar faces.
Now, it's a small rectangular video.
You can see that margin I described earlier,
kind of a stupid looking white border that's just there because.
That's fine.
I didn't get rid of it this time, but this is kind of ugly, right?
Why not let Dan and Ian fill the screen?
Well, I probably shouldn't have hardcoded that same width and height.
So how could we go about improving this?
Well, let me go and open up in my editor iframe2.html, and you'll see this.
Same HTML almost, except I've included-- actually,
let me get rid of this for just a moment.
Same HTML down here, except I've gotten rid
of the width and height, because remember,
we can control width and height with CSS.
And notice this is a slightly new technique.
If you want to apply the same properties to one, or two, or three
or more tags, that's fine, just separate them with commas like I did here.
So this is like saying in one fell swoop, hey, browser,
allocate 100% of your height and 100% of width not only to the whole thing,
but specifically to the body, and then within the body to the iframe.
So this kind of explodes the iframe and the body
to fill the entire screen horizontally and vertically.
iframe border, I just really hate that darn border, so I say border 0,
and that gets rid of that.
But that's just an aesthetic preference.
But the cool thing now is that now, it's going to kind of look
like we're watching Netflix or the like.
Because now, in iframe2, voila--
now, it's filling the screen--
almost, almost.
I still have this stupid border, or rather, this margin.
How can I get rid of that?
Well, let me actually go in here and edit this myself.
I know that this is on the body.
And I can say margin 0, save the file, and now again,
notice this white border around the video, if I reload now, voila.
Now, it looks pretty darn good.
Now, I'm fully filling the web page, and I have the ability
now to play this video, if I so choose.
SPEAKER 1: Just as good as Netflix.
DAVID MALAN: What's that?
SPEAKER 1: Just as good as Netflix.
DAVID MALAN: Just as good as Netflix.
Ever more engaging.
Unfortunately, Dan and Ian don't look so good if I start doing this.
So we can eventually get rid of one or both of them.
So it looks like the video is not actually maintaining its aspect ratio.
And this, of course, is going to bother anyone watching it.
So of course, it would make sense maybe to make sure not 100%, 100%,
because then it's dependent on the size of the user's window.
Let me enforce a 16 by 9 aspect ratio, for instance.
Well, how can I do that?
Honestly, it's not easy.
It would take me some amount of time and tinkering
using CSS to figure out the right numbers, and the math,
and the sort of dynamism so that I ensure
that this video is always 16 by 9.
But you know what?
Bootstrap's figured that out for me.
If I go ahead here and search for video, and go under Embeds,
you'll actually see that Bootstrap provides you
with the ability to create responsive video or slideshow
embeds based on the window of the parent dot dot dot.
It's a bit of a mouthful, but responsive is this term of art in the tech world
that just means an element on the web page that dynamically resizes,
based on the device in question.
So if I scroll down further, you'll see here under Aspect Ratios,
oh, here on Bootstrap's website is some sample HTML
that uses the tag Dan mentioned earlier, the div tag, via which,
using some special classes, can you specify what your aspect ratio is.
What aspect ratios are available?
Well, they support these three--
21 by 9, 16 by 9, and 4 by 3--
if you use Bootstrap's premade classes.
So again, it's just like a buffet of features,
none of which you would know necessarily from the get-go how to create yourself.
But that's the whole point.
These are sort of black boxes that you can just
use off the shelf in your own projects.
So if I go now into iframe3.html, the third version,
notice that this version, if I resize my window,
actually maintains it's aspect ratio.
It does add some letterboxing, but frankly, that's the only way to do it.
If you want to maintain a 16 by 9, you got to fill the space somehow else.
Maybe I chose black, you might choose white or something else.
But at least now, Dan and Ian have remained proportional.
Well, how did we do this?
Well, if I open up iframe3.html, you'll see
that I've again, at the top of my page, included Bootstrap's code.
And that's just copy and paste from their documentation.
But then down here, notice that I've added these classes.
But I had to do a little bit more, and I only knew this
from reading Bootstrap's documentation.
At first glance, these would have no meaning to anyone
else without the documentation.
I just copied and pasted the recommended classes
and added the requisite wrapper tags, like divs,
so that Bootstrap can do its thing.
And again, there's the distinction-- it's useful to understand how CSS works
and what you can do with it, but you don't
need to necessarily spend a huge amount of time getting into the weeds.
When all you care about is a high level problem, like aspect ratio,
libraries like Bootstrap exist to save you and me time,
so we can focus on the problems we do care about,
and not the ones that we don't.
Now, we mentioned those HTTP parameters earlier, those customizations,
notice how this is relevant now.
In our fourth and final example on iframes,
notice what I've done with Dan and Ian's introductory video.
Here is the same embed URL as before, but notice now that question mark.
There's a question mark now, after which is autoplay
equals 1, then an ampersand, then list equals, then this cryptic string.
Then if I keep going, we'll see at the very end of this line mute=1,
after another ampersand.
Well, what are those?
Well, you know what?
I googled this-- YouTube embed parameters--
which is the term of art for things that come after the question mark.
I found this documentation right on Google's home page,
and I scroll down to Supported Parameters.
And I found one called autoplay, and I found one called list,
and I found another called--
not here-- mute documented later in the documentation, unfortunately,
that led me to realize that, you know what?
If I do use that same YouTube URL, but embed these parameters
after the question mark, notice how I can slightly
improve my user experience, so that when users visit Dan and Ian's page here,
it immediately starts playing.
And so it's muted, so we're not going to hear them.
But this is arguably the experience I now want,
if the whole purpose of coming to this website is to see the video played.
So very familiar features that you yourself might have seen on the web
before.
And they're actually pretty accessible, not just off the top of your head,
but if you assemble these various building
blocks of HTML, and CSS, and the features therein,
can you reconstruct now some of these very familiar user
interface mechanisms.
Let's do one last set of examples to set the stage for where
you're going to be going-- not for this week's assignment,
but for perhaps your final project, and for our next lecture,
wherein we're focus on a third language called JavaScript.
JavaScript, as we'll eventually see, is an actual programming language.
You can write software with it.
You can make interactive things with it.
HTML and CSS or more about markup, and aesthetics, and the display thereof.
So we're going to need some JavaScript to make our websites even fancier.
But let's look at this final set of examples here.
In images5.html, I have a very simple and very primitive gallery of sorts,
I've got some thumbnails up here-- all of them the same cat,
for demonstration's sake--
and then this big rectangular region that I
want to load the full image into.
So this is like a very weak version of Instagram, or SmugMug, or Google
Photos, or something like that.
But let me go ahead and click on any of the identical cats, and voila,
they end up in that particular box.
So a very similar mechanism to a lot of these photo-based
websites where you can toggle among the thumbnails,
and see a particularly big image.
This uses an iframe, and it actually is using HTML tags
to load individual images into the bigger iframe.
But this iframe, I decided, is just going to be a square.
It's going to fill the whole screen like Dan and Ian's video.
But that would be one approach.
Though another progression of this, though, might be something like this.
Let me go ahead and open up now images6.html.
Now, this looks a little cooler.
I have now three identical cats, but I could certainly swap out
those for dogs or other such cats.
Each of them has a title, and a description,
and then a button linking to the reference via which
I got this image in the first place.
And so now, things are looking kind of nice.
But honestly, based only on a couple of hours of HTML, how
would you even begin to have three different cats, and then
some bold facing, and some text, and some pretty blue buttons?
This is a lot quite quickly.
But if you know HTML and you know how to use CSS in libraries therefore,
can you, as in images6.html, do a little something like this?
At first glance, there's a lot going on in this file.
But how did I know to do this?
I read Bootstrap's documentation.
And you'll notice keywords like card.
Why?
Well, in Bootstrap, I got to poking around, thinking
about what other features they might have, and indeed, I found cards.
Cards-- if I scroll through the documentation,
you see some samples here.
And I'm like, oh, I like this layout, like an image with a caption
here, and then the title, and then some text, and some blue buttons.
I don't really know how to do that, or it would take me some time
to figure it out.
But that's fine, because if I scroll further,
this library, like other free libraries, they'll give you some sample code.
And I literally just copied and pasted this HTML,
I filled in some of the dot dot dots with my own cat.jpg,
and I read the additional documentation for customization
to figure out how I can use these cards three times in a row in my own website.
So again, we're just scratching the surface of a lot of the free features.
And this is how some of today's most popular websites
really get made-- by standing on the shoulders of others who have
helped them solve some common problems.
So the last common problem we'll solve is this--
this one also caught my eye.
Bootstrap, and other libraries like it-- which are just as free and open-source,
so to speak--
also gives you the ability to do things like this,
where you can have a slide of images depicted on the screen
here with controls, for instance.
So you could imagine this being a website where
you're clicking on your three favorite images on your own portfolio site.
Or down here, maybe this one, where there's even these little
breadcrumbs that show you how many images there are.
This is really cool.
I want this in my website, but my god, how
do I even begin to do that, and respond to mouse clicks, and the like?
Well, that's OK, because we have the building blocks.
And with Bootstrap, you'll see that there's some sample code.
And indeed, I copied and pasted this, and I started to customize it.
I recognized keywords, I recognized structure, like tags and attributes,
and I went ahead, and with a few minutes of effort,
I went ahead and created, finally, our last example tonight, images7.
And you'll see a few more lines at the top,
because I copied and pasted some more of the instructions, all
of it referring to Bootstrap.
But that's just from the documentation there.
You'll see more HTML but you'll see some familiar tags-- div, and ol, and li.
This is all based on that sample documentation.
And then you'll see up here, I decided my carousel
shall be 640 by 604 pixels, which matches the size of my Grumpy Cat.
And the effect in images7 is to do this.
I now have Grumpy Cat, I have the caption therefore--
Grumpy Cat from Know Your Meme--
and then a slider of three.
And then somehow, automatically--
I'm not even controlling the keyboard-- is it sliding among the three
available?
Images I happened to use the same cat three times over,
but I just have to change the source attribute to dog.jpg, or bird.jpg,
or three different cats, or whatever to achieve the same result.
And this is the only thing tonight that we can't do with HTML and CSS alone.
This carousel, with which will end tonight, has, of course,
these interactive features.
On the one hand, it's sort of on autopilot.
It's scrolling itself, and indeed, it's scrolling visually, which
is something we didn't even look at.
I can click left and right, and I can even
click on this little thumbnails or those breadcrumbs.
That's going to require a little more power, not just the ability
to mark up content and the ability to stylize content.
We need to make it interactive, and so for that, we'll
introduce next time this language called JavaScript, an actual programming
language via which you can listen for mouse clicks,
you can scroll things from left to right,
and really bring life to your projects.
But ultimately, even though this has absolutely
been a firehose most likely between HTML and CSS
and now, these sort of teasers for next time,
realize that if you understand tags, and attributes, and their values,
and CSS properties and their values, and are going to be comfortable,
ultimately, poking around some online documentation,
you can build out your own vocabulary, and do these kinds
of examples and so many more.
So why don't we officially call it a night here?
And as always, we'll stick around for questions.
SPEAKER 1: I just have a couple questions for you.
As you said, it was a firehose for many people
where this is your first time seeing this.
And this is very kind of pedantic, where you're typing in all this HTML code.
But how do we kind of evolve from this to the next step?
Let's say that this is an interesting problem that we want to solve,
and we want to go on to next things.
How do we start to learn about things like libraries, and frameworks, and--
what's next?
DAVID MALAN: Really good question.
So you can certainly pursue other courses
in web development and web design.
So the course Dan mentioned earlier, CS50, is one of them.
There's certainly any number of free online tutorials and references online.
Frankly, I learned HTML over the course of probably an hour or two,
when a TA taught me some years ago.
And then I've just kind of read up on technique since.
And so reading, and googling, and just experimenting.
What's nice about HTML and CSS is they can't really break things,
because worst case, something doesn't look the way you want.
So just hit Control-Z or Command-Z to undo what it is that you've done.
And really by experimenting, I think, you will learn a lot of this,
and just by googling references.
And when it comes to learning even new techniques,
the world is your oyster now, so to speak.
You can go to any website now, that you've been going to every day
until today, go to View, View Source, and you can actually
see how it is they built that.
Or go to Developer Tools and actually look at the HTML.
And just case in point--
if I go, for instance, to harvard.edu, and I pull up View, Developer,
Developer Tools, you'll notice, if I shrink this a little bit--
and for instance, suppose I really want to see how
did they make this Harvard University?
I can right-click or Control-click on that part of the web page--
and if you've never noticed this, your browser might very well have this
option Inspect--
it will jump you to the very line of HTML
in this website that is implementing that particular link to Harvard's
crest.
If I click on the triangle, you'll see that there's this tag called span.
That's similar in spirit to div, but a little bit different.
You'll see the word Harvard University.
And in short with enough ingenuity, can you reverse engineer
how it is a website did something so that you
can adapt some similar technique in your project too.
SPEAKER 1: Awesome.
As we all know, the internet is fraught with examples, for better or for worse.
Are there any references that you tend to rely on or think
are good, at least for the current time?
DAVID MALAN: Yeah, absolutely.
We can add these links, as well. w3schools.com
is a good one for HTML and CSS tutorials,
ultimately JavaScript as well there's another one from Mozilla,
the folks behind Firefox, which have a very authoritative website when
it comes to a lot of these things.
But generally, Google is your friend, and generally
speaking, the top hit or three will be pretty
good matches for any feature you want.
So what do I mean by that?
If you want to know how to left-align text,
literally Google CSS left-align text enter, and odds are,
you'll get any number of responses.
There's also a very popular website called
Stack Overflow, for programmers and web developers,
which is like a Q&A website.
And that tends to be one of the most popular places for Q&A,
and almost every question you might have has probably, amazingly,
been asked by someone else.
So finding those Google search results too
will help you solve problems really fast, as well.
AUDIENCE: Question.
DAVID MALAN: Yeah.
AUDIENCE: So I've heard about people tricking codes out [? there. ?] So
if you copy it and you try to put [? my effect your computer, ?] so how
do we avoid [INAUDIBLE]?
DAVID MALAN: So to be clear, the question
m how do you avoid someone copying your HTML and CSS, and therefore
your website?
AUDIENCE: No, like if you see something pretty cool
and you would like to use it, and when you copy the code,
it actually was a trick just so they can infect your computer.
DAVID MALAN: Oh.
AUDIENCE: I've heard of those before.
DAVID MALAN: Yes.
So what I have been opening is a very powerful tool.
When you go to Developer Tools, there have been issues where people are told,
click on Console instead of elements, and paste something from a website
to reset your Facebook password, or unlock free features.
That is never, never, never the thing to do.
There is no use case I can even think of where
that has solved the problem for me.
And what it's doing is this command line here,
this blinking prompt, which we did not use tonight,
really gives you control over the current web page,
and can lead to theft of information.
And so just ignore all such requests to do things like that.
Really good question.
All right, let's call it a night again, and we'll stick around though,
if folks have one-on-one questions.