Seattle PI Interns

Notes for Seattle PI Interns re HTML and CSS.

Important concepts to understand

  • Tags as structure
  • Tags as containers
  • Nesting

Important code to understand

Box Model explains the parts of Tables & Divs:
Box Model from W3C

The width of a “div” is the sum of all parts
(my original math was correct!)

margin-left + border-left +  padding-left + content width + margin-right + border-right +  padding-right

Default Image Code from SPI Tool:

<div><img src=”/spi/library/name.jpg” style=”margin-bottom: 10px;” alt=”Picture”/></div>

  • Rewrite the “alt” tag contents to concisely describe the image – this will help with SEO!
  • For positioning, size and border properties, modify the “style” tag as follows

Sample code:
(1) Position an image to the right of text with 1px black border and centered caption:

<div style=”float:right; margin-left: 5px; width: 200px; text-align: center; font-size: x-small;”>
<img src=”url-to-image” alt=”alternative text here” style=”border: 1px #333 solid; width:193px;” />
<br/>
This is the caption
</div>

Text Follows Image.

This code in use.

(2) Add a link associated with the image:

<div style=”float:right; margin-left: 5px; width: 200px; text-align: center; font-size: x-small;”>
<a href=”url-to-page”><img src=”url-to-image” alt=”alternative text here” style=”border: 1px #000 solid; width:193px;” /></a>
<br/>
This is the caption
</div>

Text Follows Image

This code in use.

To change the caption to be flush left: text-align: left
To change the caption to be flush right: text-align: right

(3) Sample Code: embedding polls, YouTube, etc
a. YouTube work around – screen capture part of the clip, link the image to the YouTube clip. Example.

b. Info on creating your own poll

(4) Sample Code: table code from this post about Starbucks
<table width=”155″ border=”0″ align=”right” cellpadding=”5″ cellspacing=”0″>
<tr>
<td align=”center” valign=”top”><br>
<img src=”/spi/library/150Starbucks.jpg” style=”margin-bottom: 10px;” alt=”Picture”/><br>
Christopher Furlong/Getty Images</td>
</tr>
</table>

This same effect using a  DIV – except now there is no “padding” on the right, the photo will be flush with the right margin of the blog post. Also, no need to create the photo border in paint tool — just add the border with the CSS statement. AND the caption will be smaller type than the body of the story.

<div style=”float:right; margin-left: 5px; margin-bottom: 10px; width: 150px; text-align: center; font-size: x-small;”>
<img src=”/spi/library/150Starbucks.jpg” alt=”something description here” style=”border: 1px #333 solid; width:148px;” />
<br/>
Christopher Furlong/Getty Images
</div>

Other Resources:

  • Any books in the O’Reilly Missing Manual series
  • Any books in the Peachpit Press Visual Quickstart Guide series

Leave a comment