in this video we are going to review a little bit from what we watched for last week uh and we are going to start talking about images and how to add images to our websites as we know images are incredibly important on the web prior to there being a graphical browser and images being allowed on able to be uploaded onto the web the internet or the web i'm sorry was just text people clicking text and it wasn't until the technology allowed images to be uploaded and the ease to make it easy to upload images which can be rather large files not to mention video which are huge text was all people really had so we're going to talk about images in this video and another one we'll talk about accessibility and images but this is going to be our introduction to images in this video first i just want to review this basic skeleton for all web pages as i mentioned in our conferences one of my only gripes about the duckett book is that that sample content that we used for the first homework assignment does not include one of the main parts of the skeleton of all html pages and that is the head section and the title and we need to have these on our pages so as you're working on your pages for this coming week i want you to go back and double check that your index page that you created and your portfolio page that you created have this head area as well as the title now the title should have your name in it obviously not my name because it will be your webpage you're working on and not mine the head again contains information that does not display on the webpage the title shows in the browser tab that's that little bit right at the top of the screen and then after the head and the bot comes the body okay the head is where a lot of the thinking goes on the body is where all the action takes place so we want all of the content that we're going to have on the page will be in this body area all the content so every tag that you want to be displayed on your page must go between these two body tags paragraphs headers images lists everything that we're going to be creating we'll go in here and then of course starting and ending it all is the html now notice that everything is lowercase we have a nice clean hierarchical structure where we have indentations to mark off what kinds of code we've got and everything is clean coded and that is nicely spaced and i can see everything and clean coding is going to be one of those terms i'm going to be reinforcing again and again and it's going to be part of what we're terming effective communication for this class so please get in the habit of starting to do your clean coding now i mentioned this in our conferences but uh please go back and make sure your pages are clean coded and when you're redoing your index page for this monday or this week i should add please make sure what you're doing is clean code now when watching these videos it's very easy to just watch and not actively take notes as if you are in a lecture in a classroom and i strongly recommend you taking notes when watching these videos don't just rely on the video being there write down what's important what you think is important and then if you need to come back you can but please do take notes on on what we're seeing on the screen here and what's nice is unlike in a live lecture you can't stop me and rewind me here you can although that means hearing me blather on longer i guess so images the basic structure for an image tag is as follows and this is in the book and you do need to read the book as well because i'm only going to be covering a little bit here the book is much more in depth ing src equals and then we have our quotation marks there for now then we have alt title height [Music] and and then itself closes this is the basic structure for image tags all right it must contain each of these elements before you begin to populate the elements with your content okay this is your image source img src this is going to be the location of the image that you are using the alt text and the title text we'll be talking about in another video but these are used for accessibility purposes and for those who have turned images off in their browser which you can do the height is the height of the image and the width is the width of the image i'm going to type in some things here and then i'm going to explain them in a little bit okay the first thing we do for our image source is we type in on the location of our images image and we're going to be creating a images folder which we'll talk about in a minute and my image which i'll talk about in a second is called bill pointers dot jpg notice everything is all lowercase the height of my image is going to be 1652 and the width i have to press return here for a second is 1652 as well it is a square image all right so what i want to do is i want to explain what this all means and to do that we need to go back to thinking about the ftp a little bit and our our organizational structure for our webpage so we'll do that in a we'll do that right now so this should look familiar to you from our other videos this was our code save upload refresh repeat right code in brackets save into our web design folder upload using ftp on filezilla from the web design folder to the public html folder and then refresh our firefox developer edition to be able to see our changes and when we make more changes we do this process over and over and over again and now remember our best practices which are over here on the side be organized everything in lower case it says save save should be saved very often i will fix that save very often write down passwords and use clean coding okay which we just highlighted and for our images the one of the most important things for our images is to ensure that we are being completely organized with what we're doing this is the one of the keys for making sure that when we are uploading and using and saving and referring to and finding our images is that we are completely organized and part of that organization means that everything is also lower case from the file names to the extensions like jpg or dot gif or png uh a uppercase letter in a full image in an image name that is not properly coded that way will make the image not show up and we want to make sure that that is not going to happen so we're going to talk about that a little bit right now this organization and being all lowercase now if you'll notice i have in my web design folder on my desktop right here it's on my desktop and i have a web design folder and i have my index.html and my portfolio.html i've also placed an image in there bill ptreyas.jpg okay we need to make this more of a structured environment right here so that i don't have like you know your web pages are going to have you know 10 maybe 12 images across the entire website and just having them all in this one main area is not going to be very organized organized things are just going to look a little bit messy and things are complicated enough that we don't want things to look really messy and we know that this web design folder that i have on my desktop is replicated in my ftp on filezilla so i have you see the path here desktop web design and inside there are my it's my image and my two files okay and you can see that in the finder here of what the folder looks like and we can see it over here on my ftp now we are going to create a directory which is another name for folder which we talked about last time right folder and directory are the same terms they mean the same thing pretty much and i can create a new directory i can right click on this area here create directory and i want you to get used to creating this in the ftp and i'm going to call this images and as you if you noticed over here on the left the images folder automatically was created on in my web design folder on my computer and you can see that i have an images folder now in this directory now i'd also like you to do the same thing on your public html side right click and click create directory okay and then call it images where it says here images okay i'm not going to do that because i already have one that's called images from my prior work okay but you can see now that i have an images folder on my public html side and which is the server side and i have an images folder or directory on the computer side and what i can do is i can drag this image this bill point reyes image into this folder right and now on my computer my image is living in the images folder and this is what i mean by organization we want the things that they are to be living in the folders that make sense so we're going to put all of our images into our images folder we're going to have a css folder and all of our css files are going to go in there the main directory or web design will hold our html files so i have my images folder here and inside of my images folder is my image that i am going to be using now i want a little talk a little bit about this because this relates to uh relative linking uh when we were which we were just doing for the other day okay so i want to move this out of the way for a second i want you to still be able to see it but i would like to move it out of the way here let me back over there okay i want to view the code that we are code that we just entered into our brackets now think about what we just did with creating the web design the images folder inside of our web design folder right we just created this images folder inside of our web design folder and so i'm going to draw that here so we can replicate that a little bit and that will help us i recommend you do this too so we have our web design folder and our web design folder right here okay and that's for me it's on my desktop for most of you it's on your desktop as well and i am going to draw another folder now that is inside of it it's not as nice a folder but you can get my pick my drift okay um so we have these two folders now sitting inside of each other okay we also have inside of our web design folder we have our index file and we have our portfolio file okay inside of my images my code down a little bit inside of the images folder i have a file an image file which um sort of just draw like this this is an image file it's a it's not the nicest image let me do that again i'll draw my little image file it sort of looks like i draw a little tree that looks like this should put some color in there but that's sort of my image file right there so uh we're going to call that buildpointray as jpeg that's this image file right here okay now this is all being coded inside of the this code is inside of the index.html file right this is what's being encoded in there and we know that we also have inside of this web design folder we also have our index file and i'll just draw it over here just so it's all in the same little location it's all in the same place and we know this is our index.html next pop that right there and let's just while we're at it let's name this file this jpeg file bill into so reyes have that all properly labeled so this is our organizational structure right now inside our web design folder we have our index.html but we then we also have an images folder and inside of that is a image called buildptrayus.jpg now when we are coding when we are coding this we need to be able to or we need to tell the browser where to look for the image okay the image source tells the browser where to look for the image and the first thing we need to do we need to think about where the image is in relation to the file in which we're coding let me say that again we need to think about the relation of the image oops i'm on my wrong we need to think about the relationship between where the image is okay we need sorry about that we need to think about the relationship between this image and this file how they connect to one another that is how to get or how to tell the browser to find this image when we're in this file okay it's like giving the browser directions okay so if you had to get from the index.html and you had the drive to point reyes.jpg how would you do it and the answer is we have to start from the index we have to go through the images folder and then down into and we'll find the image okay so we need to tell the browser to do that and this is what relative linking is the links that we did for the other night were very easy because the files were in the same directory we look at the ftp the portfolio and the index files are in the same directory so we've only had to put ahref equals portfolio.html or ahrefs index.html because it's just looking in the main directory but if there are other directories inside of the folder or in rel in relation and in relation to the file in which you're coding you need to give that the browser a roadmap to get to your image and that is what this does the first bit [Music] the first well that's interesting oops the first portion of this is the folder okay the first portion of this is the folder and then we have our slash images slash folder file okay and that is the file name okay folder or directory file because we're in the index file it's telling the browser look in your directory the same directory that you're in first a folder called images it knows that it's an images folder because of the slash that's there this is getting a little confusing because the colors are all the same sorry about that um it knows that this is a folder because of this slash that is here and i'll back it up a little bit so you can see that a little bit better okay it knows that because of this full this slash indicates to the browser that you have a folder or a directory and then inside of it we have our file right here okay and so this is how we are going to be coding our images at least at first okay because our images are going to be living inside of our images folder so when we are doing our img src equals quotation marks the equal sign is needed the quotation marks are absolutely needed we're going to put our folder name first followed by the file name file name all lowercase lowercase extension and i want to add another thing to this to our best practices list no spaces in file names no spaces in file names and then another one called meaningful file names okay a lot of your images when they come out of your camera are named capital drc and then 1000 102567. png okay that isn't it doesn't mean anything you're gonna have 20 or so images in your in your directory you want to be able to know which one it is immediately you also want to know how you also want to make it as easy as possible to write the file names down adding spaces in file names causes havoc at times depending on the browser that's being used and it adds all sorts of little characters in there that shouldn't be used either make it one word or put little dashes in there i i don't use underscores because that requires you to push a shift button it's just harder to get to it on the um it requires you to put push the shift button down dashes you just don't have to push a shift button down it's easier and so please make your file names meaningful to what the actual image is now the height and the width are pretty self-explanatory you need to know the height and the width of your image so that it displays in the correct aspect ratio and if you're not sure how to do that you can right click on your image and click get info and this should be the same on a pc or a mac or similar and it will tell you under the more info heading uh the dimensions of it you could also just open it up in photoshop and look at it uh i'll look at it there okay and we're going to talk about altenew title uh at a later date so we're adding to our best practices no spaces in file names and having meaningful file names and we know that the code is structured to represent our folder directories and our file directories so let me go back to brackets now and i'm going to show you something really cool that brackets does for you when you're looking for images and this can do it for links too i believe so um i've typed i've got my basics in here and i'm going to start typing in images and as i do that it knows that i have a folder in there that's called images it knows that because it's looking in the source and the index file is in the same directory or the same folder as the images folder they're both in the web design folder so i can click on this and it will type it for me and then i can click on the name of the image and it pops it right in there it's so user friendly and it's very exciting and that's it that's all i need to do if i want to code an image i will now save the file and i will go to my ftp and i will refresh and i will click on the index and i will drag it across the screen and it will say do you want to overwrite and i will say yes and then i will go back to my brackets and i will click refresh and i will see my image and what is this i just see a gigantic box what is that all about the image isn't there so i'm going to go and check the code to see if it uploaded properly and i see it i see it's there i see it's right but the problem is and the reason i'm highlighting this is because this is a mistake that uh is often made and that is that you also have to upload your image okay we have our images folder we have to double click on that and we have to upload the image itself that image needs to be put on the website it needs to be put online if you want it to be seen online you must upload it to the server and here it is right here and now i can click refresh and i can say whoa that is a much too big picture of bill that is humongous um i seem very happy and that's great because i'm in one of my favorite places in the world point reyes national seashore and but i need to fix this this is just too big we don't want a picture that's just going to be so so large on our page not something like a head shot or a portrait or something like that unless this is for like an artistic thing but for our purposes it's not what's nice about this square image is i can just change this so that the aspect ratio is exactly the same the height and widths are the same if you have one that is a landscape view or vertical or portrait view you need to figure out what the dimensions will be so you'll have to resize it somehow either in in the photoshop or other image editor to help you figure out what those sizes are going to be i'm going to save this and i've made these changes i need to go back to my filezilla i need to go back and i click on this little folder to go back to my web design i could also just click on it up here i'm going to refresh i'm going to re-upload my index i do not need to upload my image again because it's already there and i'm going to go to firefox i'll refresh it ah and that's a little bit more like it and so now my image is on the web and that's uh very exciting for me i've got my first image up there um now this is just a portrait well we're going to be putting other images up there pictures from for your portfolio for example so we're going to be spending a lot of time with our images so for i would like you and it's going to say this in your homework to redesign your front page so that you have a much more friendly space if people come across it while we're working on it so something that says hello my name is bill wolf or whatever your name is and welcome to my page which i'm currently developing in a web design class and put a picture of yourself or something that represents you that is welcoming and tell people they can come back if you want to put a link to your blog while you're working on this you can just like we have linked to our other websites you know how to do that you make an absolute link to your blog if you've just moved it it would be your url blog slash and this is how we do our images it's it's a wonderful thing getting our images up online have a lot of fun with it um as always if you have questions for me please let me know i am of course more than happy to help and i look forward to talking with you about all this stuff next next time we meet have a great day bye