Register
Results 1 to 9 of 9
  1. #1
    DQ Senior Member atreides's Avatar
    Join Date
    Mar 2008
    Location
    San Antonio, TX
    Posts
    566

    Default Introduction to Websites

    Introduction to Websites
    If youíre reading this, chances are that either youíve thought about making a website or youíve started but arenít really sure where to go from there. Maybe youíre just confused on how things work, if so then this article should help you out.

    This tutorial is rather long and some of the work can be tedious, but in the long run itíll help you understand what youíre doing so you can deal with problems in the future. Also I wrote this tutorial as if you were completely clueless on how to make a web site so your result here is not meant to look incredible, it's supposed to give you a foundation.

    Why should I make a website?
    Every one uses the internet these days and a website can be quite a lucrative endeavor. Websiteís like Facebook, Google, and YouTube make a nice amount of money through ads, subscriptions, extended use, etc.
    Having a website is also a good way to get your name and work out for others to see especially if youíre looking for work.

    What should I consider when making a website?
    Itís really up to you but there are certain things you should keep in mindÖ.
    1. Browser compatibility Ė The best websites look the same and perform well in all major browsers and you should avoid making a site specifically for one browser. ďWell people should use Firefox or Chrome because Internet Explorer sucks.Ē True, but people wonít, a large amount of people have no intention of changing browsers and if your site performs poorly in that browser then theyíll lose interest in it.

    2. Color and Images Ė You should create a site that is visually appealing with good contrasting colors and images that donít take forever to load. It should be common sense, but people do it anyway. For example, you may like the colors black and grey, but no one is going to want to try and read stuff on a website with grey text and a black background. When you use images try and keep them relatively low in file size to keep your site moving quickly and also try to keep them relatively good looking.

    3. Domain and Host Ė Pick a good name thatís easy to remember and not 100 characters long. You need to pick a host who offers you what you want at a good price or you can host it yourself on your own server. If you go with a host youíll end up paying more but theyíre usually far more reliable and you have a lot more built in tools at your disposal. If you host it yourself then you have to put in more work in getting it to work, you have to maintain and upgrade it, and you are responsible for what ever happens to it. Another thing about hosting it yourself is that your server must always be on, other wise your site will go down.

    There are many more things you could consider but these will suffice for now.

    ------

    Right, now onto the stuff you want to know.
    Before you do anything you need to plan your website out, both in your head and on paper so you can have at least some sense of direction while you work. If you need to you can always change things while you work to get it exactly the way you want.

    Once youíve got your design you need to set up a project folder so you can keep everything organized. Inside your project folder you should make several more folders that contain your images, scripts, etc.



    Now that youíve done that youíre ready to start work on your home page, and from there you can move on to the other pages. The great thing about web design is that once you get it things tend to go faster.

    Websites donít make themselves and you should be at the minimum mildly familiar with HTML (Hypertext Markup Language) which is the foundation of web design. There are all kinds of languages that you could use to make websites, but for simplicities sake weíll stick with HTML here.

    Iím using Adobe Dreamweaver CS3 for my site but if you donít have it any text editor will be fine, yes even Microsoft Word works.

    Open your editor and create a new blank document and save it in your project folder as index.html. Itís called index because the first page your browser will look for is the siteís index. Now time to build your site, for this tutorial I will be using this design which you can either copy completely or edit yourself later.
    There are some basic tags that you will need to add first in order for your page to be displayed properly.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    </head>
    
    <body>
    </body>
    </html>
    The DOCTYPE you see at the top tells the browser what kind of document it is and what language itís using.
    The <html> tag tells the browser that from this point down the actual html document starts.
    The <head> tag contains things that donít appear on the page itself, but rather at the top of your browser.
    The <title> tag should be self explanatory; itís the title of your page.
    The <body> tag contains what actually appears on the page.
    The /> tags just mean that the tag is being closed at that point.

    So go ahead and name your document. I named mine Home Page.

    Using tables we can create the shape of our layout like soÖ
    Code:
    <table width="800" border="1" align="center" cellpadding="1" cellspacing="1">
      <tr>
        <td height="150" colspan="2">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="2">&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td height="300">&nbsp;</td>
      </tr>
    </table>
    Make sure this is all put between the body tags for it to work.

    The <table> tags tell the browser that the page has created a table.
    The attributes width, border, align, cellpadding, and cellspacing all affect how the table looks. Width sets the tables width in pixels, border sets the table thickness, align puts the table either on the left, right or center of the page, the cellpadding/spacing have to do with the amount of room between the cells, you might want to play with their values until you get something you like.

    The <tr> tag makes a new table row and the <td> tag defines a standard cell. You can see in the code how you can edit its height (as well as itís width), and youíll notice that it spans 2 columns (colspan).

    Youíll notice on the third <tr> there is two <td>ís. This means that the table has been split vertically in half.
    &nbsp; is just HTML code for a space.

    Save your work.

    Now letís add some text and links.
    Edit your code to look something like thisÖ
    Code:
    <table width="800" border="1" align="center" cellpadding="1" cellspacing="1">
      <tr>
        <td height="150" colspan="2">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="2"><a href="index.html">Link 1</a> | <a href="page 2">Link 2</a> | <a href="page3.html">Link 3</a></td>
      </tr>
      <tr>
        <td width="393" align="left" valign="top"><h1 align="center">My News</h1>
          <p>Hi guys, wlecome to my very first website! Don't worry, it'll look awesome soon enough!</p>
        <p>- Me</p></td>
        <td width="394" height="300" align="left" valign="top"><h1 align="center">Who am I?</h1>
        <p>I'm a beginning web designer (insert rest of bio or whatever)</p></td>
      </tr>
    </table>
    Code:
    <a href="index.html">Link 1</a> | <a href="page 2">Link 2</a> | <a href="page3.html">Link 3</a>
    This little section is the links area, your <a> tags are used to link a piece of text to another page. The text putting between the tags is what will be linked. You put the url address between the ďĒ or just put the file name. <a href=Ēfilename.htmlĒ>Link</a>

    Code:
    < h1 align="center">My News</h1>
    H1 stands for Heading 1 and is the largest paragraph heading, with the smallest being 6. You put this tag around whatever text you want to be enlarged and you can even align the text as well.

    The <p> tag creates a new paragraph by skipping a line; itís good for separating specific pieces of text.

    Code:
    <td width="393" align="left" valign="top">
    Youíll notice in the <td> tags you can align whatever is in them vertically and horizontally.

    Now letís add some color. Iím going to make the background a light grey, and make the tables black. The text will be white, and the row with the links will be another shade of grey since the default link color is blue.

    Iím going to use a little bit of CSS in this just to make it easier.

    Add this between the <head> tags
    Code:
    <style type="text/css">
    <!--
    body {
    	background-color: #E5E5E5;
    }
    body,td,th {
    	color: #FFFFFF;
    }
    -->
    </style>
    This sets the background color as well as the text color.

    Now replace your body code.
    Code:
    <body>
    <table width="800" border="1" align="center" cellpadding="1" cellspacing="1">
      <tr>
        <td height="150" colspan="2" bgcolor="#000000">&nbsp;</td>
      </tr>
      <tr>
        <td colspan="2" bgcolor="#CCCCCC"><a href="index.html">Link 1</a> | <a href="page 2">Link 2</a> | <a href="page3.html">Link 3</a></td>
      </tr>
      <tr>
        <td width="393" align="left" valign="top" bgcolor="#000000"><h1 align="center">My News</h1>
          <p>Hi guys, wlecome to my very first website! Don't worry, it'll look awesome soon enough!</p>
        <p>- Me</p></td>
        <td width="394" height="300" align="left" valign="top" bgcolor="#000000"><h1 align="center">Who am I?</h1>
        <p>I'm a beginning web designer (insert rest of bio or whatever)</p></td>
      </tr>
    </table>
    </body>
    You can see where the color is set (bgcolor=ĒĒ) using color values, you can look those up here.

    Now, color is nice but you probably want to add some pictures, well adding them is easy.

    Hereís how your code should look with a background image and an image used in the table.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Home Page</title>
    <style type="text/css">
    <!--
    body {
    	background-color: #E5E5E5;
    	background-image: url(/images/background.jpg);
    }
    body,td,th {
    	color: #FFFFFF;
    }
    -->
    </style></head>
    
    <body>
    <table width="800" border="1" align="center" cellpadding="1" cellspacing="1">
      <tr>
        <td height="150" colspan="2" bgcolor="#000000">Welcome to my home page!</td>
      </tr>
      <tr>
        <td colspan="2" bgcolor="#CCCCCC"><a href="index.html">Link 1</a> | <a href="page 2">Link 2</a> | <a href="page3.html">Link 3</a></td>
      </tr>
      <tr>
        <td width="393" align="left" valign="top" bgcolor="#000000"><h1 align="center">My News</h1>
          <p>Hi guys, wlecome to my very first website! Don't worry, it'll look awesome soon enough!</p>
        <p>- Me</p></td>
        <td width="394" height="300" align="left" valign="top" bgcolor="#000000"><h1 align="center">Who am I?</h1>
        <p>I'm a beginning web designer (insert rest of bio or whatever)</p>
        <p><img src="images/picture1.jpg" width="240" height="240" /></p></td>
      </tr>
    </table>
    </body>
    </html>
    Background-image sets the background image and img src places a picture from a certain location.
    If you want to have a background image that doesnít repeat all over then you can change it like soÖ
    Code:
    body {
    	background-color: #E5E5E5;
    	background-image: url(/images/background.jpg);
    	background-repeat: no-repeat;
    }
    body {
    	background-color: #E5E5E5;
    	background-image: url(/images/background.jpg);
    	background-repeat: repeat-x; 
    }
    body {
    	background-color: #E5E5E5;
    	background-image: url(/images/background.jpg);
    	background-repeat: repeat-y;
    }
    To make other pages make a new document and save it as something .html and repeat the steps and change things up to make the page different. Youíll get the hang of it faster than you think, donít worry.

    If you want to add a banner in the first table row then just put the <img> tag and add your banner's location.

    Well, youíve made your first website, it may not be the prettiest but youíve still made one.
    You should read up on html as well as other programming languages in order to make your website better and better.

    The next tutorial will contain ways to make your site more dynamic and easier to maintain/update as well as neat little tricks.

    Here are some good links for you to read up on.
    http://www.w3schools.com/html/default.asp
    http://www.w3schools.com/css/default.asp
    http://www.w3schools.com/php/default.asp
    http://www.w3schools.com/js/default.asp
    Here are some web hosting providers.
    http://www.webhostingchoice.com/

    Happy Web Building!
    http://forums.deletionquality.net/image.php?type=sigpic&userid=884&dateline=12447687  75

  2. #2
    Banned
    Join Date
    Nov 2005
    Posts
    3,425

    Default

    Quite a fast tutorial, I generally prefer a simple "Hello World!" page first.

    Going straight to tables is daunting (and incorrect for usage in XHTML) otherwise, a very well written Tutorial.

  3. #3
    DQ 1337 Member leapoffaith's Avatar
    Join Date
    Apr 2008
    Location
    Isolation
    Posts
    1,776

    Default

    I made a kickass zombie site, but it's no longer hosted by my tech camp's server :'(
    I just show up sometimes.

  4. #4
    DQ Senior Member atreides's Avatar
    Join Date
    Mar 2008
    Location
    San Antonio, TX
    Posts
    566

    Default

    Quote Originally Posted by Netrosis View Post
    Quite a fast tutorial, I generally prefer a simple "Hello World!" page first.
    Yeah I know what you mean, I just wanted to take it a step further.

    Quote Originally Posted by Netrosis View Post
    Going straight to tables is daunting (and incorrect for usage in XHTML) otherwise, a very well written Tutorial.
    Yeah, I'm used to tables and probably forgot that they can be a little daunting to the inexperienced.
    I also kept it in plain HTML rather than XHTML so people could gain a little foundation before continuing.

    Thanks a lot for the review.
    http://forums.deletionquality.net/image.php?type=sigpic&userid=884&dateline=12447687  75

  5. #5
    Banned
    Join Date
    Nov 2005
    Posts
    3,425

    Default

    I suppose I'm a bit solid in what I think people should learn at what pace. I'm working on a website dedicated to teaching people the correct ways of coding in today's age of XHTML and CSS, and learning to seperate structure from style. Build a website like you build a house, put down the foundations (choose what version), put up the walls (structure your content), paint it all (css & styling), decorate and furnish (add in your content).

    I think the reason people find coding so complex is that they don't understand how it works. For most people the best place to start in coding is with HTML, but modern advancements mean learning XHTML and CSS side by side are much more awesome.

  6. #6
    No Prospekts. Thunder's Avatar
    Join Date
    Jul 2008
    Location
    Ireland
    Posts
    2,209

    Default

    Quote Originally Posted by Netrosis View Post
    I think the reason people find coding so complex is that they don't understand how it works.
    That's exactly right. I even find Actionscript terribly difficult because I have no idea how the syntax works.

    Also, nice tutorial there, especially for beginners.

  7. #7
    DQ 1337 Member riku1gundam's Avatar
    Join Date
    Apr 2009
    Location
    Korea, a wonderful place full of smog, exhaust, and, annoyingly skinny people...
    Posts
    1,463

    Default

    I want to learn how to code, but i can never figure out what im supposed to do
    [SIGPIC][/SIGPIC]
    Home of The Redhand (Stick Kombat) and Asylum Series. Check us out

  8. #8
    DQ 1337 Member BanHammor's Avatar
    Join Date
    Oct 2008
    Location
    Moscau
    Posts
    2,384

    Default

    Quote Originally Posted by Thunder View Post
    That's exactly right. I even find Actionscript terribly difficult because I have no idea how the syntax works.

    Also, nice tutorial there, especially for beginners.
    Really? Dammnit, I can code EXTREMELY strange things with only luck and basic tags (AS2, no AS3!)
    *glares antagonizingly, then runs away to medicate panic attack*

  9. #9

    Default

    This is a very good introduction to the world of websites, which is complex and complicated, so thank you very much for this thread..

Similar Threads

  1. Three kick-ass websites!
    By Rabbi106 in forum General Lounge
    Replies: 9
    Last Post: June 14th, 2009, 03:33 AM
  2. My Websites Return
    By Mixed-Studios in forum Showoff
    Replies: 8
    Last Post: August 2nd, 2008, 10:35 PM
  3. 20,000 websites hacked!
    By Kenneth in forum General Lounge
    Replies: 33
    Last Post: April 22nd, 2008, 11:49 PM
  4. Making Full Websites $20 !
    By phoenix in forum General Lounge
    Replies: 12
    Last Post: January 27th, 2006, 06:47 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •