CREATE A LANDING PAGE USING HTML ONLY

landing web page with HTML only

A brief overview of How to Create a Landing Page in HTML.

  • set a background image.
  • create a navigation bar and stick it on the top of the screen.
  • Add some content for the home page.

Tags that are used to create this page.

  • HTML is a markup language used to create web pages.
  • It consists of tags that define the contents of the web page.
  • These tags are <html> ,  <head> , <title> , <body> ,  <h1> to <h6> ,<a> and many more.  Click the link below to learn about these tags.
  •  LEARN MORE

The source code for this project is available for download by clicking ‘Download Now’ or cloning the GitHub repository.

Source Code

<html lang="en">
<head>
    <title>HTML Project By Sparkify Solutions</title>
</head>
<body background="background-image.jpg" alink="black" vlink="white">
 
<!--header Section start-->
 
    <h3 align="center">
        <font face="lato" size="6" color="white" >Sparkify Solutions</font>
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        <font face="cinzel" size="4">
            <a href="#">Home</a>
            &nbsp; &nbsp; &nbsp;
            <a href="#">Portfolio</a>
            &nbsp; &nbsp; &nbsp;
            <a href="#">Blog</a>
            &nbsp; &nbsp; &nbsp;
            <a href="#">About us</a>
            &nbsp; &nbsp; &nbsp;
            <a href="#">Contact us</a>
            &nbsp; &nbsp; &nbsp;
        </font>
    </h3>
 
<!--header Section End-->
<!-- Main Section Start-->
 
    <hr>
    <br><br><br><br><br><br><br><br>
    <h1 align="center">
        <font face="lato" color="blue" size="6">
            Responsive web design course by Sparkify Solutions
        </font>
    </h1>
    <h3 align="center">
        <font face="lato" color="green" size="5">
            Enroll now and get a free certificate
        </font>
    </h3>
    <br>
   <h2 align="center">
        <a href="https://spankingsolutions.com/">
            <font size="6"  color="black">  Visit Now  </font>
        </a>
   </h2>
 
<!-- Main Section End-->
<!-- Footer Start -->
 
<br><br><br><br><br><br>
<hr>
<h5 align="center">
CopyRight 2024 || By Sparkify Solutions
</h5>
 
<!--footer end-->
</body>
</html>

Learn how to create a home page in html only

Overall Structure

Body Tag: The HTML code Begins with <body> Tag which contains the entire Visible content of the web page.

Background: the property is used to set the background image on the web page. CLICK HERE to download the background image.

vlink attribute is used to set the colour of links as white.

alink attribute is used to set the colour of links as black after they are clicked.

Header Elements

Header Level 3<h3> Tag is used to establish a heading section within the page.

Company logo: Within <h3> Tag,  <font> enclose the company logo text, “SKS”.

Navigation links: Another <font> tag within <h3> tag houses the navigation links: “Home”, “Portfolio”, “Blogs”, “About us”, “Contact us”.

Main Content:

Heading Level 1: An <h1> tag presents the primary heading of the page, “Create a simple and beautiful web page”.

Heading Level 3: An <h3 tag introduces a subheading, “Using HTML only”.

Hyperlink: An anchor tag <a> within <h2> creates a hyperlink to “Sparkify Solutions ” Home page.

Footer Elements

Heading Level 5: An <h5> tag contains copyright text and a company name.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top