my care2
make a difference

community & fun

groups

get together & make a difference

 
 
 Lesson 3: Adding graphics and Sound December 17, 2004 7:42 PM

Please first go and read these three threads if you have not.
Begin Here
Lesson One
Lesson Two

Adding Graphics

Ok we have spiced our pages up with color and fonts so now what can we do to make it really be interesting? Graphics ofcourse

Your page so far should look like this:
http://www.geocities.com/fatesblessing/mywebsite4.html
*do not worry about setting up your page online now I just did so I can show you what things look like.


The tag to add images is alittle bit longer then what we have worked with so far.

The tag is <IMG> there is no closing tag.


In order to add an image you must tell it where to get the image from. To do that you add the images source. Which is SRC=Image

So the entire tag you will add would be:

<IMG SRC="image.gif">
or
<IMG SRC="image.jpg">

These tags go within the BODY

Save this picture in the same folder as the page you have created! Do not change its name!

avatar11

 [ send green star]
 
Adding Graphics to your page December 17, 2004 7:43 PM

So open up notepad again, and go to file open and open the page you created before. Remember to go to your folder you created and also change the bottom arrow from text documents to all files, or your html page will not show up to be opened

Once opened it will say:

<HTML>
<HEAD>
<TITLE>My website</TITLE>
</HEAD>
<BODY BGCOLOR="#000000">
<FONT FACE="Verdana" SIZE="5" COLOR="#551A8B">
Wow look I just created a webpage!!!<br><br>
</FONT>
<FONT FACE="Arial" SIZE="2" COLOR="#3A5FCD">
Look I know how to change Fonts!!<br>
<b>Plus I can make it bold</b><br>
<i>Or Italic</i>, <u>or even Underlined</u><br>
<b><i><u>I can even do all three</b></i></u>
</FONT>
</BODY>
</HTML>

Now add the image to your page!
New code is in red!

<HTML>
<HEAD>
<TITLE>My website</TITLE>
</HEAD>
<BODY BGCOLOR="#000000">
<FONT FACE="Verdana" SIZE="5" COLOR="#551A8B">
Wow look I just created a webpage!!!<br><br>
</FONT>
<FONT FACE="Arial" SIZE="2" COLOR="#3A5FCD">
Look I know how to change Fonts!!<br>
<b>Plus I can make it bold</b><br>
<i>Or Italic</i>, <u>or even Underlined</u><br>
<b><i><u>I can even do all three</b></i></u>
</FONT><br><br>
<IMG SRC="avatar11.gif">
</BODY>
</HTML>

as long as the picture is in the same folder you do not need to add anything other then the file name. If it was in a different folder you would have to put the entire source. Double click the picture and at the top where it says address is its source. You would copy the entire address and use it. But as I said as it is in the same folder you do not need to do this.

See an example here:
http://www.geocities.com/fatesblessing/mywebsite5.html

 [ send green star]
 
 December 17, 2004 7:52 PM

my picture didnt work..  I do have to upload the pic dont i???  (I havent done that yet...)

 [ send green star]  [ accepted]
 
 December 17, 2004 7:55 PM

now it works, but when i uploaded it, it went to a new file and I had to use the entire source code... 

http://www.geocities.com/xxonce_upon_anxx/index.htm

thats it so far....

 [ send green star]  [ accepted]
 
 December 17, 2004 8:09 PM

Lovely Job kayla

hmm you should be able to use just this:

<IMG SRC="snowleopard.jpg">

I will explain how to upload our sites and pics in a new thread in just a minute Maybe that will help.

 [ send green star]
 
Adjusting your Image December 17, 2004 8:15 PM

So you have a lovely image on your page now.

Well now we will learn how to adjust the height, width, borders, description and alignment.

To change the images width and height you will use these attributes:

WIDTH= & HEIGHT=

To the <IMG> tag.

With borders you can add or remove a border around an image. Some iamges just automaticaly have borders. I hate it and so I always set it to 0 lol. For Borders just add this to the <IMG> tag:

BORDER=#

To add a description of the image, which will show up once the mouse moves over the image add this:

ALT="image name or whatever"

Alignment is where the image is placed on the page. So we will use:

