How do you Create a Layout in HTML?

Hello friends,

You all are welcome to this HTML series.

We have learned about Class and ID in our last segment, how we can use Classe with any element and can give the style by the use of Classe. Along with that, we have also learned about ID that there is only ID in one element in the webpage and can also give style through ID but when we have to use an element with javascript then to fetch that particular element, javascript should be used through ID.

In today's segment, we are going to learn HTML layout. When we make or design a webpage then, there is a layout of that particular web page like of which type or which design our webpage should be and what are our fundamental techniques to design the webpage.

So, let's start today's segment.

The image currently you are watching on the screen, this image shows the layout of an HTML webpage. There are many portions shown in the image. All these portions are part of a particular layout.

All the modules which have to be there on that webpage, are explain with this image if we design a particular webpage or website.

For example: in this image, The topmost module we have taken is HEADER.

So, What header portion defines is, A header portion must be there When we design a website. The header portion can give a brief description of our website or we can place any website-related data or content in the header.

Next is NAV (Navigation). It is usually used for links. By this, we can provide multiple links.

After this, there are SECTION, ARTICLE, ASIDE, and FOOTER-like portions.

We will look upon every portion one by one in today's session.

Very first we will go to the example, let's say:

I am opening a website and I am having our learnvern's website...

So this is our learnvern's site and this is our learnvern site's homepage.

So, if we compare the learnvern website with the current layout structure then we get clear about the layout. So, let's compare this clearly on our learnvern's website.

So, on the topmost portion, the highlighted portion (In which I am rotating the arrow) is our header portion for this particular site.

So, if we take the reference of this website, for our structure, then this portion in the image is our header structure or header portion for the learnvern’s website.

This portion is our header portion in which the image is showing.

So, if we compare this with our structure then the topmost is our header portion that is shown topmost on the learnvern site within the image.

Our next is the navigation portion.

If we look according to structure then our navigation portion starts just below the header but this is not mandatory.

You can change this structure according to your website. But the thing is that this is a basic structure of so and so portion (As Header, Nav, Section, Aside, Article and Footer).

All these sections which are here must be present there on our website.

Because all these portions are available for us as a tag in HTML5 so that we can use these tags. And these tags also pass the semantic level information to our browser.

So, using this structure, If we make a site then that site is easy to load and can be easy to run and understand when loaded for the browser.

So, here our navigation bar is designed like this for the learnvern website.

As we hover over all courses then the navigation bar should be shown like this.

Along with this, when we scroll down, then a big header portion gets changed and comes to the top. The navigation bar opens up when we hover over all courses; this is a change in our header portion.

So based on the requirement, we have made changes in our basic structure for making this website.

Then if we look at the structure or the Article portion that is one after another; it means it defines the section as a portion where we place data.

The same article defines, paragraph type (written data) to be placed.

So, on this website, we have more images as content.

So, in the blue portion, where (Free Tutorials, Certificates, Live Projects is written), we can say this one section, and we can say it another section as here many images of courses are there.

Here at the bottom, one portion is there where testimonials and information for the app are enclosed.

So, we can say these two are different sections.

So, it's not mandatory to cover all the elements in the structure in any website.

This is not a rule.

But The structure should be like this when we design a website by keeping the layout in mind.

This is our goal.

Next is Aside and Footer.

So, At the bottom of our site, this black color portion is defined as the footer, and from the menu, if I go to any course as an Advance Java Programming Course then here we are getting a fixed static portion on the left side which we can say sidebar.

As we scroll this, then the sidebar portion remains as it is and the remaining portion gets scrolled.

So, this sidebar (which is a fixed portion), we can say this aside section and the portion we are scrolling up and down, we can say this section or article because we got so much written content in this.

So We can see that this website has been made as per the rule or as per the structure of semantic tags available in HTML, if we compare the learnvern website with our basic HTML structure.

Now we will see how we can use our single portion while coding one by one.

Here let's start a new program. "Type HTML and ctrl Space and our structure is ready".

HTML semantic tag, Save “sementictags.html”

Let's run this program.

This is our program. Currently, it is null.

Now, when we compare this with our structure then our first portion is the header portion, so let's say we are adding a tag under the header.

We have to define something when we write under the header tag. We are writing "This is the Header Portion" save and run!

As we just ran the header portion we got the header portion on the top. Now just to identify properly that this is the portion of our website so for that, I am adding some CSS. As I can under "style" under the header portion. We can add CSS under the style portion or we can add it under Inline (within the start tag)

So, I will add CSS like this. Very first I will take background colour so that we can identify our header portion. I am taking blue colour as background portion and this portion is starting from the left-hand side so I have to centre align all the content, so here I am giving "text-align: centre" so the text we are writing under header comes to the centre and every property we are writing, we will look to every property in detail in our CSS course. and I want to show this portion large, so I am allowing tagging and saving it on 10px.

