In this tutorial, we will illustrate the process of dividing an HTML page into two sections: vertical and horizontal. Exploring how to split an HTML page into two vertical sections and two horizontal sections is a common practice in web development.
The concept we are focusing on in this solution is to split an HTML page into both vertical and horizontal segments. While there are numerous methods to achieve this, our goal is to guide you in discovering the most straightforward approach available.
Today, we will illustrate how to divide an HTML page into two sections, either vertically or horizontally.
Instructions for Dividing an HTML Page into 2 Parts Vertically, Stepwise:
Moreover, without delaying any longer, the division element along with its child element, the section element, can be employed for this task. However, the division element is commonly used for this particular purpose.
In order to conduct oneself in a professional manner, we will demonstrate the process of utilizing division elements to divide an HTML page vertically. Another programming technique that is commonly used is the float property with a value of left.
This means that it positions the page to the left, aligning everything vertically. The following code snippet demonstrates this:
<!DOCTYPE html>
<html>
<head>
<title> Vertical Division<title>
</head>
<body>
<div style="background-color: blue; width: 100%; height: 650px;">
<div style="background-color: red; width: 50%; height: 550px; float:left;">
This is the first division to have a vertical alignment.
</div>
<div style="background-color: yellow; width:50%; height: 550px; float:left;">
This is the second division to have a vertical alignment.
</div>
</div>
</body>
</html>
- To inform the web browser about the edition of HTML that document is written in, one first type! <DOCTYPE html>.
- The <html> element is used to denote the start of a Html file.
- As mentioned previously, the <head> tag is now used to provide details about a web page. A <title> element is included in this tag to enable us to provide the title of the website. The tags "head" and "title" are paired tags. Consequently, both conclude with the tags </head> and </title>, respectively.
- The <body> element is used to specify the body of the website. This document contains all of the website's content. Since we wish to indicate the region that we want to split vertically into two halves, a div tag is placed here in the body tag.
- Give height measurements that are appropriate for your screen if you wish to split the whole body.
- Next, we must identify two areas; in this case, we do so by applying two div tags. After all this, the remaining work is completed using CSS; here, we give the areas half their parent's width then use the floating left attribute to align the div tags left to left.
- The last step is to close the content & html tags with the corresponding </body> and </html> tags.
Instructions for Dividing an HTML Page into 2 Parts Horizontally, Stepwise:
To achieve this without delay, you can utilize the div element along with its child tag, the section tag. While the section tag can also be employed for this purpose, it is more common to utilize the div tag for this task.
Consequently, in order to conduct oneself in a professional manner, we will now demonstrate the utilization of division elements for the purpose of logically partitioning an HTML document into segments. Should you wish to delve deeper into the concept of vertical division, a comprehensive article has been authored on this topic previously. Feel free to leverage this page as a reference point for further exploration.
<!DOCTYPE html>
<html>
<head>
<title> Horizontal Division<title>
</head>
<body>
<div style="background-color: blue; width: 100%; height: 650px;">
<div style="background-color: red; width: 100%; height: 300px;">
This is the first division to have a horizontal alignment.
</div>
<div style="background-color: yellow; width:100%; height: 300px;">
This is the second division to have a horizontal alignment.
</div>
</div>
</body>
</html>
- The first thing we do now is type<! DOCTYPE html>, which tells the web browser which edition of HTML the document is written in.
- The <html> element is used to denote the start of a Html file.
- As mentioned previously, the <head> tag is now used to provide information about a web page. The usage of the <title> tag in this tag enables us to declare the title of the website. The tags "head" and "title" are paired tags. Therefore, both contain the closing tags </head> and </title>, respectively.
- The body> element is used to specify the body of the website. Here are written all the information that will appear on the website.
- Here, we build a div element with certain width and height in the body tag before letting you choose the background colour.
- Two additional div tags are created within the main div. Additionally, its width must match that of the main div, but you should provide them a separate but lower height than that of the main div.
- Keep in mind that the height of the main div is equal to the total of the heights of the sub div tags.
- As you can see in your browser right now, the site is split into two sections, each of which has the height you requested.
- The last step is to finish the content and html tags with the corresponding </body> and </html> tags.
Conclusion :-
In summary, it can be inferred that by using division elements, it is possible to divide an HTML page into sections both vertically and horizontally.
I trust this guide on dividing an HTML page into two sections will prove beneficial to you, and the methods and techniques outlined above will be straightforward to implement.