Michael T Ganschow Green: You got it alrighty then so welcome to a very critical class you guys, this is the introduction of hypertext markup language htm l, what are the two backbone programming languages and the Web arguably three.
Michael T Ganschow Green: And you're going to start learning it today i'm also going to need your assistance for a great experiment i'm learning how to magnify pieces of my screen in zoom, and so this should be.
Michael T Ganschow Green: An issue should be quite a quite a thing we're gonna we're gonna.
Michael T Ganschow Green: And of course I get a phone call right in the middle of my computer now.
Michael T Ganschow Green: Now okay cool um so.
Michael T Ganschow Green: What we're going to do is i'm going to teach you guys pretty much like 25% of html tonight, which is going to be really cool.
Michael T Ganschow Green: you're going to learn the basic syntax of it you're going to learn all of the.
Michael T Ganschow Green: All the all the various pieces of html well, not all the various pieces, but you can learn the syntax and you're going to learn how it works together.
Michael T Ganschow Green: And, knowing that then it's all vocabulary word memorization so html is really, really cool but before I get started on html and before I get started on screen focusing which we're going to have an experiment, together with screen focusing um.
Michael T Ganschow Green: Let me pop in here.
Meghna Misson: boom.
Michael T Ganschow Green: Okay, so i'll just a quick reminder tonight and midnight, is when your critiques are do um and I noticed a lot of traffic on the page one.
Michael T Ganschow Green: critiques, which is good but don't forget there's a handful of people who've been pushed all the way back here to page two so don't forget them when you're leaving your.
Michael T Ganschow Green: Your words we've had good participation in critique I design wise i'm really liking, a lot of the designs this class is.
Michael T Ganschow Green: I think i've said to plenty times in front of some of these posts, but this client says one of the strongest design wise.
Michael T Ganschow Green: Not just you know, because there are 30 of you, but also percentage wise that I have ever taught.
Michael T Ganschow Green: Based on what i'm seeing here, I was just seeing like home run after home run after home run and your posted designs here, so the you guys are really talented bunch like.
Michael T Ganschow Green: Like we were grading on a curve, like the curve would be more like over on a B then like then like a see here you guys are really kicking up your game.
Michael T Ganschow Green: So this is good i'm liking what i'm seeing design wise and i'm hoping once I give you guys the tools starting tonight to turn these into proper websites will really get to see what you can do so this should be good.
Michael T Ganschow Green: You should be really good I am I am I am curious and pleased oh we've got a chat we've got a chat oh look at that yeah yeah Isabel knows what's up.
Michael T Ganschow Green: So yes, this is this class is is really strong design wise so i'll just make sure that all of you have gone and made your voices heard on everybody else's post on the critique you have until midnight to do that tonight.
Michael T Ganschow Green: But and make sure you get the people on the second page we don't want them to sit there and languishing so.
Michael T Ganschow Green: But man, I mean some of these designs are just yeah there's some top notch stuff going on here so.
Michael T Ganschow Green: So pat yourselves on the back you guys are good batch i'm very, very, very impressed by what i'm seeing i'm curious to see once I arm you guys up with some.
Michael T Ganschow Green: With some knowledge what you're going to start today what should be what should be capable of.
Michael T Ganschow Green: So um one other thing on Thursday I forgot to introduce project to, I suspect, most of you have downloaded the project to assignment sheet, but I thought I would go through it well we're all here.
Michael T Ganschow Green: Just so that you stick the assignment sheet in the chat group be link address Hello chat.
Michael T Ganschow Green: So project two is pretty straightforward and, yes, there is a ton of time on it, because there's a lot that i'm going to teach you here very shortly to start actually turning this into a real proper html so.
Michael T Ganschow Green: project.
Michael T Ganschow Green: So project to the function of design is letting design function now it's time to turn your photoshop to sign into an html and CSS reality.
Michael T Ganschow Green: project to is meant to help you bridge the gap between designing a website and building a website using industry standard programming languages it's html and CSS in case you haven't noticed.
Michael T Ganschow Green: you're going to be taking the project one design and turning it into a real live website you're going to put it online all the world to see.
Michael T Ganschow Green: So examine your design take a good look at your design and start to figure out how you're going to build it using code.
Michael T Ganschow Green: html and CSS lay objects out using series of square and rectangular blocks, I recommend printing out your design and sketching blocks on top of it.
Michael T Ganschow Green: don't worry if you're unsure of how to translate elements of your design into the structure just yet i'll be teaching you all the techniques necessary to do it as the Semester progresses and feel free to ask me questions at any time.
Michael T Ganschow Green: root folder before you construct your web page remember to set up a root folder, this is a main directory that contains the images folder.
Michael T Ganschow Green: A CSS folder a scripts folder and working graphics folder don't forget to attach your dream we recite route to this folder before you be in construction to avoid any linking issues i'll tell you all about that in a second.
Michael T Ganschow Green: construction process once you've done your construction planning and set up your root folder you can now proceed to the totally scary part.
Michael T Ganschow Green: That totally scary far you guys actually building the thing using html and CSS.
Michael T Ganschow Green: So use it to construct a fully fledged website, I recommend working for back to front, starting with your body tag and working forward it to your structure tags and then finishing with your content preview your page in a browser constantly.
Michael T Ganschow Green: Remember, with the wig is not to be trusted we'll talk about that in a second don't trust it.
Michael T Ganschow Green: As your skills and knowledge increase continue creating and refining your website code boom there you go.
Michael T Ganschow Green: let's see uploading and turning in a completed project now that you have a bouncing baby web page that previous nicely in all browsers.
Michael T Ganschow Green: it's time to release your baby to the world, using the supplied ftp information handout and the methodology, as I described in class.
Michael T Ganschow Green: upload your webpage html images folder scripts folder and CSS folder from your local site root folder your student folder online.
Michael T Ganschow Green: check to see if your web pages online, but going to your student URL described the ftp information handout will pass that out when the time comes.
Michael T Ganschow Green: Try viewing the page in several browsers and see if it looks any different.
Michael T Ganschow Green: photograph or scan any your preliminary work and load the photos into your working graphics folder along with all your original files PSD s I n D D word Doc attacks, etc.
Michael T Ganschow Green: zipper otherwise compress the working graphics folder and upload it along with the rest of your website and the project due date.
Michael T Ganschow Green: Post your link and present your project for a final class critique on the Forum and the online date listed below remember.
Michael T Ganschow Green: Introduce yourself and explain how your design solves this project and why you designed it the way you did.
Michael T Ganschow Green: it's basically do the last Friday of March okay yeah that's a long time from now, I know, but I have a lot to teach you in order to build your website correctly so that's quite a waste of time.
Michael T Ganschow Green: But that's also because there's quite a bit of knowledge that I have to gently unscrew the top of your heads and pour in like pickling sauce so.
Michael T Ganschow Green: You will notice on the due dates, there is no preliminary critique with this, because the entire design portion of it is being.
Michael T Ganschow Green: done and project one it's basically going to teach on this thing.
Michael T Ganschow Green: What your actual preliminary critique the project one and then final critique or project ones, well, so this is purely a construction thing yeah.
Michael T Ganschow Green: The reason why this project exists is because people used to freak out with project three project three in this class used to be project two.
Michael T Ganschow Green: and part of the construction included building your project one into a real website and then building that five page website for project three and people just got.
Michael T Ganschow Green: overwhelmed, for whatever reason, at building two websites simultaneously for a project so in the interest of preserving shreds of your sanity for a little longer, I am allowing you to.
Michael T Ganschow Green: i'm letting on splitting this thing in half and letting you work only on this one first you'll already be kind of working on project three when you turn this in, but this will get you it's also a good training wheel for putting together html so.
Michael T Ganschow Green: Project two questions.
Michael T Ganschow Green: Pretty straightforward job build your project one into a big boy websites, if any of you think of any questions along the way, or watching this leader pre recorded, please feel free to hit me up you know i'm available via canvas and email, and all the other fun things So there you go.
Michael T Ganschow Green: But I think we're going to continue the show on don't forget to do your critiques, by the way.
Michael T Ganschow Green: All right, let's talk a little html okay let's let's, let us jump in with both feet into html.
Michael T Ganschow Green: Actually First things first what i'm gonna do is i'm going to test something okay so apparently.
Apparently.
Michael T Ganschow Green: Stop yelling at me just a basic text file Thank you so apparently it's possible to zoom in your screen share.
Michael T Ganschow Green: In zoom so i'm going to have if you guys could all take a look at the screen and one second i'm going to try and zoom in on a piece of my screen here.
Michael T Ganschow Green: and hopefully we'll zoom in nicely let's go to advanced portion of screen share and i'm zooming in a little portion of my screen, so now it should be zoom in on my text file this nice blank text file right here.
Michael T Ganschow Green: test file text file.
Michael T Ganschow Green: tx it's a text file text file it's going to be one of those days so just want to make sure you guys can see it zoomed in the reason why I want to do, that is, I am.
Michael T Ganschow Green: looking for a technique, to be able to zoom in on my code and demonstrate html a little better to you guys so i'm going to try out this technique of zooming into a piece of my monitor and hopefully.
Michael T Ganschow Green: You guys will be able to see the code, a little bit easier than with everything at full resolution so i'm going to leave this little text file zoomed in while I lecture on the Google worries of html so.
Michael T Ganschow Green: html is the first and oldest programming language of the Web made by TIM burners Lee in the late 80s, to share research papers and with all of the design excitement that implies.
Michael T Ganschow Green: html is a mark up language ml means markup language and there's quite a few markup languages out there, another one, you may encounter with some regularity is X m l yeah so.
Michael T Ganschow Green: here's how they work all markup languages work like this Okay, they have a series of brackets.
Michael T Ganschow Green: With a word in them Okay, so we look like that racket tag racket and then a little while later, you will see a bracket a forward slash a tag in the bracket time, this is the structure of all markup languages, so how they work is whatever content you put within these tags.
Michael T Ganschow Green: Empty ones can T empty whatever content you put within these tags is affected by them so whatever these tags do whether they bowled a piece of type add a link place it in the top.
Michael T Ganschow Green: organize things with a bullet whatever they do, they.
Michael T Ganschow Green: These these tags of fact whatever is in them.
Michael T Ganschow Green: And you can take these tags.
Michael T Ganschow Green: And nest them within each other well, I mean nest them well.
Michael T Ganschow Green: Now anything within here like say this whatever content is now being affected by these tags twos.
Michael T Ganschow Green: And then anything these tag tues don't affect is being affected by these tags out here so basically what you get is this chain of tags affecting things within each other so on and so forth down effect every html document starts.
Michael T Ganschow Green: With an html tag and it ends with a closing html tag what's up so if you do a bracket.
Michael T Ganschow Green: With a closing html tag yeah so he's opening and closing html tags declare the document and html and then tell the browser to read anything inside it as html tags.
Michael T Ganschow Green: Then, depending on what the rest of the tags do, and then you are you're you're basically set to you, basically modify whatever's in them now, this modifying first with tag to then with the main tag them with the html tag I did look for reals reals the something like this stop it.
Michael T Ganschow Green: A little further for reals easy to look something like that these tags here.
Michael T Ganschow Green: This chain were tagged to as modifying the text and then anything tagged to doesn't modify tag modifies than anything, the tag doesn't modify the.
Michael T Ganschow Green: The html modify is called a cascade to wear cascading style sheets gets its name from we got a question in the chat.
Michael T Ganschow Green: let's see do you have to add the tabs in between tags no i'm just having them in here in a text and it gets a little frisky with the tapping I usually just to have it a little bit.
Michael T Ganschow Green: This is shorthand to very quickly tell me what tags are inside of what when we get into dream lever you'll see me use this uh.
Michael T Ganschow Green: This tapping it's not gonna be this radical this tapping to very quickly tell myself what tags are and what.
Michael T Ganschow Green: He the nice thing about html is that unless you have it be within an issue of objects, specifically in areas where they are visible or within specific tags that they're visible.
Michael T Ganschow Green: html it'll show anything so you can add whatever spacing an organization you want, by and large, to html without any issues, so this frees you up to shuffle your tags around in a way that I help them break them down and make them easier and make them make more sense to you.
Michael T Ganschow Green: is so that.
Michael T Ganschow Green: You can follow your code easier, for example, for example.
Michael T Ganschow Green: I go and I view the page source don't worry i'm gonna expand this out if I view.
Michael T Ganschow Green: My page source in on my website, you will see my html here, anything that is within anything else is tabbed over so that I can look at my code real quick and see what is inside of what basically it's real real handy for organization.
Michael T Ganschow Green: To to.
Michael T Ganschow Green: To be able to see at a glance what's affecting what very, very handy.
Michael T Ganschow Green: So the structure of html is based around these tags and once you get this once you get that this basically tags that are affecting content within and it basically starts from the innermost tag and works out.
Michael T Ganschow Green: Then, that is like a quarter of html though the rest of it has vocabulary word memorization and knowing when to use what tags which i'm going to show you but already taught you quarter the mean programming language of the web, look at that.
Michael T Ganschow Green: Here we go so let's even got any other questions I had to close the chat get it out of the way they're cool, I think that covers it showed we have any html questions, yet, for I fire up dreamweaver.
Michael T Ganschow Green: Alright cool beans so let's do some digging here we go alright, so let us open our trusty steed that we're going to be using for the rest of the Semester is our software dreamweaver.
Michael T Ganschow Green: And i'll give you a little tour around dreamweaver we're going to be working sort of through dreamweaver sort of with dreamweaver i'm going to teach you guys.
Michael T Ganschow Green: For most of what we do in here the manual way to do it and then very occasionally the dreamweaver way to do it.
Michael T Ganschow Green: And the reason why I want to do that is because html files are text files txt files okay show.
Michael T Ganschow Green: On anything that you can edit a txt file in you can edit an html file so, for example.
Michael T Ganschow Green: i've got text editor open here of my little sample So what if I take my class recordings web page and shove, it in my text edit.
Michael T Ganschow Green: expand that out, there is the html for my class recordings web page open in a text editor Okay, and then I can go through and modify.
Michael T Ganschow Green: Everything that i've done here all the class recording stuff from a text editor so you wouldn't be able to do that if you learned it just the dream Weaver way.
Michael T Ganschow Green: Also, trying to click on things and dreamweaver can be a little bit of a pain in the butt yes, I know they have a document object model window now.
Michael T Ganschow Green: which makes it easier, but you can also just go into the html and go and change something.
Michael T Ganschow Green: And it's done so, I want to teach you guys the coding way to do things so that no matter where you are as long as you have something that can open up a text editor basically you can do all of your non image editing every last piece of your non image editing can be accomplished.
Michael T Ganschow Green: In something as simple as a little text editor you know automatic it's text at it on a PC it's simple text or notepad.
Michael T Ganschow Green: And then there's notepad plus Plus, which is a modified version of notepad that focuses on programming languages, I mean there's there's you know it's really easy, and I want to empower you to be able to build a website wherever you can edit text.
Michael T Ganschow Green: You can even do it, I like a phone or a tablet if you can save whatever wherever you are, if you can save it as a txt file, you can save it as an html file and it will work just fine in a browser to reboot so let's have some fun, shall we all right.
Michael T Ganschow Green: Let me pop open dreamweaver i've had dreamweaver kind of running in the background and i'm gonna close the chat here and.
Michael T Ganschow Green: we're going to do a full screen share boop rather than a magnified screens here don't worry we'll come back to doing magnified screen share I promised when I lose in that just yet.
Michael T Ganschow Green: Okay, so this.
Michael T Ganschow Green: Second, my browser chrome out of the way get out of the way zoom chrome trying to teach here man trying to teach alright cool so let's go to to dream Weaver and we're going to go to.
Michael T Ganschow Green: Space layout.
Michael T Ganschow Green: i'll only save this real quick so i'm going to save this current workspace and.
Michael T Ganschow Green: Just install this thing whoops site window.
Michael T Ganschow Green: workspace layout all right, you know what we're going to reset standard to a standard Bam as if we've freshly loaded dreamweaver if it's good workspace layout not developer work like it back there's the developer version back to standard.
Michael T Ganschow Green: All right, there we go there's a standard God, this is what dreamweaver looks like when you open it up.
Michael T Ganschow Green: So.
Michael T Ganschow Green: over here you have a.
Michael T Ganschow Green: it's kind of a a.
Michael T Ganschow Green: A system controller over here, so what this can do is this can change and control some of what you see on your files over here.
Michael T Ganschow Green: We will use this occasionally throughout the Semester, but it's basically to modify and add things it's in the same position as a toolbar in.
Michael T Ganschow Green: Most adobe print software's but it's not actually a toolbar it doesn't do the same things that a toolbar does mostly does things like you're going to add comments you can change the document view you can.
Michael T Ganschow Green: flip on different modes things like that so we'll be using that a little bit time.
Michael T Ganschow Green: Most of what we actually will be using is over here on the left side okay.
Michael T Ganschow Green: We have our files menu which this is.
Michael T Ganschow Green: This is very critical right here so dreamweaver is root folder dependent with dreamweaver you basically set up a site root in dreamweaver which is basically a link from your dream lever to.
Michael T Ganschow Green: Wherever your root folder is on your computer or in your hard drive okay.
Michael T Ganschow Green: And the reason why you do this is because it makes it makes it easier for dreamweaver to keep track of links, so a lot of the auto completes and neat little tools that dreamweaver has.
Michael T Ganschow Green: If you have your root folder setup correctly it'll make better links it will work better it won't say right bad links that work on your computer and then, when you put them online everything breaks.
Michael T Ganschow Green: So um so setting up site routes and dreamweaver is very critical and i'm going to go over it probably a billion times in here, because if I if you learn.
Michael T Ganschow Green: Nothing else about dreamweaver now one other thing about dreamweaver I want to learn how to make site roots because it'll make linking easier it'll make image manipulation and dream Weaver easier, like everything you're dealing with easier.
Michael T Ganschow Green: alrighty, then we have our CC libraries creative cloud library, so you can actually store items in the creative cloud library here that's attached to your creative cloud account, and you can.
Michael T Ganschow Green: use those items in your designs reoccurring Lee I don't have any setup in here because I don't really use the library all that much in my creative clouds sorry.
Michael T Ganschow Green: But this is a, this is an ability to use that we're not really going to use it at all in this class so i'm going to close this.
Michael T Ganschow Green: i'm going to close it by clicking and dragging it out of my palates.
Michael T Ganschow Green: boop closing Nick.
Michael T Ganschow Green: Next to him is an insert palette insert is basically the same as the toolbar in any other adobe software says insert is how you add things to a file that's open.
Michael T Ganschow Green: In the middle over here, so what the toolbar where you're you know dragging boxes drawing things with a pen tool or.
Michael T Ganschow Green: or typing in type or whatever you're clicking in and adding things this mimics that functionality, you can click in and add things with it.
Michael T Ganschow Green: will be using it a little bit throughout the Semester, but not a ton i'm going to be using it mostly with like form elements and things like that I think when we get to forums, so you can send yourself spam emails forms are awesome.
Michael T Ganschow Green: And then over here we have a CSS designer menu it's really CSS designer palette this palette the CSS designer palette we're going to be using a ton throughout the Semester ah time this is just going to get like all of usage all of it all of it.
Michael T Ganschow Green: All of every last bit of usage because we're going to use this, along with our programming.
Michael T Ganschow Green: we're going to use this guy on a few on lazy but along with our programming to really build out the appearance of our websites, a lot of that happens over here in the CSS designer Okay, so there is there is a lot going on in that so we're going to keep that panel.
Michael T Ganschow Green: down here, we have our document object model or dime palette so the Dom is really useful if you're working largely in dreamweaver and using dreamweaver as tools, rather than coding for yourself Well he has that.
Michael T Ganschow Green: Occasionally, the Semester, maybe, but I don't tend to use it a ton because i'm running around in the code so i'm going to take this dumb i'm going to pull him out dragon by the Dom tab and close him so that I don't have him taking up space.
Michael T Ganschow Green: Next, I have an assets palette here oh look at that i'm already getting the wheel Oh, this is good now and assets palette is a list of all sorts of graphics that you've used before.
Michael T Ganschow Green: Or that I exist in a particular site root.
Michael T Ganschow Green: Basically, if you look up your images correctly and your site root they'll appear here but guess what we're not really going to use this all that much I can.
Michael T Ganschow Green: I can you know anything I can do here, I can do elsewhere, so in order to clear up more space i'm going to take out this assets now if you guys playing around with it and you find a use for this assets feel free to use it Okay, but.
Michael T Ganschow Green: I don't really use it a ton so in order to keep this Nice and clean i'm gonna take this guy out as well then, lastly, here we have our snippets palette this this snippets is really handy.
Michael T Ganschow Green: As you're learning html for setting things up, because what these little guys are our little pieces of code that you can go in and insert into your document okay insert into your document so that you can grab these guys and modify them yeah that's great but.
Michael T Ganschow Green: it's like learning how to build a website or excuse me how to drive a website with an automatic transmission i'm teaching everybody in here.
Michael T Ganschow Green: On a drive stick we're going to do it manually the snippets are great while you're learning and to do some quick things.
Michael T Ganschow Green: But we're not going to need them, so I get rid of this snippets menu to Bam, so this is our workspace you'll notice that it looked a lot like this, when I hopped in here so we're going to go standard workspace Oh yes, there we go.
Michael T Ganschow Green: Look at all that So if I get a standard workspace I just go now I know why no I don't want any no come on assets chaka chaka color wheel.
Michael T Ganschow Green: wheel, I can crash dreamweaver for the whole class you just like their cubs did not crashing we've been the whole class it refrained manfully.
Michael T Ganschow Green: And by by the snippets, so now we have a lot more room look at all.
Michael T Ganschow Green: The extra insert things the insert out sprouted as soon as we open this up looking on look at how much bigger, better badder the CSS designer paladin look at this files palantir okay so that's the interface tour of dreamweaver do we have dreamweaver questions.
Michael T Ganschow Green: Do any of you are watching this pre recorded and dreamy the question.
All right.
Michael T Ganschow Green: Should we set up a site root.
should set up a site.
Michael T Ganschow Green: So the first little bit about setting up a site route.
Michael T Ganschow Green: You know, we don't want to save you no no go away so first thing to setting up a site route is to set yourself up a root folder which I believe I have already.
Michael T Ganschow Green: It is sitting right here, and no so this should be all are terrible working at all of our terrible working graphics excellent.
Michael T Ganschow Green: So I have a root folder already here notice within this root folder remember that project to was talking about the folders to have in your root folder notice a CSS folder and images folder a scripts folder and a working dash graphics folder oh my almost.
prepared.
Michael T Ganschow Green: So, must have a root folder before you can set up a site root in dreamweaver okay.
Michael T Ganschow Green: So i'm going to set up a site root real quick in my dream, let me show you guys how to do it, so if you have a dream lever that you've been using a lot, for example, my dream Weaver and I go to manage sites.
Michael T Ganschow Green: you'll see a big pile of sites in your dream Weaver.
Michael T Ganschow Green: If you're using the class computers, they forget all of their sites pretty much every time that computer get shut off, so this will always be blank in your TMC see lab computers, if you use them your dream weavers at home it's also probably blank as well, right now, so.
Michael T Ganschow Green: I can make a new site route by going site new site, but I don't want you to make it that way.
Michael T Ganschow Green: i'm going to train you to go to site manage sites, why because we're done right up at the top of this 123 menus insight manage sites okay.
Michael T Ganschow Green: So we're not going to do we're not gonna we're not going to go site new site in order to make a new site we're going to go to site manage sites, the reason why.
Michael T Ganschow Green: I want you to come through here to make your new site, so that if you have are any already existing sites, you can come in and modify those as needed okay.
Michael T Ganschow Green: Alright, so.
Michael T Ganschow Green: let's make us a new site route now if you're not paying attention previously, I want you to pay attention now.
Michael T Ganschow Green: This is some of the most important information i'm going to tell you in all of dream weavers coming.
Michael T Ganschow Green: Right now Okay, so that means you pre recorded people, you can watch this segment like 50 times you're probably going to watch it again and again and again because i'm going to do this at the beginning of a bunch of different classes until i'm too lazy to.
Michael T Ganschow Green: So we're going to go and make a brand new site, so let me zoom in a bit here so we're going to use the zoom box here Hello zoom box danced.
Michael T Ganschow Green: portion of screen, yes, take the zoom box and we're going to put this over manage sites, so you guys can see what is happening so here is my manage sites menu I access that, by the way, by going up to.
Michael T Ganschow Green: going up here to site manage sites, but apparently it will not let me do that, right now, because the manage sites is already open so hang on one second.
Michael T Ganschow Green: So i'm going to be on dreamweaver 123 over to stop it 123 over to site manage sites so again if I get this to trigger without clicking yeah because site.
Michael T Ganschow Green: let's see your screen what am I doing oh doing something your screen sharing is pause no I don't want to pause my screen sharing so we're going to go site manage sites Okay, and that opens up this manage sites.
Michael T Ganschow Green: pop up here basically.
Michael T Ganschow Green: And you're like well I don't want to current sites, but I want to make a new one, I want to make a new one turn it, so I say OK OK OK OK OK, to make a new site.
Michael T Ganschow Green: So, in order to make a new site here you come down here to the lower right corner and you click new site that will pop up another pop up on top of a pop up is pop up section, you called site setup okay site setup is the is how you set up a site root in dreamweaver okay so.
Michael T Ganschow Green: Here we go, are you ready.
Michael T Ganschow Green: Are you ready, I think you really.
Michael T Ganschow Green: sleepy So here we go.
Michael T Ganschow Green: let's do this thing so i'm gonna give it a name first.
Michael T Ganschow Green: Well, you can keep with naming conventions here, if you like, but you don't have to so if you're feeling spacey and capital letter E and special character, he you can use that here so, for example, I could put in GR C 175 class demonstration website a.
Michael T Ganschow Green: Strange Gallagher that is spelled it correctly.
Michael T Ganschow Green: All right, so that's the site name now this has no effect on anything relating to your site it's just what will appear here in the manage sites window in dreamweaver so whatever you name, this is what will appear right here Okay, so I have a site name sitting here and ready to go.
Michael T Ganschow Green: Next next.
Michael T Ganschow Green: My local site folder I have to go and find my root folder in my case on my desktop I don't know what demented location you guys are keeping your route folders in.
Michael T Ganschow Green: And I don't even want to know i'm not old enough i'll need an adult if you tell me where you're keeping your route folders so we're going to do here is i'm going to click on this year local site folder.
Michael T Ganschow Green: Chicago and it's going to come up with a nice little window, it shows my desktop or I can click on my desktop now, like all like that and I go in here and I go find my G RC 175 folder right there and I clicked you so now i'm named my site and i've gone and found my root folder.
Michael T Ganschow Green: On my desktop.
Michael T Ganschow Green: So it should be the end of it.
Michael T Ganschow Green: let's not remember, I told you guys we're gonna learn how to drive manual in here that we are not regular web users, we are power users.
Michael T Ganschow Green: So we're going to dip into the advanced settings if you, dear.
Michael T Ganschow Green: So here we go so over here on the left side, you will see, we have site servers CSS pre processors and advanced settings so what I want you to do is click on advanced settings so that it.
Michael T Ganschow Green: POPs open and POPs out this lovely little fly out menu yeah then i'm going to highlight local info local info which is going to open up this thing right here okay.
Michael T Ganschow Green: Now we don't have a web URL yet for our website i'm not going to put that web URL, no, no, no, no, no way, but what we do have already is in images folder okay.
Michael T Ganschow Green: So what we're gonna do is we're going to take this guy this little dude here we're going to click on this folder right at the end and get another little file browser look it's already looking it's already looking inside my.
Michael T Ganschow Green: folder look at that excellent so all I need to do is go find the folder labeled images and click choose and now suddenly pointed at the images folder in my website.
Michael T Ganschow Green: All right now we're ready to go now we're cooking with gas now, we still have one more step, so the last step click on jquery in the list it's about two thirds of the way down the advanced settings flat list here okay.
Michael T Ganschow Green: And notice it's already gonna i'm gonna make us a folder no dream Weaver I don't need you to make me a folder.
Michael T Ganschow Green: So what we're gonna do is we're going to change this we're going to come over here and click on this little folder here and we're gonna say no, no auto generated assets notice look at this it's got capital letters in the folder name, we.
Michael T Ganschow Green: get this a web developer nevermind so we click on scripts here we click on choose.
Michael T Ganschow Green: Now we're ready to go, so we have our scripts folder selected under jquery we have our images folder selected under local info in our site, we have a site name and we have our root folder selected okay.
Michael T Ganschow Green: With that I can match this save button bang through folder contains also also contains the folder for Jesse spring, this is my cost problems, yes, I am aware don't worry dreamweaver.
Michael T Ganschow Green: Okay it's gonna be okay it's gonna be okay.
Michael T Ganschow Green: boom, so I click to the Okay, and suddenly, I have a GR C 175 class demonstration website now I can clear out of here and click done.
Michael T Ganschow Green: And as soon as I did, that my files palette over here on the side suddenly brought up by root folder it shifted itself to bring up this root folder.
Michael T Ganschow Green: So screen sharing full size boo yeah so now I have all my root folder sitting over here CSS images script working graphics all set and ready for me to do only the finest in terrible tasks so before I start doing some terrible tasks here.
Michael T Ganschow Green: Do we have any dream Weaver questions so far.
kianabohm: Oh, I have a question Michael.
Michael T Ganschow Green: I am listening.
kianabohm: And when last class when you were showing us how to make like the image assets.
booth.
kianabohm: Those you know created its own folder.
kianabohm: Yes, is that inside of our images folder.
Michael T Ganschow Green: It is actually stuck within your.
Michael T Ganschow Green: Working graphics folder.
Michael T Ganschow Green: It basically sticks the folder right next to your wherever your your export in photoshop file is so what I typically do when i'm working with a with an export at photoshop file like this is, I will.
Michael T Ganschow Green: I will go into my assets folder and I will copy paste out any of the updated.
Michael T Ganschow Green: layers that I want to use on my website now you could in theory go into your photoshop preferences and tell it dump everything in that images folder but you would have to reset that every time you make a new.
Michael T Ganschow Green: project, because otherwise it to.
Michael T Ganschow Green: Keep saving.
Michael T Ganschow Green: me images folder from the last website you published it too, so I prefer just to leave it i'm making one of these little folders.
Michael T Ganschow Green: Next to whatever directory the file lives in, and then I could just go copy paste any anything into my images folder.
Michael T Ganschow Green: is just my own laziness you know if you if you feel that you can keep track of going into your photoshop preferences and changing it, I believe I photoshop open I do, I believe it or photoshop.
Michael T Ganschow Green: preferences well let's go do.
Michael T Ganschow Green: To do to do go.
Michael T Ganschow Green: Where did they put it i'm trying to be Oh, they moved it again didn't they where did you put it good general see where you stack it they always move the preferences around on me, every time I think I know what's going on it, it runs away where's your generate stuff in a phase.
Michael T Ganschow Green: workspace tools history file handling file handling the generating do to do to do there's your cloud document great cloud documents, yes let's start up with that lose your files on the cloud great um.
Michael T Ganschow Green: Where did you move chinnery okay just generate oh hang on file okay don't have one open hang on a second guys we're going to see where the generate reset as plugins generators turned on mm hmm.
Michael T Ganschow Green: They may no longer even let you move around regenerate puts it well that's lovely that is.
Michael T Ganschow Green: That is yeah okay all right so that's.
Michael T Ganschow Green: that's the thing and hang on, let me open up our terrible terrible photoshop file and see if they can kind of generate preferences pop open file generate image assets.
Michael T Ganschow Green: They may have taken that away in this new photoshop version that would be hilarious if they did that, but you used to be able to designate in photoshop where it went but I never bothered just because I was too lazy and apparently photoshop has.
Michael T Ganschow Green: Apparently agrees with me and as hit that somewhere i'll have to go look it up and find out where it went.
Michael T Ganschow Green: Well, as my latest pallets to focus photoshop still up but um but used to be able to change around with that thing land.
Michael T Ganschow Green: and
Michael T Ganschow Green: And I I never bothered I would just copy paste those guys so i've got to do some digging and see a photoshop has moved where you set the assets folder where it goes but.
Michael T Ganschow Green: I don't I don't particularly bothered with moving that around.
Michael T Ganschow Green: that's a good question Thank you kiana other questions.
Michael T Ganschow Green: The chance to work up the nerve for question.
Michael T Ganschow Green: Okay, the very last step to get hooked up no problem Kathy so what I did.
Michael T Ganschow Green: What I did.
Michael T Ganschow Green: Is I was.
Michael T Ganschow Green: So I assume you had given your site a name and you went you found your local site root folder and then in advanced settings with the local info clicked on this little folder here set my images, then I went to jquery and I in jquery I clicked on this folder right here.
Michael T Ganschow Green: Does that my scripts folder so I already pointed in there and then with that done with everything all set up with that guy sat there with these guys set here with this guy said here.
Michael T Ganschow Green: Then I click save and dreamweaver did uh huh you gotta gotta root folder pointing this haha yes, I do so, I hit OK anyway and boom it created that root folder once it had created it I clicked the done button right here and I got a full big open three moves.
Michael T Ganschow Green: So does that help Kathy cool good good good good good good i'm glad I can help you get caught up yeah that i'm creating site roots and doing it correctly, time and time again, is one of the most important things.
Michael T Ganschow Green: With working and dreamweaver because dreamweaver basis so much of its linking and it's finally interaction on properly created site routes and properly created route folders that.
Michael T Ganschow Green: When it when it when when you don't hook it up correctly or don't hook it up at all, you were you get all kinds of we're failures.
Michael T Ganschow Green: there's a reason why I am the way I am and a lot of that is learning, all of this stuff the hard way i'm on and on about dreamweaver route folders when I had a site exploded a client presentation made me look real professional but I never forgot i'm so.
Michael T Ganschow Green: Other dreaming of questions anybody having any issue with the with.
Michael T Ganschow Green: Cyprus.
Michael T Ganschow Green: Okay.
Michael T Ganschow Green: everybody's rolling here alright cool.
Michael T Ganschow Green: To make bobby's first web page, when you say.
Michael T Ganschow Green: let's let's let's make some web pages let's get let's get some page action going on here yeah So when I crack a new file open and take a look at raw unfiltered html.
Michael T Ganschow Green: ooh alright so file new.
Michael T Ganschow Green: And you get a bunch of options in new document here.
Michael T Ganschow Green: You have a bunch of options, you can make an html document a CSS document or less document and CSS document that's SAS document javascript document that json document php document and xml document an svg document template html and php.
Michael T Ganschow Green: Well, what do you use all of that brings really any of it, the most new document you're going to be making in here html and CSS and.
Michael T Ganschow Green: javascript by the end of it, maybe.
Michael T Ganschow Green: Now we're also not going to use bootstrap ah, no we're not using any frameworks here you guys are going to develop nick of html files, I want you to have a grasp.
Michael T Ganschow Green: of naked CSS and naked html before you get into any fancy pre processors Okay, no, no fancy pre processors just yet don't go chasing waterfalls guys, we want to use the manual one first so you know how it all works, and then you can get fancy when you feel like so new html no framework.
Michael T Ganschow Green: click create.
Michael T Ganschow Green: Oh snap dog look at that we have a code and we have this white space, so we got to a stage has been split in two okay.
Michael T Ganschow Green: So here we go.
Michael T Ganschow Green: This time here is our code view and this up here is our whiskey wig lizzie, which is a big long ass acronym that stands for what you see, is what you get, and that is.
Michael T Ganschow Green: What is what it aspires to be okay guys, that is what it aspires to be but.
Michael T Ganschow Green: It isn't really it doesn't get there.
Michael T Ganschow Green: it's.
Michael T Ganschow Green: Things can look just beautiful in the wysiwyg and then you open them up in a browser.
Michael T Ganschow Green: Everything is gone all to poop okay all to poop.
Michael T Ganschow Green: that's because the wisdom is a dirty liar it's a trickster God, who would like to be more than that and anytime any edits you make the children, the wizard web don't ever trust what you see in the wizard wig because it's not going to necessarily be what you see in a browser.
Michael T Ganschow Green: When it when it comes to all else preview in a browser any questions any ideas anything like that preview it in a browser now.
Michael T Ganschow Green: Michael uses the wizard wig so little that he changes his preferences see I don't like the busy wig on top and it's distracting so I like to come up here to my view.
Michael T Ganschow Green: And I go split here so we've got.
Michael T Ganschow Green: i've got my code design split, you can split it in a whole variety of ways, by the way, you can have columns high columns you can have all sorts of different.
Michael T Ganschow Green: view modes, you can have a code view and a live view you can have a hey hey I know you're thinking you can hey hey hey stop getting in the way zoom going to have a code view.
Michael T Ganschow Green: A code view.
Michael T Ganschow Green: And another code view like you might have your CSS open over here in your html of open over here, I actually use something like this quite a bit.
Michael T Ganschow Green: My preferred view in the split views, yes, got me here, instead of the code and design.
Michael T Ganschow Green: And then set it to split horizontally.
Michael T Ganschow Green: So this is the standard right, but I take it, and I flip it okay.
Michael T Ganschow Green: I come down here and I uncheck design view on top, so the reason why I do this is, I want to have my code view up top where I can see it easiest now.
Michael T Ganschow Green: I highly recommend you guys fiddle around with your dream Weaver interface, while you're building things and see what you like, but I, like the code so much i'll bring my arrow to stop sharing going to magnify cheering see.
Michael T Ganschow Green: we're going to go boop portion of screen share there we go, so I like it so much that I come in here right along the edge loops up POPs the double headed arrow as the double headed arrow and I drag this guy down a bit so that I might have.
Michael T Ganschow Green: More code view then we'll see with view, sometimes I even turn code view or turn busy with view off entirely So if I have multiple browsers.
Michael T Ganschow Green: I will not use, I will not have Lucy we're going multiple monitors, excuse me by multiple monitors, I will not use wysiwyg view at all.
Michael T Ganschow Green: I wanted the code view here, and then I will have a browser open, on the other, monitor that I am refreshing here, I have a busy wig just for a little bit of previewing okay.
Michael T Ganschow Green: So Questions chat below to go.
Michael T Ganschow Green: alright.
Michael T Ganschow Green: let's look at this html that it's generated then shall we.
Michael T Ganschow Green: tend to learn the structure of html so i'll talk to you guys the base structure of the programming language right bracket tag bracket.
Michael T Ganschow Green: Everything below it as effective until you close the tag with a bracket forward slash bracket so let me show you what we've got here i'm.
Michael T Ganschow Green: trying to get that zoom going again let's let's zoom in so i'm gonna stop sharing when I go to our magnifying of myrna file.
Michael T Ganschow Green: i'll see if there's a keyboard shortcut to switch to this thing, so I don't have to constantly stop screen sharing all right, look at that html up there in the corner.
Michael T Ganschow Green: So this is edits very most basic a website there it is right there that's not just a web a web page a website there, it is because any one page if the website is one page come to the site.
Michael T Ganschow Green: So that is that is one little one little website right there all set and ready to go Okay, so this is a this is quite a good start so.
Michael T Ganschow Green: let's show you guys, the structure now dreamweaver likes to mash all of its tags together i'm not 100% why.
Michael T Ganschow Green: dreamweaver does this Okay, but in loves to run its html with everything mashed together in one big mashed potato and a lot of people find that confusing.
Michael T Ganschow Green: And a lot of people go Michael doesn't it does all an html have to be smashed together like that, no, it does not so what I tend to do.
Michael T Ganschow Green: When dreamweaver generates one of these Dudes as I tend to come in and I add a line break at the end of each line so come in here and I click at the end of each tag pair and add in.
Michael T Ganschow Green: A nice little line break down some large this dude dude dude dude okay So what does this do well, this gives me a little more room to breathe, I can examine each tag individually okay.
Michael T Ganschow Green: I also tend to come in front of tags that are within tags and I indent anything that is within so that I can immediately see what is within what okay.
Michael T Ganschow Green: So here is the structure.
Michael T Ganschow Green: So up top we have a comment tag don't worry about this comment tag it all.
Michael T Ganschow Green: will go over comment tags later on, all this is doing this bracket exclamation point Doc type html bracket is serving as a reinforcement.
Michael T Ganschow Green: This html tag right here to identify to a web browser that this is an html document and should be read as such.
Michael T Ganschow Green: it's important but we're not going to go over comment tags at this point, probably a little later in class maybe a little later today, depending on how.
Michael T Ganschow Green: kooky i'm feeling, but this is your identifier up here and then it basically what type of html it is so this doctor goes through a variety of different things, based on what.
Michael T Ganschow Green: What what the Doc type shows Okay, then.
Michael T Ganschow Green: We have.
Michael T Ganschow Green: We have our very first proper html tag notice, by the way the color coding this common tag was treated like regular text and therefore is bright white these.
Michael T Ganschow Green: guys are html tags and therefore they're dyed blue dream Weaver color color codes everything so that you can see what's going on Okay, so this.
Michael T Ganschow Green: Is an html tag Okay, and if you scroll all the way down to the bottom of the document you notice that there is a corresponding closing html tag okay.
Michael T Ganschow Green: So what is this what is all of this well these two tags are along with this specific so this guy here is telling the browser what type of html file ID this is and then these Dudes are telling the browser where the html begins and ends okay.
Michael T Ganschow Green: So these are our first guys and notice there, the outermost tags everybody is technically within them, yes, I could indent, the body and the head, some people do.
Michael T Ganschow Green: I believe them on a dented but let's begin just personal preference, if you would like to indent them to make it easier to see who is within who there's no problem with that okay so html.
Michael T Ganschow Green: html very first html tag you get to learn identifying to a browser what is html.
Michael T Ganschow Green: underneath html.
Michael T Ganschow Green: We have add Okay, and had is a very interesting tag okay.
Michael T Ganschow Green: head, yes, a.
Michael T Ganschow Green: head is a.
Michael T Ganschow Green: it's really fascinating it's basically where you put.
Michael T Ganschow Green: Things that are important to the document, but you do not want to show in a browser window okay that you don't want to show in your browser window.
Michael T Ganschow Green: So what goes in here.
Michael T Ganschow Green: Various search engine accessible data goes in here.
Michael T Ganschow Green: links to any files that might modify your html going here.
Michael T Ganschow Green: Also in Here are a couple of samples, we have this Meta tag Meta tags are Meta data word document data, so there are a whole variety of Meta tags, which we will go over as the Semester goes on, with that that cover.
Michael T Ganschow Green: That cover different aspects of your documents information and search engines will sometimes read that document, information and it can help or hinder your search engine ranking so.
Michael T Ganschow Green: we'll talk about Meta tags but way later on in the Semester this Meta tag right here is identifying this thing as a text file a regular old text file using.
Michael T Ganschow Green: The ut F dash eight character set it's basically the simplest type of text file, there is no ut half dash eight is like the text yes text dot txt text, the text text that ever lived okay well that's what this is identifying here.
Michael T Ganschow Green: Now this guy here is a much more interesting customer this guy.
Michael T Ganschow Green: Is our page title okay this right here in terms of search engines finding you and how you are and how you handle search engines, this is.
Michael T Ganschow Green: Some of the most important real estate in your document here okay.
Michael T Ganschow Green: Because search engines look here first for keywords and phrases that they're going to use to help with your page ranking so However, your title your page has a great impact on your search engine ranking Okay, so this is so, you want to me, you want to.
Michael T Ganschow Green: You want to make sure, whatever you're titling your page you choose carefully so what is my page title Where does this appear in my browser is this is this hidden no it isn't it's not hidden at all Okay, it is in fact.
Michael T Ganschow Green: Go back to regular screen sharing it is in fact displayed in every browser.
share.
Michael T Ganschow Green: Now screen share all right full screen ahead boy okay where's my where's my source okay so here's my Jesse 175 document right there's my page title right there GR C 175 and present and symbol.
Michael T Ganschow Green: Publishing one okay well there's this display i'll show you where it displays as soon as zoom pulls off the browser chrome it pops up right here in your tab okay so every.
Michael T Ganschow Green: Every single every single page you want to have a in your website, you want to have a unique page title.
Michael T Ganschow Green: Because it's going to come up in your tab and also search engines are going to look for them okay so carefully construct your page titles they'll be sitting up here in your tab.
Michael T Ganschow Green: don't just leave it as an untitled document, if you come across an untitled document.
Michael T Ganschow Green: In the tab when you're surfing the web, you find yourself a bad web designer.
Michael T Ganschow Green: You know better now, you might not know much else about web designer them and the basics of html works, but you know you're a better web designer than that guy because you will actually title your documents know untitled.
Michael T Ganschow Green: Documents please so make sure to Title your documents.
Michael T Ganschow Green: So.
Michael T Ganschow Green: Now, your question.
kianabohm: yeah is that seo.
Michael T Ganschow Green: That is seo.
Michael T Ganschow Green: i'm slipping some seo in on you guys right at the beginning.
Michael T Ganschow Green: Here, right at the beginning, I fact what you put in your title, the words and phrases are critical to your seo So yes, yes, yes, we are we're slipping in some search engine optimization well you guys aren't looking.
Michael T Ganschow Green: Oh right.
Michael T Ganschow Green: So so let's give this thing a title, then so i'm going to come back into zoomed in mode I like that zoom in feature that's good and where you guys can actually like see the code.
Michael T Ganschow Green: Just nice hey all right so let's give this a terrible terrible title, one of my usual bad titles I think so let's see here, this is um.
This is.
Michael T Ganschow Green: What am I going to call this one i'm gonna call this one.
Michael T Ganschow Green: michaels.
Michael T Ganschow Green: Very first website.
Michael T Ganschow Green: From playschool.
Michael T Ganschow Green: Alright, so it's been with a K in the brand name but whatever so.
Michael T Ganschow Green: i'm now ready to save my file i've got a page title we're going to explore a little more of the code in a second Okay, but i've given a terrible terrible terrible title don't worry my title is only get worse from here.
Michael T Ganschow Green: we're going to do a full screen share so you can see the saving process stock one share, and now we're going to save this thing so i'm gonna go i've got my title of got a thing designating everything is a UCF a text file and i'm going to go save this.
Michael T Ganschow Green: Now.
Michael T Ganschow Green: The SAVE, as will allow me to save this file wherever I like okay so notice though it's defaulting to my root folder good 123 Members being really nice So what are we going to call this.
Michael T Ganschow Green: I think, since this is our first page, I think we should call it the name of whatever the first file, we want to appear in the browser is which.
Michael T Ganschow Green: For your homepage or splash page whichever page you want to appear first in a browser you must must there is.
Michael T Ganschow Green: You are free to name the rest of your files whatever you want, but in this your hands are tied in handcuffed you must.
Michael T Ganschow Green: name this file index Okay, if you want it to appear first in a browser you must label it index so splash page landing page homepage whatever what ever you want to appear first, you must name it index.
Michael T Ganschow Green: Now the rest of them, you can name them whatever you like, but this one is called index.
Michael T Ganschow Green: And i'm going to go ahead and click save.
Michael T Ganschow Green: There we go, we now have a lovely notice our tab up at the top here turned into saying index dot html we now have a lovely index now.
Michael T Ganschow Green: Where I could zoom back in on the code and continue giving you a tour of what the various code pieces do.
Michael T Ganschow Green: let's preview this thing in a browser so beautiful, this is another award winning design you guys so in dreamweaver in order to preview things in a browser you have two options okay.
Michael T Ganschow Green: So you can come over here to the view drop down menu.
Michael T Ganschow Green: and hope to they move it.
Michael T Ganschow Green: whoa yep they moved it where did you move it to and the new version of dream Weaver.
Michael T Ganschow Green: Do to do to do to do to to where did you go you're somewhere hang on one second I gotta find it, but there is a menu, where you can preview in browser insert.
Michael T Ganschow Green: view attrition view, let me see here code view word wrap up law refresh design view design view options to death to death to the wow the movement.
Michael T Ganschow Green: used to be over here and Edit but apparently.
Michael T Ganschow Green: They completely removed it from the drop down menus or no here we go hang on they're just calling it real time preview I was looking for preview and browser they've renamed it excellent so you come down here to file real time previous a file about.
Michael T Ganschow Green: Five six to the way down, and there are whatever browsers you have installed on your computer are here my personal preview preferences, I like throwing it in chrome.
Michael T Ganschow Green: Now.
Michael T Ganschow Green: notice, of course, not a lot going on here okay now one of the cool things dreamweaver does do, though, is as things start going on here as we start.
Michael T Ganschow Green: modifying things in dreamweaver.
Michael T Ganschow Green: They will appear live here notice this address right here, this is a local network address that's basically hooked into your dream Weaver so as you start changing things the preview will change.
Michael T Ganschow Green: On the live basis notice we don't have any content in place, because we don't have any content in place, but in our tab we have my title michael's very first website from place school yeah so we got a title already.
Michael T Ganschow Green: Alright, so let's dig a little deeper than so questions on anything so far anything at all.
Michael T Ganschow Green: Okay cool beans so we're going over html tags.
Michael T Ganschow Green: These are designated telling the browser that this is an html file and where the html begins and ends remember these have to be the first and last tags in your document, if you want it to display properly, then up here, we have our head and our head is for.
Michael T Ganschow Green: Information or links that will affect this file, but we don't necessarily want to appear in the browser window, the link to our CSS file will go here our page title is right here.
Michael T Ganschow Green: Are various Meta tags are up here and there are other things that we will play with as well in the head tag, so this is kind of stuff that is modifying the file or providing information about the file, but we don't necessarily want to see any of that content on the main area okay.
Michael T Ganschow Green: Now notice, we come down here and we have a close head so heavy is ending this means that this is the end of anything that you want to hide from the browser.
Michael T Ganschow Green: And then the beginning of our stage the beginning of what will display in the browser is right here, the body tag Okay, the body tag.
Michael T Ganschow Green: tells us what will show in the browser anything between this opening body, and this closing body, and you can always tell it to close tag by bracket forward slash tag bracket.
Michael T Ganschow Green: Anything in between these two tags will show in the browser window.
Michael T Ganschow Green: wow that is a visible tag we can make things invisible and we can hide things and and a lot of tags are by themselves naturally invisible but whenever we put their modify it to make a show it will show, so we were anything you're sticking the body will show in a browser window.
Michael T Ganschow Green: Now, there will be a couple of things to stick in the body that won't and modify things but that's later on in semester, so not to worry.
Michael T Ganschow Green: Then our body closes out here, and then our html closes out looking at a bouncing baby web page.
questions.
Michael T Ganschow Green: well.
Michael T Ganschow Green: Well, well well well well so let's go.
Michael T Ganschow Green: Well, well well alrighty then so let's build us the structure of a bd live.
Michael T Ganschow Green: I think I think.
Michael T Ganschow Green: Okay, so.
let's do this.
Michael T Ganschow Green: All right now, one of the very nice things.
Michael T Ganschow Green: That html5 has done for us is the w three see the worldwide web developers group.
Michael T Ganschow Green: They they went back to the drawing board with html5 and they rebuilt, a lot of the linguistics of it, so it still functions as a markup language, but the actual tag names, the actual what we're calling the tags more calling the tags are not.
Michael T Ganschow Green: or what's called semantic okay so semantic tags are tags that say what they mean and mean what they say, well, that means is, whatever the tag is called is pretty much what it's for that's not purely the case but there, but it is.
Michael T Ganschow Green: it's mostly the case in html5.
Michael T Ganschow Green: So.
Michael T Ganschow Green: let's have some fun.
Michael T Ganschow Green: alright.
Michael T Ganschow Green: One moment here let's come up.
Michael T Ganschow Green: We will get it fixed.
Michael T Ganschow Green: alright.
Michael T Ganschow Green: So let's make us let's make us a website, here we go.
Michael T Ganschow Green: All right.
cool.
Michael T Ganschow Green: chatting in alright screen sharing let's get in there with that little screening in wider.
Michael T Ganschow Green: screen share.
Michael T Ganschow Green: cool and let's pop chat open, so I can see if anybody asked me questions, so no spaces inside of tags um.
Michael T Ganschow Green: That depends gum so spacing is very interesting right in html right.
Michael T Ganschow Green: Basically, you can put as many spaces as you want within tags so so in here, I can come in here, and I can put as many spaces as I like Okay, and I can put spaces between words and things like that, but html handles spaces very oddly what it does.
Michael T Ganschow Green: Is it will only read the first space Okay, because it assumes that first space is like a space between words here, like, for example in the title.
Michael T Ganschow Green: But any other spaces.
Michael T Ganschow Green: It will simply discard in terms of within the tags themselves like within the brackets no you don't want to have any spaces in there, those are all typically single words.
Michael T Ganschow Green: And if there's more typically the.
Michael T Ganschow Green: Why shouldn't say that i'm phrase that wrong so delete that from your brain, you can use spaces inside of tags, but they signal things they signal modifier is for the tag so the actual name of the tag will typically be one word okay or an acronym.
Michael T Ganschow Green: or a place total.
Michael T Ganschow Green: And then, if you put a space and another word that becomes what's called an attribute we use those.
Michael T Ganschow Green: Pretty shortly, actually, and those are modifier of tags okay so view spaces what's going to happen is the tag will think you're adding an attribute to the tag and you're not necessarily add an attribute.
Michael T Ganschow Green: So most so all tags themselves will be one word an acronym or one letter typically.
Michael T Ganschow Green: Now, are there are occasions that break that one or two will come across them, but I will highlight them when they when they come across because html is built off of English, so it violates its own rules here and there, just keep you on your toes.
Michael T Ganschow Green: that's a good question any other questions.
alright.
We build a structure.
Michael T Ganschow Green: Because right now, this is just utterly unstructured I think we need to bring some structure to its life.
Michael T Ganschow Green: So de de de de de de doop de minimis down and will surround our body.
structure.
Michael T Ganschow Green: Okay, so let's mix in some new html tags, shall we.
Michael T Ganschow Green: So here we go here we go.
Michael T Ganschow Green: So let's go header.
Michael T Ganschow Green: With a closing header okay.
Michael T Ganschow Green: This is a header.
Michael T Ganschow Green: This is one of the tags that trips people up right away in html done right away.
Michael T Ganschow Green: header is what's called a layout tag tell you saw me mentioned those are structured tags, excuse me a structure tab you already mentioned structure tags in the page to handle.
Michael T Ganschow Green: structure tags don't do anything by themselves so header has no defined size, no defined a no defined color no defined boldness no nothing okay.
Michael T Ganschow Green: header is designed strictly as a structural flag and as something for us to style with cascading style sheets when we get to it, but what letter is for what it's used properly, for is all of the content that is at the top of your web page.
Michael T Ganschow Green: fact.
Michael T Ganschow Green: You know what.
Michael T Ganschow Green: i'm going to introduce you guys to comment tags, now we talked a little bit about it up here with the Doc type, but I think i'm going to introduce you guys to comment tags now so that I can add some comments to this as i'm working on it OK.
Michael T Ganschow Green: So i'm a screwed this thing over and i'm going to show you guys how comment tags work okay now comment tags are intended to be invisible.
Michael T Ganschow Green: And look, they are is a way for you to write notes to yourself in the code think of like little sticky notes you're sticking all over your code Okay, and they are real lifesavers.
Michael T Ganschow Green: anytime you you you you do something really cool or whatever just a comment down in your code about how you did it so you'll remember how to do it in the future okay.
Michael T Ganschow Green: So i'm going to come here to my header and i'm going to insert a comment tag so let me show you what that looks like.
Michael T Ganschow Green: um comment tags are one of the tags that violate html is rules, so they don't really have a closer, they just have a pair of brackets yeah.
Michael T Ganschow Green: So we come in here, I put in an opening bracket, then I put in an exclamation point Okay, then immediately after that I put in a dash dash okay notice as soon as I put this dash dash in.
Michael T Ganschow Green: My body html disappeared, by the way, doesn't work if you don't make the sound so i've suddenly lost my clothes body and my clothes html i'll just get ios, what are we going to do well, we have to add in our comment and close it here so.
Michael T Ganschow Green: i'm going to put in header.
Michael T Ganschow Green: tags.
Michael T Ganschow Green: contain.
Michael T Ganschow Green: The.
Michael T Ganschow Green: Top.
Michael T Ganschow Green: Content the yeah the top the content.
Michael T Ganschow Green: At the top of our page yeah oops I tucked outside my box one second now I just need to close them, so I get my clothes body blows html so I come in here and I go dash dash bracket.
Michael T Ganschow Green: And that opens that up by the way you don't have to have spaces between your dashes in your content, I like to add, in a space, just to.
Michael T Ganschow Green: clean it up a little bit, but that's my own personal preference so again, you want to hide anything bracket exclamation point dash dash okay.
Michael T Ganschow Green: Then that's basically freedom to write a note to yourself, then once you're done writing the note to yourself dash dash bracket okay so that's basically is just just a way to keep track of like me things you did or make things invisible so, for example.
Michael T Ganschow Green: let's go to the big chair.
Michael T Ganschow Green: Alright, so we're gonna go to the big cheer here, so I think I still got the code open from my website.
Michael T Ganschow Green: zoom chrome here alright so.
Michael T Ganschow Green: I have a whole string of different announcement things here Okay, the whole string of different announcement things, not just the class files download or here, but all kinds of things.
Michael T Ganschow Green: And I made them invisible with these comment tags bracket exclamation point dash dash and then dash dash bracket.
Michael T Ganschow Green: To close it.
Michael T Ganschow Green: Basically way to write notes to yourself questions.
Michael T Ganschow Green: All right.
Michael T Ganschow Green: let's continue building a structure, shall we.
Michael T Ganschow Green: oops I just accidentally put the tag in the chat Okay, no I didn't that's good.
Michael T Ganschow Green: I let's put another tag in here another tag for our structure so i'm thinking we're going to build a nice simple web page it's got a top bar.
Michael T Ganschow Green: Like a thinner bar below the top bar it's got our navigation in it whole bunch of content below it and then a footer on the bottom so there's my header tag.
Michael T Ganschow Green: Next is mine nav tag oops I need to close this top four page dash draft bracket and we go now tag Okay, the name tag.
Michael T Ganschow Green: is also a structure tag.
Michael T Ganschow Green: Yet is used to designate areas in our document that contain navigation, so any tag that or anywhere you're.
Michael T Ganschow Green: planning to put navigation doesn't matter if it's below the header in the header next to the header in the footer wherever and you can use a name tag as many times as you want throughout your document.
Michael T Ganschow Green: wrap your navigation in a nav tag that send us to the browser this is navigation and browsers and search engines will love you for it more seo so we wrapped on navigation in Nam tags.
Michael T Ganschow Green: And our web pages navigation.
Michael T Ganschow Green: goes here.
Michael T Ganschow Green: whoa there is that one so that tells us where our navigation will go okay.
Michael T Ganschow Green: Then.
Michael T Ganschow Green: We need our main content area Okay, and again here comes notice also kind of how they sort of spell out what they are there comes another one.
Michael T Ganschow Green: Our main content area main content area is bracket main bracket come down here and put in the closing main main is pretty much what it says on the tin main tags wrapped around them being content area of your web page okay.
Michael T Ganschow Green: And there are some inner tags, we can use within main and, in fact, we will later on, so mean.
Michael T Ganschow Green: This is the.
Michael T Ganschow Green: main content.
Michael T Ganschow Green: of our.
Michael T Ganschow Green: web page.
Michael T Ganschow Green: web page or web page is Michael.
Michael T Ganschow Green: Alright, then finish this off a little bit here so lastly let's finish our base structure off here right down here, we now have, we need to put a bottom on it Okay, and fortunately html5 has a tag for that it's called footer.
Michael T Ganschow Green: Oh, look at that what a stinky footer this website has just a stinky footer perhaps it's got some athletes bugs alright so here is footer footer.
Michael T Ganschow Green: contains the content that is at the bottom of our website.
Michael T Ganschow Green: now and again, if you don't have or, if you have anytime you have an idea write a comment to yourself notice again they're great out there invisible okay absolutely invisible.
Michael T Ganschow Green: notice also they're tagged in London, so I can see that they are all inside of body.
Michael T Ganschow Green: So questions on any of this so far.
Michael T Ganschow Green: stupid.
kianabohm: Does it matter where you put the comments.
Michael T Ganschow Green: nope I tend to stick him at the end at the end of tags.
Michael T Ganschow Green: You can put them before the first tag like I can come in here, and I can go or remove header we can put header in front.
Michael T Ganschow Green: of our opening header and it doesn't change how it works, you can also put them inside of them like if you know if you've you want to ID something like.
Michael T Ganschow Green: Such attached to go here, and you want to use it as a placeholder you can absolutely do that as well.
Michael T Ganschow Green: comments can be stuck anywhere now I some of you may have noticed, by the way, that when I close those comments other tags around them go invisible.
Michael T Ganschow Green: So comments tags are really good way to debug your website if pieces of it are breaking you can go in and comment out different parts of it and see where the breakage is occurring, you can turn off and on certain tags by wrapping them in comment tags very similar to what I did here.
Michael T Ganschow Green: What I did here.
Michael T Ganschow Green: In the.
Michael T Ganschow Green: website where I have rendered all these different announcements invisible.
Michael T Ganschow Green: Just by commenting them out they're still there in the code and still accessible, but they are completely invisible to a browser window what do file save or we.
Michael T Ganschow Green: see a common tactic Andy I like to use them a lot alright so questions.
Michael T Ganschow Green: To them check in the browser.
Michael T Ganschow Green: Probably nothing good if you know it will go back to the big ones still.
Michael T Ganschow Green: let's see what this looks like in the browser so there's our web page right here.
Michael T Ganschow Green: Yes, that is just um look at that you can squint at it and you can just feel the design radiating off of.
Michael T Ganschow Green: All right, so.
Michael T Ganschow Green: Shall we actually put something in here that shows in the browser window.
Michael T Ganschow Green: let's put some stuff in our main.
let's go back to the zoom dim view.
Michael T Ganschow Green: Where did you go.
Michael T Ganschow Green: Are they I mean two different menus I don't know but there it is alright.
Michael T Ganschow Green: So time to.
Michael T Ganschow Green: Add in a little content inside our main so we actually have something to see when we pop this open in a browser tab because otherwise.
Michael T Ganschow Green: Nothing you see.
Michael T Ganschow Green: So.
Michael T Ganschow Green: What sounds a little something to see.
Michael T Ganschow Green: So what i'm going to put in here, I think I think I think we need to put in a nice big fat headline.
Michael T Ganschow Green: So what am I going to put for my headline all work.
Michael T Ganschow Green: And no play makes Michael.
Michael T Ganschow Green: A dull boy there we go, that is our Nice and line and if I go stop sharing my.
Michael T Ganschow Green: Little one and go to the big one, and if I save this thing.
Michael T Ganschow Green: file save.
Michael T Ganschow Green: And come down here and pop it up and in the browser look actual visible thing i'm a bob's with.
Michael T Ganschow Green: Actual visible thing in the vibes yay excellent beautiful exactly what we're talking about, so we have a headline that does not.
Michael T Ganschow Green: look like a headline so thin and tiny grows, well, we need tags for that html to the rescue.
Michael T Ganschow Green: So.
Michael T Ganschow Green: Along with these structure tags.
Michael T Ganschow Green: html has.
Michael T Ganschow Green: a bunch of other non structure tags that affect what is actually going on around them notice the structure tags don't do anything visible.
Michael T Ganschow Green: Right they're just there to identify where bits and pieces are and to later be made visible using the magic of cascading style sheets i'm.
Michael T Ganschow Green: Having however um html does have several formatting tags these that's what these non with these non structure tags are called and what they do.
Michael T Ganschow Green: Is they modify things Okay, they modify things so what we're gonna do is we're going to modify our type with the very first and simplest of these.
Michael T Ganschow Green: formatting tags a headline tag okay now a headline tag is are tremendously complex tag that will be nigh impossible for you to remember that go like this H1.
Michael T Ganschow Green: Close H1.
Michael T Ganschow Green: What have I done.
Michael T Ganschow Green: H1 basically tells a browser now in a browser to display the biggest and boldest text the browser can unmodified so whatever the largest Buddhist texts, the browser can display that any CSS interference.
Michael T Ganschow Green: yeah the H1 displays us now the H1 is intended as the primary matter of your web design Okay, and so it should only be used once per page.
Michael T Ganschow Green: Once per page otherwise.
Michael T Ganschow Green: You will the importance will diminish of the now What do I mean by importance well.
Michael T Ganschow Green: You remember how your title.
Michael T Ganschow Green: is the most important piece of real estate to a search engine.
Michael T Ganschow Green: This H1 tag, which is intended to be, for your overall page title your overall thesis statement.
Michael T Ganschow Green: is the second most important piece of screen real estate in terms of search engine optimization there is search engines love H1 tags, however.
Michael T Ganschow Green: If it sees more than one H1 tag per html per page but sees more than one, H, and not per site not per website, but per page so each of your page is going to have an H1 if it sees more than one each one per page.
Michael T Ganschow Green: It will immediately discount the H1 and candidates body copy because thinks you're trying to hack your search engine results so use one H1 for the broad thesis statement of each of the pages in your website okay one H1 tag.
Michael T Ganschow Green: Now there are six of these headline tags each of them getting progressively smaller, so you know what let's do that.
Michael T Ganschow Green: So.
Michael T Ganschow Green: H2.
Michael T Ganschow Green: I copy paste this I can retype the whole thing, but why i'm at home i'm comfortable i'm lazy i'm just going to change these two H tues.
Michael T Ganschow Green: Ah, to.
Michael T Ganschow Green: Say and then, if I pop this open in the browser notice H2 is slightly smaller and slightly less bold.
Michael T Ganschow Green: let's do the next one H3.
Michael T Ganschow Green: So each of these that are not H ones, can be used as many times as you want in the page why because they are intended for sub heads.
Michael T Ganschow Green: lesser headlines than your primary headline thesis statement that will be wrapped in your H1 tag.
Michael T Ganschow Green: Oh man look at that right there shrinking shrinking.
Michael T Ganschow Green: More more I say more people fleeing the meeting more.
Michael T Ganschow Green: H4.
Michael T Ganschow Green: and smaller still now we're down to like body copy size overweight, they get smaller because you know what you need guys, you know what you need you need a nice H five.
Michael T Ganschow Green: Which is now miniaturized type tiny headline and then just to complete the package, just to complete it all.
Michael T Ganschow Green: let's do H 686 is the very tiniest one alright spoiler alert you guys i've never actually used h6 on a real web document i'm not 100% sure.
Michael T Ganschow Green: The use case for it but it's basically like micro type there you go look at that both legally is just for you, you need to take like a magnifier do you.
Michael T Ganschow Green: look like a tiny.
Michael T Ganschow Green: tiny I need six is fantastic fantastic please look at that.
Michael T Ganschow Green: so little so little.
Michael T Ganschow Green: Alright, so do we have questions on.
Michael T Ganschow Green: H tags on html structure on anything of that so far.
Michael T Ganschow Green: alright.
Michael T Ganschow Green: Little body copy in here to.
Michael T Ganschow Green: An html files blocks of body copy.
Michael T Ganschow Green: are stuck inside paragraph tags okay.
Michael T Ganschow Green: Paragraph tags.
Michael T Ganschow Green: are pretty much what it says on the tin they make paragraphs so i'm gonna make me a paragraph.
Michael T Ganschow Green: First things first i'm going to make a set of tags.
Michael T Ganschow Green: So paragraph tags are just the letter P that's it.
Michael T Ganschow Green: that's it.
Michael T Ganschow Green: and paragraph tags basically add a little space to the top and bottom of a block of type that's within them to give it the feeling of a paragraph yeah.
Michael T Ganschow Green: So i'm going to go steal a paragraph stop share big screen.
Michael T Ganschow Green: Big screen.
Michael T Ganschow Green: And i'm gonna go grab me a paragraph re can ips Thank you bacon epson look at that there it is yeah we'll give me a paragraph cool bacon ips at a good enough paragraph we're going to grab this first one copy.
Michael T Ganschow Green: Then we're going to give me my magnification back.
Michael T Ganschow Green: paste that within my paragraph tags when P, so I now have.
Michael T Ganschow Green: A, paragraph I think I need another paragraph Doo Doo Doo Doo Doo Doo Doo Doo give me another paragraph copy.
Michael T Ganschow Green: And now let's add in another paragraph doesn't work we don't make the sound So here we go, we got a paragraph tags ready to go.
Michael T Ganschow Green: There we go, we now have two paragraphs of body copy in here so not only do we have a set of headlines, we also have got body copy we got we got just regular regular coffee in fact let's take a look at it in the browser.
Michael T Ganschow Green: doesn't work you don't make the sound guys.
Serious.
Michael T Ganschow Green: Look at that look at headlines and body copy okay headlines and body copy look at that.
Michael T Ganschow Green: Look at that effect, attempting to we got all the different bonuses and all the different sizes and then we got standard browser sized spaces man jazzercise of spaces man I don't know size of spaces man, so we got paragraphs, we got headlines and all kinds of things.
Michael T Ganschow Green: So questions on any of this.
kianabohm: So each paragraph has to have its own paragraph tag.
Michael T Ganschow Green: Correct correct um.
Michael T Ganschow Green: If I mash them together.
Michael T Ganschow Green: So if I take the closing paragraph off of this top paragraph and I take the opening paragraph off of the bottom paragraph what it does in the browser window is they run together.
Michael T Ganschow Green: So you, so this is what I was talking about about how it only listen to the first space and then no other space in that you put in an html it saw the first.
Michael T Ganschow Green: In between the paragraphs, but minus that space it basically just mash the whole thing together.
Michael T Ganschow Green: Now this is actually kind of handy I actually prefer the way it does it, because then I can use spaces throughout my code to visually organize it like I do with my tabs here, where I can just kind of see at a glance what is inside of what i'm in.
Michael T Ganschow Green: And as we go through the Semester you'll see a few other spacing tricks I use just to organize the code I think it's really handy because.
Michael T Ganschow Green: Then you don't have to think about.
Michael T Ganschow Green: You can just you know you just flow through and use spacing to to make your make your code much more manageable there are.
Michael T Ganschow Green: Okay, so you can.
Michael T Ganschow Green: In theory.
Michael T Ganschow Green: delete all spacing out of an html document so that every tag runs nose to tail as one single line and the whole thing will work fine TMC sees website is one of those.
Michael T Ganschow Green: When you come across when it's called minute vacation, by the way, what magnification means is taking out any and all extraneous space in your file.
Michael T Ganschow Green: it's allegedly to save file size, now I would never recommend doing it on anything you are working on i'm going to show you guys how to magnify files, by the end of the Semester, but because they do load.
Michael T Ganschow Green: Apparently infinitesimally faster, but you don't ever want to do it on pages that you are developing here you don't ever want to do this on.
Michael T Ganschow Green: On pages that you are are are are working on an active development pages, the only time you would modify is you make a copy of your active development pages magnify them and put those online, so you can actually use space as an organizational tool, really, really handy.
Michael T Ganschow Green: Other questions.
Michael T Ganschow Green: All right.
Michael T Ganschow Green: So.
Do we have no.
Michael T Ganschow Green: I did not put an image in the images folder fine when they're rectify that i'm going to move an image into my images folder.
Michael T Ganschow Green: And then i'm going to insert an image into our document here so that we will have an image sitting there i'm just being an image okay.
Michael T Ganschow Green: So i'm gonna grab let me see I think I we spit out a lot of decks here.
let's see.
Michael T Ganschow Green: Areas he looks terrible twos him hi Jackie are coming on me.
Michael T Ganschow Green: hobby.
Michael T Ganschow Green: images.
Michael T Ganschow Green: paste as a donkey.
Michael T Ganschow Green: should go get the duck Nana again, sometimes I use this image of a deck to and peanut butter jelly time and a piano in a banana suit I may use him in another image DEMO.
Michael T Ganschow Green: Sometime later because he's terrifying so i've copy pasted the ducky into my images folder so I actually have an image to put in.
Michael T Ganschow Green: And i'm going to insert an image.
Michael T Ganschow Green: Now, this will be the first time you guys get to see a property at work, oh snap dog property yes properties so let's go stop sharing put in the zoom in again zoom.
Michael T Ganschow Green: By the way, I hope the zoom is working nicely to show off the code, because I know how tough, it is to see it full resolution, sometimes on these things so i'm hoping, this will give you guys a little hang all right let's put in.
Michael T Ganschow Green: An image tag so you remember all this opening and closing stuff i've been talking about this whole time you know.
Michael T Ganschow Green: bracket tag bracket bracket forward slash bracket to open and close your tags, so that when you stick stuff in the middle affect them.
Michael T Ganschow Green: yeah image tags grossly violate that rule just I mean Google grossly violate that rule there what's called a singleton tag that's in singleton tags they don't close they just sit there the clothes that they open and close themselves Okay, so an image tag technically, yes, I am g.
Michael T Ganschow Green: There that's it, that is an image tag now dreaming of recourses immediately flag this with an orange number going I want you to watch do you have to.
Michael T Ganschow Green: yeah no it's that's it there's our image tag right there we're done yeah just going to be beautiful image tags are because of singleton tags there's only one of them, so one.
Michael T Ganschow Green: image tag you don't have to do an image and then a close image that won't even work really.
Michael T Ganschow Green: The only image, you need worry yourself about is that first image so we've got bracket IMG bracket okay now.
Michael T Ganschow Green: We have to add things to this image tag with add attributes you remember, was saying about when you can put spaces in tags and that it will trigger the tag to think that you're modifying it.
Michael T Ganschow Green: Well, now we're going to modify it so we're paying off your question from earlier kiana we're going to add in spaces in our tag we're going to add in attributes to go.
Michael T Ganschow Green: Find image in this case we're going to add two attributes to this image tag one in src a source attribute what does that mean that is go and link to this image file go find this image file html and then we're going to add in an alt attribute.
Michael T Ganschow Green: The alt attribute stands for alternate text, and it is a, it is a very useful thing to use on your website why because it's for site readers for the Blind okay.
Michael T Ganschow Green: And you can also it also helps you describe images to search engines, so what you put in your alt is very important because it's essentially the way to let blind people see your imagery.
Michael T Ganschow Green: So you want to do a liner to have careful description of your imagery in your all.
Michael T Ganschow Green: search engines tend to not give any more weight to whatever text you have in your all over your body copy, but they do want to see that alter their for all images that are inserted via html like this IMG tag right here, right, so I n G image, here we go.
Michael T Ganschow Green: image tag now let's add a source to that s RC I am geez space s RC so this src as a source attribute.
Michael T Ganschow Green: This is telling the image tag where to go find the image file Australia, where to go find a stinking image file, so we go src equals.
Michael T Ganschow Green: quotation marks notice dreamweaver being a bro here, by the way, and doing a drop down menu showing us the folders.
Michael T Ganschow Green: In our document or in our document in our root folder so it's showing the folders making it easier for us to link this is one of the reason number 571 why you sent a site all right so i'm i'm going to manually do it, though, because I like that so.
Michael T Ganschow Green: image source equals quotation marks image hey hey hey hey hey hey zoom don't give me that images.
Michael T Ganschow Green: there's our folder name and then a forward slash and now we go in and add in our ducky.
Michael T Ganschow Green: http http Okay, so this may be tweaking some of you, you may.
Michael T Ganschow Green: Have a little a little a little moment a little moment i've seen slashes before in website URLs yes anytime you encounter a slash in a website URL that is a folder in web terms a directory, but a.
Michael T Ganschow Green: folder So what are we doing here, we have our it we're looking in our images folder in our local website for a file name dechy dot jpg and oh boy oh boy, have we found him.
Michael T Ganschow Green: Now i'm going to click in between the last quotation mark and the closing bracket of my image tag add in another space and i'm going to insert an alt attribute all equals quotation marks OK.
Michael T Ganschow Green: And then here, I am going to write in a nice little description of said duck so that site readers for the Blind can feel glad that they are in fact blind and don't have to look upon this duck this rubber ducky.
Michael T Ganschow Green: Is subtly.
disquieting.
Michael T Ganschow Green: He seems to be looking.
Michael T Ganschow Green: Both within.
Michael T Ganschow Green: and beyond, do you.
Michael T Ganschow Green: Like he knows.
Michael T Ganschow Green: All there ever.
Michael T Ganschow Green: will be to know about you.
Michael T Ganschow Green: Are you really that shallow.
Michael T Ganschow Green: So there we go there's a nice little description of our ducky.
Michael T Ganschow Green: Just a liner to describing each of your images that are put in this way, so, by the way, the technical term for this one, the image is inserted with html is called a.
Michael T Ganschow Green: For ground image Okay, the reason why it's called the foreground images, because it can be affected in the website, if an image is inserted via cascading style sheets it's called a background image.
Michael T Ganschow Green: And that means that it cannot be immediately affected with any tools in the browser I tell them to save this i'm going to change my screen share to the big screen.
Michael T Ganschow Green: Share now we have the big screen.
Michael T Ganschow Green: And now suddenly when it's a duck now because it's foreground image, I can grab the Doc and do about anything I want with them in the browser I can shave man, he is free and easy to steal and I think if I hold over the top of the little little bit that that nice little.
Michael T Ganschow Green: alt tag tool tip over the top of them.
Michael T Ganschow Green: were not in the case of chrome well fine, I think it does it in firefox though so we're gonna open this preview up and pop firefox open.
Michael T Ganschow Green: And we're going to get a little we're gonna get a little duck tool tipping action here with our aunt and jenna jenna hi firefox Where are you I said open.
Michael T Ganschow Green: Like to open you and have you not pop open the police convenient time Oh, are you downloading and update you downloading an update bro the middle night class.
Michael T Ganschow Green: Okay well nevermind, but in some browsers you if you hover over the top of the image, the outcomes how's it going man.
Michael T Ganschow Green: So I come in here I believe firefox does it do you want to send us your default browser no not in your life you very nice firefox I, like you, you read for previewing you have some fantastic developer tools.
Michael T Ganschow Green: used to be loading my website Thank you hey here, it is, I think firefox will show our.
Michael T Ganschow Green: Alternative is a tool tip over the top.
Michael T Ganschow Green: or not okay guess they're losing that functionality anyway browsers us just pop it out as a tool tip of the top apparently not anymore um.
Michael T Ganschow Green: Do you want to change your default web browser keep safari Thank you okay so uh so that is inserting an image questions on that or anything else we have gone over.
kianabohm: So as soon as you put a quotation mark after the image tag it'll just show up with that, like drop down browser in your to your file.
kianabohm: Like their source your root folder.
kianabohm: yeah like.
kianabohm: So you get.
Michael T Ganschow Green: hover over.
Michael T Ganschow Green: yeah and also, if you have so as soon as so so basically as soon as you're throwing the quotation marks.
Michael T Ganschow Green: Yes, yes, I know, give me the red lights Thank you yeah let me dreamweaver yes, it will automatically pop this open, so you in theory.
Michael T Ganschow Green: could put the quotes click images and then the images will show you all the file names that are in your images and you can click on the file and go just that fast that's again, one of the real nice things of having a.
Michael T Ganschow Green: site root folder setup on your desktop and US or brown or hard drive or wherever and then having a site root setup and.
Michael T Ganschow Green: dream weavers dreamweaver can be really helpful helping you really you know pick up your workflow.
Michael T Ganschow Green: By essentially auto feeding you things it doesn't always work and sometimes it's a little counterproductive, but like, in this case like dumping links into things like that very, very nice very nice I love it.
kianabohm: And all description also I sad the quotation marks around day.
Michael T Ganschow Green: Correct because that that tells the browser what is actually the old description so pretty much anytime you're dealing with an attribute.
Michael T Ganschow Green: In html the typically going to be some word equals quotation marks something.
Michael T Ganschow Green: Because what also our modifier is that you.
Michael T Ganschow Green: Add to your tags, in order to make him do different things they're they're one of the ways we attach style sheets to tags, for example, is through an attribute called class links are built entirely with attributes.
Michael T Ganschow Green: Links any kind of link is built entirely through attributes they're very, very handy but they're all structured like this word equals quotation marks.
Good questions like.
People.
really like that.
Michael T Ganschow Green: Any other questions.
Michael T Ganschow Green: I think I might finish the day off with a hyperlink or two or five show you guys how to link link your files to get.
Michael T Ganschow Green: A second see if anybody has any questions and then we're going to finish this off.
Going place.
Michael T Ganschow Green: i'm gonna save this, though, because what happens if I lose this, what happens if I lose this you guys.
Michael T Ganschow Green: alright.
Link time.
Michael T Ganschow Green: It didn't misspelled my name either one time I misspelled my own name, by the way in this all work and no play makes Michael the bellboy DEMO that was fun that was just like.
Michael T Ganschow Green: What does he even doing here alright so let's go back to portion of screen i'll show you a link time to make link links high link links.
Michael T Ganschow Green: Alright, so links are really cool gun i'm the H in html stands for a hyperlink and basically what that means is you can navigate from file to file to file using particular set of tags an html which we are going to work with.
Michael T Ganschow Green: Right now we're cramming so much html and you guys so much html you're going to go, I have to go back and watch the class recording again we're cramming in so much html so link time what are links.
Michael T Ganschow Green: An html links are built around tags called anchors okay.
Michael T Ganschow Green: Now, an anchor is not a single time I can image it's got an opener in a closer because it's meant to be wrapped around things.
Michael T Ganschow Green: You wrap it around images you wrap it around words you wrap it around pretty much any other tag you can wrap it around but it's most prominently used you want to use it around.
Michael T Ganschow Green: objects in your body, so you want to use it around words and images mostly.
Michael T Ganschow Green: There are cases where can be used, otherwise, but most of the time you're going to use it you're going to use it basically like one of these modifier tags here so i'm going to ramp in instead of anchors around Michael here in the H1 we're gonna turn it into a link.
Michael T Ganschow Green: anchors are just bracket a bracket then bracket closing slash a bracket now I don't think it should do anything yet right now nope it does not Okay, so we got a a right there hey hey, so we are ready to turn this into a link okay.
Michael T Ganschow Green: So let's do it let's do it, so we got as a let's put some attributes on here make this thing work.
Michael T Ganschow Green: Oh there your question.
Michael T Ganschow Green: No cool.
Michael T Ganschow Green: Alright, so let's add let's add a little something here a little attributes something here so in order to make a link, we need to use an attribute called an H ref H R E, F hypertext reference.
Michael T Ganschow Green: hypertext reference means where do you want to go, so now we have some brackets or brackets now, I have some quotation marks so HR E, F equals quotation marks and then here, is where we put our link.
Michael T Ganschow Green: So there are two types of links.
Michael T Ganschow Green: In web design, there are what are called internal links which links to files and pages within a website itself, and then there are external links which links to files and pages outside of the website okay.
Michael T Ganschow Green: i'm going to do two links i'm gonna do an internal one and i'm gonna do an external one for you guys to demonstrate both types yeah So my first one here is going to be an external one.
Michael T Ganschow Green: Now here's the easy way how to do it, so if you know the URL where you want to link to.
Michael T Ganschow Green: Go to a browser.
Michael T Ganschow Green: And either type in said URL or open up said URLs web page likes him.
Michael T Ganschow Green: chin and I gotta do is highlight.
Michael T Ganschow Green: edit copy URL out of the URL bar and copy out of the URL bar yeah.
Michael T Ganschow Green: Then ah ref.
Michael T Ganschow Green: paste it in.
Michael T Ganschow Green: and congratulations ah ref.
Michael T Ganschow Green: Oh it's going out to a website bro it's going out to a website bro.
Michael T Ganschow Green: I click here Bam low jump my website, again I click here Bam loads up the website that is a hypertext link right there, ladies and gentlemen, okay boom just POPs out to a website look at that.
Michael T Ganschow Green: Alright, so that is a that is an external link but.
Michael T Ganschow Green: What i've done here is a little bit bad just a little bit bad.
Michael T Ganschow Green: notice as i'm clicking out here.
Michael T Ganschow Green: it's loading the website, in the same tab and my website is OK, this is considered a little bit fat, why is it considered a little bit bad because.
Michael T Ganschow Green: it's removing you or it's removing your viewer customer client whatever from your website completely removing them well okay So how do I send them to another website without removing them from.
watch this.
Michael T Ganschow Green: So i'll go back to my link high link and i'm going to add one more attribute to this link right here.
Michael T Ganschow Green: called a target link ta O rg et tars J target with an equal sign and two brackets and then i'm going to add inside this target at underscore blank Okay, what is this underscore blank to wow.
Big chair.
Michael T Ganschow Green: Okay, if my blank is not there let's take this out real quick if my blank is not there when I click on my link it opens it in the same tab as my website.
Michael T Ganschow Green: OK cool I want to take them out, I don't want them I want them to stay on my website and be able to go on to another one means so with this target blank in place now what happens when you click that link fresh.
Michael T Ganschow Green: Is that boom it opens a new tab and loads the website so again, you watch up top over here in the top right of my browser when I click the link.
Michael T Ganschow Green: boom it POPs open another tab and loads this meanwhile all they have to do to get back to me, is just click on a tab back so technically never leaving my website okay boom just generates another tab okay.
Michael T Ganschow Green: questions on linking.
Michael T Ganschow Green: All right, let's do an internal link will call that the call that the day finisher i've crammed so much knowledge into you guys as brains right now it's probably driven out your ears, a little bit okay so.
Michael T Ganschow Green: we're gonna we're gonna do one more link and then i'm going to save this file and we're going to call that a day okay.
Michael T Ganschow Green: All right, so i'm going to do the next Michael under here i'm going to only local link and internal link in my website okay so first of all we're gonna wrap him and a's like that brafman a straight a's bb and then we're going to add in a nice little H ref.
Michael T Ganschow Green: Now internal links are vastly different than external links Okay, all you gotta do for an internal link to link into a file and your website is just put the name of the file, you want to put in.
Michael T Ganschow Green: where you want it to link to if it's in a folder you got to do like you did with your image link on ducky and do folder named slash file name but, in my case, this index dot html is just sitting right here so i'm going to go index dot html.
Michael T Ganschow Green: Now this is not really going to show much because when you click on it it'll just lead back to itself, because I only have one with the one page right now so i'm going to really annoy people.
Michael T Ganschow Green: How to set this thing for target like you probably shouldn't put a target blank, by the way, on your internal links this is dumb i'm going to take this off.
Michael T Ganschow Green: When I upload this to class files, because I don't I don't want you guys I don't you guys put in place on your internal links why watch this So here we go.
Michael T Ganschow Green: The cat out of the way here all right we're here right fresh all ready to go yeah click on this look it just makes duplicate of itself and another duplicate and another duplicate and I got five tabs on the same page help me help us all.
Michael T Ganschow Green: So don't put an underscore blank on your local links, unless you explicitly want the file to pop up in a different window so, for example.
Michael T Ganschow Green: Like all the class projects and things like that in my class are set, just to go to their pages here, however, if you click on the syllabus it popped the syllabus file the big PDF open in another tab so by and large, my.
Michael T Ganschow Green: My documents and downloads and the forum on my class are popping open in other tabs but files within the class here or within the website here.
Michael T Ganschow Green: they're just appearing in the same window and you control that by things you want to pop up in another tab put a target blank attribute in their anchor tag.
Michael T Ganschow Green: Things yo just want to pop in the same window I gotta do is just doing a tough.
Michael T Ganschow Green: Questions i'm claimed your plane so full i'm sure you're you're steadily you're processing them.
Michael T Ganschow Green: gluttony i'm over filled you i'm sure so i'll let it percolate around see if you have any questions.
kianabohm: i'm gonna crush.
kianabohm: So today.
Michael T Ganschow Green: you're asking good one opening or me.
kianabohm: Okay, so that opening anchor point or whatever you'd call that.
kianabohm: doesn't have to have, like the other arrow, on the other side of it, but the closing anchor point has like both the arrows on both side of it.
Michael T Ganschow Green: No, they actually both need them, so let me, let me put the zoom up here real quick so we're gonna go they put them on both of them need their container brackets.
Michael T Ganschow Green: Because otherwise it will work so you're talking about this little guy right here, right these little Dudes these little Dudes right here.
kianabohm: No i'm talking about like the the a the anchor like the right before your reference yeah that so that first one.
kianabohm: doesn't have the like it has that one.
kianabohm: bracket right, but then after you go through your reference and after you go through your target and then you have like your closing anchor on the right side.
Michael T Ganschow Green: yep so that closes the opening tag so here's what.
kianabohm: What about after Michael after the word Michael.
kianabohm: Do you have that it's a.
Michael T Ganschow Green: Exactly so it's the same thing, but with a forward slash in it so basically anytime it sees a bracket forward slash.
Michael T Ganschow Green: browsers recognize that as closing an html tag so so basically the opening tag is essentially a declarative, this is an H1.
Michael T Ganschow Green: This is an anchor this is a paragraph and then the closing one says, this is the end of an anchor this is the end of an H1, this is the end of a paragraph, so it basically.
Michael T Ganschow Green: It so it can determine where to.
Michael T Ganschow Green: Where to use the tag effect on so you know where to end the H1 that's what it basically tells it because the magic of html.
kianabohm: Is that okay on my screen the.
kianabohm: The black the bracket, on the other side of Michael looks like the same color as the anchor.
kianabohm: So it looked like it was all part of the.
Michael T Ganschow Green: Night totally under.
Michael T Ganschow Green: Okay, so um.
Michael T Ganschow Green: So yeah so so yours isn't showing you the html and blue I see okay.
Michael T Ganschow Green: Because you're actually if you're running them in a text file won't color code them dreamweaver does, which is nice, but like if you're just doing like a dot txt yeah it's gonna leave my wife and I could see where that might be confusing.
Michael T Ganschow Green: So yeah the guy when you send them up when you set them up.
Michael T Ganschow Green: And that's why why you see before I before I.
Michael T Ganschow Green: Start adding in the attributes and everything I always put in the base tags first and that's so that I can check to myself.
Michael T Ganschow Green: That i've opened and closed it properly, before I bought a fight it because.
Michael T Ganschow Green: As you can see, once you start throwing attributes and some tags sometimes they can get a little messy I mean this is this is kind of a little bit of a mess, you know if you're if you're first learning it and you're not quite sure how to read it.
Michael T Ganschow Green: And until I always try to build out in stages, so that I don't trip myself up, so I will start with the base tag first.
Michael T Ganschow Green: You know, opening and closing it making sure that's all setting and then I will go in and add attributes and usually one by one, to make sure they're running.
Michael T Ganschow Green: Because I mean, in theory, I could just type out that whole line you know you know sequentially but um but yeah I find it easier to troubleshoot my own stuff if I add them, piece by piece, it said it saves me a lot of pain.
Michael T Ganschow Green: that's a good that's a good question a lot of good questions today, both in the chat and verbally, this is cool like this you're learning it's good stuff.
Michael T Ganschow Green: let's see do we have any did the chat spring up with any question.
Michael T Ganschow Green: nope.
Michael T Ganschow Green: yeah um one of the nice things that a lot of html focus text editors like dreamweaver like notepad plus Plus, like some of the others do is this color coding.
Michael T Ganschow Green: Which is really handy it'll come in, when we get into cascading style sheets as well, so you can kind of see what's doing what you know notice, by the way that you know attributes rolling green and anything in an attributes.
Michael T Ganschow Green: quotation marks is in orange now, why is that well what if I missed the quotation mark at the end of my link.
Michael T Ganschow Green: See now how everything's gone orange I traced the orange back up to where it stops, and I say okay somewhere around here is my error okay so there's got to be something here that's putting it all into that into that.
Michael T Ganschow Green: into that attribute I just don't need one auto completed dreamweaver.
Michael T Ganschow Green: Look at that it's auto completing it dreamweaver you have a great sense of humor now you working against me will find this fine fine I will cut out my thing and paste it back in are you happy now dreamweaver there we go so sort of dream weavers help content little bit other questions.
kianabohm: So, can you put like multiple spaces between you can't put multiple spaces junior attributes to like help you visually separate them better.
Michael T Ganschow Green: I think it'll break i've never tried that let's see what happens I don't think it'll break them.
Michael T Ganschow Green: up.
Michael T Ganschow Green: I was like doing experiments like this.
Michael T Ganschow Green: Close the close the close the browser preview Michael bad Michael bad Google chrome all right so look see the works.
Michael T Ganschow Green: yep still works just fine So yes, if you want to add in additional spaces in between your attributes in your tag just to you know just as a way to visualize it Bam go ahead, look at that look at that.
Michael T Ganschow Green: So that is absolutely something you can do whatever helps you visualize it basically is always my my thought when it comes to this, you know, even if you had a ton of space in.
Michael T Ganschow Green: When you go back through and modify it all that space will be pulled out in a lot of the final stuff so you know, at the end of the Semester i'll show you guys magnifying but.
Michael T Ganschow Green: But you never want to do that to your development pages, so you know space away, whatever it takes to.
Michael T Ganschow Green: To help your brain organize html you know me I like to use these tabs so I can immediately see who's in what but.
Michael T Ganschow Green: You know a lot of people use spaces, but there are some weirdos there kiana there some weirdos out there who run an html with no spaces, they will literally devil this as one line I don't know how to do it, I could not I don't have the brain for that.
Michael T Ganschow Green: i've seen it.
Michael T Ganschow Green: Man it broke me little micro fractures inside my psyche is terrible.
Michael T Ganschow Green: Other questions yeah yeah yeah no way yeah right right yeah take a look at one yeah yeah take a look here.
Michael T Ganschow Green: pop up a vm here, let me see if I can find an example of magnified html this stuff is unbelievably horrifying if you've got a Dev it i've never fortunately had to Dev it, thank God, you know modify it let's go unified unified html yeah.
Michael T Ganschow Green: Oh here's an html magnifier all right here we go so.
Michael T Ganschow Green: You can see some really horrifying alright, so you guys know this html that I whipped up here right, you know we got the document we got everything to breathe right so i'm gonna copy.
Michael T Ganschow Green: and paste it into this magnifier here hi and they see look at look at beautifully formatted all this is right yeah magnify it.
Michael T Ganschow Green: There it is that's same that's the same document right there, that is the same document.
Michael T Ganschow Green: just done as one line with the no spaces none zero look at that crack crack crack crack crack good good bleeping luck So yes, magnifying helps your pages load faster don't have to anything it's under development always make duplicates that God.
Michael T Ganschow Green: Alright, so other questions.
well.
Michael T Ganschow Green: that's about a 20, so I am hoping that concludes our broadcast day i've crammed your brains full like every pocket in the folds of your brains is now full of html knowledge you've lost the ability to ride a bicycle possibly even tie your shoes, but you know how to make a web link.
Michael T Ganschow Green: Ah, I wouldn't get kiana I would rather instead of for those who are watching the recording of this kiana asked, can you demystify a site, if you have to develop it again.
Michael T Ganschow Green: I would recommend saving a duplicate file, so you basically save DEM files of everything that's unmodified and then save magnified duplicates so that if you have to go back and debit you can so that so that.
Michael T Ganschow Green: You know you don't drive yourself insane in theory, you can go through and manually demystify a site.
Michael T Ganschow Green: No, I don't I don't particularly I don't particularly.
Michael T Ganschow Green: No, no that's that's that's just a big no from Michael manually taking a part of website, no, no, no, no, no, no, so that's why I prefer to say two of them, because.
Michael T Ganschow Green: i've just got i'm getting an aneurysm just thinking about taking one one website and manually hard returning.
Michael T Ganschow Green: yeah no that would be horrifying, is it possible, yes, is it something that I want to do, oh no but yes, it is possible, I would not advise it magnifier magnifier save as and magnify another version you'll thank yourself later you'll thank yourself later.
Michael T Ganschow Green: Oh man you demystify.
Michael T Ganschow Green: scary scary i'm gonna have nightmares about that.
well.
Michael T Ganschow Green: Alright, so do we have any other questions here.
Michael T Ganschow Green: Alright, so then.
Michael T Ganschow Green: With that.
Michael T Ganschow Green: I believe i'm going to call this class everybody, you have yourself a great evening and I will see you on Thursday with additional html knowledge, possibly even cascading style sheets.
Michael T Ganschow Green: Have a good evening all.
Michael T Ganschow Green: Stop cloud recording I think i'm going to stop cloud recording so later to you recording people as well.