History of Web Layouts
Coding (Html5)
A time journey through the different tecniques and ideas that graphic designers have created to improve our user experience, spreading the use of div and span
Here we are!
The last lesson of the HTML basics,
Now it's time to have a journey through the time exploring the history of the Web Layouts.
We will also see how to use the div and the span tag to create them
Are you ready?
In the previous tutorials on the fundamental elements of HTML.
I have illustrated how and when to use simple tags.
I used them to add images, links, edit the formatting of a text, creating lists, etc..
Essentially, you are already able to build your first HTML pages.
They were easy, aren't they?
All they have a proper functionality.
for example, if you want a paragraph, understand which tag to use is straightforward.
When you want to add an image somewhere in the content there is the img tag there for you.
Now, things are getting a little bit tricky.
Do not worry as soon as you get the concept, using these two tags will become easy as much as drink a glass of water.
To explain what a div and a span are and what they do, I would love to bring you on a journey that starts 26 years ago.
So, let's pack up and go.
Copy the following code to embed this infographic on your website.
As you see it was not easy to come to nowadays design.
Now you have a brief idea of what happened,
Let's examine every important historical moment.
1990 Time to pack - The beginning of Web Design
Here is the article on the Basics of HTML if you missed it.
He and several other colleagues started to develop a software that allows the content, written in HTML, to be used and shared.
Exactly on December the 25th 1990, they published the first web browser.
They baptized it as WorldWideWeb,
Don't need to say that it created some confusion with the World Wide Web.
(to be clear the software was after renamed to Nexus).
You can find more interesting information on the WorldWideWeb on the W3.org.
Before that moment and for a couple of years forward, the web design consisted of a plain dark background and text with almost no formatting at all.
There is not need to add that working in such a conventional environment was a pain for whoever had at least a drop of extravagance in his blood.
1995 The stopover - Discovering the tables
This dark moment of Web Design came to an end when David Siegel, an author, and blogger, published the book "Creating Killer Sites".
In his book, he showed a way to manipulate HTML tables and cells in order to create different layouts that could then be used by web developers.
At that time this technique was revolutionary because it meant the exit from the schemes dictated by the limits of the language and start to create an actual visual structure on how the data could be seen.
The job, of the primordial version of the role that we currently call front-end developer, was to create tables, in which then the back-end developer could simply edit the aspect as he needs and shown the data in a graceful way.
Even if, this new principle to structure a web page was completely innovative, it wasn't all peaches and dandelions.
In fact,
The sensation wasn't, quite fulfilling because the purpose of the tables was, and still is, to store data, which implied errors and lots of stress on behalf of the programmers to make things properly done.
On the other hand, it was the first, rough, dirty example of a grid, it has represented the dawn of a new era.
2007 A new way to surf - The mobile's advent
When the firsts mobile devices arrived at the global market they amazed the entire world.
Smartphone gives the opportunity to navigate online. from everywhere at every moment.
Using a Smartphone brought new meanings to the word freedom.
For many developers, there was another side of the coin.
The question was: how to display all that content, until then only devised for bigger screens, into a pocket size format?
Looking for the solution, the first step accepted by the majority was to improve the reliability of the grid.
After several experiments, many developers decided to adopt the 960 Grid System.
The creation of websites based on 12 columns was a daily basis routine for all the front-end developers.
The 960 Grid System consisted of creating the structure of precisely 960 pixels wide.
This number was chosen because it fit within the average smallest monitors' resolution of 1024x768 pixels.
Besides, 960 is divisible by 2,3,4,5,6,7,10 and so on, making it a flexible number to work on when dividing the layout into columns.
It was the perfect number.
Now that the biggest problem was solved.
The foundation of the relationship between mobile and desktop screens have been layed.
The second phase was an attempt to make the work easier by speeding up the developing process.
To achieve this goal standardize as many visual elements as possible was necessary.
This was the exact reason why in a while the web was stuffed of standard buttons, navigations, forms and so forth.
Basically, all this component looked the same but they were easy to use and, most important, out of the box,
The winners of this homogenisation process were two front-end framework that you have already heard about.
Because they are still incredibly popular in these days.
Did you guess?
I am talking about Bootstrap and Foundation.
The first was studied and published as an original internal project inside the Twitter offices.
The guys at Zurb are the creators of the latter.
Nice story but where are we going?
Wait a minute,
Let's stop our trip for a second and let's focus on the purpose of it.
You are here to learn about the div and span elements,
They are really useful now when creating a layout, but let's start from the basis.
Here we go,
According to the experts in the sector, the div element has no special meaning at all.
It represents its children.
It doesn't even have supported attribute in HTML5.
In a nutshell, a div is just a blank box created to be filled up.
This is the title of this sector
Like a proper content even this has is own paragraph
Here's another paragraph right here.
It is possible to add as many divs as we like within a parent div to create more advanced structures.
This is the main title of this parent sector
This is the title of this first child sector
This is a paragraph in the first child sector
This is the title of this second child sector
This is a paragraph in the second child sector
So, why we started so far to arrive at this point?
The answer is the CSS display property.
Every element in HTML occupies a space in the document.
Now, we can change them trough CSS but, In the old times, they were essentially block and inline.
Block:
-
-
-
-
Inline:
Block means that the element uses the entire space available.
Depending on the width of its parent the siblings' element will always appear below, in a new line.
Inline, as you can guess, means exactly the opposite.
The elements use only the space they need.
If the elements are short enough there will appear more elements in the same horizontal line.
These values are the keys to the success of the div element.
Through them, we can hide the elements, wide them, short them, put below or above siblings.
Everything the fantasy of the developer need.
Have a look at the CSS property to make everything a little bit more clear.
Ever thought on learning some server-side language?
Check out my reviews of 24 of the most popular PHP framework currently available