BRIAN YU: All right, so
we've now established
how devices are able to communicate with
one another over the internet by taking
advantage of these protocols--
TCP/IP and HTTP.
And that explains how, when
you go to your web browser,
and you type in something
like google.com,
how your web browser is able
to connect to Google's servers
by making a request for their home page,
and Google servers respond back to you
with the content of
Google's actual web page.
But, now, let's take a closer
look at what actually makes up
the content of that web page--
in other words, what exactly are
Google's servers sending back
to your web browser so
that your web browser knows
how to display the page that
we know as Google's home page.
Let's take a look.
I'll go ahead and open up my web
browser to Google's actual web
page at google.com.
And, in Google Chrome, I can go up
to the View menu, go to Developer,
and then choose View Source.
And what that's going
to allow me to do is
it's going to let me view the source
code of Google's home page, which
is written in a language called HTML.
HTML is short for
HyperText Markup Language,
which is a language that describes
the structure of a web page.
And this, what we're
looking at right here,
is, in fact, the text-based content
that makes up Google's web page.
And if we scroll down far
enough, eventually we'll
find, for example, that there are some
things that look a little bit familiar.
For example, you'll notice
there's a Store button here.
There's some text that
says Sign in there.
So even though a lot of this
looks very, very cryptic,
there are a couple of
familiar elements that
might ring familiar from if you've
visited Google's web page before.
So we'll start instead by
looking at a much simpler web
page, but our very first
web page written using HTML.
So what you're looking at right here is
a very basic, but correct, HTML page.
And this is just going to
be an HTML web page, which,
as you might be able to guess, even
if you've never seen HTML before,
is going to display the
words, Hello, world,
to the person viewing the web
page in their web browser.
But how exactly is it doing that?
Let's take a look at
this HTML code, line
by line, to get an understanding
for what it is that's going on here.
We start at the top with this line.
In angled brackets,
we have !DOCTYPE html.
And this line is just a line that goes
at the beginning of every HTML file,
that is a signal to the
person reading that file,
or to the web browser that's
interpreting that file,
that this particular
file is an HTML file.
And, in particular, it's using
HTML5, the latest version of HTML.
So it's a signal of what language it
is that this text file is written in.
Up next is what we're
going to call an HTML tag.
And so this right here,
angle bracket HTML
means that we're starting the
HTML content of the web page.
HTML is composed of a lot of tags that
ultimately describe particular elements
that show up on the web page.
And here, what we're saying is
that this second line, HTML,
is saying that this is the beginning
of the HTML content of this web page.
You'll notice that, at the bottom,
it's paired with another tag,
angle bracket /html, and this /html
means this is the end of the HTML tag.
You'll often find that, in
HTML, tags come in pairs.
There's a start tag, like angle
bracket html angle bracket,
and then at the end, there is a closing
tag that's angle bracket /html angle
bracket, that means this is
the end of the HTML content.
And everything in between those
two tags is the actual HTML content
of this web page.
You may also notice that, in the start
tag for HTML here, we have lang="en".
The en here just stands
for English, and that just
means that this HTML content is going
to be an English-language website.
So we see that we now
have a start HTML tag that
defines the beginning of the
HTML content for this web page,
and we've also seen that
we have an ending HTML
tag that's going to define the end
of the HTML content for the web page.
But now let's take a look at what comes
in between, the actual HTML content.
Well, the first thing you may
notice is that there's another tag.
The very next line begins
with the word head,
and so HTML is really composed of all
of these nested tags, HTML elements that
are contained within other elements.
And if you look at a web page,
you can try and distill a web page
into these nested elements.
You might find that
there's a text element
inside of a button, that might be
inside of a list, inside of a table.
Web pages have this
structure to them, and HTML
is going to be a text-based
representation of that same idea,
of that structural, hierarchical
nature that an HTML website has.
So here, the head of
the web page is just
going to contain some metadata, some
additional information about the web
page that's going to be
relevant for a web browser that
wants to read that web
page and understand
how to display it to the user.
And here, inside of the
head element of our page,
we have one more tag, which is
the title tag, an opening title
tag and a close title tag.
And as the name might
suggest, this title tag
defines the title of the HTML page.
So whatever comes in between the
open title tag of the web page
and the closing title
tag of the web page
is going to be the title of the
page that shows up in that top tab
bar on most web browsers nowadays.
And here, what's in between the open and
closing title tags is the word Hello.
That is going to be the title
of this particular web page,
and that's what makes up the
header of this HTML page.
We have inside of the head
section of the web page
an HTML element called title,
and the title of this web page
is just the word Hello, followed
by an exclamation point.
So what comes after the head?
Well, after the head is
the body of the web page.
And this is the actual visible
portion of the web page that makes up
most of your web
browser's screen when it
is that you load a web page like
google.com or any other web page,
for example.
And, in this case, it
seems like the only thing
inside of the body of this web
page are the words, Hello, world.
And so that's why, when you open
up this page, what we're ultimately
going to see are the
words, Hello, world,
displayed inside of the web browser.
So let's actually try it.
Let's write this HTML and see if we
can view the content of this page
inside of our web browser.
All right, so I'm now
inside of CS50 IDE,
and let's create our first web page.
I'll go up into the File
menu and choose New File.
And I'll call this
file index.html, which
is just a conventional
name for an HTML web page.
And let's start writing the HTML content
of this web page inside of index.html.
I'll first include the line
!DOCTYPE html, which, again,
it's just a signal that this particular
file is an HTML file written using
the latest version of HTML, HTML5.
I'll next add the HTML tag specifying
that the language is English.
And then, notice that, as soon as I
type the end angle bracket, to say,
this is the end of the start
of the HTML tag, CS50, the IDE,
will automatically add the
closing HTML tag for me
because it knows that if I'm starting
the HTML content of the web page, then,
presumably, at some point, I also want
to end the HTML content of the web
page, too.
So it's going to add that for me, so
I don't need to write the closing tag
myself.
I'll press Return to move
things onto a new line,
and now I have the start of
the HTML content of my web page
and the end of the HTML
content of my web page.
And now I can begin to fill in
everything that comes in between.
So what was inside of the
HTML content of my web page?
Well, the first thing was the header
of the web page, the head element, that
just contained metadata about my page.
And, in particular, the metadata
that I wanted to include
was the fact that the title of this web
page, specified using the title tag,
I just wanted to be, Hello!
And so that's the header,
the metadata information
that's specifying that the title of
this web page is going to be Hello.
And now, I'll add the
body of the web page
that will be all of the
actual content that shows up
in the web browser when
someone visits my web
page in the main part
of their web browser.
And the body of the web page, in this
case, I just want to say, Hello, world!
And so that's it, our
very first HTML page
that says that the
title of the page should
be the word Hello, and the body of
the page should be Hello, world!
How does the viewer
actually visit my web page?
Well, I first need to serve this
web page using a web server.
And it turns out, CS50 IDE
has a built-in web server
that I can run by going
into my terminal window
and typing http-server
and pressing Return.
When I run http-server, what I'll get
is a URL on which my server is running,
and then the :8080 just means
that this particular web server
is listening on port 8080 for requests.
If I copy that URL now, and then go to
my web browser and paste in that URL,
what I'll get is an
index page that describes
all of the files that are in the
home directory of my CS50 IDE, which,
in this case, is just the index.html
file that we just created.
And if I click on index.html, what
we'll see is a page that just says,
Hello, world!, the body of the web
page that I specified in index.html.
And if you look at the very top
of my web browser in the tab bar,
you'll notice that the title of
this web page is, indeed, Hello!,
what I specified in the title
tag inside of my HTML page.
And now, if I ever modify
this HTML file and save it,
HTTP server will serve the
latest version of that file.
So if I go back into CS50
IDE and say Hello, world!--
let me add a couple of exclamation
points to the end of it, for example,
and then I go back and refresh the
page, you'll see that I now have Hello,
world!, and then two
additional exclamation
points in addition to the
one that we had originally.
So we can now modify HTML files and
use HTTP server to serve those files,
so that anyone who visits our
particular URL on this particular port
is able to request to see
index.html, and the web browser
will take the HTML content that we
wrote and display it back to the user.
Of course, in practice, web pages
are a fair bit more complex than just
displaying, Hello, world!
They're just displaying
some text to the user.
More complex web pages have images
and lists, and they have tables,
and they have other fanciness,
and colors, and more style.
And that's what we're going
to slowly build up to,
adding more sophistication to our
web pages by exploring the features
that we get using HTML.
So let's go back into CS50 IDE
now, and let's now try and create
a new web page that's going to
allow us to display an image,
instead of displaying text.
All right, so I'll go to
File and create a New File,
and I'll call this file image.html.
And this file is just going
to be another HTML web
page, so I can actually just
copy the content of index.html
for now because it will be very similar.
But here in the body of the HTML page,
instead of saying, Hello, world!,
I want to display an image.
So let me first upload
an image to CS50 IDE,
so we have an image that I can
display inside of my HTML page.
I'll go to the File menu and
choose Upload Local Files,
and then I'll select a
file, and, in particular,
I have an image of a cat that
I have stored on my computer
that I'll upload to CS50 IDE.
And so now you'll notice that
cat.jpg is now located inside
of the Home folder of my CS50 IDE.
And now I'd like to, instead
of saying, Hello, world!,
inside of this HTML page,
instead display this image.
And it turns out that, to
display an image in HTML,
there's a particular tag that
allows us to display an image.
And that tag is img--
img standing for image,
and the image tag
takes some additional attributes, some
additional information that the HTML
element is going to need
to know for the web browser
to know how to display the image.
And, in this case, you might imagine
that if I have an image tag, well,
the image tag, I'll need to
specify in it what image I actually
want to display.
And so the attribute that
I'll add to this HTML tag
is going to be one called
source, or src for short,
that is just going to specify
what image I want to display.
And, in this case, I want to
display an image called cat.jpg.
And it turns out that
image tags should also
contain an attribute
called alt, which is just
some text-based description of what the
image is of, in case a user is viewing
your web page, and
they're not able to view
the images because they're
on a slow connection
or using a screen reader, for example.
We'll add some alternative text
that just says, Picture of a cat,
for example, and then
end the angle bracket.
All right, so we now
have an image tag that
specifies the source, the
image that we want to display,
as well as some alternative text.
But if we take a look
at the code, you'll
notice that this image
tag differs a little bit
from the other tags
that we've already used,
head, and title, and body in HTML,
in that it doesn't have a close tag.
There's an opening image tag, but there
doesn't seem to be a /img indicating
the end of the image.
And, indeed, it semantically
wouldn't make a whole lot of sense
to say we had the start of an image,
and then the end of the image,
and then some content in between.
So it turns out that some tags
in HTML, like the image tag,
don't actually require a closing tag.
We can just say, put an image here,
the image I want to display is cat.jpg,
and it is going to be
a picture of a cat.
So if I now go back to my server,
and I'll not go to index.html,
but I'll instead in the URL specify
I want to go to image.html instead.
And now what we'll see is--
very large-- an image of a cat.
So my web page now is
displaying the image
that I've uploaded into my CS50 IDE.
All right, so we've now been able
to create web pages that have text
and that also have images, but
what else do web pages often have?
Well, one of the biggest features of
the web is the ability for one web page
to connect to other web pages via
links, where you click on something
and are taken to a different
web page altogether.
So how are we going to create
a link in an HTML page?
Let's give that a try.
So I'll go back into CS50 IDE,
and I'll create a new file
that I'll call link.html, where
I'll experiment with trying
to create a link to another page.
The general structure will be very
similar to index.html, but instead
of saying, Hello, world!, in the body
of the page, what I'd like to say
is something like, Visit
Harvard, where, ideally,
if the user were to click on the
word Harvard, when they visit
this page in their web
browser, I would like
for them to be taken to
Harvard's website, for example.
How am I going to do that?
Well, to do that, we can take
advantage of another HTML tag
called a for anchor, and then it
takes an attribute called href,
for Hyperlink Reference, that is going
to specify what web page the user
should be taken to when they
click on this particular link.
And we'll include that
in quotation marks,
so I'll say "https://harvard.edu",
and notice it automatically creates
a closing anchor tag for me as well.
And now, in between these two tags,
I'll specify the text of the link
that the user can then click on,
so I'll say, Harvard, for example.
And so what I've done here
is said Visit Harvard,
but Harvard is inside
of this anchor tag that
says that, when I click
on the word Harvard,
you should be taken to harvard.edu,
which is what I specified using
this href attribute of the a element.
Let's give it a try.
If I go back to my
server, refresh the page,
you'll see that link.html is here now.
And if I go to link.html, I see a
web page that says, Visit Harvard.
And if I click on Harvard, then
I'm now taken to Harvard's website.
I've now been taken
to harvard.edu, which
is exactly what the link specified.
Of course, what you'll notice here
is that if we go back into CS50 IDE
and take a look at the
HTML code, the link
that I get taken to when
someone clicks on Harvard,
for example, is totally independent
of the actual text of the link itself.
So there are potential security
concerns that are worth being aware of.
So if, for example, I said, Visit
Harvard, I could instead in the URL
say, let's instead take the
user to yale.edu, for example.
And so now, if someone were to
go back and visit my web page,
it says, Visit Harvard, but when
they click on the Harvard link,
they're taken somewhere
else entirely, for example.
And so that is a
security concern that you
should be aware of when we're
dealing with HTML and links
from one web page to another.
What might this security
concern look like in practice?
Well, recall at the beginning, we
took a look at Google's home page
and were able to view the
source of Google's home page.
And it turns out, we could
do that for any website.
If, for example, I went to
bankofamerica.com, for example,
here what we're looking at is
Bank of America's web page.
And if I went to View,
Developer, View Source,
I could actually take a look
at the HTML source code that
makes up Bank of America's web page.
And even if I don't understand
all of the complexity
because it's a far more complex HTML
page than the ones we've been creating,
I could just copy all of it,
and then go into CS50 IDE,
create a new file that
I'll call a bank.html,
and just paste the contents of Bank
of America's web page right there.
And now, take a look at this.
I go to link.html, and I'll
say Visit Bank of America,
but instead of linking
to bankofamerica.com,
I'll just link to bank.html, which
is my file that I've created,
that just copied the contents
of Bank of America's HTML page.
So if I save that, go
back now to link.html,
I see a link that says
Visit Bank of America.
And if I click on that
Bank of America link,
I might think that I'm being taken
to Bank of America's website.
And, indeed, when I go
to it, what I see is
something that looks very much
like Bank of America's website.
But if I look carefully
at the URL bar, I'm
actually just on bank.html on this
web server that I, myself, am running.
So it's very easy to
take someone else's HTML
and potentially pass it off as a
page that it's not, so definitely
something worth being
mindful of as well.
So we've now been able
to create web pages that
display text, that show images,
that have links to other web pages.
Let's continue by adding some
more features to our web pages.
One thing that you might
imagine a web page having is
not just one big block of text,
but multiple paragraphs of text.
And there are HTML elements
for dealing with that as well.
If I create a new file, that
I'll just call paragraphs.html,
the structure, again, very similar
to index.html, but instead of,
Hello, world!, imagine that I
wanted three different paragraphs,
for instance.
To do that, I can just use the p
tag-- p is short for paragraph--
where I say I want a paragraph.
This is paragraph one.
Then, This is paragraph two, and
then, This is paragraph three.
And the result of that is, if I go back
and take a look at paragraphs.html,
I see three paragraphs
separated by some visual space.
So that's one tag that
might be useful as well.
Other tags that might
be useful are, you might
imagine wanting to
create headings on top
of different sections of your web page.
You might want a big title at
the top, and then subsections,
and subsections within that.
To do that, HTML has a number
of different heading tags
that you can take advantage of, too,
the largest of which is called h1--
h for Heading and 1 for
the number one biggest one.
And I might say, here is
Title of my page, for example.
And so here I have an h1 tag, and
if I go back, refresh the page,
I now have a big heading, title
of my page, at the very top.
In addition to h1, there are
also smaller headings as well.
As you might guess, the
next smallest is called h2.
So I might have h2 as
a first subsection,
and I might have another h2 later on
my page that is a second subsection,
where now I have an h1 tag at the very
top, a title of the entire web page,
and then a number of h2 tags
elsewhere in the page that
are going to define subsections.
So I can go back, refresh,
and they're right.
I have a big title at the very
top, I have a first subsection,
followed by some paragraphs,
and then a second subsection
followed by a paragraph as well.
So h1 makes the big title at the
top, h2 makes the smaller ones,
and there are smaller ones as
well-- h3, h4, h5, up to h6
for different levels of titles that you
might want to display on your web page.
So now we've been able
to create web pages that
have titles, that have paragraphs, that
have different-sized headings, links,
and images.
Let's take a look at at
least one other feature
that we might get out of HTML,
which is that of creating tables.
Oftentimes on a web page, you want to
represent data in rows and columns,
and tables are a way to do that.
We'll go back here.
I'll create a new file,
call it table.html.
Again, the structure,
I'll copy from index.html.
And inside the body of the web page
now, I'd like to create a table.
To do that, I'll create a table element.
And so now, what goes inside of a table?
Well, every table really is just
composed of a bunch of table rows.
And so how do I create a row?
It turns out in HTML, there's an HTML
tag called tr, short for Table Row,
that is going to represent
one row of the table.
So I'll type tr to create a table row.
And now, what goes
inside of the table row?
Notice how we're nesting HTML
elements inside of one another.
Inside the body, we have a table.
Inside the table, we have a table row.
And inside a table row,
we have individual cells,
cells that presumably are storing some
kind of table data, the actual data
that we want to display
inside of the table.
And so for that, to show
table data in a single cell,
we're going to use td, for Table
Data, to show one individual cell.
And so here I might have
cell 1, and you might
imagine I have another cell in the
same row, cell 2, and then a third one.
And maybe my table has multiple rows.
Right now, I have one row, one
tr element, inside of which
are three cells, but I
could create another row
inside of which are more cells--
cell 4, cell 5, cell 6.
And so now what I have is, inside the
body of my web page, I have a table.
Inside the table, I have two rows,
and inside of each of those two rows,
I have three cells.
So now if I go back, let's go ahead
and take a look at table.html,
and what we'll see is we
have a table in two rows,
with each row containing cell
1, cell 2, cell 3, and then
beneath that, cell 4,
cell 5, and cell 6.
Of course, in practice,
you might-- you want
your table to be styled a little
bit, maybe having a border,
maybe having different colors,
maybe having a little bit
more space around each of the cells.
And we'll see that, when we start to
talk about how to style our web page,
but recall that HTML is really just
describing the structure of the page.
And the structure of
this page is two rows,
each with three cells, as we described
using our table tr and td elements,
and this is what the result of that
is, when we take a look at table.html
as by viewing it inside
of a web browser.
All right, so far, we've been
able to create HTML pages
that users can look at in
their web browser and view.
But, so far, there hasn't
been any interaction.
The user hasn't been able to
interact with our pages in any way.
Let's change that by
creating a new file now
that we'll call form.html, where
I'm going to create an HTML form,
a place where users can
actually input information
into the form in a web page, and then
press a button to submit the form,
for example.
I'll use the same basic
structure that we've been
using with an HTML tag, head, and body.
And, inside of the body now, I'll add
a form, using the form HTML element.
Inside of the form,
let me create an input
tag, that is going to be a place
where a user can type in some input.
And I'll go ahead and say that
the type of this input is "text".
So I want the user to type in some text.
And then I'll say, input
type="submit", value="Submit form".
So what I've done here is I've
said that, inside of this form,
there are two parts, one place
where the user can actually
type in some text in order to
input information to this form,
and, next, an input
of type submit, which
is going to take the form of a button
that a user can click on in order
to submit this form.
And what's going to be
displayed on that button,
well, its value is the
words "Submit form", and so
that is what's going to be
displayed on the button that
shows up inside of this form.
So let's go ahead and take a look
at what form.html looks like.
Inside of form.html, you'll notice here
that I have exactly those two parts.
I have a text field, where
I could type something in.
I could type in Brian,
for example, my name,
and then I can click the Submit
Form button to submit this form.
And when I click the
Submit Form button, you'll
notice that nothing actually happens
because, right now, my form isn't
doing anything.
So let's try and create a form
that actually does do something.
In particular, let's
try and create a form
that allows us to search for
something using Google, for example.
What actually happens when I
try and perform a Google search?
If I go to google.com, and I
type in something like cats,
let's take a look at the URL
that I'm actually taken to.
I'm taken to google.com/search?,
and then a whole bunch of other
information.
But the only relevant piece of
information here, as you might notice,
is this q=cats, right?
Cats is the word that I searched
for, and the q here probably
stands for Query, meaning the
query that I searched for is cats.
And, in fact, I can even ignore
all the other information.
If I just look for search?q=cats,
and get rid of everything else,
and press Return, this will have the
effect of searching for cats on Google.
So what is the syntax?
What is the question mark?
What is the q=?
What is cats?
Well, it turns out
that web pages can take
what are called the "get"
parameters, parameters that specify,
when I try and visit
this web page, here's
some additional information
about the request.
And here, when I go
to google.com/search,
the question mark here means that
there are going to be some "get"
parameters that are incoming.
And here, q=cats means that this
form takes a parameter called q,
standing for the Query, which
in this case is equal to cats
because that's what I tried to
search for when I typed in cats
into the search box in Google, and
I pressed the Search button in order
to actually search for it.
So how are we going to re-implement
this behavior of trying
to search for something on Google?
Well, it turns out that I'm going
to go ahead and take this URL,
google.com/search.
That's where I would like my form
to submit to when I submit the form.
So I'll go back to my
form.html, and here,
this form, in addition
to just being a form,
is going to have a particular action.
The action of a form is
where the form should
be submitted to after I click
that button called Submit Form.
And, in this case, what I would like
to do, in order to re-implement Google,
effectively, is to say that,
when I submit the form,
I would like the action of this form
to be "https://www.google.com/search".
When I submit the form, I would
like to submit this to /search,
and the method I would
like to use is get.
You might recall from when
we were talking about HTTP,
that every request has a particular
method, and "get" just means,
get me a page.
And, in this case, when
I'm using method="get",
I'm trying to get the
results of a Google search,
but I also need to specify
that additional parameter--
google.com/search, q=cats.
Q stands for query, and this
is where we were specifying
what we're actually searching for--
in this case, searching for cats.
And I would like it so that on my page,
the user can type in whatever it is
that they want to search for,
click the Submit Form button,
and then be taken to google.com/search,
q= whatever it is that the user typed
in.
And it turns out, in HTML, if we want
to specify a particular "get" parameter,
we just need to make sure that
the input field that corresponds
to that parameter has a name.
And so here, I'm going to name this
input field by giving it a name
attribute, in addition to a type
attribute, which, in this case,
will just be q because q is the
name that Google is expecting
on google.com/search.
So all in all, what does this mean?
Well, it means that I have here
a form, that when I submit it,
is going to take me to
google.com/search, using the "get"
request method.
And it's also going to add to it
a "get" parameter called q, which
will be equal to whatever text the user
typed in into this particular input
field.
So we'll have an input
field where the user will
be able to type in what it is
that they're searching for,
and when they click on Submit
Form, they'll hopefully
be taken to Google's web page.
Let's try it out.
I'll go back to form.html.
And so here, we have a
search form, where I can
type in something that I'm looking for.
I'll go ahead and type in cats,
and I'll press Submit Form.
And when I do, you'll notice that I'm
taken to google.com/search?q=cats,
and now I'm taken to Google's search
page that displays the results
for cats.
So using this very
simple HTML form, we've
now been able to recreate
effectively the home page of Google,
that lets you type something in
and click a button that takes you
to Google's search results page,
all by using these features of HTML,
creating a form element, and
an input element as well.
So we've seen now a lot of
different HTML elements.
We've see an HTML head,
title, body, in addition
to HTML elements that let
us create images, and links,
and tables, and forms, and
more, but there are even
more HTML elements than just that.
In fact, if you're trying to
add something to your HTML page,
odds are you can do a Google search
for, what is the HTML element that
will let me do this?
And you'll be able to
find HTML elements that
will let you add other features
to your web pages as well.
Of course, right now, our
web pages are pretty simple.
They're usually just a white background
with text, all in the same font,
all left-aligned on the left
side of the web browser.
So what we might like to do is add
some styling to our web pages as well,
but that's to come next.
For now, this was HTML.
