homepage Welcome to WebmasterWorld Guest from 54.196.159.11
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / WebmasterWorld / New To Web Development
Forum Library, Charter, Moderators: brotherhood of lan & mack

New To Web Development Forum

    
How do you build a website?
This is my answer.
mack




msg:4003802
 4:32 pm on Oct 8, 2009 (gmt 0)

How do you build a website?

That's one of the most commonly asked questions I get quizzed about when people discover I'm a web developer. The sad truth is, there is no magic answer. Building a website and getting it on the internet involves a number of different processes.

A good example was a co worker who was interested in setting up a hobby website. He wasn't interested in making money, and to be honest wasn't sure where to start. All he had has an idea and to be honest sometimes the idea can be the difficult part.

The first thing I did was install a local server on his laptop. In this case I installed Xampp. What I then did was introduced him to the htdocs folder and [localhost...] I used this to demonstrate that what ever you put in the htdocs folder is what appears at the document root “localhost” or if you are online www.example.com. The reason I chose to get him started by using a local server as opposed to simply creating a folder and viewing the files is to make it a little bit easier to switch from the local site to having a hosted site. The htdocs folder is basically the same locally as it would be on a web host.

I think it is important to learn and understand a bit about how the web actual works before you can fully begin to make it work for you. Even if you are only looking to set up a very small scale project site, having some level of understanding of the underlying principles will come in handy.

Local server
A local server is a piece of software you can install on your computer to display your site during its development. The benefit to using a local server being that only you will be able to view the website you are working on. It will not be public.

Web server
A web server is a computer that stores web content and makes this content available to be viewed over the internet. The major difference between a web server and your local server is that content stored on the web server will be made public.

FTP (File Transfer Protocol)
FTP is another important protocol you should be aware of if you are interested in attempting to build your own website. FTP allows you to copy or move files from one computer to another over a network or the internet. A common use of FTP is to copy a website from your computer to your web host. This is commonly carried out using a piece of software called an FTP client.

Domain name
A domain name is a name given to a website for example www.webmasterworld.com

Domain names have to be purchased from a domain name registration company, often refereed to as a domain registrar. A domain name is what the user will type into his/her address bar in order to visit your website. The domain name points to your web server. We will go into this in more detail later on.

Web host
A web host is a company that sells space on its web server(s). When you have an account with a web host you will use FTP to move your files from your PC to your web hosts web server. Your domain name will also point to your web hosts server.

Server and client relationship
When ever data is being sent or received over the internet it uses a client server relationship. For simplicity a server is a computer that serves data. A client is a computer that receives the data. Right now you are reading this page so your computer is the client. It is being served by WebmasterWorld (the server).

HTTP (hyper Text Transfer Protocol)
HTTP is the protocol that allows browsers and web servers to communicate. Every time you type a URL in the address bar your browser issues an http get request across the internet. This request is more or less saying “I want to view www.example.com get it for me.” The request is sent via the internet DNS system to point your request to the server that hosts the domain. Once the request arrives at the destination server the server will then return the page to the users browser. Its http that makes accessing web content possible.

What is a web page?
In simple terms a web page is a document placed on a web server server that is designed to be viewed by an end user using a web browser. This is an example of the client server relationship we spoke of earlier. A web page is created using a markup language called HTML (Hyper Text Markup Language) A web browser reads the HTML from the document and displays it as a web page.

HTML is quite a simple language to learn. It is made up of tags that are placed within the document. The html document itself is also enclosed in such tags. <html></html> below is a very simple example of a page created in html.

<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>Page heading</h1>
<p>This is a paragraph within the page. Note the opening and closing html tags. This means everything within the html opening and closing tags is html. The header tags contain header information. In this example we have added a title tag. Our h1 indicated that you are using a page heading. The body tags enclose the main body of the document. The p tag is used to open and close a paragraph<p>
</body>
</html>

If you copy the above html code into notepad and save it as index.html then click the file it will open in your computers default web browser. The above is just a very quick example of how a page is constructed.

