ECommerce Business Technology Series, Part II – The Building Blocks Of A Web Page

In my last post,  ECommerce Business Technology Series, Part I – Getting Past The Fear Of Web Technology, I talked about the fear of technology as one of the biggest barriers keeping potential ecommerce business owners from opening their own online store.  New tools and technologies exist today to get your online store published with very little technical skills, but at some point you will want to go above and beyond all in one solutions to get to the next level.  To do that, you will need to address the technological issues, whether you are doing it yourself, or hiring outside help.  Having the background knowledge of what technologies are available, will go a long way to understanding how to talk to technologists, or provide you the knowledge to research a specific area further should you want to try building a site yourself. (which I do not recommend for beginners by the way, unless you are a web designer by trade). Nonetheless, you need to understand the fundamentals.

This post will introduce you to some of the basic building blocks of web pages.

1.  HTML (HyperText Markup Language) is the language used to create web page documents.  XHTML (eXtensible HTML) is the updated version which is essentially the same language but with stricter rules, but also extensible.  Its beyond the scope of this post to discuss the differences, but for the purpose of this discussion, they accomplish the same task.  Both HTML and XHTML are not programming languages.  They are markup languages which basically means they tell the browser how to layout (hence markup) the various components that make up a web page. For example, they can describe paragraphs, tables, and lists as well as many other aspects of a web page.  They do this by wrapping content (e.g the words or images you see on a web page) inside special tags that tell the browser how to make up the page that you end up seeing when you visit any webpage.

It is not my purpose to teach you HTML and XHTML but rather describe what it is.  When you look for a web designer look for one that follows (as strictly as possible) W3C standards for (X)HTML.  W3C stands for World Wide Web Consortium and they are the group that has set up industry standards for (X)HTML.  In the early days, HTML was interpreted differently in some cases by the various browsers.  Browsers were pretty forgiving if it did not understand a tag. However, as the browsers and code got more sophisticated, problems started popping upwhere one version of a browser rendered the page differently than other browsers.  This made it very difficult for web designers because multi-browser support became more difficult.  The W3C set out to address technologies that make the web work and eventually standards were set up to make sure everyone had rules to follow.

2.  CSS (Cascading Style Sheets). While (X)HTML describes the content, CSS stylesheets describe how you want the content to look.  While it is not necessary to use CSS, it has become the defacto best practice.  CSS has become the way to format text and layout a website’s presentation.  The best way to illustrate the power of CSS is to just show you.  CSS Zen Garden is a website that shows the capabilities of what CSS can do.  By going to the site, you can view the original page, but then click on various user-submitted stylesheets and watch the transformation of the site before your very eyes (I highly recommend doing so, it is amazing).  Notice how the page content does not change, but the presentation of that content varies widely.  When searching for a web designer make sure they are skilled in CSS and recognize the benefits (maintainability, page speed, etc) that come with using it.  A simple change to the stylesheet can apply changes across the whole website when it comes to font styles, font sizes, theme colors, table backgrounds, and so on. CSS Stylesheets can also apply changes to render pages specialized for mobile device access, or formatted for printing. All without special coding.  It is very powerful, and should be at the foundation of your web page technology choices.

Web pages can be built using a plain old text editor.  Nothing fancy is needed to build basic web pages. Most designers, however, will use IDE’s (Integrated Development Environments) which is basically a big fancy term for software that helps speed up the task of designing and coding web pages. Also,  keep in mind that what we have described to this point is just the very basics of what makes up a web page.  The goal was to show you that at the end of the day, what you see on your browser gets rendered from (X)HTML tags that your browser understands.   Images, text, and multimedia are retrieved from the server and placed just as the (X)HTML has described it should be placed.

As you will see in my next post,  ECommerce Business Technology Series, Part III – From Client To Server, A Division Of Labor, (X)HTML and CSS is not all there is too it.  Technologies exist on both the browser side and server side(scripting and coding languages) that perform tasks that can do everything from rendering (X)HTML to retrieving data from a database, to calling out to other external systems such as Fed-Ex, UPS, or the postal service among others.  By using server or client-side scripting and coding, web sites can be dynamic in nature and perform tasks useful in ecommerce websites.  This includes, retrieving products and descriptions from the product catalogue, to page checkout and processing payments.  Once you see how they all fit together, you’ll get a better feel for the task at hand and know how to hire the right development firm to assist you in the process.