Now, let’s do a li le coding to make some changes. Remember earlier we
said that all of our elements (header, sec on, footer) were just kind of “out
there” and not really connected. They were just slapped on the page. Well,
it’s common prac ce to put all the elements inside one “main” or container
element. Think of a chest of drawers…
The “chest” holds all of the many drawers. And, the “big div” will hold all of
our named elements. To create a DIV, you can name it whatever you want
but you use this setup:
<div id=“_________” style=“____________”>
This requires a tag pair, but you won’t “turn off” the big div un l you are
done “pu ng all the drawers in” so it will be way down low. See code
below for my DIV called pagebox. Style it for a pale pink background as
shown (#FFF2F9) and set the width to 70% so it won’t go all the way across
the page. Finally, style the margin to auto. This will make the DIV center itself le /right on the page.
Save and test in the browser. Remember to TURN OFF THE DIV at the end (a er the footer is turned off). Don’t style that image
yet that you see in the code. I want you to wait just a sec. Look at it in the browser first!
TRY IT
OUT!
Now let’s do something cool. Resize your browser window so it’s not
maximized and is smaller than the screen. As you do, no ce your heading
starts to get cut off. This happens on some websites. So, some designers
will create responsive images, meaning that the image will modify itself
based on the size of the window/viewport. NEAT STUFF.
Okay, you can style the image now. We are going to set the pigheading to
have a width of 100% (meaning it will fit across in the header box, so if
the image is actually smaller than the header, it would technically size up)
and a height to auto (just so it doesn’t get all skewed). But, now save and
refresh and change that viewport size! It magically updates the image.
COOL!
NOTE: Actually, a be er method might be to set a max-width instead so your heading doesn’t stretch beyond
it’s actual size when viewed on mobile devices, but that’s your call
54
Created by Tonya Skinner, Crea ve Commons License
Our page is a bit plain, so let’s dress it up with some paragraphs in the main sec on. Go copy/paste some paragraphs with some
informa on about pigs. Here’s one site that will work: h p://kids.na onalgeographic.com/animals/pig
Be sure to throw in the paragraph opening and closing tags!
Now, let’s dress up those paragraphs will another adorable pig photo! You already saved several to your project folder (piggy).
However, we want one that is small enough to look good on the page, roughly 200 pixels wide. To see the image dimensions on
your Windows computer, set the View to Details and then right click the open space and find Dimensions to add to your details:
NOTE: In Pixlr Editor, you also see the dimensions in the
bo om le corner of the open image)
None of pigs are small enough, so I will resize it in Pixlr
Editor again. You should recall how to do this… but view
the image at right if necessary.
Save the resized image as li lepig.jpg and insert in the
third paragraph (it’s a good idea it insert an image at the
beginning of a paragraph, right a er the paragraph
opening tag). Don’t forget to describe your image with
the text alterna ve!
No ce that the image is just stuck at the beginning of
the paragraph. HTML images do not have any automa c
wrapping. They are just like a le er (inline) in a word.
We can fix that in a minute, but save and preview in
your browser to see for yourself.
TRY IT
OUT!
55
Created by Tonya Skinner, Crea ve Commons License
To make text wrap around an image, simple style the image to float. Floa ng allows you to place it le or right. Note that it will
con nue to wrap around the next paragraph, too, if the image is too big or the paragraph is too short.
TRY IT
OUT!
If you did not want your next paragraph to start un l a er the image, you would need to style the paragraph to “clear” the image
(on the le , right or both sides; generally, it’s simplest to just set it to both). Here’s how that looks:
TRY IT
OUT!
Recall that images are inline, not block elements. So, if you wanted to center an image, it would need to be on it’s own line, in it’s
own paragraph and then the paragraph could be styled to be aligned center. But, you cannot “center” something that is inline;
that’s only for block elements.
Example Code:
56
Created by Tonya Skinner, Crea ve Commons License
Mul ple Images
If you wanted to have several images on one line (side
by side) you can do that easily by pu ng mul ple
<img> tags inside ONE paragraph tag. Try that out!
Resize (Pixlr) two more of your piggy images to be
200px HIGH (just save over previous filename) and insert them on your page a er the first paragraph. Why height this me? Well,
if they are on one line by each other, it looks be er if they are the same height! Remember, create a paragraph tag first! Don’t
forget text alterna ves!
TRY IT
OUT!
<head> <meta charset="UTF-8">
CAUTION: Older versions of Internet
Explorer cannot “handle” HTML5
elements. In the head, it’s a good
idea to paste the HTML5Shiv to
ensure they work properly.
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/
html5shiv.js"></script>
<![endif]--> </head>
→
The newest version of HTML has added two
more tags to use with images— <figure>
Figure and FigCap on (HTML5)
and <figcaption>. Essen ally,
<figure> goes around the <img> tag
and the <figcaption> tag so that you
can give the image a cap on that stays with
it, something not possible in HTML before.
As this is very new, it will not work in all
browsers but It’s catching on. You can put
mul ple images in the figure tag but you
can only have ONE cap on for the batch of
images. Use the same images you used for
the previous exercise but put them in a
figure tag instead of a paragraph tag and
insert a cap on. Remember, you can style
your figcap on or the figure tag as needed.
NOTE: If you wanted space between your photographs, you can add as many non-breaking space codes as
needed between the inserted image tags. Recall that the code for that is &nbsp; (not in brackets!).
58
Created by Tonya Skinner, Crea ve Commons License
TRY IT
OUT!
CHECK
YOUR
WORK
How does yours look so far? Are your images the same height? Does your heading image have words?
Be sure you have the HTML shiv if your “figure” isn’t working right.
A er page 61, you should have added these items, too: Do you have a graphic background? Do you have
transparent bullets in your list? Footer byline?
59
Created by Tonya Skinner, Crea ve Commons License
More Ways to Use Images
Styling a Background Image
If you want to use an image for a webpage background (instead of a solid color), you can use a special style a ribute inside the
body tag. The image file will be led (repeated) un l it fills the screen; by default, it does not center or stretch. Assuming my
background image is in the same folder as the webpage and is named background.png, here is the code:
<body style="background-image: url(background.png);">
Styling Lists for Image Bullets
You can style an unordered list —UL—to use image bullets. First, save an icon or a
small image. It’s best if the image has a transparent background, so a PNG or GIF
format is preferred.
Then, update the <ul> tag to include the image in the style. Say I have an image
called pig.gif saved in my folder with the website. To use it as the bullet, simply add
this style:
<ul style=“list-style-image: url(pig.gif);”>
<li>Pigs roll in the mud to keep cool.</li>
<li>They have a snout on their face.</li>
<li>The snout helps them to smell food.</li>
<li>Pigs have small eyes and some have a curly tail.</li>
<li>Pigs can grow to be very big.</li>
</ul>
Alt? What’s the Big
Deal?
The "alt" a ribute is short for
alterna ve and specifies a brief
meaningful text message to display in
lieu of (or some mes in addi on to) the
image. Assis ve technology like screen
readers, which are generally used by
individuals who are blind or visually
impaired, will present this alterna ve
text to the user. If a user has decided
not to display or is unable to display
images at all, this alterna ve text will
be shown. Also, if a user who does have
the image displayed moves a poin ng
device, such as a mouse, over the
image, then this text will be presented
to them in some browsers. To make
your website accessible for all users,
always include this a ribute!
TRY IT
OUT!

Open your cute pig that has a transparent background in
Pixlr. Resize him to be 20px wide or so, an appropriate size
for an icon. Save it as pigicon.png in your piggy folder.
Insert a bulleted list at the end up the sec on element
styled for your pig icon bullet with a list of some famous
pigs.

Visit Transparent Textures; download a background that
you can overlay on the current background color; modify
your BODY tag to be styled for this image background. Be
sure you pay a en on to file extension!

NOTE: Don’t forget the URL before the parenthesis!
61
Created by Tonya Skinner, Crea ve Commons License