Validated & Standards Compliant

Trying to be cute here… The visual below is all code! It consists of HTML, CSS, and three images of which two are a boy’s hand and a girl’s hand. Their hands are two separate images aligned within the HTML using CSS.

“I prefer my women like I prefer my HTML; validated and standards compliant.”

I wrote this on Facebook earlier today haha. Then I decided (because I have nothing better to do right?) I would write up some validated and standards compliant HTML to show what I was getting at =] What we see here is HTML and CSS working together to create a visual aid for what I mean in my quote above. I wrote the HTML (Hyper Text Markup Language) using the standard declarations, document type, character encoding, open html, open header, meta data, open body, nested div tags (divider), a heading tag (h1) and a paragraph tag (p) and close tags accordingly.
I gave each of these elements a class which relates to the CSS (Cascading Style Sheet), which is what tells the elements what to do and how to appear when opened in your web browser.
To be creative I used relative to the subject matter class names and organized the syntax. For example, we open with the language (HTML), then the header which tells us the title (Boy Meets Girl), description (The process of falling in love using HTML), keywords (Boy, Girl, Love), expiration (Never) and the CSS styles (.god, .god .heading, .god h1, .love, . boy, .girl, .what-is-love, .love-is), then the body, the first and second divider, heading one, third divider, fourth divider, fifth divider, paragraph and close accordingly.
The idea behind how I organized the syntax is as follows: Love opens with a declaration and an idea of what to expect the output to be. In the head we understand the declaration should be this tall, this wide, this color or that, the background and any the role of each element in what is being declared. The output is in the body what we visually see. Each elements role renders according to the heads definition.
For this declaration the head starts by telling the body how to render the markup of the document titled “Boy Meets Girl ” which is described as “The process of falling in love using HTML”. To support this we have a few keywords for reference and an expiration date for the document. Then we have the classes of each element that we will see, classes which further define how the markup will display in the body.
Now the body opens up based on the heads input. I will name each element of the markup in the body according to it’s class which hopefully will make sense. God and God’s heading and what the heading says about love goes first. Love opens to Boy and Girl who meet under God’s heading of love. Boy and Girl are united by their absolute position within loves inherit properties from God. Boy and Girl are aligned according to these properties and make a profound statement that sits beneath their love. Curtains close.

And here is the output of the code I wrote.

See bottom for markup highlights and validation results.

Love: It always protects, trusts, hopes, perseveres.

Love is patient, love is kind. It does not envy, it does not boast, it is not proud. It does not dishonor others, it is not self-seeking, it is not easily angered, it keeps no record of wrongs. Love does not delight in evil but rejoices with the truth. It always protects, always trusts, always hopes, always perseveres. Love never fails.

Here are the images.

: Girl

: Meets

: Boy

And here’s the whole of code I wrote to get the output 🙂

I’ve highlighted classes, declarations and elements as described above so it is easier to read.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Boy Meets Girl</title>
<meta name=”description” content=”The process of falling in love using HTML“>
<meta name=”keywords” content=”Boy, Girl, Love” />
<meta name=”expires” content=”Never” />
<style type=”text/css“>
.god {
border:solid 1px red;
background:url(http://67.227.188.27/~emajenwe/blogs.dir/26/files//2013/04/1516-12489413828vTT-1-1024×767.jpg) no-repeat center bottom;
}
.god .heading {
background-color:white;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
.god h1 {
font-weight:bold !important;
font-style:inherit;
font-size:large;
text-decoration:underline;
text-transform:capitalize;
text-align:center;
padding:25px 0;
color:red;
}
.love {
height:520px;
width:301px;
margin:auto;
}
.girl {
width:131px;
height:224px;
position:absolute;
background:url(http://67.227.188.27/~emajenwe/blogs.dir/26/files//2013/04/girl.jpg) no-repeat;
margin-left:170px;
}
.boy {
width:170px;
height:224px;
position:absolute;
background:url(http://67.227.188.27/~emajenwe/blogs.dir/26/files//2013/04/boy.jpg) no-repeat;
}
.what-is-love {
padding-top:225px;
}
.love-is {
padding:25px;
background-color:white;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
</style>
</head>
<body>
<div class=”god”>
<div class=”heading”>
<h1> Love: It always protects, trusts, hopes, perseveres.</h1>
</div>
<div class=”love”>
<div class=”girl”></div>
<div class=”boy”></div>
<div class=”what-is-love”>
<p class=”love-is”>Love is patient, love is kind. It does not envy, it does not boast, it is not proud. It does not dishonor others, it is not self-seeking, it is not easily angered, it keeps no record of wrongs. Love does not delight in evil but rejoices with the truth. It always protects, always trusts, always hopes, always perseveres. Love never fails. </p>
</div>
</div>
</div>
</body>
</html>

The uploaded document was successfully checked as XHTML 1.0 Transitional. This means that the resource in question identified itself as “XHTML 1.0 Transitional” and that we successfully performed a formal validation of it. The parser implementations we used for this check are based on OpenSP (SGML/XML) and libxml2 (XML).

Blue Skies by Sandra Lunsford