Web Design: Clearing the Explanation (HTML).

Once I asked a very close friend of mine, “What do you think when I mention Web Design?” and the reply was, “It just about building some place visitors will go.”

It took me almost 30 seconds of silence. What does that really mean?

Recently I have been making some new friends, friends that build apps <- ignore this word. This doesn’t mean I am changing friends I need all my friends.

I do find it difficult to explain ‘what it is I do?’

Have you ever tried that… explaining software/web development to your non-techie friends? especially when they are interested in learning it, you will notice at this point they are on an adrenaline.

Suddenly you become the google to their google and let’s not forget the look of betrayal you get when you don’t give them a clear answer, especially when you tell them Java and JavaScript are not related.

It gets worst when you mention words like Variable or Value assignment.

Wait…

Let me guess you are the non-techie friend and I am probably starting to sound like your confused friends or you are the techie friend and I am still sounding exactly the way you sounded.

Okay in this article I will try to explain some of those confused terms.

As much as I wouldn’t want to be the Wikipedia here. This was how I explained Web Design to my friend.

First, I defined web page in my own very possible way, not that google couldn’t help but I wanted it to be non technical. My definition of web page

A Web Page is a constructed document built with some certain developers’ tools to provide accessible data or information to prospective visitor, viewer or user via the internet or on a local device. — This is not from a google search

I still referred him to a more technical and elaborated definition https://en.wikipedia.org/wiki/Web_page

I hoped for two things: that my definition would solve something and I wasn’t boring enough but at a moment there was that look again and I noticed

I realized this was my chance to talk more.

Now what are those Certain Developers Tools

I will list them in the order which they may be relevant.

1. A Personal Computer or A Smart Phone. (I don’t know when you will be reading this)
2. Web Browser (Internet Explorer, Firefox or Chrome)
3. Text Editor — NotePad will do just fine
4. HTML — Hyper Text Markup Language
5. CSS — Cascading Style Sheet
6. JavaScript

Other tools may include PHP — Hypertext Preprocessor, MySQL (which is really not mine it just a name) and many more. We probably may talk about some of these things in near future.

Now bear in mind that there may be alternatives to the listed items above but I will be using these.

Web Design which is what started all these sh**s in the first place.

Tip: All items listed above have a clickable reference to their Wikipedia pages

Web Design

Web design is the process of creating websites. It encompasses several different aspects, including webpage layout, content production, and graphic design. While the terms web design and web development are often used interchangeably, web design is technically a subset of the broader category of web development. - The Tech Terms Computer Dictionary

My Analogy

Picture this: you need a house, the house must have an address, to build the house you need a field, to start the building you need an architect, you need a foundation, bricklayers, painters, carpenters and your house needs electricity and water supply.

Here the Web designer (which could be you or your techie friend) is not the architect, in this case he/she is just simply the owner of the house, as we go on I will surely introduce you to the architect.

Let’s start with the house address, the construction site. This is where the page will reside, if on a local machine it will be in a folder while on the internet it will be a domain name something like www.something.you/know.

Take a pause I will like to take you a little into the future where you have completed the building, at this point you want to tell your friends about the new building and they will need to visit you.

The process that bring visitors to your house in this case you web page is what the Web Browser handles, every web browser have an address bar, more like how you would ask someone for directions now that someone is your address bar.

Are you still reading this then probably I am making some clear points.

Let’s go back to your construction site, now I introduce the bricklayers in this case your bricklayers is HTML. As a bricklayer all HTML does is to build walls that probably just form into rooms stacked upon each others here the bricklayer/HTML work without coordination.

Here is a peek to what a typical HTML file look like. Here is where you will need the Text Editor I mentioned in the list above to create an HTML file, your file can be name anything like building.html just make sure it has .html at the end, a good advice not to give the name spaces this is the file name.html preferable thisisthefilename.html itCouldBeAsLongAsYouWantItToBeWithAnyCase.html on a personal point, please don’t name your file that. Thank You

The building.html file, here I will write some few basic HTML codes.

Let me explain what is happening above, you see:

• <html>...</html> This is your plot of land everything must be build in here, in a technical sense it tells the browser that this is an HTML file and all codes must be between these html tags in line 1 and 11. It can be more than 1 million lines it your file.
• <head>...</head> This is the office of the Architect, most decisions about the page are made here.
• <title>...</title> it just the name you give the building more like the name tag.
• <body>...</body> This is where the foundation is dug and laid, in technical sense this where every visible page content is placed.
• <div>...</div> This is more like a room in your building in technical term it defines a division or a section in an HTML document.

They are two major types of html elements namely nested elements and empty elements.

Nested Elements

These are elements that have closing tag like the ones you see above, these elements can contain other elements. These are like walls that can form a four corner room, the house can contain rooms while rooms can also contain toilets and furniture.

Empty Elements

These are not really empty as the name implies it just the opposite of nested elements it doesn’t need a closing tag and it can’t contain other elements. We can say home appliances and furniture.

Read More: https://www.w3schools.com/html/html_elements.asp

A less important note:

HTML alone is not suitable for a rich web page just like your walls alone can’t give you a beautiful or habitable building.

For a standard building you will need the help of an Architect, in Web Design let me introduce you to the Architect: We call him CSS. Told you I will introduce you.

Usually I don’t do this but huh…

Can we take a break and cut this off to another article, probably use this break and really understand more about HTML.

Believe me we have lots more to talk about including the role of other developer tools like JavaScript, PHP, MySQL (remember it not mine) and many more.

Next article I will talk more about that Architect CSS.

I’m on twitter @iNidAName. Thank You