Website Development I

Course Info Class Notes Resources Student Websites

Class No. 9:

Working with Images

Today’s Goal

To begin working with images by displaying them and controlling how they are displayed.

Class Resources

Web Programming book reading for THIS class

pages 239-245

Bitmap Image Formats: GIF, JPEG, PNG
img Element
Vector Graphics — optional
Responsive Images — optional

Web Programming book reading for NEXT class

pages 132-152

Introduction
Unordered Lists
Descendent Selectors
Ordered Lists
Figures
Organizational Elements
section, article, and aside Elements
nav and a Elements
header and footer Elements

Preamble

Questions from our last class or the readings?

plain
image

with
border

distorted

with title
(hover over to
see tooltip)

Graphics

JPGs vs. GIFs vs. PNGs

GIF is the oldest format

256 colors
small file size
allows designation of a transparent color
can do small animations

JPG has been around for a long time

allows 16 million colors
larger file size
does not allow designation of a transparent color

PNG is the newest format but has still be around for a long time

allows 16 million colors
initially even larger file size, but now comparable to JPG
allows designation of a transparent color, but only in 256-color mode

bottom line: use whichever is appropriate to your situation

HTML image element: <img src="...">

like the <br> tag, an <img> tag does not have to be closed in HTML5

the border attribute — in pixels
the height and width attributes — in pixels

specifying either a height or a width attribute sizes the image proportionally
specifying both a height and a width attribute can distort the image’s proportions (which may be desired)

the title attribute

purpose: to display text when the user hovers over the image
example: hover over the navigation buttons on this page

except for title, all of the above can (and perhaps should) be done with CSS

img {   /* the rules here apply to ALL images */
  width: 50px ;  /* this is the width for ALL of the images */
}
img#id {  /* next we ADD styling for a SPECIFIC image */
  border: 2px solid #600 ;  /* brownish */
  /* height: not specified because it varies */
  /* the title can NOT be specified with CSS, it must be an attribute */
}

additional effects can be achieved using the :hover pseudo-class

here are the actual CSS rules used to make the navigation buttons on my pages glow when you hover over them

.navbutton {          /* required so that .navbutton:hover produces a round glow */
  border-radius: 50% ;
}
.navbutton:hover {    /* glow added when the user hovers over a navigation button */
  z-index: 10 ;       /* bring the glow on top of other buttons */
  box-shadow: 0 0 12px 3px green ;  /* see below */
}

offset-x | offset-y | color

e.g., box-shadow: 60px -16px teal;

offset-x | offset-y | blur-radius | color

e.g., box-shadow: 10px 5px 5px black;

offset-x | offset-y | blur-radius | spread-radius | color

e.g., box-shadow: 2px 2px 2px 1px rgb(0, 0, 0);

inset | offset-x | offset-y | color

e.g., box-shadow: inset 5em 1em gold;

Any number of shadows, separated by commas

e.g., box-shadow: 3px 3px red, -1em 0 0.4em olive;

reference: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

combining images with anchor tags to create links

<a href="..."><img src="..."></a>

Positioning

done via CSS (Cascading Style Sheets)
"vertical-align: top" or "vertical-align: middle" or "vertical-align: bottom"
"float: left" or "float: right" or "text-align: center"
note the effect on text wrapping

aligned left	aligned center	aligned right

This text comes before the image in the HTML file. This text comes after the image in the HTML file.	This text comes before the image in the HTML file. This text comes after the image in the HTML file.	This text comes before the image in the HTML file. This text comes after the image in the HTML file.
The above image has attribute `style="float: left"`, so the text wraps around it. Notice that the second sentence starts right after the first sentence as if the image wasn’t even there.	The above image is inline, which is the default positioning. The text does *not* wrap around the image. The image itself is treated just like text, that is, as if the image is simply a text character.	The above image has attribute `style="float: right"`, so once again the text wraps around it. Notice again that the second sentence starts right after the first sentence as if the image wasn’t even there.

Today’s Exercises

Goal: To create a web page that incorporates graphics.

Preamble: There are three exercises outlined here. They range from easier to harder. You are welcome to do whichever exercises you’d like or something similar of your own design.

If you are reading this text on paper, be sure to go to the course website to be able to easily click the links for the graphics and other page componenets you need to complete these exercises.

Exercise #1: PRO Manual Closing Note (least challenging)

Start by looking at the PRO Manual Closing Note page. Note that the page layout has three sections.

The first section is the CLOSING NOTE title at the top of the screen. It’s got an orange backround with white letters, rounded corners, and is centered.
The second section is the centered text, which is in white letters on the page’s brown background.
The third section is the PRO Manual logo below the other two sections.

To code this page you will need:

color rgb(44,25,27) for the dark brown page background

apply this to the body element

color rgb(242,88,34) for the reddish orange title background

FYI, I captured these color specifications using the Just Color Picker

Code as much of the page as you can. I recommend that you start by just getting the text and the PRO Manual logo on your screen before styling each element with CSS. Use this starter code to help you get started.

Exercise #2: PRO Manual Cover (a little more challenging)

Start by looking at the PRO Manual Cover page. Note that the page layout has three sections.

The tricky part of coding this page is that only the word PRISON is in an orange box, and that box is in line with the words RESIDENT ORIENTATION.
Other than that, this page uses the same colors as Exercise #1 and the same graphic.

As stated for Exercise #1, code as much of the page as you can. I recommend that you start by just getting the text and the PRO Manual logo on your screen before styling each element with CSS. Use this starter code to help you get started.

Exercise #3: PRO Manual Overview (most challenging)

Start by looking at the PRO Manual Overview page. This page has all of the elements of the pages described above plus a couple of additional ones.

Ignore the weave-like background of the left-hand column. Putting this behind the other elements in that column is beyond the scope of this exercise.
All of the graphics in the left column can be found in the Graphics subfolder of our Student Resources PRO Manual folder. To access that folder, CLICK HERE. To link to an icon in that folder, refer to it as follows. For example, to display the first icon, use:

<img src="/StudentResources/PRO_Manual/Graphics/PRO%20ICONS-0.jpg">

The plain PRO Manual logo is in file PRO logo simple.jpg.

To create the 2-column layout you will need two <div> elements. This is tricky. Use this starter code to help you get started.

Note the use of vw and vh units in the CSS for the left div to get the columns to expand to the desired viewport percentages. 30vw is 30% of the viewport width, and 100vh is 100% of the viewport height.

This is Class No. 9. It was last modified on Saturday, October 21, 2023 at 4:38 PM. Copyright © 2010-2024 by Jesse M. Heines. All rights reserved, but may be freely copied or excerpted for educational purposes with credit to the author.