Images in HTML

To display a image in a web page you need to use <img> tag.
Example:

Here we can see a Mandelbrot set.

Generated using Fractint 20.0.

HTML code:

Here we can see a Mandelbrot set.<p>
<img src="../gif/FRACT003.GIF" HEIGHT = "300" WIDTH = "400">
<p>Generated using Fractint 20.0.


alt attribute

The alt attribute specify the alternative text the browser may show if image display is impossible.

Image of Julia fractal set
HTML code:
<img src="../gif/FRACT004.GIF" HEIGHT = "300" WIDTH = "400" alt="Image of Julia fractal set">

longdesc attribute

The alt attribute specify the alternative text the browser that can have only 1024 characters. The longdesc attribute does not have this limitation.


HTML code:
<img src="../gif/FRACT005.GIF" HEIGHT = "300" WIDTH = "400" longdesc="This is very long description of picture of FERN generated by Iterated Function System using Fractint version 20.">

align attribute

align attribute specifies alignment of images with the surrounding text. In HTML standard there are five different image-alignment values:left, right, top, middle, and bottom.

align = left

spiralHere is a spiral generated using Iterated Function System Algorithm in FRACTINT 20.0.
HTML code:
<img src="../gif/FRACT006.GIF" HEIGHT = "100" WIDTH = "150" alt = "spiral" align = "left">




align = right

bifurcationHere is a bifurcation generated in FRACTINT 20.0.
HTML code:
<img src="../gif/FRACT007.GIF" HEIGHT = "100" WIDTH = "150" alt = "bifurcation" align = "right">

align = top

complex NewtonHere is a complex Newton fractal in FRACTINT 20.0.
HTML code:
<img src="../gif/FRACT008.GIF" HEIGHT = "100" WIDTH = "150" alt = "complex Newton" align = "top">

align = middle

Escher JuliaHere is a Escher Julia fractal generated in FRACTINT 20.0.
HTML code:
<img src="../gif/FRACT009.GIF" HEIGHT = "100" WIDTH = "150" alt = "Escher Julia" align = "middle">

align = bottom

HasleyHere is a Hasley fractal generated in FRACTINT 20.0.
HTML code:
<img src="../gif/FRACT010.GIF" HEIGHT = "100" WIDTH = "150" alt = "Hasley" align = "bottom">

border attribute

Hasley Escher Julia Manouver complex Newton
HTML code:
<img src="../gif/FRACT010.GIF" HEIGHT = "200" WIDTH = "300" alt = "Hasley" border =1>
<img src="../gif/FRACT009.GIF" HEIGHT = "200" WIDTH = "300" alt = "Escher Julia" border =3>
<img src="../gif/FRACT013.GIF" HEIGHT = "200" WIDTH = "300" alt = "Manouver" border =6>
<img src="../gif/FRACT008.GIF" HEIGHT = "200" WIDTH = "300" alt = "complex Newton" border =9>

vspace and hspace attributes

vspace and hspace attributes define the empty slace between text and image. For example:
fhroophThis is one of the most interesting fractals generated using FRACTINT version 20.

HTML code:
<img src="../gif/FRACT015.GIF" HEIGHT = "200" WIDTH = "300" align = left alt = "fhrooph" border =1 vspace = 30 hspace = 30>










Image as a background

Image can be displayed as a background of your page.

HTML code:
<body background="pics/yourpicture.gif">
Back


Back to main page