DigitalOcean Kubernetes: new control plane is faster and free, enable HA for 99.95% uptime SLA

    Related

    What is an HTML Tag?
    Tutorial
    How To Build a Website With HTML eBook
    Tutorial
    Tutorial Series: How To Build a Website with HTML
    1/23 How To Set Up Your HTML Project With VS Code
    2/23 How To View the Source Code of an HTML Document
    3/23 How To Use and Understand HTML Elements
    4/23 How To Use Inline-level and Block-level Elements in HTML
    5/23 How To Nest HTML Elements
    6/23 How To Use HTML Attributes
    7/23 How To Add Images To Your Webpage Using HTML
    8/23 How To Add Hyperlinks in HTML
    9/23 How To Use a <div>, the HTML Content Division Element
    10/23 How To Change the Color of HTML Elements
    11/23 How To Set Up Your HTML Website Project
    12/23 How To Add an HTML <head> Element To Your Webpage
    13/23 How To Add a Favicon to Your Website with HTML
    14/23 How To Style the HTML <body> Element
    15/23 How to Create the Top Section of Your Homepage With HTML
    16/23 How To Add a Background Image to the Top Section of Your Webpage With HTML
    17/23 How To Add a Styled Profile Image To Your Webpage With HTML
    18/23 How To Add and Style a Title To Your Webpage With HTML
    19/23 How To Create Additional Webpages on Your HTML Website
    20/23 How To Center or Align Text and Images on Your Webpage with HTML
    21/23 How To Create the Body of Your Homepage With HTML
    22/23 How To Add a Footer To Your Webpage With HTML
    23/23 How To Add Twitter Card and Open Graph Social Metadata to Your Webpage with HTML

    // Tutorial //

    How to Create the Top Section of Your Homepage With HTML

    Published on July 28, 2020 · Updated on August 9, 2021
    Default avatar
    By Erin Glass
    Senior Developer Educator
    How to Create the Top Section of Your Homepage With HTML

    We will now begin adding content by replicating the top section of the demonstration website.

    Top section of demonstration website

    This top section is composed of a large background image, a small profile image, a text header, a text subheader, and a link. Each of these pieces of content are styled and positioned with HTML.

    In the remaining tutorials of this series, we’ll learn how to use HTML to recreate this content on a new webpage.

    Next in series: How To Add a Background Image to the Top Section of Your Webpage With HTML ->

    Want to learn more? Join the DigitalOcean Community!

    Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

    Sign up

    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.

    HTMLSpin Up
    Browse Series: 23 articles
    About the authors
    Default avatar
    Erin Glass

    author

    Senior Developer Educator

    Open source advocate and lover of education, culture, and community.

    Still looking for an answer?

    Ask a questionSearch for more help
    Was this helpful?
    Leave a comment
    Creative CommonsThis work is licensed under a Creative Commons Attribution-NonCommercial- ShareAlike 4.0 International License.

    Try DigitalOcean for free

    Click below to sign up and get $100 of credit to try our products over 60 days!

    Sign up