1 / 23

USING IMAGES

USING IMAGES. This is the bottom of the page. Note the alignment of having text before and after, at the top, in the middle and at the bottom. Code is on the next page. This shows using CSS to handle the height or the width. Please read about using pt, px , em and percents. I start

wtanguay
Télécharger la présentation

USING IMAGES

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. USING IMAGES This is the bottom of the page. Note the alignment of having text before and after, at the top, in the middle and at the bottom. Code is on the next page.

  2. This shows using CSS to handle the height or the width. Please read about using pt, px , em and percents. I start the research in a few slides. Note the CSS embedded style of vertical-align etc. The alt gives an alternative to those who cannot see the image and is a requirement for validation.

  3. This one used px and the other used pt.

  4. https://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/https://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

  5. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <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 approach also works and validates. The height and the width are in pixels

  6. Images around code

  7. Pushed the sides in to make a different look.

  8. Note the style is float left or float right to float it to the side and the text starts. Everything in the division has text-align: center;

  9. Here I played with height and width. The recommendation is that instead of doing this, you resize in an app like paint and use the resized image.

  10. I sized the screen to make it fit better. I also skipped on of sizing examples that you should look at

  11. Note that I am using the images as icons to link to another page. Both of them have embedded style and one sets the border to 2pt and one sets it to none. The alt provides an alternative to people who cannot see the image.

  12. These are centered – because of what I cut off it may not look like it.

  13. Now they look more centered. This CSS code will center the image on the page. Using display with block lets you deal with size. Making the size of the margins the same on the left and right, I center them.

  14. I did not want to center both images so I gave the one I wanted to center a class and specifically a class name of regular. Now up in the css I can put regular with a dot in front of it which means that it is a class. The class is set to center the image and for the first img I say use the class so it gets centered. The other image does not have a class so it is not centered. More about classes another day...

  15. Note the background image and note the fact that CISa.gif will bring up bigim5.html because of the <a href link.

  16. Note that one division has a background-image and one had a background-color.

  17. Just to show you it can be done – definitely not to encourage you to do it!

More Related