Scribd
Upload
15 views

Module 4-Website Images (Chapter 4)

We will also learn some cool tricks, like borders and shadows

Uploaded by

Arjay Agbunag
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
15 views

Module 4-Website Images (Chapter 4)

We will also learn some cool tricks, like borders and shadows

Uploaded by

Arjay Agbunag
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 80

Module 4

Website Images
EMBEDDED AND BACKGROUND IMAGES, BORDERS, SHADOWS

This slideshow supplements the material in Chapter 4 of Web


Development and Design Foundations with HTML5 by Terry Felke-
Morris.
Agenda for Module 4
● Background (CSS) vs Embedded (HTML) I Module 4 in a Text Form
mages at
● HTML Embedded Images Lab Instructions: Chp 4
● Borders
● Block and Inline Elements
● Padding
● Border Radius
● CSS Generators: gradients, box shadows
● Background Images
● Lab

2
Adding Images This Week!

This is the week we learn to add


images to a website. Once we can
add images to a website, you
know how to code a website with
a professional appearance.

We will also learn some cool


tricks, like borders and shadows.
Show Files in Your Text Editor
● In Sublime text, open your websites folder, not the individual files.
● Your files and folders should look like the screenshot at right.
● You may use whatever text editor you prefer, but it is preferable
to be able to see your folder and file structure in your text editor.
● If you can't see your file and folder names in your text editor,
choose a new one.
● You need to know the exact file and folder names so you can
make correct references
● The school computers only have Notepad ++, and this doesn't
work in Notepad++. .

If you don't see your folder and files, click


play.
Embedded vs Background Images
Two Ways To Add Images

1. Embedded Images (HTML) 2. Background Images


Used when the image is part of the website (CSS)
content
Used when the image is not part
Added to the HTML of the website content but
decorative.

A background image is often


used behind text.

Added to the CSS


HTML Embedded Images First

First this slideshow covers the HTML embedded images.

Then this slideshow covers a host of other cool effects, like borders,
border radii, box shadows and more.

Last, but not least, we will come back to the CSS Background Images.
HTML Embedded Images
First: HTML Embedded Images
Use HTML images when they are key to the website content

I'm too cute to


be a background
image!
Review: HTML Attributes
In order to use HTML images, we need to use HTML attributes.
Attributes modify the HTML element, like this:

<h1 class="headline">My Headline</h1>


To add an attribute, first type a space after the element, then = and
then place the value in quotation marks. Most elements have
attributes and sometimes an element will have several attributes,
like this:
<h1 class="headline" id="headline">My Headline</h1>

Note that there is a space between each attribute.


HTML Image Element <img>
When you add an HTML image, use four attributes:

1.src: Location of the image

2.alt: Describe the image for text readers

3.height: Height in pixels

4.width: Width in pixels

For the height and width, you don't add "px" behind
the number.
You can see it in practice in the code below.
<img src="images/eclipse.jpg" alt="sliver of sun during
eclipse" height="100" width="100">
The src Attribute
One of the attributes for an image is the src
for "source". The src attribute tells the
browser where to find the images.

src="images/sunset.jpg" in English is saying:

Find the image named "sunset.jpg" in the


"images" folder.
<img src="images/sunset.jpg" alt="orange
and yellow sunset" height="100"
width="100">
Place Images into an "images"
folder
Because the coding convention is to put the images in
a folder called, "images", you place the word "images"
into the src attribute.

<img src="images/my-image.jpg" ... >

You can read more about it at this blog post at


WebDevStudents.com:

https://webdevstudents.com/website-files-and-folders-
explaining-the-magic/
<img> is a Self-Closing Tag

Self-closing tags do not have a closing tag. We already know


some other self-closing tags:
● <hr> for horizontal rule
● <br> to break to a new line
● <!DOCTYPE html>
Pop Quiz

Which tags are self-closing?

<h1>

<br>

<img>

<p>

<!DOCTYPE html>

<hr>
Pop Quiz

<br> <img> <hr> and <!DOCTYPE html> are self-closing tags.

<h1>

<br>

<img>

<p>

<!DOCTYPE html>

<hr>
Finding Images on Google
For practice, we can use absolute links in JSFiddle. An absolute link is a full link, with the https
and the domain name, like this:

https://webdevstudents.com/wp-content/uploads/2020/12/toolbox-300x300.jpg

