HTML Course | Building Main Content - Section 1
Last Updated :
27 Nov, 2024
The main content of a website is where you show the core information that visitors are looking for. This could be text, images, links, or any important details about your services, products, or ideas.
Course Navigation
HTML Course : Building Main Content - Section 1We just completed building the header for our website. Let's start building the main content for the website. As we described while creating the HTML layout of the website, the main content was divided into three sections as shown below
HTML
<!DOCTYPE html>
<main>
<!-- Section 1 of Main content -->
<section>
</section>
<!-- Section 2 of Main content -->
<section>
</section>
<!-- Section 3 of Main content -->
<section>
</section>
</main>
In this chapter, we will build the section 1 of the main layout. The section 1 of the main layout is highlighted in the below image
HTML Course : Building Main Content - Section 1Let's note down the content and some properties of Section 1 that will be useful in designing
- Title: It contains the title "Welcome to Our Website", which is aligned to the center.
- Sample Text: It has a sample text or we can say a paragraph just below the title which is also aligned to the center.
Steps To Building Section 1 of Main Content
Step 1: Let's start writing HTML for section 1 of our website
- Give the section tag the class container to fix it width to 1200px and align its children to center.
- Create a new div tag inside the section tag with an id "title".
- Add the title "Welcome to Our Website" inside a <h1> tag and assign it an id title.
- Assign the sample tag below the title inside a paragraph <p> tag.
Below is the complete HTML code for Section 1 of the Main layout
HTML
<!DOCTYPE html>
<!-- Main content between Header and Footer -->
<main>
<!-- Section 1 of Main content -->
<section>
<div id="welcome">
<h1 class="title">
Welcome to our website
</h1>
<p>
This is a <strong>Sample Webpage</strong>, a HTML
and CSS template designed by the
<a href="https://www.geeksforgeeks.org" target="_blank"
rel="nofollow">GeeksforGeeks Team</a>.
The photos in this template are designed by our
<b>Graphic Design Team</b>. This template is designed
to explain the basics of HTML and CSS in our first
Web Design course.
</p>
</div>
</section>
<!-- Section 2 of Main content -->
<section>
</section>
<!-- Section 3 of Main content -->
<section>
</section>
</main>
Output: After adding the HTML codes the page index.html will look like as below
HTML Course : Building Main Content - Section 1Step 2: Add styles to the classes to make this look as shown in the template
- Styling div with id (#welcome): This div will include both the title and the sample text. So set its overflow to hidden and use "margin: 0px auto" to align its children to center. Also set its width to 1000px.
css
/*Add below code to style.css*/
#welcome
{ overflow: hidden;
width: 1000px;
margin: 0px auto;
}
- Styling the title h1 tag: Give at top margin of 20px, padding of 20px and align its text to center.
css
/*Add below code to style.css*/
#welcome .title{
margin-top: 20px;
padding: 20px;
text-align: center;
}
- Styling the p tag for sample text: Give it a margin from bottom of 40px and align its text to center.
css
/*Add below code to style.css*/
#welcome p{
margin-bottom: 40px;
text-align: center;
}
The complete CSS for styling the section 1 of the main layout is given below
CSS
/**********************************/
/* Styling Main content Section 1 */
/**********************************/
#welcome
{ overflow: hidden;
width: 1000px;
margin: 0px auto;
}
#welcome .title{
margin-top: 20px;
padding: 20px;
text-align: center;
}
#welcome p{
margin-bottom: 40px;
text-align: center;
}
Output: Open index.html file in a browser to see the below output
HTML Course : Building Main Content - Section 1Everything looks fine till now. But there seems to be some problem. The font's in our project does not seem to be the same as that of the template. We have used the font "Roboto", but it seems to be not working for some reason.
This is because the browser does not support each and every font implicitly. We will have to explicitly define the source of the font within the head tags. Add the below line inside the head tags of index.html file:
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
After including the above line within the head tags. Reload your index.html in the browser
HTML Course : Building Main Content - Section 1
Similar Reads
Introduction to HTML and CSS | Learn to Design Your First Website in Just 1 Week Ready to Design Your First Website in Just 1 Week? With this guide, learn how to build a simple yet stylish website in just one week to gain skills and confidence.This is an introduction course to HTML and CSS which will help you learn all about the basics of HTML and CSS needed to begin with Web De
4 min read
HTML Course | Structure of an HTML Document HTML (Hypertext Markup Language) is used in over 95% of websites and is the foundation of all web pages. It provides the basic structure and content layout. For beginners in web development, learning HTML is the essential first step. Structure of an HTML DocumentWhat is an HTML Document?HTML is a ma
4 min read
HTML Course | First Web Page Printing Hello World So far, we have already learned about the structure of an HTML document, tags, etc in the previous module. Let us use this knowledge to create our first web page.Here, we are creating a simple webpage that displays a "Hello World" message as the perfect starting point. This exercise will help you un
2 min read
HTML Course | Basics of HTML Now that you've created your first "Hello World" webpage, it's time to learn some important concepts of HTML. In this chapter, we’ll cover basic elements that add content and structure, including paragraphs, images, lists, attributes, comments, and more. Table of ContentHTML Paragraph HTML Horizonta
6 min read
HTML Course | Starting the Project - Creating Directories Now we have understood the important concepts of HTML, it's time to start building a structured web project. In this chapter, you’ll learn how to set up directories and organize files efficiently. It is important to have a well-structured directory for both small and large projects, as it makes your
3 min read
HTML Course | Understanding and Building Project Structure Now that you've already set up a basic directory structure, it's time to understand and build the basic structure of our project.Course Navigation Understanding and Building Project StructureWe have already created all of the directories needed for our project. Let's just start writing our HTML code
3 min read
CSS Introduction CSS (Cascading Style Sheets) is a language designed to simplify the process of making web pages presentable.It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing, and positioning.The main advantages are the separation of content (in HTML) and styling (in CSS) and the
4 min read
HTML Course | Creating Navigation Menu A navigation menu is the first element we see in any website. It allows users to explore different pages and sections easily. In this chapter, you’ll learn how to create a navigation menu in HTML.Course Navigation HTML Course : Creating Navigation MenuIn the last chapter, we have created the entire
6 min read
HTML Course | Building Header of the Website The header is the top part of the website and the important area for branding and navigation. In this chapter, you’ll learn how to build a header with the tags which we have already learnt.Course Navigation HTML Course : Building Header of the WebsiteSo far, we have created the navigation bar for th
4 min read
HTML Course | Building Main Content - Section 1 The main content of a website is where you show the core information that visitors are looking for. This could be text, images, links, or any important details about your services, products, or ideas.Course Navigation HTML Course : Building Main Content - Section 1We just completed building the head
4 min read