Welcome to Exploring Computing.
Today's video is introduction to HTML--
creating a web page step by step.
Now, this example web page we're showing right here--
we aren't going to quite get to that level of sophistication
today, but we will very shortly because that's actually
on next week's homework assignment.
For now we're going to start off with something simpler.
So on the previous video, we talked about what HTML was
and we talked a bit about the different rules of HTML.
What we're going to do now is walk you
through what you need to do in order to execute your own HTML
web page.
So the first thing we need to do is
we need to get a text editor.
Now, I need to clarify that a text editor is not
the same as a word processor.
So something like Microsoft Word is
designed to create formatted documents
using a process called what you see is what you get,
where when you're editing it, you
can actually see what the printed
page is going to look like.
It turns out this doesn't work that great with web
pages because what you see is not what you get.
With a normal text document, you actually
have complete control over what this printed
page is going to look like.
You have control over the device you're going to print it on.
You have control over the size of the page.
None of that happens in HTML.
You are creating a web page that will
be seen on many different devices
with many different characteristics.
So this what you see is what you get
or as we sometimes refer to in computer science
WYSIWYG does not work well for web pages.
So we want to use a text editor and there's
a variety of different text editors that are out there.
I'm going to recommend using Visual Studio Code.
You can find it by just googling it.
I should clarify that Visual Studio Code is
different from Visual Studio.
They're both products of Microsoft
and they run on Macintosh, Windows, and Linux
and they're used by professionals.
So this is a really great text editor.
It's used by a lot of professionals
and it's free, so win, win, win.
But you can use other text editors.
Sublime and Atom are two other text editors
that will run on any of the different platforms
you might be on and are used by professionals.
If you're on the Macintosh using TextWrangler,
BBEdit is totally fine.
If you're on the PC, if you've got something like Notepad++,
that's fine as well.
The key point here is you want to use a text editor, not
something that edits rich text, meaning text
with bold and italic and things like that.
If your text editor shows content
that has bold and Italic in it, that's
not the kind of text editor that you want.
In particular, Macintosh users should not use TextEdit.
That's the standard built-in text editor for Macintosh.
TextEdit has direct support for rich text.
It's possible to use TextEdit for creating HTML
if you know what you're doing.
But it's a little confusing on actually how to do it
and we found many students have trouble with it.
So we strongly do not recommend that you use TextEdit.
So again, I recommend Microsoft Visual Studio Code.
It will run on both Macs and PCs,
but there are a variety of other text editors you can use.
Make sure it's a text editor and do not
use the standard Macintosh TextEdit.
You should also consider turning on file extensions
display in your operating system.
Computers set up for consumers don't show file extensions.
And so these are things like .TXT, .HTML, .DOC, .PDF.
These go on the ends of files and they indicate
what type of file it is.
And typically, if a computer's set up for consumers,
it's going to be hidden.
This is going to get a bit confusing, though,
when we're working with our web pages
and we're doing programming.
So for the next couple of months,
you guys are going to be doing some programming work.
And I do recommend that you turn on file extensions.
And you can see here--
my images here-- on the left, I have the file extensions
on and on the right, I have the file extensions off.
Even though there are several files that
appear to have the same name, they're
actually different because they have different extensions.
And so it is easier telling what's going on with the file
extensions are on.
I do recommend you turn them on.
I'm not going to go over actually
had to turn them on since it is quite different from one
operating system to another.
And I just recommend you just go ahead and google it.
OK, so here's the basic steps we're
going to use to create and edit web pages.
We're going to start with the starter file.
So I'm going to provide you with a starter file.
I recommend you start with that.
You're going to edit your text.
You're going to validate it for syntax errors.
So this is errors in the tags that we talked about
in the previous lecture.
Once you complete getting rid of all the syntax errors,
then you're going to try and load it into your web browser.
You're going to see if you like what the result is.
And if you like the result, great, you're done,
or you can continue extending it.
If you think there's a problem with how it appears,
you need to go back to step two and edit your text,
revalidate it, reload it in the web browser, and so on.
So let's go over each of these individual steps.
So as I mentioned, I do recommend you
start with the starter file.
We will providing you with a starter file.
There's no need to memorize all of the structural information
that appears in every HTML file.
If this were a regular quarter, we
would actually provide the structural information for you
on the midterm and the final.
But since there's no midterm or final,
you don't have to worry about that at all.
Anyway, use the starter file.
There's no reason to memorize all this stuff.
OK, once you have your starter file in hand,
you need to open it up in your text editor.
Now, the thing about HTML files is if you just
double-click on an HTML file, it's
going to open up in the web browser.
It's not going to open it up in the text editor.
So you need to explicitly open up the HTML file in your text
editor.
So there's a variety of ways to do this.
Probably the most straightforward method
is to go to the text editor's File menu
and choose Open and go to wherever your starter file is.
I commonly actually just drag the file
over from the Desktop/Finder--
desktop if you're on PC, finder if you're on the Macintosh.
I just drag it-- grab that file icon
and just drag it into the text editor.
You're welcome to do it any way you want.
Just remember if you double-click on that file,
it's going to open it up in the web browser, which
is not what you want.
You want to open it up in the text editor.
OK, so you've got your starter file.
You've got it in your text editor.
Just go ahead and edit it and add in some text.
And so here's my example here and I've added it
and it looks great.
Now, it turns out that once you've
done that, you could just open it up in your web browser,
but we don't recommend this.
We recommend an extra step.
And this extra step is actually going
to save you a great number of points
over the quarter on your homework.
So definitely take this next step.
This next step is validating your HTML file.
So what a validator is-- it's a program
that is designed to look through your HTML file
and find any errors on that HTML file.
The thing to keep in mind is web browsers
are not designed to show errors on a web page.
If I'm visiting somebody's web page--
like let's say I go to the New York Times, I go to Amazon--
if that web page has errors on it--
and there are a shocking number of professional web pages
that have what might be considered errors.
Often, they're there because there's
some new extension that's not actually
technically part of the language yet that they want to play with
or there's old legacy stuff that shouldn't really
be there anymore, but they leave it in there.
But anyway, if I visited one of these web pages
and there's an error in it, do I want to know about it?
No, it's not my web page.
So web browsers are designed primarily for consumers, not
for web developers.
There are ways that we can turn on some error
messages in the web browser.
But the easiest thing to do is just
to use this validation process.
So remember, the web browser is not
going to tell you if there are errors on your web page.
It's just going to happily ignore them.
Now, one thing you might be wondering
is, if my web page supposedly has errors
and I can't actually see them, do they matter?
And here's the thing--
different web browsers will interpret erroneous code
differently.
So it could be that the web browser that you're
viewing your errors in more or less
figures it out what it is you're trying to do
and your web page looks perfectly normal in that web
browser.
But if we're professionals, we need
to check it on a wide range of web browsers.
We're not supporting just one web browser.
We're supporting many web browsers.
We need to support Chrome, Safari, Firefox, Edge.
And then we need to support a different number of hardware
platform-- so Windows, MacOS, iOS, Android.
And then each of these different devices
is going to potentially display a web page differently
depending on what version of the operating system I'm using
or what version of the web browser I'm using.
And so if we were professionals, we
would have rooms of different hardware devices
with different software installed
on it so we could check our web page against all
these different options.
We're not going to do that for our class.
But by validating your file, by making sure
that there are no errors in your file,
you are greatly reducing the chances
that your files can appear differently
in one of these web browsers.
So definitely validate your file.
And we're going to validate your file.
And if you have errors in your file when we validate it,
you're going to lose points.
So if for no other reason, validate your file because--
otherwise, you're going to lose homework points.
OK, so there's a variety of different ways
to validate your file.
We're going to use an online service from the World Wide Web
Consortium.
This is the official consortium that's
in charge of web standards.
And so you can see the URL for it here on the screen.
And so on the right, this is what the validator service
looks like.
And in the middle tab, there's something
that's marked File Upload.
You want to select that.
That's going to allow us to upload a file from our computer
to the World Wide Web Consortium's validator service
where it can check on their computer
and see if there are any errors in our file.
So go ahead and check on that.
After you click on that, you'll also
see a series of checkboxes.
I recommend that you check the box that says Show Source.
That's going to make it a little bit easier
telling what's going on.
One of the nice things about showing the source
is it does show you where the individual line
numbers are and you can compare that to the error numbers.
But if you're using a good text editor like Visual Studio Code,
that will show you the line numbers as well.
Anyway, key point here is just go to validator.w3.org.
Notice that's org.
This is a non-profit organization.
And upload your file there and check it out.
So here's what the results will look like.
This is a modified version of the HTML file
I showed a couple of minutes ago.
The HTML file I showed you a couple of minutes
ago doesn't have any errors.
But I wanted to show some errors,
so I modified it and put in a bunch of errors
and this is what it's going to look like when you have errors.
Now, a couple of things about having errors--
first of all, everybody has errors in their code.
That's particularly going to be true when we start programming,
but it's also going to be true for your HTML.
So if you have errors in your code, congratulations,
you're human.
Second, you may end up with what appears to be a lot of errors.
Don't be intimidated by lots and lots of errors.
Typically, what's going to happen as soon as there's
one or two errors somewhere at the beginning of your code,
it causes a cascading sequence of problems for the validator.
So if you see 35 errors, there's probably only three.
Probably what happened was those first couple
of errors caused the validator to not understand
what's going on and now it's marking a bunch of stuff
as errors when it's not actually errors.
So just don't get intimidated if there's
a huge number of errors.
Take out the first error.
You can revalidate it then and see how many
errors that takes out of your list.
It's likely to take out more than one error on the list.
So don't be shocked if there's a lot of errors
listed by the validator.
That doesn't mean those are actually all real errors.
Start with the first one on the list.
Also, the validator will often notice the error on the line
after the errors occurred.
What's happening here is the validator
is looking for a particular thing in the code
and it's expecting it to occur on the previous line.
And it's not until it gets to the next line and it realizes,
hey, I didn't see that thing.
So for example, we've talked about how
attribute value pairs.
The value should have quotes around it.
And so what can happen is you have a starting quote.
You forgot to put the ending quote.
It's looking for that ending quote.
It's looking for the ending quote.
It's not until it gets to the next line when it says, hey,
I think I should have seen a quote.
I see you're starting a new tag here.
Didn't we need to end the previous tag?
And that's where it's going to mark the error.
So often, the error will occur on the line
before the line number the validator actually marks.
OK, now, we've validated our code.
We've removed all the errors and there's a little cycle here
where you're going to go ahead and try to validate.
You're going to find some errors.
You're going to edit your code.
You're going to revalidate.
You're going to find some errors.
You're going to change your code.
And you're just going to have to cycle through that until you
removed all the errors.
Let's say we removed all the errors.
OK, now we're going to load it into the web browser.
So as I mentioned earlier, web browsers all actually
act a little bit differently.
For the web pages we're making, this is unlikely to occur,
but it may occur.
So if we were professionals, we would
be testing in a whole bunch of different web browsers
on a whole bunch of different hardware platforms.
We're not going to do that for our class.
We want to use one standardized web browser
and so we're going to use Firefox.
So get the latest version of Firefox.
That's what we're going to be grading it on.
All right, to open it up, again, don't double-click it.
Depending on how your computer's set up,
there's a variety of different web browsers
that are probably the standard web browser
you use for day-to-day browsing and that's
what it's going to open it in.
Instead, start up Firefox, go to File, Open or drag
the file into Firefox while it's open,
and just drag it from the Desktop/Finder
into the web browser and it will go ahead and open it up.
OK, if it looks great, great, we're done or great
and I want to add some more to it and I want to enhance it.
Either way, there is this continuing process
where I edit the code.
I revalidate.
I load it into the web browser.
I see if there are problems or if I want to enhance it.
And so there's this cycle.
It's called the edit debug cycle and this is something
that programmers actually spent large parts
of their day working on.
So it's definitely something you're
going to be doing when you start working on web pages.
All right, so that's it for our basics
on how to make some web pages.
And you'll get a chance to practice with us
on the next homework assignment, which will be coming out soon.