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>
<!--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
html examples with css samples Html Code Examples
ReplyDelete