{"id":1211,"date":"2013-04-12T18:38:36","date_gmt":"2013-04-12T22:38:36","guid":{"rendered":"http:\/\/jarodthornton.com\/bemis3lf\/?p=1211"},"modified":"2013-04-12T18:38:36","modified_gmt":"2013-04-12T22:38:36","slug":"validated-standards-compliant","status":"publish","type":"post","link":"https:\/\/jarodthornton.com\/bemis3lf\/2013\/04\/12\/validated-standards-compliant\/","title":{"rendered":"Validated & Standards Compliant"},"content":{"rendered":"

Trying to be cute here… \u00a0The visual below is all code! \u00a0It consists of HTML, CSS, and three images of which two are a boy’s hand and a girl’s hand. \u00a0Their hands are two separate images aligned within the HTML using CSS.<\/strong><\/p>\n

\n

“I prefer my women like I prefer my HTML; validated and standards compliant.”<\/h2>\n
\n

\u00a0I wrote this on Facebook earlier today haha. \u00a0Then 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 =]\nWhat we see here is HTML and CSS working together to create a visual aid for what I mean in my quote above. \u00a0 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.
\nI 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.
\nTo be creative I used relative\u00a0to the subject matter class names and organized the syntax. \u00a0For 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.
\nThe idea behind how I organized the syntax is as follows: \u00a0Love opens with a declaration and an idea of what to expect the output to be. \u00a0 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. \u00a0The output is in the body what we visually see. \u00a0Each elements role renders according to the heads definition.
\nFor 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”. \u00a0To support this we have a few keywords for reference and an expiration date for the document. \u00a0 Then we have the classes of each element that we will see, classes which further define how the markup will display in the body.
\nNow the body opens up based on the heads input. \u00a0I will name each element of the markup in the body according to it’s class which hopefully will make sense. \u00a0God and God’s heading and what the heading says about love goes first. \u00a0Love opens to Boy and Girl who meet under God’s heading of love. \u00a0Boy and Girl are united by their absolute position within loves inherit properties from God. \u00a0Boy and Girl are aligned according to these properties and make a profound statement that sits beneath their love. \u00a0Curtains close. \u00a0<\/strong><\/p>\n

\n

And here is the output of the code I wrote.<\/h2>\n

See bottom for markup highlights and validation results.<\/em><\/p>\n

\n
\n
\n

Love: It always protects, trusts, hopes, perseveres.<\/h1>\n<\/div>\n
\n
<\/div>\n
<\/div>\n
\n

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>\n<\/div>\n<\/div>\n<\/div>\n

\n

Here are the images.<\/h2>\n\n\t\t