HTML Course | Building Main Content – Section 1

Course Navigation

We 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- Main content between Header and Footer -->
<main>
    <!-- Section 1 of Main content -->
    <section>
                   
    </section>
   
    <!-- Section 2 of Main content -->
    <section>
                   
    </section>
   
    <!-- Section 3 of Main content -->
    <section>
                   
    </section>
</main>

chevron_right


In this post, we will build the section 1 of the main layout. The section 1 of the main layout is highlighted in the below image:

Let’s note down the content and some properties of the Section 1 that will be useful in designing:

  • Title: It contains a title “Welcome to Our Webiste”, 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 center.

Let’s start writing HTML for the section 1 of our website, follow the below steps:



  • Give the section tag the class container to fix it width to 1200px and align it’s childrens to center.
  • Create a new div tag inside the section tag with an id “title“.
  • Add the title “Welcome to Our Website” inside an <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 Main layout:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- 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 Desgin Team</b>. This template is desgined 
                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>

chevron_right


After adding the HTML codes the page index.html will look like as below:

Let’s 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 it’s overflow to hidden and use “margin: 0px auto” to align it’s children to center. Also set it’s width to 1000px.
    Add below code to style.css:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    #welcome
    {    overflow: hidden;
        width: 1000px;
        margin: 0px auto;
    }

    chevron_right

    
    

  • Styling the title h1 tag: Give at top margin of 20px, padding of 20px and align it’s text to center.
    Add below code to style.css:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    #welcome .title{
        margin-top: 20px;
        padding: 20px;
        text-align: center;
    }

    chevron_right

    
    

  • Styling the p tag for sample text: Give it a margin from bottom of 40px and align it’s text to center.
    Add below code to style.css:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    #welcome p{
        margin-bottom: 40px;
        text-align: center;
    }

    chevron_right

    
    

The complete CSS for styling the section 1 of the main layout is given below:

filter_none

edit
close

play_arrow

link
brightness_4
code

/**********************************/
/* 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;
}

chevron_right


That’s it, on opening the index.html file in a browser now, you will see the below output:

Everything 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>

chevron_right


After including the above line within the head tags. Reload your index.html in the browser:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.