Hi, hello everyone. We're going to start in chapter three chapter three is main paragraph. In this chapter we're going to learn about crossing extended. What are the heading levels we'll go to the point text on how to indent and simple fist, what is a horizontal? And then we can create a student in this chapter or having four examples, first example is Lloyd of lettuce views, speech source in order to understand the scope. Okay, now, normally we'll start with HTML.
As we said before, HTML marks are stored over this file with HTML code, when this is read to provide information about the page, and this is a fighting name growing crops. So as you See, this is a paper appearing here. And in the pasta bar also this is what appears even as a coating of Windows. Okay, then we close the head, then we start the body take. Okay, now, in order to start a new paragraph, then we'll use the take name p, e for paragraph. Okay, so you start out the normal, this is the first part of pneumatics.
And whenever you need a new line, then you write er, or line three. Then this is the first line in the first paragraph. Another line. This is a second line in the first paragraph, then you close the paragraph with hp normally, like in HTML take and we do repeat this again to create a second paragraph. What is the difference? Now as you can see that this is the first paragraph, this is first line second line in the first when you just close the paragraph tag and open the new one, then as you see that it seems like it created two lines, one line to come here and another line and create a space.
So the main difference between a break and paragraph is a paragraph. It simulates two blocks. So there is a line break between the two different paragraphs. So as you can see, that this is how we can lead paragraphs, of course, like if you if you want to separate your text, you don't have to make it appear more clear. Then you can use a prop block to create the separation. So this is a terrorist In this chapter we created about using the P IC.
So let's go back to the code of course, you write this in the file I can even make it more bigger in order to appear like this, this is what you should write in order to get the same result. So, as you can see here, we learn and you will learn about the P IC in order to create a new paragraph and the result, this is what it appears as a result in your HTML page. So this is our first point of use. paragraphs. Okay, whenever you take a look at Output one, every, every current of every letter is appearing in exactly the same format. Like you don't have small on the form or whatever.
So we need to learn how to modify the text box. Okay, this is the output of the example. Like as you can see that there is a big difference between the focus on the Okay, now let's use the source and let's put it to look here. Now I'm not going to repeat again regarding his explanation of HTML in title. Then above, we're going to explain what's new moving forward. Now we have a date named h1 heading one.
Okay, so why don't Normally because this is h1, I need to see the difference what is the difference between normal text and the heading different heading levels, we have six heading levels. Starting from h1 to h6, we have h1 is the biggest and h6 is the smallest. So I repeat the same thing. writing this is heading two using once h1 h2 h3, h4 h5 h6 then number I think also our normal status in order to feel the difference what is the difference between the reading level and so normal text now let's take a look at the output. Now as you can see, the heading level is automatically mean both its head and the head is normally bought to attract attention. So this is h1.
It's written in go And also he creates something like a power draw. Like, as you can see, use a boat or disprove h1, no rock'n'roll, no Greek, nothing but it creates a difference like as if it's a paragraph. So this is normally bound because you know, in when you write ahead, you don't write something after it, you start in a new line. So there is something like a difference, it creates automatically the space in order to make the heading appear more clearly. Same thing is repeated again for the different reading levels starting from h1 to h6. So whenever you take a look that h1 is the highest.
And you can see that there is a difference between the hidden one level and the low mortix and is appearing clearly industry, okay, now this is h1, it's a little bit bigger. And this is a normal fix. It just really is a little bit smaller goes in h2, and this is a normal case. Okay. You can see the h4 is a normal text from science point of view, but pictures are still this is bold. Now pitch five is smaller than the normal case.
And h6 is nice. It's also smaller than normal ethics. So you have these six, six, built in levels in order to create the consensus of form. So whenever you need a type that is that is bold, that has a space, it looks like a bar graph. So that any of those hitting liberal will appear With a difference as a punk rock, then you can use any of these levers. Again h1 is the largest heading style and h6 is the nice.
H4 is a normal style. So whenever you make something bigger you can use h1 h2, h3 if you need to use smaller size then you can use h5 and h6. This is the example showing how you can create different heading levels in HD. The next example we're going to talk about it's like, as you can see in the previous examples that everything years, left to right. Everything is lived online. But we're going to learn in this example how to create the from alignment in fix Let us see the source.
Okay, we're going to go directly goes over the cake. Oh, he, he will learn a new school deep. Soon whenever we have a div, then it's a new tag where you can specify different alignment for your text. So it's the Align equals left. Of course the default is left. So if you don't mention anything in the code now, you have three values that you can make for alignment.
Left, right, or center. So now this tick is that is enclosed between the start date and the closing. He will appear in lift this week. The E type in this will appear. So, so let's take a look for example. Okay?
This is, right, this is so now we're able to define the different alignments in HTML. Last example in this chapter we're going to learn about how to teach horizontal rules and indenting text. Okay? Now let's take a look at the source. Okay, explain this. Now we never think code, block code okay?
Whenever you write this tag, this means that it will be indented a little bit. And if, if the tag is larger than the space that the single line can occupy, then it moves to a new line without talking. You don't have to write p tech or P A, B or egg in order to create a new loan. This is a new thing that we do in this example. So already you don't have to make something like about Okay, then we have something called rule don't rule, horizontal rule with a pitch or what does it all mean? its own means it's something like this piece of you see from right in the lines of that As spacing between two different paragraphs.
So this is how it looks like it has some of the views, like I can align it center. Okay? Then size equals 10. Well, this attribute may appear this even sizes actually its height. Okay, what is the size of this horizontal course it's in pixels. So, like this is the size of 10 pixels.
If you need to make it more than of course, you can increase your needed. If you need to make this in, we can make it visible. But this is the size of in pieces. Now what equals 100% while you have all those two ways in order to specify the words, either as a percentage of the screen size, so if you make it 100% This means I want to appear in full screen. So if we have your boy from the party, and also you can mention this as pixels, okay, so in this case you don't write a percentage, you just write it. So as we said, like for you to imagine the sizes of your size 10 is this amount.
So of course, whenever you're writing the pixels, we're making a point. So in points, this is its size. So imagine like 100 pixels will appear almost something like this for you to imagine the size required. Equals blue. You can also mention its color. So as you can see, that this is how it looks like.
This is the horizontal which is a So it's appearing in blue color. Now back again to the p tag, we're going to write a paragraph. But here we're using an attribute name, title, and we're in just in this okay What is this? Now, whenever you hover on new paragraph, then whatever you are writing in the tooltip will appear here okay. So, as you can see that nothing appears here, but whenever I hover my mouse it, this tooltip appears. So, if you need to provide something like more help, or any clarification, explanation, whatever you need, then you can get simply this.
So, back again to the code, so, it's simply using title attribute, almost title attribute is there for almost all HTML Eggs, so we can use it whenever you need to have a tooltip. So it will appear automatically whenever you hover your mouse over your text. Okay, so in this chapter, we had four examples. We learned about paragraphs using the key take. And we learned what is the difference between the tech and the key take. We have learned also six hitting levels.
What's available in HTML is from h1 to h6 or learning about them. We learned also a new tag called div with some attributes with center aligned, left aligned or right aligned. So we learned about the deep take you this example we have learned about the Blue Coat That is available in HTML. In horizontal, we have learned about the H or take in order to create a spacer and 14 to one year, we just learned a new attribute called title. It's not a new thing. It's new.
So this is the end of open. We hope you enjoyed this shot. See you guys in next chapter. Thank you.