The Ultimate HTML Developer 2020 Edition | Kalob Taulien | Skillshare

The Ultimate HTML Developer 2020 Edition

Kalob Taulien, Web Development Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
51 Lessons (6h 48m)
    • 1. Welcome to The Ultimate HTML Developer

    • 2. Introduction to This Course

    • 3. What is HTML?

    • 4. Getting Started

    • 5. Editors

    • 6. Browsers

    • 7. Elements

    • 8. Hello World!

    • 9. Page/Tab Titles

    • 10. Doctypes

    • 11. Attributes

    • 12. Headers

    • 13. Line Breaks

    • 14. Bold vs. Strong

    • 15. Italics vs. Emphasis

    • 16. Underline

    • 17. Code Comments

    • 18. Links

    • 19. Internal Links

    • 20. Relative Links

    • 21. Images

    • 22. Block Elements vs. Inline Elements

    • 23. Div Elements

    • 24. Lists

    • 25. Introduction to Tables, Rows and Cells

    • 26. Tables: Merging Cells, Rows and Columns

    • 27. Mid. Course Break

    • 28. The DOM

    • 29. Introduction to XHTML

    • 30. Inline CSS

    • 31. CSS Crash Course & Internal CSS

    • 32. External CSS & CSS Files

    • 33. Code Formatting

    • 34. Bold & Italic Semantics

    • 35. Head Elements

    • 36. Meta Tags

    • 37. Asset Pathing

    • 38. Favicons

    • 39. HTML Entities

    • 40. Introduction to Forms

    • 41. Input Elements

    • 42. Textareas

    • 43. Buttons

    • 44. Dropdown Menus

    • 45. New HTML5 Semantic Tags

    • 46. Videos

    • 47. Music/Audio

    • 48. Introduction to Responsive Design

    • 49. Your Project, Part 1

    • 50. Your Project, Part 2

    • 51. Summary

29 students are watching this class

About This Class

The Ultimate HTML Developer 2020 Edition is the re-recorded, modernized and higher quality version of the original Ultimate HTML Developer Course.

This course is about teaching you proper HTML. HTML is the structure behind every web page and you cannot create a website without using HTML, including mobile websites and cross-platform compatible HTML5 apps.

100% of all web development jobs require HTML knowledge. This course will take you from complete beginner to expert.

I've also designed this course in a special way to prepare you for the real world. We'll look at real life HTML code, learn how to write HTML form scratch and how to "hack" up the source code of a website. 

