Images - HTML

  • <img src="url" attributes>
    • Image-specific attributes: width and Height, src, Link, Alt (for accessibility), Title, class, Id
      Image Properie
    • Width and Height
      • Fixed pixel ratio ex: W 500px H 200px
      • Pecentage ex: W 90% H auto (see the image above) - recommeded for Responsive design
      • Inserting images:
        Insert>image: <img src="images/ivy.jpg>

        Images in line with text:

        poisonTEST TEXTpoison align="middle"

        • How do you wrap text?
          • Answer: image style float
          • .left { float:left }
          poisonThis is a lot of text... This is a lot of text... This is a lot of text... This is a lot of text... This is a lot of text... This is a lot of text... This is a lot of text... This is a lot of text... This is a lot of text... This is a lot of text... This is a lot of text... This is a lot of text... This is a lot of text... This is a lot of text... This is a lot of text... This is a lot of text... This is a lot of text... This is a lot of text... This is a lot of text... This is a lot of text... This is a lot of text... This is a lot of text... This is a lot of text... This is a lot of text... This is a lot of text... This is a lot of text... This is a lot of text... This is a lot of text... This is a lot of text...
        • Add a <br clear="all"> to stop the word wrap. See below.


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Image example</title>
<style type="text/css">
.alignleft {float: left; padding-right: 10px}
</style>
</head>

<body>
<img src="images/Dog.jpg" alt="Dog example image" width="10%" height="auto" class="alignleft">
<h1>This is a cute dog image</h1>
<p>Even if this is a cute dog, we keep the text in it's proper place...to the left</p>
<br clear="all">
<p>However, sometimes we want the text after the image</p>
</body>
</html>

image with CSS demo