1. Go to images.google.com
2. Click on Tools
3. Use an icon size image for the next exercise. Tools->Size->Icon
Demo: Embedded Images 4.1

Click the PLAY button

Since I recorded this video, images.google.com no longer allows you to specify a


specific size, like 200px by 200px. Choose a square image in the icon size, so that you
nice small image for JSFiddle.
Exercise: Embedded Images
1. Open JSFiddle.net

2. Go to Google Images, get a icon-sized image. Find the image you like
and open the image in a new window to grab the URL. Or you can use
this image:
https://webdevstudents.com/wp-content/uploads/2020/12/toolbox-300x300.jpg

3. Add an <img> to your JSFiddle, and put in the src, height, width, and
alt attributes. Use the full url of the image. If you use the image
above, the size is 300 width and 300 height.

Here is the code for an image:

<img src="" alt="" height="" width="">

19
Your JSFiddle Should Look Like This…

Not sure what to do? Check your code against the code below.

Keep the Chrome tab open to your JSFiddle. We will keep adding to it throughout the presentation. If the image you
picked out on Google Images didn't work out, switch over to the ToolBox image.

20
Pop Quiz
What are the 4 attributes to set on all images?

21
Pop Quiz
What are the 4 HTML attributes to set on all images?

src
alt
height
width

22
How do you make an image into a
link?

To make an image into a


hyperlink use an <a> element
around the <img> element.

<a href="https://whitebuffalowebsites.com">
<img src="http://whitebuffalowebsites.com/images/logo-small.png"
height="100" width="300" alt="White Buffalo Logo">
</a>

23
Organizing your Image Files
Just like our website folders and files, we need to
keep the image files organized.
The following are coding conventions used by web
developers.
● Place your images in a folder called, “images”
● The images folder should be at the root
directory of the website, i.e. the images folder
is at the same level as the index.html file.
● Use all lowercase letters. You may need to
change photo file names to all lowercase.
● Do not use punctuation symbols and spaces
except the hyphen (-). Even if you have a messy room, you need
to keep your website files organized.
● Put a hyphen between words (for SEO)
● Never use spaces in the file names
● Do not change the file extensions
(usually .jpg, or .png)
Image URLs

You can find an image in the website url, eg.

https://isthisanagate.com/images/wordfind.png
On the URL above, first it is the https://, then the domain name,
then the images folder, and lastly, the file name of the image.
Image Permissions
You need to have the rights to any image that you use on your website. Some
Google images cannot be used at all, and some only used can be with attribution.
Here are links to where you can find free and low cost images.

● Pixabay.com
● Freeimages.com
● 123rf.com: low-cost Royalty Free images

If you use images from images.google.com, you need to check to see if it may be
used, and, if so, check to see what attribution is required.

26
Favorites Icon = the Favicon

The favicon is a little square image associated with a web page


● Named: favicon.ico and placed at the root
● Size is 32 x 32 pixels
You can see the favicon file in your Pacific Trails files.
Borders
Borders require 3 Properties
The code for a border looks like this:
div{
border-width: 12px;
border-style: solid;
border-color: #a51d01;
}

If you miss one of the three properties, the border will not display.
Pop Quiz
What are the three CSS properties required to display a
border?
Pop Quiz
What are the three CSS properties required to display a border?
border-width
border-color
border-style

Seem like a lot to remember?


See the next page. There's an easier way to do it.
Three for the Price of One
CSS Shorthand Properties
CSS Shorthand for borders
This is the shorthand for coding a border:

div{
border: 12px solid #A51D01;
}
With the shorthand for border, you can attach all three values
into one property.
● If you miss one of the three property values, your border
won't appear. The order doesn't matter.
● Put a space between each of the three values.
● It is called a "shorthand" because you don't have to
separately type in the three border property:value
combinations. But you do need to remember to include all
three values.
Single border lines
You can place a border on only one side with these
properties:
● border-bottom
● border-left
● border-right
● border-top
Example of border-bottom

On this website, all of the <h2>


tags have the border-bottom
property that creates the yellow line
underneath the border. This styling
helps users to see the major
sections of the page.
Demo: Borders 4.2

Click the PLAY button


