Ladies and Gentlemen. how are you all? I hope you are well? I’m good for the grace of God.
Basic Webdesign: Part-08
We have already discussed on
Web Design 7 episodes. In the last episode, I had discussed the HTML Div. 8th episode of the Web Design Tutorials. Today I will discuss how to mark up a webpage.
Topics of discussion today is very important. Before reading this, you must read the previous tutorial Lesson-07: Basic Webdesign: Part-07. If you do not see the tutorial, you could not understand this tutorial.
Also Check:Lesson-07: Basic Webdesign: Part-07
First, you create a folder. You can create any of the folders. In the Folder to create a folder called index.html and style.css. Now, index.html file open in Notepad plus plus. First, the basics of HTML structure we write.
<!DOCTYPE HTML> <html> <head> <title> This is Title </title> </head> <body> </body> </html>
This is the basic structure of HTML. Every website has these codes. Here we see two sections. Being the head of a section and other sections of the body. Write all the code in the body section of our website. In other words, <body> … </ body> tag write inside.
We are in the last stage, took a total of 5 parts 5 Div. Now we are today with the HTML markup will be in Div.
We have taken a first header section layout. We write the following code in the header section. Enter the following code in the body section.
<div class="header"> <h1> Site Name </h1> </div>
The header part of our work will be completed in the next section. In other words, the next part of our menu. Now the end of the header of the div tag and enter the following code.
<div class="menu"> <ul> <li><a href=""> Home </a></li> <li><a href=""> About </a></li> <li><a href=""> About </a></li> <li><a href=""> About </a></li> <li><a href=""> About </a></li> <li><a href=""> About </a></li> </ul> </div>
Now the last part of our menu will complete the next section of our website. In other words, the next part of our content. After the end of the div tag of the menu, enter the following codes.
<div class="content"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div>
Now the last part of our content will complete the next section of our website. In other words, in the next part of the sidebar. Now the content of the div tag to the end of the following type codes
<div class="sidebar"> <ul> <li><a href=""> Home </a></li> <li><a href=""> About </a></li> <li><a href=""> About </a></li> <li><a href=""> About </a></li> <li><a href=""> About </a></li> <li><a href=""> About </a></li> </ul> </div>
Sidebar done our part. Our website will complete the last part. In other words, in the next part of the sidebar. End of sidebar div tag of the type the following codes.
<div class="footer"> Copyright © - Website Name </div>
Now we have all done our footer parts of the code will be together. Save time by typing the following codes.
<!DOCTYPE HTML> <html> <head> <title> This is Title </title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="total"> <div class="header"> <h1> Site Name </h1> </div> <div class="menu"> <ul> <li><a href=""> Home </a></li> <li><a href=""> About </a></li> <li><a href=""> About </a></li> <li><a href=""> About </a></li> <li><a href=""> About </a></li> <li><a href=""> About </a></li> </ul> </div> <div class="content"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div> <div class="sidebar"> <ul> <li><a href=""> Home </a></li> <li><a href=""> About </a></li> <li><a href=""> About </a></li> <li><a href=""> About </a></li> <li><a href=""> About </a></li> <li><a href=""> About </a></li> </ul> </div> <div class="footer"> Copyright © - Website Name </div> </div> </body> </html>
Now, if the index.html file in a browser can view the display as shown below….
I have discussed earlier, the HTML markup of the Web page is just. It is the markup of the Web page. It is because we have yet to show the kind of the CSS code has written. We have long discussed HTML. By the end of the tutorial, we will add the CSS codes.
Look a little, head of the Section 5 have added more style.css file. We Later, style.css will design and write the code. A total of 18 Div I took the line and put in the Div. So, we all Div we can easily control. However, why I did it, the CSS tutorial, we’ll be better able to understand the design.
Many of you are just reading this tutorial, but does not practice. There are others who would copy the code and practice. It’s never going to do that. Practice writing your own code to do all the time. If you copy the code of practice, you may be able to understand a little bit now. However, later, you will have many problems. Then again, maybe you will learn. Many do not understand the issue now. So, if I want to learn better to write the code yourself. So, your code will increase writing skills.
Hope, you have understood. If you have any problem, comment in the comment box. I will try to solve your problem.
