Images with Advanced HTML/CSS

This lesson describes advanced HTML and CSS definitions, using a fairly complex example to illustrate.

Here are some images rendered with HTML and CSS:

Here's the HTML for it (the CSS is below):

<body>

<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="klematis_small.jpg" alt="Klematis" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm">
<img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm">
<img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>

</body>

Here are the important attributes of an <img> element:

src

alt -- used to specify the text that should appear for browsers that don't show images.

width, height -- size of the picture. Can set one or both to 'auto'.

Here's some CSS styling examples for the images above (instructor walkthrough of w3c tutorial):

div.img
{

margin: 2px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;

}

The above sample specifies that all divs with class "img" should have the properties listed. The w3c sample used 'img' as a class name-- don't confuse this with the tag 'img'. 

margin specifies the space around an element. 

The border specifies the size, style, and color of the border around the element.

float specifies how the div should be justified relative to its neighbors.

Colors

Colors are generally specified with the rgb form #000000. The first two digits are the red value, the second two the green value, the third the blue value. 

Each number is in hexadecimal (base 16), meaning each digit can be either 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. So the largest number, FF, is 15*16+15*1=255.

How would you represent the following in this form?

white
black
green
red
purple

More example css:

div.img img
{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}


This specifies the styling for the 'img' tags within a div with class 'img'.

display: inline means that the image should appear on the same line as the previous HTML element. 'block' means
that an end-line will be inserted prior to and after the image (it will be on the next line). 
See this description of the display property.

div.img a:hover img
{
border: 1px solid #0000ff;
}

This specifies that within divs of class img, when one hovers over a linked image, change the border.

div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 2px;
}

This specifies the styling for the text below each image.

In-Class Assignment

1. Go to the following tutorial and play around with modifying the HTML and CSS in the sample:
w3c tutorial

2. Create a grid of four images with captions.

Create an HTML file called presidents.html and a CSS file called presidentStyle.css in your W: directory.
Copy and paste the HTML from the w3c sample into your HTML file, and the CSS into your CSS file (remove the style tags).
Add a link in the HTML file to the CSS file.
Download images of your favorite four presidents to your W: directory, and modify the HTML so that it points to your pictures and so that the text names the president in each picture.
Modify the styling so that the presidents appear on separate lines with purple borders of size 5.