2.3 – Is your picture worth a thousand words? – Images
Up to now, we’ve only talked about text and what it can do on a website, but
there’s still more. Want to make your website look even more enticing than just
fancy fonts? Try getting some good images to make you site really give the
audience something to look at. Be careful of copyright laws though; best to take
your own pictures if you intend to put your website up on the Internet.
The most popular image formats are the following:
- GIF = Graphics Interchange Format
- JPEG = Joint Photographic Experts Group
- PNG = Portable Network Graphics
Take a look at the code below and I’ll explain next what it means; that is, how to
add images into your webpage.
***********************************************************************
1 <?xml version = "1.0 encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head>
6 <title> How do I add images? </title>
7 </head>
8 <body>
9 <p>
10 <img src = "Picture1.jpg" width = "400" height = "450" alt = "First Picture"
/>
11 <img src = "Picture2.jpg" width = "450" height = "400" alt = "Next Picture">
12 </img>
13 </p>
14 </body>
15 </html>
*************************************************************************
As was taught in previous sections we always start with the <html> and co tags. Next
the <head> tag is opened in line 5. Let’s just skip down to the important stuff…
After the paragraph being opened in line 9 this is where the images are inserted
onto the website. To add a picture/image you should use <img> to start with. Next
you need to suggest where the file is. Usually you would try and have this file in the
same folder as the website files else you will have to enter the folder path that it
exists in. In the case above I have used <img src = "Picture.jpg">. This means that the
source (src) of the picture resides in the same folder and the name of that picture
file is Picture.jpg.
You don’t have to add anything more than <img src = "Picture.jpg" alt =
"something"> to create an image with an alt property but you can add properties to
it to make some changes to it.
Also known as alt text, this property value is displayed when you hover the mouse
over the picture.
You may notice that in line 10 I have started the tag with <img and ended it with />.
This is another way of opening and closing tags. This is the usual way to create
images because you can choose the different properties of the image such as width
and height as shown in the example above.
In lines 11 and 12 another image is inserted but this is using the other method for
opening and closing tags. Line 10 creates the image in a much neater fashion; use
that rather than the method in lines 11 and 12.
0 comments:
Post a Comment