Introduction to HTML Programming

I'm Eli the computer guy and today's class is introduction to HTML programming or hypertext markup language programming hypertext markup language is the basic programming language that is used to create web pages almost every single web page that you see it is programmed in one way or another using HTML no matter what other types of languages you you learn whether it's JavaScript or PHP or anything like that the main programming language glue you could say that holds everything else together on the web is HTML HTML is a very simple language to learn you don't need any special software to be a program in HTML you may be saying you know I have Dreamweaver or I have some other very very complicated programming a piece of web programming software will I be able to use this well yes you can use Dreamweaver to to program in HTML but you don't need a Dreamweaver to program in HTML a simple notepad you know that little text editor that's been around in Windows for 20 years you can use notepad and actually notepad is one of the better ways to create HTML documents HTML documents are very easy to create and yeah you don't need any any big specialized software uh you may be asking you know I just I just talked about Dreamweaver so you say you know eli HTML i want to be a real web programmer I've got Dreamweaver you know I put down eight hundred dollars two thousand dollars or whatever for this this big package of web development software I don't care about HTML who cares about notepad I want to I want to create the big fancy stuff what you should realize is all of these very baby fancy programs basically turn everything they they that you give them into HTML one of the problems can be in it that web developers learn is sometimes the pieces of software you use to develop websites they don't think that they don't get the communication quite right and so your web page doesn't turn out entirely how you want it to turn out and so the only way to fix that is to go in and to actually edit the HTML code line for line that's why you'll notice um when you're using a Dreamweaver or other types of web development software you'll have three different tabs on how you can view the project that's in front of you you normally have the editing tab and this is where you get all the WYSIWYG you can you can put in pictures you can increase and decrease the size of text and all that very easily you have the preview tab if you click on the preview tab this will show you approximately how though the webpage will look in an actual web browser but then you also have the source code tab if you click on the source code tab you will actually see all the source code that goes into creating that web page so if you understand HTML you can click on that little source tab and you can see if there are any problems in the the program as it's been written um HTML is a very very simple uh programming language we're going to go through most of what you need to know today I mean this little 30 or 40 or 60 minute class will tell you basically how to program in any amount and then you know you get to go go on from here beyond simply being able to go into like the source code Dreamweaver though where we're understanding HTML is relevant is say you're posting ads on Craigslist if you understand HTML you can put in pure HTML into that Craigslist ad you can put in pictures and flashy things and all that kind of stuff if you understand how to program in HTML if you use a wordpress blog you can plug in your HTML if you understand HTML programming of running a wordpress blog it is a lot easier HTML is still a very very very relevant programming language so so don't dismiss it this is one beginning courses in the web design series but it's very important that you understand the basics of HTML programming before you go off to all that other fancy stuff you will hear about HTML 4 and now HTML 5 these are the standards for the HTML programming language for is what is currently used on the web and it's currently what what browsers understand HTML 5 is the the next set of standards that are going to come out for the web everything that you learn today you'll be able to use for years basically what I'm teaching you today I learn about 10 years ago and it's still all relevant so all you should remember about HTML 4 and HTML 5 is when HTML 5 comes out there will be lots of new cool features you'll be able to use and program into the web page like video you'll actually be able to plug in a pure video using html5 but you will be additional features you do not have to worry about what you understand today not working a little while so so give me a moment and we'll get into this class now before we go into how you actually code an HTML webpage we don't need to go over some basic information about HTML the first thing that you have to understand about HTML is that it is a static language or it is a language that creates a either static web pages or static parts of a web pick so when you look at a web page when you go to amazon.com or whatever other web page out there they use multiple programming languages in order to create that really fancy flashy web site that you're looking at the little login box the time when it suggests what products you should buy all of those things are not HTML or they're not created with HTML they're created with either something called JavaScript programming language or PHP or ASP or a number of other programming languages we when you really start programming for the web you will see that the average web page usually uses anywhere between three to five different programming languages to make those really flashy fancy you know modern websites that you're looking at HTML creates the static parts of the website so if you want to create a static page let's say you want a website that will simply show I don't know the location of your business maybe a menu something that you want to show to everybody in the world and you want to show them the exact same thing that is something that you would program in HTML if you want to allow people to log in to your website if you want to tell people what the weather is today time anything that's dynamic anything that changes depending on who views your website that will be that will take a different programming language to create so what we are talking about today is HTML hypertext markup language and HTML only crea static web pages or parts on a web page um when you create a tml a web page the suffix always has to be either dot a-t-m or dot HTML if you're you're probably using Windows as your operating system you know you know you if you type a a Word document you'll give that word document whatever title you want this is a Word document it'll say dot docx you know say dot docx or dot txt this part that for a web page always has to be dot HTM or dot HTML nothing else will do for an HTML web page so we'll show you this when we get into the programming one thing that you can get messed up especially with using a Windows computer to create your web page is you don't want um if you create a web page for test you don't want to end up with test ATT m dot txt that won't work as a web page so if you if you want a web page for test we test done HTM mmm so it's HTM or HTML always has to be the subjects on the end of your interior title the next part is if you are actually uploading your website to the Internet so let's say you are you're creating then the home page for your business in pure HTML you always have to name your home page this is the home page so when somebody goes let's say w w everyman IT comm it has to be named one of four possibilities and you only get four possibilities so the the title for it has to be in a default default or index so when you name the page when you name your homepage it always has to be called either default or index and then the suffix has to be HTM or dot HTML so your home page if you upload this this HTML webpage to your web server it has to be called either default dot HTM or default dot HTML or index dot HTM or index dot HTML the reason for this is this is the default file that the web server looks for as your home page so it's kind of hard coded in the web servers to always think that the the web page will be either the Evolve dot HTM or HTML or index.htm or HTML so if you're uploading your webpage to it to a web server and this is gonna be your home make always make sure that it's either default or index.htm or HTML if you're using Linux Linux web server so you decide to put your website on on a hosted web server you use GoDaddy or one in water now any of the other thousands of web hosting providers out there if you use Windows a web hosting capitalization does not matter for the titles that you use so index.html in on a Windows server is the same as capital I and XHTML so on Windows these are the same thing or I in capital de capital X age lowercase T M uppercase now on a Windows web server these are the same thing that's it these are considered the same file if you use a Linux web server these are considered different files so be very very careful with this I I always tell beginning programmers always do your webpages um the titles for them in lowercase letters the reason is there's less chance of a problem later on we're going to go into hyper linking and how to link different pages together we're going to go into how to put a picture on a web page and so this capitalization can can cause a lot of problems so when you title your pictures you know like picture dot jpg okay jpg make sure it's all lowercase to be in with lowercase P ICT you are a lowercase jpg because this can cause a real problem if you go to link to a picture and the name of the pictures p ICT you re dot okay if this is what is on the web server the picture that you're trying to link to but you don't think about it and when you write the code you do uppercase P ICT you are a jpg this will fail on a linux server your web page will not be able to find this picture like I said we'll go into this a little bit later but but this is very important on a web server the titles for your pages do not matter at all for Windows on Linux capitalization matters this is a different file than this is a different file than this objects windows are the same thing today also uh the final bit for the basics is when you go out to start doing research on your own to find all although we're cool the only things you can do HTML you will see that some of the code is something called a deprecated what deprecated means is that this is code that used to be used but that programmers um are trying to get out of the system so this code may currently work but you shouldn't use it because basically everybody's just trying to wash everything out of the system so so don't use it so deprecated code means it may still function but but you shouldn't use deprecated code so so with all that I mean let me clean this whiteboard and we'll get into actually coding an HTML web page so first we need to layout your web page so that a web browser understands what's going on so when we the way we tell a web browser of what it should do with types of information is by giving it something called a tag so you have opening tags and you have closing tags now since we are creating an HTML web page we have to create the opening and closing HTML tags so we're going to open up just a normal notepad file we're just going to create a text file and the first thing that we're going to do is at the top of the file we're going to do the arrow and then we're going to say html4 then at the bottom you'll do some spaces here so so I understand what's going on we'll create the other area and then we'll do back slash html5 page so up here you have 80ml this opens an HTML page and then you have back slash HTML this closes the HTML page now within the HTML web page you have two parts you have the head and the body so we will open the head so you have the arrow a a D and then we'll how to give it a couple spaces and then we'll close the head back / h t /h e d so this opens the head and this closes the head so head opens the head back slash head closes the head what the head is is the head is where you put all the information that may be relevant to the rest of the webpage so the simple thing that you can put up here is the title tag so so we'll just do this will open the title tag I don't we'll say this is cool and then we'll close the title and we're gonna we're going to go over this in an actual demonstration in a few minutes I just wanted to go over this before we go into the demonstration so you can kind of kind of get into your head what this title tag does is you know at the top of the web browser not the top of the webpage but all the way at the top of the web browser above all the little arrow buttons and home buttons and refresh buttons you know how there's a title up there this is how you put that title in there so if it says cnn.com the world's best place for news they put this tag there in order to put them so the head in the head you put things like the title for the page you would put a JavaScript so if you're going to include JavaScript within the rest of your webpage you would put pointers to it up here we're not going to go into that right now but anything that is relevant to the entire webpage basically goes in the head and will show that you then a couple minutes and then so we have the head and then for the actual document that everybody's going to be looking at we have the body so then we use the body tag and then we close the body tag accountable so this opens the body this closes the body and then everything in here is the actual website that people will be viewing so if you want to put pictures or if you want to put text or if you will put any of that all that goes in between these body tags so so now now that you have an idea of these tags or how to layout the webpage let's actually go into the computer I'll type all this out and show you how it works okay so now we are at the desktop and we are going to create our first HTML web page so what I would suggest that you do is create a folder to put your webpage in well while you're still playing with learning how to create a web page so I'm just going to right click and do a new folder so so call this folder or test website and we'll go into the folder so now that we're in the folder we can create our website when I go and open up notepad now and now notepad is is open so as I was talking about I'm going to create the basic structure of the HTML website so to begin with we do HTML and that's the HTML tag now go down to the bottom and then we'll close the HTML tag so this opens and closes the HTML web page then when I go back to the top now we're going to do open head and then we'll give a few lines and then we'll close the head tag so this this creates the head of the the HTML web page again the head is where things that affect the entire web page go under this we will then open the body and the body is is where all the information that you will actually see when you're creating a web page is and then down at the bottom will close the body tag so we have we open HTML we open the head we close a head we open the body we close the body and then we open or we close the HTML now we'll do file and what we're going to do is we're going to save as we'll go to the desktop and on the desktop where is the test test website so the main thing that we need to make sure we don't do here is we don't want to save this file as a text file a dot txt file we need to save it as a web page so we'll click the save as type drop-down box and we'll do all files so we'll act like this is a normal web page so we'll call this index dot HTML and then we will save this now if we go to our folder you can see this has a little Firefox icon by it because now the computer now thinks that this is a web page so we can double click on this and we can open up and well we can see that there's nothing here right now because we haven't actually put anything into the the web page we've just we just created the HTML tags and the head tags and then such so the first thing that we're going to do for this web page is give it a title so the title goes up here you see where there's Mozilla Firefox is so we'll minimize this and we'll open up the notepad document that we're working on so in the head we will create a title so T tle and we'll say this is a test web site is it a darn cool and then we close the title tag so this will now be the title of the website we'll go to file we'll go to save and then we'll go over to Firefox and if we hit f5 to refresh look at that see the title is now this is a test website is it a darn cool so this is all you have to do to to basically create the the core of your your web page your HTML webpage HTML head you can put title or whatnot in the head you do your body close your body and close your HTML so let's go back out to the real world and we'll talk about actually putting some text into this document so laying out your webpage or the basic layout of the wimpy is pretty easy it may seem a little a little complicated right now but you do it three or four times and it's it's no big deal you just have to remember OPM open HTML open head and closed head of open body close body closing HTML and that's basically your webpage so now that we understand the layout of the web page now we just are talking about putting stuff into the web page so the first thing that we're going to talk about it is the text that you're going to put into to your web page so HTML has a few basically free predefined ways of formatting text and when you use HTML these are what you're going to use if you learn a programming language called CSS or XML you can do a lot of cool fancy stuff with with the text formatting but if you're using pure HTML you've got a couple options and that's about it so the the first options are the heading options so heading options are if you're going to put let's say a title on a page so think about it as titles and subtitles and you have headings anywhere from 1 through 6 so you have a have the heading and you have 1 through 6 so 1 is the biggest the 1 is the first title that you use and and heading 6 is the smallest title you use up so you can see 6 darica you can see that Oh so you ask how you to code the head is in how do you have you code that text well it's very simply it's very simple you use the eight tag so heading one you use a one and then everything that's in here so you say heading you then close the h1 tag and so this text right here will be formatted as in as h1 text so will be very big and very bold then if you want a subtitle let's say 8 to you would open a to tag one size smaller and then you close YouTube tag so this again is it's bigger and bolder than normal text but it's smaller than h1 so h1 or heading 1 text is the biggest and boldest text that you will see on a page a2 will be big and bold but it will be smaller than h1 h3 will be smaller than h2 8 for a smaller a43 and then it goes all the way down to 86 so you have it six types of headings that you can put up there h1 is the highest 86 is lowest and so this this is how you you give certain parts of your you divide certain parts of your webpage by by titles and subtitles by using these these these 8px so once you've got the eight tags you will ask oh this is horrible one second so once you have the H tags that's even worse uh you will ask how do you do normal text so okay so I now know under understand how to write headings how do I do normal text wall for normal tear text you use a paragraph tag or P intact so if you do arrow P this opens a normal pen normal paragraph of text so this is normal text so you put in hello ru is a site and then when you get done with a paragraph you then close with a backslash P and that closes the paragraph so you for a normal text you open with a P right everything you want in the paragraph and then close the paragraph by by doing backslash P the peas these paragraphs are what will separate out paragraphs on a page so if the one thing to remember with HTML is you have to tell or you have to program in everything so if you type enter here so you put white space that will not show up in the web browser so if you write a paragraph than you do space and then you write another paragraph in space another paragraph in space when it shows up in the web browser you'll just have one big mass of text there will not be any spaces in there you have to use these paragraph tags to create those spaces so the P says it's the beginning of a paragraph and then the backslash P says it's the end of the paragraph so if you want a second paragraph on this page you would then do another P and then you say second paragraph and then you close that out so this would create two paragraphs if you did not use these --piece it would all turn into just just one what mass so now you understand the headings so we have headings h1 through h6 all you do to write headings is you you open within with h1 h2 h3 h3 45 or if six tag right what you're going to say and then close that tag is you're going to write normal normal paragraph normal you know just text on a page you use the de piece remember P this is for paragraphs so you open with a P and then you close with a backslash P you just create multiple paragraphs that way now if you want to do something as such as let's say you want to align your title in the middle so you have the P or you have the h1 you use something call it a line so let's say you want to create an h1 title that's in the middle of the page all you do this is very simple you do h1 and then you simply say there's a space and then you say a line equals and then there's the quotation mark and then say Center and you say a title and then you close the issue attack and if you do h1 a line equal center you have whatever title you want and then you close the h1 tag now the title will be in the center of the page if you do so you say left it means the title will get the line to the left side of the page if you say right and main the title will get the side to the right side of the page you can use this align for all of the heading tags and for the paragraph tag so if you want the the paragraph if you want your your normal text in the middle of the page we would simply go P Y and then equals and then close it and then write your text and then close the P tag hope that makes sense the last thing that we need to talk about is another way you can edit text so you know how sometimes you want to bold words in a paragraph I don't know maybe - maybe you're talking about the title of a book or you're talking about that certain type of product and you want that that were to be bold what you use is something called the strong tag so if we reopen a normal paragraph and we go this is let's say we want qu the word cool to be bold we use the strong tag so we would go open strong and then we say cool and then we close from and then we close the entire paragraph so this is a normal paragraph text you know that by the P so this is what look normal and then cool will be big and bold so it would look like this is so this is how it would look on the webpage so you can use the strong tag to make things bold you can do using tags like this you can italicize a serpent words in a paragraph you can underline certain words there are a lot of things that you can do with these types of tags within the paragraph tags let's go on to the computer right now and I'll actually show you this on a real webpage says so you can understand how it works so now we will program in a few of the titles and I'll show you how that the text works so we have the HTML we have the head and now we are going to be in the body so you write the text or you put any of the information that you want people to see in the body so all you do to create a title or an h1 title is you type in the h1 tag and then you say this is an h1 oops one title and then you close the h1 tag and so this is going to create an h1 title now you'll notice when you're writing an HTML you'll notice HTML and head title and body and h1 all these are capital letters you do not have to use capitalization when you are writing HTML either with Windows servers or with Linux servers you never have to use capitalization when you're actually writing the HTML code I am doing it for you because it's kind of one of those best practices thing if you are going to write your own HTML code for you yourself and no one else is ever going to see it then you can do all lowercase if you are actually trying to get a job or have something that you're going to turn over to somebody else at some point and then you should do the capitalization because that's considered best practices so we created this h1 title now going to do file we're going to save we are going to go over to our test website we are going to hit f5 f5 refreshes and now we have this is an h1 title so you see it's big and it's bold now we're going to go down and we'll do yeah I will do H to say this and then h2 and then we'll just go inside h3 I'm a horrible type 3 ok so we now have h1 h2 and h3 so you're looking at this and a little text editor on notepad and this this this doesn't look like much but if we do file and we do save now we go over to Firefox and we hit f5 again and now we see these titles so h1 title is big and bold it's the biggest and boldest in h2 title is big and bold but not as big and bold as h1 h3 is less bold in h2 8 4 would be the same weight v h6 and just goes to h6 so you see how this goes am I going to write out eight four or five and six because who cares but so h1 is the best 52 a trick so if we want to then put just normal text into this page we will do the P so this is the the paragraph tag ago this is some writing about my [Music] Paige isn't it spiffy and then we close the paragraph tag way to file/save soapy whatever you're writing about isn't it spiffy and I'll go back and we will hit f5 and see now this is normal text on the web page let's just you know just normal writing now what if we wanted isn't it spiffy this part right here to be on a different line than the first sentence remember whitespace doesn't mean anything in the web world so if I just press ENTER here you're going to think that isn't it spiffy it should be on a new line right now but if I do file and I do save you'll see that it's on the exact same line because simply typing enter into your HTML code it doesn't do anything if I want this isn't it spiffy to be on a new line then I have to make sure it's enclosed within its own paragraph tags so if I do P there and then I close this top tag now by having the paragraph open and the paragraph close this means this is one paragraph paragraph open paragraph close this is means it's another paragraph I do save and now if I hit f5 now these are on two separate lines so you have to you have to use those pay you open and close the paragraph tags to put paragraphs into into different lines now that we've done that if you want to do alignment let's say h1 this is an h1 title you want this to be in the center of the page then you do space you do al ID and make sure you do equal quotation marks cen ter quotation marks so h1 space align no space equal so this whole thing there's no spaces here it's a line equals quotation marks Center on quotation marks to file we do save and now you see that the h1 title is now in the center if we wanted to do right we'll just do righ T do file save and now h1 title is now on the right-hand side of the page so by default everything will be written from the left-hand side if you if you want a title or if you want your paragraph in the center you do a line equals quotation marks Center if you want it to the right you do a line equals quotation marks right so now let's say we have this paragraph here so we say this is some cool write about my webpage and then we want isn't it spiffy to be bold we want it to be strong so we can go down here and within the paragraph tags we can put the strong tag so we put strong so again we open the strong tag and then we close the strong tag a new file save at five and now you'll see that isn't it spiffy is all now entirely in bold you say well I want spiffy to be in bold I don't want isn't it to be in bold there's no reason to build this I want to spiffy because spiffy is cool so what you can do is you just delete the strong tag here and then you just put the strong tag just right in front of the individual word that you want to be bold file and now if we hit f5 you'll see isn't it as normal and spiffy is bold and strong so that's a basic basically how you code text and HTML you use the h1 for the headings you use h1 through h6 and these are the different heading tags for paragraphs for normal writing you use the P tag and then for if you want something strong or bold you use a strong tag they also have italics tags and they have underlined tag superscript tags and they have a lot of other tags this is this is the basic overview of how it's done if you need to know how to specifically format some text just do a little google search on it and somebody will be able to tell you so let's go back out in the real world and we'll talk about creating lists so you know creating a basic text on a page I mean HTML page it isn't too hard you just open with whatever tag you want to use heading tags or paragraph tags and you close with those tags as long as you do that it's pretty simple now we're going to talk about creating lists so you know if you want to create a little bullet point lists on your web page or if you want to create a numerical list you know one two three four you can do that using HTML programming so in order to do that you start with either an ordered list a tag or an unordered list tag so first we'll start with the thought that we we want to create the one two three lists you know one three so in order to create a list one two three lists in HTML the first thing you have to do is open a list so you have to tap to create the concept of a list within the HTML program so you do in an o L tag this means ordered list tag and then down at the bottom you close an ordered list tech so this is the beginning of the ordered list and this is the end of the ordered list then all you do is you use the Li tag so L I and then you you say what you want to say so here is one so if we want to do this what we're doing here one one we would open with an Li and then we close the L and this creates the the first order item that your list so this is an ordered list this is one then we do L I then we are do too and then we do how I we do three so if you wanted to create a list one two three you would open your list so open with it oh wow for ordered list you do Li one close ally Li to close Li Li three close ally and then you would close at the entire list so then backslash ordered list this would give you a one to three list pretty simple now if you wanted to create a bullet point list so you have one two three but instead of having one two or three in front of these these items you just want bullet points you want bullet bullet bullet that's all you want then you use the unordered list tag or the UL tag so you do you open your unordered list with the tag you L then you use the same tag Ally for all your items in your list so then you are doing li1 and then you enclose L you do L I - and you a close L I and your new L I then you do three and then you would close ell I and then make sure you have to close the entire list so backslash ul and this closes a list so this starts your unordered list this is list item one is done - with seven three and then you close your your number place this will give you bullet points it's a bullet point one bullet point two point three and that's all you have to do to create a list within HTML let's go back to the computer and I'll and I'll show actually code this out for you to show you how it works so this is all the old text but now we're going to be dealing with these lists so you have the unordered list and the ordered list so we'll go back to our our code so this is the the h1 to the h3 so that you don't get confused by with what you're saying I'm going to delete all this so all this will go away and we're only going to deal with the the lists right now so if we want an ordered list we open the ordered list with the ordered list tag so oh L is the ordered list tag and then each list item needs the Li tag so we do it tap Li and we'll say one do L then we'll close the that Li tag and then we'll do a line two and then close the Li time so Oh L opens the ordered list then you do list item one list item two list item three and then you close the ordered list we do file we do safe now if we go back to our page and we hit f5 we now see your order list look one goes to one two goes to two three goes to three see isn't that cool now if we go back to to the HTML page we will do the unordered list so we open with the UL tag you will tag is for unordered list then we do and then we close the unordered list we do file save and we go to the website we hit f5 and so now we have simple bullet points one two three as bullet points so ordered list o l creates the 1 the 2 and the 3 2 so the numbered list oh one ordered list ul creates the the simple bullet points and then that's all there is to to coding uh bullet points so if we go back over uol you open the list li then you close the li this is for each individual item and then you close the entire list UL again for an unordered list the tag opens the entire list you then Li for the first item close Li Li for the second I don't close Li Li for the third item close Li close out the entire unordered list and that's how you create a list simple easy-peasy so now we've gone over you know putting basic text uh into your HTML web page and we've gone over lists I think you're seeing how easy this is there's a lot of stuff to remember but there's a difference between having a lot of stuff to remember and something really being complicated HTML programming is simply just you just got to remember a lot of stuff if you remember the the tags all the tags that you need to remember that it's really easy to do you just just type it out so the next thing that we're going to talk about now are cables so tables are basically like like little spreadsheets so I want to create a little table like this 1 2 3 4 5 6 so this would be like a suppression so maybe you want to do titles and here and numbers and something basically it's all it is is a table so in order to create a table again you have to open the table so we do tape and that opens the table then all the way down at the bottom we close the table so this opens the table and this closes the table and then everything in between here will be creating these little these little blocks basically so you have a rows and you have columns so in order to create a row you you tell you you do the TR tag so TR so the TR tag opens closes and so the TR that opens and closes this entire row now within so each block you then use the TD tag so TD yeah kind of stuck on spacer but and then you would do one so TR opens the entire row TD opens the block and then in between the TD opening and the TV closing you you put the information that you that you want to be in there so we put one then we would do TV - backslash T DT d3 backslash B so that that would be the first row then you would do TR for the second row skip out of TR so that would be Row 2 and then TR R and this would be Row 3 so the TRS open and close the entire row TD opens and closes the cell so this would have TV for t5 and t6 and TV in this would have seven so table opens the entire table back slash table closes the entire table TR opens the roam backslash T or closes the row TD opens the individual block back slash TD closes individual block and this is all you basically need to know for tables now if you knew table and nothing else to open up the table then all of your information will pre be presented in a table but you won't have any borders so you won't see any of these borders here if you want borders then in the opening table tag you would say border and then equals quotation will say one quotation and then close so table opens a table you tell it border equals one width and that will give you all these lines in the table that's all it takes to code a table in HTML seems a little complicated let's go to the computer I'll code this out for you and you'll see how simple this really is so now we are going to encode the the table so just like we've done before we have to open the table with the table tag so so table opens the the table to make life easier we are also going to give the table a border you don't have to give your table borders but it makes makes life lot easier if you do so type in border equals quotation marks one and that opens the table so now we'll go down now to open a row so the row is one that goes rows go left to right columns go up and down so to open the row will do the TR tag now let's say I will tab over a little bit and then we'll close the the TR tonight so so this opens a row and closes the row now we should put some cells in the room so in order to put a cell you do TD and then you do first and then you close a cell and then you do another TD your second and then you close the cell and then you open third third and so this is the first row and with three cells so TR opens row TD for cell close TD TD second cell close D DT D third cell close TD now we'll close out the table entirely so we can show you what this looks like now we do file we do save and now we go over to here and now we have first second and third so this is a small little table now if we wanted more more rows and columns in the table instead of having to type this out I'll just copy and paste this so you can see so do ctrl C Toby okay so now this will be for Rose well save and we'll go over to our website hit f5 and so we have four rows rows go left to right with three columns for a second third so you could have put anything in these little blocks as long as you put something in there then then they'll show up so tables are very simple you open with the table tag like I say give it a border at least a one it'll make your life easier then TR opens the robes T DS open the the cells /td closes a cell and then /table closes the entire table that's all there is to tables so we've got over the text we've gone over over the lists and we got over the tables again I don't think this is hard a lot of memorization a lot of stuff for them but this is not difficult now we need to talk about putting pictures into your web page now you'll see we're using all these tags you may be thinking how do you get a wet into the into the web page I mean you know how to get what picture into a Word document or WordPerfect but how do you use h1 tags or whatever to get a picture into a web page well the thing that you have to remember is you don't actually put the picture into the web page itself this is not like a Word document you use something called a pointer so if you want a picture to show up in a web page you have to upload the picture to a place with your with your website and then point to it and that's how the picture gets into you into the web page so if I want a picture to show up on my web page the easiest thing to do is upload the picture into the same folder that has has the the web page that I'm dealing with so you upload a picture in the same folder and then from there we just point to it so if we want a little smiley face to show up on a web page what we would do is we would upload the picture with a smiley face into the same folder that has the web page that we're dealing with and then we would point to it and so you point to it by using the image attack so we would do my M G space s our c equals quotation marks and then let's say this is called smiley jpg so why okay and so by putting this line of code into the web page this now now will tell the web browser to to grab this picture and put into the web page so this is how you display a picture in a web page so you can uh you can display pictures that are on other web pages so if you know the location of a picture on a different website I use this for let my Craigslist when I put pictures on Craigslist I use pictures that I already have uploaded to every man i T so instead of just doing smiley dot jpg you could you can actually point to the entire web address of the picture so image' SRC equals and then you would do HTTP and the full address to wherever that picture is so www [Music] Teta come forward slash so if I write in this entire line of code this webpage will go to every man IT and try to find smiley dot jpg and put it into to this web page so it's pretty simple all you have to remember is that you don't actually paste the picture directly into your webpage you just kind of point to it so pretty easy if you want any border so let's say you want a little little border around your smiling you can do after the image the beginning of the image fat you can do border just like in table and then you do one or more and then that's our equal and so if you do an image of a border equals SRC that will give you a border around your your web page or around your ryan picture the other thing that you can do this is not highly suggested most of the time is let's say the the picture that you're dealing with is not the size that you want it to be let's say it's really big and you needed to be smaller or it's really small and you wanted to be bigger on your webpage you can actually type into the code to make the picture bigger or smaller so if you type in the whole image SRC equals and then smiley so this line of code will insert the smiley jpg app in - into the webpage well after that you can say space width equals out of 300 and so it will now make the width of the picture 300 the new space and new height equals 200 and then close so you can tell the HTML how how wide and how tall you want that picture to show up on your webpage all pretty pretty simple stuff now the one thing that will confuse people is you know you have a smiley picture and you say well you know what if I want this picture to be on the right of the page or to the left of the page or in the middle of the page what do I just put a lot in center somewhere in here no you actually use the paragraph tag to a-line your picture so if you have so this is the first line of code image SRC equals smiley gimmick if you want that in the middle of your page you would surround this by a paragraph tag so over here you would do P and then do a line equals and so you open the paragraph and then at the other side you close the paragraph that's how you you move a picture into the into the middle of your page so just remember you cannot put the align command into the middle image SRC you have to put the image SRC whatever into the middle of a paragraph that's how that works now if let's say smiley jpg is in a folder that's in a lower folder and the the Kirk folder you're in so let's say so let's say you're in this folder right here and you have a pictures folder so this is where you're a him out web pages but you want the smiley face in the pictures folder to be put off into your weapon can be grabbed so you would just do it in the image are equals and when you do the equals you would do slash tell it the folder name pictures / and so what this will do is it tells the HTML to go into the pictures folder and then in the pictures folder use a smiley okay now one of the things is when you're creating these webpages you can you can be the picture that you want maybe below you if in folders below you or maybe in folders above you so let's say you have a folder above you and this is where your web page is your web page is here but the picture that you want is in the the folder that that's above the folder that you're curling in in order to get to that you a new image RC equals and then you do dot period period backslash and then smiling so if your web page is here this tells the HTML to go to the folder one up from you and and get the picture from there the smiling picture for there so if you need to go to up you can do dot slash dot dot slash my that would say go from this folder to the next folder up to the next folder up that's how you you get to higher folder so in order to insert a picture into your web page all you use is the image srt-10 SRC tag in SRC equals if the the picture is in the same folder that the the HTML paid you're dealing with is then you just type in the name of the picture if the picture is below below you in a different folder than you do slash picture or whatever the folder name is in the picture name if it's above you you do period period slash whatever the picture name is and if you want to import or if you want to grab a picture from an entirely different website you do SRC equals and make sure you type out that entire web address to a picture so not just WWE TTP colon slash slash WWF ma ni t comm slash picture slash my Legion about so if you want to grab a picture in from somewhere else from an entirely different web page you have to type in the entire web address if you want to border right after the image you put in border equals colon one quotation marks one quotation marks if you want to increase or decrease the size of the picture on the webpage you type out everything and then after the the end quotation mark you then do width equals quotation mark however wide you want it to be close quotation mark height of equals quotation mark whatever height you wanted to be close quotation mark then that's how you make the bigger or smaller and if you want to align the picture into let's say the middle of the page remember you cannot do that with in the image tag you have to put the image within a paragraph tag so you do P open a P tag paragraph tag P space a line equals quotation mark Center quotation mark and then you put the image that's a lot to say let's go on to the computer when I actually type this out for you it will make a hell of a lot more sense so now encoding images and HTML is is pretty pretty easy so I've copied this logo dot jpg this just K peg logo into the same folder where our index.html file resides now if we open it up we can see it's my nice little smiley computer face so we're now going to go back into the our HTML code we are going to delete these tables because we don't want to confuse you and now I'm going to show you how to add that image into your HTML document so what we do is we create the image tag and then we say SRC equals and we do logo now notice remember the HTML code doesn't have to be uppercase or lowercase that code can be whatever it wants but when you're pointing to a specific file picture if you're pointing to anything outside of the HTML document if you are using a Linux server then the capitalization has to be the same so I have this lowercase logo to point to the logo dot jpg file if this was a Linux server and I typed in uppercase LOD Oh dot k oops jpg if I did this and this was a Linux server this would error out the picture would not show up because the the picture name is not uppercase L o ji o it is lowercase L o gog AAP ki so that is uh put that there and we just close we just close that that tag so that's all you do with a an image tag i NP SRC equals logo so you file then we do safe we go to our document and we hit f5 and now we have a really big smiley computer so now my webpage has a picture on it again remember you don't cut and paste the picture into HTML you simply point to it now I'm looking at this the this the smiley computer and this is a really big smiley computer and I I don't want the smiley computer to be this big now as a web designer what I would do is I would open this up with Photoshop and actually shrink this picture in Photoshop that is the best way to deal with a resizing a picture but you can resize a picture in HTML and this is an HTML class so I will show you how to do that so we go back to our code and here all we do is we type in width equals and we'll say 300 and then we'll do height equals 300 and that's all you do so we tell it the width we want the width to be 300 and the height to be 300 pixels we do file we do save we go back so now we have a really big you like a smiley computer we hit f5 and now we have a smaller smiley computer and as you notice this picture actually isn't a square so now it looks squished up so you just have to keep that in mind that you may have to keep your your proportions correct because you can with this code we could say that we want the width to be 200 and the height to be 800 we have file save and the webpage will do exactly that so we have a really tall skinny a computer person now so so you just keep that in mind is when you when you type in the height and width it may not keep your your proportions proper now we're going to go back and just to make life easier we're just doing both is 200 we do file we do save so we go back and we have a have a smaller computer now slightly out of proportion but okay but we notice this is now on the left-hand side now if this is your logo and you and you want it to be in the center of the page so you want it to be over here what are you going to do about it well you then put your image within the paragraph tags so we do P then we do a line equals Center and then we go to the other side and we close the paragraph tag so we have now put the image within the paragraph and that's how we align the image on the page so if we click Save go back to our website our little smiley computer is now sitting in the middle of the page so just remember you cannot put the align within that image tag you have to put the whole that whole image it's called an element the image element within the paragraph now let's say let's go back to our folder oops at that phone so this we just added the the picture the picture is in the same folder that the index.html file is I will show you if we want to move we're going to put this around do do a new folder so we're just going to call it or let's call it pictures so it's a good idea to always put things like pictures into the same folder when you're creating a website yes so you don't have pictures scattered everywhere and you lose track of them so let's say we're going to take this logo picture and we'll put it into the pictures folder now now that we've done that if we go back to our web page and we hit f5 we will notice this now nothing shows up no image shows up and the reason is is because that little pointer is now now point into a place where where the picture no longer is so if we go over so go to go to our code we go to the IMG SRC and then we type in pictures and then forward slash so this will say that logo jpg is in the pictures folder we do file when you save and now if we go back to our web page it is there so that's how we tell the the HTML that the picture is in the folder under underneath and then the pictures folder now let's say we go and not that one you know and we're going to put this on our desktop so now the logo will be on our desktop C logo jpg our test web site is here and our index the the HTML that we're working on is in the folder but we want to point to this picture up here what we do is we go to the code and we simply type in dot dot slash logo jpg so this means that the logo dot jpg picture is is one folder up then the the current file that we're working on if we do file save go back to our website and we hit f5 well nothing changes because it's going the same place so if the the picture is is one level up is one folder up you do dot dot forward slash in the name of the picture if it's below and a folder below you do the name of the for the folder forward slash the pictures name also you can do it on an entirely different website so you could do you do HTTP to be good everyman t-dot-com pictures aap G so this I can put in that this is where one of the logo files is sitting all the way over on everyman IT so I type all that in now remember it has the HTTP colon forward slash forward slash WW don't just put nww and then we hit f5 and there there's the logo picture that's sitting on every man i t.com so that's how you insert an image into your HTML document so there's a little more to it to adding pictures interior your HTML webpage and there is with basic text but again it's all pretty simple use as long as you understand the tags you'll be good to go the final thing that we're going to talk about are hyperlinks these are the little pictures or the text that you click on a web page that either takes you to different pages within the website that you're visiting or takes you through an entirely different website so so hyperlinks are any of the places that you can click and basically go somewhere else these are very very very easy to code you use it what's called a a record tag so you open your hyperlink and and you do a space H R e F equals and then you do open quotation marks so if you want to go to an entirely new website or a page on entirely new website you would put an HTTP colon slash slash and then wherever you want the person to go if you want to go to a different page in the current web site so in your website let's say they're at home and you want them to go to a bound then again if that that about web page is sitting in the same folder that you're in all you would do is you'd say about and then dot HTM or HTML depends on you or what you code but you have to have to write in exactly what it is so if you made the about page dot HTML that you have to do about HTML if you made the about page about not HTM then you just type in about dot HTM again if you're going to a web page that's below this folder do you would just just put in the folder pass a do : / I don't know pages slash about HTM and so if yours if you're sitting in this folder and then you have a pages folder here and that's where about is then you say go to the pages folder and then go to about HTM just like with pictures if this about or if this this is this page you want the person to go to is above you in the folder structure then you would do dot dot slash about so if the page you want them to go to is is in the same folder that you're currently and then you just tell them the the page name if it's in a folder that's below your current folder then you you tell it what folder it's in and then put the thing if it's above then you do dot slash and that that tells it that's in one folder above and to look there if you want the person to go to an entirely new website make sure you type in the entire website starting with HTTP colon slash slash www if you just put in WWF MIT comm won't do anything won't go anywhere then after you close this you are you can put in something called target so target tells a web browser where you want to open this new web page so when you go to this new web page where do you want this new web page open by default you you get you simply open the web page so you go from the current web page your end to the next web page I like if you use target underscore blank then you open a new window so with tab browsing you would open a new tab and in that new tab is where you would go so if you're on my website and I'll link I have a hydro link to somebody else's website I will then have the target equal underscore blank so that a new tab or a new window opens up with their website my website stays open so that that's what can do with the target messy so so that's how you open it up a equals I'll say about ATM and then you just close it if there's no target then you just close it we're default is it was open in the same window you're they grab and then you just write in whatever whatever text that you want to be the hyperlink so if you uh say about us then all this text will turn into hyperlink and then you just close the a graph with the a so this opens the hyperlink you then put whatever you want the hyperlink to meeting the middle of this tag and then you then you close it it's that simple so you can put a picture in to make make it a hyperlink if you were putting a picture in instead of words we knew that a equals about and then if you want the picture to be the hyperlink you would do image' SRC equals mighty and then you would close that so if you want learn more about us to be the hyperlink you do a craft equals about HTM you write out learn more about us and then close the tag and learn more about this will now be the hyperlink if you want a picture to be the hyperlink you do a graph about and then you just put the image SRC tag in the middle that's all pretty simple so let's let's go on to the computer and I'll show you how this works so finally we're going to show you how to do the hyperlinks so hyperlinks are the links that you and you know you get to wherever you're going so let's again we're just going to delete this picture here so we don't get confused so let's create a simple hyperlink so we'll do a pref equals and then we'll just do cnn.com for a moment CNN so this is where we put in where we want to go now we put in we're just going to do a text link right now so we will go to cnn.com and then close the IRF actually let's make this paragraph so we put a paragraph in the middle of that then we'll do file save we'll go to our website hit f5 and now we have this little hyperlink since we didn't do a target when we click on this we are simply going to go to cnn.com and yep we're at cnn.com so let's go back to it now let's let's look at the our HTML code again and you say well I don't want the the I one another window to open up I don't want the the window that they're in to be replaced with wherever they're going so that's where you use the target so we do target equals blank so by doing target equals blank we do file save go back to our website at f5 I want to refresh and now we click on this C so our original tab is open and it now opens up CNN in a different tab so again this is good if you have links on your website where where you're sending people to other people's websites you may not necessarily want them to leave your own so by using that blank as a target by doing target equals blank you can have the other website open and keep yours open at the same time so now let's say you want to do a picture so instead of using text as we did here you want a picture all you would do is in the middle of the AF tag you would put your picture so we do IMG SRC equals so our logo is still sitting down in the pictures folder and so now by typing in this code the the pic the logo is going to turn into a hyperlink so we do file we save go back and so this is our though the HTML the web page and now here's the logo if we go over it though you will notice that it's now a link so I click on it again it will see me send us to CNN so that is how you turn a picture into into a link so all you do for links is it's a space ref equals wherever you want them to go target if you will if you if you want them to use the window they're in now to wherever they're going just leave this blank if you want a new window to open up you do underscore you do target equals underscore blank and then between the AEF and where you close it you either type in text that you want people to click on or you put the code for a picture that's all you have to do now if let's say instead of you you wanting the person to go to a new website what if you just want them to go to a different page and you're in your website well we can just type in that page so new about a bount HTML so by doing this we'll make this link go to your about page we don't have an about page so we'll fix that right now so I'll just do new order ugly so the file new and we'll create a little about page really quick so I've created the HTML I've created a head or I've opened the head I've closed the head I'm now in the body we'll just do a very simple h1 and then we'll say about let's just so you know you're actually going to an about page we then close the body and then we just close you into the HTML and now this is a very short but it's a complete web page we now do file we remembered we do save as we go down here save as type we do all files we don't do text document and then we do we save it as about dot HTML and then we do save and now we can close that so we go to our index let's close this home so now our picture is the link if we click on the link we now go to the about page so that's simple I mean all I did was put in a title but you get the point you could you could have the full and full about page there that's basically all how hyperlinks work again if the pages is below in a folder that's below where you're at you would type in the name of the folder forward slash the page you're going to if the page is in a folder that's above where you are you do dot period period forward slash and then the name of the page and that's that's hyperlinks for you so now you know HTML programming um that's that's about all there is to it ah learning to do HTML programming does not take a lot of smarts you don't you know you don't have to learn huge amounts of things you know really complicated things you just have to do basically a lot of memorization if you do the memorization then then you can learn HTML programming or if you can just have a little a cheat sheet right beside you and use that you can do HTML programming HTML programming is very easy again HTML programming is the first step and web program I showed you again how to create a static web page so it's a web page that will never drink when I go to it I'll see the same thing that you see that your brother sees your mother sees your lover sees whatever if there's no login boxes there's no telling you the time or the weather because HTML creates static web pages now as we go forward we will go into things like JavaScript to give you things like little log in boxes PHP in order to grab information out of databases those are the languages that really make websites really cool but you need HTML first before you can get to the programming language is that it very cool so so take uh what I taught you today and just start playing with it um you know this is this is HTML programming it is basically like learning how to spell when you're in fifth grade it's all about doing it the more you write stupid little webpage is the easier will be because you'll simply start to remember how to do all this if you have a business if you're trying to promote something I would say we talked about Craigslist advertising in one of my classes go onto Craigslist and then every day hand code and advertisement on Craigslist with a little picture this that or the other thing that would be a very good kind of kind of tool for 440s just memorizing and how all this stuff works is all yes you do an opening tag you do a closing tag an opening tag closing tag you mix a few tags and that's it as long as you understand how it works it's simple um if you need information on how to do HTML programming don't feel like you have to go out and buy any of these twenty or thirty or fifty dollar books just go to google and type in HTML programming and there are thousands of free wonderful resources available when I was doing a little bit of research for this class you know I just typed in a few things and every time I typed in a Google search I got what I needed lots of people lots and lots and lots and lots and lots of people have written about HTML programming and they'll give you all the information that you need the one thing in this class that we did not go over that is normally gone over in introductory HTML classes is how to create forms the reason I did not go over how to create forms is again HTML can't do anything dynamically on its own so like a comment box it boxes and blocks the the front part that you see were to ask for your email address that it asks for your name and your comment that is all actually programmed in HTML so you can do text boxes you can do option boxes you can do all that the thing is is when you click on the little submit button that submit triggers either Java Script or PHP or ASP to actually do something so the reason I did not go over forms today is because until you go into JavaScript or PHP or any of that you're not really going to understand what to do with a form it's really kind of worthless so there's no reason to bog you now we'll go and do forms later when when we're actually teaching you how to use it properly so this this was the HTML class it's it's very simple get out there play with it like I said you if you can't figure out anything you know any way that you're going to play with this to kind of get your head just go out and start playing with it on Craigslist you've got something to sell just just Craigslist you can plug in pure HTML code and it will pop up when an other Craigslist visitors view your your post on Craigslist so so do that if nothing else in order to tend to understand how HTML programming works well I'm Eli the computer guy and this was introduction to HTML program and I look forward to seeing you at the next class

Channel: Eli the Computer Guy

Views: 1,274,099

Rating: 4.853476 out of 5

Keywords: Introduction, to, HTML, Programming

Id: fS7w-TXinPE

Length: 98min 23sec (5903 seconds)

Published: Mon Dec 13 2010