Welcome, to Exploring Computing.
Today's video is Webpage Example, "History Blog."
So in our last example, we saw the use of class
in a number of places.
We saw that we created a class for captions,
and a class for photographs, and a separate class
for right photographs versus left photographs.
And this idea of taking divs or other elements we've
been giving, and providing them with classes
can be quite powerful.
One of the places that this often shows up is in blogs.
So here I've got a blog about Stanford History ,
and you could see I've done some formatting on it.
And in fact, you're going to get a chance
to do some formatting on this for your next homework
assignment.
So we will be providing you with the HTML for this file,
but not the CSS.
So we do want you to create CSS from scratch.
But let's go over the CSS that I used in order
to get the current look that we're looking at right here.
All right, so if we think about how this blog works,
there's a number of different elements in the blog.
So there's a bunch of entries in the blog,
and each of the entries has a heading with a title.
And then there's some dates, and I
don't have a footer shown here, but we'll
see that in the source there's actually a footer and then
the number of tags that you can display for each
of the entries on the blog.
And so these are all different elements
that come and show up in blogs.
Now, if you look at the source of a blog,
often you'll see that what they've done is,
they've taken a number of these items, and some of them
might be paragraphs, some of them might be divs.
Some of them might actually be headings.
And they will go ahead and give them classes.
So this is what my source code looks like for each
of the entries in the blog.
And you can see, I've given a class for the entries;
class for the heading, which has the title and the date in it;
a class for the content; a class for the footers;
and a class for the tags that go on the footers.
As I mentioned in the end of the caption example,
there are some new HTML5 elements
that don't actually provide any formatting on their own,
but may be used to provide a bit of semantic information.
So the example that was relevant for that particular example was
there's a figure and a figure caption entry.
And so you could replace the class="entry"
here with the article HTML5 element.
But when I went to look at a number of blogs that
are actually on the web, I didn't see any
of them using those techniques.
Now it could be that these are just older blogs,
and that's why they're using the techniques I'm showing you
here.
Or it could be that modern blogging software has not been
updated to use those elements.
But regardless, the blogs that I looked at
looked pretty close to what we're seeing here.
So we're going to go ahead and continue using this.
OK.
So what I'm going to do here is, we're going to go through
and we're going to take a look at some examples of how I
did formatting with this blog.
And so again, I think the things to keep
in mind are one, this idea that we have a bunch of divs
and in one case, we actually have an h2,
if you look carefully.
The heading there actually does have an h2 there.
We have a bunch of divs and the h2.
And we are classifying them by putting a class attribute value
pair on them.
As I said, this shows up all the time.
And then two, as we go through the formatting
that I did on each of these, we'll
see various different formatting features
that I will point out to you that may
be useful for your own work.
So let's start off with the entrytitle.
And so you can see this is the Leland Stanford Purchases
Land, or the University Establish, or the Earthquake
Devastates Campus.
These are my h2s.
And you can see that I have the h2,
but I've also given the class entrytitle.
And so I'm going to go ahead and write a rule
to apply to the entrytitles.
I suppose I could also use it for h2s assuming there aren't
other h2s on the web page.
You can imagine, maybe I have a sidebar that has an h2,
or maybe some advertisers that use h2.
But I've gone ahead and chose to use the entrytitle class
selector rather than the h2 selector.
And you can see I've given a font-size, a font-weight.
I think I mentioned earlier that there are actually font weights
can go between 100 and 900.
You could also set font-weight to bold.
I've set a color.
And then I think the interesting one
for this entry that we haven't talked about
is, font-family here.
Notice I've actually listed three font families--
Times New Roman, Times, and then serif.
If you list a number of different font families what
will happen is, the web browser will
look for each of these font families.
And as soon as it finds one that matches,
it will go ahead and use that.
So if there's a font that you're not
sure is going to be on the person's computer,
you can go ahead and list several fonts.
And going from the order of the, hey,
I really hope they have this font installed,
but if they don't, let's try this font.
And if they don't have that one, let's try this font.
And then you can end up with either serif or sans
serif, which are two of the primary choices in terms
of design.
And we'll talk about those more in the design,
web-design lecture.
Anyway the main point I wanted to mention here
is just this idea that you can list several fonts
for the font-family, and it will go with whichever one
it finds first in the list.
OK.
Here's how I set up the entrydates.
If you look in the image on the right,
I know it's a little bit small there.
But you can see the dates are on the far right
and they are alongside the actual blog entries.
And how I did that, I did that by using float.
So I floated the entrydates to the right.
I didn't have to set a width on this.
I know in the caption example, I talked
about how you should be careful about to set widths on text
when you're floating it.
However, in this case since the dates are actually years,
and they can never be more than four characters,
that wasn't an issue.
You are going to want to set a width on floating elements,
if they are text.
And if they are potentially long,
because as you may recall from our discussion
with the captions on the images, if you
have a really long caption and you don't put a width on it,
it will expand out to take as much of the web page as it can,
including the entire web page if it's a long enough caption.
You can limit that by putting a width on it.
Here I'm not limiting it again, just because I know that they
are only four characters long.
OK.
For each of the entries I have-- you
can see I have those red lines running across, above,
and below each entry.
How did I do that?
Well, here I put a top border, which is two pixels, solid red.
And in addition, I put a little bit of extra padding
in margin above each element.
You'll notice that the padding in the margin
actually lists four different values.
What is up with that?
Well, here's how that works.
If you go ahead and set a single value,
it is the padding or margin for all four directions.
If you set two of them, you're setting a top and bottom
and then a left and right.
And if you set all four, it starts at the top,
goes the right, goes the bottom, goes to the left.
So in this case, I could have said padding top and margin
top, but I thought it'd be more interesting to switch things up
so you could see this other technique.
Now one of the issues that comes up
is, this particular rule is putting a red line above each
of the entries because I have the border
top set to two pixels.
But I'm not actually setting a bottom border.
So how am I going to get the bottom border?
There are several ways to do this.
I think the most common technique
is to add a class to the last item.
And you can see, here's the last entry here.
I've added this class last onto it.
And then I've written a rule that
applies to just items that have class last.
And so I've given the last item a border bottom
of two pixels, solid red.
And so all the entries have a top border,
and the last entry has a bottom border.
That's how I get those four lines-- the three on top
and then the fourth line below all the elements.
But there are other ways of doing this.
So if you want to get fancy, we talked about this briefly.
I mentioned this briefly when we were
talking about pseudo classes, that there
are these last pseudo classes.
So there's a last child.
And a last of type.
And so here's the last child.
And so you can see, all my entries actually
fit in this div called main.
And so if I write a rule that applies
to the last child in main, that will apply to that bottom div.
I could also write a last-of-type rule.
And so here I'm saying, I want this to apply to an entry,
but I only want it to apply to the last of that type.
So the last thing with an entry class, and you
can see that I can go ahead and use
that to put a bottom border on, just the last of my entries.
OK.
So originally, I did not have a footer,
but when I decided to turn this into a homework
assignment for all of you, I wanted
to have a little bit more interesting stuff for you
guys to play around with.
So I added a footer.
But I wasn't really quite sure what to do with the footer.
So I kind of cheated.
So I thought I'd show you this little technique
that I used to cheat.
And that is, you can actually make items disappear.
There's two different techniques to make it disappear.
This one is the display--none.
And so what this does is, this just
completely removes that element.
So you can see here, I've got an entryfooter here.
If you look at the bottom of my HTML section here
you can see that there's a div class entryfooter
and that there's a bunch of entrytags.
For this particular item I decided
I didn't want any of this to show up.
By the way, you guys don't get to do this for your homework.
Do something interesting with the footers and the tags.
OK.
So by setting display to none, it just completely
disappears as if it did not exist.
The other way to make something invisible
is to set visibility to hidden.
This actually does something a little bit different than
saying display--none though.
If you set the visibility to hidden what happens
is, the space where that element would have been,
if it had been placed normally, will still be there.
The item just will not be shown on that space.
So if we were to do this, you'd actually see some blank spaces
for those entryfooter divs down at the bottom of each
of these entries.
So you'd see a little bit of extra space
where these circles are.
I didn't actually do visibility--hidden so the image
you see on the top right is actually with display--none,
just as the other images in this series have shown that.
But you can play with these two settings,
display--none or visibility--hidden.
OK.
Also, we did this with the caption example,
but I thought I'd just mention it really briefly.
I did surround the entire thing with a div.
I gave it the ID all.
And then I used the auto on the left and the right margin.
That's how I went ahead and centered everything.
OK.
So this idea of taking a bunch of elements
and adding a class to it, that actually
turns out to be pretty powerful.
And the idea here is, HTML does not necessarily
have tags for everything we think might
be potentially interesting.
And so if there isn't a tag available, a specific tag
available, we can go ahead and sort of add one of our own
by using a div or one of the other tags,
and actually give it a class.
And so there's a group that's really gone and run
with this sort of idea.
And that's the microformats organization.
And so we're going to take a look at two microformats.
The first one we're going to take a look at
has to do with reviews.
So suppose I was looking at thinking
about going to the movies--
sadly, can't do that right now.
But I heard this Avengers Endgame movie was out,
and I wanted to know, hey, is Avengers Endgame any good?
And so I could go ahead and Google it.
And by Google Avengers Endgame review,
you can see that some of the reviews
actually have these stars in Google.
So Google somehow knows that those are reviews
and that they've given them a certain number of stars,
and it's able to display those stars in the search results.
How does it know that it's a review
and that the reviewer gave a certain number of stars?
Well, Google supports a microformat called hReview.
And so here's the hReview, what the hReview format looks like.
And this is an example from the microformats.org website.
And if you look at this, you'll see
that throughout the HTML here there's
a whole bunch of classes.
I'm just going to focus on two of them up here at the top.
There's a class hReview that Google can look at
and say, oh this does follow the hReview format.
And then there's a class rating.
And by Google looking for that class rating
and seeing the number there, that's
actually how it can determine how many stars
to put in the summary.
Another microformat that shows up fairly
frequently is the vCard or hCard format.
And this is for virtual business cards.
And so the idea here is, people often
have business cards that they can hand to people
so people can get information like their contact information.
And so the idea behind the hCard or vCard
is that you can put that sort of information on your website.
But it's not enough to just put the information
on your website, if you want people
to be able to pull that information off and store it
in a separate program.
However, if you were to put that information on your website;
notify people that you are using this specific technique,
in this case, the card technique;
tools that are designed to work with vCards
can search through the HTML tags looking for specific entries
with specific classes.
So you can see here, I can see that there's a class street
address, there's certainly no HTML tag for a street address,
but by putting class="street-address" on it,
I'm letting any tool that's designed to work with these
vCards know, that's my street address.
It can go ahead and pull the information out
of that tag, 169 University Avenue, and it can go ahead
and stuff it into the virtual business card database.
Similarly, there's a postal code,
there's a telephone number, there's an email address.
These are all things that don't have
HTML tags associated with them.
We will discover later, there is an email
for a format [INAUDIBLE] where people can type in email.
But in general, things like the postal code, the country name,
telephone number, and presenting the email as
opposed to entering the email into form.
These do not have HTML tags.
But by putting classes on them, I
am able to provide classification information
that a program designed to read web pages
can go ahead and pick that information out, and go
ahead and process it.
So again, I just wanted to emphasize this idea
that putting classes on elements can
be used for quite a number of different purposes.
All right.
That's it for this example.