How To Build a Web Site - 10 Going Live
April 18, 2008 | Filed Under How To Build a Website | No Comments
OK, it’s that time.
If you need to re-familiarize yourself with the FTP process, please re-visit How To Build a Web Site - 03 FTP. Open up your FTP program, connect, backup the files that are already in there, I usually just append a _bakup to the filenames, then select all your local project1 files and hit the send arrow, or post or whatever your program of choice offers.
Browse to the URL and check it all out. My guess is that you will be there for the next few weeks tweaking, posting, tweaking some more, add infinitum.
That concludes my little How To Build A Web Site series. Not a lot of detail or in depth explanation but you have a finished product which you can dissect. There are plenty of resources on the internet that focus on the details of HTML and CSS so the rest of this site will be dedicated to providing techniques, tips, tricks, and solutions to the problems I encounter along my way as a freelance web designer. Hopefully someone will find something they need and save some time and money.
Sheppco Web Design Blog: How To Build A Web Site
01 intro - 02 hosting - 03 ftp - 04 setup - 05 html - 06 css - 07 javascript - 08 tweaks - 09 SEO - 10 Going Live
How To Build a Web Site - 09 SEO
April 17, 2008 | Filed Under How To Build a Website | No Comments
Top listings at Google are the subject, cause and effect of the new bread of obsessive compulsive disorders. Fortunes made and lost over a single word. I remember back when you could just type a word seven hundred times on a page and watch it jump up three pages at Google. Search Engines are really smart now. No cheats.
Let me show you something that demonstrates one of the ways Google works these days…
Go to Google and type in the keyword click here.
Now look at what the top site is. ??? Adobe?
Did they pay for this? No. Why then does Adobe get the top listing for the Keyword click here?
Think now how many times you have seen “Need Adobe Acrobat? Click Here”
A zillion times! The keyword click here links to Adobe more times than any other site so Google regards Adobe as the most relevant to that keyword thus the top listing. This is called an inbound link or a backlink.
Keyword selection:
Two things to keep in mind
1) Keywords are what people type into the search box at Google.
2) You MUST use the word in the actual text or it isn’t a keyword.
For example lets say you sell hi end flashlights. For keyword selection you would start with flashlights. That’s what you sell. Do a search at Google on flashlights, you will see there is a lot of competition for this word. There are many sites with that word in their URL. This is who you are competing with. You have no choice because you sell the same thing. However if you work at it you could beat them.
Now you need to refine your main keyword and differentiate yourself from the competition…
Military flashlights, Hi-Tech Flashlights, professional flashlights, flashlight company, military flashlight company.
Now refine and define further…
Military flashlights online, black and silver hi-tech flashlights.
Now create your keyword phrases to sprinkle throughout the text, use in page titles and section headers …
This hi-tech flashlight has a range of 2 miles…
There are many pseudo military flashlights available today but Inova military flashlights are the best.
You get the idea.
Page Rank:
Google ranks pages according to their importance.
A sites importance is determined by…
a) How relevant it is to the keywords it uses. If a word is used in the title of the page or is a section header, Google dubs it important.
b) The amount of backlinks and the page rank or “quality” of the sites that have them. A backlink is a link to your site, the more your site has the more important it is. Using the actual keyword as the link itself is very powerful…
GoDaddy has a Page Rank of 7, w3schools.com, 8. The Page Rank of the sites that have your inbound links determines their quality. If you could get w3schools to link to your site using “your keyword” as the linked text, your position on Google would improve for searches on “your keyword”.
So… it boils down to
Relevance of the keyword to the page content as determined by its frequency of use and importance to the page. How many inbound links there are and how important they are as determined by the referring pages Page Rank as well as the relevance of the inbound link to the keyword searched.
Focusing on too many keywords on one page doesn’t really work if you don’t have the content to back it up so the goal is to bring the Page Rank up for a specific keyword or phrase. You do this by …
- Using the keyword in the content of the page, preferably in the title, the description Meta tag, the keyword Meta tag, and it should comprise at least 1% - 3% of the page text (debatable). If the keyword does not occur in the copy or the title then it should not be in the keywords Meta tag.
- Create backlinks to your pages using the keyword as the linked text.
- This may be a stretch but it has been proven quite effective… Get Word Press and start a niche blog utilizing and focusing on your keyword, register it at technorati.com/blogs/ and any other blog engines you can find then write some articles. Blogs get spidered more often than regular sites. Also, Word Press has a built in utility that pings a central blog engine that spiders your site every time it’s updated, this engine then posts the new update to a hundred or so blog search engines like technorati.
Refine the keywords. Work the content. Get inbound links. Make the site bigger and keep it growing.Get Firefox and install the SeoQuake add-on. It shows Page Rank, Inbound and outbound links, keyword density, Alexis rank, listings on Google and Yahoo etc… It is an invaluable SEO and web design tool.
Next lets put these files live!
Sheppco Web Design Blog: How To Build A Web Site
01 intro - 02 hosting - 03 ftp - 04 setup - 05 html - 06 css - 07 javascript - 08 tweaks - 09 SEO - 10 Going Live
How To Build a Web Site - 08 tweaks
April 16, 2008 | Filed Under How To Build a Website | No Comments
We’re almost there! We’ve got a working homepage and all the css and scripts are in place. Lets add an image, create the rest of the pages, make a few tweaks and we’ll be done with our website.
To make the other pages just copy your html and paste it to make three new files. Remove the form from two and save them as gallery.html and about.html. For contact.html don’t take out the form, rather, take it off the home page, index.html. Fill in all the correct URLs in the menu section of each page. While doing this add a class=”cp” to the menu link of the current page. In other words, on contact.html, in the menu, in the link to contact.html, add the class=”cp”. This will correspond to the first of three new styles we will be adding.
The first new style to add to your stylesheet is…
#menu li a.cp { background-color:#bbb; }
This takes care of the Current Page style we added to the subpage menu links.
The other two new styles will take care of the formatting for the Gallery page. They are…
#gallery img { border:0px; }
#gallery td { text-align:center; vertical-align:top; }
Now lets add an image. I made one that is 800 pixels wide and 116 or so pixels high and just slapped it on top of the menu. The #wrapper style takes care of centering it and the 0 magining on the menu top will see to it that they are flush together.
That should do it. I know it’s a lot to take in if you’re just starting out and there’s not a lot of explanation but, I have always found it easier to process things when I have a complete subject to study.
Download it all here - How To Build A Website - project1 - FINAL.
Check out the reference section for reference data as well as the outgoing links page (coming soon) for sites with related and useful information.
Next, what do we PUT on these pages. Aside from the 4 Gallery images and the Contact form it’s an empty site so we need to consider the copy. Once complete and posted live your site is like a drop in the ocean, no, a quarter of a drop in all the oceans and seas and lakes and ponds and puddles etc… In order to give your site the best chance possible there are a few things you should know about Search Engine Optimization or SEO before you launch into filling up your pages with content.
Sheppco Web Design Blog: How To Build A Web Site
01 intro - 02 hosting - 03 ftp - 04 setup - 05 html - 06 css - 07 javascript - 08 tweaks - 09 SEO - 10 Going Live
How To Build a Web Site - 07 JavaScript
April 13, 2008 | Filed Under How To Build a Website | No Comments
JavaScript is what we call a client-side programming language. This means all the code is loaded onto the users computer when the web page is loaded. It also means all the processing JavaScript does is done on the users computer, no trips to the server. This is because the engine that processes the commands is built right into the browser itself.
JavaScript gets very deep, approaching the power of a full fledged object oriented programming language like Java however, since this is a web design blog for beginners we’ll focus on just a few functionalities of the language as well as how to apply them to our html.
So far our work in progress consists of an HTML document and a stylesheet in a folder named project1. The stylesheet is in a sub folder named css.
For this project we’ll deal with two common but simple functions wrapped up in a single application. The alert box and a simple validation. To do this we will be using the html construct called the Form. A form is what we use to get input from the user. A form consists of input boxes, checkboxes, dropdown selectors, radio buttons, and of course the “Submit” or “Go” button. HTML forms are in themselves worthy of several dedicated articles however for the purpose at hand please insert the code below into your HTML document just above the last </div>.
<div id=”contactbox”>
<form name=”form11″ action=”javascript:alert(info);” method=”post” onSubmit=”return checkFields();”>
<span class=”required”>*</span> = required field<br /><br />
<span class=”required”>*</span> Name: <input name=”name” type=”text” class=”formfield” /><br /><br />
<span class=”required”>*</span> Email: <input name=”email” type=”text” class=”formfield” />
<div id=”comments”>
<span class=”required”>*</span> Comments<br />
<textarea name=”comments” rows=”6″ cols=”36″ wrap=”virtual” class=”textfield”></textarea>
</div>
<input name=”submit” type=”submit” value=”Send Email”>
</form>
</div>
Also, here are 5 more styles to add to your stylesheet to control the look of the form…
#contactbox { text-align:right; width:370px; }
.formfield { width:305px; vertical-align:text-bottom; }
.textfield { width:350px;}
#comments { text-align:left; }
Now lets add the script. Place the following code in a new file and name it script.js. Save script.js into your project1 folder in a second sub-folder named js.
function checkFields() {
missinginfo = “”;if (document.form11.name.value == “”) {
missinginfo += “\n a Name”;
}if ((document.form11.email.value == “”) ||
(document.form11.email.value.indexOf(’@') == -1) ||
(document.form11.email.value.indexOf(’.') == -1)) {
missinginfo += “\n a Valid Email address”;
}if (document.form11.comments.value == “”) {
missinginfo += “\n a Comment”;
}if (missinginfo != “”) {
missinginfo =”Please Enter:” +
“\n_____________________________\n” +
missinginfo + “\n_____________________________\n” +
“\nAnd Submit Again!”;
alert(missinginfo);
return false;
}else return true;
}
info = “You DID IT !!!”;
Now back to our HTML. Add the following code to the <head> of your HTML document just after the link to the stylesheet…
<script src=”js/script.js” language=”javascript” type=”text/javascript”></script>
OR download the completed packageHERE.
In this script we create a function called checkFields. First we declare a variable named missinginfo. We then check each field to see if it is blank. If it is blank we add the field name to our error message which is a simple alert box. For the email validation we also check to see if there is a dot(.) and an @ sign, not very comprehensive but it suffices for our purposes.
There you have it. A working web page with css and a javascript.
Next we’ll add some finishing touches to our pages and discuss making the form do something other than pop up messages.
Sheppco Web Design Blog: How To Build A Web Site
01 intro - 02 hosting - 03 ftp - 04 setup - 05 html - 06 css - 07 javascript - 08 tweaks - 09 SEO - 10 Going Live
How To Build a Web Site - 06 CSS
April 11, 2008 | Filed Under How To Build a Website | No Comments
Cascading Style Sheets or just CSS are what we use to “style” the content of our HTML documents. Stylesheets have been around in some form or another since the beginning but were standardized in the 90s after a show-down between 9 different versions. Cascading Style Sheets get their name because a style can inherit or “cascade” from another. Styles are applied to HTML elements such as the <body> and <div> tag. When a tag is nested within another it inherits it’s parent’s styles.
CSS syntax consists of a property, a colon (:), a value, then a semi-colon (;) as follows…
font-size:12px; font-weight:bold;
Styles are applied to page elements in three ways. The first way is called an inline style; this is where the style is applied directly to the HTML element using the “style” tag modifier.<body style=”margin:0px;”>
<div style=”font-size:12px; font-weight:bold;” > Bla bla bla </div>
The second way is to add a <style></style> statement to the <head> of the HTML document.
Lets add some style to our working document from the last article.in the <head> section, under the <title></title>, add the following
<style type=”text/css”>
body { margin:30px; background-color:#999; font:12px Arial, Helvetica, sans-serif; color:#000; }
a:link, a:visited { color:#000099; text-decoration:none;}
a:hover { color:#cc0000; text-decoration:none;}
#wrapper { position:relative; top:0px; left:0px; margin:auto; width:800px; background-color:#fff; border:1px solid #333; }
#wrapper div { padding:20px; }
#menu { width:100%; height:44px; margin:0px; padding:0px; background-color:#ccc; font-size:11px; font-weight:bold; text-transform:uppercase; }
#menu li { padding:0px 10px; float:left; height:46px; margin:0px; list-style-type:none; }
#menu li a { display:block; padding:15px; color:#fff; }
#menu li a:hover { background-color:#999; }
h1{ font:bold 24px Georgia, Times, serif; color:#109388; margin:0px 0px 18px 0px; line-height:normal}
h2{ font:normal 16px Georgia, Times, serif; color:#000; margin:10px 0px;}
</style>
Once we’ve inserted the above code, editing the HTML is quite easy…
Just under the <body> tag in our working document you will see a <div> and a <ul>. Add the following id modifiers to them.
<div id=”wrapper”>
<ul id=”menu”>
Check it out.
Styles can be assigned to any tag such as the body, links (anchors or links) , h1, and h2. They are assigned to these tags as a class (.) or an id (#).
We list the style with a pound sign(#) and call it using an id if it occurs only once on the page.
We list the style with a period(.) and call it using a class if it will occur more than once on the page. You can use a class if the style only occurs once as well but usually people prefer the id in these cases.
The third way is to have a separate file which would have a .css extension.
To do this we simply take out styles and put them in a separate file.
Sticking with our directory structure we set up in article 4, save this file as style.css in Web/project1/css.
Next replace the entire <style> </style> block on your HTML page with the following…
<link rel=stylesheet href=”css/style.css” type=”text/css” />
This a link to the stylesheet you just created.
You Web directory should now have two files. The HTML, which should be in your Web/project1 folder. And the CSS, which should be in your Web/project1/css folder.
Please find a CSS reference chart in the references section of this site.
So far so good. Next up we will discuss JavaScript, briefly. It’s a big subject but very addictive and VERY powerful.
Type at you again soon.
Sheppco Web Design Blog: How To Build A Web Site
01 intro - 02 hosting - 03 ftp - 04 setup - 05 html - 06 css - 07 javascript - 08 tweaks - 09 SEO - 10 Going Live
How To Build a Web Site - 05 HTML
April 6, 2008 | Filed Under How To Build a Website | No Comments
Hyper Text Markup Language.
HTML first appeared in the early 80s in a paper by a guy named Tim Berners-Lee. It was a system for researchers to exchange and modify documents. By 1989 it had developed into the hypertext system we are familiar with today and in 1990 the Internet was born when the WorldWideWeb (W3) project was accepted by CERN.
The structure of an HTML document is for the most part straight forward though there are a couple of parts that we will not be using now such as the Doctype which deals with technical details beyond the scope of this series.
Open up a text editor or your favorite web IDE such as Dreamweaver. I do not recommend using MS Word because I don’t like the way it interprets HTML, it adds stuff, a lot of stuff. Dreamweaver is great but it costs $800 and I don’t expect anyone reading this to have it so, how about text pad.
Open up text pad and type in the following;
<html>
<head>
<title>HTML Document</title>
</head>
<body><div>
<ul>
<li><a href=”index.html”>Home</a></li>
<li><a href=”about.html”>About</a></li>
<li><a href=”gallery.html”>Gallery</a></li>
<li><a href=”contact.html”>Contact</a></li>
</ul><div>
<h1>Welcome</h1>
<h2>This is the home page</h2>
<p>Please change this text to something useful</p>Thank you,<br />
The Management</div>
</div>
</body>
</html>
Now save this document as index.html in your Web/project1 folder.
OR just download it HERE.
Open up a web browser. Open up an Explorer window and go to your Web/project1 folder. Drag and Drop index.html onto your browser.
There you have it. A web page… sort of. We’re not done yet but you have the basics that make up a page. Now lets go over a few things so you have a better understanding of the HTML syntax.
An HTML document is made up of tags. A tag resides in less-than greater-than brackets like so <the tag>. Notice in the code above that each <tag> has a complimentary </tag> such as <html> and </html>, <p> and </p>. The one with the forward slash signifies the end of the “tagged” content. So everything inbetween the <html> and the </html> is the HTML document… duh. Inbetween <head> and </head> is the … header, <p> a paragraph </p>, <div> a div </div>, etc… Notice also that certain tags live inside other tags, the <title></title> lives inside the <head></head>, and everything of course lives inside <html></html>. Some tags do not require an end tag however, html standards require that you put a forward slash at the end of these tags. For example a line break tag is <br /> and a horizontal rule tag is <hr />.
<html> : This defines the document as an html document, aside from the filename extension. When a browser sees this it knows what to do. Other types of documents a browser knows are PHP which starts with <?, and ASP which starts with <%. You can put PHP in an HTML document and HTML in a PHP so you have to define the document so the browser and server know what’s what. The two sections that live inside the <html></html> block are the <head> and the <body>.
<head> : Many things can go in the header of an HTML document. The header is a reserved area for things that define the document such as the title(below) meta tags and things that the document uses behind the scenes such as Java Scripts and Styles. More on these later.
<title> : The Title lives inside the <head></head> block. The Title is what is displayed at the very tippy top of the browser. It is also what is displayed at Google and the other search engines. Very important.
<body> : This is where the actual content of the page begins. The remaining tags live inside the the <body></body> block.
<div> : A div is what you call a block element. OK, it’s a box you put stuff in. By default it produces a line break and some top and bottom margin but this and much more can be controlled with styles (next article).
<ul> <li> : ul = unordered list. li = list item. The unordered list will output a bulleted list with top, bottom, and left margins. Another variation is the Ordered List or <ol>. Instead of bullets there will be numbers or letters, whichever you specify. The List Item, <li>, is the bulleted or numbered item.
<h1> <h2> : h1 = header1, h2 = header2. Header tags define font size. They also define a hierarchy of importance for the data that follows them. H1 is the biggest and displays text at about 32 pixels, H2 is next at 24 pixels, H3 is 18px, H4 is 16px, H5 12px, H6 10px. Header tags also produce a line break and top and bottom margins.
<p> : This is a paragraph. It produces a paragraph break automatically.
<br /> : This is a line break
<hr /> : This is a horizontal Rule(line)
There are plenty of modifiers you can use to enhance these tags however most of the direct, old-school tag modifiers are becoming obsolete in the shadow of the cascading stylesheets.
On to CSS.
Sheppco Web Design Blog: How To Build A Web Site
01 intro - 02 hosting - 03 ftp - 04 setup - 05 html - 06 css - 07 javascript - 08 tweaks - 09 SEO - 10 Going Live
How To Build a Web Site - 04 Setup
April 1, 2008 | Filed Under How To Build a Website | No Comments
Welcome to the Sheppco web design blog.
This article is the fourth in what will be an eight part series on how to build a web site. This is for the absolute beginner. We’re not building a WordPress or an ecommerce solution here, we’re building step by step, a simple, four page, bare bones website, no frills. I remember it took me quite some time to get a grip on all the different technologies and programs needed to get a web site up and running. My hope is that someone out there will find this useful, save some time and frustration.
Setting up your work environment is completely a matter of personal preference so I will only make a few suggestions here. It is definitely something you should take under consideration especially if you plan on making several web sites. Having a system of organization can save time and disk space, a place for everything and everything in its place.
I use two main folders, Web and Dev. These two folders have identical sets of sub-folders. I usually pick a name for each project and have a folder for it in both Web and Dev. The Dev folders have the source documents, Photoshop files, original un-cropped photos, Word docs with copy, etc… . The Web folders have the deliverables, the files that are my client’s web sites, the project files that get posted live.
If you are following this series of articles then the next thing you will need to do next in order to build your first web site is to make yourself a Web and a Dev directory. They can be anywhere, in My Documents, the Desktop, or in the root of your C drive. In each of these new folders make another called project1.
Next we need to pay a little more attention to the Web/project1 folder, it is going to need a few sub-folders as well. In your Web/project1 folder make three new folders named images, css, and js.
Your file directory should look something like the image to the left. You can obviously name these folders whatever you want, uppercase lowercase whatever, this is just an example that I will attempt to keep consistent.
That’s it. You are all set up. Now for the fun part, the HTML.
Sheppco Web Design Blog: How To Build A Web Site
01 intro - 02 hosting - 03 ftp - 04 setup - 05 html - 06 css - 07 javascript - 08 tweaks - 09 SEO - 10 Going Live
How To Build a Web Site - 03 FTP
April 1, 2008 | Filed Under How To Build a Website | 1 Comment
FTP, SMTP, HTTP, IDE, KFC, what the… In 350 years the entire English language will look like assembler code… a large string of 1,2, and 3 letter acronyms with weird punctuation. In the meantime, File Transfer Protocol or just FTP is one of the foundation blocks of the mechanics behind the internet. Its the programming contraption used to… transfer files.
FTP is what we call a protocol. Protocols are basically sets of rules on how an outgoing and incoming stream of data (0’s & 1’s) is interpreted when traveling from one device to another. The originating computer issues the data which then travels through several layers of software before it leaves your computer and embarks across the internet to the intended receiving device. The data could be a request for a web page, or a bunch of pictures going to a server. A request for a web page would be a web address and would originate from a browser. The first four letters of this request are http, for example http://sheppco.com. This tells the computer that the data will be using the Hyper Text Transfer Protocol. The computer will now append some extra stuff to the beginning (header) of this data. For starters it will attach your computers address so the receiving end knows where to send the data you requested.
FTP or File Transfer Protocol differs from HTTP in that it is more of a one way street. You don’t normally use a browser for FTP (you can use IE to FTP but I don’t recommend it). You normally use a dedicated FTP program or one that is included with an IDE or Integrated Development Environment… like Dreamweaver. Dreamweaver is great but it is NOT free so I will recommend Filezilla or WSFTP. Two great programs that do the job very well and are free.
Go to http://filezilla-project.org/ and download the free “client”. Install it. Now you need three things a) the IP address of the server you want to upload to. b) the account username and c) the account password.
Remember in my last post when I said “Save the emails, write down the username and password you choose” Well, this is where you’ll be glad you did.
FTP programs are pretty easy to figure out and they have robust help sections. Plug in the IP address of the site, you can usually just put in the URL (without the http part, this is ftp) www.website.com or whatever. Then plug in your username and password and hit connect. You should now be able to see the files and folders on your server in an explorer-like window.
Voi-La, your connected. Save this connection, we will be using it soon. Next I will discuss setting up a work environment on your computer.
Sheppco Web Design Blog: How To Build A Web Site
01 intro - 02 hosting - 03 ftp - 04 setup - 05 html - 06 css - 07 javascript - 08 tweaks - 09 SEO - 10 Going Live
How To Build a Web Site - 02 Hosting
March 31, 2008 | Filed Under How To Build a Website | No Comments
Hello, how many are in your party? Smoking or non-smoking? Wasn’t all that long ago when this was the only mental image conjured by the word hosting. Now days it’s a whole other realm that you will need to be familiar with if you intend on building your own website.
A few terms you will become familiar with:
- Server
- Host
- Domain
- Domain Name
- Domain Name Server
Server: A server is simply a computer running server software. Popular web server software packages are Apache for computers with UNIX based operating systems and IIS for computers running Windows. Server software serves files… duh. Anyone can get web server software for free, load it on their laptop and be a web server. Not a good idea unless you know what you are doing but it shows that it is not as much a mystery as you may have previously thought.
Host: What is a host? It’s a computer or server to be more specific. I suppose it could also be the company that owns the servers as well. Hosting companies such as GoDaddy provide access to servers.
Domain: A domain is an allotment of space on a server. A server farm ( a place with a bunch of servers) will divvy up the drive space into segments that will will be rented by customers like us via a hosting service. These drive segments are the domains. Each domain has an address, usually several, which are all numeric HTTP addresses like http://225.109.54.55.6. This is called the IP address, IP being short for Internet Protocol which is the foundation of the internet, the set of rules by which data is sent and received over the phone lines, cable, optical fiber, and wireless transmitter/receivers.
Domain Name: The domain name differs from the physical domain mentioned above. A domain name is alphanumeric and has the .com, .edu, etc… at the end. It’s the one you type into the address bar of your browser. The URL you say? Not yet. The domain name is just the word and you have to reserve it, with cash, so it will be exclusive to you, then you have to take the necessary steps to associate the name with the server space that hosts your website, more on that later.
Domain Name Server (DNS): Another one of the 500,000 acronyms we have floating around in there is DNS or Domain Name Server. This is simply a piece of software that is run on servers everywhere all over the world which keeps track of which domain name belongs to which domain or allotment of space on a server. This is the connection I mentioned above and you may have to set this manually depending on where your site is hosted and where you registered your domain name.
********************
So how does this all tie together?
The steps you need to take to get hosting for a website are…
- Buy a domain name (the word that will be in the URL)
- Get a hosting account
- Set the DNS
Buying a domain can be fun, or it can be quite frustrating. Fun because you are off on a new adventure, selecting a new identity, a clean slate, its potential is unlimited. Frustrating because they’re all taken. If you can somehow manage to find and purchase a domain name that is an actual, familiar English word or phrase and isn’t 128 characters long, you win. I’m sure there are good ones out there. Perhaps try a catchy play on words, a clever use of numbers and/or punctuation, your full name, etc… You’ll find something.
Where do you do this? There are many places, godaddy.com, register.com, and networksolutions are just a few. When you browse to one of these sites you will see it is very easy to obtain a domain name however the pricing can vary.
Save all the emails, write down your username and password.
Getting a hosting account will be just as easy. Where do you do this? Again, there are many, no, millions of places to do this. If you followed any of the links above you may have noticed that GoDaddy offers hosting, and its quite affordable. Powweb is another that I’ve found to be reliable. Shop around though, the deals are always changing in this competitive field. At the moment I believe GoDaddy is $4 a month for UNIX or Windows hosting AND they toss in a domain name for $2.
Again, save all the emails, write down your username and password.
UNIX/Linux or Windows may come up during this process. If you’re reading this article then I would say it does not matter at this point. Some hosts will charge more for a Windows account which does NOT mean its better than UNIX that has been around from the beginning and has remained primarily unchanged due to its rock solid reliability and flexability. Windows systems are pretty cool I must admit, .NET is a champion that only someone with Microsoft’s resources could have developed, BUT, like I said, if you’re reading this then that type of functionality is a ways off for you so, if it’s more don’t bother, if the price is the same, then do whatever you feel is right.Something to keep in mind when making this decision is that the programming languages used for these two operating systems is different. UNIX/Linux (Linux is a very popular derivative of UNIX) primarily use open source (free) programming languages such as PHP while Windows systems use Microsoft’s Visual Basic and C# to create .asp pages. This is something to consider if you plan to use third party software like WordPress which is made with PHP and should therefore reside on a UNIX system. There are crossovers where PHP applications can run on Windows machines and some Windows apps can run on UNIX systems so you will need to be mindful of these details.
Setting The DNS: Now heres the fun part. Maybe, just maybe you won’t have to deal with this but more than likely, somewhere along the way you will. If you bought your domain name from the same place you bought hosting then this is probably already taken care of. If not then you will need to do this manually. So, if you registered your domain at Network Solutions but have a hosting account at Powweb you will first go to Powweb and get the name of their servers. There are usually two of them and they will be something to the nature of ns1.hostname.com and ns2.hostname.com. Once you have these you will go to your domain registry account, Network Solutions in this scenario, login and find where you set the DNS. No matter where you have this account they don’t want you to change it, they want you to host with them so you may have to wade through a bog of ads and promotions and “Wait! if you switch you will be missing out on all these wonderful and necessary services” etc… Just walk on by, smile and wave and hit continue, no thanks, or whatever.
Set the DNS. They say it takes up to three days for the new setting to perpetuate itself on all the name servers across the globe but I have never seen it take more than a few hours.
So what are you waiting for, go get a domain name and a hosting account and we’ll build us a website!! Next I’ll be talking about FTP and how to connect your computer with the server you just rented so you can put your files on it.
Sheppco Web Design Blog: How To Build A Web Site
01 intro - 02 hosting - 03 ftp - 04 setup - 05 html - 06 css - 07 javascript - 08 tweaks - 09 SEO - 10 Going Live
How To Build a Web Site - 01 Intro
March 28, 2008 | Filed Under How To Build a Website | No Comments
Everybody’s got one. I have 2… and a half (one parked domain). Why not, web design is easy enough, it’s fun and I hear you can make money.
So where do you begin?
Heck, just pick any one of the big “enablers” and they’ll pretty much walk you through every step. Enablers like MySpace, GoDaddy, or Network Solutions can provide complete packages while smaller enablers, like WordPress, usually offer one specific service or product but will either offer third party solutions or point you in the right direction for the other things you need to get started with your first web site. For sites like MySpace and Blogger you don’t need anything, not even money. If you want to sell something theres Ebay and Amazon though they take commissions. You can do it all for free and with little to no technical knowledge.
However, maybe, just maybe you want something that looks pro. Nobody else’s logo on the homepage or company name in the URL. Something that’s all you. Or maybe you are a do-it-yourself kind of person and think the web is cool. Either way, here are some of the basic basics. Stuff you need to know and will spend hours gnawing your noggin trying to figure out on your own. Besides, I spend many hours reiterating these explanations to clients on a weekly basis and it will be nice to have a central place to gather, organize and work them out to be more thorough.
Keep in mind that while writing this series I have in mind my 80 year old mother who never completely figured out the typewriter.
Things you will need to build your own website besides a computer with a browser and an internet connection …
- A text editor
- An FTP program
- A host account
First things first, the next article will be on getting a hosting account and taking care of such details as setting the domain name to point to your new host.
Sheppco Web Design Blog: How To Build A Web Site
01 intro - 02 hosting - 03 ftp - 04 setup - 05 html - 06 css - 07 javascript - 08 tweaks - 09 SEO - 10 Going Live