and after running this is our head portion. It is in black colour so why is not visible so here I am giving white colour and run!

So this is our header portion.

So what we will write in our topmost information as I can add images also if we want to make a site like learnvern. and can enlarge the portion. So this is our header portion.

Then comes our navigation portion

So let's say, here (same with CSS) make a portion with the name of nav (As you can see here NAV is written) " This is the navigation bar"

Now we will change the colour, "light-green" Save and run!

So here we can see this "This is our navigation bar"

So this is our header portion and this is our navigation portion.

So as you can see that we have not placed links in this navigation portion. But ideally when we make a website then there are more than one link or URL that will be there or the menu and menu's different links like Home, Contact us, Submit, About us, Careers, etc. So all these pages we can add to the navigation bar.

So currently we are not using any anchor tag, just defining the structure how it looks.

Then Section and Article.

So here we define the section after the navigation bar and use the same CSS here. "Red"

Increasing padding so that this portion shows large. So this is our section. Under section, we can write "This is our first section "

Here very first is our header then navigation bar and then section. This is a section in which we can add any data we want to add like images, to pass any information related to the website, maybe a testimonial, maybe images.

We can add another section if we want to add some other data to our website.

We use a section for that also.

Now guys, one thing which has to be remembered is that we can add any number of sections based on the requirement of the web page. As here we have added two sections as the requirement but we can add any number of sections.

If you find lots of sections then you can bifurcate in multiple pages.

So, if you don't want all in one webpage then you can bifurcate that by providing the links of another Webpage in the navigation portion.

So it's totally up to the designer. When you design your web page it's all up to you how you want to make your webpage.

As here we have taken the second section. So I will show this in yellow "This is the second section". And this is our second section which we are showing as another section.

After that, the Article comes.

We can take the article in the same way, as we took the section.

Next is the sidebar as Aside is written here.

So usually There is a proper CSS when we have to make a sidebar. We can make a sidebar with the help of CSS. As if we will try as written here then our sidebar will come to the next portion.

As I am writing "Aside>This is a sidebar".

Fill the code and run!

After running, it is showing like this because we have not given any CSS. But if I apply the same CSS in our sidebar and give "orange" colour and save it. So, we get our sidebar as the normal section.

But actually, we have to write a proper CSS. We can adjust either the right or left portion by using CSS. Then the sidebar is properly made.

So let's try to fix the side portion. The CSS which I will add that we will learn and go into detail in the CSS course.

So let's say I want the width of my sidebar 200px and have to fix it on the right-hand side.

To fix it right, "I am giving float right" Property and putting this portion just below the navigation bar by cutting here.

So as I run this program by saving then my sidebar comes to this side by moving here means my sidebar got fixed beside the first section.

Here we are looking to fix our sidebar just in addition to our first portion. This is our sidebar. I am repeating that the property is written we will learn in our CSS course.

My sidebar shifts on right by writing float right

Our last section is the footer section.

The section that is shown below our webpage defines under the footer section

"This is the footer section" and we will add some styles in this so that our footer section gets identified to us independently. I am giving black colour to this. Save and run!

So this is our footer section.

So the structure we made and ran it properly.

So here you can see that the website similarly looks in this structure.

Very first the header is there. Then navigation comes. Then there are multiple sections based on content (we can add an article if it has more content) sidebar (if it is your requirement) to place something on the side, then you can place it in the sidebar. And last comes the footer section in which we can show webpage links, webpage collectively links, to show the webpage logo that portion we can define under footer section.

So this is our structure

As usually when we make a webpage then the webpage structure is in this way.

And to achieve or make this structure we have to use semantic level tags written here header, navigation bar, sidebar (if required), sections (you can add any number of sections), and last is the footer.

So we have achieved this layout practically.

Here the description is given for every tag. Like why is header tag; to define header.

Navigation; for navigation links

Section; to add documents

Article; to write a self-content article

Then aside and footer.

The two things we have not added are details and a summary. So these tags also depend on the user's requirement.

If you want to add additional details regarding the webpage then we can add through detail.

But it's not necessary to use details. Same thing you can do with Sections and Articles.

So it's up to the developer that by using which tag they want to place the content.

Same way Summary. The elements we use with the heading tag so the details of the heading we can place under summary.

The summary is a portion, you can add it if you want and remove it if you don’t want.

But to achieve the main portion of the structure, we have seen all those tags i.e header, nav, section, article, aside, footer. Using these tags we can design a layout of our website

So this was the discussion on the tags we used in semantic structure.

This was our today's segment

We will look at HTML entities and what are entities of HTML and symbols of HTML in our next segment.

I request you all to try and run all the things we have learned today at your home.

If you tried and it runs fine then it's well and good but If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your queries as soon as possible.

Thank you, guys!