<DIV ALIGN="center"></DIV> or <DIV ALIGN="left"></DIV> or <DIV ALIGN="right"></DIV>

So for your image you would have:

<div align="center"><IMG SRC="avatar11.gif" width="100" height="100" border="0" alt="beauty"></div>

So now you can change this on your page and put this in instead of just the plain <IMG SRC="avatar11.gif">

so your page would be:

<HTML>
<HEAD>
<TITLE>My website</TITLE>
</HEAD>
<BODY BGCOLOR="#000000">
<FONT FACE="Verdana" SIZE="5" COLOR="#551A8B">
Wow look I just created a webpage!!!<br><br>
</FONT>
<FONT FACE="Arial" SIZE="2" COLOR="#3A5FCD">
Look I know how to change Fonts!!<br>
<b>Plus I can make it bold</b><br>
<i>Or Italic</i>, <u>or even Underlined</u><br>
<b><i><u>I can even do all three</b></i></u>
</FONT><br><br>
<div align="center"><IMG SRC="avatar11.gif" width="100" height="100" border="0" alt="beauty"></div>
</BODY>
</HTML>

See Example:
http://www.geocities.com/fatesblessing/mywebsite6.html

Experiment with these if you wish by creating a new page within a blank notepad and using each one with different things. It takes some time to get the feel of it. Just remember to us the main tags:

<HTML>
<HEAD>
<TITLE>My website</TITLE>
</HEAD>
<BODY>
<div align="center"><IMG SRC="avatar11.gif" width="100" height="100" border="0" alt="beauty"></div>
</BODY>
</HTML>


Except experiment and try different things such as:

<div align="right"><IMG SRC="avatar11.gif" width="200" height="200" border="7" alt="my image"></div>

etc....


See example:
http://www.geocities.com/fatesblessing/mywebsite7.html

 [ send green star]
 
Sounds December 17, 2004 8:20 PM

I will add sound info later on

 [ send green star]

 
 August 05, 2005 6:50 PM

Raven, How do you add a hard return after your photo tag?  For instance, I want to place text directly below the image, but it starts beside the image.  [ send green star]  [ accepted]
 
 August 05, 2005 7:22 PM

<br> equals a line break.

so:

image here
text here

So <img src="image.gif" border="0"><br>Text

 [ send green star]
 
 August 06, 2005 7:12 PM

Thanks Raven!  [ send green star]  [ accepted]
 
Raven, February 17, 2006 10:29 AM

thanks for all useful tips you gave.

But I had so big hopes then I saw "sounds"!

Yesterday I saw an article in Computing magazine about adding the sounds to the webpage. It seemed to be quite easy but then i tried it didn't work for me.

the codes they give are like that:

<script type="text/javascript">
<!--
var filename="DambrauskasRomas_Vejas 8959.mid" ;
if (navigator.appName=="Microsoft Internet Explorer")
document.writeln (<bgsound scr="+filename+" );
else if (navigator.appName=="Netscape") or (navigator.appName=="Opera")
document.writeln (<embed scr="+filename+" autostart="true"hidden="true">);
//-->
</script>

All ( ; ) and + signs were printed in grey so I thought they are unneccesary (but I tried all ways: with and without these signs)

But I didn't understand why some words are in blue and some in black. They also said there should be <bgsound scr="DambrauskasRomas_Vejas 8959.mid" as well but they give the filename in the code just once (no explanation why )

They said it's possible to use any WAVE or MIDI files one has on his computer and even gave some Internet addresses where you can download them from. They also said it's possible to record and add your own voice message the same way.

I was very excited to hear that but as I said I couldn't add even a ready music file

Thanks in advance Raven and hope you can help me.

 [ send green star]  [ accepted]

 
.... June 03, 2009 3:57 PM

I'm into web design myself and I've stumbled with these great tips, so I just stopped by to say kudos!

Craig

http://www.ilikewebsites.com/

 [ send green star]  [ accepted]
 
  New Topic              Back To Topics Read Code of Conduct

 

This group:
Website Design Help
208 Members

View All Topics
New Topic

Track Topic
Mail Preferences


Copyright © 2009 Care2.com, inc. and its licensors. All rights reserved