landing page layout with HTML only

Learn how to create a landing page using HTML only ( home page HtmL Project )

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.

source code.

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <title>HTML Project By Spanking Solutions</title>
<body background="background-image.jpg" alink="black" vlink="white">
    <h3 align="center">
        <font face="lato" size="6" color="white" > SKS</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;
    <h1 align="center">
        <font face="lato" color="blue" size="7">
            Create a simple and Beautiful Web page
    <h3 align="center">
        <font face="lato" color="white" size="6">
            Using HTML only (no css used)
   <h2 align="center">
        <a href="">
            <font size="6"  color="black">  Learn More  </font>

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 “Spanking Solution ” Home page.

Leave a Comment

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