GIMP for Beginners 13: Display Web Graphics Using Wordpress & HTML | Brian Jackson | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

GIMP for Beginners 13: Display Web Graphics Using Wordpress & HTML

teacher avatar Brian Jackson, Author/Publisher/Educator

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

9 Lessons (43m)
    • 1. Introduction

    • 2. An Overview of HTML

    • 3. An Overview of CSS

    • 4. HTML Image Tag and Wordpress

    • 5. Graphical Horizontal Rules

    • 6. Overlapping Images with the Div Tag

    • 7. Image Maps

    • 8. Graphical Button State Animation

    • 9. GIMP for Beginners: Display Web Graphics Using Wordpress & HTML

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

This is a GIMP for beginners class about how to display web graphics using HTML.  It extends my GIMP and Wordpress class by using the Wordpress textual editor to add HTML and images to pages and posts.  The course begins with an overview of HTML and CSS.  Then we look at the HTML Image tag.  The remainder of the course is dedicated to demonstrating various uses of HTML to display images and capture user responses to them.

If you've completed my GIMP and Wordpress class then this class is the natural extension that explains what to do when entering Text edit mode while editing a Wordpress page or post.

I'll see you in the classroom,


Meet Your Teacher

Teacher Profile Image

Brian Jackson



Born in Los Angeles in the middle of the last century, I have always wanted to be a writer. After twenty-five some odd years spent working in the computer industry in the heart of the Silicon Valley, first for Lockheed as a Systems Programmer and later for Cisco Systems as a test tool developer, I managed to retire early and begin my next career as a self-published author.

