behang
lamp
painting
little man on computer
mopster figure
push mop
frontcurtain left
frontcurtain right
pull rope
raam
rozen voor muur
muis in de nacht
little man on computer
painting

Build your own HTML 5 website

For websites on computer, laptops and mobile devices HTML5 is, according to W3C the next html generation to use after HTML 4 and xHTML 1.1.

Ehmmm... yep, intro!

Short Introduction

Huh? So you would like to build your website with HTML 5 and CSS3? I hopefully can help you a little bit with this introduction.

Let's keep this introduction short. The HTML5 is your source code for your website with the content and the CSS 3 stylesheet, the engine, is mostly how it will look good. With this the content (htm) and structure (css) is separated from each other (they divorced by law), which makes changes in how your website looks pretty easy.

The entrance file (Welcome mat) of your website is mostly index.html, all the other files are stored like subject.htm (with of course different subjects). The CSS files are stored like style.css, style2.css, website.css etc. Always with a dot css: .css .

The first thing you notice looking in the source (click right in a website, go to (Page)Source) are the different subjects is the short HTML in comparison with the former used xHTML. By using header, nav, article, section and footer websites will be uniform worldwide. You might use them, but for a sticky script (photograph behind text) I choosed to use a division (div) with an id #header. Yes, I'm sometimes a rebel, I know.

Last thing of this introduction is a plain step plan.

Step plan

1. First build an html file in divisions: body, if wished container, header, nav, article, section (parts in an article) and footer.

2. Open and close always the right way. For example: Open with <head>, but also close with </head>. Always write text between <p> and </p> tags. Learn to deal carefully with this, otherwise your website might not function properly.

3. After this make the lay-out in a style sheet (style.css file). If necessary make alternative style-sheet for older versions of Internet explorer (stylefixie.css).

4. Validate your website always at internal link the W3C controller and your style sheet at internal linkW3C CSS controller.

5. Might you not know something you can always look at *W3schools.com: Learn to Create Websites for consulting.

Don't panic, don't panic! If you didn't understood this (I didn't also some years ago), just read on. In the next chapter I start to explain the next subject: Doctype.

Doctype

A website always needs a doctype. Like you need a friend, husband or wife. Or not, then still use a doctype. With this you show your browser in which format HTML you would like your website to load. Look regularly at W3 Schools for new doctypes. Also to check the doctype rule you use is still o.k. and whether the meta tag is still topical! For HTML 5 the doctype is:

<!DOCTYPE html>

With the doctype (nothing to do with a doctor, but with the kind document) there is always a faithful charset, written within the head tags:

<html>
<head>
<meta charset="UTF-8" />
</head>

Easy, done. Egg laid. Let's go smooth to the head tag!

Head

