7

How To Create the Body of Your Homepage With HTML

 3 years ago
source link: https://www.digitalocean.com/community/tutorials/how-to-create-the-body-of-your-homepage-with-html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
How To Create the Body of Your Homepage With HTML
How To Create the Body of Your Homepage With HTML

Tutorial

How To Create the Body of Your Homepage With HTML

HTMLSpin Up

  • By Erin Glass

    Last Validated onAugust 9, 2021 Originally Published onJuly 29, 2020 5.2k views

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 body or middle section of our demonstration website using HTML <div> elements and HTML style properties.

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 <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 our html file 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 style attribute allows us to define the height, margin, and float properties. The margin property allows you to specify the size of blank space surrounding an HTML element. The float property allows you to “float” the image to the right and left side of the display while allowing text to flow around its side.
  • The alt attribute 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:

Middle section of webpage with large profile image

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:[email protected]">[email protected] </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 a height of 600 pixels and margin of 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:[email protected]”>[email protected] </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:

Final styling for middle section

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.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK