HTML5 IMAGES CHAPTER 10


TENTH TUTORIAL ON HTML IMAGES





HTML Images Syntax
In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute specifies the URL (web address) of the image:
<img src="url">

The alt Attribute

The alt 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:

 

<!DOCTYPE html>

<html>

<body>

 

<p>If a browser cannot find the image, it will display the alternate text:</p>

 

<img src="wrongname.gif" alt="IMAGE HERE">

 

</body>

</html>

 

OUTPUT

 

If a browser cannot find the image, it will display the alternate text:

“IMAGE HERE”

 

 

 

 

Image Size - Width and Height

 

You can use the style attribute to specify the width and height of an image.

 

 

 

<!DOCTYPE html>

<html>

<body>

<h2>Image Size</h2>

<p>Use the style attribute to specify the width and height of an image:</p>

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

</body>

</html>

 

OUTPUT

Image Size

Use the style attribute to specify the width and height of an image:


















Alternatively, you can use the width and height attributes:

 

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
The width and height attributes always define the width and height of the image in pixels.

Width and Height, or Style?

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

<!DOCTYPE html>

<html>

<head>

<style>

/* This stylesheet sets the width of all images to 100%: */

img {

  width: 100%;

}

</style>

</head>

<body>

 

<h2>Styling Images</h2>

<p>The image below has the width attribute set to 128 pixels, but the stylesheet overrides it, and sets the width to 100%.</p>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128"><p>The image below uses the style attribute, where the width is set to 128 pixels which overrides the stylesheet:</p>

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>

</html>

 

OUTPUT

Styling Images
The image below has the width attribute set to 128 pixels, but the stylesheet overrides it, and sets the width to 100%.



The image below uses the style attribute, where the width is set to 128 pixels which overrides the stylesheet:

 

 

 

Images in Another Folder

If not specified, the browser expects to find the image in the same folder as the web page.
However, it is common to store images in a sub-folder. You must then include the folder name in the src attribute:

<!DOCTYPE html>

<html>

<body>

<h2>Images in Another Folder</h2>

<p>It is common to store images in a sub-folder. You must then include the folder name in the src attribute:</p>

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>

</html>

OUTPUT


Images in Another Folder

It is common to store images in a sub-folder. You must then include the folder name in the src attribute:


Images on Another Server

Some web sites store their images on image servers.
Actually, you can access images from any web address in the world:

<!DOCTYPE html>

<html>

<body>

<h2>Images on Another Server</h2>

<img src="https://www.w3schools.com/images/unknownprgrammer.jpg" alt="unknown" style="width:104px;height:142px;">

</body>

</html>

OUTPUT


Images on Another Server

Animated Images

HTML allows animated GIFs:


<!DOCTYPE html>

<html>

<body>

 

<h2>Animated Images</h2>

<p>The GIF standard allows moving images.</p>

 

<img src="programming.gif" alt="Computer man" style="width:48px;height:48px;">

 

</body>

</html>

 

OUTPUT

Animated Images

The GIF standard allows moving images.

Image as a Link

To use an image as a link, put the <img> tag inside the <a> tag:

<!DOCTYPE html>

<html>

<body>

<h2>Image as a Link</h2>

<p>The image is a link. You can click on it.</p>

<a href="default.asp">

  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">

</a>

<p>Add "border:0;" to prevent IE9 (and earlier) from displaying a border around the image.</p>

</body>

</html>

 

OUTPUT


Image as a Link
The image is a link. You can click on it.

Add "border:0;" to prevent IE9 (and earlier) from displaying a border around the image.

 

 

Image Floating

Use the CSS float property to let the image float to the right or to the left of a text:

<!DOCTYPE html>

<html>

<body>

 

<h2>Floating Images</h2>

<p><strong>Float the image to the right:</strong></p>

 

<p>

<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">

A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.

</p>

 

<p><strong>Float the image to the left:</strong></p>

<p>

<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">

A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image. 

</p>

 

</body>

</html>

 

OUTPUT

 

Floating Images

 

Float the image to the right:

A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.

Float the image to the left:
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.

 

 


 

 



created by: unknown programmer



Popular posts from this blog

HTML5 COMMENTS & CSS CHAPTER 8

Image
EIGHTH TUTORIAL ON HTML COMMENTS & CSS HTML comments are not displayed in the browser, but they can help document your HTML source code. HTML Comment Tags You can add comments to your HTML source by using the following syntax: <!-- Write your comments here --> With comments you can place notifications and reminders in your HTML: <!DOCTYPE html> <html> <body> <!-- This is a comment --> <p>This is a paragraph.</p> <!-- Comments are not displayed in the browser --> </body> </html> OUTPUT This is a paragraph. Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors: <!DOCTYPE html> <html> <body> <!-- Do not display this at the moment <img border="0" src="pic_trulli.jpg" alt="Trulli"> --> </body> HTML  Styles – CSS ...
Read more

HTML FORMS INPUT TYPES CHAPTER 25 PART THREE

Image
25 th TUTORIAL ON HTML FORMS INPUT TYPES PART THREE HTML Input Types This chapter describes the different types for the HTML  <input>  element.   HTML Input Types Here are the different input types you can use in HTML: <input type="button"> <input type="checkbox"> <input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="file"> <input type="hidden"> <input type="image"> <input type="month"> <input type="number"> <input type="password"> <input type="radio"> <input type="range"> <input type="reset"> <input type="search"> <input type="submit"> <input type="tel"> <input type="text">...
Read more

HTML5 ELEMENTS CHAPTER 4

Image
FOURTH TUTORIAL IS HTML ELEMENTS HTML  Elements An HTML element usually consists of a  start  tag and an  end  tag, with the content inserted in between: < tagname > Content goes here... < /tagname > The HTML  element  is everything from the start tag to the end tag: < p > My first paragraph. < /p > Start tag         Element content         End tag <h1>                      My First Heading                  </h1> <p>                        My first paragraph.        ...
Read more