Archive for August, 2012

kbd Keyboard Element"> kbd Keyboard Element

The kbd element represents user input (typically keyboard input, although it may also be used to represent other input, such as voice commands). One typical use for kbd is in training manuals, instructing the student what to do. User agents typically display kbd in a monospaced (fixed-width) font. , , and are typically displayed in a similar and congruent fashion within an architecture.

When the kbd element is nested inside a samp element, it represents the input as it was echoed by the system.

When the kbd element contains a samp element, it represents input based on system output, for example invoking a menu item.

When the kbd element is nested inside another kbd element, it represents an actual key or other single unit of input as appropriate for the input mechanism.

In the following example, kbd is used to indicated keys to press:

To make George eat an apple, press Shift+F3


<p>To make George eat an apple, press <kbd><kbd>Shift</kbd>+<kbd>F3</kbd></kbd></p>

In this second example, the user is told to pick a particular menu item. The outer kbd element marks up a block of input, with the inner kbd elements representing each individual step of the input, and the samp elements inside them indicating that the steps are input based on something being displayed by the system, in this case menu labels:

To make George eat an apple, select
File

|
Eat Apple...


<p>To make George eat an apple, select <kbd><kbd><samp>File</samp></kbd>|<kbd><samp>Eat Apple...</samp></kbd></kbd></p>

Such precision isn’t necessary; the following is equally fine:

To make George eat an apple, select File | Eat Apple...


<p>To make George eat an apple, select <kbd>File | Eat Apple...</kbd></p>

Text-level Standard

a Anchor Element"> a Anchor Element

a element represents a hyperlink if the href attribute is specified; if href is not specified, a represents a placeholder for where a link might otherwise have been placed, if it had been relevant.

href, target, download, and ping affect what happens when users follow/download hyperlinks created via a.

Use rel, media, hreflang, and type to indicate to the user the nature of the target resource before the user follows the link.

Text-level Semantics

Demo Header

Strong keyword Lorizzle i’m in the shizzle dolizzle bow wow wow daahng dawg, dawg adipiscing elit. Nullam ghetto velizzle, phat volutpizzle, suscipizzle izzle, daahng dawg vizzle, break yo neck, yall. Pellentesque egizzle tortor. Crunk fo. Fizzle izzle pot dapibizzle shizzlin dizzle tempizzle pizzle. Maurizzle for sure nibh things turpizzle. We gonna chung boofron tortor. Pellentesque for sure things nisi. In hizzle habitasse platea dictumst. Gizzle check it out. Curabitizzle tellus urna, pretizzle da bomb, fizzle ac, boom shackalack vitae, nunc. My shizz suscipit. Fizzle sempizzle bling bling sizzle purus.

Phasellizzle ass volutpat tellus. Owned semper adipiscing lorizzle. Get down get down nizzle est. My shizz shizzle my nizzle crocodizzle dizzle, sheezy nizzle, accumsizzle crunk, break it down quis, pede. Izzle nizzle libero. Etizzle owned ornare ante. Maurizzle fo shizzle. Check it out izzle pede varizzle nibh commodo commodo. Lorem mofo dawg sit the bizzle, consectetuer fo shizzle mah nizzle fo rizzle, mah home g-dizzle elizzle. Funky fresh izzle mi. Quisque mi sizzle, sodalizzle izzle, daahng dawg a, brizzle a, tellivizzle.

Secondary Header

In that’s the shizzle leo boofron nisi. Pellentesque rhoncus, i saw beyonces tizzles and my pizzle went crizzle non malesuada fo shizzle, fizzle nulla aliquet sizzle, fo shizzle auctor own yo’ felizzle shizznit est. Dizzle away scelerisque augue. Break it down egestas lectizzle dawg libero. Prizzle boofron blandizzle sapizzle. Etizzle check out this, dizzle rizzle amet dope tincidunt, leo sizzle break it down uhuh … yih!, the bizzle brizzle that’s the shizzle nisi sizzle amizzle purus. Fo shizzle my nizzle hendrerit tortizzle sizzle enizzle. Uhuh … yih! fo shizzle. Mammasay mammasa mamma oo sa da bomb shizznit, convallizzle nizzle, aliquizzle things amizzle, crackalackin yippiyo, ma nizzle. Ghetto convallizzle. Phat dope ipsizzle primizzle izzle faucibizzle orci owned izzle ultricizzle posuere cubilia Curae; Gizzle eu elit boofron crazy sizzle izzle. Fusce est tortizzle, izzle dope, semper vel, you son of a bizzle bizzle, nisi. Etizzle stuff, tortizzle egizzle vehicula hizzle, lorem ghetto my shizz lorem, id viverra mi fo vitae erizzle.

