Web App Dev Logo

Open Book Project

Validation Links

OBP Logo

To add both HTML and CSS validation links to your pages, add the following footer element to the bottom of your page's body element:

<footer>
<hr>
<a id="vLink1">
<strong> HTML </strong> Valid! </a> |
<a id="vLink2">
<strong> CSS </strong> Valid! </a>
</footer>

Then add the following script element to your page's head:

<script>
function init() {
  var loc = window.location.href;
  var HTMLvalidLinkStr = 'http://validator.w3.org/check?uri=' + loc;
  var CSSvalidLinkStr = 'http://jigsaw.w3.org/css-validator/validator?uri=' +
                        loc + '?profile=css3';
  document.getElementById("vLink1").setAttribute("href", HTMLvalidLinkStr);
  document.getElementById("vLink2").setAttribute("href", CSSvalidLinkStr);
}
window.onload = init;
</script>

Add this style to center the links:

footer {
    text-align: center;
}

Placing a vertical bar (|) between the links provides visual seperation and makes a nice minialist approach to including the links.

Here is a minimal page that has the links, footer style, and vertical bar included.

A more elaborate approach can be achived with the following styles, which combine to make CSS Buttons:

footer a {
    display: inline;
    margin-right: 10px;
    width: 50px;
    padding: 1px;
    font-size: 9px;
    font-family: Verdana, Geneva, sans-serif;
    text-decoration: none;
    text-align: center;
    color: #912;
    background-color: #DDD;
    border: 1px solid black;
    vertical-align: middle;
    white-space: nowrap;
    cursor: pointer;
}
footer a strong {
    font-weight: bold;
    color: #FFF;
    background-color: #912;
    padding-left: 2px;
    margin-right: 5px;
}
footer a:hover {
    color: #FFF;
    background-color: #912;
}
footer a:hover strong {
    color: #912;
    background-color: #DDD;
}