HTML - rathervague random writings

Accessible Web Forms

Accessible Forms

<form>
<fieldset> 
<legend><strong>Personal Details</strong></legend>
<label for="name">Name:</label> 
<input id="name" type="text" name="name" size="30" title="Your Name" />
</fieldset>

<fieldset> 
<legend><strong>Select the fact sheets you want</strong></legend>
<input id="roses" type="checkbox" title ="rose factsheet" name="roses" value="checkbox" /> 
<label for="roses">Roses</label> 
<input id="daffodils" type="checkbox" title="daffodil factsheet" name="daffodils" value="checkbox" />
<label for="daffodils">Daffodils</label> 
<input id="tulips" type="checkbox" title="tulip factsheet" name="tulips" value="checkbox" /> 
<label for="tulips">Tulips</label>
</fieldset> 

<fieldset>
<legend><strong>Gender</strong></legend>
<input type="radio" id="male" name="gender" />
<label for="male">Male</label>
<input type="radio" id="female" name="gender" />
<label for="female">Female</label>
</fieldset>

<fieldset>
<legend><strong>Favourite City</strong></legend>
<label for="favcity">Choose your favourite city?</label>
<select id="favcity" name="favcity">
<optgroup label="Asia">
  <option value="3">Delhi</option>
  <option value="4">Hong Kong</option>
  <option value="8">Mumbai</option>
  <option value="11">Tokyo</option>
</optgroup>
<optgroup label="Europe">
  <option value="1">Amsterdam</option>
  <option value="5">London</option>
  <option value="7">Moscow</option>
</optgroup>
<optgroup label="North America">
  <option value="6">Los Angeles</option>
  <option value="9">New York</option>
</optgroup>
<optgroup label="South America">
  <option value="2">Buenos Aires</option>
  <option value="10">Sao Paulo</option>
</optgroup>
</select>
</fieldset>

<fieldset>
<legend><strong>Additional Comments</strong></legend>
<label for="comments">Comments</label><br />
<textarea id="comments" name="commenttext"></textarea>
</fieldset>
</form>

<form>

<legend><strong>Personal Details</strong></legend>

</fieldset>

<legend><strong>Select the fact sheets you want</strong></legend>

<label for="roses">Roses</label>

<label for="daffodils">Daffodils</label>

<label for="tulips">Tulips</label>

</fieldset>

<legend><strong>Gender</strong></legend>

<label for="female">Female</label>

</fieldset>

<legend><strong>Favourite City</strong></legend>

<label for="favcity">Choose your favourite city?</label>

<option value="3">Delhi</option>

<option value="8">Mumbai</option>

<option value="11">Tokyo</option>

</optgroup>

<option value="1">Amsterdam</option>

<option value="5">London</option>

<option value="7">Moscow</option>

</optgroup>

<option value="6">Los Angeles</option>

</optgroup>

<option value="2">Buenos Aires</option>

<option value="10">Sao Paulo</option>

</optgroup>

</select>

</fieldset>

<legend><strong>Additional Comments</strong></legend>

<label for="comments">Comments</label><br />

</fieldset>

</form>

HTML5 INPUT TYPES EMAIL http://www.w3.org/TR/html-markup/input.email.html E-mail RANGE http://www.w3.org/TR/html-markup/input.range.html Points URL http://www.w3.org/TR/html-markup/input.url.html Add URL PASSWORD Password SEARCH http://www.w3.org/TR/html-markup/input.search.html Search

Shadow & Rotate

Shadow

#logo{
-moz-box-shadow: 5px 5px 5px #333;
-webkit-box-shadow: 5px 5px 5px #333;
-o-box-shadow: 5px 5px 5px #333;
box-shadow: 5px 5px 5px #333;
}

#logo{

-moz-box-shadow: 5px 5px 5px #333;

-webkit-box-shadow: 5px 5px 5px #333;

-o-box-shadow: 5px 5px 5px #333;

box-shadow: 5px 5px 5px #333;

}

Shadow Text

h1{text-shadow: 2px 2px 2px #bbbbbb; }

1	h1{text-shadow: 2px 2px 2px #bbbbbb; }

h1{filter: Shadow(Color=#bbbbbb,
Direction=135,
Strength=3);
}

h1{filter: Shadow(Color=#bbbbbb,

Direction=135,

Strength=3);

}

Rotate

#logo{
-moz-transform: rotate(-7.5deg);
-o-transform: rotate(-7.5deg);
-webkit-transform: rotate(-7.5deg);
-ms-transform: rotate(-7.5deg);
transform: rotate(-7.5deg);
}

#logo{

-moz-transform: rotate(-7.5deg);

-o-transform: rotate(-7.5deg);

-webkit-transform: rotate(-7.5deg);

-ms-transform: rotate(-7.5deg);

transform: rotate(-7.5deg);

}

