Rapture:
World Wide Web:
24.03.2013 : Coding

Coding

We know what to write, we now how to present; let's make it real. A good start is always to denote every visible 'object':

The div-box model for the new globalinventor webpage
A "boxed layout" it state of the art where each box referes to one "div" html-container. Open a pure text editor and add write a pure html file with "head" and "body". The "head" contains the title and some meta information. My pure html5 file looks like: Now go on and add the "div-layout" in line 14. My layout is roughly: I'd like to write a few words about the black boxes above where the code is presented. This was realized usind the code from "https://github.com/alexgorbatchev/SyntaxHighlighter". Let's go on; Now is the time to grep a pen. Just note the possition and size for every colored box. I use the mouse x,y position indicator from my image processing software and a palmful of mental calculator.

The div-box model with possition and size for each div box
This information enables you to create a CSS file. The you should be able to see your page in a web browser:

The first prototype for the new globalinventor webpage
It is always good to validate the site, just to see if you made big mistakes which are not visible:

CSS ist valide!