Basic HTML and CSS Website for Beginners

welcome to my introduction to HTML and CSS video rather than going over the basics this is going to be more of a crash course so we're going to make this two column website right here these are going to be links to different social media pages we're going to have a navigation bar on the left hand side that links to different sections of the pages and we're going to have pictures and video and an email me link now all you need to do this hang on this thing all you need to do this is use a simple text editor which is probably already on your computer but if you don't have one if you're on a Mac you want a Google text Wrangler and you can download it for free and that's what I'm using here if you're on a PC you want to get notepad plus plus but for Mac you probably already have TextEdit and for Windows you already have notepad all of the image links are uploaded to my website so you don't need any images so the first thing we're going to do is save a HTML file so we're going to call it index.html and save it to your desktop now we're going to go over to our browser and I'm using Chrome and as I said all the images are going to be uploaded to this little blog I started and I'll put a link to this blog post so you can get the URLs in the description of the video now what I'm going to do is open up that index.html file on our desktop and you shouldn't see anything but you'll see the file extension as the URL but I have mine blocked out so the first thing we need to do to start an HTML document is layout the basic body so this is what's called a tag with opening and closing brackets and then to end the tag you just put a slash before the element so in between our HTML tags we're going to have first a head section and then we're going to have a body section and be sure to put a forward slash in to close out the tag now in the body section this is where all of the content will display and let's see the head will also display book we don't want to put our content in there so the first thing we should do is create a title for the page so we're going to create a title tag and just whatever you want to want to call your website type it in here in between the title tags and I'll show you where it's going to show up on the website so go back over to Chrome and as you can see up top this is where the title tag information will show up now what we're going to do is tell our browser what type of language our content will be in so lang equal signs quotation en for English some might use en slash us for English United States then at the top we're going to do that html5 doctype header to tell our browser what standard HTML we're using but this is mostly going to be HTML for stuff I'll be making in html5 series soon now we're going to tell our browser what type of characters we're going to be using in the HTML so we're going to say meta Care set utf-8 which is the kind of the universal Unicode text and the next thing we're going to do is we're going to create a style section and this is where the CSS is going to go so we're going to have an internal style sheet rather than linking to a different file which would be an external style sheet so instead of laying out all the HTML first and then coming back and doing all the style what we're going to do is we're going to style it as we go and work down the page so the first thing we're going to style is the actual body of the HTML document so we're going to give it a background color and I already have a color picked out so it's going to be C BBB 9b so let's go over to the document and refresh it and there's the kind of cream light color I picked going for earth tones so now we're going to tell it that we want the margin to be zero and the padding to be zero now I'm going to tell it what type of font we want to use and we're going to use Arial Helvetica now if you don't know what margin and padding are basically if you take a paragraph section of a page an HTML document around the border if you set a border to it you set space outside of the border and that's going to be the margin if you set space in between the text and the border on the inside that's going to be the padding so the first thing we're going to create is the wrapper which is basically going to be the outline of the page itself and the body is sort of the background so we're going to say div ID wrapper close the div and a div is basically just a section of the page you're creating and designating to certain HTML elements and you have div IDs and div classes an ID you only use once on the page and a class you use multiple times so to write a little note in HTML you just have to put the exclamation point after the first bracket and then you can write this text out and it won't show up on the document so I'm going to create little notes like this whoops refresh the page nothing should show up okay so I'm going to be creating little notes like that so we know where the div section ends now we're going to create a style for the wrapper so for a div ID you use the pound sign and for a div class you use a period so rapper first thing we're going to do is we're going to give it a width and I'm going to make it 960 pixels now we're going to give it a height and I'm going to say the height is Auto so the page flexes with the content now let's give it a background color so the hex value what I'm going to use is pound D a d5 c1 now nothing's going to show up if we refresh the page now because we don't have any content to create space but before we create the content let's give it a the border so I'm going to say border slash left five pixels solid and the hex value will be pound a zero nine eight eight five and we're going to do the same thing for the right side so we can just copy and paste this and change it to border right now let's tell it overflow:auto so there's three different kinds of overflow there's also scroll and hidden so if the content expands further than the height and width with scroll the page will kind of scroll and with hidden you not all the content will show so we'll just tell it Auto so all the content shows and then I give it a margin and padding so make sure you give it padding of 10 pixels now if we put a little bit of content in the wrapper you'll start to see Paige take form here with the borders in the different color actually the the Flex earlier with the body the margin and padding doesn't make it make the wrapper stay in the same section what does is that that margin:0 auto so we need to close that tag and then we can see it take full effect now when we expand the page it should stay in the center and by the way the /b R is just a line break which sometimes you use in paragraphs because HTML doesn't recognize a spaces or enter return so let's take out this stuff inside the wrapper and what we're going to do is create the header so divide the header close the div now we're going to write our secret message out reminding us that's the end of the header so the first thing we're going to do inside of the header is we're going to create another div for the logo so we can separate the the logo and the social navigation but first let's give this header a width and height and let's give it the border at the bottom so with do 100% so it's full 960 height let's do 100 pixels and now let's do border bottom and we're going to create a different type of border a color then that of the wrapper so we'll do 3 pixels solid x value pound 7c 7 0 6 3 there we go starting to take form a little bit so now let's go down and let's create that logo div okay once again our secret HTML message end of logo and now inside of the logo div let's put our first image in there so IMG space SRC so image source equals parenthesis now we want to put the URL in of our first image which is the logo so we'll go over to my little blog post and I have them in order so the first URL here now we're now in 1098 HTTP okay and the scientist ease now we're going to give the logo a width up width of 350 pixels and then the height eighty pixels now what we're going to do is give the image an ulterior name so alt equals logo so if the image doesn't show up for some reason it will say logo and now the title say logo so once you when you hover over the image I'm going to call it boxer dogs so when you hover over the image the little yellow box will display here we go now let's position our logo so the first style we're going to give it is we're going to tell it to float:left which is really inherent so if there's a element you can either have it float to the left or the right of the page but it's good practice to at least with HTML 4 to tell it which way to go at least I think so that now we're going to give it a margin so the there's four different hey let's give it more there's four different numbers you can get for margin and padding the first being the top second being the right third bottom and fourth left so it goes clockwise so 20 pixels from the top actually let's yeah 20 pixels go zero from the right zero from the bottom and 80 from the left there we go change it to 15 so the next thing we're going to do is create our social icons div so let's go back down and inside the header div ID will create div ID social and close the div now inside of the social divide II what we're going to create is an unordered list so if you have different images or text that you want to line up in certain ways you want to create an unordered list and then inside of an unordered list you have list items so this can be like a bullet point type thing and you can have a display horizontally or vertically so inside of the first list item let's put our first social icon in so we're going to put I'm going to put Facebook so a href this is the actual link to Facebook and then target is where the new page will show up so target underscore blank will make it show up in a new window as you can see so okay so the next thing we want to do is add that Facebook icon image in there so let's go back over to the blog post and get the URL for it now we're going to paste it in after image source and we're going to close the image tag well first let's give it an ulterior for Facebook and the title for Facebook like we did with the logo or alternate i'ma say an ulterior now we can close the image tag and we need to close the a H ref tag which is the link inside of the LA tag now let's save it and let's go look at the sieve it showed up there we go so obviously we need to add some style and we need to do something to take the little bullet point away which is inherent in list items so let's create our social style we're going to tell it to float right because we want to be just as su great slides inside of the header header here we go now let's give it some margin so let's do 20 pixels from the top we'll do 30 from the right and 0 bottom and left so that'll push it away from the sides a little bit now what we need to do is add style for the list items so to do that we need to go social UL li because that's the order in which the HTML elements are embedded so let's just give them some well first let's tell them the float:left so they display in the order in which we list them we're going to say list-style:none so the little bullet points don't show up and let's give them some padding so they're not so close together once we add more images links so let's do 5 pixels so padding right five pixels now let's copy and paste the rest of the social icons so let's just paste this Facebook one and then we'll change it to the different images and links so there we go now let's give the image a size so we want to do a social image IMG and let's make it a a height and width of 55 pixels there we go so now let's change this first one to Twitter and my little extension strew on cue I think I have one follower just great I don't think they know who I am so Twitter Twitter again and then you don't have to get the URL because I know it's just Twitter instead of Facebook dot PNG so refresh there we go so now let's copy and paste the rest of these so after Twitter will have YouTube but let me just get them all the light out first and I'll do one extra little self-promotion so the third as I said is going to be YouTube and I'll promote my page fourth is Google Plus so plus.google.com and the third I'm going to do my newly found little blog w3 new be calm so this is going to be YouTube this will be Google underscore Plus and this one might not be right you it's w3 underscore icon instead of logo so now let's change all of the alternate text and the titles so take a second so refresh it and there's my little logo I'm a it doesn't go with the rest I have hopefully by the time this you're seeing this I have a few more YouTube people that's me Lane Campbell alright let me see what's next so the next thing we're going to do is create the sidebar so this is where we're going to put the the little navigation that was on the left side of the screen so div ID sidebar close the div do our repetitive a secret code here then actually we want to style sidebar first let's create our menu div now inside of menu we want to create another unordered list so ul and we'll close that out now let's create our first list item maybe we should just copy and paste all four of these it was four one two three four so enter taste enter paste enter paste so our first list item let's create n/a H ref and since this is going to be an internal link all we need to do is hit pound intro and now basically this is going to link to a different section of the page so we'll have two that we'll see later how this cell works out so then we create the actual text intro close the a H ref tag link tag and now actually at the top in the header is where we're going to put a link so the link to top thing that you saw in the web page so a name equals top then we're going to close the a let me show you so right here they go to top thing that's where it's going to go to so you see it kind of goes right to the top of the header there we go not quite to the top of the document to put to the top of the header so let's copy and paste these so we can speed it up and then we'll fill them out so the second one is going to be dog size so let's put size then food and play now we'll fill out the text it's actually going to display so there we go as you can see they still show up as regular links and they have the bullet point so we're going to have to make some changes here so let's create some style for it let's first do side bar the side bar the side bar div ID there we go can't so let's do float:left let's give it a width of 275 pixels and height we'll do we could either do auto or let's do 100% because I think the border will might not extend all the way if it's anyways so let's just see just to see where it will display background color so there's the width okay let me take this off because that's very ugly next thing we want to do is do the menu div ID so pound menu and we'll actually wait we'll do float:left height and we'll do width let's do 200 pixels now menu ul wait menu ul Li this one the first one needs to be ul then this will be ul Li so for the menu ul Li let's do list-style:none to get rid of the the dots will give our well there so these dots will disappear let's give it a padding of 5 pixels in between our list items spread them out a little bit and text a line it seems sensitive so there's a few different things you guys Alexa like a justified center left right I think so justified would be like a newspaper but for right now we're going to do Center so the next thing we need to style are the links themselves so we're going to do a menu ul Li a for the a href links we're going to give give them a background first so background and the eight the hex value will be CBB b9b so that'll be the same as the body background right here you there we go can't see much of it yet I like to say there we go next let's give the actual text color so we'll write color and the hex value for this will be 4 e 4 f 3e and we need to get rid of that underlying stuff but first well yeah let's get rid of that underline so text-decoration:none now it should take the underline away refresh wait the there we go I can't explain it one other thing we should add is some padding so let's give it 10 pixels and zero pixels now as I said before there when there were four elements its top right left bottom when there's two the first is top and bottom the second is left and right so let's go down and we need to create a style for when the mouse hovers over it so we'll do menu UL li a:hover and and that should be good wait no we don't need active because this is only a one page HTML document if you are linking to multiple pages and you want you want the top navigation to stay highlighted you do active in addition to hover but for now let's just do the hover so let's give it a color a hex value let's do white so FFF now we need to hang on now let's give it to give it some size let's make these h2 tags so this is a title tag so you have h1 through h6 h1 being the biggest h6 being the smallest let's call it h 2 so there you can see it so it's like a header 2 so let's just give these all h2 tags okay refresh the page and it's starting to take form but we need this the width to come out with the background there so to do that let's go back up to our our menu you ll I a and add display:block there we go looks good oh we got food and play mixed up it's pretty close food play all done what's next let's see we're almost coming up on an hour I'm shocked if people are still watching this the next thing we're going to do is create our content area where we're going to have our paragraphs and pictures and stuff so we're going to do div ID content and then let's close that div out and the rest should go kind of quick because we can do some copying pasting so let's go ahead and give our content a little style so pound content let's do sea and this is the content obviously so let's do float:left let's give it a width of 655 pixels and a height of 100% then we're going to give it some padding on the left so the paragraphs don't come over to that border so let's do padding left let's see see this little this section over here right there and on the right all over well no not on the right because it's padding left that's right so padding left fifteen pixels let's give the paragraphs text some spacing so we'll do letter spacing right now let's do let's just give it the color no let's do letter spacing how about that I can't make up my mind now can I now let's give it the color so let's do x value pound 57 so we'll do 57 57 for C border left three pixels solid this will be the same as that the bottom for the header border so it represent we won't header seven c70 6-3 so I'll just copy and paste it so we don't have any content yet so it's not going to show up but let's go down to our content area and let's put a little dummy text in here not real dummy text but just a little bit scribble in a paragraph tag that's the P tag so now that border will start to take form and we have the padding going for us so what we want to do is is do the the links so the navigation links to the different sections of the pages let's get that out of the way so we'll do a named intro and now we can create the title of the section so we're going to use a header tag and instead of h2 I think anything will happen yet because we don't have our header so instead of h2 let's do h1 it will be this thing here and that'll be my boxer dog close the h1 tag now let's create an image tag so we'll put the first image of my dog in there so go over to the blog and it will be that boxer 1 PNG so we'll give it the width 400 height 250 alternate text boxer dog title boxer dog now close out the image tag and let's go back and refresh the page and there we go there we go here we go start a shuttle show up now let's create a paragraph area so for this we're going to go and get some dummy text dummy text too so Google dummy text and this lorem ipsum greek thing everyone uses for dummy text we'll just copy and paste some of this in there let me make sure it makes sense it refresh there we go so now let's go up and first I think we should style that h1 tag so we can get it centered and give it a border underneath so we'll put h1 and then we'll do text-align:center we'll give it some padding of five pixels so it's not sitting right on the wine there and next thing we want to do is give it the border so we'll do border / bottom and it's going to be the same color as this so let's change it to bottom one pixel and that's good so refresh yes so now the next thing we should do is let's just do the paragraph style so we'll do text indent because let's see yep there's that upper indent it will do 50 pixels and then let's do the line height to space it out and we'll do 25 pixels refresh that looks a little better so it looks like this one's almost more spaced out let's add a little bit more so I'm just going to copy some of this and then actually I didn't let me copy this paste it so now let's style the image so IMG we'll tell it to float right fresh there we go now let's make it so that text isn't right along the edge of the image so let's give it some padding to the left and the bottom so we'll go padding:0 pixels top zero pixels right and five pixels bottom five pixels left it's a little better wonder what the text looks like if we do that justify like a newspaper Thank You rabbit so now let's um let's see I say we just let's just copy this section here and then we'll paste it let me just take a minute to scroll here all the way over scrolling three-two-one yes so copy this that whole of everything we have inside the content div for now and then let's paste it so we can take up the different the four different sections of the page I mean that's one too many divs so I need to delete this upper div and I'll paste another section make sure there's a space in between each because we'll be filling that space in later with the link to different sections of the page that's good so now let me just change this to the different section so size so now let's change the well we need to delete that bottom image and we'll just change these different images to the other two that I have so change this heightened width so with 300 height 200 for the third one hi 260 with 430 that needs to be changed I got the Romney I need to do boxer - for that second one change them width so we'll do with 350 that looks good so now let's go ahead and we'll add the different the links to different pages like this well it's already kind of in there but we need to do the UM the link to the top of the page so we'll create a a div class so this will be our first div class so we can use it in multiple different spots on the page so we'll do div class equals and we'll do top close the div and inside there we'll make this in h4 and we'll say a.href inside their pound top and now we can have our text for that link go to top or go to the top exclamation point and then we when we need to close that a for the link and I'm just going to copy and paste this to the different sections so we don't need one for the top I don't think refresh there we go and let's just style that so it's not all blue and purple like so we'll do the top we'll do dot because it's the class top a let's give it the color so the hex value will be pound for e for 3 F 4 e note 4 e for F 3 e and then let's tell it text-decoration:none so it's not underlined and we're not going to give it a hover or anything like that refresh actually I think it's probably better if it's underlined it's hard to tell it to link with that underlie so now we're going to create this little table here and put the video in scrolling and scrolling so I'm going to delete some of this so it doesn't take up so much space now underneath the paragraph we want to create our table give me a second so we're going to create a div ID and call it table and then close that div secret secret message and then inside of our table div let's do table tag and I'm going to give it a border inside of this table tag border one close the table tag and now we're now we can create and create the structure up the table so we'll do TR inside the TR we'll have our th for a table header so just bear with me here create another tr section and these should be the first should be the th and then for the header and then TD but I think I'll just say screw it and do all th and the TD is just like table data th is table header and the tables act similar to list items some people use tables to do the same thing I did with the list items I think refresh and it looks decent now we'll go up and we'll do a little bit of table style so let's move it to the center of the page with some margin so we'll do margin:0 0 30 on the bottom separate the video from it and we'll do 175 on the left to kind of push it inward a little bit and I forgot to end this content div will give the message so now I'm going to put the video in so over at the blog post I have the little video link save and refresh this looks decent I'll just push it to the center a little bit so do i frame and then I'm just going to do it some margin left say fifty pixels I need to put the go-to top underneath this let's create our footer then this will be the last section thank goodness I'd be shocked if people are still watching to this point congratulations so for the inside the footer I'm going to do an h5 tag and this is where you can just name your website I guess and now let's do a line break so well that that will do the email thing first so this will be a link to email summon so a href will do mail - I'll just use email at gmail.com and then this will be the subject that will come in the email automatically so boxer dogs and then this will be the text for someone to click okay so we want it we want the we got to do some footer styling first let's do that line break so I'll go underneath now let's style the footer so you can have that border and you do I'm going to do clear:both so it will make us have nothing but the one'll see on our side what our color content it's really good on this so let's give it a width of 100% to a full 960 pixels we'll give it a height give it eighty pixels give the text the color same colors in the content area and then let's give it that border on the top so I'm just going to copy this h1 border the border top and change it to three pixels so now let's style the or actually let's just make it so it floats the center so text-align:center for the text or that h5 okay so refresh the page and start now this looks pretty good yeah go to top I still we need to change that go to top to bottom of that let's reposition that so copy delete it and we'll put it right after this iframe save it refresh and make sure the send email works so there's an email pop-up link works excellent I think that should do it so now let me show you how now that we've created a little website if you want to get it on to your own domain name instead of having it on your local I use Bluehost so you can click if you click the link on my little block let me show you something it's usually a 675 a month but I'm going to change my link because there's a new WordPress link you can use and let me show you refresh I've refreshed the link Meiri click it and it brings it down to 395 a month and that's the lowest you can find for it so I'd appreciate it if you needed hosting use a the ad I have on my blog so let me log in and show you how you can upload the the website once you sign up with Bluehost so you'll go into cPanel after you log in and you'll actually they give a free domain name when you sign up for hosting though I think I got a three year plan for the 395 a year so go into file manager and then go to upload choose file and now we can upload that the index.html file right from our desktop yes overwrite it I already had something up here as messing around with now let me go over to my domain and there it is just like that so that should do it thanks for watching be sure to subscribe rate comment like all that good stuff

Channel: Drew Ryan

Views: 273,527

Keywords: HTML (Programming Language), Cascading Style Sheets (Programming Language), Web Page, Intro, Introduction, website, Two, Column, programming, how to, make, tutorial, beginners

Id: tGWdjWhyWPM

Length: 95min 53sec (5753 seconds)

Published: Tue Jun 18 2013