Atilus Internet Marketing & Web Development

There hasn’t been one month that has gone by without one of my friends or relatives asking me about how a website is built. Most want to learn how they can build a “simple” website. The response expected would be, “Sure! It’s easy! I’ll show you.” For the most part, this is true as long as you’re willing to put a little time to learn some things.

Recently a friend of mine asked me this precise question: “How do I make just a website? You know… just a basic website.” Truth be told, there is no basic way to explain how to make a basic website. Anyone can Google for sites that can make cookie-cutter web pages based on some pre-made template. This article isn’t about providing that venue though… The purpose of this article and the succession of articles to come is to educate you, the reader, on what is involved in building a website.

My goal is to clarify what is involved in making a website, because a basic understanding of web development is crucial to learning how to build a website– even a simple one. By the end of these articles, we will have a good grasp of the technology used, why one is created in the first place, and finally how to get started in building your very own website.

We often take surfing the web for granted. Sometimes we pass from site to site without a second thought about the graphic design, styling, or page flow of any of site we come across. Besides the HTML and CSS we see when visiting a site, there may be some dynamic code that drives the site on the server it’s hosted on. — Hold on a second, what the heck is all this crazy jargon? HTML, CSS, dynamic code, server, host??? I’ll clarify with some definitions.

Basic Terminology to know:

• Server - A computer accessible through the internet that holds the files of one or more websites.
• Hosting - Service provided by an entity or third party that owns a server. The purpose of hosting is to have somebody else responsible for maintaining the technical aspect of keeping the resources on the server available to the world.
• HTML - Stands for, “Hyper Text Markup Language.” It is programming code that is contained within a web page. HTML controls some (not all) of what you see in your web browser when you visit any page on the internet. For example, the text you are reading now is part of the HTML code within this website.
• CSS - Stands for, “Cascading Style Sheet.” It is a programming language that is contained within HTML to control the style of most pages on the internet.
  • Why is CSS on “most” pages and not all? HTML has some basic capability of styling a website, but when a more elaborate or complex design is wanted, CSS has the flexibility that HTML does not.
• Dynamic Code - Programming languages that are usually used when databases and/or cookies are required for a website to function. Dynamically coded websites display content that changes due to information that you give it. Note: In order for this kind of code to display something in your web browser for you to see, it will at some point output in HTML.
  • Why do websites use databases? If you login to a website to access your personal information, order products, or write on your blog, the website is using dynamic code to connect to a database. The “dynamics” in dynamic coding come into play when the website has to make decisions like, “Are you allowed to access this private page?” For example, you provide a website a user name and password in a login box. The website then compares that information you gave it with a list of user names and passwords in a database. If it finds a match with the information you provided, it will allow you to proceed into a member-only part of the website.
  • Yes, I said languages. Dynamic code can be written in more than one language. For example, ASP, PHP, PERL, Cold Fusion, and Ruby are fine examples of dynamic coding languages for the web.
• Cookies - Small files that a website saves onto your computer that contain information the website requires for your next visit.
  • What kind of information can a website possibly require to save onto your computer? Commonly, many sites choose to save your user name on your computer to keep you from having to retype it every time you visit the site. For example, when you make your next visit to a site that previously saved a cookie onto your computer, it will access it and display its’ information onto a part of the page you’re on (likely the text box where you would usually type in your user name.)

Here’s a diagram that illustrates how HTML files, a server, a host, and you are involved with a website:

For now, the preceding diagram and terminology should get you started on understanding some rudimentary techy concepts of website development. In Part 2 of this article we’ll learn about the reasons why a website is created and how one can benefit from one.

Visit www.duckypc.com for the future Part 2 of this article and more!

24 Oct | Post by Devin Castro. Filed under Web Design, Web Basics.

In our last installment of the web basic series we briefly touched on what a website. I described a website’s internals, how it works, by comparing it to a house or building. I compared it in this way in order to give you incite as to the virtual workings of its construction. In this installment I would like to talk about the possibilities, the potentials of a website.

The possibilities or the potential of websites is literally limitless. As new technologies emerge, and new ideas introduced websites are solving increasingly complex real world problems.

Most people or business owners surf the web often, finding products and services online. To understand just a little bit about the potential of a website just try to remember the last time you opened the yellow pages to find a business or service. When was the last time your colleagues did the same?

Below is a list of what websites have the potential to be for all kinds of companies. In subsequent Web Basics installments I will elaborate on each.

Read the rest of this entry …

05 Aug | Post by Zach Katkin. Filed under Web Design, Internet Marketing, Web Basics.

After a brief discussion with everyone yesterday we decided to create a new series of posts called “Web Basics.” We agreed that we needed to take a step back for you, our friends and family, and stop talking about all this technical stuff. Web people have a habit of using web speak. I suppose, like most professions, we use the slang and acronyms pertaining to our industry; but we know this doesn’t help. It only succeeds in turning your eyes into the back of your heads and gets you frustrated…

Well no more!

So, what is a website?

I think a website can really be explained on two fundamental levels, the literal and the potential. For now lets concentrate on the literal. A website is literally a collection of information beamed to you through the Internet and reassembled through a host of very complicated processes (most of which we won’t get into). It is a series of codes, written in a language your computer can understand, that is automatically assembled revealing the pretty boxes and do-hickey’s you see on screen.

Your average website has 4 fundamental components. Backend Code, XHTML, CSS, Javascript

F!@(), Zach! You promised you wouldn’t use any of those fancy acronyms…

Yes, I know, but wait…. (I like to talk to myself)

Websites are a lot like any physical building or construction project. You have a base, a foundation of cement and steel beams on top of which you layer design elements. On top of the cement foundation and vertical wooden planks you add drywall, paint, molding, pictures, etc. Additionally, components are added to allow you to interact with the building. Doors are bolted on, windows are added, allowing light and entry into your new building.

Websites are just like buildings.

The basis of any website, its foundation is called XHTML (eXtensible Hypertext Markup Language). It is literally the support beams and concrete that holds everything up and together. On top of this base you layer on CSS (Cascading Style Sheets). CSS is the design element, it is a file that dictates how everything will look, what color paint will go here, what pictures will go there. Finally Javascript are the doors, the elements that control interaction - the fancy hover effects, the cool popups, the scrolling.

And finally, the backend code for any website really just spits out the XHTML, you can think of it as the mixer of the cement that will be used as the base or foundation.

In additional Web Basics posts we plan to explain more about the basics of XHTML, CSS, Javascript, web marketing, and much more. But, we’d love to hear from you. This whole series was really the culmination of input we received from friends, relatives, and clients and we want more. If you have any ideas for a post or have been wanting to learn something about the web or technology in general, please contact us and let us know.

01 Aug | Post by Zach Katkin. Filed under Web Design, Web Basics.