Rounded Border

moz-border-radius: 12px;
webkit-border-radius: 12px;
o-border-radius: 12px;
border-radius: 12px;

moz-border-radius: 12px;

webkit-border-radius: 12px;

o-border-radius: 12px;

border-radius: 12px;

Transparent Background

background-color: rgba(255,255,255,0.95);

1	background-color: rgba(255,255,255,0.95);

HTML5

HTML5 Boilerplate 3.0 http://html5boilerplate.com/

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <!-- Use the .htaccess and remove these lines to avoid edge case issues.
       More info: h5bp.com/i/378 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title></title>
  <meta name="description" content="">

  <!-- Mobile viewport optimized: h5bp.com/viewport -->
  <meta name="viewport" content="width=device-width">

  <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->

  <link rel="stylesheet" href="css/style.css">

  <!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->

  <!-- All JavaScript at the bottom, except this Modernizr build.
       Modernizr enables HTML5 elements & feature detects for optimal performance.
       Create your own custom Modernizr build: www.modernizr.com/download/ -->
  <script src="js/libs/modernizr-2.5.3.min.js"></script>
</head>
<body>
  <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
       chromium.org/developers/how-tos/chrome-frame-getting-started -->
  <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
  <header>

  </header>
  <div role="main">

  </div>
  <footer>

  </footer>


  <!-- JavaScript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>

  <!-- scripts concatenated and minified via build script -->
  <script src="js/plugins.js"></script>
  <script src="js/script.js"></script>
  <!-- end scripts -->


  
</body>
</html>

<!doctype html>

<html class="no-js" lang="en">

<head>

<!-- Use the .htaccess and remove these lines to avoid edge case issues.

More info: h5bp.com/i/378 -->

<!-- All JavaScript at the bottom, except this Modernizr build.

Modernizr enables HTML5 elements & feature detects for optimal performance.

Create your own custom Modernizr build: www.modernizr.com/download/ -->

</head>

<body>

<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.

chromium.org/developers/how-tos/chrome-frame-getting-started -->

</header>

</div>

</footer>

</body>

</html>

Popups

<a href='holiday_pay.html'
onclick="window.open(this.href,WinName,'width=300,height=300);" >
New Window
</a>

<a href='holiday_pay.html'

onclick="window.open(this.href,WinName,'width=300,height=300);" >

New Window

</a>

<a href="help/holiday_pay.html"
data-width="600"
data-height="400"
title="Holiday Pay"
class="popup" >New Window</a>

<a href="help/holiday_pay.html"

data-width="600"

data-height="400"

title="Holiday Pay"

class="popup" >New Window</a>

$(function(){
$(".popup" ).click(function(event){
event.preventDefault();
var href = $(this).attr("href" );
var width = $(this).attr("data-width" );
var height = $(this).attr("data-height" );
var popup = window.open (href,"popup" ,
"height=" + height +",width=" + width + "" );
});
});