Third Header

ac metus ass bow wow wow interdum aliquam. posuere. Fizzle nizzle ante. Duis leo shit, shit fo shizzle, condimentum ut, gizzle quizzle, . Vestibulum feugizzle. Tellivizzle get down get down ultricizzle shit. Quisque vulputate, orci a suscipizzle crazy, enizzle lacus ma nizzle shit, izzle eleifend away gangsta get down get down metizzle. Maecenizzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle sollicitudizzle velit. Mah nizzle fo shizzle my nizzle shizzlin dizzle, away izzle, malesuada id, bibendum varius, boofron. In iaculis, fo shizzle rizzle pretizzle hendrerit, velit uhuh … yih! posuere hizzle, a tempor justo lorizzle check it out amizzle augue. Aliquam in dawg nizzle odio fermentizzle crazy. Quisque bling bling tempor gizzle. Nam crazy hendrerizzle my shizz. The bizzle for sure. Crizzle placerat leo a for sure. Etizzle pellentesque. In hizzle habitasse ass dictumst. Crizzle izzle leo shizzle my nizzle crocodizzle dizzle tempor eleifend. Fo shizzle erat gangster, pulvinizzle quis, fringilla izzle, consectetizzle nec, mah nizzle. Shiznit vizzle daahng dawg ut neque tempizzle own yo’.

Fourth Header

Nunc boofron erizzle ut daahng dawg. Fo shizzle congue. Fo shizzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle pimpin’ dui. Quisque sizzle doggy dope eu leo volutpat condimentum. Suspendisse potenti. Break yo neck, yall at sizzle vitae fizzle tincidunt aliquizzle. Sizzle gravida tempizzle ante. In shizzlin dizzle ma nizzle izzle sizzle. Break yo neck, yall malesuada. Boom shackalack shizzlin dizzle crunk sed crunk mollizzle viverra. Nulla facilisi. Nullizzle yippiyo quizzle a dawg molestie pulvinar. Check it out sagittizzle pizzle hendrerizzle bizzle. Mofo yo metus boofron shiz. Daahng dawg pretium you son of a bizzle nizzle ghetto. Maecenizzle rutrum rhoncizzle purus.

Fifth Header

Vivamizzle tempus lacus shut the shizzle up sizzle. Izzle izzle shizznit ac ligula fizzle da bomb. Etizzle stuff pharetra hizzle. Break it down daahng dawg feugizzle yo mamma. Aliquizzle erat shizzlin dizzle. In sizzle crackalackin nisl. Pellentesque elementum fo shizzle mah nizzle fo rizzle, mah home g-dizzle at we gonna chung. Aenizzle a maurizzle. Black lorizzle justo, molestie dawg, dawg ut, molestie shizznit, mi. Nulla owned fo shizzle izzle sapizzle brizzle consequat. Integizzle things erizzle. Cras the bizzle. Morbi nisi sheezy, auctizzle dawg, for sure shizzlin dizzle, malesuada sheezy, nibh. Mammasay mammasa mamma oo sa dapibizzle ultricizzle mi. Mauris phat orci, aliquet quis, vehicula id, daahng dawg check out this, uhuh … yih!. Pizzle leo. Shiz izzle mofo izzle erat sempizzle tellivizzle. Nizzle lectus you son of a bizzle, izzle vestibulizzle, the bizzle eu, adipiscing in, ante.

Sixth Header

php Code


<?php
$title = “”;
$devsection = “Block Specific”;
$filename = “blank.html”;
$titleelement = $title . ” | ” . $devsection;
$titlename = “Standards Based Development”;
$pagecontent = “Page Content”;
require_once(“a/header.php”); ?>

html Code


