Tutorial
How To Create the Body of Your Homepage With HTML
In this tutorial, we will recreate the body or middle section of our demonstration website using HTML <div> elements and HTML style properties.
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 <div> containers that we learned about in a previous tutorial in this series. Note that if you continue learning front-end skills such as CSS, there are improved methods for arranging content on a webpage that build upon the methods we’ll use in this tutorial.
How To Add a Large Profile Image to Your Webpage
First, we’ll add a large profile image as displayed in the demonstration site. Before we start, make sure you have selected a large profile image or other image to use. We’ll be displaying our image at 400 by 600 pixels, so make sure your image size will work with those dimensions. 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, copy the following code snippet after the last closing </div> and before the closing <body> tag in your “index.html” file:
...
<!--Second section-->
<img src="images/large-profile.jpg" style="height:600px; margin:100px; float: left;" alt="A pretend invisible person wearing a hat, glasses, and coat.">
...
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 ourhtmlfile for the purpose of human readability - The
<img>tag tells the browser we are inserting an image into the webpage. - The
src="images/large-profile.jpg"tells the browser where to find the image that is being displayed. - The
styleattribute allows us to define theheight,margin, andfloatproperties. Themarginproperty allows you to specify the size of blank space surrounding an HTML element. Thefloatproperty allows you to “float” the image to the right and left side of the display while allowing text to flow around its side. - The
altattribute allows you to add alternative text to your image to improve site accessibility to visitors who use screen readers. Don’t forget to change the alternative text in this code snippet to a description that matches your image.
Save your “index.html” file and reload it in the browser. The section below the top section of your webpage should now look like this:
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 and that your image is located in the file path you specified with the src attribute.
How To Add an “About Me” Section to Your Webpage
Next, we will add a paragraph of text to the right of the image. Feel free to substitute the dummy text in this example with text of your own choosing.
We will create this text section by creating a <div> container and inserting text content inside.
In your “index.html” file, add the following code snippet after the image you added in the step above and before the closing </body> tag:
...
<div style="height:600px; margin:100px;">
<h1>Hello </h1>
<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. Tussa
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="mailto:Sammy@SampleEmail.com">Sammy@SampleEmail.com </a></p>
</div>
Let’s pause briefly to review each part of this code snippet:
- The
<div style="height:600px; margin:100px;">element creates a<div>container that has aheightof 600 pixels andmarginof 100 pixels. - The
<h1>element adds a text header to our content. - The two
<p style="line-height: 2.0; font-size:20px;">tags create two paragraphs whose line height is expanded to 2.0 and whose font is 20 pixels. - The '<a href=“mailto:Sammy@SampleEmail.com”>Sammy@SampleEmail.com </a>` adds an email link to the email address.
- The closing
</div>tag closes our<div>container.
Save your “index.html” file and reload it in the browser. The section below the top section of your webpage should now look like this:
Your image and text should now be displayed as they are in the demonstration website. You may adjust the style properties in the code snippets to change the height, margins, font size or other style properties of your content.
Note that if your browser viewport is shrunk extensively, your text will eventually flow over into other elements on your page. To create layouts that are responsive to a range of devices, you’ll need to learn additional front end skills such as CSS (tutorial series coming soon) and Flexbox.
You should now have an understanding of how to arrange images and text side by side using <div> containers, the style attribute, and style properties. In the next and final tutorial of the series, we’ll learn how to create a website footer with the HTML <footer> element.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Tutorial 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.
author
Senior Manager, DevEd
Open source advocate and lover of education, culture, and community.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Get our biweekly newsletter
Sign up for Infrastructure as a Newsletter.
Hollie's Hub for Good
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Become a contributor
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
