HTML5 for Web Development (HTML5 for Beginners) | Lukas Vyhnalek | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

HTML5 for Web Development (HTML5 for Beginners)

teacher avatar Lukas Vyhnalek, Microsoft Employee, Programming Teacher

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

5 Lessons (1h 8m)
    • 1. Introduction

    • 2. Basics of HTML

    • 3. Learn HTML Code 1

    • 4. Learn HTML Code 2

    • 5. Learn HTML5 Code 3

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

HTML is a hypertext markup language. It is the most important building block of any website on the internet. HTML is used to describe the content of the website. In this class, I will teach you everything you need to know about HTML and HTML5 (the newest version). I try to go directly to the point and teach by example.

Who is this course for?

  • Beginners who want to learn web development
  • Beginners who want to learn HTML5
  • Anyone who wants to start creating websites
  • Anyone who knows HTML basics, but wants to learn more

What will you learn?

  • What is a website
  • How to create a website
  • Valid HTML structured document
  • HTML Basic Tags
  • HTML5 Tags

Meet Your Teacher

Teacher Profile Image

Lukas Vyhnalek

Microsoft Employee, Programming Teacher


Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: in this video, I should take you from complete zero. So from totally non knowledge at all Teoh html five knowledge so that you should be able to actually create html five files. Ah, and maybe make some simple, very simple website. Um, so, yeah, let's get into it. So before we start, I just want to say that discourses for complete beginners. Okay, So pretty much no person who has no experience with web development or with website creation is the great match for this course. Also, I want you to be I want you to have a willingness to learn. Obviously you are watching a hour or so long tutorial, so you probably have dad. And also, you should probably be realistic. You will suck from the beginning. At least it's like everything else in your life. If you if you go to gym, you don't start lifting the heaviest way to Derris, right? You start with those candle light dumbbells and and then you move on. Right? So even though I can promise you that you will not create the next YouTube in one hour Ah, but I can promise you that this might be a stepping stone The start on your on your journey to that development. Okay, also, I just want to say that in this course I will discuss no CSS. So CSS is basically a something that's used together with HTML five in order to create great looking websites. Ah, the CSS is kind of the how it looks. The part of the VEP and the HTML five is more like describing water. This. I will get into it more into details in the next capital off hours. Okay, so what will you learn? Ah, you will learn. Basically, what is html? Um how to create a vet page? Okay. And some sort of html five tax and stuff like that. So you will learn. Basically, the main goal of this video is to learn how to create a simple, very simple that bait using the HTML markup language 2. Basics of HTML: So let me actually start out by saying, what is the html five? So the html five is actually a hypertext markup language of what it means? Well, um, yeah, it's a markup language. You are basically. You can imagine it this way. You are telling the computer what? It's on your Web site. So you are telling him Hey, this is a paragraph. Hey, this is a heading. Hey, this is a image and stuff like that. Okay, So that's basically what HTM owed us. It's not a programming language, so you don't need any logical skills or anything like that. You just need your very simple common sense and and just willingness to learn. I guess you really don't need any meth or anything like that to start with HTML. Because, as I said before, it's just describing the webpage. Okay, you're just describing what the user should see or what the ah browser shoot should see. So, um, really, it's very simple. You don't necessarily have to be worried about some sort of logic or anything like that. So what do you need in order to get started? Well, obviously you will need some browser, but since you are watching this video, I assumed that you probably have some browser right. I would highly recommend using Google Chrome. Even as a Microsoft employees, I would highly recommend you use Google Chrome. Ah, you might use Internet Explorer. I don't know. Yeah, it's up to you. It's a good choice. Also bad. Yeah, even I do use Google Chrome and also bad. There is another product for Microsoft called Visual Studio Code, which we will use, and this is a great too. It's a great tool that you definitely want to want to use in order to start developing some Web applications. So with all of that being done, you can just go to coat that visual studio dot com, and it should take you to a page that look similar, like this one, and inside here, it can just simply download it for your operating system. It supports everything. Eso it's very easy to install. I will just leave that up to you. I think that you will. You are able to do this on your own, so feel free to pause the video and install the visual studio coat into your computer. Once you have done this. Let's go, Let's continue. So what? ISS an html file. Eso overall. Let me start out by saying, What is the page in the Internet when you type Google that's come into browser. What it extra shows you well, it's just a document. You can think of it as a as a word document, right? Whatever. It's just a document Indian network in the Internet and ah, html file is just a file that ends with that HTML. And it describes a website right. It's a special kind of formats for the website. Okay, you can think of it this way. And usually you get for example, index dot html side. And this HTML file is usually a you root file that, for example, if you type, uh abc dot com, the index dot html side, we'll actually show right. It will show into your browser and and I know yeah, it will be displayed and, for example, but you can have multiple of the sides, right? You can have multiple HTML files, for example. Another one can say about that. HTML. And if you type a b c dot com slash about that html. This file will be shown. Okay, so this is just a very basics off. What is html file and what a speech in the Internet. So html file is actually a page in the Internet. It's a simple Is that so? Let me actually start out by explaining the HTML deck. Syntex. So Ah, you usually type a tech describing some sort off element. OK, so on your page, what do you think? It's a element, right? If you if you look at I know what any block or anything like that, what is a element on the page? Well, element can be pretty much anything, right? You can think of it like heading paragraph image, I don't know, link in the navigation. Whatever, right. This is basically a element, and this element is described by some sort of attack. So the tag start with ankle break right and have a angle brackets and the name of the tech , and then it also needs to be closed right with this slash. So this is a closing tech. And in between those two tax, there is the actual element. So, for example, if you have a heading right, you you defined the tack as a this way. This is basically telling the browser. Hey, this is a heading. Then you have the content of the heading, so this will be actually displayed. And then you have the closing tag, Basically telling the computer Hey, this is the closing off the heading on. And next we will have some other element on. Sometimes you don't necessarily have disclosing elements. This is usually this is used most of the time, right? This, Syntex, when you have kind of bear, Tex, right, So use. So you have opening attack and closing tech. And in between, you have the content. But sometimes it kind of doesn't make sense. For example, if you have a image, you just want to have a opening tech and inside of the opening tag, he just want to define the source to your image file. So you don't have any closing tack for this, uh, sort of thing about? Don't worry about it. I will show you exactly in the goat how to do this 3. Learn HTML Code 1: All right. So let's get our hands dirty. I've prepared a simple folder where I have just one image and we will create our website from complete scratch. So I've got opened the visual studio code. You should be able to see something off the off this sort. And I will just open up this folder. Okay, in here. So averages go to file open folder, click on Dad. And right now, I will just open the folder, So I will just go to the bath that I just want to take. And inside here, I have defaulters so I can just click on the Selic folder, and, uh, I should have opened up the folder. Okay. There you have the image, actually, So this is a file explorer. Let me just go quickly. Fruity visual studio code. So you have the file Explorer, and inside here, it can create new folders new files up to. So you can basically work with this as a directory. It's pretty cool. Um, and then inside here, you have usually your file content. So let me actually start out by actually creating a new file. You can see this sort of icann right? here. If you click on that, it will create a new file. And you can name it however you want. I, for example, can name it index dot html. Okay. And if I hit Enter. I have a new index that HTM of file. And as you can see in here, it opened up the decks editor. OK, you can just get rid of this and you have the text editor right here. And also, you can notice that in the folder there is actually the index dot html file right here. And you Can it actually open the DUP with your browser? So if you go to open with and Google Chrome Derris, it's your index dot html file opened up in your browser. And right now, if you for example, type something or whatever and save the file, I usually use control and s right in here. You can see a dog. There was a dog. If I, for example, type something, I made some changes. There is a dog, and if I hit control safe, you can see that it is safe to Okay, So I very often do this. You need to save the file before you were low debate. Right now, when I reload the page, as you can see, there is detects that I just created. And you have basically created your first of that page. Yeah, it's a simplest that, but this is really not a webpage. So this is just the document in the Internet, right? So let me actually start out by just removing this thing so I can collapse the Explorer menu. Right? I can open and collapse and let me start out with what every HTML file starts with. And that's the HTML tag. So HTML and I have a extension in salt that automatically fails. Disclosing tack. Okay, so that's very cool. I have I spent a lot of time typing this, and usually you just want to use some sort of extension off this sort that will are to complete your tax. So this is a great tool. So you have a opening a CML and closing html tech. Okay, then inside of this, you have hate hat. Okay, hat and underneath You have a body like this. So let me actually describe what is going on with this hat. So in this head, you have some sort off information about the document. So it's not something that is shown on the page. Okay. In here you are just describing, for example, for the Google search to what are the key words on your page, right. You can also describe the title of your page. You can describe some sort of description. So the small text that is being shown in a, uh, in a search right when your pages on search, there is a small text so you can describe all of these things in here. You can also link another files like CSS files. JavaScript files in here. Um, so inside he had you usually have some sort off mate O data, right? Data about the file. So that's what comes here. So let me just start out by showing you the first stack that usually have. Did you usually have in a head, which is the title, and this is just the title that is being shown right here. Okay, so right. A d top of the tat. So you can type something like, Ah, hello world. And it will show right? If you say vesting and were loaded. Page. There it is. There's like hello world. Okay, so that's pretty cool, right? You can change this to whatever you want. Um, so that's just the first check that we will learn. But for the HTML pard, this had really isn't that important, right? The most important thing is actually the body. What is the body? Well, body is everything that you see in here. Okay? So body is the actual page that you actually see. And inside of the body, you can define a lot of elements. So, for example, we can start out by defining a heading. So you have aged one as a heading. It's a section heading usually eso, for example. You can imagine that when you create a block. Ah, you have the block title, right? So So block post title. Right? And this is usually an H one. So heading one. So this one is a title. Let me just type in here something and reload the page, and we should see title right here. So this is actually a heading, but usually you don't have just one heading on on the page, right? You can use multiple tax write off the same sword, right? So you can have multiple h one headings on on one with side, and they will be shown in in your browser. Right now, I've made a mistake. I forget to save the file before I reloaded the page. So you will make dismissing very often. So just make sure to go back safety file and were loaded page again There. This So right now, I just want to show you that we have multiple levels off these headings and you can think of it this way. When you have a page, for example, you have a block boast, and then you have some sort of suggested out of block boasts, right? Or, for example, and YouTube, you have the suggested videos, right? But what is the most important heading for this page is the title off the video that you are currently watching, right? And the other titles off those suggested videos are not as important. And you want to be able to actually describe this two D browser, right to say, Hey, this is very important for my page, and these headings are not as important. Okay? And this is actually ah, what I just did. OK, so this is not as important title, and this is very important title. So h one h two and you can go all the way to age six if I'm not mistaken. So you can just change the used to H free H four h five, um, age six. And let me actually try out h seven. So 86 and H seven. Usually the rule of thumb is that even though you have, yeah, H seven is not available. Okay, you have only you can go only up to h six. But usually the rule of thumb is that you, John, want to? If your website have needs more than these free levels off headaches, you should really think about Ridder. It's designed correctly, right? Usually when you need thes like heading of level five and heading off level six, you usually make your website too complicated. Okay, but let me just reload the page and see what happens. So if I just close this thing safe, distinct. Sorry. And we're low debate. You can see that the title and gets smaller every time. Right? So this is actually the H one. Okay? This is the age to we can maybe just type it in here, so H two free so on. Right? You probably get the idea if I just changed these some of these and reload debates. There it is. Writes five for free to one. Um, and also, we can notice that the h 70 last one his actually shown as a normal text. So that's another thing that I just want to demonstrate is that even if you create some sort off nonsense stack, the visual studio code will tell you by making it read. It will tell you. Hey, this is not an html five tack. But when you saved the page for a low debate, it will still be displayed. Okay, It's still there. Detects is still there, right? So there's nothing of that soared like an error or something like that, right? It will still be displayed. Cool. All right, So another one of these main block elements is a paragraph, right? Usually on your website. You need some sort of paragraph, some some sort of text. And what do you do? Well, you just create a new tech with B as a paragraph and just type. This is a paragraph, and you can save this thing and reload it. And you can see that there is a paragraph right a year, and you can just put a lot of text inside. Here is just as a paragraph. And once again, you can have multiple of these in here. Okay, So you can have Ah, one paragraph and then you can have paragraph two. Whatever, right? You can have multiple paragraphs on one page now. Having just a plain text is kind of boring, right? Usually when you take a look at websites, you can see that some parts of de text are bold, some off, Some are somehow else something crossed or whatever. So there is a cool stuff that's going on with the text, and you can actually do that in the HTML. So what you can do is define a tack inside over another one, and you can just put, for example, a b tech in here. And let me just put the paragraph inside of the B tech unless reload the page. As you can see, this text got bolder, right? You can see that This the sticks that's inside off this be get both and the other texas still normal. Okay, so db tag actually says D two to the browser. Hey, this is a b a bolt element, right? Make it make it bold. Ah, and another tag that does the similar thing is a strong And if I put this thing into the strong tech so strong opening, closing and let's just reload the page and dare it is, it looks exactly the same. But the meaning off the strong is actually you are telling the browser did This is very important for the website. So, for example, um, if you have a block, you could put something like the category or some sort of keywords into the strong tag just to say to the browser or to the Google dead. Hey, this is very important for my website. Use it as a key word. He will kind of, uh, do the assumption that this is some sort of keyboard or something like that, and your page might rank for, um, this kind of word cool. So another thing that you can do is make the text italic. So if I, for example, just copy paste this whole thing and make it italic So instead of B, I will just try it. I Ah, and close Etec. Let's save this thing and we're loaded. Derris! It's italic, right? You can see that. Another thing that I just want to say is that you can make it vault and italic at the same time. Okay, so if you put in here the bald tack and then he close it out and say defile very low debates, you can see that it is bold and italic at the same time. Okay, so you can do this however you want. Another thing that you can actually do is just make detect small. So, um, for example, when you have a block boast, usually you have some sort of title and maybe some image of the author, and then you have some sort of smaller text just saying, Ah, Wendy Post was published, right? Some sort of date. And you can actually use these small. Just make the text smaller, right? You can see that this paragraph to it is really smaller. Apart from this thing, right? Ah, you can also use these up attack So sup and you can notice the D closing tax is exactly the same as the opening. Okay, there's the only difference is ah with D slash And if I make it sub, you can see that it's kind of underneath the line, right? You can notice it. Ah, I can also make it supper. So be with the end off B s. Oh, if I just put it inside here, you can once again if you Sometimes you sometimes will make a mistake. And the visual studio code will usually tell you by just making d takes threat. And usually you just want to look at this thing and you can also look at the line above and at the end of the line above, and you can see that I just accidentally deleted this closing sign. So if I were low debate right, if I added it, it got blue again. So it's it's working again. But if I change this to S u B like this and reload the page, you can see that it's upward, right? It's above. So you can use this to write some sort of mathematical stuff into your HTML file. And yes, so these are just cool things that you can use. You can also use the Dell so deleted text. Let's see how dead would look like if I save this thing reloaded. As you can see, it's crossed, right? So that's also a thing that you may want to use sometimes. 4. Learn HTML Code 2: another thing that you definitely want to do and want to use in your HTML. It's a comment. You create this tag. Okay, so this is a common right. You can put it on multiple lines like this. And if you boot for example, this thing inside here, it will not be displayed on your website. Okay, so there should be just one title, right? Or I will just rename this to not displayed. Okay, so we will not see that right? There is nothing off this of the sword. Eso devil, Just Saudi browser, right? This thing. We'll just tell the Brian browser to Hey, don't execute anything that's inside of this. It's just a note from the developer, right? You can Usually you want to just put some sort of comments into your code. Just describing these sections off your website. So, for example, you want to put a comment saying that this is the navigation bar. This is the footer. This is the ah hero section. This is the slider or whatever I do. You want to describe your website, so I will just use this. You can put it on multiple lines. Obviously you can put it on one line to sing headings. Right? And you can also just put it in here just saying, Hey, this is a paragraphs, uh, paragraphs and sticks. And then you can put it also in here saying what we will learn next. And we will learn next the quotes. So you probably know what is quote, right? Just you Usually when you, for example, right a block or something. You want to quote somebody who set right some sort of famous quotes. So in order to do that, you just used the Q word as he quote. So this is a quote. And if I were loaded Page, you can see that this is a quote at Scandic. Ooh, quote ated. Right. There is a notation around it, and it looks very cool. Uh, if you have some sort of larger quote, So, for example, something like a a paragraph code you can put in here a block quote. So lock quote, right? What quote stack like this. Close this thing. And inside of this, you can say just this is a block quote attack and some other texts, right? You usually want to use this If you have some sort of paragraph off block, right? A large text off a quote. So right now you can see that it's just styled a bit differently. Okay, But it's essentially this is for the larger quotes. This is for just one sentence. Quote. OK, but it's as simple as that. Another element that I just want to show you is the, uh, end of line. Okay, so sometimes you just want to put something on the next line. Okay, so next line elements and ah, this thing is usually used if you, for example, have a paragraph and you just want to say just ah, first line something, right? Something will be on the first light, and then you want to put something at the second line. Okay, so you just want the line to break exactly at this point, right? There is often the case, right? It happens quite quite often. And in order to do that, you can just use DB are so the brake attack. Ah, you can notice that it's just opening, right? There is no closing tack with this one, and it kind of makes sense, right? Do you just have the opening tax saying two D browser. Hey, break the line here. And why would you need a closing tech? Just to say this is ready. Breaking off the line stops. It doesn't make sense. Right. So you have just the one opening attack saying this is a brake line. And if I were low debate, as you can see, we go on this first line, and then the computer kind of presses the enter, and we start out on the second line right with the second line text. So this is another thing that you may want to use. All right, so, so far, we didn't do any interesting stuff. These are just basics, right? You use this on pretty much every page. Ah, but it's not that kind of thing that you would do. Wow, override. Uh, the thing that's very interesting about the web side is the lengths, right? So, dealings, we will start with them right now. And when you want to create a new ruling, you just type a a as a link. And inside here, we just have detects. So, for example, it can just cite go to Google for click here or whatever, right? And if I saved the page and reload the page. Ah, it's just shown as a normal text. And ah, it really doesn't work, right? If I click on that, it doesn't work. Why? It doesn't work. Well, we didn't specify to the computer. What page to go to write this. Just go to Google Computer doesn't know. What would this Google right? He just, like, needs some sort of link. Some sort off you r l where to go to and you can specify it right here. So you can just type into the opening heading, right? So opening attack and inside here again, just type a treff equals something. Okay, so this is a very important thing. You will see it all the time in a website and inside here, it just type into the opening tag. You type something called a tribute. Right. So this is a attribute off the link, basically describing where this Linge will take you. Okay. And you can just type in here, um, https google dot com. And now right into into this thing right now. If I save the file, reload the page, you can see that it got blue somehow. So some sort of magic. But if I hover over it, you can see that my mouse actually changes. And when I click on Dad, it should actually take me to Google and Dairy are at Google. So if I go back, it should take me back to my page s. Oh, yeah, this is the actual ing. And you can link to your other Bages, not just to Google. So, um, let me just show you how you can do that. So inside here I will just type go to about page and inside here. I will just specify a file named about that HTML. Okay, save this thing. Analysts were loaded. Page, see how it looks like. So DeVry have it go to about page. When I click on there, you can see that the file was not found. Okay, so if I go back, we need to actually create the about dot html. So if I go back to the file Explorer and inside here, create a new file and I named this about that html hit enter, we get a new file. I will just create the Let me just say this is a about about bait. Uh, usually you definitely want to put the HTML Tech, the hitech and the body tech. Right? So this is not a valid html five page. I just want to demonstrate that this thing will be shown. Okay, So if I were loaded page and trying to sling again, there is This is a about Paige. Ok, so this thing, this document is being shown. Okay, so we can just linked to other documents. Ah, y a d a tech. Um, another thing that you may want to describe. As for example, you target. So right now. Ah, you can just opened it out, right? So if I go to Google, it opens up in the same tap, right? But what if I want to open it up in a new tab? So you can do that? You can once again, what do you think is when you want to open it up? It's a attribute off the link ride. This is a attribute underling saying that when you click on this particular link, it will be opened in a new tab. So this this attribute is called target. Okay. And this one once again, you need the kind of string signs so quotation. And inside here, you put where you want to open it up. And you just died this blank. If I'm not mistaken, it should be like this. So if I right now, we're loaded page and click on this laying it opens up in new tab. Right in. Here is our page. And in new tab, we have a Google. So this is what do you can do all or kind kinds of crazy stuff with this? All right, so so far we have done candy basics. But what would be a website without a image, Right. I don't remember seeing a website without any image. So let me just go here and typing here. The images. Eso let me just create a new image. As I said in the beginning of the video, the image doesn't have a closing tech, right? Usually you can think of it this way. If there is some sort of text going inside of the attack, it should have a closing tech. But if there is no text, it usually doesn't have a closing tech. You can kind of simplify this a little bit. Ah, so the image obviously doesn't have any text going inside of this right is just a image. And so, in order to actually kind of load some sort of image, we need to specify some sort of attributes, just like we did with the link. Okay, so inside here, we want to specify the path to our image, right? That we want to display a zay said earlier. I have a image dot J pack inside the folder. Okay, so keep that in mind, because we will use it right now. So I will just type in here as our C is a source. So the source off the image will be the image that j peg like this. And if I saved the thing and reload this Derris, there is our image. So we've got a image shown. Um, just like that. For example, what happens if I type in here? Some name off the image that is not in default? Her? So what happens now? If I reload the page there, you can see this kind of broken image. I can. Okay, So you can. Based on this, you can notice that there is something wrong with your image. And it wasn't loaded. Usually you made a typo somewhere around here. Okay? So make sure to ah, make this correct without typos. Um, another thing that you want to specify with your image is this is very important for the CEO part off your website. So search engine optimization is a all text. So alternative text. And this is basically you are describing the image in here. 40 browser. So because Google, I really cannot understand what is going on in a image, right? It's just too hard to do. So you need to help him out a little bit by just saying Ah, this is a person. Ah, you can add something, something else. Right. But basically, you just sell the search engine. What this image is all about in here, Okay. And if I were loaded, Page, you can see that this thing is not sure. Right. So this outs text is not shown. But if I, for example, changed this thing to something that is not there, right. So if the image is not non existent and I reloaded Page, you can see that the broken image Aiken stays there. But right now the text is being displayed, right? Because ah, the browser couldn't find this image. So he says, Well, I will at least shoulders through the sex so that the user can kind of imagine, uh, more would be there. Ok, So as I said earlier, you usually if you see something like this, that's a mistake. You want the image to be shown. Ah, about this out is basically for describing to the Google search. What is going on in the image? So I would just change this back, Say this thing we're load it and we are good. Another thing that is very often used in a website is some sort of table, right? You often see a table in a website. It kind of makes sense, right? You often you want to display some sort of data or some sort off whatever and you use a table for it. So I will just show you how to create one. So this is just telling the computer Hey, I want to create a table by you also need to specify the heading off the table, right? So basically described the Collins and, uh also the data. Right. So the body off the off the table, So in order to do that. You have a the age so table header or table had you can think of it like basically the head right? The the roll off off the head of the table, right? It's a simple is that inside the table hat. You have some sort of row, right? So you just describe it as a table throw D are okay, so you can notice the structure. Right? We have table inside of this. We have had and inside of the hat we have, dear. Oh, and inside of the hero. Ah, we have some sort of heading so d h as a table heading and inside of this Ah, we can have some sort of text. So heading one. Let's just say this, say, and you can just copy bays this thing. So copy based and based. And we should have, like, free things right here. So if I save this thing, reload eBay age. Ah, you should be able to see this. Right. Heading one, heading two, heading free. Cool about the table also needs some sort of data, right? So, underneath this D head right underneath the stag closing tag, you will create a body so d body basically saying that Hey, this is the body off the table And inside of this, you once again have a roast. But this time you have t d So basically table data cell. OK, so this is the one sell off the table. You can just say that. Ah, value one, right. You can call it this way. And if I just copy, phase this thing once again so that we have free values in here. Ah, you will able to see that we will create a new row. Okay, so if I save this thing, reload the page Ah, you can see right here that we have value on welly to value free. And this these are two headings, right? So it's very cool. Another thing that we can do is just copy paste this one row. Okay, so this is the one road that you can see in the stable, and we want to just copy paste it right underneath. Okay, so then we have two rolls inside here. If I were loaded. Beach. Now, as you can see, there are to the data rose. And if I, for example, changed this to ah, something else you can see that there will be a change, right? There it is. It's changed, and this is this just stays the same. So, um, this basically how you can create table? It's a simple is dead all right. Another thing that I just want to show you is that sometimes you can see that these things get quite large. Eso, for example. What you can do is if Ugo right here hover over this, you can see these small arrows, and what they do is it actually collapses this thing down. So if I click on there, you can see that these things change it right? You can see the D content is somehow hidden. There are these free dots so that I know that there is something in between these lines. And if I click back on this right, it gets opened up again. And I usually do this just to say some space on the on D file so you can just close everything up and you just know that there is a table. But you don't necessarily have to watch the whole content. You can just really, really quickly just go through the file and find out your sections in the file. So this is very useful. I do that all the time. Um, yes. So let me just go ahead and talk about another elements, which is the lists. So lists are a list that you won't You problem Know about right. You have two types. You have a gun ordered list. You use the you all is a A nor did list. And inside every list, you have a list item. Okay, So you can just say this is a item and you can have multiple of these, right? You can have one item 2nd 1st 4 and you can have, like, really, how many items you want. So right now, you can see that this is a list displayed as a list and the dare are a couple of items in their um so this is very cool. You usually want to use it if you want to. For example, in a block boats to usual, a cdo's key takeaways at the top of the block post. Right. Saying just it's a a Nordic list about the key takeaways from the boat from the post, another type of less that we have is a ordered list, so Oh, Ella. And once again, inside of this, we will have some sort of list items. So if I just put it in here, but this time they will be ordered. So this one is number one. And let's say that this one will be free and this one will be fourth, and this one will be second. But just the text really doesn't change The way it looks in here, right is just so that you know which item I am talking about. And also, you can see that there are these 1st 2nd 3rd and fourth added in front of this, right? I didn't write it in here. It get automatically added because I said, this is a ordered list. So if you have some sort off, I don't know, order list like, I don't know, like some results of some sort of tournament or whatever you want to use ordered list. Another thing that I just want to say is, sometimes you can see these things on web, and these are actually some sort of navigation links. Ah, and you can differently do that. You can just create ailing put districts inside of this thing and add the eh Trev to this and just maybe go to about HTML. And yet this is a valid thing you can do. Okay, This is a a thing that you can see on a lot of websites. Just a list item where you have links, okay? And dealing is working just fine. OK, so, um yes. So this is a thing that you can see very often. 5. Learn HTML5 Code 3: So far, we have talked about those basic building blocks. Right now, I will try to go to a bit more advanced stuff. Um, so things that you really will not see in your html documents. So let me just start out by telling you about a diff a death is a block element, right? You can divide elements into a block. So let me just create a new comments saying that this is a block elements and you can also divide them into a in line element. So in line. And what are the differences between these s O, for example, this block element will be displayed as a one block on your website. Okay, Andy, in line elements will be displayed as a kind of in line. Well, here. That's pretty good explanation, but it will be displayed as a part of a line. Okay, So, for example, if you have a paragraph Ah, and inside of this, you will have, like something like this is a text. And then you have a link inside of the paragraph saying this is a in line element, and then you have once again some sort of text, right? Let's save this thing, Liz. Reload. Ebates. See how it looks like you can see that it's just in line, right? It doesn't create a new block that didn't that would go underneath this right. You can notice that, for example, paragraph is a block element because when I create a new paragraph, there's automatically kind of added the end of the line, right? So something If I reload the page, you can see that there's automatically kind of break right It break these to a parts. You can think of it as a in line element being tied together and block element is a independent. Block off the upside. And why are block elements important? Well, usually you just want to divide your block or your website ensue. Different blocks. Um, you have, for example, a block saying that this is a header. This is one block on your website. You have a another block elements saying the saying that this is a article. Then you have another block elements saying that this is a paragraph in the article. So you have you can have different block elements inside one another, okay? And you basically usually divide de whole website into a blocks and, um and the way he do this is just typing. For example, a diff This is a block element. Ah, you can just put some sort of text in it or whatever, but did if basically have no semantic sense. So it basically, um, you really don't tell anything to the browser by creating a diff element. OK, so it's just a block element that you can use in order to style your website so you can change by deed if the way the website looks But you are not telling anything to the browser . Okay, so this is a def. Uh, you usually use that just a style things up. Okay, Another block element is, for example, a article, and this is a HTML five elements, So html five elements are very cool these days. They are describing the weapon in sort of a new way. Uhm, the article basically are telling the browser debt This is some sort of block off information, uh, in which the information is kind of tied together. So you can think of it as a um, for example, the suggested video, right? You have image, and then you have the title, right? And these two informations are tied together. So you should put this into the article. So if I put in here the image with the source off the image that J j back So this image right that we can show right here that we can see right here. And then I put, for example, some sort off age to some sort of heading saying this is John. It makes sense to keep these two things in one article because they are kind of tight together. I d are logically they are connected, right? You know that You are describing bidis heading. You are describing who is on this image, right? So you want to use the article whenever Ah, you have some sort off. You want to group some sort off elements that are tied up to each other, right? That have some sort of relationship between each other. Um, usually you can think of it as a block post. Okay, Block post on your website, Then you have a section section on your website. So if you type in here, section eso with this tax section. Ah, and close this thing inside of this, you can put a lot off other elements. And this section basically groups together, um, like some sort of articles, right? One group off articles. You can think of it this way. So if you think once again the block example, you can have once or some sort of category right in your block. S O. This is a section. The category is a section and inside of the category, right. You have multiple articles, Pride. And, uh, this is basically how this is how you can tell this to the browser. You are saying that Hey, this is a section that can have maybe some sort of heading. So maybe something, something like a very important heading. And you can say that this is a section about people or whatever, and then you can have a lot of articles, and these articles are on its own, describing the person. Okay, so if I reload the page, you can see just a lot of code. It really doesn't make any sense, because these section is really not shown right. There's really it's just some sort of hidden from the eyes, but it's there for the computer. Okay. Very cool. So these are two off the most important, in my opinion. Then we have another one's. One of them is the heather basically is a element that represents you can see. Ah, it's described right here. I would try to put this in more kinda simpler way. Um, you can think of it as a header you can think is a D header in your website. Right. The navigation bar on your website. Ah, usually you can think of it as a header. I recommend using just one header. Um, on ah, per page. Okay. So you can once again just close this thing, then you can have some sort off. Ah, some sort of logo. So image. Then you can have some sort of navigation inside of this. Okay, So, inside of desiccant, maybe type some sort of h one saying that this is the title of the page right title of the page, and then underneath you can have some sort of navigation bar. So enough, it's another html five element. Ah, that basically tells the computer that this is a navigation and this should be used for the main navigation on your website. You should use this only once on your website. Same thing, as with the other. Okay. And, ah, you should just say usually when you have any kind of sort of landing page or whatever, Right? A Dietz off of the page. You usually have demain navigation, right? The navigation bark with the links. Usually inside of the enough, you have some sort off on ordered list. And in the UN ordered list, you have some sort of list items. And as in in the list item, you have some sort off link. Okay? And inside here, you have, maybe, like, contact us about us page and other pages. Right? So this is how you would create a header in a website, right? This is the actual example that pretty much every page uses in order to create. Ah, the header. Right. Do you have some sort of heading? And then you have some sort of navigation, but that's about it. Okay. And this is how you can create. It's a simplest debt. Okay, then you have usually some sort of sections, and at the end of the page, you can have some sort of footer. So footer is that thing that it's usually at the complete bottom of the page. Okay. Complete bottom of the page. It usually have some sort of different color. Some different layout right on in there Usually have some sort off useful links. Terms of services, stuff like dead. But the footer is basically an html five element. And inside of the footer, you just want to put Ah, the Yeah, the foot of the page. Yeah. So it's really it's gonna is really intuitive. Um, Israeli intuitive to use. Also, there are another TSU off these elements. Okay. Ah, one of them is a main element. So with the main element, you just want to describe that this is the main part off your website. Okay, so if you have some sort of block and you have, like, some sort off, let's say just two sections in there with some sort of categories, so every just copy based this, right? So you have two sections. I will collapse it down with some sort off different types of block post. But this whole thing is the main content right off your website. You're just telling the browser dead. This is really the most important thing about my website. The hawk, the most important content on my website. So you want to put these sections inside of the main tack? Okay. And also, you can just say that there is some sort off, uh, other content usually used the aside stack. And this is the other html five tech. That usually tells you that this is not demain content. Right? So you have the main content. For example, with YouTube, you have the video, the common section, and this is the main content, right? This is the main content, and in the aside, you have all this in the sidebar. So these suggested videos are India side tag. Okay, so inside here, you can once again have some sort of sections, some sort of articles and other staff. Okay, So I will just put in here an article and usually once again inside the article, you can have some sort of heading some sort off image, right? And some sort of paragraph, for example, s o. B instead off. Oh, ah, like this. But yeah, but this is the main point, right? The aside is usually the sidebar, and Demaine is the main part of your rep side and usually at the top. You have the header and Eddie bottom. You have the future. Okay, so this is a, uh Okay, this is a actual layout that is often used with a lot off websites these days. Right? So I will just commended out right it in here. Just so you know. So, um mainly out of the page, right? This is This is used to describe pretty much every page the dearest on the Internet. Of course, there are exceptions, but usually a page ah, website have some sort of structure like this. OK. And last but not least, we forget about one thing which is the forms so often on the page. You have some sort of form, right? If you want to contact somebody, you have the contact form right there. If you want to write a comment section in the common section, right, you have some sort of input forms in there, right? So that you can write it down eso in here. We will actually create the ah deform. So in order to create one usually just opened and you have the open tack and closing tax or form right makes sense. We are telling the browser This is a form and inside of the form we usually have some sort off input. And if I saved this thing and we're loaded, should be able to see at the bottom that we've got a some sort of input in here, right? And you can right into it. You can dio pretty cool stuff. No. Well, not a school. You can just basically right. But anyways, you have this input, and you really don't have to do anything forward, right? It's already kind of pre defined. You are just saying to the computer Hey, please create a input in here and the browser will take care off everything off, actually, creating some sort off. Ah, like some sort of border around this thing and the thing that where the user can actually. Right. Okay, so this is how it can describe a input now. Ah, the usual user usually wants to know what he's writing. So you need Teoh. Also add some sort of label, usually, right, And the label can just describe what the input is all about. So for example, your name right? And, uh, if I reload the page, you can see that there it is your name, and you can just write it down. Okay. Cool. Um, and another thing in here that you can specify ISS D. Type off the inputs. So, for example, sometimes you want the type to be text like this. So then the user can write whatever he wants. So if I reload the page, I can write, I can write the letters. I can write numbers. I can write special special characters. I can write everything right, But if I, for example, type in here type number saved this thing and reloaded page, you can see that I cannot write text. I'm trying to what? I cannot. Ah, and I can write only numbers. I cannot write special characters. Okay, so this is very simple thing that can just prevent user from entering something stupid, for example, from a for a phone number, right? If you just say that the type is a number user has to put in number, he cannot put in text. Um, this is very important. For example, on a mobile phone, right? If you make a responsive website so basically website that then will be shown on your reps on your phone on your smartphone. This type is very important because if you want to enter a number, this type number will show a different keyboard. 40 User Dendy type text. Okay, so you will have just the keyboard where you have just the numbers, right, And this is very good for for the user experience. So you definitely want to specify whenever you can. Ah, what's type off input you have also another thing that he may want to use. It's just use a placeholder. So d plays older attributes. Well, basically, describe what is shown by default if you want. So, for example, enter your name. This is usually the sort of hint right for the user to know what to write in here, right? As you can see, there is the enter your name written and when I click, I can start writing something number. Yeah, so it kind of doesn't make sense, but you get deported, right? He plays older, well defined. What will be kind of shown some sort of hint 40 user. Also, you can define a default value by just typing value and then some sort of value. So, for example, I can say 1000 Okay, so 1000 will be the default value. When I reload the page, you can see the dearest 1000 written in there. And another thing that I just want to show is that when you use placeholder and value at the same time, the placeholder will not be shown. You will see only devalue, right? As you do right now. All right. Nothing that I just want to show you is that I will just put a little bit off space so that you can distinguish from these things. Um, I want to show you how you can actually create a sort of inputs off the type of radio button so often times when you have a website you want to pick from a couple of options, right? So if you have a input off type radio Ah, you will have this sort off button that you can click on, OK? And you can have multiple off the sick and have more of these. Um oh, my bets. So if I just copy based, he's a couple of times. Ah, you have free buttons. You should be able to see free buttons in there. Ok, there they are, right, and you can select Select them. OK, so very cool. And, uh, inside of this, you can pick the value so it can define the value off this. And this is something that will be used in your PHP script. So this form, you can define the action that will take place, and inside here, you should have something like a action dot BHP or some other scraped that will handle the information that when the user sends this for okay. Ah, and this value will be actually sent to this file so that it can handle it. Um, an inside here again just defined the valley. So for example ah, mail. Then you can just put a different value for ah, this radio button. And from this. So, for example, female and, um other, I guess. And, uh, if you're a low debate, you can see that this will not be shown. This is only for this kind of form to be sent with the form. Okay, so when you click on that, it will be sent as hey, you clicked on the radio with the value off female just for the script to know what you clicked on, actually, and you can once again at some sort of label underneath this. So if you add, just label saying male and then you put a ending line at this, so be air. Ah, break line. Right. Ah, you can just put multiple of these. So, male Ah, female and other. Ah, and save this thing and reload it. You should be able to see Ah, some sort off simple, very simple form where you can just clicked on right, you can click on and it will work right now. We can also notice that when I click on every one of these, they will be selected. But I want the feature off when I pick one. Ah, and deny pick another one. I want the previous want to be dis selected, right? So in order to do that, we can just give these inputs the same name. So, for example, name, gender, right? And just take this attribute and copy Paste it inside every single one of these. Right? So this is this basically says, Hey, this these inputs are in this one groove name, gender And if I were loaded page and start to click on these things. You can see that when I click on new one, the older one gets unsolicited. Right? So this is a cool thing that you can use. And last but not least, we have a button. So inside here, I have just a input. Okay, off the type submit. And we can just say that this will have some sort of value. And this will be, for example, saying just, um, send me Okay, so let's just close this thing and let's see how it looks like right there is a button that says, Send me Okay, so the value is actually shown inside the button. And when you click on Dad, it showed it actually sent the whole formula, right? This whole content off this to this action dot PHP file, and you can see that this file was not found because it doesn't exist. Bar um, you can see that it actually works it. It's send this thing out. Right? So that's one thing you can do and another another element that you can use the button so button and you can add the type. Submit for this one too. So types of mitt and you are just saying by this type, submit that the button will send this whole form. Right? Okay, If the type submit wasn't here, it wouldn't It wouldn't do anything. Okay. And inside here, you can just say, um send me button. Okay, So you have in this case, you have the extra content Britain inside here. You don't have the value tech. And if I reload the page there it is, sent me button. When I click on that, it gets sent once again. You have some sort of you can use different types. Eso, for example, a ver sets type s. So if I were low debates now Ah, type something in here and select something in here. Quick on the rest of button, you can see the deform got reset, right? Right. It's sort of a magic. If I click on the button, it got reset. OK, so I can just change this one to resets. And yes, So this is just a cool thing that you can do. So Dad is actually about at 40 html. Okay, so there was a lot of information. Feel free to watch the video again if you don't understand something. If you missed something out. Ah, feel free to do so. Feel free to write your questions down below. I will try to answer them if I can. And I will also give you a bit of a preview for what will come in the next lecture that will be on CSS and I will show you a little bit of a preview off what we will do, so you can. What you can do in HTML is type a style tech. You usually put this before the body detect. Okay, so in front of the body tech, you can put a style tech and what he can do in here is style the whole document. So we can just target some sort off a element, right? So this body element, then you have this curly brackets, and inside of this you can define all kinds of crazy stuff so we can just say that color will be green. Let's just save this thing and reload the page. There it is, the color off the text is green. OK, you can say that the background color so background color will the black. So let's just go with black. Let's just save this thing reload it. And there you go. You've changed the color of the of the page to black one. Um, you can target different sort of elements. So we can, for example, say that the h one heading, We'll have the color off white Savana so white like this. And if I save this thing, reload the page There it is. Thes h one headings are right, right? And you can change so much more things, right? Not only colors, you can change the way it looks. You can, for example, say that every image we'll have do you with off. Let's just go with 50 pixels so it will be very small. Let's just say this unless reload the page. There it is. These images get really smaller, right? Ah, lot of stuff. You can really change a lot of stuff. This is actually the styling off the whole web side so that it looks good. This is the actual magic that you probably want to learn. So ah, feel free to hit the subscribe button just to stay notified. When I released this new video talking about this thing and yeah, if you like this video, feel free to hit the like button for more of these, Subscribe and I'll see you next time