HTML And CSS For Beginners

1. Introduction: Hello and welcome to a new class. This is HTML and CSS. And basically HTML stands for hypertext markup language. And this is a very easy language for describing the structure of a webpage. And if I want to learn programming or coding, I will start with HTML, since it's the most simple and straightforward language. Now I'm had Eunice, and I'll be your instructor for this course. So let's start with the outline. So what are we going to covers? So the topics for this class are some basics about the cell and some predefined tags and so on. We also have attributes. And then we're going to talk about styling and formatting. Then we'll move on to length images less and tables. And then finally, we are going to learn how to let our CSS file to our HTML. And then finally, we're going to end up our class with talking about input types. So this is it. And hope you enjoyed this class. See you the next video. 2. Headings: And now this is our Visual Studio code. Let's go ahead and click on file. We can see here we have the extensions and began add some extensions. For example, we can HTML. I already installed some of them, however, this is HTML CSS support might be useful. We also have this one. And finally, I'll download up and, and browser just to view our HTML code and our browser and install. Now let's close this extension and start with our code here. So for example, let me just create a new file. And this file list name at first, the HTML. And we're good now, I open this, see first HTML here. And how can I write my first HTML code? I can simply write STM n and go to HTML five restaurant, and this is our first HTML code. Now let's suppose I want to view this code. I can simply right-click here and append in default browser. And then this is our first page. It is an empty page since we didn't add anything till now. Let me go ahead and just explain a little bit about the structure of this HTML code. So the first thing we're going to notice is this DOCTYPE, HTML, and this indicates the document type. And because we are writing in HTML, we are going to set it to HTML. Now the second thing is HTML. We open the opening tag. So this is our HTML code inside the opening and ending tag. And then we have our language. We can simply add this language, and in this case we are using English. So EN indicates English. Now, whenever we append at our tag, we can simply write HTML. And this is our opening tag. Now if you want to write our ending tag is the same as our opening, but we will add this forward slash. And as we can see, the structure of our HTML code is pretty straightforward and simple. So inside our HTML we have two main tasks. So the first one is the head. And inside our head be have our title, then we have our body. And here we are going to write our code. And for example, I can write a lope. And if I just open this in default browser, I can see toward low printed here. Now, let me go back here. And so this is basically our body. And here we are going to write everything we want. And let's suppose I write this hello and a usual text or a small size. For example, when I write it in, for example, like a title, I can simply use the heading. And this will be at one. And if I press Enter, I get at one. And in this case, if I write hello, run this. I'll get this big hello. Now, actually we have so many headings. For example, X2 will be smaller. And of course, h3 will be smaller also. And let me just check it here. So up and in different browser and we get this one, this is H2, and this is edge three. And actually we only have six headings. So if I write x, I get that right. Hello and stubborn and press Enter, nothing will happen. We don't have a reserved edge seven world. So if I just, and thus we are going to get this small Hello. And this is, it basically follows the headings as we can see as we go higher and numbers, the size of our title or our heading would be smaller and smaller. And this is basically, so this is our first HTML code, is very simple. However, it will get much more complicated. And our next videos. So just stay focused and see you. 3. HTML Basics: Now, after writing our headings, we can start with a bandgap. So let's suppose I want to write here, I can simply write b. So this is a paragraph and I am going to write, my name is Eunice. And if I go ahead and open this, we're going to get Hello. My name is had units. Now let me just write another paragraph and I can simply write here, this is another paragraph upon it. As we can see, we are going to get two different paragraphs. However, if I simply write here and append, we are going to get them, all of them at the same line. So if I want to start a new paragraph, I will simply close the first one and up. And as you can see here, so this is because in time of the first one, and this is the opening tag of the second one. Now, let me just delete these and just finish this. And now let's move on to another thing. And this is the link. So how can we add a link to our HTML code? So the first thing we are going to write is a and then press enter. We are going to get this. And if you don't get it, you can simply write it. So a h reference, and this is the abbreviation of reference and equal to. And as you can see, we have these here and we should write our link in these conditions. So let me just go to Google and grab this link, for example, and bases here. And if I simply, I can simply write here, this is a Google link. And open it. We are going to get Hello. My name is head units and this is a Google leg. So if I press on this link and it will automatically open this link or Google Photos, as you can see here. And this is how we can create, as you can see, just go back, and this is how we can create our link in HTML. Now let's move on to another basic concept and that is to add an image. So as you can see, if I want to create an image, I can sub-divide IMG and turn. And this is our opening tag inside the object tag. As before, we need to add our source two, this is the source of our image. And let's suppose I want to go back here and Google Photos. So this is an image. I can simply copy this link. And Long, but we'll work it out. So this is our link. If now I open this, we can see that we are going to get this image. And we learn how to adjust the size of it or the length and width of this picture later on. But for now, this is how we can just add this picture and our HTML code. Now, let's go back here. So let's suppose I want to create a button. And in this case, I can simply write button and, and so this is our button and I can simply write, for example, click me up in this. And we can see here we have a button that says Click Me. Now, it doesn't do anything to Now since we didn't add anything, if I press this button, nothing will happen. Will simply see that it changes a little bit but goes back to normal and nothing will appear on the screen. And because we didn't add any code to this button, let's go back to our HTML code and let's start talking about less. So an HTML we have two types of list. We have the unordered list and an ordered list. So let's start by creating an unordered list. So let me go ahead and delete this and start with a heading number two. And this is an unordered list. And how can we create an unordered list? We can simply use the initials you and, and this is our list. Now, how can we create items and decide to slash sense? Whenever we create, whenever we, whenever we write u l, this is our empty less than now we didn't add any item. So whenever we want to add an item, we can simply write list item. And it opens up a tad. And inside these two times we can create our item. So let's suppose I went on right phone. And the second one will be laptop. And this third will be a watch. And now if I just open this, we can see that this is an unordered list. And we have three items, phone, laptop, and watch. Now let me go back here and let's create another list. This is, this will be an ordered list. And in this case, let me just write here etch, do also. And inside this edge to L, going to write this as an ordered list. And how can we create it? So, oh, And as usual, and we can simply add our elements here. So the first element list item as usual, and let me write the same items as before. So we have found, we have laptop and we have Watch. Now, let me just open this one more time. And this is an ordered list. We have three, actually three items and they are numbered from one to three. Now, another thing here, if, for example, I had ally and let me just a bottle. And this case, we don't really need to just open this every time. We can simply go back here and just refresh and you can see it here. But I think it's easier. I just opened up. But whenever you open all of these, this will be so messy here. So just updated by refreshing the page from above. So this is basically for the unordered and ordered list and HTML. This is how we can create them and create items inside each one of them. So this is the end of this video, and the next video we'll discuss HTML attributes and see you then. 4. Attributes: Now let's move on to attributes, and we have seen some attributes in HTML. So for example, when we wrote A and press enter, we got this HREF. This is a hyperlink hyper reference. And whenever we write, for example, let's try HTTP and, and google.com. And if I open this as before, that's just write something inside this. Say for example, click here. And let me just go back to Google and run this. We're going to get Glick here. And if I click here, it will take me automatically to Google. I can search for anything I want here. Now let me just delete this and this is our page. And let me just go back. So this is an attribute. Now, another attribute could be the title attribute. So for example, if we are writing a heading, so let me just delete this. And now we have some space. So let suppose I want to write hello world and hello world inside the one. I can add in the opening tag here. A title equal to. This is a header for example. And notice if I just open this, nothing will happen. I just simply receive hello world. However, we can use this title later on whenever we want to call, for example, this header or use it in another place. So this is another attribute. Now for example, we also have the width and height attributes. So whenever we are adding an image to our HTML code, we can simply adjust this image. For example, let me just go back here and notice here we have this image. Hello, let's copy this link and let me go back here. Image. So the source will be this. And of course I can add an alternative, I'll do it later. But for now let me just add the width and height so I can simply type. Let me just run this first to see how this picture look. So it looks like this. It is very big. So if I want to just adjust this, I can simply write that. I want the height of this to be equal to 600 and the width to be equal to 400 in this case. And let me just go back, refresh. So this is our image now. And you can notice that it gets smaller. So we can adjust the width and height as, as we want. So for example, let me just make it square by three hundred and three hundred. Go back. Run again. And this is our image now. So this is it for the alternative for, I'm sorry, for the attributes height and width. Nonetheless, thing we are going to deal with is, for example, suppose I have this one and we have a title. For example, if I just want to write one word, I can simply add here, hello. And this has a title, it will work correctly. Nothing will happen. If I go ahead and run this, nothing will happen. So we just have hello world. However, if I have a two letter or two word toward title, for example, hello world, I cannot add this to a single title without quotations. So as you can see here, this is an orange and this is the sky blue. So it is surely not one title. So to deal with that, I can simply add mutations as we did before. However, if I have just one word, I can simply added without adding conditions. And the last thing I'm going to discuss in this video is the bold. And in this case, let's suppose I have a paragraph. I, I am the uranus and I wanted to be an boat. I can simply add the be here. Sorry. Let me just add it as usual. And I'll get this. However, I ended right here. So and being up in this, just as we can see here, Chaim had units. This is in both. Now let's suppose I just want my name to be in bold. I don't want high IM and you want them to be normal. I can go back and just open this, be on ad units and close it after this up and this one more time. Drank. As we can see, we get head units and bolt. So this is useful, for example, if we have some specific words that we need to highlight, we can simply add the bolt or be opening and closing tags. And this will do the job as we can see here. And this is it for the attributes. And with that being said, this is the end of this video. See you in the next one. 5. Paragraph: Now let's focus a little bit on the paragraph. But first of all, let's suppose we have some headings and followed by some paragraph and the body. So for example, let's suppose I have the heading one. And inside this heading we have this heading one. After that, let's try it. Words are in the paragraph section and I can simply write, this is the first paragraph. Then after that, I can write this as adding two. Then another paragraph, this as the second paragraph. And lastly adding three. I'm sorry. Let me just adjust this. So Heading three. This is three. And finally, this is the third. By now that we have brought this. Let's just open it. And as we can see here, we have this as Heading one. This is the first paragraph, heading to second paragraph and heading 3, third paragraph. Now let me just go back here. And as you can see, there are not separated. The they are just followed each other, they are following each other. However, if I want just to separate them by a line, I can simply use the EHR, and this is a horizontal line. So if I use HR between paragraph one, paragraph two, paragraph three, run this. I'll refresh it. I can see that they are now separated by this horizontal line. And let's go back to our code and work with something a little bit different. And this is the structure of a paragraph. Now, let's suppose I have a paragraph and inside this paragraph, I have this is the first line of the paragraph. And then another paragraph. And inside this we have this as the second line of the paragraph. Let's just refresh. And we have two lines. So this is the first, second and everything works normally. However, let's suppose I have inside this. Let me just now, let me just get this and pasted here as we can see. So we have two lines in our HTML code. This is the first line and this is the second line. However, if I go back to our browser and run this, we can see that they are on the same line. So this is the first line of the paragraph. This is the second line. However, they are on the same line. So notice here that whenever we have one paragraph, everything we write, even if we just add some lines, they will be on the same line in our browser. So we can see that they are here on the same exact line. And actually the number of lines in a paragraph depends on the size of the browser window. So for example, if we resize our browser window here, let me just to the left a little bit. And we can see that we have now two lines. And this is the maximum that we are going to get. So we have two lines. If we just resize our window. Now, if we want them to be on separate lines, we can either work with different paragraphs as we wrote before. So for example, we have this paragraph and the other paragraph. And let's just refresh. We're going to get two different paragraphs. However, we have another method that we are going to use here, and this is the BR. And let me just write, for example, if I want this to be on a separate line, I can simply write BER and then close it here. And as we can see, let me just run. And we're going to get as the second line of the paragraph. And this is on a separate line. So here we missed this. And let me just delete this just to make it more simple. And the this paragraph from here refresh. And you can see it now that we have this is the first line and this is the second line on different or separate clients. Now, the last thing we are going to do is to work with the Bri. And this pretend preserves both spaces and lines. So here for example, if I add some spaces here and go back, refresh, nothing will happen. So the spaces are not preserved whenever we use DBR. That however, if I use the pre, for example, let's suppose I have Bree here. And inside the supreme. Let me just write something. For example, I have this line here, so this is the first line, and then this is the second line. However, it is on the third line actually. So we have an empty line here. And let me just add some spaces. And then let me write here. This is the last line. Now, let me just go back to our browser. Refresh. And as we can see, so we have some spaces here, here, and here. And as we can see, we have an empty line. So whenever we add an empty line here, it will be on our browser. So this pre will simply preserves all of our spaces and lines whenever we write something in it. So this is it for the paragraph. These are some general information and we can always dig deeper into it. However, this is just the introduction of how we can use paragraph and how to adjust our paragraph the way we want. With that being said, this is the end of this video. See you in the next one. 6. Styles: Now let's talk a little bit about style. And for every component, for every tag we can write its own style. Now we'll dig deeper and to start, whenever we write our CSS. For now, we can simply write some simple styles. So suppose, let me just delete all of this. And let's suppose I have a heading and a paragraph. So let's suppose I have H one and this one, this is a heading. And then it will be followed by three paragraphs. So the first paragraph is blue, the second one is red, and the last one is black, for example. So black. Now if I open this and as usual, so this is a heading and blue, red, black, However, they are all in normal color and the default color which is black. And let's suppose I want this letter of this word to be in blue and this word, which is read to B, actually in red and displayed will be normal. So let me go back here. So the first thing we are going to do is to specify that we need a stylus. So inside the paragraph, inside the opening tag of the paragraph, I can write style. And it will be equal to open the quotations. And I want the color. So it's that simple. So the color will be blue. And as you can see here, this is a box or square indicating that the color is blue. If we want to change something, I can simply press here and we can change. So let's suppose I want, I wanted to be a little bit darker, so I can go back here or a little bit lighter here and so on. Finally, to change the color, I can also change it from here. So here we have our colors. And as you can see, for each layer we have a specific code. And for now let's stick with the blue. So I can simply write color will be equal to blue and I'm sorry, he's not equal is the column. And for the red will do the same thing. So red will be equal to color red. And we good. Now, if I go back and update this by refreshing, will get blue and red, n different colors. And black, which is in the normal color and black. Now, let's suppose I want to change the size of this. I can simply write, let me write just Beck. And this tile that we are going to choose is equal to open the mutations. And we have here font size, as you can see here, enter. So defined size will be a. Suppose I wanted it to be 50 pixels. Refresh. We are going to get big and 50 pixels instead of the normal. And as you can see here, if I want the black Also, I can simply also, right? So we need the style equal to font size, equal to 50 pixels. And refresh. We're going to get black and big and 50 pixels each. Now let's suppose I don't want to bankrupt canon of this browser to be a white. Let's suppose I wanted it to be a sky blue or powder blue. I can simply write inside the body. I can add style. And inside this type, we can add the background color. As you can see, we have the background and color. I'm sorry, we need to add it here so there will be equal to, as you can see, we have powdered blue, we have piloted was, and we need the powder blue. And let me just go back, refresh. So we can see that the background current now is powder blue instead of white, which is the default. We can also change the font family, or for example, we don't want it to be normal. And suppose I want this blue, I want to change this font family to burden, for example. So inside the style, let me just, let me try it with the black, for instance. So inside the plug I can add style. And inside the style, I want to change the font family. And we have a list of all of the families that we can choose from. So we have area for Daniel, Suppose we need this. And if I go back here, run, we can see that this font is different than this one. And let's choose another one. For example, for the heading and style. And so this time we have font-family. And we are going to try this. And Korea for example. So we have and new and go back, refresh. And this is a heading and it is written in Korea. Font. Now can even change the font size. Instead of writing 50 pixels, I can change it with percentage. So for example, I can add to a 100%, go back around. We can see that this is a little bit smaller than before. However, if I just add, for example here, 100% go back ground, we can see that this will get much quicker. So we have two methods too. Our font size, either by specifying the pixels or by specifying the percentage of increasing the font size. Now, notice that whenever we write something, now it actually ML code here. It will automatically be left-sided. So as we can see here. So this is the adding. Suppose we want to change the position of this is this heading to decenter for example. One way to do that is by adjusting this from at one. So let me just delete this. And we need, instead of writing it on the left, I can add in the style, the text aligned. So text aligned BY needed to be at the center. Go back, refresh. You're going to get this as a heading and it is at the center of the line. Now we can do the same exact thing for every header are every paragraph. However, if we want all of our code to be centered, we can simply add ND style. Here. We can add text align, I'm sorry, in the study, in the style of the body and center. Go back and we're going to get all of our components or, or Oliver paragraphs and headings centered at the center of every line inside our browser. So this is it for the styles. It is a small or a specific idea. And we are going to discuss it further more in the next videos when we are going to talk about CSS and how to write our CSS code. But for now, we just take this as an introduction. And with that being said, this is the end of this video. See you in the next one. 7. Text Formatting: Now let's move on to text formatting. And we have already talked about the B or both. And this will just make discrete, just make our paragraph or heading and bolt. So let's suppose I have n my body. Just, let me just delete these and the style and wanted to be by default. And let's suppose I have the paragraph. This is a Bolt, Bolt. And in this case, if I wanted it to be bold, I can simply add the b tag here. Let me just copy this and added to the end of our tag and open this. We can see that we have this bolt and bolt. Now let's go back. And we also have another opening tag and this is strong. And they are both actually the same. So strong. And inside strung this as strong, as strong does or just refresh it from here. We're going to get this board and this is strong. And as you can see, they are the same. And we can use either of them and they do their job. Now, let's suppose I want to write a paragraph and Alec, I can simply start with opening the tag I. So we have the paragraph I. This stands for metallic and this is an italic. Now let's go back, refresh and we are going to get, this is an italic and as you can see, it changing. Now we also have another thing that is similar to a dialect, and it is the EM and stands for emphasize. And this text, as m sized. Go back, refresh. And we are going to get this tax is emphasize. So this is a very similar structure to the delegate. And as we can see, we have both and strong. They are both similar. They are metallic and emphasized, and they are also similar. Now we also have small. So this indicates we want a paragraph to be small. And let's suppose I want to write it using small. So I just simply write small and open the tag. Inside this tag, we can write this as a model text. Go back, refresh, and we are going to get this small text. However, if I compare it to a normal tags, this is a normal text. Go back, refresh. We are going to notice that there is a difference between these two texts. So this is the normal and this is the smaller. And of course, if I want to highlight something, let's suppose I want to highlight this normal. I can simply use the mark. So I want to highlight Normal inside our paragraph. I can add mark. And then inside this mark I can add normal than Refresh, we are going to get normal highlighted by yellow. So the color yellow is by default. And we also have the d and that, and in this case, let's suppose I have my favorite color. So into scientists paragraph I have my favorite. The other is blue. And let's suppose I changed my mind and I want to delete this and try it red. And if I go back and run this, we can see that we have my favorite color is blue, red. And suppose I want to delete this, so I just add a state line here, horizontal line on the blue. I can simply use the del keyword. And in this case, then. And inside this delta, we can add the blue. Go back, refresh, and we're going to get blue. And as we can see, this, like it's deleted and we change it to red. Now let's move on to another thing. And this is when we want to underline something. So we can use the ins and this represents inserted or added text. So for example, if I want to underline the favorite here, let suppose I want to underline the color. Lets go back to our code and undermine underlying discolored by using the ins, ins. And inside this, we can add our color, go back, refresh. And as you can see, we have color underlined by using the Ion as tag. And we also have the subscripted type and sub is the abbreviation of the stack. So whenever we want to use it, let suppose I want to change, or let me just create another paragraph. And inside this paragraph we have this is subscripted text. I can add here sub and inside this sub scripted. And then followed by text. No back. And of course you crash. We're going to get this as subscripted tags and this word is actually subscripted. We also have the super scripted. And in this case, let us suppose that we have something that we want it to be. For example, ten to the power of three. So unscientific paragraph instead of writing ten to the power of three this way, go back, let's go back and run this. We're going to get ten to the power of three hours. I can use sub and Intel three here. Let me just adjust this. Go back. And we are going to get ten to the power of the this way. And we can also use the subscripted, For example, if we are working with the same, for example, mass for different objects. And let's suppose we named them m1, m2, m3. So instead of writing them this way, inside this paragraph, we have, um, one. Instead of writing this, this way and getting M-one like dense, we can use the sub and add one here. And outside the south we have our mass m. And let's just run this. And as we can see, we are going to get m1 display and looks nicer. And we can understand it better when driving something that needs to be adjusted. So this is a general idea about text formatting. We have a lot of formats and we can use them whenever we want. However, these are the most important ones. And with that being said, this is the end of this video. See you in the next one. 8. Quotations And Citations: Let's now discuss some conditions and citations. So first of all, if we want to just write some text inside some quotations, let me just delete this. First of all. And let's suppose we have our paragraph and inside this paragraph essay that Brian set. And we want to state what Brian has said inside quotations. So we can simply write, let's suppose we want to write, this is number one. And to create a quotation, we can simply use the queue keyword. And inside this cube, we can add whatever we want. So let's suppose we want this is number one. And go back. Run. Brand said this is number one. And as we can see, these are added quotations. Now, let's suppose we want to code something and we can use block code inside. In this case, for example, I can use a block code. And inside this block code we can add. For example. You can see that this is not the only way. And we're using this block code. If I go ahead and refresh, we can see that there's a little bit to the right. We have some space here, and this indicates that we are coding something. So this is not our words. This is another person's world. Now let's suppose we want to add the citation. We can add it here. So inside the block code, we can add site, and inside the site we can add the URL to the code. So HTTP, something, I don't know. And I think that the US that is used for a URL. So this is it for the block code. Let's move on to another thing that is the address. Now whenever we want to write an address, we can use the address stack. So address and inside this address we can write some information. So the first thing we are going to do is to write our name. So how the US, and then if we want to just jump aligned, we can use DBR to jump. And inside the second line, we are going to write the, let suppose the email. So Hadi Yunus at and think, oh, that support Outlook.com. And and after that we want to write, for example, our address. So address here. And finally, after that, we need to add our location. So let's suppose USA and we are, now we're done. We can go back from this and as you can see, this is our address. It is an italic. First we have our name, email address, and location. And this is it for the agoras. Let's move on to another thing that is the abbreviation. So for example, if we want to talk about the World Health Organization known as h2, we can use it like this. So inside this paragraph, we can say that the WHO was founded in 1948. Now if I just run this, refresh our browser, I will get this without anything indicating what is the WHO. Now if we want to indicate that the EU is the World Health Organization, I can add a BBR, and this is the abbreviation. And the title will be World Health Organization org, mediation. And inside this we can add, OK. Now let's go back here, run this. And as you can see, we have this rho and we have some starch down underlined. And this indicates that this is an abbreviation to something else. And this is the World Health Organization actually. Now regarding the image, let's go back and take this URL. So we have a URL of an image that says hello. And inside this image we can create here IMG. So first thing we are going to do is to write the source of this image and we have our source. And after that, let's just adjusted. So we can write that the width will be equal to 200 and the height to be equal to 250. And in this case, let me just go back before doing anything, refresh the document and we are going to get Hello represented like this. Now let's add some citation to this. So let's add this is hello. And inside our code, following, imagery can write a paragraph. And inside this paragraph, We need to site. So we are going to add site. Inside the side. We can add the, what this image is about. So in this case, we are going to simply add hello. And the maker or creator of this image is unknown. So now let's go back hundreds. And as you can see, we cited that the title, or what is this image about? And in this case it is, hello. Now we can also add here an alternative. As we can see, we have about what it is and t. So in this case, let's suppose. If something occurred or an adult was generated from this URL, we are simply going to replace it with this word hello. Oh, let me just add a picture that says hello. And in this case, let me just write something here just to make this URL invalid. So I like the extra letters. Go back and run this. And as we can see, this picture or this URL generate, generates an adder. And we are going to use the alternative. And in this case, it is a picture that says hello. And as we can see, we are going to get a picture that says hello and set up the picture itself. Let me just adjust this. And now we're good to go back run. We're going to get the pictures since now the URL is valid. We also have attack that covers represses aligned. And in this case, if we want to, and let's suppose we want to reverse this line. So we have a paragraph and spiral, I'm sorry, let me write it down. And we have the paragraph. Inside this paragraph, we want to reverse the sign. So this is a line. And to be written from right to left, instead of writing it from left to right. So now let's go back. Refreshed, nothing will happen. We are going to get a simple line, and this is a normal structure in line. Now let's go back. If we wanted to get it from left to right, we are going to use the video. And in this case BD. And the direction is d, l, So right to left. And if I copy this, paste it right here and run, we are going to notice that this is the same line but written in reverse. So if we want to read it, so DES is a line and it would be written from right to left. Now, this might be useful when writing some strings or writing some integers, and we want the inverse of them. So instead of having to write a for loop starting from the ending point until the starting point, we can just invert a inverse time and start working with them this way. So in this video we introduce the block code, address, abbreviation AB, IRR, and of course the site and video. And with that being said, this is the end of this video. And the next one. 9. Links: Now let's discuss length mode. So first of all, let me just write it one more time. How can we access a link or how can we add link to our HTML code? So inside our paragraph, we can simply add a link by using the h reference, I'm sorry, inside our a. So here we have the link. So let's suppose I want to go to Google so that she's EBP HTTP, the column forward slash twice, we will get. And if I add here Google, let me just open this. And as we can see, we have Google. If I press on this word, we are going to go automatically to google.com. And in here we can search for whatever we want. Now let's go back and to our code and start discussing how can we change this length or what to do with the slave. So the first thing we are going to discuss is the absolute versus relative URLs. So whenever we write HTTP, this indicates that this is an absolute URL. So this is a full web address, and we are adding it to the hyper reference attribute. Now, sometimes we have some relative URLs, and these URLs are basically a link to a page within the same website. So for example, if we have, let's suppose we have Google.com and inside Google.com we have images. So we can simply write a URL that takes us from Google to Google images without even writing the HTTP. This, we can just simply write Google.com images and it will work fine. Now, another thing to think about is the color of the link. Now, as you can see here, the color of the link is actually blue first of all. And then let me just change it just to see difference. And inside, let me name it Google with the lowercase g, just to change it, refresh. And as you can see, this is a Google. Now, if I want to change the scholar, I can go back here and add an hour style here. So we have style and the colour, for example, we can change the color to blue and we are going to get this blue. Let's suppose I wanted it to be red. I can simply add red, go back, refresh. And this is our link now and read. So it is basically the same thing as a paragraph. Even if we are dealing with a link, we're going to do the same exact thing as before. Now, notice here that whenever we are writing a link, we are creating a link. We have this line here. So one way to remove this is to simply. Right and style. We need text decoration. So we have text decoration and we needed to be nine. And now we'll go back and run this. And as you can see, we have no line and we already removed the color here. So we are going to have the default color, which is a little bit like purple. And if I press, predict me as before, nothing will change, but this line will disappear. Now, if I press here one more time, not just that, we are going to up and google.com in the same window or in the same tab and the window. So for example, I wanted to open this document in a new window or a new tab. I should specify it. So here comes the importance of a target. So instead of writing this, simply writing the link and just writing Google weekend specify the target here. So target will be equal to, we have 44 examples, so we have the self, and this opens the document in the same window or tab as it was cleaned. So this is the default, and we also have the blank and this opens the document in a new window or tab. We also have the parent of a dopants, the document in the parent frame. And lastly, we have the top and it opens the document in the full body of the window. Now let's suppose we wanted to open a new window. In this case, I can use the blank, so I will use blank. Go back, refresh, press. And as you can see here, I always open a new tab or a new window instead of opening it and the same window. So using this, we can still have our main page. However, we also have the link we are referring to on another window or tab. And let's go back here. Now, let's suppose we wanted to add an image, and whenever we click on this image, it will take us to another location. So we already have an image here. So this is hello. Let us copy the link and work with it. And whenever we press on this image, it will automatically takes us, take us to Google.com. And in this case, one way to do that is to up and as usual, so this is the a hyper reference. And inside this reference, we are going to write google.com. However, instead of adding Google or writing Google, we are going to add an image in this case. So IMG, as usual. And inside the source I am going to simply and this image. So let me go back here and drown soon. Notice that now we have an image and whenever we press on it, it will take us to google.com. So let's just adjust this so the height will be. Equal to 40, for example, and width equal to 30. I think it's fine. You're back R1. And as you can see here, we have a low. Whenever we press on it, resonate, it will take, takes, take us to google.com. Now let's go back and let's see now how you can use a link inside our HTML are our main browser. So let's suppose we have some examples, example 123456. So here, suppose I have b one, I'm sorry, h one. And this is example one. Then we have an example in Biograph. Let's suppose this example is something. Then we have 111 time. This is example two. And in this case we also have a paragraph and this example as and as usual. Then we also have for more examples, so I will just copy them at this point. So I simply write this and then copy the other. So this example is, and we have some info now, let me just copy this, read more times. So we have 123. Now let me change M. So we have here 456. Now if I go ahead and open this file in our browser, we can see that we have, this is example one. This example is the example 23456. However, let's suppose that I need to jump to example 56 immediately. So instead of writing them just like this, I can add some links here. So the first thing would be in a paragraph. So a will be the ID of our paragraph or our example that we need to jump to. So we need to specify an id folate for this. So for example, at one inside the set S1, We are going to specify that this is e five. And of course here we have an idea and the two V equal to E6 indicating that this is an example, examples x. Now if we go back here, so h reference will be to hashtag and the ID, which is five in this case. Now I can write here. Go to example five. Let me just open this. And as we can see here, we have go to example five, however, it is not yet added. So. Because we wrote it here instead of writing it inside the a tag. Now, go back around. And as you can see, we have go to example five. If I precedent, it will take me immediately to example five. And this will work if we have so many examples. So let me just copy this and printed, for example, ten times. I don't know. And now if I go back, and thus we are going to have a lot of examples. However, if I press on density will take me immediately to example five, whatever it is. And the same thing of course applies to the example circuits. So we have E6 indicating that this is an example six subparagraph a and hashtag E6, and go to example six. Now if I run this, go back here and refresh. I can see that we have though to example six. And if I click on it, it will take me immediately to example six. Now, there is an ET appears here at the end of the browser is because we don't have any data. Following these two examples show that suppose I have some data here. So we have headings above and below. And if I just go back, run this, we can see that we have some beer. So if I go to example five, I can synthesis example five on the top of the page. If I go to example six, I can also see that this is Example six on the top of the page also. Now, the last thing we are going to discuss is writing email to someone. And in this case, let me go back here. And instead of just creating a hyper reference or a happy length that takes us to the image. We can simply add the image itself here. So let me just go ahead and delete this. Now, whenever we want to write an email. So let me just start with, this is an email link. And then after that, I am going to write a and inside the HRF, I'm going to use the mail to so mailed to someone, at example, not. And if I want to add the subject, I can simply add the delegation point and then followed by the subject. The subject would be, for example, to hello world. So hello. And whenever we want to write a space inside this H ref, I should add the percentage 20. So percentage 20 will indicate that I am, I need a space here. So hello again and send email from here. Now. So whenever. Now let me just open this. And as we can see here, we have this as an email link send image from here. So whenever I press on this, it will automatically take me to male and it will set the subject and the recipient of the email by itself automatically, since I indicated here in the image. So male two indicates the person that I am going to send the email to the address, as you can see here. Then followed by the subject. Of course, we have the subject equal to Hello again. And finally, we can also add, instead of just the subject, we can also add the body. So I can simply write here and body. And inside the body I can also write whatever I want. And whenever I want to use a space, I can simply add the percentage 20. So this is it for sending an email and this is it for the link in general is a very general idea. We have so many things that we can do with a link or reference in HTML. But for now, this is a general introduction. And with that being said, this is the end of this video. See you in the next one. 10. Images: Now, regarding the images, I believe that we have a good idea about images tend now. And this is not a, just a recap about what we learned about images and how to use them. So let me just first of all delete this and start with creating an image. And as usual, we have our length here. And as before, we can specify the width and height. So width will be equal to 200 and the height would be equal to also 200. So these things we know, and if I go back, so this is our image here. And as we can see, we adjusted as we want. Now. For example, if I have this image and as we said before, this URL is not working. We can write here image of Google. And something happened in this URL, maybe by copying it or by mistake, we add something, and this is not a valid URL, as we said, we are going to get the alternative for this image. In this case, we wrote that we need image of Google. Now, let's suppose we want to write this image or this image on the right. One way to do that, a bar S by specifying this tile flow to the right. So now we can open Stein here. So style will be equal to and inside the style. We need to add the float. And in this case we need the image to be at the right. So if I refresh, I can see that image of Google is now on the right. Let me just copy the right link here. In this case, this is the link. Let me just copy it back to my code here. And we are going to get this image where ever we want. So we want it at the right, we are going to get it here. Now we can also specify the width and height to be percentage. So let's suppose I want the width to be equal to a 100%. And in this case, if I specify it like a 100%, I will get the width like this. Now, let me go back and specify the height to be equal to a 100%. Also, go back, refresh. And as you can see, we are going to get the first or initial link or initial image we got from this link. Now, so this is one way to specify the width or height, either by specifying the percentage or by specifying the pixel. Now, another thing is, we talked about is whenever we want to add an image to be a reference, we can simply write a and inside this a, I will use the image and it will take me, for example, to SGP, google.com. And as we said before, whenever we write reference a and we need to close here div tag. And as we can see, if I go back now, run this, We have it on the right. I can click on it. And if I click that, it will take me automatically to Google.com. So these are some basic ideas about images. We have so many other information and ideas we can use. However, I just thought that I can simply merge all of the ideas we talked about in the earlier videos. In this video, just to clarify or have a clear idea about what we can do with images and how to use them. And of course, how to manipulate the size or the location of our image in our HTML code or our browser. So this is it for images. See you in the next video. 11. Tables: Now let's talk about tables and HTML. So how can recreate our table? So first of all, here we have our body. And inside this body, we can start by creating the table using the table tag. Press enter. So this is our table now. Now we have to, once we have the row and the column. So if we want to create a row, we can simply use the table grow. And inside this table law, let's suppose I have only one component or one item in our table. And this give us a one table data. So data stands for columns in this case. So TDI. And let me just try one. Now if I go ahead and open this, we can see that we are going to get one. So this is a table of size one. We have only one element in Santa stable. Now let's suppose I want a table of one row and two columns. I can add here DD. And inside this TED, I can add the number. Let's suppose I want to, let me go back here, refresh. And as you can see, we have now a table. And we have in this table two items or two numbers, 12. And now they are not separated by anything. They are just displayed as and as they are here. So let's go back. And let's suppose I want to create a matrix of, a matrix of three by 33 by three matrix actually. And in this case, I will be having three rows and three columns. So the first row will have three items or three numbers. In this case we have 123 and the second row, I need to create another row using the TR. And inside this row, I will also have three numbers, so 456. And finally I have my last row and inside the stroke, I have the last three numbers. They are 789. So DD seven, td eight. And of course TD nine. If I go back now, refresh this, we can see that we got a table of three rows and three columns. As we can see, we have 123456789. So the general idea. Whenever we want to create a row, we are going to use DTI. Whenever we are going to add an ampere or as a specific time we are going to use the Td. And this stands for table data. Now, as we can see here, we have a three-by-three matrix. Let's suppose I want to add some headings here. So this is, I can specify that these are the first number, second numbers, and third numbers. And I can actually do that by creating a new row here. So we have TR inside this row. I can add th. So th. And inside the stage I can write and b1, then followed by the age and B2. Then finally th and B3 go back, refresh. And as we can see, they are and a bolt, as we can see number one, number two, number three are in both. Now let's change the example and deal with the border of the table. Till now we have no borders, as we can see, they are simply displayed and they form the table. However, we don't have the boilers yet. Let me go back to our code and delete this. So inside our table, let's create, let's add some data actually. So the first thing we are going to do is to add persons and we are going to ask them information about dispersal. So the firstName, lastName, and H. So the first thing we are going to do is to create the first row. And inside this row, we are going to add three columns. So the first one will indicate the firstName. So th first name, then TH lastname. And finally the age, the age. Now after creating this rho, we can start with adding our data. So the first customer or the first-person will be TD. So this is the data TLB, Alex, and the last name will be a dot. And of course, we need to add is h. And in this case, let's suppose the age is 30. And then let us create another pro. And inside the scroll we have John, and we also have J. And finally the age will be 45. And the final person would be that we just open to the, I'm sorry, here we need to add TD cell of the are selected just the Dean John Jay, and DD 45. And now inside our last row, we are going to add a Aimee behind them that way. And it will be a, and finally, the age will be 25. Now if I go back here and I run this, We have our table till now, firstName, lastName, and age. Now, if I want to add the boater, I can add them to every row and column. So every time I add a row or data, I'm sorry, a data or a heading, I can add the border. However, one way to deal with all of this, instead of adding every time here, for example, at Boulder and then use it, I can simply added and the head. So inside our head, after the title, we can add style. So that way inside this type, we can change whatever we want here. So for example, I want to change quantum table. Inside the table, I want to change the table header and the table data up and thus, and inside this Eigen change, for example, the Boyden, I wanted to boil it to be one pixel, and I want it to be solid black. Now let's go back down. And as we can see, we have avoided oh, 1%. And it is so that now if I go back here and let me just simplify this or minimize it, go back. And as we can see today, get smaller. Now, let's suppose I don't want it to be that fancy. I just want to be, just want my table to be simple. In this case. I can remove the outer border. This case, I can use border collapse and to be equal to collapse back, refresh. And as you can see, we are going to get a simpler version of the table without the outer borders. Now, as we can see here, the stable as a little bit messy, only information are added together. And let's suppose we want to change the padding inside the oil, inside the table data. So one way to do that is by adding to our style. We want for the heading. And so th td open this and we want them to have the padding of 15 access for example. So if I go ahead now and Refresh this as we can see. From here we have 15, from here we are 1515 and so on. So the padding is basically the minimum distance we are going to have between the border of the table and the item itself. Now as we can see here, 15 pixels is alot. So let me just try five pixels. And, and I think it's okay. Now if I1 the headings to be at the left, I can simply add inside the style, the age up and, and I need the text aligned to be at the left. Go back, refresh. And nothing would happen since they are at the left tower. We need to adjust the table size. So inside our table, after creating this table, we can simply add here this tile. And we need the width to be equal to a 100%. And in this case, before we go back refresh, we can see that the table is now much bolder. And in this case, whenever we use the tax aligned to the left, we're going to get firstName, lastName, and age to the left. However, if I just remove this, promote God. So remove THE text-align left your back and refresh. We can see that the firstName, lastName, and age, are going to be at the center of our box. And this is because the heading is usually at the center and all of the other items. So whenever we use TD, they are going to be automatically at the left side of our box. Now. Till now we have the horizontal heading. As we can see, we have the firstName, lastName, and age. But let's suppose I want to create a table that represents the phone numbers and the, and this, for example, we can say that this would represent the phone. So we are going to be right at the left end and at the right on the right boxes, we are going to write the phone number, the actual For a number. So one way to do that is by creating the table as usual. So first of all, let me go back here. After our table, we are going to create another table. Inside this table, we are going to have the first row. Inside the first row, we are going to create the first table heading and we have telephone. And then we are going to add our data. And in this case, we are going to add the actual numbers. So let's suppose we have 555555 for D4, and this is our first row. Second row will also be as this. So the handling will be telephone and the data will be the number. And in this case, we have this number. So let's go back and run this. And as we can see, we have the telephone, and this is the vertical heading. So as we can see, the headings are vertical and default numbers are on the right boxes. So just verify things. We can simply add before our table a heading. So H one will be this is an example of the horizontal. And then, and after the stable. So between the two tables we are going to write each one also showed this as an example. At 30 girl having. Now if I go back and run this one more time, we can see that this is an example of a horizontal heading. As we can see, the headings are horizontal and here the headings are vertical. And this is it for this video. In the next video, we are going to discuss tables more and see you then. 12. Tables 2: Now let's suppose we want to add a caption to our table. So instead of writing a heading here, we are going to add this as a caption to our table, and the same thing applies here. So one way to do that is that inside our table, we can add a caption. And we can say that this is vertical heading. Let's delete this and go back to our first table. And of course inside this table also add a caption. Re, isn't adding. And in this case, if I go back now and drown this refresh, we are going to notice that this is horizontal heading and dices vertical heading. And they are the center of our table. So if I want them to be at the left side so I can write text aligned to the left. Now, go back, refresh. And we can simply see that this horizontal heading is at the left now. And we can also do the same thing for the right. I didn't use it now. But we can also use it. Run. And we can see that this is our horizontal heading, and this is now at the right most position. Now, let's delete these tables and work with a new one just to see a new feature. And in this case, we go here and of course lead out of this. And we still have this also. So now let's go back to our body and let's create a new table. And of course, the width will be as usual. So the width of this will be equal to a 100%. And now we can work with our table. So the first thing we are going to create is the first stroke inside the first row, we are going to just simply add the name so the headings will be named and the other heading would be actually a phone number. So phone number. And we are going to add another row for only one person. And so the first data will be the name, as we said. So let's suppose the Yunus. And of course the second one will be the phone number. And in this case, let me assume that this is my phone number. Now if I can go back here and run this to see that we have the name for a number of units and the phone number. And suppose I have two phone numbers and I want to add both of them here. So one way to do that is by creating two cells inside this column. So if I go back here and inside the th, so this is the second, the age, the table heading. I can add col span and inside this I can specify the number of sounds I want to merge together. So for example, here in this case, I want to, and I can simply add DD and new phone number. And in this case, this is the second number, who backround. And as we can see, we have now two phone numbers, the first one and the second, and they are bought under default number section or the phone number balance. Now since we have done this for columns, we can do the exact same thing for rows. And in this case, let me just demonstrate this inside our tables. So, and so though table we are going to have the TR and of course the name, and then followed by the name. So I want just to move these. So we are going to have name. And then here for number than the name here. And both on numbers here and here. So and scientists are going to have $0.02. So to do that, we are going to create our first heading, that is the name, however, followed by the data. And in this case it will be up my name. So the US. And of course inside our second row, we are going to create our first heading, second helium, sorry. So here we have the age. And then 78s, I can specify the row span. And I needed to be two. And inside this, we are going to add the phone number. And finally we have the two phone numbers. So we have the first one, and this is equal to td. And the second one will be a new row. As we said, we need three rows. So TR. And if I go back now, run this so we can see that we have My name, add Uranus than phone number. We have two phone numbers. So what did we do here? Let me just go back. And as we can see when I specify the rowspan 22, I just took two cells or two rows and merge them together. So if I remove this from my code, and let's see what's going to happen. Run this one more time. I can see that we have the second row followed by the number. However, the third number will be here. Now, one way to deal with that is by simply adding the last heading. So. An empty heading. I'm sorry, I didn't save it. Refresh. And as we can see, we have an anti-islanding. So just to remove this and not to confuse the reader, we can simply use the rowspan and merge bought grows to gather together. Since we need four numbers and they both represent the same phone number or the both on numbers of the same user. Now, let me just go back here and remove this unknown time. So this is our table. Now, let's suppose I need the inner and outer border, so I will go, I'm going to remove the collapse R1. And as we can see now, we have more fancy table. Now. And let's suppose I want to increase or change the border spacing. So devoid of spacing is actually the distance between the inner and outer border and decide this table. So let me go back here and inside my table or inside the style here, we can add that we want for the table to be, for example, the border spacing and to be equal to five pixels. Let's go back and run this. And as you can see, it's changed and it increased. So for example, if I use now 15, you back R1. We can notice that it changes and the distance between the inner and outer border will increase. Now, whenever we create a table, we don't need to just add items or words. We can add anything we want. So for example, we can add paragraph, a list, a word, or even another table. So let me go back here and remove this, a border spacing and add here the border collapse. As usual. Go back R1. And let me just go here and we need to save it. I'm sorry. No bank run. And this is our table. However, inside our table, let me delete the rows and columns and start new table. So if I go ahead and titers, I'm sorry, till here, I can start with creating the first row. So the first row, inside the first row, we are going to create our first column. So the first column, the first data will be consisting of paragraphs. So B, this is a paragraph. And then let me just create another paragraph. So this is another paragraph. Let us go back here. And as we can see, if I create this, we have the first column or the first item inside our table. Now if I go back and let's create another column. And inside this, we are going to just create a list. Or let's create another table for instance. So inside TD, we are going to create the second table. So we're going to type table. And inside this table we are going to create the first row. First row verses of 212. And then the second row will also consist of two columns, so 34. Now if I go back and run this, we're going to get the 22 items inside our outer table or bigger table. And these two items will be spectrographs and list. Our table. Now, our second row will consist of a list and a word. So inside our table, we are going to create the second row. So here, after getting, after finishing from the first row, creating the second and inside the second will have a word. So let's suppose I have a load and the second item inside the second row will be a list. So to create this list, we are going to simply use an unordered list. And let's suppose we need the TD. So we created a TD, and then after that we can create our list. So unordered list. Inside this list, we have some list items. So Banana, another list item, mapper. And the final one will be pineapples. So now we're done. Let's go back and run this. And as we can see, we have our table and consists of paragraphs, table, Word and list. And this is it for the table. However, we can still modify a few things. For example, we can change the background color of this table. So we can use the ID to do that. So we have our table, and I mean the outer table or the bigger table. And in this case, I can add here the idea to be equal to, for example, the one. And now if I want to access this table, I can simply use it inside the style. So inside our style, I can specify that I need for the ID d1. Do we open the curly braces and I need the background color to be equal to that. Suppose pur, purpose, I think what was good? And now go back, refresh. And as you can see, our table turns to purpose. Now we can also specify that we want the first row to be equal to B of a color black and the second row of a column, white or gray for example. So we can do that by simply specifying the row and column and specifying the background, color, size or font family. And this is it for the taper. We can do so many things with tables in HTML, but this is as usual, a general idea. And you can dig deeper into it and learn about it more by yourself. But for now, we'll stick to this. So this is it. This is the end of the table video. With that being said, See you in the next one. 13. Lists: Now let's talk more about less. And in our previous HTML codes, we created some list. And in this video we are going to dig deeper into this topic. So first of all, let me just delete all of this and go back to our normal Default. Good, so here we are. So we have our head and body. So to create a list, as we know, if we want to start with the unordered list, we can type q and enter. And this is our unordered list. And by default, if I added some items here. So and let me just open this default browser. And as we can see here, we got banana and Apple. And this is the default unordered list. Now, as we can see by default, we have the disk bullets. So it is the same if I write in the style that I want the list time to be a desk. And in this case, if I go ahead and refresh, not going to change anything since this is already a disc bullet. Now let's suppose I want them to be circle. I can simply go back to my code and change the desk, the type from disk to circle. Let's go back here and refresh. And as we can see, now, our bullet points, our circle instead of desk. We also have the square, for example, in this case, let me just go back and change this circle, two S square. So we have different types of bullet points. And as we can see here, we've got the when it points as square. And for example, if we don't want any bullet points, in this case, I can set my type to none. So as we can see here, if we refresh, we are going to get our less without any bullet points. Now, let's move on to the ordinate list. And in this case F i1. To create my ordered list, I can simply type O L. And inside this list I can set my list items. So as usual, and Anna and Apple. Let's go back, refresh. And as we can see, we are going to get my list ordered by the ascending order from one to two, since I only have two items. Now, let's suppose I want to order them by letters instead of numbers. In this case, I can go back here and set my style as usual. So the type of the ordered list will be equal to a set of numbers. By go back, run this, I'm going to get a, B, and C and so on. Now let's suppose I want them in. Normal letter go back and as we can see, they would change. And of course, for example, if I want them with Roman numbers, I can go back also and change this into i, indicating that I want them in Roman. And as we can see, we can use drama numbers as ordering in this case. Now, of course, if I want them to be also Roman but not capital in this case, I can dry it. Normal eye and as you can see, I'm going to get i as in Brahman numbers. Now, we also have something that is called a description list. And in this last week can list out items. But we can add some, for example, description for this item. In this case, let's suppose I have banana and Apple and I want to add the color. So I can add banana, a yellow, and apple, red in this case, for example. And if I go back, let me just create our description list. And how do we do that? We can simply write d and press enter, and this is an inscription list. Inside this list, I have. I can use the DT. And if I enter a coffee or banana in this case. So this is the item and DD, just to indicate that we are going to enter the description for this item. So DD, Go and I can simply write, for example, yellow. Now let's go back DT and DD and read. And of course, if I go back and refresh, just save this and save it. Now come back refreshed. And we are going to get banana, followed by the description, and then apple and also followed by the description. Now, I can simply add here, for example, the color. Just to clarify what I am doing. And in this case, let me go back one more time. And as we can see, we have our fruits and the color associated with it. Nonetheless, move on to nested list. And basically, nested list is a list that is inside another list. And in this case, suppose I have, for example, a list and this is the bigger one. So it is unordered. So I'll use un. So inside this list I have the list item. Let suppose I have laptops or phones, and then followed by another list item. And in this case, it is a laptop. And of course, this laptop, I have many, many types. Let suppose I want to create a list of these laptops. So I can create a UN, unordered list inside this list item. And inside this unordered list I can create, let's say HB, mark, and so on. Now, if I go back to my browser renders, we can see that we have phones, laptop, and inside laptop rehab, HP and mack. Now, notice here that the default bullet points are desk. So the desk bullet points I prioritized. However, if we are, we have already used them. And the default bullet points now are the circles. Now we also had the horizontal list and we can create it using the style. We can change the style of displaying our list items. So let's suppose I just have to list items. In this case, we have our laptop and formed. So let me go back here. And let me just create an ID for this. And in this case, let me name it C five. Now inside our styled, up here, inside our head, we can create this tile. So here we have style. And of course, if I want to use this or access this unordered list. And the idea is C5. We need to access the list items and inside this unordered list. And in this case, I need to change the display to enlighten. And using this, I can see that now my list items are, my items are listed in a horizontal way. So whenever we use the enlightened here in our display, they are going to be displayed horizontally. So this isn't for the less. And let me just add a few things. And they're not clearly related to the list. However, I find them that they are important and should be added in our class. So the first thing is the DIV element. And this element is a block element and will always start a new line and take up the full width available. So it is basically just like a box. So let me just demonstrate it here. Let's move is and remove teams. And I can create this element. So inside this div, I can say hello, world. So for example, if I want the bolded to appear, I can add in my style here that I want the boiler to be equal to one pixel, let's say, and solid black. So I want the color to be black and the width of the border one pixel. And as we can see here, we have now aware boilers. And they are now the size of one pixel. And of course they are other color black. If I wanted to change the color, let's say I can go back. And as you can see, sorry, I1, I2 and so on. And of course we are going to get HelloWorld and the border is inclined now. So as we can notice, this element will stretch out to the left and guide as far as it can. So as we can see here, it to go all over the page from and from this ending point to the last bit of the screen. Now, another element is the span element, and in this case, let me go back here. So this span element is an inline element and will not start on a new line and only takes up as much as necessary. So let me just demonstrate the use of this span element. So let me go and delete this, the create our span. And of course, let me say I need HelloWorld. And let me silent. Inside our expand, I'll add my style to be border, one pixel as usual and solid black. I go back now, refresh this. We can see that we have hello world inside the border. However, the pointer will just take as much as necessary. Now, suppose I add a few words outside. So this span is in a paragraph. And of course I have some words outside the span. So I can say I am Adi and good. By in this case, if I go back and we can see that this Hello World is between these words and the border will just take as much as necessary. So we can see that the word is inside the box and it fits perfectly. Now, if we want to style this span and elements, for example, let's suppose I have this. So I have here the paragraph, inside the paragraph, I have food. There are recovers. And we have red, blue, and yellow. However, I want every color of this to be presented and the respective color. So now if I go back here and lambdas, I'm going to get there three colors, red, blue, and yellow. And to do that, we can simply add this corner to span. So span and I can type bread. And the style of this. We can use color to be equal to that. And the weekend make it bold, so fun. And of course I need to add and wait to be equal to. Now if I go back and run this, I can see that we have read and it is endpoint. So we can do the exact same thing for blue and yellow. And this is how we can style our span and we can do the same exact thing with our div element. So this is it for this video. See you in the next one. 14. CSS: And sometimes whenever we are writing our HTML code, some things might get a little bit messy since we are going to add, for example, and some styles and some details. And in this case, we might not understand exactly what we are doing in our HTML file. So here comes the importance of a css file. And inside the CSS, we are going to style our elements or our data. And in this case, instead of writing the style here, setup time and our head. So we don't really need to write Stein here, or even adding a style in each and every component. So we don't need to do that. We can simply write hour alone or our CSS file where we are going to style our components. So I just created my file dot CSS, I named file. And inside this file, I just said that I want to be a background color and background color is acquired. Now I have here h one in this case. And I need to link these two files together. So one way to do that is by using the length and we have CSS. So this is Stylesheet and I want to link the file, the TSS. Now if I go ahead and, I'm sorry, go back and open this. In default browser. I will go, I'm going to get the one with a bandgap background-color of unquote. Now, we also might want to, I have two different colors for different headings. So let's suppose I have another heading that says World. And in this case, if I go back here and refresh, I'm going to get the same the same color for both headings. However, one way to deal with that is by creating different ideas, separate ideas for each and every component, and then use these ideas in our CSS file. So let's suppose I want this to be acquired and the second of the color red, in this case, I'll create an ID here. So this is first and this is second. Now if I go back and I can specify that for the ID first, I need the background color to be equal to occur. And for the ID. Second, I'm sorry, here, I need to rise, for instance. I wrote first before. So this background color to be equal to. Let's go back and run this. I'm going to get the first with the background color of Alcoa and the second with the background color of red. So as you can see, we can use ideas. And F, For example, I want both of them to be aqua. I can simply say that I want one to be equal to aqua. However, if I also have some other headings, and I want only these two background-color of aquatic and simply add here. The second. And of course, I need to add the hashtag. Now let's delete this, go back and let's say I have here the color red. However, now I run this, I'm going to get aquifer both with them since the ID is prioritized over the type of the components. So first of all, we have the id, then we have the type. Now, if I also have another heading here. So let's suppose I have a heading inside after our paragraph and that says the end. And I did not specify any idea for the selling. And if I go ahead and run, I'm going to get the default background color of friends, since I specified that for each ID, for each heading, the background color should be read unless I have first or second. And in this case the background colour will be a quote. Now we also have something that is called class. And in this case, whenever we create a class, it is similar to the idea, but usually it's used for more than one component. And in this case, let me just use it for suppose I have a p and I want to specify the class to be equal to colors. And in this case, if I want to access this paragraph and my CSS, I can use the dot operator and followed by the class name and the hourglass name is colored and say, let me check its colors. And of course I can change the background color as usual. So background-color would be equal to C green, let's see. And back Ramdas, I'm going to change the background color by using the class. So we can either use glass or ID or even use the whole component by just calling it. For example, adding 11 each to be answered. So this was just a general idea about our CSS file. And this file we can add anything we want concerning this time of our components. And in this case, we can simplify things in our HTML code. Since we are going to write the bulk of our code here, we don't want to add the styling and make them more complicated and describe. We can add them and we can actually create them in our CSS file and just link them using this link relation style sheet. And hyper reference should be our file that CSS. And this is basically for, this video, is just an introductory video of how to link our file, our CSS file, to our HTML file. And as we said, we can do so many things. We are with our CSS file, but for now we'll stick with this. So see you in the next video. 15. Input Types: Now let's discuss MBA types. So let's suppose that we want a name from the user. And in this case, we need a box where the user can place or add his name. And in this case, if we want to create this box, we need the form tag. So if I write formed here and press Enter, a form with an action will happen. And we'll see what we can do with it in a minute. But for now, the action will be nothing. We are just going to enter our name and click on the box. Or the consultant if you want to create an input four subnets. So let me demonstrate this form. So first of all, we need to create our label. And in this case, let me just named name. So this is the FirstName and inside my label by Dr. First Name. And then after creating our label, we need to create our input. So now this input will be of type text. And of course, let me just try it, my input here. And let me just create an ID for later. So the idea will be, so this is firstName, so an image pathname. And of course I can create an aim for my input. And in this case, I also name it pathname. Now if I want to jump the line as usual, we can use DBR just to jump line. Now, let me open this and see what happened here. So if we create this, we are going to get our firstName. This is delayed with just created and followed by our input. Here we can add something. For example, I add Hadi. Now nothing will happen because we didn't add an action. And we are not going to add an action in this video, since we are just learning about how to create our inputs and how to style them. Now let's go back here to our code and let's add another label. In this case, let me just jump a line here also to better view it. And of course I need a label, I name and last name, so L name. And then I need to enter the last name. Of course, the input will be of type text also named the ID to be equal to lname. And then of course, the name will be also choose to be the same as the ID. And of course, jump line, go back and refresh. And as we can see, now we got firstName followed by its marks, and last name followed by Sparks. Now since here I didn't add. It, just added and refresh. So we can see that now we have two boxes. We have two inputs. We can add our first and last name. And in this case, we might want to add the bottom or input submit. And in this case, whenever we press on submit, it will take us, it will take us to somewhere else. Now, as we said in this video, we are just going to discuss how to create these inputs. So if I go back here, I can create another input. However, this time the type is not text. We have an HTML did submit and of course, the name devalue, I'm sorry. I can add a devoted to be Submit. Now if I go back and refresh, I can see that I have here the input submit. So whenever I press the submit, it will take me to another place. For example, we might want to add this first name and last name together and in a word, in a sentence, and then just rented out to the user. For example, let's say welcome. Let's say I enter 30 and units. In this case, whenever I press submit, it will generate a welcome letter saying welcome had years. So this is one example of how we can use this. However, we need to add the action of old form. And for now, we'll stick creating these. Now, let's suppose we have a username and a password. And in this case, we want the user to enter his password as a password field. So we can just ask him to enter his password as a text. Since the password must be Naziism. And to do that, we can create label at first, and this label will be our username. And then ask the username. And of course, add our input. Inside our input, we have the type to be taxed since we are adding the username at first. And if I asked them to antagonist a text, I need to ask him to enter his password now. So the label now will be basswood. Let me just an image B and password. Then of course, I should add the input and the time could be password. Now, if I go back here and refresh, see that we have username and password. However, I can write here my username and password will be like this. So we have black screen, we can see what I'm writing now. So this is basically for the password, and this is how we can create the password field. So as we can see, it is written as black circles. Now, let's move on to another input type, and this is the radio type. And in this case, for example, I have three types. Let's say I want to ask for the gender. In this case, I can type male, female, or other. So to do that, let me go back. And inside our form, we can create our input to be radial instead of text. And then of course, I can add our label. So the label will be its name, it Mail for example. And I ask if this is a male, then jump aligned. And of course, the amplitude will be one more time radio. And let me just create our labor. So the label will be he made in this case female and then jumped the line. And of course, I can also add the input 11 time. And in this case, the input will also be of type radio. And then we have our label. So the label will be now other. And we can write at their year. Now if I go back to my browser here, and, and thus we can see that we have male, female or other, and I can choose one or more. And in this case I can ask before creating this four, I can ask one, let's say age three. And what is your gender? And then after that, let me just depress. And as we can see, we can choose from this list. So we can choose either male, female, or other. And as before, of course I can add the submit input so I can create my input to be submitted in this case. And if I go back refresh, we can see that we have submit. And if I present submit it should take me or generates something else. Now, let us move on to another input type. And in this case it will be the checkboxes. So the input type checkbox, defined as the name indicates a checkbox. So to P8 networks, let me just delete this. And first of all, I create my input. And the type could be, as we said, check bugs. And of course, let me labored. For example, let's talk about laptops. So L1, so leapt upon will be and the input is second input will be also of type checkbox and the label will be L2. In this case, we can add, for example, math. And if I go ahead now and create our input submit. So this is of type submit and let me go back, refresh. And as you can see, we have HB NMAC. Sorry, this is the question for the other. For the, as we said, the radio buttons. But for now let me just delete this and let's go back, refresh. So as we can see, we have HB and Mac. And I forgot to add some lines here. So we can add a line here. And here. Now go back, refresh. We can see that we have HB, Matt and submit, so we can choose one or more. And then whenever we press submit, which will take us as reset to somewhere else. Now, let's go back here and discuss the input button and how we can work with it. So if we delete this inside our form, whenever we want to create put button, button, we don't really need this formula. So I can create the input, and this will be of type button. And I can choose that onclick Alert something. So in this case, whenever we click on this, it will alert hello. And now I go back here. And as you can see, we have something, sorry, this is what should we arrived and now the value will be, I can't rise, for example, a click me. So click me. And now let us go back and run this. So refresh. And as you can see, we have the Click me button. And whenever I press on it to generate this, for example, this alert. And it says hello. Now if I press OK, I can go back. And whenever I type on it or I press on it, it will generate this this alert saying that this page says, and the message that I'm going to send to the user. Let's go back to our code and talk about the number field. And this input type is number and defines the numeric input field. So we can use the minimum and maximum attributes to add numeric restriction and the input field. So for example, if I want the user to add a quantity, for example, and I may want to specify it between 110. I can use the min and max attributes to make sure that the user is adding the correct value or the value within the specific domain. So now let us create our phone. So here we have four. Inside this cone. We can create our label. And this label will be I limit quantity for now. And of course, our quantity. It will be between, as we said, 110. And then I can create our input. The input will be of type number, as we said. And I can use the minmax. So the minimum will be equal to one and the maximum will be equal 210 in this case. Now, let me just create our input type submit and jump aligned here. Now go back, refresh. And as we can see, we've got quantity between 110. So we can either use these cursors or and as we can see, if I got to ten, it will not change anymore since our maximum number stamp. Now if I present Submitted should take me to somewhere else. However, then now we didn't add our phone, remember. But for now for example, if I asked 44 and press on submit, it will generate this saying that the value must be less than or equal to ten. And if I choose minus five and present submitted to say that the value must be greater than or equal to one. So this is basically for the number field. And as we can see, we have so many input types and we'll discuss some of them later also in the next video. 16. Input Types 2: Now let us continue our discussion about quantity or numeric input type. And in this case, we said that we can add the minimum and the maximum. However, we can also add this tab and the initial value. So for example, if I go back to my code and after adding the minimum and maximum, let me add the maxim to be hunted. The minimum will be 0. And I can add this tag in this case. So the step, for example, I choose to enter the step of ten. In this case, the user will be obliged to enter either 0102030 and so on till he or she reaches the number 100, which is the maximum. And I can also add the value and w, for example, it would be equal to 20 in this case. So if I go back here, refresh, so the initial value will be 20 over I can add ten and nothing will happen. It will go back to 20. If I add 30, let's say it will also go back to 20. And of course, if I add a 150, it will say that the value must be less than or equal to 100. So as we can see, the minimum and maximum are still applied. However, the value will be always equal to 20. And in this case, let me just delete this value and stick with the step size. And let's go back and fresh. We have nothing here. However, if i enter four, please enter a valid value. The two nearest value of added values are 010. So as we said, we chose the step size to be equal to ten. And in this case we should stick to choose something that is multiple of benzo. If I choose ten, it's correct. When t is also correct, and so on until reaching the 100. And it will be also correct. So this is it for the numeric steps. Now let's move on to a date field. And for example, if I want to ask the user to enter his birthday, I can use the birthday date type in this case. So if I go back and delete this so I can create the label at first. The will would be of type, let's name it. Birthday is in this case. And I'll add birthday. And of course I need to create my input. However, the type will be, in this case, date, and I can jump aligned and create my input submit as usual. And now let's go back to our browser, refresh. And as you can see, we have the birthday and followed by the date type. And I need to enter here to the date and month and of course, the year, let's say to 1000 in this case. And if I press on Submit, it should generate something. And now let's suppose that we want to add some restrictions. And we can add the minimum and maximum. For example, if I go back to my code and inside the label, let's say the label here. I can add the birthday. However, I can ask him to enter a date before, for example, poof before 2 thousand. And of course, in my input type, the max will be here. So max will be equal to, let say 199. And of course I can add the 1212. Sure, I'm sorry, E, we can add 30. And let's go back to our code. And as we can see, until I did before 2 thousand. So if I add 1000 here and 7572001, click Submit. Value must be 3012 or earlier, 11999 or earlier. Now, let us suppose I want to enter a date after 2 thousand. So in this case, I can ask the user to enter a date after 2 thousand and the minimum in this case will be here. So minimum will be equal to, I can choose to be 2001 to let say. And in this case, let us go back to our browser and see what happened. So now if I enter what, 1999 submit bids interbedded the field. Ok, I'm sorry. Here we need to add something, let's say by phi. And as we can see, value must be the specific date to one hundred, ten hundred or. And in this case, let us just changed this year 2001. And it should work correctly and generate or taker takes us to another page. And this is basically for the date field restriction. Now, let's suppose we want to show a colour. And in this case we can use the input type color. And let's go back to our code as usual. Inside our four. Let's create our label. And let's say that for this label will be using the color. And let's name it, select your color. And in this case, the user should select his color. And of course the input type will be colored. And let me just create our input submit. So Submit here, and then go back, refresh. And as we can see, we have selected color and the black color is the default one. However, we can change this and our code and side, our input type. We can add our value to be equal to a specific color. And this is the code for rats or ff theory 0-0. 0. Now let's go back to our browser and refresh. And as we can see now, the color that is in front of us is the red color. If I click on it, it will generate this page or this box. And I can choose the color I want. And then after that I can submit it as usual. And this is it for the color picker. Now we can also create arrange field. And in this example, derange field will display as a slider control. So for example, we can pay something similar to the volume here. So inside our volume we can see that we can move right or left and increase or decrease our volume. And we can actually create this using HTML. And so let's go back to our code here and start with it. So instead of writing the labeled color, I will create our label and I'll name it volume. And then we are going to add the volume here. So this is volume between 0. And of course, I need to add my input. In this case, the input will be of type range, and I can add the minimum and maximum as usual. So men will be equal to 0 and the max will be equal to a 100. And in this case, so this is it. Let's just create our, For example, the submit button. So submit and then go back, refresh. And as you can see, we have now our volume between 0 and by default it is at the middle at 15. Now I can scroll back and forth and choose choose the volume I want and then submitted. So this is it for the range field. We can also add a monk field, talking about fields. It allows the user to select a month and the year. And the month is not supported in Firefox Safari or Internet Explorer 11 or earlier. So make sure that you have something else and you are using, for example, here, Google Chrome. And let's go back to our code here. So to do that, we can simply create our label to be a birthday. So we can choose the month and year. So here, birthday, we have month and year. And of course, our volume will be, we're going to change it to the birthday month. So I simply write demand. And now we can create our input. So the input would be type month. And of course, I can add another input to submit. So this is submit and has jumped to another line. Go back to our code, refresh. And as we can see here, we can choose specific month, January, June, July, and February. I can choose whatever I want. And the year. 2 thousand. And this is basically for the month and year and how we can choose a specific month and year inside our month field. Now, let's move on to another important indices to display a weak input control. And this input week is also not supported in Firefox, Safari and Internet Explorer 11 or earlier. To make sure that if you want to use this input, you need to have something else installed. Now let's go back to our code and create our label. In this case, let me just delete this. And the label will be weak and select weak, and then create our input. And in this case our input will be of type weak. And now if I go back to my browser, refresh, so the week will be the three. And the, I can choose the year I want from here. And then of course, click on submit. And I can also use the calendar year. So as you can see, you can choose any weak and any year we went from our calendar. And if I want to choose this week, I can simply click on this and it will generate for me my week. Now let's go to another example and to create a time input control. So this time allows us to select a time without a time zone. And actually, this time is not supported in Safari or Internet Explorer 12 or earlier. So let's go back to our code. And inside our firm, we are going to create our label. That is, the time and limits are simply name at time and, and ask the user to select a time. And then we can create our input and it will be of type time. And of course, the submit button. And now go back, refresh. And as you can see now we have our time. So for four and we can always time from here and we can choose whatever we want. So this is it basically for the time and put control. Now, let us move on to the email field. So if we want to create an email field, I can simply create the label as usual. And this label will be for an email. And I can ask the user to enter as he made. So enter your email. And of course, I need to create an input of type email in this case. And then jumped aligned and finally, create the submit button and go back. So as we can see now we have our email and if I just type anything, it will say that these include and add in the email address. Kdf is missing the ad. So I can add example at example, dot com. And of course if I submitted, it will work just fine and generate something else or take me somewhere else. Now, the last thing we are going to discuss is the search field. And it actually behaves like a regular search field or text field. So to do it, we can simply create gear. So this is for the search and search, Google, let's say. And then after that I can create my input of type search and now jump aligned. If we go back and refresh, we are going to get the search will go. I can enter whatever I want and then submitted to search for it or do whatever I want with it. And this is it for the input types. We have so many input types and you can search for them. And this is it for this video. So see you at the next one. 17. Project: Regarding the project part, you are going to create a travel form. And this form, you are going to ask the user to enter his first and last name, as you can see here. Then you are going to ask him to talk a little bit about himself or herself. Then to state the reason offers cable, for example, to visit family or friends, either to study abroad or to do Ferrante work or long-term work. And you can also add other See I didn't add it, but you can always add others. There may be another reason. And of course the destination. So here I just added five destinations, France, Italy, America, Britain, and Spain. And then after that, we are going to press on submit, and it should be submitted. So this is it for this project. I think that all of the tools are available for you. In the earlier videos, we can just go back a few field that you missed anything. We'd learned how to create the input and how to pad it. We can use padding here, and we also learned how to choose between inputs and of course, how to submit. So they are all available in the previous videos. So you can go to them whenever you feel like it. And this isn't for this project. I hope you enjoy it. And don't forget to add it to the project section so I can look at it and give you my feedback. 18. Recap: Congrats on finishing this class. You just completed the HTML and CSS class. And let's just do a quick recap about what did we cover? First of all, we talked about some basics and syntax. Then we moved on to styling and formatting. And also we talked about tables, lists, and images. And of course, we learned how to link our CSS to our HTML file. And this is it for this class. I hope it was beneficial. And thank you so much for enrolling in this class. And see you soon.