Full Web Design Course - Lesson 2: Beginner HTML & CSS

welcome back everyone I'm Quinton Figueroa and I'm just seeking solace and we are here with illy University to give you the second lesson to our web design serious this is an instructor and I'm the student and this lesson we're gonna be covering the basics of HTML and we're gonna briefly talk about CSS and kind of jump into that a little bit so I'm here to learn he's here to teach and I do want to apologize to the audience out there for my lesson last week I was kind of kind of out of it but I'm back to normal so we're gonna start learning and he's gonna start teaching so with that let's jump right in everyone hopefully you'll enjoy this lesson from what I read so far it's pretty interesting so let's get to learning people here we go welcome back everyone today we are going to be covering HTML and CSS on how to build a website so let's get started and jump right into it okay I'm ready and do you have any questions from last week yes I'm still going over it so what but I'm doing pretty good I think pretty soon I'll be able to do all those steps without having to look at the at the little program you made but let's get started okay so you'll remember from last week that we logged in with FTP to demo le University so I'm actually going to redo that again so I can log back in demo and password was set as password and then this time through I'm going to save it so that in the future I can just click here and log right in to the FTP and I did this wrong and then was once again this is just a demo correct people cannot actually go in there and uses that is correct okay it's making sure actually know somebody had this password they could go in and well then you would want to change that right because then people are gonna be messing with your files hope they do well for some reason I was unable to log in that's kind of weird so right off the bat we're having technical difficulties oh wait there we are please stand by okay we're in we're in okay so if you remember we have this let me go in here and delete some stuff so we'll be working through here again we got the okay so we got the index dot HTML logo dot peen so if we go demo dot le University comm slash logo dot ping you remember our lovely logo that we stole from the internet and put up here I do remember and then we also have the index page which is not found at the moment it's dot HTML so we have that page which you'll notice you can access it from directly going to index.html or you can just go to this without having that and it'll still show you indexed at HTML yes it does in to our left hand corner we still have that met a live page little name on the site yeah okay so what I'm going to show you this time now is I actually want to show you how to make the actual elements of a web page for instance when you create a website you're usually going to have something along these lines you'll have some type of header section that's usually kind of like like this you'll have a header and then over here you might have a content area okay can you just go into detail what you're pressing right now I'm just kind of giving I'm just doing this as like a whiteboard I'm not showing you actually I'm not actually doing I'm just showing you kind of so you understand what we're going to be creating but this isn't the actual creation that is understandable I still still need to see the steps you're taking you keep pressing buttons okay well this is Photoshop and all I'm doing is using this marquee tool right here where you can create a selection a rectangular selection and I'm creating a selection here like this and then I'm just filling this with color so it's like if I were to come here and pick the bucket tool and come over here and click it like in mspaint Boop so like that so I'm doing that but all I'm doing is creating a layer and then I make like a footer with that I hold down alt and then I hit backspace which is like filling it with that it's just a shortcut key and it uses this color I'll come back with space but we'll go through Photoshop later on this is just to show you but so what we're gonna have though is you're going to have so you're going to have a header so this is where you're going to have probably actually okay so in the header you're gonna have a logo probably somewhere here over here you're gonna want to have a navigation probably with links which I'm sure you've seen on websites over here you're going to have content and then over here is gonna be a sidebar where you're gonna have blocks and things like that you know little bit yeah I'm familiar with all of this it's in my website peace be blessed calm which I use a lot cool and then in the footer you're gonna have like copyright information and things of this nature so there you have it that's kind of what we're gonna be going through today how to do the HTML to set up something along these lines so that makes sense cool yes it does ok so I go into let me interrupt you there so then at this point with that we're using Photoshop but we're not actually going to be using it right now I'm just using it to illustrate what we're gonna do I'm just like whiteboarding in Photoshop but I'm we're actually I'm just gonna do all HTML no Photoshop right now okay poopoo okay so back in Firefox there's a cool website jsbin calm and what this does is it just shows you HTML CSS JavaScript things like that and it'll you can type it and then in real time it'll give you the output so I got it yeah so right now you can see here is just a basic starter HTML document let me ask you this similar to like notepad and other exactly yes okay so watch just to just to kind of show you so this I'm gonna come here and I'm just gonna write hello Jessie so okay okay so I just wrote HTML and then you can see it's over here just playing what the web page would look like so to show you that I'll copy this this is all HTML right here and then you remember we have this file here index.html if I actually come in here and edit this so now I'm gonna delete this and replace it with the HTML that I have right now okay okay and then I save it I'll close it I'll reach up load it and then if I go to demo title University you gotta go a little bit slower okay there's you lost me when you just copy paste and you're gonna go here and there I I I need you to really do it explain to me what yeah so so I was here this did all this this is HTML this is the code this is what is making this show right here correct I understand that but so now I want to put that on our server which is your link new demo daily University right so I took this code I copied it I went to our server demo daily University I pulled the index file over here onto our server correct so then I came in here and I edited it I pasted it in I saved it so now I have it on our computer index dot HTML which by the way you could view I'm not sure if people are aware of this so if I actually up on our own if I were to just view it from locally from our computer you'll see that that's it's showing that output see how it's pulling it from here which is just okay so it's pulling it from our internal hard drive correct but now that I also took it and I put it over here and then I go here it's gonna show you the same thing okay cool so it's the same thing it's just in your files yeah now it's actually on our server rather than just on kind of here yeah what is here here is their site that's kind of emulating a website site Jay has been right yeah it's mainly for people to kind of do this to test different stuff and see it really quick what's going on and this is all going to your server to your computer is this is just a testing this is just online a testing thing and it's all just run online it's actually not being saved or done anything unless I choose to do something and as you choose to save it yeah this is just basically using a website okay cool so now okay so next one I want to show you is now that we see kind of how this is working I'm gonna start actually showing you how to create elements here so just to kind of give you an idea there's I talked about last time there's a few basic HTML tags I'm just gonna gonna kind of go through those in connection okay so then you're talking about elements at this point can you just give me a brief explanation of what elements are well I'll tell you what like HTML tags or well you you use I mean it's not a technical world word obviously but you said we're gonna start creating elements I I want to be aware of your lingo so that I can better understand I don't think elements is a technical term for whatever it is just go ahead and explain it so here we got so just to kind of show you so say I were to have some text like let's go okay there's a site lip some com this you can basically just grab text you know you can generate just kind of random tag and by text you mean like paragraph and things like that correct okay so look I just copied this five paragraphs okay now say I wanted to have that on my webpage if I paste it in here okay look you see how it's all just clumped together this is how it'll actually look here if I do the HTML on this left side like this the the actual website looks like this okay okay but you see how we want paragraphs right even though there's a paragraph tag so if I actually come in here and do that P and then I come over here and then I end it like this now you'll see I have a paragraph right here it creates a paragraph right yeah it gives it that spacing so does that make sense right there yeah it does so then that's what you call it an element correct that's an HTML tag okay so then it's attack what is the difference between a tag and an element there's no such thing as an element you you said element earlier so that's like saying what is the word though I use the word okay well you said we're gonna learn elements ie I do apologize for getting technical with little things like this but I'm the type of person that will learn only if you teach me correctly okay good I'm teaching you correctly thank you okay so here we're gonna paragraph all these so here I'm actually I'm actually going to take my hands off and let you make the last one a paragraph so go ahead go take the mouse add a paragraph to the last one go ahead I know the mouse a little quick there I'll get you there okay so okay right here and then add the tag yeah go ahead it's for the paragraph so right here go ahead yep that's right okay close perfect okay and then you need to yep I got you there okay go perfect okay so so that's gonna create a paragraph correct now let's say for instance in this second paragraph here you will want to maybe you want to make something bold right okay so watch I'm gonna teach you another tag it's called strong so I start where I want it to start you'll see it's actually doing the whole rest of it but if I end it here now it just does that one little part cool right yes it's not called bold because bold it's kind of a semantics thing bold it used to they used to use bold like this a bold tag but they don't it's not used as much anymore because they want to have it more not as only one function strong they want to have as a kind of universal thing where strong could mean a lot of different things I guess I'll kind of explain that more later but you could use a bee tag but strong is kind of the way to do it now just like also italics say I want to tell make something at out in italics I wouldn't use I for italics I'd use e/m which stands for emphasis and then you'll see there that it actually italicized this word the new Lum yeah and then from what I get I'm getting out of this like in this case to vault something you have to put the words in between in the center and then just press ENTER it becomes like you know bald but you said it's not the correct word to use and then in italics you do the same thing you just have to put the words in the middle just just no strong and EMU you use a lot first for bold and italics these are kind of what you're gonna use cool and then P of course is for so so now if I wanted to make another paragraph for instance watch you could you can do tags within tags so if I start a paragraph here and then I end it here just this little part right here is gonna be in a paragraph correct I think I get that so now you can see that right here I just created a new paragraph but now say I want each sentence in here to be on its own I want it to be a list I want it to be on its own line so watch let me show you this so I would come in here you can just to make it more readable I can come in here and kind of tweak it a little bit something like this so it's more readable but here's what we're messing with right now is this area so if I put each thing on its own line so I'm just coming here to where I find each period and then putting into an outs online but you can see it's actually it's still not showing it how it shows here right so you need to use what's called a list okay this is another HTML thing so the way a list works is it's called Li for list so Li so you see there how it lists it now it gives it a bullet and then it's like this so now if I do this for everyone I'm just gonna copy this here and then paste paste paste and then here I'm gonna add a end one so I did that kind of quick but you see how I have each one with an Li and then I end it and then okay so you ended it and what you're doing here is just I guess if you want to create bullet points in a paragraph or whatnot yeah because now so say I want it to have numbers that's what's called an ordered list so it's oh L is what it stands for and then you've got to terminate it here Oh L so you see now how it says one two three four that is cool yeah and then I can you can also do an unordered list which is ul and then that will just do like we saw the bullets and then it has it kind of indented so that's something I'm note here too when you do a list you don't have to use a ul but generally okay so then what is au how you kind of got me confused yeah it's a little confusing so you see right now I'm not using any u else just list correct see how here it's kind of it's just bullet points its bullets and it's not intended watch if I add the ul back okay yeah I understand that so then the the UL is gonna be the the one that UN you added the UL at the beginning and at the bottom which is gonna intent and give you bullet points but if you wanted to add the numbers there then you would have to add change it to oh well oh well but can you do Oh Al and ul at the same time you can but it's gonna do one or the it's not gonna do them both okay okay so then Oh al takes over you out no you out takes over wow that's good to know yeah so it's kind of ordered by it orders things by kind of which one's closest in proximity in this training session is there any possible way we can get a different mouse so that I can be able to and not like when I'm doing the when I'm doing my own little stuff and learning it's easier than this freaking mouse that you have well maybe I can sew this down if you need me okay that would be very helpful thank you yeah right now I just slowed it down so see I'm like that's cool so then let me to go over this real quick to highlight well not highlight to Walt okay what is the coat that you're gonna use to bolt against the code is strong so then it's gonna be the strong hone okay and then and then for italics it's called um correct okay so I want you to bold and italicize one so I'm gonna delete that and I want you to create a list so this whole paragraph right here so I want you to put each one each sentence there's three and then make the first sentence pick pick a word and make it bold and then on the third sentence pick one and make it emphasized and I'll slow down the mess okay so here you go so so what you're doing now is you're going over and it looks like you okay you added a comma oh okay and you're going to there you go strong correct and obviously over there on the right you can see it's doing the full thing because it's not terminated so you need to yep wait oh no okay good well no no you're well you're still editing your first one you need to you kind of you see but you got the idea there you go and then you need to go behind the word now yeah there you go after it so keep so arrow over to the right behind the word so keep going behind keep going so there and now you would wherever yeah and there go wherever mm-hmm there okay so then you would now you you know yes except with the slash because the slash denotes that it's being ended so that's right but go ahead well no but you do the slash before that's for yeah so well you had it you saw you do the it's okay it's it's a little tricky but it's basically if you look at the top of the document where it says title title it's just that same type of format with the word strong yeah and that's how most HTML is it's all pretty much the same with just a different word in between so there it is and then you can see that section is now bold okay so now I want on the third sentence I want you to make something emphasized or a tie in italics yep that's the third one yep yep so so yeah it's okay yeah okay there you go that's yep and then you're gonna want to choose a place for it to end yeah there that's a perfect spot good choice okay perfect oh now I want you to put each one of those on its own line and in a list each sentence you'll see there's three sentences kind of what I showed you with the lists so go ahead well first it'd be easier to put it each sentence on its own line first so before you even do that just come over and put each one on its own line if you know what I mean so so what you want to do is this one is going to be its own line yes just to kind of organize it this one's gonna be its own line and then you could actually remove these paragraph tags so now see how we have each one on its own line okay go from there li for list yeah okay and then you'll see you have the dot there showing that it's working well and then at the end of the line yeah you're gonna want to do with you're gonna want to do the slash Li yeah so here there it is boom okay and then that one's a list okay either way it doesn't matter but then you you can but it just has to mix so now you want to do it yeah yeah li that's a list okay that's right that's correct and then yeah you get it now you almost had it yep yeah and it's always just gonna take that format for pretty much all of them so it's always the same thing yep and then this one very good very very good no you don't know because that's oh but yeah cuz that's inside it so that you still want it italic yeah so there boom yep and then you need to okay and then now once you got this go ahead yeah okay and then one other thing now I want you to make this numbered 1 2 & 3 ok yeah 4 ordered yep Oh L speaking of precedence which one is your favorite president I am Mexican be quiet so there's that so now it's numbered but you see that third paragraph is still indented because it goes with the indent of the numbers because it's not terminated so you just yeah so you you know what you need to do well add the slash and oh well you need to terminate the oh well because you see every time you kind of start with in HTML you kind of gotta have the ending 1 so at the end yeah so then what you'll notice when you do that that third paragraph is gonna go back to the side once this is done yeah yeah so then once this is done you'll see that third paragraph snapback because it knows that that's the end and it's back to normal yeah you're good so then you did it okay let's move on okay little example sorry guys I am not used to this keyboard or this miles okay so now what we right here though so we're gonna copy that just to show you we could put it back on our server so I'm going to edit this file this is our index file I knew have the new updated code I close it I transfer it back over onto the server and we come over here we demo it and voila now we're seeing it and you'll see it would it be - I mean you just copied and pasted it right is that's basically what you did yeah that's all I did okay cool so and you see we have it now on our server so then you have an open window like let's say you have three open windows why wouldn't it be just easier to copy and paste cuz you went through different steps where I think it would be easier for people to understand you know that there's like different ways of doing it which would be a little bit much easier in order for it to show up here and needs to be on our servers so I have to go to our server and this file is gonna need to be changed well you just dragged it but can you also just copy and paste to that file I mean it would be the same difference right well that's what I did though well when you're doing that can you be a little bit slower just so that people who are watching can kind of grasp it a little bit more okay yeah but so basic concept usually is gonna be you edit the file on your machine correct and then once you edit it you send it back over to the server and then now it's got the frame which you dragged and there's other ways these arrows I believe sometimes okay well at this point they're not really working I don't use this program much okay I do okay but yeah you drag usually so anyway back to here so now I want to show you just some other stuff so so let's say this is called they're usually used only once per document it's usually the main title for that document so if you actually go to let's say CNN like CNN as an example I believe so you have documents so this document the protestor who would be president this main title the protestor who would be president is most likely in h1 vermin supreme so you can actually check that I'm just going to view the source code real quick just to show you so if I type h1 you'll see it's exactly that they have it in an h1 tag because that's that's very interesting so then that's only used when you want to put the main title on the article correct yeah pretty much who let me just ask you real quick at that point can you go back to CNN yeah ok so then it would be at the beginning and at the end of the the title correct which would put it in in in the middle which would create that title you're correct not involved because you do not use the word bald or bald or whatever yeah and you'll see I copied this from their site and you see it's exactly what you said correct cool so now we have our title sometimes too you might want to say so see how we have this list here so you could it goes h1 to h6 each time each number has a number increases it gets it's like a subsections okay so then what what where would you want to use that like h1 to h6 just to break down you see how the h2 now I say check out my list okay so okay so then let me let me go into this real fast so then for the first paragraph you would say that has a title then you would use h1 you go into the next one which says check out my list you're using h2 and it's gonna create the second title and so on and so forth correct h3 if you did in h3 and so forth correct that's correct alright cool that's what we're gonna do so if I were to copy this now this whole chunk of text and create another one so now I just see how I you know we have more content let's say here now right in this area I have aah three so h3 h3 here is my section and I do that and then you see now how it has it here yes that's that's pretty cool so and then it goes on and on so that's kind of how you organize let's just kind of show you basic HTML markup these things believe it or not kind of excite me because I'm excited to learn about this stuff and I'll show you something that'll really get you going now yeah so let's find an image here okay see this image correct every image on the Internet has an image location it's actually being pulled from this area so this is the actual direction and you want to come copy image which I understood and then you did something up there okay yeah sorry I was quick thank you so this image is basically it's a it's a static image just an image on their server that's being embedded into an HTML site okay cool no this image if you right-click on it you'll see there's you cuz you know if you want to save the image that kind of thing view the image so it has an image location I could say copy image location on the actual address direct address and you can see it's on there there content delivery so then from there can you copy yes um depends how their servers are configured sometimes you can actually display somebody's image on your website even though it's on their server which I think CNN probably will especially because it's on a static so we'll try it so watch this so I'm gonna try to get this now into our document okay cool okay so to do an image it's an image tag so let's say I want this image we're gonna put it actually at the top right now okay Center it so it's gonna be under this text but above this so it would be this area right here right so it's called the image tag saw and it looks like this that's how this one is gonna does it have to be a space here I'm not sure actually but I do it but okay so this one you'll notice it's not like this I don't you don't do an image like this this is how you do most HTML but this one you don't because it's just like a one-time thing so it's it's more like that if that makes sense it's sending it in other words that's it that's all you're gonna do with that yeah but then like we talked about last time you need to tell it what image where it's located and that's called the source which is going to be equals you put in quotes like this so remember that source we pulled correct which is this look boom wow that's interesting that's that's actually like very very it's very self-explanatory but it's not hard at all to do no it's not hard now watch so there's other stuff you can do actually I'm not getting a I'm not gonna we'll get into the more later kind of how to make it look different put it on the other side stuff like that yeah which obviously you'd want to know but um one other thing is I want you to add now an image so see here where it says here is my section I want you to add an image right under here and right before here and here pick another image from I guess yeah from from here like let's say this image I want you to add that image now so show me how yep so and then why now why are you getting the image location I'm getting them a location cuz I want to put it in the link address and that address okay go ahead yep so now you have it copied to your clipboard pretty much so you actually can go straight back yeah to the next one the next tab second one yeah that one okay and then I wanted after here is my section so in the HTML that's that's the actual that's not the that's not where you end it that's the output so it's gonna be on the other side you know yeah okay sorry okay so so it's gonna look just like that one I did above it's gonna be the same thing but just a different source what the arrows let me get you so okay so it's gonna be right here and it's gonna look like that one above it so go ahead you're all good to go so right here there you go gee very good very good and then you'll notice on the right side right now you're seeing a broken image I'm sure you've seen that before on websites that means basically it's trying to pull an image but it's not getting an image so it's showing you that it's broken it doesn't have it a valid image so here you go SRC equals very good okay and I believe you can use single quotes too but either way you already have it you just need to paste it in you have it on the clipboard if you remember that's what happens when you right-click on it so if you just paste it as you can see there's a right-click paste okay you pasted it though down there so here I'll just back control Z it so you just need to go here okay go ahead go ahead so now we're gonna paste it in okay so let's pretend it got pasted in go on I don't know and you can see it still hasn't appeared yet still hasn't appeared well although I mean it might have actually but let me scroll down a little okay so it is there let's see at what point cuz hold on so it's still not there until you add the Oh make sure yeah so as soon as you add this that's when it actually is there but it's still obviously HTML still needs to be finished sorry go ahead yeah cool done you don't you don't have to but yeah okay good here you go okay so then there I added an image from CNN so you just want to copy and paste the image and put it on the link address so that you can go ahead and have that picture that's pretty interesting okay so I just uploaded that new code and everything to our server and now I'm going to refresh this page this is what we had before I reefer and now you can see we have this one we have pretty much what we've been working on so now we kind of have a little bit of a website going yeah yeah that's pretty interesting okay now I'm gonna show you how to kind of manipulate things with CSS so so far we've been working on HTML the HTML is this stuff it's all the stuff with the tags the slashes this kind of stuff this is what marks up the content and the data and that kind of thing it's a let me ask you one more time so to start off this you would have gone to a website like Jay sbin right com is there other websites you can go to or is yeah and the only pad yeah the main reason I'm doing this a lot of people especially when they're starting will build a website in a program called Dreamweaver or something similar and that's pretty much like this where you have two sides you have your HTML and then you have the output I don't use Dreamweaver just because I don't use it I don't have it I just do it all in notepad so it's but if I was doing it a notepad and not using this site if so say I wasn't using the site the way I would do it is I would just be editing my file here i dead --it it and then I'd reload it here and I'd refresh this page and go okay look at these are the new changes I've done but no pad is something that a program like your computer provides you with correct yeah notepad comes on ball I think all windows computers and I use Tex pad actually but you can download it for free there's a ton of free text program so much easier to go into one of those websites so that you can actually practice is that that's exactly why yeah cuz rather than me every time like if I make a change right here you don't see what I did so rather than me having to re-upload it every time and then refresh my site I'd rather just go here make the change so you can see it immediately what just happened exactly all right so that's that's what we're doing here it's kind of just a it's for demonstration purposes it makes it easy and it's gonna be really cool with this next thing I'm gonna show you cool ok so now it's important though to under and this is HTML the purpose of HTML is not to to does to make things like to change colors to make things look a certain way it has very little to do with appearance hTML is more about structure it's about organizing data it's not about so it's like say I want to make this red vermin supreme you can but you don't want to use HTML to do it it's it's outdated that's what people did like 10 years ago so then yeah so then basically you're saying this is something that you use just to input data I guess right that's right and that's good to know because a lot of people still don't get that hTML is not about colors not about fonts not about me it's about very structured strict document like this for instance we're back on CNN they're usually pretty good about HTML I'm going to remove all their what's called CSS I'm gonna remove the stuff that does their colors and watch this watch so disable styles this is just a Firefox plugin by the way it's called web developer it's it's kind of handy because you can do stuff like this but watch disable all styles so I just disabled it this is their site just to just pure HTML right now so you see how now it looks kind of like what we were doing see how there's it's all plain and boring in there and edit and make everything like more little guess I guess a little bit more sophisticated but you see they they build sites well because they know all they have is just their data image everything there's no Styles in their actual HTML somebody probably goes in there and puts all that correct so we're gonna show you that right now so we come back over let's close these out so that's what does the styles is what's called CSS you see here this little thing this site actually lets me edit the CSS now so yeah so I'm actually gonna I'm going to make these a little bit smaller and I want you to just show you some things so the way CSS works okay there's there's a few different ways I'm gonna show you just some basics most of these tags here so this is h1 this is IMG this is P something with CSS you just typed the tag name directly like this you don't need to put it like this boom put h1 and then you put it in curly brackets like that whoa now watch this so say vermin supreme the protester that I want to make that red I would type color red boom cool that's pretty interesting yep now let me ask you something that you said HTML was like so yesterday so CSS is a little bit more updated what is that what I mean by that is because in the past with HTML you could do let me try to think you could do things in HTML like you could change colors and stuff you could change fonts and stuff like that but it's not good to because you want to you want to keep your data and your styling completely separate you don't want to have the two group together which is understandable but from what I'm seeing right now CSS is a little bit more simpler correct CSS is yeah it and it's different it's it's it is I guess a little more simpler but you're using it to style things rather than you know do you know you know but and the reason why you want to have your HTML and CSS separate is because let's say you're doing a mobile site you can have a CSS for the mobile version and then you can have a CSS for the regular version you have the same HTML for both sites but one of them you know you use just a different styling for each one rather than having to have two you know it's just it's just way more organized in there okay so that is okay so I made that red if you go into Photoshop you can actually get they use so I have this color picker here so every color has a this thing I think it's a hexadecimal number or something but any color that I choose here you can you can use that in CSS so say I come here and I pick a nice kind of this blue right here you see this I can copy this and then go over here and rather than saying color red I can actually you add the pound sign and then you paste that and now you see it's blue that's exact blue color that I got out of Photoshop okay so then let's say you just want to be more simple you would have just gone with the blue color but since you if you want to add like a color with more I guess a different appeal to that colors look look if I just type blue I get blue but I want a light blue how do I do that or I want you know you would get that number yes so most people aren't gonna do it this way most people are gonna actually no I won't specifically this color and then they're gonna get it okay cool and just just a little bit on color theory just to show you okay when something is basically works like this red is the first digit green is the second digit and then blue is the third digit RGB there's there's so three digits red green blue so watch f-zero is is like not none of it F is all of it so right now I have zero on red zero and green zero on blue if I want blue full blue and nothing else I type F which is the highest number so watch F now that's the most blue but how does it know that it's blue that oh because there was a third one correct you know I got it and and F is a signal for blue then no F is basically full light doesn't stand for full okay is the highest amount it goes zero one two three four five six seven eight nine and then after nine it goes ABCDEF so it has whatever what that fifteen or sixteen different numbers with F being the highest so if I were to type nine it's gonna be a little bit darker because it's not full okay so then the first zero would signify red so the second one would agree so one would be blue let me see if I get it so let's say on the first one you put an F it's gonna go to the highest degree of red correct you have it cool and then you want a little bit darker red maybe a nine a little bit darker right and then you got that so now you want green it's gonna be really bright green okay so then how many numbers did you say it goes up to it's it's from zero zero one two three four five six seven eight nine and then a okay cool that's interesting to know so that's 15 ain't cool okay and then you got so watch so I have read you can mix them obviously if I do read but then maybe half of green I'll get orange so and it's cool but that stuff you don't need to that's just kind of to kind of know what's going on but I mean at the end of the day most of the time you'll just if you want orange you'll come here you'll be like okay here's orange but you can see it's very close to what I just did it's kind of I don't know so then how high can you go on those numbers so like I see there it has like letters and numbers because I simplified it with and it's probably not really worth going into I simplified it with just three but it's the same as doing ff99 zero zero it's the same thing but you don't have to use all of them you can just use 3 ok so then but how high can you go on those numbers not that it really would matter I don't know of it what okay so you just put in 3 a letter and two numbers Center so let's say I wanted to put 16 letters let's say I was six sixes of Max and mostly most of the music's what I'm doing here is shorthand because if you have it where they're the exact same numbers both times like ffs 9900 you could just shorthand it with f90 okay times it'll be like FA 9 0 5 7 and that one that's you can't shorthand it so ok yeah it makes a lot and it goes in groups of two so this is the red FA 9 0 is the green 5 7 is the blue so there you have it that's kind of how that works and then continues going in groups like the first two would be read the first two got it green and then you got X that's right so that's that that's just some basics on colors cool but the code for that was as you suck so you go with CSS you're gonna go you go whatever it's kind of the thing is color which changes the color and then you do colon and then you're going to type whatever it is and then you end it with a semicolon so f zero-zero there you have read but there's more you can do with that watch this so let's say I want it to dream let's say I want to make it Orange something like this and then you can now there's what's called back ground ready for this I'm gonna make the background black so you see that's black yeah and that's just a background behind the and you can see I'm actually group I'm grouping two things at CSS here color and background you can do multiples watch there's another one called padding so padding watch this 20 pixels so now you see what it did I'll make it more noticeable padding 50 pixels you see that it made the background bigger yeah or and what it no wording mm-hmm it added padding in between the the perimeter of the the border and between the yeah words so and then if I wanted to do what's called a margin you can do margin 50 pixels and that will do that so you can you kind of see what's going on here and then watch you could you just say the top part I want to Pat the top only see that I want to Pat the left padding left 50 pixels yeah cool you have you have a lot of control of CSS on how you want things to display wow that's very interesting so let me show you some more stuff let's move on to the image so we'll delete that image is gonna be accessed like this IMG cuz that's what the tag is so IMG now certain things aren't gonna work if I want to make the image red it's not making the image red because it's an image in the color doesn't really you know work on that part but other things for instance padding will if I do padding 50 pixels you'll see the image just when got that right let's say a lot of times you want to add a border to an image the way a border works is like so border you say let's say I want this to be 10 pixels 10px I want it to be solid and I want it to be red so boom there's a red border cool watch I want it to be dashed there's a dashed border so that's kind of how that works you can obviously make it like a light gray so it be something like this there's a little light gray border you can add a little spacing between the border with padding padding five pixels boom there's some spacing so there's that's cool yeah I mean it's I could keep going on and on I'm not quite sure how far we want to go but but I guess we're gonna be ending it soon because this is enough information for the day it's Sunday morning that we're doing this class so let's do a little bit more okay okay no we'll end it then whatever you want to do I just need my coffee right now okay well then I guess we're gonna end this one right here tomorrow or next time yeah next time okay so what we'll do though next time we do this because this has been a lot today I mean we did some good HTML stuff which was very important foundational we did some we started tapping on the CSS which is out a whole can of worms in itself so wool next time explore this CSS a lot more where I can show you how to manipulate this whole kind of document to look good but one last thing real quick was I just noticed so you see how I added that image border to this and I did it to the image tag it's cool because it doesn't do it just for this one it does it for all image tags on the document which is really cool everything it's very cool but we'll get we'll get into that next time but that's kind of the basics of that and well we'll pick it up from there so thank you everyone for checking this out and go ahead yes thank you for listening to us I'm eventually hopefully we'll get better for you guys and last week was not my best week so all right cool thanks for sticking around everyone and we'll pick this up again soon thanks bye

Channel: illiuniversity

Views: 40,376

Rating: 4.3469386 out of 5

Keywords: HTML (Programming Language), Web, Design, software tutorial, CSS

Id: Zi2RVLi5264

Length: 52min 43sec (3163 seconds)

Published: Wed Sep 05 2012