Along with writing and publishing my own novels I also publish the works of my wife, Melanie Jackson. During the past four years I've published well over 100 books in paperback and eBook formats. Oddly enough this includes eBooks on how to self-publish books and how to create professional looking book covers using the GIMP. I've also recorded and distributed a pair of audiobooks available for purchase on Amazon... See full profile

Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: Hello and welcome to my class on the gimp and HTML. Now, this takes a word presi lane towards HTML because I realized few people work directly in HTML these days. They're usually working in something else, some higher level language or some tool like WordPress, and they just periodically encounter HTML. So I'm gonna make this an extension of my gimp and WordPress course to include what you do when you go to text mode in WordPress and start seeing HTML. And specifically we're going to talk about images. So let's talk about the course content. The first thing I'm gonna do is give you the quickest overview of HTML you've ever had. And on top of that is gonna come cascading style sheets, thes two things work in tandem to produce Web pages. Then we're gonna look specifically at the HTML image tag and how WordPress manipulates and produces HTML tags. Then we're gonna look at the standard horizontal rule, and I'm gonna show you how you can replace it with a gimp generated graphical horizontal rule. Next, we're gonna look at using the div tag toe, overlap images, and then we're gonna create an image map which is literally a map of the United States that allows you to click through to different websites based on Pacific Central Mountain or Eastern Time. And then finally, we're gonna look a graphical button state animation or rollover effects. So if you're ready to get going, just enrol in the course. As for me, I'm already headed over to the first lesson. 2. An Overview of HTML: Hello and welcome to my gimp for beginners course on gimp and HTML. Now this course is really going to focus more on HTML than the gimp. In fact, we're not going to touch the gimp at all. We're just gonna assume that you have images that come out of the gimp and show you how to utilize them in HTML. But before we do that, we really need to determine what HTML is. When I talk about HTML, I'm really talking about a trinity of languages that work together to produce what I consider to be an HTML, a Web page. HTML is a markup language that uses tags to delineate Web page elements. Then there's cascading style sheets you may have heard of CSS. This is a language used to define how those HTML elements are to be presented to the user by a browser. Finally, there's Java script that provides dynamic HTML. It runs on the user's PC rather than on the server that serving up the HTML so it can respond faster, and I could do rollover effects and other reactions to user actions. So let's look at HTML encoding. HTML is purely a textual markup language, which means that you can create it with any editor. It could be entered into a word breast page or post by switching the editor from visual to textual mode. And this is what I'll be demonstrating is the use of the word press textual editor in this class now, just so that you understand what we're talking about. Let's switch over the WordPress and take a look at that. Here I am on my WordPress site, and I'm about to edit a post. So I click on the post and it brings up the editor, typically in visual mode or the last mode that you left it in. So here we can see that I have text primarily in here. Some of it is bold, it's indented, it's got italics. And I did this just by highlighting the text and then coming up here and using these visual editor tools like italics and bold and so on to make things bold and italics. However, what it was really doing in the background is creating an HTML page, and I can see that by clicking on the text note here. Here, you could see the HTML equivalents hears that line that I made a Talic in the E M tag, which begins with the M and ends with slash AM delineates. This line should be italics. We could see bold tags on order lists and so on. All the way through here we could see and work with the HTML markup, and then you can switch back over divisional and see what it looks like and work on it here . So sometimes it's helpful. If you really want to do precise things, toe work in the text editor. Sometimes the visual. Let's go back to the presentation. Next. Let's look at the rules for forming HTML. This is the way to make well formed tags. After all, tags are at the heart of HTML. Start tags are enclosed in angle brackets such as the HTML body or paragraph tag end tags. Proceed the tag name with a backslash. As in these examples, all HTML elements begin with the star Tagen end with an end tag and include all the text in between. So here's an element. It begins with a paragraph tag. Contains the text. This is a paragraph period and ends with the paragraph and tag empty tags included backslash before the ending right bracket and exclude an end tag. Examples of empty tags include the image tag that we're going to be using this course, the break tag and the space tag at HTML. Elements must not overlap, and we're gonna look at that in detail later. Next, let's look at Auto Can Canton Nation. The contents of an HTML element may span multiple lines, but it will be can caffeinated together, using spaces to separate each line to produce a complete line of output. So I can write HTML that looks like this, and it will produce this. You can see that all the lines have been contaminated together with spaces in between the lines. You can use the brake tag to insert breaks into auto concatenation. Next, let's look a well formed attributes. Tags have attributes. They follow the tag name and proceed the end of the angle bracket and attributes values following the equal sign and are quoted with double quotes. At least in my case, you can use single or double quotes. I always use double quotes. For instance, the image tag has the tag followed by SRC or the source of the image, unequal sign and then the directory and file name of the image toe load. At that point, you can see that this is an empty tag because it doesn't have an end tag and ends with slash greater than next. Let's look at entity references. There were two characters less than an ampersand that must be replaced with entity references. The corresponding entities for these are ampersand. Lt and Ampersand AMP. For instance. It is bad to try and use a tag that has a less than and a greater than sign around it, like this paragraph tag that I have in a paragraph. Instead, I would use the entities Amper lt for less Than and Amber GT semi colon for greater than let's look at proper tag. Nesting tags can contain other tags and quite often do. But the tags may not overlap. In other words, contained tags must end before the containing tag, for instance, this is bad. Here I have a paragraph and within, and I start a bold. But then I end the paragraph before a in the bold. The proper way to do that is to end the bold tag before the paragraph because it's contained in the paragraph tag. And finally, I thought, it might be interesting to look at some popular tags here. We've seen the paragraph tag used quite often. The B tags for bold E M is for emphasis. The break tag is a empty tag that produces a break in auto can. Cat Nation you might see H ones through h six is which airhead level tags that produces a major chapter break in your document and finally, the image tag, which we're going to be looking at next. 3. An Overview of CSS: hello, and I'm sorry to report a change in plans rather than jumping straight to the image tag, I forgot that we really need to talk about CSS because that's what's used to configure the way that the image is presented on the screen. So let's take a look at CSS. Here we go. A brief overview. What is CSS again? Cascading style sheets is a language devised to specify how to display HTML elements. With CSS, you could configure the color, the font size oven element and its position on the screen. Now there are three ways to include CSS near HTML. The first is to import a CSS file in which you'll just have a file that contains nothing but configuration. For all of your CSS elements, this is the syntax for that option. We won't be using that. The next is to put a style block it, typically in the head of your HTML page. We won't be using that either, but I'll show you how it works. And we're primarily going to depend on in line CSS, which is specified using the style, tag, attributes and style the style attributes supported by pretty much every tag I think every tag. So let's look at CSS syntax. Here's how you specify it. You have a property and you have a value and then a semi colon, and then you have the next property and the next value. In an external file, you have a selector that specifies a tagger and name, and then for that you have a property and a value. Let's take a look at a sample CSS file So you know what we're talking about. Here's an example of how we would include this CSS file called body dot CSS, into our HTML file. We would include this link statement somewhere up at the top. And here's the contents of the file. You can see that this is the CSS language. Here's an identify or so this is a tag. So it's saying for all body tags, set the font family to Sand Saref. The find colored a white and give it a 20 pixel margin. This applies to all body tags, and there's only one body tag in the file. I could have h ones and configure them. I could have a P with with currently braces and define how a pair of raft looks. All this would go into a file, which I would source in this way. Let's look at the next way of doing it with a block here up in the head. Usually you have a style tag and then within that you have CSS. So here, once again we're configuring the body. This is the same as the contents of a file. We just put it between style start and end tags. And finally, the syntax that we're going to be using is to put the CSS into a style attributes for the tag. So this is the way that you would another way to configure the body tag toe have a particular font at color ANSA and margin size. Now, the final thing that I want to address is just what is this cascading thing within CSS? It means that by default, styles inherit their properties from their parent. So if I set the body or the text and the color for the body, all elements within the body tag, that means every tag in my document is going to have the same fund unless it overrides it with CSS. And here's exactly what I just said. If I set the font family for the body tag, it causes the property value to be inherited by all HTML elements on the page. So it cascades throughout the page. There's much more to know about CSS. There's names and stuff like that. You can create classes and so on, which is very handy. But that goes way beyond what we need to know to understand the image element, which is the next HTML tag we're going to talk about. 4. HTML Image Tag and Wordpress: and finally, welcome to the gimp for beginners. Siri's html image tag lesson. I know I've been talking about it for a while. Well, here it finally is. What I want to do is show you the use of the I am G or image tag in HTML. Okay, used the image tagged you in bed graphics, and basically it looks like this. It's an empty tag. Eso noticed the slash greater than sign at the end. It always seems tohave at least one attribute, and that is the source, or SRC attributes that points at the U. R l of the image. The other thing that you might apply to an image is some style stuff. Be a CSS. So here, for instance, if I wanted to have a border of zero, Typically it has a very thin blue border around the image that it creates. You don't always notice it, but I do. So I always set my border 20 to get rid of that. And maybe I want padding of five pixels all the way around my image so that text spaces out away from it and doesn't crowd it. As in image style equals border zero patting five pixels. Source equals images slash dot j peg file So this is how you insert an image to it into an HTML file. Now let's switch over the WordPress and see how you insert images and WordPress. Here we are in WordPress editing our post, and let's say that I want to insert an image here. Well, I typically clear a space for it, and then I go to add media. Now you can select from any of the media that you previously used and therefore uploaded a WordPress, or you can upload files by selecting them from your computer. I'm going to select an existing image from the media library. I'm going to insert this image off a cozy scene with a mug of wine and a open book. In fact, it's called Hot Mulled Wine in the Cup and Open Book. Now, one of the things that I want you to notice is the At the original size of the image is 2048. By 11 65. This is a gigantic image, but work press is giving you options down here to use 1 50 by 1 53 100 by 200 and large and all way up to the full size. So it's actually producing different images so that if you use a smaller image, it won't incur the overhead of downloading to the browser. Ah, full sized image. So let's go ahead and pick this and we'll say, Give me 300 by 200 and I can control the alignment. Whether it's centre left, right or none, I can add the title. I can have a caption or not. I would rather not. I can have all text, which I think typically defaults to the title. So let's go ahead and insert this image into the post, and here it is. It's centered just the way we like. Now if I want to configure it, that's very easy to do in WordPress here. Aiken left justify it, center it as it was or right. Justify it, or I can have it break the tax that the text doesn't run around it. Let's center it like it was. The other thing that I can do is I can go and edit the image and change any of the attributes that I set before, including the size which can come down to custom size if I don't see the size that I want in the selections. So that's how you select an image and WordPress. Now what happens if I go to HTML or text View? Notice the image tag and here we are back in WordPress. This is more or less what the image tax said. So blowing it up a little didn't help. What about if I part? Is it just a little for you? What about this view of the image tag? Here we have an anger which is actually creating an HTML link to my home page that surrounds the image tag. Here we have the image tag that s specifying CSS classes toe. Apply bulk configurations to the image. Here we have the source statement and notice how long the path is. That's because this image is being stored as a resource within WordPress. So it has a very long path, and you can see as part of that path is even the date and month in which the image was uploaded. Another thing that's in the name of the image are the dimensions of it. Here, you can see we're loading a 300 by 200 pixel image the all Texas what shows up on screens that don't support images and therefore very few of them. Nowadays, however, it also feeds S CEO for your site, So use the all text to put in keywords for Seo searches for your website. Finally, we have the width and height of the image is being specified in the image tag via the width and height image attributes. And finally we close the anchor so that this entire image becomes, ah, hyperlink toe my home page. I think that makes a little more sense. In the next lesson, we're going to take a look at the HTML horizontal rule tag versus an image. 5. Graphical Horizontal Rules: in this lesson. I want to talk about horizontal rules Now. HTML has a simple horizontal rule, but I want to replace it with a graphical horizontal rule. Let's begin by looking at the simple horizontal rule. I'll go ahead and I'll bring up WordPress where I'm looking at a document. Now let's say after this line I want a horizontal rule to create a split. All I do is I make some space, and up here is the horizontal line option. If I picked that, I get ah, horizontal rule. Now, if I go and I look at the text version of this, let's see what it did in HTML and Allah did was picked the HR tag for horizontal rule and it put that in. Let's go see how we might do the same thing using a graphical horizontal rule. So the first thing that I'm going to do is I'm going to start up the gimp and I'm going to create my graphical horizontal rule. To do that, let's create a new image and let's make it 1200 by 400 with a white background. Now, what I need is I need boxes. I need them to be black, so let's go ahead and we'll pull those making sure that I have a fixed access aspect ratio . So they're square. I'm going to pull a box. That's about 60 pixels. Get it down there. There we go. And I'd like that to be more or less in the middle. So let's get to about 600 here on and right about there, OK, now I'm going to stroke the edge of that box, but I'm going to do it on a new layer so we'll create a new, transparent layer. And then I'll come up here and I will edit stroke selection. And I want to use about a two with okay, and we'll go like that. Now I'm gonna actually need three boxes. Let's go ahead and create them all will create the next box on a new layer. I'll make sure I'm on that layer and I'll say edit stroke selection with the two Now I've got another box. Now let me make 1/3 box on top. This will actually be our line and will make a transparent layer. And I will edit stroke and this time, so I'm gonna make this very thin. I wanted to be about a six because the line is going to get Venner as I make this object then. So let's stroke that. Now. Let's go ahead and wink out thes layers and start dealing with them here. Would I want to dio is I want to select around my little box. Okay, Making sure that we're on the right layer. We're going to rotate this box 2 45 degrees. Now notice that it's simpler to get exact numbers of you. Type them in here. So there we go. Now, let's wink in the second box and you could see that we have an interesting pattern here for the center. Let's go ahead and anchor floating layer. And then finally, the last box. Now let's select outside it at it, cut at it, based take it and rotated into position to a 45 degree angle. Just type that and then we will take it and stretch it using the resize tool. I'm going to stretch this, grab this and I'm gonna pull this point this time all the way out to this edge, and then I'm gonna pull the other point all the way out to this edge, and then I'm going to shrink this up so that it's very thin this up, even Morris, that it gets centered and I will skill that there we go and let's go ahead and anchor that now. The problem is that our line here kind of interferes with our boxes. So all we've got to do is select out the line part here like this, a line part that's in the boxes. And then I just hit the delete key and they're now airline is not interfering with the boxes anymore. Let's select none. And here's our separator. Fancy looking. All we've got to do now is say, file export as, oh, actually, I want to make this transparent. So before we do this, let's get rid of that white background. And one thing we have to do before exporting it is notice all this excess space around here . Let's go ahead and crop this image and get rid of that stuff. If we go about here, I should be able to just barely crop on either side of this like that crop it and then we'll file export it back over on WordPress. We're gonna upload the file and remembering that we saved it as to there we go and what I want is the large one. Thank you. And there's our horizontal rule. So this is the way that you can replace a horizontal rule with a graphical horizontal rule . Let's see what that looks like by previewing the changes. Looks to me like the horizontal rule could be a little narrower, top to bottom, but we can do that easily enough in the gimp. 6. Overlapping Images with the Div Tag: here I am on my website where we're going toe once again work in WordPress. But this time I'm going to show you an image effect that you can Onley get by going to text mode and typing in HTML. Now, I want to use this banner image that I've got of the Golden Gate Bridge and I want to overlay it with an image my face. So I'm going to do this in a post and rather than watch me type and figure it out for myself, I'm gonna show you the finish code that I came up with and show you how I constructed it. This is the code that allows me to overlay two images and the way that we do it is with the html div tag. Dibs are nothing more than areas on an HTML page. They just are rappers for something that allows you to define things for how the rapper gets displayed. For instance, this div has a style attributes and it's saying its position is relative. That means that the div just flows inside the text. It just appears here Now notice The div contains two more dibs. The first Div has a position of absolute meaning that it doesn't just flow with the text. It is positioned at an exact location. And the top of that div is zero pixels from the top and zero pixels from the left. So it's at the very upper corner of this containing Div. And within that Div is an image and notice. We're using the width attribute to stretch it 100% of the width of the div. And then we have as our source statement Ah, pointer to the J peg image. That is my banner of the Golden Gate Bridge. Now, how did I get this name? Check this out. If I go to my Web page to the administrative interface, I can go to Media Library and within the media library. I can see Here's my Golden Gate Bridge. I just click on it and up here it shows me the u R l of where that is. I triple click on that. It highlights the whole thing, right? Click and say copy. And I can come over here where my code is and I can paste it like this Now I don't need this U R l at this location, so I'll get rid of it anyway. That's the way that you manually insert HTML and get the locations of images within. Your resource is the next. It is also positioned absolute and its top is 200 pixels and it's left is 80 pixels. So it's gonna be offset a little the width of the images being constrained, a 200 pixels. And here it is, the location of my profile picture in my WordPress resource is. And then I closed the dip and I closed the containing Div. Now let's take a look at what that looks like here. We can see that what's happening is that the Golden Gate Bridge is being displayed and then it the appropriate offset. Ah, picture of me is being laid over the image. So if you want images overlay, this is the way you do it. Using dibs in text mode within the WordPress Editor 7. Image Maps: in this lesson, we're gonna learn how to use image maps. This is a way to segment an image in a multiple areas and have those areas except actions. Let's begin by looking at the image, map and area tags. We begin with a standard image tag that has the source pointing to the source of the image . But on it we put a use map attributes. Now this points to the name of the map that should be used with this image. Noticed that map names in the use map area begin with a pound. That's because it's a reference to a name. Next we define a map. These usually follow the image there immediately afterwards, and the name attributes points to the name that was used in the image. Use map attributes, but without the pound. Now, within this map, we have multiple areas, and those areas could be rectangular or circular. If the area is rectangular, you specify coordinates which indicate the X and Y of the upper left hand corner and the X and Y positions of the lower right hand corner in pixels. If you use a circular area, then you specify the X and Y coordinates of the center of the circle and the circle's radius. Finally, you can specify the earl of a Web page that should be displayed when you click into this area. Now. It's also interesting noticed that the area tag also accepts on click specifications. So rather than going to a girl, you can have clicks, do anything that you want on the page, change the colors of things, anything that you'd like. And let's look at the code to implement this. Here we have an image, and we're specifying the width of the highest that we know exactly how wide and high it is so that our coordinates fit in it right. And we're saying, Use map, pound US map Now the source statement is once again pointing into my WordPress resource library and plucking out an image immediately after. The image tag is a map tag with the name of US map, which is what I'm referencing in my image. Within that is four areas for Pacific time, mountain time, central time and eastern time. The H refs for each of these areas, 0.2 html files for each of those regions. The shape of the areas that rectangular and each of them have appropriate coordinates to encompass that area of the United States. We then end the map. Now let's go over the word breasts and see this in action. Here I am in the WordPress editor in text mode, Looking at the HTML that I implemented to create an image map. We have the image just like in the example. In fact, the code is exactly as in the example, so I won't be going over it again. But let's look at what happens if we preview this page. We go over to the post and here we can see we're displaying a map of the United States. Now watch the lower left hand corner of my screen as I roll over it. This shows you the U. R L that will be linking to. If we click here, it's specifying pacific dot html Mountain tied html central dot html and Eastern. So as we roll over this map, were get being given an opportunity to click to different HTML pages. Now it once again, I can put on click events and put any event that I want. If I click on Pacific, it could completely replace this map with just a map of the Pacific zone and keep drilling down, maybe into states. That would be an interesting implementation, but that's how to use area maps with images. 8. Graphical Button State Animation: In this lesson, we're going to look at a particular form of dynamic HTML, which has to do with button animations that you can do on rollover effects and so on. It's spruces up a page and toe. Add it to a page or a post. You once again have to go into text mode and enter HTML. Now let's look at the code that we're going to use to produce a button roll over. It begins with an anchor that has a head ref just to dot. That just means link to this page. It means I don't know where I'm gonna link this yet, but I can link this to anywhere on the Internet. Now I bring in an image that is my button. Now this is going to be in WordPress somewhere in my resource library. But for now, this shortens the code to show it this way. Typically, you'll use a PNG, but it could be a J peg and notice these attributes on mouse over on on mouse out. Now, if them person moves the cursor over the mouse than this, which means this current image the source for this, the image is going to be changed to button one over PNG, a different PNG. And then, if the person moves the cursor out from the button, it will be returned to the original button PNG. So this is called a rollover effect. When users move their cursor over a button, then it turns a different color. Typically, it can do anything, and this could be any image other than a button. So remember, you can apply this effect any image. And then finally we end the anchor, which means that if we click on this image, then we're gonna go to wherever this head ref points. Now let's jump over toe WordPress and see how we implemented this code. Here I am in WordPress within a post, looking at my use of that sample. Here, you can see that the source files the names or the girls have been expanded two point into my WordPress Resource library and that I have the mouse on and mouse or I have the mouse over on the mouse out. Pointing to different resource is I'm actually going to use three buttons here, So here's but in one and here's button three, and it does the same thing as button one just using the button. Three. Resource is now. Let's look at button to we're going to disable this button So all it's going to do is display a button that doesn't do anything, and we're gonna make that button gray. That's the way you disable buttons on the screen. Now, before we look at what this looks like, I need to produce the buttons. So let's go over to the gimp and do that. Here I am in the gimp, where I'll create a new image and we're gonna make it 300 wide. And let's make it about, 0 80 tall. There we go. That looks like a good dimension for a button. Now let's go ahead and will do view zoom, fit, image and window to make it a little bigger. And what I'm going to do is use elliptical buttons. So let's create a new layer, transparent and ah, pull and a lips all the way to the outside edge of this thing. I'll pretty much just to use the size of the image to completely contain my ellipse. We go, and then this side has to come out all the way to this edge, and I can actually check things here to see. Yeah, look, I'm at 00 and it's 300 by 80. That's perfect. My lips fills or my button fills the entire area. Now the first thing that we're gonna need is a color, and I was thinking of making this blue. So let's go pick a bluish color that looks excellent. Let's dump that color in here saying, Let's match similar colors. Here we go. Now What I'm gonna do is I'm going to put a text label onto this button and we want that to be white, So let's flip white to the foreground. Pick text Sands is probably good, but it's probably got to be bigger than this. By the way, we can select none to get rid of the marching ants. Let's go up more toe like MM 50 and then will type the name of the button. Now let's use the move tool and pull that into position. Now this is what the button is going to look like when it's inactive. Let's go ahead and save a copy of this will go to file export as, and we'll call it button one PNG Now let's change it to but in three, which will need in exactly the same type of button. There we go, and I can file export as button three. PNG. Next. I need a different color for the rollover effect, and I was thinking of having things turned green. So let's pick the color layer. Pick a new color of, let's say green and go to the ah bucket, Fill tool and fill that color with green. Now notice. We picked Phil similar color to change the blue to green rather than a whole selection, which would have filled the whole layer all the way to the corners. And here we can now say, export as now this will be Button three. But what we want is over in the file name to distinguish. This is what the button will look like when we roll over it, and then let's go to the text layer and will change this to button one and will file export the fourth button. This will be one over PNG, and then finally we have the last button to do, and that is Button, too. And we said we were gonna make it gray to mean disabled. So let's go ahead. Pick gray bucket fill. Make sure we're on the color layer and go ahead and replace that. You know, that could be a little darker. Let's dark in that gray up considerably. There we go. That's more like it. Now I'm going to file export as this will be button too Disabled. PNG. And there we go. We've now created our buttons. Now we go over the WordPress and go to our resource is here. I can add new select files. And here are my buttons, all five of them. I can pick the 1st 1 hold shift, go through the last and say open. And it will add all five buttons to my resource library. Now, I've got the code that references these buttons and all I've got to do is do preview changes. And here we are displaying the post, which has the results of our button test, and notice that as we roll over the button, it changes color. This one's disabled, so it doesn't do anything. But these do and also notice in the lower left hand corner that it does have a location that will go to if I click on it. This one doesn't, and this one does, too. They both go to the current page because we put dot in the H ref for this button, and that's how you add buttons now. By the way, I wanted to point out these air on separate lines if I was willing to come over here and put Can Canton ate everything together, which I think I will dio. So we squish everything together like this, and then we preview the change. See, it's harder to read this way for educational purposes, but if we squish everything together so it doesn't have those line breaks, then you'll get the button straight across an old look there too wide they're wrapping. So we needed smaller buttons. These are kind of Gigantor, so that's the way that you implement button rollovers in HTML. Inward breast 9. GIMP for Beginners: Display Web Graphics Using Wordpress & HTML: I want to thank you for taking the class and I want to encourage you to do the project, which is basically generate the html for any of the samples in this class that appealed to you or the simplest one and upload that HTML Dear class project. Let me see what you've been doing using the gimp and HTML on your Web page. In fact, give me a U R l of a poster of page if you got some really cool graphic effects that you've implemented using HTML on your WordPress website and I'll see you in the next class.