Exercise: Borders
1. Open your JSFiddle
2. Add a border to your
image in JSFiddle
3. Create a h1 element
and add a border to
it.
4. Try some borders
other than solid, eg.
dotted or groove
5. Add a border to a
single side.
37
Block and Inline Elements
Block and Inline Elements
Block
Block display element
Element
The default width of element content is full
width of its containing element. The example
at right with a red border is an <h1> with
the default value of display: block.

Inline display element

The border closely outlines the element


content. In the green example at right, the
default display value of block for an <h1> is Inline
overridden with the value of inline. Element
Default Block and Inline Elements
You can change the default
Some elements are by default
display of an element with the
block elements, and some are display property.
by default inline elements display:block
display:inline
Block display elements
p, h1, div, hr

Inline display elements The default is


display: block for
the headings.
img, a, span
You can override
the default with
display: inline.
Demo: Block and Inline 4.3

Click the PLAY button


Exercise: Block and Inline
1.Go to jsfiddle.net. You should already have an <h1> and <img>
in the JSFiddle
2.Change the h1 element from its default of block to an inline
element with display:inline
JSFiddle Solution

Note that
when you
change the
H1 to an
inline
element that
the image
pops up next
to it, if there
is room.
Padding
The Box Model

In CSS, we have two types of


white space (negative
space): padding and
margin. Padding goes inside
the border, and margin goes
outside of it.

We'll learn more about this in


Chapter 6 (Module 5)
The padding Property
Padding is empty space between the
content of the HTML element and the
border.

The image at the left has no padding,


and the image on the right has 20
pixels of padding.

The code for the image at the right


looks like this:

img{
border: 5px solid purple;
padding: 20px;
}
Pixels or Percent for Padding
You can use a numeric value in pixels (px) or EMs (em) or
a percentage (%).

● padding-top:5px;
● padding-right:5%;
● padding-bottom:1em;
● padding-left:5px;

You can also set padding for only one side at a time, eg. padding-right.
padding Shorthand "Around the clock"

You can also use the around the clock


shorthand for padding:
● padding:5px;
○ 5px all sides
● padding: 5px 3px 10px 3px;
○ The shorthand for padding goes
around the clock: top, right, bottom,
left
Demo: Padding 4.4

Click the PLAY button


Exercise: Add padding
1. Open JSFiddle.net
2. Add padding to your <h1> element and image
3. Add different padding to each side of the image with the
padding shorthand.

50
JSFiddle Solution

Note: I added a violet


background-color to
the image to make
the padding easier to
see.
Border Radius
CSS Rounded Corners
Use the border-radius property to make
rounded corners

Use pixels (px) to set the amount of the


radius. See some examples at right.

h1 {
border: 3px solid red;
border-radius: 5px;
}

53
border-radius examples
You can set each corner to a
different radius with the
border radius shorthand.

border-radius: 15px 30px


100px 5px;

54
Demo: Border Radius 4.5

Click the PLAY button


Exercise: Border Radius
1. Open JSFiddle.net
2. Add a border radius to your image or h1,
◦ eg. border-radius: 5px

3. Make your image round with the border-radius of 50%

56
JSFiddle Solution

Your JSFiddle may


look different
based on what
colors and border
radius you used.
Using 50% for the
border-radius on a
square image
makes a circle.
Box Shadows, Gradients, and
CSS Generators
CSS box-shadow Property
In order to display a box-shadow you
need to have 4 properties:

1. horizontal offset
2. vertical offset
3. blur radius
4. color
See the box
shadow around
the blue border?

59
CSS Generator: Box Shadow
Does the box-shadow property seem to
complicated to remember? When you need a box
shadow, just Google, "CSS Generator Box Shadow", and
you will find some nice options.
Here is one:
https://cssgenerator.org/box-shadow-css-generator.html
We need a box-shadow for the Pacific Trail exercise this
week. We'll just use a CSS generator to create the code
for one.
60
CSS Generators
The code is complicated for some other properties described in chapter
4. The good news is that you don't need to remember the code,
because helpful developers have made it easy with CSS generators.
The best CSS generator is a moving target. So when you need a CSS
gradient, box-shadow, or text-shadow, just google it:
CSS Generator Gradient
CSS Generator Box-Shadow
CSS Generator Text-Shadow
The developers who make CSS generators do it for advertising
revenue, so be careful clicking on links as you use them.
Just for fun...make a sprite
Go to https://www.piskelapp.com
Create a Sprite. Export it as a gif.
Add the sprite you make to your template
file for 5 bonus points. An animated gif
The default size
can be installed on a website just like an
is a little small:
embedded image, eg. <img
32px by 32px.
src="images/animated.gif"
Try increasing
height="200" width="200" alt="gif">
the size to 200
Tell me in the Assignment folder comments x 200 px.
to look for it or show me in class.
You can see the pixel art of your This is
classmates on this blog post. Let me know the
if you want me to include yours. button to
https://webdevstudents.com/pixel-art/ export it
when you
are done.
Background Images in CSS
Remember? Two Ways To Add Images