<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <title>Document Title</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
    <link rel="stylesheet" href="http://dev.bowdenweb.com/a/css/sandbox01.css" type="text/css" />
    <link rel="stylesheet" href="http://dev.bowdenweb.com/a/css/dev.css" type="text/css" />
    <link rel="stylesheet" href="http://dev.bowdenweb.com/a/formalize/assets/css/formalize.css" type="text/css" />
    <meta name="title" content="Document Title | dev::bowdenWeb" />
    <meta name="description" content="Document Content Description" />
    <!--[if lt IE 9]> <script src="http:/dev.bowdenweb.com/a/js/html5.js"></script> <![endif]-->
    <style></style>
    <script></script>
  </head>
  <body>
    <div class="content">
      <header><h1 class="branding">Standards Based Development</h1><h2 class="cssbrand moarbranding">Standards Based Development</h2></header>
      <img src="http://dev.bowdenweb.com/a/i/dev/etc/bushwick-bill-and-chucky.jpg" />
      <footer>
        <p><time>13:35 Saturday 2012 08 11</time></p>
        <p><address class="vcard"><small class="copy">©2012 sonofbluerobot</small> <b class="author"><a class="em" href="http://bowdenweb.com/wp/" title="bowdenweb by J. Albert Bowden II" rel="me"><abbr title="James">j</abbr>. Albert Bowden II</a></b></address></p>
        <ul class="badges">
          <li><a class="fme" rel="me" href="http://bowdenweb.com/wp/" title="J. Albert Bowden II - Sonofbluerobot">J. Albert Bowden II - sonofbluerobot</a></li> 
          <li><a class="fwtfpl" rel="license" href="http://bowdenweb.com/wp/wtfpl.html" title="Do What the Fuck You Want Public License"><abbr title="Do What the Fuck You Want Public License">wtfpl</abbr></a> <a class="fhtml5" href="http://w3c.org/html5/logo" title="HTML5 Logo W3C"><abbr title="HyperText Markup Language Version 5">html5</abbr></a> <a class="fcss3" href="http://w3c.org/css3" title="Cascading Style Sheets Version 3 W3C"><abbr title="Cascading Style Sheets Version 3">css3</abbr></a></li>
          <li><a class="fcors" href="http://enable-cors.org/" title="Enable CORS (Cross-Origin Resource Sharing)">Enable <abbr title="Cross-Origin Resource Sharing">cors</abbr></a></li>
          <li><a class="flovevalidator" href="http://www.w3.org/QA/Tools/Donate" title="I ♥ W3C Validator Donation Program">I ♥ W3C Validator Donation Program</a></li>
          <li><a class="humanstext" href="http://bowdenweb.com/humans.txt" title="Humanoids behind bowdenweb - Humans TXT: We are People, Not Machines">Humans <abbr title="Text">txt</abbr>: We are People, Not Machines</a></li>
          <li><a class="promotemdn-docs" href="https://developer.mozilla.org/docs/" title="Web Documents by Developers, for Developers on MDN">Web Documents by Developers, for Developers on <abbr title="Mozilla Developer Network">mdn</abbr></a></li>
        </ul>
      </footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script> !window.jQuery && document.write(unescape('%3Cscript src="http://dev.bowdenweb.com/a/js/jquery-1.7.1.min.js"%3E%3C/script%3E')); </script>
<script src="http://dev.bowdenweb.com/a/formalize/assets/js/jquery.formalize.min.js"></script>
    </div>
  </body>
</html>

css Code


<style>
img{
-webkit-filter:brightness(0.2);
-moz-filter: brightness(0.2);
-o-filter: brightness(0.2);
-ms-filter: brightness(0.2);
}
</style>

JavaScript Code


<script>
window.onload = function() {
var devMenu = document.createElement("div");
devMenu.setAttribute("id","devMenu");
document.body.appendChild(devMenu);
var devMenuList = document.createElement("ul");

var link01 = document.createElement("li");
devMenuList.appendChild(link01);
var innerLink01 = document.createElement("a");
innerLink01.setAttribute("href","
javascript:
var d=document,
w=window,
e=w.getSelection,
k=d.getSelection,
x=d.selection,
s=(e?e():(k)?k():(x?x.createRange().text:0)),
f='http://www.tumblr.com/share',
l=d.location,
e=encodeURIComponent,
p='?v=3&u='+e(l.href) +'&t='+e(d.title) +'&s='+e(s),
u=f+p;try{if(!/^(.*\.)?tumblr[^.]*$/.test(l.host))throw(0);
tstbklt();
}
catch(z){
a =function(){
if(!w.open(u,'t','toolbar=0,resizable=0,status=1,width=450,height=430'))
l.href=u;};
if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else a();}void(0)");
var innerLink01Text = document.createTextNode("tumblr");
innerLink01.appendChild(innerLink01Text);
link01.appendChild(innerLink01);

var link02 = document.createElement("li");
devMenuList.appendChild(link02);
var innerLink02 = document.createElement("a");
innerLink02.setAttribute("href","http://dev.bowdenweb.com/php/wp/wp-login.php");
var innerLink02Text = document.createTextNode("wp");
innerLink02.appendChild(innerLink02Text);
link02.appendChild(innerLink02);

devMenu.appendChild(devMenuList);
}
</script>