If you are interested in becoming a web developer.. learning HTML is the first step you MUST take (it's not optional; everybody starts by learning HTML). 


In this course you will learn everything you need to know about HTML and HTML5. Even if you know HTML, this course will teach you the ins and outs of HTML/HTML5 and challenge what you think you know.

This course specializes in HTML only. You will become an expert in just a few hours!

Why would you consider taking this course?

If you have an idea, want to start a company or just want to make websites for fun, this course is for you. The Ultimate HTML Developer 2020 Edition gives you all the HTML skills you will need to succeed as a web developer.

What comes with this course?

  • Ultra high quality video and audio, professionally developed. 
  • Access to all the code so we can write code together. 
  • Direct access to me. Ask questions and get help at any time!
  • You and me are going to be coding together.
  • Almost every video has a hands-on task to get real life experience and practice.
  • Direct face time with me. I don't hide behind the camera. 
  • No bloat. This course has all the excess "nonsense" stripped out of it.
  • Guidance on what to learn after HTML.
  • Explanations about everything.

By the end of this course you will know as much HTML as a college student and you'll be 100% ready to move on to the next step as a professional: CSS and JavaScript.

Throughout this course you'll also be introduced to a little CSS so you'll be prepared to take your next class after this one. You'll also see a tiny bit of JavaScript. The idea is to lightly expose you to future subjects you'll be learning without overwhelming you. 


1. Welcome to The Ultimate HTML Developer: Hello, End. Welcome to the ultimate HTML developer. This is the re recorded re released version of the already top rated HTML course. In this course, we are going to be learning everything to do with HTML. Now. If you want to get started with Web development, you are going to need to know HTML 100%. You can not get away with not knowing it. It is the very first thing you should learn when it comes to front and Web development. So if you ever want to get into JavaScript, you're definitely going to need to know HTML. If you want to make beautiful websites, you need to know HTML. And the nice thing is learning. HTML is super easy, and I'm going to make sure everything is nice and easy for you in this course now, this course comes with about 45 ish different lessons. It comes with different tasks at the end of almost all of them, so you get hands on experience. You have direct access to me at any time. You can always ask questions if you get stuck. All the videos are recorded in HD as well, so it's a little bit better than the older version of this course, and I'm going to help you get set up with difference tools. So, your editors, your browser's things you're going to need, So I'm not just going to say hey, start writing HTML. No, we're gonna start at the very beginning, and we're going to go through this from the very start. So if your brand new toe web development this course is absolutely for you. Thanks for checking out my course, and I hope to see you inside. 2. Introduction to This Course: hello and welcome to the ultimate HTML developer. In this course, we're going to be starting your Web development journey with HTML. So chances are you are interested in building something on the Internet, and if you are, then you definitely need to know HTML to some degree. Now we're going to be going through just about everything in HTML, including HTML five. We're going to have a task at the end of almost every single videos. You can get some hands on experience. There's going to be a little project at the end, and we're just gonna take things nice and slow. So you don't have to feel overwhelmed or confused about where to start or anything like that. Now, this course is purely HTML. There is no CSS. So we're not going to make things look really nice. We're not going to be writing any JavaScript at all, So if you're looking for a JavaScript course, this is not it. This is just purely html and again, this is the beginning of your Web developer journey. Everybody has to absolutely start here now. These videos can be somewhat compact. If that is an issue, don't forget, you can always slow down your player. I do highly recommend that you watch every single video. Even if you already know about a subject, Watch it anyways. You might pick up on something new. It's good practice. And again, there's a task at the end of almost every single video for some hands on experience. So that is a really good way to take this course. And lastly, if you have any questions while you're taking this course, you can always ask them directly to me in the comments section down below. Congratulations on starting your Web development journey, and I look forward to seeing you inside. 3. What is HTML?: Hello and welcome to your first official lesson on learning HTML. So we're not going to be writing any code in this video, not particularity. But we are going to learn what HTML is now. As a core understanding of what HTML is. It is really the skeletal structure of every single website. You can't have a website without HTML. It is the structure behind it. We're going to dive into this in just a moment now. HTML stands for hypertext markup language. It's responsible for bold paragraph Tallix images. Ah, lot of videos thes days if it doesn't include flash, which pretty much there isn't any more. Now, one of the things that HTML does not dio is it does not make your site look beautiful, so it doesn't add particular colors. Necessarily, It doesn't add a nice rounded features. It doesn't do a lot of things, so it is really just the skeletal part of your website. And a little bit later, once you're done learning HTML, you can learn about functionality, which is JavaScript, and making it look nice, which is CSS. But for now we're just going to learn the basics. So let's take a look at an example here, so I'm just going to open up. I am db dot com and I'm going to right click and you can see view source here. That's an option that you can click click on view source and you will see all sorts of stuff in here. We're going to see a little bit of hte email. I'm sure we're going to see some CSS. We're going to see a little bit of JavaScript, which is what our window was filled with. Right now, I'll just make that a little bit bigger, and we need to sort of understand what all of us actually means. And to begin, we need to understand what HTML CSS and Javascript sort of look like. So all this stuff in here, that stuff that's not really colored, that's JavaScript, and it's really just looks like a mess, to be totally honest. So we're going to ignore that we're not learning any of that stuff right now, but if we scroll way down, we can start seeing we have a div. We've got an H five u l l I a Looks like we've got something that I can click on. We have all sorts of stuff in here, and this is what HTML is. It looks a lot like this. Now we're going to get into all of this and sort of what all of this means. And you know, what is a class and and how do we assign a class and strong and even what this thing is? We're going to get into all of this in this course Now, at the end of every video will just about every video. There is some sort of task for you to do something to get your hands dirty just to get a little bit of experience to follow along with me. So what I would like you to do is open up imdb dot com or maybe facebook dot com or something, and just right click and go to view page source. It might actually just be called view source, depending on which browser you're on. So click that and you'll see all sorts of stuff in here. This is the first step to actually understanding HTML. It is being able to read it, being able to access it, being able to just see that it is completely available to you and your browser. So again, just open up a Web site. Right? Click view page source. Maybe tinker around here, maybe trying to see if you can understand some of it. If you can't, that's okay. We're going to learn everything you need to know about hypertext markup language. 4. Getting Started: all right. Before we do anything, I think it would be a really good idea for us to get started with HTML right away. We're not going to learn about all the ins and outs of HTML. We're not going to learn about editors and browsers and all that other stuff right now. We're not going to get into all of the technicalities right now. What I would like us to do is simply write a little bit of age to, and this takes no longer in about one minute. So open up your favorite browser for me. I'm using Firefox and we'll talk more about browsers in a little bit and navigated to code pen and dot io, and you're going to see a site that looks something along these lines on DA. We just want to create a new pen, click on, create a pen, and yet let's I'd rather not take the tour, so this is actually pretty easy. We have three columns here, html CSS and JavaScript, and throughout your career as a Web developer, you're going to see this all the time. Code man is very, very popular, So let's types, um html. So I'm just gonna move this over and gonna make this a little bit bigger and in order to write some html weaken, literally. Just start typing so I can say anything in here and this is going to show up with I can say anything in here now. This is not html. This is plain text, but to add HTML is super super easy. So what if we wanted to add, Let's add something that's noticeable. It's at an underlying. So let's put a you there and let's put a slash you here and you can see that this opening tag starts just before the words say so. The underlying starts just before the word say and the closing tag, and again we'll talk about tags and all the ins and outs of this. It ends right after the word anything and this ends or the underlying ends right afterward . Anything. So now if you go ahead and do this, if you just open up code pen dot io create a new pen and just do this exact example. You are already writing HTML. So I would highly recommend that you do that. In fact, I'm gonna make that the task for this video, so open up your favorite browser, Firefox Chrome Safari Edge doesn't really matter. At this point in time. Open up code pen dot io and create a new pen, and then once you've created a new pen, you want to type any sort of text in there doesn't really matter. Add this tag so it's bracket you bracket and then add brackets. Slash you brackets at the end of wherever you want your underlying to stop. Once you do that, head on over to that next video, and we are going to learn a little bit more about browsers and editors and things like that . 5. Editors: okay. To write some html on your computer, you can use code pen, which is what we use in the last video. But you'll probably end up using a proper program. Now you're going to want to use a program that can edit text. But you're not going to want to use a program such as Microsoft Word because it has too much sort of stuff behind the scenes. We call that metadata. It sort of just bloats the file and doesn't actually just right. Raw text. It does a bunch of other stuff behind the scenes. So to write HTML, we actually use a specific type of program called an editor. And that editor just lets us, right, Rod, text straight to a file. Really? All it is now, there are several options out there for you to get started with an editor. All of these options are going to be completely free. I'm going to start with number one V s Code V s code is made by Microsoft Super Super Popular. That comes with all sorts of goodies and whatnot in it. Plus, it looks fantastic and it runs quite fast, So I would highly recommend V s code. And that's what I'm going to be using in this. In this course, I'm going to be using V s code. Next is Adam. Adam is also made by Microsoft is actually made by Get Hub. But get up on my Microsoft. That one is actually really, really cool, too. I haven't used it too much, but I have a bunch of friends who love Adam and is really, really good editor again. It's absolutely free. Next is sublime. Text three. I've been using this one for a couple years, and I've been using sublime text to for years before that. I really like it at Super Super fast. It's way faster than V s code. It is free, but it also it's called neg, where so, like every 10 saves or so, it's going to say a little pop up and say, Hey, do you want to buy this? Do you want to donate? Do you want to buy this? Do you wanna donate? Do you want to buy this? Do you want it? So it's a little bit annoying, but it's a really good editor. I also used this editor when I'm not recording when I'm working on particulate projects that have larger files. So maybe have to open up a 20 megabytes or or even a one gig file. I would use a blind for that. Otherwise, generally, I just stick with V s code. Next is brackets. I've never actually used brackets, but I see tons of people talking about brackets all the time s I'm gonna throw that one on the list. I do believe this one is free as well. And lastly, we have no pad plus plus, which sort of gets an honorable mention just for being so lightweight and simple, Although to be totally honest, you're probably not going to want to use no pad plus Plus, it's just really old school. It's not. It doesn't give you all the goodies that all these other editors will give you. And last but not least, if you want to follow everything without an editor, if you want to follow his whole course without a particular program on your computer, you can always open up your favorite Web browser and go to www dot code pen dot io. Then you can do everything right in code pen. You can follow this entire course right on code pen. You can save your progress. You can share your links. You can even make revisions to it and come back to a little bit later with a save link again. Code pen is completely free as well. They do have a pro tier, but you don't need that. So your task for this video is to find an editor that you like and either downloaded or just choose to use it. For now, you can always change it down the road. You're not stuck with us for life. However, my recommendation is if you go to download a program, you might as well get V s code. It's super popular. Super lightweight people really like it these days. There's a ton of support of their lots of extensions, lots of goodies, and Microsoft is backing that one. So that's sort of a big deal in the editor world. So ah, download one of the editors sublime V s code Adam brackets or note pad plus plus something along those lines. Once you have that installed on your computer, I don't know if it's not next video and I'll meet you over there 6. Browsers: Let's talk about browsers, browsers or how you view any website at all, whether it's on your phone, your tablet laptop or even your TV, there's some sort of browser running in the background. You're probably even using a browser toe. Watch this video. So there are tons of browsers out there. Probably hundreds, maybe even thousands. I don't actually know, but there are really only four that you need to know about. The 1st 1 is chrome. It is the leader in today's sort of browser war, I guess. Nexus, Firefox, Safari and Microsoft Edge. Now, if you're using Internet Explorer, please do everyone a favor, including yourself, because this is going to get really, really hard for you if you continue to use Internet Explorer. But if you can upgrade Internet Explorer to Microsoft Edge, that will be a godsend for, well, mostly just your sanity. Internet Explorer is old. You will run into problems. You will eventually have to build a website. We have to support Internet Explorer, and it is terrible. Microsoft Edge is the successor to that. So if you are a Windows user and you do like Internet Explorer, feel free to get edge edge is pretty good, but generally we have chrome, safari, firefox and edge Alright, so I've mentioned a few browsers. Now there is a little a slight little problem when it comes to different browsers as they implement things differently. Luckily, HTML is not really something. The implements differently. HTML is generally the same right across the board. But when you get into CSS and especially JavaScript, ah, lot of features will still be the same. But occasionally we'll run into something that doesn't work the same on chrome as it does in maybe fire fox or edge or safari. Next, you're always going to want to keep your browser's up to date. By keeping your browser's up to date, you will always have access to the newest features. Maybe it's just ah resource update. Maybe it's a security update. Always keep your browser's up to date throat. This course I am going to be using Firefox. It is lightweight. It is extendable, has a bunch of plug ins. It does not collect a ton of data like Google Chrome does. It is not a huge resource eater, so it's not going to kill the battery on my laptop as fast as chrome would. I would highly recommend Firefox. But hey, you can use any of the Big Four. Doesn't really matter now, As a developer, you're going to want to have as many browsers as possible. And by that I mean within reason you're going toe. Want if you can, all four of the Big Four browsers that sort of hard these days, since Microsoft edges only really available on Windows systems and safari is only available on Mac systems, give or take a little bit in there, depending on your version of Windows and Mac OS. So your task for this video is to download three under the four browsers. You're going to definitely want chrome. That's a big one. Fire Fox. If you're on Mac, make sure you have so far you probably already have it. Or if you're on Windows, you're going to want to get Microsoft Edge, which again you probably already have. So make sure you have at least three out of the Big Four, and once you have those downloaded and installed head on over to the next video and I'll meet you over there 7. Elements: all right. I think it's time for us to get started. You have your browsers, you have your editors. You know about code pen. You know, a little bit about what HTML is and the fact that it's on every single website without exception. Now it's time for us to actually start sort of understanding and writing some HTML ourselves. And the best way to do that is to actually jump right into it. So I'm going to open up my editor called V s Code, and I am simply going to start writing out HTML elements. I'm going to explain these as I write them out. And then at the end of this video, I'm going to give you a task where you're going to have to do something along these lines as well. Now, in this video, I'm also going to show you how to save an HTML file and how to open it in your browser. So I have V s code open here, and it's time to give me a bunch of different options in here and that really, I just want to click new file, or you can go up to file and click new Let's click new file in here and you can see just called Untitled. And that's totally okay. We're going to save this a little bit later. So let's just put something in here. Let's put hello world. And I'll make that text a little bit bigger for you to see. And let's go ahead and save that. So I'm going to hit command s. If you're on Windows, you can hit control s or you can always go up to file and then save or safe. As so I'm gonna hit command s I'm going to go to my desktop. I have a folder called Website and I am simply going to call this paragraph dot html and save and that's it. And so now I can actually see NVs code. I have this option turned on its called breadcrumbs, where I'm in the user's folder, the Caleb Italian folder Desktop folder, Website folder, and I have a file called paragraph dot html. Now we want to create a few different elements here, but we need to understand what an element is. So an element. Whenever you open up a browser, you're going to see a lot of these Div stuff in here, something like that, or you're going to see a paragraph stuff in here, and we need to sort of understand what this is and what this is. So these are called elements and there are tons and tons and tons of them, and you do not need to by any means, remember all of them. You just don't have to. There's far too many of them. Ah, and really, we're just getting started right now, So don't forget, just take it easy. We're going to learn this nice and slow, So to create a paragraph, we are going to create a tag. And it looks like this. It's just a piece. So it's the less than sign the letter p for paragraph and the greater than sign That's it. And this is called an element. Actually, that's called a tag. Technically, an element is this whole thing here. It's the opening and closing tag. So this is the tag. This is our opening tag, and we tend to close most HTML elements with a closing tag. So a paragraph, for instance, would have a closing tag. And to put text in here, we simply just put a space and we say anything in here and now we have a paragraph that says Anything in here Now, as we get into HTML, we're going to see things like attributes as well. So we're going to see, like classes called class name. We might have an I d. We might have a title. We might have something like that. But for now, let's not worry about all of that stuff. Let's just worry about elements. So we have an element here with the Texas as anything in here. In fact, I'm gonna change that to good old fashioned hello world. That's sort of the de facto way of saying, Hey, I'm brand new to this and let's see if this works. Now I have this file saved, and I don't know how to open this or view any of my work right now. It's just a text file I've saved as paragraph dot html, but I don't actually know how to open it. Now there are two ways to do this can go to file open or hit command O or control. Oh, if you're on Windows so I'm going to hit control. Oh, and if I just go to my desktop. Open up my website In there. I have paragraph dot html and I can open that. Uh, that's code pen saying Do you want to leave? Yep. I do want to leave. That's unsafe. That's OK. And we can see him here just as hello world at the very top. So that's option number one. Option number two is you can open up your file Explorer, your finder. So I'm just gonna open up my finder and it's already on my desktop. I open up website paragraph, right click on the file. And again, it looks like dot html that dot html Extension is very important, right? Click. And then I could open with safari, which is what my Mac book wants me to open it with. I don't want to do that. I want to open it up with Firefox. Someone opened up with Firefox and you can see is the exact same file. So there's two ways to open a file here, and at this point, you're going to need to know how to do that. Because HTML doesn't run a server. We don't go to www dot your website dot com slash paragraph dot html. We just don't do that. Not yet. For now, we need to find a way to openness file and it looks ugly. File colon slash slash slash users slash Caleb Tolia slash desktop slash websites last paragraph dot html Looks terrible, and that's no way to live your life. So I just open up your browser hit command. Oh, and you'll be able to find your your file. Or if you're on Windows, you can always had control or just go up to file and hit file open. So now we have some text. And by the way, that's really all there is to writing HTML. So I'm gonna open up V s code again and I'm going to write. I'm just make something bold. So this is bold text, and then I'm also going to make something metallic. This is italic text and let's put that on different lines and we're going to get into, like, different lines and and how to make things bold on how to make things metallic. We're going to get into all of that in their own separate videos, so don't feel like you have to learn this right away, so I just opened up paragraph dot html added some bold tax to metallic text. And this is just in example Now when I open up Firefox with paragraph dot html open, I could just hit refresh. So go up here. Hit Refresh! This is bull text. This is a talent text and that is actually all there is to writing HTML. It's basically just this over and over and over again. We can add paragraphs. We can add images, we can add dummy elements. We can add video and audio and all sorts of things. So at this point, really, we just need to know how to make a basic paragraph. So let's go ahead and get rid of that. And as your task for this particular lesson, what I would like you to do is open up your editor, which ever editor it is. Maybe you're using code pen. That's OK. Just open up. Code pen dot Io Maybe you're like me and you want to use V s code. Open up V s code, create a new file, make a new paragraph. Remember, it's the opening bracket and then AP and in the closing bracket type hello world and then do opening bracket slash p closing bracket or less than and greater than signs, respectively. Save that as your paragraph dot html and then go open up your favorite browser, whichever one you want to use. I'm using Firefox. Maybe you want to use chrome, safari or edge. It doesn't really matter. Open up the file by going to file open and then just open up or just, I guess, selected paragraph dot html. So your task is to create paragraph dot html with a paragraph in here that says Hello World Don't worry about spacing or anything like that. Just make it look like mine and make sure that it can open up in your browser and that's it . Once you're done that head on over the next lesson and we're going to learn a little bit more 8. Hello World!: all right. In this video, we are going to learn how to create a properly structured HTML document. So what we didn't last video was a little paragraph and that's about it. And the browser was able to understand that that was an HTML document and there is actually a proper way to structure HTML pages. So what I'm going to do is just open up V s code here and you can see it just behind me. And I am going Teoh, create a new file. You can hit command and over and over and over again if you wanted to, or control, end or go to file and then just new file. And here is where I'm going to create a file called Hello world dot html. It's not at this point. I'm going to save this file and I'm going to save it right beside paragraph dot html. It's just in a folder called Websites. Eso. If I go to my desktop desktop desktop, where are you? Right there going to a website and I'm just going to call this Hello underscore world dot html Please try not to use spaces. Spaces can get a little bit messy. So in the Web development world, we try not to use spaces or any sort of special characters other than a dash or underscore inside of the file name. So we'll save that as hello world dot html. No, a proper Each email file will have an HTML tag, actually have an element. So everything gets wrapped in this. So we have an opening tag here and we have a closing tag here, and we put a bunch of stuff in the middle. So we also put this one called a head, and we also put one in here called a body. And so in here we are now nesting html elements. So this is basically saying to the browser, Hey, this whole thing isn't html document to make sure you read it as HTML. There's actually one more step we have to take, but we'll learn about that a little bit later. Next, we're saying inside of that html element, there is a head element, and this is where we're going to store all of the knowledge about the page. You can actually think about this as your own head on your own body. It's where your brain lives that holds all the information about the page and inside the body is where all the guts of the page arts, where everything actually happens. And when you load a website, it's what people actually see. So anything that goes in the head is not typically visible, and anything that goes in the body is visible. So from our last video, we created hello world from paragraph dot html and all we're going to do is recreate that. So in V s code, I'm going to show you this cool little thing. So I just hit P and then Tab and it says there's an Emmett abbreviation here, So I'm gonna hit P hit tab, and it just creates the tags for me. That's really nice. Not all editors do that. Sometimes you have to write it out manually. So I'm going to write hello world with proper structure. Cool. So that's all saved up. I'm going to open up Firefox to close that tab, and I'm just going to open up this file. So I just hit command. Oh, it's I just selected hello world dot html. Let's make this bigger way bigger. There we go. We can read it now Hello world with proper structure so it doesn't look any different at all. But if we right click and view source, we can see that we have HTML. And here we have head, we've got some body and things are starting to look a little more structured. And so that is the typical way that we structure an HTML website. Now there's one more thing we need to do here. We can actually see that this HTML in here again, I'll make that a little bit bigger. Weaken ch. Email isn't red. We actually want that to not be in red on. I think the reason is doing that is because we are missing one important aspect of this page. We have this thing called a doc type, and we will learn about this in its own dedicated video. But for the time being, just to make that sort of error go away, we're going to write this line So we have a less than bracket exclamation mark doc type in lowercase or uppercase. You'll see it in both scenarios and then just simply HTML. And what this is saying is when your browser loads all of this text. The first line is going to see is doc type HTM on the browsers has Oh, okay. I understand that this is HTML. This is not plain text. This is not a pdf. This is not anything else. This is an HTML document. So now when I go back to Firefox and a refresh, you can see that that red HTML goes away and it seems like this was accepted, and you can actually see that that change some of the spacing in there. So let's go ahead. And let's just delete that to delete a whole line NVs code I had command X probably Control X to delete a whole line. I'm not entirely certain effect is a default setting or not. If that's going to be across the same across the board for everybody. So let's maybe not do the shortcut. I'll just delete the whole thing manually, save. And when I refresh, we'll see. Yep, there's an air. There's no doc type, and the spacing doesn't work out the way it's supposed to. So right now, the browser saying I don't know if this is supposed to be proper HTML or not. I think it is, but I don't know for sure. So I'm gonna undo that with command said or controls that Simply save that as hello world dot html Refresh my page. We got a little spacing up there that totally Okay, we can work with that. So your task for this video is I would like you to create a new file called Hello. Underscore world dot html. You don't have to worry about your doc type For now, you can completely ignore that. If you like, create an HTML tag. It also needs a closing tag toe. Basically create the whole element inside of this element. We're going to have a head tag. You can leave a space in their or or you can simply keep it like that. It doesn't really matter. We'll talk about whitespace and html a little bit down the road, so just bear with me on that one. Create your head, Ted, create your body tag and then put hello world with proper structure inside of a paragraph. Do that. Open up your browser, Firefox Chrome safari doesn't really matter on. Then just open up that file and just see that your text shows up as normal again. This is going to be very similar to the last lesson. But this one has proper structure so that your browser says, Oh, I know exactly what I'm supposed to dio. 9. Page/Tab Titles: all right. In our last lesson, we created a proper HTML file with the DOC type and HTML elements, and we nested a bunch of stuff in there, and that was cool. But when we opened up our page and you can actually see it right behind me here when we open up our page at the top here, it looks pretty terrible. Just it's the path to the file, and that looks pretty gross. And if you go to somewhere like google dot com, it just has Google at the top. So how do we change that text now to change the Texas actually super, super, Super super easy, along with a lot of things in HTML, it's quite for both, meaning that it is very well named. You can read the name and understand exactly what it means. So I am going to simply open up hello world dot html. That's from the previous video actually know what? No, I'm not going to do that. What I'm going to do is create a new file, and I'm going to save this one as title dot html, and I am going to create a new HTML document in Here's We've got head, we've got her body. We learned about these in the last video and inside of our head. We can put a thing called a title and we can just say hello world and in our body. Let's say a paragraph in there because we're familiar with paragraphs right now and we simply say, Hey, what's up? And let's go ahead and open title dot HD Mountain says, Hey, what's up? But if you notice up here, it says, Hello world, which is nice. We could go back here and I can say something like Caleb is wicked awesome. And now it says Caleb is wicked awesome. So that's really all there is to adding a title to a page. Now your task for this particular video is to create a new HTML file. Ah, brand new one. Create your proper HTML structure. So you've got your HTML element. You have your head and you have your body tags and inside of your head tag, create that paragraph are not that paragraph. Creed that title. So you've ahead and then you have title and you can see how this is still were sort of starting to nest in so it looks nice and indented. We have HTML and then we inside of that we have head, and inside of that we have title. So simply go ahead and change that title. Or add that title. Rather open it up in your browser. Make sure it shows up in your tab the way it's supposed to, and once you have that figured out, let's head on over thought. Next lesson. Now, also, don't forget if you have questions at this point or any point during this course, you can always leave them down below. 10. Doctypes: all right. In our last video, we created an HTML document just to add a title, and that was pretty cool. We changed the title in the tab, and that was, you know, simple enough, I think. Anyways, Ah, but one thing we didn't do was we didn't add a dock type and in a video or two previous to that, we actually did talk about Doc types. And in this video, I just wanted to sort of go over what a dock type is, why it's important and sort of how it works. So in our title dot html file, and this is just leaving off from the Last Video is and HTML element. We've got her opening and closing tag in here, and all we really want to do is just above it. Put, doc, type HTML and V s code was nice enough to fill that out for me. So Doc type is in all caps, although it doesn't necessarily have to be, but I sort of just throat history. We've just always made this all caps, so let's do all capitals D o C T Y p E. That sends for document type. And we're simply saying it is an HTML page. That's all it is. So we're telling the browser that this is not a PdF, and it would not even actually be as easy as saying PdF wouldn't quite work like that. But we are specifically saying, Hate browser. Whether you're chrome Firefox edge safari tour, it doesn't really matter. You are reading and HTML file, and then html file is going to have HTML in it. So because you're a big program and you understand things like PDFs, plain text, all sorts of things, like animations. And right now we just want to let you know that this is HTML. It's not success. It's not JavaScript. It's not. Python is not. PHP is not anything like that. It is just HTML now with hte emails one through four, specifically H Mill four. We used to have to put this long thing in here. It was gross. No one remembered it. We'd always have to google it just to sort of remember what it was moving forward. We're using HTML five by specifying each team L in here. All we're saying is, hey, browser were using the most modern version of HTML. So in the future. Whether whether the browser is using HTML 6789 doesn't really matter. This is going to be OK. So this is sort of the one and done. Set it and forget it. Type of feature and again, browser. Maybe Firefox, four years from now, is using HTML six. This is going to work because Firefox will say, Oh, I want to use the latest version of HTML not html five. But the latest version, which happens to be six, that your task for this particular video is open up title dot html or create a brand new HTML file. Make sure you have a dock type in your make Sure typed out the exact same way I have it here. Make sure you've got your HTML element in there. You've got a head and you have a body. So your final product, they should look something along these lines. So make sure you have that. You can Then go ahead and open it up in your browser. If you use this exact code that you see right behind me, it's not going to show anything, and that will be OK. You just want to make sure that it is using HTML and that you're opening the file properly again. A lot of this is just practice and a lot of muscle memory. Soon enough, we'll be getting into much more exciting things. So go ahead, give this a shot when you're ready, head on over thought next video and let's learn about something new. 11. Attributes: all right. At this point in time, we have learned about paragraphs, doc type, and we've even added a title to our tabs, and that's all well and good. But HTML is a little more advanced than just that. I would like to say it's super simple, but it's I mean, it is still very super simple. But there are ways to give elements particular attributes, so you can think of it like all elements are sort of the same on. And then you want to define different characteristics about them. So in this video, we're going to learn about HTML attributes. Now let's dive in. So I just have my editor open here. I'm using V s code. You could be using sublime Adam No pad plus. Plus, it doesn't really matter as long as they can really read and write some text. That's all we need now, looking at an element here we have a paragraph and we have a closing paragraph. So let's go ahead and save this. I'm gonna say this as a file called attributes dot html and you can see is as soon as there's a file name called dot html V s code change the styling. Now, if it doesn't do that for you can always go down here where it says HTML years might say something different and you can go and select HTML. And that will just change your syntax highlighting. So it looks nice now. At this point, we really just have a basic paragraph. Pair a graph it help. If I could spell that third time's the charm paragraph nailed it. So we just have a basic paragraph at this point, and there's nothing fancy about it. And there's nothing that separates it from this paragraph or that paragraph or on and on and on. They're all the exact same. Occasionally you're going to want to change that. You're going to want to give it a special characteristic Now. We're not going to work too much with these characteristics right now, but it is good moving forward that you know that they have these characteristics called attributes or sometimes they're referenced as properties. And so this one is going to have have ah title. Now, this title is not the same as adding a title to your tab or your your window name. This one is going to have a property on attribute that looks like this. This is a title. Now if you're looking at this and you think it Whoa, what's going on? This is actually super simple. We just took a very basic P tag. We added a space. We said the particular attribute that we want to add is title, and that is equal to. And then in quotation marks, you just put your regular text place. And simple. Now is something to be careful about when you're dealing with attributes is if you use regular parentheses like this, well, that's OK, But what if you wanted to quote something? It's going to be rainy today. Well, you can see my syntax. Highlighting is already broken. This should all be yellow. It might be a little bit different in your editor, but yeah, it's going to look a different color, and you can see that the rest of it is not the right color. So to fix that, we add quotations, and there we go. So it's all one color now, and that means everything is good to go. That is called syntax highlighting, and that is really, really important tool that comes with a lot of editors these days, and it just helps you catch little mistakes like that's. You don't have to spend too long trying to figure out why something isn't working. So to go back to talking about attributes and elements, we have our P element here. This is one of two tags. We've got an opening tag. We've got a closing tag. This is the attributes name itself. We always put in equal sign afterwards, and then whatever the value is, whatever we want that title to be, we always put it in quotations and then put some text in here. Now let's take a look at what title actually does. I'm gonna open up Firefox and I am going to command or control. Oh, if you're on Windows and open attributes and we can see, let me make that bigger, we can see basic paragraph based paragraph makes bigger five times, and the top one says, going to have a title now a title. What that does is if you put your mouth over this long enough, you can actually see it says it's going to be rainy today. That's a title on a particular HTML element, and so you can do this with any element, basically anywhere that is visible. Now let's go back and let's let's take a look at a slightly more complicated example, so I'm gonna delete all of that stuff. Make this just a little smaller, so it's not quite as obnoxious. We are eventually not right now, but we're eventually going to learn about the image tag I. M. G. The image tag has an attribute called Source. What is the image source? And it takes a U L A link to a particular image. File A. J. Paige, a PNG gift, whichever one it doesn't really matter. As long as it's an image, it will also take a with So it could be a width of maybe, like 250 pixels. It could have a height of 250 pixels. It could have a title like what? We've already given it. We could have an alternate title in case the image, for whatever reason, just does not load. And so on and so on and so on. Now, for different elements, there are different attributes. For example, with a paragraph, there is no width and no height, a paragraph is simply a paragraph. It's going to take up a much possible space as possible, whereas an image we might not want the image to spend the entire with of the page because that might look a really ugly. So we might say, actually, that wits should only be 250 pixels. We also have an example here of a self closing tags. It looks like this. There is no slash image here, so this is again sort of diving back into elements. We didn't really dive into that. Actually, we didn't. We didn't dive into that at all, and that's on purpose. We're going to learn about these specifically one by one, so it makes a little more sense rather than me just throwing a wall of knowledge at you and saying, Remember it for no reason. We're going to actually learn by experience and learn by doing so. That is an example of an image tag. Now there are also attributes that are considered global attributes. They are accessible. Basically, that means they could be used on pretty much any element. So let's go ahead and delete this and let's create a new element called paragraph. Just a simple paragraph and we've already given it a title. But we can also give it a class we'll talk more about. Those were given an i. D. We'll talk more about those later, and that's also accessible on an image where we've got source. We've got Ault, but it can also have a title. It can also have a class, and it can also have an i. D. There's another element called a spend will look into this a little bit more down the road as well. This can also have a title. This can also have a class. This can also have an I. D. So you can see at this point that I D is the same on all three of them classes. The same on all three of them. Title is used on all three of them. The only one that's different here is image. Image has a source. Paragraph doesn't need a source. A span doesn't need a source. We don't know what span is, so let's just ignore that one. But a paragraph doesn't need a source of paragraph. Doesn't need alternate text. It just needs text. Either there is text or there is not text. It's pretty simple for a paragraph. An image mites have an image, are linked to an image that for whatever reason, breaks. Maybe there's a typo. Maybe the image was taken down from the Internet. Who knows? We don't know. So we have a backup here, and so this is sort of a crash course into attributes, and we're going to be seeing a lot more of these down the road. We're not going to cover all of them right now. There are a lot of elements to cover their A lot of attributes to cover and a lot of attributes are somewhat specific to specific types of elements. Now, if it all seems a little bit confusing a little overwhelming again, don't be overwhelmed. Don't feel confused. Let's just go through this one video at a time, and together we will figure this out. Now your task for this video is I would like you to create a paragraph like what I did So create a paragraph. Put something in here and I just hope you simply want you to add a title. So just add the title tag with literally anything in here open up your browser but your most over it for long enough and you will see your custom title show up in there, that's all. So once you're done that task, let's head on over to the next video and, ah, well, let's keep progressing through HTML. 12. Headers: headlines are basically what the Internet reads. We tend to not read a lot of stories. We tend to just read headlines. Headlines are the best way to grab someone's attention. It's also a great way to segment everything we've learned so far into a proper Web page where we have more than just a paragraph. So we're going to learn about headers now, out of the box, your browser, chrome safari edge, whatever you want to use. Ah, they all come with six types of headers. Headers one through six, aptly named H one h two H three each for each five and H six. That was actually hard to say. So we're going to demonstrate, or I guess rather I am going to demonstrate what all of those headers look like compared to a paragraph. So behind me here I have es code and I'm just going to create a new file here, and I'm going to save this as headers headers dot html. Okay, so let's go ahead and create a doctor. We have a dock type called HTML. We also have HTML in here. So that's telling the page that everything inside of here is html we have our head and we have a title. We know about this one already. So let's call this one headers and we also have a body. And in here we have the different headers that we're going to look at. So 1st 1 is H one. Each one is the biggest header. And down here we're going to have aged six. H six is the smallest header. And I just want us to take a look at this right now, just sort of currently where we're at. So I have Firefox open and I'm just going to open up, actually open this up a little bit differently. I opened up my finder here and I'm just going to find where did I call it? Headers dot html open with Do I want to open it with safari? I could Firefox chrome Let's go Firefox. So here we have 81 is the biggest header in H six is the smallest center. Now this is actual size on my screen right now, so this is not zoomed in at all. You can see that h one is fairly big and actually really, really small. So let's go back to V s code and let's add H two. H two is this size, and let's also add H three. H three is this size whatever that's going to be age four age for is this size and H five each. Five is this size that rhymed unintentional. Refresh my page and oh, by the way, if you don't know how to refresh the page with your keyboard, which I think I've been doing a little bit throat this video you can just hit, command are or control R, and it will refresh. Or you can just hit the button up here. You can see that actually looks like there's an HTML title over it, says Reload. Current page command are so each one is our biggest header. H two is significantly smaller. Age three is smaller, each four smaller. Each five is small. Each side six is tiny. So these are our different headers. Now you're probably thinking, Well, where am I going to use all these? And the answer is actually everywhere. You're going to use us on pretty much every single website you make forever. These are incredibly useful, and the larger the text. Generally, the more emphasis, like search engine puts on a particular subject. So if you were talking about, let's talk about goats, cats and dogs. Three awesome animals. So we simply refresher pages says goats, cats and dogs Search engine would say, Oh, that's an H one tag. Okay, so I know that this is about goats, cats and dogs. I know that h one tags are larger, generally speaking, So I'm going to put a little more emphasis on that and help you with S E. O. So I know that when someone talks about goats, cats or dogs, that's maybe I'm going to recommend your website first. Maybe so. I'm just gonna undo that. And as an example, let's go ahead and add a paragraph. So we have some regular text in here. Let's save and let's go up here and hit, Refresh, and you could actually see again. This is the regular size on my screen, so it looks small in your video. It's actually quite small in my screen as well. But the paragraph text is actually larger than the H six. Taxes actually even looks maybe the same size or maybe a little bit larger than the H five as well now is that mind blowing that? For whatever reason, we have a title tag, a header tag, the 6th 1 albeit the smallest one. But it's smaller than the default tax on her page, and you're probably thinking, Well, where on earth would I ever, ever use that? And that's a great question. Let's go ahead and create an example of where you're going to use that. And so what I'm going to do is I'm going to create a horizontal rule that is simply HR. Horizontal rule stands for whore is until rule and refresh the page and you can see it brings all line right across the page, something like that. So now let's say we are making a block. You have your own website eventually, and we want to make a block. So let's create an H two title for our block post. Welcome to my blawg. And maybe we want to specify something that's still, for whatever reason, still important to us. Maybe the date that it was posted so we say Date posted, let's say, July 20th 2021 let's say, for whatever reason, were living exactly on July 20th 2021 and then we can put a paragraph in here. Let's talk all about my blawg. This is why I started a blawg. And this is why I like coding. I'm not gonna take up singing Hit, Refresh. And now we can see we have a blawg title up here we have a small tax. It's not quite as important as this text up here, but in the grand scheme of things, the date that something is posted is important. So we would technically use an H six year, maybe an H five. Maybe we just pulled it and it's good enough. That's that's a decision for you to make down the road when you're making your websites. But this is just an example of when we would use this. Now I'm going to clean this up quickly so you can see what I'm doing here. Get rid of this white space because that's not really needed. Now what I would like you to do for your task is I want you to create a brand new file New html file from scratch. Include your doc type. Make sure you write out the HTML put a header put ahead tag in there, not a header ahead, had your title. And then inside of your body, add H 12345 and six and then at a paragraph at the end, just to compare the text. When you're done all that, don't forget to save your file and open it up in your browser and you will see something that looks like this. Once you're done that, let's head on over to the next lesson and let's learn about how we can add line breaks, because right now it's kind of difficult. 13. Line Breaks: Oh, right. So we've created paragraphs, headers. We've created an entire HTML structure. You've done all sorts of stuff, but if you've tried to create a paragraph with new lines in it, it's not going to work. So I'm going to create an example where I have a paragraph, but I want to make a new line now. I could use a different paragraph, but sometimes I just want to put something on the new line just for the sake of putting things on a new line. Or if you add multiple spaces, it just it's not gonna work. Another reason for that is because HTML is not space sensitive by being not space sensitive . It can actually compress how much it has to process, and it doesn't have to think too much about extra spaces unless we explicitly tell it to. Now that is both a good thing, and as a developer, sometimes it's a little bit annoying. So what we are going to do is I'm going to demonstrate how how HTML doesn't really care about white space. It just sort of compresses it together, and then how we can get around that. So I'm going to create a new file and I'm going to call this line breaks dot html. Yeah, sure line breaks. That's good enough. Let's go ahead and create a paragraph. So just a regular paragraph in here and I'm going to say I am on 91 I am on lying to I am on line three. So let's go ahead and open this up in our browser. I'm using Firefox. You can use chrome Safari doesn't really matter and you see here that says I am online one . I'm online, too. I'm online. Three. It's all in the same line. That's not eso. Let's view our source in our source code. We can see that it's all on three separate lines. So what's the deal with that? Now again, we have his new line in here and your browser saying, You know what? Just because it was new line in here doesn't necessarily mean that's what you want. Now, when we're writing HTML, that could be a little bit annoying. But when we start writing server side languages like, maybe we're using python or PHP or something like that, this is actually somewhat of a savior. But how do we get these onto new lines. Well, there's one way we can add a new paragraph and we get, say, line one we can make lying to and we can make line three refresher page and you can see that there's nice spacing between all of those. But what if we want them to be more together? What if we don't want to write paragraphs for every single thing? What if we just said You know what I've done with paragraphs? Let's get rid of these. That's go down here. I select all of these hit commend left Reckitt, and it in denser out dense gets with the indentation for me. And then again, same thing. It looks the exact same. So when I view the page source again their own three lines, why is that? So the way we get around this is we had a thing called a break a B R. Or sometimes you'll see it like this. Or sometimes you'll see it like this. We'll talk about the difference a little bit later, and let's add just so that we have one more in here. Let's add 1/4 line, Ted. Oh, we have four lines and so let's make that bigger because that is gonna be hard to see. So I'm online. 123 and four. That is good news. That is how we do it. Now we can do this inside of a paragraph it as well, So let's go ahead. And I'm just gonna cut that and paste it in here. And that did some auto formatting For me, that was nice. Literally nothing changes. I mean, visually, nothing changes, but in our code, it does actually change. So we can see we've got a paragraph take here in here and yeah, that's just about it. That's all we have to do to make a new line. Now let's talk about space. So let's create a horizontal rule and let's talk about space. And what if I wanted to say, Ah, the space between here and here? Well, because each email doesn't really care about white spaces, just sort of pushes it all together. All these faces are not going to show up. So let's take a look says the space between here and here. Okay, well, that's not useful. And again, if we if we just view source, we're going to see that all the spaces air in there and again. That's just because this is the source code. And when your browser reads, the source code says, Oh, there's a bunch of spaces. Let me get rid of that for you. It thinks it's being helpful. So to get around this, we create this thing called an HTML entity. We're going to talk about entities on their own a little bit later. But the 1st 1 we need to know about is the nbsp, the non breaking space, which you can actually see right here. That's pretty cool, non breaking space. So and the M percent and B S P and then a semi colon. And that's how we create an HTML entity. Now, what this says is basically put a space here, put a bunch of spaces in year. So let's go ahead and add a ton of these and refresher Pidge. And now we actually have some spacing again. Let's go ahead and view the source code. We see all these HTML entities, these non breaking spaces, but when we view the actual page, it just looks like regular spacing. We could even copy and paste it normally. So if I copy and paste it into here. It just shows up as a regular space. So the browser is fairly intelligent that way. Now, your task for this video is to create a paragraph with four different lines on it. And then I want you to add a line break. Just thebe arctic. Don't worry about don't worry about this guy or that one. Just add this one. Be our tag, The break tag. Add that at the end of each line so that each line shows up on its own line. And then when you're done that I would also like you to add nbsp. So use this HTML entity, use it 45 times in a row so that you can actually see some spacing. Maybe put it maybe even put it between some words here. So the space between well, this way to the space between these two words, I guess so do something along those lines, play with it a little bit and sort of just get a feel for how html doesn't really care about extra spacing. So it doesn't again, just as an example, it doesn't matter if we do this. It still looks the exact same. Go ahead. Give that a shot. If you have questions, don't forget, you can leave them down below. I'm here to help. And when you're ready, let's move onto the next video. 14. Bold vs. Strong: okay. A number of lessons ago we talked about bold and italics. While we didn't really talk about it, we experienced it in a sense, I rushed over. It is what really happened. And in this video, I want to properly talk about it. Now, there are two ways to do this, and we're going to look at the proper way and the less proper way. So here I have V s code on the left, and I have Firefox on the right on the left eye's V s coat. And I'm just going to simply put something in a paragraph. All right, so I just save this file as bold dot html and let's create a paragraph tags. We've got a paragraph in year and let's just ah, look at regular text. We know what this looks like already. We've experienced this many, many times. Go ahead and open up, Boldin, Firefox and we see regular text. Okay, so that's I guess that's fine. Ah, but what if we wanted something else? So let's go ahead. And I hope this Oh, yeah. There's a cool thing on V s code called Laura. Um, eso if you type lore. Um and then 25 it will give you 25 words of Lord Ipsum. So let's go ahead. Yeah, cool has nothing to do with this lesson. I just thought that was pretty cool. Eso let's go ahead and make our first words bold in the way we saw this originally was with Thebe tag the B tag here in the closing Be take here for a B element and let's put this on your lines cause now that we know that HTML doesn't really care about new lines, we can keep doing this and it's not a big d. Ah, I'm only gonna do it for so long, though. Okay, so we can see that the 1st 3 words are bold and that's great. And if we want to make the next few words bold, we can also use this elements called strong. So let's grab that and let's move to the end of that line. And it did. It did it that we have bold and strong, and when I refresh, the page is bold and strong. Now, at this point in time, you should be asking yourself what's the difference now? The first difference really is obviously the tag, but this one b is the older way of doing it. Html four up until HTML four, that was acceptable, and that was okay. But in HTML five the world sort of change a little bit. It became a little more mobile and digital friendly, and so we introduced this new type of bold called strong. And what strong does is it allows an extra emphasis on particular words when a screen reader is reading your your page now, you might think while who actually uses a screen reader. But a lot of people use screen readers. And for example, whenever you asked Alexa or you ask Google anything and they don't, maybe they find something on Wikipedia and they're reading the definition out to you. If you want that extra emphasis, you could add strong to him. Now Strong has more emphasis than italicize ing text, but yeah, that's what it will do. So you have bowled year, and Bold is just visual. It just visually bold and that's it. And when a screen reader reads us, it's not going to know the difference. And Strong is visually Bolden. But when a screen reader reads this, it will know the difference. It will add an extra toe, whatever it saying. So generally speaking, when you're writing your page, you are going to want to use strong instead of the B tag. And the B take is technically deprecate ID, which is a fancy developer way of saying is eventually going to be kicked out. So your task for this video is you create a new HTML file. It doesn't have to have the doc type in head and stuff like that in it, because this is a very simple sort of example. Eso create a new file, save it as a dot html, and then I want you to add a bold tag and then a strong tag. Just put a few words in there. Doesn't really matter what the words are to be totally honest, and then just compare the difference. See if it looks different in Firefox versus Chrome. Maybe Firefox uses more bold than chrome or safari or edge uses more bold and Firefox open them up in the different browsers. I just sort of take a look. Ideally, in the perfect world, you won't see any difference. No words will be more bold or less bold than any other words and for bonus points. I would like you to also see what happens when you put a strong element inside of another strong elements. Does the word get more bold? Does it do nothing doesn't get less bold. I'm going to leave that up to you to explore, because that's a fun little way of exploring HTML. And it sort of gets your gets your creative juices going makes you dive into this a little bit more. And so you know it's OK if things don't work or it's OK if things do work and gets you, ah, better understanding by simply tinkering around. So your task is to create a bold tag, creative, strong tag, compare the differences and then, as bonus points nest, a strong tag inside of another strong tag and see if that does anything different. Visually, 15. Italics vs. Emphasis: okay. In the last last, we talked about the difference between bold tags and strong tags and italics have the exact same thing. And we actually saw this at one point earlier, where we had a new I take. It looked like this. You can see it behind me here. I had an eye tag and I just rushed over real quick, and this is actually not the proper way of doing it. There's another way of doing this, so I'm going to save this file as a tallix dot html and on my right is still the old one. So let's go ahead. That's from the last video. Let's open Intel X and we see nothing. We have regular text here and let's add a line break and then we have italic. So let's add and I hear and it's at a line break. Yeah, let's do that kind And then we have emphases and you will see here we've got regular text teletext and emphasis text a Taliban emphasis. Look the exact same. So if I change this to metallic, it will look literally the exact same. Now the difference is what happens behind the scenes. It's not exactly what you see all the time. In the old days, we used I to italicize things. And then all of a sudden, the Internet and the world became very digital friendly and mobile friendly and people who weren't able to access the Internet for whatever reason. Maybe they had, ah, reading impairment. Or maybe they're blind, who knows? But we now have screen readers so that they can access the Internet, which is a good thing. But that means as developers, we have to consider two different scenarios now. So we have regular italics, which is just visually italic. It does nothing for a screen reader. But if a screener reader was to come onto this page and read regular text italic an emphasis, it would say regular text italic emphasis because it would add extra to the emphasis. And that's on Lee on this one. The E. M. Tag. Moving forward with all of your websites, we should always be using the E M tag to add additional emphasis. If you need to italicize something, you should technically not use this you should not be using the I tag. You should be doing it through CSS, but because we aren't there yet. For the time being, it is okay to use the tag. Now, your task for this video is to just create a new file. Call it italics dot html. It does not need a doc typing HD on all that stuff. This is just a very simple example. Create some regular text like I did on a new line. Make sure you have a new line, add italics and then on a new line again, make sure you have that new line. Add emphasis. And as bonus points, what you can dio is you could do something like Lauren five. SOS will give me five words. What happens if you try to add emphasis and strong together nested together So you've got an opening AM tag and then you've got opening strong tag. And then over here you're going to want a strong tag and an M tag so it goes in reverse order. This particular feature here is called Nesting, where we have a strong tag nested inside of an E M tag. You can also put it on new lines. Do if it's easier for you to read. That's totally okay. Something like that, We know that white space is not going to really matter in this particular instance. So what happens when you do this? That's for bonus points. Go ahead, Give that a shot. When you were done, let's head on over to the next video. And if you have any questions up into this point, don't forget you can ask him down below. 16. Underline: In our last lesson, we talked about italics and before that bold. And now it's time for us to look at underlying So in this video we are going to not only create underlying text, but we're going to learn about what underline waas and what it is a post to mean now. So, behind me here you can see I still have italics dot html open. What I'm going to do is create a new file. So just command n or control and and I'm going to create a new paragraph just because life is better inside of a paragraph and I'm gonna save this as underlying dot html and now to create some underlying text. It's a lot like bold and italic. So if you think be sort of bold and I you know, a Tallix studio, I there no, that's all right, I and so underlying is very much the same thing. Now the difference between these is that bold had bold and strong, so it also has strong and italic also has m short for emphasis and underline doesn't have anything. Underline is simply underlying because we have emphasis already selected and strong, which is even a stronger emphasis than just a regular emphasis. There's not a lot more we really need to dio with underlying now. In HTML four Underline was actually deprecate ID, and I'm just gonna open up. Underline that HTML here, eso underlined, was initially deprecate ID, meaning it was about to be kicked out of the HTML standard. And then in issue all five the world sort of thought, No, let's, let's not get rid of it. Let's just redefine what it means. So originally it was just stylistic it just as an underlying and that's you know, that's okay, So let's do, ah, text test here text test and let's add you for underlying save and refresh. And so we can see here when I make this way bigger so you can actually see it, we have an underlying is an underlined test. Something like that. We have an underlining here now again. Originally, this was meant to be just sort of stylistic. But because computers have gotten better, CSS has advanced. We now use underlines through CSS almost very strictly, and an underlying in HTML is supposed to actually mean something now because emphasis and bold have already really been taken up for additional emphasis. Oh, our italics and bold. Rather, we don't have a lot of room to play with you when it comes to written language. So underline is still four visual representation that something is supposed to be stylistically different. But it's also sometimes used for like a misspelled word. If you're maybe writing, I don't know, maybe a website about misspelled words, a dictionary or a thesaurus or something, or sometimes in particular languages such as Chinese, where they have proper knowns. Ah, you might add an underlying to make that proper noun or to make that now in a proper now. So because at this point you probably are not familiar with CSS. It's okay to use you, the you tag or the U element as an underlying. But once we move into CSS, you will eventually learn how to add underlying using CSS. And that should be the way to move forward. But again, for now, you don't have to worry about being that proper right now. Search engines and Google and other developers are not going to judge you for using this particular tag. It's totally okay to use it, so your task for this particular lesson is to basically just write some text and ah underlying three or four words. Save that as underlying dot html. Load that up in your browser Firefox Chrome Safari Edge. Whichever browser you like best and make sure that your text is actually underlined. And if you want to take this just one step further, maybe get some extra bonus points. Try making some text bold, italic and underlined all at the same time. 17. Code Comments: There will be a time when you want to add comments to your coat, but you don't want that code to necessarily show up now. At this point, if your brand new in your Web development journey, you are probably taking notes on paper or some sort of other application, maybe a notes out, maybe on your phone, something like that. And there is a better way to do this, and it is actually just with code. Comments and comments are a very common thing in programming altogether. Generally, it's a piece of code that you can write but is never actually executed by your program. Or, in our case, we can write a little bit of, I guess, html in a sense or weaken rights. Just regular text. We can comment it out and we can tell the browser Hey, actually, don't don't show this at all still shows up in her source code, but it doesn't actually show up as rendered text on the page. So let's dive into this, so I just have V s code open here. I'm gonna create a new file, and I am going to save this has comments dot html and I'm going to you dress very quickly, creating HTML five page template. So HTML. I'll throw my head in there. I'll put a body in here and some text in here. And also let's go ahead and create that doc type. So that's an HTML five doc type. And so I'm just going to open this up in Firefox. Open up comments dot html and we just see some regular text, some text in here. Now let's make our page a little more complex. Let's go ahead in the body. Let's add in h one and say, Welcome to my first Web page or yet Web page, not website. And under it we're going to have a paragraph, and in that paragraph were going to say hello and think, Thank you for joining me in this. I don't know Web viewing experience. I suppose maybe we want another paragraph. Feel free to contact me at at Caleb Tallinn or Twitter. Let's do twitter dot com slash at Caleb telling something like that. So we have a slightly more complicated page here, and it looks like this now. What if because we're learning, we want to make some notes in here so we head on back over to our editor and we want to make a little note in here that says something along lines of when you learned how to add a link link to my Twitter profile. Something like that. Well, unfortunately, that's going to show up, and we don't really have a way to hide that right now. So what we can do is we can say, hey, browser don't actually execute this. Just make this a comment. This is gonna get hard to see. Comments are generally somewhat hidden in a sense that ah, the text usually fades in. But I guess that depends on the theme that you're using. So in my V s code theme, you can't really see comments too well, so hopefully this turns out okay, Now to start in HD Male comment, you start with less than exclamation mark dash, dash, and that just looks like this because it makes you Mark. Let's do this individually so you can see this with no spaces between something like that and to end a comment, you simply do dash dash greater than and you can see that everything between this opening comment tag and this closing to comment. Tag is a different color, and that means it is a code comment. Now your editor should be doing something very similar. The color might be different, but it should be fading it out or changing the color to some degree to tell you that it is different. So we have this now commented out. Everything between here is considered a code comment, and when we refresh our page, it doesn't show up anymore. Now. With that said, a lot of people think they can hide passwords and secrets in seven year. But that's not true, because any time you write any sort of HTML, 100% of your HTML is accessible to the browser. And if it's accessible to the browser, that means it's accessible to the user. So when I right click on my page and go to view page source, I can actually see. I can see my comment in here when you learn how to add a link linked my Twitter profile. So if I added another comment in here, that just said, Add the password of password Quartey 123456 Something like that. If we think that secret. All we have to do is refresh our source code and we will see at password of password Courtney 123456 So it is not secure. It is simply a way to keep track of your notes. When you're creating a rial website, you will often use notes or comments to sort of tell you what a particular section is about . So a real life example would be I would add a code comment above my H one here saying This is the first blawg post and let's get rid of that and I'm gonna select all of this Copy and paste, which is Command C and Command v Oregon. Just select it, copy and then paste. But now I have to in years. So I've got Welcome to my first block post. But what? My first block page. Welcome to my second blawg post, and this one's going to be the second block post. So now, because all this content or the structure looks very similar. When you have 102 103 100 lines of HTML, you're going to sort of skim over it with your eyes and a lot of it's going to start looking very similar. And a code comment can be, ah, little snippet, A little shortcut. It can be your own little comment describing exactly what it's supposed to be. And whenever you go and load up your page, it will say, Welcome to my first webpage. Welcome to my second block post. And when we view that page source, let's close that old one we can see. This is my first block post, and this is my second block post. Now, when you get into the wild, when you start making websites for other people or you start using other templates that other people have built or you start working with other developers, you're going to see something that looks like this start, block post. And at the end here, it's going to be end block post, and this one is going to say, Start block post and down here it's also going to say, and blood boasts, just end that block post and again, we can use as much white spaces we want. So remember, if you have to spread things out, no one says you have to do this exact formatting. Maybe it's a little hard for you to read. Feel free to format it like this again. HTML gives you all the white space in the world. So let's go ahead and refresh our source code and we can see we have a little extra white space in here. Start block, post and block, post, start, block, post and block post. And now we have a way to sort of categorize what all of this is about. So we know that everything between here is a block post, and we know that everything between here is also a block post. And maybe you do that with a footer or header or a section or subscribe form. Now, when it comes to code comments, my personal advice is leave as many as you need. It's not doing any harm being in there. As long as you're not storing any sort of like passwords or e P I keys or anything supersecret. It's totally okay to leave notes in there. The reason that you want to leave notes is because future you is going to come back to this and probably have no idea what you are working on. And that's the honest truth. Every time you think to yourself? Oh, I'll remember what I'm doing. And then three months later, you come back and you know what? What? I working? Why did I do it this way? Well, code comments are a way to sort of mitigate that problem. Additionally, you can also use code comments to help out other developers. So, for example, viewing our source code here. If you were to give me this code, I could immediately see Okay, start block post here and block post here. Everything between it is one block post. Oh, I see that again. OK, so it's a second block post in here. So now I have an immediate way of understanding what's going on without having to read all of the code. So it helps with maintain ability, but also collaboration. So your task for this video is Let's go ahead. Let's create a task in here. Your task is going to be create a new HTML page with proper structure. So used the doc type, use the HTML, used the head tag, use the body tag. That kind of proper structure, creates a header tag and a paragraph paragraph, and then lastly, at a code comment above above the header tag about what your content is about. Basically, the T. L D R version is Just do what I did in this video. Just write some comments just like I did, and then try to view them in your page and then try to view the page source to see that they actually do. You show up. Once you've done that, let's head on over to the next lesson and learn about how we can start linking two different pages. 18. Links: okay, It's time for us to start getting a little more serious with our HTML. We're going to be learning about links in this video. Now, a link or a hyperlink is how we connect one page to another. It's literally the only thing that can connect one web page to another webpage Nice and easily. It's how search engines basically creates a index. Create an index of the entire web it lands on your website. You tell what website to go to, and it looks at all the links in there. And then it says others link here. Okay, well, I'm gonna go over here. And just because you're linking to another website, I'm gonna grab all the links on that page. And I'm also going to create a list of those and basically just creates this giant list and says, Okay, I'm gonna go that one and that one and that one and that one and that one and that one. And that's how you get the web. It is a web of links. Now links don't just have to be text. You often see them all over the place with images. For example, whenever you go on YouTube. You click a recommended video and you start going down that rabbit hole that is a link or when you're on Netflix and you click on a particular movie or TV show to watch. That is also a link. It might not look like it because it's an image, but it is still a link now links to use, a special attributes and a special element, and we're going to dive into how all of this works. And there's a few different ways that we can create links, which we're going to learn over the next few videos as well. So in my editor I'm just going to create a new file and immediately save it as links dot html. I'm going to go ahead and create my page layout. So I've got my HTML, my head, my body in my head. I'm going to add a title, and that title is going to be links tutorial, something like that. And let's also add that doc type doc type HTML five. Now, when we write some text on here, let's say we wanted to write an article about I don't know, going to Google or Facebook or or my website coding for everybody. Let's say we're writing some sort of article like that. We have a Sewell or um 50 here is going to create 50 words of warm ipsum for me. And when I opened this up in Firefox, we're going to see just open up links Study. Just email here. It's just a bunch of boring text. Nothing noteworthy in year. Now let's put a new line in here. You line new line line breaks to line breaks and, let's say to read more, click here. All right, so it's us. Read more click here, but we can't actually click anything. It's just regular text, so let's go ahead and create our first hyperlink. We're going to wrap the hyperlink around the words click here, and it's just going to look like this, and I'll give us a lot of room to work with here because we have all the white space in the world. So this element is a which represents a hyperlink or ah, hyper. I believe it's a hypertext anchor, technically, is what it's called. That's whites and a tag. Then we use H R E F, which is a hyperlink reference to whatever page we want to go to. And just like any regular attributes, we have the name of the attributes equals and then something inside of quotations. So let's just go ahead and keep this empty for now. And it's crap that tax a move that up. So at this point, we have a basic link. It doesn't work, but it will look like a link in our browser. So let's refresh Firefox and you can see that there's some default styling and an underlying there. So it looks like a link now it's not gonna go anywhere. When I click this, it just goes back to the same page. That's not helpful. So let's say we wanted to read Mawr. Ah, when we go to a website like coding for everybody. So I want to go to http s coating for everybody dot com. Now this is an external link, and let's do this. So I click that link and it brings me to a brand new website now to get to that website, you need to have this part here where it says H T T P colon slash slash or http s colon slash slash If you are unsure which one to use. Just ignore the S and always go with http colon slash slash that tells your browser Hey, this is an external link. Don't link to a page has already in the website that I'm trying to make a notable that is www dot will not work as well. And let's take a look at this. So when I hover over here, the bottom left you can actually see that is trying to go to a desktop website slash www dot coating for everybody dot com. And that doesn't exist. It's looking for a directory because there's a slash at the end over. It's looking for a file called www dot coating for everybody dot com slash now that doesn't exist on this computer. It will not exist on your server. So what you need to do is you absolutely need to add that https So http and you can see at the bottom left is going to change. And now you can actually see that is going to dub dub dub dot coating for everybody dot com and click that, and it goes to exactly where I want Now. Let's say I wanted to open a link in a new tab because right now, if I click this link, it just opens up in my existing tab. But what if I wanted it to always open in a new tab on? This is something that you generally want to do for people, is you, depending on the content, of course. But if someone is reading your blawg and you maybe have an affiliate link to Amazon, you might want open in a new tab so that they can close that particular tab and not close your content. To do that, we add another attribute called Target, and we have a few different options. Here we have blank, which is how we open a new tab. We have self, which will open its own window. You don't have to specify this one. That's the default you have. Parent. This one's going to open links in the document frame if there is a document frame. Typically we don't use to many document frames these days, so you're probably not going to use this one all too often, although maybe tuck that in your back pocket because you might need that one day, and lastly, we have top which will open the link in the full body of the window again, not something that you generally use. Let's go with Blank. This is going to open in a new tab, a blank tab. I'm going to refresh that page. My link at the bottom left still looks OK. And when I click this Toyota new tab just like that And so now I have two tabs here, and I can keep clicking this and it will keep opening in a new tab. So just getting close, those and that is really all there is to creating any sort of web of links. So when you have a Web page, you're going to want multiple pages and you're going to be ableto linked to these multiple pages. Now, in a couple of videos, we're going to be learning about internal links and relative links. So this video is really only about external ing. So if you wanted to link explicitly to Google or some other place that is not on your website, you would use this method. Your task for this video. I want you to create a new dot html document and this is all caps. It does not need to be. It doesn't really matter. As the doc type of head and stuff, just create a new HTML file and then just create a link. So you have create the link that goes to any website you want. And if you can't think of one off the top of your head, you can always use my website http coding for everybody dot com. Save that file. Open it up in your favorite browser and then click that link and make sure that it actually opens that Web page. Wherever you're telling it to go, just make sure it opens up that external you. Earl, once you're done that well, head on over to that next lesson where you and I are going to learn about internal links, how we can link to other parts off a page. Inside of that same page 19. Internal Links: all right. In the last lesson, we looked at creating a link to another website. But what if you have a bunch of content on your page and you want to be able to link all the way down to the bottom or all the way back up to the particular section that you're linking two? So maybe you have a long page, and at the bottom of that page, maybe you have a I subscribed form to your mail trip email list or something like that, and you just want to be able to have a link that skips all of the content, goes straight down to the very bottom where people can go, you know, skip all the content and just go and submit their form. Or maybe you just want to be able to jump around in this video. We're going to learn how did create that? And this is actually fairly common. So you're going to use us quite a bit, not quite as much as a regular link, but you're going to use it quite a bit in your Web development career. So let's go ahead and you two CVS code behind me and I'm going to create a new file, and I'm simply going to save this as internal underscore links dot html Now in here, we are going to want to create our regular HTML pages. Put head in there. Let's add some title as well, and the title is going to be internal links. Let's move down to the body and give ourselves some room to work. And let's link to the to the bottom of this page. Now I'm gonna open this file up in Firefox. You can use whatever browser you like and let's link to the bottom of this page Now, Right now, we haven't created a page that long enough to actually scroll, so we're going to need to do that. We're going to need to fake some scroll ege here, so let's create a paragraph. Let's fill it with a non breaking space and let's ah, copy and paste is over and over and over and over and over. And let's put this at the bottom empty paragraph and in that paragraph, let's make it not empty. Let's call it this is the bottom, and so now when I refresh the page, you can't actually immediately tell that scroll bar sort of goes away. But if we scroll all the way down, this is the bottom. So instead, what I'm gonna do is instead of a non breaking space, I'm going to select all of these. So I just selected the non breaking space and hit command D. That command might be different depending on your editor and your editor set up. But there's usually a shortcut like this where you construct all over these same ones and let's just put a line in there. That's all I'm gonna do just a line. And now we can see that there is a line all the way down. That sort of points us down the page. So we want to create a link from the top of the page to the very bottom of the page. Let's go back up to the top, and that's a click here. Well, this needs to be a link, so we need a link. Attributes aren't not an attribute, a link element. So I'm going to hit a give it the H ref attributes, and this is going to be something we don't know what this A draft is going to be yet And then I just put that closing a tag at the bottom of my text. You can also look at it like this on one line. If it's short enough, if that's okay for you. Toe sort of read that works, too. So let's take a look at our page Now I just click here it goes nowhere and just gonna keep refreshing this particular page. And we wanted to go to the very bottom. So we need to give it some sort of place toe link. Teoh. Now we do that by giving it a pound symbol, a hashtag number sign. Whatever you wanna call it, that is a shortcut for I. D. We'll talk more about ideas in the future, but basically, we just want to say I d of bottom now. We haven't set this yet, so it's not going to do anything. And at the bottom here, we want to give this an I d of bottom so you can see that this matches that's right here Or rather, that was a terrible example. This one matches all the way down your matches, that one. So now when we saved the page, we can refresh and when I click this link, you can actually see at the bottom left. It's going to go to internal links dot html pound sign or hashtag whatever you wanna call it bottom. And if that I d exists in our page is going to try to get us there. So it click it and it jumps me all the way to the bottom. And also take note that rul has actually changed. So when I reload this page, I'm just going Teoh basically hit Enter here. It's going to try to bring me back to the very bottom, so let's go somewhere in the middle here. Let's refresh that page by hitting. Enter on the U R L With that hashtag bottom in there, it automatically brings me to the bottom. So now you can give people a particular link to a page that you've made, and you can skip past all the other junk content if you want to, and you can tell them to go exactly toe one spot. Now the reason that this is at the very bottom is because when we jump down the page, it's trying to actually bring this bottom section. This this i d. This paragraph is trying to bring it all the way to the top. So let's go ahead and create an example of that. Let's do that's where we're just gonna add a bunch of new lines. And so now we have a bunch of new lines underneath it and let's go back up to the top and click this. It brought me to the part that was the bottom of the page. It's no longer the bottom of the page is more the middle of the page, but it still brought me here. And if I simply refresh the page by hitting enter because I have that I d in the your own the browser says, Oh, ok, one doesn't escape your right to that sent that particular section. And as an example, we can do it very raw by just simply typing hashtag bottom and it brings us straight there . Now, I'm just going to adjust this a little bit. I'm gonna say, Well, first of all, I want this on one line and I'm gonna change this. I d to middle. This is the middle and at the bottom. We're going to do this. This one's going to be the bottom and at the top. Let's make two links in here. So let's say ah, did Ah skip to the bottom or we can skip to the middle middle and we also have to change this one. Now again, I'm getting that name Middle that hashtag middle by this name here. So you can sort of think of this as something like that. Let's go ahead and save the page and refresh it in your browser. Actually, get rid of that in the your own, and we can now skip to the middle and skip to the bottom. The purple text means we've already actually clicked this thing. But we haven't clicked the Blue Link yet, so we can skip straight to the middle of my scroll all the way back up. Oh, the way back up. You can see that I can now click skip to the bottom and brings me straight to the bottom. Now that's all there really is for internal links. Your task for this video is to basically duplicate exactly what I did in this video. Create a new HTML document calling internal links dot html and I want you to create two links. Create one that goes to the middle of the page and one that goes to the bottom of the page . Now, remember, if your page does not scroll, you are going to need to make its girl. You're going to need to make it long enough, so feel free to add a bunch of empty paragraph tags. Maybe add a little line or a dash or something just so that it looks like there's more content going down the page and you can keep scrolling and your first link should go to the middle, and your second link should go to the bottom. Once you're done that you honestly have the hang of links at this point. And there's just one more thing we need to learn about links, and it is extremely important, and that's relative links. Sometimes we're not going to link to an exact place. Sometimes we don't know where that exact place is going to be, so we use something called a relative link. So once you're done this with internal ing's head on over to the next video, and we're going to learn about relative links 20. Relative Links: okay, We've learned about internal links, and we've learned about external links. But what about relative links? How do we link to our own pages? Say we have to Web pages side by side, and we want to link back and forth to them. How do we go about doing that while there is a special way that we do it? And basically, we just chop off the https part and we don't give it a pound sign or a number sign or hashtag symbol? Whatever you want to call it, we don't give it that. We simply say Go to new file dot html and it's actually pretty simple, but it can get somewhat complicated when you're just learning HTML and learning how paths on computers work. So this video is actually split up into two sections and down the road, we're going to learn about asset path in, which is how we get into more complicated structures, such as linking to another file that is in another directory, another folder. Right now, we're going to keep it simple. We're going to have one link or one page that links to another page. It's right beside it, and it's going to link back so we can flip back and forth. So let's go ahead and get started with that right now. First things first. I'm in my editor, so open your editor and we are going to create a new file. And this is simply going to be called. What do you want to call this one? Let's call this because this is relative. Let's call this relative links. It's called Relative Link one dot html with an underscore in there. So let's go ahead and create our HTML structure with head. And there we have got a title, and that title can be relative Link Page number one and in here, By the way, for the shortcut NVs code. All I'm doing is typing like body. And as it auto feels, I hit Tab and it just creates the beginning tag. So this starting tag and that end tag for me it's really, really nice. So just hit tab and in my body I want to link to I know let's not do that. Let's make this very clear. This is page number one, and let's create a link that did not do what I wanted it to Dio age rdf and we want to create a link to go to Page number two and we're going to copy this page into relative link to so a different page. Now we have both of them in here. And can I actually split this? Let's Ah so I just went to view editor layout and let's let's split right, Yeah, There we go And let's go ahead and open Relative Link one and relative link to. So let's move you over here. So on the left, I have relative link one on the right. I have relative link number two, and let's make this just a tad smaller so we can see what's going on on both pages. Eso on number two. Let's go to this page is number two and go to page number one. Now I'm going to open up Firefox. You can open up whichever browser you like, and I'm simply going to open up one of these two pages and you can see that says this page is number one. Let's make that larger. This is Page number one, go to page number two, but if you look at the bottom left because we didn't give it a link. It stays basically empty. It's going to link to itself. Is going to go to a relative underscore. Link one dot html not a link to the second page. All we have to do is put in that file name, so let's go ahead and put relative link to dot html and over here in relatively to dot html . Let's put relative link one dot html. Let's put these on new lines so that we can keep this in sort of intact so we can see it all in one go. So one page is going to link toe page number two and page number two is going to link to Page number one Save Refresh. My link changes color because I've never clicked him. Now this goes to Page number two. This goes to page number one. They're different sizes because I have the zoom set on one page. But if I reset the zoom now, we're linking two different pages and watch that you are l changes well, that you are all up here. That link it's changing from relative link 12 relatively to now. Really, that's all there is to relative linking So whenever you're creating a Web page with multiple pages, maybe you have, for example, maybe you have an about page a contact page in a home page. Well, typically, your home page is always going to be index dot html. Your about page might be a belt dot html, and your contact page might be contact dot html. And so all you do is you put a Lincoln here instead of relative link to you. Put about dot html Say about me something like that, and assuming that it bowed out, each email actually exists. You'll get the page. Serve it. We will show you the about page Now as an example, Let's go back to the browser, Refresh and let's click about me because we do not have a page called about dot html. There's no about dot html document. We're going to get this page file not found missing. Page 404 Something like that. No, Generally in Web development, this is called a for a for a missing page. And whenever you see the big letters, 40 for that just means that that particular page you're looking for does not exist. So let's go back. I'm going to fix that up. Undo that and get rid of this stuff. And let's talk about your task. So your task for this particular lesson is to create two HTML files and link them together , creates, ah, link one dot html and create links to dot html and then link them to each other so that you can simply open up your page in your browser and you can switch between them like this. Now, I'm just gonna close that down, and I'm gonna create a new file here, and I'm in Type out. Congrats. Congrats. Because you've gotten this far and that's actually very, very far. And the reason I'm saying congrats is because not only have you learned a lot at this point , this is also a major turning point in your career. As a as a future developer, you can now link pages together, and that is really the core principle behind the entire Internet. If we were not able to create one page and link it to another page, nobody would be able to find anything else on the Internet. We wouldn't be able to link to each other. We wouldn't have this giant web of websites nobody would know about Google or Facebook. Google actually wouldn't even exist if this feature didn't exist. So you've actually come a long way, and at this point you can start creating a giant web of Web pages and linking them together . So hey, congrats. Now, when you're done with your task again, create relative link one in relatively to and link the two pages together. When you're done with that, let's head on over to the next lesson where we are going to learn about images. 21. Images: Oh, right. So far, we've done a lot of HTML stuff, and it's been pretty cool so far. But our site is kind of boring at the moment. We might want to consider maybe adding an image or two. And so in this video, we're going to learn how to add an image from both your computer and from the Internet. So the first thing we're going to want to do is create an image tag, and then we need to find a source. Au Earl. We can either give it a relative link, which is what we learned about in the last video. Or we can give it an absolute Lincoln exact link to some other length on the Internet, and we're going to demonstrate both images also come with a height and width and Alton title on all sorts of attributes. So we're going to explore a bunch of these different routes as well. So let's get started with that. By creating our HTML template and then inside of our body, we're going to add an image tag. So I have my editor open here, and I'm going to create a new file, and I'm going to call it image images, I guess dot html And in here I'm going to create each female head title and in the title I'm gonna get It's called Images, I guess body. And we want an image here. Let's go ahead and add that doc type now that we know about doc types as well. And let's open up this file in Firefox. So we want an image here. Pretty boring Page. We've seen this 100 times already, So let's explore this tag. This element this each to male element. We haven't image in here and for short. We call it I m g image. When I hit Tab V s code automatically wants me to give it a source and in salt, that is just a good practice. But we can also give it a title title. We can also give it a with and we can also give it a height, and there are a bunch of other things that we can give it. But these are the five attributes that we're gonna work with today. So I'm gonna save that and refresher page and we see nothing in here. There's no image. Let's explore the all tag first because this one makes sense. So let's give it a source of H g. D. P s google dot com. Now this needs to be an image, and this is not an image. This is just a link. We'll talk about that in just a second. When I refresh the page, you can actually see me zoom in here we have a broken image. Well, that's not really good. You know what happens when there's a broken image? Just looks like a broken image. But let's an altar, Let's say Google image now you're all too is your alternate text. If this image cannot be loaded, what texture we load in place of that, you can actually see here it says Google image. I can't actually select that text. Ah, but it does say just Google image. And that could be literally anything in here. Anything in here. And when I go to refresh the page again just as anything in here because that image it does not exist. So let's add a placeholder image And let's just go to placeholder, not dot i t dot com. We want placeholder dot com, and this is just going to generate an image for us and how do we do that? Don't allow sure. Cookies air fine. And we really just want this link in here https via dot placeholder dot com slash 1 50 And that's going to give us a 150 by 150 Link not link an image. So let's open this up in a new tab. And oh, you can't really even see that. That is very dark. Much better. Okay, maybe 1 50 is too small. So let's maybe go with 4 50 by 800. Not through the other way around. Let's do 800 by 300. There we go. We have, ah placeholder image. We could just grab this link. So gonna copy that in my editor where it says source, I am simply going to paste that in here now. Typically, this should have a dot J peg extension. Let's make a list here dot j peg dot other Other jpeg PNG dot bmp gif could be a dot a PNG for an animated PNG could be a Web API, which is a relatively new format for super compressed images. Typically, it ends in something like that now because this website already know is how to serve an image basically serves a U. L. As an image. It tricks your browser into thinking that it's an image. But for all intensive purposes, let's stick to this room. Let's add dot J peg to that you are all. So I just copied that over and let's go ahead and just make sure that this is right. And because this is getting to be a little bit long. Let's put this on a bunch of new lines so we can read these all in one view something like that. So we've got an image tag again. White space doesn't really matter. We have a source going to placeholder an altar alternate text in case that image does not load title with and height. So let's go ahead and view our page now, and I'm just going to go up here, refresh my page, and we're going to see a big image. And that's because I'm super zoomed in here. And when I zoom out to just 150% weaken, seeing 800 by 300 image here. So now we know how to add an external image. Now what happens if we add a title? Let's say ah placeholder dot com image refresher page. And if you place your mouse over it long enough, it will eventually say placeholder dot com image or whatever text you want to put in there . Let's give it a max with. Even though this image wants to be 800 pixels wide, let's say, Can Onley actually be 400 pixels wide? So with a 400 and now you can see that it shrinks and it has kept the height the same. But let's say we really want to skew this and make the height. Let's make the height 1000 so we're gonna take an 800 by 300 image. That's the width. By the height, we're going to make it short, and we're going to make it less wide, and we're also going to make it really tall. So let's save that and refresh, And who would you look at? That really skews it. We could get really weird with this to us. Let's do you like 400 by that's do 400 by 200. We're 40 by 200 so we can really squish it down here now. These are completely optional. So what I'm going to do is I'm gonna keep them as the original. So 800 by 300. So it looks, you know, halfway decent. And now we know how to link to an image on the Internet. And again that goes with what we were learning about links. Where has H t d. P s? And here that means it's an external link. Now what happens if we have an image on our computer? Now we want to link to Well, let's go ahead and give this a solid example. Let's right Click save image as and in my desktop. I'm gonna go to my website where this where this whole project is being stored and I'm going to save it as 800 x 300 dot jpeg safe. And when I opened up my finder, we've got all these different HTML files, but we also have 800 by 300 dodge a peg. And when I open it Yep, sure enough, there it is. So now, just like a regular link like a hypertext link, all we have to dio is link to the image file itself. the exact file name. So because it's a J peg changing, dystopian G is going to break it. So let's let's break this. First, it's refresh it's broken. Call this a borked image. It is broken to the max doesn't work. That's because 800 by 300 doesn't exist on a little bit down the road. I'm going to show you how to debug this. How to figure out if this is working or not. So just bear with me on this one. You might have to struggle for a little bit, but eventually we will get to a video where I'll show you how to diagnose this problem. Let's change that back to a J. Peg refresh, and there's our image now. The trick here, and this really trips up a lot of people is we have an image. Where are you? Images dot html and in this exact same folder is the image. So place them side by side, so make sure they're the in the exact same folder. Make sure the typing is right. Make sure there's no typos. Make sure the spelling is right, not the typing. Make sure the spellings right. Make sure there's no typos or anything like that. And your image will I guarantee you work. Okay, so your task for this video let's open up a new file here is Call it your task. Your task is going to be one. I want you to create an image tag and that source that source attributes should go to placeholder dot com one of the images on placeholder dot com Just like I did in this video to I then want you to save that image and change the SRC to be a relative link. So a relative you are also get rid of that https and just make a relative link. And last but not least, I want you to link to this image. So you have an image, something like this. Actually, it's right this out. First link to the image. A link to the police placeholder dot com image. So you're going to have something that looks something along these lines, and this is going to look a little ugly and that sort of on purpose. So a H R F is equal to placeholder dot com. Whatever you're whatever image dodge a peg source is equal to image dot PNG. Whatever your image is going to be slash A. So I want you to create a link around that image and make that image clickable. Once you are done, all of that. Let's head on over to the next lesson where we learn about something that's a little trickier to get our heads around, but ultimately will changes the way you think about HTML elements. 22. Block Elements vs. Inline Elements: okay, It is time for us to take on something a little more challenging for us to wrap our heads around. This is more conceptual than anything, but it does play a pretty big part in how HTML pages are structured. And in this video, we're going to be talking about block elements, block elements versus in line elements and how they're different and how they sort of work together and sometimes or most of the time actually don't work together. So a block element is an element that will take up as much with as possible. So we've seen it with a lot of paragraphs. But if you've noticed when we create a link Ah, hyperlink with a tag or the a element we can put multiple links side by side. But paragraphs we can't put side by side. It always breaks it down to a new section just under it. But a link. You can always be like one like your one thing here. One thing here and so on. So in this video, you and I are going to look at the differences between block elements and in line elements and how they work. And then you'll have a task on sort of just experimenting with it a little bit. So behind me here is empty V s code, and I'm going to command end if you're on Windows, hit control and to create a new file. And I'm going to save this as block versus in line elements dot html and that's it. And I just pasted a simple body in here and not a body, but a bunch of HTML template. And let's call this block versus in line elements and these are drastically different things. So a block element is like a P element block. And so if I try to put text be sided, that's on every spell. Besides be decided or if I put text be sided over here, it doesn't matter what I do. This is always going to break down onto its own separate line. So I open up Firefox and let's open up. This particular file was closed. These and we can see here when I zoom in, detectives beside it over here. Well, that supposed be left text and this is supposed to be right text, but really, it's just on top of each other, So you've got top text, middle text and bottom text. This is what a Block Elements does. A block element will take up the entire width of your page as much as it possibly can. Now I'm going to show you how this works by writing a little bit of CSS, and at this point, you don't need to know what I'm writing here. It's It's okay. If you don't understand this, you can simply ignore this part. I just want to do this for a visual effect. So I say that and refresh my page and you can see that there is a red border all the way around this, and it's taking up all this extra space all over here, even though it's not using it. That is a block element. So let's take a look at this and let's call this a block elements now. This has nothing to do with the spacing in here, By the way, as you saw earlier this text up here and this text, they were all on the same line, and it didn't really matter because the paragraph was always on its own line. So we have a block element now. Let's just preview this so you can see my work. We have a block element. The opposite of that isn't in line element. And we have a few of these one that I've referenced earlier was a span element. Then a span element is just an element that sort of wraps around some text. But we've also looked at anchor tags and in the block elements. We have also looked at H one all the way through h six, something like that. And so when we started, actually, looking at this code is gonna look pretty ugly. I bet. Yeah, so we have a church out to do this block elements. Let's make a list here, block elements. And in this corner, we have each one all the way through h six. We have paragraphs, which is something that we've dealt with quite a bit. And over here we have in line leads. Now it's do age ones. Ironically, in line elements we have span, which is a new one we're going to learn about, and we also have a which are lynx a lynx. Now again, that block element is going to take up as much with as it possibly can think of it as being very selfish. It takes up all the space, and it's that person that sits down in a booth beside you, spreads his arms and says, All this space is mine, even though you could fit like four other people beside him. That's basically what a block element is. An in line element is someone who is more conscious of how much space there using and really just says, Oh, I only need a little bit So I'm only going to use a little bit And if someone wants to sit beside me, that's okay, too. They can come sit beside me. So what I'm going to do here is I'm actually gonna comment some of this out. We learned about HTML comments, and they can be multi line like this. So let's go ahead comment that oat. Let's create another comment here, and OK, so we have some comments in their and our page is going to look somewhat back to normal. Ah, block element. Let's call this paragraph paragraph and let's call this one, uh, h three or let's just call it headers, rather cause it's all of them. So there's a block elements and in the in line elements we have span. So let's look at Span number one, and let's also look at SPAN number to. And let's put these on the same lines and span number three and just for posterity. Let's add a horizontal rule so that we have something to split these up in our page. So the top we have block elements and you can see that these do not work side by side. They do not like sitting beside each other. Where is a SPAN element? It has no problem sitting beside other spat elements. And it's not just other span elements. It's OK sitting beside other links. So let's go ahead and get rid of the spends in here and let's add just a regular link. So let's go to link start HTML and links dot html. That's all we're gonna put in here, and you can see that these works side by side, so that's pretty cool. Now what happens when you mix and match these? When you start mixing and matching block elements and in line elements, they typically actually they don't they don't work just by then, their very nature they will not work So if we put an H one here header tag, this is a large one, and right beside it, we put a span a span, smaller text. Well, we see our header tag and or smaller text is below it. And even if we view our source code, we have a header tag here and smaller text right beside it. It doesn't really matter, because the browser is saying Okay, well, this is supposed to block element, so this gets its own line. Everything else can go above or below it, but not beside it. Where this comes together is when they all start to work together. So let's say we have a paragraph in here now. We know that this is a block element and block element number one in here, and this is a link to relative links dot html. Relative link one dot html is the file, and that's put a Lincoln here. A H r E f is equal to relative link one dot html. Let's put this on a new line again. It doesn't matter that it's on a new line because HTML doesn't care and clean up that white space, and here we go block element number one. And this is a link to relative link one dot html so you can see that they're working side by side now, but they're technically not. The reason I say that is because you have a block element here. Your top level element is a paragraph, or in this case, it's called a parent tag. So let's make a comment here, parent tag or parent elements. And here we have a child tag or a child element element. And so these aren't actually working side by side. If we wanted to make the side by side, we would have to put another element here. So this is a sibling, and this is getting into familial hierarchy, more of the document object model stuff, which is something we're going to talk about a little bit later down the road when we're a little more familiar with this stuff. So this one is a sibling tag slash element. Now I'm gonna show you a cool little trick here, So let's right. Click go to inspect element. And if we stay in our inspector, we can actually see all over the code in our browser. This is exactly what the browser seeing right now. So in our body we have a child element of a paragraph, which is technically the parent elements of the link. This is the child of the parent. No way to think about this is we have these two p tags side by side, the same sort of inventing or out denting, if you will. And that means that they are brother and sister, whereas in here, this is sort of lake. Your older brother, older sister, has already had a child and a starting family of their own and has had their first child. And that first child is a link, and they named it Relative link one dot html, which is terrible name for a child. But that's what they named it. And this could be you. This could be you as a sibling to that brother or sister. Now that's just a quick little way of seeing exactly how your browser interprets things and a very, very rough crash course on HTML Element hierarchy and how it relates to family terminology , I guess. Familial term terminology. Now let's go ahead and let's start adding some styles in here, so it's style border one pixel solid red. We did this earlier, and this just shows us a border. Okay, so we have a block element here. We know for a fact that we have a block element here, and when we put a border around our link, we're going to see that it does not take up the entire width. Actually, all it does is take up the little space around it. We could do the same thing with the span as well. So let's do a spin. And let's give it a style of a border of one pixel. It's going to be solid and is going to be read span number one, span number two and span number three. And when we refresh our page, we can see that they are all side by side. So this is a block element, and this is a block element, and this is a child element, but it is technically considered and in line element. And then we have three in line elements side by side. So the thing to take away from this is in line. Elements can sit beside each other and block elements require require their own lines. That is a simple way of thinking about this. So your task for this video is going to be I want you to one. Create a new dot html file. I want you to create it from scratch. So as we see here, make sure you have your doctor. Makes tree of your HTML tag your head at a title. Make sure you have your body. So I had all of that good stuff to create, to block elements. And these can simply just BP tags. Or maybe I don't maybe like an h three take. We know that all headers or block elements now and number three create two in line elements , so they can either be links or they can be spends. And lastly, put text in all of these and see how they fit side by side. So basically, you should have one paragraph, another paragraph, and then maybe a link and a span something like that. Put them side by side, fill them with text, open that up in your favorite browser and see how they act. Now, if you don't understand everything that's going on in this video, that's actually okay. Don't worry about knowing all of it. don't feel overwhelmed. I don't feel like you. You're stupid because you don't understand it. That's not the case at all. It's just This is more of a conceptual thing, and it's a little bit of a mind hurdle to jump over. But once you understand it, it makes a lot of sense. So just bear with me. And as we practice the is, it will start to make more sense as we move throughout this course. 23. Div Elements: All right, let's sort of dive into some really world code here. The most popular HTML tag, by far is the Div. Now the diff the D I V, which you can just see behind me here, is just a dummy element. It's just a divider. It's a block element, so it's going to take up as much with as possible. But with a little CSS, you can change its entire behavior, and I can its most popular one out there. It's just because there isn't an element for every single scenario. So sometimes you just need to nest thing. Sometimes you need to make ah list of things, and sometimes you just need a div. It's just a very basic element, and we're going to be using a lot of these moving forward, and I actually want to dive into something with you right now. Let's open up. I am db dot com and this. Just count the number of dibs on let's count the number of spans and let's maybe count the number of links and in a new tab, I'm going to go to imdb dot com and let's go right click view page source and let's do a fine so command after control. F and I am simply looking for less than D I v the opening tag. That's gonna be hard to see on my screen, so I apologize about that. But we can see that there is one of 424 matches. That's pretty not so. There's 424 developments in here. Let's go ahead and count the number of a tags. There are 256 8 eggs in here. Let's go ahead and count the number of spans. There are 100 and four span elements in year. Let's take a look at something else that looks popular. Input. We haven't learned about this yet, but we will eventually input. There are three input fields. Let's look at option. There are six option fields. Let's look at list items again. A lot of these we haven't learned about yet, but we will. There are 100 and 11 list items in here, so by far so far, Div is winning by over double, almost double. There's 424 dibs in here. That's pretty crazy amount, and that's just that's pretty normal to be totally honest. So let's go ahead and explore what a div looks like in here. I just have div dot html. I've already gone ahead and created this file and added my doc type in html on my page structure and I'm simply going to type div Devyn here and I'm gonna put a second div in here. So I just made to dibs and in Firefox, I'm going to open this up div dot html and we can see we have one def here and we've got a second. If there now, you might be wondering at this point what's the difference between a div and a paragraph? Well, a paragraph has a little extra padding little extra margin around it, if you will. So, uh, extra spacing here and extra spacing here, number two, refresh the page and you can see their spacing between these two. And there is not with a div. So a paragraph just comes that extra spacing. Assuming that you're going to be writing something content related because you're putting it in a paragraph, not everything belongs in a paragraph. Even though we've been using them to death so far, not everything belongs in a paragraph. The next thing is, is you can't actually Nesta paragraph so you're not supposed to put a paragraph inside of a paragraph. This is something we haven't talked about the paragraph paradigm. But this is not nest herbal. Let's go ahead and take a look at this so it looks like it's totally fine. But when we inspect our element, we can actually see that extra spacing in here is just regular text, and we put a paragraph inside of it, so we should have a paragraph inside of a paragraph with Texas as this is not nest herbal. And would you look at that? It actually broke out of its parent paragraph. So these air not nest herbal, whereas with a div, you can nest as many gives as you like. And this is what a nested def is going to look like. So it's but it did. Here. It's but if here it's. But if here, let's positive here ultra nested if it's the most nested div of all. So that's refreshing. We see ultra negative, no big deal, but in our browser, the browser actually says, Oh, there's a different side of a Div. O a. Div. Inside of it. If there's no Oh wow, it just keeps going. And so we can do this with dibs, but we can't to do it with a paragraph. And nesting is incredibly important when it comes to HTML, especially when you start creating more complicated websites. Now the other thing to know about a development is again. They are block elements. This is a block element, and it takes up the entire with so sort of going along with the styling that we were doing before. Let's add border one pixel solid red, and we can see it takes up all this width. But if we did the same thing with a span, style is equal to border one pixel, solid red and again, you do not need to know this part that CSS that comes after HTML. But if you're really interested in learning about that after hmm, I have a great course called CSS masterclass. It's about 12 almost 13 hours of just straight. CS estimates how you make websites extremely beautiful. This is a span, so let's see the difference here. So this is a span We could even do this again Let's put these for of all on the same line Here, block element takes up all the width and spans are side by side. And so a div really is just your dummy element. It doesn't mean anything. It just means that you want to create some sort of divider and maybe put some content in it . Maybe put another def, Maybe put a paragraph inside of it. Yeah, you can put paragraphs inside of dibs. In fact, let's take a look at that. We have a diff here paragraph in a div. And now let's look at the opposite where we put a divina paragraph Devyn a paragraph and watch this actually break. We refresh Inspector Element and in our body we have a div and we've got a paragraph in it . So paragraph inside of a diff and I'll just make that a little better. A little better, little bigger. And in here we have an empty paragraph which we did not write an empty paragraph, after which we also did not right and a duty that does not live inside of any paragraph at all. So a paragraph does not allow nesting of other block elements like this at least not the Div. But a div does. And so you're going to see a lot more dibs in the future. You're going to see them all over the place. And just like the IMDB website. If you open up Facebook or if you open up your inspect tool with Google or any website you're going to see tons of dibs. They're all over the place and with a little CSS magic, which you can learn more about with my CSS masterclass course. Once we're done learning about HTML, of course you can change the entire behavior of a div. I mean, you can actually change the entire behavior of every element, but dibs are the most common. Your task for this particular video is going to be create a new dot html file and then I want you to create one def, then two spends, then one DIV. Then three spans. And so it should look something along these lines you've got a div with, I don't know, maybe some text in your text text in here, and then you have to spans. So you're gonna want to do you a span, spend one, and then you're gonna want to add another div and then add a few more spans. And then when you're done that, save your file as div dot html, Open it up in your browser and just take note on how is span Axe versus how a day of acts spans. You can put side by side, but a div you cannot. 24. Lists: Let's take a look at lists. There are two primary ways of making a list. In HTML. You have first Uran ordered list and second, your ordered list or the other way around. It doesn't really matter in this video. We're going to learn about both of them and sort of how they work with child elements. And making a list is actually fairly easy. But it does take more than one HTML element to do it. So let's dive right into this. So I already have lists dot html created with the HTML structure, and I'm going to simply create a header here in h four. Call it a non ordered list. A new ordered list, now decreed in a Northern list is the U L. It's a UL tag, and it has a closing tag. Has an opening and closing tag. Unlike an image that doesn't an image, you don't put anything in between it. It just has a source. A list does not. A list has an opening and closing tag, and inside of it takes an L. I. A list item, and I wonder if V is code. Will you fill that out for me or describe it to me. Ally. Ah, the Ally element represents a list item. If a parent element is an ol UL or menu item, then the element is an item of the parents. Blah, blah, blah, blah. OK, so basically, you've got a list and you've got list items. So we've got a new ordered list and we have our first list item. Let's call this number one, and this also needs to be closed as well. So we close it with slash Ally. Let's create another one Ally number two and we close it with slash L I and L I number three and again it's close with slash L I now these air just from the last videos. I'm gonna close those down and open up lists dot html And here we can see we have an A nordeste number one, number two and number three. And it comes the nice little bullet point and some nice inventing and stuff so you can see where the tax actually starts. Right where this you is at the very left side. There's a bunch of space in here, so it does some nice things for us so we can make some decent lists right out of the box. Now that's an a nordeste, and I want to fix that indentation, cause that's gonna drive me nuts. Now we have an ordered list. So in a Nord, erred less basically just comes with bullet points, an ordered list and ol and again you can sort of think of it as ordered. Less O. L ordered list also takes a list item, and we say list, item one and list item to. And so we're reusing this same ally methodology between both of them, just the parent tag. The tag that goes above this one or wraps around the Allies is different. So we used a UL to begin with, and now we're using an OL. And so let's go ahead and create 1/3 1 here refresher page. And we have an ordered list as well as we've got 123 and an a Norden list, which just uses bullet points. And just to reduce some confusion here, let's go ahead and let's get rid of that. It's now we can see list item this item list item and it automatically numbers it for us. That's really nice. Whereas an a nordle ist again is just bullet points, so no big deal there. The tricky thing about lists to begin with is You always have to tell it whether it's an a nordeste or an ordered list, and then you also always have to give it a child. L I. Element. If you don't give it a list item element, you're not going to have any list items, so that's required. So it does take two elements to make a list, but thankfully, they're pretty easy to make. So your task for this video is going to be making a new ordered list. And it should have three bullet points just like what I didn't and then make an ordered list, and that one should also have three bullet points. When you are done with fat, save your file. Call it lists dot html and open it up in your browser and make sure that you have three bullet points and then you have an ordered list with items number 12 and three. Once you're done that, let's head on over the next lesson. Let's learn about something a little more interesting, a little more complicated, but is also going to really revolutionize how we can build out our pages 25. Introduction to Tables, Rows and Cells : Let's learn about tables. Tables have a unique history behind them. So when Web pages first started out, we used tables to create different layouts to create columns and headers and footers and things like that. And then all of a sudden, no, everything was good and we had some sort of technology technological boom, our revolution. And this thing called a mobile device just sort of popped up. And all of a sudden we had to take a Web page that could, you know, half a size like this and cram it down into something really tiny. And tables don't really have the ability to be. Well, that's called responsive, so they can't go from really big to really small. Now we'll learn all about responsive design a little bit later. What responsiveness is, But for the time being, we should really just know that tables are a way to display data, whether it wants to be in a table or you want to use it as an entire layout for an entire page that's totally up to you. But in today's ecosystem, when we're making a website, we actually don't use tables very often unless it's for a very particulary case, and even then you really only see it on government websites or larger organizations who are a lot more conservative. Generally, you won't see tables on modern type website. You'll see something that looks like a bunch of dibs and with a bunch of C. S s and responsiveness weaken sort of snap it down into different rose instead of having them in columns for mobile devices. That said, just because tables aren't really used in websites anymore doesn't mean that they're completely useless. They're two very common scenario is that we use tables for almost every single day. Number one is e mails, because email is basically it's a dinosaur of a technology. It's sold and hasn't really kept up with browsers that we can't really use all sorts of responsive tricks with CSS and JavaScript and whatnot, we have to simply use tables. So basically every email that you open is going to use a table, and the other one is P D EFS. And because PdF's air somewhat of an older technology and somewhat proprietary, it's harder to make a pdf. Responsive actually is impossible to make. A PdF responsive because it's a document It's not a Web page, it's a document. And so a Pdf needs to have a specific type of structuring it where you have maybe ah column for branding and then a bunch of text down one side of it and maybe header and footer page number of things like that. And so we used tables for a lot of pdf's as well. Now you probably won't be writing tables. You won't be using tables every single day as a Web developer, but it is important to know how they work. And it is important to have that accessible. That knowledge needs to be accessible for when you do have to create an email template or just work with the table. For whatever reason, maybe it's a pricing table, and you're working with an older client. Tube says No, we absolutely need a table for whatever reason, and there are reasons out there, so we're going to be learning about tables in this video. There's going to be a lot to take in, so don't feel bad. If you have to watch this video twice. Feel free to ask questions and you're going to want to really practice this one at the end , I'm going to give you a task. But that task might not actually cover enough, so you might want to tinker around on your own time as well. So let's go ahead and get started right now. So I have my editor open here and I am going to create a new file and save it as table dot html. I'm going to create and HTML tag a head tag, a title tag. Let's call it tables and let's go down and let's add some body in here body stuff and in here, let's add our doc type. Now let's open up table dot html and we'll see. Yeah, there's not really anything in here, and that's OK. So when we create a table, we are dealing with rows and columns. We're also dealing with the table header, a table body and a table footer, and we can mix and match all of these different things. So we're going to create a four by four table four columns with four rows, so we start this off with a element called Table. It takes an opening and closing tag, so it's not like an image or a B R A h r. It is an opening and closing tag. Inside of this. We have a thing called a t r a table Rome. And so now we're actually starting to see that when we were learning about lists requiring at least two elements to create a list, we can see the same pattern with a table. We have a table, and we have a table row and then inside of each table room. We also have a T D element, which is basically just a data cell. It's just a cell inside of your element. Think of an Excel spreadsheet and it's just one particular cell. So this is going to be so number one, and we're going to do the same thing again. Cell number two and cell number three. And so these take an opening and closing tags. You've got a TD here and a TD over here closing TD. But unlike our lists where we had an ordered list on ol and then in L. I, and then our text, this one has a table, a table row and then sells. And then, if we wanted to add another another row, we just simply take this entire row and copy and paste it instead. I'm going to write this out. Let's do it tr So all I did was hit tr and then tab and that will create a TR for me and it to To to to do that's fixing this intending. And let's call this. I'm gonna want to fix this up so it's adjusted it. Ah, we want to call this road one. And this one disliked all of these road to and let's see what this looks like in Firefox. Okay, well, that is a terrible example, because this is really just looks like a bunch of in line elements and block elements. So let's go ahead and add a border of one so this border attribute will give us a one pixel border all the way around. I believe this attribute is actually deprecate ID. It should work for the foreseeable future, but eventually one day this will be removed. So here we go. We have all these different cells in here. Now, let's go ahead and make this bigger. Let's make the width of this entire table 100% and by adding that percent sign is going to take up 100% of the with from the left to the right of the page. And so now we can see row one cells one through four row two cells, one through four, and we can copy this two more times. So go ahead, paste that Let's go ahead pace that because I am a stickler for indentation and Row three, Let's do this and wrote for refresher page. And there we go. We have four rows and four cells in each row. Now that is the basis of a table. And it only gets more complicated from here now because this is all sort of the body of our table and we don't really have a header. Let's go ahead and create a header. So we're gonna create a new table, row a tr, and we're going to create a th a table header head or so and this is by default, going to be bold. So we've got column one, and then th call them to and another th call him three. Copy and paste. That row changed three to a four and there we go. It also centers the text for us right out of the box, so we have something to work with. Here we have a header. We have a bunch of body stuff in here, just like our HTML structure, where we have head and a body. We also have the same thing for a table and we're going to add those in just a moment. And lastly, I'm going to take this table row from the very top and put it at the very bottom. And I'm going to change this to say instead of column is going to say Footer title doesn't really matter what the Texas at this point, because this is just for demonstration. So now we have a column at the top that's bold and centered. We've got four of them right across in our row. We have four by four grid in here, and we have footer elements as well. So table heads four footers Now. I had mentioned that a table has a head, a body and a footer a lot like what are HTML structure has where it has a head and a body. Let's go ahead and add that head that's type in th head, and we're simply going to move this stuff up one line. So now we have a table table, head tr and then a th. And when we refresh our page, ideally nothing changes. And all we're doing here is we're telling the browser that Hey, this is the header. This is the head of the table. It's not just another row, and it's not just another row with bolted text in it. It's actually the head. It's important. And likewise for a body we can add t body do do do grab all of our rose and move them up one. And so all of our rose now live in here. Let's minimize that and let's add the last won t foot. So when we refresh our page, we're not going to see any difference. But when we inspect our element, our browser is saying there's a table, there's ahead, there's a body and there is a footer. And although we can't visually see the difference semantically, it does make sense to help the browser out. If you don't need to make the browser do extra work, don't make a do extra work. And for search engines, this is incredibly helpful because a search engine might scrape your page and say OK, well, I just want to see the top four subjects of a particular debate or something. And maybe those air in the columns, or maybe actually a better example would be the names of four people in a debate about any particular subject. So you've got debater 123 and four, and then you've got subjects underneath them. And if they did well, if they didn't do well, something like that and search engines will make use of that data. 26. Tables: Merging Cells, Rows and Columns: but it doesn't stop here. What happens when, for whatever reason, you want to merge two rows or two cells together. Is that possible? What is possible? And it's not frowned upon or anything, but it is a little bit tricky to wrap your head around, so we have a header in here and we don't want to change anything in there. But let's say we want to merge Row one, Cell one and cell, too. We can give this an attribute called Coal Span. So is going to spend two columns of two and we're simply going to remove one of the cell. So this is going to act as if there are two cells in here. Despite there, only being one were telling HTML to act as if there are two. So let's save and refresh and you can see that it's actually taken up with section in here . So let's let's do the same thing with Row to sell three and four. So let's get down to row to sell three and four. That's at a cool span of two. We don't need cell number four because this is well, this counts as to so let's say that. And there we go, these air starting to merge together. Now let's take a quick look at what happens in Row three when we get rid of cell number three and four entirely. We didn't give them a coal span or anything. We just got rid of them. So everything else. For all intensive purposes, there are four four columns here, four columns here. There are four columns here, but there are only two columns in here to cells in here. It starts to look a little bit empty, doesn't it? It works, but it's not proper now. What happens if we want to merge two rows together? Let's say we wanted to emerge Row three, Cell one and Row Force A one. So these to sell one should be together. Let's go ahead and do that. Now we have ro three cell one, and we simply say Roast Ben is equal to two. And this has nothing to do with our columns. So we're going to leave these columns at four. But because it takes up the next one down here, we're simply going to get rid of this cell. And just like that, we have ro three cell one takes up two rows and then it goes into cell to cell three. Cell four. We could even do something like this. Uh, roast Ben is to do a cool span of two as well. Let's get rid of this one because it's now spanning two columns and we can get rid of this one because it's also spending two columns into the row underneath it. Let's save and refresh And there we go. We're starting to actually scoop out entire sections of our table. Now, at this point, you might be thinking, Wow, what use is this? But when we're looking at comparative charts, so maybe we want to Oh, it's you a simple example. Here, maybe we have a chart of colors and so we have a Roy G biv. We've got a red, orange, yellow, blue, green, indigo and violet, and between each of those colors are additional cells. So we want to see sort of what is in there. And so let's go ahead and create a new table. Just a real simple one here, and we're going to do this table. We're not even gonna do this all entirely properly. I'm going to cheat here. Eso we have a table row with our table header. We're going to call it a color Cholera color Doesn't really matter how you spelling. Ah, and maybe the hex value. Something like that. Maybe, uh, the rgb a value or just the RGB values something like that. And then we have another row in here, not a trends. We have another row in here, and our 1st 1 needs to be a color. So let's say blue and then our 2nd 1 needs to match this value of the hex value, so I don't really know what that is, so I'm gonna just type hash tag unknown, and then our 3rd 1 needs to be the RGB value, and I don't really know what that is so amazing They put in black, so don't don't confuse these Azriel. I just made those up. Okay, so now we're looking at a table and we need to add border of ones. We can see where we're working with 100% so that it looks a little nicer. We've got a color hex value RGB value. Now let's say we want to add sub colors in here, so let's go ahead and add a color. We've got sub color. So instead of just blue, maybe we have Navy blue, Royal blue, things like that Baby Blue. It's now we need to add another column in your let's call this one baby brew. Now that's nice. But if we wanted to duplicate this for Navy Blue, this would be pretty painful. We're gonna have to go up here, changes to Navy blue, and we're going to be duplicating this column over and over and over and over and over again. That was going to say color blue, blue, blue, blue, blue, blue, blue color red, red, red, red, red, red, red color orange, orange, orange, orange, orange, orange, orange. And that's not what we want. We just want one of these. So let's go ahead and add this in any way. So, Navy Blue, whatever that's gonna be, I don't know Ocean Blue, something like that, and so we can see that this is sort of becoming a little bit familiar, but we won't emerge all of these together. All the blue ones should be together, so let's go ahead and give it a roast. Ben, we've got a roast ban of three and let's get rid of this blue That's not necessary anymore . Ins Get of this blue. There we go. And just to make this little interesting, let's add a BG color of blue. I believe that is also deprecate id in favor of CSS. But this should work for the foreseeable feature. We have blue in here. We've got baby blue, navy, blue, ocean blue These values could be different. These RGB values could be different. And now we can copy all of these over someone. Grab all these blue rose, make a bunch of space for us to work And let's call this one Red and this one all the way across there is going to be read. And I did something wrong. I think I pasted to any times in there. Yeah, definitely did. Now I could go and fix that up for you, but I don't want to waste your time on tables any longer. But the idea is that you can have entire Rose dedicated to just one topic. So if you want to get into categorization, this is a great way to do that. Okay, so there I fixed it up and now for your task. And again I want to remind you, before you jump into this task that should this feel difficult to you Should this feel hard for you or overwhelming at any point, Just take a break and come back to it. No one says that you have to do all of this in this particulate er moment. So your task is going to be your task is going to be one. Create a new dot html file to create a table three, create a header so you want to add 80 Head four, Create a T foot five, create a T body. And in here we've got 5.1. Create four cells with four columns. Like what I originally did A four by four grid. Your T foot in your tea had could just be regular names. It doesn't really matter what's in there. They're just going to be bold and centers so that you really know what you're looking at it and it just makes for a better viewing experience. Really merge at least two cells together, and then I want you to merge at least two rows together. And lastly, I want you to merge at least two rows and two cells at the same time together. So this is your task. Create a new HTML file and create a table with a head footer and body. Then I want you to create four cells with four columns. Or actually, that's actually wrong. Create four rows with four columns, so you're going to have 16 cells in total. 16 cells in total. Merge at least two cells together in the same room in the same row. Merge at least two rows together, murder at least two cells together from different rose and then merge two rows and two cells together. So merged four cells together. So they're all grouped together. Don't forget if you have questions. If you get stuck, I'm here for you. Leave a comment or a question down below, and I can help you a soon as I can. Other than that, feel free to re watch his video or ask questions and the learning to code Facebook group. There are thousands of us who are willing to help you at any time during your learning development or your learning journey. After this, we're basically done. Html basics. We're going to go over a quick little summary, and then we're going to learn some of the more advanced HTML stuff, and this is where it actually gets a little bit more fun. It's a little more challenging, but it produces a lot to better websites because right now we really needed to know the fundamentals. And honestly, sometimes learning fundamentals is not very fun or interesting. But in the next section, when we start learning about more complicated things, we are going to be starting to create an actual website, and then at the end, we will create an actual Web page. Good luck on your task. I'm here for you if you need support. Other than that, when you were finished, let's head on over thought next lesson together. 27. Mid. Course Break: already. You have powered through about half over this course already, and a lot of it, honestly, it's pretty dry. I know that HTML is not the funnest thing in the world, especially because it's not super visually appealing. But it is the absolute core behind every single website without HTML. Don't have a website, and so everything we learned so far was absolutely necessary. Now I'm hoping you got a lot of great experience and a lot of practice. I hope it made your brain sweat at some points, and I hope you're still with me. And if you are, if you want to go through the next half of this course, fantastic, because we're going to start actually building a proper Web page, we're going to get into, like, hosting video and audio and things like that and just making a website that's a lot more interactive now. A few things that we did cover so far. Just as a quick little reminder, we learned what HTML is. We learned about different editors, different browsers. We created, oh, men, all sorts of things. Let me consult my list here. We talked about HTML elements. HTML attributes headers line breaks, docks, doc types, bold italic underline code comments, external, internal as well as relative links. That's a big one. Ah, blocks, verse in line elements, def tags, lists and the complex cities behind tables. Ah, there's actually little bit Maurin there that I sort of sprinkled in nonchalantly like a horizontal rule. We sort of saw that we saw a bunch of attributes that probably we didn't even know existed to begin with. And ah, yeah, we are ready to move on to the MAWR. Complicated part of this course. Now don't be scared. Don't be overwhelmed. Don't be worried about it. It's actually not really all that complicated. It's just a little more advanced than what we've currently been working with. So far, we've only been working through the fundamentals of HTML. However moving forward, we're going to move a little beyond some of the fundamentals, although we're still going to touch on some of the more advanced ones. But we're also going to start putting a lot of our code that we've learned into actual practice. So this is going to be, I think, a lot funner from here on out. Now, this is just a summary video basically describing what we've already learned. I just want to say a big congratulations on learning this much. So far, you've taken a really, really big step. If you have questions, don't forget, you can always ask them down below. I'm here to help, and if you want additional support, I have a Facebook group called Learning to Code. How you just typing into Facebook called Learning to Code and you'll find my group. There's at the time of this recording roughly 21 ish 1000 people in it. You can join that course at any time for free doesn't cost anything. And there are again tens of thousands of developers who are willing to help you at any given point about any subject. There are things in there that I don't even know about that no other people can answer. It's pretty fantastic community to be in. So if you're on Facebook and you want to join a deaf community, you can come join us on learning to code on Facebook. With all that said, I look forward to seeing you in the next few lessons where we actually start building our website, including all of our skills that we've developed over the last couple of hours together where we start actually putting all of that together in one place. So big. Congratulations on getting this far. Let's go ahead and tackle the last half of this course. 28. The DOM: welcome to the first lesson on advanced HTML. The first thing we're going to learn about is the document object model or what I'm going to call the Dom. The document object model is basically your hierarchy of how a browser understands what is in your page and where it exists. Now, what I mean by that is think of It's like a tree map. So you sort of have your starting point up here and then you might have, like, a block here in a block here, and they might have a block here in here and then one over here in here, and those might have some blocks and maybe some text inside of each block. All of that is considered the document object model. So the document object model Uh, how would I describe this? Uh, every piece of HTML. Every element that you write is an object, and so it has specific attributes and specific methods that can be taken on it. So when we eventually get to Javascript, after you learn html and then CSS and then javascript in that order, once you get to javascript, you'll actually be able to modify the Dom dynamically so you'll be able to change all of your HTML elements and the attributes of the tax and everything in there. It is completely fluid, and the document object model is sort of the brain behind keeping track of all of that. So what I would like us to do is just explore the document object model. So all I'm going to do here is open up a new tab in my browser and I'm going to go to google dot com. And we're just going to explore some of the different document object models out there through various images. And then we're going to explore one that we've actually already written. So go to google dot com. And then where's images? Where is images? Click gone images and we're going to do an image search for document object model. And here we can see what looks like a bunch of graphs, and so let's look for one that looks somewhat nice and represent a bubble. Ah, we've tabled and we don't want tables. Let's do this one. No, let's not do that one. That's not really good one. Let's go ahead. Copy that image, location and paste that in there. Here we go. We've got a Dom and this is just from images that slide player dot com Not my image. Just as a declaration out there. I did not make this, but the document object model is basically a document. And then we've got a root element, our HTML, which is why we always at each email to our documents and then we have our element head. And in that head we have a title and a bunch of other attributes. We've only ever seen title so far. And then in the body, we might have a link we might have in each one. We might have a paragraph, we might have a table, we might have a div. And then inside of that div, we might have in each one inside of that, each one we might have a link. And so it gets bigger and bigger and bigger and bigger Now, typically, the head is not very big. And a good example of this is from our last lesson. With tables, we can see that I have over 70 lines of code and say 74 up into line seven. So about 65 lines of code is all the body, and the only thing I have in the head is one line, just a title. So right now it's like a 1 to 65 ish ratio. And so this document object model. Basically, you have a very shallow head and you have a very large body and that's totally normal. And then inside of each element, you have particular text. So, like inside of the title, we have my title in this image or in the tables. One we have. What do we have in there? It's just called tables. So we have text in there and that's just called and that's just called a text node. Let's go ahead and take a look for another example. Do we have a bigger one in year? Let's go ahead and type. I don't know. Large document object model. That's copy that image location and let's open that up as well. So in here we have a document, which is our HTML. This would be our HTML element, and then somewhere inside of the body, we have elements. We've had comments and we've got processing instructions, but basically we just want to follow the straight down we've got our HTML and then revived like some sort of body. And then maybe we have a div. Maybe that Dave has an attribute. Maybe that attributes is a title, and that title has a particular text value. So this whole mapping is part of the document object model. Now, explaining this and images is honestly not doing it justice. So what I'm going to do is I'm simply going to refresh this page, and I'm on tables dot html, which you have access to in order to get to this document object model. Let's inspect this element. So right, click inspect, and we're going to see all sorts of stuff in here. So we have the doc type is html So we're telling the page of this particular document. Object model should follow html five standards. Inside of this, we have HTML. It's the Onley html element that we have and everything goes inside of it. Now inside off html, we have two elements we have head and body Head is where all the knowledge of your page goes of your page title meta descriptions which will cover later linking to CSS, which will cover later, maybe javascript again. We'll cover that a little bit later. Sort of the information. The metadata about the page goes inside of the head and inside of the body is everything visual, everything that you can interact with so inside of our head. We have one element, and this is a title. So you could say that our most parent elements is the HTML element, and then it has a child element called head. And that head element has a child page or a grandchild page in relation to the HTML called Title. And it has texting there that we can change change at any time, and you can see that that took place up here. And so any time you make a change to your document object model inside of your inspector, it's also going to reflect that change on your page. So let's close up the head and let's look at the body. This is going to be much more complicated. So in the body we have three elements. So we've got three Children in here, three child elements from the body element. We have a first table. We've got a horizontal rule. It's just a line that goes across the page, and then we've got a larger table underneath it, which has 16 2024 cells. So six rows for across six times four is 24. Although we can't necessarily see that because we've been merging some of these together. But if we look at our first table, this top one here, this has one element. In fact, we actually didn't write this. We cheated in that last video. We did not give it a T body, but the document object model said, Oh, there was no t body specified. Okay, while this is going to be in a T body, so it actually modified the hierarchy of our page For us, inside of the tea body is a table row. We have four of them. And inside of that first table row, we have four th table heads or basically there table cells that are text align, centered and bold. And we have four of those. And then in each one, we have some text and watch this change right up here. Some text. Oh, so we close that one up and we have the next one. So the next one has four elements in it. and the next row has three elements, and the next row has three elements, and this goes on and on and on and on and on, and this table actually has a specific T had tea body, anti foot. So if we go into like the tea head, we can see that there's a table row in here. You can actually see what it looks like when I hover over it. Then we have that he had Call him 123 and four in here. And then when we go into the Footer, we're basically going to see the same thing, foot or title. 123 and four. And so this creates a structure where everything is necid underneath something else. So everything is going to live inside of your HTML. Then you've got head or body, and if it's in the body, you're going to have some sort of element, And inside of that elements, you might have another element, and inside of that one, you might have another element, and then maybe you just have some text in there. Maybe it's just an image. Maybe there's no tax, and it just ends with a particular element this whole thing creates the document object model. Now you're probably thinking, Why is this important? This is important when you get into CSS because you need to know about nesting and how to select a certain element so you can style them a certain way was, you'll get plenty of practice in with my CSS masterclass course, but it's actually even more important when you eventually get a JavaScript, so you'll learn HTML first and then CSS and JavaScript. You'll learn how all of these sort of get modified different doing air quotes, your methods. There's different functions for modifying everything on the page. Now when you load a page, this is what your browser initially sees is a bunch of code that looks like this, and when it reads that it says Okay, the DOC type is HTML, so I'm going to parse it as HTML. I'm going to break it apart and understand it as HTML. And when we look at our first table, it's table and then fourty ours. But when we look at the first table in our document object model, that's part of the inspector here. We can actually see that there's a T body. And so our browser said what you wrote was not good enough. And so I'm going to put all of this inside of one more element called a T bought, addressed to keep things nice and standardized. And then with CSS or JavaScript, should you ever want to just select the particular body of a table? So let's say in our second table here we have a head, a body and a foot. Maybe you just want to select something in the body. You can do just that, or, if you want to grab just ahead and then hit delete, you can do that, too. And let's leave the footer. And now we just have a table with Rosen and no head or no footer. CSS and JavaScript can help you with all this sort of interaction and the document object model. All of this magic behind here is what keeps track of all of the changes for you. So it takes your initial payload. Whatever your server or your pages is loading all this HTML. It takes all that renders it into proper HTML. Your browser says OK, I am a math machine. I'm going to understand how all of this works and fix it up to the best of my ability, which it does. And then you can take action on that. So it's a nice way of standardizing everything that is your document object model. Now, you don't need to know too much about that with HTML and I'm sort of just throwing it into the HTML. Of course, because I know from experience that a lot of CSS courses and a lot of JavaScript courses do not tell you what a document object model is. They just assume that you know what it is and they call it a dumb and you're like what Saddam and the Dom is introduced when you start writing HTML. So we're learning about it now. Now I have one small task for you in this one. What? I would like you to dio hop on the good old Google machines and just type in document object model and just look through Ah, some different images. Let's put in Domnitz. Here's a good one. Should just wrote dumb he quit Dhamar document object model And you could take a look at something like this where you've got like your core maybe XML h h t mail. That one's actually not super great. This one's better. You've got HTML that hadn't title on body Paragraph list list items 1st 2nd all sorts of stuff like that. Just take a look at a different Dom's just sort of trying to understand how this works and how it relates to the code we've already been writing. Once you are done with that, you have, ah, pretty good understanding of how that works or you just get a little too bored. You just want to move on to the next lesson. That's cool, too. I'll meet you over at the next one and we are going to learn about X html and we've actually already seen some of this, and we're going to learn the difference between HTML and x html. 29. Introduction to XHTML: Okay, let's talk about X HTML. So you've actually seen this already? I write it. Sometimes you'll see other people write it and you don't really know. The difference is so behind me, you'll see in a new file you can type B R or you can type B R with a slash, and either way is totally acceptable This way. The top way is HTM On the bottom way is X html. Now there really isn't too much of a difference for your browser. Your browser supports both of them completely. So why would you write one over the other while x html, which stands for extensible html extensible hypertext markup language is a little more strict, so it has particular rules in place. So, for example, every tag, every self closing tag that is, needs to have the slash in front of it, and there needs to be a proper nesting as well. So let's take a look at this on my screen. We're just gonna right a little X html mom, and we're not really going to do a whole lot with this. We are really just going to use this as information and tuck it in their back pockets. The next time we see someone write an image tag that has either a slash or no slash in it at the very back of it, you'll understand why. So let's dive in right now. So here we can see I just have a regular HTML structure here. And when we're talking about X HTML, you've seen me write things like a B R and A B R, and I'll just move that down a little bit or move that up. And so this version here is X html. It's slightly more strict than this version, which is just regular HTML. Now. It doesn't really matter which version you use, but you're often going to see me right x html. Just because I like our I do like not like, I like a stricter sort of markup. So what that means is, when you're writing an image, I will often close it with a slash bracket or slash greater than Zain. But often you'll just see an image like this and again both ways. Air totally Okay. Now the difference between HTM on X eight female as X html is it's more or less designed to work with XML applications and an XML application. XML is it's basically HTML looks a lot like what we've been writing already, but has some stricter rules so that anybody can follow it. So, for example, if I create my own elements and I called it Caleb Well, because it's, ah, self closing tag, I would definitely need that Slash to be valid. X html likewise on your pages. And we're going to get into this pretty soon we're going to have meta tags eventually, and you're going to see meta tags like this and you're going to see meta tags like this. I typically write them like this, but other people like to just save the two characters and just write it like this. Either way is totally okay. Now, when it comes to x html, there are some rules that make it a little more strict. So, for example, the ordering of your opening and closing tags is important. So if you have a paragraph and then you have an emphasis and then you have an underlying, this is going to be underlined and emphasized in a paragraph in that order, so you can see that we have the U tag here and then we have the closing you tag and then we've got to the E m tag. And then down here we've got the e m tag, but the U tag is still inside of it In the p tag wraps around all of it. That kind of formatting is really important when it comes to X html. In fact, that's actually just important when it comes to HTML in general. Because if you did something like this and, ah, let's was gonna get tricky, my editor might fight me on this. Yes, My editor is gonna fight me on this. It knows better. Yeah, let's do that. So this is going to be emphasized and we want, uh, this is this is tricky to do for me cause I write proper HTML anyways, so the order of the tags doesn't make sense here. I mean, we have a closing you tag, and we're not even using a you tag here on then. This doesn't match this, and you can actually see with the inventing and the syntax highlighting that it doesn't match. So don't write ugly code like this, and you will be OK with X HTML and next we have some attributes. So it's to a T T. R is equal to a TT are now. We've been writing it like this, and that is proper in HTML. If you have an input field, for instance, we haven't talked about these yet, but we will eventually. We can disable an input field by writing Disable as an attribute with X html, and this is the way you'll see me, right? It is, It's disabled, is equal to disabled. Disabled is equal to disabled, so in HTML this is not necessary. But in x html, this disabled is equal to disabled is necessary. So that is one of the more stricter rules. And to me, I like that because it just looks a little butter. It just makes all of your attributes sort of the same. Now, at this point, you're probably asking yourself, probably asking yourself, Should I write X html or should I write HTML? And honestly, this answer is up to you. I prefer X HTML. Just because it's more strict. It's, Moreover, boasts, if you prefer to write just html, that's okay, too, because Firefox and chrome and safari and Edge will supports both of them completely. So it doesn't really matter which one you want to use. Now your task for this lesson. Mothers don't ask for this lesson because this is a knowledge on Lee Lesson. You'll see people using things like the BR tag all the time, where I still have it up here you'll see a BR tag like this, or like this, and eventually you're gonna ask yourself, Well, what's the difference? Why is one written one way and why is one written the other? Now you know that one is strict x html and the other is regular HBO, which is a little looser with its rules. 30. Inline CSS: in a number of lessons. We look at some CSS, we added, like a one pixel, solid red border. And I said, Don't worry about that. We're gonna skip over that for now. And that was a moment where we're going to come back to that. So in this video, we're going to learn about CSS. We're not going to learn technically about CSS, but instead we're going to learn how it's used in relation to HTM. Then it's going to get us into some passing stuff, and we're going to learn all sorts of stuff from here. But as we go through this, just remember, we're not going to be learning all about CSS. I have a separate course for that. It's called the CSS masterclass, and that course is 12 almost 13 hours long. I just can't cram all of that into just a couple of hours, unfortunately, so we're going to skip over most of the CSS details, and we're just going to learn how to implement basic CSS inside of our HTML pages. Okay, so I just have x html dot html open from our last video and I'm just going to re save this as a different file called In line Underscore incline in line CSS dot html Change the title to in line CSS and I'm gonna get rid of the guts here. Now. The reason I did that is because I have this page structure here that I want to maintain now when it comes to CSS weaken, right, A div. Something like this. This is ah div. And in Firefox, let's go ahead and open in line CSS dot html This is a def. So we don't see anything special here. Now, In previous examples I wrote, this style is equal to border one pixel, solid red, and that gave us a red border that was one pixel wide all the way around it. And this is by itself in line CSS. So when you eventually get into the world of CSS, you can start writing CSS directly in an attribute called style. And this style attribute is accepted on just about every single element. So now maybe you want to change the background color and you conceive es code is actually auto feeling that for me. So that's pretty nice if I want to, said say the background color is going to be. Hmm? What do we want us like year? Let's go with chocolate. We can change the background color to chocolate, or we can change it to black. Or we can change it to green. We can do all sorts of things with us, and this kind of styling is all CSS based. But what I wanted to show you in this particular video is that we can write all of our CSS in here now. What happens if you wanted to add a one pixel solid red border to 424 gives like what we saw in IMDb? Well, you would have to write this 424 times and that would be a disaster. Now there was a point in time when that is sort of what we had to do. But pages were also not as big or as complex as they currently are. So it was a little less painful for us. That was 20 almost 25 years ago. So now if we wanted to duplicate this, let's just give this an example. We've gotta Devyn here. We have to write another another style and let's say we want this whole thing to match, we have to type out border one pixel, solid red background color is green. And it doesn't really matter how fast of a type or you are. This still gets pretty painful to type out every time. And you could copy and paste it if you wanted to, But you're still copying and pasting, which is it's not necessarily bad, but it's definitely not a great way to live your life. We gotta put some texting here. Text in here. Okay, so there we go. We have two of them, and now we can start to mix and match these. So let's say we wanted this to be true. We could do something like that. So this is in line. CSS now, what I would like you to do for your task is I would like you to write a div and give it a style. Now, if you don't know CSS at all, and you probably don't guess what, that's totally okay. Just copy what I have here. Border one pixel, solid red. And maybe try that again on a span and see what that looks like on a span versus on a div. once you're done that head on overtime next video, we're going to learn about internal CSS, where we can actually start making some shortcuts that we don't have to write this twice. And that is HTML related because it requires a special HTML tag in the head. 31. CSS Crash Course & Internal CSS: Hello and welcome back in the last lesson, we look at some in line CSS because we wrote CSS in the line of the element such as a diff . And in this video, we're going to learn about internal CSS. Now, internal CSS is where we take all that CSS and we apply it in a specific type of element in HTML, we can give it little shortcuts. We can tell it to select all of the elements. We can tell it to select just a couple elements based on its class or its I d. And we're going to learn about all those things right now. So officially, this is a CSS crash course is very, very, very light s It's only going to be a couple minutes long, but we're going to learn a ton. So let's go ahead and get started with that right now. Okay? So I have this code open, and I'm just going to create a new document here, and I'm going to save this as internal underscore CSS dot html And let's go ahead and create our structure. We've got head. We've got a title in here. It's called this internal CSS. That's at a body. All of this stuff you should be quite familiar with by now. And we're going to title this one internal CSS and we're going to give this. Let's give this four dibs for Yeah, I was given four. Tibbs. Let's actually space. He's owed Div number one and and then we're going to do this a few more times of div Number two. Let's go make some space for us to work here Div did of number three and lastly, number for tive number four nailed it. Okay, and then let's just open this up in Firefox. And so that's from the last lesson. And let's open up internal CSS. So we have five block elements here. We have an internal CSS line That's our header. That's our H one. That's a block element. We have dibs one through four, those air, all developments and they're all block elements as well. So now from our last lesson, we said, Well, we want a particular div to have a background color of blue. When we refresh your page, the background color turns to blue. Now, if we wanted this to happen on every single elements, every single div we would have to write this four times because there's four dibs. And if it's 400 dibs, whiffed right was 400 times, and that is no way to live your life. So we're going to introduce our second element to the head and this is called style. So it is simply a style element. Open styling, tag, closing, styling, tag and inside of it, weekend, right, CSS. Now we're not going to get into the nitty gritty of CSS and how all of it works. This is simply a quick crash course. So when CSS there are these things called selectors classes and I ds classes, we've actually sort of taking a look at and ideas we've sort of taken a look at in the sense that we've actually only seen it. We haven't seen it in practice yet, So these match up with oops class and I d. And something is wrong with my syntax highlighting here. And it's probably just cause I have regular text here. Yeah, there it is. So we have classes, we have i ds and those go on the elements themselves, and then we can grab every single element. So let's do a few different scenarios here. So let's do a div. We're going just like every development, and all we do is we say Div curly bracket and then we end it with another curly bracket and then we type background color blue, save that refresh our page and all of them turned blue. So now we can get rid of this style guy. We can get rid of the in line CSS in favor of internal seizes. Internal CSS is just CSS that's written across the page. But now we have access to nice little shortcuts like being able to us like every Div. If you want to select every paragraph end If you had a comma paragraph and if you want to select every paragraph Div and H one, you just add comma age one and voila! Just like that. Now let's go ahead and leave this with just the age one. Cool. So we said all h one tags on this page, All H one elements on this page have to have a background color of blue and a font color of white. Okay, so we have something going on here. Let's style this up a little bit and let's also select the body because we can select the whole thing. And let's do let's do background color, uh, Twitter to do. We've got Gray Gains Borough. I didn't even know that was a color, but I like that one. There we go, so it's not quite as bright and in your face, just a light gray background color. Let's go ahead and add a class and an i D to every single div. By the way, for multiple pointing like that, all I do is I click where I want to edit. So let's say I want to add it just after the V. And then I hit command and click again. So command click. And if you're in Windows, it should be just control. Click and now you can type in multiple places at the same time. So now let's take a look at classes. The class is how we basically give an element a particular style, much like this, but we're telling it to only style certain ones. So we specify classes with a dot, so dot let's call this funt red, and we're going to change the color to read now, just out of the box. This does nothing and we can see it in her source code that we have fun read in here. In fact, I also forgot my doc Doc type. There we go. That looks better. And that red html went away. So we have that font red in there and it does nothing. We have to actually specify to do something. So we're going to give Div one. And if to a class of font read there's no dot in here. So you don't see the dot that dot is actually short for class. That's what this looks like. So it's basically the same thing here. And look at that Div one. And if to have turned red now, you don't need to know all the CSS stuff. This is not a CSS course. These are just some very common CSS declarations that I'm going to be using just because they're nice and easy and you will learn all of this stuff when you jump into CSS after you learn html. The next one is an I d. So we have class a front red and an I d. Now an I d has to be completely unique. You can see we're using Font read twice in here, but an I D should only ever be used once. So let's go ahead and create a unique I D. And let's just call it unique. And this one is going to be a border one pixel solid red. Actually, it's change that one pixel to maybe something a little more in your face. Five pixels solid. Let's not do read. Let's do black so again, right out of the box. This is not going to do anything, but we can add unique and much like class. We don't add this original symbol. We just call this unique events. Now there's a class and an I D on here and look at that now. Theoretically, we can use unique on multiple classes at the same time, and it will work in CSS, so that works. It is highly recommended that you do not do that to keep ideas as completely unique. Think of it as your identity card, your government issued driver's license or identity card. There's only one and is made for you. There's only one I D. And it's made for this development. Think of it that way now even though it works in CSS, it doesn't mean you should do it. And the reason for that is because in JavaScript you're actually able to grab elements by an I. D. And if there are two of them, JavaScript only ever grabbed the 1st 1 and that is a big problem. You don't want it to try to select both, because if you're looking at one, it's likes the other. All of a sudden you have a bug in your system, and that's not a good thing. Now I d You can think of I d as that number sign So it looks like this I d number saying I d number sign i d Number sign. And so this I d r. This unique word matches this, and lastly, there's 2 1.5 more things we have to go over. There should only ever be one I d. So never creates more than two ideas on a particular element. It should be completely unique. If you need to do that, you probably want to use a class. The reason I'm saying that is because a class you can have font read, let's do three and force we've got Font read here and we have font read here. Front, Red font Red is what I meant to type. And so it's all red now. But what if we wanted to change Div three ended four toe also have ah different background color. So it's called BG Blue and B G yellow. Now you're gonna want to forgive me for this because this is going to be really ugly. So actually going to go back down here? What I did here was I have font read and then to add another class, I just added a space just like that. And then you can add another class and then a space and then another Class ideas do not work that way, but classes do. Let's go ahead and add BG blue background color, no background color. We wanted to be blue and then BG yellow new no class B g yellow background color. We want this to be yellow save and refreshing. Whoa, Look at that ugliness that we created. This is a crash course into CSS. So you're not going to be learning all the ins and outs and how to make things beautiful. But you have now learned about classes I ds and just regular element selectors. These are big wins for when you jump into CSS, because you are somewhat already familiar with how this works Now I want you to actually get some hands on experience with us again. This is not a CSS class, so if you get stuck honestly, feel free to just move on. It's not the end of the world. You will learn all this CSS officially in the next chapter of your Web development journey . So what? I would like you to dio for your task. Let's go ahead. Making you file your task is create a new dot html file. Add the style element to your head. Ah, and then And that's a three to have the ad three dibs to your body. And then I want you to select and style one day of using a element selector and just as a refresher on that one, an element. Select your looks like this so there's no dot There's no number sign. It's just the name of the element So style one day of using an element selector. If you don't know what to use, you can always use something like background color blue or background color, white or background color. Red. Yeah, Color black. Something like that. You can literally just steal the code that I wrote in this video. I just want you to write it out as well. Good for some hands on practice. And then I want you to select and style one other defusing a class. So use the dot notation and lastly, so lacked and style one other div using and I d just like that. That's make that smaller so we can see this all on one page ish. So create a new HTML file. Add your style to your head. Add three dibs to your body. Select one day of using an element selector and style it whichever way you like. Then I want you to select and style another div using the class. So use that dot in there you're going to have to use the class attributes as well. And then I would like you to style or select and style one other def. So your third, if using an I d and you're going to have to use the i d attributes for that as well once you're done that I'm going to show you a way in which Weaken writes CSS once and included in multiple files. Because right now we're limited. We're limited to copy and pasting this on every single HTML file that we want to put the styling on. Now, that's okay if you have five pages, but if you have 1000 pages, that is a job you do not want tohave. You do not want to be doing the same thing 1000 times. That's pretty painful. So I'm going to show you officially how to do this as a front end developer in that next video. 32. External CSS & CSS Files: Hello and welcome back in our last lesson. Last couple of lessons we've been learning about CSS. And in the last last night we learned a boat internal CSS, and it was a little bit of a CSS crash course in this video, we're going to basically take all of the work that we did in that last video when we were working with internal CSS, and we're going to separate it into its own separate file and then we're going to link to that file. Now. The way we do that is actually relatively simple. And the CSS has written the same as internal CSS. So we're not really doing too much more work. A nice thing about this is if you have CSS that is styling your page, maybe it changes the background color of your page and you want to change it across every page on your website. You can do that and you can do that by basically editing one line of code instead of having to open up 1000 different HTML files and change it 1000 different times. You can open up one file and do it Justin ones. So in this video we're going to learn about external CSS and how we can work with other files using HTML and Don CSS files. Okay, so you can see that I have internal CSS dot html open here. I'm going to save this as external underscore CSS dot html And let's go ahead and change that title as well to external CSS. And I'm going to open this asses external. There we go. So that just looks a little different from last from the last video just because I was zoomed in. So if I did something like this, it would look a lot more familiar. So I'm completely zoomed out now. I'm at regular 100% and we have external CSS and we want to style this file and maybe another one. So let's call this external CSS number one, and we're gonna change this to external CSS number one. So we know what page we're looking at here. External CSS number one and let's save this again as external CSS two dot html, Just a different page. And then I'm going to go into my view sightings here, my editor layout and split right, and I want to open external CSS NVs code to jump around. All you have to do is hit command Pierre Control P. I believe that's what the default is. If it's not, there is a command for it. And I just can't remember what is off the top of my head. I might have customized V s code a little too far already, but there is a short cutting here where you can basically just start typing so I could type in like CSS dot html And it will find all my CSS dot html files in line CSS external, CSS, internal CSS. Okay, so on my left, I have external CSS one and on my right, I have external CIA's s page number two and you can see that we have the exact same CSS in here now and let's go ahead and also open this up in our browser. So we have external CSS to an external CSS so they look pretty much identical except one character has changed from the title has changed. What happens if I grab all of the CSS here and I just delete it? Well, my page goes back to being unstylish, but CSS to will be normally style the the way that we did it in the previous lesson. So it's still ugly, but it is styled to some degree. But this one isn't so what do we do? What if What if there was a way where we could just create a brand new file and linked to that? And we could have all of this CSS and all of this CSS ends of the exact same in one location. So actually a better example is background color. I want to change the background color to read so external CSS one should have a background color of red and external CSS to shove of background color of Gainsborough. Number one has read Number two has Gainsborough. But what if I want them to be the same? Well, now I have to change it here. Or what if I want to changes to black? Well, then I have to change it here now. This doesn't seem like a big problem at the moment because we're only working with two pages. But expand that to 1000 pages. And if that wasn't page website is not unheard off, that actually fairly common. Are you going to change us 1000 times. No, I do not want you doing that. I don't want to do that. Nobody wants to do that. So instead, what we do is we take all over code here. I'm going to undo that because black is not a good color and it's called Gains Borough and we're going to create a new filing here. We're going to call this one. Let's just call it styled on CSS Save as style dot CSS is going to be right beside the external CSS dot html file in the exact same directory. And let's just go ahead and grab all of this in here and cut and by cut I mean, I just went cut, Grab that based and that's it. So at this point, we can look at external CSS Page one, and this is not going to work for you. Absolutely not. This is going to be completely unstylish, and it's because we haven't told html toe link to the CSS file. It doesn't know about it yet. Basically, it's just minding its own business. So the way we get around that is in our external CIA's, as one we say link, is there a CSS morning here. Oh, that's pretty cool. Okay, I didn't know V s code had that feature. That is actually fantastic, But let's walk through this together. So what I did here was I created an element called Link. It is a self closing tag. It's REHL or its relation to this particular file is a style sheet. That's what CSS is. We have an h ref, a hyperlink reference to the particular file called style dot CSS and to follow mawr X html standards. We could add the slash or we could leave it as regular HTML. It doesn't really matter. So I'm gonna zoom out here again and again. We're on external CSS one and refresh your page and look at that hour Styling is back. But if we go to CSS to well, that's because I didn't save this one. Now, if we go back to CSS to for a second time, we can actually see that it looks very, very similar. But the problem is, we have all of this in years. So what happens if what happens if we did the same thing we did the first time where we just got rid of all the styling. Well, it's gonna go back to looking ugly, regular default. And if I ever to the style element, same thing. Nothing happens. I'm hitting that refresh button. Nothing is happening. And all we have to do is at one line of code here. You mean a copy paste. And I mean, really, all it is is the link. Rehl is equal to your style sheet. That's pretty cool. I can't believe that auto field for me that is really nice. And so either of these options will work for you. The bottom one is x html The top one is HTML. So let's stick with HTML now what happens when I refresh? You can see that it works and they're the exact same. Now what happens if I go to style dot CSS and change a background color? I change the background color to black. Okay, well, because this one file is now connected to external CSS one and external CSS to it will take effect on both of them. So when I refresh here and I refresh here, it takes place and I go back to your style that CSS and I change the H one to have a background color of of white and a text color of red. So I changed two pieces of code in one file, and it's going to affect both files just like that. So that is external CSS. Basically, it's the same as internal CSS, but all we did was link of the file to an external file so that we don't have to write or rewrite the same code over and over and over and over and over and over and over and over again. Because, honestly, that is just no way to live your life that will make you hate your job. And that will make you hate Web development. If I had to do that 1000 times, I would hate Web development. All right, your task for this video is going to be somewhat of a doozy. But I want you to give this a riel thought a real thought, not a real thought. I want you to give this a real chance. Your task creating new dot html file from scratch. Please do it from scratch. Make sure you have your head, your body, your doc type. Don't forget your doc type like I did create a new let's actually call this one space something specific. Create a new file called external one dot html. Create another one and call this one external to dot html from scratch again is just good practice. Number three. Create a file called style dot CSS. Create a file called style dot CSS. Make sure it's in the same directory as your HTML files, though it has to be in the exact same directory. Okay, so make sure all three of these files are in the same folder. Four. Link external, one dot html and lex eternal to dot html to the style dot CSS file. And for this one you can use link. Rail is equal to style. Sheet age ref is equal to style that CSS You can do something like that that would work. And then, lastly, I would like you to style something. So open up your style dot CSS and maybe change your body. So let's let's say this. Change the body background color, and it doesn't have to be a nice color. It just needs to be visually identified, So it could be something really gross. Like background, background, color read. So if you just type that inside of your style dot CSS. Refresh your pages inside of your browser just like that's just like when I hit Refresh over and over and over again. If you do that and your background color turns red in both files, then you are good to go. You have now successfully learned how to link to an external file. This is a lot like linking to an image, but you can actually edit something in this file. So you're linking one file to another, so and it's arguably more important that you know how to do this. Then it is to add an image. And don't forget, if you get stuck, please leave a question down below. I'm here to help, otherwise good luck on this, and I will see you in the next lesson. 33. Code Formatting: hello and welcome back to another lesson on learning HTML. In this video, we are going to be learning about computer code and some of the more semantic ways of writing computer code. And there are some nice things that your browser will give you right out of the box. And there's ways that we can restyle things with CSS by simply giving them an element. Now what I'm going to do in this video is go over how we can write things like variables or sample code or just regular code in our page, and so that is visually different from the other sort of text around it. So for writing a paragraph about HTML, we might want to use a particular tag to make that code stick out. So let's go ahead and create a new file in here, and we're simply going to call this I don't know. Computer underscore code dot html and let's give it an HTML and let's see what this does. Let's see if this gives me all sorts of stuff, it's going to you, isn't it? Oh, yeah. There's some good stuff in here. Uh, but But Bubba Bo OK, so there are things in here that we don't necessarily want to deal with at the moment because I have videos planned for those already. So it's get rid of char set your view, Port http equipped and your HTML Lang is totally okay that can stay, and the name of this is going to be computer code. So let's say we have a paragraph with some warm ipsum text in your Lauren 25 hit tab, and we have some tax in there. Let's go ahead and open this in Firefox and we have a boring page. We went from nice and colorful, albeit somewhat obnoxious to back to default. Alrighty. So we want to talk about some code in here. How do we specify code? So maybe that's actually ever do that warm Epsom. And let's say I want to, uh, talk about the HTML elements. Okay, something like that refresh. And it just says I want to talk about the blank element doesn't show up in there because we're going to talk about this a little bit later. But your browser sees this as an element, sees it as a nested element under the P tag and doesn't know what to do with it. So we're going to have to get rid of this for now. And there is a way to actually make that show up. But we're going to get rid of the greater than and less than signs. And they're just so that we can see the word HTML. All right, we got some HTM on there. Now, the 1st 1 we want to look at is an element just called code, Just called code. And you can actually see that the font of sizing changes a little bit s So let's go ahead and create a Let's do a horizontal rule in here and let's say, did the code this is going to look like computer code. And in here, we're going to say this is going to look like boring regular text. Let's get rid of that. HR, let's make that a B R ha nailed it. First try. Okay, so we have regular boring text right here and below it. We have computer code. Now. Why is computer code importance? Well, if we take the exact same amount of text here, put it on a new line. So Ah, we could literally say anything in here and died on oh dot dot We just need we need to the length of this line, this line right here to match up with the length of this line. Watch what? A dozen. Our browser doesn't quite line up. Not quite. I could do the same thing with the character l over and over over again. So we're going to add a bunch of them in here and again in our editor. It's going to look like it lines up, but it doesn't in real life, but computer code will. Computer code will absolutely do that for us. So let's go ahead at a BR here. And let's just had all these different Els. Let's just feel that. But we wanted to match the same length as above. So this is Does this tell me how many characters have 40 characters selected here and in here? I have 40 character selected. It tells me down here, and it makes them match. So the nice thing about computer code is like it makes it formatted. Sort of like our editor already does. Ah, also, I'm just noticing that we have a laying attribute on the H E mail element. I know that. I'm sort of just throwing this in here, but letting basically means what language is this page supposed to be in? If you're in the US, it would be laying us. It could be laying. See a N C A N U s or just English in general. Okay, so that's what the code tag does. Now, let's take a look at sample. So sample. Uh, did that give me a summary? Because that would have been great. This is fantastic for learning. Ah, the Samp element represents a sample or quoted output from another program or computing system. Cool. So let's do this. This is going to look like sample code sample and doesn't match up with the line above. It does, indeed, because that is the same type of funt that is a mono spaced fund. So that's how you write some sample code. Very, very similar. Uh, will code tell me the difference. Ah, the code element represents a fragment of computer code. This could be an XML element name. Ah, File name a computer program. Okay, so these are technically different and it is semantically different, so it looks the same but they're purposes are different. So in our code, we're actually going to want to use something like of this file is called computer code dot html and sample code will actually look like sample code. So, uh, sample code? I don't know. Let's write some fake binary in here. It's not even really been time close to being real binary or something like that. Okay, so that's pretty neat. Next one, we also have keyboard. Ah, que b d. So what letter of a keyboard are you trying to get across the user. So if you said to copy and paste to copy and paste, you would type K B D. Does that give me a description? Cause that would be great to If it does, I am highly recommending to use V s code. And yet there it is. The K B D element represents user input, typically keyboard input. Although it may also be used to represent other inputs such as voice command. The development has no special meaning at all or code. The code element represents a fragment of computer code. Yeah, I'm recommending V s code for sure. Just because this is this is a good way to learn, Right? Right. While you're getting into things, it will give you descriptions and reasoning for why you would you something This is fantastic. Okay, Anyways, I got a little distracted there to copy and paste. You would try K b D Ah, you would hit command, I guess. Just a regular plus sign if you wanted to command K b d. See, I guess if you're on Windows is not command is actually control. So it's Ctrl and let's open Firefox and Refresh. And here you can see to copy and paste you would try control Plus see something like that now with a little CSS this kingo a very, very long way because we already went through the CSS videos, right? We did. I hope we did together. Ah, we could simply say Let's select the K B D and let's give it a border of one picks of solid gray. Let's give it a background color of Gainsborough. Look at that. That's or know pretty good, didn't it? There's ways we could make that even better, But now we can specify just keyboard input. Isn't that nice? And there are two more I want to go over. The 1st 1 is variable in the 2nd 1 is pre so let's take a look at variable. This is a variable called X and what is V s code? Think this one is The var element represents a variable. Really. This could be an actual variable in a mathematical expression or programming context. Yes, So it's a variable. And if you don't know what a variable is, honestly, don't worry too much about that right now. Just because when we get into JavaScript, we will be dealing with a lot of variables. This one actually italicized the code while this is computer code. So it's all equally spaced mono space stuff. This one is italicized, so that's neat. And then, lastly, we have the monster of them all called Pre And so it's let's put pre here pre. Is white space sensitive? So this is line one. This is Line three. Look at that. This is line one, and this is line three. It's also a way to pay, sensitive in the sense that you know how I've been saying. HTML doesn't care about how much weight Spacey views it does when it comes to the pre tag. The Brie element represents a block of pre formatted text. I love that. That is so good. And so now you don't need be ours or anything in here. You don't need paragraphs. This is line number five, because this is four. And this one here is number two. Look at that. And if we added all sorts of crazy spacing in line number three, we will see Boom! Look at that. That is nice pre formatted. Now, the one thing to note about all of these is it doesn't matter what kind of html you right in here? Let's say we just write the HTML tag. Hello? Hello? Still shows up. But we wanted to show html in close html. That doesn't work. So we need what's called an HTML entity. Now, 80 mil entities aren't something we're going to talk about right away. We're going to talk about that in number of videos from now. But there is a way to make this show up. So if you're interested in that right away, you can just sort of skip on over to that particular video about HTML entities and then come on back over to this one, or I guess the next one, because this one's basically done. Now your task for this particular video is your task. Your task. A task cast. Ask, create a new dot html file. I don't really care if this one's from scratch. Not periodically. I'm making you do it from scratch just as good practice. But for this one, it doesn't really matter. And then I want you to practice practice writing the code Sam, for example, K B, D vire and pre elements. So you have five of them in their practice, writing one of each. So make a code sample, make a sample sample. That was a weird one to say. Make a keyboard sample variable sample and a pre formatted element sample. Once you were done, all that, let's head on over to the next lesson, and together we're going to learn about some more semantics. We've already touched on it a little bit, but we're going to learn a little bit more formally about and some of the semantics behind some of the formatting that we've already used 34. Bold & Italic Semantics: in this video, I think we should talk about some semantics. In the last video, we dove into computer code. So we looked at code sample pre var k b D. Things like that. And semantically they're somewhat different. But when you look at them, a lot of them sort of just look the same. And so this actually brings me to an example of something we talked about early on when we were talking about bold versus strong or italics versus emphasis and which one to use and where. And I I like to think that I covered that topic well enough by just since we're already on the subject of semantics. Basically, what element has a particular purpose For what use case? I think it would be good to go over this once again. So let's talk about the difference between strong and bold and the difference between emphasis and italics. Alrighty. So I haven't each email page here, and I'm just going to actually to save this call this semantics dot html html Colin five. This is really groovy. I love that. We're gonna do a little cleanup here, though. Clean that up. Clean night up, clean that we haven't talked about that yet. And a title is going to be semantics. Man, I love that feature. That is just that is great. Okay, Semantics. So when we're talking about the difference between code and Sam, we learned last lesson. That code is for like, file names, for example, and sample is actual code output samples. So if your program of your writing documentation for a program you might want to put it in Samp now they look the same. But the difference is when google or a maybe a screen reader hits your website is going to say, Oh, well, code might be read differently from sample. Or it might even narrated differently or give you some sort of contact. Like while this a sample code. This one is output code, just like a file name or something. And this one is technically output code. So again, they look this look sort of the same. Actually, when you render some code, uh, it actually they look identical, at least to me. They look identical in Firefox, but it doesn't stop there. We can also look at bold versus let's do line break here strong, bold and that's do horizontal rule. Then we can also do italics italic vs, but a line break there I m italic. And so let's open this up in Firefox and we're going to see let's make that bigger so we can read it together. Bold versus bold looks the same metallic versus Attallah clicks the same. But when we look at our elements, we have a talent here and we have a talent here and we have bold here and we have bold here . The difference is how a screen reader reads these so bold is simply bolted text. A screen reader is gonna look over this, and it's going to read it in the same tone. Same accident, same emphasis as a regular sentence versus this one. Strong is going to have a lot of emphasis on it, and Italic likewise is going to be visually italicized but really doesn't mean anything. Where's emphasis adds a little extra emphasis. Now a good way to look at this is I'm going to use a Star Wars reference just because I think a lot of people are familiar with this one. There is a guy, his name is Darth Vader, and he shouted Death Fader, Let's do this doth Vader. Dark Vader fingers air Funny. Darth Vader showed it. No, but we want to put a lot of emphasis on that, like a lot so we could write regular text like this, Darth Vader showed. No, that's how a screen reader would read it. Or we could make this bold. Regular Bold was my fault on that one. Let's do Kate Regular bold. So a screen reader would read this even though it's pulled as Darth Vader showed. No versus Let's Make this strong, Darth Vader shouted. Oh, so you see the difference in emphasis. There is like No, no, no, no, something like that. That's the difference for a screen reader. And believe me, that's important. That is very important for a large amount of people on the Internet is incredibly important for them. And when we're looking at an example like, let's talk about gossip. So ah, given the contacts that people in an office are talking about another person in the office , and then one person comes up and says it, really, you know, it's like, really versus emphasised, Really, Let's do this. So regular Texas, like, really italicized text would be really and emphasised taxes, like really, almost like you're adding more almost like you're adding more sarcasm, but not necessarily sarcastic, is that's based on context. So again, this is important for people who are using screen readers and actually is becoming more more important for all of us because as more of us use services like Alexa, even Google. When I when I ask Google Toe to say something or to look something up, it's going to look it up, and it's going to try to read it as if it's a human, and if we can give it the proper context, they will actually sound pretty decent. So for this video, there is no task. We've already covered this a little bit in a previous video. I think we covered this well enough in the computer code language lesson. That was the last lesson, and I think, between the Darth Vader or the dark invader as I typed it, the Dark Vader example and the office and the office gossip example. I think we have this covered, so we probably don't need to do anything for this Now. If you have a screen reader, you could probably try to load this up on your screen reader and see what the difference is . I don't have one, so I can't actually show you what the difference is. I just know that that is what the difference is. Okay, so I think that's enough Talk a boat. Semantics. What's the difference between bold and strong and italics and emphasis and and all that kind of stuff? So that's head on over to another lesson where we're going to learn more about head elements, and we're going to look at a few of them in there. 35. Head Elements: Okay, let's talk about some head elements. I have accidentally exposed a few of them by using my editor V s code. And I think this is actually a good Segway into looking into some more head elements. Now there are a few of them that we have touched on very lightly. There are a few more in there. There's actually quite a few. And I think maybe we'll go and take a quick little dive into a website and see what kind of head elements we confined. So I'm just gonna open up my editor and we're going to create a regular, uh, just that regular standard HTML structured templates and we're going to walk through those head elements and then we're going to learn about a couple more. So let's go ahead and do that now. So I've got V s code here, and I'm going to create a new file and I'm going to save this file as had elements dot html , The type html Colin five Beijing, about five. And we see that right off the bat, it gives us html head elements, body elements and a dock type. It also gives us a character set utf eight. So this is actually one that you're going to want to use on pretty much every single website forever moving forward. This is how you display special characters, Chinese characters, Japanese characters, Korean characters, even special characters in languages like Spanish like this or the Not that one. This one that's more Spanish. But this serves as a good example is well or something like this. Where we have any of these characters show up. Any time you have something like that, you're going to want utf eight encoding and that basically says, Hey, browser, we're going to have all sorts of stuff on here, so make sure you can accept every single language. Now this is a meta element. Meta element basically just means this is an extra detail about the page. So the browser is going to look at this and say OK, the meta tag that has a char set or a character set is set to utf eight. So I'm not going to use the standard sort of text encoding that I regular regularly use. I'm going to use utf eight, the globally accepted formatting. Next, we have another meta tag. This one has a name of a view port and the content is going to be with his equal to device with an initial scale is equal to zero. That is, honestly, that one is making our site responsive. So we're going to dive into this one a little bit more down the road when we start talking about responsive websites. But that is basically how we make a site responsive. And now we're just saying http equivalent, basically make sure your content is available on edge. So consider edge that one. Actually, we're going to get rid of because that one is going to be a little too complicated for the time being. And then we also looked at title already. So that's that's a good one. We looked at style. We know about that one already. We have now dealt with a couple meta couple meta elements in there. We have actually already learned about links. So how we can link to another resource such as a CSS file style dot C is us. And if we wanted to put any javascript in here, we could simply put script and script scenario, and in here we could do something like alert test. So let's go ahead and open this file in Firefox. Let's close that and you don't have to use fire. Fox. I just like it because it's pretty speedy, but you can use anything. OK, so this gave me a nice little alert. This said test, that was JavaScript. Ah, you could also do something like consul dot log. Hello, world. We're actually diving into some JavaScript at this point. So let's refresh the page, hit our council and we can see Hello world, and we can see exactly where this was written from. I came in from head Elements that HTML and is online 11. Now, as you progress through your Web development journey, your inspect tool is going to be the best thing ever. It's going to help you with so many problems. It will help you see exactly what your browser is looking at. What your consul can see. Ah, it can help you debug. So exactly where a problem or something might be happening is coming from you. That style entered even all sorts of stuff in here. We're not going to go through all of this because as time goes on as you become a more talented Web developer in several different languages. You start using different libraries and start learning like reacting view and angular and things like that. These other tabs become a lot more the important. But for now, we really just need inspector and council. But that's neither here nor there. We are talking about head elements, and so we really have a script link, meta style and title. These are the top five really that you're going to see all over the place. Now let's go and explore the Internet. Let's see what else we can find. Let's go to imdb dot com and see what we have in here. Forehead elements inspect element. It's open up our head And so we've got a script. We've got another script. We've got another script. Metta. Charset utf eight Like what we saw compatible I e edge Like what we originally saw we've got to do to do, to do, To do this is a pretty cool one. We've got a meta element in here basically saying that the Apple iTunes app icon This is a cool one. We have a meta tagging here with the name of Apple iTunes app and its content is app I d. So basically, when this is loaded up on a mobile device, they can reference the app i d Likewise, the iTunes app store, the Apple iTunes store Rather will be able to I know that I m d. B has a particular app. Idea of 34 to 79 to 5 to 5. Ah, we have a lot more scripts and years a bunch of javascript. We've got a link. We've got a title. There's the link. Ah, we've got a property. Ogu Earl, Open graph. You are also this you're out. Whenever you copy and paste a link into Facebook, for example, Facebook wants to scrape that page and say, What is that you are all supposed to be? What are we supposed to show it as And we say it's supposed to be imdb dot com http. Colon slash slash dub dub dub dot imdb dot com slash We have a link, and that one is much more advanced. We're not going to touch on that one. We have another Lincoln here. This one links to an SPG, so that's pretty cool. We've got a device that the icon that's the this guy up here in the fabric on. We haven't touched on fabric owns yet. We're going to pretty soon, though. Ah, more links. A lot more links. Meta meta meta meta met all sorts of meta more links, more scripts. So you can see that in the wild. Really? We are only using one of five tags. We have a title. We have a style. We have a meta element and we have a link element. And lastly, we have a script elements. Now, when we're talking about the document object model, it doesn't really go very deep. So when we look at a script in here Yeah, okay. We're looking a little bit of JavaScript. Let's look at this style. We're looking at some CSS. That's all it is. Meta tags don't have child elements. Scripts. Ella, I don't think any of these actually have child elements at all. No, actually, they don't. And that just occurred to me for the first time ever. But they don't have child elements at all. So when we start talking about our document object model, we know that the body can go really, really deep. You can have Children and those Children can have Children and those Children can have Children. But the head does not go very deep. It is very shallow. It really only consists of title style, meta link and script. So your task for this particular video is going to be. I want you to find a website, any website. It could be Facebook. It could be Google. It could be your own personal website. It doesn't really matter. Just open up a Web site, right? Click on it and go to inspect element and open up the head tag. So this head tag here in your inspector just over that up and take a look around, see what people are adding in there. We're not going to learn about every single variation because there are tons of them. But you should by now be able to understand sort of what's going on here. So take five minutes out of your day. Go explore imdb dot com. Facebook. Google doesn't really matter. Go explore website. Go explore the head section of another website and just see what they're adding in there. And once you were done with that, let's head on over to the next lesson where we actually talk more specifically about meta tags 36. Meta Tags: In our last lesson, we look at some different head elements, including meta tags, and in this lesson, I think it would be a good idea for us to actually explore some meta tags. We're not going to explore all of them because, wow, there are a lot of them and a lot of them are just specific to like Facebook or Twitter or something like that. So what we're going to do instead is we're going to look at a actual list of proper list of meta tags Now we're just going to go through a few of these. So let's go ahead and open up our browser and you can see the link down below, and you'll also be able to see it in my UL bar ones. I show that just behind me, Ah, you'll be able to see the list that I'm working with. It's not a full list, and it's going to be a pretty extensive list, but not the full list, and we're just going to work through a few of them. So let's go learn about meta tags, all right, so I just have Firefox open and I'm going to go to just dot just dot html slash kevin subtle slash 1997924 That is just super memorable. I'll put that link in the project files as well as a resource. Okay, so we have some basic meta texture. Let's make that a little bigger. We have a charset utf eight. We've seen that one already. This is a popular one key words. What is your page about? If you're doing ah blogged about learning HTML, you might want to put learning comma HTML something like that. Don't put more than about 13 of them. Generally, that's the maximum amount. It doesn't really matter on your spelling because Google is going to look. It doesn't go. It doesn't really matter how your spelling is. We know what you actually mean. Google smart enough to know that description 150 words or less about what your pages vote. Know what your website is about? But what this particular page is about, the subject can be very, very similar to what your page title element is. We can actually see that there is a sin tax problem in here. We have a quotation in here when there should not be a quotation that should be just a regular apostrophe. And now it. If we copy and paste this, we were going to see that our browser would only understand this as meta name is equal to subject content is equal to your website. Then there's going to be an attribute called s and an attribute called Subject when in reality it should be your websites subject. So just be careful with that. And that's why I recommend using quotation marks instead of apostrophes for attributes. Next, we have a copyright. So if you're working on something that belongs to a client, you could put their name in their language. You could put this is ECMO script. It's a name for JavaScript. I don't usually use that one too often. Robots index and follow or no index and no follow. This basically means when Google hits your website are they allowed to put this in their search engine rankings? And are they allowed to follow the links on this page? They will honor that. Well, they say they honor that, and it seems like they dio last revised. When was this page last? Edited? Abstracts Don't use topic. Don't really use summary. Don't really use classification. You could use a classification if you wanted to. Author, you could put your name. Do not put your email address and there, please do not ever expose your email address on your website. If you expose your email address, I guarantee you you were going to start getting hit with a lot of spam email just because there are there's what three billion people on the Internet right now and something like 12 billion bots just hitting websites scraping information. It's crazy, and their sole purpose is to often just collect email addresses and spam. You scam you fish, you try toe break into your accounts. Just it's not good, so just don't put your email address in there. Reply to you. Might as well ignore that one owner. You could put your name so I but like Caleb calling for my my website because I own my website. Ah, the u R L to my website you just put, like for me, it's coding for everybody dot com. So I put https colon slash slash, quoting for everybody dot com. Identify where you are all basically the same thing. Directory doesn't really matter cause we're not building a directory page right now. Page name. That's not really useful, so you can see how a lot of these are already. They're very similar page name, for example, and subject somewhat similar. Your page name and the title element on your page basically the exact same. And you can see again that the syntax highlighting broke somewhere. Ah, category. We've got coverage distribution rating. Revisit some title target and held friendly. We don't need to put that one because we are just assuming that every website is mobile friendly, mobile optimized. I should probably be optimized for at least 3 20 and larger. Is there anything else in here that seems incredibly important to you right now? Nope. I don't think so. Ah, OK, so let's just go through a list of the important ones. Charset very important through that at the top of every page, if you can. Just at the very top of your head element Keywords. Not super important, but it doesn't hurt or have them in their description. Definitely have that Subjects no copyright knee language. No robots, yes, revised no author. If you want to put your own name in there or linked to, like, your Twitter. You are ill or something. You could do that. You're owner. Yeah, that's probably not a bad idea. Doesn't hurt just again. Put the name. Not the email address. Then you are l You could put the actual you're all over the web site, and that just helps search engine sort of understand exactly what's going on. Although they're smart enough to figure it out if it's not in there and I think that's about it. So you can see that we have a lot in here, and this is just a very small list. There are so many other meta tags out there. Okay, so your task for this video is going to be I want you to pick out five html meta tags that you think are going to be important for your website, and I want you to put them into a new HTML file. So create a new file. Call it. I don't know. My site dot html and in your head put definitely put the char set. And there you want that one for sure. And then pick four others. So you have a total of five and put them in your head and just make sure that you have them in there and then moving forward. You can just copy and paste that template to all of your other HTML files. All the future ones were going to be creating, and you will always have your HTML tags in there. I'm not going to follow this rule just because I'm teaching. And so my lessons are little more leans than I don't want to put too much bloat in too many lessons. But because you are going to start building a website pretty soon you were going toe. Want to add these to your general template? Once you've done that, let's head on over to the next lesson where we learn about Asset Path thing and this is incredibly important, and we've already actually dealt with it a little bit, so this should be relatively easy 37. Asset Pathing: okay, It's time for us to get into something that is fundamental for any programming language. With any computer system basically anywhere in the world, we need to learn about Asset Path thing. We've actually dealt with this a little bit when it comes to links and relative links, even when we're linking to an image that is on our own website, and we've always made sure that everything is in the same folder. But what happens when things are not in the same folder? How does that work? So let's go ahead and explore how we can move images and other links to other folders and how we can link back and forth all over the place. This gets into a lot of relativity, so you always want to sort of think of where you exactly are at this particular moment, relative to where other things currently are. So really, we're just gonna figure out how we can access files from other folders and how we can access files from folders that are sub folders or parent folders and things like that. So I think the best way to really learn this is to really just dive in and get her done. So let's do that. Let's dive in and let's learn about asset Path thing. Okay, so I just have V s code open here, and what I'm going to do is view Explorer and I'm going to open a folder. I'm going to open my website folder with all my HTML files in it. Cool. So we have all my HTML files in here who had a style that CSS, which is something we used. And we also have an image which we can see here. So I'm gonna click this icon here and just create a new folder, and I'm going to call this folder Images and I'm going to create a new file. And this file is simply going to be called asset underscore path thing dot html html five. We can keep all that stuff now that we understand what's going on with it, and we can say Asset Path thing is the title that's head on over to the body. And you can see that in my in my folder here, I've got asset passing and I've got a folder called Images. Now let's open up finder. I head on over to my desktop, and I'll just make that smaller, says All fits in here. I have a folder on my desktop called Screenshots, and I have one called website. Website is where all these files from this course have lived, and I now have a new folder called Images and inside of this images folder is nothing. So we're going to want to put something in there, and we also have asset passing. So we want asset pathan dot html to be able to link to an image that is in a folder. How do we do that? We only know how to link to things that are currently in the same folder such a style that CSS or 800 by 300 Dodge a peg. That's all we've done. So let's go ahead and open up our editor And that's create a new image tag now because we know that if we see over here the folder name is called images, all we have to do is type in images, and then we could put 800 by 300 Dodge a peg in here. Now, if we go back to find her images is empty, there's nothing in there So what I'm going to do is I'm gonna grab 800 by 300 go into my images folder pasted in there, and what I'm actually going to do is just rename this so test image dot jpeg. And let's go ahead in here and change us too. Test image. Dodge a peg. And when I opened it up in my editor, you can see test image Dodge. A peg is in here. It's the exact same as the other image. I just copied it and I changed the name. So now when I say this when I opened up fire Fox and open up this image Oh, hello, There it is. It works now. What happens if I wanted to? What if I wanted to link to a CSS file that's in a different folder? Let's create a new folder in Finder. Let's go up one directory. So I'm where all my other files are, including images to create a new file or no folder rather, and I'm going to call it. Just see his s so you can see it and hear also created it in here. So right, click New file and we're going to call it style dot CSS and we're going to add a body in here, and the border is going to be 10 pixels solid black, and the background color is going to be gains borrow. So we are somewhat familiar with this kind of CSS already. Now that does nothing for a page. We actually have a link it in here. So it's hit Link rail is equal to your style sheet. That's important. And you're a traf is going to be the folder name and then the file name. So CSS slash style don't see us s No, Let's open up Firefox and Refresh. Hey, look at that. And now we're getting into Asset Path thing. You are definitely 100% guaranteed to run into a problem where something doesn't load. So let's say we have a table and we didn't call it style. We called it Still, we missed that, you know, we didn't notice it. So we go back to our page and we refresh and we noticed that our styling isn't taking place also, let's ah, let's get rid of the E on test image. So we have a broken image and no styling, and you're thinking I'm doing everything right. This looks right. And by the way, when you're knee deep in your own code, sometimes you cannot see your own typos. I probably have typos throughout this course that I have been caught as well. It's totally normal. So you're looking at this and you going test image a peg and you got style that CSS Why are these not loading and you hit, Refresh over and over and over and over again. There's two ways to debug this. 1st 1 is you can view your source and you can actually just click on the on the asset, and it says file not found. Well, if the file is not found, it means it does not exist. That means that exact file does not exist. So either your folder name is wrong or your file name is wrong or the file does not exist. Same thing with test image. You're going to get a file not found 40 for some sort of message, like that missing page. And the second way is we can go back into inspect element. We have an inspector so once that's open, always hit refresh. So you get the freshest version of your document object model. Go into your body and find your image says it cannot load the image. This one is basically telling you the exact same thing images not found. And then it's up to you to basically say, Why is that image not found? What's up with that? You look at your coat and go, OK, well, test image, Dutch. A peg does exist, but in here is going images slash test underscore a mag. There it is. Let's go ahead and change that right in the dumb boom. There it is. Okay, the next one is startled out CSS. And when we check this one out, this one doesn't say it can or cannot be loaded. But we just know it's not loading, so we can always test this one out, too. Seo they I think there's a type of when they think it's actually called CSS slash style dot C of this hit enter Boom. There's our styling. In other browsers, like chrome, you can sometimes actually just go into your console. Make sure you have all of your air logging turned on, and when you refresh, it will actually tell you right in here that the image for afford it does not exist and that your file or that your CSS file your style dot c is us also for afford it was not found, so those air handy little tools to help you out with that. Now let's talk about a thing that people dio all the time. People do this all the time. They think because we're using a folder, we can add spaces to it. So instead of images, we could use a folder name called My Images My Images. Now there is a way to make this work. And honestly, I don't want to show you just because this is a terrible practice when it comes to Web development is you do not want spaces in anything you don't want spaces in your file name you do not want. Space is in your folder name. You do not want special characters or anything like that. So you don't want my asterisk images. You don't want a folder name that you don't want anything like that. You want it nice and simple and lower case. So if anything, it should be my underscore images or, in this case, just images. So whenever you create a folder, make sure that it lower case because that's a good practice. There are no spaces in it because spaces will break your heart. And it's different if you're on Windows versus on Mac vs on Lennox. You just don't want to get into that sort of problem. So make sure it's the same for everybody by making sure there's no spaces. No, no special character is nothing like that. Just keep it boring. If it's boring, you're doing the right thing. Now let's say we want to go up one folder so inside of our directory here, we're going to create another folder, and we're going to call this one pages because I am creative when it comes to naming. So we have a new folder in here called Pages, and we're going to create a new file, and this one's going to be Just call it test test dot html and let's do html five. Skip right to her body, and in here we need to access an image and CSS from a different folder. So at this point time, if we look at our structure here, we have test out HTML. But we need to get into images and then grab test image. And we also need to get into CSS and grab style dot CSS. So this is where it gets a little bit relative. So we need to move up our directory over a directory and then into it. And a better way of looking at this is we're currently in pages. So then we need to move up a directory to where everything is and then into images and grab this one and then for a CSS again, we start off where test on HTML lives. Move up a directory, go into our CSS folder and grab style dot CSS. So let's give this a quick little run through. We need to grab a style sheet in here and now we can't just do it. CSS slash style dot CSS because this thinks that there's a folder in our folder called pages called CSS. But there isn't. It's actually up one level now to go up one level. All we do is type dot, dot, slash and that means go up one level and you can actually CVS code sort of understood what I wanted to do. here, So I means go up one level, go up one folder, go into the CSS folder and then grab style dot CSS and likewise for our image. We need to go up one folder, go into images, and then go and grab test image dot jpeg. And so if I open up Firefox, that's closed that down, and I'm going to go into pages and open up test dot html. You can see this all works, and when we view the source, view the page source, you can see dot, dot style dot CSS. And you can actually even see it mapped in your U R L Bar where it says dot, dot, slash CSF slash style does CSS. What this is saying is, basically, we live in the pages folder right now. Get out of that pages folder, just move up one and then go into CSS and then style dot CSS. Voila. There it is. And that is how we move up and down from different directories. Everything is relative from where we currently are, so from wherever test out html is we want to move up or down to grab test image Dodge a peg . We want to move in this case, we want to move up one folder with dot, dot, slash and then down one folder to the CSS folder and then grab the style dot CSS file. That's really all there is to know about pai thing, but this is incredibly important. And when you were just getting into Web development, most people struggle with its not everybody, but most people definitely struggle with this. I certainly did when I first started. I can't emphasize enough how important this is cause this doesn't just affect HTML. This will affect eventually some of your CSS. This will affect your JavaScript. This will effect any python. You're right. This will affect Jabba CS as all programming languages in the future. A lot of things air file based. And so you need to know how to access files from wherever you currently are located. So your task for this video is going to be your task. Create a new dot html file from scratch. Please create a Styles folder in the same directory wherever your HTML file lives. So make sure they're side by side. Create a new style dot CSS due to due to its new style dot CSS File inside of your Styles folder, your styles directory full during directory or the same thing, and then I want your html file to link to the style dot CSS file. So link to your style dot CSS file. You're going to need to use relative path things, so we're not moving up a folder, so you're not going to use this. You are simply just going to write styles slash style dot CSS save and save and open in your browser so saving open this in your browser or browsers if you want and view the page source and make sure that that link is clickable. You can even add some extra styling inside of your CSS file, and when you do that, you should see the styling take place on your page as well. So that's how you're going to know that it's actually working. Once you have done that. Had on Overton next lesson, and we are going to look at we're gonna look at adding a little image up here. So instead of words as document or the file path, we're going to add a little fabric on like what you see in here 38. Favicons: Hello and welcome back in this video, we're going to learn about fabric coins. So a fabric on is a little icon that you see when you load up your browser and you have multiple tabs open. He got that little image beside the tab title. And to give you an example, you can see right behind me here where it says document. There is no fabric on. But if we went into I am db dot com, you can see up here. It's loading. There it is, that little fabric on right there. So that icon is called a five icon. Some people call it a favor con. I'm not really sure which one's the right way to say it. Honestly, it doesn't really matter, but we're going to add one. No. So let's go ahead and create a new file. First, I'm gonna open up V s code so new, and then I'm going to save this as that save us as fabrikant dot html. And for this one, we're going to need to create an image or grab an image. So I'm going to create an image using photo shop. But it doesn't really matter if if I've created the image that you create the image. Really, What matters is is that we have an image. So we need an HTML five page layout. Just get past the stuff called Fab Pecans. And we're going to have some stuff in our body here, our body here. And let's open this up in for your fox. So I'm just gonna open up fabric on dot html and we see OK, we've got a title appear called Fab Icons, and we've got nothing really important in our body. So a fabric Khan is Actually, it's a pretty simple little thing to add. Ah, it takes an element that we've already used. Link. We use a different relation eso instead of using a style sheet, which is what we've what we've used so far, we're going to use an icon, and the type is going to be different based on based on the type of image. And we're going to talk about that in just a sec, and it also takes a hyperlink reference to the image. And so this one, we're going to put it in a new folder, so we're going to get into some more path thing here. Fabric corns slash at Let's just called have, uh con dot PNG. So I'm going to use a PNG and because I'm going to use a PNG, my image type needs to be image slash p and G. So let's make this just a tad smaller. And if I was to change this to let's changes to a gift, I don't imagine that the gift is actually going to animate in there. So you might want to stick with a regular single frame gift. J. Paige something like that. Or if you want to stick with a regular dot I see oh dot I see. Oh, not I c o n fabric on dot I see. Oh, this is the old way of doing it Back in the day. This is how we made ah, fabric Cons. We didn't have PNG supporter Jay Peak support. It had to be a specific that I c E o phile. This no longer is the case, but if you still want to support that, by all means, go for it. It is completely supported, and you can just type in the image type as X dash icon and again that matches this extension here where it says dot i CEO. So I'm going to change mine to a PNG because I like the transparency of a PNG, and it's easy to edit. Next, I'm going to open up Photoshopped photo shop. Now, at this point, you don't need to open up photo shop. You can just grab an image from the Internet if you like, or get it from the project files. And I'm gonna try to resize my screen here so that you can so that you can see what I'm doing. So you can see I've already actually made of fabric on here Summers and open this up. We're looking at a particular type of image here, So this just has H for H e mail. It's the html five color orange. All it is is the letter H. And so this image, if I go up into image image size, you're going to see that it is 64 pixels by 64 pixels. It honestly doesn't need to be too much bigger than that because of Fabrikant is pretty tiny. So again, if we open up Firefox and let's go to imdb dot com, we can see this fabric on up here is super small. Generally speaking, it's 32 by 32. Sometimes people will give it a larger image just to make it a little more clear. I like giving it double. The size 64 by 64 seems to be good. You could probably give it 1 28 by 1 28 But just remember that your your image is going to shrink down, so it's going to get a little bit blurry. So don't make it too big and don't make it too detailed. So arms going to save this file. And I'm going to go to my desktop website and I'm gonna create a new folder called Fabricantes because that's what I wrote in my code. So it's called Fab Icons. And in here I'm just going to simply say this as a PNG and let's put that lower case fabric on PNG. Let's make that smallest. And when I open up V s code in my sidebar here, which you can turn on at any point in time, you can just go to view. And then I believe it's just Explorer. Yeah, view explore. You'll see a new folder and here called Fab Icons and a filing. They're called fabric on dot PNG. So it's got a transparent background and that matches the folder named Fab Icons and the file name Fabric on dot PNG. Let's go ahead and close this link element and refresh Firefox, and there it is, just like that. Now, if this doesn't work for you and for a lot of browsers, you're going to run into a problem here. Fabbre Guns, air heavily cashed. So if you're using Internet Explorer or Microsoft Edge often, this won't show up, so instead to verify that this is going toe work. What you do is you go into your view source and where you see your link. Rallo Ziegel Icon type is even the image dot image slash PNG. Rather, you can just simply click this this u R l that you added in here this relative link, and if that loads for you, chances are you're Fabrikant going to work. The other option is is you can give it what's called a hard reload. Some browsers have this. Some browsers don't have this chrome. If you right click on the reload button will actually say hard reload or hard refresh can't remember what it's called. But generally it's command shift our or control shift are. And if you just slam that a few times over and over and over again, you're telling the browser, Hey, get the newest stuff. And so that is, that's how you do a little quick, hard refresh. Teoh. Hopefully clear some cash. The third way is you can always copy this link and open up a new incognito window or new private browsing window and try it in there. Sometimes it works. Sometimes it doesn't Falvey Cons. Air finicky that way. Eventually, though, it will work. Eventually, your browser will just say, OK, well, I need to go and get a new fabric on. So let's go fetch the newest one. So that's all there is to adding a fabric on. Now, your task for this video pretty straightforward, I think, is basically do what I did. I want you to create a new HTML file. Add a fabric on using the link elements, make sure you're well is equal to an icon. Type is equal to whatever your image type is supposed to be. It's always image slash gj peg gif X dash icon. Something like that. I usually stick with PNG's just because they're nice and you get a little bit of transparency in the background. Put your image in a separate folder. So now we have to use some relative path thing here. It's really good practice toe to work with us over and over and over again. And then once you're done, that savior file is fabric on dot html. Open it up in your favorite browser. Maybe Firefox Safari Edge or chrome doesn't really matter and verify that it works by refreshing your page and checking out your fabric on up here. 39. HTML Entities: in several lessons. We have seen some things called HTML entities, and they look weird. It looks like an ampersand. Ah, couple of letters and then a semi colon. We've used it for forcing a line break or not a line break while I gets non breaking space , but an extra space on the page. It's ampersand and be as P semi colon, and we tried to write HTML inside of our A code, but it doesn't work because the browser renders as regular html, and so that's a problem. So in this video, we're going to look at HTML entities and how we can actually write HTML inside of our page that the browser doesn't render it as html so reason as regular text. So I just have V s code open here. You're gonna want to open whatever editor you're using. It doesn't really matter to be honest, as long as it can write HTML files. Let's go ahead and save this as hte email. Underscore entities dot html. Let's give this an HTML five template and let's call this entities. So a really, really good example of this is when you want to write a particular character for example, let's say I want to talk about dibs. Ah, again and suggestive apostrophe s's Get out of that one. And let's boot this up in our browser. So I'm gonna open this up a. She male entities close that tab. That's not useful. And it says, I want to talk about And then there's a break in here. Let's go ahead and make that larger. There's a break in here between the word about apostrophe and s. And if we view that source code, we're going to see there's a different here, and it's colored the same way as other HTML. You can actually see that is breaking the body here because there's no closing tag. So this point in time your browser was going to look at this and say, OK, there's there's a body tag and then there's a diff tag inside of that. So a child element. And because there's no closing tag yet, slash Body is also a child element of def and slash html is also a child element of def. And that's not right. We learned in the XML video that breaks proper nesting procedure, so let's go ahead and close that and let's discover how we can actually make that show up. So in HTML, we don't always want this to display as HTML. And there's going to be a lot of scenarios where this comes up so we can do this by writing an HTML entity, and there are a lot of them, like tons and tons and tons. I'm only going to go over a few of the most common ones that I typically use, but you might end up running into even more down the road. So after this video, don't be afraid to do a little bit of research and figure out which HTML entities there are . And V s code is doing me a pretty big, solid year. This is really cool, uh, character. Enter the replacing the greater than sign. That's pretty cool. Okay, so that's somewhat cheating, in my opinion, but also great. So let's do less than and let's do greater than so these air HTML entities and HD male entity. Well, im gonna make it's way bigger so we can see this nicely. All we starts with an M percent, always ends in a semi colon and has some variation of letters in between it. So we have seen this already with nbsp there we go, nailed it, which is a non breaking space. And that basically just adds an additional space into our page because HTML or browser rather is going to say, Oh, there's extra space, let's compress it down into one space And we're saying No, no, no, Don't do that. We actually want an extra space. In this case, we're adding lt that is the less than less than symbol. And this one is the greater than symbol. So let's refresh your page. And now we have a greater than and less than symbol in here, and we could put anything in between it, so I'll just make that a little smaller again. Let's go ahead and replace this Div with. This is the last nine symbol and the greater than symbol. So we simply type and lt for less than and GT for greater than. Let's go ahead and delete those to clean that up save. Refresh our page. Refresh Arpege. Oh, look at that. There it is, and it shows up the way we want. So let's viewer page source, and we're going to see that Okay, these don't show up is regular. HTM owned. That's good. We're telling the browser. Don't use regular less than and greater than signs retaliate. To use a represented state of less than and greater than this way doesn't render it as HTML , but it renders it as a regular text character. Now there are several other ones that we're gonna want to take a look at here. So let's go ahead and make a list. Ah, let's do you l ally, and the 1st 1 we're going to do is a bullet. So this is a bullet point. This one's actually going to be a funny example. So let's put some text in front of it. Text in front because it's a list on a Norden list. We're going to see a bullet point in front of it anyways. But with this little guy, we can actually force a bullet point anywhere we want. Let's put like three of them in a row. Next one. A very, very common one is the copyright symbol. So this one is just and copy semi colon and you can see here character entity representing the copyright symbol. So it's his copy right Sinbo. Another super popular one is the and sign. So it's like, How do we represent this? Well, we just do an percent. The and symbol, A MP semi colon. This is the and symbol the ampersand. Next, we have greater than in less than greater than and less than less than there we go. So we've got three in a row there, so that's going to say greater than the greater than symbol ampersand. So on and sign that guy and then the less than symbol. And let's do a couple arrows. Here s so we have a couple arrows in here R A r r So this is a right arrow and you can actually see the character entity representing an arrow. So this this is a right arrow. Let's create another one. This one's going to be a lar and l A are are So it stands for L for left arrow. This is a left arrow. Let's do two more. Let's do and rack. Whoa! So we're going to see basically these two little science here That's gonna be hard to see on the video. I apologize about that, but too little they look like Chevron's pointing to the right. So that's called his double right Chevron's or have runs. I don't really know how people say Let across the world. I think it's different. And then again, we also have the left one. So the left Chevron so as well, This one short for me and it's too, and L A. There it is right there. That's the one we want. Love that little preview. Double left. Chevron's All right, let's go ahead, save this page and let's go and refresh and see what these look like. So we've got our bullet points. We've got three bullet points. We can actually select these two. We can't select the list ones, but we construct these because it's considered text. We have a copyright symbol. We've got ampersand sign. We have three entities in a row here for the greater then M percent and a less. Then you got a right arrow left arrow and a double right chevron in a double left chevron. So those are the most common HTML entities that I tend to use on a daily basis. Again, there are a lot more of these. So what I would like you to do your task for this video is to very simply, you don't have to do all of these cause there's just going to be a place in time for you to learn those. But I do want you to be able to write a sentence with HTML inside of it. So just right. Oh, the sentence. I want to talk about dibs and it should look like this. If done right, you're going to be able to save your page. Open it up in your favorite browser and you're going to see the less than and the greater than symbols. If you don't do it right, you're not going to see that. And the DIV is going to render as an actual def and it should break into a new line. So it'll just look like I want to talk about and then breaks to a new line with nothing in it. Apostrophe s 40. Introduction to Forms: in this video, we're going to be talking about forms now. Forms are an incredibly important part of the Web. It's how we submit data to a server. Now. We don't have a server running, so we can't actually submit data. But we can learn all about how it actually works so that when you do get into a server side language, maybe it's python PHP Ruby Jabba See, doesn't really matter. As long as it can run on the server. You're going to need to know how these work now forms work strictly with HTML. You have to write some HTML to submit a form, and there's quite a bit behind a form as well. So it's not just a simple as writing a form and then just saying Okay, while all the date is going to go to the server, it's not quite that simple. We have to get into, like, request methods and different form submission type. So we're gonna talk all about that, and we're also going to introduce a bunch of new HTML elements input select text area button. We're going to talk all about these in the coming videos. So for this one, we're going to get a little bit ahead of ourselves, and then we're actually going to backtrack and learn about some of the specific elements that we see in here. But in this video, we're going to learn specifically about forms and how they work. All right, so I just have V s code open here, and I'm going to create a new file, and I'm going to call it forms dot html. Let's go ahead and create an HTML five page structure. Call it forms. And in our body, we have Hello, this is ah, form page. So now I opened up my browser and I go open file. You Excellency, that was cut off by my screen. But I went to file open commando control o open forms dot html and we can see that this is a boring page. This does nothing. So now let's learn about the form itself. So we have a form element because in html things are pretty verbose, Tli named. They're very accurately named. So when you write a form, it's actually just called a form. That's really nice. We have a method in here so we can see that we've got two methods get and post. We're going to leave that blank for now. And an action, which is where exactly are we sending this form to? Is it going to be this page? Is it going to be another page? We're going to leave that blank for now as well. Now, in here we can have different elements so we can have an input where the text type, we can have a text area and we're just going to leave these as blank. And I'm going to skip over these real fast, but we're going to learn about these in the next couple of videos. We have a button this one actually needs in Texas. But button in here and we have a select which do to do to do also comes with child elements called options. So we've got an option in here one and to. So this is generally what a form sort of looks like and the buttons usually at the bottom. So let's refresh your page and take a quick boo at what this looks like. We have text area so we can know right in here again. We'll talk about this more specifically a little bit later. We have a larger tax area where we can do multiple lines. And we also have a drop down so we can select 12 and then we've got a button again. We're going to talk about these in future videos. So hold your hat on that one, because we're going to learn about these individually. Now, the idea behind a form is whenever you type something in here, maybe you're saying your name. So my name is going to be Caleb, and you submit your form. It should say hi, Caleb. Welcome, Caleb. Or maybe you're signing up for service. Like I don't know Facebook. Everyone has Facebook. So you go to facebook dot com facebook dot com. And we have two forms in here. We have an email, and we have a password. So let's just quickly inspect this element we're going to see. Yep. Input type is equal to password, and then we have a sign up form. So we've got a first name or last name your phone number Password? Your birthday. So you got your month, day and year, your gender and then just a sign up button. So it looks a little nice than what I've written, but basically it works the exact same way as what I'm about to teach you. Okay, so let's head on back and let's actually learn about this form here. So we have to method types in here. So let's go ahead and get rid of some of these button. We're going to do just an input type on input element so the type is going to be submit and the value is going to be again. We'll learn about this in a future lessen the value is going to be sub mitt. And in here the type is going to be text. And the name of this is going to be, uh, do first underscore name. Yeah, it's just your first name and let's see what this page looks like. Okay, so we've got a blank field and we have a submit button, so there's still no context around it, but that's OK. The first method we're going to talk about is get so get is how weaken what's one way of how we can send data to a server. However, the trick with get is if I save this refresh my page and I just put my name in here. Watch my u R L Bar. It now says question mark. First name is equal to Caleb. Now that's pretty cool, because the server can actually go and say, OK, and there's a variable called first name and its value is Caleb neat. We can't actually grab this with HTML just because HTML is not a proper programming language. It's a markup language. But if you're running python or PHP or Jab R C, you're really anything else you'll be able to get a variable called first Name is equal to Caleb, and if I create another one in here, let's call this one last name. Refresh my page. This one's going to be Caleb tall, Lean, and I'm going to submit, and we can see it in the URL here says question mark. First name is equal to Caleb, and last name is equal to Tallinn. So now the server is going to have to variables one called first name one called last name . Now that's the get method, and the get method will always take whatever the name of the input is or or whatever form element you're working with. Maybe it's a text area. Maybe it's a select will get into those a little bit later, but it's going to take that name attributes first name and last name. And because we're using the get method, it's going to show up in our u. R l like this. So if you were to ask for someone's password, let's do this. Let's put password and let's call this one password. Watch this. I'm just going to refresh this page, and I have last pass installed years. So it's making my form a little ugly here, but and put Caleb Tallinn and my password is going to be something secret. Something secret. Watch my ul Bar as soon as I hit. Submit. First name is Caleb. Last name is Tallinn and wait for it. Password is something secret so you can actually see my password. So it's super, super insecure. It's the most insecure way of sending data, and there are reasons for using a get request. And if you're interested in learning more about get requests, I have a whole course on AP eyes. You can always go and check that out. It talks about get requests, post requests and all the things we're going to be learning in this video and how they actually work between your browser and the server. But for now, just know that get request is in secure. It is a bad way to send secret data, so don't put passwords. Don't put credit card numbers. Don't put anything like that in there because it's in your your El bar. If it's in your your your you are l bar Chrome is now able to get it and send it to Google . It's stored in your history, so anyone who comes on your computer is going to be able to see it. If you copy and paste a link to a friend, guess what. They now have your password and so does whatever service that you're using. So maybe you paste it on WhatsApp. Well, Facebook, the owner of WHATS App, now has your password in plain text, and that is a big no no. So there's a way we can hide this. We'll hide this with a method called post, and so if I save this, let's go in here and get rid of this stuff. So I have my first name and last name. I removed the password field, and we're going to say Caleb Tallinn. And when I submit, nothing is gonna happen in my girl. It looks like nothing happened. But when I hit command are or control R or just refresh the page, watch this. Absolutely nothing happens now on certain browsers. You're going to see a little notification that says something along the lines of Hey, you've already submitted the form. Are you sure you want to submit the form again? And that's what a post does is. It tries to basically hide that data from the U. R L So you can still copy that link and send it to other friends, family, other people on the Internet. But it's not going to show up in your U. R L Bar, so it's going to be a little more safe now. It's not super safe. There are ways to make it more safe, but this is a basically a crash course on AP eyes, so we have two methods here. Get and post and let's make a note here. Get method is 100% insecure, and the post method does not show variables in the U. R L Bar. Let's go ahead and throw that into an HTML comment. Now let's talk about action. Action is where is this form supposed to submit to? So let's change us back to get, and the action right now is blank. So that means this form is going to submit onto itself. We could also say Go to forms dot html and it's going to do the exact same thing it currently is. So Caleb Tallinn submit and it goes to forms, not HTML. But watch this. Let's change it to a fire that doesn't exist. Missing file dot html save and I'm gonna go back some back on forms that HTML When I hit Submit. It's going to go to a different page. It's not going to go to forms dot html. Watch this. It goes to missing file dot html, but it's still sent all the variables. It sent my first name and sent my last name. It's just trying to send it to a file that doesn't currently exist. Now you could make that file exist by simply creating file called Missing File, or you could send it to somewhere that actually does exist. Ah, what is a good one? here we have. Let's go to div dot html. Watch this div dot html I'm gonna go back, refresh my page. So I've got Caleb is my first name. Tallinn as my last name submit, and it goes to div dot html. Now, this is going to show the entire div dot html file that we worked on, but it's also going to have the variable first name and last name in my U R L bar. And likewise, if I wanted to hide that, I could just use post methods. So it's refresh and watch this. It is silently behind the scenes sending that variable data. Now, this is a crash course on how forms work again. We're not actually going to get into this until we start working with a server side language, and in most cases, that's going to be fairly down the road for you. So right now we're learning something that is somewhat theoretical, but it is actually used on every single website that has any sort of data on it and anything that has to save any sort of knowledge, for example, users or passwords or anything like that. It has forms on it and in fact, let's go to a website. Good I m d B and view page source and I have never logged into IMDb, so I don't actually know if there is a form, but I'm willing to bet that there is f o R M. Look, there's one. There is a search bar. Totally forgot about that. So that's a form, and that one is they get method. The action is is going to go to slash find, so it's not going to go to find out hte email. They have a custom Yuelin. There's called Slash. Find an inside of this form. We have an input type of hidden input type of tax auto completed off. So we're gonna learn about this stuff a little bit later. Placeholder. But where is the name? Name is equal to queue. So now we can actually sort of reverse this a little bit. We know the name is Q. That's the variable we know it's text, and we know the method is get. So let's go in here. And we know that that action was slash Find when you submit the form is going to add question. Mark Q is equal to and ah, let's do Bo. What is a good movie here? Avengers? Hey, would you look at that? My search actually worked. Titles. Avengers, Avengers. They stand it finds all sorts of stuff. So basically, we hacked through their search field by simply reading their source code. Okay, so let's go back into our code. And let's talk about your task. Your task for this lesson is going to be due to do to do make in some room. Your task is going to be one. Create a new dot html file file two. I want you to create a form, use the get method and set the action to. That. Doesn't matter as long as it's another file. So if you have div dot html said it to david dot html. So create a new form. Foreign performed form. Form three. Create an input field again. You don't need to know what this is. We're going to dive into this in the next lesson. But create an input field type is eagle tax. Name is equal to idle first name or something. Then create another one type is equal to submit. The value is equal to submit and Then submit your form. So create input. Fields four, submit your for my guess. You're gonna have to save the file. Open it up in your browser, then submit your form. And five. Make sure you can see the get variables in your euro. So you should be able to see. First name is equal to Caleb in your ul bar. So go ahead. Give that a shot. This is really important. Please don't skip over this one because you're going to need this one in the future. You absolutely will. This is not optional. This is mandatory. Now, if you get stuck or you need any sort of support, I'm here for you. You can always join the learning to code Facebook group tens of thousands of developers in there. We can all help you as well at a moment's notice. Once you are done, that let's head on over to the next video where we actually learn about inputs and text areas and how we can actually customize their form to make it look sort of nice. 41. Input Elements: hello and welcome back in that last lesson, we learned about forms. How get methods work, how post methods work, how actions work. We saw an input field for, I believe the first time we saw a submit button for the first time, and we submitted a form a few times. Actually, if you skipped over that video, you are going to want to watch that one before watching this one. Otherwise, what you're going to learn in this video is going to be cool, but it's not really going to be super applicable to your real life skills. So in this video, we're going to learn about input types of selects radio buttons, text areas, different types of buttons, check boxes, all sorts of things that we can throw into some sort of form field. So this video is probably going to get a little bit long. It might be a little bit compact at times, so feel free to slow this one down and watch the same part over and over again. If you need Teoh with all of that said, let's go ahead and learn a boat customizing some form fields. Okay, so you can see that I have forms that html open. And this is just from the last video. I'm going to re save this so file save as. And I'm gonna call this form fields and let's rename this toe form fields. And let's talk about some of the different form elements that we have in here. So the 1st 1 we have is an input, and this one actually has a lot of different types, and I wonder if he s code is going to show me all of them. Yeah. Look at this. We have all different types, so we have a button, which is how we created a submit button in the last video. We have a check box, color date, daytime, daytime, local email file hidden. We have image, month number, password, radio range, reset, search, submit, tell and text. So we're not going to go over all of these. But we are eventually going to over a good majority of them because a lot of these air used all the time. So let's just start off with basic text. We've seen this one before. This is a text field, and we're going to wrap these in developments. So I'm gonna take this paste out up there that did some funny formatting and let's go ahead and create a label. So a label is an HTML element where we can actually specify when you click on the label text. It's going to select that particular input for now. We're going to keep this simple. We're going to keep this four. Input is equal to, Let's say, first name, and this one's going to have an I. D. Of first name. Let's go ahead, open up our browser, open up our form, fields that HTML and we actually need some text in there. I totally forgot about that. Wow, that's what My mind. Let's just call that first name. So I'm gonna zoom in, and then when I click on this part the text first name, my actual input is going to be selected just like that. So I don't have to select in here necessarily. I don't have to click in there. I can click over here. That's really nice. And so the way though the label element works is that has a four attributes and that just matches the I. D. And every label should have a specific element that is trying to focus into that it's going to click into for you. So it makes sense for this to use the idea inside of a classroom because you can't select multiple form fields. You can't type in two places at once. You have to do one place at a time, and so that makes sense. So this is taxed. Let's go ahead and say, This is an input field. Ah, and this is text something like that. Let's go ahead and create a check box. So label for eventually I'm going to stop writing the labels because that's just gonna waste your time watching me, right? Labels. Uh, not for we want to call this check box. I don't check box field just so that we have some better naming convention in here check box and we're going to use an input type. And V s code filled this out for us earlier and it was actually option number two check box . Let's say that refresh. And now we have a check box. We can talk about that on and off Boubakeur. Let's go ahead and create a radio button. So we've got an input in here and Actually, this one's going to need a label. We're going to skip the four because we just want this to show up as text. So radio buttons, input type is going to be radio, and the name is going to be basically the exact same for all of them. So this one is going to be radio test. Something like that. Let's create create three of them. You must put 12 and three something like that. So now we have radio buttons and we can select just 12 or three. The trick here is that they all have to have the exact same name. Now when you submit a form, if you want a different value in here, you're going to have to specify a particular value. Value is equal. Teoh. The 1st 1 is 12 and three and we'll give this a demonstration at the end. So let's go ahead. Give us a value is equal to check box. That's just name that check box. And this value also is going to need a name. Eso the value is not going to be checked box. The value is going to be one. The name is going to be checked. Box box, Box box. Ah, I d Well, that's nice, but the I d does not go in the Euro. We looked at this in the last lesson. The name goes in the URL, so it's call this first name. So we have some radio buttons in there. Let's add a date element. So let's just call this one the table. Data input is equal to regular data, and again, we could just verify that with V s code. So type is equal to the due date. So we could do date, daytime date local. We're going to do just regular date. For now, Name is equal to date Save refresh. We have date. Gives us a little nice little picker here, which is pretty nice, a date picker, and we can clear it. So thank you. Html five for providing that for us email. So this one is actually the same as date and the first name one. But this one is simply email. So this one is going to be email. I'm going to get lazy, and I'm gonna stop adding labels because again, you're just going to watch me at all these labels and it's going to get pretty irritating. So short cut those just say email. It looks like a text field, but if we inspect our elements, the type is email. So when we submit the form, HTML five is going to say, Oh, this does not look like a valid email address. You actually have to put that in there. We'll talk more about that in a little bit. Let's do a hidden field hidden. You're going to see these all over. We actually saw it in the IMDb example in the last video. I didn't really talk about it, but it was in there. So name is equal to hidden. Let's out of value is underscore. Hidden save, refresh. Nothing shows up. It's because it's totally hidden. It does show up in your source code, though, and if you ever doubt that, you can always right click and view source and go and find it next. Let's do a number field, so let's do number. We've got input type is equal to again. I know this one is just called number, but let's take a look here and, um, be er number name is equal to number. This one's pretty cool takes a step. So how much do you want to move up or down? Let's say this is going to step by 0.5. Let's take a max. Let's start looking at some attributes here. Max number is going to be 50 and the men is going to be zero. So this is going to apply some HTML five validation for us. That's pretty cool. Let's go ahead and take a look at this so it comes with this little arrow here. It's so hard to see. But let's go below zero. It doesn't go below zero. And if I tape saved 49 up up doesn't go higher than 50 and it increments or detriments by 0.5, cause that's what we told it to step by. Now there's nothing stopping you from typing in 90 or minus 1000 although you can see Firefox was nice enough to tell me that this actually doesn't work. And then when you try to incremental document using buttons, it fixes it for you. Next is a huge one password password. This is also an input field. This one's called Password name is equal to password, and we're going to show that when we submit this form, this password shows up in the area, which is a big no no. We know that. Don't ever do that. And let's take a look at another one here. So we've got another attribute here that we can add on any input field. I say Input field because I worked with other frameworks where form elements are called fields. But you can think of a form field as a form element. So placeholder is default text. Not really default text. It's more like a ghost text. Look at that ghost text end because I have last pass installed on here. It's going to make all of these fields ugly because that recognizes that there's a password field on here. So that ghost actuals up in the background and Aiken right over it and the password does not show up at all. So that's pretty nice. Next we have a U R L field. There we go. Input type is U R L name is equal to you are. Oh, and let's give this one a default value. So this one's going to have a value of H G. D. P s coating for everybody dot com. Save and refresh, and you can see my Yuelin. Here is https coding for everybody dot com and again when we go to submit this form. If this does not validate, if this does not look like a regular U R L to your browser, it will actually prevent your form from submitting. We'll demonstrate that in just a little bit. Next, let's take a look at file file. A blowed input type is able to file. Name is equal to file. Value is equal to it doesn't really matter what the value is. It doesn't really matter what your place holder is because it gives you this and you cannot edit this. The way we get around this down the road is we just hide this and we use a little bit of JavaScript, fancy nous to pretend we're actually changing something. And really, we're just changing this one. But let's change this did to you. Now it says form fields, not html. So when we submit this page, this can optionally upload a file. We're not going to get into that right now because I think that's going to be a little too much but there is a specific way to upload a file. We have to add one more attribute to our form element. Again, we're not going to get into that. But if you ever do run into that, feel free to reach out to me. And I can explain to you how that works. And I can put you in the right direction and help you out with it. And lastly, we have input type is equal to submit value. We saw this one in last video Custom text for button name is equal to submit Now these are , I think, just all the input fields. Yeah, these are all just input fields. And to be completely honest, I think that's enough for this video. So we're going to learn about text areas and drop down menus and things like that in the next couple of videos. I just don't want this video getting too long. Now let's go ahead and give Let's elect every input here. So I just selected that and I'm going to use a shortcut here where I can type in all of them all at the same time. So I just like to all the inputs and I'm going to say required is equal to required. So this is XML markup in regular HTML. We just type required like that. We give this Ah, solid refresh here, and let's put in this one was supposed to be a first name, so let's go with Caleb. Check box, The Asher Let's check it. Radio buttons. Let's select number two. The date is going to be what year the year is going to be 2026 May. And what day do we want? 23rd email address is going to be something at something dot com, but let's actually make this one fail once. Make this one fail so we can see some validation in here hidden. We can't do anything with hidden number. Let's make this number not validate. We said this has to be a minimum of zero and a maximum of 50 so it's a minus 10 password. This is required, So let's just put some stuff in here. You are out. Let's go ahead and get rid of that entirely. And let's select a different file Custom text for a button. This is the submit type, so let's go ahead and submit the form. 00 please enter an email address. Okay, Something at gmail dot com. Oh, please select a value that is no less than 50. Okay, well, zero. Let's put a number 100. Hope, actually, can't be higher than 50. Okay, so let's put something like 25. Oh, this one isn't valid at all. There's nothing in here, so let's go ahead and put test. Oh, please enter a valid u R L Please enter a girl. Okay, so it's a go https coding for everybody dot com. And for this one, you're going to want the http or https because let's demonstrate this. Let's see if Firefox is going to work with me or if they fixed this. Nope. Enter valid. U R l All you RL's a valid you are always starts with http colon slash, slash, or HD to be yes, colon slash slash Now let's submit this. Cool. Okay, so we told her to go to div dot html And let's look at the values in our girl here. So we have first a musical to Caleb. Check box is equal to one. Radio test is equal due to that's what we selected date is equal to 2026 05 23 emails equal to something at gmail dot com. This is the at symbol this is called You are Ln coding so that we don't have to put a at symbol because, well, that's just not gonna work for us. That can break a lot of things hidden, is it? So there is a value in there. Numbers 25 password is equal to whatever my password is again. Do not ever put a password field in your form with a get request. You're asking for trouble If you do that, my girl is equal to a UL encoded. You are also it's http percent 38% to f percent two f and you don't really need to know what that stuff is. But that is called ul encoding again. That just makes it easier for the U. R l or for your server toe. Understand the girl. Ah, the file. But the file name in there that's pretty cool and submit is equal to custom plus text plus four plus a plus button. So spaces are you are encoded to a plus symbol. So everything we submitted in this form is now in her you, Earl. And it's at this point, we basically say, Hey, back end developer, whoever he or she is, Can you work with this? And they say, Yes, I can work with us Thank you. And then, I don't know, Maybe they go and save the U. R L in the database or something. All right, so these air the major input fields that I wanted to go over with you. There are a few more that I purposely did not go over just cause they're a little less popular. But there are a lot in there, So if you ever feel the need to go and explore more, definitely do that. It's always okay to go and explore, and your task for this lesson is, please create a new form in that form. I want you to create an input field, actually want you create several input fields. I want you to create each of these. It's going to take you a little bit of time. It's not going to be a one minute task. This one's going to take five, probably 10 ish minutes, but if it takes you longer, that's okay. So creates a text field. Create a check box, create different radio buttons where you can select 12 or three at a date. Email hidden. A number field pass revealed you Earl and a file upload field. Then submit that form to any other file and watch it give you all the values inside of your you are Elvir again. The trick to that one, though, is every field, every input element needs a name, so give everyone a unique name. This is a very big lesson, and it is also very important. I work with input fields every single day, even as a back end developer. Whenever I'm writing Python code for a Web application, I write input fields every single day. So make sure you get this, uh, pretty familiar. Make sure you're pretty familiar with this, and then when you're done, let's have an oversight next lesson and let's learn about some other ones. They're not quite as big or as hefty as the input, just because input as so many different types. But let's learn about a text area where we can have an input field with multiple lines, and it can be bigger or smaller we can resize it and things like that give this task a shot . When you are ready, let's head on over to the next lesson and let's learn about text areas together. 42. Textareas: hello and welcome back. In the last couple of lessons, we learned how a form works and we learned all about input fields and the seemingly 2000 different options that an input field has in this one. We're going to learn about a text area which is very similar to a regular input field where you could basically type regular text. But the difference is a text area. You could write a lot of text with new lines, and you can expand how wide you want the text area to be, and you can resize it and things like that. So this video is going to be a lot shorter and we're just going to learn about text areas. So let's dive into that right now. All right? So I just have these code open. This is from our last lesson, and what I'm going to do is you know what? I'm gonna cheat here. I'm going to re save this again. Instead of form fields. Let's just call this text area dot html input field. No, let's call it text area and let's get rid of all of this stuff in here and let's get rid of the action because we wanted to submit on itself. Head on over to our favorite browser. Whatever one you want to use. Open up text area dot html. There's nothing in there. Good. We told it to basically have nothing in there. So a text area is not quite the same as an input field. It doesn't look like this. It doesn't have a self closing tag. A text area is different. Wow, it feel not a lot for me. So let's actually get rid of a bunch of this stuff. You can see that it supports name, ideas, columns and rows that's scared of that. For now. Let's get rid of that. And let's simply display this on the page. So we've got a text area here, and we could put multiple lines. While that is tiny multiple lines in here and that's OK. It also comes with a nice little re saris, a resize tool where you can make your text area bigger or smaller. So whenever you're writing in a text field next time on the website, I knew like I wish I had more space. Always look for this little icon down here. Sometimes it's disabled, but a lot of times it's not, and you could just resize it. So your text area has an opening and closing tag, and if we wanted to have some sort of default value in here, we don't put value, so value is equal to test. This is what we would do with an input field. We actually need to give that a hard, refreshing. There's nothing in there, whereas with an input field that would have that in there already because it hasn't opening and closing tag. Chances are we put text right in the middle, so let's go ahead and put some default text in here and now we have some default texting here, so we have something to work with. At this point, we can actually select all of this and modified as needed, so it's not the same as a placeholder. Speaking of placeholder, let's add one. We have a placeholder in here, and this is remember that ghost text that shows up in the background? I'm gonna refresh this page, and yet default text is in here. That's good, but what happens when I delete all of it? So let's go in head and delete the text goes text. There it is, and it only shows up when there's nothing in here. It's not too often in H E mail that we see something that is actually space sensitive. We looked at the pre tag once upon a time, and that one was based sensitive. But basically nothing else is except text area. Look at this. It looks like it's sort of centered only because I'm making this bigger. Now it looks entered, but by default did something like this doesn't really look very nice. And that's because we have all this extra white space in here. We have all this extra white space in year, so this is one of those elements where if you have a default value default value, you are goingto want to definitely remove the extra white space. Or if it's on purpose, you could put something like this. You have line one here and then get rid of all that extra text. So my editor automatically wanted me to type in here. Don't do that. Delete all that white space, delete all that way space, and then go line three and then you want it to end right afterwards, so we have line one in line three. No extra white space in here, no extra spaces at all. So it's hugging that left section that is the right way to do it. And we have some other attributes that we can look at as well. So let's look at the number of coals or columns. Let's make this 100 columns wide, so columns go up and down, just like in a spreadsheet. And that got really big. So let's go ahead. And yeah, I got really big. So I had a zoom out, 250% there to see ah 100 columns. And that's basically if I did 123456789 zero as 10 and a copy this 10 times so. 23 40 50 60 70 80 9100 It is exactly 100 characters wide using default texts, default font family. We can also do the same thing with Rose eso. Let's give rose its own attributes and you know what? Let's separate this onto a new line because HTML does not care about white space to the exception of inside of a pre or a text area. So it doesn't care except for in here. Let's put Rose is equal to Let's give it 50 rows. So by default it has, like two or three depends on the browser. Let's go ahead and give this a refresh. Now look at this. We have all sorts of room to type. We have all sorts of stuff in here. Let's also say when this form is submitted, it is required, meaning it cannot be empty. And so let's go ahead and give this an example as well. So in here, let's create an input field we learn lent about this one last video. The type is equal to submit, and we're going to give it a value of submit. And actually, let's make those rose a little less because that is obnoxiously large nad. Still, let's do 20. That's better. So now we have an input field. The type is submit. The value is going to be submit. That's the text that's in here, and when I submit this, it will submit fine. Let's go ahead and delete all that text and say that this field is required. This text area is required, so if there's nothing in there, we try to submit. Oh, please fill in this field, all right? And if we feel something in there than it submits because this is in a form, we need to give us a name so the name is going to be Let's just call it Text Area. It can also have an idea if we wanted to. So let's go ahead and give this label, and we can do a lot of the same stuff we did in the last video in this video. So when we're dealing with labels, weaken do ah, label is four and then give it an an I D. Which is going to match here. So let's call this t one. It's a terrible idea name, but its unique. There's only two instances where you see t one in this file in the Four Attributes and the idea attributes, so you know, they match up class is equal to We could give a bunch of CSS classes if we wanted to. And now let's look at one more. We didn't look at this one in the last video because it was going that last video was Honestly, it was it was borderline overwhelming. So this one, we're going to look at some more attributes, so we have disabled and in regular HTML you just write disabled in X html. You right? Disabled is equal to disabled to be extra verbose. Let's go ahead and refresh this page. And now you can see that my text isn't there. My default tax line one and three but I can't actually click in there doesn't work. It's disabled. In fact, we could do the same thing with this button. We can just type disabled, disabled, and we can't submit the form it all, So that's pretty neat. Let's go ahead and actually get rid of that one, because we want this to be submitted ble. And now let's look at a mid length amen length. So we're going to say this has to be a minimum of five characters, but this actually can also have a max length of 10 characters. Now that's pretty rude to say that someone has to put in between five and 10 characters for a text field or a text area. Rather, that doesn't really make sense. Usually you would have something like, ah, minimum length of 20 for some sort of I don't user profile biography and a max length of like 1000 but cause I don't want to write 1000 characters were going to do five and 10 so I refresh. Let's go ahead and get rid of this enlistee. 1234 Submit. Oh, please use at least five characters. You are currently using four characters. Let's do 56 79 10 11 12 13 0 wait. Actually, I'm typing and it doesn't let me go any further. Oh, that's pretty. Eight max length of 10. And so now I can submit this and we can see the text area says 1234567890 10 characters because that's what we said. The maximum waas. And lastly, this is a very important one. Auto focus. This one is good for the user experience, so auto focus is going to say as soon as the page loads automatically allow someone to start typing in here. So when it comes to auto focus, you only ever want one form field, Whether it's an input or a text area or selector, anything, you only want to use autofocus once because you can't focus on multiple sections or multiple fields or multiple input fields. You can only focus on one at a time. You can only type in one place at a time, only give it to one particular element. So because we only have the one text area, we can refresh this page and I automatically can start typing. And again, let's just go ahead and delete that from the U. R L So we'd give this basically a hard refresh. And you can see that my cursor right in there is ready to start typing. So that is text area and a lot of different attributes. Now these are not all text area related. You can have placeholder basically anywhere where you can write text columns and rows. This is text area. Only required is for basically any form. Field Name is a global attribute. Ideas. Global classes, Global Men length and Max, Lengthy Zehr text area related and auto focus can be just like placeholder. You can use autofocus anywhere where you can start typing, so your task for this video is going to be create. A form method is equal to get action is equal to blank. That means it's going to submit onto itself, create a label, make that label. Make that four attribute match the I D. Attributes of the text area that you're going to make, then, with your text area, I want you to add a placeholder Columns. Rose required. Name I D Class, Even though it's empty added anyways, it's good practice max length, mean length and auto focus. And then I want you to tinker around with the different spacing in a text area and just sort of get a feel for how that one works. Lastly, creates an input type is equal to submit that that's going to submit your form for you. Save your file, open it up in your browser and click submit. This turned out to be a relatively big lesson as well. So if you ever get stuck with any of the attributes in here, don't forget. You can always ask questions. I'm here to help but give it an honest shot on your own. And if you, if you really get stuck, well, that's what a teacher is for, and you power through this like a house. Then let's head on over the next lesson and let's learn about buttons. Let's learn about buttons. There's a difference type of element that we can use call button instead of using an input field. It's the one I prefer, but it doesn't really matter at the end of the day. 43. Buttons: Hello and welcome back. First of all, huge. Congrats on making it this far because forms can be pretty overwhelming. There's a lot in there. But the nice thing to know is that you don't actually have to use all of this right away. And with a lot of practice just over time, really, it just becomes second. Nature becomes really, really easy. Assume you start learning CSS and JavaScript and other languages. All of this becomes so easy. You can do this in your sleep. It's just a little difficult at first. So I'm glad you're bearing with me, and you're sticking with this course and you're making progress now in this video, what I would like us to learn is buttons. We've seen a submit button, but we haven't seen other forms of buttons, and I actually prefer this method of creating a button. So instead of using an input type is equal to submit. We're going to use an element just called button, and we can give it a type is well, but it only has three types to choose from. So now we're getting ah, little more for boasts and what the actual element is and had. It just makes a little more sense to me. Now, this is this is totally up to you if you want to use it this way or not. Ah, but it's good to know because you're going to see it out in the wild. So let's go ahead and get started with that right now. So I just have V s code open here and I'm going to create a new file and I'm gonna call this buttons dot html and let's give it html five structure we call these buttons and in our body were going to create a brand new form. And so we have a form in here. The method is going to be get. The action is going to be blank and we have a closing form tag. Now let's add an input. Field input is equal to type. Do we want to be text? Now? Let's make this an email. Better yet, let's make this a U L. Let's give it a placeholder. A placeholder is equal to https. You're website dot com and you know what? Let's put this on different lines because, hey, if we're allowed to do it, why not? Let's give it a default value of https coding for everybody dot com. Let's give it a name. Just call it website. And now let's take a look at the page to see where we're at. So let's open up buttons dot each email. We have a regular text field. Nothing fancy at all. Just takes a year. L just takes a link. Up until now, we've been using inputs. Type is equal to submit, and that creates a button. So it's Let's go over this as a little refresher. So submit in all caps we see a button that says Submit. Now let's comment that out in HTML and to comment. All I did was hit, uh, command plus slash. It might be different in your editor, depending on what you're using and what your settings are. But there is usually a shortcut to instantly comment something out. Now let's create a new element called a button, and this is neat. Gives us all sorts of stuff in here, but we're not going to do that's just create a regular button. Now this button has a type, and there are four types to choose. We can use a button of menu reset and submit. The most common you will find is button and submit A button does. Nothing does absolutely nothing. It is purely watches. It does not submit the form my pages not refreshing. Nothing is happening. This is purely aesthetic. And once you get into JavaScript, you're going to write all sorts of buttons and those buttons. They're going to have actions. So if someone could say create a button that says Click me and when they get clicks or when this button gets collect, it could do something. HTML does not have the capability of doing that particular thing yet. We need to get into the world of JavaScript for that, and that comes a little bit down the road. Next we have reset and reset form is what this is going to be called. I am just butchering this right now. Reset form. There we go, and this is going to It looks like it's doing nothing, but it's going to reset your form to whatever the default values are. So if I said blah, blah blah on a quick reset form, it's going to put coating for everybody dot com in there. The reason it does that is because that is the default value that we have given it if we get rid of this default value. So we just have our ghost text in their place holder. And we said LA, blah, blah and reset form. It goes to nothing in the wild. You don't see that one too often anymore. Occasionally you'll run into it. But honestly, I probably only run into this one a few times a year, and it's not too often I actually have to program this one into a website. There are other ways of adding validation and getting people to sort of just fill it one particular field or resetting a particular field. But it's good to know that this exists. We have two more in here. We have menu, which we're not going to touch on, because that isn't going to be a little bit too much. And that's part of a bigger lesson. And we have submit and submit is going to submit the form. Now these two are essentially the same. All right, actually, let's do this. No, not use of it. Just submit. These two elements are essentially the same. One is using a value to add text, and one is just adding regular text between two tags. Now I like this one better. I like the button better because we could also split it onto multiple lines and just makes it easier to read. We can also disable this. It's not disable its disabled. They're Rio. It looks faded out so we can't click it anymore. And if we ever do that, we can now watch my you Earl is going to go to buttons dot html. Question. Mark website is equal to https. Ah, bunch of your own coded stuff coating for everybody dot com. And will we see buttons? That HTML website is equal to https, a bunch of stuff coding for everybody dot com. Now again, it's really up to you. Which one you want to use? It doesn't really matter if you want to use input. Type is Eagle does admit or button type is equal to submit. I have a preference towards button just because I think it's a little cleaner, and when someone looks at it, they don't have to go. Oh, this is an input field because technically it's not. Technically, it's a button, so just makes it a little bit more verbose. I like that method. But, hey, you know what? If you disagree with me, well, that's the nice thing about computer programming is you're allowed to disagree with me. You're allowed to use whatever method makes more sense to you. Now your task for this video is to create a brand new form again. Make sure your method is equal. To get you have an action is equal to blank, so the page submits onto itself, creating input. Basically, just do exactly what I did. Create a button and then try. Try. Using type is equal to reset and type is equal to submit and see what the difference does and just tinker around with it. Get a feel for it. There's no rush. You don't have to learn all of this in one day or anything. HTML is not going anywhere. It's been around for well over 20 years now. It's not going anywhere. Once you're done that, let's head on over to the next lesson. And I think you and I should start learning about drop down menus 44. Dropdown Menus: Let's take a quick minute or two to learn about drop down menus. Drop down menus are really, really easy, but they do require two elements, and when we get into the world of JavaScript, it does make a little bit more complicated. But it does keep our HTML nice and simple. So when we write a drop down menu, we used the select elements. And inside of that we use another element, a child element called option, and we can give it unlimited number of options, and it will create a drop down for us. Now. There are some particular attributes that we can use when we submit form to get particular values. We're going to look at all of this in this video. Alrighty. So I just have ES code open here, and I'm going to re save buttons as drop downs dot html. I want to call this drop downs and let's go ahead and get rid of this input field. And when we go ahead and check out this page, we're going to see a button boring button because it's not going to do anything for us now . We need to create a drop down menu we've looked at text Terry. We've looked at input fields. We've looked at buttons. Let's go ahead and take a look at a drop down menu. No drop down menu is called a select field, so we give it a select and not feel. Don't far too much for me. I want to take this one at a different pace because we've been going at lightning speed. So I think we should slow down a bit now, much like the text area, it has an opening and closing tag. Where is the input field? Does not we can give it an I D. Because that's a global class or a global attributes. We can give it a class that's a global attribute. If we wanted, we definitely need to give it a name. So let's call it selected option. Nah, selected item. And when we save and refresher page, we see there's a drop down. But there are no options yet, So now this looks a lot like a list. So when we have a a Nordeste, we have an ally in here. Let's just do that Ally Item one I am too AM three and so on and so on and so on. The pattern here is that we have a parent elements, and then we have options. And when we're dealing with select, we have the exact same thing in here we have select as the parent element. And when we have options, I mean that literally. It's actually called option. So we give it option number one option number two, and let's give it one more. Let's go. Option Option number three. You know when you say one word so many times and it starts to lose, meaning that's what option just did for me. So let's go ahead and refresh our page. And now we can see Option 12 and three. It's now we have different options in here. The problem is, is when we submit our page, I want to take a look at our four method we're using Get so this select should have a name of selected underscore. Item is equal to something in the URL. Selected item in here is equal to option, plus a bunch of other stuff. That's not what we want. What what we're telling it is basically this is the value that's not a way to live your life because this value could be anything. This is just text. We don't want text to be the final option. So what we do is we give it a value. So we say Valium and let's say option one. And maybe this one is going to be something else. And you notice how I'm not using spaces. That's important. Try not to use spaces if you don't have to. Space is just complicate things in the world of Web development and, let's say last option for this value. Okay, so now when I refresh the page, my have options 12 and three. But the difference is when I submit it now, it actually says in my ul bar question mark Selected item is equal to Option one, or if I it's like number two, it says something else, or Number three is going to say item selected is equal to last option. There it is. Now let's say you have a list in here, and maybe you aren't in total control of the list. You have all these different options and you want one of these to be selected already. So let's do this. Selected is equal to selected. This is X HD Male, but if you just want regular HTML just selected should do the trick and it just looks like that. So let's save and let's ah, let's refresh the page. Get rid of that stuff and option number three. It's already selected. Let's go ahead and move this to option number two. And when I refresh option number two is selected. Occasionally, the refresh actually is going to cash whatever you had selected before. So sometimes you have to come up to your UL bar and just hit Enter again and it should refresh for you. Now don't add Selected is equal to selected on multiple items because what happens if we put it on number two and number three? Well, they can't both be selected, and that's gonna throw some sort of problem out there. So it's going to go with the last one says option over three selected. But we actually just wanted option over two to be selected. So when you copy and paste, just be really careful. And lastly, let's take a look at an option in here. Ah, the value is going to be nothing. Let's make this required and in here. We're going to say Dash, dash, select item, dash, Dash. And actually, we want to get rid of this selected Refresh your page. We have selected item. What happens if you select us? Well, it's gonna submit. Still, actually, no, because we have required on your It says there's no value it's not going to submit. So that's one way of adding some sort of validation here. But if we remove that, it says question mark selected underscore item is equal to nothing. What we do here is, we can add disabled is equal to disabled or in regular HTML. Just disabled should do the trick. Give that a refresh and we can't even selected anymore now. To make that selected with you Selected is equal to Saturday did refresh our page, and now it is selected. But we can't re selected so we can't get back to their, and that's that's a pretty common thing. You see that in a lot of drop down menus on a lot of websites. Now you can still select it because the document object model, the browser has selected it for you, so that's not really good. Instead, what we do is we add required, which I got a little head myself before had required to the select element and refresh our page. It's currently select item. That's one that selected, and when I submit, it doesn't work, and that's what we want. We want to tell people, Hey, select an item, make sure you actually select one. Let's select number two and in rul Bar we have selected item is equal to something else. Now again, when it comes to forms, we are not actually doing anything. We're just sending data through the U. R L or through a post method, which is sort of like an invisible way of setting data. We aren't actually doing anything with that data. HTML does not have that capability. But we are setting ourselves up for success in the future for when we want to use select and options and when we want to use text areas and input fields and all sorts of different form fields. And this way we can eventually, when we start working with another programming language, we can use that same data and weaken stored in a database, and then we can create user Loggins user permissions. We could create a social network. You could create a dating site. You could create anything you really wants. Literally. Every piece of data that get submitted on a Web page goes through a form of some variety. Okay, so your task for this video is going to be creative form. Method is equal to get. Create a select. It does not have to have I d and class in there. Give it a name does not have to have required either, and give it three options didn't just tinker around with the different very the different variations. So maybe add disabled toe. One had selected to another ad required to your select field and then submit your form with a button. Like what we have here. Submit your form and just see what is happening with the values. Make sure that it's showing up in your your El bar, the way you expected to, and if it doesn't tinker around some more until you get it, because again, this is a really important lesson. Once you have all of that, figure it out. Let's head on over to the next lesson. Where? Guess what? We're not talking about forms anymore. thankfully. So we're going to learn something a little bit, a little less overwhelming. I'm gonna put it that way. It's a little less overwhelming. And so when you're done, I'll meet you over there. We'll learn about something different other than forms. 45. New HTML5 Semantic Tags: okay, We powered through forms. That is the biggest component in HTML and you've got all the way through it. So on this, like, good job, because that is hard to get through. And I know that learning HTML is not always the funnest thing in the world. But we're getting near the end of this course, and we're actually going to start creating stuff. Pretty soon we're going to be able to create an entire lay out an entire Web page from scratch using just HTML. Now, we've done a lot of component pieces here and there throughout this entire course, but eventually we're going to put it all together, and that's getting exciting. Now, before we do that, we need to learn a little bit more about HTML five. Semantics. This is a subject I've touched on twice in this course, but in this particular video, we're going to learn about A I want to say a plethora, but it's not really a plethora. We're gonna learn about a handful of HTML elements that are really just related to html five and why we're going to use them and where to use them. So let's go ahead and learn where we can use, for example, a knave element instead of a development or a foot or element instead of a development or a section element instead of a paragraph element. And we're going to mix and match a lot of these a little bit down the road. So you're going to want to watch this video because there's going to be a lot of good stuff in here. And when we're done again in a couple videos, from now, we're going to be able to create our own Web page. So just bear with me just a little bit longer and we're going to get there. Were on that home stretch now. So let's go ahead and dig into this, okay? And here we have a file and I'm going to call this one html five semantics. And let's give it a she male cool in five tab. And this gives me all sorts of stuff in here. So it just call this html five Semantics. This is a man ticks, which is really just a really fancy way. And by the way, computer engineers and computer scientists and developers do this all the time. We make up words or we use bigger words to make ourselves feel more important. Semantics. Honestly, this is just a really fancy way of saying we have a special naming convention for certain elements. So far, we've looked at a ton of different elements. We've got Div. We've got input. We have form. We have button, we got paragraph. We've got strong, strong Nailed it. We've got emphasis. We have you. That was a weird one. Keeps doing that for me. Based on another plug and I have on V s code we have all sorts of elements in here, and this is not all of them. This is just a lot of them that we've talked about moving forward. You can't use a paragraph for everything. That's not right. Paragraph is meant for texts. And we could use a div for everything. And for nearly 20 years, we did. We use a div for everything, whether you had a navigation. So we were just put a comment in here called knave and the class would be never We would have a div for that. And likewise, when it comes to a footer, we have a footer and we just give a comment in here Footer and again. That's a div, By the way, I did a cool little shortcut there. It's a CSS shortcuts. So once you get more familiar with CSS, this is going to be really cool. It's called Emmett Abbreviation Some. When you want to add a class, you just do like div sue paragraph paragraph dot test. This is going to add a paragraph element and you can actually see it down. Here is a class of test and an I d of I detest. Just build it out for you. It's really nice You don't have to use up. Not all editors come with that. If you're using sublime, there is 1/3 party extension called Emmett, and you're going to want to use that once upon a time. We used dibs for every single thing. And to be honest, we still dio we still use dibs for probably far too many things. With the invention of HTML five, we said, No, this isn't right because everything looks like a div and we were reading our code and we're reading our source code is really hard to separate. What is a div and what is not a dip and what its purposes. And sometimes we do this thing called obfuscating, where it's not called a nev. We change the class name. There's something like N or n one or some sort of funny hash that looks something like this . You just don't know what it is. And without a comment you like Well, what is that? Is that post BDNF I know you have to read through all of the child elements of Figure out what it is and html five said No. Enough of that nonsense. We're going to invent some new tags. So the 1st 1 we're going to talk about is knave, Honestly, this is the exact same is Div. The only difference is semantically or the naming convention is different. It's enough. It's a block element, just like a div. But when a search engine land on your page or another developer is reading your code, they go, huh? I know that this is enough. I don't need comments. I don't need a special class name or an I D. I don't have to read through the child elements. I know that this is a navigation bar. I know what this is supposed to dio and so we would treat and have the same way as we would a div. We have regular I d because that's a global attribute. We have a class that's a global attributes. We could give it a title if we wanted to. We could give it all sorts of things. It's basically the exact same thing as a div, but the naming convention is a little better. Next we have a header. So actually explain where these air used as well. So now is, uh, let's go ahead and open up a Web site. Let's go to the famous imdb dot com. So we now have would be like this section up here because it's for your navigation, has your search. It has a bunch of links. Has your categories that would be your navigation. And then let's just pick. Can we even know that's not what I wanted it all, although that would be an example for something coming up. Let's do it. Let's do a search. Spiderman Spiderman does whatever a spider can. So in here this could be a header because we have the navigation, and just under it we have a header It's like a banner section. In fact, it is pretty much synonymous with banner. So that's what we would use. A header for a footer is a little bit different. So a footer in our example would be if we scroll all the way down. I'm going to see all these little ugly links down here that most people don't pay attention to. But the occasional person does. It's also really good for search engine optimization. Just toe have these quick links in here, so that would be a footer. This whole thing would actually be a fighter. You got more links, and here you've got your social media links. You've got app links. You've got all sorts of stuff, and this belongs on every single page, just like your knave does. Next, we have an article. So can we find an example of an article? An article could be this entire section. And so instead of saying, div paragraph another paragraph and another paragraph, we would say article with the paragraphs inside of it, and that again just tells people Hey, look, this isn't just a regular diff. This actually has a purpose. Next we have aside and aside is Uh huh. Right in here. So it's almost like a menu system, but it doesn't necessarily have to be a menu system. It's something that belongs on this side. So you can think of a side as you know, a sidebar. Next we have. Let's look at yeah, it's like a details. And so we have details in here, and this is more for, you know, things like the copyright on your site. So when we go down here, I'm sure there's a copy, right? Yeah, There it is. 1992. Well, our current year details is basically in this you put and copy and then your year. So I'm like, I don't know, 2025 or whatever year it is. That would be your details and just sort of give mawr additional details instead of instead of saying span, which is usually what we do. Because of copyright is often a different color on a lot of different websites. We want to change that to be details, and that's just a little more verbose that allows us to understand what's going on faster. Next we have main. This is a good one. We have main Maine is like your entire contents sections. So we have. This is a big page. So if we look at all of this in here, not the aside, but just all of this in here and we keep scrolling. So we've got all this in here on the left. We've got all of this keeps going, all of us, Olive, this all of this, all of this, including the article, all of this related videos, all that other stuff, this whole section of here that's the main and so inside of your main you can have dibs. Inside of your dibs. You can have article and inside of your articles you can have a paragraph and then maybe inside of your main or maybe outside of your main depends on how your template is structured. You can have an aside. So this is your sidebar. Now, in your sidebar, you might also have That's not what I wanted a dot So you just have a link in here. You've got a bunch of different links in there, or maybe you've got an advertisement or sign up form or something like that. Next we have time. Let's look at time and that one didn't want to auto feel for me. I don't know why time is generally like when a bloggers posted, but in this particular instance, it would be the two hours nine minute runtime from Spiderman far from home. You could use that with the time element. So instead of again using a spend and then you would say like two hours night men's. Instead of doing that, you would say time again. That's just like while you're reading your code, you can understand what's going on, What's supposed to be in here. Is that supposed to be anything in particular? Because what if, for whatever reason, there is no runtime? Maybe the data just doesn't exist, and it looks empty. Well, right now that looks pretty pointless. Looks like an empty spans. You go. I'm gonna get rid of that. But if you use time, you go, Oh, time. They're supposed to be something in here that there is meaning with this one. So maybe I'm not going to delete that. Maybe I'm going to run it by another developer who's working on the same project, and I think I just want to go over one more. There's actually a lot more, to be totally honest, but I think we're just gonna go over one more. Let's use Mark and I don't know if this is going to work on IMDB, but let's give this a solid chance, right? Click inspect and I haven't given here. And let's go ahead. And how do I change just the HTML? Let's see if this is going to work. So I'm going to add mark over multiple errors. Slash mark. Uh, no, that didn't work that out. Put it as basically HTML entities. So let's go ahead and let's delete some of this stuff. And let's create a paragraph with some Lauren Gibson Low Room Ipsum 25 let's add Mark and you can actually see NVs code. I love this. The mark element represents a run of text in one document marked or highlighted for reference purposes. Basically, you're taking a highlighter to it like you're