One place for hosting & domains

      How To Create the Middle Section of Your Homepage With HTML



      Part of the Series:
      How To Build a Website With HTML

      This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

      At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

      In this tutorial, we will recreate the middle section of our demonstration website using HTML tables.

      Middle section

      The middle section of our demonstration website contains a large profile image and a short paragraph of text displayed side by side. We can achieve this layout by using the HTML <table> element, which allows us to arrange content into rows and columns. Note that if you continue learning front-end skills such as CSS, there are improved methods for arranging content on a webpage. However, HTML tables provide an effective and simple way for arranging content when you are only using HTML.

      We will create a simple table that contains one row and two columns. First, let’s add all of our table elements to create the structure of our table. Paste the following code snippet after your closing </div> tag:

      <!--Second section--> 
        <table>
            <tr>
              <td>
              </td>
              <td>
              </td>
            </tr>
          </table>
      

      Let’s pause briefly to review each part of this code snippet:

      • The <!--Second section--> is a comment that will not be read by the browser and is used to help organize our html file for the purpose of human readability
      • The single set of <table> tags create the table
      • The single set of <tr> tags create a table row
      • The two sets of <td> tags (table data tags) create two columns

      The content that we place in the first set of <td> tags will constitute the first column and the content that we place in the second set of <td> tags will constitute the second column.

      Before we add content to our table, make sure you have selected a large profile image or other image to use. If you do not have an image, you can download the image from our demo site. Once you have your image, save it in your images folder. (For a refresher on how to add images to webpages using HTML, please visit our tutorial HTML Images from earlier in this tutorial series).

      Next, we will add the image by placing an <img> element inside the first set of <td> tags. Add the following <img> element in between the first two <td> tags.

      <img src="https://www.digitalocean.com/community/tutorials/ImageLocation" ; style="height:600px; margin:70px; margin-left:100px;" />
      

      Make sure to change the file path of the src attribute. Note that we are using the style attribute to specify the height and margin sizes of the image. We are also making the left margin 30 pixels greater than the other margins by using the margin-left property. The HTML code for your table should now be as follows:

      <!--Second section--> 
        <table>
            <tr>
              <td>
            <img src="https://www.digitalocean.com/community/tutorials/ImageLocation" ; style="height:600px; margin:70px; margin-left:100px;" />
              </td>
              <td>
              </td>
            </tr>
          </table>
      

      Save your file and reload it in the browser. The section below the top section of your webpage should be like this:

      Added large profile image

      Next we’ll add the text in the second column. Feel free to use the sample text for demonstration purposes. You can add your personalized text later.

      In between the second set of <td> tags, add the following code snippet:

      <h1> Hello </h1>
      
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et magnis dis parturient montes nascetur ridiculus mus. Purus semper eget duis at tellus at urna condimentum mattis. Turpis in eu mi bibendum neque egestas. Rhoncus dolor purus non enim praesent elementum facilisis. Ipsum nunc aliquet bibendum enim facilisis gravida. Cursus turpis  tincidunt dui ut ornare lectus. Enim nec dui nunc mattis enim ut. Sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Ultricies mi quis hendrerit dolor magna. Elit eget gravida cum sociis natoque penatibus et magnis dis. Enim tortor at auctor urna nunc id cursus metus. </p>
      
      <p>Email me at <a href="https://www.digitalocean.com/community/tutorials/mailto:Sammy@SampleEmail.com">Sammy@SampleEmail.com </a></p>
      

      In the table we’ve created text content using a variety of elements. The <h1> element creates a bold text heading, the <p> elements create paragraph text, and the <a> element creates a link to a sample email address.

      Save the file and reload it to check your results in the browser. You should receive something like this:

      Added hello text

      Note that the style of the text is different from the style of the text on the demonstration website. The positioning of the text content is different as is the font size and the line spacing. Let’s now add some attributes and properties to style this column of content.

      First, we’ll add the valign and style attributes to the second opening <td> element that wraps around the text so that the element is now as follows:

      <td valign="top" style="padding-top:45px; padding-right:110px; padding-left:40px;">
      

      Here we have used the valign attribute to position the text content to the “top” of the <td> element. The valign attribute is a special attribute for <td> elements that aligns content on a vertical basis.

      We have also added the style attribute to add padding specifications to the top, right, and left of the element. Padding creates space between the border of an element and any content placed inside the element, such as text.

      Save your file and reload it in the browser. You should receive something like this:

      Styled hello text

      Next we will change the font size and line height of the paragraph content by adding style attributes to the <p> elements. Add the highlighted attributes to both of the <p> elements so that the opening <p> tags are like so:

        <p style="line-height: 2.0; font-size:20px;">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et magnis dis parturient montes nascetur ridiculus mus. Purus semper eget duis at tellus at urna condimentum
                  mattis. Turpis in eu mi bibendum neque egestas. Rhoncus dolor purus non enim praesent elementum facilisis. Ipsum nunc aliquet bibendum enim facilisis gravida. Cursus turpis sa tincidunt dui ut ornare lectus. Enim nec dui nunc mattis
                  enim ut. Sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. sa ultricies mi quis hendrerit dolor magna. Elit eget gravida cum sociis natoque penatibus et magnis dis. Enim tortor at auctor urna nunc id
                  cursus metus. </p>
        <p style="line-height: 2.0; font-size:20px;">Email me at <a href="https://www.digitalocean.com/community/tutorials/mailto:Sammy@SampleEmail.com">Sammy@SampleEmail.com </a>
      </p>
      

      Save your file and reload it in the browser to check your results. You should receive something like this:

      Final styling for middle section

      If you have errors, check to make sure that you have added all the HTML code in the correct area of the index.html file.

      You should now have an understanding of how to use tables to arrange content on a webpage and how to add styling elements to table content. To try arranging content on a page with different combinations of rows and columns, please visit the tutorial on HTML Tables from earlier in this tutorial series.



      Source link