$(function(){

$(".popup" ).click(function(event){

event.preventDefault();

var href = $(this).attr("href" );

var width = $(this).attr("data-width" );

var height = $(this).attr("data-height" );

var popup = window.open (href,"popup" ,

"height=" + height +",width=" + width + "" );

});

Tables

<table >
<tr>
<th>Item</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr>
<td>Coffee mug</td>
<td>$10.00</td>
<td>5</td>
<td>$50.00</td>
</tr>
<tr>
<td>Polo shirt</td>
<td>$20.00</td>
<td>5</td>
<td>$100.00</td>
</tr>
<tr>
<td>Red stapler</td>
<td>$9.00</td>
<td>4</td>
<td>$36.00</td>
</tr>
<tr>
<td colspan="3">Subtotal</td>
<td>$186.00</td>
</tr>
<tr>
<td colspan="3">Shipping</td>
<td>$12.00</td>
</tr>
<tr>
<td colspan="3">Total Due</td>
<td>$198.00</td>
</tr>
</table>


<style type="text/css">


table{
width: 600px;
border-collapse: collapse;
}
th, td{
border: none;
}
th{
background-color: #000;
color: #fff;
}
tr:nth-of-type(even){
background-color: #F3F3F3;
}
tr:nth-of-type(odd) {
background-color:#ddd;
}
td:nth-child(n+2){
text-align: right;
}

tr:last-child{
font-weight: bolder;
}
td:last-child{
font-weight: bolder;
}
tr:last-child td:last-child{
font-size:24px;
}
tr:nth-last-child(2){
color: green;
}
tr:nth-last-child(-n+3) td{
text-align: right;
}

</style>

<tr>

<th>Price</th>

<th>Quantity</th>

<th>Total</th>

</tr>

<tr>

<td>Coffee mug</td>

</tr>

<tr>

<td>Polo shirt</td>

</tr>

<tr>

<td>Red stapler</td>

</tr>

<tr>

<td colspan="3">Subtotal</td>

</tr>

<tr>

<td colspan="3">Shipping</td>

</tr>

<tr>

<td colspan="3">Total Due</td>

</tr>

</table>

table{

width: 600px;

border-collapse: collapse;

}

th, td{

border: none;

}

th{

background-color: #000;

color: #fff;

}

tr:nth-of-type(even){

background-color: #F3F3F3;

}

tr:nth-of-type(odd) {

background-color:#ddd;

}

td:nth-child(n+2){

text-align: right;

}

tr:last-child{

font-weight: bolder;

}

td:last-child{

font-weight: bolder;

}

tr:last-child td:last-child{

font-size:24px;

}

tr:nth-last-child(2){

color: green;

}

tr:nth-last-child(-n+3) td{

text-align: right;

}

</style>

Print Links

<a href="somewhere/index.html">Link to somewhere</a>

1	<a href="somewhere/index.html">Link to somewhere</a>

a:after {
content: " (" attr(href) ") ";
}

a:after {

content: " (" attr(href) ") ";

}

<link rel="stylesheet" href="print.css" type="text/css" media="print">

1	<link rel="stylesheet" href="print.css" type="text/css" media="print">

Mobile

@media only screen and (max-device-width: 480px) {
body{
width:460px;
}
section#sidebar, section#posts{
float: none;
width: 100%;
}
}

@media only screen and (max-device-width: 480px) {

body{

width:460px;

}

section#sidebar, section#posts{

float: none;

width: 100%;

}

Accessibility

<header id="page_header" role="banner">
<h1>AwesomeCo Blog!</h1>
</header>

<h1>AwesomeCo Blog!</h1>

</header>

<nav role="navigation">
<ul>
<li><a href="/">Latest Posts</a></li>
<li><a href="/archives">Archives</a></li>
<li><a href="/contributors">Contributors</a></li>
<li><a href="/contact">Contact Us</a></li>
</ul>
</nav>

<ul>

<li><a href="/">Latest Posts</a></li>

<li><a href="/archives">Archives</a></li>

<li><a href="/contributors">Contributors</a></li>

<li><a href="/contact">Contact Us</a></li>

</ul>

</nav>

<section id="posts" role="main">
</section>

1 2	<section id="posts" role="main"> </section>

<section id="sidebar" role="complementary">
<nav>
<h3>Archives</h3>
<ul>
<li><a href="2010/10">October 2010</a></li>
<li><a href="2010/09">September 2010</a></li>
<li><a href="2010/08">August 2010</a></li>
<li><a href="2010/07">July 2010</a></li>
<li><a href="2010/06">June 2010</a></li>
<li><a href="2010/05">May 2010</a></li>
<li><a href="2010/04">April 2010</a></li>
<li><a href="2010/03">March 2010</a></li>
<li><a href="2010/02">February 2010</a></li>
<li><a href="2010/01">January 2010</a></li>
</ul>
</nav>
</section>

<nav>

<h3>Archives</h3>

<ul>

<li><a href="2010/10">October 2010</a></li>

<li><a href="2010/09">September 2010</a></li>

<li><a href="2010/08">August 2010</a></li>

<li><a href="2010/04">April 2010</a></li>

<li><a href="2010/03">March 2010</a></li>

<li><a href="2010/02">February 2010</a></li>

<li><a href="2010/01">January 2010</a></li>

</ul>

</nav>

</section>

<footer id="page_footer" role="contentinfo">
<p>&copy; 2010 AwesomeCo.</p>
</footer>

</footer>

http://www.w3.org/wiki/PF/XTech/HTML5/RoleAttribute

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<meta name="author" content=""/>
<meta name="date" content=""/>
<meta name="copyright" content=""/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"/>
<meta http-equiv="content-style-type" content="text/css"/>
<meta http-equiv="expires" content="0"/>
<style type="text/css">

</style>
<script type="text/javascript">
<!--

// -->
</script>
</head>
<body>

</body>
</html>

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</style>

<!--

// -->

</script>

</head>

<body>

</body>

</html>

rathervague random writings

random writings by Derek Sozou

Tag Archives: HTML

Accessible Web Forms

Shadow & Rotate

HTML5

youtube timecode link

Javascript: change url

Live web page edit

xhtml webpage startup