HTML Blueprints | index | prev | next | view | peek |

Plan 3:
Wow "em with Pictures

This section covers the HTML for including graphics right in the web page. Keep in mind that inline graphics should be as small (file size) and as necessary as possible, given the limitations of sending large files over the Internet.

Picture files must be either in GIF or JPEG format. For more information see OTIS Compression Information

HTML
 NOTES
 
<html>
<head>
<title>Wow "em with Pictures</title>
</head>
<body>
Header and Body 
<center>

<h1>Picture This</h1>
The <center>...</center> tag will center align all content. It is supported by NetScape and some but not ALL ofther browsers. 
<img src="images/logo.gif" 
width=225 height=225 
alt="logo">
    Inline image tag
  • src: file path to image file relative to this html document. In this case, the picture file "logo.gif" is in a subdirectory called "images".
  • width, height: dimensions in pixesl (loads faster if supplied)
  • alt: text string for text-based brwosers or users that do not load images 
<p>
<I>And you will be impressed!</I>
<p>
</center>

<hr>
<H2>What We offer</H2>

<img src="images/bullet4.gif" 
width=23 height=23 alt="o"> 
<B>Stardom</B><br>

<img src="images/bullet4.gif" 
width=23 height=23 alt="o"> 
<B>Health</B><br>

<img src="images/bullet4.gif" 
width=23 height=23 alt="o"> 
<B>Money</B><br>

<img src="images/bullet4.gif" 
width=23 height=23 alt="o">
<B>Friends</B><
Use inline images as bullet markers 
<hr>
<H2>The Big "M"</H2>


<img align=bottom src="images/m.gif"> 
<B>is for Maricopa Community Colleges</B>
<p>
<img align=middle src="images/m.gif"> 
<B>is for Maricopa Community Colleges</B>
<p>
<img align=top src="images/m.gif"> 
<B>is for Maricopa Community Colleges</B>
With a modifer to the <img...> tag, you can also control how text adjacent to the image aligns to the picture. With the standard options, you can have a single line fo text align to the top, middle, or bottom (default) of the picture. 
<img align=left 
src="images/m.gif"> 
<B>is for Maricopa Community Colleges</B>
located in the Valley of the Sun, 
metropolitan Phoenix, Arizona.
Our license plates say that we 
are the Grand Canyon State...
<br clear=all>
<p>
<img align=right 
src="images/m.gif"> 
<B>is for Maricopa Community Colleges</B>
located in the Valley of the Sun, 
metropolitan Phoenix, Arizona.
Our license plates say that we 
are the Grand Canyon State...
<br clear=all>
With NetScape (and others?) you can have multiple lines of text align to a picture that is aligned the left or the right side of the page. Note that you must use the modifier on the <br> tag (CLEAR=ALL) so that any following text does not align. 
</body>
</html>
View this web page