using images with xhtml please use speaker notes for additional information!
TRANSCRIPT
Using images with XHTML
Please use speaker notes for additional information!
<body><img src= "CISa.gif" width="257" height="237" alt="CISa image" />This is CIS! <p>This is the <img src= "CISa.gif" width="257" height="237" alt="CISa image" /> image of CIS I created using Word!</p>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>Working with images etc...</title></head>
This shows the alt.
<p>This is the picture again <img src= "CISa.gif" width="257" height="237" alt="CISa image" /></p><p>This is the image aligned to the top <img align="top" src= "CISa.gif" width="257" height="237" alt="CISa image" /></p>
Here I am showing text and then the image.
Here I am showing the text before the image and the text is aligned to the top of the image rather than the bottom.
<p>This is the image aligned in the middle <img align="middle" src= "CISa.gif" width="257" height="237" alt="CISa image" />of the screen.</p><p><img align="left" src= "CISa.gif" width="257" height="237" alt="Cisa image" />This is illustrating wrap, so I needto type lots of text and since I have nothing to say, I am going to just keeptyping, and typing, and typing, and typing, and typing, and typing, and typingand typing until hopefully I have typed enough to illustrate how it will wraparound the image.</p>
Use align=“middle to align the text with the middle of the image.
When the code is enough to fill all of the area beside the image, it will wrap when it reaches the bottom.
<p><img hspace= "15" vspace = "15" align="left" src= "CISa.gif" width="257" height="237" alt="CISa image" />This is illustrating wrap, so I needto type lots of text and since I have nothing to say, I am going to just keeptyping, and typing, and typing, and typing, and typing, and typing, and typingand typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing,and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing,and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing,and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing,and typing until hopefully I have typed enough to illustrate how it will wraparound the image. Notice that in this one, I have added horizontal andvertical spacing to move the text away from the image.</p><p>
<p><img align="right" src= "CISa.gif" width="257" height="237" alt="CISa image" />This is illustrating wrap, so I needto type lots of text and since I have nothing to say, I am going to just keeptyping, and typing, and typing, and typing, and typing, and typing, and typing,and typing until hopefully I have typed enough to illustrate how it will wraparound the image.</p><h3 align="center"> <img src= "CISa.gif" width="257" height="237" alt="CISa image" /><br />Center needs to be enclosedin something like headers that allow centering.</h3>
<p>I don't remember the size of this original image, so I am just going to play.In fact, to make an image smaller or larger, you should keep the height andwidth the same proportions that they were originally.<br /><img width = "25" height = "25" src= "CISa.gif" alt="CISa image" /> </p><p><img width = "100" height = "100" src= "CISa.gif" alt="CISa image" /></p><p><img width = "250" height = "250" src= "CISa.gif" alt="CISa image" /></p>
<p>Now I am going to warp the height which seems to work well with the sameheight and width for this image.<br /><img width = "100" height = "200" src= "CISa.gif" alt="CISa image" /></p><p><img width = "400" height = "100" src= "CISa.gif" alt="CISa image" /></p>
<p>Now let's use this image as a means of navigating - I will obviously usea small image for this... Remember, as I learned, top is a default that doesnot have to be established with NAME in regular HTML is some browsers. Remember alsothat in XHTML, name is replaced with id.<br /><a href="#top"><img width = "75" height = "75" src= "CISa.gif" alt="CISa image" /></a>
</p><p>To get rid of the border around the image, I can do the following:<br /><a href="#top"><img border="0" width="75" height="75" src= "CISa.gif" alt="CISa image" /></a><br />The problem with this is that it only works well when using an arrow orsomething that makes it clear that this is for the user to press.</p></body></html>
Usually after the a href tag and before the close a tag, I insert text. The user click on the text to follow the link. In this example, I am using an image in this spot so the user will click on the image.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Working with images etc...</title></head><body><p><img src= "CISa.gif" width="257" height="237" alt="CISa image" />This is CIS!</p> <p>This is the <img src= "CISa.gif" width="257" height="237" alt="CISa image" /> image of CIS I created using Word!</p><p>This is the picture again <img src= "CISa.gif" width="257" height="237" alt="CISa image" /></p><p>This is the image aligned to the top <img style="vertical-align: top;" src= "CISa.gif" width="257" height="237" alt="CISa image" /></p><p>This is the image aligned in the middle <img style="vertical-align: middle;" src= "CISa.gif" width="257" height="237" alt="CISa image" />of the screen.</p></body></html>
This is introimagesX1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Working with images etc...</title></head><body><p><img style="float: left;" src= "CISa.gif" width="257" height="237" alt="CISa image" />This is illustrating wrap, so I needto type lots of text and since I have nothing to say, I am going to just keeptyping, and typing, and typing, and typing, and typing, and typing, and typingand typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing,and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing,and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing,and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing,and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing, and typing,and typing until hopefully I have typed enough to illustrate how it will wraparound the image. Notice that in this one, I have added horizontal andvertical spacing to move the text away from the image.</p><p><img style="float: right;" src= "CISa.gif" width="257" height="237" alt="CISa image" />This is illustrating wrap, so I needto type lots of text and since I have nothing to say, I am going to just keeptyping, and typing, and typing, and typing, and typing, and typing, and typingand typing until hopefully I have typed enough to illustrate how it will wraparound the image.</p><div style="text-align: center"> <img src= "CISa.gif" width="257" height="237" alt="CISa image" /><br />Center needs to be enclosedin something like dividsions that allow centering.</div></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Working with images etc...</title></head><body><p>I don't remember the size of this original image, so I am just going to play.In fact, to make an image smaller or larger, you should keep the height andwidth the same proportions that they were originally.<br /><img width = "25" height = "25" src= "CISa.gif" alt="CISa image" /></p><p><img width = "100" height = "100" src= "CISa.gif" alt="CISa image" /></p><p><img width = "250" height = "250" src= "CISa.gif" alt="CISa image" /></p><p>Now I am going to warp the height which seems to work well with the sameheight and width for this image.<br /><img width = "100" height = "200" src= "CISa.gif" alt="CISa image" /></p><p><img width = "400" height = "100" src= "CISa.gif" alt="CISa image" /></p></body></html>
This is introimagesX3.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Working with images etc...</title></head><body><p>Now let's use this image as a means of navigating - I will obviously usea small image for this... Remember, as I learned, top is a default that doesnot have to be established with NAME in regular HTML is some browsers. Remember alsothat in XHTML, name is replaced with id.<br /><a href="#top"><img width = "75" height = "75" src= "CISa.gif" alt="CISa image" /></a></p><p>To get rid of the border around the image, I can do the following:<br /><a href="#top"><img style="border:none;" width="75" height="75" src= "CISa.gif" alt="CISa image" /></a><br />The problem with this is that it only works well when using an arrow orsomething that makes it clear that this is for the user to press.</p></body></html>
This is introimagesX4.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>Working with images etc...</title></head><body background="myback.gif"><p><a href="bigim.html"><img border="0" width="50" height="50" src="CISa.gif" alt="CISa" /></a>Click on this image to see image enlarged.<br /><br /><img width = "25" height = "25" src="CISa.gif" alt="CISa" /></p></body></html>
This is a horrible back ground image. Text and images are difficult to read. A background image should truly be in the background.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>Big image</title></head><body><div><img width = "500" height = "500" src= "CISa.gif" alt="CIS logo" /><br />This is the large version of the image.<br /><br /><a href="moreim.html"><img border="0" width="50" height="50" src="CISa.gif" alt="CIS logo" /></a>Click on this image to return to previous page.</div></body></html>
The icon at the bottom is a link back to the original page.
This is bigim.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Working with images etc...</title><style type="text/css">body {
background-image: url(myback.gif); }</style></head><body><p><a href="bigimX.html"><img style="border: none" width="50" height="50" src="CISa.gif" alt="CISa" /></a>Click on this image to see image enlarged.<br /><br /><img width = "25" height = "25" src="CISa.gif" alt="CISa" /></p></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Big image</title></head><body><div><img width = "500" height = "500" src= "CISa.gif" alt="CIS logo" /><br />This is the large version of the image.<br /><br /><a href="moreimX.html"><img style="border: none;" width="50" height="50" src="CISa.gif" alt="CIS logo" /></a>Click on this image to return to previous page.</div></body></html>
moreimX.html
bigimX.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml/DTD/xhtmll-transitional.dtd"><html><head><title>Picture from a snow storm</title></head><body><div align="center"><h1>The snow of 1996!</h1><img src= "snow.gif" width="600" height="400" alt="snow picture" /><br />NOTE: This image is a picture that I took and had developed onto a disk. If it is notsaved as a gif or jpeg image, it needs to be taken into an application package that dealswith graphics and converted. Microsoft Photo Editor is a good possibility. I then put theimage out on my site as snow.gif.<br />Remember images are separate files. For this page, I have two things stored: snow.htmland snow.gif. They are both in the same directory so I do not need to use any path tofind the image. I strongly recommend storing you page and your images in the same directory!</div></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml/DTD/xhtmll-strict.dtd"><html><head><title>Picture from a snow storm</title></head><body><div style=”text-align:center;"><h1>The snow of 1996!</h1><img src= "snow.gif" width="600" height="400" alt="snow picture" /><br />NOTE: This image is a picture that I took and had developed onto a disk. If it is notsaved as a gif or jpeg image, it needs to be taken into an application package that dealswith graphics and converted. Microsoft Photo Editor is a good possibility. I then put theimage out on my site as snow.gif.<br />Remember images are separate files. For this page, I have two things stored: snow.htmland snow.gif. They are both in the same directory so I do not need to use any path tofind the image. I strongly recommend storing you page and your images in the same directory!</div></body></html>