So what are we going to do. Many, if not all, should know that the supposed end of the world will be coming on 21st December this year. Lynx already played on that theme with their anti-persperant "FINAL". Now you can have some fun too.
As always open up a blank notepad (or the text editor program you use) and create the base template lie below, if you already have one, or know how to make one then, then just skip ahead. Remember to save the file as a .htm file or it won't work properly.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
Now that we have that set-up we can start to create our masterpiece. First off will be a page title. Something fitting like, CIA SECURE DATABANKS, should suffice. Add this line to the <head> section
<title> CIA SECURE DATABANKS </title>
Wonderful, now that we have our contextual title, we can begin on the process of the actual content. First we need a page title. For this 'joke' we are going to keep to the Server log idea, so what better title than; "Server Datalog: 20th December 2012". This allows us to create a serverlog that shows the events on the night before the end. The heading should contain something similar to this, again under the <head> tag;
<h1> Server Datalog: 20<sup>th</sup> December 2012 <h1>
The <sup></sup> tags are optional however they will register the 'th' as superscript, meaning it will be raised slight above the rest of the text to give the aesthetic look of the date but this is not needed if you wish to omit it.
You can choose to underline it ( <u></u> ) but omitting it adds to that core process aesthetic feel of the page. Now for the real meat of the joke, the body. It may be better to add some aesthetic attributes to the body, I used a matrix-esqe look for that added "kick". To set this we simply edit the <body> tag with coding similar to this, you can edit the colours to what you see fit and there are around 16 HTML accepted colour phrases;
<body style="background-color: black; color: green">
Notice that the semi-colon is only used when another statement is in use, the final statement does not need one, just finish it with closing speech marks. So here is what we should have so far, as ever the HTML code is right next to the Internet Explorer output.
Now we need to fill the body with content, for the server-log aesthetics we should start by using an unordered list ( <ul> </ul>). This will create the bullet points of the log content. We will also need to use the <li> </li> tags to define each list item. I have used some example content but you can always adjust it to your liking; (ignore the hyperlinks, that is just the format when that particular text is entered into a browsing program)
<ul>
<li>12:00hours: UFO sighted</li><li>12:20hours: 5 more appear</li>
<li>12:25hours: America under attack</li>
<li>12:30hours: London, Paris and Washington unreachable</li>
<li>13:00hours: FATAL ERROR!!! SERVER BREACH #FFA9EE000000</li>
<li>13:03hours: CONNECTION LOST</li>
<li>13:46hours: CONNECTION REESTABLISHED with Washington Exchange</li>
<li>14:05hours: cite_url"http://www.cnn.com/": Invasion Death Toll Reaches 4Billion</li>
<li>15:00hours: cite_url"http://www.msnmews.com/": African Continent Destroyed</li>
<li>15:08hours: POWER FAILURE!!! SWITCHING TO SECONDARY POWER</li>
<li>ERROR!ERROR!ERROR!ERROR!ERROR! : SERVER #46EA8A23FE COMPROMISED, SOURCE UNKNOWN</li>
<li>@"!@"@£@@**$*£"@@!!!!@@$$$££$</li>
</ul>
<h1><b>Connecting to HAARP STATION #1692...</b></h1>
<h1><b>CONNECTION ESTABLISHED</b></h1>
<p> SERVER: Anyone still there?</p>
<p>HAARP: Where's your God now!</p>
<p>SERVER: #ALERT# ERROR404!!! CONNECTION LOST!!!
<p> SERVER STATUS: 10:59:46PM: Loading... </p>
I have also added some extra parts to continue the 'story' of the prank. You may notice that there are also some other tags hidden such as the <b> </b> tag. This tag denotes any text enclosed to be set in a bold format. You can add, omit or edit any content as you please and If you wish to see a live version of the prank visit http://www.code4robots.co/.
The full coding can be found below.
<DOCTYPE HTML>
<html>
<head><title>CIA SECURE DATABANKS</title>
<h1> Server Datalog: 20<sup>th</sup> December 2012 </h1>
</head>
<body style="background-color: black; color: green">
<ul>
<li>12:20hours: 5 more appear</li>
<li>12:25hours: America under attack</li>
<li>12:30hours: London, Paris and Washington unreachable</li>
<li>13:00hours: FATAL ERROR!!! SERVER BREACH #FFA9EE000000</li>
<li>13:03hours: CONNECTION LOST</li>
<li>13:46hours: CONNECTION REESTABLISHED with Washington Exchange</li>
<li>14:05hours: cite_url"http://www.cnn.com/": Invasion Death Toll Reaches 4Billion</li>
<li>15:00hours: cite_url"http://www.msnmews.com/": African Continent Destroyed</li>
<li>15:08hours: POWER FAILURE!!! SWITCHING TO SECONDARY POWER</li>
<li>ERROR!ERROR!ERROR!ERROR!ERROR! : SERVER #46EA8A23FE COMPROMISED, SOURCE UNKNOWN</li>
<li>@"!@"@£@@**$*£"@@!!!!@@$$$££$</li>
<h1><b>Connecting to HAARP STATION #1692...</b></h1>
<h1><b>CONNECTION ESTABLISHED</b></h1>
<p> SERVER: Anyone still there?</p>
<p>HAARP: Where's your God now!</p>
<p>SERVER: #ALERT# ERROR404!!! CONNECTION LOST!!!
<p> SERVER STATUS: 10:59:46PM: Loading... </p>
</body>
</html>
Next I will be looking at using CSS and Classes to format your text based visuals on your sites.
No comments:
Post a Comment