Post: Make your website - Guide
Options
06-13-2009, 02:42 AM
#1
Classified
Error… Cat invasion!
Please give feedback
Well, some people enjoyed my guide on how to create a simple video website. Well, I'm back with another website guide, although it's a bit more advanced, and in the end result, you will have an awesome lookin' website!
Here is the end result: You must login or register to view this content.
Open up Notepad, and copy and paste this into it:
/*#############################################################
Name: Blackbox
Date: 2006-06-01
Author: Viktor Persson
URL: https://arcsin.se
Feel free to use and modify but please provide credits.
#############################################################*/
/* Standard elements */
* {
margin: 0;
padding: 0;
}
a {
color: #999;
text-decoration: none;
}
body {
background: #000 url(bg.png) repeat-x fixed left bottom;
color: #555;
margin: 20px 0;
text-align: center;
font: normal 0.7em sans-serif,Arial;
}
ul {
margin: 12px 0;
}
li {
list-style: url(li.gif);
margin-left: 18px;
}
code {
font: normal 1em "Lucida Sans Unicode",serif;
background: url(bgcode.gif);
color: #888;
display: block;
padding: 3px 6px;
white-space: pre;
margin-bottom: 12px;
}
/* Misc */
div.quote {
margin-bottom: 12px;
font: normal 1.1em "Lucida Sans Unicode",serif;
background: url(quote.gif) no-repeat;
padding-left: 28px;
color: #666;
}
/* Main structure */
.main {
background: #000;
border: 3px double #EEE;
border-color: #141414 #202020 #222 #202020;
margin: 20px auto 4px auto;
text-align: left;
width: 600px;
}
/* Header */
.gfx {
background: #222 url(dark_pixel.jpg) no-repeat;
height: 240px;
}
.gfx h1 {
color: #111;
font: normal 2.6em Tahoma,sans-serif;
padding: 16px 20px;
}
/* Menu */
.menu a {
background: #000 url(bgmenu.png) repeat-x;
border-right: 1px solid #222;
border-top: 1px solid #1A1A1A;
color: #444;
font-size: 1.2em;
float: left;
padding-top: 4px;
width: 149px; height: 36px;
}
.menu a span {
padding-left: 6px;
}
.menu a:hover {
background-position: left bottom;
color: #666;
}
.menu a#last {
width: 150px;
border-right: none;
}
/* Content */
.content {
border-top: 1px solid #1A1A1A;
background: #1A1A1A;
clear: both;
}
.content h1 {
margin: 0 0 4px;
font: bold 1.1em sans-serif,Arial;
color: #666;
}
.content p {
margin: 0 0 12px;
}
.item {
background: #030303 url(bgitem.gif) repeat-x;
padding: 8px 10px;
}
/* Footer */
.footer {
padding: 5px;
background: #0A0A0A;
color: #666;
}
Now save that file as: default.css - Make sure you save it as the text in bold, exactly the same! Now, make sure you save it to the desktop. Now open up a new untitled notepad file, and copy and paste this into there:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta name="description" content="description"/>
<meta name="keywords" content="keywords"/>
<meta name="author" content="author"/>
<link rel="stylesheet" type="text/css" href="default.css"/>
<title>My website Title</title>
</head>
<body>
<div class="main">
<div class="gfx"><h1>Website Title<br/>Here</h1></div>
<div class="menu">
<a href="Index.htm"><span>Home</span></a>
<a href="links.htm"><span>Links</span></a>
<a href="contact.htm"><span>Contact me</span></a>
<a href="news.htm" id="last"><span>News & Announcements</span></a>
</div>
<div class="content">
<div class="item">
<h1>Classified's Guide</h1>
<p>This is my guide on how to make a Website! If your viewing this website, thats means your trying out my guide, yippe! And this is a preview of what your site looks like, of course, you can always change it!</p>
<div class="quote">This is preview of quotes.</div>
<p>You can add additional text here.</p>
</div>
<div class="item">
<h1>Other Text</h1>
<p>Other text can go here.</p>
<ul>
<li>Preview of a Bullet</li>
<li>Preview of a Bullet</li>
<li>Preview of a Bullet</li>
</ul>
<p>Additional text here.</p>
</div>
<div class="item">
<h1>Other Text</h1>
<p>Preview of a code box:</p>
<code>This is a preview of a code box, woo-hoo!</code>
<p>Of course, you can add additional text here.</p>
</div>
</div>
<div class="footer">© 2009 <a href="Index.htm">My Website name</a>
</div>
</body>
</html>
Now save that file as: Index.htm - Make sure you save it as the text in bold, exactly the same! Now, make sure you save it to the desktop. Now open up a new untitled notepad file, and copy and paste this into there:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta name="description" content="description"/>
<meta name="keywords" content="keywords"/>
<meta name="author" content="author"/>
<link rel="stylesheet" type="text/css" href="default.css"/>
<title>My website Title</title>
</head>
<body>
<div class="main">
<div class="gfx"><h1>Website Title<br/>Here</h1></div>
<div class="menu">
<a href="Index.htm"><span>Home</span></a>
<a href="links.htm"><span>Links</span></a>
<a href="contact.htm"><span>Contact me</span></a>
<a href="news.htm" id="last"><span>News & Announcements</span></a>
</div>
<div class="content">
<div class="item">
<h1>Links</h1>
<p>You can add links here.</p>
</div>
<div class="footer">© 2009 <a href="Index.htm">My Website name</a>
</div>
</body>
</html>
Now save that file as: links.htm - Make sure you save it as the text in bold, exactly the same! Now, make sure you save it to the desktop. Now open up a new untitled notepad file, and copy and paste this into there:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta name="description" content="description"/>
<meta name="keywords" content="keywords"/>
<meta name="author" content="author"/>
<link rel="stylesheet" type="text/css" href="default.css"/>
<title>My website Title</title>
</head>
<body>
<div class="main">
<div class="gfx"><h1>Website Title<br/>Here</h1></div>
<div class="menu">
<a href="index.htm"><span>Home</span></a>
<a href="links.htm"><span>Links</span></a>
<a href="contact.htm"><span>Contact me</span></a>
<a href="news.htm" id="last"><span>News & Announcements</span></a>
</div>
<div class="content">
<div class="item">
<h1>Contact me</h1>
<p>You can add ways for people to contact you.</p>
</div>
<div class="footer">© 2009 <a href="Index.htm">My Website name</a>
</div>
</body>
</html>
Now save that file as: contact.htm - Make sure you save it as the text in bold, exactly the same! Now, make sure you save it to the desktop. Now open up a new untitled notepad file, and copy and paste this into there:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta name="description" content="description"/>
<meta name="keywords" content="keywords"/>
<meta name="author" content="author"/>
<link rel="stylesheet" type="text/css" href="default.css"/>
<title>My website Title</title>
</head>
<body>
<div class="main">
<div class="gfx"><h1>Website Title<br/>Here</h1></div>
<div class="menu">
<a href="Index.htm"><span>Home</span></a>
<a href="links.htm"><span>Links</span></a>
<a href="contact.htm"><span>Contact me</span></a>
<a href="news.htm" id="last"><span>News & Announcements</span></a>
</div>
<div class="content">
<div class="item">
<h1>News and Announcements</h1>
<p>You can add your news and announcements here.</p>
</div>
<div class="footer">© 2009 <a href="Index.htm">My Website name</a>
</div>
</body>
</html>
Now save that file as: news.htm - Make sure you save it as the text in bold, exactly the same! Now, make sure you save it to the desktop.
Once you've done all that, save the following images to your desktop:
You must login or register to view this content.
You must login or register to view this content.
You must login or register to view this content.
You must login or register to view this content.
You must login or register to view this content.
You must login or register to view this content.
You must login or register to view this content.
( Above this text is a very thin line, try and get your mouse to line up with it, then save that image. )
Now once those images are saved onto your desktop, go to You must login or register to view this content. and Register or Login, and go to your file manager, and the page should look like this:
You must login or register to view this content.
Now click on the link that says Upload Files, then click Browse, then upload all of the images you have on your desktop. ( Not ALL, just the ones you downloaded in this tutorial )
Once you have all of your images uploaded, then upload the files: Index.htm news.htm links.htm contact.htm then once you have those uploaded, upload the file: default.css
Then your screen should like this:
You must login or register to view this content.
Then go to your website, which would be You must login or register to view this content. and then their, you go, you have a brand new website!
WARNING/NOTE:
To edit your website, edit the file such as index.htm or any-other page of your website, and once your done editing it, re-upload the file or files that you edited to show the changes on the Internet.
06-13-2009, 07:49 PM
#4
Classified
Error… Cat invasion!
Copyright © 2026, NextGenUpdate.
All Rights Reserved.
