Adblock breaks this site

[Guide] How to make a basic webpage!

Discussion in 'Archives' started by Rawr, Aug 4, 2008.

Thread Tools

Thread Tools

  • Thread ID:
  1. Rawr

    Rawr Addict.
    Retired Sectional Moderator $100 USD Donor

    Joined:
    Jul 18, 2008
    Posts:
    2,442
    Referrals:
    10
    Sythe Gold:
    13
    Pokémon Trainer
    [Guide] How to make a basic webpage!
    The world of web pages evolves around several things... Templates, pictures, coding, and content. You must have all of these basics in order to make a sustainable website. So, I'm going to show you how!

    Step 1 -

    Create a folder to store all your templates, pictures, etc in.

    [​IMG]

    Step 2 -

    Inside that folder, create a notepad document with the following content in it.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
    Step 3 -
    Save that document as "Template.html"

    You now have your webpage!

    Step 4 -
    Create another new notepad document and leave it blank (we'll come back to this later.) and Save it as "Index.CSS".

    You should now have these two things in your folder.
    [​IMG]

    Step 5 - Creating <div>'s

    To create a <div> is quite simple... It just depends on what you'd like... For this example we're just going to make a simple box though.

    So inside of that document we just made ("Index.CSS") We're going to put in some code to make a box.

    Code:
    #box{
height: 100px;
width: 100px;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
}
    Now I'll go through the code we just put in our Index.CSS.
    - The (#box) is our name of the div which basically means a piece of the site.
    - The '{' means that's the beginning of our code for this div.
    - Now the Height and Width are given numbers in pixels aka (px) you can change those numbers by the way, the higher the number, the larger the box.
    - Whenever you want to end a line of code you always use a ';' like we've done in our code.
    - The margin-left and right: auto; means that we're going to center this box in the middle of the site. If you don't want it centered... Take out the "Auto" and put in a number with px at the end (ex: 10px)
    - Then the border: means we're going to give this box a 1 pixel solid black lined border around it.

    This all may seem confusing but you'll get the hang of it.

    Save this now, and close it.

    Step 6 - Adding the box to the site!

    Assuming you've done the following correctly we're now going to put the box on our site!

    Right click on your template and choose "Open with notepad".

    Now go do the <body> tags and in between them type the following code.
    Code:
    <div id="box">This is our box.</div>
    - The <div id="box"> tells the page what the name of that <div> is and tell it to put it on there.
    - The "This is our box." is the content that will be placed inside of the box we created. You must have content in a <div> unless it is given a fixed height and width.
    - Then the </div> just simply means you'd like to close that <div> and are ready to create a new one.

    Save this then go back to your template Icon and now just Click on it without Right-clicking. It should open up on the internet with your box showing! If this happened you are successful and now a official web designer!

    If you want you can create more boxes and place them in and mess around.

    "This Guide on How to create a basic webpage. is © of Rawr Im Phat. Any ripping of this guide will result into a Report, and most likely a BAN."
     
    Rawr, Aug 4, 2008
    #1
  2. MegaMatt

    MegaMatt Death Or Glory
    Banned

    Joined:
    May 20, 2007
    Posts:
    6,103
    Referrals:
    8
    Sythe Gold:
    0
    [Guide] How to make a basic webpage!
    Great guide!
     
    MegaMatt, Aug 4, 2008
    #2
  3. Rawr

    Rawr Addict.
    Retired Sectional Moderator $100 USD Donor

    Joined:
    Jul 18, 2008
    Posts:
    2,442
    Referrals:
    10
    Sythe Gold:
    13
    Pokémon Trainer
    [Guide] How to make a basic webpage!
    Thanks. ^_^
     
    Rawr, Aug 4, 2008
    #3
  4. hybanks2000

    hybanks2000 Apprentice
    Banned

    Joined:
    Jan 21, 2007
    Posts:
    961
    Referrals:
    0
    Sythe Gold:
    0
    [Guide] How to make a basic webpage!
    very nice!
     
    hybanks2000, Aug 5, 2008
    #4
  5. orlando_jordan

    orlando_jordan Guru
    Banned

    Joined:
    Jun 28, 2008
    Posts:
    1,310
    Referrals:
    1
    Sythe Gold:
    0
    [Guide] How to make a basic webpage!
    needs pics, good guide
     
    orlando_jordan, Aug 5, 2008
    #5
  6. R33l2r3al

    R33l2r3al Grand Master
    $5 USD Donor Retired Global Moderator

    Joined:
    Jul 7, 2007
    Posts:
    3,443
    Referrals:
    1
    Sythe Gold:
    0
    [Guide] How to make a basic webpage!
    Ummm, *looks up*, I'm fairly certain there are pics in his guide...

    Maybe not elaborate ones, but they are there.
     
    R33l2r3al, Aug 5, 2008
    #6
  7. orlando_jordan

    orlando_jordan Guru
    Banned

    Joined:
    Jun 28, 2008
    Posts:
    1,310
    Referrals:
    1
    Sythe Gold:
    0
    [Guide] How to make a basic webpage!
    Not clear ones
     
    orlando_jordan, Aug 5, 2008
    #7
  8. Tezlin

    Tezlin Guru
    Banned

    Joined:
    Apr 9, 2008
    Posts:
    1,780
    Referrals:
    0
    Sythe Gold:
    0
    [Guide] How to make a basic webpage!
    What do you want? A full page picture?

    I think a UE already posted a guide about websites, but good job anyway. :)
     
    Tezlin, Aug 5, 2008
    #8
  9. tb93

    tb93 Active Member
    Banned

    Joined:
    Jul 29, 2008
    Posts:
    122
    Referrals:
    0
    Sythe Gold:
    0
    [Guide] How to make a basic webpage!
    10/10 just because you add a bigger size at each capital...
    Thats just, a great idea, it looks amazing...
    -TB93
     
    tb93, Aug 5, 2008
    #9
  10. Rawr

    Rawr Addict.
    Retired Sectional Moderator $100 USD Donor

    Joined:
    Jul 18, 2008
    Posts:
    2,442
    Referrals:
    10
    Sythe Gold:
    13
    Pokémon Trainer
    [Guide] How to make a basic webpage!
    Thanks tb! ^_^
     
    Rawr, Aug 5, 2008
    #10
  11. dragoon_212

    dragoon_212 Forum Addict
    Banned

    Joined:
    Feb 24, 2007
    Posts:
    543
    Referrals:
    0
    Sythe Gold:
    0
    [Guide] How to make a basic webpage!
    Nice guide! Im currently working on my own website right now =] this helped me.. 10/10!
     
    dragoon_212, Aug 5, 2008
    #11
  12. Rawr

    Rawr Addict.
    Retired Sectional Moderator $100 USD Donor

    Joined:
    Jul 18, 2008
    Posts:
    2,442
    Referrals:
    10
    Sythe Gold:
    13
    Pokémon Trainer
    [Guide] How to make a basic webpage!
    Thanks! ^_^
     
    Rawr, Aug 5, 2008
    #12
< How to make a paypal. | Pazzz - Ban Evader/Multiple Accounts >


 
 
Adblock breaks this site