The head section looks as follow (only take over what's between the 2 stripes):

<html>
<head>
<meta charset="UTF-8" />
<!--/*IE Fallback*/-->
<!--[if lt IE 9]>
<script src="html5.js"></script><![endif]-->
<title>Dutchhomepage HTML 5</title>
<link rel="shortcut icon" href="http://members.casema.nl/jwnieuwerth/myfavicon.ico" />

<link rel="stylesheet" href="style.css" />

</head>

The head section should not be confused with the header in your website. In your head section all kind of links with style sheets and java scripts are called for as a motor for your website:

1.It's a pity the Microsoft browsers until Explorer 8 are not ready for HTML5. For this I use the java script html5.js by the only Remy Sharp. Right click to download this java script file and put it in your root directory or in your java script folder: html5.js.

2. In title you place the title which appears on the browser's tab, you see this every time. In my case it's Dutchhomepage HTML5. Mmmmm, mumble... boring!

3.You also might place your own favicon, the small symbol at the left of the url (short icon). Only when you're bored, do this!

4. Next follows the style sheet for the lay-out in the *.htm file.

Like you already saw it's not very difficult to open a website, but it's not a full HTML 5 website yet. The real content will appear in the body tag, the next chapter. Now things get excited? For nerds, it will!

Body

After you close the head section, you open the fit(?) body section. This looks like the next lines:

<body>
  <header>
  <img src="img/imageheader.jpg" width="300" alt="Your webpage logo or use text here" />
 <nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="modellenuk.htm">Models</a></li>
    <li><a href="fotouk.htm">Photographs</a></li>
    <li><a href="linkmonth.htm">Expo.</a></li>
    <li class="aan"><a href="websiteuk.htm">Website</a></li>
   </ul>
  </nav>
  </header>
 <article>
  <section>
   <p>
    Between the p tags you always put text for 1 phrase.
   </p>
  </section>
  <section>
   <p>
   You might also place a picture, you do this like:
   </p>
   <p class="center">
   <img src="img/dutchhomepageborder2.png" alt="dutchlabel" />
   </p>
  </section>
 </article>
 <footer>
 </footer>
</body>
</html>

In the body a sequence of parts, to uniform the web worldwide. First the opening with body (and later closed, like every division). Within the body you have everything you read in a website: header, navigation, article and footer.

After this body the header follows with the logo of the website. Within the header also the menu follows with always the name nav. Mostly navigations are in list form, in this short example also.

After closing the navigation nav and the header, the article has to be opened with, you already guessed: article. Within an article you might find sections with the name: section. In these you store information you like to keep separate.

Finally the last read part of your website: the footer. In this you might store copyright information, a disclaimer, maybe some quick links, etc.

Suppose everybody uses this HTML5 follow up code, all websites would be uniform. This gives the advantage search machines will look quicker in the near future what it's looking for.

Jamie Oliver could easy cook this! Under next lines, tadaaaa, you find a whole HTML basic website:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!--/*IE Fallback*/-->
<!--[if lt IE 9]>
<script src="html5.js"></script><![endif]-->
<title>Dutchhomepage HTML 5</title>
<link rel="shortcut icon" href="http://members.casema.nl/jwnieuwerth/myfavicon.ico" />

<link rel="stylesheet" href="style.css" />
</head>
<body>
  <header>
  <img src="img/imageheader.jpg" width="300" alt="Your webpage logo or use text here" />
 <nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="modellenuk.htm">Models</a></li>
    <li><a href="fotouk.htm">Photographs</a></li>
    <li><a href="linkmonth.htm">Expo.</a></li>
    <li class="aan"><a href="websiteuk.htm">Website</a></li>
   </ul>
  </nav>
  </header>
 <article>
  <section>
   <p>
    Between the p tags you always put text for 1 phrase.
   </p>
  </section>
  <section>
   <p>
   You might also place a picture, you do this like:
   </p>
   <p class="center">
   <img src="img/dutchhomepageborder2.png" alt="dutchlabel" />
   </p>
  </section>
 </article>
 <footer>
 </footer>
</body>
</html>

Well, ehhh... I admit it's not much yet, but hey it's a content start of you website. Next subject is easy: placing text, you probably already saw this in the html, you know, with the p tag.


Text

Now, don't get overexcited, placing text is somehow a little bit boring. Always keep in mind, especially when you talk much like I do, be short with text in a website. To long texts will bore your visitor, unless you're a great writer. Like I'm not. Even my jokes are probably disastrous. But let's get to the point, sorry for this!

First some first CSS, you know, you store this in a style.css file. How should text look like?

/* body CSS */
body {
font-family: Verdana,arial,serif;
}
/* Text CSS */
p {
color : #000000;
margin: 10px 20px 10px 10px;
font-size : 80%;
font-weight : normal;
}

In above example you choose in your nice body for the font-family Verdana, after this Arial and so on. At least choose 3 fonts, and choose some recognisable common fonts! In the p for text you choose a color (let's keep it readable comparing with the background), the size (I use percentage, you might use 9px, but rather won't for my glasses) and the font-weight, standard normal, not bold.

You probably already figured out it's now easy to change a whole website with text: it needs only one adaptation in the CSS! And makes your website uniform: it's not a fairground attraction. Nothing against a fairground!

Clockwise (starting at 12.00 or 00.00?) I put space above the text with 10px, at the right space with 20px, at the bottom space with 10px and finally at the left space with 10px.

Let's go quick to the HTML:

<p>
Learn yourself always to put text between the p tags, because you can influence the text later only by changing the p style in the CSS style sheet.
</p>

Told you, don't get overexcited. This results in:

Learn yourself always to put text between the p tags, because you can influence the text later only bij changing the p style in the CSS style sheet.

Did I already tell you always to put text between... Well, for the correct HTML 5 also.

Ehhh.... next were, oh, pictures of course!

Pictures

In a visual society like we live in, what would your website be without photographs, pictures, not too many animations, pure beauty. As an amateur photographer, I don't get much attention. More people like my model websites, and only for directions or to learn from. But let's not get lost in my wandering thoughts.

If you - very maybe accurate - read in the body chapter, you already saw how a picture could be placed in the center:

<p class="center">
<img src="img/dutchlabel.gif" alt="dutchlabel /">
</p>

dutchlabel

Watch this: always use alt="text" in your tag and wraps the text in a tag. In this case I use the p tag! With alt you redirect you browser to the alternate text when the picture is not displayed. Using this alt a little red cross or a picture symbol will appear with the alternate text when the picture is not found. And a red cross or blank space is always there, when you can't see. How about that? What should they see? Try to describe or be honest you don't!

Next follows the HTML 5 in which a picture will be lined out at the right and the left towards the text (a bit vague sentence):

<p class="right">
<img src="img/dutchlabel.gif" alt="Dutchlabel" />
</p>
<p>
I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I told you: I don't loremps upsilum
</p>
<p class="left">
<img src="img/dutchlabel.gif" alt="Dutchlabel" />
</p>
<p>
I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I told you again: I don't loremps upsilum, I even don't know what it means!
</p>

This results in:

Dutchlabel

I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I told you: I don't loremps upsilum

Dutchlabel

I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I don't loremps upsilum, I told you again: I don't loremps upsilum, I even don't know what it means!

Do I?

The CSS for picture in my style sheet is:

p.pic { /* Picture common */
margin-left : 10px;
margin-right: 20px;
border: 0;
}
p.right { /* Picture right aligned towards text */
font-size : 60%;
float : right;
border : 0;
margin : 0 20px 15px 20px;
}
p.left { /* Picture left aligned towards text */
font-size : 60%;
float : left;
border : 0;
margin : 0 20px 15px 10px;
}

Did I already tell you CSS makes life very easy? At least in the web world!

What you see in the second style p.right { is the request floating a picture at the right and the margins around the picture are clockwise up, right, under and left towards the picture. Always give the picture some space, like you want yourself in the subway!

In the third style which starts with p.left { has the same context, of course then for floating the picture at the left towards the text.

Tables

To divide text in some rows like I did in the website's Sitemap you might choose to use tables. Tables are especially used to make quick visible information in a screen part. Here follows a general explanation how I deal with a table.

Worked out example table:

Example of a title in a table
row 1 and column 1 row 1 and column 2 row 1 and column 3
row 2 and column 1 row 2 and column 2 row 2 and column 3
row 3 and column 1 row 3 and column 2 row 3 and column 3

In tags this table is as follow:

<table>
<tr><td colspan="3" class="title">
   Example of a title in a table
</td></tr>
<tr><td>
   row 1 and column 1
</td><td>
   row 1 and column 2
</td><td>
   row 1 and column 3
</td></tr>
<tr><td>
   row 2 and column 1
</td><td>
   row 2 and column 2
</td><td>
   row 2 and column 3
</td></tr>
<tr><td>
   row 3 and column 1
</td><td>
   row 3 and column 2
</td><td>
   row 3 and column 3
</td></tr>
<tr><td colspan="3">
    <br />
</td></tr>
</table>

Let me explain this in a, well, another (aargh) table?

How to deal with rows, columns, border and colspan
Code Explanation
<tr><td> Open a first row and first column
</td><td> Close the column and open the next column
</td></tr><tr><td> End the row, open the next row and the first column in this next row
</td></tr> Close column and row at the end of a table
</table> Of course: always close the table
colspan="number" You can manipulate the width of an area and combine the rows together in HTML!

Now this will need some study, it is not the easiest part. Some exercise with tables and try and error will help you master this.

For the used styles of this table you really should have a look in CSS tables.

It really gets time for the menu html!

Menu

Accessibility for websites will play a major role in the future. That's exactly why I adapted the menu to 1 rule (without submenus), working with HTML5 and CSS 3 transitions (visible delays in Google Chrome and Mozilla Firefox and Opera). The menu works also without any java script. The HTML 5 in this menu is very plain:

<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="modellenuk.htm">Models</a></li>
<li><a href="fotouk.htm">Photographs</a></li>
<li><a href="linkmonth.htm">Expo.</a></li>
<li class="aan"><a href="websiteuk.htm">Website</a></li>
<li><a href="links.htm">Links</a></li>
<li><a href="archiveuk.htm">Archive</a></li>
<li><a href="contactuk.htm">Contact</a></li>
<li><a href="indexuk.htm">Sitemap</a></li>
</ul>
</nav>

Use always <nav> and to close </nav> to make the universe uniform and united in websites!

Only watch when to use <li> to open and </li> to close an item, of course also open and close <ul>. And of course be careful with the subject which is on (Dutch is aan). Adapt this in every HTML file.

Eeeehm.... if you want to test this menu, you should have a look above... of course, you already knew!

Look in CSS menu for the used CSS of this menu!

Links

An html document is not much without hyperlinks, or short: links. The whole world wide Web is a collection with http adresses, kind of links, which is also called internet.

With links you redirect to another place in your website or an url outside your website. And you might do this with underscored text, a picture or a menu item.

My links have an underscore, is will be recognized quickly in your website. If everyone uses different ways to show there are links, it's not clear clear to the visitor where these links could be. to emphasize the links I also make them a little bit larger within the p tags. When you hover the link the undercore disappears and the color get's a fraction lighter.

In my site you could find the next kind of links:

*Go to chapter Website example link
*Go to chapter Website when not there to subject link example link
*Scroll to chapter link while you are already in chapter website
#Go to another website online W3 Schools in same screen example link

I guess you do not mind I already put the explanation in the links in stead of the original link names. Between next lines you find with the same 4 links in html tags in code:

<a href="websiteuk.htm"><img src="img/intern.gif" alt="*">Go to chapter Website example link</a>

<a href="websiteuk.htm#link"><img src="img/intern.gif" alt="*">Go to chapter Website when not there to subject link example link</a>

<a class="scroll" href="#link"><img src="img/intern.gif" alt="*">Scroll to chapter link while you are already in chapter website</a>

<a href="http://www.w3schools.com/"><img src="img/extern.gif" alt="#">Go to another website online W3 Schools in same screen example link</a>

For internal links within the same html document I use a scroll script (right click, view in the Source for scroll script in the top of the document).

You see I use in chapter Links * to mark an internal link and this # for an external link. Do not forget to fill in an alt(ernative) for this gif.

To go to a pointed part somewhere in a html file you put the key target like this:

<a id="link"></a>

You can also use banners from other sites in an html link:

<p><a href="http://www.w3schools.com/"><img src="http://www.w3schools.com/images/logo_new2.jpg" alt="W3 schools website"></a></p>

This will result in:

W3 schools website

For sure you'll also have a look at the CSS of these common links.


Textarea - the alternative(text field)

I doubted about this subject, because I nearly don't use this alternate textarea anymore. But I decided still to show you if you're looking for it. The explanation is in this frame:

Explanation

The CSS for this alternate textarea:

.textareaalt { /* alternate textarea */
float: left;
color : #000000;
margin: 10px 0 20px 10px;
width: 95%;
height: 300px;
background: #F2F2F2;
border-width: 0;
overflow: auto;
display: inline;
}

This is a method to make an alternative textarea without any differences between the browsers. Browsers might translate the normal textarea different in width and that is not what you want.

Important are margin, height and width in the CSS. You should not forget the overflow and display: inline to make a scrollbar visible. Difference with textarea is you have to put the texts between the well known p tags. Nowadays website builders advice not to let the users scroll too much, don't use these textarea's much.

To start and to end the alternative textarea use the next tags:

<div class="textareaalt">
and to close a textarea you use:
</div>

Next chapter is about colors, without colors it would be a little bit dull.

Colors

Frequently people ask how you choose your colors, referring to my model websites. The answer is amazing simple: I use the photographs. With Photoshop (you could also go to http://imagecolorpicker.com/) to find colors from an uploaded picture. Use these in your website and you have a nice combination of colors. Of course a too large variety of colors is too busy, but with shopping clothes we're already modest with colors, are we?

Now how to define a color? First you have to know this:

Built up color code #RRGGBB:
# Always the opening of the color definition
RR color part Red, how much extend red do you want in your color?
GG color part Green, how much extend green do you want in your color?
BB color part Blue, how much extend blue do you want in your color?
Combinations which are possible are from the numbers 0 to 9 in the places R, G or B and A to F in the places R, G and B. You're not allowed to use higher then an F to define a color. Examples are in the next table below.
Some combinations with the 3 base colors:
Code color Color look Explanation
#000000
red=00 green=00 blue=00
All digits are zero, so color is black.
#900000
red=90 green=00 blue=00
First two digits are red, so color is red. To have a clear color I selected 90.
#009000
red=00 green=90 blue=00
Second two digits are green, so color is green.
#000090
red=00 green=00 blue=90
Last two digits are blue, so color is blue.
#FFFFFF
red=FF green=FF blue=FF
red, green and blue have the highest letter allowed which is the F. (A-F). Because the F is the highest and I used them in all you get a white, not visible part, like the canvas.
#808080
red=80 green=80 blue=80
With red, green and blue an equal digit you get with higher numbers all variety of grey colors.
#9999FF
red=99 green=99 blue=FF
With red on 99, green on 99 and blue on the highest level FF you get this purple color.
#FFFF80
red=FF green=FF blue=80
With red on FF, green on FF and blue on 80 you get this light yellow color.
#C1D98F
red=C1 green=D9 blue=8F
Gives this kind of green color.
Upload your picture/url and find colors at: http://imagecolorpicker.com/.

After a lot html, it becomes time for CSS...


CSS file

CSS3...

...because you can! Uniformity, but still unique! Find your text quick, never search long again! Quick adaptations lay-out Gives your visitor's eyes rest and a relaxed brain! Changes fonts or text height in few clicks! Loads my website in few seconds! Looks good in seconds! Give you spare time for content! While you want quickly a lay-out effect! You might avoid not needed JavaScript! New layout in some minutes! Menus should not give you a headache! This stays our little secret! stille muis

CSS the engine for lay-out and text

I already told you CSS (short for Cascading Style Sheet) is somehow the engine, how your websites looks good according to you. With CSS you put all parts (body, header, article, section, footer) of your website on its place, or you make layers with them to keep parts on one place. And in what form they will look.

You decide what kind of fonts you like to use, what percentage text size (p) should be. Or how a title (h1,h2) will look.

How will one section in an article look like? Or how will your navigation function with CSS3? And what about pictures, forms, tables, how should they appear?

Our small secret is: put as much as you can how your website should look in your style.css file and not in your subject.htm file. With some really rare exceptions.

So, it's not a real divorce? Nope, they still operate together like diners at a table and make love! Some quick wins you'll find in the right column.

CSS, please come in my subject.htm

Now how do you call for this style.css file in an index.html or subject.htm file? Well, pretty easy:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!--/*IE Fallback*/-->
<!--[if lt IE 9]>
<script src="html5.js"></script><![endif]-->
<title>Dutchhomepage HTML 5</title>
<link rel="shortcut icon" href="http://members.casema.nl/jwnieuwerth/myfavicon.ico" />

<link rel="stylesheet" href="style.css" />

</head>

Look at the strong text. It couldn't be easier. The tag calls for the stylesheet in the head (not the body!) and the motor runs warm immediately for your subject.htm file.

CSS fall back IE

If necessary you will have al fall back for older IE browsers in your style.css. You first place the CSS for IE (the fix) and after this the CSS for modern browsers in the same style.css file. Suppose you use background: url('transparent.png'); for older IE versions, where you can't use a transparent background: rgba(255, 0, 0, 1);. Then in IE it takes the transparent.png file and Google Chrome uses the CSS3 color code hexadecimal (3 digits) and transparency value (fourth digit). Done. When you would switch the 2 lines, it goes wrong. Google Chrome will look at the last offered style it knows and will get the transparent file and not the rgba code! While IE still does it right. Best thing is you use code both browsers understand. And trust your visitor do update their browsers regularly...

CSS in text and pictures

Above in plain text and pictures I already gave the CSS. Look there for the used CSS. But I also use headers.

CSS in my headers

The first header I use is h1. This header appears with a background bar in the background. The second is one without a background, the h2.

/* Headers */
h1,h2 {
color : #666666;
margin: 15px 20px 15px 10px;
font-size : 100%;
font-family: 'Trebuchet MS',Verdana,arial,serif;
background: #C2C3BE;
border-radius: 5px;
font-weight: normal;
text-indent: 5px;
}
h2 {
background: transparent;
font-weight: bold;
min-height: 30px;
}
h2 a {
font-size : 100%; /* correction hover h2 */
}

CSS always starts with the same tag used in html but without the < and >. You always open a style with { and close a style with }. To separate every wished CSS effect, you use a ;. And what you choose what the effect would be you put behind something like font-weight a :. It continuously has the same structure. An error in this might totally break the look of a website. I learned myself always to open and close immediately the { and }. Watch careful I use the : and ; at the right time.

For the large main the man header h1 I choosed for a grey font color #66666. By setting a margin clockwise (up, right, under, left) I make a long stretched beam background with the color #C2C3BE and curved corners of 5px. For the font I choosed Trebuchet, choose every font you like, I put this 5px from the left side in the small beam background.

For the smaller brother header h2 without background, I made the background transparent. I wanted a bold font-weight for this one. I also gave it a min-height to give it some space itself.

CSS menu

My CSS navigation is mainly CSS3 and works in modern browsers like Google Chrome, Firefox and Opera and in newer browsers Internet Explorer from version 9. I build in a fall back for older browsers of Internet Explorer, they don't win the beauty contest, you always can put the light out!

/* Navigation menu above */
nav ul {
margin: 0 0 0 0;
width: 100%;
background: url(img/trans.gif);
}
nav ul li {
list-style-type: none;
display: inline;
font-size: 80%;
}
nav ul li a {
float: left;
text-decoration: none;
color: #ffffff;
padding: 10.5px 2.5%;
background: transparent;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
border-radius: 5px;
}
nav ul li a:visited {
color: #ffffff;
background: transparent;
}
nav ul li a:hover {
color: #666666;
background: url('img/white.png');
background: rgba(255,255,255,0.8);
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}
nav ul li.aan a,nav ul li.aan a:visited {
background: url('img/white.png');
background: rgba(255,255,255,0.8);
}

With <ul> you open a list in html in you subject.htm file. I nearly always use lists for menus. Or for long lists like links. With </ul> you close the list. All items of a list are in html wrapped in <li> and </li>. In menu I will deal with the html. Because html5 uses always <nav> for navigation I also use nav in the CSS.

In nav ul { the navigation will have a 100% with and no margin around it with the 4 times 0. The background has a transparant in the background for the headers gradient effect to shine through. Important: The header is floated left for the menu: With smaller screens this effects the menu breaks in 2 lines and doesn't overflow in the article.

The nav ul li { display: inline; style takes care that the buttons in li in my horizontal menu will order horizontal in this list ul. The padding gives space to top and bottom with 10.5px and left and right 2.5%. Together with nav ul li a:hover I take care of a slow motion of the change in background and font-color. This CSS3 transition works in Google Chrome, Firefox and IE9+. Look Java believers, without JavaScript! Yeeeehaaaa!

In nav ul li a { you float the menu items to each other with float: left;, in a navigation you don't want underline with text-decoration: none;. Nada line. I put the font-size: 80% , nice and flexible like elastic legs.

In nav ul li a:hover { you find this background I use for older versions in IE8-: white.png. But Google Chrome recognises the second line with background: rgba(255,255,255,0.8); and makes the hexadecimal white with the 3 digits (255,255,255) 80percent (0.8) transparent. Don't switch these lines, else Google Chrome takes the white.png background!

Then you would like to know where you are situated in a website. In the html I use the class="aan" (aan is Dutch for on) for the active subject in my website, like Website in the menu above. It will always stay on without hover (a), with hover (a:hover) and when the link once has been hit (a:visited). The last is the most forgotten one! Poor, poor visited links.

keep it clean lady
Clean and simple!

When using sub-items you'll also need some JavaScript or jQuery. In my website I don't use sub-items in the menu, because it's not necessary and I like to keep the navigation clean and simple as possible. You might use jQuery to make effects in your menu, but in my menu I think it's sufficient to use CSS 3 effects like the mentioned transition (use all 2 times 4 lines for the different browsers).

Look in Menu how the menu html navigation should look like.

CSS scroll to top arrow

With calling the base script of jQuery library html: <script src="jquery-1.9.1.min.js"></script> and the scroll script html: <script src="scrollto2.js"></script> between the <head> and </head> tags I make scrolling possible. Of course there's also a style for the go to top button: (You might download the files with the given links in past sentence or put them in a *.js file).

/* scroll to top arrow */
.top {
clear: left;
margin: 10px 0 40px 10px;
display: block;
background-image: url('img/gototop.png');
height: 30px;
width: 20px;
}

First you notice it doesn't say float: left; but clear: left;. This always takes care the arrow is placed under your text and not behind.

The combination of height: 30px;, width: 20px;and display: block; makes sure the block will be visible (else it wouldn't). Of course you want some space around the arrow with margin: 10px 0 40px 10px;. Outline here is: 10px from the top, right is not important, 40px for extra space under the arrow before next item comes and 10px at the left like my text.

The background-image: url('img/gototop.png'); in the CSS is extra handy. suppose you want another arrow, picture with a different name or extension, you only have to change it once in the CSS.

CSS Tables

Look in Tables for the html explanation.

Also my tables have CSS, this is no coincidence. With forcing CSS mark-up tables don't need much memory when your website runs. And gives you a lot more control how you table looks. First my common tables in my website:

/* Diverse tables website */ table {
margin : 20px 20px 0 10px;
color: #000000;
font-size: 90%;
background: #F2F2F2;
border: 0px;
border-radius: 10px;
border-spacing: 0px;
}
table a, table a:hover, table a:visited {
font-size: 100%;
}
/* Table common */
td {
padding: 5px 10px 5px 10px;
border: 1px solid #ffffff;
}
td.title {
color : #666666;
font-family: 'Trebuchet MS',Verdana,arial,serif;
background: #C2C3BE;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

Also my table knows a margin. I discussed this several times, you know: clockwise from up. I like a larger font-size: 90%; in my table. The background is a grey color: background: #F2F2F2;

When people think about they don't want any border, they think about border: 0px;, but mostly forget the other one to eliminate space around the table: border-spacing: 0px;.

To be sure all text don't change in size during hover I also use table a, table a:hover, table a:visited { font-size: 100%;}. It's a website, not a pinball machine.

The td (one surface in a table) gets border: 1px solid #ffffff; white (like the canvas) border and also a padding: 5px 10px 5px 10px; for room around the pictures or text clockwise from the ...? I guess you know it by know: top!

Then I actually build in the h1 within the table: td.title {. Same color, font-family and background. Another tip for uniformity! Somehow I had to add border-top-left-radius: 10px; border-top-right-radius: 10px; to this title to also get rounded corners, else the table didn't display them!

CSS Table magazine (tijdschrift)

Special table...

...to get extra attention of your readers! Easy! And pure and only CSS and html!

/* Table for large typographic */
table.tijdschrift {
float: right;
margin: 10px 20px 20px 10px;
font-size: 28px;
line-height: 26px;
text-align: right;
width: 20%;
border-radius: 10px;
padding: 10px 20px;
border-style: none;
border-spacing: 0px;
}
table.tijdschrift td {
border: 0px;
}
table.tijdschrift {
color: #9d9d9d;
}
table.tijdschrift strong {
color: #6d6d6d;
}
table.tijdschrift small {
color: #3d3d3d;
}
table.tijdschrift h2 {
color: #666666;
}

Couldn't find the real source of this one, many claim them. Else I would have linked this. To get extra attention very handy within a table. You might also use different colors. With <strong>strong text </strong>, <small>small text </small> and just normal plain text you make different emphasizes. Tip: choose colours which lay next to each other, like several blue together of several green together. This gives a special effect on a light background with the same color.

Of course you can switch float: right; to float: left; and text-align: right; to text-align: left;, like I did in this example.

Note: because I choosed the common font color for magazine (Dutch is tijdschrift) table.tijdschrift {color: #9d9d9d;}, I correct the build in h2 color with table.tijdschrift h2 {color: #666666;}.

Special in this CSS is the line-height: 26px; in which you set, you guessed the line height. You choose a large font-size: 28px; to get extra large fonts.

I can't think anything we didn't see yet, did we? Let me know! You get quickly used to CSS and that's nice! Let's get it some larger perspective in CSS, the divisions! Not difficult, easy!

CSS Divisions

/* Styles for all divisions, show as a block */
article, section, footer, nav, aside, hgroup {
display: block;
}
/* Divisions */
body {
font-family: Verdana,arial,serif;
font-style: normal;
padding: 0;
margin: 0;
background: #ffffff;
}
#header {
background: #000000;
background: -moz-linear-gradient(top, #666666, #000000);
background: -webkit-gradient(linear, center top, center bottom, from(#666666), to(#000000));
-moz-box-shadow: 0px 5px 5px #000000; /* Firefox */
-webkit-box-shadow: 0px 5px 5px #000000; /* Safari and Chrome */
box-shadow: 0px 5px 5px #000000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
margin: -5px 0 0 0;
padding: 0px;
width:100%;
box-sizing: border-box;
z-index: 100;
}
section {
float: left;
margin: 20px 20px 5px 10px;
display: block;
width: 90%;
overflow: auto;
border: 1px solid #000000;
color : #000000;
display: inline;
overflow: auto;
font-weight: normal;
font-family: Verdana,arial,serif;
border-radius: 10px;
position: relative; /* For h2 cufon changing font */
z-index: 1;
-moz-box-shadow: 0px 3px 5px #000000; /* Firefox */
-webkit-box-shadow: 0px 3px 5px #000000; /* Safari and Chrome */
box-shadow: 0px 3px 5px #000000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
}
footer {
float: left;
margin: 20px 0 0 0;
width: 100%;
height: 60px;
padding: 0em;
list-style-type:none;
background: #000000;
background: -moz-linear-gradient(bottom, #666666, #000000);
background: -webkit-gradient(linear, center bottom, center top, from(#666666), to(#000000));
-moz-box-shadow: 0px -5px 5px #000000; /* Firefox */
-webkit-box-shadow: 0px -5px 5px #000000; /* Safari and Chrome */
box-shadow: 0px -5px 5px #000000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
}

body { shouldn't be confused with article {. In body your whole website appears. If you would like a full screen website you put padding: 0; margin: 0; in your body {}. It will fit now against all borders of your browser!

#header is the id part where in the html my Dutchhomepage logo and my menu (only the above one) are. For older versions of Internet Explorer I use only a background with background: #000000;.

For IE9+ and Google Chrome, Firefox, Opera and other browsers I have a background: -moz-linear-gradient(top, #666666, #000000); background: -webkit-gradient(linear, center top, center bottom, from(#666666), to(#000000));. This effect makes the transition from grey #666666 to black #000000. You'll need for several browsers both lines.

When you noticed you also see a shadow in Chrome, Firefox just under my header. This one is called for with -moz-box-shadow: 0px 5px 5px #000000; /* Firefox */ -webkit-box-shadow: 0px 5px 5px #000000; /* Safari and Chrome */ box-shadow: 0px 5px 5px #000000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */ margin: -5px 0 0 0;.

Because I use a sticky script to stick the header at its place, I also use: box-sizing: border-box; This keeps the box intact while rendering and staying above I give it a z-index: 100;. The number is higher then in the rest of my website, like section which has z-index: 1;. The header likes to stay in control on top position!

section { is a subject you like to keep separated from another subject in the html. Keep this section as flexible as possible, like a width: 90%, an automatic appearance when a scroll bar is needed with overflow: auto;. And use display: inline; the default css to keep the enclosed element full visible inline in section.

At the same time, make something of a section, like I use them in Home. Rounded borders with border-radius: 10px;, a small border border: 1px solid #000000; and like under the header under and right just a small shadow: -moz-box-shadow: 0px 3px 5px #000000; /* Firefox */-webkit-box-shadow: 0px 3px 5px #000000; /* Safari and Chrome */box-shadow: 0px 3px 5px #000000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */. For sure when you want something else: W3 Schools and grab some CSS.

The footer like your feet, likes also some care! Like the header, but then in opposite directions in transitions and shadow!

CSS Columns

/* 2 long columns */
.kolom {
margin-top: 20px;
float: left;
width: 50%;
}
/* 3 long columns */
.kolom {
margin-top: 20px;
float: left;
width: 33%;
}

In Home I have two columns to divide the content. You also could make 3. Above the CSS. You only have to make 2 <div class="kolom"> </div> to fill with some content. The easiest way to split.

CSS links

Who does still want standard links in his/her website? With the blue which nearly never fits in the rest of the text. Some CSS will adapt your links!

/* Navigation general */
a, a:visited {
color: #000000;
background: none;
font-size : 120%;
}
a:hover { color: #666666;
text-decoration: none;
font-size : 120%;
}

I myself like to have my links some larger then the rest of the text: font-size : 120%;. Some months ago I read an article and this convinced me to make clear a link is a link to underline the links within texts (not in menus). When hovered I take away the underline text-decoration: none; and give the linked hovered another color: color: #666666;

CSS lists

You probably already saw the CSS menu in a list. In my lists I also choose for uniformity:

For list-style-type: none means I don't want a picture for the list, because I like my own. In external links li.ex { I mark with this background-image: url('img/extern.gif'); externe link dot and for internal links in li.in { I mark with this background-image: url('img/intern.gif'); interne link dot.

/* Listings website */
ul {
color: #000000;
font-family: Verdana,arial,serif;
list-style-type: none;
font-size: 80%;
margin: 5px 0 5px 10px;
padding-left: 5px;
}
li.ex { /* external links */
background-image: url('img/extern.gif');
margin-bottom: 2px;
background-repeat: no-repeat;
background-position: 0 .2em; /* left top text from image */
padding-left: 2.0em; /* distance content image */
}
li.in { /* internal links */
background-image: url('img/intern.gif');
margin-bottom: 2px;
background-repeat: no-repeat;
background-position: 0 .2em; /* left top text from image */
padding-left: 2.0em; /* distance content image */
}
li.pt { /* points in a list */
background-image: url('img/punt.gif');
margin-bottom: 2px;
background-repeat: no-repeat;
background-position: 0 .2em; /* left top text from image */
padding-left: 2.0em; /* distance content image */
}

For sure the background should not repeat through the link, so you get: background-repeat: no-repeat;. The other markers in lists items margin-bottom:, background-position: and padding-left: take care of the position of the dot, see in the CSS explanation above how this works.

Stupid, I also have a point in a list, the items without a link with li.pt { with its dot: background-image: url('img/punt.gif'); point in a list dot. With of course the same mark-up.

CSS object

The final CSS (pfew, I suppose?) is one I use to mark up an object, like including YouTube:

/* including object */ object {
position: relative;
width: 380px;
height: 380px;
z-index: 1;
}

The width: 380px; and height: 380px; are of course adaptable to your own wishes.

CSS overview in 2 tables

To give some logic to all of above I show you 2 tables with the explanations. In the first table I deals with the opening of all css styles like item { for my website divisions and lay-out styles. In the second table I explain all the kinds of properties which they can have. The CSS styles ends with an } and every property with an ; .

Note: a style css file is something which changes regularly. You might have a look how it looks right now in my style.css

The divisions, navigation and mark-up openings CSS styles explained.
The style to open Explanation to open the style (properties of these openings explained in the second table)
body { In the body style you give the body css properties which will perform on the whole canvas in an htm file. Don't put too much in this style what shouldn't be common.
header { (my website: #header) In this part you might store the CSS for your website logo (in my case Dutchhomepage) and also for the nav (menu).
nav { In this part you store the CSS of the most important navigation in your website.
article { You already guessed: in this part you place all the content of each *.htm page of your website.
section { In this part you only put the mark-up CSS for 1 subject within an article.
footer { In footer the CSS for this item. Make someting nice. Could be copyright, extra index overview with a list ul.
kolom { CSS a column in your style.css when you like to divide a htm file in some columns with a width.
nav {,nav ul { Most common CSS settings of you menu for the whole list, not for one item
nav ul li { Most common settings for one element of your menu (button) CSS
nav ul li a { How the buttons of the menu should look like when you're not hover this with your mouse.
class="aan" Aan is Dutch for on, which means this item is highlighted to show you're located in that website's subject.
nav ul li a:hover { How the buttons of the menu should look like when you're over this with your mouse.
a, a:visited { Style the general links in a website. The a:visited is for a link you already clicked before.
a:hover { How does a link look like when you mouse over it, style this with a:hover
h1 { and h2 { The h1 header rule I use with grey backgrounds for all the headers. The h2 header rule I use the same, but then without a background for the header.
p { And how should all your text look like in verty htm file? CSS it always!
.vet { Also handy for all writing bold texts to make a seperate p tag with the sub bold (Dutch=vet).
p.left { and p.right { Takes care for floating a picture at the left or at the right of the text.
.textareaalt { Alternative textarea with scrolling, the properties are stored in a CSS file.
table { At some places I use tables in my website, like you're looking in at the moment. I use everywhere the same tables with CSS.
ul { Ul is the combination of the list with points. CSS the list itself here.
li { li is every item part in the list called ul. CSS every item here.
table.tijdschrift { To reach some special text effect I sometimes use this glossy method.
table.tijdschrift strong {
table.tijdschrift small {
table.tijdschrift h2 {
To define CSS in the glossy element table.tijdschrift strong, small texts and the h2.
td {, td.enkel {t en td.kleur { I use serval lay-outs for tables in my website. To distinguish I call in the colomn how a colomn should look like.
td.title { In this CSS style I mark-up how the table header above should look like. Handy with a class in html.
img { mostly used with border: 0px;, to avoid blue borders round the pictures.
li.ex { /* external links */
li.in { /* internal links */
li.pt { /* points in a list */
CSS here your external links with class ex, you internal links with class in and points in a list without a link in class pt.

Some properties of the CSS file explained
Property of the style Explanation of the property (always ends with a ;)
background: url("backgroundimage.png"); In this statement you put between the laces the wished background, in this case backgroundimage.png.
background: none; Here you choose for no background.
margin 10px 0 20px 30px; Margin clockwise starting with up (10px), right (0, so 0px), under (20px) and left (30px). Don't mix these up!
padding: 5px 20px; How much space should there be above and under text/picutre (5px) and how many right and left towards the text/picture (20px).
float: left; Float a division, picture or element at the left towards the next division, picture of element, which will follow at the left.
float: right; Like float: left, but then float at the right, then followed with the next part, which follows right.
width: 250px; Put the width of a text, background, object or picture, in this example 250 px.
height: 230px; Like width, but then for the height.
background: #bad5ff; Put the backgroundcolor for an element of a whole division.
text-indent: 20px; With text-indent you place a subject, text or division 20 px to the right (within the chosen element). I use this for my header bar h1.
list-style-type: none; Don't show any standard dots before an item in a list with the li's in the whole list ul.
color: #rrggbb; Color my text in this rr red, gg green and bb blue value. Allowed values are 0-9 and A-F (hexadecimal).
font-size: 90%; and font-size: 9pt; Put the font-size at 90% of put the font size at 9pt? Most wise is to work with percentage to be able to stretch to different screens on the serveral available devices nowadays.
margin:0 auto; When you want to center a container you put this to place your website in the middle of the canvas of your browser. Use this with text-align: center in body and text-align: left in your container!
display: inline; and list-style-type: none; This style takes care that the buttons in my horizontal menu will order horizontal with use of a list ul.
Another important function for display: it puts the divisions at the right height when using a browser like Firefox.
font-family: Verdana,arial,serif; For the font I choosed Verdana. It is recommanded also to use common known fonts like arial and serif, when verdana is not found the second font will appear. After this the 3rd font. Always choose at least 3 fonts.
overflow: auto; Combined with an height (see next in this table), the overflow is activated and a scroll bar will appear.
height: 470px; Put the height of a section at 470px. Often used with overflow: auto. Don't let your visitor scroll too many times!
position:relative; Relative positioning moves an element relatively to the original position where a place is for the element.
z-index:2;
z-index:1;
z-index takes care to show what's most important. A menu with fixed position with an index 2 will scroll over an article with an index of 1. The article disappears behind the menu.
border-collapse: collapse; The standard build in spaces between cells in a table will not be visible between columns and rows.
display:block; shows the menu items as a block with before and after a line break to seperate the elements from each other.
position: absolute; Position an element at a steady place and don't let it move on the webbrowser's canvas.
I don't explain all, I think the picture how things work is clear enough. By trying you discover the most! In the whole CSS explanation I explain explicit a lot of style properties. Look there for more!

Miscellaneous most common used files in my website

No support, hopefully goodbye!

To built a webiste is intensive, but very rewarding. You learn a lot and it gives you a lot of insight. It spares webspace storage. Finally you get the website exactly like you want this to be!

At all good things comes an end, also this explanation. I don't support this website explanation. Your questions are always welcome at Websiteforum.nl, they helped me a long end starting my first website!

However I hoped I could help you somehow. Hope to see you here again to read something you forgot!

For now, goodbye from Leiden!

Yours,

Jan Willem

pdf icon The websites disclaimer apply to the download websitebuildinguk.pdf