What about links?
Well I suppose we do need some of those, after-all the web simply wouldn't work where it not for links (hyperlinks). A link is a clickable region that enables a user to click on it and be transferred to another page.

Go back to the example I created earlier and add the following html code to the document. You can either add it before the paragraph we added or after. To do so simply add the code before or after the opening/closing <p></p> tag.

<p><a href="http://www.webmasterworld.com/">WebmasterWorld forum</a></p>

This is the common syntax you would use in html to create a link. In this case we have added a link to WebmasterWorld. This code will create a simple text link using “WebmasterWorld forum” as the link text. This is often refereed to as anchor test. You can change this to pretty much anything you want. Also try linking to other locations.

<p><a href="http://www.google.com/">Google search engine</a></p>
<p><a href="http://www.bing.com/">MSN Bing search engine</a></p>
<p><a href="http://www.yahoo.com/">Yahoo homepage</a></p>

The html examples I have used are very simple. This is in no way designed to be an html tutorial. There are literal thousands of good html tutorials only a search away. Another idea to help you learn html is to by a book. The benefit of a book is it will be written from start to finish by the same person so the tone and pace of learning will be the same all the way through. It is very easy to learn at your own pace. Becoming fluent in HTML is important if you want to progress as a developer.

HTML editors
There are software tools out there that create html for you. These programs make building a website as easy as creating a document in MS office. Why then take the time to learn HTML? Well no editor is perfect, from time to time you will need to look at the code and fix errors that have been created by your editor. These editors are commonly referred to as WYSIWYG editors (what you see is what you get). Common examples include Microsoft Frontpage, Microsoft expressions web and Adobe Dreamweaver. These tools can be quite expensive and if you only intent to set up a small scale site then the investment may not be worth it. There are free trials for most of these products so I would certainly advise you to download an evaluation copy and have a play with it.

There is no substitute for at least a basic understanding of html. Not only will it help you understand what is happening, but it will help you fix problems or bugs that your editor can't seam to get round.

Site design
The best way to design a site is to get away from the computer. Good old paper and pen work wonders. Draw what you want the site to look like, then when you are happy go back to your PC and recreate what you have dreamed up. Design doesn't only involve the actual pages but also the layout of the site. Where will each page be in relation to others. Sticky notes are great for this. Put them on a large sheet of paper and plot out your page layout. Draw lines between the post it notes to represent links. Don't just link to every page fro every other. Only link to pages that will be of use to a visitor who is on a specific page. Link to the homepage on every page. If you are using a logo on your site use the logo image or text as your home link.

If this is your first site don't worry about anything, just try and get it set up and looking as you had envisaged. I doubt there is anyone who is particularly happy with their first ever website, but the only way to learn is to gain experience. Don't be afraid to try things, its your website, you can do pretty much anything you want. Experiment with images, try editing your layout to make it work a little better. Very often when you have a design drawn out you find things need to be changed for it to work on the web. When you are happy with your site it's time to go live.

Buying a domain name
Buying a domain name for a website can be tricky. The sad fact is all of the really good domains are gone. If you are building a site that is about you why not try firstname-secondname.com?

To buy a domain you need to go through a domain registration company. These are companies who supply domain registration services. They register a domain name for you and reserve it for a period of time. The time can vary from registrar to registrar so be sure to read up on their website. At this time a domain can be purchased for up to 10 years. Once you have found a suitable domain for your website go ahead and order it. Again price can vary quite a bit from company to company. You should shop around but don't just go for the cheapest, read up and see what you are getting for your money.

A domain registration isn't instant. It can take up to 48 hrs for the domain to show as registered to you. It can take up to 4 days for the domain to be available to all of the web. The reason for this delay is usual DNS propagation. We spoke about DNS very briefly before. It is a process that makes a domain name resolve to a web server. There are a very large number of DNS servers on the web and they all need to update their data periodical. It's this update time that can cause a delay in domain name resolution. All it takes is your ISP's DNS server to be out of date and you wont be able to view a recently set up domain name. It does take some time for the DNS record of your domain to be updated.

