HTML5 Basic Example

 HTML5 Basic Example

In this lesson we're going to create a very simple HTML page layout which will be composed of the following:

  • Basic structure of any HTML file.
  • A Header
  • A simple navigation bar
  • An image
  • Some paragraphs
  • A footer
<!doctype html>
<html>
    <head>
        <title>Basic HTML Layout Example</title>
    </head>
    <body>
        <header>
            <nav>
                <h1>Learn HTML</h1>
                <p style="float:right">
                <a href="#">Home </a> |
                <a href="#">About</a> |
                <a href="#">Contact Us</a> |
                <a href="#">Terms of Services</a> |
                <a href="#">Privacy Policy</a> |
                </p>
            </nav>
        </header>
        <br />
        <hr />
        <main>
            <h1 align="center">Lorem Ipsum</h1>
            <img src="imgg.jpg" style="float:left" width="300px" height="300px" />
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod</p> 
            <p>tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,</p> 
            <p> quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
        </main>
        <footer>
            <h2>&copy; Copyright CodeLiber 2018 | All Rights Reserved </h2>
        </footer>
    </body>
</html>

Output:

On Desktop/Laptop Browser:

On Mobile Browser:

💡In this example we have used the <header>, <nav>, <main> & <footer> HTML5 elements.You will more about these elements on our HTML5 Sections tutorial.














    
                                                                                

Post a Comment

Post a Comment (0)