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.