Web hosting
Many companies who offer domain name registration also offer web hosting. For someone who is relatively inexperienced in this field this might be a good option. This means that the domain registration and web hosting will be managed by the same company. It keeps things nice and simple. You do not however need to use the same company to manage your web hosting and domain name. When it comes to hosting you can shop around. Again don't just go for the cheapest, make sure you know what you are getting, perhaps even read some reviews. Once you have decided on what company you wish to use sign up and you now have hosting.

What you then need to do is point your domain name to your web hosting. This can be tricky. Your domain registration company will be able to offer specific advice on how to do this using their platform. It does vary a lot from registrar to registrar.

Getting your website online
How that you have hosting, a domain name and a website all ready to go it's time to get your website online. This is where FTP is used. As we mentioned earlier FTP is a protocol to copy files from one computer to another. This is done using an FTP client. There are many free ftp clients out there. In order to access your web hosting using FTP you will need to know your FTP user name and password. This is supplied by your web hosting company. Once you enter the details correctly onto your FTP client and access your site you will see the public_html folder or “htdocs” just like on our local server. Copy all the files from your local server to the web server and your site is now live and on the internet.

How does it feel, you now have a website up and running. Well your far from done. You can still make changes, just do the changes locally, test locally then upload the changed files to your web host. There is no need to experiment with anything on the live host when you have a test environment right on your own computer.

The learning process is also far from over, are you happy with your site? Are there things you would like to add? Would you like to make it more interactive? Well whats stopping you?

In life we live and learn and when it comes to building websites the same applies. You can do a lot when you set your mind to it, so what are you waiting for?

Mack.

[edited by: mack at 11:04 pm (utc) on Oct. 20, 2009]

 

caribguy




msg:4006047
 6:44 am on Oct 13, 2009 (gmt 0)

Nice job, Mack!

One small comment, think about including a section about security. Wouldn't it be a good idea to teach them to use sFTP rather than FTP from the get go?

StoutFiles




msg:4006178
 12:19 pm on Oct 13, 2009 (gmt 0)

Wouldn't it be a good idea to teach them to use sFTP rather than FTP from the get go?

People just starting out on how to build a website rarely have anything worth securing. Not worth overwhelming them with security until they get the hang of the simple stuff.

creative craig




msg:4006204
 12:58 pm on Oct 13, 2009 (gmt 0)

Nice job Mack - simple yet technical enough to get the important facts across.

caribguy




msg:4006543
 9:28 pm on Oct 13, 2009 (gmt 0)

Not attempting to overwhelm, just get the right habit. Drag the folder to the sFTP window, rather than drag the folder to the FTP window ;)

Straying off topic here, sorry. It's not about what the beginning webmaster might have that's worth securing, it's about the added security risk an uneducated person creates for you and me when his or her server is hacked.

JAB Creations




msg:4008630
 9:30 am on Oct 17, 2009 (gmt 0)

No mention about not designing in IE by default is going to seriously handicap people. While beginners won't immediately encounter these issues they absolutely need to be made aware of it.

Additionally I don't see a doctype, any mention of standards, and the important issue of standards mode versus quirks mode and how it will effect the output in one browser versus the other. While they are somewhat advanced issues there should be enough mentioned in web design 101 to open the door to questions by those first learning web design.

Additionally a language comparison should have been added. I generally explain it in the following terms...

XHTML - Strictly a noun language.
CSS - Strictly an adjective language.
JavaScript - Strictly a verb language.

That sets people up for good practices in the long term.

Also I did not see any thing mentioned about domain expiration. Any one who considers buying a domain name should be immediately forewarned about the consequences of not renewing their domain when it expires.

It's because tutorials do not stress these points that I continuously see well established people making 101 mistakes. Knowing the associated risks beforehand and how to avoid them using good practices helps build confidence. Tutorials after all should not be treated like code...otherwise if code was treated like tutorials there would be no progress on the web.

That being said, I think it's a respectable 101 read.

- John

Addictist




