How to build a basic website -tutorial
Che-kai here, and recently I have been learning html and Javascript, and I wish to explaing how to make a simple website such as:
and how to publish it.
Before we start, you need:
- a cup of water, tea, coffee, or other beverage
- a computer
- the atom app
- a brain
So without further ado, let’s code.
The Coding
<!--<!doctype html><html lang="en">
<head>
<meta charset="utf-8"><title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint"><link rel="stylesheet" href="css/styles.css?v=1.0"></head><body style="background-image:url('./face.gif');background-repeat:repeat;">
<script scr="js/scripts.js"></script>
test
</body>
</html>
--><!doctype html><html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<meta charset="utf-8"><title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint"><link rvestor.el="stylesheet" href="css/styles.css?v=1.0"><style>
.container {
position: relative;
width: 100%;
max-width: 400px;
}.container img {
width: 100%;
height: auto;
}.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}.container .btn:hover {
background-color: black;
}
img:hover {
animation: shake 0.5s;
animation-iteration-count: infinite;
}@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
</style></head><body style="background-image:url('./face2.gif');background-repeat:repeat;background-size:100px 100px;">
<script src="js/scripts.js"></script>
<h2>Button on Image</h2>
<p>Add a button to an image:</p>
<img src="derp.jpg" alt="Derp image" width="300" height="300">
<div class="container">
<img src="derp.jpg" alt="Snow" style="width:100%">
<button class="btn">Button</button>
</div>
<br>
<center>
<div style="position: relative; width: 200px">
<!-- <img src="/spin.gif"> -->
<img src="Monorailcat.gif">
<div id="ethan" style="position: absolute; top: 12px; right: 2px; width: 80px; background-color: #aaa; color: #f00; padding: 5px; display: none">
You are officially Ethan :-)</center>
<br>
<center>
<big>Monorailcat LEFT <span id="spin">0 stations</span>!</big>
</center>
</body>
<script>
$(window).load(function (){
var spins = 0;
setInterval(function () {
spins = spins + 3;
$("#spin").text(spins + " spin" + (stations != 1 ? "s" : ""));
if (spins == 10)
$("#ethan").show();
else if (spins == 17)
$("#ethan").hide();
}, 4205);
});
</script></html>
That was the code I programmed on Atom. The website is the one that I showed as a picture at the very top.
Here is the basic format of a HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body><h1>This is a Heading</h1>
<p>This is a paragraph.</p></body>
</html>
The body usally goes like this:
<body style="background-image:url('./face2.gif');background-repeat:repeat;background-size:100px 100px;">
<script src="js/scripts.js"></script>
<h2>Button on Image</h2>
<p>Add a button to an image:</p>
<img src="derp.jpg" alt="Derp image" width="300" height="300">
<div class="container">
<img src="derp.jpg" alt="Snow" style="width:100%">
<button class="btn">Button</button>
</div>
<br>
<center>
<div style="position: relative; width: 200px">
<!-- <img src="/spin.gif"> -->
<img src="Monorailcat.gif">
<div id="ethan" style="position: absolute; top: 12px; right: 2px; width: 80px; background-color: #aaa; color: #f00; padding: 5px; display: none">
You are officially Ethan :-)</center>
<br>
<center>
<big>Monorailcat LEFT <span id="spin">0 stations</span>!</big>
</center>
</body>
This is the body of my code.
<body style="background-image:url('./face2.gif');background-repeat:repeat;background-size:100px 100px;">This is where the background comes in. Download a image, and paste it in the background image insert place: (‘’). I used the repeat function here, and if you put your background into a similar size, there will be dozens of your images as backgrounds.
=====================================
<h2>Button on Image</h2>
<p>Add a button to an image:</p>
<img src="derp.jpg" alt="Derp image" width="300" height="300">
<div class="container">
<img src="derp.jpg" alt="Snow" style="width:100%">
<button class="btn">Button</button>
</div>I was messing with the button function here, knowing that buttons are essential. Though when you click it, nothing happens(yet), the button and the click effect will show. I basically entered how the button schould look like here. The style and the size are all inputed, and the image where the button schould be on is also here.
Here is the nessecary style input
.container {
position: relative;
width: 100%;
max-width: 400px;
}.container img {
width: 100%;
height: auto;
}
========================================
<br>
<center>
<div style="position: relative; width: 200px">
<!-- <img src="/spin.gif"> -->
<img src="Monorailcat.gif">
<div id="ethan" style="position: absolute; top: 12px; right: 2px; width: 80px; background-color: #aaa; color: #f00; padding: 5px; display: none">
You are officially Ethan :-</center>
<br>
<center>
<big>Monorailcat LEFT <span id="spin">0 stations</span>!</big>
</center>
</body>
This is all talking about the gif you see in the center of the page. As always, size and style schould be given. And the text under it, which changes, are in the code. If you want a similar effect, copy it and change it a bit.
The shaking effect
The best part of my website is the shaking effect, when the cursor hovers over an image or gif or video, it starts to shake. Here is the code for it:
<style>
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}.container .btn:hover {
background-color: black;
}
img:hover {
animation: shake 0.5s;
animation-iteration-count: infinite;
}@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) %rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
</style>
The 0% to 100% is explaining, how it schould change until the movement is completed. Copy paste this to the <style> to have the shaking effect to your images.
<img src="derp.jpg" alt="Derp image" width="300" height="300">Dont forget to add images: this wont work on backgrounds.