Bact to Top
12:30:00 AM
Dwi
Know the type of Fig.
Numerous types of images, but not all types of images can be displayed in an HTML document. Before we begin to learn to display the image into view our documents, we should know the type of images that are often or commonly used in an HTML document to avoid problems at our display in the browser later. The following may be some format or type of images that can be used, but these are just some type of image.
Image Type Extensions Extensions extension
JPEG = ".jpg / .jpeg" Joint Photographic Expert Group
TIFF / TIF = ". Tif" Tagged Image File Format
PNG = ". Png" Portable Network Graphics
GIF = ". Gif" Graphic Interchange Format
A. Displaying Images
The tags are used to display the image in an HTML document is <img>. Attributes that accompany this tag a lot, but the tag should always be included only one, namely the src attribute. <img> Literary form of the tag are as follows:
<IMG SRC = "your_image">
The following code provides examples of using the tag <img>:
image.html
<html>
<head>
<title> Images </ title>
<body>
My Picture <br>
<img src = "mypicture.jpg">
</ Body>
</ Html>
Description:
after you write the HTML code above, note the code <img src = "mypicture.jpg">, inside the code there mypicture.jpg command, it is the name of image file you want to insert into a web page.
image file should be a folder or in a sub folder with the HTML script above, for example, we have a website folder, inside the website folder there is file "image.html" and the folder "images" and inside the folder "images" there is an image file "mypicture . jpg "then the script that we have to type in the format like this <img src = "images/mypicture.jpg">
B. Background Image
Background or the background of a web than to use a color we can also use a background image. it is necessary to increase the appeal of a document is created. But to make the background of the picture, we must be good at selecting the images used, not to the presence of the image makes people who see a less comfortable. To include an image as the background, you can use the background attribute on the tag <img>. The shape is as follows:
<body =" background image file name ">
Sample HTML code that uses the background image can be viewed at the following code:
Background.html
<html>
<head>
<title> background image </ title>
<body background="mypicture.jpg">
</ Body>
</ Html>
C. Border Attributes
To give the border / frame on a picture, we can use the border attribute on the tag <img>. To display the border is way is to provide numbers on a border attribute, such as numbers 1, 2, 3, and so on in accordance with what we want. The value on these attributes declare the thickness of the frame in units of pixels. The following code provides an example of using the border attribute:
<img src="mypicture.jpg" border=5>
D. Attribute Manager Text To Image
On the tag there is attribute named align <img> used to adjust the text placement of the image.
The value contained in the align attribute is:
• BOTTOM: Text at the bottom
• MIDDLE: The text is located in the middle
• TOP: Text located at the top
For more details, consider writing the following code:
Letakteks.html
<html>
<head>
<title> laying text </ title>
<body>
<img src = "mypicture.jpg" align="left">
</ Body>
</ Html>
In the attributes align, top can be replaced with the middle and bottom position to get what we want.
E. Providing Text Alternatives
Images that have been shown there is a possibility can not arise or be seen on certain conditions, such as the browser used does not support the image. To anticipate something like this, can be given alternate text instead of images. The trick is to provide an ALT attribute on the tag <img>. As an example, consider the following code:
Alternate.html
<html>
<head>
<title> create alternate text </ title>
<body>
hello my friend
<img src = alt ="(Foto "mypicture.jpg" Ferdian Rahabista)" align ="middle">
This is the image that
has been given a text alternative <br>
good luck
</ Body>
</ Html>
F. Attribute To Set the image size
The size of the image that appears generally adjust to the original state of the image. If we menginkan change the image size according to the areas that we provide, we can provide attributes on the tag <img> consisting of height and width attributes.
• HEIGHT to set the image height
• to set the image width WIDTH
To adjust the size of the image we have to give a specific value on both these attributes. The values ??given in the second attribute is a value with units of pixels. To determine the use of both these attributes look at the line following program:
<img src = "mypicture.jpg"> <br>
<img src = "mypicture.jpg" height=100 width=100>
<img src = "mypicture.jpg" height=50 width=50>
G. Attribute To set the Space Pictures
Attributes that will be used in this case is vspace and hspace attributes. This attribute can be used to adjust the distance the image of the text. To provide vertical spacing in accordance with the given value we can provide attribute vspace. While the distance horizontally to provide in accordance with the given value we can provide attribute hspace. The values ??given in this attribute in units of pixels. To see how the use of both these attributes, consider the following program lines:
<img src="mypicture.jpg" hspace="25" align="left">
<img src="mypicture.jpg" vspace="25" align="left">
H. Picture Animation
This type of image display are diverse, there is an image still and moving images there. Moving pictures are usually referred to as animated images. Gif format is the format of moving images are often used in HTML documents. Animated gif image formats, can be created with animation software makers such as Macromedia Flash, Adobe Premier, Ulead Gif Animator, etc.. In addition to using the extension. Gif, also other extensions can also use one of them is an extension. Swf output generated by the software is Macromedia Flash Macromedia.
To display the image in the form of animation in the same way as your browser type the code to put images that are not animated. for details see the following codes:
Animation.html
<html>
<head>
<title> animated images </ title> </ head>
<body>
<img src="image/animation.gif">
</ Body>
</ Html>
Posted in: Learning Web Programming
0 komentar:
Post a Comment