Images - HTML

  • <img src="url" attributes>
    • Image-specific attributes: width and Height, src, Link, Alt (for accessibility), Title, Id
    • Other attributes: class, quick edit link, crop, brightness, sharpen
      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...