1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to make website (tutorial)

Discussion in 'BlackHat Lounge' started by eskimo, Oct 12, 2009.

  1. eskimo

    eskimo Regular Member

    Dec 1, 2008
    Likes Received:
    I get quite a lot of PM's of people asking me to make sites for them.It's usually one page sites, or really basic sites that they want.I can't accept paypal in my shitty country, so I usually offer to rather help them build the site for free. As in, I will point them in the right direction.

    Very few people take me up on the offer, simply because they think "i dont know anything about making websites"

    Let me tell you a big secret. Its fucking easy

    We are not talking about facebook here, just simple sites with a bit of content (text and the odd image) which link to other sites. Nothing fancy.

    So, I have decided to write this step by step tutorial to help out people who don't know their html from their bum. Hopefully I can save some people a few $$$ and also spark their interest in learning how to make websites. I am 100% self taught and I work (as my job) as a web designer/developer, so I promise, it's not as hard as you think!

    Tools you will need:
    Freeftp (google it, its free)
    Any sort of graphic editing suite (photshop is obviously the biznass, but microsoft paint will do)

    Lets begin

    To me, the most time consuming thing about webdesign (especially for paying customers) is the graphic stage. As in designing all the buttons and putting together a layout for the pages. We will bypass this time consuming stage by using a free CSS template. There are literally hundreds and thousands of millions of free CSS web templates available to download off the net.

    Check out (my personal favourite):


    For this tutorial, I am just going to use the first one I see there, called terrafirma2. Download the zip file to your desktop & unzip it.

    Click through the folders until you get to a folder which contains 3 files (index.html , style.css, licence.txt) and a folder called images.

    The folder images contains (you guessed it!), the images used on the site.
    The file style.css is a css file (cascading style sheet) which contains all the info the site will use to determine the "look" of the pages. We will not be changing anything in this file during this tutorial.

    The file licence.txt is the licence, read it if you bored.

    The file we gonna be looking at is index.html. The index file is the page that your webdomain points to by default. As in, google.com actually points to a file called index.html (prob not html but that doesnt matter). All the other pages such as "about" or "contact" or whatever are also files, which are usually named their relevant content (about.html, contact.html)

    The folder that you are in is known as the "root folder", and is the first "level" of the folders on your site. You can make folders within that folder to store stuff in (like the images folder), but you can't make folders outside, or before your root folder.

    Fire up notepad (its quite a monster program and might take some time to open ;) ).Drag the file index.html into notepad to open it.

    Oh shit! Is that alien language? Is that ancient egyptian hyroglipics? I give up!

    Don't give up. All will be clear shortly.

    Basically, for this tutorial, you can ignore everything from the first line, up until the opening body tag <body>

    You will see things called divs. A div is basically a part of the page (which is given its look and size in the css file) which can contain content. Imagine a div as being a box on the page.

    Things such as the navigation bar will be in one div, which is wide and not very high. A div begins with an opening div tag written as <div> and ends with a closing div tag written as </div>.

    Everything between those two tags will be held in that div. Divs are also usually (almost always) given an id written like <div id="navigationbar>. This tells the browser that the div is of the type "navigationbar" and it will find all the things such as size, backgroundcolour, font etc... in the css file, under the name "navigationbar".

    Open up the index.html file by double clicking it (it will open in your browser).

    You will see the navigation menu at the top has "home" "archives" "links" etc... Now, go find those words in notepad.

    What do you notice?
    Firstly, they are in a div called "menu" (<div id="menu" class="container">)
    A few lines down you will see the div (called menu) closing div tag written as </div> .You will see the lines between the two div tags are almost the same, except for the words "home", "archives", "links", "resources" and "contact". If you wanted to change one to say "downloads",

    how do you think you do that?

    You guessed it! Change the text. Change one, save, and click refresh in your browser. Voila! New menu tab.

    By why, you ask, does the first one ("home") look different? It has extra alienspeak in it. Look at the open page in your browser again, and what do you notice about the home link in the nav

    menu? Yes, a boxy thingy around it. That indicates to the user what page they are on. So if you wanted to change it so the boxy thingy is around the "contact" link, how do you think you do that?

    Again, (damn you clever) you guessed it, add in the same code to the "contact" link (also take out the code from the "home" one or they will both have it).

    It is pretty pointless having those links if they don't do anything when you click em. So how do you make them link to other things. You see the line of code that says <a href="#">

    Replace the # sign with the URL/page you want to link to. Change is to <a href="http://www.google.com"> and the link will go to google when clicked. If you are linking to another page within your site, you only need to put the pages name, as in <a href="about.html">

    (TIP: if the page is in another folder from the root folder (still within the root folder) then write the link as <a href="foldersname/about.htm">)

    You can now edit the navigation menu to work, and point to the pages for your site.

    Simply save as the index.html file to the pages you want (as in about.html

    The title of the page is found between the tile tags <title></title> right near the top of the page. Put the title of the page between the tags (eg: <title>home</title>)

    Now for the text. Basically, the trick is, look at the page in a browser, and find the same text in the file and change it to what you want. The hardish thing is to leave all the html tags/code in place. Look at the line:

    <h2 class="title"><a href="#">TerraFirma2 by NodeThirtyThree + FCT</a></h2>

    Obviously we want to change that heading. So only change the "TerraFirma2 by NodeThirtyThree + FCT" part. You will see you can make that a link as well (<a href="#")

    Do this for all the text you want to change, and just keep checking in your browser that you are doing the correct thing by saving and then refreshing the page in your browser.

    If you want to make a word a link in a paragraph of text, use the <a href> tag. For example:
    Click here for free money

    You want to make the words "free money" link to www.google.com, you would write:
    Click here for <a href="www.google.com">free money</a>

    Magic. If you want to delete text, you must include the tags. You will see all the opening tags (almost all of them) have the same name as the closing tag with a / at the begining, as in the opening tag is called <poo>,the closing tag will be called </poo>.

    Be careful when deleting <div> tags, as this can really screw up the look of you page. Remember that div tags can be within other div tags (you will see, the indentation usually helps you determine which </div> tag belongs to which opening div tag)

    Unless your site is about mountains, you probably going to want to change or remove the images.
    The images look like this:
    <img src="http://www.blackhatworld.com/blackhat-seo/images/img03.jpg" width="210" height="72" alt="" class="border" />

    Change the img src="" bit (image source) to whatever your image is called eg: <img src="mypetdog.jpg" , and set the width and height to the width and height of he image. If you set those wrong, the browser will squish or stretch your image to the sizes in the html, and your page will look stupid. Resize or cut out the bits of the images in paint.

    Mess around with this for a bit and you will discover its not that hard to make a page. Now, you ask, "how the fark do i put it on the internet?"

    Well, firstly you are going to need a domain host. You can use stuff like godaddy (which you pay for, but you can have your own domain), or you can use a free hosting service (google "free hosting"). The problem with the free ones is you will have a shite domain like :


    When you sign up for hosting and create your domain, you will be given some FTP details. FTP stands for File Transfer Protocol, and is the way you put stuff on the internet.

    Open up freeftp (google freeftp and download it) and you will get a screen asking for some stuff.

    The site name is arbitary, you can name it whatever you want (but rather name it something relative)
    The host address is your domain (without www or http), as in: google.com
    Ignore everything until Login, which is the login provided by your hosting company.
    Password is the password provided by your hosting company.
    Local folder is the folder on your PC where it will be getting the files from before pooping them onto the internet. Browse and find your folder.

    The rest is irrelevant.
    Click "connect". It should connect to the server. Now click "upload" and in a minute or 2, your site will be on the motherfarkin internet!

    That is the basics, but hopefully it will help and inspire people to try learn a bit about making sites. I mean, that wasn't that hard was it? There are so many available resources on the internet such as w3 school which will give you a free education into making websites. The key is, don't be scared, just try. You can't break the internet!

    If you thought that was pretty cool, I highly suggest getting dreamweaver. It saves you a ton of time, as you don't have to write as much html code, and also it is much easier to see whats going on than in notepad

    Gimme a shout if you need help with anything, I will try my best to help you out as much as I can.

    Now go forth and build some internet!

    PS: don't steal this post and put it on your blog or whatever, i will kill you
    • Thanks Thanks x 5
    Last edited: Oct 12, 2009
  2. LadyHye

    LadyHye Registered Member

    Sep 2, 2009
    Likes Received:
    Mount Prospect, Illinois, USA
    Thanks. I have Dreamweaver but somtimes the coding can get messed up. It's really best to do it by hand. You gave great resources as well.
  3. deadmix

    deadmix Newbie

    Mar 25, 2008
    Likes Received:
    Home Page:
    Very nice and good Tutorials for Newbies and Beginners, Let me share with you other Free Web Templates Providers :







    Goodluck and hope this can be Useful ;)
  4. Blueprint

    Blueprint Jr. VIP Jr. VIP Premium Member

    Nov 10, 2009
    Likes Received:
    Nice resource, I'm always surprised how many IM's earn money and can't actually build websites! I'd recommend learning regardless, even if you're always going to outsource, just so you understand the process...