- In HTML document we can use different fonts and lists.
- For look more attractive we can add more graphics to make the document.
- Web browsers support a number of graphic formats, there are three types of formats widely used they are Graphics Interchange Format (GIF), Joint Photographic Expert Group (JPEG), Portable Network Graphics (PNG).
- Graphics Interchange Format (GIF) is the best format displaying images designed with a graphics program.
- Joint Photographic Expert Group (JPEG) is the best format for photographs.
- Portable Network Graphics (PNG) is the best format for images with transparency or the low color count.
- In HTML document <img> tag specifies an image to be displayed.
Inserting an image with CSS
Sample Code
[pastacode lang=”markup” manual=”%3C!DOCTYPE%20html%3E%0A%3Chtml%3E%0A%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20%20%20image%7Bborder%3A4px%20solid%20orange%3B%20width%3A%20120px%3Bheight%3A%20100px%3B%7D%0A%20%20%20%20%20%20%20%20h1%7Btext-transform%3Auppercase%7D%0A%20%20%20%20%3C%2Fstyle%3E%0A%3Chead%3E%0A%20%20%20%20%3Ctitle%3E%0A%20%20%20%20%20%20%20%20HTML%20frame%20scrolling%20Attribute%0A%20%20%20%20%3C%2Ftitle%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%20%20%20%20%3Ch1%3EInserting%20Image%3C%2Fh1%3E%0A%20%20%20%20%3Cimg%20src%3D%22wikitechy.png%22%20alt%3D%22image%20is%20not%20available%22%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A” message=”” highlight=”” provider=”manual”/]Output
Inserting an Image without the CSS
Sample Code
[pastacode lang=”markup” manual=”%3C!DOCTYPE%20html%3E%0A%3Chead%3E%0A%20%20%20%20%3Ctitle%3E%0A%20%20%20%20%20%20%20%20HTML%20frame%20scrolling%20Attribute%0A%20%20%20%20%3C%2Ftitle%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%20%20%20%20%3Ch1%3EInserting%20Image%3C%2Fh1%3E%0A%20%20%20%20%3Cimg%20src%3D%22wikitechy.png%22%20alt%3D%22image%20is%20not%20available%22%20width%3D%22120px%22%20height%3D%22100px%22%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A” message=”” highlight=”” provider=”manual”/]Output
