Simple Website Example

Complete Source Code for your first Website


This is a very Simple Website Template you can use to create your first website. It includes comments to help anyone who is just starting with Web Development.



 HTML5 with CSS


<!-- this is a comment it will not be seen on our website-->

<!--below is the code to tell the computer we are using HTML-->

<!DOCTYPE html>
<html>

<!--this is the head where we add the unseen title and style tags for our CSS-->

    <head>
 
        <title>Simple Website</title>
     
        <!--Our CSS Style that uses each tag name to give it attributes-->
     
        <style>
     
            body{
            background-color: lightblue;
            }
         
            header{
                width: 100%;
                height: 50px;
                background-color: yellow;
            }
         
            h1{
                text-align:center;
            }
         
            h3{
                text-align:center;
            }
         
            img{
                height:350px;
                width: 350px;
            }
         
            footer{
                height:30px;
                width:100%;
                background-color: yellow;
            }
        </style>
    </head>
 
    <!--This is our body the area that will be seen on our Webdites-->
 
    <body>
 
    <!--The header is different than head this will be seen. Inside it is our H1 or biggest text tag -->
 
        <header>
            <h1>My First Webpage</h1>
        </header>
     
        <!--This is an H3 tag still larger than normal text but smaller than H1-->
     
        <h3>My First Subheading</h3>
     
        <!--This is our p or paragraph section-->
     
        <p>My first paragraph that will be followed by......
         my first picture.........                blah............blah.......awe......cute.....puppies.....</p>
       
         <!--This is our image tag-->
       
        <img src="https://www.petguide.com/wp-content/uploads/2017/04/cute-puppy-breeds-corgi.jpg">

    <p>Lets add a link to learn more about cute puppies</p>
 
    <!--Link Tag-->
 
    <a href="https://www.akc.org/expert-advice/lifestyle/cute-puppies/">cute puppies</a>
 
    <p>Thats your first basic website lets add a footer before we finish</p>
 
    <!--Footer tag-->
 
    <footer>Thanks</footer>
    </body>
</html>


Click here to run this code



I hope you enjoyed this content please consider supporting the development of Free Code Examples


Thank you and have a Blessed Day




Try these Fun Games by Bobbie:


Ocean Treasures Game


Travel Blast Game New York


Play and Learn Russian


Battlestarship Game



Take a look at these Groovy Codes:


Fun IQ Test


Html Svg Starburst


Javascript Particles Fishes



Read the Latest Breaking Programming and Tech News, Great Articles and Tips:


Codenewz Programming and Tech News






Comments

Post a Comment

Popular posts from this blog