A web site is like an apartment complex

As a visitor to an apartment complex you can be a user browsing a web site. This is my analogy that I have been using for decades to explain “html is a house”. It’s the easiest way in my opinion to visually show someone with a little bit of imagination what I do when I develop or design a web site.

Imagine some scripting and programming languages that make up a web site. Behind the scenes there’s a lot of complexities going on to provide you, as a visitor to a web site, with an easy to navigate visual web page which displays information you have an interest in. If you could imagine that a big bold title is marked up with a header tag, and an image is inserted using a self-closing image tag. You would perhaps not know exactly where to start. You might go: “Oh, okay, I see”, but when we’re talking about gathering user input via html forms, parsing it with PHP functions, and outputting it back to you .. it all quickly becomes a lot harder to understand.

But that is okay, that’s why there are people that learn HTML / CSS / JS / PHP / SQL, etc. Let us deal with the complexities behind the simplicity. Really, Google isn’t just an input field where you type in a keyword and it magically knows what you want. It has many thousands of computers in a cluster powering your input to go through complex algorithms to return what you perhaps are looking for, for millions of people, .. per second. If you’d look at their white page with that logo and the input field and right click, then from the contextual menu select ‘view page source’, you would already get lost perhaps.

To help you understand what does what, coding wise, that powers a page from code which your Chrome, Firefox or Safari browser can render visually to you in a pleasing manner, I simply say: html is a house. Or rather, a web site is like an apartment complex. And you’re the visitor.

When you see the apartment complex, you’re seeing a web site. Someone architected it from top to bottom, in a way it hopefully works for everybody and even more so hopefully in a way it doesn’t fall apart.

Before you can go to the lobby (the index, or home or the site) you have to find it. An address is required, such as a street name with a range of numbers, or rather a domain name you type in the browser. The owner of the apar.. I mean web site, can get a domain name from a domain registrar (I recommend namecheap.com by the way).

It requires land to build on, you can’t just magically have space somewhere. On the Internet this is handled by a hosting provider. A site owner gets a bit of space on a hard drive where they can store their files. Where they can build the web site.

Once the site is working and public, you can go to the address, visit it, browse around etc. And even interact with it.

The foundation, the apartments, their rooms in it, “this is one apartment, it has a kitchen and a living room”, that is the HTML code, it is a static markup language that helps build the page up. “This is our about page, there’s a header over there, some introductory text here. A profile picture at the top, and a footnote with social media links”.

HTML doesn’t get you all the way there. While it gives you an empty apartment with some basic furniture, and a painting on the wall. It doesn’t say anything about how big the painting is, if the living room is on the right of the kitchen, or if the kitchen itself is x by y meters in size. You need a stylesheet for this. In web design we’re using a static CSS style sheet language that lets us describe the look and feel of the mark up language. “This is 200 pixels wide, that image has a border that is yellow. This signature should be emphasized and use a different font-family. Oh and the background of the living room should be purple”.

I’ve mentioned ‘static’ a couple of times. This is on purpose. You can not really have any interaction with the building if you get no feedback besides opening doors to take a look inside (each apartment itself being a web page, opening a door is like clicking a link to a view of the next page). Something like PHP is needed to take the user input and parse it, then return some output to make a custom experience for you. An example: To get to the next floor, you go in the elevator and press (2). Or you’re in the kitchen and you turn the gas on to cook something. You walk into the living room and press the light-switch to see something. This is done with a server scripting language (sometimes simply mentioned as a programming language for the web) called PHP (hyper text preprocessing language).

With PHP you can ask the user for input with for example a form. They enter their email, or login to their account, or you ask them to set preferences. Using HTML form you can gather their choices or data, with PHP you parse this, and it returns a result you can do something with, or display.

Additionally you can use JS (javascript) and SQL to tweak your web site and user interaction. JS is client-side script language and allows you to manipulate interaction with the page. SQL is a database where web site data can be stored in (and retrieved from).

Hopefully my ‘html is a house’ analogy is making sense and gives you a better impression of what goes on behind the scenes of a basic web site, and explains a bit more as to what does what.

To end this, here are a few more techy-examples:

HTML (here is a paragraph of text, we have text, and wrap it in side paragraph tags to tell the browser ‘this is a paragraph of text’)

<p>
    Hello visitor, hope you are having a wonderful day
</p>

CSS (but we want the marked up paragraph to show in purple, so let’s use inline styling to the paragraph to achieve that)

<p style="color: purple;">
    Hello visitor, hope you are having a wonderful day
</p>

PHP (do we know the visitor or is it a guest)

<p style="color: purple;">
	Welcome 
    <?php echo ($user['logged'] ? $user['name'] : 'Guest'); ?>
	, hope you are having a wonderful day.
</p>

Footnotes
HTML, we’re currently at HTML4, and I recommend learning HTML5 which is the current recommendation by w3.org that’s in the making.
CSS, we’re currently at CSS3, and I recommend learning CSS3, it feels that CSS4 is still a bit further away than we like.
PHP, we’re currently at PHP5, and I recommend getting familiar with at least the basics of PHP5 and MySQL5
JS, we’re currently at JS1.8, and I recommend learning the basics, it’s used for AJAX, UI/UX, and so much more.
You can learn more about HTML/CSS/JS at w3.org and w3schools.com, and you can learn about PHP on php.net SQL on mysql.com


Posted

in

by

Tags: