History of Web Layouts
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.
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.
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.
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?
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.
|inline||Default value. Displays an element as an inline element (like )|
|block||Displays an element as a block element (like|
|flex||Displays an element as a block-level flex container. New in CSS3|
|inline-block||Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box|
|inline-flex||Displays an element as an inline-level flex container. New in CSS3|
|inline-table||The element is displayed as an inline-level table|
|inline-item||Let the element behave like a|
|run-in||Displays an element as either block or inline, depending on context|
|table||Let the element behave like a elementelement element element elementelement element
But today he is not here to read us one of his articles because he is the one who originally coined the term: "responsive design".
His solution to solve the multi-devices issue was brilliant.
He figured out the possibility to use the same content but display it differently.
He said that the content can be displayed depending on the size of the screen by taking advantage of the limitless power of the @media CSS3 rule.
The code in the previous example changes the color of the background and the color of the text.
It varies, according to the width of the screen.
This could seem an arduous concept to understand.
What this does is to provide benefit to all the different parts.
On the developing side if the project is well studied from the first stage, starting with the creation of a basic layout thought for mobile devices and then proceed step by step toward the biggest by adding and editing elements is not a difficult process (this is basically how mobile first works).
On the other side,
the client is sure that, once finished, his project( either website or web application) will be available and fine-looking on any device
Eventually, everyone is happy.
The span element
Since we talked about container element of HTML another tag to consider as the smaller brother of the div is the span element.
Like the div, this element has not meant and by itself will produce an invisible dot in the DOM.
But, when there is some content in it, it can group elements and style them accordingly. A difference between the two is that a div is displayed as a block element, whereas a span behaves as an inline one.
If you like the content of this page, do not forget to share with your friends.
Use the buttons at the top right of the page;
If, instead, you have something else to say about this topic or you think I missed some important part, contact me.
I will add your content citing you in this post.
Ever thought on learning some server-side language?
Check out my reviews of 24 of the most popular PHP framework currently available