This is a website made by a student. It was not ready yet, links are not very clear for example, but that is not the point now.
See the border with the rounded corners. That had to be done with CSS (Cascading Style Sheets) and for this student that was a hell of a job.
But working with CSS exported from Adobe Photoshop CC, its a very simple thing.
Let us first have a look at another website.
This is a website I made some 12 years ago.
See the HTML (the source code) here. I have left out things that we do not need here, like a JavaScript that made the three paintings change form black and white to color in about two seconds.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Lineke Muller aquarellen en expositieruimte</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body bgcolor="#E3F7CE" link="#660000" vlink="#666600">
<center><p> </p>
<p><font color="#660000" size="7" face="Georgia, Times New Roman, Times, serif"><strong>Welkom op de site van</strong></font></p>
<p><font color="#660000" size="7" face="Georgia, Times New Roman, Times, serif"><strong>Lineke
Muller<br />
</strong></font></p>
<table width="700" height="300">
<tr>
<td align="center" valign="middle"><img src="1.jpg" alt="expositie aquarellen Groote Kampen Lineke Muller" width="700" height="300" title="" /></td>
</tr>
</table>
<p><font color="#660000" size="7" face="Georgia, Times New Roman, Times, serif"><strong><a href="home.htm">Enter</a></strong></font>
</p>
<p> </p>
</center>
</body>
</html>
Everything that is red refers to the lay-out of the page. bgcolor: background color.
There is a table too, used to position the three paintings.
Now what does a search engine robot find here? It finds for example (translated)
<p><font color="#660000" size="7" face="Georgia, Times New Roman, Times, serif"><strong>Welcome at the site of</strong></font></p><p><font color="#660000" size="7" face="Georgia, Times New Roman, Times, serif"><strong>Lineke Muller<br /></strong></font></p>
And what is the interesting part for this robot? Just Welcome at the site of Lineke Muller, nothing else. Just the content. Everything else, stuff concerning the lay-out, nowadays goes to the CSS. Even, or should I say above all, the table. This makes a website friendlier for these robots.
Apart from that the advantages of using CSS is that it enables me to manage the lay-out of the whole website, of all the pages, from one or two CSS documents. I can change the backgroundcolor of all the pages with just one click.
Also using CSS makes the maintenance of the site much easier.
Tip
Do a search on validate html and on validate css.
Do a search on deprecated elements.
