Welcome to Exploring Computing.
Today's video is Creating Webpages, Adding Images.
So, this is going to be part of a continuing series where
we take a look at how to add different elements to our web
pages.
Previously, we saw how to create links between our web pages,
and that's certainly critical.
Because as we've talked about, the thing
that really makes the web, the web, is that hypertext.
And so, if you've watched those videos,
you now know how to do that.
But while those links are great, if all our other web
pages have on them is text, that's
going to be pretty boring.
So, in this video, we're going to talk about how
to add images to our web pages.
It turns out that there's a fair number
of options and some subtleties here, which may not be obvious.
So, we're going to go through the different options,
and how to get everything to fit together.
I'm going to start off with this image from Venice,
that you've seen previously from the first week.
And this is mostly going to be our example image.
Although, there are a couple of images we'll see along the way.
So, here's how you're going to add that image to your web
page.
There's an img tag.
Notice that the closing slash at the end of the img tag
indicates this is a standalone tag.
There's no start and end tag.
And there's an src property, or source property, this is a URL.
And it can be a relative or an absolute reference.
I'm using a relative reference, which you'll
recall from our discussion on links,
means that this Venice.jpg image file is
in the same location as the HTML file that is referring to it.
And then, you're supposed to have an alt tag.
Alt tag is information used for a variety
of different purposes, most notably to increase
accessibility by those who may not be able to see your web
page and are using screen readers, which
read the web page to them instead
of viewing the web page.
It is required.
If you do not have an alt tag, you
will have an illegal HTML file.
OK.
So, just using the img tag, as shown here,
this will put the image on the web page.
But the next question is, how does this image
relate to the text around it?
And this is where things get a little bit messy.
So, what I've done here is, I've added some extra text here.
So, this img tag and the text, that is all in my HTML source
file.
As far as the Lorem Ipsum goes here--
This is randomized text from Cicero's, On the ends
of good and evil, and it's commonly
used as placeholder text for designworks.
So, you'll see this in a fair number of places,
if you start trying to learn how to do design.
And so, we're just going to go ahead
with this traditional random text.
OK.
Let's take a closer look at our page here.
If you look down in our zoomed in view
here, and look at the relationship between the image
and the text, you'll see that the text comes down,
not below the image, but actually alongside the image.
So, this looks a little bit odd.
And I think-- The way I like describing
it is, it's as if the image were a giant letter.
So, let's say you wanted to have a giant L there,
this is what the image is doing.
So, we're going to use the letter
O. And here's a diagram where I created a giant O.
And you've all probably seen those fairy tales
where they've got Once upon a time, and that O is really big.
And so, here's my big O here.
And then, if I go ahead and have that img tag,
followed by the nce upon a time, you
can see that this image acts is a gigantic O.
So, as I suggested it's like the image
acts as a gigantic character.
And just to emphasize that this is not something
that just occurs at the beginning of a line.
Here, I've used my image in two places.
And you can see that each time my image has ended up
looking like a gigantic O in the middle of our line of text.
So, this is probably not what you'd want.
So, let's go back to our Venice image here.
And we're going to try and correct this.
There's a couple different options.
I think one of the more interesting ones
that you are likely to need if you've
got a web page of any complexity,
is something called float.
OK.
So, let's go back to our image of Venice here.
I'm going to start using some style rules for how
to control how our Venice image is appearing on the web page.
The first thing I need to do, though,
in order to get this to work is, I need to add an ID to Venice.
So, let's go ahead and do that.
I could also use a class.
I suppose I could write a rule that applied to all image tags.
Remember, we had the type selector.
So, I could write a type selector
that applied to all images, but that
may not be the best option.
We'll have a separate video where
I go over an extensive example, and we can talk
about these different options.
For now, I'm just going to go ahead and give my img
tag an ID.
I'm also going to increase the number of paragraphs
of Ipsum Lorems, just so we've got a little bit more
interesting text to work with.
All right.
So, I'm going to go ahead and add a style rule for the Venice
ID here.
So, remember, that's the number sign Venice--
To use an ID selector.
Whereas, if it were a class selector, I would use the dot.
And then I'm going to use this new style property we haven't
seen before called float.
And as you can see here, float floats the image
to the left side of the web page,
and the text flows alongside of it.
It's quite different than what we saw before,
a minute ago, where the image was
acting as a gigantic character.
Now it's clearly an image floated to the left side
of our web page.
And so, as I mentioned a little earlier,
this is a great technique that you
can use on a lot of different web pages.
And that, of course, is a float right that
moves the image to the right.
So, one issue that comes up is, where does the image actually
appear?
And what you need to do here is, you
need to list the image before the text you
want to flow alongside of it.
Previously, I listed the image first,
followed by the paragraphs.
And that put the image alongside the very first paragraph.
Again, the first paragraph was listed below the image
in the actual HTML source.
Now I'm going to move the paragraphs
so I have the first paragraph before the image, and then
the second paragraph after the image tag.
And so, you can see that I've done that here.
And when we look at the result, you
can see that, sure enough, the image
floats alongside the second paragraph
because the image appears before the second paragraph.
So, remember, image needs to be listed before the text.
It's going to float alongside.
And then we can actually stick the image in the middle
of the paragraph as well.
And so, here, that's what I've done here.
You can see, I've got the paragraph,
and I've sort of highlighted where
the paragraph starts ends.
And let's take a look at that word there.
I have no idea how to pronounce Latin,
but I'm going to claim it says Duis.
That appears immediately after the img tag.
And if we look at our image, you can see that, sure enough,
that word appears roughly after the start of the image.
So basically, the web browser is trying
to get it as close as possible to the image,
without having a huge, massive blank space there.
So, you can kind of play around with it.
But it does seem like--
I know many students find this behavior a little bit odd.
Just remember, you want to have that img tag
before whatever you want alongside of the image.
Let's go ahead and take this back to our first example
where we did the float left.
Now, if we're looking at the float left here,
and we look at what the web page actually looks like,
you'll notice that there's an awful lot
of crowding between the photo and those words, Lorem Ipsum.
That clearly does not look right.
We really want some space there.
And we can go ahead and do that by adding a margin.
So, here I've added a margin of 15 pixels.
And this actually gives us space on the right,
where we were really noticing we have a problem.
It's a little hard to see, but there's also
space on the left side of the photo, and on the top
and the bottom of the photo.
So, when we say margin 15 pixels,
we're saying put a margin around the entire image on the top,
bottom, left and right.
We can control this individually as well, if we want.
So, I'm going to go ahead and set the margin on the right
to 30 pixels.
I'm getting rid of the overall margin.
So, my 15 pixels on the top, bottom, and left are gone.
It's a little harder to tell at the top and bottom are gone.
I think, if you look closely, you
can kind of tell that the 15 pixels is gone on the left.
So, there is a little bit of slight space still left there
by the web browser.
And so, the basic point here is, I can control each of the four
margins individually.
Notice that the way it works is, margin dash
followed by the specific margin, as opposed to left margin,
right margin.
It's margin right, margin left, margin top, margin bottom.
OK.
It turns out that margins are just one
of several different properties related to what
are called box properties.
Box properties allow me to put boxes around elements.
And so, the box properties are the margin, the border,
which we'll take a look at in a minute, and then the padding.
These work not only on images, but on any block level
elements.
So, if you want to put a margin, a border, and a padding
around a paragraph, you totally can do that.
And in fact, this can give you some nice effects.
So, for example, if you've got a blockquote,
and you want to float that and put a margin around it,
that is totally doable.
All right.
So, let's take a close look at our border, our padding,
and our margin.
In this example, I've set border, padding, and margin.
I've set a 10 pixel solid blue border, a 10 pixel padding,
and a 20 pixel margin.
And the border is pretty obvious.
Although, it's going to turn out,
there's a bunch of subtleties to that.
What's the padding?
The padding is the space between the image--
Or whatever element that you're using the box properties on.
Between the image and the border.
And then the margin is the space between the border
and whatever surrounds the image.
All right.
Let's take a close look at the border.
As I mentioned, this has a little bit of subtleties to it.
I've combined three different properties here
into a single line, but we can actually
separate border, 10 pixels, solid blue
into three individual properties.
Border width, 10 pixels.
Border style, solid.
Border color, blue.
Border width and border color are pretty obvious.
The solid-- You can sort of work that out.
That's a solid border.
OK, sure.
So, there's actually a whole bunch
of settings for border style.
So, let me just really briefly mentioned two.
You can have a dashed line.
You can have a dotted line.
Mostly what I want to emphasize here though,
is you need to have a border style.
Oddly, the default border style is none.
So, if you say, hey, I want a border
that's 10 pixels in blue.
The web browser is just going to be like,
I'm sorry, that's great you want that.
I'm not displaying a border because the default border
style is none.
So, you have a nonexistent 10 pixel blue border,
have fun with it.
So remember to have that border style solid, or the fancier
options like dashed, or dotted, whatever.
But you do need to have a border style.
If you just provide a color and a width, you will get nothing.
It's super annoying.
All right.
Let's look at our other options here.
So, I've been floating the image.
That works great for a lot of purposes,
but maybe you don't want that.
Maybe you want the image to show up by itself with paragraphs
above and below it.
Well, the first thing to remember is--
Let's go back to our original attempt
to just stick an image onto our website page,
before we did the float.
Remember, this is what we got, where we treat it
as a giant character.
That's not what we want.
One possible solution here is--
One of the issues why this is being treated
as a giant character is because the text following the image
is not in a block tag.
So, if we go ahead and put our paragraphs into paragraph block
tags, then we can go ahead and get this effect here.
I've got a paragraph before the image.
I've got a paragraph after the image.
The paragraphs are explicitly blocks.
And then between the two blocks, I get the image.
And this seems to be what I want,
but there are a couple problems.
But before I move off of that--
Notice, I've gotten rid of the style here,
and I've got that slash asterisk no style used slash asterisk.
What the heck is that?
Well, obviously, part one, I'm trying to tell you
I'm not forgetting the stylesheet.
There is a stylesheet there, and there is no style used.
But the question is, what is this slash star stuff?
This is what is referred to as a comment.
This will show up in HTML.
It will show up in our stylesheets.
And in particular, it will show up
in our coding, when we're actually coding.
You will often want to put a comment there
that's only readable by a human, and is not actually processed
by the computer.
So, this slash star no style used, that is
strictly for you as a human being.
As far as if this were actually in a cascading style sheet,
the computer would be like, I'm not paying attention
to that, that's for a human, I'm not a human, I'm a computer.
All right.
So, I've got the paragraph before.
I've got the img tag.
I've got the paragraph after.
And as we can see on our screenshot on the left,
this seems to work, right?
Well, there's kind of a problem here.
It turns out that if you just put the image by itself
like this, you're going to lose some of your options.
Most notably, the main thing that you
would want to do with this image is,
you might want to center it.
And it turns out, if the img tag is by itself,
it cannot be centered.
So, what you need to do is, you actually
need to put a div around the image.
So here, I've added a div.
I've given the div an ID, Venice div.
And let's go ahead and add a style to it.
I've added the style, text align center.
And now the image is aligned to the center.
Remember, if you try and horizontally align the image
by itself, it's not going to work.
It's going to turn out, we can vertically align the image.
I'll show you that in a second.
But we cannot horizontally align the image.
This is a limitation.
Because it turns out, the img tag itself is not a block level
tag.
And the horizontal alignment only
works with block level tags.
All right.
Let's take a look at the vertical alignment now.
Let's go back to where I had that giant character,
Once upon a time.
So, here it is right here.
This is what we saw last time.
I'm going to go ahead and give it
an ID, because I want to be able to give it a style rule.
And I've written a style rule for it.
And previously, the base of the O--
The base of the gigantic O was aligned
with the base line of the text.
That's sort of the default setting.
And now I've told it to vertically align
with the middle.
And you can see that I am in fact aligned in the middle.
There's also a top and a bottom vertical alignment
you can play with.
So, that gives you an idea of what all your options are
for images.
So, go out and make web pages with lots
of colorful, fun images.
I'll see you in the next video.