William Rosener: Hello welcome back in this video you're going to learn how to use Microsoft excel to create an html page let's start off by taking a look at what this Microsoft excel file were produced and then we'll begin walking through it.
William Rosener: This first of all take a look here, I am going to be working in my desktop in a folder here called a temp and they can see i've got my complete file which i'll be working on.
William Rosener: And then i'm also going to go ahead and give you the interface partial interface there, so you can begin working on this.
William Rosener: So when I come back here and press on create html page is my commandment a little message box is going to pop up message and information written and now, when I come back here, I have created this file here produce complete, and let me go ahead and open up.
William Rosener: And let's take a look here so we're going to create a little header at the top, then i'm going to have.
William Rosener: The name apples i'm actually going to be going through all of these here so apples broccoli you can see, so forth there.
William Rosener: And what is it going to do it's going to display and boldface here apples that i'm going to have hyperlinks for saw the user can view a small version of that this is the thumbnail I could be small like if you meet him or large.
William Rosener: Okay, and let me do one more here without do that carrots here's the thumbnail will allow the user to do a small one, or maybe they could download medium and large.
William Rosener: Okay, now that we know what want to do this, begin to take a little bit more closer look at this so.
William Rosener: Here is going to be the output file where am i'm writing it to where the image is located, so if I were to take a look on the website here here's where all the thumbnails are here's all the small the medium and the large.
William Rosener: Okay let's go ahead and get started, so in the same area as you found a link to this video, you should also find this interface.
William Rosener: And the very first step i'm going to do is where, am I going to write this i'm going to simply come right here.
William Rosener: You can see I call this one produce complete i'm going to go ahead and right click right here and i'm going to copy the address i'm going to come right back to my interface and i'm going to go ahead and paste.
William Rosener: OK, so now it is where i'm going to create my html file on my desktop in a folder called a tip.
William Rosener: Again, the base URL is where has all these images are located up kind of gone that's taking a little time there are soft created at these seven images, but they're all different sizes here's that the thumbnails and you can see, the size of these these things pretty small.
William Rosener: here's the small.
William Rosener: here's was the medium.
William Rosener: And then of course there's also the large there.
William Rosener: Okay, so that's where the images are located a really common approach to creating something like this is to actually go ahead and have a pattern.
William Rosener: And i'm going to go ahead and this today i'm going to do a lot more copying and pasting.
William Rosener: As opposed to watch, so you guys don't have to watch me do all the time in here so i'm gonna go ahead and paste this in the code i'm going to be giving you i'm going to challenge you just a little bit i'm going to go ahead and have the hyperlinks for.
William Rosener: The small the medium and i'm watching the hyperlink to the large there, let me get in merchant Center and get that.
William Rosener: Okay, and this is the pattern so i'm going to be using the same pattern on all my protest Sarah so what's going to happen is well, let me just start over here i'm gonna go bold.
William Rosener: Space style font size 20 pixels if you want to make that a little larger little bit small you can start the bold this right here is going to close the ball and, if you want, you can actually come up here and maybe I should be.
William Rosener: up here some start the ball and this right here would close the ball let's put size, a little bit smaller town.
William Rosener: Okay, then i'm going to display display text that's going to put it says apples it's going to put apples in there, then i'm going to go a PR anchor hypertext reference equal image small and that image small is going to be using a combination of the base URL long with.
William Rosener: Small notice, these are all lowercase.
William Rosener: And then it's going to put apples dot jpg and if we take a look here at the URL at some point i'd have to show you here all of these are small, so now you look apples broccoli and so forth there, whereas.
William Rosener: On the interface I want these capitalized so anyway i'm going to be working on image small that only have one per image medium and i'm going to have a line break.
William Rosener: So i'm going to have Small Medium i'm actually have you guys do large and there's going to be aligned break a br and i'm going to place the thumbnail.
William Rosener: So that's going to go here so notice, some of us soon got a margin so it's going to go take a look at the March and that goes to the top.
William Rosener: Right bottom left, so I always advocate little cheat here then look at that, so the top margin is going to be adding a little more pixel and less space here, and then the 20 is going to slide that over to the right and feel free to adjust these margins here then i'm going to go image.
William Rosener: Block started here image source equal image thumbnail, then I want to make sure it's a handicapped accessible for.
William Rosener: People with vision problems i'm going to have an alt tag which is going to display apples, then this is my thumbnail and I could see it's 120 and with Adrian height that i've got a couple of line breaks here.
William Rosener: Just to put a little space there from one produce to the next Okay, at this point i'm going to go ahead and press on my developer tab.
William Rosener: And press on design mode and go here to the code here so i'm just going to go ahead and copy all this code here.
William Rosener: And then i'll walk through it, what each of these lines mean here.
William Rosener: Okay, so at the very top, all this is doing is declaring some variables, the aim and you can see, all these first ones are string string string string.
William Rosener: Then i've got row counter and that's going to be a manager so i'm going to simply declare a bunch of variables.
William Rosener: The next three lines are going to be reading the data that's going to be reading my output path the base URL and my pattern example so that's going to simply be reading this information, this oops.
William Rosener: Okay, and open up another window and then this information so i'm going to read these three pieces of information and i'll be storing those.
William Rosener: An output path based around and pattern example then i'm going to open up my output path or opposites i'm going to be right.
William Rosener: i'm going to sit in a row counter equal to six why six I take a look here i'm going to be started so i've got some information at the top, then i'll be starting 06 and i'm just going to keep her in Italy, REACH and not empty space.
William Rosener: Okay, so complete string i'm going to start that thing off and it's going to take a look up here images of produce and that's going to start off with images to produce.
William Rosener: OK, so now i'm going to start my wallet while i'm dealing with cells that are not empty so i'm going to start off with row six column on if that's not empty and then here is where i'm going to be closing on the i'm going to go ahead and i'll be walking through all this kind of generate.
William Rosener: Take that pattern modified i'm going to write it out, finally, when i'm finished here i'm going to take this.
William Rosener: Some be creating temp strengths, adding that to my complaint string i'm gonna take my complete string and write it out, it was it was one.
William Rosener: Just appear when I opened the output path, I have to make sure I match so i'm open to this file number one.
William Rosener: On the right to phone number one i'm going to close phone number one and then i'm going to have an informative messengers and information has been read read okay now let's come along in into the code here itself.
William Rosener: And the very first thing here is produce So if I was to take a look at ro six column one that's going to say apples with a capital a.
William Rosener: So when this line has been executed apples, I mean produce would say apples.
William Rosener: Okay, the file name and if I take a look here in any one of these, I could press on large it's going to be apples dot jpg.
William Rosener: Okay, so the next step, I want to do is i'm going to take my produce and converted to lowercase so notice I got to capitalize here, so when this first part is finished it's going to say apples and lowercase then i'm going to concatenate to that dot jpg.
William Rosener: Okay, so when this line has been finished filename would now say apples that jpg.
William Rosener: Now I need to specify where are my thumbnails where's my small and medium so now i'm going to take my base URL and if I was to grab that it would be all of this information, right here that's the base URL.
William Rosener: And maybe at this point, I could put a little line break here.
William Rosener: So it's going to have a great big long URL and it's going to have.
William Rosener: thumbnail then it's going to have apples dot jpg.
William Rosener: Okay, so taking a look There again, I took my base URL and i'm concatenate thumbnail and i'm going to concatenate file name, which is this case apples object and.
William Rosener: Then i'm going to be doing the exact same thing for small and medium and again or these three dots are that's going to be that really long URL where all the images are being stored there.
William Rosener: Hopefully that kind of made sense there.
William Rosener: So, Libya, well, I can leave it there.
William Rosener: Okay, and again i'm going to have you guys do it for small, medium and then there's also some large images there.
William Rosener: Okay next up i'm gonna do is i'm gonna say attempt string is equal to my pattern example, and that is this information, right here so.
William Rosener: Every time I go through this loop i'm say TIM strength is equal to this information right there.
William Rosener: know what i'm going to do is a bunch of substitutions i'm going to take my display tax and change that to i'm going to change display text to produce and what does produce it's apples, so the very first time, when I come through display tax is now going to say apples.
William Rosener: OK, and then i'm going to be doing kind of the same thing here i'm going to be doing some string substitutions for a small image like medium image and also my thumbnail image so taking taking a look here again i've got my image image small image medium and my image thumbnail.
William Rosener: Okay, then what am I going to do is i'm going to take my temp strength, you can add a few new lines.
William Rosener: To the end of that that's just going to help with visual basic I mean help with readability so then we're not going to.
William Rosener: do is go ahead and let's take a look up here so initially I said complete string was this.
William Rosener: Now let's say complete string is what order it wasn't complete string concatenate it with my chemistry and i'm going to go ahead and increment my role counter to happen next thing i'll be working on is row seven so i'm gonna continue going through all of those.
William Rosener: Okay well i'm actually going to go ahead and run it I think i've walked through enough of the code here again last up here it's simplistic information written.
William Rosener: OK so again i'm on the interface here i'm gonna hit create.
William Rosener: html page it's going to write it i'm not going to come right back here, and I can see, this was the one that was written by my completed one here it is produce i'm gonna go open with.
William Rosener: i'll just use a Google chrome, and here it is i've got apples i've got my thumbnail image i've got a link to a small.
William Rosener: And i've got a link to medium and just to challenge you a little bit there's one more on the have you guys had large there and then, when your press on it it's going to go to those.
William Rosener: Large images there.
William Rosener: Okay.
William Rosener: Well, hopefully know to up to a one last after if you get any mistakes on the first things you may want to do with simply right click on here and go may be open with the say a word pad.
William Rosener: And then you can begin to analyze your code and we'll go Okay, but header to tag and where was that at.
William Rosener: So, right here my header to tag images or produce.
William Rosener: i'm now going to maybe put this like line here i'm going to start my boldface i'm gonna close the boldface i'm going to put apples in there, increase the font size Okay, and where did that confront.
William Rosener: That came from right here displays next I took apples and place to hear next thing we're going to find is we're going to have an A for anchor high to hypertext reference equal to the image small.
William Rosener: And let's go ahead and take a look at that, so we have a hypertext reference calls here is that base URL concatenate it with small concatenate with apples jpg and then here is a text small, and that was right here.
William Rosener: So what you can do is kind of look at the code here, and if you're getting any mistakes or things aren't appear in the way they should maybe if you start looking at your code and you go okay i'm missing the double quote here.
William Rosener: whoops.
William Rosener: Or maybe.
William Rosener: Something isn't appearing correct lame sometimes if you look at this code to help you solve and debug your code there.
William Rosener: Okay, and i'm just going to say that So hopefully in this video you'll learn how to create.
William Rosener: An html page using Microsoft excel maybe just take a look here, one more time so we've got our output file where we're going to be store that like they sure well, where are these images located at.
William Rosener: My pattern and then i'm going to simply be taking this information plugging it in here, along with taking this base URL in order to create my image small, medium and thumbnail and again one last time i'm what you guys add, as we saw in that.
William Rosener: produce complete i'm gonna let you add, also the large, so the small, medium and large so i've given you all the gear to get you the small, medium just to challenge a little bit there missy to get come up with them large there.
William Rosener: Well, hopefully this video you'll learn how to create a html page now pitch next video thanks bye.