BASIC WEBSITE ANATOMY
Adam Thomas, Principle Solution Architect
One of the services we offer is website design. When new clients interested in web design engage us, they often have varying levels of understanding of what a website is. This month's Tech Topic covers the structure or anatomy of a basic website.
The Bulletin Board
When trying to explain something technical, I find it helpful to compare it to something a that's more familiar. One analogy that is fairly accurate for explaining a website is to compare it to a bulletin board.
Wall Space = Web Hosting
In order to use a bulletin board the first thing you have to do is find a wall to put it on. In many cases this is a wall you own. However in rare cases you may actually rent space on a wall to put your bulletin. Additionally the bigger the bulletin board the more it's going to cost and the more space you need on the wall to mount it.
A website has the same needs. It needs space somewhere to hold, or host, all of its content (text, images, pages, etc.). Instead space on a wall, you need space on a web server. A web server is a big powerful computer that is always turned on and always connected to the internet. You can setup your own server, but today it's usually much more cost effective to rent space on a web hosting company's server. And just like the bulletin board the more content you want to put on the website, the more it will cost.
Location, Location, Location -or- It's all in the name
With a bulletin board, location is very important. If you want a lot of people to see what you've posted, it needs to be somewhere that's easy to find. With a website the name of the website such as www.tophatlimited.com is equally important. Unlike bulletin boards, there's an organization, ICANN, that keeps track of all the website names (a.k.a. domain names) and makes sure no two websites have the same name. In order to get or register a domain name you have to go through a company such as GoDaddy that is allowed to register and reserve names for specific lengths of time. Just like renting the web hosting, you have a re-occurring fee to maintain ownership of your domain name.
- Domain Name: Domain names provide more than a name for your website. They also provide you the ability to setup email accounts with [email protected]. Additionally you can setup other servers such as file servers: ftp.yourdomainname.com.
- Web hosting vs email vs registrar: Web hosting only provides space for web site files. Email accounts are not included. However many domain name registrars like GoDaddy provide multiple services including the ability to register your domain, host your website, and setup email accounts. This can get confusing because depending on the features you want you may want to register your domain name with one company (GoDaddy), host your website with another (Weebly), and get email through yet a third company (Microsoft Office 365).
- Name Server: So how does your web browser know how to find the right web server with your website? Just like phone companies publish phone books that allow you to look up a number by name, companies host name servers, or more properly DNS (domain name services). All name server providers are not created equal. Most registrars provide name services for free and generally offer some of the best features. WARNING! Web hosting companies will also offer name services, but they sometimes only care about providing the service to find your web site. So if you want to try to setup email or a file server then you may be out of luck if you go with them.
Push pins and web pages
Most of what gets posted on a bulletin board is paper documents and pictures. Not surprisingly most of what you find on websites is text and images. In fact HTML, the code that makes up web pages, was designed specifically for laying out content in a document format. That means if you can create a document in Word, then you know the basics to start designing a web page. Unlike paper documents which are restricted to the size of the paper, web pages can be any size you want. However since many people still find it useful to print portions of websites, many websites don't stray too far from the 8.5 x 11 format.
Link it all together
If you've ever watched one of those detectives shows where they have a big bulletin board with lots of photos and articles, and strings showing the relationships or links between items, then you have a pretty good idea of what those blue links are that appear on web pages. Links, or more properly hyperlinks, allow you to go from one related web page to another, just like a detective is able to see how words in a document may reference a picture of a specific location on his or her bulletin board. Because hyperlinks are super easy to make, you can end up with a whole mess of links in a short period of time. It's usually a good idea to first map out how the web pages in your site will link together (called a site map) so you don't end up with a confusing mess of links.
WYSIWYG (wis / see / wig)
As mentioned above, web pages are written in a language called HTML. It consists of a lot of <tags> which are enclosed in angle brackets and mean special things such as put an image here <img> or page break here <br>. When a web browser, such as Internet Explorer, Chrome, Safari, etc., opens a web page it reads the HTML and converts it into the web pages you're used to seeing. At TOPHAT LTD, we're fans of good WYSIWYG web page editors. WSYIWYG stands for: What You See Is What You Get. So instead of typing <img src="myimage.jpg" /> to add the myimage.jpg picture to your page, you can just drag a picture box onto the web page and upload the image using a familiar file picker. With a good WYSIWYG editor, many clients can update content on their sites themselves.
Dynamic Content and Beyond...
Websites have come a long way since they were first introduced. Much of what has been mentioned above has been around for over a decade, which is a long time as far as technology goes. Today websites can be made to be much more dynamic. They can provide users the ability to login, and then only show content which is specific to that user. They can do cool little animations, play music and videos, and even allow you to embed interactive content like games. The great thing about TOPHAT LTD is we offer both the basic websites which can be updated using a WYSIWYG editor, and we develop dynamic rich web applications that can take your organizations website to the next level.
Basic Website Anatomy Appendix
- Domain name: a human friendly name that points to a specific server such as a web server
- Name server: (a.k.a. DNS) a server that accepts a domain name and looks up the corresponding web server
- Registrar: A company that can register domain names with ICANN for a specific length of time
- Web host: a web server that hosts your web site
- Website: a collection of content in the form of HTML pages, images, text, and other multimedia content
- WYSIWYG: What You See Is What You Get
Author: Adam Thoms, Co-Founder, TOPHAT LTD
RSS Feed