msg:4008641
 10:56 am on Oct 17, 2009 (gmt 0)

Quit now while your ahead!

graeme_p




msg:4008659
 1:00 pm on Oct 17, 2009 (gmt 0)

They should start by using SFTP. It is no more complex to use, and the best way to keep something secure is to secure it from the start.

Also they need to know about CMSs, even if they are not going to start by using them

celgins




msg:4008680
 1:36 pm on Oct 17, 2009 (gmt 0)

Great post Mack! I think this covers the most important aspects of Site Building 101.

I agree that security (sFTP), browser standards, CSS and Javascript should be mentioned, but maybe not until chapter two.

"How Do You Build A Website? - Chapter 1 - The Basics" (Mack's principles)

"How Do You Build A Website? - Chapter 2 - Getting More Involved With Your Website" (the other stuff)

albo




msg:4008687
 3:07 pm on Oct 17, 2009 (gmt 0)

It took me awhile to learn the definite benefits of having a registrar separate from hosting company. One is easier movement to a new host if needed. Another is ability to "mix and match" DNS pointers, such as, using host service for files, and GOOG for apps such as gmail, group calendaring, etc. The ruling principle being, "never put all yer eggs in one basket".

Also (and I don't know how to point this out without citing a URL, but it has been covered in a different webmasterworld thread) there are some registrars [or is at least one] who MUST be avoided.

mack




msg:4008730
 5:32 pm on Oct 17, 2009 (gmt 0)

Obviously there is a lot that is not covered. If I had covered everything it wouldn't be a forum post, it would be a book. The aim is to give people just enough knowledge to have a little understanding, and a need for more info.

The real information is what you have learned from the school of hard knocks, problems you need to solve on your own.

Mack.

IanKelley




msg:4008761
 6:29 pm on Oct 17, 2009 (gmt 0)

sFTP

All the mention of secure FTP in this thread is interesting. Is it getting a lot of buzz right now or something?

It's certainly not a bad thing, no reason not to use it (aside from a small speed difference).

But I have to say, after working with the net for close to 20 years, on literally 1000's of different websites, using regular FTP to access 99% of them, I have never had an FTP connection hacked.

maximillianos




msg:4008923
 1:37 am on Oct 18, 2009 (gmt 0)

Poor passwords is more of a security risk. And leaving remote access ports open or unsecured.

commanderW




msg:4008937
 2:46 am on Oct 18, 2009 (gmt 0)

Mack- installing localhost for your friend was a great idea. Another big reason to use it is that if you just create and open an html file from a folder on your disk, the changes you make in your code don't show up in the browser when you hit reload. You have to empty the cache every single time you want to see a change you make. This is one big pain.

I would like to add that learning to use a WYSYWIG editor is mostly wasted time. Use that same time to learn to write the code.
The best way to learn to write code is to write it !
I spent at least 6 months reading about writing code on webmaster world every morning over my coffee. Finally I realized I was procrastinating, and that I absolutely had to actually do it.
The best way to write it is to copy someone elses !
I don't mean out of laziness here. I took a navigation bar from one of the sites that offer a css tutorial (do a search for this term), and tested code snippets for the novice to use. By playing around with their css rules and trying to modify the look and position of the navbar, I got my first hands on experience of how css works. (others may have other personal experiences, but this definitely got me moving.)

Also, sometime this year, a post was made (by SuzyUK ?), suggesting that a beginner should type out a page of content in html, with no css styling, to see how this basic code is designed, and it's various default appearances. I wish I had read this advice when I started, because you will really learn a lot this way. It appears that html was designed for academics, bureaucrats, and business people, to be able to throw a page together on the fly, with some basic formatting included from the start. You could write an illustrated school paper or business report using no css at all.

Once you learn how to write code, it's really fun. You start to feel like you are composing and laying out a book or magazine, inserting images and all, as you type. Publishing it with ftp is simpler than sending an email. Trying to get the appearance you want with css can be like playing a video game (well, sometimes).

AjiNIMC




msg:4008944
 4:34 am on Oct 18, 2009 (gmt 0)

Great post

I will go with this
1) Get a good domain name, (and few related domain names), it should phone test and billboard test. Brand, simple and other factors to consider.

2) Finding a good hosting company (this can be become a trouble), the first timers go for space, bandwidth and features whereas they forget about support time, uptime and other important issues.

