Adding Graphics to HTML Documents

Index

  1. Graphics to HTML
  2. Img in HTML
  3. Img Attributes
  4. Border Attribute
  5. Width and Height Attribute
  6. Aligh Attribute
  7. Alt Attribute

Graphics to HTML

In the beginning, graphics was not supported by the web pages only texts are used. But later on images and other types of multimedia files are embedded with web pages.

Img in HTML

The graphics are embedded in a HTML pages using a simple tag which is represented by <IMG>. We can also embed the images inside other elements such as anchors. When embedded inside an anchor, then the user left clicks on the image, they will go to the designated link (rather, their browser will load a file from the designated link). The <IMG> element has no ending tag.

IMG Attributes

Attributes Function of attributes
ALT="Home" Image not found massage shows.
src="vyt.jpg" Specifies the path to the image
ALIGN="TOP" Set image alignment like left, right, top, bottom etc.
VSPACE=3 Upper and lower space in pixels of an image between texts.
HSPACE=5 Left and right space in pixels of an image between texts.
BORDER=10 Set a border around the image with a specific width.
HEIGHT=33 Set image height based on the browser height.
WIDTH=115 Set image width based on the browser height.
ISMAP It represents image map and user can point and click different parts of the image to load other web pages.
USEMAP Specifies the client side image map file to be used.

Border Attribute

Use the border property to add a border to an <img> element:

Example: 
<!DOCTYPE html>
<html>
  <body>
    <img src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&w=0&h=pCjvUkNlz9_esVvQw2Wgc8VJZBMgJrB0FQmktCA0KYY=" border="10" width="200" />
  </body>
</html>
Output:

Width and Height Attribute

The width and height attributes always define the width and height of the image in pixels.
The width, height, and style attributes are all valid in HTML.
However, we suggest using the style attribute. It prevents styles sheets from changing the size of images:

Example: 
<!DOCTYPE html>
<html>
  <body>
    <h2>Image Size</h2>
    <p>Here we use the style attribute to specify the width and height of an image:</p>
    <img src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&w=0&h=pCjvUkNlz9_esVvQw2Wgc8VJZBMgJrB0FQmktCA0KYY=" alt="Girl in a jacket" style="width:200px;height:150px;">
    <p>Here we specify the width and height of an image with the width and height attributes:</p>
    <img src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&w=0&h=pCjvUkNlz9_esVvQw2Wgc8VJZBMgJrB0FQmktCA0KYY=" alt="Girl in a jacket" width="110" height="100">
  </body>
</html>
Output:

Align Attribute

align attribute is used to set the alignment of an image. It is an inline element. It is used to specify the alignment of the image

Example: 
<!DOCTYPE html>
<html>
  <body>
    <h2>HTML Image</h2>
    <img src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&w=0&h=pCjvUkNlz9_esVvQw2Wgc8VJZBMgJrB0FQmktCA0KYY=" alt="Flowers in Chania" align="right" width="150" height="120">
  </body>
</html>
Output:

Alt Attribute

The required alt an attribute provides an alternate text for an image if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). The value of the alt attribute should describe the image:

Example: 
<!DOCTYPE html>
<html>
  <body>
    <h2>Alternative text</h2>
    <p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>
    <img src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&w=0&h=pCjvUkNlz9_esVvQw2Wgc8VJZBMgJrB0FQCA0KYY=" alt="Picture is not found" width="460" height="345">
  </body>
</html>
Output:

Comments

Post a Comment

Popular posts from this blog

Table

Image
Index HTML Table Html Table Tags Width and Border Cell padding Cell spacing BGCOLOR COLSPAN and ROWSPAN HTML Table An HTML <table> tags are used to create different table in our web pages. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag. Html Table Tags Tag Description <table> Displays a table <th> Represents a header cell in a table <tr> ...
Read more

Introduction to HTML

Image
Index Web Server Web Client/Browser Hyper Text Markup Language - HTML HTML Tags Types of Tags in HTML (Paired and Singular tags) Commonly used HTML Commands Title Footer Text Formatting Web Server Web server is dedicated computers that uses HTTP to serve web pages. the web server has an IP address and a domain name. By entering URL https:www.mk7college.com/index.html in the browser, it requests to the webserver having a domain name, "mk7college.com". The server in response fetches the page named index.html to the browser. Any computer can act as a web server after installing server software on it There are many web server software, like public domain software and commercial packages. Web server working The web server responds to the client's re...
Read more