[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.
