The Ultimate HTML Developer - Learn to Code with HTML

1. Introduction: Hello and welcome to the ultimate HTML developer course. My name is Caleb telling, and I'm going to be your instructor throughout this course. Fortunately for you, this course is just a few hours. So you don't have to hear my voice for too long. I'm going to quickly go over what this course is a belt. What you're going to get in it, how it works and how to get the most out of it. And I'm going to give you a little information about who I am. First and foremost again. My name is Caleb Tallinn. I am a senior full stack Web developer. Was born in 1989 and at the age of 10. In 1999 I made my first website by time. I was 14. I was doing freelance work for people. The next nine years I spent doing mainly freelance work. If I saw service on the Internet that I liked that I wanted to use. But I thought I could do better. I couldn't make it better. It could be more valuable from or people I wouldn't recreated it. I could do all of that before I graduated high school. Not only did I make a decent amount of funny, but I created well over 1000 websites in my time. Shortly after that, I thought maybe I would step up my game and I started a company. That company was about a year and 1/2 old when I sold it. Since then, I've stepped down as the CEO, and I have taken a more of a C T o role chief technology officer. That means I'm in charge of the technology. The servers, that development team, the user experience, the user interface, everything that code touches. I have a little bit to do with the company. Let it work for in 2015 between April and December, made almost $900,000. I was a chief technology officer of that company, and the primary service was the software that we created for people. Now that's a little bit about me. Let's talk about this course. This course, as you know, is split up into two primary modules. There's the basics module, which eases you into HTML, gets you familiar with it and some of the concepts behind it. And then there's more Advanced age trail. That's module number two, where you will run into more advanced pieces of HTML, including a lot of HTML five and X html, and you'll learn about all of that in this course. At the end of each module is a quiz. The first module quiz is about 70 questions, and if we end up adding more videos to the first module, there will be more questions in the first module. Quiz. Thesis Module has a much more extensive quizzes about 100 20 questions, and each quiz only goes over the current module. So in total, there's almost 200 questions that you're going to be tested on at the end of almost every video. There's also a task. That task is going to either be something very straightforward, like right out the elements, a little practice with the attributes, so on and so on, or the task might be create entire page, create entire form, submit the form, learned the theory behind it, and that all depends on what the video is about and what the prior videos were about. Now, to get the most out of this course, you're going to want to watch the video pay real close attention to what's going on. Possibly take notes if you're into taking notes, I would highly suggest taking notes and do the task at the end of every video. Even if you're familiar with it, just do the task A little more. Practice never hurt anybody. The tasks are usually quite short, so they won't take you very long if you already familiar with it. Now. One thing you may have noticed about this particular course that you haven't seen in a lot of other courses is this is purely HTML, where a lot of other courses are HTML and CSS or HTML, CSS and JavaScript and just too much. This is a highly specialized course, and by the end of this course you will be a professional. When it comes to writing HTML, you won't be mediocre. You won't be acceptable or all right, you will be a professional when it comes to writing HTML. In my opinion, you'll get the most of this course by going through each video one by one, doing the task, doing the homework, doing your quizzes and just practicing. As you've probably guessed, this course is quite compact. There's no magic fluff. There's not a lot of dead silence. It gets straight to the point. The idea behind making such a compact course is that the less time you spend watching videos, the more time you can spend Actually practicing what you've learned with that said, I want to send out a huge welcome to the ultimate HTML Developer course and let's turn you into a professional developer. 2. What is HTML?: What is HTML? HTML stands for hypertext markup language. It is the structure behind every single Web page that you've ever been on, and it's responsible for the paragraphs, the videos, the images, the forints. The bold italics underline all of that. It is responsible for every part that you see on a page. Now it has nothing to do with the actual styling, but more of the template ing. So if you see a column to the left of the page of the right of the page, maybe the Arnold columns. But there's a navigation bar at the top of the page, that's all. HTML. It is the skeleton of every single Web page. 3. Editors: to write HTML and you need what's called an editor and HTML editor can be a very basic programs, such as No pad for the PC or text at it for the Mac. But there are other programs out there such a sublime text, which you can see here. Go to sublime tex dot com on, and you can get a copy of that. Alternatively, you can use no pad plus plus, which is just no pad dash plus dash plus dot org's. But in the end, you don't need to write any HTML with an advanced editor, you can simply use a basic text editor, and that will work perfectly fine. Here's an example of no pad plus plus and we're gonna write some HTML right now. We're gonna skip over a lot of the important parts of HTML, and I'm gonna show you a quick demonstration of what HTML looks like. So here's a paragraph and you'll notice when I type slash p and we'll talk about elements in a future lesson. I'm just giving you a quick demonstration here. No pad plus plus tries to fill me in. A good editor will try to fill you and their editors out there that will help you out drastically when it comes to filling in elements, closing element tags for you and just helping you program your website even faster. So for this it's telling me that it's a paragraph, so I just closed the tag. Every editor is a little bit different. They all have their pros and their cons, and ultimately it's up to you which editor you want to use. But why were writing HTML? You don't need a very fancy editor. You just need something basic that can write a straight text file like this and save it as a dot html. So I'm going to save us just as page one dot html, the bottom mrs dot txt click save. And now I can open this up in my browser. It's now if I find where the file was saved, right click and open with Pick your choice of browser. Firefox Chrome Internet Explorer. I've also got operas Safari installed in here. If I use Google Chrome, then here's an example of how this will turn out, says Here's a paragraph and I'm just gonna copy this real quick. I re saved the file And if I refresh my page, here's a second paragraph. You know, if there's a significant line break, there's a difference between the two lines here. That's what a paragraph is, and we'll get more into paragraphs and all these different elements of what all of this actually means in the future. But right now, it's wanted to show you how easy you can write HTML with literally any editor. So for now, what I would like you to do is find an editor that you might like, whether it's sublime tax, no pad plus plus text added or even if you just want to use no pad on Microsoft just by itself. Your task for this video is to find an editor that you feel like you can work with again. This example. I just used no pad plus plus, it's very basic, does the job, but don't feel like you have to use anything that I'm using right now. 4. Browsers: a browser is how you view the Internet is how you view websites, Web pages tell you, Explore Facebook and Google. It's probably how you're viewing this video right now, and there are dozens, if not hundreds, of different browsers out there. But really, there are six primary browsers they're going from left to right. We have Microsoft Internet Explorer, Microsoft new version of Internet Explorer called Edge. Then we have Mozilla Firefox, Google Chrome, Apple Safari and opera. Now, by far the most popular browser on the Internet is Google Chrome. Second place tends to be fired. Fox Third place tends to be safari, then Internet Explorer. An edge in opera are you know those percentages are so low? It doesn't really matter at this point in time Now, Edge might be more popular in the future. It's relatively new, came out with Windows 10 but today about half of everybody in the world uses Google Chrome . Now, as a Web developer, the browser does matter. Each browser manages HTML, CSS and JavaScript just a little bit differently. Each one has their own set of rules, which they want to comply with, and there tends to be a standard behind them, but the standards are a little bit older. For example, if you wanted to make something bold, you'd use the same HTML bold tag and all the browsers, because that's an older element. But as of right now, if you wanted to create a canvas and that's an HTML five element which will talk about in the future, old versions of these browsers will not handle that. So you always want to have your browser updated. As a Web developer, you will guaranteed run into a problem where one of your users or one of your paying customers you cannot use your website because something's not working. Chances are JavaScript is turned off or they're using Internet Explorer six instead of Microsoft Edge or Internet Explorer. Whatever the latest version is, perhaps they're using a very old laptop, and it's running an old version of safari. Well, the difference between, for example, Google Chrome one and Google Chrome 42 is significant, and as technology evolves, the browser evolves as well. And as the browser evolves, that means we have access to better functions, better features, better animations and Morrell. A mints become standardized, so just note that moving forward. Eventually this problem will happen to you. It happens to every single one of us and that the browser that someone is using plays an important role. Most developers dislike building for Internet Explorer because Internet Explorer likes to play with different rules than everybody else, whereas everybody else kind of gets along to some degree. So when you're building a website, whether using just HTML or a series of different languages, you're going to want to test out your pages on all the different browsers that you can shoot for six out of six browsers. Test your Web site in Internet Explorer, Microsoft Edge, Mozilla Firefox, Google Chrome Safari as well as opera and see if it works the way that you wanted to. Every now and then, you'll stumble on particular element that doesn't work the way that's supposed to, and that becomes a big problem. Then you'll have to work around that if you build a site or service or an application, and it works on all six of these browsers, chances are that when someone comes up to you and says, Hey, your site doesn't work for me, it's probably because of using an old version off their browser or they have JavaScript turned off. We'll talk more about JavaScript in the future, but right now we're just gonna stick with HTML and to view any HTML. We need one of these six browsers. Now I prefer chrome. Many people prefer Firefox. A lot of Mac users will stick with safari. Those tend to be the Big Three in that order. Your task for this video is to download and install all six of these browsers. No, depending on your computer. All 6 may not be available to you, so try to get as many as you can as a bare minimum. Try to get Internet Explorer, Firefox, Chrome Safari and opera. If you can't get Microsoft Edge because you're on an older Mac or an older window system, that's fine. But download and install as many as you can 5. Elements: H E mail pages are made up of elements elements or sometimes also referred to as a tag where they have a starting tag in an ending tag. Unusually some sort of content in between the two tags. As a live example, we're going to write our first tag here, make some extra space here for us. I'm going to show you how these work. So we have HTML tag, and that goes between the less than and greater than symbols some content in between. And then you close the HTML tag with a less than an a slash. Do you notice how these match? But this one starts with the less than tag, and this one starts with less than slash tax. That means it's closing it now. This is an element where there can be content id between it. A great example of this would be the paragraph element, the bold elements, the italic element. All of these have some sort of content in between it. So if we wanted to italicize something, we would write opening Eyetech with a closing I tag. Now we have a different type of element as well, and it is a self closing element. These elements are a little bit different, but sort of along the same lines. There are some elements that don't have content in them because they use what are called attributes and we'll cover attributes in the very near future. One of these examples would be the image elements. So for this one, we would have I m g, which is image SRC source. We put website dot com slash imaged j peg in there and we close it like that. So there is no slash image tag. So instead we have attacked. That closes itself because you don't put any content inside of an image except for the image no, further this we could do what's called nesting. We can put HTML elements inside of other HTML elements and this will create a form of hierarchy. The easiest way to maintain your hierarchy is through indentation through indentation. You're going to find everything is very easy to understand. So here, let's do an example. We're gonna open a paragraph. Hey, I'm a paragraph, and in this paragraph we're going to make something bold and then I close paragraph tag. So here you see, I open the paragraph close a paragraph inside of it. I have regular text. I also have another HTML element to make this bold, So this will display a paragraph as well. A za Bolden area. Don't forget that it needs to be closed, though it's very important that if you have an opening take, you have a closing tag. In the case of the image, we have the opening tag, the closing take just happen to be part of the original opening tag as well. So it's it's all one element. Where is here and here? There's an opening and closing tag. The last thing to note here is that all these tags with lower case you do not have to use lower case HTML. But stricter document types like X html require lower case HTML tags, and that's a standardisation for everybody Now, whether it's lower case or up, case really doesn't matter too much in this day and age. However, to stick with the standard is usually the best approach, especially, we're going to work with another developer at some point. Your life standardization is also help you with search engines. So when Google comes across your site and looks for certain information, Google is going to see the HTML like what we have written here. Your task for this video is to open up your favor, editor, where there's no pad plus, plus sublime no pad tax at whatever that may be. And right, just a couple tags. We went over the paragraph bold and italic tags in this video. So just practice writing those. Open your paragraph tag. Put some content in between it a sentence or two and then close it. Try nesting it as well. Open a paragraph. Write a sentence, right, a partial sentence. Make one of the letters bold, maybe make a full sentence bolt. Close that bolt, a close, that paragraph tag and then I want you to save that file and open it up in your browser, and you can see what it looks like from there. 6. Hello World: when we start talking about programming or coding websites, this tends to be the first lesson, and the lesson is usually called Hello World, and we're going to create a first hello world page right now in order to create our first HTML page. There are a few things that we have to do, and we're not going to get into too many terribly advanced things right now. We just want to create a basic HTML page template. So our file needs to tell any browser that this is an HTML pitch. Not that this is a text page or PDF that it is an HTML page. First thing we do is we open our page with the HTML tag. I'm going to make some space, and I'm going to close it at the very end there. Two sections you have your head on. I'm going to leave some space here and I'm going to close that header tag. And then there is the body. You can think of it like this. The head is where the knowledge about the page goes. So your page title year made a descriptions. All that stuff will cover all of this. Your titles your descriptions. Any images for social sharing, such as on Facebook's open graph? We'll cover all over this little bit later. But what we want right now is we want to create Ah, hello, World page. So the first thing we're going to write is Hello, world. Now you can save this as hello world dot html Save it wherever you saved a to go and find that file right Click on and open with whichever browser you want open it with. I'm going to open it with Google Chrome and as you can see, is this Hello world. That's all there is to it. Once you have got to the step, you have officially created your first HTML page. Your task for this video is to create the template that I've created for you in this video . Essentially, just copy what I have given you. You're going to write out your HTML tag. You're going close it, you're going to leave some space in there and ness a head and body tag inside of it. And inside that body take, you want to write Hello world. It should look exactly the same as my example 7. Page Titles: titling your HTML pages as simple as using one particular HTML element. And that is, of course, the title element in the last video. We went over creating an HTML template where we nest all over HTML inside of our HTML tag and we left our head element empty. This time we're not going to do that. We're going to create a title, and the title of this page is going to be hello world title. This way we can see what the title actually is. Before I save this file, I'm going to show you what it looks like before and after the title tag is added. This is before we have the title tag says hello world dot html. It's the name of the file that's not usually what we want. In fact, almost every single scenario that is not what we want. Instead, we want to have an actual title in here, so I'm going to go ahead and save this and then refresh this page and it says hello world title at the top, where the content of the page stays the same. The title changed changes to test title. I'm going to show you that it does change once more as soon as I press refresh and that is how you change the title of your page. Your task for this video is to create a hello world document and add the title to it. Once you've added your title to your title can be called whatever you like, open that file up in your browser and notice if the title is actually changed. If the title has changed, you have completed the task. 8. Doctype: the HTML DOC type is what technically tells the browser that this is an HTML file. Before we simply said that this element here tells us that the page is going to be HTML, and most browsers can figure that out. However, in some cases, that is not sufficient. Instead, what we want to dio is we want to add one element above it at the very beginning, called the DOC type. Now it starts with an exclamation mark, as you can see right here. Space HTML. This is the HTML five document type, and this is the one exception to that rule where all of your HTML should be lower case. This one should be upper case most browsers. That doesn't matter all that much, but again, it's a standardization problem. We want to make sure that all pages are the same. If more pages can be read by more browsers the exact same way, then your website is going to be viewable tomb or people the exact same way across the entire planet. Now, with the doc type HTML in there. Remember, that's the HTML five doc type. That's the new aged HTML Doc type that we want to use every single time that technically tells the browser that this isn't html page and inside the HTML element is where HTML is going to go. I was going to make a little space near for us to work with in the future. That was a general rule. All your HTML should be inside this element here. Your task for this video is to add in html five doc type to your existing hello world page . If you don't have a hello world page already, go ahead and create one and make sure that it has the less than symbol plus an exclamation mark. That exclamation mark is absolutely vital. 9. Attributes: html attributes, or just that they attribute to a particular element. Every HTML tag or every HTML element has different attributes. That it can access an attributes is basically a way to provide additional information about a certain element. They'll always be specified in the start tag. Or, if there's ah, no start and end tag, it's just one individual tag. It will be found in there as well, and they come in name value pairs. The 1st 1 we want to look at is the language attributes, and this one belongs with the HTML. So when we add Lang is equal to and dash us, we're saying that the language that's the attributes is equal to English. Dash us. That's American English. Now that one, for the most part, is really only used on the HTML element. But there are other available attributes for very is different elements, and there's some global attributes as well. Ah, global attributes is an attribute that you can use on pretty much any tag. So if we just add a paragraph in here, separate some content and we're gonna add one more paragraph in here, this has a title. Now this paragraph is going to have an attribute called Title is equal to a sample title. If we save this and we open this up in her browser here we see it looks like basically just hello World in another paragraph. But the title shows up when we put her mouse over, says a sample title, and you notice that a lot of popular websites such as Facebook still use this. There are many, many attributes, and not all of them are applicable to every element. For example, when we add an image, the image comes with a with and height attributes. We can add a global title attribute and an altar attributes the salt is the alternative text that will show up if the image is not available and the source, which is limited to the image or video in some cases, will go in here. We close that off and it looks just like that. Now when we're talking about size is a width could be 250 by 250 these will be pixels. But default eyebrows is going to look for pixels. The title could be any title. It could be all return itiveness title for missing picture, and the source would be website dot com slash image dot j. Bag. Now with this, almost every attribute should be lower case. So what you see with with height title Ault source anything that goes inside off an open element should be lower. Case should always be lower case, and that goes with our elements standardisation as well. So all HTML elements and attributes should be lower case all the time. Now, when we're looking at attributes because they come in pairs, as you can see with the image with is equal to and then it has quotation marks. Now that works, or we can you single quotes either of them work. But what does not work is with is equal to 2 50 Most browsers know how to figure this out, but if you're using, Title is equal to this is a sample title, and let's wrap element here, introduce you to the span element. As you can see, No pad plus plus does not know what's going on here. It doesn't realize that this is part of the attributes, because their spaces in their spaces are the separators between attributes. So if we wrapped us in quotations and double quotations air, typically the html standard. But again, both of them are available to you to use at any time. Then you'll notice that this is highlighted blue by no pet plus plus automatically, and it should work out perfectly fine at that in there. For example, we're going to move this image because there is no image at that location. As of right now, when you get further long after HTML, you're going to start looking at another language called CSS cascading style sheets. Now we're not going to cover any styling right now, but to give you an idea of what it would look like, we have a couple more global attributes that we can use class being one of them again. This is for CSS ideas, another one and style where we can add CSS directly into an attribute. No cover classes, ideas and styles later, but right now all you need to know is that an attribute provides additional information to an element. So your task for this video is to add the title attribute to another paragraph, so first create a new paragraph. Remember, that's using the P tag and then second, add the title attribute to the paragraph element like So go ahead and do that Once has done . Open up this page in your browser. Hover your mouse over your text. Remember, we did that with this little section here. And when we put our most over that little pop up shows of the little miniature in the page , display shows up with another title. So at the title, attribute to a new paragraph with sentences side of it. Put your mouse over it. If you see it, you were done. 10. Headers: HTML. Headers are the way that we create important titles or headlines and HTML were able to use the H one to H six headers and in this video we're going to quickly go over each one. Let's look at the most important header tag and that's the H one element. This is the largest header available. So when I open this page, this is what we see. This is the largest header available. Now let's look at the difference between H one and in h two. This one's going to say I'm a secondary header. You notice there's quite the difference and the same thing can apply with an H three and this continues all the way down to H six, remember? So here we have 81 h two h three. We skipped four and five and in h six, so you can see the H six is quite small. Now let's look at a regular paragraph so you can see that the H six headers actually smaller than the regular paragraph text, and that's quite normal for most browsers to display it that way. No headers are very important because they specify certain pieces of content on your page. Your H one is probably the most important to search engine search engines going to find that h one and it's going to It's going to look at it and read it, analyze it, figure out what it's about and realize that Hey, yes, this is about the content that's on this page, and it is very relevant. We're going to use this information. The search engine optimization is an entirely different subject, but my advice is to never use more than one h one tag on a page unless you absolutely have to. The H one element should be used for the page title. If you have a massive article or a journal where a blogger possibly used H one just for the title of that block, Article two separate your content, possibly using H two and H three. This helps their Jenn Jones understand what the information is. Ah, what the information below it is about. And most importantly, you just don't want a lot of text. This large on your page doesn't look very nice. So your task for this video is to create a page and create 81 h two h three h four h five and H six elements. Put them on a page and then open that page up in your browser and you will see something along the lines of this. I skipped over H foreign H five. You will have those so you can see the difference is once you've opened your page and you can very clearly see the differences between the header elements, then you are finished. 11. Line Breaks: html is not space sensitive, and that becomes a problem when you want to create new lines in your content. So I'm going to show you a quick example of how HTML is not space sensitive. And then we're going to create new lines. So first, this is a paragraph with no spaces and a second line in here. I'm going to save that. And when I opened it up in my browser, it's all on the same line. What I can do is I can right clicking, go to view source and the source shows up the way I wrote it in my editor, however, I wanted to lines not one. And it doesn't just happen with new lines, either. It happens with too many spaces. Here's an example. Now, if I refresh the page, all those spaces just turned into one space. And if I look at the source code, the source code hasn't changes the exact same. That's the way the browser interprets the information that you're giving it. So when you give it more than one space like what you see here, the browser automatically thinks OK show just one space now to create a new line. We use the B R element. This is one of those elements that closes on itself, so does not need an opening or closing tag, and that's because there's no content to put inside of it. So if you put a BR here, but we are here where we want another new line, save that. So we want a line break out the end of this period. We want a line break at the end of this period. We want another line break, but nothing on that line. And then we want our sentence. That has way too many spaces in it. Save that and out shows up the way that we want to the exception off the spaces. Now let's add one more line break there. I'm going to leave some space for us here, and I want more than one space between this and this. Those pipes, if I show you real quick and highlighted right highly, that pipe is a space, and then you highlight the other pipe, this basic rip before it. But if I add a lot of spaces, nothing happens. I'm refreshing a page. Nothing is happening so instead what I want to Dio, this is a little more advanced HTML. We want the and sign and B S P semi colon. If you save that, put a space on either side of it that counts as a space character. That character then, is interpreted the same way as any other character. An alphabet is interpreted. So when I refresh you see, I have three spaces in there. We're gonna look at the source code. I have one space here. I have the space that we told it to make and we have one space after that. Now that's a little bonus to this video right now. That's not important to know. So you're test for this video is to not add too many spaces. Your task is simply too. Create a new paragraph, add new lines and verify you did it correctly. 12. Bold: to make your text bold, you simply add the B element. So when you create a new paragraph here and inside this paragraph, I am going to be bold. Now I want to say I am going to be bold, should be bolted. That's all we do is add the the element slash B to close the tag, save it open in your browser. And now it says inside this paragraph, I'm going to be bold, and this last part is bold. It just the way we said it was supposed to be. Your task is to create a new paragraph and inside that, write a sentence and make half of it bold. Test your page. If half of it turns out to be bold, then you've properly added emphasis to your sentence. 13. Italics: adding italics to your page adds a layer of emphasis to whatever you're tryingto explain. For example, the word really is often emphasized in text and in language. So when we say this is really easy, well, we could capitalize all the letters or make those lower case and add italics. Now, if we preview this, you know, is that really is emphasized and all the other Texas normal. Your task for this video is to open and close paragraph elements like I just did right. Any old sentence that you like. It doesn't even have to make sense. Emphasize by adding italics to certain words. Open the page in your browser. Verify your words are tell us eyes. Would you verify your words are italicized? You've successfully added emphasis to your sentence and you are finished. 14. Underline: Often you would like to add underlying steer words to add a special type of emphasis. It's important to understand that the underlying element is not only deprecate ID for HTML five. It has a specific purpose for HTML five now, which is not technically to underline or add emphasis. The element that we're about to learn is not meant for emphasis. Bold is usually used for headlines, headers, headings. Italics is usually used for emphasis, and in HTML five, the U element for underlying has been deprecate. ID no longer meant for adding emphasis. Instead, the U element is meant for representing words that are drastically different from normal text. For example, for example, misspelled words. If you just want to add an underlying to a word and it doesn't actually have any particular meaning, you can use CSS for that. No, we're not learning about CSS just yet, but it is still vital that you understand what the underlying element is. So to add an underline just at you when we say that in view it, you is underlined. Now, as of HTML five, we're not supposed to be using it this way. I simply made this as an example, the proper way would be if the word you was misspelled. That underline is now adding an emphasis showing that this word does not fit in. That is the proper way to use an HTML five. So your task is Create a new paragraph element. Write a sentence ad underlined Open it in your browser. Verify there are underlines. 15. Comments: a comment in any programming language, including HTML is a section of code that will not show up or not be executed. In this case, it's just not going to show up, but it's still going to show up in her source code to start an HTML comment. It's less than exclamation mark, dash, dash and everything in Here is a comment, and, as you can see no pad plus plus graze this area. It automatically now to close that comment. Use Dash Dash greater than as an example. Here is my text. I'm going to add another comment in here, and I'm going to display this page. So all that shows up is Here's my tax. Now, if I right click and go to view page source, my comments still show up. So if you want to hide anything secret and there, this is not the place to do it. But if you want to write little notes for yourself, this is the perfect way to do it, so you can also use them as it's my Footer. As little notes, we could say Footer is below this and recent linguist group some of the stuff together and in here. I want to add a link, and this is just going to go to Google for no apparent reason. Now when I show the page, the Google link shows up. And if I wanted to comment that out so it doesn't actually work, it doesn't show up. Comments work on multiple lines as long as you open it and close it properly. So anything inside a comment is not rendered into your browser. Your task is to write a little bit of HTML, use the paragraph element and then commented, output a comment above it, put a comment below it and then comment the whole thing out and get a feel of how these comments work. If you look at the page source of many other Web pages, you're you're going to find that comments are quite common and they're not always displayed in a nice format such as this or opening and closing tag. Ending up in the same column right along here, right, a little HTML and then commented out. Load that each female up in your browser And if whatever you commented out does not show up , you have successfully created a comment 16. Links: links are found on pretty much every Web page on the Internet. What we call a link we actually mean to call a hyper link. A hyperlink links one page to another page, and that's how you move from one document to another document. So let's look at creating a link that goes to any old Web page for this example. We're going to link straight to Google. So let's say this link goes to Google. Now we save and display this page. Nothing out of the ordinary is going to show up. And as you can see, the link here does not show up. So what we need to do is add the A element. The A element is our link. It's our hyperlink and a link from one page to another. We need a very specific attributes. That's attributes called H R E. F. Is the attribute that tells you where to direct the user when they click on it. So this one is going to go to google dot com. When you refresh the page, all of a sudden link shows up, I can click that link, and it brings me to google dot com. I'm gonna go back and we have another attributes that we need to look at, and that's called the target attributes. This one's a little bit different than most attributes because it starts with an underlying You're the value starts with an underlying The values that are available are underscore blank underscore Parent underscore Self and underscore Top. Now we only want to define one of these, and if we wanted to open up a new window, we'd use Underscore Blank. So target blank. If I save an open upper page again, nothing is going to look different. However, when I click on this link that brings a new window underscore Self is the default. I mean, it's going open up in its own window. You don't have to specify this if you want the new page to load in particular window that you're currently in setting target is equal To Underscore Self is the same as no target attribute at all. How to quickly go over the other ones underscore. Parents will open up links in the document frame if there is a frame and top will open up the document in the full body. Off the window. Most people stick to self or parent or blank for a brand new window. So for this one, we're going to say Google needs to open up in a new window, and your task for this video is to create a link using the A element. Make that link open with a target attributes of blank. That means going open up a new window saving. Open this file in your browser. Click your link. Once you've opened this page in your browser, click the link. You've completed this video. 17. Internal Links: an internal link is how you linked to another section inside the same page, whereas other links from one page to another page one site to another site. This links directly to content that is still on that same page, essentially, to lets you scroll down or scroll back up to wherever that content. Maybe I'm going to provide an example here says Click this link. And instead of adding a website or a Web page or um, you know ah, file like index dot html, we're going to add number sign, commonly known as a hashtag. Now, Anderson, to call this link one and I'm going to create. So I'm going to create just some empty space here, and this is going to allow us to scroll down her page for quite a while that a preview this you can see that my scroll bar showed up. I have the link at the very top, and if I scroll down, I'm still scrolling at the very bottom, says more content here. Now the link at the top. When I click it, nothing happens. But in the u. R. L Bar, it has our co dot html file. That's the file that I'm currently writing right now that has the number side of hash tag pound sign, which means that this is trying to link to a certain piece of content in this page and is trying to find the link one piece. When I click it, nothing happens. So what we do is we create another link. But this time we use the name attribute and we don't necessarily need to have any content inside of it. But this one is going to be called Link one. So when I click, this highlights up here as well demonstrates that link one up here is the same as link down there. The internal link needs toe Have your hashtag in front of it on the link where it's going to go to does not have that. It also does not have the eight ref. It has nothing else in it. In fact, you won't even be able to see it. So when we go back to our page and I refresh and now I click, this link is going to scroll all the way down. Now it's trying toe. Bring this to the very top of the page and a good way to demonstrate that is simply take mawr extra white space throat at the bottom of where content is. Save it. I'm going to refresh the page when I click this link just once more, and it brings me to the more content area. Now I can scroll up and down. It's all on the same page, but we have successfully created a link that does not go off of this page and said it links to content inside of this page. So your task for this video is to create an internal link, link it to another hyperlink inside the same document. Like what I did. Open the document in your browser, click your link and make sure that it worked. 18. Images: images are a huge part of the Internet or Facebook feeds would be very boring. Without images, Pinterest would not exist, and Google images would not exist. If we did not have images all over the Internet. It's important that we understand how to create these images. First thing you need to know is the image tag starts with I M g shorthand for image looks like image. If you take out the A and E, it's also a self closing tag. It does not require slash image tag. It simply opens and closes itself on the same tag. Now it to define an image we use the S R. C stands for source, and that is where we link to our image. Now I'm just going to write in an image that I know off the top of my head, and I'm going to preview this. Now we have an image. This image is a PNG, which stands for portable network graphic, and that means it can have some transparent parts in it. So an image can be the doc gif jpeg, the other dodge a peg dot PNG and in some browsers dot spg for scalable vector graphic but the most common you will see typically the gift, the J Peg and the PNG. So now that we have this image loaded, we're gonna sign some other attributes. So let's say Border is one. Let's see what happens then. Now there's a border around it. We have the all tagged the alternative text to show up in the event that the image cannot show up. So let's say all to tag here so that we can see what it looks like. And I'm going to make sure that this image does not exist by adding some unnecessary tours of the end of it. And now, when I refresh, the page says, all tag here, that's the taxes. The broken image image shows up with the text that I have defined. It still has that border around it, but there's no image. If there is an image, the all text does not show up. We can also define the width and the height. So let's say the width. We want to make this 600 pixels along. So now that you notice, the image has scaled to be 600 pixels in with, but it also grew in height now, if you want to strict the height as well, all we have to do is specify the height to a different number. Let's say we only wanted height to be 50 pixels instead of whatever it currently is now. We don't want it to scale up the proper way. Now our image is 50 pixels tall and 600 pixels long. Now, if we wanted to scale the image based on width and height, it doesn't work for all browsers, but most moment, modern browsers except this these days. So if we said we want this picture to be 230 pixels Hall No, he knows that the pictures scaled back up to a normal scale at 50 more pixels, and we're going to notice that it's also going to grow in width, which it did. We can also add the title tag and we won't put her mouse over. It says title here. Just like what we wrote, remember, Title is one of those global attributes. We can use it on basically any element. Now I'm going to remove that border so it looks like this and I'm going to add a link gonna go to Google. I'm going to save that. We're going to view it, and now we can click on that image as well. As soon as I click on it, it brings us to Google. It's your task for this video is rather large. First thing I want you to do is to creating image. So use. Use the image element and add the source attributes. It does not matter what your images as long as it's a working image, you can hop onto Google images and just grab it. You are all from there. This is all for practice, so it doesn't matter what image. Grab second step. Haddon Ault attributes third at a border attributes at a custom with and height at a title . Then wrap a link around your image. Like what I have above saving open your document in your browser. Last up. Verify your image and link is working properly. 19. Block vs. Inline: in HTML. Every element can be categorized as either block or an in line element. In this video, we're going to look at the difference between a block element and an in line element. We're going to display some parts of HTML and possibly some CSS that we have not learned yet. And that's fine, because this video is simply about learning the difference between a block and an in line element. So Block element would be an element such as a DIV paragraph, any of the headings and so on. A block element takes up the entire width from left to right of the entire screen or the entire area that it's contained in. So, as an example, I'm gonna create a development, will learn about developments later. But this is a basic block element. I'm gonna add a border real quick. Nothing fancy, not properly written, and this is a lock element. Looking at this page, you can see that the border takes up the entire width of the page from left all the way to the right. Now, if we look at an in line element, that's something that only takes up the space that it really needs to. And a great example of that is the span element. So this is a block element because it goes all the way across the screen. It's parents Container is the body element, right? So if we look at the div element that we wrote its parent container, the one above it in the hierarchy is the body in the body takes up the whole page. Where is this? Ben is in line. That border wraps around that span. That's as much space as it possibly needs. I'm gonna add a spacer in there, and I'm going to create a couple nested developments. We're gonna make it a blue borders. We know where we're working with going to give it a little bit of padding. Don't worry about the CSS for the moment. Simply writing this so that you can see the difference between a block in an in line element. And we'll say the width of this one is 50% of its parent container. 50% do border. Let's take a look at what we have. So this takes up 50% of the page, has some padding in it, and this is the 50 cent blue border, right? So now if we had another Devyn here, this is 100%. So we specify that the first block element is only going to be a block element for that 50% 50% of the screen on that, The next block element inside of it is going to take up 100% of the width of its parent element at better ways. Actually, I just take away this padding that block elements. One of the two pixel solid black border that says 100% takes up 100% of the blue border area. So block element is going to take up as much space as it possibly can from left to right of your page, whereas an in line element will not. As you can see here, the in line element does not do that. It only takes up the bare minimum space that it has to. Now, why is this important? Well, because block elements often take up the entire page If you go to Facebook, the header at the very top that blue header where it has the logo in the search bar In your notifications, that parent element will be a block element because it takes up the entire space of the page. Now you can create columns inside, but these massive block elements, but it does require a little extra styling, and that's not something we're covering in this video. But as an example, I'm going to copy this over and drag us down and say another 50% blue and see what happens when I put one beside the other. If I clean this up so that we can see that these air two very distinct groups, this section here is our first blue border areas is 50% blue Border has our block element in line element, and remember, only took up 50% of the page and the other one takes up 50% of page, and it should, in theory, sit right beside it. But because they're both block elements, they're going to take up 100% of the page, even if the border does not expand to 100% of it. Another great example is if we create another span in here, the green border and my beside or below, because a span is an in line element and the DIV is a block element, the block elements going to take up 100% of the with from left to right, even if only 50% is being utilized. That means that other 50% just that plain white area that we saw. It's empty white space. Nothing is going to be used there and that the SPEN should sit below it. Now. This is our span and it is sitting below the entire area. Now I'm going to clean some of this up so we can take a look at this. A little cleaner, 50% blue border. Right again, it looks like we're only using 50% but it's really the block element is taking up 100% all the way from left to the right. It has claimed 100% of the with, but it's only using 50%. So that means you're span element is going to go below it because even though you can't see anything being used here, it is secretly being used. So that's the difference between a block and an in line element. Your task for this video is create a block element. You can play around with the development or the one that we're most familiar with so far, which would be the paragraph element. Either one works, and then I want you to create and in line element now in line elements could be the span element. Bold italic underline. These are just a few of the ones that we've covered so far, and I want you to see how they sit. Put the block element above the in line element and then try the reverse. Try putting the in line element above the block element and see how they said You don't have to get into the CSS, which is the style attribute here. You don't have to get into any of that as long as you can see where you're working. Third step. Open your document in your browser and the final step. Verify you've made a block and in line elements on the same page. 20. 170 html div: one of the most common elements in HTML is the DIV element, and it just looks like this. It requires an opening and a closing tag, and if you look at the source of basically any Web page 99.99% of the time, you will see at least one of these, if not dozens or possibly hundreds of these elements now with development has no special use. It's a blank block element. Damien's a development is going to take up as much with as its parent. Container will allow it. If you're unfamiliar with the difference between a block in an in line element, go back to the block first in line element video, and you learn the difference there in just a couple of minutes. The development is simply a dummy element. It has no special purpose, no special uses, and it's totally customizable your CSS. We're not covering CSS here, but it is important to know that the development will be found pretty much everywhere in the Internet. That HTML five has created many elements that are now standardized in order to reduce the amount of dibs and separate the information. For example, in html five. We've got the header element. We have the footer element and many, many, many more. Before html five, everything was a diff. It was a div. I d is equal to footer something along these lines now, while this is still acceptable, if you're writing a particular piece of code for a footer or header or a navigation, that's another good one you'll see quite often. Now you're going to want to use one of these and again there are many of these, but these were just the three that we're going to cover right now, but ultimately there's nothing wrong with using a development like this. It is preferred in HTML five that used one of these, but if you have to use a div, you have to use a div, and that's what it's there for. There's no task for this video. This is purely educational. To let you know that the DIV is a dummy element has no special purpose, no special uses, and it's completely customizable. Many other elements are customizable to the end degree, however, the DIV is basically a blank slate. It is a blank block element that you can do basically anything with now at this moment time . If you're just starting off with HTML, you can't do a whole lot with the Div except create blocks that go from the left to the right of your entire page. It's not that useful. But as you become a more skilled developer, the development is one of those elements that you write hundreds and hundreds of times, possibly hundreds of times, even in just a single day. 21. Lists: in HTML. There are two types of lists on ordered lists and ordered lists. The difference between the two is that an A Norden list usually uses bullet points or some sort of image to denote which order each list item is going in, and it doesn't really matter which one comes 1st 2nd 3rd 4th So on. So on. Whereas an ordered list usually has numbers or letters where an order list would start with 12345 a b c d e f g, it has some sort of order to it. Here's a live example First isn't a new ordered list. We start with you l a new ordered list and to create a list item is just that list item and to create another list item, all we do is create one more and we can keep doing this forever. And I'm just gonna add a title here. And let's take a look at what we've written. We have a Norden list. We've got a list item, a blank spot, another list item 1/3 item here, the list item that has nothing in it was actually a typo. That was my mistake. Well, Let's use this to our advantage to learn how this works. HTML needs an opening and a closing tag for most elements. The 1st 1 did not have a closing tag, So what it thought we were doing was this. Now, that does not mean you can skip over any closing elements. This is just the browser trying to correct what it thinks is correct, and it might not show up the same way in every browser. And it certainly isn't a standardization, and other developers are not going to like working with it. Do you always create that closing tag and we'll just remove that? And that's our a Nordeste where the bullets are the UN ordered part, it doesn't matter which one comes first. It's simply a list. Alternatively, we have ordered lists, and this starts with, as you probably guessed, a well. Now, a list item is the exact same thing in an ordered list. This item number one. Let's do number two number three and I'm not worrying about any extra space is in here. And to preview this for an ordered list, we have 123 and comes in order 12 and three you can also nest lists inside of each other. This is getting a little bit more advanced, but let's take a look at one ordered list with one a Nord item here and in the second list item. We're going to add an ordered list so it's a list inside of a list Order Number one. Order number two Again not worrying about any white spaces that's not relevant at this moment. I'm going to close this list item you can see when I click on to it. It highlights the opening and closing elements. Everything has an opening closing element here. To the exception of this one, close the UN ordered list and let's take a look at this. Now. This is a UFO within a well, so in order list with an ordered list. So as you can see, here we have first item is a Nord erred. The second item is on order, but it's also a list. We can add another one in here. 30 Well, item and we can see how this created an ordered list inside oven a Norden list, and we could do the vice versa, or we can do order inside, ordered or list or a no ordered inside of a new ordered. That's one more quick example. But let's do an ordered list inside of an ordered list, and this is an ordered list inside of an ordered list. I'm going to refresh my page, and here we have it. Instead of bullets, we have simply numbers. Then we've got numbers inside of number two as well. And again, just for clarity. It's called us the last point. There we go. So your task for this video is to first create a nordeste with at least three items, then create an ordered list with at least three items, then save and open that document in your browser, whatever browser you like and verify that your lists have showed up properly. So your list should have bullet points and numbers for your A Norden an ordered list, respectively, 22. Tables: tables are quite common in HTML, and you're going to eventually have to use them. Over the last decade or so, tables have been phased out in favor of elements that load faster, such as the development. However, there are some cases where a table is just the right solution for you, and it's important to understand all the different parts of a table. No, a table is fairly complex, and it consists of many different parts. The first thing you need to know is at the table. Element is just called table. Nothing fancy about that. And if you want to create your first row because tables work on rows and cells think of it like a spreadsheet, you're going to want to create a TR that's a table row. You open and close it just like you would with most HTML elements. But inside of this room, you also need a cell. No, this cell, you would think, would be t see table cell but is actually TD table data. This will be the first cell and let's create one more and in parentheses. I'm going to write data. So you know that a cell is actually a TD. Now, if we preview this, it doesn't really look like much. But if we add border to our table, just a one pixel border now we can see that their actual cells, the table, also takes a with We can say we want the width to be 100% and out 100% of the screen or its containing element going from left to right. And if we simply want to add another cell, we just add one more cell, and now we're going to have three columns. The table element also has self spacing and sell padding, but we will get the cell padding in just a moment. Cell spacing. If you take a look at this versus that, or if we make this drastically different, that is the spacing between each of the cells. And if we gonna put that back to normal, here's what it looks like. When I said back to five, there's another one called sell padding, and we want this one to be set at and see what five does. So that's the padding inside the cell, not between the cells but inside each cell. And if we make this much more drastic. You can see that the padding between the lettering that we see here and the first inside border. We can also change the border color by using the border color attributes and just the name of a color. We can say changes to read, and it is now read, and the border does not have to stick stays. One. It could be drastically larger. So you see now that the border is all the way around the table. It's not the border for each cell, however, adding a border does add that one pixel border all the way around each self. So now we have a row and add notes. Here, this is a row. This one is table data, and if we wanted to create one more row, all I did was copy that over. Refresh the page. We have another row now. The next one. We didn't need to know. Our column spends and roast bands. So let's say the first row has four cells and the second row has three cells. It's not going to line up properly, and this is how chrome tries to figure that out. Therefore, cells at the top three cells at the bottom. But what if we want this bottom Celtics to spend over two columns? Well, that's when we at this one here. So to make sure that you're working the right place, if you're new with HTML, you can simply add a working here text, refresh your page and it says, working here. Great. So we know where we're working. We're going to select this element and we're going toe change the column span or coal span to to I mean, it's gonna take up two columns instead of one. Refresh that I know the Celtics up two columns instead of just the one it was supposed to know. Let's add 1/3 row, this one also going to have three cells. However, we want to merge this cell with this one. Let's go back to where we were working here. Yep, we're in the right cell. And if we said roast ban is equal to two, this takes up to Rose Now, now, to make a little more sense of this, because this is getting a little bit difficult. We're going to label these row and a cell number. Now we can see if this is the road and this is the cell we've got. Row one, someone row one cell to row one, cell three and so on. So on. Here we have wrote to sell one, and it takes up to Rose. Remember? That's because we have the row span is set to, whereas this one is wrote to sell three and row to sell four. That's because we have column span set to now This works off the road that has the most amount of cells in it. So all of this works off the first road because the first road has four cells in it. Now we can also add header body and footers. So this was quite easy. This is a T head T body, which is where all your rose and data is going to go and then T foot. Now, this is simply a way to manage our row information. So in her head, in her table head, we have our table row and we need th which is a table header called us. Call him one, make a little more compact, call him too. Three and four. Now, if we go and take a look, we have column headers. Now the th is different from the T d. The th is the table head is going to make your text bold automatically and center it. If we didn't want that, we just changed it back to t. D. Is going to act as a normal header on the only reason that we're calling this one headers because we've put it in the T had element. Now, this is only if you're becoming more organized with your HTML. We can also take that exact thing and copy it into the T foot and what happens? The same thing? The only difference is a one of specifying that this whole row here is a header. On this whole row here is a table footer. We're going to call this change. These s so they make a little bit more sense. So you can think of this as a human body. You have the header which is your head, your body. So your torso, your arms, your your legs and your footer which is your feet all. They're very vital to your body all they're very vital to a table. The next thing we want to learn here is how to change the width of a column that takes the with attributes, put it on any single column and the change us with to 50% had one. This whole column is now 50% of the table, and the remaining 50% have to be split equally between these three. Now, we can also specify that we want the second column Devil with of 25% and it takes effect for the entire column. The browser will automatically figure this out, and you can put those on. Anyone. Doesn't have to be in the head. Doesn't have to be in the footer or body. It could be on any single cell. You notice that 50% with for row One column one row, one column one affects. The entire column affects the entire table. Now, if you do not specify a width for any of your cells, your browser's going toe automatically optimize for what it thinks is best right here, it looks like it's trying to optimize for 25% with on each column. However, if we add more text, it's now making more room, and it's squishing the other ones together. This may not give you the desired effect that you want. And if that is the case, you're going to want to add that with Teach south, and that is how you create a table in HTML. So your task for this video is quite a long task. First, create a table, then create three rows, then create four cells in each row. Go back to your table element at a border to your table. Change the border color of your table. Make the width of your table 100% so it takes up the entire width of your screen on row to sell. Three. I want to you to use the coal span attributes to take up two columns. That means you're going to have to remove the fourth cell in Row two, also in Row two. I want sell one to take up to Rose. That means you have to remove the first cell in Row three and used the roast ban attributes . Once you've done that at a table, head table, foot and table body, save all of your progress. Open it up in your browser, and if your table look similar to the table that you saw in this video, then you're finished 23. The DOM: the D. O. M. Is the document object model is what happens when the pages loaded in your browser and your browser automatically creates this document object model So you have your HTML, then to the left. You have your head, your title and your made a tags, CSS and possibly JavaScript to the right. We have our body, and nobody has any element that we want to put into it. Dividers are on order, lists, more dividers. List items go under the UN ordered list, and so on until now, this is a pretty basic document object model, and you'll notice that this looks quite like a hierarchy. And that's exactly what it is. It's a hierarchy. Now here's a picture of a document object model that's significantly more complex again. It starts with the HTML the top it's or HTML element. We have our head or title, etcetera, etcetera. That doesn't go very deep, but we notice the body area can have a div, and then it can have a different side of that. In a table inside of that, and inside every table or table rose and inside of each table row our table data cells and we can have more HTML inside of that, and that can just get deeper and deeper and deeper, depending on how big your Web pages and how many different elements your Web page needs to use. Now. The D. O. M defines a few different pieces. It defines HTML elements as objects. It defines all the properties of HTML elements, which are attributes. It defines the events for all of the elements that gets more into JavaScript, and it defines the methods of access to all of the elements as well. Document Object Model is a W three c standard. It's not vital to know all of this stuff right now as you're writing your HTML, since this really has more to do with JavaScript. But the document object model is based more on HD Melvin and is JavaScript considering it's all based on the html that you write. So we're learning about it right now. Your task for this video is to go to Google images. That's images dot google dot com, type in document object model and look at some of the different hierarchy images that you find. Look at some of the more basic ones and look at some of the more advanced ones and take a mental note about what the differences are and also what the similarities are. Every document object model has a few similarities. They always start the same. 24. XHTML: X html stands for extensible hypertext markup language. It's very, very similar to HTML. It is more strict than regular HTML and X. HTML is essentially HTML but designed for XML applications, or XML uses X html of supported by all major browsers. And if you're unfamiliar with what XML is, XML is a markup language where all the documents that need to be written are marked up properly. In other words, they're much more strict. They're much more precise. It's not a very loosely written language or markup structure. The structure of X html means that there's always a doc type. It also means that the HTML head, body and title elements are all required on every single page every single time. That's a minimum must now x HTML elements must also be properly nested. That means if you have a paragraph with italics nested inside of it, you're elements would look like P I I p. All your elements must be properly closed. Remember those self closing elements that we talked about earlier, where it ends in a slash greater than sign and they must all be lower. Case X html documents have only one route element, which is the HTML element, and you see that in the document Object model and X html attributes must always be lower case. They must always be quoted, and they may never be minimized. Here's an example of minimization. One of the attributes that we can use for disabling a button would be the disabled attributes in regular HTML. We would write disabled an X html, we write Disabled is equal to disabled Its a little redundant, but that's how strict this languages you know, everything that you've learned up until this point with all the other HTML videos has prepared you for this moment. Instead of learning a markup language with very loose rules, you ended up learning a more difficult set of rules first, which means you actually learned x html instead of HTML. Now learning x html and going back to HTML is extremely simple. But moving from HTML two x html is a little more difficult. So we actually started with a more difficult Now when you're writing your html your X html , you're going to want to sometimes validated. Make sure you're doing it right, especially if you're just learning this For the first time, a great tool for validating your X HTML code can be found at validator dot w three dot org's. There are different ways to validate your HTML. You can upload a file, copy your HTML into a text area, or you can even just insert the U R L that you're looking at. Now that's what X HTML is. It is essentially HTML, but it's more strict. Your task for this video is to go to validator w three dot org's Click on Validate by direct input. Grab one of the files that you worked on in an earlier video, or if you haven't just start writing some HTML in here and then click the check button. And that would give you validation on whether you're writing your X html properly or not properly. 25. Inline CSS: in line. CSS is CSS that you right inside of an element inside of your document object model. The way we do that is using the style attributes and that style attribute is a global attributes. Now, in this video, you're not going to formally learn any CSS whoever. If you want to take note of some of the CSS that I write that is completely up to you. You won't be tested on any of the CSS that I write this video because this is purely an HTML video. However, learning what you're about to learn will prep you for future CSS lessons, and you will be much better off knowing just a little bit of CSS from this video. Now, to give you an example of some in line CSS, I'm going to create a development with this style attributes. I'm going to write, test inside of it and close it. It's preview it, and it's just a basic page. It says Test now all over. CSS goes inside here now, a very quick lesson on CSS. You have what's called a declaration, and in a CSS declaration you have a name value pair. So, for example, border would be the name. You have a colon, one pixel, solid red, and you end that declaration with a semicolon so you can add more in here. Next. I'm going to add margin top and I want that to be 50 pixels. And let's say I also want the width to be 30% of my page. No, again, it's not space sensitive. Just like HTML. It should be all lower case and we have three declarations here we have our border declaration margin, top declaration and our with declaration. So I'm going to save this and let's go take a look at this in chrome. Now we can see there's a space of the top. It's of 50 pixel margin from the top. That means the elements going to sit 50 pixels below the with is not 100% of screen. It's a block element, so it should be. But we said it only needs to take up 30%. And of course, there is that red border around it. So that's in line. CSS. In a nutshell, we put all of our CSS inside this style attributes, and again, that style attribute is a global attributes, so it can go inside of almost any other HTML element as an example. Changes to the paragraph. Flip back over to chrome. It doesn't look any different. Let's do it with a span element. Remember, this is an in line element. This is not going to take up the entire width of the page because of that, with might not work. Refreshment age. Now the with is not working the way it's supposed to in the margin is not working either. And that's because those only affect block elements or in line block elements. However, our border is still working, and that shows that our style is applicable to any element. So your task for this video is to create a new development at the style attribute to it. In that style. Attribute, I want you to write a little bit of CSS. Feel free to go backwards in this video, Pause it where you need to and copy the CSS that I've written. If you're familiar with CSS, feel free to write your own, but if you're not, you can copy mine that what you do, saving open the document in your browser and take note of what has happened. So if you've added a border, there will be a border. If you've added a margin, there will be a margin. If you specified a width of 70% it should only be 70% of the width of your screen. Do that and when you're done, we'll see you in the next video. 26. Internal CSS: internal CSS is the second way that we can write CSS that affects our entire page or any single part of our page to show you what I mean. I'm going to introduce you to the style element. We're going to write some CSS inside the style element. If you're not familiar with CSS, that's fine. You're not going to be tested on the CSS right now, as this is purely an HTML video, but you will need to know about the style element. So as an example, I'm going to create a development here, and I'm going to give it a class attributes and I. D attributes and a style attributes. Now we may or may not need all three of these, but what we do need is the style element. A style element should go inside of your head element. Now, as a browser renders the page, it goes from top to bottom. First thing it looks at is the doc type, Linna says. Okay, there's HTML in here. I need to understand and parts HTML that's in this page. The head comes before the body because it's loaded first goes from top to bottom and in this head is going to try to render our CSS any styling, any borders, margins, pad ings, background colors, text colors, anything that we put in there that styles the page that's going to be rendered first, the browsers, then going to recognize that it has a certain styling to remember for this page, and it's going to try to apply it to the body once the body is loaded. Now this makes the page seem like it loads faster now. Browsers, thes days and Internet connections these days air so fast most people will never be able to tell the difference. But there are a lot of people out there who have a very slow Internet connection, and they will be able to tell the difference. It should also be noted that the style element can actually go inside of the body. It works perfectly fine on modern browsers, but it should go inside the head element. Now I'm gonna write some CSS here. I'm gonna add a border, and in here it's just going to be a one pixel, solid red border. I'm going to add an I D. Don't worry about classes and I ds. We'll talk about those in a different video. But right now I'm just gonna show you how this works. We had the i d and we want to say padding 40 pixels. Textile line is going to be center. Now we're going to add a class, the border class, and we're going to add the i D I. D. We're going to ignore the style attributes at Texan here, and let's take a look at what we've written in our browser right now. Now here we can see that of Texas. In the center, we have our one pixel, solid red border, and it does look like there is a patting between the very top border and the tax along with the bottom border and the text. Well, we told the browser was at a border one pixel, solid red, add padding at a text aligned center and have it affect our element here. So instead of writing all the CSS inside of the style attributes like we did in a previous video, we wrote it all inside of the style element. And the benefit of doing that is when it comes to classes going to add another dip here, and I'm going to call this give to and one more, and this one will be def. Three. And when I save and I look at this and chrome or any other browser, these also have borders. Now the reason these have borders is because the border class here affects all the classes in here. Now is a quick lesson in CSS. A CSS class starts with a dot like you see here, where's the dot border can be applied to multiple elements. On any given page, we can add a couple line breaks in here at a paragraph. This is a P refresh. The page got a couple line breaks in there, and they're also affects the paragraph. Now the strong benefit about that is, if we wanted to change this particular styling, we wanted to remove that border entirely. We can remove that saver file, refresh the page in your browser, and it gets rid of all of the styling all at once. That means you do not have to write style. Attribute is equal to border one pixel solid red for every single element. Because if you need to change something on a very large website, let's say you needed to remove all the borders For whatever reason, you don't want to have to go through here, look for every border and delete it because this is going to take forever. Instead, what we can dio is simply just delete this and that gets rid of all the borders Now Wanted to use the style attribute to let you know that the style attribute can be empty. Most attributes can be empty and the style attribute is one of them? No, When we're talking about ideas, ideas are not like classes. A class can affect multiple elements as I stated earlier, and I d can only affect one element and I d should be unique. It should be like your personal identification. Nobody else has it. It is completely unique to you as a person. This identification works the exact same way and I d start with the number sign Hashtag er whatever you wanna call it these days. So your task for this video is to write the style element in your head, right. Three developments in your body. Then I want you to create the border class like we did in this video. Give that a border one pixel solid red. If you're not familiar with CSS, go back to a part of video where it shows you the CSS that we worked with and feel free to copy that. Then, for each of your developments that are inside of your body element, I want you to add the class attributes, and the value should be the border value saving. Open the document in your browser, and if you see a border on all three of your developments, then you have successfully added internal CSS styling to your page. 27. External CSS: external CSS is how we add the CSS from one file into another file. The primary benefit of adding all of your CSS and toe one or multiple other files that are not inside your current HTML means you can edit them without editing multiple pages. What I mean by that is, if I had a copy this over another page and they're fairly similar, let's just call this one external CSS to now. Look at these and there's not really much difference. There could be an amazing amount of difference. But the point is, we still want to use this class, this styling on both pages. Now, on the first page, I could just simply change assigning. If I wanted to remove that border. I would. The problem is, if I have a second page, it's still there now. Chances of you having just two pages are fairly slim. You might have up to 50 or 100 different pages, depending on the website or project that you're working on. You could have thousands of different pages. You could have just a few pages. Regardless, the point of programming is to not do something twice. You want to do one thing once and have in effect as much as possible. That's the most efficient way to work. So here we're going to add instead some external styling. Now this uses the link element with EA treff attributes, and another attribute, called REHL, stands for relationship. It's a self closing tag, and it goes in your head. The H R E F is your source in an image. Use SRC and a link you use H R E f. So here we're going to add a file called style dot CS Access file does not exist yet, but we will make it exist in just a moment. And the relationship to this HTML document is style sheet that tells the browser what this is. It could be a text file. Could be javascript file. It could be absolutely nothing that's important to this page, but when we say style sheet, the browser knows to go and get that particular file and to automatically act as if it was a style sheet without having to do any additional thinking, I was going to re add the border back in here, and I'm going to copy this styling. I'm gonna cut It is what I'm going to do. We're going to create a new file pasted in here against Basic does not matter with CSS, and I'm going to save this as style dot CSS. So we have styled at CSS and we have the file called style dot CSS. There's no use for that since the style attribute is now empty. Now I've opened this up in my browser. I'm going to hit Refresh. Nothing has changed. That's perfect. Verify that we're doing it. Correct. I'm going to change this border The five pixels solid blue saving open in the browser Refresh and look at that. It's affecting it. And actually, what I want to do here is I want to create a link here and we got a copy this here and go back to the main page. Now we've got a link on your it's gonna go to code to page. Great. Now, when we wouldn't want to go back to the code one page. So you noticed there's obviously a difference here. Now again, the problem lies in that class called border. It's in here. However, it's in her style sheet, which means, you know, if we had 234 500 pages were going to open up each page and edit each style manually. That's not what we want. So in our original code page, I'm going to replace thes style element with the link element. It's going to link to our style that CSS page, and when I refresh the page, I'm clicking between code and co. Two dot html. Here, nothing has changed. That's impacting so we can see what else is going on here. I'm gonna go to the code. One page patting took effect. CO two patting took effect. Now all I did here was that a little bit of CSS toe one particular file, and it's affecting both of these instantly. So if I refresh my page on co dot html and if I go to co two dot html, it's affected both pages successfully. Now the main benefit again is time as a programmer. As a Web developer, you're going to be spending a lot of time writing html PHP JavaScript, Jake Weary CSS and you want to minimize how much time your spending on your coat the last time you spend on your code using methods such as external CSS the more time you can spend building other parts of your service or your website now as another note, if we had another file, we don't. But if we did and we called it styling dot CSS, we can't have two style sheets in your. In fact, we can have as many style sheets as we wanted. For the sake of this video, we only have one. Your task for this video is a fairly long task, and you have to go step by step through this one first, create one filed called code dot html just like I have. Then I want you to create a second file called Code to dot html. Third, create a file called style dot CSS fourth at the link element to both co dot html and code to dot html just like we did in her head element. Next open up style dot CSS and add some basic styling to it. Feel free to use the border is one pixel solid red declaration that we've been using in a lot of examples, then encode dot html and co two dot html create to developments on each page for each development at the class called border same class that we use in this video. At this point, you should have two files with two developments in each, for a total of four developments, all with a class called border. Now open both pages in your browser. At this point, you'll have two tabs open, and you're def elements will have borders. Now. I want you to open up style dot CSS once more, removed the border from that file, save it, go back to your browser and refresh the code dot html co two dot html pages. Now. If you've done everything right, the developments will no longer have borders. And you did that all by simply making one small change toe one file, and it affected two pages. 28. Classes: CSS classes air how we affect multiple elements with just one piece of code. Now, we covered this in internal CSS as well as external CSS. But we haven't learned about the actual class. Attribute itself So the class attribute here is a global attributes and you can tag along with almost every element in this video. You're not going to learn about CSS, nor you're going to be tested on any of the CSS that we right. But the HTML part you will be tested on. So I'm gonna open up some space here. I was going to call this class again. Don't worry about the CSS, and what I'm going to do here is now that I have a CSS class called class going to write it in here as class and open this up in the browser and we have our solid one pixel border. Probably nothing new to you at this point. But where this is more powerful is duplication. I can duplicate this many times I like, So I've got five copies here that's going to show up five times that same borders going to show up five times again. If I remove that border it affects all of them now. The trick is it only works with the class attributes. And if we change this one, too, this is an I D element, and we take away this class refresh page. It's the first element that we have. This first block element is the only one with out a border. The other way to style is through idea. We're not going to learn about it in this video that will be in the next video, but I D does not work like class does. So if I put ideas equal to class, class matches up in her style, saving refreshing a browser. Nothing happens now. We can have multiple classes. It's called this one class to, and we want the text to be centered. We also want the color to be read. We're going to add another class to the middle one here, this one will say, has two classes, and to add another class, all we have to do is add a space that's a separator class, too. Going back to the browser. This one has a red font text. Looks like it's right in the middle, so we know that it is working off to class is the first class as that red border. The second class has the Red Tex, and the text is in the center now. We could do this with multiple classes, not just two, but we could do it with 345 50 if you needed to know it's frowned upon to use 50. But if you need to use more than one, that's what they're there for. Your task for this video is to create a new document at the style element of the head element in the body area. I want you to write five D of elements. They all have to have the class attributes. Then create two classes in your CSS or inside the style element and name them dot class and dot class, too. Style them the same way that you saw in this video. So dot class should have a border with one pixel, solid red and class to should have text align, centered and color red. Now apply the dot class to all five dibs. Apply class to two DIV number 13 and five saving open this document in your browser and verify that all the dips have borders and that give 13 and five also have read fond and center to text 29. ID's: There is another way to style your HTML using CSS. There's only works for internal and external CSS. It does not work for in line CSS, although in line CSS would be implied. What we're talking about are called I DS, who have development and a set of using class. Or instead of using style, we use I d. And we're going to write with internal CSS. Although this works with an external CSS style sheet as well. Now a class, remember, always starts with a dot and I d starts with the pound sign number sign hashtag whatever you wanna call it starts with your number sign. We're gonna call this I d You're not going to be tested on the styling, but you will be tested on what the actual HTM are attribute and elements are so don't feel like you need to know all this CSS that we're going to be writing in this. But do you feel like you should be familiar with the HTML Now when I open this up in my browser just says this is an I d. Nothing special, nothing unique. But if I add border bottom three pixels dash and let's make it black, and I apply this I d toothy I d attributes, and it doesn't have to be called I d either. It could be called anything. Actually, that's what we're going to do. We're going to rename this to anything to match at this. I d attribute matches the styling of the number sign. If I save an open this in the browser, we now have a border that's three pixels wide on Lee at the bottom, it's dashed and it's black. It's exactly what we wanted now, an idea supposed to be unique. Where a CSS class remember the one that starts with a dot a class can be used as many times as they want, and I d should only ever be used once now in modern browsers such as the one I'm using, I'm using a new, updated version of Chrome and I D will work more than once. So if I go back to my browser refreshes, we know that the ideas worked twice. Now. Modern browsers are usually pretty good with this, but not everybody has a modern browser. There are still people who are using very outdated browsers. Perhaps they don't have access to the Internet to update the browser or they don't have the funds to buy a new laptop or phone or mobile device of some type as a Web developer is our job to consider everybody who accesses the Internet and is our job to understand that everybody accesses the Internet just a little bit differently. And that means we have to work with many older browsers. No older browser. Take Internet Explorer six, for example, will probably not render this the way that you see it right now. In fact, it might only actually render the 1st 1 and the 2nd 1 will just have blank styling. So minimize that problem. We only ever want to use the same I d once so anything can be applied to this element. But it should not be applied to this element at all. The idea attribute is a global attribute. It can be applied to pretty much every element, and if you're thinking well, this can only be used once. So really, what's point of using it? Take into account that this page could be basically multiplied five or 600 times for, you know, a fair sized website and If you have, for example, a navigation bar on every single page and you want to change the colors or the border or where it sits on the page, you wouldn't change any of that styling. You don't want to have to open up every single page and change. Instead, you can add an I D. Just like you would add a class. But that idea is unique to that navigation bar now. Not only that, but when you start getting into JavaScript and Jake weary I DS are often the most common way of selecting an element. We're not going to talk too much about that, but to give you some sort of insight both JavaScript and J. Query, which is a JavaScript library. We try to access this element. It could access the attributes, the text inside of it, the HTML inside of his only nested. HTML can access all of it, and you can change it. Remove it, add it, add more to it, copy it a pendant pre pendant. You name it anything that ever changes on your page on any given website. That's JavaScript working for you now. The optimal way to use an I D is if you were going to write, There's a border one pixel, solid red, and it's the only time that shows up the Onley time, their styling for this. Instead, you take the styling out over the style attributes, put it into CSS and right I d. Is equal to anything. So now not only is our styling being applied in a style sheet, possibly an external style sheet, but now both JavaScript and Jake, where you can easily access this element. Ideas become much more popular, much more commonplace, the further you get along with your Web development skills. As of right now, it's not important that you know the styling or how to write the CSS. But it is important to know what an I D is and how it differs between a class. So your task for this video it's create a new document. Add the style element into your head element, right, a development inside the body element similar to what we did in this video, right? A CSS I d. In your style element. Feel free to rewind this video on pause where you need to to copy of the CSS. If you're not familiar with the CSS. If you are familiar with CSS, feel free to write your own. The next step is then to apply that CSS i d. To your development. We used the idea called anything, but you can name it anything that you like saving open the document in your browser and verify that the styling took effect. If the styling has taken effect the way that you wanted it to, then you've applied an i D to your element successfully. 30. Quotes: there will come a time when you need to quote something in HTML. A simple way to quote something is simply add quotations around it. This would work perfectly fine, however, as Web developers, it's not only our job to understand that people are going to be looking at these websites, but also that computers are looking at these websites. That means we have to sometimes apply special mark up just for computers. Take Google's search engine bought Google bought. For example, when Google bought looks at this page, it wants to figure out where certain information is coming from. And one way to do that when we're quoting another site is to add a block quote. So we have a block quote element, and this is going to just be a little title above it, he said. And in the block quote, do or do not. There is no Try Yoda. Now, if we save this and open this in a browser, the block quote automatically indented for us. That's one problem solved. We don't have to worry about inventing now, because Block quote is doing that for us now. Most browsers will add an indent, but not all of them well, and this one of those times where it's great to check your work in other browsers to try opening this page in Internet Explorer or Edge opera Safari Chrome Firefox. See if there are any differences if there are no differences than great. But if there is a difference, then you're going to have to work around that browser to make sure that it looks the same as every other browser. Now there's another way to add a quote, and that is by simply adding quotations. But instead we use the Q element the other guy spouted. And let's put this in. Q sense for quote, you were the chosen one. Refresh the page, and we have quote automatically. Not only that, but there is actually a space between the quote on that is due to the fact that there's extra whites basing here. Now we know that HTML is not space sensitive, so if we add 20 spaces at the end of it, still, I'm going to show up with one space on the actual page. There we go now we have quotations before and after. Now we want to consider citing the sources, and we use the site attributes in both of these elements, citing your source really only has to do with quoting something. Now the site attributes value what the site should be should not be Yoda or in this case, would be Obi Wan Kenobi. It wouldn't be either of those, although we are quoting them, the site should actually be the full source of where we found that information. So if we found it on Wikipedia, the citation should be the full UL of where we found this particular phrase. So, for example, if we found this on Wikipedia could be Wikipedia dot com and citing this one. We may have just found that on a Star Wars fan site or in a particular book, but wherever that is, it has to be an actual link. So your task for this video is to create a new document. In that document, I want you to use the block quote element, and inside that element, insert a phrase into it. Doesn't matter what the phrases it could be. Anything. Then I want you to use the Q element and insert a phrase into that again. It doesn't matter what the phrases but make sure you have one in there. Then I want you to add your citation for each phrase. So use the site attributes on both the block quote and the Q element. Don't forget you're not citing an individual person. The citation is a source You earl, saving over the document in your browser and verify that your block quote and quoted phrase have worked the way that you saw in this video. 31. Computer Code: html is all about semantics. Not so much the styling, but more about what is being read by another computer. Think of it that way, and when we think about it that way, we have a few different types of computer codes that will not only style the text a little bit differently but allows another computer to read or HTML and understand what it's looking at. So we have a few different elements that we're gonna go over in this video. We're going to learn what code is what Samp K B D. Var is first of looking normal text. This is normal text, and as you can see, it looks normal. Coated text is different. In fact, if we add another piece of code here will notice that the letters actually line up where C is one always to Dia's three. He has four days. Five Space is seven in here. Normal font and coded font do not line up properly. So this is great if you're writing very specific code on your Web page and the letters have to be lined up properly, much like what you see in my editor here Next we have sample this is a sample sample example. Whichever one you want to use, it's a sample nonetheless, and a flint is a little bit different from code. Next, we have K BT keyboard input again looks a little bit different, and lastly we have. They're very equals. Variable it's actually stands for is variable and once more it's all different. Your task for this video is to create a new document. Write the code sample keyboard and variable elements. Put some text in between those elements, then save it open. The document verified that each foreign looks different. Each section looks different, and then once you've done that, maybe at some normal text put at the very beginning, very end, you can use line breaks like what I did. The goal behind this task is to understand that there is not only a difference between variables, keyboard input samples and code from a semantic point of view. But it also looks different from a user's point of view. 32. Strong and Emphasis: By now, you should know how to make something bold or how to add italics to it. Open to this point, we've only used the B element on the I element bold and italics, respectively. But there are two other elements that come into play as well, and those are strong and emphasis. Now the way you can think about these is bold as well. Bold and strong is stronger than Bolt, and E. M is the 1st 2 letters of emphasis, and you always write a talent to add emphasis. But there are differences between Bolden, strong and Yem, and I know the main difference has to do with screen readers. A lot of developers have never heard of a screen reader. In fact, a good majority of the Internet users just read articles on their own. They don't have a computer. Read it to them, however. But there are a lot of blind people in the world who use screen readers to read to them about what they're looking at, and that right there is the primary difference. Bold is simply bowled. It's just making letters bold. It's it's it's visual, that's all it is. But strong is a strong emphasis, like you could say, You want to do something right now or you could say You want to do something right now it's like adding Mawr emphasis before an exclamation mark and the difference between E. M and I pretty much the exact same. It's all about how you would read it. For example. I am really tired. Could be capitalized, but most cases it's not going to be. In fact, we could add an I the italics element, and this would show up as I'm really tired as a little extra emphasis. But again, there's purely visual for screen reader screen reader needs that emphasis element. And again, each smells all about semantics. It's not about looking different. It's a boat being structured properly. So to a screen reader, it's not going to say I am really tired. A screen reader is going to add additional emphasis that you're really emphasizing the word , really. So Screen reader would probably read the sentence more along the lines off. I am really tired. Emphasis almost changes the pronunciation of the word. Now, if you want to write a sarcastic article that is screen reader friendly, you would use a lot of emphasis, A lot of E m elements. Sarcasm is often driven off of a lot of emphasis, possibly too much emphasis in most cases. For example, if a screen reader was reading a sentence that said something along lines off, the man who was standing in line at McDonald's put his hand in his pocket and grabbed a handful of change. That's when he realized he was really rich. That's sarcasm. He knows he's not rich. That's a scenario where you'd use emphasis instead of just I. So a lot of people at this point are asking, Well, where would you use bold or just metallics? If we're adding special emphasis for screen readers anyways, what's the point of using plain Boulder plane italics? Well, the idea is, for the people who are visually looking at a site or visually looking at your article, Bolt draws a lot of attention. So if you have an entire paragraph of just regular text and then you have a sentence that's just folded, it might not necessarily need to stand out differently. For a screen reader. It might. It might possibly need to be read the exact same way that normal text would be red, but you want someone's eyes to be drawn to. It could be a link. Could be a button could be some sort of call to action. Or if you just want to add italics, or if you want someone to put their mouths over a specific word to show them the definition or given little tool tip or some additional help you get at italics because those are not necessary for screen readers. Screen Reader doesn't care If you can put your mouth over it or not it's it's reading the article to you. It's not that important, so it's going to skip over the I. But someone visually looking at your website again it's going to catch their eye, and they might actually take action on that. Now that's the difference between bold and strong and italics and emphasis. Unless you have a screen reader, there is no task for this video. You could probably go and get a screen reader, chrome extension or Firefox. Add on or on sell in app on your phone if you really wanted to. But if you don't naturally have one of those right now, just know what the differences are and be very conscious when you're writing an article when you're using HTML, you have to realize that there are going to be people who cannot physically see what is being read to them. And if we start talking about search engine optimization to a search engine, these are very, very different elements. 33. Head Elements: the HTML head element, as we see right here, is part of two major sections on that document. Object model the D um, which is HTML. All your HTML goes in here, and your browser creates that document object model. And there are two primary sections where you put your coat in the head and the body. The head does not go very deep. That hierarchy is quite short and consists of elements such as Title. But there are other elements. Usually elements that you don't actually see take effect on a page that we put in here now . The title element obviously takes effect immediately, and we see that in the tab of any window that we open. We know that the style element should also go in the head, because that's where a CSS is rendered. We put her styling and they're in the browser, says right, This information I need to hold on to and apply it to the body. There's another element called base. It's a self closing one script. It's very much like style. However, instead of putting styling inside of a script, we put javascript. We've dealt with adding external CSS, and we use the link element and that goes in in the head as well. And lastly, we have the meta element, and we had all sorts of information for a meta tag in here. The meta element is where you add things like keywords to your page or your page description. It's not limited to just that, but those are usually the two most popular meta tags that we use. No, we're not going to go over all the meditates right now, but these are the most common elements that you use inside the had element. We've got title style based self closing script link, self closing and meta self closing. There's no task for this video, but it is important that you know that these elements should go in the head element as well the head section of your page. It's very important that you know that adding the title to the body of your page is not going to do very much may or may not have the desired effect that you want on every browser , especially the older browsers that were much more strict style. We know we can put inside the body if we wanted to, but should go inside the head base always goes inside. Head script can go basically anywhere, and one of those places is in the head link. When you're linking to an external style sheet has to go inside. The head has to be loaded before anything else on the page is loaded and your meta absolutely has gone ahead is it's the only useful place for it. 34. Metadata: meta tags in the header that looked like this. They always go inside the head element, and there are tons of different types of meta tags that we can use. And then they all start with Metta. But the difference is there attributes medicines for metadata. It's additional data that helps the page define who it is. It's the personality of the page. Don't necessarily see it on the surface, but search engine scrapers even Facebook will use metadata to figure out what the pages about. In just a glimpse, there are tons of different metadata metadata attributes. And so I found this page. I'll share this with you and I'll put it in the pages. You can download this as well, and I'm going to go through a few of these with you. Samata Care Set, a character said, is utf eight. That's a general standard. That means special symbols will show up a special symbols instead of usually a black diamond box with a question. Mark it inside of it. Keywords. This is one of the most popular ones that you put your keywords for each page in there. If you're writing an article about HTML made a tags, you would change the content. This attribute two made a tags probably had one more in there called HTML Fun fact search engines used to use the made a key words four rankings Until about the time that Google came around, we used to fill our keywords with 506 100 different words. If we could, we just cram as many possible words and variations of each word into this particular element, and search engines would instantly rank rank us higher. Thankfully, that's no longer the case that doesn't work. You should probably have no more than 10 any more than 10 and a search engine has the possibility of looking at your page and saying that this is probably just spam. The next one is description. This year says 150 words out. Keep your description shorter when you're looking for something on Google. When you do an Internet search on Google, that description is usually not very long. It's not 150 words. It's more like 150 characters. My advice Keep it shorter than a tweet 140 characters or less. The subject. This is actually wrong right here. If he had used double quotations instead of regular quotations or apostrophes. This problem wouldn't show up Right now. The browser would look at your website, and I think that this is the attributes and that this is just junk. We have copyright if there's a copyright language, usually a two character code. Yes, for Spanish. D for German robots. Do you want a robot? A search engine to follow an index's page Last time it was revised. Ah, let's skip some of these something that's a little more common, such as author. You put your name your email address in there if you wanted to. Personally, I would not put your email address in there. I think a lot of possible Scrape your page, find your email address and just start spamming you. But your name or your Twitter handle is usually find owner Your name just skipping through a few of these. Here you have a medium. What is it? Is it bloggers? It flog is a YouTube channel and those are all just name and content. You can explore this page on your own. The only thing I would notice that the made a text closed improperly. Armida tag should have a self closing tag and that follows the rules of X HTM out strict HTML but uses as a general example. Name is an attribute content isn attributes. We have a few in here called http Quiver, Mrs Cashing. When does it expire? Mawr expiration, etcetera, etcetera. They're even mawr in here. Use it for if you're creating an application. Internet Explorer made a tags When was eight meta tags and so on and so on. Feel free to explore this page. I'm not going to go over all of them. They're probably even more meta tags out there. She might want to hop on Google and do some researching yourself. You don't You do not need to have every single men attack either. Ah, lot of new developers. They think that having every possible meditate goat there in every single page that they have is going to help them rank better. It's going to make their page better for social sharing, like on Facebook and all that stuff, and that's not necessarily the case. You really only need your important ones. Character set keywords, description and robots are probably five out of the top 10. Now your task for this video is to actually come to this page and just explore Read through this. It might look like a lot, but it's really not that much. A lot of it is self explanatory, and if you don't know what a particular one is, hop on Google and I'm sure there's an answer for it. 35. Favicon: a fabric on is a little image that you see in your window tab. A great example of this is when you go to Google in the tab. It says Google and right beside has that little image. Almost every website has one of these at a at a fabric on you used the link element just like how we link to other sources, such as an external cascading style sheets. The relationship would be an icon, and then you linked to it using H. R F. It's usually fabric on dot I. CEO Seo is the icon extension, although a lot of modern browsers also accept images such as PNG and the type his image slash X icon and you close it and that's all of fabric on. Is the problem with fabric on is the dot I seo extension. The icon extension is not easily created there. Photoshopped plug ins. Depending on which photo shop you have, you can or cannot create an icon. So instead you can use a PNG and that works usually justice. Find in a modern browser now icons or what you use for all browsers. Let's accept it in the really, really old browsers because there are still people using those, and it's accepted in the modern browsers as well. Fabric on is usually 16 pixels by 16 pixels, so it's not very big, and typically it's it's somewhere on your server. Your task for this video is to create a new document, and then I want you to find or create your own dot i c e o your fab con dot icon. If you're unable to save any files from Photoshopped, any other image service that you're using as a dot i seo feel free to hop on Google images and just look for a dot I CEO image. Then I want you to apply the fabric onto your page, saving open the document and verify that the fabric alone shows up properly. If you see the little image by your title in your window tab, then you've added a fabric on 36. Entities: HTML has some reserved characters. For example, if you just try to write a greater than a lesson sign in HTML, it's not going to show up the way you think. For example, if I said my name is and then you put a placeholder in there called name, but you have the greater than less than signs in their it looks like an HTML Elements save that. Open it up in your browser, and it doesn't show up. However, if you look in your source code, it is in there. That's because your browser's going toe automatically. Assume that that is, for some reason, somehow, an element. So instead, we need to use what are called HTML entities. These entities typically start with an ampersand that's the and sign and end with a semi colon, and they have some variation of lettering in between it. So if we said lt the stands for less than and let's do one more in here, we have GT. That's greater than, and I'm going to apply these to our element, save it view in the browser, and it shows up the way we wanted to show up. The less than sign shows up greater than simple shows up. Our element even shows up now if we view our source, that's because what we did was right. The actual HTML entity for the greater than and less than symbols it's were greater than we actually wrote it out a long way instead of writing a character because your browser interprets the character as part of an element. Now these entities airways to create symbols, and it's not just limited to less than or greater than if you wanted to add The and sign seems easy enough, but in html it would actually be a M P that would be and M percent. That's the and sign. But it also works for characters that you might not have available on your keyboard. For example, the copyright symbol most keyboards that I've seen don't have a copyright symbol. That character is just not common enough to actually put on a keyboard. So instead, in HTML, we write and copy semi cool, and that's a copyright symbol, and it even works for extra spaces. So if we said extra added Atanas spaces here versus and B S P A stands for non breaking space, we just add number of these in here. Let's go take a look at what a page is presenting to us. Now we have a less than we have greater than the ampersand symbol shows up copywriters working extra spaces in our code. We have all these spaces that doesn't show up. The browser automatically assumes you actually just meant one individual space. Both all of these characters. With all these entities, we've added additional spacing. They're HTML entities for almost every single character. Your task for this video is to create a new document. I want you to write out the less than greater than an percent copyright and non breaking space entities saving open the document. Verify that the characters have shown up properly. And if you want a list of MAWR of these entities, feel free to hop on Google and do a search for a list of HTML entities 37. Forms: formers air how we submit data to a server. You use forms all the time. Use them in Loggins password reset forms, credit card forms, and so on. Any time you log into a website, you've used a form. The element that we use is the form element, and it goes inside. The body has an opening and closing tag, and there are certain elements that we use inside of a form. Now these elements can be used outside of a form, but they're more useful inside of a form. And these are but not limited to input, which is a self closing one text area button and select. We'll go over the input text area button and select elements a little bit later. Right now, we're just covering what a form is. A form has a few primary attributes that are extremely important. The 1st 1 is method, and this one is usually get or post. Now, when we use, get and submit a form, the information from our input fields such as input text area, select those are going to show up in the U L Bar. So if you're trying to log someone in, I don't want to use this method. In fact, a good rule of thumb is any time, any sort of information they could even be considered as sensitive needs to go from the browser to your server. Do not use get Instead use post. It will send the same information, but it won't go through the u. R L Bar. Instead, it silently goes in the background, and then we have our action attributes, and the action attributes is where the information should be going. So if it's going to this page, it's going to go to code dot html. If it's going to a server page, you might want to send it to log in dot PHP. PHP is a server page. It's not a static HTML type page, and the action is the file that you want to link to know it doesn't have to be a relative. You, Earl. It could be an exact euro. Now this is what a form looks like in HTML. If we view this in the browser right now, it's not gonna show up with much, and we still don't know what input text area button or select actually does. But it is vital that you understand the different method and action, so your task for this video is simply practiced this. First, I want you to create a new document, and I just want you to practice writing. The form element forms air so vital in HTML, it's how we transfer information from the browser to a server or another service. It's actually so powerful that it might be safe to say that it could actually be one of the backbones of the Web. It's important to know what the method of action attributes are. So your third step is to write the method in action attributes. You don't have to put anything specific inside of them, just write them out. 38. Form Element Attributes: form elements are elements that can be used outside of a form, but they're much more useful inside of a form. These elements are typically the input element, self closing text area, select and button elements. And this video. We're going to go over these very quickly, just as a quick overview. And in future videos, we're going to go over these one by one. 1st 1 we want to go over is the input element. The input element is simply an input field. It's very small, but it's also very powerful. Now if I just write the input, it's a We also have to add a text value here. We were saying, the input type is tax and we'll get into the type in just a moment. So now we preview the page and we have a text area I can write in here. Now the user has some way to interact with your page, your pages, not just information going to them. They can send information. Back Type has a lot of different values that we can use. Text will create a text box button will create a button, but we're not going to use it this time. said. We're going to learn about the button element you can at a check box color. In fact, let's go over each of these so we can see what they actually look like. Start from the beginning. Texas one. Check boxes. Another. We'll get at color date. Those are both html five. Email. The browser will try to validate the email address. If you put in the madrasa and try to submit the form and it's not a valid email address, your browser will say please and put a valid email address again. That's only HTML five file. This is another big one. If you want toe upload a particular file you to use type is equal to file hidden. This one won't show up, so we'll just see an empty line on her page. Get rid of that Texans. It's not applicable anymore. What about a number? You can add a number in there or a password. That means when someone types in that box, that's not going to show up as normal text. It'll show up as those bullet points. What about radio? We could even put the u. R L. There are other ones, but these are the ones that we're going to stick with right now, because these are the most common ones now, before reviews in the browser, I'm simply going to label these now. I view this in the browser. We have a text field weaken right in this text field with a check box. We can select a color again. This is only HTML five a date again. This is only HTML. Five. Old browsers cannot deal with the color and date field email. It looks very much like a text field, but when you try to submit the form and it doesn't work, the form will not automatically submit. In fact, a little error will show up just above or below it. Little tool tip in your browser will say please under a valid email address file. You can. It's like to file hidden. Nothing shows up number. I'm trying to type lighters, and here nothing is working, but numbers will work. I can even move it up and down. Password shows off like a normal password Radio button. This is if you want someone to select one of multiple options and a u L. You are ill. You put the exact website address in there, this is HTML five validation. And if your browser doesn't think that it's a valid u R L. It's not going to let you some of the form again is going to give you a little air above or below it, telling you to input a valid euro at a quick title here, call them Fields. And here we're going to call these ones attributes because that's what we're going to learn next. There's some attributes in here that you need to know. The 1st 1 is the value attributes. The value is the value that you want to put in here. So if we said text field and the value is pre field text refresher page, the text field already has texting there. It is exactly what we specified. Weaken. Select it. We can delete it. We do whatever we want to it. Another one would be. Let's use it on the email Auto focus. So in html we could usually just write auto focus. But because we write x html, which is much more strict, we type auto focus is equal to auto focus. Now, when I refresh this page, doesn't matter what I do doesn't matter what field I go to. Every time I refresh the page, I'm automatically put into the email field so I don't have to click into it. I could just start typing. That's one less step for the user. That often means they're going to fill it information a little bit quicker. There's another one for check boxes. Check. It is equal to checked, so the check box is not checked right now. But if we refresh the page after we added that attributes and now is by default, it is added again. We can remove that if we wanted to. Obviously, check boxes only work for things that you can check, such as a check box or a radio. And auto focus is really only used on fields that you actually input text into. Now let's add another one. Let's disable one we have disabled is equal to disabled, and you'll notice that the URL field here is disabled. Actually change color a little bit, and I cant click into it. When we talk about numbers, we can add a minimum and a maximum. Some men with let's say minimum is 10 and the maximum is 20 Now this one's a little bit if he I can put in any number by typing it. But when I use a little arrows, I can't go any higher than 20 and I can't go any lower than 10. Now if we want it a field to be read, only that means they cannot edit it. We use the read only attributes. I put that on the text field. You know, it's when I put my mouse over a normal tax field changes the cursor. This case, it doesn't when I click into it, nothing happens. I can still select the text. I just can't change any of it. That means there's a field available, but I'm only supposed to read it as the user. I'm only supposed to read it another great one placeholder. Put that on the password, and it shows up in the background. Now it's not selectable text, and it goes away as soon as you type into it. And when there's nothing, there automatically shows up Placeholder as ah, quick warning doesn't always work with Internet Explorer, so sometimes when you add a placeholder for an Internet Explorer, even some of the more modern versions of Internet Explorer. It'll just show up as a blank field, so don't necessarily rely on this. But you could use this attribute as a way to improve your fields for more modern browsers. And if we wanted to add a maximum length max length and this works for text areas, if we want, say, the maximum length is going to be eight characters now, if I type these numbers out, I'm pressing nine right now and nothing is happening. Maximum characters eight. And then, lastly, we have auto complete, and this one actually is not. Auto complete is equal to auto complete. It's either. A lot of complete is on or off now. If you did want it on and someone was typing their email address in and they've type it in email address into a similar form before the browser's going to recognize it and try to auto fill it for you. There a couple others that I want to go over 1st 1 is name. This is a global attributes, and if you're four, method is get the name is going to show up in the u. R L bar, so file would be able to file name is equal to hidden or, in this case, just H. And what that would look like is you'd have your website dot com slash co dot html page, and then you'd have what's called a query string. We'll talk about this later in the get video, but as a quick example, it would show up with Name H is equal to whatever the value is here. So if we had a value of 123 H is equal to 123 and let's actually move this off here and put it up with the email address and say email is equal to and whatever that value be. So let's say the value for email address someone put in the email address as email email at gmail dot com, and this would show up as email at email dot com. So it would literally go to this page again. We'll talk more about that a little bit later in another video, but that's quickly. What the name attribute Will Dio. Of course, all of these can have an I D. They cannot have classes and all of titles. These are all global attributes now. There is no task for this video, however, you may want to view this video just once more, even if it's on fast forward just to get a good grip on what is going on here. There is a lot to know there a lot of different attributes for the single input element, and you're going to need to know, Can you use a placeholder on a hidden input? While technically, yes, but it's hidden, so it's not going to really do anything. Can you put an auto focus attributes on a radio button? Perhaps So, maybe experiment with someone that but the most important thing to know are these attributes. And in future videos will go over the different input text area button and select elements individually without all these attributes, and will just take a look at how they actually operate inside the browser when someone is working with them. When a user is actually using these elements 39. Input Fields: The input element is how we add input to a page that allows a user to communicate with us. They can put in text, hit a submit button and that information goes back to our server server, can then react to it and show them the appropriate information. Like when you sign into Facebook, sign into your own account. Facebook. Understand that you signed in as going to give you a custom feed. So for this, we're going to say type is text that's just normal text field. And just so you know what this looks like, just a normal text field. Now we can also add a placeholder. Call that first name, and when I refresh the page is it says First name is not selectable, but it gives you a hint of what it's supposed to be. Value. The first name could be anything. This is just the default value. You might not always need a default value, but if you need one, you put it in there. And if you wanted to change the width of this input element, used the size. Attribute the size, attributes how many characters long it's supposed to be. So let's changes to 50 and when we refresh the page, it gets longer. Remember, this is characters, not pixels, because if we said 500 pixels, that should take up roughly 45% of my screen. But because it works on characters and not pixels, it takes up what looks to be 250% of mind higher screen. Remember that size is based off of characters, not pixels. If you wanted to auto focus, just type in auto focus, and every time you refresh the page, you can automatically start typing. You don't necessarily have to click into the field. I can click out of it, refresh the page and automatically selects it for me. Know what happens if I duplicate this? There's auto focus on two fields. What's going to happen? And auto focus on the first field. Some browsers may auto focus on the last field. Auto focus should be unique to an individual page. It means if you have a log in page and should auto focus on the email address or user name . Usually it's the first field in a form that is auto focused, but you don't necessarily need to use that either and Let's change this one toe last name and let's disable this one. Now I can change the first name, but I can't change the last name. I can select it, but I can't change it. So essentially, this is your input field. Now, on a previous video, we learned about the different types of input. Fields doesn't have to be a text area. It could be check box radio button. You could actually even be a button itself. For example. Let's see what happens when we change the type to button. The only thing that actually worked was the value status Skywalker and it's disabled. I can't click it. And disabled work size is irrelevant. Placeholder was irrelevant. Refresh the page. Nothing else changes. We know that those are the only attributes that are available to this one. So your task for this video is to first create a new document. And then I want you to create to input text elements. So you write to input elements. The attribute of type is equal to text, and then I want you to disable one of them, keep one enabled, keep the other one disabled, and then I want you to write one more input field. This one is going to be type is equal to password. You didn't see it in this video, but I want you to explore that on your own. Change the type of the input field to password and type inside of it. See the difference between a normal text field on a password text field saving open the document and verify that all your fields work properly. 40. Textarea: the text area is how you write large portions of text. So if you're asking someone to write you an essay, you're going to want to use the text area Text area looks just like this is a text area. It also goes inside the form element just like the input element that we learned about. And this one also takes a closing tag. It's not self closing, and the reason for that is because you're actually putting something inside of it. Unlike the input element, this one does not take a value. Technically, this would be incorrect if you wanted to add a value. You put the value in here. Let's take a look at this page. You're going to notice a couple different things. First of all, it's very small, not nearly enough room that you need to actually write something valuable in it. Secondly, you can resize it. That means if I wanted more lines in here, all I do is hit shift, enter at more lines on most browsers, you can even just hit, enter and add more lines. If this is too small, it creates a scroll bar for you. Now, one thing you need to be very careful of is it is space sensitive. That means all this space in here that, you see, this is a whole brand new line plus all this additional space plus the space at the end. I'll just refresh and show you here and then I'll select all of this. This is the space at the beginning. This is the space at the end of the line. Like you see here now to eliminate that don't add any extra white space in there. So I remove the white space hit refresh and the value is in there. So we're going to want to make this bigger. So instead of adding it with, we call them columns. So for this one, we called Coles is the attribute. And how many columns do we want? Let's say 150 now. These columns are based on the width of the character inside of it. So each letter would be considered a column. 150 is not a pixel value. If it was 100 50 pixels, it would be probably about 1/5 to 1/4 the size of current width of it. Right now. Now, by default, you text area will have to maybe three rows, depending on the browser. Ro, is how many different lines there are. So this is the second road change that change the rose. If we wanted to add 10 rows. There we go. We have 10 rows now, going back to the default value that you see here. What if you wanted on the third row some additional tax. So you're just giving them a quick little template. Template below. Hit. Enter. So now you're on the second row hit. Enter your on the third row. Now, this will say certain row and 1/3 row is in the middle ish. I mean, it's not where it's supposed to be. If we wanted it right to the left, it had to be to the very left of the HTML page, which means this needs to be right over. Now. We have no additional spacing, but that second row has some space. And we might not want that either. Members Very space sensitive. So if we get rid of that spacing, save it, refresh the page. There's nothing in there except a new line. No, a text area can also have a placeholder and more modern browsers. This world is going to be called a sample placeholder in a place where only shows up when there's no tax in here. So if I select all this and delete it, there's a sample placeholder again. This does not work with all browsers, but most modern browsers except the placeholder, especially in a text area. Of course, you can add the name attributes I. D. Class style title, etcetera, etcetera. It goes on and on on all those global attributes that you're aware of right now are available in the text area as well. So your task for this video it's first create a text area, create a new document. If you haven't done that first, then create the text area. Then I want you to change the column with or how wide the text area is to 100. Change the number of rows toe five, and then I want you to write your first name on the first row. But I want you to write last name on the third row, and you should get something that looks something along these lines. Now, this is mainly a test in spacing because of spacing is critical in this. And it also shows you that you can use multiple lines instead of just an individual line. Like what? The input element lets you dio, then saving open your document. Verify your first name and last name on different Rose, as you saw in my example. And if everything worked out the way it worked out in this video, then you're all done. 41. Buttons: the button element has a lot of power, especially inside of a form. Not only do buttons look like great call to actions, so if you're trying to get someone to buy from, you usually use a button or something very flashy or a large, colorful link to get someone to click on that button. But typically, buttons do the trick, and you can style a button multiple, different ways, and often they come with their own type of styling. In this video, we're going to look at the different types of buttons in a form. We have input fields. We have text areas. We have drop down menus, which select we haven't covered those yet. And we have buttons. We're going to cover buttons right now. But before we do that, I want to add tax field with a value of Luke Skywalker, and the name is going to be name. And then we're going to create a button, and this also has a type. Now the button type can be submit button and reset. But I can only be one of these. So for this particular example, right now, we're going to say submit and where is going to say Submit. And that's how we create a submit button in a form. Now if we preview this Luke Skywalker and if I click submit, it doesn't look like anything happened, but it did actually submit the form. So if we look at the u R L up here and says Name, remember, the name was the name attribute. Value is what's going in here and Luke Skywalker now What if someone wanted to reset the form that's at another button and let's call this one reset and let's maybe even put this on a different line so we can see what we're actually doing. Refresh. So I can either submit this or I can reset it Now. Have the reset button here. When you click, it will empty every field going to create an example here. So we have Anakin Skywalker and Luke Skywalker. The reset button. When you click, it doesn't look like it did anything, but what it actually did was returned the values to their default values. Now we told them what the default value was. The value is Anakin Skywalker and Luke Skywalker, So if we said value one and value to and then hit the reset button. It reset those back to what they normally are. Now, if we didn't want any value in there at all, hit reset again. Nothing's gonna happen, has nothing to reset to. But if we said name one and named to hit Reset, it's going to go back to nothing, because there's nothing in that value that is now the default value. Thirdly, we have just a normal button, and this one, just as the name suggests, does nothing. A button is just a regular button. Now, why would you use us? A lot of people use it in JavaScript, Jake Weary. Other people will style it, so it doesn't look like a button. You know there are many different uses for it, but when we're talking just about HTML in a button that does nothing excluding CSS JavaScript and or J. Query, not really that valuable. But it is important to know, because once you start working with JavaScript and possibly Jake weary, it's going to do a lot more than what you think. Now there's one more thing you have to know. If we get rid of the form element, we go back to a page and refresh. It doesn't look like it's any different. If we try to reset it, nothing's going to happen. The input text area button and select elements. You know, the elements that are supposed to go inside the form element A really only useful inside that form element. And this is a prime example. This is no longer inside of a form, and the reset button doesn't work. If I hit the submit button, nothing happens. It's because there's not a form to submit it. You need that form element now. Your task for this video is to create a new document, and inside this document, I want you to create a form element inside this form element. Add the input field with the default value. Our default value was Banik and Skywalker or Luke Skywalker. Yours could be anything. I don't want you to add a submit button below that, and beside the submit button, I want you to create a reset button. Remember, the only difference is the type type is equal to submit or type is equal to reset saving open your progress in your browser and then change the text field that you created right anything else in it. So if your default value is Anakin Skywalker, change it to whatever you want. Put your first name if you like, then hit that submit button. And when you hit that submit button, look up in your UL and I noticed that your address bar changed. And that will only change if you use the name attributes like we did in our example. Lastly, refresh the page, and then I want to change the tax in your text field once more, but this time press the reset button and notice that the default value comes back. 42. Drop Downs: the select attributes is how we create a drop down menu. Never see drop down menus everywhere, but we haven't learned about them yet. It's quite simple. They're very much like lists, so you create an opening and closing tag instead of using UL or a well for on order ordered list we use select because you can select one of many options, and inside of it takes an option element. That option can have a value, and I put the This is the text that will show up. That's not their value. But the value will be right here. So that value was, too and changes to two. And I'm going to add one more and say, Just call this test value and this value is going to be test value. Now when we open this up in a browser, we're going to see a drop down menu with the text that we have put in. Their value is equal to one values eagle to sue and test value. Now, when we select something, it's not going to change at all. Nothing is going to happen. Even if we have a form around it, nothing's going to happen. We need to create a submit button type is equal to submit and Texas just piece of Mitt. And now we're select. Element needs a name so we can see if it actually works. When we submit the form name is able to selected to be anything. Now I've refreshed the page, and when I select test value or value to our value one and click submit, it's a bit value to Are you? L says code dot html selected is equal to two. That was the value of number two. Let's see what happens when we select test value. Test value shows up, and that's because that matches not only here but matches the value in here. So remember this inside area? That's what's going to be visible. That's the text that is seen. But that is not the value that the form is going to submit. The form is going to submit the value in here. Now let's disable. One of these. Disabled is equal to disabled and, you know, let's just call this value three. To stay on track with the 1st 2 there, refresh the page, and now we can no longer select Value is equal to three so we can disable these options now . There's one more thing we wanted to say. Someone can select multiples we had. The multiple attributes toe are select element, and now someone can select multiple values the ways they select multiple values as they collect one value and hold command or control while clicking the other ones. They can toggle them on her off. Now, if they selected all three hit Submit. Rul is going to look a little bit strange now because it's a selected is equal to one. While we did select the first Values like is equal to two. We did select the second value and selected is equal to test value. That was the 4th 1 Now we can also, if we really wanted to disable the entire drop down menu by adding disabled to the select element, I can no longer select any of these. And to make this more clear, let's get rid of the multiple attributes. I can't even select the drop down menu anymore, and there is just one more attribute that I want to show you, and what I'm going to do here is fix us up so that we know what we're looking at make it a little easier gonna add value for us that we have value 123 and four, but this one is going to be selected by default. For this, we write, selected is equal to selected with quotations around it, and when I refresh the page, value for is automatically selected instead of the 1st 1 being selected like it was before value for selected. And if we had one more value, we have value five year value for still selected, even though there's an option before and after it. That is the select element. So your task for this video is to first create a new document. And then I want you to create a new form element like what you saw in this video, where the form element was wrapped around the select and button elements, then create a select element that's a drop down menu. Don't worry about adding a name, but inside of the select elements, I want you to write five option elements. They all have to have a value. Make the values 1234 and five. But whatever text you want inside of them possibly use 1234 and five as well to match the values of each option element. And then I want you to make option one disabled and make option three automatically selected. When you're done that saving open the document and click on your new drop down menu, you should notice that Option one is automatically disabled. You cannot select it. An option three was automatically selected, even though it's not the 1st 1 in the list. 43. What is GET?: in this video, we're going to look at the difference between the get method and the post method using a form. So I'm going to create a quick little form here. All right, I have a form, and I'm going to preview this in the browser so you can see what it looks like. If you're unfamiliar with how we got the inputs here or the button. There are other videos that go over that in this video. We're not going to go over how we created those inputs for the submit button. Now we have a form, and we spoke earlier about the method and the action attributes in this video. We're going to talk about the method. Get what Get well, dio when you save and reload this page and then you submit your form is going to put your information in the U. R L bar. So I'm going to go ahead and do that, Caleb Tall, lean. And when I click, submit something a little bit different is going to happen. That information that I've inputted it is going to show up in my ul bar, and the information is going to be a key value pair so hit submit and in the U. R. L Bar says my file name is co dot html. Then it has a question mark that means everything after this is part of the query string. This whole section here is called a query String F name is equal to Caleb and l name is equal to tall lean. Now, when we look at a code we had f name That was my first name and L name was my last name. Now we can do this with many different types of inputs. I'm going to create one more here, and I'm going to call it a J. And it's going to be a drop down menu. We have different values. We have valued 10 to 2020 30 and the information inside each option is the exact same quick little caption Beside it. Refresh the page. I know I haven't aged Drop down menu. My first name is going to be Jon Snow and is estimated age is probably between 30 and 40. Hit. Submit. Now that information goes away in the form, but again it shows up in the U. R L bar, where the first name is John. The last name is snow and the ages 30 to 40. Now this is called a get method, and any time you submit a form with the get method, your information will show up in new Orlebar. So if you have to submit any form, or your users are going to submit any sort of information that could potentially be considered as sensitive, we're talking about secret passwords, passwords, credit cards, anything like that. Those air extremely sensitive pieces of information. But even if you considered someone's date of birth to be sensitive information or their age , depending on what your application is all about, then you may not want to show that information up here because that's accessible to everybody. Assumes that user hits that submit button. It shows up in their U. R L Bar. Now, to show you what I mean, I'm going to create one more input. We're going to call it password. Refresh the page. Now I've got a name, last name, an age and a password, and you're not going to be able to see what I can write. And there's probably no way you can guess what I just typed, However, when I hit that submit button. That password shows up and you can see it here Password is equal to, but it shows up in the U. R L Bar. Now where this comes in useful is when you're using a service side code such as A S, P or PHP, and it's trying to get the information out of the URL bar. Sometimes it is very useful to put some information up in the world bar because you're you can change the content on your page, depending on what the variable might be. So if this was, it would look a little bit more like this. Co dot PHP query String page is equal to 123 We could then pull that information onto the server. The server would recognize that page is equal to 13 to 3. It would create a variable for us, and we can change everything that's on that page, based purely on the information in here. Now that's where it becomes really powerful. Now your task for this video is to create a new documents. Then I want you to create a form element with the get method, just like we did. We opened a form element. The attribute, called Method, was equal to get. Then, inside that form element, I want you to add an input field, just a regular text field, a password field and a drop down menu. Then, on those three fields, I want you to add the name attribute to each element. So you're Texeira, your password field, and your drop down menu should all have the name attribute, and the value should be different. For example, the text input field could just be called name. Password could be called password or pass after that at a submit button to the end of your form, saving over the document in your browser. And then I want you to fill out your form. Hit the submit button and you'll notice the data is inserted into the U R L Bar. If your information shows up in the URL bar properly the way it showed up in this video, then you have successfully created a submittal form using a drop down menu, a password input and a text field submitted by a submit button, and the information was sent to the U R L Bar. Once that's working for you, we will see you in the next video 44. What is POST?: when we submit a form, there is another way to submit information. In a previous video, we learned that information through the method called Get instead of post. We see. Yet the get method will automatically put information into the your Albar, and that's not always what we want. So in this example, we're going to learn about the post method, where it still sends the same information to the server. However, the information is not readily visible to your end user. So here what I did was Method is able to post rather than get like we did in a former example. Action. I created a new PHP final. This is a server side filing you for not familiar PHP or SP. That's fine. We're not going to go over any of that right now. This is purely a demonstration. Were the first name with the name of F name. With age is a drop down menu password and name is password. Then submit button. Now, when we view this in, the browser looks like an ordinary form. So first name. Let's put hon age 30 to 40 possibly before you 50 password. You can't see what I wrote for the password. Now, when I hit submit two things are going to happen. Their 1st 1 is if we look at the URL bar, it went to post dot PHP went to completely different file. That's the action file we specified in action, and it sent that information to the post at PHP page. The second thing is, these are the variables that you would normally see up in here. So instead of seeing F name is equal to Han, an age is equal to 30 to 40 and password is equal to whatever I type. So instead of seeing something along these lines, that information does not show up in the U. R L bar. Instead, we can access it from the server. Now again, we're not learning about the service side stuff right now, but this is an example to show you that the post method will send the information the same information to the server without showing it in the Ural Bar. Now what happens if we remove the action completely? But the methods stays as post retyped. This in here now there's no action, but the method is post now. It doesn't look like anything happened. Our you are L bar doesn't seem to have changed at all. In fact, it looks like the actually reset our form now. That's because that post information is not readily available to us. And to make sure that this work the way we want it to work, simply try refreshing the page. After you submit a post form and you try to refresh the page, most browsers will give you a little bit of a warning, not warning. Often looks something like this confirmed form re submission the page that you're looking for used information that you entered. So it's telling us that the information we entered last time it's still being used. Returning to that page might cost any action that you took to be repeated. Do you want to continue? So it's saying that if we refresh this page, there is a chance of the same Information is going to be submitted again. Now, if someone is submitting a credit card or a user registration form, you don't want that information hitting your server twice. So the safest thing to say would be cancel. And if you hit, continue Well, Chrome didn't show me anything because it's trying to use the information. Now a dot html extension, by default, cannot use any server side methods or functions or any sort of power that comes with writing a service side language. H Male is purely on the user, so there's no information to be shown here. But if we try to refresh the page again that same morning comes up. That means the page is still trying to use that same information, even though we can't see any of it. We know it's there. So your task for this video is to create a new document inside that document, create a new form element and, in that form element use. The attribute called Method and Method is equal to post, just like we saw in this video at a text field at a drop down menu and add a password field . Then add the name attributes all of those fields that you just wrote. Then, at the end of your form, right, a submit button saving. Open the document in your browser, fill out the form, submit the form and you'll notice that nothing seems to have changed. In fact, it looks like it just completely reset your form. Now. At this point in time, hit the refresh button either on your keyboard or click the refresh button in your browser . And if you're using a more modern browser, you will see a warning like we saw in this video. If you see that warning, you know that your successfully sending post information to the server you can't see it, but you know that it's working. 45. HTML5 Semantics: HTML is all about semantics. It's not about styling, necessarily. It's not about looking nice or being perfectly presentable. HTML is a structure behind every Web page, and in order for a Web page to be displayed properly, the browser needs to understand what it's looking at. If the browser does not understand what it's looking at, your page might show up a little bit differently than what you had expected. Now, up until recent years, we've always used elements like Div, and we'd add a lot of styling to it to basically reset it, to make it do whatever we wanted it to dio if we wanted to use it for a navigation bar or a header or footer or a section of you know, an article or, in fact, even just a section. We always use the development. There are a number of other elemental we've always used. We've always just kind of reprogrammed them to make them do what we want them to dio, and that usually involves a lot of different styling. Now, HTML is not about styling. It's about the browser being able to understand what it's looking at. So when Google looks at your Web page. It doesn't see what you visually see. It looks at the code that you wrote. So when it sees another DIV area with some content in here, all the cities is a divided area with some content in there. It doesn't necessarily know what is looking at. HTML five has a lot of different elements that are now standardized. That reduces some of the ambiguity between them or common elements such as def. So if this was part of an article, this could be an article. Google or Bing or whatever crawler or browser is looking at your page right now, it will understand that this is an article or if we had a diff at the top of a page. We had some fancy styling to make it float at the top of the page whenever you scroll down on had your navigation options in here, and that allows you to move from page to page user search bar, whatever it is on your website that would be considered a navigation bar. So instead we put knave. That means the search engine is now understanding that this is a navigation bar, that they're certain links, and here it's going to prioritize which links it should look at, shouldn't look at it just has a better understanding of what it is looking at. So why is this important to an everyday user? A non Web developer to regular Internet browser? It does not matter. They will never see the difference, and they will probably never care about the difference. However, as a Web developer, you're not building websites just for people. You're building websites for other programs to access for other search engines, access for browsers to access, possibly a chrome extension or and add on or a plug in to another browser. If someone had a plug in on, let's say Firefox, and it was meant to remove all the unimportant information on a page. To the exception of an article, however, maybe that extension on Lee looks for an article that actual element and everything else it cuts out. If you're not using article, some user is going to be very unhappy now. That might only be a tiny, tiny, tiny portion of your target audience, but you don't know what they're going to be doing on your website or how they're going to be using it search engines for things like search engine optimization. If you can make your page easier for a search engine to understand, then you'll probably get ranks a little bit higher. There's no real science behind that, but it really only makes sense from a programmers point of view. So your semantics is really important if you don't have to use the development for an HTML five page, don't use the header footer article section, navigation there ton of other ones. All you have to do is hop on Google and search for something along the lines of different HTML five elements, and you'll notice that there are a lot of them and more of them are coming in every month. There's no task for this video, but instead I want you to understand that there is an importance behind the H Mill five semantics, or we should just say the HTML semantics. HTML is meant for the structure the mark up, the template ing of a site, but it's not necessarily meant for the styling. Styling is something completely different, and the structure of your page can tell a browser it can tell a screen reader it can tell a search engine a lot about what is on it 46. Video: using HTML five weaken directly embedded video straight into our page, and we simply use the video element. Video element has an opening closing tag on Inside of the video element is the source element, and this takes two attributes. SRC for the source. Just like an image and type, the type will always be video slash. Whatever the video extension is, for example, and before they're going back to the video element, we can change the with the height, add controls and auto play automatically just through adding attributes. So that's why we wanted a With of 500 height. Let's make this very does proportional and put this at 1 50 and we do want to see the controls now For this to work, I'm going to need an MP four video. I just happen to have one called prime video dot mp four. This is a local video. It's on my machine right now, but for you you can use any MP four video you like. So let's preview this, and I want to see the area that we're working with here we go with this. 500 height is 150 it has our controls in here. We can make it full screen change of volume, play and pause. Fast forward to any part of the video, just like a normal video. Now, if we wanted Toe auto play this sooner, someone lands on the page that you're creating. Turn auto play on. And when I refresh this page, you'll notice that it's automatically playing. Now there are two more things you need to know. The 1st 1 is Source does not have to be an MP four. It can also be what's called Web M or org, and the extensions would reflect that as well. So don't Web M is Dot is video slash web dot org Is Video Sochaux G. Now for a browser that does not support HTML five and older browser, it's not going to recognize a video or the source elements so we can write something in here. It does not require another element. It simply just goes in with the source. And we could just say you do not have an HTML five enabled browser. Your browser is going to look through these sources going to try to figure out the 1st 1 that can use just prime video dot and before exists. In this case, it does Does dot web m exist No. Does dot org exists? No. So they should not be in here. And our video element should look just like this. However, we save this preview our page, it still works. Now what happens if I put and before at the very bottom where we don't have a web? Um, we don't have an Ogi file. Refresh the page. It still works Now. The reason for that is because the browsers looking for Web and then going to look for Ogi It didn't find either of those, but it did find an and before. So it's going to use that. So your browser simply goes through each source and tries to find the source of the video. And when it finds one is going to use it, it is highly recommended that you use dot mp four. It's the most widely accepted video format. It works on all browsers, and you won't have a problem with it. It also has a great compression method, so that means your videos are going to be smaller and the load faster for the user. Now that's it for the video element for this video. I want you to create a new document inside that document. Create the video element just like you saw here. I want you to then find an MP four video. You can probably download one anywhere on the Internet. Most computers usually have a dot and before video somewhere available. So find a dot and before video and added to the source. Attribute inside the source element that remember that source element was inside your video element very much like a select element has options inside of it. Video has source inside of it. Then add some text for non HTML five browsers on your video element. Turn on your controls, turn on auto play. Then I want you to save an open the document in your browser and verify that your video works. If you have done all of these steps, your video should have control so you can pause it and the auto play will automatically work 47. Audio: html five allows us to automatically embed music or sound. This is an HTML five only element, so it only works with more. Modern browsers won't work with the old browsers, and the element that we're using is called audio has an opening and closing tag. And just like video, it also has a source. Tag takes the SRC attribute. That's a source of the audio, and it also takes a type to let the browser know what type of audio it's supposed to be playing. The audio element takes a couple different parameters. Core attributes. One being controls. Can you control the sound in control the volume? Yes or no in this case were saying Yes, we want to be able to control the audio and auto play. Now none of this is going to work without a source, so the source for this is going to be Ben Sound epic dot mp three. I just found this royalty free music on ben sound dot com and the type would be audio slash mp three. Now, if a browser does not support html five audio weaken, simply type in here without another element just inside the audio element. Your browser does not support HTML five Audio. Simple is that. And if your browser does support HTML five audio, this text will not show up. Now I'm going to preview this page and it automatically started playing. We also have controls here. I can change the volume, and all it is is audio. Now what happens if I take the controls off? Teeth controls off, but auto play is on save. Refresh. It played the music automatically. I had no control over the music, and it was just going to play over and over again. Great. If you're setting up a movie theater, not great if your user on a Web page don't necessarily want to hear different music, different sound effects on a page. Most people browse the Internet while they're listening to music, or they have another video a movie on, and they don't want other sounds interfering with that. So be very careful of disabling the controls with auto play turned on. Now, one last thing. We have two other types of audio that we can stream Oh gee gee, just like with videos except with a video instead of audio slash o. G. It was a video, social Draghi, video elements and so on, and we also have wave. The wave is usually going to be the largest form, so it might take a while for a slower Internet connection. Toe load, all of it so we can start playing Ogi not widely accepted, but MP three is the most widely accepted audio format on the Internet. It also has a great compression ratio, which means your your music or your audio file is going to be smaller. And because of that, it's going to load faster. For the user, the quality isn't so bad. Your process is going to look at each of the sources as well and try to find them. If this browser my browser, was looking for an O. G filing, it didn't find it, it would then try to look for a way file, and if it didn't find that it would then look for an MP three file. So if I save this because the Ogi and Wave files don't exist and I refresh my page, it still works now because I don't have the other two available. Don't technically need the elements in there, so your task for this video is to create a new document at the audio element, then add the controls attributes to that audio elements for your source. I want you to add an MP three file. Feel free to go to ben sound dot com and get a audiophile from him. Then I want you to add non HTML five browser text. So if the browser cannot use the audio element, it'll show some text and said saving open the document in your browser and then press play on your audiophile. If your audio element starts projecting music or sound of any sort, whatever your MP three file is, then you have successfully added audio to your page. 48. Responsive Design: responsive design is the ability to change the template and styling of a page based on the browser with now. What that means is, if someone is viewing your website on a particularly large browser that's usually a laptop or desktop computer, the width is going to be quite wide. But if someone then views that same page on a phone in mobile device, a tablet would be roughly 70 75% the width in pixels, as your laptop would be and your phone could be half of that. Possibly smaller possible little bit bigger, depending on the phone. Now we don't know every single device that's out there. We don't know the resolutions of everyone. We don't know which people are using which resolutions. We're going to access the website at what time, and that becomes quite problematic. And what we actually want to do is create a website that's available for everybody. We do this with a term called Responsive Design. Some people call it mobile First mobile ready, but essentially every website needs to be responsive has be responsive to the width of the browser. Now the idea is if you open up a Web site Let's say Facebook on your browser on your laptop , and then you open up facebook dot com on your mobile device, your tablet, your phone, whatever it may be, it's going to look different. It might even act different. That template things going to be different. You could have a navigation bar that floats with you might not float with you. Your search bar might be bigger. Might be hidden, you might seem, or information on a laptop because the laptop has more real estate, more area to work with, whereas on a mobile device there's not usually as much room. So some of the less important information is not visible now because we don't know who is going to be on the phone, who is going to be on a laptop was going to be on a tablet. As Web developers, it's our job to build for everybody. Now that does not mean you have to build one website for mobile devices such as phones, another for tablet, another for laptops, another for desktop. Instead, you can use different libraries, different groups of code that other people have worked on in order to create just one website that works across all devices and reacts accordingly. Now, why this is important right now is because we're in a major transition time. Most of the world came online through desktops. Computers were quite big was 2030 years ago. They weren't very powerful than laptops came out. People were able to take their desktop anywhere and continue doing their work basically anywhere for at least a few hours without running out of battery. And if there was a plug in somewhere, Well, now you can take your work everywhere with you that was very powerful. But now we have tablets and mobile devices such as your android or iPhone and more people who are coming online. Our starting with mobile devices, mostly because phones are cheaper for someone to buy their phones. I can access the Internet that you can buy in different areas of the world for $50.100 dollars and they go upwards toe 78 $900 depending where you're at what kind of phone you want. But they all access the Internet now. Now, while more and more people are coming online using their mobile devices, we still have a lot of people who use laptops. Now, if you're a Web developer, you're going to be writing code on a laptop. It's pretty much inevitable at this point time. And while you're creating a website on your laptop, other people are going to be accessing the website on their phones. You're going to have to access it to test it on a laptop and on your phone, so there's a lot of mixed here. I'm not going to rattle off a stat based on how many people are accessing the Internet from their phones right now. But it's very high, and it's only going to get higher now. What this means is your website has to be friendly for everybody. If it's not friendly for everybody, you could be missing out on some very important traffic. A great example is if you're going to create a social network that was only available to people in India. Well, there are a lot of people in India that have a fair amount of money, and there are a lot of people who don't have a lot of money. But you want everyone in India to use your social networks. You're going to have to build for both And as time proceeds, less people will be buying laptops and desktops and more people just be buying tablets. So a quick history as a developer, we used to make just desktop websites. It was the only technology that we had. If it didn't look great for everybody, well, the end user just had to live with it. That's no longer the case. Then we'd make a secondary site just for mobile devices. That's when the iPhone first came out and Internet enabled devices handheld devices such as your iPhone. Even for the first few android phones, people were still making mobile websites just for these places, and they're telling to go to m dot website dot com. So m dot cineplex dot com is one that I see quite regularly on Ah, in commercials. M dot facebook dot com is another one, and now we have to make mobile first websites that look great for both mobile devices and deft up wherever they land. It's important that we do that now. Most developers use a framework called Bootstrap. You can find that at get bootstrap dot com, and it's coupled together with a JavaScript library called J Query. You can find out a. J coury dot com Jake is a JavaScript library that works on every browser. Cross browser compatibles is the terminology that we use, and the reason it's so powerful and so widely accepted across the entire Internet for almost every developer, every front end developer anyway is because every browser understands and uses JavaScript just a little bit differently. And because of that, a single JavaScript library that lets us do everything just one single way that unites all these browsers together is extremely powerful for us now, going back to Bootstrap Bootstrap is a standardized teaming system, and it uses CSS, HTML and JavaScript. And it couples all of these together with some cool JavaScript tools that allow you to instantly do things. Now again, this is not a JavaScript course, but boots Drop is by far the most common mobile first or responsive design libraries available. Now it's at this point in time where you probably know enough HTML that you can download and install bootstrap and you can read through their documentation. That documentation is quite well organized. Actually, it's not super boring. They've got great examples, and you can start building things on your own, even if you don't know CSS or JavaScript. There are a lot of powerful parts of bootstrap that don't require either, and there are other parts called components that do require HTML markup. Bootstrap comes with its own styling, so you don't have to worry about that. That's all handled for you, and you can enable a lot of JavaScript features by simply writing HTML attributes. So if you wanted to head over to get boots drop dot com, that would be a great place to keep to keep progressing forward. So your next port of call is to go to bootstrap, get bootstrap dot com, download and install it and just start using it. You don't necessarily need to know all of the CSS or the JavaScript because they make it so simple. You can write most of your website, a responsive website using just HTML, and by doing that, you're going to kick start your going to fast forward your career as a developer by many months, possibly years. Just by doing that,