How to Make a Website With HTML
by Luca Stringer in Design > Websites
18 Views, 1 Favorites, 0 Comments
How to Make a Website With HTML
.png)
Hello, I recently created a website for my business with HTML so I decided to make one for you guys. Itis easy of you have a template which I created for you.
Supplies
For this you will need a text editor like Google docs and that's it!
Brainstorming
If you know exactly what website you want to make then you can skip this step. Brainstorm what website you want to make.
Use the Template
I made you an HTML template. You can get HTML templates online for free but there are no really simple to make. Here is the HTML, you can just copy and paste it into a Google doc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<style>
body {
margin: 0;
font-family: "font-family: 'Times New Roman', Times, serif;"
color:#a84f55 ;
}
header {
background: #4fa85e;
padding: 20px;
text-align: center;
}
header h1 {
margin: 0;
font-size: 2rem;
}
nav {
background: #a8a54f;
display: flex;
justify-content: center;
gap: 20px;
padding: 12px 0;
}
nav a {
color: white;
text-decoration: none;
font-weight: bold;
}
.hero {
background: #2D4F2F center/cover no-repeat;
padding: 120px 20px;
text-align: center;
background-attachment: fixed;
}
.hero h2 {
font-size: 2.4rem;
margin-bottom: 10px;
}
.hero p {
font-size: 1.2rem;
}
.content {
background: #f76f07 center/cover no-repeat;
padding: 60px 20px;
line-height: 1.7;
background-attachment: fixed;
}
.content p {
max-width: 900px;
margin: auto;
background: rgba(0,0,0,0.6);
padding: 25px;
border-radius: 10px;
}
.contact {
Background: #a8a54f
padding: 60px 20px;
background-attachment: fixed;
}
.contact div {
max-width: 600px;
margin: auto;
background: rgba(0,0,0,0.6);
padding: 30px;
border-radius: 10px;
}
footer {
Background:
/cover no-repeat;
text-align: center;
padding: 40px 20px;
}
footer p {
background: rgba(0,0,0,0.6);
display: inline-block;
padding: 10px 20px;
border-radius: 8px;
}
a {
color: #aee6b0;
}
</style>
</head>
<body>
<header>
<h1>Test</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">Products</a>
<a href="#">About</a>
<a href="#">Contact Us</a>
<a href="#">More</a>
</nav>
<section class="hero">
<h2>test</p>
</section>
<section class="content">
<p>
Welcome to Instructables!
I love this!
</p>
</section>
<section class="contact">
<div>
<h3>Contact Information</h3>
<p></p>
<p></p> </div>
</section>
<footer>
<p></p>
</footer>
</body>
</html>
Edit the Template
Once you've pasted the HTML onto a Google doc you can edit the text and edit the colors. Trust me. It's very easy. Edit the colors with the Google color picker. You can edit the text by ctr+f and search for test.
Downoad
Once you're done with editing download the Google doc as a .txt file. Ten once your in your file system change it from test.txt to test.html that changes the file to an HTML.
Open Your Static Website
To open your HTML just click on HTML file and it will take you to your website on Google or your browser. If there is an error or you don't like the about the HTML you can edit in Google docs and repeat the whole process. If you want an image you can do the img< tag and source the image, this is a very simple website though.
Hosting It
If you love your website and want to share I with the world you can host it for free. Or you can but a custom domain like your domain.com You need to use a free hosting service like Github Pages. To do that you will need to get a free Github account and then make a repository named yourwebsitename.github.io replace yourwebsitname with Your Website Name It has to be .github.io Then insert your HTML file. Then go to the pages settings in the settings panel and set the root to main. I made a YouTube video on how to use Github pages. Name your HTML file index.html before inserting it into GitHub.
Finish
YES!!! You've finished! Now you can show your friends and family that you made a website!