11
   

Building A website

 
 
Robert Gentel
 
  3  
Reply Fri 18 Dec, 2009 06:24 am
@Seed,
Seed wrote:
...this might be a bit broader of a question then I realize.


You speak sooth.
Here's how a website works, you can decide which parts you want to learn. I'm going to start with the surface you see in the browser and work deeper into the server from there.

The things that happen in your browser is called "client side". There is "server side" (what happens on the server) and client side (what happens in the client, or the browser).

The browser typically accepts html (or xhtml etc) from the server, along with css, images, javascript, flash etc. The browser (and it's plugins client side) do the work of taking this data and displaying it in your browser. The server either sends a static html file (static site) or it generates the html (dynamic site) using content from a database (like mysql) and a programming language like PHP.

Client Side

HTML

So to make a web page, you should start with learning html. There are variants like xhtml but don't worry about that initially, just get comfortable with the code (the basics are about as hard as bbcode). Here is a tutorial you can use: http://www.w3schools.com/html/

That is a good site to use to lookup things about html and css, but you can also learn a lot by modifying other people's code (e.g. using templates like you want to avoid) as well as starting off in a WYSIWYG editor (these basically work like word, where you just point and click and it generates code), those aren't ideal tools in the long run but it can help you learn. The most popular such tool is Dreamweaver, but it's also a powerful one that may have a learning curve of its own for you, so you may want to consider simpler and cheaper (Dreamweaver isn't cheap) alternatives, and there are free ones out there. I can't recommend many because I haven't used such a program since Front Page back in the late 90s but if you go to download.com you can find a lot of programs for that.

CSS

Ok, so HTML is the basic part of the webpage, with its text, links and elements that can be styled, and you can style it all in html if you want but if you want to do it right you need to learn CSS. CSS is supposed to control the display, the way the page looks. Ideally, you use HTML to structure your text, and CSS to style it. In the real world the separation isn't always the ideal, but the separation is the right way to go. The W3schools site is also good for CSS: http://www.w3schools.com/Css/

Of course, if you have any questions about either please feel free to ask. After trial and error, internet searching, and dumb luck asking questions on a forum is the next most common way I learned about web development.

JAVASCRIPT

JavaScript is a client-side programing language. It used to mainly be an annoyance used for dumb things like cursor trails but with the rise of AJAX a few years ago this is increasingly becoming a "real" programming language with complex applications built in it (Google Maps was an early mainstream example). So if you want dynamic things to happen client-side you use JavaScript, but initially you probably can skip this and you'll probably only use JavaScript to do things like make content appear or disappear on the page (e.g.when you vote down a post it collapses without reloading the page, and this is simple JavaScript in action).

DESIGN AND MULTIMEDIA

Images

So far I've covered the more technical aspects, but for site design you must learn at least graphic design. Sites usually need a few images to look good, and unless you want to use templates you'll need to learn how to make them. Typically this is done in Photoshop or Fireworks. Fireworks has an easier learning curve as it is really just for web graphics and not as powerful as Photoshop, which is for much more than the web.

Animation and Video

For animation (with sound) and video the current king is Flash, you know Flash as the plugin you install but to develop such elements in webpages you'll need to learn how to author Flash (Adobe owns Flash and sells the main sch tool, but they opened it up so that anyone else can make their own flash tools so you can find easier/cheaper options.

Note: Microsoft is pushing their own Flash competitor, SilverLight, but it's still relatively new. Also note that both Flash and SilverLight are proprietary and the next version of HTML (HTML 5) seeks to replace the need for flash in many use cases.


Ok, before I go into the server side I want to make a note about this knowledge. Each of these are straightforward, but you can still use them poorly. You'll also need to learn guiding principles about how to use them (such as learning fundamental design, or usability and other best practices) if you want to take this more seriously.

Server Side

Ok, so now you've learned that the browser displays webpages using HTML,
CSS, JavaScript and images, flash and other media. And if you learn about making pages with such technology you'll want to then get the server to display it. So here is an overview of what the server usually does.

NETWORKING

To get your website to work, you'll want people to be able to visit it at a URL. There are a lot of technologies involved in this but it tends to be more of an internet infrastructure than web development, and I'm going to skim here but you'll want to pick up a bit about DNS and how domains work, as those are the keys to anything you create online. Initially you can learn on a free host and not worry about this but when you build anything you care about you should do it on a domain you own.

You can have your host handle a lot (if they are a "managed" host) but otherwise a key part to learn is how to get the server configured to route the traffic for a particular domain to what you want. How to do so and how to learn depends on what technology you use, typically this is either Windows servers or Linux servers.

DATABASES

If you want the website to save anything (for example a forum where users make posts that are there the next day) you will typically need to have a database on the server and using it involves database administration (more of a maintenance than a web development thing) as well as database and query design (very much a part of web development).

This type of thing is typically learned in a formal setting or through incremental experience. For example, I learned what I know about database design and maintenance just from working with them lightly. I still am no DBA but if you want to specialize in any of these fields you'll need either formal education or real world experience.

For learning on your own, I would consult tutorials for the specific steps you want to take as you go (e.g. how to create a database on whatever platform you choose) and get used to reading documentation (e.g. MySql has very good online documentation).

PROGRAMMING LANGUAGE

In web development a server has two meanings, one is a program that accepts requests and serves responses. The other meaning is the computer that runs said program. Anyway, the server (the program) usually serves either static files or generates responses through the use of a programming language. An example of a computer serving a static file is an image. That is typically just held on the server and when a request comes for it the server just sends it off.

