Sadly, they used Flash, which I've only dabbled in and isn't free.
So, is it possible to make a Red Dot Game for free?
Yep. Here's how:
Step 1: Get free hosting. In this example I used Geocities.
Step2: Create a new page and call it Reddot_Home.html.
Step3: Add the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Reddot HTML Tutorial</title>
<style type="text/css" media="all">
<!--
body {
position: absolute;
top: 50px;
left: 100px;
height: 340px;
width: 800px;
}
div {
text-align: center;
}
-->
</style>
</head>
<body>
<div>
<p>Click the Red Dot.
</div>
<a href="http://www.geocities.com/lukeholzmann//Reddot_1.html"><img src="http://img.photobucket.com/albums/v222/TomySky/100.jpg" border="0"></a>
</body>
</html>
Let's look at each line of this code and talk about it.
The top line of code is read by the computer. It basically tells the computer which language it needs to use to read the code.
The next the bit that defines the area of the code. It starts at the top with <html> and then ends the code by "closing" it with </html>.
Next up is the "head" area, which defines what the page is going to do:
Start with
<head>
End with
</head>
Inside the "head" area, we name the website with the <title> tag (which we also close).
Then we get into the <style> section. A <div> is basically just a part of the webpage that is all by itself so you change things inside it but not change the rest of the page.
Now we get into the <body> of the page, which is what people see when they come to your site. The <p> tag "prints" the text after it for people to see. We told the computer to make the text inside the <div> centered in the <style> section. And since the p is inside the div, the text is centered.
Then we have the garbled code for the image. There are two parts for this. The <a href="..."> which defines where the image links to, and the <img src="..."> which is inside the linking text. The "img src" stands for Image Source and includes the URL for the image itself. The "a href" tells the computer where you want it to go if the click the image.
Step 4: Now make another page (this is the page that you will include in the "a href" part of the image).
Step 5: Repeat.
I have made a very, very short sample of this in action on my Geocities page. Give it a try, and then be sure to "View Page Source" if you need to see the other page's code.
~Luke Holzmann
Your Media Production Mentor
2 comments :
Thanks. I added this to my favorites. It's very helpful for a not-so-computer-smart html dabbler like myself!
Glad to hear it!
Please be sure to let me know if you ever have any questions/want to learn how to do something.
~Luke
Post a Comment