"src" is shortcut for "source". This
attribute is used to indicate the photography location. As explained in
the links Tutorial you can use any URL to point to the file.
| Local source | Description |
| src="image.jpg" | the picture is located on the same level as .html file |
| src="../image.jpg" | the picture is located in previous level as .html file. |
| src="../img/image.jpg" | the picture is located in the "img" folder in a previous level as .html file |
You may also address the full URL.
For example
scr="http://www.tutorialehtml.com/img/image.jpg. The URL pattern is not
recommended because in case you change the domain you will have to
change as well the addresses of all photos. Or if the image is stored
on another domain:
scr="http://www.domeain.com/image.jpg.
The fact that storing the image on an
alternative server, presents a great advantage if the space provided for
your domain is a limited one
HTML - "alternative" attribute for images
Attribute "alt" is used to
display text instead of image in case your browser for some reason can
not display the picture or when a user has the "ShowImage" option
unselected.
| <img src="http://example.com/folder/image.jpg" alt="Blue image "/> |
Display
HTML - the height and width of an image
To determine the height and width of an image is used and "height" attributes "width". Logical, no!
| <img src="../img/image.jpg" alt="Blue image " width="100" height="50" /> |
Display
HTML - horizontal and vertical alignment of an image
For this we will use the attributes align and valign. The options offered by these attributes are:
1. Align (horizontal) - right
- left
- center
- top
- bottom
- center
| <p>This is the first paragraph ...</p> <p> <img src="../img/image.jpg" align="left"> This is the second paragraph... </p> <p>This is the third paragraph...</p> |
Display
| This is the first paragraph, This is the first
paragraph,This is the first paragraph,This is the first paragraph,This
is the first paragraph. This is the second paragraph, This is the second paragraph, This is the second paragraph, This is the second paragraph, This is the same second paragraph, This is the same second paragraph, This is the second paragraph, This is the second paragraph, This is the second paragraph, This is the second paragraph, This is the second paragraph, This is the second paragraph, This is the second paragraph, This is the second paragraph, This is the second paragraph. This is the third paragraph, This is the third paragraph, This is the third paragraph, This is the third paragraph, This is the third paragraph. |
HTML - Using images as links
This is only an introduction, we will talk
more about this in the next tutorial. The images are very useful as
links and can be formed as fallows
| <a href="http://www.tutorialehtml.com"> <img src="../img/image.jpg"> </a> |
Display
The image above will send to the home page.
You can change it to your start page and here you have a picture with a
link to your start page
HTML - Thumbnails
Thumbnails are miniature version (less
kilobytes) of images that have a much higher quality. To create a
thumbnail, save the image in a lower quality then the original one. then
link this small image to the original high quality image.
| <a href="../img/fereastra.jpg"> <img src="../img/tumb_fereastra.jpg"> </a> |
0 comments:
Post a Comment