3) SVN - Same mistakes, hardly people worry about backups, it is so important.

4) Now I will install Alpha (Beta), Live (and backup) ... alpha and live is imp. Install WAMP (it makes life simple for first timers) ... make sure it is under SVN.

5) Understand about DNS

6) Email setup, SPF setup

7) Get experts for website development as it has 3 parameters (Engineering/Usability + Aesthetic + Technical), if you don't get this right, it will cost you daily. Getting a good website architecture is important (I tried so many CMS but recently I shifted to advanced wordpress because of various reasons). We integrated CMS+Forum+Blog+Cart+RSS+Sitemap+Photo Gallery+.. It cost $250 - $900. Usability is so important, flexibility to change.

8) A lot more to write ... I am away from city with a wireless data card. A good post where we can put a detailed description to help newbies. I will put more into it.

Regards,
Aji Issac

brakkar




msg:4008970
 11:12 am on Oct 18, 2009 (gmt 0)

Things have changed, a new web site builder will use a cms like drupal or joomla, he won't just put up some static, extremely limited html file there.

brotherhood of LAN




msg:4008981
 1:25 pm on Oct 18, 2009 (gmt 0)

a new web site builder will use a cms like drupal or joomla

I'd tend to agree. That does not mean that they cannot spare some time to look under the hood, and give themselves flexibility over the long term, and see how wide the horizon really is.

A friend of mine was interested in developing some sites, and they'd managed a lot of what mack has posted before they spoke to me, albeit it took them a while to figure it all out. They knew they could outsource some of the techie stuff fairly inexpensively, but wanted some understanding of what's going on first before they sent people off to do jobs that would be poorly explained and/or have an unknown timeframe to complate.

Spending a few weeks worth of learning picking up these basics is invaluable IMO

mack




msg:4009141
 11:12 pm on Oct 18, 2009 (gmt 0)

a new web site builder will use a cms

They might, if they know what a cms is. Some might have an idea about contet management systems, but many won't know a thing about them.

Mack.

bedlam




msg:4010333
 8:57 pm on Oct 20, 2009 (gmt 0)

Nice intro. A small typo though...you said this:
<html>
<header>
<title>Page title</title>
</header>
<body>
<h1>Page heading</h1>
<p>This is a paragraph within the page. Note the opening and closing html tags. This means everything within the html opening and closing tags is html. The header tags contain header information. In this example we have added a title tag. Our h1 indicated that you are using a page heading. The body tags enclose the main body of the document. The p tag is used to open and close a paragraph<p>
</body>
</html>

But I think you meant this:
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>Page heading</h1>
<p>This is a paragraph within the page. Note the opening and closing html tags. This means everything within the html opening and closing tags is html. The header tags contain header information. In this example we have added a title tag. Our h1 indicated that you are using a page heading. The body tags enclose the main body of the document. The p tag is used to open and close a paragraph<p>
</body>
</html>

-- b

mack




msg:4010405
 11:03 pm on Oct 20, 2009 (gmt 0)

lol well spoted, and now corrected, don't know how that got overlooked.

Thanks.

skyleft




msg:4015606
 2:40 pm on Oct 29, 2009 (gmt 0)

yeah,I'm a new one also.

mack




msg:4015802
 6:57 pm on Oct 29, 2009 (gmt 0)

skyleft,
Welcome to WebmasterWorld :)

seo marketing




msg:4016722
 10:47 am on Oct 31, 2009 (gmt 0)

This is really a nice article on website development.

stephen186




msg:4021697
 3:27 pm on Nov 9, 2009 (gmt 0)

This is really a nice bit of information about the web development. I wish the time when I used to be a rookie, there were such useful information.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / WebmasterWorld / New To Web Development
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved