HTML IMAGES(+ FORMATTING) - Supercoders | Web Development and Design | Tutorial for Java, PHP, HTML, Javascript HTML IMAGES(+ FORMATTING) - Supercoders | Web Development and Design | Tutorial for Java, PHP, HTML, Javascript

Breaking

Post Top Ad

Post Top Ad

Wednesday, December 12, 2018

HTML IMAGES(+ FORMATTING)

 IMAGES(+ FORMATTING)



INTROCUTION

Image links are constructed as you might expect, by embedding an <img> tag inside of an anchor element <a>. Like HTML text links, image links require opening and closing anchor tags, but instead of placing text between these opening and closing tags, the developer needs to place an image tag -- with a valid source attribute value of course

By default, many browsers add a small border around image links. This default behavior is intended to give web viewers the ability to quickly decipher the difference between ordinary images and image links. Since this default is different from web browser to web browser, it may be best to squelch this ambiguity and set the border attribute of the image tag to 0 or 1.

HTML - THUMBNAILS-



Thumbnails are by far the most common type of image link seen in today's world. To create a thumbnail, one must save a low-quality version of a picture with smaller dimensions. Then, one should link this low-quality picture to its higher-quality counterpart.


<img />

An image tag to include and display image files.

src="url"

Exactly like it sounds. The URL or file of the image to display.

al="text"

Alternative text that helps explain the image content to both serch engines and users.

height=" "

The ability to specify image height in pixels or percentages.

width=" "

The ability to specify width in pixels or percentages.

align=" "

The alignment of the image ("relative to other text elements on the page).

border=" "

Explains the border thickness(if any).

vspace=" "

Denote spacing on top or the buttom of image.

hspace=" "

Denote spacing on top or the bottom of image.

<map>...</map>

Helps you tell users that this is an interactive image with clickable areas .

<map name="">...</map>

Name of the map associated between the image and the map.

<area />

Specify the area of image map.

EXAMPLE
<img src"planets.gif" width="145" height="126" alt-"planets" usemap="#planetmap">

<map name="planetmap">
<area shape="react" coords="0,0,82,126" href="sun.htm" alt="sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="venus">
</map>

No comments:

Post a Comment

Post Top Ad