[Guide] How to make a basic webpage!

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

Sign in to Post
Thread Tools

Thread Tools

  • Thread ID:
[Guide] How to make a basic webpage!
  1. Unread #1 - Aug 4, 2008 at 9:49 PM
  2. Rawr
    Joined:
    Jul 18, 2008
    Posts:
    2,442
    Referrals:
    9
    Sythe Gold:
    8
    Pokémon Trainer

    Rawr Addict.
    Retired Sectional Moderator $100 USD Donor

    [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."
     
    Share
  3. Unread #2 - Aug 4, 2008 at 10:50 PM
  4. MegaMatt
    Joined:
    May 20, 2007
    Posts:
    6,103
    Referrals:
    8
    Sythe Gold:
    0

    MegaMatt Death Or Glory
    Banned

    [Guide] How to make a basic webpage!
    Great guide!
     
    Share
  5. Unread #3 - Aug 4, 2008 at 11:29 PM
  6. Rawr
    Joined:
    Jul 18, 2008
    Posts:
    2,442
    Referrals:
    9
    Sythe Gold:
    8
    Pokémon Trainer

    Rawr Addict.
    Retired Sectional Moderator $100 USD Donor

    [Guide] How to make a basic webpage!
    Thanks. ^_^
     
    Share
  7. Unread #4 - Aug 5, 2008 at 1:37 AM
  8. hybanks2000
    Joined:
    Jan 21, 2007
    Posts:
    961
    Referrals:
    0
    Sythe Gold:
    0

    hybanks2000 Apprentice
    Banned

    [Guide] How to make a basic webpage!
    very nice!
     
    Share
  9. Unread #5 - Aug 5, 2008 at 2:29 AM
  10. orlando_jordan
    Joined:
    Jun 28, 2008
    Posts:
    1,310
    Referrals:
    1
    Sythe Gold:
    0

    orlando_jordan Guru
    Banned

    [Guide] How to make a basic webpage!
    needs pics, good guide
     
    Share
  11. Unread #6 - Aug 5, 2008 at 2:46 AM
  12. R33l2r3al
    Joined:
    Jul 7, 2007
    Posts:
    3,443
    Referrals:
    1
    Sythe Gold:
    0

    R33l2r3al Grand Master
    $5 USD Donor Retired Global Moderator

    [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.
     
    Share
  13. Unread #7 - Aug 5, 2008 at 3:16 AM
  14. orlando_jordan
    Joined:
    Jun 28, 2008
    Posts:
    1,310
    Referrals:
    1
    Sythe Gold:
    0

    orlando_jordan Guru
    Banned

    [Guide] How to make a basic webpage!
    Not clear ones
     
    Share
  15. Unread #8 - Aug 5, 2008 at 3:20 AM
  16. Tezlin
    Joined:
    Apr 9, 2008
    Posts:
    1,780
    Referrals:
    0
    Sythe Gold:
    0

    Tezlin Guru
    Banned

    [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. :)
     
    Share
  17. Unread #9 - Aug 5, 2008 at 3:34 AM
  18. tb93
    Joined:
    Jul 29, 2008
    Posts:
    122
    Referrals:
    0
    Sythe Gold:
    0

    tb93 Active Member
    Banned

    [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
     
    Share
  19. Unread #10 - Aug 5, 2008 at 9:20 AM
  20. Rawr
    Joined:
    Jul 18, 2008
    Posts:
    2,442
    Referrals:
    9
    Sythe Gold:
    8
    Pokémon Trainer

    Rawr Addict.
    Retired Sectional Moderator $100 USD Donor

    [Guide] How to make a basic webpage!
    Thanks tb! ^_^
     
    Share
  21. Unread #11 - Aug 5, 2008 at 9:55 AM
  22. dragoon_212
    Joined:
    Feb 24, 2007
    Posts:
    543
    Referrals:
    0
    Sythe Gold:
    0

    dragoon_212 Forum Addict
    Banned

    [Guide] How to make a basic webpage!
    Nice guide! Im currently working on my own website right now =] this helped me.. 10/10!
     
    Share
  23. Unread #12 - Aug 5, 2008 at 9:57 AM
  24. Rawr
    Joined:
    Jul 18, 2008
    Posts:
    2,442
    Referrals:
    9
    Sythe Gold:
    8
    Pokémon Trainer

    Rawr Addict.
    Retired Sectional Moderator $100 USD Donor

    [Guide] How to make a basic webpage!
    Thanks! ^_^
     
    Share
< How to make a paypal. | Pazzz - Ban Evader/Multiple Accounts >

Users viewing this thread
1 guest


 
 
Adblock breaks this site