[MUSIC PLAYING] DAVID MALAN: Welcome everyone to web
programming with Python and JavaScript. My name is David Malan. BRIAN YU: I'm Brian. DAVID MALAN: And today we're going to
give you a quick overview of the course and then dive right into
the course's material. So this is meant to be a class taken
after a course like CS50, which is the colleges and
the extension schools introduction to computer science. But even if you haven't taken
that class anything approximating that is certainly fine. We assume only prior programming
experience in some language. And what we'll then do
is assuming you know some of the basic constructs of most
any procedural or imperative language, we'll fill in the blanks along the way
both with Python and with JavaScript. Neither is actually assumed. And what we'll do over the
course of the next several weeks is first dive into Git. So you might know Git if you've
used it before as a version control software, whereby you can maintain
multiple versions of your software. But these days it's actually
used for much more than that. People will use it not only
for versioning their code and for collaborating
with others, but also for deploying their code
from their local machines to some staging server to some testing
server and ultimately to production. So it's actually become
quite an integral tool when it comes to actually
deploying your code to the cloud, so to speak these days. Thereafter, we'll transition to HTML
and CSS, with which you might already be familiar, but we're focused on
some of the more modern perhaps some of the more advanced features
of both of these languages HTML5, specifically the
latest incarnation of that, as well as CSS and various
selectors that you may or may not have used before. But also toolchain, something called
SAS that allows you to programmatically generate and maintain more readily,
more complicated style sheets especially as your web apps become
themselves more complicated. We'll then introduce
Flask, which is going to be a very popular
framework for making web based applications using Python. And it's generally
considered a micro framework, which means there's not all
that much complexity to it. It doesn't try to do too much. It really just tries to solve some
very common problems so that most of your effort when
writing a web app with it isn't focused on how do I
learn Flask and how do I build with this
architecture, but rather how do you implement your ideas
without reinventing the wheel? And so you'll get that out of
a micro framework like this. We'll then introduce a bit of
SQL, or structured query language with which you can query databases
and store your actual data. And we'll look at perhaps
more complex queries than you've seen or used in the past. We'll talk about the idea of API, or
application programming interfaces. These can be both your own that you
build for your own applications to use, or as you may have used them
already third party APIs. Data feeds and functional behavior that
you can actually access over the web or from some other server that some
other company or person has actually made available to you to make
your applications all the more interactive or featureful. And then we'll introduce JavaScript,
which you might have used or tinkered with before. We'll introduce the very
latest something known as ES6 or ECMAScript 6, which adds a
number of features many of which, or most of which are
supported by today's browsers. But we'll also talk about
some of the pitfalls when you try to use some of the
latest and greatest features and what it might mean to ensure as
through transpiling or other techniques that your code will indeed work on any
number of mobile devices and desktops and laptops these days. And we'll also talk about front
ends, the idea of actually building a front end user interface using
JavaScript talking about techniques like Ajax or SPAs single
page applications these days, particularly modern paradigms with
which folks are implementing today's web applications. Also looking at things like
graphics and animation as it can be implemented in JavaScript
and inside of a browser. And then we'll look at a
heavier weight framework something known as Django, which is
similar in spirit at least at first to something like Flask. Just makes it easier to get
going building web applications, but comes with so many more features. The proverbial kitchen sink. So when you get a little
tired in life of implementing an administrative interface to your
web application, or a log in interface for your application, or any
number of things that a lot of us probably use in various tools. You can start to lean on these
larger scale frameworks that just come with many more features. And as such, you might have to
comfort of it more to its conventions, but you'll end up writing a lot
less code than you would otherwise. So we'll sort of graduate
to that level of framework. And then we'll talk about
a world that's generally known these days as DevOps, development
and operations kind of united in one, in the context of testing like
making sure your code actually works and how you can think about that and
how you can actually do that when writing your code. And then CICD continuous integration
and continuous development, which is just a fancy way of
saying setting yourself up for success with the right tools
and with the right scripts, the right environments so that when you
run a command on your laptop or desktop the code actually goes somewhere
and it goes not only into a code repository to be saved and versioned
and shared with other people, but you can test it automatically
and continuously so to speak. And you can even deploy it to
the cloud simply by having set up some of those steps in advance. So if you're already in the habit now
of deploying your applications by kind of dragging and dropping them to an
FTP server or using some web interface or copying things, all of this now
can be automated in very robust ways especially that are conducive
to collaboration with others. And then toward the
end of the term we'll talk about some higher
level issues that will inform how you go about
building web applications after the scope of the class. Scalability. So topics like DNS and
load balancing and how you think about anticipating
that 101st user that might not fit on just one server. And so if you now have
to have your app on two or three or more different
servers, how do you have these servers
talking to one another and how do you share data among them? What's going to get easy? What's going to get hard as you
scale to more and more users? And then throughout the semester,
we'll talk about topics of security. What you want to do in
terms of best practices to avoid getting exploited
in some way, but we'll also culminate that discussion in
a focus on security at the end so that when you go
out into the real world or back into the real world
after the courses lessons, you actually are mindful of
especially in the languages and tools that we'll use throughout
the semester of what you should be particularly mindful of. And then as punctuating the whole
semester will be a number of projects. So four assigned projects where we
prescribe the specifications of some app that we'd like you to build with
the whole course's staff and support structure. And then one final project that will
culminate this semester, whereby you'll be invited to design and
implement your own tool that's a genuine personal or
professional interest to you that somehow draws
upon the course's lessons. And let me pause there and see before we
forge ahead if there are any questions. Anything else? Yeah. AUDIENCE: So HTML, CSS,
JavaScript-- suppose I don't have any
experience on those things? DAVID MALAN: Good question. And so what then? So if you don't have any experience
in some of the alphabet soup that we put up already
like HTML and CSS, JavaScript and/or Python,
for the most part that's OK. I would say that they'll be a
bit of a more of a learning curve early on for you. But we will take care to
provide students like you with any number of
resources supplementary so you know where to fill in any gaps. And we'll also introduce these
topics in the class itself. So all of the topics that we
just gave an overview of we'll introduce and dive into in the class. It will certainly be advantageous
if you've seen them before, but each of the projects and by way
of the courses sections and lectures where you have all the
material you need to succeed, even if most of these
topics are brand new. So not to worry. Other questions? Yeah. AUDIENCE: [INAUDIBLE] purchase
any of the software [INAUDIBLE]?? DAVID MALAN: No need to purchase
any software whatsoever. All of the tools that we'll
use, all of the libraries, frameworks, APIs are freely available
now and after the class as well. Other questions? No. All right. So first on the agenda
today is version control and Gits in particular,
a tool that you'll use not only to version your
code and share your code, but also ultimately deploy it. So without further ado allow me
to turn things over to Brian. BRIAN YU: Thank you very much. All right. So the first topic that we're going to
be talking about today as we approach the world of web programming
and web development is thinking about when
we're designing projects, how do we keep track of
different versions of our code? How do we collaborate with other people? How do we make sure that if we
make a change and that change doesn't work that we have an easy way
to go back to older versions of our code and make sure that we have
access to those as well? And so all of that falls
under the larger umbrella of what's called version control. And out there, there are some number
of different version control software that people are using on a day to day
basis, but one of the most popular is a piece of software called
Git, which is a version control tool that we're going to
be using in this class and that people often use in industry
in order to help maintain and manage different versions of their code in
order to keep track of their projects and make sure that
everything is organized and that they're able to
effectively collaborate with other people along the way. So we'll take a moment to step back
and talk about the different things that Git does for you at a high level. And then we'll dive in and
look at the actual commands that you would use in order to
run Git, understand how it works and actually make use of it. So the first thing that
Git's good at doing is keeping track of different
changes to your code so that if you're making
changes, you don't only have access to the latest
version of your code, but if you start out
with a particular file and then you make changes
and add another line to it, you remove a line to
it later you can keep track of all of those different
versions of those files such that you know the
history of your project and how it's developed
from the beginning all the way up until where you are now. So that's one thing Git's
particularly good at. One other thing the version
control is very useful for is synchronizing code
between different people. Very often in the
modern world you're not the only person working alone on your
projects independently, but rather you and one or more other
people are working together collaboratively trying to work on
a project together and making sure that you and the people you're working
with stay in sync in terms of your code is often a challenging task. And what Git, another
version control softwares like it do is help to make that
process a little bit easier. So you can imagine that maybe we're
storing a version of your code up in some remote server somewhere. And Git what will allow
you to do is make sure that you and someone you're working
with both have access to that same code. And when you both make independent
different changes to that code there's an easy way via which
Git can merge those changes back together so that there's
a central version that has all of the changes to which both
of you will then have access to. So synchronizing code
between different people and making sure that everyone
has access to that code base is something that is also useful
with regards to version control. In addition, Git is also very
good at letting you test your code without losing your original copy. So if you have a working program
or a working web application and you want to make some modifications
to it in order to add a new feature but you're worried that
adding that new feature might break some prior feature that's
already existing within your web application, Git's very good at
letting you test your new changes and experiment with your code without
losing track of that original. And only once you're happy
with the original code that you have can you then merge
your new changes in with the existing changes so that you never lose a
working copy of your web application And finally, one last
thing to Git is very good at is reverting back to
old versions of your code. So you've been working
on your project, you've made some number of
modifications or edits, and you realize that your most recent
version of your program doesn't work, you want to go back to some
previous version of your code. Git is also very good at
allowing you to revert back to old versions of your code. And we'll see examples of
all of that in just a moment. So that's sort of the high
level overview of what Git is and how it works. And in this course we'll also be
using another service known as GitHub. And GitHub is just a website
whose purpose in life is to store Git repositories
on the internet. It's to give you and people
all around the world access to Git repositories
on the internet, such that you can look at repositories
that other people have created and contribute to them
or use them, and such that you can work on your own
projects, push them to GitHub so that your collaborators or other people
on the internet can also see and use and work on those projects as well. And so one of the first things you'll
do in this course is go to GitHub. And if you don't already have
an account already you'll create a free GitHub account. And once you do, I'll show you
what GitHub's interface looks like. We'll just go to get github.com. And so this is what github.com
might look like once you log in. And what we'll do right
here is we're going to first create a GitHub repository. And repository is just a
fancy word for the place where we are going to keep track of
all of your code and all of the changes to your code. Think of it as like a
central storage place where we're going to store your project. So in the upper right of GitHub's
screen we have the plus button and we can go to the new repository. And this takes us to the page where
we can create a brand new repository. In this case, I'm going to name
the repository Lecture Zero. And I'll go ahead and just
click Create Repository. And that creates a new repository
for me that stored on GitHub. Right now it's not on my computer
yet, but we'll see in a moment how we can take this repository which
is right now empty but on the internet and download a copy of
it to our own computer. And so that's where we start to
introduce some of the command line interface of Git and the commands
that you might run in order to use it. So after you've installed Git, one of
the first commands you'll want to learn is git clone. And the git clone command
has just one purpose. What it does is it takes a
repository stored somewhere else like on some server like GitHub. And what happens is that when
you run git clone followed by the URL of that GitHub repository,
that remote version of your code will be downloaded onto
your computer so that you have a copy of the repository
on your own computer. So I'll show you what
that looks like now. We'll head back over to
the GitHub repository that we just created over here. And what you'll notice is that
GitHub provides me with this URL. This is the URL of
this GitHub repository. So if I go ahead and
copy that to my clipboard and open up a terminal window,
for example, what I can do is type git clone followed by that
URL, just pasting it right in there. When I press Return it already
exists because I already created it. So I'll go ahead and remove
the old version of that. Sorry about that. And we'll do git clone
pasting in that repository. And it's giving me a warning. Warning you appear to have
cloned an empty repository, which is to be expected because the repository
that I just created was in fact empty. And I can CD, CD for
change directory, if you're unfamiliar with the
command line interface into that Lecture Zero directory. And now I'm inside of that
Lecture Zero directory. Which if I take LS for
list or list all files in that directory nothing shows up. So this directory is currently empty. So let's go ahead and fix that. Let's add some code to this repository. I can use the touch
command where touch is just a command that if you're unfamiliar with
it can help to create a brand new file. And I'll create a new
file called hello.html. And I'll open up that
file using a text editor. In this class you can use
whatever text editor you wish. But common ones include
Adam which I'm using here, but also Sublime and VS
Code and many others. And I'll just go ahead and create
here a simple HTML web page. No worries if you
haven't seen HTML before and this looks unfamiliar to you. Later on during tonight's
lecture we'll dive in more depth into what all this
code means if you haven't seen HTML before to understand what's actually
happening when I create this web page. But in essence, what I'm
going to do is create a website whose title is my web page and
whose contents just say hello, world. All right. So there I have it, a
simple HTML web page. Again, not to worry if you haven't
seen this type of thing before. But now I want to take
that code and save it. I want to make a what's called
a commit to my repository to say these are changes that I want
to save because one day I might want to refer back to them, for instance. And so the next thing we'll
need to know is git add. And the git add command
basically means we're going to take some number of files,
one or more files that we've changed and tell Git that these are files that
we want to include the next time we make a commit, to the
next time that we save a version or a snapshot
of the current repository. So for instance, if I
say git add followed by some file name, what that's going
to do is tell Git to track that file. That this file is a file that
I want to track the next time that I save a copy of the repository. So what does that actually look like? If I do ls right now, again, list all
the files in the current directory, you'll see that I have hello.html,
that file that I just created. And what I'll do now is
I'll say git add hello.html. To mean, I want to
take hello.html, and I want to include that the next time
I save a version of this repository. Nothing appears to have
happened, but that's OK I have now added hello.html
as a file that I want to track the next time I make a save. So what does that process look like? That comes in the form of a
command called git commit. Commit it just fancy way of saying
take a snapshot of the repository in the current moment and save it. And so how that would work is I would
say git commit followed by a flag dash m, m for message, and
then in quotation marks some English message describing what
it is that I've changed in this commit, describing what it is that's
happened in this change that makes it different from
previous versions of the code. This is useful because
as you begin working on a project that has dozens or
hundreds or even thousands of commits, later on you can refer back
to this list of messages that you yourself have written
describing what happened in any successive change, so that you
know where to look if you're trying to find a particular commit, or
a particular change that you made to your code at any particular time. So when you run git commit dash m
followed by a short description of what you've done, what that'll do is have
Git save a new version or a new snapshot of your repository in
that moment keeping track of all of your old versions as well. So that's git commit. And we'll take a look at that now. I'll do git commit dash m for message. And the message that I want to include
in this case is just added hello.html. That's what I did. I'll press Return. And what you'll notice is that Git
provides me some helpful information about what it is that I just did. It said one file changed at nine
insertions because I added a new file and that file had nine lines in it. And so now Git has kept track
of the fact that in this commit, in this save I have added
this hello.html file that has the contents that you
just saw a moment ago. So that's me making a save
to the contents of that file. Next command that's often helpful
to know and to be familiar with is git status. Git status is a simple command that
effectively just tells you what's currently going on in your repository. If you forget whether you've made new
commits since the last time you checked from GitHub, if you forget whether
you've made new changes that you haven't committed yet, git status is
an easy way to just run git status and see the current status of what's
going on inside of your repository. So let's take a look at the
code that we've been working on. We'll go ahead and run git status on it. And what we see is on branch master-- don't worry about branches too much. We'll dive into more depth
about that next week. But importantly, we'll see that
we are based on origin master and right now it says we
have nothing to commit. So git status effectively tells us
the current status of the repository, tells us what's going on with our
repository at any given moment. So next up we've made these
changes to our repository. The next question is, now how do we
send those changes back to GitHub? GitHub's keeping track of our
repository on the internet and we've made changes to the repository
adding hello.html on our computer locally, but that isn't
yet reflected on GitHub. If we were to check the GitHub
page for this repository it would still currently be empty. So how do we then send
those changes to GitHub? That's called a push, where we push
our code from our local computer to the repository that's stored
somewhere on the internet. And so when we run git push,
that causes those changes, whatever changes that we've
made to our code locally to be pushed to the remote server
so that GitHub is now able to keep track of those changes that we've made. So that is git push. And I'll go ahead and try
and show you that now. If I try and run git push it pushes
those changes to the GitHub repository. And now if I go back to here, this
GitHub page for student50/lecturezero, which is the repository page on
GitHub, and refresh that page you'll notice that now
there's contents here. Now I have an hello.html file that's
located inside this repository. And if I click on it then you can see
the contents of that hello.html file that is now stored on GitHub as well. So I've now taken my changes that
were just on my computer before and I'll push them so that they are on
the internet as well for people to see. So that's git push. Next up is sort of the inverse of that. Git pull. What if someone else has been
working on your repository, has made changes to it,
and pushed those to GitHub? And now you want to download the
latest version of that repository. You want to download the latest
changes down onto your computer locally to take a look at it. How would you go about doing that? That's by a different
command called git pull. When you run git pull, if
there are other changes that have happened on the remote server,
notice that here locally I've made one change, but someone
else on GitHub for instance has pushed some second change
that's been made to the code. If I run git pull, that causes
any of the latest changes that have been made on the remote server
to be downloaded onto my own computer so that I now have a working copy
of the entire history of what's been going on with my project so far. So that's git pull. And we'll show you a
quick example of that now. If I go back into the GitHub
interface there is sort of two ways to make changes to the code
that you see here on GitHub. Either I can change that code on
my own and my code on my computer, or actually GitHub's web interface
actually has a button here that lets me edit this code. So let's say I wanted
to add another line that says hello, again, for instance,
that I wanted to add to this file, I can scroll down and go ahead
and commit those changes. Again, commit is just a fancy way
of saying save or take a snapshot. And when I commit those
changes what I see is that the contents of my web
page on GitHub show hello, world and also hello again. But if I were to check my
computer I just have hello, world. Just the one sentence. That change has been made on GitHub. It hasn't yet been reflected in
my version of the code that's stored on my computer. So what can I do now? I can run git pull to say pull down any
of those latest changes from GitHub. I press Return. And notice that it says hello.html. Two changes, one plus and one minus. One insertion, one deletion. Git's not quite smart enough to
know that I actually took a line and changed it. As far as Git is concerned
I removed that old line that just said hello, world,
and added a new line that said hello, world, and hello again. So if I check my code now going back
here, I see that it's now updated. My local version on my computer now
says hello, world, and hello again because that was the change that I
had just pulled down from GitHub. And so via pushing and pulling
code can you and other people that you're working with
collaborate together on a repository and make sure that you're keeping
track of any changes that you make. But what can go wrong here? What might happen and cause things
to not seem as simple as they are? Well, what if I decided
to make a change here? Hello a third time. So I make that change and I
decide to OK, git add hello.html. I want to track that. And git commit, add a third line. So now I've added that third line to
the contents of my hello.html file. But what if someone else on the internet
who has access to my GitHub repository decides to edit it differently and
decides to say hello, hello, hello, and save those changes
by committing them? Now the online version says hello,
world, hello again, hello, hello, hello, but in my local
version of the code it says hello, world, hello
again, hello a third time. And if I try now to pull
this code from GitHub it's not going to be as simple as it was
last time of just updating the changes because Git doesn't quite know
which change I actually want. Here I've added a sentence online
that's a different sentence. So we're going to need some way
to reconcile those two things. And so that's where we introduce
the concept of merge conflicts. Git will try whenever it
can to automatically take any changes that have been made and
combine them together automatically for you without you needing to
worry about what's going on. But in some cases, if
you and another person have both made changes to the
same lines of the same files you may run into a merge
conflict, which is what happens when you try and run git pull. But what happens is that
there's some sort of conflict. The pull can't happen. And so what you'll see is a message
that says automatic merge failed. You need to fix the conflicts
and then commit the results. So what does that look like? Well, what will happen is that if you
open up the file with the conflict you'll see something that
looks a little bit like this. You'll see a file with a
bunch of less than signs and then HEAD, some lines and
then equals, equals, equals, some more lines and then this sort
of random long sequence of numbers and letters. It might seem a little
bit arcane at the moment, but we'll break down
what this actually means. So when you look at a
file like this, which results whenever there is a
merge conflict produced by Git, there are a couple of
things to keep in mind. One is that anything between HEAD and
all the equal signs are your changes. The things that you did on your computer
before you tried to do the pull. Anything between these
equal signs and the greater than signs here, these
are the remote changes. The changes from GitHub that you
were trying to pull down that were somehow in conflict. That these two lines couldn't
automatically be merged together. And this long sequence of numbers and
letters is the conflicting commit. Whenever you make a commit in Git,
Git represents that using a long hash. Just a long sequence
of numbers and letters so that you can uniquely
identify one commit out of a series in a history of commits. And this long sequence
of numbers and letters is just the name of
that conflicting commit. It is that commit hash of the
one that caused the conflict. So what do you do in
a situation like this? All you need to do is remove
all of the lines you don't want. Remove all of those less than,
equal than, greater than lines and also remove whichever
part of the code you didn't want leaving only the version
that you want to be merged together, and then get rid of any
that extra white space and then you can commit the result. So I'll show you what that looks like
if we go back over to the computer here. Recall again, that locally we
had three different sentences. And online we had three
different sentences, but the third sentence differed. So now if I try and run a
git pull what you'll notice is that we see exactly this. We tried to automerge hello.html,
but there was a conflict. There was a merge
conflict in hello.html. The automatic merge failed. We need to fix the conflicts
and then commit the results. So if I take a look at
hello.html, my text editor Adam is automatically highlighting
things in certain colors for me. But what you'll notice is you see
this less than, less than head, and then this version, which was
my version, hello a third time. And then this version down here,
which is the version from online. Git doesn't know which one
I want, so I need to pick. And I'll just say you know what? Let's use the version that I had. So I'll go ahead and get rid
of all of these extra lines so that I'm left with
just the version that I want, the one that says hello, world,
hello again, hello a third time. And if I then commit
those changes, now Git knows because I have
told it this is how I want you to resolve the merge conflict. Now Git is aware of how to go about
merging the two different versions of that repository together
in order to come up with one version that is
going to work for everyone. So that's the process of
resolving merge conflicts. It can seem a bit complicated at first,
but as you start to deal with them you'll start to get a sense for
where the different changes are and how to go about resolving them. And it's something you may run into
as you go about the process of working on your project. A couple other useful commands
that are useful to know. One is git log. What git log does is effectively
just show you a history of all of the commits that you've made. If you run git log while you're
inside of a Git repository, you'll see a list of all the
different commits that have been made. Notice again that you'll see each commit
is marked by a unique commit hash. Just a sequence of numbers and
letters describing that commit. You'll see who made the commit,
when that commit was made, and also a description
based on that message that you provide whenever you make
a commit of what it is that happened in that commit so that you
can see the history of what's been going on in your repository. So that's git log. And then one other command that's
useful to know is git reset. So we talked about before
if you've made some changes, realize that you messed
up and you want to go back to the way things were before,
you can run one of these commands if you do git reset --hard, followed
by a commit hash like the numbers and letters that we saw before. That will reset your
whole repository back to that version, whichever version
was marked by that commit hash. And likewise, if you run something
like git rest --hard origin/master, origin/master is a fancy way of saying
the version of the repository that was the origin of this
repository where I got it from. In other words, if I cloned my
repository from GitHub then running git reset origin master is going to
reset the contents to my repository back to the version that was
previously on GitHub so that then I am able to see whatever it was originally. So in this case, if I
run git reset --hard followed by the commit hash of
some previous version of the code, what that's going to do is reset
that code back to that older version, and now my repository is
back to a previous version such that I can correct my mistakes and
then continue working appropriately. And so we'll show a
quick example of that. So first of all, commit my changes. So just now I fixed the merge
conflict and run a quick git status. Oh. I need to add the files
before I commit them. So that's a good lesson to be learned. The way Git effectively
works is that we first need to add the files to what's
called a staging area or an index. Just telling it these are files that
I want to track in the next time that I make a commit and
then you commit after that. So if I git add hello.html and then
git commit, fix the merge conflicts, that will resolve the issue. And if you're looking to simplify
these two commands into one simpler command know that you can
also do a command like git commit -am, where the a stands for add to
both add files to the staging area and commit them all
together in one command. So go ahead and press Return there. And now if I run a command
like git log, what you'll see is a history of all the different
commits that I've made now. Here was me fixing the merge commits,
here was when I updated HTML online, here was when I added a
third line to the repository. So I see the history
of all of the different commits that I've made
to this repository. And let's say I wanted to reset
back to an older one of these. I wanted to reset back to this original
one where I first added hello.HTML. I can take this commit
hash, the commit hash of when I first made
that change, or even just the first couple characters
of the commit hash is usually sufficient to
be able to identify it. And I can run a command like
git reset --hard followed by that commit hash by
pasting it in there. And now I've reset the head, reset
where I am in this repository back to that older version. And now if I check the contents of
hello.html, it just says hello, world. Back to that very first
version of the HTML file that I created way back when
I first created the repository. Yes, so Git keeps track of
all the different snapshots. In fact, if you run a
command like git rest log, just a log of all of
the different references that Git has kept track of you
can see all the different changes that are still there. So they're accessible, but
they're just not present in the current version of the
repository as you see it just there. Yeah. A question over there. AUDIENCE: Once you run the [INAUDIBLE]
what version of the file [INAUDIBLE]?? BRIAN YU: GitHub was untouched. So the question was, what
happens to the remote repository, the repository on GitHub when
I reset something locally? And the answer is that any
changes I make to my computer, to my version of the
repository on my computer never affect what's going on
online unless I try to push those changes to GitHub for instance. So if I really screw things up, mess
things up on my computer completely GitHub's version is still going
to be the way it was before. And if I really wanted to I
could just download a new copy by cloning the old version from GitHub. If I check now, even though I
reset my version on my computer it still has hello, world, hello,
again, hello, hello, hello, because I have never pushed any
new changes to GitHub after that to tell it to make any additional
changes after this point that it knows about. So GitHub doesn't know about any of
those additional changes just yet. Question back there. AUDIENCE: Yeah. So does Windows or a Mac OS [INAUDIBLE]
built into it so [INAUDIBLE]?? BRIAN YU: Great question. The question is, is Git built
into Windows and Mac OS, or is there something
special you have to do? In many cases, you will
need to install Git. When we release project zero you'll find
that in the project zero instructions, there are instructions for how to
get set up with a GitHub account and how to install
Git onto your computer and configure it correctly so
that it can talk to GitHub. But yes, typically you'll
need to install it. It's free software that you
can install on your machine and it will prove helpful
as you go about starting to work on version control. Yeah. AUDIENCE: Do merge
conflicts only happen if you were trying to pull from the
repository and it's different, or is there any situation where
I'd be pushing changes and not running to a merge conflict? I don't know if that makes sense. BRIAN YU: Great question. So the question is, is
pulling the only time that you might run into merge conflicts? And the answer is no. It's the only one we've seen so far. But any time you are trying to take
two different versions of the code and combine them, there is a possibility
that you'll run into a merge conflict. And so later on in this
course, we'll take a look at additional features
of Git like branching, where you can keep track of multiple
different versions of your repository at once so that you have your
current version of your repository, but you also have a different
branch on which you're working on some new feature
and maybe a different branch where you're working
on some other feature. And any time you want to merge
two branches together to say, OK, this feature is done. I want to bring it back into the
master branch or the official version of the code, so to speak. Then there's possibilities
for merge conflicts there. So pulling is one instance in
which conflicts can happen, but certainly not the only instance
in which those conflicts can happen. Yeah. One more question. AUDIENCE: Let's say I entered
in multiple files [INAUDIBLE] should I run Git [INAUDIBLE]? BRIAN YU: Great question. So the question is, all
right, so far in this example we've only ever been dealing
with one file, hello.html. What happens if I have multiple
files that I'm working on? As it might happen if I'm
working on a larger project, how do I deal with that? Well, the answer is that you
need to add any of the files that you want saved in that commit. And so you could you git add file one,
git add file two, git add file three. You can also do git add star, where
a star just means add everything. And that will add all of the
files that you have unsaved. And the advantage of
doing things file by file is if you've edited three
files, but one of those files is unfinished but the
other two are ready to go, you can just add those two
files and commit those changes. You only ever need to commit one
after you add multiple files to say, I want to save the changes
I made to these two files, but the changes I made to the
third file aren't quite done yet and I didn't want to
add or commit those. And so separating the add and commits
step gives you that kind of control over your repository to
say, these are the files that I want to keep track of in the next
change that I make to the repository. So that was effectively a
short introduction to Git and we'll dive into
more detail about Git later on as we progress
throughout the course. But we'll go ahead and take a
short, maybe five minute break now. And when we come back, we'll
start talking about the HTML code that we actually saw before. Diving into HTML, what it is,
how it works, and also CSS, how we might style our
web pages to make them look a little more
aesthetically pleasing. So all that when we come back. All right. Welcome back. So now that we've taken
a look at version control and how we might go about
versioning our project and keeping track of different
versions of our project as we go along, we'll dive right now into
the actual web programming aspect of the course starting by just
taking a look at HTML, or HyperText Markup Language. This is a language via which we're going
to be laying out the structure of a web page such that when a user
opens up in their web browser, their web browser, whether it's Safari
or Chrome or Firefox or some other knows how to understand and interpret
that HTML and display it as a web page to the user. So we'll take a look
at a simple example. In fact, we'll just take
a look at hello.html. Very similar to what we've just been
working on with that Git repository. And we'll now break this
down and sort of get a feel for what's going on
in terms of what we see here and how this is going to translate
when a web browser reads code like this and tries to interpret it as a web page. So up here on line one, we see this sort
of funky angled bracket !DOCTYPE HTML. This first line just goes mean
something along the lines of HTML has come in a number
of different versions. It's had a bunch of different
standards where people specify, here's what's included in this version
of HTML and this new version of HTML. And the latest version
of HTML is called HTML5. And the way that a
web browser knows when it gets a web page, which
version of HTML it's using is by taking a look at that first line. So that first line
saying doctype HTML is our way of telling the web browser that
this web page is written using HTML5. So now let's take a look at
the rest of this web page. And what you'll notice
throughout this web page are a whole bunch of what
are called HTML tags. Those are these keywords that
begin with an angled bracket and end with an angled bracket. Right here we see the HTML tag. And all that tag means is that angled
bracket HTML ending angle bracket means this is the start of the
HTML content of the website. And this will go all the way until here
on line nine where we see a tag that is angled bracket /HTML, where that slash
just means this is the end of the tag. So what line two and
line nine sort of tell us here is that this is the start of the
HTML content of our web page and line nine here is the end of the
HTML content of our website. And everything in between is the
actual contents of that website. And if you take a look we've
divided that content to the website into two parts. Up here on line three we've
started the head of the website. Angled bracket head angled bracket. That's the start of the head tag. The head of the website is usually
used for a metadata, information about the page that
doesn't really appear in the main contents of
the page, but is used to give the browser important
information about how to go about displaying that page or
other important information about it. In this case, you see
we have a title tag here where the title in between
the start of the title tag and the end of the title tag
we've included text, my web page. And so as you might guess
what this line four is saying, is we're going to have a web page
whose title is just my web page! And that's going to be
the title of the web page. And that's information
that's all included in the header of our HTML page. In addition to that, on line six here
we see the beginning of the body tag and the end body tag is on line eight. And in the body of the website very
simply we just say, hello, world. And that's it. So what we've described
here in nine lines is an HTML5 website
that's got two parts. It's got a header whose
title is my web page. That's going to be
the title of the page. And we have a body that
just says hello, world. And so now if we actually were to open
up a web page like this by saying, open hello.html, or just opening
it in a web browser like Chrome, you'll see that what we get is a web
page that just says hello, world. And if you notice up there at the top
it says that the title of the page is my web page. So as you might guess, Chrome is reading
that HTML code that we just wrote. And it's interpreting it trying
to figure out what means what. And it knows where to
put different tags, it knows that the title tag is going to
go up here in the title part of my web page, and it knows that
whatever is in the body is going to go in the main area, the
main body of my web page in general. So if I changed the
title to something else or change the body to something
else, it would have reflected here. Of course, this is a very simple
website, but it shows you the basics. How we use HTML tags to define
the structure of our page, and then using those
tags we can create pages that are rendered nicely when
a web browser sees that HTML and tries to do something with it. Questions about that so far? Yeah. AUDIENCE: Is the indentation
style or functional? BRIAN YU: Great question. So the question is, is the indentation
that we saw in that code earlier style, or is it functional? The answer is that it's just style. Ultimately Chrome and other
web browsers don't really care about whether your
head tags are indented and your title tags are
indented further than that. But it can often be easy when
another human is reading your code, or even when you're reading
your own code to be able to say, OK, here's the head tag and
just look straight down here is the end of that head tag. And so very frequently
you'll see a paradigm like that will indent
anything inside of the header, but the header itself
will be aligned nicely. And oftentimes, you'll see things
that when a tag only contains one line within it, we'll just put the whole
thing on the same line where we have title, my web page, and then /title. But we could have just as easily if we
had one or two indented the my web page and put the /title on
its own line as well. And that would render identically. If we go back into Chrome,
refresh that page, no changes. Chrome doesn't care about that
difference in indentation. Great question. Other questions about this first
HTML web page that we've created? All right. So that was sort of the introduction
to just a basic HTML page, but there's a lot more
that we can do with HTML by taking advantage of other tags. So far we've seen the HTML team tag
and the head tag and the body tag. And right now all that's able to
do for us is render some text. And we can type more text and
it would appear there as well. But let's take a look at how we
might render headings for text because if we have text, maybe we want
a heading to go at the top of our page and maybe subheadings to go beneath it. And so we'll open up headings.html
And what headings.html is going to do is show you a couple of other tags. So HTML has many, many
built in tags, more than we're going to talk
about today, but we'll just introduce some of the common ones so you
can get a sense for how these tags work and the general feel of them. And these are ones that will come
up quite frequently as you go about writing web programs using HTML. And what you see here is in H1 tag
located inside the body, where H just stands for heading, like a big
headline at the top of the page, and one is a number that
stands for its size. So HTML has six built in heading
tags inside that understand. h1 is the largest, h6 is the smallest,
and two, three, four, and five, as you might guess fall
somewhere in between. So this is the largest headline. Starts at h1, ends with the /h1. Notice this continual pattern of angled
bracket name of the tag, like h1, and then the /h1 to mean
this is the end of the tag. This is the end of that head end. So if we open up this page now by going
to not hello.html, but headings.html, what we'll see is this
is what gets rendered. We have this is the largest headline. Again, this was our h1, this
was our h2, all the way down to h6 at the bottom which is
a relatively small headline. And one feature of Chrome
and most web browsers nowadays is that if I actually
want to take a look at any web page and see what HTML actually made it
up, I can Control click on the page and go to View Page Source for instance. And when I go to View
Page Source, what I get is Chrome showing me the actual contents
of the page that it had just rendered. And this can often be
helpful once you start working on larger web
applications trying to understand what's actually getting rendered. In this case, what we
see here is exactly the same thing as what we loaded
before because Chrome is just showing us the HTML contents
of the page that it then renders to look something like this. So it's the browser that takes the HTML,
understands the tags and what they do, and renders it to look a
little bit nicer like that. So what are some other common
HTML tags that we might want? So now we have the ability to
include text in our web pages, we have the ability to include headings. One other thing that we
might naturally want to do is maybe create a list
of different items where frequently we'll want to have
a bulleted list on our web page or a numbered list on our web
page or some other type of list. And so we'll take a look at
possible ways we can do that. And we'll see here in lists.html that
I have two different examples of lists for you or take a look at. So the start of our
web page is the same. We have doctype.html. This is the start of the
HTML content of our page, this is the start of the HTML header. Here's our title. Then in our body is where
things get interesting. So here where I said
an unordered list, I have this tag ul, where ul as you
might guess stands for unordered list. And the ul element goes from here all
the way down to line 12 over here. And inside of it I have three li's,
where li stands for list item. This is an item inside
of this unordered list. Here's one item, another
item, and yet another item. And so these are three list items
that are inside of the unordered list. And as you'll start to notice
the HTML tags very frequently nest within each other. We have an li which is inside of
a ul which is inside of the body. And this natural way of nesting
HTML tags within each other is a nice way of being
able to add and make your website more complex by nesting
more and more of these different HTML tags together in order to create the
end product that you ultimately want. And so that is a ul, an unordered list. Lower down on the page we also see an
ordered list, which as you might guess is labeled ol, ol for ordered list. And that one is going to be numbered. We have the first item, second
item, and the third item. And now if I were to open that up
by opening up list.html, what we see is we have an unordered list that just
shows up as a sequence of bullet points and an ordered list that shows
up as a sequence of numbers. Note that nowhere in my HTML that
I actually say, OK, this is one dot first item, or two dots
second item, three dot third item. The web browser knows to
render it as an ordered list and it puts the numbers
there for me, such that if I try and insert
another item here I don't need to go back and
renumber the bullet points. The web browser will
take care of noticing that this is the third list item. This is now going to actually
be the fourth list item. And when I render that
page it's going to show me here's the first item and the second
item, another item, the third item, and the fourth item in
the list there as well. So the web browser is pretty
smart about these things. It knows the names of these tags and it
knows what they mean and what they do. And it can use that information
in order to make a web page that looks the way that we want it to look. Questions about any of that so far,
or about the tags that we've seen? So thus far, all the web
pages that we've created have all just had text on them. They've had text maybe just written out
like unordered list or ordered list, they have had headings on them,
they potentially had lists whether they're bulleted or numbers. But we'd probably like for our web
pages to be a little more rich. Maybe. Then we want to have
give them some images, some pictures to look at as well. And so inside of my source folder
where I have all these HTML files, I have a file called cat.jpeg,
which is just a photo of a cat. And maybe I want to
take this photo of a cat and I want to put that
on to my web page. How might I go about doing that? Let's take a look now at imagezero.html. So what we're looking at
here is a simple web page. It looks a lot like
the ones we've already seen with one slight difference. so
here in the body we see on line seven that we have an image tag, but
there's something a little bit different about the image tag. In fact, there's two things
that you might notice. Thing number one, we see
the start of the image tag but we don't really see
an end to the image tag. All the other tags have body and
/body, title and /title head and /head, but there's no image and
then /image at the end of it. And the reasoning for that is
that not all of the HTML tags require a beginning tag and
an end tag, a start and an end because some things like images, it
doesn't really make sense to say, OK, start the image and end the
image and what goes in the middle. You're not going to type text in the
middle of the image for instance. And so for tags like the image
tag you don't need an end tag. It's just sort of a
self-contained tag that doesn't require an end tag to go along with it. The second thing that
you'll notice about this tag is that it's not just
the name of the tag. The name of the tag is img,
for image, but we've also added what's called an HTML attribute. And this HTML attribute called
SRC, or source is providing additional information to this tag. It's saying this is an image tag that
I want to render to the web browser. But without any additional
information the web browser wouldn't know which image to render. It wouldn't know whether
to render an image of a cat or a dog or a jellyfish or
something else entirely. And so what we have to do in this
case is provide that information to the web browser. We have to tell in our HTML
code here's the name of the file that we actually want
to render on the page. In this case, it's cat.jpeg, that same
file that I was showing you earlier. And if instead, the image
that you wanted to display was somewhere on the
internet, some linked to an image that was on
Google Images for instance you could just paste in a link to an
image and that would render on the page as well. So if we then go and open up
imagezero.html inside of a web browser, what we'll see is a very big-- we'll see that cat. And why did the image render so big? This probably isn't
the type of interface that I want to present to my users. If I want to show my users an image of
a cat I don't want it rendering huge. And I guess the reason
for this just happens to be that the cat.jpeg file
that I've stored on my computer is a very high resolution image. It's many pixels wide
by many pixels tall. And as a result, my web browser without
being told any additional information about how to deal with something like
this is just going to take the image and render it at full
resolution because it hasn't been told to do anything else. But fortunately, for us in order to
control that and have a little bit more control over what's going on when
our web page renders and is displayed to the user, we can add a couple
additional attributes to the image tag. So what we see here is
the exact same web page. We have the image tag
and the source attribute, but we've added two
additional attributes. We specified a height
attribute that says render this image that's 200 pixels tall
and a width attribute that says render this image that's 300 pixels wide. And so now when I open
up this same web page but change image zero
to image one, it's going to just render the image as 300 pixels
wide by 200 pixels tall because I've told it using those HTML
attributes that this is what I want the dimensions
of the image to ultimately be. And so we noticed that some
of the attributes that we use in HTML, like the source attribute,
you need that source attribute. If you don't provide a source
attribute your web browser's not going to know what image to add. But there are many, many more
attributes that are optional. Attributes ones that you
can include if you want to. You can optionally specify
the height or the width of the image that displays in your
HTML page, but you don't need to. But you should be careful
because your web browser is just going to listen to you no matter
what it is that you type in. If I say, all right, I want the width
to be 300, but I want the height to be I don't know 700 pixels for instance. And then I try refreshing
this page, suddenly the cat doesn't look quite
right anymore because I've distorted the image by telling it
exactly what dimensions to display it as. But the web browser will be smart if
you give it the opportunity to be. So if I just say, height is 700 pixels
but leave off the width for example and just say render it as a 700 pixel
tall cat it will render to 700 pixels tall and adjust the width
appropriately in order to match. So if you are going to specify both
the height and width to something, make sure the dimensions
are what you want them to be otherwise oftentimes it's
best just left up to the browser to make that determination for itself
in terms of what makes the most sense. So that's images and how we
use HTML attributes to adjust the behavior of particular HTML tags. Questions about that? Yes. Question over there. AUDIENCE: How would you make the
image as a proportion [INAUDIBLE] web browser [INAUDIBLE]? BRIAN YU: Fantastic questions. So the question is, how do we take this
image and make it sort of proportional? Because if I'm here looking at it on a
computer with a sort of a wide screen then this looks great,
but if for instance I were to shrink down this page,
now most of the cat gets cut off. And so HTML, and later
we'll see CSS for styling, has a number of different ways via
which we can control exactly how tall or how wide things are and
control the size of things. One way is by specifically
specifying a number of pixels. For instance, I might say that I
want this cat to be 700 pixels tall, but I might alternatively
say, all right, you know what? I want the width of this cat to be 50%,
50% of the total width of my web page. So if I save that and
render it, what I see now is that I didn't tell
my web browser here's how many pixels to render
this image as, it just knows 50% of whatever
the width of the web page is, that's going to
render as half of that. And now if I shrink the web page,
before the cat didn't change size because it was a fixed number of
pixels and if I shrink the web page it doesn't really care, but now
if I shrink the same web page you'll notice that the
cat shrinks with it. As my web browser gets narrower, 50%
of that full width of the web browser is getting smaller. And this is a trick
that's often employed. Now, if you start to think
about how to make your web pages responsive to people
using mobile phones or tablets or devices of different sizes, making
sure that your content looks good both on a computer but also
on smaller devices as well is very, very important
nowadays as web applications become more and more useful on
varieties of different platforms. And so techniques like that
of using a percentage instead of a number of pixels to say I
want this to only show up as 50% can often be a helpful tool to make
sure that you have that dynamism, that responsiveness in your
website to make sure that it's able to adapt accordingly. Great question, though. Other questions? All right. We'll keep going. So that was images. We'll show you a couple of
other things that HTML can do. One thing that it's very
useful for is rendering tables. So we will have tables of
data with rows and columns and we want to display
that data to the user. Let's take a look at table.html,
which will be an example of that. So what we have here is a table
that represents US presidents. Just the first two. But what we'll notice here is that we
have a table tag that begins the table. And then we have a whole bunch
of tags nested within it. We have a tr tag, which
stands for table row. And then within that we have th
tags, which stands for table headers. So if you think about this
just going one layer at a time, we start our table. And the first thing in our table
is going to be a row in that table where that row is going to consist of
three headers or three columns that are being headed by these individual cells. We have first name, last
name, and years in office. And now we end that row with /tr. That's the end of that row
and now we start another row. Here's a table row that
says, all right, here is going to be the start of
a new row of this table. We have George and then
Washington and then the years of George
Washington's time in office. And if we scroll down
a little more we see we have another row underneath that. Notice that inside of the row
all of the individual cells are stored in td elements,
where td stands for table data. This is just the data that is
contained within that particular row. And so now if I were to open
up table.html, what I see is something that looks
something like this. I see my title. Notice presidents was
here labeled as a h1, so it's going to render
as a large heading. And within that I have individual rows. Here's my header row. The th ones make it
render as sort of bold. And I have the names and in the second
row inside of that table as well. Now, this might not look
like a very fancy table. It doesn't have borders
or a coloring or it doesn't look like it could
be aesthetically pleasing. We'll see later on in
tonight's lecture how we might go about styling a
web page like this in order to make it look a little bit nicer
and look a little more aesthetically pleasing. But that's an individual table. And if I wanted to, I could
add an additional row to this. Right here is two rows and I can just
continue to add more elements inside of this HTML page. So I can say one new table row
and I'll end that table row. And inside of that is going to be table
data Thomas Jefferson and 1801 to 1809. And so if I refresh that page, we
see that the third row in that table now appears because I've
added to the HTML code. And you can continually do this by
adding more and more HTML elements to the contents of my HTML page. One other HTML tag that we'll take
a look at just to see how they work is form.html. So what we're looking
at here is an HTML4. Oftentimes, when we're
working with applications we don't just want to display
information to the user, but we want to collect
information from the user in order for them to either sign up for our
website or log into our web site or submit data to us in some other way. And so what we see here is a simple
example of an HTML form, where we have this form tag in the
end of the form to say here is going to be a place
where users can input data. On line seven we have an input tag. Notice that like the image
tag there is no end tag here. This is just going to be a
place where users can input text and we need to tell the web
browser what type of information the user is going to be inputting. In this case, we're saying the
type of that information is just going to be text. And we're specifying a couple
of other optional attributes that give additional information to this
form so that it knows how to behave. Placeholder is just full name. Placeholder, if you'll recall, and
we'll take a look at it in a moment, is sort of that same text
that appears in a text field before you start typing
in it just to give the user a little bit of an indication
as to what's expected of them as to what goes there. And this name field at the
very end just gives a name to this input field that
says that this input field is going to store the name of the person. This won't become relevant just yet,
but as we'll see later on in this course as we start to actually do things
with the form, take this information and log it to a database
or process it in some way, being able to reference a
particular input field by its name can ultimately be very, very helpful. And then finally down here
after they type in their name, let's give them a button to click on. That's created just
by using a button tag. And the name of this button is going to
be Submit, and then /button to say, OK, that's the end of that button. So if we render that
form and take a look at what that looks like
when we open it as HTML we see it's going to
look something like this. So we have a spot for the user
to type in their full name. Notice that full name is automatically
placed there as the placeholder text that we put in or HTML, and they
can type their name in there. And then the Submit
button is a button that would theoretically submit that form. Now, this form doesn't yet do anything
because we haven't hooked it up. We haven't told the form what to do
after someone clicks on the Submit button, but we'll see
later in this course how we can begin to using other
programming languages like Python and JavaScript begin to take
the results of form information and do something useful with it. But for now all we're doing
is designing the front end. What the user sees when they
visit a particular web page. So that was the form. Questions about the
forms or tables or images or any of the other HTML elements
or tags that we've seen thus far? All right. One helpful way to
think about HTML as we think about designing our HTML
websites is thinking about them like a tree structure. If you're unfamiliar
with tree structures, effectively think of them
as a combination of nodes where nodes are just points within this
tree that are connected to other nodes. So in this case, if we look at a simple
website like the Hello, World page that we created before, if we wanted
to represent this as a tree in HTML we typically call that tree
the document object model. It might look something like this. We have HTML at the very top. Everything in our web page is
contained within this HTML tag. And within that HTML
tag we have the header, that head section of the HTML page,
and we have the body of the HTML page because inside of HTML we have
the head here and the body there. Inside of the head we have a
title because the whole title tag is nested within the HTML header. And inside of that title
is our text, hello. And likewise, inside of our body
is just this text, hello, world. And you can imagine for some
of our more complicated pages that we saw earlier where
we had tables, for instance, that we might have a table
element inside of our tree and which is connected to a
whole bunch of tr's for table rows each of which itself is connected
to a whole bunch of th's for table headers, or td's for table data. And you can represent this entire
HTML page as this big tree. And it might not seem
very intuitive as to why you might want to do
that right off the bat, but as we'll soon see, especially as
we start diving into JavaScript later on in the course that by having
an understanding of this tree can we start to manipulate it, can we
start to add things to the tree in order to add more to
our web page, remove things if we want to take things
away from the web page while the user is interacting with it. And as we'll see in just a moment we
can use this tree in understanding what's contained within what to
begin to style our web pages. And styling our web pages is going to
be the process of taking what so far has just been websites that have a white
background and black text on it and maybe images and
other things as well, and starting to add some
of our own custom styles to it in order to make it look
a little bit nicer to the user. Because a big part of web
development these days is not just making sure
that the web site works and that it does what
it's expected to do, but also that it's visually
appealing to the user. That it's something that they
would want to interact with, that it looks nice, that
it looks professional. And so that is not something
we can do with just HTML alone, but it's something that's going to come
in with an additional tool called CSS, or cascading style sheets which
is a different language altogether and we can use to interact
with HTML in order to style the HTML in order to change the
way the HTML looks according to rules that we set in order to add color
to our web pages, for example, or add spacing in places where we
want spacing or add borders to things or add a background to
things, for instance. And so what we'll take
a look at now is how we might be able to leverage
some of the tools of CSS in order to design a web page that looks
just a little bit nicer than the web pages that we've already
been working with. So let's take a look at stylezero.html. And what we'll notice
is that this web page is very similar to ones we've seen before. It's got a body, it's got
an h1 as the headline, it's also got these p elements
where p just stands for paragraph, like a paragraph of text. But the key difference here is
that we've added a new attribute. We've added this style
attribute here that's associated with h1, that headline. And that style attribute is equal to
something a little bit complicated, but let's break it down into parts. We have in quotation marks,
"color:blue;text-align:center"; And so what we see here in this
style attribute of our heading, R2 is CSS properties, where a CSS
property is just some specific style property that the browser is going to
understand and render in a particular way. And as you might guess
what's happening here is we're saying that we want to assign
the color property of this heading to blue and we want to
assign the text align property of this heading to center. And so what that's going to do is
instead of just rendering an h1 as we normally would as just a black
big headline on the left side of the screen, we'll render it as a blue
headline that's centered on the screen. And so if we now open up
stylezero.html, and we see a web page that looks something like this. That big heading is still
there at the top of the page, but it's a little bit different now. We styled it to be blue, we
styled it to be centered. Whereas before, if we were to
just get rid of this style tag altogether and say that this is
what that looks like without any of that additional styling. And so leveraging tools
like that we can start to build up styles for our web page. We can start to make things
look the way we want it to. We can apply a color
scheme to our website in order to put whatever themed
colors we want to put on our site. And this can be used in order
to add the sort of styling. And HTML and CSS have
a very rich vocabulary for the types of things
that can understand. Obviously, we can be simple colors. We can do the blue color or we can say
red to make the headline render as red instead, but there is something
like 140 different colors that HTML and CSS know how
to understand and interpret. So I could do something like
color:dark magenta, for instance. And if I refresh that page then the
heading is rendered as dark magenta. And if that's not enough
color sophistication for you, the 140 different
named colors out there, you also have the ability to select
exactly which color you might want by using that colors hex value. And so in HTML and CSS and when we're
dealing with color more generally, we'll often represent color using a
format called RGB, or red, green, blue where we specify how much red is in the
color, how much green is in the color, and how much blue is in the color. And using different combinations
of red and green and blue, where zero means very little red
and 255 means a whole lot of red. And likewise for green and blue can
we represent basically any color that we want to. And so if we type in HTML
color picker, for instance, and we can see over here that
this color, this shade of blue is 66 amount of red. So a moderate amount of red and a little
more green, 134 green and 244 blue. So a whole lot of blue. And that is this particular color. And so if we wanted to make our headings
some different color, for instance, maybe we want it green and we want it
to be a darker green like this color, for instance, that's this color. That's 12 red, 142 green, and five blue. And that color is
represented by this up here. This is called a hex code. If you're familiar with
hexadecimal or base 16, it's effectively these three numbers 12,
142, and five represented in base 16. No need to actually understand
where that number comes from, but effectively know that the first
two of these numbers and letters represent the amount of red, the second
to represent the amount of green, and the last represent
the amount of blue. And if I take that now 0c8e05, and in
my HTML code rather than dark magenta, I say #0c8e05, for instance,
that same color hex code that I saw before
and then refresh my page, now it's going to render
using that exact same green. So by using hex codes and
understanding RGB values, we can have a lot more
control over the colors that our web page uses by
specifying exactly which color that we want to display when
that page ultimately gets rendered. So that's the basic
introduction to how we might use the style attribute to begin
to add some styling to our web pages and make them look just
a little bit nicer. Questions about that so far, CSS or
colors or anything we've looked at? As we can imagine, if
we start to-- and I'll change this back to blue
just for good measure. If we start to add a lot of
styling to our HTML web pages, this is going to start to
get cluttered pretty fast. I can start to add
additional styling here. If I want my paragraph here to be purple
and I want this paragraph over here to be red, for instance. And this will certainly work. I can style things in different colors
and that's going to work just fine, but I've mixed my CSS code
of describing what color and how I want things styled with
the actual contents of my page, of the actual content that
I want to be displayed when the user goes to the page. And oftentimes, that can be
seen as just a little bit messy. We might look for a cleaner and more
elegant way of styling our page. And CSS offers a number of different
ways via which we can do that. So one way is seen
here in styleone.html. So notice in styleone.html,
which ultimately when we open it is going to
render exactly the same way. Big blue headline and then
two paragraphs of black text. We've done something a
little bit different here. What we've done is the
body of the web page is the same as it was before without
any style tag attached to it. The h1 no longer has a style attribute. It just says h1m welcome to my web page. What we've added is we've added an extra
section to the header of the web page. We've added the style
element to the header to say here is some style
information for the web page should know that should be included in
the entire web page, the rules to follow when deciding how to style
and how different parts of the web page should appear. And what we see here on line six is
that inside the styling of the web page we have h1, meaning here is how you
should style any h1 that you see. We say h1, the color is going to
be blue and the text align property is going to be centered. And that's why ultimately that
page looks exactly the same because effectively the browser
is doing the same things. We've just moved the CSS styling away
from the body of the HTML content to the web page. And this is a paradigm
you'll start to see a lot as we begin to approach
web development from a number of different angles that
whenever we're intermingling a lot of different
things, oftentimes it can be helpful to take one
part of the web page and separate it out into
a different place such that it's more logical or more
easy to understand or more readable or ultimately more elegant. And this is one example of that
of taking the h1 out of the h1 from the body and just describing
it in the header of the web page in terms of how the
entire page should be styled. And one other note about this is that
when we put the h1 in the style tag in the header, it's going
to apply to every h1 that it sees throughout the page. So if I add another header,
adding here is a second headline, and that's also an h1 because
up here in our style tag we've told every h1 to
render as blue colored and centered in terms of
its alignment of the text. When we refresh this
page the second headline is also going to show up as
centered and blue as well. Whereas before in that first
example, if we were to add an h1 and we wanted it to be styled the same
way, we would have needed to go ahead, and h1 style equals color blue text
align center and repeat that same thing again for the second one. And generally speaking, whenever you
find yourself repeating the same code, or even copy pasting the
same styling code again, in order to make it to apply to
something else, generally speaking you should look for a better
designed or a more elegant way of doing the same thing because
ultimately this repetitiveness gets difficult to maintain. If I want to change the headlines
from blue to red, for instance, I now need to change the headline in
two different places in my web page. Whereas, in styleone.html,
where I have all the styling contained inside of
just this style element, inside of the header of my web page. If I wanted to change both of my
headings to red instead of blue I just need to change it in one
place, changing color from color blue to color red. And now both of the headings
change in their color because that Heading Style is applied
to the entire document as the whole. Questions about that? OK. But we can in fact
get even better at how we go about trying to
separate out the CSS because natural questions that
might come up now are number one, we still have this styling
code inside of the HTML file, when it sort of feels
like something separate. The way that we style
our website is sort of fundamentally different
from the actual content of the text that goes on our website
and the structure of our web page in general. But another issue that
might come up is, what if I start to build larger web
applications that don't just have one HTML file, that have two,
three, four, or more HTML files that all want to have red
headlines that are all centered. Of course, I could take
the style tag and I could copy paste it across all
of my different HTML files, but again, that brings up the
same problems that we saw before. The problem of whenever you
find yourself copy and pasting code and repeating code we run the risk
of making it more difficult to maintain and ultimately making it less elegant. If we wanted to change
the color down the line it becomes a whole lot
harder because we have to change it in many different places. So what can we do about that? Well, we can take that CSS code and
just separate it into a different file altogether. So what I'll show you
now is styletwo.html. Styletwo.html does the exact
same thing as styleone.html. And all the source code will be made
available to you afterwards as well. Styletwo.html shows you a
big blue centered headline, but how is it doing that? Well, the body is still the same and we
no longer have a style tag in the head, but what we do have is
this line here, line five. Link rail equals style
sheet href=styles.css. So what's going on here? This link tag is
effectively telling us we want to link in some other file that's
going to provide us information to help us know how to render this HTML page. And what kind of information
are we trying to render? Well, it's going to be a style sheet. Information about how
to style our web page. And which file are we going to include? Which is the file that we want to link? Well, it's styles.css. And so now if we take
a look at styles.css, what's going on in there to allow
it to render the CSS the way that we want it to? Let's open up styles.css. It's exactly the same
thing as the contents that we saw in the style tag
of our HTML header before. It's just h1, color is
blue, text align is center. And that's what allows us to get this. If we add additional properties,
maybe I want my paragraphs to all be red, for instance, and I
save that, now if I refresh of the page the paragraphs are red. The HTML file didn't change at all. Styletwo.html stayed the same. Yet, when I refreshed it the styles
changed because this linked file, this linked CSS file that is defining
the style for my styletwo.html file has been updated to say, now
I want all of the paragraphs to show up with red coloring
instead of the original black. And so we saw three different
ways via which we can link CSS into the contents of our HTML code. One, just by including that style
attribute directly in the HTML. The second way, factoring it
out into the header of the HTML page so that it applies
to the entire page. And then finally, what might be
one of the most common paradigms you'll use, especially if you start
building larger web applications is this method of saying, take the CSS,
separate out into a different file such that even if I have many
different HTML files they can all reference the
same CSS file so that they all get styled the way that I
want the page to be styled. So those are the basics of how
we might go about using CSS. Now let's take a look at a couple
of the common CSS properties that we might use. So far we've seen color to give a
particular element of color in HTML, and we've seen text align to say I want
to center this text instead of left justifying it. And we can also use CSS to change the
size of different elements as well. So let's take a look at size.html. And for good measure I've just
included the CSS in the header like we saw in the
second example before. Though in practice in
a larger application you might want to move this
information into a different file. But what you see here is
inside the body I have a div. And a div just basically
means a division of my code. Some section of my code that doesn't
really have any real formal meaning. It's just a section of my code
that I want to do something with, maybe style in a particular way. And here's a style I've applied to it. Background color is going to be teal,
width is going to be 100 pixels, height is going to be 400 pixels. So if I now go to size.html,
this is how it gets rendered. We have a vertical just block of
HTML content that says hello, world. But in particular its background color
is teal, it's got a particular width and it's got a particular
height as defined by what I included inside of my
style tag just a moment to go. And so using these
width and height tags we can start to really define exactly
what our website looks like. If we change the width to
500 pixels instead of 100 and refresh the page there, we see
that now it's a fair bit wider. And so we can control exactly
how the web page shows up just by making these
small modifications to it. But now what if we wanted to add
a little more to this website in terms of its design, in terms
of the spacing of this page, in terms of thinking about
what it's going to look like? You notice that right now
this hello, world block is very close to the upper
left hand corner of the screen. Maybe we would want to move
it around a little bit more. So that's where we can start to
introduce the notion of a margin around the edge of a
particular HTML element. So for instance, if I go in here
and set the margin of the div to be 30 pixels, for instance,
and now refresh that page, now we see that hello, world
has a margin around it. It's got this sort of 30 pixel
invisible border that's surrounding it. And it helps to space that
out from different elements. And so controlling margin
can often be helpful when you're trying to lay out a web
page with a bunch of different elements and you want to control how far apart
different elements are from each other. The margin is very helpful there. Another thing you might notice
is that hello, world right now is very much just directly at
the edge of this teal box, which looks a little bit suboptimal. Maybe I would want to
change that a little more. And for that I can add in another
CSS property called padding. So I can say, all right, let's
add a padding of maybe 20 pixels. And after I refresh
that, now you'll notice that hello, world is
internally padded by sort of an invisible border of 20 pixels. And so margin and padding are both
used in order to control spacing. But the key difference is
that the margin of an element is the space around this outside
of the border of the element. So this is my div, this teal box. The margin is what's outside of it. I've got 30 pixels of
space along that side and the padding is between the content
of the element and that elements border. So this right here is 20 pixels
worth of padding for the hello, world that's located inside of this div. And so using margin and padding,
especially on larger web applications you can start to really control
the look and feel of the website in order to make it display exactly
the way that you would want it to. All right. Thus far we've also only been
interacting with our HTML page in the sense of having text
that is all of the same font. It's sort have been
the same default font that HTML tends to use whenever a web
browser is displaying HTML content. And maybe we'd like to have a
little more control over that. So let's open up font.html, and take
a look at what's going on there. So again, we have a body inside of
which is a div that says hello, world. And inside of the
style tag up here we've added some special styling
to that particular div. In particular, we've added three things. We've added a font family
that effectively just says this is the font that I
want this div to render in. And notice that I haven't
just said give it one font. I said Arial, but I
said Arial, sans serif. Reason for this is
when we start to think about making sure that our website
looks right in matter what browser it's loaded on. So maybe you were wanting to even
include some font on your web page that the user's computer doesn't have,
or that the user's web browser just doesn't understand. And so if you include multiple
thongs as the font family in the styling of our HTML, then
what's ultimately going to happen there is-- sorry. There's an extra tag there. What's ultimately going to happen
is that the web browser will first try and match the first
font that I provide. It will try and use the font
Arial if at all possible. But if it doesn't have the font
Arial, if the web browser doesn't know what Arial is or
can't find that font, it's just going to default
to any sans serif font. And so oftentimes if you want to
use fancier fonts on a web page it can be a good idea to
include the font that you want, but after that some
additional more common fonts that might be more
common in other browsers on older browsers in
particular that way you can guarantee, or at least
know with high probability that when a user looks
at your page they're seeing what it is that you actually
want them to be looking at. In addition to the font
family, we've additionally specified the font size for how
big we want the font to show up as. In this case, 28 pixels tall. And finally, a font weight. You want the fun to
be bold, for instance. So now if we open up font.html,
we see that what we get is slightly different text
rendering that what we saw before. We see hello, world, but it's
no longer in that same font that it was previously. It's now 28 point font in size,
it's now in a particular font, it's now bold because
we were able to control the font that was present there. Couple other CSS things that we'll
just take a look out before we move on. We'll take a look at border.html So
again, we have inside of the body a div that says hello, world. Just [INAUDIBLE] saying hello,
world in some rectangular box. But in the past that rectangular
box has sort of been invisible. We've seen the words hello,
world, but there hasn't been like in a physical box drawn around it. But now there can be. Up in the style tag we're going to
specify that we want inside of the div for there to be a border and that border
to be a three pixel, solid blue line. And so by specifying border
three, pixel, solid blue we can open up
border.html and now we see hello, world inside of this rectangular
box that is a three pixel blue line. And we can change this, can
customize it however you like. It can be a five pixel,
dotted red line, for instance. And now it's going to
look something like that. So we have full control over
what the border looks like. And again, there are
many, many CSS properties. Far more than we're going to be able
to look at in just tonight's lecture, but I'm giving you a taste
of them, just a teaser of what CSS properties are
out there so that as you start designing your own web
applications you can think about what do you
want the web page to look like, you can get a feel
for what CSS is capable of. And as a result, you can start
to design pages that look the way that you want them to look. So that's borders. And now let's try and use some of
the CSS that we've learned in order to improve the style of one of the HTML
pages that we've already looked at. So let's take a look at table.html. And recall that table.html was
just a simple web page that listed presidents of the United States. We have Washington, Adams, Jefferson. And right now this table doesn't look
particularly fancy or particularly great, but we can use CSS now
to begin to add styling to it, to begin to control the way this looks
to make it look the way we want it to. Maybe, for instance, we want
a border around this table. So up in the head I can add a
style tag and say, all right, around the table lets add a border and
let's make it two pixels solid black. And now around our
whole table we just have this box, a two pixel
solid black line that's surrounding the entirety of this table. So that's good. That's a good start, but it's not great. I also would probably want
for there to be borders around individual cells for this table. Lines that are dividing up
the rows and the columns. And so let's do that now. So now I would want to apply
styling to the table headers. Let's apply a border of maybe
one pixel, solid black this time and also around the table data. One pixel, solid black. Recall that the headers were these
things at the top the first name, last name, years in office. Whereas the data, the td
were the individual cells that were composed within that table. And by specifying this now
and I refresh of the page, now the individual cells also
have a border around them. We see a little box around each
one of these individual cells. And one thing you may have noticed is
that the styling for the table header is the same as the styling
for the table data. They're both border,
one pixel solid block. And it felt a little bit
repetitive for me to have to say the same thing two times. So what I can do instead is just say
th,td, to mean take this styling, apply it to both table headers and
table data and then I don't need this additional information for the CSS. I just say the table is going to
have a two pixel, solid block border. The table header and the table data
will each have a one pixel solid back border. And if I refresh that the
same exact layout results. I don't see any changes in the
styling because this is fundamentally the same meaning as before. We've just managed to eliminate
some of that redundancy. What else might we want to do here? Well, right now one
thing that you may notice is that the lines are
repeated twice because we have a box around each one
of our individual cells we see two lines between each
individual cell instead of one. And so CSS found a way to get around
this just an additional property that you wouldn't know about unless you
looked it up or had used it previously. But [INAUDIBLE] additional CSS
property called border collapse. And if I had border collapse collapse
to this styling of this HTML page and then refresh it, now we see
that those double borders go away. We just have just the borders we want. And if we didn't know that border
collapse exist as a CSS tag it would be very easy to look up. You could just Google CSS property for
removing double borders in a table. And you'll likely find
someone online who has said, use border collapse:collapse and you
can then use those CSS properties in your own web design as well. Now we might want to add
some color to this as well. You might want the headings of our table
to be in a slightly different color. So I might say for the
table headers, let's say we want the background color
to be light gray, for instance. And we refresh that and now the
background for our table headers is light gray. And maybe you want to add some spacing. Recall that there are
two ways that we've added spacing thus far
in this course where margins are around
the outside of the box and paddings on the inside of the box. Right now I get the feeling that
these cells are a little bit cramped, that there's not a whole
lot of space inside those boxes. So maybe I want to add more space there. So maybe for each of my table
header cells and table data cells, I want to say padding five pixels,
just to add five pixels of padding on the inside of my individual cells. And now it looks something like this. Looks a little bit cleaner, a
little more room for the cells to breathe because I've
added some padding in there just by adding these
additional CSS properties. I can additionally add
changes to the size of this. Maybe I want the table to be wider. I can say make the with 500 pixels, for
instance, and now it's 500 pixels wide. But as someone mentioned
earlier before, this might not be great because
now if I shrink down this page now I've sort of lost information. I can scroll over to the other side,
but the table doesn't respond with me. So I can instead say
something like, what width? Let's make it 50%. So the width of the table
takes up 50% of the view of the entire width of the window. And now as I shrink it
down or make it larger you'll notice that my web
browser knows automatically we need to add new lines
to the table headers in order to make room for all the data. The web browser takes
care of all of that. I just need to tell it, here's
how I want the data to render, here are the specific style properties
that I want to add to the HTML page. And the result is this. And finally, one thing
I might want to do is say, for all the table
data let's align it centered. And what we see now is
we have a table that looks a whole lot nicer than the table
we had just a couple of moments ago when we didn't have
any of the CSS at all and it was just all the tech sort
of on one side without any borders or centering or styling added to that. So using just a couple
lines of CSS, we can start to take the contents
of our pages and make them a whole lot more responsive. A couple final points to take a look at. Any questions about this so
far before we move on though? Yeah. AUDIENCE: [INAUDIBLE] BRIAN YU: Yep. AUDIENCE: [INAUDIBLE] BRIAN YU: Great question. So the question is, there are
so many properties out there. I've shown you a whole
bunch today, but there are far more that I haven't
even managed to touch on just because we don't have enough time. How do you know which one to use
to make a certain thing happen? Oftentimes, the best way to do this
is to look for documentation online. If you look up CSS
property documentation you'll often find lists that just show
you all of the different CSS properties that you can apply to style a
particular element on the page. And you can use those. Or likewise, if you're looking
for something very specific, you want to know how do you
get something to happen? Maybe I didn't know about
collapsing those borders before, I can just perform a Google
search and look for CSS table, combine borders of cells. I don't quite know what
I'm looking for, but I know approximately what I'm asking for. And if I look around carefully enough
I'll notice that in the very first result it tells me I can use that border
collapse:collapse property in order to make that happen. So even if I didn't know how
to do that particular thing or didn't know how to do some
other particular styling, this is all readily
available information that you can look up because others
have likely walked that trail before, tried to solve the same problems and are
likely have a way to use CSS in order to make the styling look the way
that you want it to ultimately look. So great question. OK. One more example just
to quickly show you. What we have here are divs and spans. So we've seen divs before in a little
bit of detail, where the div is just a division of my web page. That's just going to be some section
of the web page, some vertical section of my web page. And a span as we see here, is really
just the section of my web page that might be in the
middle of some text. They don't really have the same kind
of meaning the way that an image tag is an image and a list tag creates
a list and a table tag creates a table. The divs and span tags really
don't do anything at all, but they allow us to label
different parts of our page. I can say div and then give
this an id, where an id is just an attribute that uniquely identifies
a section of my web page via a name that I give it. So I can say div id equals
top, where top is just a name that I picked to say,
you know what, this is going to be the top section of my web page. And I'm going to put it in a
div just so that I can name it, so that I can name it top to mean
this is the top of my web page. And likewise here, div equals middle. I picked the name middle as the name
for this section of the web page. And then div id bottom just
means I have a section here and I'm naming it bottom. And I can give it a name
by using this id attribute. Then these spans here. Why am I using those? Well, I have this additional
attribute called class. Class is an attribute that lets
me give names to elements as well, but it lets me give names to
a certain type of element. So with id's. When I have an id on an HTML
element that id needs to be unique. There can only be one HTML element
in my web page that has an id of top, only one that has an id of middle,
and only one that has an id of bottom. But I can give many things, as
many as I want the same class. And so here I'm saying, I'm
going to call this class name. And that way if I want
to I can refer to all of the different spans who have
classes name and style them in a particular way. And you'll see what I mean by this
in just a moment if it's confusing. But right now we have three divs. This is the top of my web page, this
is the middle, this is the bottom. Where top, middle, and bottom
are inside of these spans who have a class value of name. So what can we do with that? Why are we labeling things
with top, middle, bottom name? Well, if we take a look
at the styling up here, this is the contents of our style tag. We have this pound sign. And the pound sign in
CSS is short for id. What this is here saying is get
me the thing whose id is top and style it in a particular way. In this case, style it with
a font size of 36 points. Here, take the thing that
has id of middle and style it with a font size of 24 points. And likewise, take the thing
that has id bottom and style it with a font size of 12 points. And before I wouldn't have had a way to
distinguish the styling between three different divs, because if I had
said div style that is 24 point text it would have applied
to all three of my divs, but if I only want it to apply to
one of them an easy way to do that is to uniquely identify it. This is the top div and then say,
OK, get the thing whose id is top, here's how I want you
to style that thing. Likewise down here, if the pound
sign means id the dot sign in CSS means class. So dot name means take anything
whose class is name and style it in this particular way. In this case, make the font weight bold. So now if I open up divspend.html,
this is the contents that I see. I had three divs and you
can sort of see them here even though they're not laid out. This was my top, this was my
middle, this was my bottom. And because I said get
the thing with id top and make it the biggest in font
size, make the middle one somewhere in between, and the
bottom of the web page the smallest font size
at just 12 points, then they were able to render
using the correct fonts even though that they're all div tags. And these names, top,
middle, and bottom, they're all bolded
because they were inside of spans that had a class of name. And I said take all of the things
that have a class of name and style them with a font weight of bold. Take a look at that
one more time in case it was confusing now that you've seen
what this web page actually looks like. Inside the body we
have these three divs. And these id's never show up
in the contents of the HTML. These names are only present
inside the HTML code and not when it gets rendered in the browser. But I'm giving the divs these names
such that later on in my style tags I can go in and style
them however I want them to, by giving them a particular
font size, for example, in order to result in them rendering the way
that I want them to be rendered. And likewise, the same for
when we have individual names. So that's a brief introduction to CSS. Next week we'll dive in even
further into HTML and CSS. But any questions about
the CSS that we've seen so far in terms of how to
go about styling our web pages? Yes. AUDIENCE: [INAUDIBLE] question. A number of the things that
you did in the HTML code you could do in a
Wysiwyg editor where you can see what you're doing more readily. And then Microsoft Word generates
HTML code for you, right? BRIAN YU: Great question. AUDIENCE: Under what circumstances do
you want-- in practice, how are people really generating their HTML code? And under what circumstances do
you want to be down in the weeds writing in HTML? BRIAN YU: Fantastic question. So the question was, nowadays there
are all these Wysiwyg editors where I can just click a bold button and
make text bold or click a color box and change the color to whatever I
want without needing to know hex values and class names and id's
and all that, so why would I ever want to actually use this
stuff, or in what situations would this actually come up? And the answer is that
oftentimes a lot of the basics will already be done for you. Next week we'll start to dive into
a CSS framework called bootstrap where a lot of the CSS to make web sites
look nice is already written for you and you can just use it and make your
website look a little bit better. But you'll want to use
HTML and CSS when it's helpful for making very specific
adjustments to your web page in order to make them
look a particular way. And also, once we start
dealing with dynamic web pages. So far all of the web
pages we've created just show whatever content
I want them to show. I type in the text that I want to appear
on the page and I open up the page and it shows that text, but most
modern websites aren't like that. I open up Facebook or Twitter and
it's not like some Facebook or Twitter engineer has written all of the posts
and tweets I'm going to see in an HTML page and shows that to me. It's that some server somewhere
is figuring out what tweets and what Facebook post to show me. It's generating HTML and CSS and it's
displaying that information to me. And that process of generating
custom, dynamic HTML that gets displayed to the
user based on different things is something we'll explore
later in the course. But it's a situation
in which we'll really need to start to leverage some
of the tools in HTML and CSS in order to control when we're
dynamically creating content. How does that content look? And those are situations
in which we might want to have a little more formal
control over the CSS and the HTML that we use inside of the page. But great question. Other things? Yeah. AUDIENCE: I just want to know the
difference between id and class. For example, can I use the
id attribute with span tag? BRIAN YU: Great question. So the question is,
when you use id in class can you use the id with a
span tag instead of a div? Yes, absolutely. You can use id's in class
attributes on any HTML element. So I could have put a class on the div. I could have put an id on the span. id and class are just two different ways
of identifying HTML elements in a style sheet, for instance, or using
JavaScript as we'll soon see later. The only difference is
that an id must be unique. So there can only be one HTML element
called top, only one called middle, and only one called bottom,
but there can be as many things as I want that have a class
of a name, for example. And so generally speaking, if
you want to style one thing in just one part of the
web page you use an id, but if you want to style a bunch of
different things you'll use a class. So if we think back to
Twitter, for example, maybe your profile picture that shows
up in the upper right hand corner of the screen,
maybe there's an id attached to that that's like profile
picture because I only have one and I want to style it a particular way. But for tweets that are showing
up in my tweet feed on Twitter, those might have a class
because there are a whole bunch. Dozens and dozens of different
tweets that are all one style basically the same way. And so by giving them
a class and say, you know what, style anything that has
a class of tweet using these rules, then anything that is a tweet will
be styled in that same manner. AUDIENCE: So the id and class
actually cannot be used in the same, for example, div [INAUDIBLE]? BRIAN YU: The question is, can id's and
classes be used in the same element? Yes, they absolutely can be. If I wanted to, I could put class equals
name up in this top div, for instance. And what that would do is
because it has a class of name, when I refresh this, this
whole top div is now bold because if we just follow the rules
that I gave it, I told my website, anything that has a class of
name make its font weight bold. And then down here I said
this div has a class of name, so the entire thing is
going to render as bold. So you can give anything the
class of name that you want. Not just the spans, although in this
example, we only gave it to the spans. Great question though. AUDIENCE: Question. BRIAN YU: Yes. Question? AUDIENCE: What happens
if there are conflicting sizes of same element [INAUDIBLE]? BRIAN YU: Great question. Question is, what happens if there are
conflicts, in terms of what happens? And ultimately, we have to
resolve those conflicts somehow by picking one or the other. And generally speaking, CSS will default
to picking the more specific thing. So if I said I want the top
to render with a color of red and I want the name to render with
a color of blue, for instance, technically because the top
is supposed to render as red this whole text would
theoretically render as red. But because I said name renders
as blue, then when I refresh this, even though top is still inside of
that text that should all be red because the name is more local to it,
because it's part of that span that's deeper within the tree that [INAUDIBLE]
that we saw before than the div is then top is going to show up
as blue instead of red. Great questions. All right. So we've seen a little
bit of HTML and CSS, but thus far our web sites have
only ever existed sort of locally on our own computers. I've been opening up
these web pages in Chrome just by going to a particular
file on my computer. And you can certainly do
that on your own computer as well just by opening
up HTML files and seeing how a web browser renders them. But ultimately, that's not very
useful if I want to take my web page and deploy it to the internet,
for instance, for anyone to be able to look at. So how may I go about doing that? To use that there are a
number of different ways to deploy web pages to the internet,
but one common way, or one way that we can use in this class
using only the stuff we know so far is something called GitHub Pages. And GitHub Pages is a feature
of GitHub which effectively lets you take a GitHub repository
and deploy it to the internet so that people online can look at
the HTML contents of that web page. And so let's try an
example of that right now. If I go back to this
GitHub repository that we saw way back at the beginning of lecture
this is the lecture zero repository that inside of it has a hello.html page,
that's got hello, world, hello, again, hello, hello, hello. I would like to deploy
that to the internet. And the easiest way
to do this from GitHub is using GitHub Pages
by doing the following. On the right hand side
I'll go to Settings, I'll scroll down to GitHub Pages. GitHub Pages is designed to host
your personal organization or project pages from a GitHub repository. And I'm going to tell GitHub
Pages, you know what, deploy to the internet from my master branch. The master branch is
just the default branch that we've used on
our GitHub repository. We haven't yet gone into
creating multiple branches, but we'll get to that soon. But I'll go ahead and click Save here. And what that's going to
do is enable GitHub Pages on this particular repository and
deploy this code to the internet so that anyone online
could theoretically go and see the hello.html
file that I created before. So if I scroll down to GitHub
Pages, it says your site is now published at this link. So if I go to this link and go to this
link, /hello.html, it's student 50, my GitHub username. github.io slash the
name of the repository, in this case, lecture zero /hello.html. It can sometimes take some time,
but this time it's already done. What you see now is a URL that you
can go to right now if you'd like. You can go to student50.github.io/
lecturezero/hello.html, and what you will see is a web page with
the title of my web page and you'll see the contents of hello, world,
hello, again, hello, hello, hello. And that is now deployed
to the internet. We've deployed our first website to the
internet all just using GitHub Pages. And the beauty of this is
now if ever we make changes to this repository to
the way that it works or update the code by
making pushes to it, we will automatically
update GitHub Pages. It will reflect the latest
version of those changes. So we can add CSS to these web pages,
we can add new content to the HTML, we can add different HTML files,
and it will all deploy to a URL that anyone on the
internet can then visit. And so that's GitHub Pages. And that's something that we'll
begin to explore in project zero. Project zero, which will
be released later today is going to be an opportunity
for you to start using the stuff that we've talked about today. HTML and CSS and Git in order
to create a web page of your own on a topic of your choosing and then
deploy that to the internet for anyone to see ultimately using GitHub Pages
by combining all of these tools. Questions about GitHub Pages or
HTML or CSS or things we've seen? AUDIENCE: Does GitHub Pages render
the CSS and JavaScript, for example, if you go visit the HTML page? BRIAN YU: Great question. So the question is, will GitHub
Pages render a CSS and JavaScript once we get there? Yes, GitHub Pages will allow
us to do CSS and JavaScript, though it's not going
to do everything for us. We'll soon find
ourselves within a couple of weeks finding that there are
things we want to do with our websites that GitHub Pages just isn't
quite powerful enough to do. And then we'll want to
transition using other tools. And that's what we'll stuck getting
into Flask and other web development services that will allow us
to build more dynamic, more interactive websites that are a little
more powerful than just web pages that display the contents of
what we've already shown. But next week we'll dive a
little more into Git and HTML and CSS doing some more advanced
things with figuring out how to dynamically generate
styling for our web sites and going into some of the more
advanced features of HTML5. But for now, that's it for web
programming with Python and JavaScript. Thank you all so much and we'll
stick around a bit for questions.