1. Embedded Images (HTML) 2. Background Images


Used when the image is part of the website (CSS)
content
Used when the image is not part
of the website content but
decorative.

A background image is often


used behind text.
CSS background-image Property
We have one big topic left to cover in Module 4, and that is how to use the
background-image property. How it works is completely different from how
embedded images work.

● A background image is added to the CSS rather than to the HTML.


● The code below would place a background image on the entire web
page, because it is selecting the body element.

body {
background-image:url(images/background1.jpg);
}
Additional CSS Properties
For background images to work properly, we need some
additional CSS properties, including:
background-repeat
background-size
CSS background-repeat Property
For the background-repeat property, the default behavior is to repeat
the image over and over. Because of that, we need to add this
property/value to most background images:

background-repeat: no-repeat;
CSS background-size Property
Background-size: cover;
Covers the entire background area selected without distorting the image. The entire
image will not likely be shown, unless it is coincidentally the same size as the element
selected. This is the option used most frequently for background photos.

background-size: contain;
Makes the image as large as it can be while showing the full image. This option will leave
some empty space behind the image.

Background-size: 100% 100%;


This option stretches the background image to fit. It is rarely used since it distorts the
image to fit the space. It is the option used in the Pacific Trails lab.

Background-size: auto auto;


The default setting is background-size: auto auto. The image is displayed in its actual
size.
Example 1: Default Background Behavior

This example
demonstrates
what happens if
there is a
background
image but the
developer doesn't
set it to no-
repeat.
Example 2: no-repeat

This example
demonstrates
what happens if
there is a
background image
and the developer
uses background-
size: no-repeat. As
you can see, the
image only
displays one time.
Example 3: no-repeat and contain

This example demonstrates what


happens if there is a background
image and developer sets the the
background-size to contain. The
image is fits the full height but not
the full width. The entire image is
displayed, unlike with background-
size: cover.
Example 4: no-repeat and cover

This example
demonstrates what
happens if there is a
background image
and developer sets
the the background-
size to cover. Note
that the image is
stretched to fit and is
pixelated, since it is
too small for the
background.
However, it is not
distorted as with
100% 100%.

This is the setting


you are most likely to
use with background-
images, although
you would want an
image large enough
to not be pixelated.
Demo: Background Images 4.6

Click the PLAY button


Exercise: background-images

1. Open JSFiddle.net
2. Find a background image on Google images or use this url:
https://webdevstudents.com/wp-content/uploads/2022/09/hd-wallpaper-2468874_1280-300x300.jpg

3. Add it to your JSFiddle as a body background image


4. Try it with background-repeat properties
background-repeat: no-repeat;
background-repeat: repeat-x;
Background-repeat:repeat-y;

5. Try it with background-size properties


◦ background-size: cover;
◦ background-size: contain;
◦ background-size:100% 100%;

74
JSFiddle Solution

75
Lab
What is a "hero" image?

A hero image is the large


image at to the top of a
home page of a website. It is
typically a full width image.

Sometimes the home page is


a slider, like SaintPaul.edu.

We will be adding a hero


image in the Lab 4.
A Website is a Set of Files in a Folder

For the Pacific Trails lab, if the images folder isn't in the pacific folder, then your website won't
show the images. Make sure your images are in the right place in the websites/pacific/images
folder. If you didn't use the starter files in Lab 2, you need to get them now. (Be careful not to
overwrite the work you have already done.)

Pacific Trails Starter Files


Pacific Trails Chapter 4
This week we will be doing
Chapter 4 of Pacific Trails
for the lab. As you can
see, adding images makes
the website look much
more finished!
Pacific Trails Chapter 4
But first…
Now that you have finished the slideshow, go to D2L and
take Quiz 4. You can find it in Materials -> Content ->
Modules -> Module 4
As always, the quiz is open book with no time limit.

You might also like