HTML Master Class | Allan Alexander | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
16 Lessons (1h 34m)
    • 1. HTML and HTML5 Introduction

      6:07
    • 2. HTML Create Basic Page

      12:44
    • 3. HTML Editors

      7:33
    • 4. HTML Nesting

      6:34
    • 5. HTML Colors

      6:41
    • 6. HTML Site Nav Links

      5:33
    • 7. HTML Link Targets

      5:56
    • 8. HTML Images

      3:36
    • 9. HTML Comments Tag

      4:26
    • 10. HTML Meta Tags

      5:15
    • 11. HTML5 Audio Tag

      7:43
    • 12. HTML5 Video Tag

      7:23
    • 13. HTML Ordered Lists

      3:12
    • 14. HTML Unordered Lists

      3:31
    • 15. HTML hr Tag

      3:42
    • 16. HTML Validation

      3:41

About This Class

Learn HTML 5, whether you are a total beginner or someone with a little experience in HTML, this master class will get you up to date with HTML 5. You will learn everything you need to start working on HTML 5.

354df5ab

 

Transcripts

1. HTML and HTML5 Introduction: this video will introduce you to HTML and html five. So what is HTML? Well, HTML stands for hypertext markup language. HTML is the language that your Web browsers use to communicate to you what a particular Web page looks like, just like learning any new language, be it Spanish, Chinese or even English. There is a lot of memorizing as well as learning some basic standards, like what a noun is and how it's used properly in a sentence. Well, the same holds true for learning HTML instead of now owns and verbs. There are tags and other elements that your Web browser uses to put that YouTube video on your computer screen or those words with bold type or red color on that Web page. All these cool things are because of a certain element or tag that makes up HTML coding. Now there are loads of other languages, like Jake Weary or JavaScript or PHP that also at a lot of additional cool features to your websites. But they all are laying on top of a foundation of HTML. So what is HTML five Will HTML. Five is the newest version of HTML, and it has many improvements over its prior versions. Many of the basics of HTML remained with HTML five. But there are a few differences between HTML five and the older versions of HTML. Like, for example, the code is cleaner and, for the most part, easier for today's browsers to read and interpret. Some of the old tags have been dropped, and the newer code is built to more easily work with the new, more advanced devices, like your cell phones and tablets back even your refrigerator. Now, a couple of the new tags in HTML five are video and audio. Now there's a bunch more tax as well. But these air to I'm just mentioning right now. One of the ways that I learned about the different HTML tags was simply looking at the code on other people's Web pages. Any time you want to see the tags or coating that makes a website do what it's doing in your browser, just use your computer mouse and right click. Then select view page source, And there you go. At first it might look overwhelming, like the first time you saw a foreign newspaper. You may recognize some things, but most looks like just a bunch of gibberish. The more you learn about HTML, the more you will begin to recognize what most of that gibberish is and what it does. Then you will be able to use those same tags and elements to craft your own Web pages. Now here are a few websites for you to bookmark to learn even more about what makes a website do what it does. Of course, there's plenty more besides just these, but these will get you started. This 1st 1 is called html dog dot com. There's loads of information here and tutorials on both HTML and CSS, and this is updated as the version of HTML is updated as well. So just because you don't see an HTML five slapped all over the place does not mean this is old stuff. It's matter of fact. We scroll down here, come on over to HTML tags and come on down to the very bottom here says bad tags. This will give you an ideas to some of the old what's called deprecate ID tags that don't play nice with other coat. Now, some of these tags may still work, but they might play havoc with some of the newer coating, so you want to avoid these as much as possible. Another page is W three schools. And, like with HTML dog, there's plenty of tutorials here as well. One of the things I want to mention to in the construction oven HTML document is that you've got this declaration at the very top of the page, and this tells the browser that this is not a text document or it's not a word document or it's not ah, spreadsheet document. This is, in fact, an HTML five document. And if we scroll down or even MAWR, I believe anyway and here gives you a little history of some of the older versions. But that's not what I'm talking about. Right here is what I'm talking about. The common declarations for each team. All five. So I just showed you for the prior version. HTM 04 It's got this declaration right here, and this is what you're going to see in most Web pages today. But that's that. So again, add this to your bookmarks. Another one, and I refer to these on several occasions. Whenever I'm trying to figure out what a particular element does or how I can get it to do what I wanted to do on my website. But this is w three dot org's and like with HTML dog, there's nothing on here that screaming html five. But it is up to date. As you can see right here the declaration they're using. Here's for each team 05 a little bit of a history background here and all kinds of tutorials and cool stuff all over the place here and last but not least, my friend Wikipedia. Now on Wikipedia, there's a lot of additional information to This is just the HTML page into a search here for HTML five, and we've got a specific page just for HTML five. And if we scroll down here a little bit, you can see right here that you can get additional information on specific elements of HTML five like the HTML five for video, which I believe is right here and also for audio and for canvas. If we just go to video as a demonstration html five for video, and this gives a bit more information on some of the pros and cons of using HTML five video tags right now in the current state of the browsers, not agreeing with one another on a standard format. And there's ways you can work around it here, like learning a foreign language. The more you practice, the better and quicker you're going to get. That will bring to an end this video on the introduction to hyper text markup language, also known as HTML. Thanks for watching and you have a great day. 2. HTML Create Basic Page: Every Web page on the old interweb uses a language to communicate with the various browsers in order for us to see the formatted text or the images or the colors in the background or the videos. This language is called html. HTM 05 is the most recent version of HTML. But when speaking about HTML, you rarely hear the term html five like, for example, you would hear it's baseball season, but not it's baseball season 2014. It's kind of implied that it's the most recent version baseball season, and HTML, the HTML language has certain rules for communicating cold syntax. The syntax is the code that contains the brackets and words that the browsers interpret into the goodies that we see when we click onto a website. In this video, we're gonna create a basic Web page using this syntax to demonstrate the use of tags and how they help us make a basic Web page. Now there are a few must haves in order for a browser to decipher the HTML code or syntax and presented to us the way that we're used to seeing a Web page, you know, like the text in the images and all the formatting stuff in place. Actually, there are what I call the Fab Five Must abs. OK, I'm not really sure just how fabulous thes are, But I couldn't think of anything else that made it easy to remember. First we have the declaration. This is what tells the browsers. Hey, this is a version of HTML and not just some text document. Then we have the tags, the html, the head, the title in the body. In most cases, tags will come in pairs and opening tag and a closing tag. But like most languages, there's always some exception to that rule. More on that here just a bit. So let's go on, roll up our sleeves and make us a Web page. Now we're gonna need a couple of items to create our Web page, a simple text editor to create the page, and I'm gonna be using no pad and a browser to read it or show it to us. First, we need to organize make a work folder that will house all of our files, images, videos and anything else we're going to be using in our Web page or Web pages don't worry about getting everything in there right now, But at least make the folder right now. So as we find or make stuff, we'll have a place to put it. Okay, so let me go and open up my folder here. I've already taken the liberty of creating a working folder on my desktop and inside of that working folder I've got another folder titled Images and another entitled Back Up These Air Basically just for demo purposes. But I just kind of give you an idea, get your creative juices flowing. So at this point, I'm gonna go ahead and open up my no pad new and text document and just go and give it a title right now. Actually, that's not a title. This is just a file name. Cover that here just a second. The thing is, though, is that this ends with dot txt Web browsers aren't gonna recognize that as a Web page. Let's go and open this up. Now let's go and make this a Web page. Technically speaking, she right here to dot txt need to say this as an HTML or HTM file goto file Go to save as and with no pad you on the first Monday in order to save as type and make that all files, then change that dot txt to dot HTM or HTML. I'm gonna go with e l part. They're both exactly the same. The Rogers reading the same way. Just I think html has been around a little bit longer than HTM. So I'm going with that personal preference. OK, there we are. Now then, if we go back to our photo here, you can see that we've got both files or are blank, but we've got the HTML and the dot txt. Frankly, we don't need that anymore, but yeah, we'll keep it here anyway. So let's go ahead and right quick and opened this guy. Actually, I've still got him open here. I believe Yes, right there were. See, there's the dot html file right there. So now let's go and add are Fab five. Now let me go ahead and going back to my browser here just for second and a very cool references w three schools dot com It's a great site, has lots of details, referring to HTML elements. In this case, we're talking about the declaration. This is What tells the browser is that, Hey, this is an html five page or this is an html four page. Or, you know, if you don't have it there, then it's going to read it as something other than HTML page. So I want this to be an HTML five page, which again is the most recent version of HTML. So if you check out the source code on a lot of the Web pages right now, we're gonna have this information right here versus this one here. You're just they still show up, OK? And your browser's right. It's just that they do not have the advanced capabilities that the HTML five pages do. For example, we come on back here, this is in actual Web page. If we right click and go to if you page source and you can see right here where we've got the declaration defining this page as an html five page just like what we show here now, while I'm here, let me go and also mention that we've got the other elements of the Fab Five that is the HTML tag. And by the way, for every opening tag, we've got a closing tag opening HTML tag is here at the very bottom of the page. We've got the closing HTML tag and that they're exactly the same. Except that closing HTML tag has a four slash at the very beginning here, just like with the body tag, which is right here. That's the opening body tag. The closing body tag is, as you may have already noticed, right here again, exactly the same. Except for this one here has the Ford slash the beginning. Now I see exactly the same. The opening body tag in this instance has some additional formatting elements, but that's going beyond the basics that I'm covering in this particular video. Now the head tag. You've got the opening head tag closing head tag again with a four slash there, and we've got the title tag, opening and closing. And for those keeping count Fab 51 23 four and body makes five. So that's our example of the code of our basic Web page. So let's go ahead, and I want to copy this. If I haven't already done so into my clipboard going back here. Pay set at the beginning of our basic Web page. And as we saw earlier in the source code of the Google page here, now we need the opening and closing HTML tags. And in this example, by the way, it's not the same as the name of the file. This has to be html. HTM. I don't think's gonna work so well in here. So you got to go with the HTML for those of you keeping track here and then the closing HTML tag and bring that down a bit. And in between the opening and closing HTML tag, we want to add our opening and closing head tag. And in between here, we want the title tag. Now all this head stuff here basically tells the browser a lot of the details about how to present this page. It's the stuff below the closing head tag right in here in the body portion of the Web page . That is what we're seeing here. That's the goodies. That's the formatting. That's the videos. That's the images, all the stuff above the closing head tag. This is all the coding that tells the browser how to treat things, so it's important. Now we need the body tag opening and we'll bring this down a little bit here and closing body tag. Now this is our skeleton of our site. Now, in here is where we put the content else. Go and say this while save and let's open this up in our browser and coming back to my folder here and bring this out a little bit. We just drag this guy into the browser, and there it is. Now this is technically a Web page because it's got all the elements of our Fab Five. When they get this guy away from here and open this up, it's got the declaration, and it's got the basic tags required for a Web page. What it does not have is the formatting. As you can see here, I do not have any formatting to tell the browser. Hey, this is actually on a second line because of browser sees us all on one line. So it's going throw in some formatting here. This is a header tag, which tells the browser Hey, on a scale of 1 to 6 or more, I am either really important. That's the H one or a not so important. That's the H six and it shows this to us in the size of the text sandwich between these tags. So each one is going to be huge compared to the H six, for example, which should be much smaller. And let's try another formats was try bolding and let's tell the browser, Hey, this is actually the end of this line. Everything after this goes on on different line, and this could be done a couple of ways. You can put this in a paragraph that's the opening and closing P or a break. For example, they do the opening and closing p. This would be the closing p and at the very beginning here opening P. Let's go and save this. Come back to our browser here and refresh. And there we are. You see here where the browser is now seeing that this line here is on a line all its own, and that the word this sandwiched between the H one tags is much more important than the rest of them. That's why it's so so big if we're to make this h six. Yeah, not so important. You see, it's not as important as arrest this. That's why it's so much smaller something. Put that back to H one so you can see what this is. There are just a whole bunch of different tags that could be used here for all kinds of stuff. With the new version html five. There's even Mawr tags that could be used with video or articles, just all kinds of cool stuff that just wasn't available in the prior versions. So let me go ahead and say this refresh There's that and to close things out here, I want to demonstrate an example of a tag that does not fall into the opening and closing tag category. This is one that is just a normal tag all on its own. It does not have an opening or closing. It's just by itself. And it's the break tag. Be our space forward slash, And this tells the browser that everything after this break tag goes on a different line. Save, refresh. And there I see where a paragraph adds this extra space here, just like a normal paragraph would. The break tag just puts it on different lines. So that's our basic Web page Now for some additional tags just to kind of get you playing around back on our W three schools dot com website if you head on over to maybe three schools dot com four slash tags four slash default dot es p will give you alphabetically a list of all the current tags, and you'll see there that there are some that are not supported in HTML five. And there are some that just don't work anymore in HTML five because they were what's called deprecate ID. That's and I'm just tossed in the trash in HTML. 4.1 You've got those that say new, So by all means, start playing around with these. Start with your basic Web page and go from there, and that's going to bring us to the end of this video on creating a basic HTML page. Thanks for watching, and you have a great day 3. HTML Editors: In order to create HTML pages, you will need at least two things browser to view your creations in and an editor to create them with in the first place. This video is going to cover the editor part of those two items. Now, when it comes to choosing and using an editor for your HTML pages, you've got a boatload to pick from. As demonstrated here in this Google search Results page for HTML editor. There's a little over one billion options to choose from now. Of these one plus 1,000,000,000 options you have free and you've got paid ones. Now one of the more popular and expensive editors is Dreamweaver, which I believe a few years back was purchased by Adobe, which are the folks who make photo shop and a few other programs. Now, if you already have Dreamweaver or any other HTML editor, then good for you you're already set. If you do not have an HTML editor, then I suggest Do not go out and buy one until you reach that level of Web design expertise where you actually need it, and by then hopefully you'll have plenty of money laying around where you can afford it. Now you can get a bunch done with just the free no pad that comes installed on your computer, but it lacks a whole bunch of helpful items that you can get with some of these other free options, like no pad plus plus composer or my new favorite Kimoto. Now, if we check out no pad plus plus or Kimoto, these are both fantastic in their own right. But they both require you to have some type of coding background. Have some ideas to what the codes mean that will eventually produce given effect, like larger text or colored background and so on, but with no pad plus plus at least ways. It gives you what's called a colored syntax, where with your default no pad program on your computer, it doesn't color code anything. But in both instances, though, you will have to have some idea or some background encoding to know what the eventual display will look like. Likewise, with Kimoto, you have to have some kind of background in coding for you to be able to know what the eventual display is gonna look like. But it's got a whole lot of cool features that something like no pad plus plus does not have. Now with Kimoto, they do have a paid option. I think is a little under 300 bucks. You don't need it. Everything that you're going to need to get started with, you can get with the free version. And with composer, you get this, a composer dot net. And, by the way, Comodo. You can get this at active ST dot com ford slash comodo Dash Edit and with no pad plus plus no pad, dash plus dash plus dot org's and with Composer, its composer with K DOT net. Now the big difference here between composer and these other two is that composer like Dreamweaver is what's called a wiz e wig editor. That stands for what you see is what you get, and this comes in really handy. If you know nothing at all about coding, because with a Wiz e wig editor, you're able to just type into the editor box what you want. And with a couple of clicks of some formatting buttons, you can have that text or that image do a lot of cool stuff in the background. The program itself in this example, composer is creating all the code that the browser will need to be able to decipher and display the way you want it to let me show you what I'm talking about on, By the way, while I'm in my browser appear, let me also point out at Wikipedia. If you do a search for HTML editor from Wikipedia dot org's, you'll end up on this page here, and it gives you a whole lot of information about HTML editors in general and the different types, whether it's a text editor object editor with the wig editor or busy Wim editor and down the bottom of the page gives you a list of a bunch of different editors being open source. That's free or free, where which is kind of free. And then you go into the commercial software, like with the Adobe Dreamweaver or Coffee Cup. Or, if you're a Mac user, kota and freeway. So be sure and check these out to just to give you a better ideas to what's out there. They go ahead and open up no pad plus plus. And as you can see here, this is the HTML five page that I've got in my work folder here, and there's really not much to it. But it does have the colors of the various elements within the HTML page, such as the tags and the attributes, and the properties and values are a little bit different in the color. So it does help you if you have some background knowledge encoding. Now if you open up the same page in Composer owned, by the way, with composer, I've got a set up by default to throw up the tip of the day so you can kind of scroll through here. Regan shut it off altogether, but it does give you some additional insight as to what's going on with Composer. Let me go ahead and open up the same document here, and we've got a couple of different looks. This is the actual preview, what it will look like for the most part on a browser, or you can go to the source code and we'll show you what the code looks like. Or one of the cool things with composer and with Dreamweaver, for that matter is that you can also do a split screen where you can see both the browser preview and the code preview at the same time. So you can make whatever changes you want here in the code area or here in the preview area . And the same change will take place here as soon as you make the same. Now, one of the other benefits behind a busy week editor in this case anyway is you've got a lot of additional options, like adding and CSS or a spell check and some of these items you will also find and no pad plus plus as well as Kimoto and let me go ahead and open up Kimoto, and I'll show you what that looks like and we'll click on No. And there's just a whole lot of options you can work with here within Kimoto as this populates here. We've got some current news. You can purchase the premium version here if you wish. You can check out recent files you've been working on or recent templates you've been working on. Or you can create new file or new projects right from this window or from up here in the menu items you can choose file. Go to new and shoes from a new file or a file from a template that pre exists within Kimoto . Let's go and do that. And you can see here the various languages you can choose from with these templates from XML all way up to C or C plus plus or, in this example, html five. Click on Open and opens up a pre populated HTM 05 document you can tell because of the A Steam 05 declaration here. You give it a page title at whatever content you want and let me just show you this to as I start typing here with various tags. It gives me this little papa window here where it can help me complete some of these tasks , for example, file and put in a paragraph opening and closing tag. I hit my return key and Boom, and I'll automatically finishes up the opening and automatically adds the closing tag. I put in some text, come up here and save and give it a name. I'll just leave it at that for the time being. Then I had this feature here that is no longer great out where I can actually preview my work inside of the Comodo tab, which basically just opens up a window down here or in any installed browsers that I already have. You can also come over here to edit and go into references and set your default colors or fonts. Adjust your work environment, all kinds of cool stuff. And again, you cannot beat the price for Kimoto no pad plus plus or composer. And that's gonna bring us to the end of this video on an introduction to HTML. Editors. Thanks for watching and you have a great day. 4. HTML Nesting: this video will introduce you to what's called nesting HTML tags as well. A. Some basic coding in your HTML Web page construction. Now there are at least five things that every Web page needs. In order for it to be an actual HTML Web page, you have to have the declaration, the HTML head title and body tags. You also need to have the Web page file saved as an HTML file or HTM file, and it is customary to name most Web pages as index. But you can name it whatever you want. Browsers will automatically look for the index that html file first, so unless you have a good enough reason not to, you should just go ahead and name it index dot html. Now nesting is when you assign different HTML elements to the same block of content, and an HTML element is an opening and closing tech. Let me show you what I'm talking about when you open up my little HTML document here. In this example, we've got an opening head tag and we've got a closing head tag. These represent an HTML element, the opening and closing tags of a particular attack. Likewise, in opening title tag and a closing title tag. These two items opening and closing represent an HTML element. So whenever you combine two different elements in in this example those elements, airhead tags and title tags to a particular block of content in this case, the title, then we're talking about nesting. So, technically speaking, this is an example of nesting, but not the example. I'm gonna go into here. Example I want to go into is these two guys right here, these two sentences right here. I want to make this one a paragraph. So that kind of stands out away from this one here. And to make it stand out even further, I want to make this bold and italics sized. And this one not so this example of nesting will be three different elements on this one block of content. Gonna be a paragraph. It's gonna be bold ID and it's gonna be I italicized. Let me show you what I'm talking about. Now, first off you go and pull this guy into our browser to see what it looks like right now without any of the formatting. And by the way, these are the five elements I was talking about earlier that most every HTML document has toe have before. It's technically an HTML document. That's the declaration. In this case. This doc type represents that it's an HTML five Web page. Then we've got the HTML tag. That's number two, the head tag number three, title tag number four and the body tag number five. And we've got the representing closing tags of each closing head tag, closing title tag, closing body tag and closing HTML tag. Now most every opening tag will be accompanied by a closing tag. Not all the time, though, but most the time. It will be so on with our example here, Let's go and pull this guy in. I'm in my chrome browser, so just hitting the control key on my keyboard and the letter over open it will allow me to navigate to the location of my index file. And here we are with no formatting whatsoever. As you can see here, you've got this on two different lines, but the browser doesn't see that because it's not formatted properly to show that we wanted to be on two different lines. Bold, italicized and so on. So it's going to do that now. So we want to make this a paragraph who got the opening P tag four paragraph and the closing paragraph tag, which is exactly the same way as the opening tag on Lee. It starts with the Ford Slash. Then the rest of that tag, in this case, Pete and we saved this. Come back here and refresh, and there's a representation of the paragraph tag. Come back here. The thing about nesting is that the opening tags really are not in any particular order, but for it to be properly coated. The closing tags have to be in the exact opposite order of the opening tags. So again, opening tags no order is required. But however you place those opening tags determines how the closing tags must be placed for to be properly coded. Now if it's improperly coated. Ah, lot of browsers nowadays will still show it properly formatted, but if it's incorrectly coded, some browsers will not. Some browsers like, for example, on your smartphones or your tablets. They might get confused and just not show it properly the way that you wanted to be shown anyway. And that's where property coding your nesting tags will come in handy. So here we've got B for bold and we have to be an exact opposite order. So it's PB. So to properly ness, this must be B p Ford slash and be Say this on back here. Refresh. And there you go. Now we want to add some italics. So we put in the eye for the eye italicized opening tag and remember, we need to put the closing tag in the opposite order, so we want to make sure that it's PB I IBP. So we put our closing I tallis sized tag right there. Save I'm back. Refresh. And there we go. Now that that's pretty simple so far in this example, if we wanted to just have portions of our content to be I italicized or portions of it to be bold and then just remember, you have to have the closing tags in the opposite order of the opening tags. So if I just wanted this here to be bold ID, But I wanted this here to be italicized meet one of these guys, share and not have my opening. I tell a size tag here and then I wanted all of those to be italicized. I put my closing I tele sized tag here, but this kind of screws up the opposite order of the closing tags with the opening tags. So what I need to do is to close out the I italicized tag here again to maintain the order , then reopen them here. And of course, I've got the closing tag here. So now then, we've got everything in the proper order. Hopefully, that makes sense. We just try to remember whether we are using just the simple example as I demonstrated earlier, or a little bit more complex like this one. You always have to have the closing tags in the opposite order of the opening tags. So enclosing nesting is okay if you do it the right way, that's gonna bring us to the end of this video nesting HTML elements. Thanks for watching. And you have a great day 5. HTML Colors: one item you will eventually need in your Web design is colors, and when I talk about colors, I'm also talking about black and white browsers. Interpret colors one of three ways. The color name, like blue, black, green, magenta, the colors RGB code and the are as red G is green. B is blue. And by using a code called Hexi decimal, this video will mostly deal with the Hexi Decimal Method. Now, when we add hex colors to our HTML presentations, we do so with the pound sign and a sequence of three pairs of digits following the pound sign Hash Symbol number sign. Whatever. These six digits will range from 0 to 9 and a tow f, so there will never be a color code with a Z in it. For example, Onley zero through nine and a through F. Since there are a little more than 16 million different color possibilities, memorizing all of them might be a bit much for Joe Average. So I'm going to show you a Web page that shows you the different Hexi decimal colors. So all you have to do is simply pick the color you want and the hex code is shown right there for you. Simple Simon. Okay, let's check out this cheat sheet that I was talking about. Then we will add some cores to an HTML document for some real world applications. Basically, we can just do a search for HTML colors and then just choose images. Let me show you what I'm talking about. Go to our favorite search engine. And in my example here it's Google, as you can see here, about a 1,000,000,000 1/2 results. But at this point, if we just go to images, you've got a whole bunch of options here to work with. So just pick one the Elikann steak with it. Let's go and choose this 1st 1 here, for example, and we just click on the image there. It brings up a list of all these colors with the Hexi decimal coat. As you can see here, the six digits on each one. And don't forget that whenever you put one of these color codes or hexi decimal codes into your HTML document, they must all begin with that hashtag or number, sign or pound sign. Now, what I normally do is if I'm trying to match a color to an existing layout that I have maybe a header image or some button that I'm wanting to match with. Then I will use a color picker, and there's several choose from I'm using the chrome browser and become over to the chrome Web store, and that's a chrome dot google dot com ford slash Web store. Then you can just do a search for colors Ilham and like any other add on or extension, be it for Firefox or for chrome. Then you just simply install that particular extension and you're good to go. Let me show. You have already got this one installed, but at this point, you would just click on this click on the added to Chrome, and this has already added to mine. So I'm gonna go over to my extensions here, go to tools, go to extensions, and I've got a lot of mine turned off just to increase the speed of my browser. Right here is color Zillah, and I just want to enable it. And you see, it just puts it up right here. So now that if I want to check out an exact color to one of my say buttons that I'm going to match or a header image. I just click on the color zilla color picker and come on down here and you can see right up here is the color Hexi decimal code, the RGB code And you can see here the 006699 in this box here matches that in the hex coat and the hex code up top here 003399 and so on. So that's how I can get an exact match oven existing image that I already have And another option is you can use its online color picker at color picker dot com. And right here it's giving you the hex code that you can choose from any number of just kind of moving this guy around here. And you can also choose from the RGB code here. And whenever you get a color that you like, you just click on, add to my colors and we'll add it down here like so many guys. Come on back here and click on this and it shows you that hex code there and here shows you that hex code there, and so on. So this might be a nice site few to bookmark along with a page like this that has a whole list of them now. Another option that I would go for is using something like the color pickers and photo shop again, for example. But of course, that requires you to install those particular software. And with Photoshopped, it also requires you to buy it, which could be kind of a hefty sum. So that's a quick rundown on the colors. Let's go ahead and demonstrate this in an actual HTML page. Go and open up my Kimoto and I've already done that here. Let's go to file new and let's go to template html five. And here we go Now that I've added some content here into our HTML document and I went ahead and added some styling up here in the head tag and some content down here in the body section. Now the quick rundown here for the body. I've made the background yellow, and I've used the color name for this and for the H one tag. I made the color for the text read. That's FF at the very beginning. Member R G B And for the H two tag, I made the color blue Remember RGB red, green, blue And for the paragraph color. I made it blue and here I used the color name. Now these are just using the s and the zeros. You can go all out and use any number of these cover codes here, for example to really add some possess or matching the surrounding color scheme of your site. Let's go ahead and save this and take a look at this in our browser. Yeah, that'll be fine for now. And preview this in our comodo tab. Just kind of keep things close by here. Here we go. Now then, if we were to change this to a Hexi decimal code, remember, we have to start it off with the pound sign or hashtag and we can only go from 0 to 98 f or any combination thereof. I have no idea what that color combo is gonna be, but let's just see, save that, okay, kind of a nasty blue. And if you were to go haul efs like so. But if we want to changes to this color green, for example, for the H one tag. 006600 Don't forget, we have to have the hash tag at the very beginning. Save and there we go. So there you are. That's how you can add some additional coloring to your Web design and a few spots on the Internet for you to go to get some additional color ideas and some browser add ons whether you are using chrome Firefox, and I'm not sure if there's one for safari, Internet Explorer or opera, but they may have something. And if not, you always have those items like the online color pictures, too. That's going to bring us to the end of this video on HTML and CSS colors. Thanks for watching and you have a great day. 6. HTML Site Nav Links: When you have a website that has many different pages, you're gonna want to have some type of navigation area or menu area that your visitors can go to in order to click on the links for page two or page three or the home page or your about page and so on. This video will show you how to add these navigation links to your site. I'm gonna be using the comodo html editor in this demo, but you could do the same thing and pretty much any editor. So I've got my editor open here, and I've got my home page or index dot html page here Page two and page three. Let me show you what they look like in the folder. Now, this is on my desktop, but this is the same set up that should be in place. If you have these on the server on the Internet, they should all be in the same directory as your image folder and so on. So let's get on back to the editor here, and I've got a bit of styling up here in the head section. I've got the navigation links right here in text form they're not in clickable link form yet. And some content down here, some funky styling based on what's up here. Now, on the home page where we're at right now, I do not make this clickable on page to this file here. I would not make page to clickable just the home page and page street on the Page three file. You guessed it. I would not make the Page three text clickable Onley Page two in the home page. That's just the way I do things. Others might not do it the same way. Totally up to you. How we do this is we at an anchor tag. So I'm gonna go ahead and put my opening anchor tag here. That's the opening bracket. The letter A. It's like we have showing right here in this poppet box and space. We now need the attributes. H ref. I used to call this the H ref tag, and I was always wrong. In doing so. It's the a tag or anchor tag with the H ref attributes. That's H R E F equal sign and then we want to put a couple of double quotes in there and then close that up. Now, Kimoto, This editor that I'm using automatically. We have got things set up here anyway, automatically puts in the closing anchor tag there. I'm just gonna cut that out of there and put that at the end of page two. Right there. Now, in between the two double quotes is where we put the name of the file. We're referencing with this text. So I need the name of the page to file, which is right here. That's all. Lower case P A G dash to dot html has to be exactly as it is. So come on back to my editor here. Cursor right in there. P a g e dash to the HTML and we're golden. They're just double checking a trap. Page quote close. Okay. Same thing for page three. Opening anchor tag space. And with the Comodo editor, I can just scroll on down here until I get to the H ref. Make sure that's highlighted. Hit my enter key being bang. Boom. Put in a couple of double quotes. Close that out. Get this guy out of the way here. Good. There at the end there, paste and in between the double quotes. Put the name of the file T A G e Dash three html and we're solid gold. Just a quick double check their yet and now I want to make this a little bit worse. Stylish. I'm gonna put this as an H to tag opening bracket H two closing bracket and just cut this guy on out of there and face it at the very end here. Let's go ahead and save this and let's check this guy out in our chrome browser and click on preview. And there we go. Home page Page two, Page three. There's our Page two yet to be styled up here and let's go and do that real quick. Come back here and onto Page two, and this time I need to add the clickable links to the home page and page three. And there were I just paused video there. Well, I did all the typing, and I've got the opening age to tag, just as we did with the Page one as referenced here on the Chrome browser and the closing H to Tag. And then I've got the opening anchor tag with the H ref attributes the name of the home page file. That's index dot html. And then there's the closing anchor tag for the home page did not do anything for Page two , and then the opening anchor tag and the H ref attributes for Page three and then the closing anchor tag for Page three. And I've already saved that and same thing with Page three. I've already added all the needed tags here to make thes navigation links clickable opening age to tag closing age to tag opening anchor tag for the home page and closing anchor tag for the home page opening anchor tag for Paige to closing anchor tag for Page two and nothing for page straight. So let's come on back here and refresh and we're on the home page. Now you see here, go to Page two. This is Page two should be clickable link to the home page clickable link to that Page three on page three. We have a clickable link to Page two Boom and come back to Page three and clickable link to the home page and so on. And that's how you can add a clickable link navigation area to the pages on your website. Thank you very much for watching and you have a great day 7. HTML Link Targets: when you click on a link on a Web page, you were then taken to the destination to find in the hyperlink. U R l This video will show you the different targets you can define in the HTML links syntax that allow UME or control in how the link acts when the visitor clicks on it, getting back to my first point. If you have an affiliate link, for example, on your Web page and somebody clicks on that link Bush, they're taken off your site and on to the site of the product you are promoting. This may not be the perfect scenario, because whether the visitor buys from clicking on your affiliate link or not, they're no longer on your website and may never get back here again, but by but there is a way you can craft the code on the affiliate link so that when the visitor clicks on it, an entirely new window or tab opens and takes a visitor to the affiliates product. This leaves your website still active and open on the visitors browser. This way, whether or not the visitor buys from your affiliate link, they still have your website open so they're more likely to come back and check out more of your site searching. So in this video, I want to show you how you can craft thes target attributes. That's what they're called. And I've got the basic coding set up for our html five page. A little bit of the content down here in the body section. Now, what I want to do here is I've got in this header section here. I've got three areas. I've got my sight. I've got big affiliate site number one. I need to put a link there that's gonna open up in a different window or tab. And I've got big affiliate site number two, which also I want to open up in a separate window or tab. So we're actually going to be demonstrating two different methods. You can have the link open in a different window. So they go and craft the link for the big affiliate site number 11 over here at the beginning, I need to put the opening anchor tag opening brackets a Space H ref equals double quotes and then closed my double quotes because that's the address I'm gonna be sending him to is the big affiliate site number one. But now I need to put in the attributes to define the target. And in this one is going to be underscore Blank. So I use the attribute Target equals double quote, underscore and then blank close off my double quotes and close off the syntax with the closing bracket. And this is the code we used to open up a new window. And of course, I've also got the closing tag, which I need to relocate, cutting that and putting it at the end of what I want to be clicked on. And that's just automatically put in there with the particular settings that I have on the Kimoto editor here. Now, let me show you the other way that we're going to use this. They don't demonstrate the difference between the two. Let me go ahead and move this on over here. Someone add basically the same thing. Copy and paste. This weighs up to here anyway, for big affiliate site number two Now, in this particular attributes is a little bit different. We're still gonna be using the target equals attributes. But instead of underscore blank, I'm going to use new face. Close off that and get my closing anchor tag out of the way there, Put it at the end here. Now, both of these different setups will kind of sort of do the same thing in that they will both open a new window or a tab. That's where the similarities end with the underscore blank. This will open up a new window each and every time. And using that target equals new will only open one new window and every link Click with the target value of new will replace the page loaded in the previously open window that was open by somebody clicking on the link with the target value of new. I'm sure that made a whole bunch of sense. But let me just demonstrate, just in case didn't. So let me go ahead and say this. I'm gonna open it up in our chrome browser. So let's come on over here to preview in our chrome browser. Pull this guy over here and it didn't open in the right one. When we open up in this one here you are. So now that the big affiliate site number one is the target, underscore blank. That's the one that's going to open up a new window each and every single time. This one here target equals new. And that's what we're gonna open a new window one time. And that one window is what's going to be used for each and every link that uses the target reference New. Let me demonstrate this one. Newt. New tab. Come back here. Another new tab. And I think you get the idea. It will always open a new tab. They close, he's out. And with this one here with the target equals new opens a new tab. But it always goes to that one. It's not going to open up any more new tabs. It's only gonna open up one. So if there were a whole bunch of different links on here and each one of those had the target new attributes, they would all be using this one tab. Just the other links would be replacing the prior link that was open originally in this particular tab. Now, on a side note, the target attributes was deprecate ID in HTM 04 But html five has reversed that. So if you're using the HD mo five declaration like we are from back here right here. Then the target attributes will validate. Now, if you're using an H team 04 Declaration, meaning you're creating an HTML four Web page, then it might not validate. More than likely, it won't. And by the way, validation basically looks for HTML errors and non standard coding. Most browsers today are pretty forgiving, but some might display your nonstandard coated Web page all kind of funky. So that's why it's a good idea to follow proper coding standards. And in the HTML five environment, the target attributes It is good to go, and that's gonna bring us to the end of this video on the link targets your HTML page. Thanks for watching and you have a great day. 8. HTML Images: this video is going to show you how you can add images to your Web pages. I've already added the images to my Images folder here and now. What I want to do is write the code in the index file to bring those images onto that index page. Let me open up my images folder here and I'll show you those images right Here we go. And this one here is I hover over. You can see it's 400 by 3 50 the easy button image is 300 by 2 98 A couple of pretty good sized images. Now this is my editor here, and this is the Comodo editor, and what we need now is somewhere between the opening and closing body tag. Need to use the image tag, and this is a single tag. In other words, there's not going to be an opening image tag and a closing image tag. It's all kind of wrapped in the same thing I was going to put in our opening bracket. I am G Space and then the closing part of our image tag, and that's it. Now this alone is not going to do anything for us as far as adding our images. But this is the actual image tag. In other words, there's no closing image tag. It's all wrapped into one now that what I want to do is go ahead and put in a space and use the S R C attributes just like it's showing here in the pop up and then equals couple of double quotes. And in between these double quotes, I'm gonna put the location of those images. And this easy button, for example, is right here in the images. Folders. That's the first thing. Then we need to put a Ford Slash in the name of the file. And then the file type was going to put this guy in my clipboard. Come back here and again. It's in the images folder four slash and name of the image that J. P. G. And that's it. That should produce our image. So let me go ahead and save this. And let's preview this yes rare chrome browser, and there's our easy button image now. That's how you can put the image into your Web page. Now there's actually a few other things we can do with this. You can actually style a little bit Mawr with some additional attributes, you can put a border around him. You can even make this smaller, for example, right now, you see, how big is this? This is 300 by 2 98 It's not that down a little bit. Say 1 50 by 1 50 would be pretty close. And you do that by adding the height and with attributes. So we're going to space h e i t h t equals a couple of double quotes. And in between this double quote, I'm gonna go 1 50 space with double quote 1 50 closed those double quotes, and you can go on like I said, add border and so on. But I'm not gonna do that now that let's go ahead and save this, come back here and refresh, and they're announced a much smaller one. Now, the drawback to this, even though it works just fine. The drawback to this is that the browser actually loads the original video size, and then it scales it down based on those additional attributes. So in order to increase the speed of your page loading instead of having the visitors browse or do all that re sizing. I would go ahead and make the image the size you want to be displayed, rather than having it a large image and then putting in those additional attributes and having the browser do all that heavy lifting. And that's how you can add images to your Web pages and even add some additional attributes in this example, re sizing that original image that's gonna bring us to the end of this video. Thanks for watching and you have a great day. 9. HTML Comments Tag: this video will demonstrate how to use HTML comments. The HTML comments is used and created the same way. Whether you are using an HTML 4.0 document or an X HTML document or an HTML five document. Now, I'm gonna be demonstrating an HTML five document. But again, it's done the same way as the others. The biggest reason I use comments is as a reminder or a note for me within the HTML coat. The comments are not processed by the browsers, so no one else sees the comments unless they look at the source code, which is done in the browser by usually just right clicking on the Web page and choosing view page source. Let me show you what I'm talking about. Let's head on over to owe us tried chow chows, Cool Dogs, American Kennel Club. Let's check out their page, and depending upon the browser you're using, would depend on actually how you do this most the time you just right click and you got something that says view, paid source or page sores or something like that. I think Internet Explorer might be a little bit different, but this is the code that makes that page look the way that it does. And an example of the opening and closing comments tag is just this right here. Everything in here is not being seen by the browser. Of course, everything above the closing head tag is not being seen by the browser either. But just as a demonstration, just bear with me here. The comment tags can be either in the head tag or in the body tax. Either case, they're not gonna be seen in the browser window. But this is a demonstration of what a comment looks like. This is the opening comment tag, and this is the closing comment tag. Now, as an example of a reminder or a note that I would use in my HTML markup would be to let me know that in between the opening and closing common tag, put this particular coat like an auto responder or this is where my sales page begins, or something like that. Let me see like, for example, right here. This is commented out, but it's used as a note I would imagine to the people that made this page that hey, this is the beginning of where the Kwan cast script goes, and this is the ending of the Kwan cast script. I would do the same thing for auto responders, but that's an example of using a comment tag for a note or a reminder. Come on back to Google here now, another way that I would use a comment tag. That's whenever I'm customizing a Web page, and I want to see what the page would look like if this certain element was not there, like a search box or an image. Instead of simply deleting that element, I would go ahead and comment it out first. And if I like the look without that element, then I would go and delete it. And if I didn't like the look that I wouldn't have to worry about typing it back in, I just simply remove the opening and closing comment tags proof. It's right back to the way it waas now. One more way. That the comment tag should be used more often, especially from developers, is you can add your own branding info like name, email and Web address and haven't commented out, so it would not appear in the browser window. But when the source code is viewed by someone that wanted to see the code. Your information would be staring him right in the face, and they now know who made this site. And who knows? You might drum up some extra business that way. Let's go ahead and open up our HTML editor. And in this demo, I'm using the Comodo editor. And let's throw in a comment here just to demonstrate what it looks like now. We saw there on the American Kennel Club website what the comment tags look like. Let's go and throw something in the body section here and now that let's go and save this and that's what it looks like. Now, if we were to go ahead and comment that out, that's the opening bracket. The exclamation mark, which is holding the shift key down, hitting your number one and then a couple of dashes and you see after you do that with the opening tag presented first, it comments out everything else after that on the entire page, so you might want to be a little careful there myself. I always put the closing comment Tagen first. That way nothing has changed until I put in the opening comment tag. Hopefully that made sense. There. You saw how the rest of this came back to life, and this right now is commented out. You see, I was kind of lighter in color and it's italicized. Let's go ahead and say this and I'll show you how this looks down here. And even though I did not delete this, he went ahead and the browser moved the paragraph tag right up to the very beginning, as if this was not even in existence at all. And that's a few examples of how you can use the common tag, and that's going to bring us to the end of this video on comments. Thanks for watching you Have a great day. 10. HTML Meta Tags: this video is going to be about the metadata and the meta tags located in the head section in your HTML Web page. Now, meta tags are not used as heavily as they used to be back whenever the search engines relied a lot on the stuff in the metadata. Now there are, however, a few that I would suggest to include in your Web page because they are used by the search engines and how your site info is displayed in the search results and buy some browsers in how they load or reload your webpages. Now the men attacks go in between the opening and the closing head tag, like the title tags do now. Here are a few Met attacks that I think you should include in your Web page markup description, keywords author and shar set. And while I do not end while I do not use this one, some people I spoke to say that if there are elements on the Web page like ads, for example, that change when the pages refreshed, then adding the meta tag that auto refreshes the page might come in handy. I'll cover that here in just a second as well. So I've got my Kimoto html editor open and I want to go up here and just below the title tagged and doesn't matter if it's below or above when Go ahead and enter in the char set tag and this is a little bit different in HTML five vs html, 4.1 and this being an HTML five page, as shown by the declaration here. We need to use this form for the char set. That's the opening bracket meta space. And then the char said equals attributes with utf minus eight as the value. And again, if you're looking at the code oven. HTM 04 page, then it would look a little bit different. Actual. There's a lot more to it, something going hit the return key, and this next one is the meta description tag, and you've got the opening bracket meta space and the name equals attributes with the description as the value and you've got the content equals attributes with the actual description of that Web page being the value here. And it's this information that's going to show up in the searches and results next to your listing and you've got a limit somewhere around 150 maybe even 1 60 characters, not words but characters, so you can have a larger description. But only that amount will show up in the description area. This is the description area that I'm talking about. So if this description here went on to like 250 characters, well, you'd only have about 150 or 160 characters showing up here and maybe a dot, dot, dot at the end. So it's a good idea to get a much of your information out in those 1st 152 160 characters that will best describe your Web page. I'm no expert on search engine optimization, but I would go ahead and consider using some pretty powerful keywords in this description area that are also located on your Web page. Speaking of which, that brings me to my next meta tag. And that's the key words on, By the way, don't forget to close this out. This is one of those single tags that do not require an additional closing tag. In other words, this is not an actual closing tag for the meta tags. It's all contained within the same tag here. A single tax. But you just add a space ford slash and in the closing bracket, let's go and add in that next meta tag. And again, this one is our keywords meta tag. And just like before, we've got the opening bracket meta space than the name equals attributes, keywords being the value space. And then, like the description we've got, the content equals attributes. And then inside the double quotes here, you've got different keywords. Now, of course, this year is just a description of this tag. But the key words are separated by comma in a space. And, like the description, there is a limit here, so I would make this very limited. As a matter of fact, I'd probably keep this toe 3 to 5 keywords tops. Now, since this is on meta tags and not search engine optimization, not gonna go into a great deal of description on what keywords are or what the description should be. But just know, though, that you should not go overboard with the amount of keywords you have listed here. Now, another one that I don't use that much, but I have seen that it is a good idea to include, and that's the author meta tag and the last one here I do not use because I frankly don't find the need for it. But as I said, some folks say that it works pretty good, and that's the refresh tag. And that's the opening bracket Met um, space http. Dash e quiver equals. And then you've got the double quotes with the word refresh in the middle, and then you get the space and then the content equals attributes. 30. This is the number of seconds, and this is the number of seconds that the page will remain before it automatically refreshes. So if you want your page to refresh every 15 seconds or every 45 seconds, then a justice Accordingly, they just go ahead and make this five seconds just for the sake of testing it. Me. Go ahead and save this and let's open this in. Oh, let's say the chrome browser and see if this refreshes here. If you blinked, you missed it every five seconds. OK, so that does work, and that's gonna bring to an end this video on met attacks. Thanks for watching. And you have a great day 11. HTML5 Audio Tag: prior to HTML five, when you added an audio or video file to your Web page, you did so through a particular plug in, like quick Time or flash or Flash movie. But maybe not everyone that visits your Web page has that particular plug in, installed or updated on their browser. They would then be prompted to install or update the plug in on their browser. Now, not everyone would do this, and many would simply just move on to another website. HTML five solves that issue With the use of the audio and video tag, This video will show you how to add an audio file to your HTML five Web page. Now. The current problem with adding audio to your HD mo five Web page is that some browsers are not recognizing all audio formats. The way things are at this time is that if you want the majority of your site visitors to hear your audio files, then you have to add more than one audio format so that the different browsers recognize and play your audiophile. I was setting this up is not difficult at all, as you'll soon see here in a second, the problem, as I see it, is that instead of having one MP three audio file it say to Meg's now I have to have additional audio formats at roughly the same size or even larger. If I'm gonna be using un compressed files like the way file Now, if I use a lot of audio files because, well, maybe I do regular podcasts and those podcasts, or 30 minutes or an hour or longer, then this will put a sizable increase in my online hosting costs. Now, in this demonstration, I have several different four match of the same audio file that I'm gonna be using in making this HTML five Web page demo. Let's have a look. Now I've got the three different files here. They're all the same name but different formats. Here's the ever popular MP three, and the size here is 296 kilobytes, and these other 24 match the UN compressed wave and the A I F. That's the audio interchange file format. Well, you can see they're a heck of a lot larger than the 2 96 kilobytes of the MP three. Now, let's go ahead and open up my Comodo html editor. And here is how the audio tag is set up. And it's basically the audio tag that's the opening bracket, the word audio space and then the attribute that brings in the controls onto the Web page. You know the pause in the play and the fast forward controls, and that's simply the attribute. Controls equal, open double quotes, controls, close double quotes and then the closing bracket. That's all there is to it. And here we have that the different source files, and I've got the MP three set up first than the way foul set up second and the A I f set up third. Now, you may not need all three of these. Let me show you a few sites that might come in handy for you on the HTML five test dot com site will keep you up to date on the different formats that the different browsers support . I mean, all of, for example, this is the chrome browser, and if you were to bookmark this and use this on your different browsers, and by the way, if you're a Web developer, you should have more than one browser install on your computer. Frankly, I would suggest at least four the four big guys Chrome, Firefox, Internet Explorer and Safari. You may also want to include operating there, but that's totally up to you now, just to give you an example on Chrome. Out of 500 total points, Chrome's getting 468 not too shabby. You do the same test on Internet explored. Nine. You're gonna get your 138 points. I think it is, but that's beside the point. You can check all that stuff out on your own, but right here tells you the audio portion of this browser and the different four match that it does support and in this case, the one that it does not support. So Chrome's pretty cool right now. It says A okay. On the MP three, he do the same thing on your Internet Explorer on your safari and on your fire fox, and you're not gonna find the same on all of those browsers. It's a matter of fact. I think all of those will support MP three, except for Firefox. So since Firefox is a pretty popular browser, you're gonna want to provide your site visitors with some type of a format that that browser supports. So using this site to check those will work out great couple more sites for you to check into and possibly bookmark if you don't already have some type of software that converts one format to another is online dash convert exams. Are both of these convert a lot of different formats to a lot of different other formats? In this case, we're just talking audio formats. They both do pretty much the same thing. They're both free, and they both allow you to download. The converted file exams are is a little different in that they require you to insert your email address here. They will then email you the download link as soon as the conversion takes place online. Dash convert dot com No, they do it all right here on the site, and they provide you the download link and online Dash Convert also allows you some additional customization. Let me show you what I'm talking about. Let's say we want to convert our WHV file or MP three file into an A F F or in a A C file right here. It's where you upload the file that you want to convert or you can put in the u R l of that file. But you are also able to make some additional changes here, depending upon the file type that you upload in click on convert file. And depending upon how large that file is you uploaded would depend on how long it takes for that conversion process to take place. Then, boom, You got you download link right there. Download it. You're good to go. So out of these three sites, exams are online dash convert dot com and html five test dot com Of these, you should have at least two of these bookmarked on your site somewhere for future reference. Okay, let's get on back to the coating. So we've got the opening tag and inside of the opening audio tag, we have the space that we get the controls. Attributes equals open double quotes, controls close double quote in the closing bracket for the opening audio tag. Then we've got the source here and the different file formats again. Each of these air, the same name looks like got a mistake here. So the A I f would not be playing because you don't have the colon. There you have the double quotes, but here's what you do. You have a source tag space and you have the source attribute, which is SRC equals. And again you got the double quotes opening and the double quotes closing here at the end. In between there, you've got the name of the file and then the name of the four men, and you get the space after the double quote. Then you've got the type attributes, which is type equal, open double quote, and you get the word audio slash in the name of that format of that file. In this case, it's MP three, close double quote and then the closing bracket. Likewise, for any additional sources that you have now, let's make sure we save this. Let's preview this tried in chrome and with Comodo. This guy pops up here, click on preview, and there it is and video 12. You're gonna learn the steps. There's the chrome, and you'll notice also that we've got different looking players, depending upon the browser that were in its preview. This in Firefox. I see different looking player in videos. Well, you learn the steps involved in setting up on eBay store. And let's try this and safari and you'll have uneven, different look. And that's it. That's how you can add the audio tag to your HT mo five page and a couple of additional pages you might wanna bookmark for future reference. That's gonna bring us to the end of this video on adding audio to your HTML five page. Thanks for watching and you have a great day. 12. HTML5 Video Tag: prior to HTML five, when you added a video to your Web page, he did so through a particular plug in, like quick time or flash. But maybe not everyone that visits your Web page has that particular plug in, installed or updated on their browser. They would then be prompted to install or update their plug in. Not everyone would do that, and many would just simply move on to another website. HTML five solves that issue with the use of the video tag. But after you see this video, you may decide to stick with the old way at least run out. The current problem with adding video to your HTML five Web page is that all browsers are not recognizing all video formats. Way things are at this time is if you want a majority of the major browsers to play your video, then you have to add all the various video formats that the different browsers recognize. Setting this up is not difficult at all, as you'll see here in a second. The problem, as I see it, is that instead of having one MP four video file at, say, 25 or 50 megabytes or however big it is now, I have to have multiple video formats at roughly the same size. That will put a sizable increase in my online video hosting costs. Now I have several formats of the same video that I'm gonna use in making this HTML five Web page demo. Let's go and have a look at that folder real quick. This is the HD mo page right here and here. Four video, four match there, the same exact video, and it's only about 20 seconds in length there. Now you can see the MP four is about 214 K and the Web M format of the same video is 407 came almost twice the size. Remember, this is an 18 2nd video, and if you have multiple four match like the MP four, maybe the O. G. G and the Web M maybe even the M. O. V is wall for the H 0.264 formats. Then you are going to be hosting a lot of videos, so that is something you want to keep in mind. Now here's a couple of websites I want to point out to you. As far as seeing which browsers work with which formats. Html five test dot com Now, as a Web developer, you should already have several of the major browsers install on your computer anyway. At least Chrome, Firefox and Internet Explorer. I'd also includes safari and opera, but that's totally up to you. And with those installs, you contest any Web page. You contest all of your Web related items to see how they would look on those particular browsers. And if on some of your Web pages you have some type of software like Google Analytics, for example, that tells you that browse or use of the visitors popping over to your website, then that might also give you an ideas to which browsers you should be focusing on for your videos to be played on. Anyway. Test this out on your browser's and if you come on down here right up close to the top, we've got the video format here, and this tells us what formats that the Chrome browser currently supports. And I say currently because they're constantly updating their browsers. Likewise, with Firefox likewise with Internet Explorer and so on. So if you had a bookmark this site in your browser. Come on back to it every now and then. Especially right after you have an update that takes place. See if any of these have changed from the red X to a green check mark. Now, just seeing this year, the Chrome browser supports all these guys here. Couple of the sites zam czar and online convert dot com are too great sites because they're not requiring you to download software in order to convert your file four match from, say, the MP. For that, you have to an O g G that you don't have and might need. How these work. Pretty simple. You choose the file from your computer, you decide on which format you want to convert it to. Enter your email address, Click on Convert. It will send you an email whenever the conversion has taken place. And in that email is the download link for your converted file. Now online dash convert dot com Pretty similar Onley. They don't send you an email. They converted and then supply you with the Donald League right here on the site. So, for example, you go over here to the video converter, you can see they've got all kinds of converted shirt, just like Sam's are does choose what you want to convert it to. Let's say you want to convert it to Ogi. This then pops up. Come on down here, choose the file from your computer or enter the URL of the file You want to convert. Make any changes here that you want Click on convert file. It will go through the process and depending upon how large the file is that you are converting, will depend on how quickly they get the job done. And then, boom, the page changes and you've got the Donald Link right there. Now let's take a look at that code. I'm using the Comodo editor here, but you could do the same thing in most any editor inside the body tag. Here is our content, and inside that content, we've got our video. We've got the opening video tag, and inside of that opening video tag, we've got a couple of attributes. The main one is the controls attributes, and that tells the browser to add the play pause. Fast forward controls whatever controls there are on that particular player that that browser has This is what brings in those controls, and I wouldn't have an added an additional attributes auto play to make it auto play whenever the browser opens up. And then I added, these two further design the way that video appears. You don't have to have these thes air not default by default. You just have the opening video tag. But you also have to add the controls attributes in order for the controls to show up. But the's here you don't have to have. But the video that I've got right here is by default 6 40 by 4 80 So I added the width and height attributes along with these values to bring it down in size. And then, as faras adding the actual video, you've got thes source tag, and then the source equals attributes with the values equaling the file name and the format name. So the file name in this example is movie, and the format here is the Web M. Now, after you have in the file name, you have the clothes, double quotes space and you have to put in the type attributes, and that's type equals open double quotes and then inside of there you have to have the word video, ford slash And then the type of format just like here we have Web M here needs be Web M Here we have MP for this needs to be video slash mp four and here we have ogi. This needs to be the type equals video slash O g. Now, having these three in there recovering pretty much all the basis, we could probably get by with just these top two. And in addition to that, I also have this down here in case whatever browser they're using does not support any of these. They're not just gonna get a blank page. We'll get a notice saying your browser does not support the HTML five video tags. Let's go ahead and preview this in our browser. Let's try chrome video. 12 way are setting up in E. And it was Try safari. You can see here to player is a little different depending upon the browser it's playing in . And that's pretty much it. You now have the tools needed to add videos using the HTML five video tag in your HTML five Web pages. Thanks for watching. And you have a great day 13. HTML Ordered Lists: this video will show you how to set up an ordered list in your HTML document. First off, what the heck's an order list? An ordered list is a list of items with a definite order like Dave's Top 10 or the five tallest buildings in the world, or as I'm about to demonstrate the top five cities I lived in. Now let's go ahead and create our ordered list. Now I've got my title right here and underneath that, I'm gonna go ahead and open up our ordered list with the ordered list opening tag. And that's the opening bracket O L. In the closing bracket and I'm gonna go and add the closing order lists as well. It's the same as the opening order list. Only it begins with the forward slash just like that. Put the cursor and they're hit my enter key a couple of times and give me some room to work now, inside of the order, less opening and closing tag. You have to have the list items, and they also have an opening and closing tag and they look like this as a little pop up box shows its CLI, which should be easy to remember list item. Like I said, each of those have their opening and closing tag. Let's go ahead and enter the top five cities I've lived in, and that's our ordered lists. Going back this guy up a little bit, it's going to save this now. As you can see with an ordered list, the list is presented to you in an ordered fashion and in this example, numbered. You can also have, except where they are delivered to you with Roman numerals or with letters with upper case or lower case. And with HTML five, there is a new attributes you can use to reverse the order. Let me show you. Now this is brand new two html five, so it may not be supported in all browsers. It's matter of fact. I think it may only be supported in two of them right now, but let's just take a look see. And frankly, it's a better idea to have all styling dumb in your CSS and not in line or in your HTML coding. But that's just my two cents worth. Say this and see. Yep. Okay, so it works now. Another styling you can put in here is instead of having it going numbers lowest of the highest or is in this case highest to the lowest you can put in the type equals attributes and put in an upper cased A or a lower case a toe. Have the results shown in upper case letters or lower case letters. Upper case a save. And we will put this in a lower case. A save. There you go. Now then, the other one that I know of is Roman numerals. Likewise, upper case or lower case. That's the upper case, I for the Roman numerals in upper case lower case I for the lower case Roman numerals. And again, I want to mention just enclosing here that all these stylings that I've been pointing out here should in fact be done in the C. S. S and not here within the HTML code. But I did want to point out that you will see this done from time to time, but I would suggest doing it in the CSS, even though it does work just fine within the HTML. And that's gonna bring to a close this video on ordered list in your HTML Web page. Thanks for watching and you have a great day 14. HTML Unordered Lists: this video will show you how to set up in a Norden lis in your HTML document. Now, first up, what is an A Norden list? Well, a Norden list is a list of items without a definite order. A good example of a Norden list is a batch of bullet points on a Web page describing the benefits of using the X y Z thing logic. For example, if that batch of bullet points were say, the top six reasons, you should own the X y Z thingamajig, then it would be an ordered list because of the definite order of that list. But since this video is on crafting and a Norden list, let's go ahead and check out how to do that in our comodo editor. And of course, you can do this in any editor. I'm just using comodo in this demonstration. I've already crafted a little bit of our content area here, along with the basics of our HTML five Web page. I've got my H two heading right here. That's what we're looking at here in the demo area, and an A Norden list starts off with the U L opening tag opening bracket you l and are closing bracket, and the way Comodo was set up here, it automatically inserts the closing bracket. Sometimes that's a bit of a pain, but it'll work for now. I hit my enter key so that I could get a little working space here and for the items in our A Norden list. We need to have an opening and closing list item tag, and that's the opening bracket. And as you can see, Kimoto automatically pulls up the L. I tag. And if I wanted to use that, I just hit my return or in Turkey and Boom, it's just like that. It's that I just need to close it out, and Comodo automatically puts in the closing list item tag. And here I put my first list item and you just go on and on and on. And let's go ahead and put in another one here just so I can show you what it looks like. We render this in our demo area opening list item tag. Okay, lets go and save this. And there it is, kind of in dense it from the rest of the content, and it puts his little round bullet points. Now there are some additional styling attributes can add, but in HTML, 4.1 Those in line styling attributes were deprecate ID, and they're no longer supported in HTML five. So there's no use and even going over that in this video. But I would suggest any styling that's going to take place in the HTML area be done in a CSS or cascading style sheets anyway. So if you want to add different colors or different shapes, or maybe even images instead of the default black, round up, then do so using cascading style sheets Or the C s s gonna pace this in here to save some time. And basically what I've done is instead of this next line being another list item, I want ahead and added another. A Norden list opening tag, a few list items, opening and closing tags and the closing on ordered list tag and then a couple of additional list items for the original on ordered lists. Let's go and take a look at this and you see, not only is that second a Norden less indebted further, but it also has a different looking bullet. It's going take a look at this and the chrome browser reality here, stay. Look at this and one more browser. Let's try the Safari browser, but that's it. That's an example of how to set up an a Nordling list and how you can even add additional a nordle ist inside of theon ordered list. And that's the end of this video on how to craft You're a Norden lists for your HTML Web page. Thanks for watching and you have a great day. 15. HTML hr Tag: this video will introduce you to the HR tag, also known as the horizontal Rule tag and how you can still style it, even in HTML five. The HR tag or horizontal rule tag is used when you want to separate sections of your Web page with just a simple straight line going from one side of the page to the other. The tag itself is one of those single or empty tags that has the opening and closing all in one tag out in older versions of hte email, you could add some style to the line by making it a certain width or height and even color and even specify if it were a solid or a dotted line. But since late HTML four and now in HTML five, that method is no longer supported. Now it is styled in the cascading style sheets and not directly within the HR tag itself. Let me show you what I'm talking about opening up my editor here, and this is the Comodo editor, and I've already got the line installed right here, and this is the tag right here. Now, technically speaking, if you're using in X html page, which we're not. This is an HTML five, as shown in the declaration here. Then this would have to be shown with a space and then the forward slash either way will work. But I'm gonna go this way and this is how it's demonstrated. Now, how this is actually being shown or interpreted through the browsers is this is a transparent line with a border around it. But that transparent center is so small that the border looks to be solid from top to bottom. So let me demonstrate how that actually is by adding some style up here between the opening and closing style tack which is located between the opening and closing head tag, we add the selector hr and you see how Comodo just automatically pops it up here. I could just hit the enter key and we're good now. Then I want to add a an opening curly bracket and then comodo automatically adds the second or closing curly bracket. I'm hit my enter key, so I got some room to add some stuff. So what I want to do is I want to make the border none that I'm gonna add a color to the background, and I'm gonna make the height of the center part even greater so you can see that. Actually, let me add the height first. That way you can see what I'm talking about this far. Is it being transparent? You say five pixels. Now, you can see a little bit better if I make this 15 pricey. Even better. There you go. So you see here the HR itself is this transparent stuff in the middle and it, actually by default, has this border around it. Let's go and get rid of that border. Put the separator there. That's the cynical. Um, it might return Key border, colon none. The separator or the semi colon hit the return key because without the border, you're not gonna see anything good is there, But it's the same color. It's transparent. So it's the same colors of backgrounds. We need to add some color to that background Handel score thread That will be easy to see. And there you go. And you can do so much more if you want this to be Grady. If you could do that with just the styling, if you want this to be dotted or dashed you could do that with the styling, and if you want it to be a certain with, you could do that as well. Se 65% of the A good number or you could use pixels, but I would rather go with percentage. That we could be adjusted according to the window, is being viewed in whether it's a smartphone or tablet or desktop. Well, there you go. And that's how you can style your HR tag or otherwise known as the horizontal rule that's going to bring us to the end of this video. Thanks for watching and you have a great day. 16. HTML Validation: this video is going to cover the validation process of your HTML documents. Validation basically looks for HTML airs and non standard coding. Most browsers today are pretty forgiving, but some might display your nonstandard coated web page all kind of funky. So what I'm gonna do here is get this html code and this is an HTML five document going. Copy this and we're gonna go over to the HTML validator site. That's validator dot w three dot org. And there's three different ways in which we can validate our web page. That is, by the U. R I, which is actually of the three the best way to do it. And that being that your web page is already online on a server somewhere, and you simply copy the U. R l or the address pasted in here, click on check. So we go to validate by upload. If you don't have the file online, just choose the file on your computer uploaded validate this way, and you can just do it directly here. And this is what I'm gonna do here. Just do it directly on the website itself. So when I take that code that I just copied into my clipboard pace right in here and Klingon check and you get green across the board that we're going to go. Even though this does say this document was successfully checked and you got the green line here, which means it works. It passed it. Does he view the two warnings? Now, if the same exact file were uploaded to a server in these two warnings would not be there. That's the only difference again. Works perfectly as it is. But you do get these little bitty warnings that you would not be getting if it were uploaded and going through a server. Okay, Now let me show you how this works by taking one little item out of this code to make it not pass, just to give you an idea as to what it looks like. Okay, so let's go ahead and refresh this. Come back here. Let me just go ahead and remove this one little closing tag on this paragraph and let's go and just copy this. That's one of the things I like about the Comodo editor is that if there is a mistake somewhere, it kind of gives you a bit of a visual idea that, Hey, there's something wrong with this picture here. Fix this. Let's go ahead and copy this into my clipboard. Going back to the validator dot w three dot org's site. Go into validate by direct input. Pace that right in here. Click on check Member. There is on that one little thing that I did wrong. Intentionally boom air is finally gonna get this red dealing up here. And this has 28 airs. What? There is only one thing that I did wrong on your Web page. When you get it validated, it may say, you know, 500 different errors, but there may only be two or three items two or three small items that once fixed, eliminate a majority if not all of those airs and a majority of not all of those warnings. So it's come on down here and see what they have to say, because they do. They don't leave it for you to guess. They do tell you what to look for. As far as fixing the problem. Boom. The very 1st 1 line 19th. As matter of fact, if you look through here, every one of these are gonna be online. 19. Come on back to our editor here. And guess what's online? 19. Uh, so by taking out that one little bitty character, it affects all these other items below it, as shown here with all these different heirs now than where we adhere, Right? Here we go. Of course, there's no numbers in here that would make this even better. Is that if this were to have the line numbers, that'd be pretty cool. Let's go and change that re validate. And there we go again. We saw the two warnings, but again, that's because this was not uploaded through the your eye. And that's going to bring us to the end of this video on validating your HTML markup. Thanks for watching and you have a great day.