A friend asked me - ‘Hey, you do a bit of coding with HTML5 and CSS3, how do you get things onto the screen? Not just anywhere but nicely placed, side by side. Well, that’s the million dollar question, I had to learn, teach myself how things work and I am still learning! But as I said, start with the basics. The problem with computer coding, languages and so on is that they do and can change rapidly. HTML5 is using quite a number of new ‘tags’ as is CSS3. So-called div’s are now not as supremely important.
What I tend to do is draw up a grid of blocks. First the header, this can be a logo, a coloured navigation bar (although with HTML5 we now have the nav tag. Then I fill the blocks with a colour just to see where they fall onto the page and I can size them correctly, even with space between them. You start off with the usual opening tags using a editor like 'gedit' or Sublime Text:
Open the <body> tag to denote the beginning of the page you’ll see on the screen.
Now the header tags and code to position the images or text etc.
<img src="images/headerbar.png" alt="header" width="900">
<p class=rightpos2><span style="font-weight: bold;">Discover who we are...</span> <span style="font-weight: bold;">Where we come from...</span></p>
‘bar’ will be part of the CSS3 code. HTML code is used to put ‘stuff’ onto a screen, CSS is used to style it. So ‘bar’ is specifically positioning the header, followed by the styling.
This means it is positioned to the left and 25 pixels to the right.
The image is within a subdirectory called ‘images’ and positioned as ‘bar’ directed.
There will be some text – denoted by the <p> tag, positioned as directed by the CSS ‘rightpos2’ code. This styles the textual part and puts the words where they are wanted. That can be anywhere you want them, I tend to experiment a lot!
font-family: Helvetica, Arial, sans-serif;
text-shadow: 2px 2px black;
This hopefully is self-explanatory. I will put some more on at a later date to show the positioning of the other blocks.
You will see the result on the ‘history’ page of my website – dutchenery.net’.