But what if you wanted to make the page dynamic? For example what if you want the user to generate the image? Or if you wanted the page to accept user input and do things with it. Then you are talking about building a web application (examples are a blog, forum, wiki) and for this you must use a programming language such as PHP, Python, Ruby, C#, or Java (not JavaScript).

Learning the basic concepts of programming is usually done by either experimentation or formal education and then picking up languages themselves is a matter of reading their documentation for synax (how to express what you already know how to say) and experience.

If you want to learn on your own I'd recommend learning PHP as that is the language with the most resources online (example code, documentation, tutorials, forum users familiar with the language....) and find a decent PHP tutorial to work though.

SERVER ADMINISTRATION

There is a lot of work that goes into getting the website online that falls into server administration, which is the setup, configuration and maintenance of the servers. This is more of an infrastructure thing than a development thing so I'll leave this off but this is really typically learned by experience. The individual will have a degree but the degree teaches little about how to do this job so most of this is learned on the job, and this is why you'll almost always find years of real world experience listed in job requirements for these positions.

Also worth mentioning is that marketing is a big part of building a website that anyone visits, and the main subsets there are PPC, SEO, analytics, and copy writing. But though your question is open-ended I suspect what you really want to start with is the creation of the web pages. So here is what I'd do if I were you.

1) Save the following code as test.html (just copy it into a text editor like notepad and save as test.html).

Code:<html>
<body>
<p>Hello world.</p>
</body>
</html>


2) Now open it in your browser. It should just display "Hello world." If that worked you made your first html page. Now for it to be a legitimate web page you just need to upload it to a server.

3) For this you will either need to use one of your computers as a server (and now you need that server administration knowledge I touched on) or you need to upload it (typically using either SSH or FTP protocols) to someone else's server. The process of uploading it is most often done through FTP. FTP is a protocol (i.e. a standard way of communicating) but you don't need to learn the protocol itself initially, you just use a "client" which is a program that does it for you. For a comparison you are already familiar with Outlook Express was an email "client" that used the POP/SMTP protocols. So now you need such a program for FTP. Typically they work by letting you browse to a local folder to select a file and browse the remote server to select a destination, then you upload. There are many FTP clients out there, and you can try some out from download.com.

But you'll need a host for your page. The host is basically rented servers and networking infrastructure. If you search for free hosts you can find some free ones to test and learn on (I don't have any recommendations as these don't tend to be around or at least stay good very long, and I haven't used them in ages) but you can also get basic paid hosting pretty cheaply (e.g. you could get a domain for less than $10/year and a basic shared host for between $5 to $10 dollars a month. If you want recommendations for a specific case I can help.

You asked about what hosting is versus building the site, and generally building a site means building the code and site content while hosting is the service of providing computers for your site to reside on. A domain is the address and the key to all the traffic (e.g. if you build a site on yourname.freehostdomain.com then they own your traffic).

4) After you upload it to the server it should be available to view online. For example, if you are on a free host the address might be yourname.freehostdomain.com/test.html

Now you've just made a web page and it's online, so you can build on this process to make a better web page, web pages, link them up and you have a web site.

Anywho, I'm about to crash and haven't slept in days, so I'm getting less and less coherent, but if you have any questions about specifics in this process I'd be happy to help.

Robert Gentel
 
  1  
Reply Fri 18 Dec, 2009 06:33 am
@Seed,
Seed wrote:
I have a lot of pictures from Iraq I want to put up. But I want to do it in a certain way that doesn't scream "this is rip off of some local social site"


Do you want a site or do you want to learn how to make sites? Because unless you actually want to learn the process I think you are best off just using an out-of-box solution. You could use existing photo gallery software or almost any CMS (content management system, which includes blogs) pretty easily, and if it's the look you don't like most can change nearly every detail about the look.
Butrflynet
 
  1  
Reply Fri 18 Dec, 2009 12:04 pm
@Robert Gentel,
Wow... y'all just got an excellent crash course in web design. Print that out and study it.

Great job, Robert.
0 Replies
 
ossobuco
 
  1  
Reply Fri 18 Dec, 2009 12:16 pm
Thank you, Robert.
0 Replies
 
Seed
 
  1  
Reply Fri 18 Dec, 2009 12:52 pm
@Robert Gentel,
So, I think I can use all that information you posted and probably use it to pass some college courses! Thanks for the great information. Can't wait to pull it apart and get some good knowledge from it.
0 Replies
 
sansam19888
 
  1  
Reply Tue 28 Jun, 2011 06:01 am
@Robert Gentel,
thanks for the useful info's...
0 Replies
 
maryanne12
 
  0  
Reply Thu 7 Jul, 2011 05:09 am
@Seed,
use google search and some useful ebooks that will b helpful to you
0 Replies
 
maryanne12
 
  0  
Reply Thu 7 Jul, 2011 05:11 am
use google search and get some helpful ebooks and tutorials for this
0 Replies
 
 

Related Topics

YouTube Is Doomed - Discussion by Shapeless
So I just joined Facebook.... - Discussion by DrewDad
Internet disinformation overload - Discussion by rosborne979
Participatory Democracy Online - Discussion by wandeljw
OpenDNS and net neutrality - Question by Butrflynet
Internet Explorer 8? - Question by Pitter
 
  1. Forums
  2. » Building A website
  3. » Page 2
Copyright © 2024 MadLab, LLC :: Terms of Service :: Privacy Policy :: Page generated in 0.03 seconds on 04/25/2024 at 02:31:38