Moodle with Melinda - Some fun with Graphics
Let's have some fun with manipulating graphics today!
(Warning: you will be messing with HTML coding for this. If this scares you, don't let it! If you make a mistake you can always replace it.)
So, here is my title with a graphic as it would be by simply inserting the graphic:
Changing the size of an image:
I really don't want the graphic so large. (There are other things I want to change, but we'll take these one at a time.) In order to change it, I click on the
< > icon on the right side of the html toolbar. It changes the window so it shows all the html code. (This might appear as gobblely-gook to you, but it is what is telling the web browser how to display the page.)
Look for where it says <img title="...
I'm going to add some information (I've added it in blue) to adjust the size of the image by giving it a fixed height, so now it will read <img height="75" title="...
The number is how many pixels high I want the image to be; you can play with the number to get it the size you would like it. If you want to set it by the width, use width="#" instead.
If I wanted to skew the image, I can add both height & width values to manipulate the look. For instance, here is setting the height at 75 pixels and the width at 150:
Putting the image to one side:
At some point you get to a point where you have the graphic sized right, but you don't want it in-line with text. You can add another piece of information to set it in a particular spot.
In the same line of code, you can add an alignment direction. Add the part in blue to the line so it reads <img align="left" or <img align="right"
Here is mine aligned to the left:
Here it is aligned to the right:
Notice that it also took it outside of the shaded box that is part of the theme. It is no longer treating the image like part of the text, but as a separate entity.
That's probably enough for this time, especially if it is your first time playing with HTML.
Happy Moodling!
(Warning: you will be messing with HTML coding for this. If this scares you, don't let it! If you make a mistake you can always replace it.)
So, here is my title with a graphic as it would be by simply inserting the graphic:
Changing the size of an image:
I really don't want the graphic so large. (There are other things I want to change, but we'll take these one at a time.) In order to change it, I click on the
< > icon on the right side of the html toolbar. It changes the window so it shows all the html code. (This might appear as gobblely-gook to you, but it is what is telling the web browser how to display the page.)
Look for where it says <img title="...
I'm going to add some information (I've added it in blue) to adjust the size of the image by giving it a fixed height, so now it will read <img height="75" title="...
The number is how many pixels high I want the image to be; you can play with the number to get it the size you would like it. If you want to set it by the width, use width="#" instead.
If I wanted to skew the image, I can add both height & width values to manipulate the look. For instance, here is setting the height at 75 pixels and the width at 150:
Putting the image to one side:
At some point you get to a point where you have the graphic sized right, but you don't want it in-line with text. You can add another piece of information to set it in a particular spot.
In the same line of code, you can add an alignment direction. Add the part in blue to the line so it reads <img align="left" or <img align="right"
Here is mine aligned to the left:
That's probably enough for this time, especially if it is your first time playing with HTML.
Happy Moodling!
