Welcome, to Exploring computing.
Today's video is introduction to HTML hypertext markup language.
So in the last lecture, we saw the origins of the world
wide web and we spent some time understanding
what hypertext means.
And previously in the last lecture,
we took a look at HTTP, which is a hypertext transfer protocol.
We're going to begin this lecture
by considering what the relationship between the HTTP
protocol and the HTML hypertext markup language is.
And then we're actually going to study how HTML actually works.
And in the following video, we're
going to get some hands on practice using HTML.
By the end of these two videos you
should be able to make your own web pages.
Let's start off with a quick review from last lecture.
So you recall that HTTP stands for hypertext transfer
protocol.
And this is a protocol that governs how to computers
on the world wide web interact.
And so a computer can make a request
to a web server asking for a particular file
and the web server will respond by sending.
The file the files actually can have
any one of a number of formats.
The most common is probably the HTML5,
which is what we're going to be talking about in this lecture,
but cascading style sheet files or CSS files
are also quite common.
And we'll stay that in the next lecture.
And of course the image files that we
talked about in our second lecture of the quarter are also
commonly used.
And it turns out that HTTP does not actually
specify the formats of any of these files.
HTTP simply tells two computers on the web how one computer can
send a request to another computer asking for a file
to be sent back.
It does not specify the format of the files themselves.
And so there are many other types
of files that could be sent by the world wide web,
such as video files.
And again in fact, you could come up with new file types.
And HTTP doesn't really care what the file types are,
it's just designed so that one computer can request
a particular file of the other computer
without regard to what the internal format of that file
is.
Now as HTML stands for hypertext markup language.
And as I suggested is the most common file format.
So that's what we're going to take a look at it now.
And it is a key file format and any web page
on the world wide web needs to have
an HTML file in addition to whatever other files are
included.
So as HTML as I've suggested stands for hypertext markup
language.
And we've seen what hypertext means from the last lecture.
And language more or less refers to what you'd expect.
And it turns out that computer languages
have many similarities with human languages.
They have their grammar, they have their vocabulary.
They're not that different from French or Japanese
or whatever other human languages that you've learned.
But this other part mark-up we haven't talked about that.
So let's talk a little bit about mark-up and what
that all means.
So the term markup comes from publishing.
So what I have here is I have a worldwide web page
from the Stanford Daily.
So one question to ask is did the author
of this particular article make decisions, like whether or not
a particular photo should appear in the article
or whether the caption appearing underneath the photo
should appear in with a light gray background.
If the date of the article should appear in
sans sans-serif font in light gray?
Or if that first sentence in the article was written in bold.
So I've not talked to the particular author
of this article George Chen, but I have talked to other Stanford
Daily writers and they tell me that that's not how it works.
And in fact that's not traditionally
how it would work in publishing.
So that's not really a surprise.
So typically what's going to happen
is the author is just going to write the text of the article.
And then somebody else say an editor will go and make
decisions on what formatting should appear in the article.
So we could say Oh I want this first section up here,
this title I wanted to be on bold 24 point font.
And maybe I want that byline underneath it
appearance sans-serif font.
We'll talk about what sans-serif means in another lecture
if you're not familiar with the term.
And then I want to go ahead and insert a photo and there.
So these are all decisions that somebody other than the author
would make.
And traditionally, the editor would actually
write the comments down using what's called mark-up.
So what I've done here is, I've marked up
the original text from the author
providing mark-up comments that will
be used by whoever does the typesetting for the publishing.
And so this is really what HTML5 is all about.
So an HTML we're going to use this form of markup,
in order to tell the computer how
to display their website pages.
So let's take a look at HTML.
We've seen hypertext is, we've just learned about markup,
and this is a language.
And I'll be talking in another lecture a little bit more
closely about the similarities and differences
between human languages and computer languages.
It turns out an awful lot of what
drives HTML though is this concept of markup
that we've just gone over.
So let's say we want to create a web page that says go Stanford.
And we want to go to appear in italics and Stanford
to appear in bold.
If I were working with a human typesetter,
I could just go ahead and do my scrolled markup
using a pen like this.
But that's not going to work with a computer.
Computers are getting better at reading handwritten stuff,
but we're not really quite there yet.
So this is what it's going to look like in HTML.
Basically I'm providing the same information
that I would to a human typesetter.
But I'm going to do it in a more formal manner
that's easier for the computer to process.
What we're seeing here.
These are what are referred to as tags.
The tags often work in pairs.
So I have a start tag and end tag.
Where the tag is the same as the start tag except for
has a slash front of it.
We also talk about these elements.
So the element consists of the start tag, the end tag,
and whatever goes between the start and end tag.
Here I have an eye element, which
stands for in italics element, and a B element,
which stands for bold element.
And in fact, the key to learning how HTML works
is to learn all the different tags.
This is actually a fairly large subset of the tags.
And we'll be providing you with a list of tax
that you can look over.
There really aren't that many tags.
So what I recommend is at some point
you either look through the list that
will be providing you which is probably
the vast majority of attacks that
are used in widespread use, or you
look at an official list, which is a bit bigger than the list
I'll be providing you with and just get a sense of what
the tags that are out there.
You don't need to memorize the tags,
but you do want to have some familiarity with what's
available.
And then when you need a particular tag you're like Oh,
I want to create a bulleted list to remember.
Oh, I seem to recall there is a tag for that
and you can go ahead and look it up.
We sometimes refer to the elements as containers.
And in this particular case, I have the italics element,
and then you can see that the bold element contains
both the italics element as well as the word Stanford.
You do need to maintain this containing relationship.
So if I try and mix the two as shown here,
that actually turns out to be illegal.
So don't do that.
An element must be completely contained
within another element.
We can't have an element partially
containing an element.
Sometimes the tags themselves don't
provide sufficient information and we need
to add additional information.
Suppose I wanted to link the word Stanford here
to the actual Stanford website?
It turns out that the tag used to link from one website
to another is a tag, which stands for anchor.
But I need to provide additional information telling what
the website I'm linking to is.
And so here I've add it in what's
called an attribute value pair.
A stands for hypertext reference.
And I'm providing the anchor tag with additional information
telling it where the anchor is linked to.
Some tags don't actually work in pairs.
So suppose I want to create a line break.
A line break is going to allow me to basically have a carriage
return in the middle of a line.
I could have a line break start taking a line break and tag,
but that doesn't make a huge amount of sense.
And so this particular tag can be done without A and end tag.
And I'm going to indicate that using a closing
slash as shown here.
One thing that you'll notice if you
start trying to create these web pages
is, that it turns out that if you
put carriage returns or spaces or tabs into a document,
those actually all get combined into a single space.
So basically what HTML is going to do
is it's going to take any what it's
referred to as white space.
So in computer science we refer to white space,
we're talking about any of the characters which can create
blank space on a web page.
That includes the carriage returns, the tabs,
and the spaces.
It will take all the white space you enter
and just treat it as a single space.
So here I said go Stanford in my source.
That's in my source HTML.
I put in a couple carriage returns,
I put in another go cardinal, put in a couple of character
turns, and then when it's actually gets displayed,
it's as if those carriage returns are any tabs I entered
or whatever I entered it's just going to be
treated to a single space.
So what's the solution here.
Well, it turns out that there is a special tag, which
I need to use in order to get these to parent paragraphs.
So there's a paragraph tag.
And so I go ahead and create two paragraph elements here.
You may be wondering what the relationship with the paragraph
tag is and the line break tag we saw earlier.
Noticed these paragraphs have a blank line between them.
If I were to use a line break as I show here,
there is no blank line between the two lines.
So the line break does create a carriage return between the two
lines, but it does not create a blank line.
Whereas the paragraph typically will
create a blank line between the two paragraphs
although we'll see next lecture, when
we start learning cascading style sheets
you can actually control exactly what the paragraph tagged as.
If you want the paragraph to create,
two blank lines, great go ahead do it.
If you want the paragraph tag to create no blank lines,
you could do that as well.
We'll learn about that next lecture.
Also notice because HCML doesn't care about extra white space.
If I have the line break tag followed
by a carriage return that creates the web page
we've seen here.
But if I don't have a carriage return,
and I just have that all in one line,
I get the exact same result.
Another tag that's pretty useful is the h1 tag.
It's used to create a heading.
And so h1 is the most important heading.
But there's actually six different types
of headings with h1 being the most important and h6
being the least important.
You may be wondering at this point what
do I want to set the foreground or background color of my text?
Or what do I want to change the font?
Or how can I control alignment and have it right
aligned or left aligned or center aligned?
And it turns out that while once upon a time,
we did do this with HTML.
We no longer do it with HTML, we now
do it using cascading style sheets.
And this is a legacy of our physics past.
So remember HTML was originally created for physics papers
and they really didn't need that much formatting.
But modern web pages are created by graphic artists
and other media professionals and they
want a lot more control.
So we've taken a lot of the simple formatting that
was available in the original HTML four physics papers,
and we've actually moved it to a second language called
cascading style sheets, which I'll talk about next lecture.
In addition to the tags, which we've
gone over which structure the web page itself,
there's some additional tags, which you need
to provide for all web pages.
And what you're seeing here is here's
some additional tags that are needed to have
a well formatted HTML file.
Up at the top I've got the doctype.
This is a bit of an odd tag and it doesn't really
follow the syntax rules of the other tags.
You could see it starts off with the exclamation point
and has a capital doctype.
It standalone but does not have end in slash.
You do need to include this, although as you
can see from my little comment here
it's mostly not used anymore, but you do need to include it.
It used to specify all sorts of things like hey,
this is HTML 4, this is X HTML 1.
And we'll talk a bit later, but the web browser manufacturers
are trying to get rid of all the version numbers.
However, if you do not have the version at all,
it turns out that this is going to cause the web
browser to think that you have a really, really old page created
back before the doctype tag was included.
And it will throw your web browser
into weird code quarks mode.
And you don't want that to happen.
So even though I'm just specifying
the doctype is HTML instead of HTML 4, HTML 5, ex HTML 1,
you still do need to provide the doctype SO don't forget that,
otherwise you may get some really weird looking web pages.
So there's an HTML start and tag that surrounds everything
and then I have this head section and body section.
So let's take a look at those.
The head section provides information about the web page.
And the body section provides the actual contents
of the web page.
Let's take a closer look at that head section.
You can see that the head section includes the character
encoding.
And this is what we talk about the first section
where we talk about ASCII.
We talk about ISO-8859, which allowed us to do something
like Western European, Eastern European
Cyrillic and a couple of other things all fitting
into a single byte.
And then we talked about Unicode.
And so this is where you're going
to specify what encoding your HTML source file is using.
And then there's a title.
And the title is what appears on the tab in the web browser.
And noticed from this image here that the title does not
actually appear on the web page itself.
So in this case, I've used the title for tab.
And notice title for tab does not actually
appear in the actual content of the web page,
it only appears on the tab of the web browser.
So this website is what I mentioned earlier.
The head is things about the web page
it's not the actual web page content.
And we'll see throughout our study of HTML and CSS
that there's a variety of different information
that goes into the head.
So for now it seems pretty simple,
but we will be adding some extra information into this section.
And then the body is whatever actually
appears on the web page itself.
There are a number of different versions of HTML
as I alluded to a bit earlier.
The current version of tmos HTML5, but as I suggested
the web browser manufacturers are not
super happy with version numbers.
I think one of the things that's going on
is they don't like having a specific version numbers.
And then people pointing at them saying,
hey, you are not fully supporting this version.
So this is a reason why we've got rid of the version
numbers in the doctype.
In addition to just the different version
numbers like a HTML 3.2, HTML 4, HTML 4.1, HTML ex 1.
There are several variants of HTML.
The varience that I'm using is called ex HTML.
And ex HTML has a set of more formal rules
than standard HTML.
So for example, a standard HTML if I were to read/write head
for the head section, I could write it in lowercase,
I can write it in all caps, I could even mix the casing
having a capital H lowercase e and uppercase a, lowercase D
and those would all be legal.
And ex HTML though like wait, wait, wait,
this is out of hand.
Please write your tags in lowercase letters.
That closing slashed I had on the line break,
that's actually not necessarily an HTML,
but I use it because I like the students when
they see that I've written a tag that
has only a tag instead of a pair with a star tag it and end tag.
I like them to see that at the end
and realize immediately that's a standalone tag,
this is not part of a pair.
And then finally is another example
between ex HTML and standard HTML.
Ex HTML requires that all attribute
value pairs have the value in quotes,
whereas HTML has a bunch of different roles
for whether or not quotes are necessary.
So basically the HTML variant I'm using
is just going to lead to more uniform looking code.
And I would strongly recommend that you use it for your code.
I think it's actually quite common.
Probably amongst professional web pages
it's used more often than not.
All right, so that's our little introduction to HTML.
In the next video, we're going to take you on a hands on look
on how to create an HTML file, and how to load it into a web
browser, and how to test it.
I'll talk to you soon.