1 / 10

HTML images

HTML images. - Syntax: <img src=”google.jpg” width=”105” height=”150” /> HTML images - Attributes: source and alternate text. HTML images. Placing a picture on a web page is done with the < img > element , which has to carry at least two attributes:

zorina
Télécharger la présentation

HTML 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. HTML images - Syntax: <img src=”google.jpg” width=”105” height=”150” /> • HTML images - Attributes: source and alternate text

  2. HTML images • Placing a picture on a web page is done with the < img >element, which has to carry at least two attributes: • the srcattribute, indicating the source of the image, and • an alt attribute, which provides a description of the image.

  3. The src Attribute • The src attribute tells the browser where to find the image. < img src="rusty.jpg” / > • The img tag does not require a closing tag so it has a / at the end, note there is a space between the slash and the second quotation mark • Place all your images in the same folder as your web pages

  4. Putting two pictures side by side on the page: • Every picture on a web page has its very own img tag: <img src="button.gif" /> <img src="button2.gif" /> • That will put two pictures side by side on the page:

  5. Putting two pictures on different lines • If an img tag is enclosed between the opening and closing p tags, the other image will start on a new line: <p><img src="button.gif" /></p> <img src="button2.gif" /> • Result:

  6. The alt Attribute • The alt attribute must appear on every < img > element E.g.: <img src="rusty.jpg" alt="Labrador Rusty“ /> • The alt attribute will make the description appear when a mouse pointer is moved over the picture. • Often referred to as alt text , it is important that the value of this attribute really describe the image because if the browser cannot display the image, this text alternative will be shown instead

  7. The height and width Attributes • The height and width attributes specify the height and width of the image, and the values for these attributes are almost always shown in pixels • <img src="rusty.jpg" alt="Labrador Rusty" width="410" height="308“ />

  8. The height and width Attributes • While you can tell the browser to display images smaller or larger than they really are, you should avoid doing this because your image will not be as clear • Rather, you should aim to create versions of images at the same size that you will use them on your web pages • If you had a small image and tried to display it much larger it would appear grainy

  9. What would your syntax be to get following result?

  10. In Notepad it should look like this:

More Related